@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/common/RichText/tools/minifier.js

@@ -0,0 +1,40 @@
+const uglify = require('uglify-js')
+const through2 = require('through2')
+
+/**
+ * @description 压缩内联 wxs 脚本
+ */
+function wxs () {
+  return through2.obj(function (file, _, callback) {
+    if (file.isBuffer()) {
+      file.contents = Buffer.from(file.contents.toString().replace(/<wxs(.*?)>([\s\S]+?)<\/wxs>/, (_, $1, $2) => {
+        return `<wxs${$1}>${uglify.minify($2, {
+          fromString: true,
+          mangle: {
+            toplevel: true
+          }
+        }).code}</wxs>`
+      }))
+    }
+    this.push(file)
+    callback()
+  })
+}
+
+/**
+ * @description 压缩 json 文件
+ */
+function json () {
+  return through2.obj(function (file, _, callback) {
+    if (file.isBuffer()) {
+      file.contents = Buffer.from(JSON.stringify(JSON.parse(file.contents.toString())))
+    }
+    this.push(file)
+    callback()
+  })
+}
+
+module.exports = {
+  wxs,
+  json
+}

package/components/common/RichText/tools/plugin.js

@@ -0,0 +1,248 @@
+/**
+ * @fileoverview 处理插件
+ */
+const path = require('path')
+const through2 = require('through2')
+
+const config = require('./config')
+
+config.plugins.sort((a, b) => {
+  // editable 置于最后面
+  if (a === 'editable') return 1
+  if (b === 'editable') return -1
+  // markdown 置于最前面
+  if (a === 'markdown') return -1
+  if (b === 'markdown') return 1
+  // 剩余任意顺序
+  return 0
+})
+
+// 提取和替换标签名选择器（组件中仅支持 class 选择器）
+const tagSelector = {}
+let tagI = 0
+if (config.externStyle) {
+  config.externStyle = config.externStyle.replace(/[^,\s}]+(?=[^}]*{)/g, $ => {
+    if (!/[a-zA-Z_]/.test($[0])) return $
+    if (tagSelector[$]) return '.' + tagSelector[$]
+    tagSelector[$] = '_' + tagI++
+    return '.' + tagSelector[$]
+  })
+}
+
+module.exports = {
+  /**
+   * @description 构建插件
+   * @param {string} platform 使用平台
+   */
+  build (platform) {
+    const builds = {} // 构建模块
+    let pluginImports = '' // 插件引入
+    let plugins = '' // 插件列表
+    let voidTags = '' // 增加的自闭合标签
+    let wxml = '' // 要引入到 node.wxml 中的内容
+    let js = '' // 要引入到 node.js 中的内容
+    let wxss = config.externStyle // 要引入到 node.wxss 中的内容
+    const json = {} // 要引入到 node.json 中的内容
+
+    // 收集插件中要写入模板文件的内容
+    for (let i = 0; i < config.plugins.length; i++) {
+      const plugin = config.plugins[i]
+      let build = {}
+      try {
+        // 专用 build
+        if (platform === 'uni-app') {
+          build = require(`../plugins/${plugin}/uni-app/build.js`)
+        } else {
+          build = require(`../plugins/${plugin}/miniprogram/build.js`)
+        }
+      } catch (e) { }
+      try {
+        // 通用 build
+        build = Object.assign(require(`../plugins/${plugin}/build.js`), build)
+      } catch (e) { }
+      // 可以在当前平台使用
+      if (!build.platform || build.platform.includes(platform)) {
+        builds[plugin] = build
+        if (platform === 'uni-app') {
+          plugins += plugin.replace(/-([a-z])/g, ($, $1) => $1.toUpperCase()) + ','
+          pluginImports += `import ${plugin.replace(/-([a-z])/g, ($, $1) => $1.toUpperCase())} from './${plugin}/${build.main ? build.main : 'index.js'}'\n`
+        } else {
+          plugins += `require('./${plugin}/${build.main ? build.main : 'index.js'}'),`
+        }
+        if (build.template) {
+          wxml += build.template.replace('wx:if', 'wx:elif').replace('v-if', 'v-else-if')
+        }
+        if (build.methods) {
+          for (const method in build.methods) {
+            js += build.methods[method].toString() + ','
+          }
+        }
+        if (build.usingComponents) {
+          Object.assign(json, build.usingComponents)
+        }
+        if (build.style) {
+          wxss += build.style
+        }
+      }
+    }
+
+    // 加入其他自定义标签
+    for (const item of config.customElements) {
+      if (platform === 'uni-app') {
+        if (item.platforms) {
+          wxml += '<!-- #ifdef ' + item.platforms.join(' || ').toUpperCase() + ' -->'
+        }
+        voidTags += item.name + ','
+        wxml += '<' + item.name + ' v-else-if="n.name==\'' + item.name + '\'" :class="n.attrs.class" :style="n.attrs.style"'
+        if (item.attrs) {
+          for (const attr of item.attrs) {
+            wxml += ' :' + attr + '="n.attrs'
+            if (attr.includes('-')) {
+              wxml += '[\'' + attr + '\']"'
+            } else {
+              wxml += '.' + attr + '"'
+            }
+          }
+        }
+        wxml += ' />'
+        if (item.platforms) {
+          wxml += '<!-- #endif -->'
+        }
+      } else if (!item.platforms || item.platforms.join(',').toLowerCase().includes(platform)) {
+        voidTags += item.name + ','
+        wxml += '<' + item.name + ' wx:elif="{{n.name==\'' + item.name + '\'}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}"'
+        if (item.attrs) {
+          for (const attr of item.attrs) {
+            wxml += ' ' + attr + '="{{n.attrs'
+            if (attr.includes('-')) {
+              wxml += '[\'' + attr + '\']}}"'
+            } else {
+              wxml += '.' + attr + '}}"'
+            }
+          }
+        }
+        wxml += ' />'
+      }
+    }
+
+    return through2.obj(function (file, _, callback) {
+      if (file.isBuffer()) {
+        // src 目录
+        if (file.base.includes('src')) {
+          let content = file.contents.toString()
+          if (file.basename === 'index.js' || file.basename === 'mp-html.vue') {
+            // 注册插件列表
+            if (platform === 'uni-app') {
+              content = content.replace(/const\s*plugins\s*=\s*\[\]/, `${pluginImports}const plugins=[${plugins}]`)
+            } else {
+              content = content.replace(/plugins\s*=\s*\[\]/, `plugins=[${plugins}]`)
+            }
+          } else if (file.basename === 'parser.js') {
+            // 设置标签名选择器
+            content = content.replace(/tagSelector\s*=\s*{}/, `tagSelector=${JSON.stringify(tagSelector)}`)
+            // 设置自闭合标签
+              .replace(/voidTags\s*:\s*makeMap\('/, 'voidTags: makeMap(\'' + voidTags)
+          } else if (file.basename === 'node.wxml') {
+            // 引入模板
+            content = content.replace(/<!--\s*insert\s*-->/, wxml)
+          } else if (file.basename === 'node.js') {
+            // 引入方法
+            content = content.replace(/methods\s*:\s*{/, 'methods:{' + js)
+          } else if (file.basename === 'node.wxss') {
+            // 引入样式
+            content = wxss + content
+          } else if (file.basename === 'node.json') {
+            // 引入组件声明
+            const comps = JSON.stringify(json).slice(1, -1)
+            if (comps) {
+              content = content.replace(/"usingComponents"\s*:\s*{/, '"usingComponents":{' + comps + ',')
+            }
+          } else if (file.basename === 'node.vue') {
+            // 引入 vue
+            content = content.replace(/<!--\s*insert\s*-->/, wxml)
+              .replace(/methods\s*:\s*{/, 'methods:{' + js)
+              .replace('<style>', '<style>' + wxss.replace(/\.[a-zA-Z_][^)}]*?[{,]/g, '/deep/ $&')).replace(/,url/g, ', url')
+            let importComp = ''
+            let comps = ''
+            for (let item in json) {
+              const val = json[item]
+              // 插件无法通过这种方式引入
+              if (val.includes('plugin://')) continue
+              item = item.replace(/-([a-z])/g, (_, $1) => $1.toUpperCase())
+              importComp += 'import ' + item + " from '" + val + "'\n"
+              comps += item + ',\n'
+            }
+            content = content.replace('<script>', '<script>\n' + importComp)
+              .replace(/components\s*:\s*{/, 'components: {\n' + comps)
+          } else if (file.basename === 'local.html' && wxss) {
+            // 引入样式
+            content = '<style>' + wxss + '</style>' + content
+          }
+          file.contents = Buffer.from(content)
+          for (const item in builds) {
+            if (builds[item].handler) {
+              builds[item].handler(file, platform)
+            }
+          }
+        } else {
+          // plugins 目录
+          const name = file.relative.split(path.sep)[0]
+          const build = builds[name]
+          // 本平台不支持使用
+          if (!build || file.extname === '.md' || file.basename === 'build.js') {
+            callback()
+            return
+          }
+          // import
+          if (build.import) {
+            if (typeof build.import === 'string') {
+              if (file.relative.includes(build.import)) {
+                file.import = true
+              }
+            } else {
+              for (let i = 0; i < build.import.length; i++) {
+                if (file.relative.includes(build.import[i])) {
+                  file.import = true
+                  break
+                }
+              }
+            }
+          }
+          if (build.handler) {
+            build.handler(file, platform)
+          }
+        }
+      }
+      this.push(file)
+      callback()
+    })
+  },
+  /**
+   * @description 引入样式文件到 node.wxss 中
+   */
+  importCss () {
+    let css = ''
+    return through2.obj(function (file, _, callback) {
+      if (file.isBuffer()) {
+        let content = file.contents.toString()
+        // 要被引入的文件
+        if (file.import) {
+          css += content
+          callback()
+          return
+        }
+        // 引入到对应位置
+        if (file.basename === 'node.wxss') {
+          content = css + content
+        } else if (file.basename === 'node.vue') {
+          content = content.replace('<style>', '<style>' + css.replace(/\.[a-z_][^)}]+?[{,]/g, '/deep/ $&')).replace(/,url/g, ', url')
+        } else if (file.basename === 'local.html' && css) {
+          content = '<style>' + css + '</style>' + content
+        }
+        file.contents = Buffer.from(content)
+      }
+      this.push(file)
+      callback()
+    })
+  }
+}

package/components/common/Toast/index-web.ts

@@ -0,0 +1,122 @@
+/* eslint-disable no-case-declarations */
+import vue from '../../../adapter-vue';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import TOAST_TYPE from './type';
+import MessageConstructor from './index-web.vue';
+//@ts-ignore
+import { vueVersion } from '../../../adapter-vue-web';
+import { VNode } from 'vue';
+//@ts-ignore
+const { createVNode, render } = vue;
+
+interface IToast {
+  message: string;
+  type: string;
+  offset?: number;
+  duration?: number;
+  onClose?(): void;
+}
+
+interface IToastReturnType {
+  close?(): void;
+}
+
+const instances: any[] = [];
+let seed = 1;
+
+const vueVersionInt = Math.trunc(vueVersion);
+const appendTo: HTMLElement | null = document.body;
+
+const Toast = function (options: IToast): IToastReturnType {
+  let verticalOffset = options.offset || 20;
+  instances.forEach(({ vm }: any) => {
+    verticalOffset += (vm?.el?.offsetHeight || vm?.$el?.offsetHeight || 0) + 20;
+  });
+  verticalOffset += 20;
+  const id = `message_${(seed += 1)}`;
+  const userOnClose = options.onClose;
+  const props: any = {
+    zIndex: 20 + seed,
+    offset: verticalOffset,
+    id,
+    ...options,
+    onClose: () => {
+      Toast.close(id, userOnClose);
+    },
+  };
+  let vm: { component: any; props: any; data: any };
+  let container: HTMLDivElement;
+  switch (vueVersionInt) {
+    case 2:
+      const Vue = TUIGlobal?.Vue;
+      if (!Vue) {
+        return {};
+      }
+      const Constructor = Vue.extend(MessageConstructor);
+      const instance = new Constructor({ propsData: props });
+      instance.$mount();
+      appendTo.appendChild(instance.$el);
+      instance.$el.style.zIndex = props.zIndex;
+      instance.verticalOffset = props.verticalOffset;
+      instance.visible = true;
+      instances.push({ vm: instance });
+      return {
+        close: () => {
+          instance.visible = false;
+        },
+      };
+    case 3:
+      // @ts-ignore
+      vm = createVNode(MessageConstructor, props);
+      container = document.createElement('div');
+      vm?.props
+      && (vm.props!.onDestroy = () => {
+        render(null, container);
+      });
+      vm?.data
+      && (vm.data!.onDestroy = () => {
+        render(null, container);
+      });
+      // @ts-ignore
+      render(vm, container);
+      instances.push({ vm });
+      appendTo.appendChild(container.firstElementChild!);
+      return {
+        close: () => {
+          vm?.component?.proxy && (vm.component!.proxy.visible = false);
+        },
+      };
+  }
+  return {};
+};
+
+export function close(id: string, userOnClose?: (vm: VNode) => void): void {
+  const idx = instances?.findIndex(
+    ({ vm }: any) => id === vm?.component?.props?.id || id === vm?._props?.id,
+  );
+  if (idx === -1) return;
+  const { vm } = instances[idx];
+  if (!vm) return;
+  userOnClose?.(vm);
+  const removedHeight = vm?.el?.offsetHeight || vm?.$el?.offsetHeight;
+  instances.splice(idx, 1);
+  // adjust other instances vertical offset
+  const len = instances.length;
+  if (len < 1) return;
+  for (let i = idx; i < len; i++) {
+    const pos
+      = Number.parseInt(
+        instances[i]?.vm?.el?.style?.top || instances[i]?.vm?.$el?.style?.top,
+        10,
+      )
+      - removedHeight
+      - 16;
+    instances[i]?.vm?.component?.props?.offset
+    && (instances[i].vm.component!.props.offset = pos);
+    instances[i]?.vm?._props?.offset && (instances[i].vm._props.offset = pos);
+  }
+}
+
+Toast.close = close;
+
+export { Toast, TOAST_TYPE };

package/components/common/Toast/index-web.vue

@@ -0,0 +1,178 @@
+<template>
+  <transition
+    name="fade"
+    @after-leave="$emit('destroy')"
+  >
+    <div
+      v-show="visible"
+      class="message"
+      :class="[handleStyle(type), isH5 && 'message-h5']"
+      :style="customStyle"
+    >
+      <p v-if="!isH5">
+        {{ message }}
+      </p>
+      <span v-if="isH5">{{ message }}</span>
+    </div>
+  </transition>
+</template>
+<script lang="ts" setup>
+import vue from '../../../adapter-vue';
+import { isH5 } from '../../../utils/env';
+import TOAST_TYPE from './type';
+const { computed, onMounted, ref, watch } = vue;
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  repeatNum: {
+    type: Number,
+    default: 1,
+  },
+  id: {
+    type: String,
+    default: '',
+  },
+  onClose: {
+    type: Function,
+    required: false,
+  },
+  offset: {
+    type: Number,
+    default: 20,
+  },
+  zIndex: {
+    type: Number,
+    default: 0,
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const visible = ref(false);
+let timer: any;
+
+const startTimer = () => {
+  if (props.duration > 0) {
+    timer = setTimeout(() => {
+      if (visible.value) {
+        close();
+      }
+    }, props.duration);
+  }
+};
+
+const clearTimer = () => {
+  clearTimeout(timer);
+};
+
+const close = () => {
+  visible.value = false;
+  if (typeof props.onClose === 'function') {
+    props.onClose();
+  }
+};
+
+watch(
+  () => props.repeatNum,
+  () => {
+    clearTimer();
+    startTimer();
+  },
+);
+
+const customStyle = computed<CSSProperties>(() => ({
+  top: `${props.offset}px`,
+  zIndex: props.zIndex,
+}));
+
+onMounted(() => {
+  startTimer();
+  visible.value = true;
+});
+
+const handleStyle = (type?: string) => {
+  if (
+    type
+      && (type === TOAST_TYPE.ERROR
+      || type === TOAST_TYPE.SUCCESS
+      || type === TOAST_TYPE.WARNING)
+  )
+    return type;
+  return TOAST_TYPE.NORMAL;
+};
+</script>
+<style lang="scss" scoped>
+@import "../common";
+
+.message {
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  max-width: 450px;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    padding: 10px 15px;
+    width: fit-content;
+    word-break: break-all;
+  }
+}
+
+.message-h5 {
+  position: absolute;
+  top: 20px !important;
+  margin: 0 auto;
+  max-width: 80%;
+  width: fit-content;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  padding: 10px 15px;
+
+  span {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 14px;
+    letter-spacing: 0;
+    text-align: center;
+    word-break: break-all;
+  }
+}
+
+.success {
+  border: 1px solid #e4f2da;
+  background: #f2f9ec;
+  color: #7ebf50;
+}
+
+.error {
+  border: 1px solid #fde2e2;
+  background: #fef0f0;
+  color: #f46c6e;
+}
+
+.normal {
+  border: 1px solid #e9e9eb;
+  background: #f4f4f5;
+  color: #909398;
+}
+
+.warning {
+  border: 1px solid #faf0e2;
+  background: #fdf8f1;
+  color: #e4b877;
+}
+</style>

package/components/common/Toast/type.ts

@@ -0,0 +1,8 @@
+const TOAST_TYPE = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  NORMAL: 'normal',
+};
+
+export default TOAST_TYPE;

package/components/common/common.scss

@@ -0,0 +1,59 @@
+body, div, ul, ol, dt, dd, li, dl, h1, h2, h3, h4, p {
+  margin:0;
+  padding:0;
+  font-style:normal;
+
+  /* font:12px/22px"\5B8B\4F53",Arial,Helvetica,sans-serif; */
+}
+
+ol, ul, li {
+  list-style:none;
+}
+
+img {
+  border:0;
+  vertical-align:middle;
+  pointer-events:none;
+}
+
+body {
+  color:#000;
+  background:#FFF;
+}
+
+.clear {
+  clear:both;
+  height:1px;
+  width:100%;
+  overflow:hidden;
+  margin-top:-1px;
+}
+
+a {
+  color:#000;
+  text-decoration:none;
+  cursor: pointer;
+}
+
+a:hover {
+  text-decoration:none;
+}
+
+input, textarea {
+  user-select: auto;
+}
+
+input:focus, input:active, textarea:focus, textarea:active {
+  outline: none;
+}
+
+.chat-aside {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  box-sizing: border-box;
+  width: 360px !important;
+  border-radius: 8px 0 0 8px;
+  z-index: 9999;
+  max-height: calc(100% - 50px);
+}

package/components/customer-icon.vue

@@ -0,0 +1,56 @@
+<template>
+  <!--本地 icon 资源, uniapp 打包到 app 仅支持标签 image, 打包小程序和 H5 均可支持标签 img -->
+  <div class="common-icon-container">
+    <image
+      v-if="isApp"
+      class="common-icon"
+      :src="props.src"
+      :style="{ width: props.width, height: props.height }"
+    />
+    <img
+      v-else
+      class="common-icon"
+      :src="props.src"
+      :style="{ width: props.width, height: props.height }"
+    >
+  </div>
+</template>
+<script lang="ts">
+import { isApp } from '../utils/env';
+
+interface Props {
+  src: string;
+  width?: string;
+  height?: string;
+}
+
+export default {
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: String,
+      default: '16px',
+    },
+    height: {
+      type: String,
+      default: '16px',
+    },
+  },
+  setup(props: Props) {
+    return {
+      props,
+      isApp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.common-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>