UNPKG

@tencentcloud/ai-desk-customer-uniapp

Version:

uni-app Vue UIKit for AI Desk

745 lines (738 loc) 28.1 kB
/* global getTop */ module.exports = { style: `/* #ifndef H5 || MP-ALIPAY || APP-PLUS */ ._address, ._article, ._aside, ._body, ._caption, ._center, ._cite, ._footer, ._header, ._html, ._nav, ._pre, ._section { display: block; } /* #endif */ ._video { width: 300px; height: 225px; display: inline-block; background-color: black; }`, methods: { /** * @description 开始编辑文本 * @param {Event} e */ editStart (e) { if (this.opts[5]) { const i = e.currentTarget.dataset.i if (!this.ctrl['e' + i] && this.opts[5] !== 'simple') { // 显示虚线框 this.$set(this.ctrl, 'e' + i, 1) setTimeout(() => { this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0)) }, 50) this.root._edit = this this.i = i this.cursor = this.childs[i].text.length } else { if (this.opts[5] === 'simple') { this.root._edit = this this.i = i this.cursor = this.childs[i].text.length } this.root._mask.pop() this.root._maskTap() // 将 text 转为 textarea this.$set(this.ctrl, 'e' + i, 2) // 延时对焦,避免高度错误 setTimeout(() => { this.$set(this.ctrl, 'e' + i, 3) }, 50) } } }, /** * @description 输入文本 * @param {Event} e */ editInput (e) { const i = e.target.dataset.i // 替换连续空格 const value = e.detail.value.replace(/ {2,}/, $ => { let res = '\xa0' for (let i = 1; i < $.length; i++) { res += '\xa0' } return res }) this.root._editVal(`${this.opts[7]}.${i}.text`, this.childs[i].text, value) // 记录编辑历史 this.cursor = e.detail.cursor }, /** * @description 完成编辑文本 * @param {Event} e */ editEnd (e) { const i = e.target.dataset.i this.$set(this.ctrl, 'e' + i, 0) // 更新到视图 this.root._setData(`${this.opts[7]}.${i}.text`, e.detail.value.replace(/ {2}/g, '\xa0 ')) if (e.detail.cursor !== undefined) { this.cursor = e.detail.cursor } }, /** * @description 插入一个标签 * @param {Object} node 要插入的标签 */ insert (node) { setTimeout(() => { const childs = this.childs.slice(0) if (!childs[this.i]) { childs.push(node) } else if (childs[this.i].text) { // 在文本中插入 const text = childs[this.i].text if (node.type === 'text') { if (this.cursor) { childs[this.i].text = text.substring(0, this.cursor) + node.text + text.substring(this.cursor) } else { childs[this.i].text += node.text } } else { const list = [] if (this.cursor) { list.push({ type: 'text', text: text.substring(0, this.cursor) }) } list.push(node) if (this.cursor < text.length) { list.push({ type: 'text', text: text.substring(this.cursor) }) } childs.splice(this.i, 1, ...list) } } else { childs.splice(parseInt(this.i) + 1, 0, node) } this.root._editVal(this.opts[7], this.childs, childs, true) this.i = parseInt(this.i) + 1 }, 200) }, /** * @description 移除第 i 个标签 * @param {Number} i */ remove (i) { const arr = this.childs.slice(0) const delEle = arr.splice(i, 1)[0] if (delEle.name === 'img' || delEle.name === 'video' || delEle.name === 'audio') { let src = delEle.attrs.src if (delEle.src) { src = delEle.src.length === 1 ? delEle.src[0] : delEle.src } this.root.$emit('remove', { type: delEle.name, src }) } this.root._edit = undefined this.root._maskTap() this.root._editVal(this.opts[7], this.childs, arr, true) }, /** * @description 标签被点击 * @param {Event} e */ nodeTap (e) { if (this.opts[5]) { if (this.root._lock) return this.root._lock = true setTimeout(() => { this.root._lock = false }, 50) if (this.ctrl['e' + this.i] === 3) return this.root._maskTap() this.root._edit = this if (this.opts[5] === 'simple') return let start = this.opts[7].lastIndexOf('children.') if (start !== -1) { start += 9 } else { start = 6 } const i = parseInt(this.opts[7].substring(start, this.opts[7].lastIndexOf('.children'))) let parent = this.$parent while (parent && parent.$options.name !== 'node') { parent = parent.$parent } let remove = () => { parent.remove(i) } if (this.opts[7].length - parent.opts[7].length > 15) { const parts = this.opts[7].split('.') let childs = parent.childs const i = parseInt(parts[parent.opts[7].split('.').length]) const oldParent = parent // 删除整个表格 remove = () => { oldParent.remove(i) } for (let i = parent.opts[7].split('.').length; i < parts.length - 2; i++) { childs = childs[parts[i]] } const that = this parent = { childs, opts: [undefined, undefined, undefined, undefined, undefined, undefined, undefined, parts.slice(0, parts.length - 2).join('.')], changeStyle (name, i, value, oldVal) { let style = this.childs[i].attrs.style || '' if (style.includes(';' + name + ':' + oldVal)) { style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value) } else { style += ';' + name + ':' + value } that.root._setData(`${this.opts[7]}.${i}.attrs.style`, style) } } } if (!parent) return // 显示实线框 this.$set(this.ctrl, 'root', 1) this.root._mask.push(() => this.$set(this.ctrl, 'root', 0)) if (this.childs.length === 1 && this.childs[0].type === 'text' && !this.ctrl.e0) { this.$set(this.ctrl, 'e0', 1) this.root._mask.push(() => this.$set(this.ctrl, 'e0', 0)) this.i = 0 this.cursor = this.childs[0].text.length } const items = this.root._getItem(parent.childs[i], i !== 0, i !== parent.childs.length - 1) this.root._tooltip({ top: getTop(e), items, success: tapIndex => { if (items[tapIndex] === '大小') { // 改变字体大小 const style = parent.childs[i].attrs.style || '' let value = style.match(/;font-size:([0-9]+)px/) if (value) { value = parseInt(value[1]) } else { value = 16 } this.root._slider({ min: 10, max: 30, value, top: getTop(e), changing: val => { if (Math.abs(val - value) > 2) { // 字号变换超过 2 时更新到视图 parent.changeStyle('font-size', i, val + 'px', value + 'px') value = e.detail.value } }, change: val => { if (val !== value) { parent.changeStyle('font-size', i, val + 'px', value + 'px') } this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style) } }) } else if (items[tapIndex] === '颜色') { // 改变文字颜色 const items = this.root._getItem('color') this.root._color({ top: getTop(e), items, success: tapIndex => { const style = parent.childs[i].attrs.style || '' const value = style.match(/;color:([^;]+)/) parent.changeStyle('color', i, items[tapIndex], value ? value[1] : undefined) this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, parent.childs[i].attrs.style) } }) } else if (items[tapIndex] === '上移' || items[tapIndex] === '下移') { const arr = parent.childs.slice(0) const item = arr[i] if (items[tapIndex] === '上移') { arr[i] = arr[i - 1] arr[i - 1] = item } else { arr[i] = arr[i + 1] arr[i + 1] = item } this.root._editVal(parent.opts[7], parent.childs, arr, true) } else if (items[tapIndex] === '删除') { remove() } else { const style = parent.childs[i].attrs.style || '' let newStyle = '' const item = items[tapIndex] let name let value if (item === '斜体') { name = 'font-style' value = 'italic' } else if (item === '粗体') { name = 'font-weight' value = 'bold' } else if (item === '下划线') { name = 'text-decoration' value = 'underline' } else if (item === '居中') { name = 'text-align' value = 'center' } else if (item === '缩进') { name = 'text-indent' value = '2em' } if (style.includes(name + ':')) { // 已有则取消 newStyle = style.replace(new RegExp(name + ':[^;]+'), '') } else { // 没有则添加 newStyle = style + ';' + name + ':' + value } this.root._editVal(`${parent.opts[7]}.${i}.attrs.style`, style, newStyle, true) } } }) } }, /** * @description 音视频被点击 * @param {Event} e */ mediaTap (e, index) { if (this.opts[5]) { const i = e.target.dataset.i || index const node = this.childs[i] const items = this.root._getItem(node) this.root._maskTap() this.root._edit = this this.i = i this.root._tooltip({ top: e.currentTarget.offsetTop - 30, items, success: tapIndex => { switch (items[tapIndex]) { case '封面': // 设置封面 this.root.getSrc('img', node.attrs.poster || '').then(url => { this.root._editVal(`${this.opts[7]}.${i}.attrs.poster`, node.attrs.poster, url instanceof Array ? url[0] : url, true) }).catch(() => { }) break case '删除': this.remove(i) break case '循环': case '不循环': // 切换循环播放 this.root._setData(`${this.opts[7]}.${i}.attrs.loop`, !node.attrs.loop) uni.showToast({ title: '成功' }) break case '自动播放': case '不自动播放': // 切换自动播放播放 this.root._setData(`${this.opts[7]}.${i}.attrs.autoplay`, !node.attrs.autoplay) uni.showToast({ title: '成功' }) break } } }) // 避免上层出现点击态 this.root._lock = true setTimeout(() => { this.root._lock = false }, 50) } }, /** * 改变样式 * @param {String} name 属性名 * @param {Number} i 第几个标签 * @param {String} value 新值 * @param {String} oldVal 旧值 */ changeStyle (name, i, value, oldVal) { let style = this.childs[i].attrs.style || '' if (style.includes(';' + name + ':' + oldVal)) { // style 中已经有 style = style.replace(';' + name + ':' + oldVal, ';' + name + ':' + value) } else { // 没有则新增 style += ';' + name + ':' + value } this.root._setData(`${this.opts[7]}.${i}.attrs.style`, style) } }, handler (file) { if (file.isBuffer()) { let content = file.contents.toString() if (file.path.includes('mp-html.vue')) { // 传递 editable 属性和路径 content = content.replace(/opts\s*=\s*"\[([^\]]+)\]"/, 'opts="[$1,editable,placeholder,\'nodes\']"') .replace(/<view(.*?):style\s*=\s*"containerStyle"/, '<view$1:style="(editable?\'min-height:200px;\':\'\')+containerStyle" @tap="_containTap"') // 工具弹窗 .replace(/<\/view>\s*<\/template>/, ` <view v-if="tooltip" class="_tooltip_contain" :style="'top:'+tooltip.top+'px'"> <view class="_tooltip"> <view v-for="(item, index) in tooltip.items" v-bind:key="index" class="_tooltip_item" :data-i="index" @tap="_tooltipTap">{{item}}</view> </view> </view> <view v-if="slider" class="_slider" :style="'top:'+slider.top+'px'"> <slider :value="slider.value" :min="slider.min" :max="slider.max" handle-size="14" block-size="14" show-value activeColor="white" style="padding:3px" @changing="_sliderChanging" @change="_sliderChange" /> </view> <view v-if="color" class="_tooltip_contain" :style="'top:'+color.top+'px'"> <view class="_tooltip" style="overflow-y: hidden;"> <view v-for="(item, index) in color.items" v-bind:key="index" class="_color_item" :style="'background-color:'+item" :data-i="index" @tap="_colorTap"></view> </view> </view> </view> </template>`) // 添加 data .replace(/data\s*\(\)\s*{\s*return\s*{/, `data() { return { tooltip: null, slider: null, color: null,`) // 添加 editable 属性 .replace(/props\s*:\s*{/, `props: { editable: [Boolean, String], placeholder: String,`) // 添加 watch .replace(/watch\s*:\s*{/, `watch: { editable(val) { this.setContent(val ? this.content : this.getContent()) if (!val) this._maskTap() },`) .replace(/if\s*\(this.content/, 'if ((this.content || this.editable)') // 处理各类弹窗的事件 .replace(/methods\s*:\s*{/, `methods: { _containTap() { if (!this._lock && !this.slider && !this.color) { this._edit = undefined this._maskTap() } }, _tooltipTap(e) { this._tooltipcb(e.currentTarget.dataset.i) this.$set(this, 'tooltip', null) }, _sliderChanging(e) { this._slideringcb(e.detail.value) }, _sliderChange(e) { this._slidercb(e.detail.value) }, _colorTap(e) { this._colorcb(e.currentTarget.dataset.i) this.$set(this, 'color', null) },`) // 工具弹窗的样式 .replace('</style>', ` /* 提示条 */ ._tooltip_contain { position: absolute; right: 20px; left: 20px; text-align: center; } ._tooltip { box-sizing: border-box; display: inline-block; width: auto; max-width: 100%; height: 30px; padding: 0 3px; overflow: scroll; font-size: 14px; line-height: 30px; white-space: nowrap; } ._tooltip_item { display: inline-block; width: auto; padding: 0 2vw; line-height: 30px; background-color: black; color: white; } ._color_item { display: inline-block; width: 18px; height: 18px; margin: 5px 2vw; border:1px solid #dfe2e5; border-radius: 50%; } /* 图片宽度滚动条 */ ._slider { position: absolute; left: 20px; width: 220px; } ._tooltip, ._slider { background-color: black; border-radius: 3px; opacity: 0.75; } </style>`) } else if (file.path.includes('parser.js')) { // 不做 expose 处理 content = content.replace(/parser.prototype.expose\s*=\s*function\s*\(\)\s*{/, `parser.prototype.expose = function () { if (this.options.editable) return`) .replace(/popNode\s*=\s*function\s*\(\)\s*{/, 'popNode = function () {\n const editable = this.options.editable') // 不转换标签名 .replace(/if\s*\(config.blockTags\[node.name\]\)\s*{[\s\S]+?}/, `if (config.blockTags[node.name]) { if (!editable) { node.name = 'div' } }`) // 转换表格和列表 .replace(/else\s*if\s*\(node.c\)/, 'else if (!editable && node.c )') .replace(/node.c(\)|\s*&&|\s*\n)/g, '(node.c || editable)$1') .replace(/while\s*\(map\[row\s*\+\s*'.'\s*\+\s*col\]\)\s*{[\s\S]+?}/, `while (map[row + '.' + col]) { col++ } if (editable) { td.r = row }`) .replace(/let\s+str\s*=\s*'<video style="width:100%;height:100%"'/, `let str = '<video style="width:100%;height:100%"' if (editable) { attrs.controls = '' }`) } else if (file.path.includes('node.vue')) { content = // 传递 opts content.replace(/:childs\s*=\s*"tbody.children"\s*:opts="opts"/, ':childs="tbody.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+x+\'.children\']"') .replace(/:childs\s*=\s*"n2.children"\s*:opts="opts"/, ':childs="n2.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+j+\'.children\']"') .replace(/:childs\s*=\s*"tr.children"\s*:opts="opts"/, ':childs="tr.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+x+\'.children.\'+y+\'.children\']"') .replace(/:childs\s*=\s*"td.children"\s*:opts="opts"/, ':childs="td.children" :opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children.\'+x+\'.children.\'+y+\'.children.\'+z+\'.children\']"') .replace(/opts\s*=\s*"opts"/g, 'opts="[opts[0],opts[1],opts[2],opts[3],opts[4],opts[5],opts[6],opts[7]+\'.\'+i+\'.children\']"') // 不使用 rich-text .replace(/!n.c/g, '!opts[5]&&!n.c').replace('&&n.c', '&&(n.c||opts[5])') // 修改普通标签 .replace(/<view\s+:id(.+?)style="/, '<view @tap="nodeTap" :id$1style="(ctrl.root&&opts[5]!==\'simple\'?\'border:1px solid black;padding:5px;display:block;\':\'\')+') // 修改文本块 .replace(/<!--\s*文本\s*-->[\s\S]+?<!--\s*链接\s*-->/, `<!-- 文本 --> <text v-else-if="n.type==='text'&&!ctrl['e'+i]" :data-i="i" :user-select="opts[4]" :decode="!opts[5]" @tap="editStart">{{n.text}} <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text> </text> <text v-else-if="n.type==='text'&&ctrl['e'+i]===1" :data-i="i" style="border:1px dashed black;min-width:50px;width:auto;padding:5px;display:block" @tap.stop="editStart">{{n.text}} <text v-if="!n.text" style="color:gray">{{opts[6]||'请输入'}}</text> </text> <textarea v-else-if="n.type==='text'" :style="opts[5]==='simple'?'':'border:1px dashed black;'+'min-width:50px;width:auto;padding:5px'" auto-height maxlength="-1" :focus="ctrl['e'+i]===3" :value="n.text" :data-i="i" @input="editInput" @blur="editEnd" /> <text v-else-if="n.name==='br'">\\n</text> <!-- 链接 -->`) // 修改图片 .replace(/<image(.+?)id="n.attrs.id/, '<image$1id="n.attrs.id||(\'n\'+i)') .replace('height:1px', "height:'+(ctrl['h'+i]||1)+'px") .replace(/:style\s*=\s*"\(ctrl\[i\]/g, ':style="(ctrl[\'e\'+i]&&opts[5]!==\'simple\'?\'border:1px dashed black;padding:3px;\':\'\')+(ctrl[i]') .replace(/show-menu-by-longpress\s*=\s*"(\S+?)"\s*:image-menu-prevent\s*=\s*"(\S+?)"/, 'show-menu-by-longpress="!opts[5]&&$1" :image-menu-prevent="opts[5]||$2"') // 修改音视频 .replace('v-else-if="n.html"', 'v-else-if="n.html" :data-i="i" @tap="mediaTap"') .replace('<video', '<video :show-center-play-btn="!opts[5]" @tap="mediaTap"') .replace('<audio ', '<audio @tap="mediaTap" ') .replace('<my-audio ', '<my-audio @onClick="mediaTap($event, i)" ') .replace('card ', 'card @click="mediaTap($event, i)" ') .replace('<script>', `<script> import Parser from '../parser' function getTop(e) { let top // #ifdef H5 && VUE3 top = e.pageY // #endif // #ifdef (H5 && VUE2) || APP-PLUS top = e.touches[0].pageY // #endif // #ifdef MP-ALIPAY top = e.detail.pageY // #endif // #ifndef H5 || MP-ALIPAY || APP-PLUS top = e.detail.y // #endif if (top - e.currentTarget.offsetTop < 150 || top < 600) { top = e.currentTarget.offsetTop } if (top < 30) { top += 70 } return top - 30 }`) // 周期处理 .replace(/beforeDestroy\s*\(\)\s*{/, `beforeDestroy () { if (this.root && this.root._edit === this) { this.root._edit = undefined }`) // 记录图片宽度 .replace(/imgLoad\s*\(e\)\s*{/, `imgLoad(e) { // #ifdef MP-WEIXIN || MP-QQ if (this.opts[5]) this.$nextTick(() => { const id = this.childs[i].attrs.id || ('n' + i) uni.createSelectorQuery().in(this).select('#' + id).boundingClientRect().exec(res => { this.$set(this.ctrl, 'h'+i, res[0].height) }) }) // #endif`) .replace(/if\s*\(!this.childs\[i\].w\)\s*{[\s\S]+?}/, `if (!this.childs[i].w) { this.$set(this.ctrl, i, e.detail.width) if (this.opts[5]) { const path = this.opts[7] + '.' + i + '.attrs.' if (e.detail.width < 150) this.root._setData(path + 'ignore', 'T') this.root._setData(path + 'width', e.detail.width.toString()) } }`) // 处理图片长按 .replace(/imgLongTap\s*\(\)\s*{/, `imgLongTap() { if (this.opts[5]) return`) // 处理图片点击 .replace(/imgTap\s*\(e\)\s*{([\s\S]+?)},\s*\/\*/, `imgTap (e) { if (!this.opts[5]) {$1} else { const i = e.currentTarget.dataset.i const node = this.childs[i] const items = this.root._getItem(node) const parser = new Parser(this.root) this.root._edit = this this.i = i this.root._maskTap() this.$set(this.ctrl, 'e' + i, 1) this.root._mask.push(() => this.$set(this.ctrl, 'e' + i, 0)) this.root._tooltip({ top: getTop(e), items, success: tapIndex => { if (items[tapIndex] === '换图') { // 换图 this.root.getSrc('img', node.attrs.src || '').then(url => { this.root._editVal(this.opts[7] + '.' + i + '.attrs.src', node.attrs.src, parser.getUrl(url instanceof Array ? url[0] : url), true) }).catch(() => { }) } else if (items[tapIndex] === '宽度') { // 更改宽度 const style = node.attrs.style || '' let value = style.match(/max-width:([0-9]+)%/) if (value) { value = parseInt(value[1]) } else { value = 100 } this.root._slider({ min: 0, max: 100, value, top: getTop(e), changing: val => { // 变化超过 5% 更新时视图 if (Math.abs(val - value) > 5) { this.changeStyle('max-width', i, val + '%', value + '%') value = val } }, change: val => { if (val !== value) { this.changeStyle('max-width', i, val + '%', value + '%') value = val } this.root._editVal(this.opts[7] + '.' + i + '.attrs.style', style, this.childs[i].attrs.style) } }) } else if (items[tapIndex] === '超链接') { // 将图片设置为链接 this.root.getSrc('link', node.a ? node.a.href : '').then(url => { // 如果有 a 标签则替换 href if (node.a) { this.root._editVal(this.opts[7] + '.' + i + '.a.href', node.a.href, parser.getUrl(url), true) } else { const link = { name: 'a', attrs: { href: parser.getUrl(url) }, children: [node] } node.a = link.attrs this.root._editVal(this.opts[7] + '.' + i, node, link, true) } wx.showToast({ title: '成功' }) }).catch(() => { }) } else if (items[tapIndex] === '预览图') { // 设置预览图链接 this.root.getSrc('img', node.attrs['original-src'] || '').then(url => { this.root._editVal(this.opts[7] + '.' + i + '.attrs.original-src', node.attrs['original-src'], parser.getUrl(url instanceof Array ? url[0] : url), true) uni.showToast({ title: '成功' }) }).catch(() => { }) } else if (items[tapIndex] === '删除') { this.remove(i) } else { // 禁用 / 启用预览 this.root._setData(this.opts[7] + '.' + i + '.attrs.ignore', !node.attrs.ignore) uni.showToast({ title: '成功' }) } } }) this.root._lock = true setTimeout(() => { this.root._lock = false }, 50) } }, /*`) // 处理链接点击 .replace(/linkTap\s*\(e\)\s*{([\s\S]+?)},\s*\/\*/, `linkTap (e) { if (!this.opts[5]) {$1} else { const i = e.currentTarget.dataset.i const node = this.childs[i] const items = this.root._getItem(node) this.root._tooltip({ top: getTop(e), items, success: tapIndex => { if (items[tapIndex] === '更换链接') { this.root.getSrc('link', node.attrs.href).then(url => { this.root._editVal(this.opts[7] + '.' + i + '.attrs.href', node.attrs.href, url, true) uni.showToast({ title: '成功' }) }).catch(() => { }) } else { this.remove(i) } } }) } }, /*`) } file.contents = Buffer.from(content) } } }