From 3e3799074a56abacefbd8099eb44359c1ca5d688 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Mon, 28 Oct 2024 00:28:49 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BC=9A=E8=AF=9D?= =?UTF-8?q?=E5=85=A8=E5=B1=8F=E8=BE=93=E5=85=A5=E5=8A=9F=E8=83=BD=E8=8F=9C?= =?UTF-8?q?=E5=8D=95=E5=9B=BA=E5=AE=9A=E4=B8=8B=E6=96=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/manage/components/ChatInput/icon.js | 50 +++++++++++++++ .../manage/components/ChatInput/index.vue | 59 ++++++++++++++++- .../sass/pages/components/chat-input.scss | 64 ++++++++++++++++++- 3 files changed, 170 insertions(+), 3 deletions(-) create mode 100644 resources/assets/js/pages/manage/components/ChatInput/icon.js diff --git a/resources/assets/js/pages/manage/components/ChatInput/icon.js b/resources/assets/js/pages/manage/components/ChatInput/icon.js new file mode 100644 index 000000000..281a32108 --- /dev/null +++ b/resources/assets/js/pages/manage/components/ChatInput/icon.js @@ -0,0 +1,50 @@ + +const fullToolIcons = [ + { + label: 'bold', + type: '', + svg: '' + }, + { + label: 'strike', + type: '', + svg: '' + }, + { + label: 'italic', + type: '', + svg: '' + }, + { + label: 'underline', + type: '', + svg: '' + }, + { + label: 'blockquote', + type: '', + svg: '' + }, + { + label: 'link', + type: '', + svg: '' + }, + { + label: 'list', + type: 'ordered', + svg: '' + }, + { + label: 'list', + type: 'bullet', + svg: '' + }, + { + label: 'list', + type: 'unchecked', + svg: '' + }, +] + +export {fullToolIcons} diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue index 8f7752935..da3b2b6e6 100755 --- a/resources/assets/js/pages/manage/components/ChatInput/index.vue +++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue @@ -206,6 +206,13 @@
+ @@ -223,6 +230,7 @@ import TransferDom from "../../../../directives/transfer-dom"; import clickoutside from "../../../../directives/clickoutside"; import longpress from "../../../../directives/longpress"; import {inputLoadAdd, inputLoadIsLast, inputLoadRemove} from "./one"; +import {fullToolIcons} from "./icon"; import {isMarkdownFormat} from "../../../../store/markdown"; import {Store} from "le5le-store"; @@ -345,6 +353,8 @@ export default { fullInput: false, fullQuill: null, + fullSelection: {index: 0, length: 0}, + fullTools: fullToolIcons, }; }, created() { @@ -1287,10 +1297,13 @@ export default { readOnly: false, placeholder: this.placeholder, modules: { - toolbar: this.toolbar, + toolbar: false, mention: this.quillMention() } }, this.options)) + this.fullQuill.on('selection-change', range => { + this.fullSelection = range || {index: 0, length: 0}; + }) this.fullQuill.enable(true) this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML this.$nextTick(_ => { @@ -1310,6 +1323,50 @@ export default { }) }, + onFullMenu(action, type) { + const {length} = this.fullQuill.getSelection(true); + if (length === 0) { + $A.messageWarning("请选择文字后再操作") + return + } + switch (action) { + case 'bold': + this.fullQuill.format('bold', !this.fullQuill.getFormat().bold); + break; + case 'strike': + this.fullQuill.format('strike', !this.fullQuill.getFormat().strike); + break; + case 'italic': + this.fullQuill.format('italic', !this.fullQuill.getFormat().italic); + break; + case 'underline': + this.fullQuill.format('underline', !this.fullQuill.getFormat().underline); + break; + case 'blockquote': + this.fullQuill.format('blockquote', !this.fullQuill.getFormat().blockquote); + break; + case 'link': + if (this.fullQuill.getFormat().link) { + this.fullQuill.format('link', false); + return + } + $A.modalInput({ + title: "插入链接", + placeholder: "请输入完整的链接地址", + onOk: (link) => { + if (!link) { + return false; + } + this.fullQuill.format('link', link); + } + }) + break; + case 'list': + this.fullQuill.format('list', this.fullQuill.getFormat().list === type ? false : type); + break; + } + }, + setQuote(id, type = 'reply') { this.dialogId > 0 && this.$store.dispatch("saveDialog", { id: this.dialogId, diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss index 00682bee7..f03da6efe 100755 --- a/resources/assets/sass/pages/components/chat-input.scss +++ b/resources/assets/sass/pages/components/chat-input.scss @@ -726,7 +726,7 @@ border-top-right-radius: 18px !important; .ivu-modal-body { overflow: visible; - padding: 24px !important; + padding: 24px 24px 0 24px !important; } .ivu-modal-close { > i { @@ -747,10 +747,13 @@ } .chat-input-box { + display: flex; + flex-direction: column; height: 100%; .chat-input-wrapper { - height: 100%; + flex: 1; + height: 0; .ql-container { height: 100%; @@ -761,6 +764,63 @@ } } } + + .chat-input-menu { + display: flex; + align-items: center; + justify-content: center; + &.activation { + > li { + opacity: 1; + cursor: pointer; + } + } + > li { + flex: 1; + width: 0; + height: 60px; + max-width: 60px; + display: flex; + justify-content: center; + align-items: center; + list-style: none; + opacity: 0.6; + cursor: not-allowed; + > svg { + height: 20px; + .im-fill { + fill: #333; + } + .im-stroke { + fill: none; + stroke: #333; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 2; + } + .im-thin { + stroke-width: 1; + } + .im-even { + fill-rule: evenodd; + } + &:active { + .im-fill { + fill: #000; + } + .im-stroke { + stroke: #000; + } + } + } + @media screen and (max-width: 320px) { + height: 52px; + > svg { + height: 18px; + } + } + } + } } }