@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/common/RichText/plugins/style/index.js

@@ -0,0 +1,129 @@
+/**
+ * @fileoverview style 插件
+ */
+// #ifndef APP-PLUS-NVUE
+const Parser = require('./parser')
+// #endif
+
+function Style () {
+  this.styles = []
+}
+
+// #ifndef APP-PLUS-NVUE
+Style.prototype.onParse = function (node, vm) {
+  // 获取样式
+  if (node.name === 'style' && node.children.length && node.children[0].type === 'text') {
+    this.styles = this.styles.concat(new Parser().parse(node.children[0].text))
+  } else if (node.name) {
+    // 匹配样式（对非文本标签）
+    // 存储不同优先级的样式 name < class < id < 后代
+    let matched = ['', '', '', '']
+    for (let i = 0, len = this.styles.length; i < len; i++) {
+      const item = this.styles[i]
+      let res = match(node, item.key || item.list[item.list.length - 1])
+      let j
+      if (res) {
+        // 后代选择器
+        if (!item.key) {
+          j = item.list.length - 2
+          for (let k = vm.stack.length; j >= 0 && k--;) {
+            // 子选择器
+            if (item.list[j] === '>') {
+              // 错误情况
+              if (j < 1 || j > item.list.length - 2) break
+              if (match(vm.stack[k], item.list[j - 1])) {
+                j -= 2
+              } else {
+                j++
+              }
+            } else if (match(vm.stack[k], item.list[j])) {
+              j--
+            }
+          }
+          res = 4
+        }
+        if (item.key || j < 0) {
+          // 添加伪类
+          if (item.pseudo && node.children) {
+            let text
+            item.style = item.style.replace(/content:([^;]+)/, (_, $1) => {
+              text = $1.replace(/['"]/g, '')
+                // 处理 attr 函数
+                .replace(/attr\((.+?)\)/, (_, $1) => node.attrs[$1.trim()] || '')
+                // 编码 \xxx
+                .replace(/\\(\w{4})/, (_, $1) => String.fromCharCode(parseInt($1, 16)))
+              return ''
+            })
+            const pseudo = {
+              name: 'span',
+              attrs: {
+                style: item.style
+              },
+              children: [{
+                type: 'text',
+                text
+              }]
+            }
+            if (item.pseudo === 'before') {
+              node.children.unshift(pseudo)
+            } else {
+              node.children.push(pseudo)
+            }
+          } else {
+            matched[res - 1] += item.style + (item.style[item.style.length - 1] === ';' ? '' : ';')
+          }
+        }
+      }
+    }
+    matched = matched.join('')
+    if (matched.length > 2) {
+      node.attrs.style = matched + (node.attrs.style || '')
+    }
+  }
+}
+
+/**
+ * @description 匹配样式
+ * @param {object} node 要匹配的标签
+ * @param {string|string[]} keys 选择器
+ * @returns {number} 0：不匹配；1：name 匹配；2：class 匹配；3：id 匹配
+ */
+function match (node, keys) {
+  function matchItem (key) {
+    if (key[0] === '#') {
+      // 匹配 id
+      if (node.attrs.id && node.attrs.id.trim() === key.substr(1)) return 3
+    } else if (key[0] === '.') {
+      // 匹配 class
+      key = key.substr(1)
+      const selectors = (node.attrs.class || '').split(' ')
+      for (let i = 0; i < selectors.length; i++) {
+        if (selectors[i].trim() === key) return 2
+      }
+    } else if (node.name === key) {
+      // 匹配 name
+      return 1
+    }
+    return 0
+  }
+
+  // 多选择器交集
+  if (keys instanceof Array) {
+    let res = 0
+    for (let j = 0; j < keys.length; j++) {
+      const tmp = matchItem(keys[j])
+      // 任意一个不匹配就失败
+      if (!tmp) return 0
+      // 优先级最大的一个作为最终优先级
+      if (tmp > res) {
+        res = tmp
+      }
+    }
+    return res
+  }
+
+  return matchItem(keys)
+}
+// #endif
+
+module.exports = Style

package/components/common/RichText/plugins/style/parser.js

@@ -0,0 +1,175 @@
+const blank = {
+  ' ': true,
+  '\n': true,
+  '\t': true,
+  '\r': true,
+  '\f': true
+}
+
+function Parser () {
+  this.styles = []
+  this.selectors = []
+}
+
+/**
+ * @description 解析 css 字符串
+ * @param {string} content css 内容
+ */
+Parser.prototype.parse = function (content) {
+  new Lexer(this).parse(content)
+  return this.styles
+}
+
+/**
+ * @description 解析到一个选择器
+ * @param {string} name 名称
+ */
+Parser.prototype.onSelector = function (name) {
+  // 不支持的选择器
+  if (name.includes('[') || name.includes('*') || name.includes('@')) return
+  const selector = {}
+  // 伪类
+  if (name.includes(':')) {
+    const info = name.split(':')
+    const pseudo = info.pop()
+    if (pseudo === 'before' || pseudo === 'after') {
+      selector.pseudo = pseudo
+      name = info[0]
+    } else return
+  }
+
+  // 分割交集选择器
+  function splitItem (str) {
+    const arr = []
+    let i, start
+    for (i = 1, start = 0; i < str.length; i++) {
+      if (str[i] === '.' || str[i] === '#') {
+        arr.push(str.substring(start, i))
+        start = i
+      }
+    }
+    if (!arr.length) {
+      return str
+    } else {
+      arr.push(str.substring(start, i))
+      return arr
+    }
+  }
+
+  // 后代选择器
+  if (name.includes(' ')) {
+    selector.list = []
+    const list = name.split(' ')
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].length) {
+        // 拆分子选择器
+        const arr = list[i].split('>')
+        for (let j = 0; j < arr.length; j++) {
+          selector.list.push(splitItem(arr[j]))
+          if (j < arr.length - 1) {
+            selector.list.push('>')
+          }
+        }
+      }
+    }
+  } else {
+    selector.key = splitItem(name)
+  }
+
+  this.selectors.push(selector)
+}
+
+/**
+ * @description 解析到选择器内容
+ * @param {string} content 内容
+ */
+Parser.prototype.onContent = function (content) {
+  // 并集选择器
+  for (let i = 0; i < this.selectors.length; i++) {
+    this.selectors[i].style = content
+  }
+  this.styles = this.styles.concat(this.selectors)
+  this.selectors = []
+}
+
+/**
+ * @description css 词法分析器
+ * @param {object} handler 高层处理器
+ */
+function Lexer (handler) {
+  this.selector = ''
+  this.style = ''
+  this.handler = handler
+}
+
+Lexer.prototype.parse = function (content) {
+  this.i = 0
+  this.content = content
+  this.state = this.blank
+  for (let len = content.length; this.i < len; this.i++) {
+    this.state(content[this.i])
+  }
+}
+
+Lexer.prototype.comment = function () {
+  this.i = this.content.indexOf('*/', this.i) + 1
+  if (!this.i) {
+    this.i = this.content.length
+  }
+}
+
+Lexer.prototype.blank = function (c) {
+  if (!blank[c]) {
+    if (c === '/' && this.content[this.i + 1] === '*') {
+      this.comment()
+      return
+    }
+    this.selector += c
+    this.state = this.name
+  }
+}
+
+Lexer.prototype.name = function (c) {
+  if (c === '/' && this.content[this.i + 1] === '*') {
+    this.comment()
+    return
+  }
+  if (c === '{' || c === ',' || c === ';') {
+    this.handler.onSelector(this.selector.trimEnd())
+    this.selector = ''
+    if (c !== '{') {
+      while (blank[this.content[++this.i]]);
+    }
+    if (this.content[this.i] === '{') {
+      this.floor = 1
+      this.state = this.val
+    } else {
+      this.selector += this.content[this.i]
+    }
+  } else if (blank[c]) {
+    this.selector += ' '
+  } else {
+    this.selector += c
+  }
+}
+
+Lexer.prototype.val = function (c) {
+  if (c === '/' && this.content[this.i + 1] === '*') {
+    this.comment()
+    return
+  }
+  if (c === '{') {
+    this.floor++
+  } else if (c === '}') {
+    this.floor--
+    if (!this.floor) {
+      this.handler.onContent(this.style)
+      this.style = ''
+      this.state = this.blank
+      return
+    }
+  }
+  this.style += c
+}
+
+module.exports = Parser

package/components/common/RichText/plugins/template/README.md

@@ -0,0 +1,2 @@
+# 模板
+这是一个插件模板，需要开发插件时，可以从这个模板开始  

package/components/common/RichText/plugins/template/build.js

@@ -0,0 +1,65 @@
+/**
+ * @description 插件构建文件模板
+ */
+
+module.exports = {
+  /**
+   * @description 入口文件
+   * @type {String}
+   * @default 'index.js'
+   */
+  main: 'index.js',
+  /**
+   * @description 支持的平台
+   * @type {String[]}
+   * @default ['mp-weixin','mp-qq','mp-baidu','mp-alipay','mp-toutiao','uni-app']
+   */
+  platform: ['mp-weixin', 'mp-qq', 'mp-baidu', 'mp-alipay', 'mp-toutiao', 'uni-app'],
+  /**
+   * @description 要被添加到模板文件中的标签（将被添加到 src/node/node.wxml）
+   * 必须要有 wx:if 表明什么情况下使用该标签
+   * n 表示标签结构体，<node> 标签用于递归显示子节点（可参考源文件中的写法）
+   * @type {String}
+   */
+  template: '',
+  /**
+   * @description 用于处理模板中事件的方法（将被添加到 src/node/node.js）
+   * 需要触发顶层组件的事件请使用 this.root.triggerEvent
+   * @type {Object}
+   */
+  methods: {
+
+  },
+  /**
+   * @description 用于模板文件的 css 样式（将被添加到 src/node/node.wxss）
+   * @type {String}
+   */
+  style: '',
+  /**
+   * @description 要被引入到模板文件的 css 文件路径（将被添加到 src/node/node.wxss）
+   * @type {String|String[]}
+   */
+  import: [],
+  /**
+   * @description 在模板中需要使用的组件或插件列表（将被添加到 src/node/node.json）
+   * @type {Object}
+   */
+  usingComponents: {
+
+  },
+  /**
+   * @description 自定义文件处理器
+   * 如果上述处理还无法满足要求，可以在此方法中进行处理
+   * 所有 src 目录下的文件和本插件目录下的文件都会经过此方法的处理
+   * @param {Vinyl} file 关于该文件对象的格式可参考 https://github.com/gulpjs/vinyl#instance-methods
+   * @param {String} platform 平台
+   */
+  handler (file, platform) {
+    let content = file.contents.toString()
+    // 进行处理
+    if (platform === 'xxx') {
+      content = content.replace('aaa', 'bbb')
+    }
+    file.contents = Buffer.from(content)
+  }
+}

package/components/common/RichText/plugins/template/index.js

@@ -0,0 +1,67 @@
+/**
+ * @fileoverview 插件入口文件模板
+ */
+
+const data = {} // 全局数据
+
+/**
+ * @description 组件被创建时将实例化插件
+ * @param {Component} vm 组件实例
+ */
+function Plugin (vm) {
+  this.vm = vm // 保存实例在其他周期使用
+  this.compData = {} // 仅在单个组件中使用的数据
+  data.xxx = 'xxx' // 记录全局数据
+}
+
+/**
+ * @description html 数据更新时触发
+ * @param {string} content 要更新的 html 字符串
+ * @param {object} config 解析配置
+ * @returns {string|void} 如果要对 html 字符串进行一些预处理，则返回处理后的字符串
+ */
+Plugin.prototype.onUpdate = function (content, config) {
+  config.ignoreTags.xxx = true // 移除 xxx 标签
+  // 对 html 内容进行预处理并返回修改，没有修改则不需要返回
+  return content
+}
+
+/**
+ * @description 解析到一个标签时触发
+ * @param {object} node 标签
+ * @param {object} parser 解析器实例
+ * @returns {boolean|void} 如果返回 false 将移除该标签
+ */
+Plugin.prototype.onParse = function (node, parser) {
+  // 处理文本标签
+  if (node.type === 'text') {
+    // node.text 文本内容
+  } else {
+    // 处理元素标签
+    // node.name 标签名
+    // node.attrs 属性列表
+    // node.children 子节点（非自闭合标签有）
+
+    if (node.name === 'xxx') {
+      parser.expose() // 如果该标签不能被 rich-text 包含，需要调用此方法暴露出来
+      // parser.options 组件传入的一些解析属性
+      // parser.stack 可以从栈中获取祖先节点
+    }
+  }
+}
+
+/**
+ * @description dom 树加载完毕时触发（load 事件）
+ */
+Plugin.prototype.onLoad = function () {
+  // 可以获取媒体 context 对象等
+}
+
+/**
+ * @description 组件被移除时触发
+ */
+Plugin.prototype.onDetached = function () {
+  // 可以释放一些必要的资源（计时器等）
+}
+
+module.exports = Plugin

package/components/common/RichText/plugins/txv-video/README.md

@@ -0,0 +1,18 @@
+# txv-video
+功能：使用腾讯视频  
+大小：*≈1KB*  
+支持平台：  
+
+| 微信小程序 | QQ 小程序 | 百度小程序 | 支付宝小程序 | 头条小程序 | uni-app |
+|:---:|:---:|:---:|:---:|:---:|:---:|
+| √ | √ |   |   |   | √ (h5 和 app 直接支持) |
+
+说明：  
+引入本插件后，*html* 中符合下方格式的 *iframe* 标签（*src* 中含有 *vid*）将被转为通过腾讯视频播放：  
+```html
+<iframe src="https://v.qq.com/txp/iframe/player.html?vid=xxxxxx" allowFullScreen="true"></iframe>
+```
+
+同时，其可以被 *pause-video* 属性控制  
+
+!> 本插件仅用于将官方 [腾讯视频插件](https://github.com/tvfe/txv-miniprogram-plugin) 应用于本组件，仅在微信和 *qq* 平台有效，使用前请确认已经成功申请使用该插件并按要求在小程序 *app.json* 中配置完成，否则可能报错 **This application has not registered any plugins yet** 且无法生效  

package/components/common/RichText/plugins/txv-video/build.js

@@ -0,0 +1,3 @@
+module.exports = {
+  platform: ['mp-weixin', 'mp-qq', 'uni-app']
+}

package/components/common/RichText/plugins/txv-video/index.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview txv-video 插件
+ * Include txv-video (https://github.com/tvfe/txv-miniprogram-plugin)
+ */
+const TxvVideo = function (vm) {
+  this.vm = vm
+}
+
+// #ifdef MP-WEIXIN || MP-QQ
+try {
+  const TxvContext = requirePlugin('tencentvideo')
+
+  TxvVideo.prototype.onLoad = function () {
+    setTimeout(() => {
+      for (let i = 0; i < this.videos.length; i++) {
+        const ctx = TxvContext.getTxvContext(this.videos[i])
+        ctx.id = this.videos[i]
+        this.vm._videos.push(ctx)
+      }
+    }, 50)
+  }
+} catch (e) {
+  console.error('使用txv-video扩展需注册腾讯视频插件')
+}
+
+TxvVideo.prototype.onUpdate = function (_, config) {
+  config.trustTags['txv-video'] = true
+  this.videos = []
+}
+
+TxvVideo.prototype.onParse = function (node, parser) {
+  if (node.name === 'iframe' && (node.attrs.src || '').includes('vid')) {
+    const vid = node.attrs.src.match(/vid=([^&\s]+)/)
+    if (vid) {
+      node.name = 'txv-video'
+      node.attrs.vid = vid[1]
+      this.videos.push(vid[1])
+      node.attrs.src = undefined
+      parser.expose()
+    }
+  }
+}
+
+// #endif
+
+module.exports = TxvVideo

package/components/common/RichText/plugins/txv-video/miniprogram/build.js

@@ -0,0 +1,6 @@
+module.exports = {
+  template: '<txv-video wx:if="{{n.name==\'txv-video\'}}" vid="{{n.attrs.vid}}" playerid="{{n.attrs.vid}}" id="{{n.attrs.vid}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" controls data-i="{{i}}" bindplay="play" binderror="mediaError" />',
+  usingComponents: {
+    'txv-video': 'plugin://tencentvideo/video'
+  }
+}

package/components/common/RichText/plugins/txv-video/uni-app/build.js

@@ -0,0 +1,3 @@
+module.exports = {
+  template: '<txv-video v-if="n.name==\'txv-video\'" :vid="n.attrs.vid" :playerid="n.attrs.vid" :id="n.attrs.vid" :class="n.attrs.class" :style="n.attrs.style" controls :data-i="i" @play="play" @error="mediaError" />'
+}