@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/common/RichText/gulpfile.js

@@ -0,0 +1,113 @@
+/**
+ * @fileoverview 自动构建程序
+ * @author Jin Yufeng
+ */
+
+// 载入 gulp 插件
+const gulp = require('gulp')
+const htmlmin = require('gulp-htmlmin')
+const babel = require('gulp-babel')
+const uglify = require('gulp-uglify')
+const cleanCss = require('gulp-clean-css')
+const clean = require('gulp-clean')
+const gulpif = require('gulp-if')
+const plumber = require('gulp-plumber')
+const size = require('gulp-size')
+
+// 载入构建工具
+const config = require('./tools/config')
+const converter = require('./tools/converter')
+const ifdef = require('./tools/ifdef')
+const minifier = require('./tools/minifier')
+const plugin = require('./tools/plugin')
+
+// 载入环境信息
+const isDev = process.argv.includes('--dev')
+let platform = process.argv[3]
+if (!platform) {
+  throw Error('缺少平台信息')
+}
+platform = platform.substr(2)
+
+/**
+ * @description 清理文件夹
+ */
+gulp.task('clean', () => {
+  return gulp.src(`${isDev ? 'dev' : 'dist'}/${platform === 'all' ? '' : platform + '/'}*`, {
+    read: false,
+    allowEmpty: true
+  })
+    .pipe(clean())
+})
+
+/**
+ * @description 生成原生组件包（含插件）
+ * @returns {NodeJS.ReadWriteStream}
+ */
+function packComp () {
+  return gulp.src(['plugins/**/*', 'src/**/*'], {
+    nodir: true
+  })
+    // 公共处理
+    .pipe(plumber()) // 错误处理
+    .pipe(plugin.build(platform)) // 构建插件
+    .pipe(ifdef(platform)) // 条件编译
+    // wxml 处理
+    .pipe(gulpif(file => file.extname === '.wxml', minifier.wxs())) // 压缩内联 wxs
+    .pipe(gulpif(file => file.extname === '.wxml', htmlmin(config.htmlmin))) // 压缩 wxml
+    .pipe(gulpif(file => file.extname === '.html', htmlmin(Object.assign({}, config.htmlmin, { // 压缩 html
+      minifyCSS: true
+    }))))
+    // js 处理
+    .pipe(gulpif(file => file.extname === '.js' && !file.stem.includes('.min') && (platform !== 'uni-app' || file.relative.includes('static')), babel(config.babel))) // es6 转 es5
+    .pipe(gulpif(file => file.extname === '.js' && !file.stem.includes('.min') && !isDev && (platform !== 'uni-app' || file.relative.includes('static')), uglify(config.uglify))) // 压缩 js
+    // wxss（css）处理
+    .pipe(gulpif(file => file.extname.includes('ss'), cleanCss(config.cleanCss))) // 压缩 wxss
+    .pipe(plugin.importCss()) // 引入插件中的 css 文件
+    // json 处理
+    .pipe(gulpif(file => file.extname === '.json', minifier.json())) // 压缩 json
+    // 公共处理
+    .pipe(converter(platform)) // 将微信端的代码转换到各个平台
+    .pipe(gulpif(!isDev, size({
+      title: `${platform} 包生成完毕`
+    })))
+    .pipe(gulp.dest(file => {
+      return `${isDev ? 'dev' : 'dist'}/${platform}/${(platform === 'uni-app' && !file.relative.includes('components') && !file.relative.includes('static')) || (platform !== 'uni-app' && isDev) ? 'components/mp-html/' : ''}`
+    }))
+}
+
+gulp.task('build', gulp.series('clean', packComp))
+
+/**
+ * @description 生成原生示例项目
+ * @returns {NodeJS.ReadWriteStream}
+ */
+function packDemo () {
+  return gulp.src(['tools/demo/**/*', 'test/content.js'], {
+    nodir: true
+  })
+    .pipe(ifdef(platform))
+    .pipe(gulpif(platform !== 'uni-app', converter(platform)))
+    .pipe(gulp.dest(`dev/${platform}/`))
+}
+
+gulp.task('dev', gulp.series('clean', gulp.parallel(packComp, packDemo)))
+
+/**
+ * @description 监听文件变化
+ */
+gulp.task('watch-demo', () => {
+  gulp.watch(['tools/demo/**/*', 'test/content.js']).on('all', (type, file) => {
+    console.log(type + ':' + file)
+    packDemo()
+  })
+})
+
+gulp.task('watch-comp', () => {
+  gulp.watch(['src/**/*', 'src/common/**/*', 'plugins/**/*']).on('all', (type, file) => {
+    console.log(type + ':' + file)
+    packComp()
+  })
+})
+
+gulp.task('watch', gulp.parallel('watch-demo', 'watch-comp'))

package/components/common/RichText/lint.js

@@ -0,0 +1,63 @@
+const fs = require('fs')
+const glob = require('glob')
+const standard = require('standard')
+
+// 解析参数
+let fix = false
+let mode = '**/*.@(js|vue)'
+for (let i = 2; i < process.argv.length; i++) {
+  if (process.argv[i] === '--fix') {
+    fix = true
+  } else {
+    mode = process.argv[i]
+  }
+}
+
+// 检查 js 文件
+function lintJs (filePath, content) {
+  const res = standard.lintTextSync(content, {
+    global: ['App', 'Page', 'Component', 'wx', 'requirePlugin', 'uni', 'test', 'expect', 'plus', 'Image'],
+    fix
+  }).results
+  // 写回修复的内容
+  if (fix && res[0].output) {
+    fs.writeFileSync(filePath, res[0].output)
+  }
+  // 打印错误信息
+  for (let i = 0; i < res[0].messages.length; i++) {
+    const item = res[0].messages[i]
+    console.log(filePath + ':' + item.line + ':' + item.column + ': ' + item.message)
+  }
+}
+
+// 检查 vue 文件
+function lintVue (filePath, content) {
+  // 提取 script 部分
+  const script = content.match(/<script>([\s\S]+?)<\/script>/)
+  const line = content.substr(0, script.index).split('\n').length - 1
+  const res = standard.lintTextSync(script[1], {
+    global: ['uni', 'plus', 'weex'],
+    fix
+  }).results
+  // 写回修复的内容
+  if (fix && res[0].output) {
+    fs.writeFileSync(filePath, content.replace(/<script>[\s\S]+?<\/script>/, '<script>' + res[0].output + '</script>'))
+  }
+  // 打印错误信息
+  for (let i = 0; i < res[0].messages.length; i++) {
+    const item = res[0].messages[i]
+    console.log(filePath + ':' + (line + item.line) + ':' + item.column + ': ' + item.message)
+  }
+}
+
+glob(mode, {
+  ignore: ['node_modules/**', 'coverage/**', 'dist/**', 'dev/**', '**/*.min.js']
+}, (_, files) => {
+  for (let i = 0; i < files.length; i++) {
+    if (files[i].includes('.js')) {
+      lintJs(files[i], fs.readFileSync(files[i], 'utf-8'))
+    } else if (files[i].includes('.vue')) {
+      lintVue(files[i], fs.readFileSync(files[i], 'utf-8'))
+    }
+  }
+})

package/components/common/RichText/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "mp-html",
+  "version": "2.5.0",
+  "description": "小程序富文本组件",
+  "miniprogram": "dist/mp-weixin",
+  "repository": "https://github.com/jin-yufeng/mp-html",
+  "author": "Jin Yufeng",
+  "license": "MIT",
+  "keywords": [
+    "miniprogram",
+    "rich-text",
+    "html"
+  ],
+  "standard": {
+    "globals": ["App", "Page", "Component", "wx", "requirePlugin", "uni", "plus", "weex"],
+    "envs": ["jest", "browser"]
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "collectCoverageFrom": [
+      "dev/mp-weixin/components/mp-html/**/*.js"
+    ]
+  },
+  "scripts": {
+    "lint": "node lint.js",
+    "lintcss": "npx stylelint src/**/*.wxss",
+    "build:weixin": "gulp build --mp-weixin",
+    "build:qq": "gulp build --mp-qq",
+    "build:baidu": "gulp build --mp-baidu",
+    "build:alipay": "gulp build --mp-alipay",
+    "build:toutiao": "gulp build --mp-toutiao",
+    "build:uni-app": "gulp build --uni-app",
+    "build": "gulp build --mp-weixin & gulp build --mp-qq & gulp build --mp-baidu & gulp build --mp-alipay & gulp build --mp-toutiao & gulp build --uni-app",
+    "watch:weixin": "gulp watch --mp-weixin --dev",
+    "watch:qq": "gulp watch --mp-qq --dev",
+    "watch:baidu": "gulp watch --mp-baidu --dev",
+    "watch:alipay": "gulp watch --mp-alipay --dev",
+    "watch:toutiao": "gulp watch --mp-toutiao --dev",
+    "watch:uni-app": "gulp watch --uni-app --dev",
+    "dev:weixin": "gulp dev --mp-weixin --dev",
+    "dev:qq": "gulp dev --mp-qq --dev",
+    "dev:baidu": "gulp dev --mp-baidu --dev",
+    "dev:alipay": "gulp dev --mp-alipay --dev",
+    "dev:toutiao": "gulp dev --mp-toutiao --dev",
+    "dev:uni-app": "gulp dev --uni-app --dev",
+    "test": "gulp dev --mp-weixin --dev && npx jest",
+    "coverage": "gulp dev --mp-weixin --dev && npx jest --coverage",
+    "coveralls": "npx coveralls < coverage/lcov.info",
+    "clean": "gulp clean --all",
+    "clean:dev": "gulp clean --all --dev"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.12.1",
+    "coveralls": "^3.1.0",
+    "gulp": "^4.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-clean": "^0.4.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-htmlmin": "^5.0.1",
+    "gulp-if": "^3.0.0",
+    "gulp-plumber": "^1.2.1",
+    "gulp-size": "^3.0.0",
+    "gulp-uglify": "^2.1.2",
+    "jest": "^26.6.1",
+    "miniprogram-simulate": "^1.2.7",
+    "standard": "^16.0.3",
+    "stylelint": "^13.7.2",
+    "stylelint-config-recess-order": "^2.3.0",
+    "stylelint-config-standard": "^20.0.0",
+    "through2": "^4.0.2",
+    "uglify-js": "^2.8.29"
+  },
+  "dependencies": {}
+}

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

@@ -0,0 +1,2 @@
+# 插件  
+本目录下是一些扩展插件，可以按照需要选用以实现更加丰富的功能  

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

@@ -0,0 +1,25 @@
+# audio
+功能：音乐播放器  
+大小：*≈4KB*  
+支持平台：  
+
+| 微信小程序 | QQ 小程序 | 百度小程序 | 支付宝小程序 | 头条小程序 | uni-app |
+|:---:|:---:|:---:|:---:|:---:|:---:|
+| √ | √ | √ | √ | √ | √(nvue 不支持) |
+
+百度小程序原生包在此 [问题](https://smartprogram.baidu.com/forum/topic/show/125787) 未解决前无法使用  
+
+说明：  
+在大多数小程序平台，*audio* 标签已被废弃或无法使用，本插件可以代替 *audio* 标签播放音乐，并实现以下优化：  
+1. *pause-video* 属性也可以应用于音频，即播放一个音视频时可以自动暂停其他正在播放的音视频  
+2. 增加了一个可以拖动的进度条  
+3. 组件大小可以根据页面宽度自动调整  
+4. 支持 *autoplay* 属性  
+5. 播放被后台打断时，页面显示后自动继续播放  
+
+基础库要求：  
+支付宝 *1.23.4+* ，其余平台满足最低要求即可  
+第 *5* 条仅微信 *2.2.3+* 、*QQ*、百度支持  
+
+?> 如果希望页面上使用本组件，组件的路径为 *path/to/mp-html/audio/audio*  
+属性和事件基本同 *audio* 组件，组件实例上提供了 *setSrc*、*play*、*seek*、*pause*、*stop* 方法可供控制播放状态  

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

@@ -0,0 +1,11 @@
+module.exports = {
+  usingComponents: {
+    'my-audio': '../audio/audio'
+  },
+  handler (file) {
+    // 删去原来的 audio 标签
+    if (file.basename === 'node.wxml' || file.basename === 'node.vue') {
+      file.contents = Buffer.from(file.contents.toString().replace(/<audio[\s\S]+?>/, ''))
+    }
+  }
+}

package/components/common/RichText/plugins/audio/context.js

@@ -0,0 +1,7 @@
+const ctx = {}
+
+module.exports = {
+  get: id => ctx[id],
+  set: (id, vm) => { ctx[id] = vm },
+  remove: id => { ctx[id] = undefined }
+}

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

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview audio 插件
+ */
+const context = require('./context')
+let index = 0
+
+function Audio (vm) {
+  this.vm = vm
+}
+
+Audio.prototype.onUpdate = function () {
+  this.audios = []
+}
+
+Audio.prototype.onParse = function (node) {
+  if (node.name === 'audio') {
+    if (!node.attrs.id) {
+      node.attrs.id = 'a' + index++
+    }
+    this.audios.push(node.attrs.id)
+  }
+}
+
+Audio.prototype.onLoad = function () {
+  setTimeout(() => {
+    for (let i = 0; i < this.audios.length; i++) {
+      const ctx = context.get(this.audios[i])
+      ctx.id = this.audios[i]
+      this.vm._videos.push(ctx)
+    }
+  }, 500)
+}
+
+module.exports = Audio

package/components/common/RichText/plugins/audio/miniprogram/audio.js

@@ -0,0 +1,189 @@
+/**
+ * @fileoverview audio 组件
+ */
+const context = require('./context')
+
+Component({
+  data: {
+    time: '00:00'
+  },
+  properties: {
+    name: String, // 音乐名
+    author: String, // 作者
+    poster: String, // 海报图片地址
+    autoplay: Boolean, // 是否自动播放
+    controls: Boolean, // 是否显示控件
+    loop: Boolean, // 是否循环播放
+    src: { // 源地址
+      type: String,
+      observer (src) {
+        this.setSrc(src)
+      }
+    }
+  },
+  created () {
+    // 创建内部 context
+    this._ctx = wx.createInnerAudioContext()
+    this._ctx.onError(err => {
+      this.setData({
+        error: true
+      })
+      this.triggerEvent('error', err)
+    })
+    this._ctx.onTimeUpdate(() => {
+      const time = this._ctx.currentTime
+      const min = parseInt(time / 60)
+      const sec = Math.ceil(time % 60)
+      const data = {}
+      data.time = (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec)
+      // 不在拖动状态下需要更新进度条
+      if (!this.lastTime) {
+        data.value = time / this._ctx.duration * 100
+      }
+      this.setData(data)
+    })
+    this._ctx.onEnded(() => {
+      if (!this.properties.loop) {
+        this.setData({
+          playing: false
+        })
+      }
+    })
+    // #ifndef ALIPAY
+  },
+  attached () {
+    context.set(this.id, this)
+    // #endif
+    // #ifdef MP-ALIPAY
+    context.set(this.properties.id, this)
+    this.setSrc(this.properties.src)
+    // #endif
+  },
+  // #ifdef MP-ALIPAY
+  didUpdate (e) {
+    if (e.src !== this.properties.src) {
+      this.setSrc(this.properties.src)
+    }
+  },
+  // #endif
+  detached () {
+    this._ctx.destroy()
+    // #ifndef MP-ALIPAY
+    context.remove(this.id)
+    // #endif
+    // #ifdef MP_ALIPAY
+    context.remove(this.properties.id)
+    // #endif
+  },
+  // #ifndef ALIPAY | TOUTIAO
+  pageLifetimes: {
+    show () {
+      // 播放被后台打断时，页面显示后自动继续播放
+      if (this.data.playing && this._ctx.paused) {
+        this._ctx.play()
+      }
+    }
+  },
+  // #endif
+  methods: {
+    /**
+     * @description 设置源
+     * @param {string} src 源地址
+     */
+    setSrc (src) {
+      this._ctx.autoplay = this.properties.autoplay
+      this._ctx.loop = this.properties.loop
+      this._ctx.src = src
+      if (this.properties.autoplay && !this.data.playing) {
+        this.setData({
+          playing: true
+        })
+      }
+    },
+
+    /**
+     * @description 播放音乐
+     */
+    play () {
+      this._ctx.play()
+      this.setData({
+        playing: true
+      })
+      this.triggerEvent('play'
+        // #ifdef MP-ALIPAY
+        , {
+          target: {
+            id: this.props.id
+          }
+        }
+        // #endif
+      )
+    },
+
+    /**
+     * @description 暂停音乐
+     */
+    pause () {
+      this._ctx.pause()
+      this.setData({
+        playing: false
+      })
+      this.triggerEvent('pause')
+    },
+
+    /**
+     * @description 设置播放速率
+     * @param {Number} rate 播放速率
+     */
+    playbackRate (rate) {
+      this._ctx.playbackRate = rate
+    },
+
+    /**
+     * @description 停止音乐
+     */
+    stop () {
+      this._ctx.stop()
+      this.setData({
+        playing: false,
+        time: '00:00'
+      })
+      this.triggerEvent('stop')
+    },
+
+    /**
+     * @description 控制进度
+     * @param {number} sec 秒数
+     */
+    seek (sec) {
+      this._ctx.seek(sec)
+    },
+
+    /**
+     * @description 移动进度条
+     * @param {event} e
+     * @private
+     */
+    _seeking (e) {
+      // 避免过于频繁 setData
+      if (e.timeStamp - this.lastTime < 200) return
+      const time = Math.round(e.detail.value / 100 * this._ctx.duration)
+      const min = parseInt(time / 60)
+      const sec = time % 60
+      this.setData({
+        time: (min > 9 ? min : '0' + min) + ':' + (sec > 9 ? sec : '0' + sec)
+      })
+      this.lastTime = e.timeStamp
+    },
+
+    /**
+     * @description 进度条移动完毕
+     * @param {event} e
+     * @private
+     */
+    _seeked (e) {
+      this._ctx.seek(e.detail.value / 100 * this._ctx.duration)
+      this.lastTime = undefined
+    }
+  }
+})

package/components/common/RichText/plugins/audio/miniprogram/audio.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/components/common/RichText/plugins/audio/miniprogram/audio.wxml

@@ -0,0 +1,17 @@
+<view wx:if="{{controls}}" class="_contain">
+  <!-- 海报和按钮 -->
+	<view class="_poster" style="background-image:url('{{poster}}')">
+		<view class="_button" bindtap="{{playing?'pause':'play'}}">
+			<view class="{{playing?'_pause':'_play'}}" />
+		</view>
+  </view>
+  <!-- 曲名和作者 -->
+	<view class="_title">
+		<view class="_name">{{name||'未知音频'}}</view>
+		<view class="_author">{{author||'未知作者'}}</view>
+  </view>
+  <!-- 进度条 -->
+  <slider class="_slider" activeColor="#585959" block-size="12" disabled="{{error}}" value="{{value}}" bindchanging="_seeking" bindchange="_seeked" />
+  <!--播放时间-->
+  <view class="_time">{{time}}</view>
+</view>

package/components/common/RichText/plugins/audio/miniprogram/audio.wxss

@@ -0,0 +1,127 @@
+/* 顶层容器 */
+._contain {
+  position: relative;
+  display: inline-flex;
+  width: 290px;
+  background-color: #fcfcfc;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+}
+
+/* 播放、暂停按钮 */
+._button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  background-color: rgb(0, 0, 0, 0.2);
+  border: 1px solid white;
+  border-radius: 50%;
+  opacity: 0.9;
+}
+
+._play {
+  margin-left: 2px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 8px solid white;
+}
+
+._pause {
+  width: 8px;
+  height: 8px;
+  background-color: white;
+}
+
+/* 海报 */
+._poster {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  height: 70px;
+  background-color: #e6e6e6;
+  background-size: contain;
+}
+
+/* 标题栏 */
+._title {
+  flex: 1;
+  margin: 4px 0 0 14px;
+  text-align: left;
+}
+
+._author {
+  width: 45px;
+  font-size: 12px;
+  color: #888;
+}
+
+._name {
+  width: 140px;
+  font-size: 15px;
+  line-height: 39px;
+}
+
+._author,
+._name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 进度条 */
+._slider {
+  position: absolute;
+  right: 16px;
+  bottom: 8px;
+  width: 140px;
+  margin: 0;
+}
+
+/* 播放时间 */
+._time {
+  margin: 7px 14px 0 0;
+  font-size: 12px;
+  color: #888;
+}
+
+/* 响应式布局，大屏幕用更大的尺寸 */
+@media (min-width: 400px) {
+  ._contain {
+    width: 380px;
+  }
+
+  ._button {
+    width: 26px;
+    height: 26px;
+  }
+
+  ._poster {
+    width: 90px;
+    height: 90px;
+  }
+
+  ._author {
+    width: 60px;
+    font-size: 15px;
+  }
+
+  ._name {
+    width: 180px;
+    font-size: 19px;
+    line-height: 55px;
+  }
+
+  ._slider {
+    right: 20px;
+    bottom: 10px;
+    width: 180px;
+  }
+
+  ._time {
+    font-size: 15px;
+  }
+}

package/components/common/RichText/plugins/audio/miniprogram/build.js

@@ -0,0 +1,3 @@
+module.exports = {
+  template: '<my-audio wx:if="{{n.name==\'audio\'}}" id="{{n.attrs.id}}" class="{{n.attrs.class}}" style="{{n.attrs.style}}" author="{{n.attrs.author}}" controls="{{n.attrs.controls}}" autoplay="{{n.attrs.autoplay}}" loop="{{n.attrs.loop}}" name="{{n.attrs.name}}" poster="{{n.attrs.poster}}" src="{{n.src[ctrl[i]||0]}}" data-i="{{i}}" data-source="audio" bindplay="play" binderror="mediaError" />'
+}