askbot-dragon 0.7.89 → 0.7.93
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -27
- package/babel.config.js +5 -5
- package/dragon.iml +7 -7
- package/package.json +55 -55
- package/public/index.html +30 -30
- package/src/App.vue +31 -31
- package/src/api/index.js +1 -1
- package/src/api/mock.http +2 -2
- package/src/api/requestUrl.js +185 -185
- package/src/assets/js/AliyunlssUtil.js +92 -92
- package/src/assets/js/Base64Util.js +22 -22
- package/src/assets/js/script.js +36 -36
- package/src/assets/less/common.css +6773 -6773
- package/src/assets/less/converSationContainer/common.less +191 -191
- package/src/assets/less/converSationContainer/converSatonContainer.less +493 -493
- package/src/assets/less/iconfont.css +37 -37
- package/src/assets/less/ticketMessage.less +211 -211
- package/src/components/ActionAlertIframe.vue +112 -112
- package/src/components/AiGuide.vue +467 -467
- package/src/components/AskIFrame.vue +15 -15
- package/src/components/ConversationContainer.vue +2110 -1318
- package/src/components/FileType.vue +86 -86
- package/src/components/Message.vue +27 -27
- package/src/components/actionSatisfaction.vue +107 -107
- package/src/components/actionSendToBot.vue +62 -62
- package/src/components/answerDissatisfaction.vue +62 -62
- package/src/components/answerRadio.vue +76 -76
- package/src/components/ask-components/DissatisfactionOptions.vue +57 -57
- package/src/components/ask-components/Msgloading.vue +37 -37
- package/src/components/ask-components/SatisfactionV2.vue +15 -15
- package/src/components/askVideo.vue +138 -138
- package/src/components/assetDetails.vue +370 -370
- package/src/components/assetMessage.vue +228 -228
- package/src/components/associationIntention.vue +229 -229
- package/src/components/botActionSatisfactor.vue +68 -68
- package/src/components/chatContent.vue +513 -513
- package/src/components/feedBack.vue +136 -136
- package/src/components/file/AliyunOssComponents.vue +108 -108
- package/src/components/formTemplate.vue +2524 -1969
- package/src/components/loadingProcess.vue +164 -164
- package/src/components/message/ActionAlertIframe.vue +112 -112
- package/src/components/message/ShopMessage.vue +164 -164
- package/src/components/message/TextMessage.vue +924 -924
- package/src/components/message/TicketMessage.vue +177 -177
- package/src/components/message/swiper/index.js +4 -4
- package/src/components/message/swiper/ticketSwiper.vue +502 -502
- package/src/components/message/swiper/ticketSwiperItem.vue +61 -61
- package/src/components/msgLoading.vue +231 -231
- package/src/components/myPopup.vue +71 -0
- package/src/components/popup.vue +184 -0
- package/src/components/recommend.vue +89 -89
- package/src/components/selector/hOption.vue +20 -20
- package/src/components/selector/hSelector.vue +199 -199
- package/src/components/selector/hWrapper.vue +216 -216
- package/src/components/source/BotMessage.vue +24 -24
- package/src/components/source/CustomMessage.vue +24 -24
- package/src/components/test.vue +260 -260
- package/src/components/tree.vue +159 -0
- package/src/components/utils/AliyunIssUtil.js +72 -72
- package/src/components/utils/ckeditor.js +123 -123
- package/src/components/utils/command.js +68 -68
- package/src/components/utils/editing.js +11 -11
- package/src/components/utils/format_date.js +25 -18
- package/src/components/utils/index.js +6 -6
- package/src/components/utils/math_utils.js +15 -15
- package/src/components/utils/plugin-image.js +11 -11
- package/src/components/utils/toolbar-ui.js +41 -41
- package/src/components/voiceComponent.vue +119 -119
- package/src/main.js +45 -45
- package/vue.config.js +43 -34
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
import Command from "@ckeditor/ckeditor5-core/src/command";
|
|
2
|
-
import { multipartUpload, ossFileUrl } from "./AliyunIssUtil";
|
|
3
|
-
const ossConfig = {
|
|
4
|
-
region: "oss-cn-zhangjiakou",
|
|
5
|
-
//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,创建并使用STS方式来进行API访问
|
|
6
|
-
accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
|
|
7
|
-
accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
|
|
8
|
-
// stsToken: '<Your securityToken(STS)>',
|
|
9
|
-
bucket: "guoranopen-zjk",
|
|
10
|
-
}
|
|
11
|
-
export default class ImageCommand extends Command {
|
|
12
|
-
refresh() {
|
|
13
|
-
this.isEnabled = true;
|
|
14
|
-
}
|
|
15
|
-
execute() {
|
|
16
|
-
var inputObj = document.createElement('input')
|
|
17
|
-
inputObj.setAttribute('id', '_ef');
|
|
18
|
-
inputObj.setAttribute('type', 'file');
|
|
19
|
-
inputObj.setAttribute('accept','image/jpeg,image/png,image/gif,image/bmp,image/webp,image/tiff')
|
|
20
|
-
inputObj.setAttribute("style", 'visibility:hidden');
|
|
21
|
-
document.body.appendChild(inputObj);
|
|
22
|
-
inputObj.click();
|
|
23
|
-
inputObj.onchange = () => {
|
|
24
|
-
// 循环上传文件
|
|
25
|
-
let files = inputObj.files;
|
|
26
|
-
for (let index = 0; index < files.length; index++) {
|
|
27
|
-
const filed = files[index];
|
|
28
|
-
this.upload(filed).then(res =>{
|
|
29
|
-
let command = this.editor.commands.get("insertAskComponent");
|
|
30
|
-
command.execute({
|
|
31
|
-
tag: "img",
|
|
32
|
-
options: {
|
|
33
|
-
width:'100%',
|
|
34
|
-
name: res.default,
|
|
35
|
-
src: res.default
|
|
36
|
-
},
|
|
37
|
-
});
|
|
38
|
-
})
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
upload(file) {
|
|
44
|
-
return new Promise((resolve) => {
|
|
45
|
-
/* this._initRequest();
|
|
46
|
-
this._initListeners( resolve, reject, file );
|
|
47
|
-
this._sendRequest( file );*/
|
|
48
|
-
this.uploadFile(file, resolve)
|
|
49
|
-
})
|
|
50
|
-
}
|
|
51
|
-
uploadFile(file, resolve) {
|
|
52
|
-
let imgInfo = {
|
|
53
|
-
url: '',
|
|
54
|
-
}
|
|
55
|
-
let res = multipartUpload(
|
|
56
|
-
ossConfig,
|
|
57
|
-
file,
|
|
58
|
-
null,
|
|
59
|
-
imgInfo
|
|
60
|
-
);
|
|
61
|
-
res.then(resp => {
|
|
62
|
-
imgInfo.url = ossFileUrl(ossConfig, resp.name)
|
|
63
|
-
console.log(imgInfo)
|
|
64
|
-
resolve({
|
|
65
|
-
default: imgInfo.url
|
|
66
|
-
})
|
|
67
|
-
})
|
|
68
|
-
}
|
|
1
|
+
import Command from "@ckeditor/ckeditor5-core/src/command";
|
|
2
|
+
import { multipartUpload, ossFileUrl } from "./AliyunIssUtil";
|
|
3
|
+
const ossConfig = {
|
|
4
|
+
region: "oss-cn-zhangjiakou",
|
|
5
|
+
//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,创建并使用STS方式来进行API访问
|
|
6
|
+
accessKeyId: "LTAI4G3QtdEdwkEbihBngAsK",
|
|
7
|
+
accessKeySecret: "OwgdVfc5PeCkIgqIdug660xmiSPchn",
|
|
8
|
+
// stsToken: '<Your securityToken(STS)>',
|
|
9
|
+
bucket: "guoranopen-zjk",
|
|
10
|
+
}
|
|
11
|
+
export default class ImageCommand extends Command {
|
|
12
|
+
refresh() {
|
|
13
|
+
this.isEnabled = true;
|
|
14
|
+
}
|
|
15
|
+
execute() {
|
|
16
|
+
var inputObj = document.createElement('input')
|
|
17
|
+
inputObj.setAttribute('id', '_ef');
|
|
18
|
+
inputObj.setAttribute('type', 'file');
|
|
19
|
+
inputObj.setAttribute('accept','image/jpeg,image/png,image/gif,image/bmp,image/webp,image/tiff')
|
|
20
|
+
inputObj.setAttribute("style", 'visibility:hidden');
|
|
21
|
+
document.body.appendChild(inputObj);
|
|
22
|
+
inputObj.click();
|
|
23
|
+
inputObj.onchange = () => {
|
|
24
|
+
// 循环上传文件
|
|
25
|
+
let files = inputObj.files;
|
|
26
|
+
for (let index = 0; index < files.length; index++) {
|
|
27
|
+
const filed = files[index];
|
|
28
|
+
this.upload(filed).then(res =>{
|
|
29
|
+
let command = this.editor.commands.get("insertAskComponent");
|
|
30
|
+
command.execute({
|
|
31
|
+
tag: "img",
|
|
32
|
+
options: {
|
|
33
|
+
width:'100%',
|
|
34
|
+
name: res.default,
|
|
35
|
+
src: res.default
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
})
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
upload(file) {
|
|
44
|
+
return new Promise((resolve) => {
|
|
45
|
+
/* this._initRequest();
|
|
46
|
+
this._initListeners( resolve, reject, file );
|
|
47
|
+
this._sendRequest( file );*/
|
|
48
|
+
this.uploadFile(file, resolve)
|
|
49
|
+
})
|
|
50
|
+
}
|
|
51
|
+
uploadFile(file, resolve) {
|
|
52
|
+
let imgInfo = {
|
|
53
|
+
url: '',
|
|
54
|
+
}
|
|
55
|
+
let res = multipartUpload(
|
|
56
|
+
ossConfig,
|
|
57
|
+
file,
|
|
58
|
+
null,
|
|
59
|
+
imgInfo
|
|
60
|
+
);
|
|
61
|
+
res.then(resp => {
|
|
62
|
+
imgInfo.url = ossFileUrl(ossConfig, resp.name)
|
|
63
|
+
console.log(imgInfo)
|
|
64
|
+
resolve({
|
|
65
|
+
default: imgInfo.url
|
|
66
|
+
})
|
|
67
|
+
})
|
|
68
|
+
}
|
|
69
69
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
|
|
2
|
-
import ImageCommand from "./command";
|
|
3
|
-
export default class MyimageUpload extends Plugin {
|
|
4
|
-
static get pluginName() {
|
|
5
|
-
return "imageUpload";
|
|
6
|
-
}
|
|
7
|
-
init() {
|
|
8
|
-
const editor = this.editor;
|
|
9
|
-
// 注册一个 BoldCommand 命令
|
|
10
|
-
editor.commands.add('imageUpload', new ImageCommand(editor));
|
|
11
|
-
}
|
|
1
|
+
import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
|
|
2
|
+
import ImageCommand from "./command";
|
|
3
|
+
export default class MyimageUpload extends Plugin {
|
|
4
|
+
static get pluginName() {
|
|
5
|
+
return "imageUpload";
|
|
6
|
+
}
|
|
7
|
+
init() {
|
|
8
|
+
const editor = this.editor;
|
|
9
|
+
// 注册一个 BoldCommand 命令
|
|
10
|
+
editor.commands.add('imageUpload', new ImageCommand(editor));
|
|
11
|
+
}
|
|
12
12
|
}
|
|
@@ -1,19 +1,26 @@
|
|
|
1
|
-
const formatDate = (fmt) => { //author: meizz
|
|
2
|
-
var o = {
|
|
3
|
-
"M+": this.getMonth() + 1, //月份
|
|
4
|
-
"d+": this.getDate(), //日
|
|
5
|
-
"h+": this.getHours(), //小时
|
|
6
|
-
"m+": this.getMinutes(), //分
|
|
7
|
-
"s+": this.getSeconds(), //秒
|
|
8
|
-
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
9
|
-
"S": this.getMilliseconds() //毫秒
|
|
10
|
-
};
|
|
11
|
-
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
12
|
-
for (var k in o)
|
|
13
|
-
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
14
|
-
return fmt;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
1
|
+
const formatDate = (fmt) => { //author: meizz
|
|
2
|
+
var o = {
|
|
3
|
+
"M+": this.getMonth() + 1, //月份
|
|
4
|
+
"d+": this.getDate(), //日
|
|
5
|
+
"h+": this.getHours(), //小时
|
|
6
|
+
"m+": this.getMinutes(), //分
|
|
7
|
+
"s+": this.getSeconds(), //秒
|
|
8
|
+
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
9
|
+
"S": this.getMilliseconds() //毫秒
|
|
10
|
+
};
|
|
11
|
+
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
12
|
+
for (var k in o)
|
|
13
|
+
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
14
|
+
return fmt;
|
|
15
|
+
}
|
|
16
|
+
function forMatTime(value){
|
|
17
|
+
let startTime = ''
|
|
18
|
+
let currentTime = new Date(), year = currentTime.getFullYear(),
|
|
19
|
+
month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1,
|
|
20
|
+
day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
|
|
21
|
+
startTime = year + "-" + month + "-" + day +' ' + value;
|
|
22
|
+
return new Date(startTime)
|
|
23
|
+
}
|
|
24
|
+
export { formatDate,forMatTime };
|
|
25
|
+
|
|
19
26
|
// new Date("2019-12-14T00:09:16.000+0000").Format("yyyy-MM-dd hh:mm:ss")
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {formatDate} from './format_date';
|
|
2
|
-
|
|
3
|
-
let utils = {
|
|
4
|
-
formatDate
|
|
5
|
-
}
|
|
6
|
-
|
|
1
|
+
import {formatDate} from './format_date';
|
|
2
|
+
|
|
3
|
+
let utils = {
|
|
4
|
+
formatDate
|
|
5
|
+
}
|
|
6
|
+
|
|
7
7
|
export { utils }
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
//生成从minNum到maxNum-1的随机数
|
|
2
|
-
function randomNum(minNum,maxNum){
|
|
3
|
-
switch(arguments.length){
|
|
4
|
-
case 1:
|
|
5
|
-
return parseInt(Math.random()*minNum+1,10)-1;
|
|
6
|
-
case 2:
|
|
7
|
-
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10)-1;
|
|
8
|
-
default:
|
|
9
|
-
return 0;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export {
|
|
14
|
-
randomNum
|
|
15
|
-
}
|
|
1
|
+
//生成从minNum到maxNum-1的随机数
|
|
2
|
+
function randomNum(minNum,maxNum){
|
|
3
|
+
switch(arguments.length){
|
|
4
|
+
case 1:
|
|
5
|
+
return parseInt(Math.random()*minNum+1,10)-1;
|
|
6
|
+
case 2:
|
|
7
|
+
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10)-1;
|
|
8
|
+
default:
|
|
9
|
+
return 0;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
randomNum
|
|
15
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
2
|
-
import ToolbarUI from './toolbar-ui'
|
|
3
|
-
import ImageUpload from './editing'
|
|
4
|
-
|
|
5
|
-
export default class MyimageUpload extends Plugin {
|
|
6
|
-
static get requires() {
|
|
7
|
-
return [ImageUpload, ToolbarUI];
|
|
8
|
-
}
|
|
9
|
-
static get pluginName() {
|
|
10
|
-
return 'MyimageUpload';
|
|
11
|
-
}
|
|
1
|
+
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
|
|
2
|
+
import ToolbarUI from './toolbar-ui'
|
|
3
|
+
import ImageUpload from './editing'
|
|
4
|
+
|
|
5
|
+
export default class MyimageUpload extends Plugin {
|
|
6
|
+
static get requires() {
|
|
7
|
+
return [ImageUpload, ToolbarUI];
|
|
8
|
+
}
|
|
9
|
+
static get pluginName() {
|
|
10
|
+
return 'MyimageUpload';
|
|
11
|
+
}
|
|
12
12
|
}
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
/* eslint-disable */
|
|
2
|
-
import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
|
|
3
|
-
import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
|
|
4
|
-
// import aoteman from "@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg";
|
|
5
|
-
import aoteman from '../../assets/image/2.jpg'
|
|
6
|
-
|
|
7
|
-
// console.log(aoteman.replace('/',''));
|
|
8
|
-
export default class BoldToolbarUI extends Plugin {
|
|
9
|
-
init() {
|
|
10
|
-
this._createToolbarButton();
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
_createToolbarButton() {
|
|
14
|
-
const editor = this.editor;
|
|
15
|
-
const command = editor.commands.get('imageUpload');
|
|
16
|
-
editor.ui.componentFactory.add('MyimageUpload', (locale) => {
|
|
17
|
-
const view = new ButtonView(locale);
|
|
18
|
-
view.set({
|
|
19
|
-
label: '上传图片',
|
|
20
|
-
tooltip: true,
|
|
21
|
-
withText: true, // 在按钮上展示 label
|
|
22
|
-
icon:`<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
23
|
-
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
|
|
24
|
-
<path d="M182,4.2H18c-9.9,0-18,8-18,18l0,0v156c0.2,9.7,8.3,17.5,18,17.5h164c9.7,0,17.8-7.8,18-17.5v-156C200,12.3,192,4.2,182,4.2
|
|
25
|
-
z M152.5,101.2c-3.1-2.3-7.5-2.3-10.6,0l-31.1,26.1L67.9,58.5c-3.4-3.7-8.9-3.9-12.6-0.6c-0.2,0.2-0.3,0.3-0.6,0.6L18,99.3V22.2h164
|
|
26
|
-
v91.3L152.5,101.2z" fill="#333333"/>
|
|
27
|
-
<path d="M145.8,38.3c-14,0-25.3,11.3-25.3,25.3s11.3,25.3,25.3,25.3s25.3-11.3,25.3-25.3l0,0C171.1,49.6,159.7,38.3,145.8,38.3z
|
|
28
|
-
M145.8,70.3c-4,0-7.3-3.2-7.3-7.3s3.2-7.3,7.3-7.3s7.3,3.2,7.3,7.3c0.2,4-2.8,7.4-6.8,7.6c-0.1,0-0.3,0-0.4,0V70.3z" fill="#333333"/>
|
|
29
|
-
</svg>`,
|
|
30
|
-
class:'icon'
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
// console.log(Template);
|
|
34
|
-
// 将按钮的状态关联到命令对应值上
|
|
35
|
-
view.bind("isOn", "isEnabled").to(command, "value", "isEnabled");
|
|
36
|
-
// 点击按钮时触发相应命令
|
|
37
|
-
this.listenTo(view, "execute", () => editor.execute('imageUpload'));
|
|
38
|
-
return view;
|
|
39
|
-
|
|
40
|
-
})
|
|
41
|
-
}
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
|
|
3
|
+
import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
|
|
4
|
+
// import aoteman from "@ckeditor/ckeditor5-basic-styles/theme/icons/bold.svg";
|
|
5
|
+
import aoteman from '../../assets/image/2.jpg'
|
|
6
|
+
|
|
7
|
+
// console.log(aoteman.replace('/',''));
|
|
8
|
+
export default class BoldToolbarUI extends Plugin {
|
|
9
|
+
init() {
|
|
10
|
+
this._createToolbarButton();
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
_createToolbarButton() {
|
|
14
|
+
const editor = this.editor;
|
|
15
|
+
const command = editor.commands.get('imageUpload');
|
|
16
|
+
editor.ui.componentFactory.add('MyimageUpload', (locale) => {
|
|
17
|
+
const view = new ButtonView(locale);
|
|
18
|
+
view.set({
|
|
19
|
+
label: '上传图片',
|
|
20
|
+
tooltip: true,
|
|
21
|
+
withText: true, // 在按钮上展示 label
|
|
22
|
+
icon:`<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
23
|
+
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
|
|
24
|
+
<path d="M182,4.2H18c-9.9,0-18,8-18,18l0,0v156c0.2,9.7,8.3,17.5,18,17.5h164c9.7,0,17.8-7.8,18-17.5v-156C200,12.3,192,4.2,182,4.2
|
|
25
|
+
z M152.5,101.2c-3.1-2.3-7.5-2.3-10.6,0l-31.1,26.1L67.9,58.5c-3.4-3.7-8.9-3.9-12.6-0.6c-0.2,0.2-0.3,0.3-0.6,0.6L18,99.3V22.2h164
|
|
26
|
+
v91.3L152.5,101.2z" fill="#333333"/>
|
|
27
|
+
<path d="M145.8,38.3c-14,0-25.3,11.3-25.3,25.3s11.3,25.3,25.3,25.3s25.3-11.3,25.3-25.3l0,0C171.1,49.6,159.7,38.3,145.8,38.3z
|
|
28
|
+
M145.8,70.3c-4,0-7.3-3.2-7.3-7.3s3.2-7.3,7.3-7.3s7.3,3.2,7.3,7.3c0.2,4-2.8,7.4-6.8,7.6c-0.1,0-0.3,0-0.4,0V70.3z" fill="#333333"/>
|
|
29
|
+
</svg>`,
|
|
30
|
+
class:'icon'
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// console.log(Template);
|
|
34
|
+
// 将按钮的状态关联到命令对应值上
|
|
35
|
+
view.bind("isOn", "isEnabled").to(command, "value", "isEnabled");
|
|
36
|
+
// 点击按钮时触发相应命令
|
|
37
|
+
this.listenTo(view, "execute", () => editor.execute('imageUpload'));
|
|
38
|
+
return view;
|
|
39
|
+
|
|
40
|
+
})
|
|
41
|
+
}
|
|
42
42
|
}
|
|
@@ -1,120 +1,120 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div id="voice-component">
|
|
3
|
-
<div id="voice-component-container">
|
|
4
|
-
<div id="voice-component-c">
|
|
5
|
-
<div class="voice-btn">
|
|
6
|
-
<i class="iconfont arsenalchess-pawn-solid"></i>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<div class="close-voice" @click="closeVoice">
|
|
10
|
-
<div class="voice-style">
|
|
11
|
-
<i class="arsenal_icon arsenalcuo1"></i>
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
14
|
-
<div class="voice-tip">
|
|
15
|
-
<slot name="voiceTip"></slot>
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
</div>
|
|
20
|
-
</template>
|
|
21
|
-
|
|
22
|
-
<script>
|
|
23
|
-
export default {
|
|
24
|
-
name: "voice_component",
|
|
25
|
-
data(){
|
|
26
|
-
return{
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
methods:{
|
|
31
|
-
closeVoice(){
|
|
32
|
-
this.$emit('closeVoice')
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
</script>
|
|
37
|
-
|
|
38
|
-
<style scoped lang="less">
|
|
39
|
-
#voice-component{
|
|
40
|
-
position: fixed;
|
|
41
|
-
bottom: 0;
|
|
42
|
-
width: 100%;
|
|
43
|
-
z-index: 9999;
|
|
44
|
-
left: 0;
|
|
45
|
-
#voice-component-container{
|
|
46
|
-
position: relative;
|
|
47
|
-
/* .half-top-ovals{
|
|
48
|
-
width: 130%;
|
|
49
|
-
position: relative;
|
|
50
|
-
left: -15%;
|
|
51
|
-
height: 80px;
|
|
52
|
-
padding-bottom: 40px;
|
|
53
|
-
padding-right: 20px;
|
|
54
|
-
padding-left: 20px;
|
|
55
|
-
!* width: 200px;*!
|
|
56
|
-
background: lightcoral;
|
|
57
|
-
border-radius: 50% 50% 0 0;
|
|
58
|
-
}*/
|
|
59
|
-
#voice-component-c{
|
|
60
|
-
height: 200px;
|
|
61
|
-
width: 130%;
|
|
62
|
-
position: relative;
|
|
63
|
-
left: -15%;
|
|
64
|
-
bottom: -80px;
|
|
65
|
-
background: linear-gradient(180deg, #EEF1F7, #FFFFFF);
|
|
66
|
-
border: 2px solid white;
|
|
67
|
-
border-radius: 100% 100% 0 0;
|
|
68
|
-
border-bottom: none;
|
|
69
|
-
display: flex;
|
|
70
|
-
align-items: center;
|
|
71
|
-
justify-content: center;
|
|
72
|
-
.voice-btn{
|
|
73
|
-
display: flex;
|
|
74
|
-
align-items: center;
|
|
75
|
-
justify-content: center;
|
|
76
|
-
position: absolute;
|
|
77
|
-
top: 50px;
|
|
78
|
-
i{
|
|
79
|
-
color: #366aff;
|
|
80
|
-
font-size: 30px;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
.voice-tip{
|
|
85
|
-
width: 100%;
|
|
86
|
-
position: absolute;
|
|
87
|
-
top: -40px;
|
|
88
|
-
display: flex;
|
|
89
|
-
align-items: center;
|
|
90
|
-
justify-content: center;
|
|
91
|
-
color: #FFFFFF;
|
|
92
|
-
font-size: 13px;
|
|
93
|
-
}
|
|
94
|
-
.close-voice{
|
|
95
|
-
width: 100%;
|
|
96
|
-
position: absolute;
|
|
97
|
-
top: -35px;
|
|
98
|
-
display: flex;
|
|
99
|
-
align-items: center;
|
|
100
|
-
justify-content: center;
|
|
101
|
-
.voice-style{
|
|
102
|
-
width: 60px;
|
|
103
|
-
height: 60px;
|
|
104
|
-
background: #EEF1F7;
|
|
105
|
-
border-radius: 50%;
|
|
106
|
-
display: flex;
|
|
107
|
-
align-items: center;
|
|
108
|
-
justify-content: center;
|
|
109
|
-
transition: all 0.3s;
|
|
110
|
-
i{
|
|
111
|
-
font-size: 24px;
|
|
112
|
-
color: #999999;
|
|
113
|
-
transition: all 0.3s;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
}
|
|
1
|
+
<template>
|
|
2
|
+
<div id="voice-component">
|
|
3
|
+
<div id="voice-component-container">
|
|
4
|
+
<div id="voice-component-c">
|
|
5
|
+
<div class="voice-btn">
|
|
6
|
+
<i class="iconfont arsenalchess-pawn-solid"></i>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="close-voice" @click="closeVoice">
|
|
10
|
+
<div class="voice-style">
|
|
11
|
+
<i class="arsenal_icon arsenalcuo1"></i>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
<div class="voice-tip">
|
|
15
|
+
<slot name="voiceTip"></slot>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
</div>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
export default {
|
|
24
|
+
name: "voice_component",
|
|
25
|
+
data(){
|
|
26
|
+
return{
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
methods:{
|
|
31
|
+
closeVoice(){
|
|
32
|
+
this.$emit('closeVoice')
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<style scoped lang="less">
|
|
39
|
+
#voice-component{
|
|
40
|
+
position: fixed;
|
|
41
|
+
bottom: 0;
|
|
42
|
+
width: 100%;
|
|
43
|
+
z-index: 9999;
|
|
44
|
+
left: 0;
|
|
45
|
+
#voice-component-container{
|
|
46
|
+
position: relative;
|
|
47
|
+
/* .half-top-ovals{
|
|
48
|
+
width: 130%;
|
|
49
|
+
position: relative;
|
|
50
|
+
left: -15%;
|
|
51
|
+
height: 80px;
|
|
52
|
+
padding-bottom: 40px;
|
|
53
|
+
padding-right: 20px;
|
|
54
|
+
padding-left: 20px;
|
|
55
|
+
!* width: 200px;*!
|
|
56
|
+
background: lightcoral;
|
|
57
|
+
border-radius: 50% 50% 0 0;
|
|
58
|
+
}*/
|
|
59
|
+
#voice-component-c{
|
|
60
|
+
height: 200px;
|
|
61
|
+
width: 130%;
|
|
62
|
+
position: relative;
|
|
63
|
+
left: -15%;
|
|
64
|
+
bottom: -80px;
|
|
65
|
+
background: linear-gradient(180deg, #EEF1F7, #FFFFFF);
|
|
66
|
+
border: 2px solid white;
|
|
67
|
+
border-radius: 100% 100% 0 0;
|
|
68
|
+
border-bottom: none;
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
.voice-btn{
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
position: absolute;
|
|
77
|
+
top: 50px;
|
|
78
|
+
i{
|
|
79
|
+
color: #366aff;
|
|
80
|
+
font-size: 30px;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
.voice-tip{
|
|
85
|
+
width: 100%;
|
|
86
|
+
position: absolute;
|
|
87
|
+
top: -40px;
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
color: #FFFFFF;
|
|
92
|
+
font-size: 13px;
|
|
93
|
+
}
|
|
94
|
+
.close-voice{
|
|
95
|
+
width: 100%;
|
|
96
|
+
position: absolute;
|
|
97
|
+
top: -35px;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
.voice-style{
|
|
102
|
+
width: 60px;
|
|
103
|
+
height: 60px;
|
|
104
|
+
background: #EEF1F7;
|
|
105
|
+
border-radius: 50%;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
transition: all 0.3s;
|
|
110
|
+
i{
|
|
111
|
+
font-size: 24px;
|
|
112
|
+
color: #999999;
|
|
113
|
+
transition: all 0.3s;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
}
|
|
120
120
|
</style>
|