添加代码模块

im-admin-ui/src/views/im/code/components/alink.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="content">
+    <div class="code-content-wrap">
+      <textarea id="NormalCodeTextarealink1" class="code" rows="1">{{ siteUrl }}/chat/index</textarea>
+      <div class="other-wrap">
+        <a class="btn btn-blue btn-large mr10" :href="linkUrl3" target="_blank">点击体验</a>
+        <a class="btn btn-blue btn-large" href="javascript:void(0);" @click="getCopy('NormalCodeTextarealink1')"><span>复制代码</span></a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Alink',
+
+  props: {
+    tokeninfo: {},
+    siteUrl: ''
+  },
+  computed: {
+    linkUrl1() {
+      return `${location.origin}/chat/index?token=${this.tokeninfo.token_md5}&noCanClose=1`;
+    },
+    linkUrl2() {
+      return `${location.origin}/chat/index?token=${this.tokeninfo.token_md5}&noCanClose=1&deviceType=Mobile`;
+    },
+    linkUrl3() {
+      return `${location.origin}/chat/index?token=${this.tokeninfo.token_md5}&noCanClose=1`;
+    }
+  },
+  mounted() {},
+  methods: {
+    getCopy(id) {
+      this.$emit('cgetCopy', id);
+    }
+  }
+};
+</script>

im-admin-ui/src/views/im/code/components/wangye.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="content">
+    <p class="font-w">使用简介</p>
+    <p class="text-i">网页内快速接入客服，让网页拥有客服窗口，请把一下代码复制到网页最底部。</p>
+    <Divider />
+    <p class="typetitle">获取代码</p>
+
+    <div class="fenlei">
+      <div class="code-content-wrap">
+        <textarea id="NormalCodeTextarea1" class="code" rows="22">
+<script>
+  (function() {
+  _s = document.createElement('script');
+  _s.src="{{ siteUrl }}/customerServer.js"
+  _s.onload = function(){
+  var option = {
+        "authInit":true,
+        openUrl: '{{ siteUrl }}',
+        isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true
+        mobileIcon: '', //  手机端悬浮客服图片
+        pcIcon: '', // pc端悬浮客服图片
+        windowStyle:'center',//默认空 右下角小弹窗， center 普通中间弹窗样式
+      };
+      var canCustomerServer = new initCustomerServer(option);
+      canCustomerServer.init();
+  }
+  document.head.appendChild(_s)
+  })();
+</script>
+            </textarea
+        >
+        <div class="other-wrap">
+          <a class="btn btn-blue btn-large mr10" href="javascript:void(0);" @click="jiazai">点击体验</a>
+          <a class="btn btn-blue btn-large" href="javascript:void(0);" @click="getCopy('NormalCodeTextarea1')"><span>复制代码</span></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps<{
+  tokeninfo?: any;
+  siteUrl?: string;
+}>();
+
+const emit = defineEmits<{ (e: 'cgetCopy', id: string): void }>();
+
+function jiazai() {
+  const token = props.tokeninfo?.token_md5 || '';
+  window.open(`${location.origin}/chat/index?token=${token}&noCanClose=1`);
+}
+
+function getCopy(id: string) {
+  emit('cgetCopy', id);
+}
+</script>
+<style>
+.a {
+  display: none;
+  display: block;
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>

im-admin-ui/src/views/im/code/index.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="getCode_container">
+    <div class="content">
+      <el-card shadow="never">
+        <el-collapse v-model="activeName" accordion>
+          <el-collapse-item title="超链接" name="1">
+            <alink :tokeninfo="token" :site-url="siteUrl" @cget-copy="getCopy"></alink>
+          </el-collapse-item>
+          <el-collapse-item title="网页内嵌" name="2">
+            <wangye :tokeninfo="token" :site-url="siteUrl" @cget-copy="getCopy"></wangye>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, getCurrentInstance } from 'vue';
+// import { useStore } from 'vuex';
+// import { adminAppCustomer, appReset } from '@/api/kefu';
+import alink from './components/alink.vue';
+import wangye from './components/wangye.vue';
+// import kaifa from './components/kaifa';
+// import setting from './components/setting';
+
+const activeName = ref('1');
+
+const { proxy } = getCurrentInstance() as any;
+
+// const store = useStore();
+// const isMobile = computed(() => store.state.media?.isMobile);
+// const categoryId = computed(() => store.state.userLevel?.categoryId);
+// const labelWidth = computed(() => (isMobile.value ? undefined : 75));
+// const labelPosition = computed(() => (isMobile.value ? 'top' : 'left'));
+
+const token = ref<any>('');
+const canfrime = ref(false);
+const srcUrl = ref(`${location.origin}/customerServer.js`);
+const siteUrl = ref(`${location.origin}`);
+const cloneTip = ref(false);
+const canCustomerServer = ref('');
+
+const linkUrl = computed(() => `${location.origin}/chat/index?token=${token.value?.token_md5}&noCanClose=1`);
+
+// onMounted(() => {
+//   getAdminAppCustomer();
+// });
+
+// async function getAdminAppCustomer() {
+//   try {
+//     const mod: any = await import('@/api/kefu');
+//     if (mod && typeof mod.adminAppCustomer === 'function') {
+//       const res: any = await mod.adminAppCustomer();
+//       if (res.status === 200 && res.data?.list?.length) {
+//         token.value = res.data.list[0];
+//       }
+//     }
+//   } catch (e) {
+//     // ignore if module not present
+//   }
+// }
+
+function resetToken() {
+  canfrime.value = true;
+}
+
+// async function confirme() {
+//   if (!token.value?.id) return;
+//   try {
+//     const mod: any = await import('@/api/kefu');
+//     if (mod && typeof mod.appReset === 'function') {
+//       const res: any = await mod.appReset(token.value.id);
+//       if (res?.status === 200) {
+//         token.value = { ...token.value, token: res.data.token };
+//         proxy?.$Message?.success('token 已重置');
+//       }
+//     }
+//   } catch (e) {
+//     // ignore
+//   }
+//   canfrime.value = false;
+// }
+
+function cancel() {
+  canfrime.value = false;
+}
+
+function getCopy(id: string) {
+  const elem = document.getElementById(id);
+  if (!elem) return;
+  const content = copyToClipboard(elem as HTMLElement);
+  if (content) cloneTip.value = true;
+}
+
+function copyToClipboard(elem: HTMLElement) {
+  const targetId = '_hiddenCopyText_';
+  let target: HTMLTextAreaElement | HTMLInputElement | null = null as any;
+  const tagName = elem.tagName;
+  const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA';
+  let origSelectionStart: number | undefined;
+  let origSelectionEnd: number | undefined;
+
+  if (isInput) {
+    target = elem as HTMLInputElement;
+    origSelectionStart = (elem as HTMLInputElement).selectionStart as number;
+    origSelectionEnd = (elem as HTMLInputElement).selectionEnd as number;
+  } else {
+    target = document.getElementById(targetId) as HTMLTextAreaElement;
+    if (!target) {
+      target = document.createElement('textarea');
+      target.style.position = 'absolute';
+      target.style.left = '-9999px';
+      target.style.top = '0';
+      target.id = targetId;
+      document.body.appendChild(target);
+    }
+    target.textContent = elem.textContent || '';
+  }
+
+  const currentFocus = document.activeElement as HTMLElement | null;
+  target.focus();
+  (target as HTMLTextAreaElement).setSelectionRange(0, (target as HTMLTextAreaElement).value.length);
+
+  let succeed = false;
+  try {
+    succeed = document.execCommand('copy');
+  } catch (e) {
+    succeed = false;
+  }
+
+  if (currentFocus && typeof currentFocus.focus === 'function') {
+    currentFocus.focus();
+  }
+
+  if (isInput && target) {
+    (elem as HTMLInputElement).setSelectionRange(origSelectionStart as number, origSelectionEnd as number);
+  } else if (target) {
+    target.textContent = '';
+  }
+
+  proxy?.$Message?.success('已成功复制到粘贴板');
+  return succeed;
+}
+</script>
+
+<style>
+.getCode_container {
+  .content {
+    width: 100%;
+    color: #323437;
+    background: #ffffff;
+    margin-top: 18px;
+    font-size: 13px;
+    padding: 10px;
+  }
+  .font-w {
+    font-weight: 800;
+    margin: 10px 0;
+  }
+
+  .text-i {
+    text-indent: 2em;
+  }
+
+  .content > p {
+    margin-bottom: 6px;
+  }
+
+  .code-content-wrap {
+    clear: both;
+    border: 1px solid #e4e4e4;
+    border-radius: 3px;
+    padding: 12px 17px;
+    background-color: #f8f8f8;
+  }
+
+  .other-wrap {
+    margin: 4px 0;
+    text-align: right;
+  }
+
+  .textarea {
+    border: none;
+    /* height: 40px; */
+    width: 100%;
+    outline: 0;
+    resize: none;
+    background-color: #f8f8f8;
+    font-family: Arial;
+    color: #323437;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  .code {
+    border: none;
+    /* height: 40px; */
+    width: 100%;
+    outline: 0;
+    resize: none;
+    background-color: #f8f8f8;
+    font-family: Arial;
+    color: #323437;
+    line-height: 24px;
+    text-align: left;
+  }
+
+  .btn {
+    display: inline-block;
+    zoom: 1;
+    padding: 6px 16px;
+    border: 1px solid #d9dbdc;
+    border-radius: 2px;
+    line-height: 1;
+    color: #323437;
+    cursor: pointer;
+    outline: 0;
+  }
+
+  .btn.btn-blue {
+    color: #fff;
+    background-color: #4f97e7;
+    border-color: #3085e3;
+  }
+
+  .setting-highlight {
+    color: #f15755;
+    margin-left: 5px;
+    line-height: 30px;
+  }
+  .fenlei {
+    margin: 10px 0;
+    border: 1px solid #eee;
+    padding: 30px;
+    padding-bottom: 10px;
+    border-radius: 6px;
+  }
+  .typetitle {
+    padding: 4px 7px;
+    font-size: 18px;
+  }
+}
+</style>
+<style scoped>
+.ivu-modal-confirm {
+  display: flex;
+  align-items: center;
+}
+.modimg {
+  width: 40px !important;
+  height: 40px !important;
+  margin-right: 30px;
+}
+</style>

im-admin-ui/src/views/im/customer/index.vue

@@ -111,7 +111,7 @@
   </div>
 </template>
 
-<script setup name="User" lang="ts">
+<script setup name="Customer" lang="ts">
 import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd } from '@/api/im/user/customer';
 import { UserVO, UserQuery, UserForm } from '@/api/im/user/types';
 import { to } from 'await-to-js';