perf: 优化会话全屏输入功能菜单固定下方

resources/assets/js/pages/manage/components/ChatInput/icon.js

@@ -1,50 +0,0 @@
-
-const fullToolIcons = [
-    {
-        label: 'bold',
-        type: '',
-        svg: '<svg viewBox="0 0 18 18"><path class="im-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path><path class="im-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path></svg>'
-    },
-    {
-        label: 'strike',
-        type: '',
-        svg: '<svg viewBox="0 0 18 18"><line class="im-stroke im-thin" x1="15.5" x2="2.5" y1="8.5" y2="9.5"></line><path class="im-fill" d="M9.007,8C6.542,7.791,6,7.519,6,6.5,6,5.792,7.283,5,9,5c1.571,0,2.765.679,2.969,1.309a1,1,0,0,0,1.9-.617C13.356,4.106,11.354,3,9,3,6.2,3,4,4.538,4,6.5a3.2,3.2,0,0,0,.5,1.843Z"></path><path class="im-fill" d="M8.984,10C11.457,10.208,12,10.479,12,11.5c0,0.708-1.283,1.5-3,1.5-1.571,0-2.765-.679-2.969-1.309a1,1,0,1,0-1.9.617C4.644,13.894,6.646,15,9,15c2.8,0,5-1.538,5-3.5a3.2,3.2,0,0,0-.5-1.843Z"></path></svg>'
-    },
-    {
-        label: 'italic',
-        type: '',
-        svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="7" x2="13" y1="4" y2="4"></line><line class="im-stroke" x1="5" x2="11" y1="14" y2="14"></line><line class="im-stroke" x1="8" x2="10" y1="14" y2="4"></line></svg>'
-    },
-    {
-        label: 'underline',
-        type: '',
-        svg: '<svg viewBox="0 0 18 18"><path class="im-stroke" d="M5,3V9a4.012,4.012,0,0,0,4,4H9a4.012,4.012,0,0,0,4-4V3"></path><rect class="im-fill" height="1" rx="0.5" ry="0.5" width="12" x="3" y="15"></rect></svg>'
-    },
-    {
-        label: 'blockquote',
-        type: '',
-        svg: '<svg viewBox="0 0 18 18"><rect class="im-fill im-stroke" height="3" width="3" x="4" y="5"></rect><rect class="im-fill im-stroke" height="3" width="3" x="11" y="5"></rect><path class="im-even im-fill im-stroke" d="M7,8c0,4.031-3,5-3,5"></path><path class="im-even im-fill im-stroke" d="M14,8c0,4.031-3,5-3,5"></path></svg>'
-    },
-    {
-        label: 'link',
-        type: '',
-        svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="7" x2="11" y1="7" y2="11"></line><path class="im-even im-stroke" d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"></path><path class="im-even im-stroke" d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"></path></svg>'
-    },
-    {
-        label: 'list',
-        type: 'ordered',
-        svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="7" x2="15" y1="4" y2="4"></line><line class="im-stroke" x1="7" x2="15" y1="9" y2="9"></line><line class="im-stroke" x1="7" x2="15" y1="14" y2="14"></line><line class="im-stroke im-thin" x1="2.5" x2="4.5" y1="5.5" y2="5.5"></line><path class="im-fill" d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"></path><path class="im-stroke im-thin" d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"></path><path class="im-stroke im-thin" d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"></path></svg>'
-    },
-    {
-        label: 'list',
-        type: 'bullet',
-        svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="6" x2="15" y1="4" y2="4"></line><line class="im-stroke" x1="6" x2="15" y1="9" y2="9"></line><line class="im-stroke" x1="6" x2="15" y1="14" y2="14"></line><line class="im-stroke" x1="3" x2="3" y1="4" y2="4"></line><line class="im-stroke" x1="3" x2="3" y1="9" y2="9"></line><line class="im-stroke" x1="3" x2="3" y1="14" y2="14"></line></svg>'
-    },
-    {
-        label: 'list',
-        type: 'unchecked',
-        svg: '<svg viewBox="0 0 18 18"><line class="im-stroke" x1="9" x2="15" y1="4" y2="4"></line><polyline class="im-stroke" points="3 4 4 5 6 3"></polyline><line class="im-stroke" x1="9" x2="15" y1="14" y2="14"></line><polyline class="im-stroke" points="3 14 4 15 6 13"></polyline><line class="im-stroke" x1="9" x2="15" y1="9" y2="9"></line><polyline class="im-stroke" points="3 9 4 10 6 8"></polyline></svg>'
-    },
-]
-
-export {fullToolIcons}

resources/assets/js/pages/manage/components/ChatInput/index.vue

@@ -202,7 +202,7 @@
             class-name="chat-input-full-input"
             footer-hide
             fullscreen>
-            <div class="chat-input-box">
+            <div class="chat-input-box" :style="chatInputBoxStyle">
                 <div class="chat-input-wrapper">
                     <div ref="editorFull" class="no-dark-content"></div>
                 </div>
@@ -210,8 +210,11 @@
                     <li
                         v-for="(item, index) in fullTools"
                         :key="index"
-                        @click="onFullMenu(item.label, item.type)"
+                        @touchstart.prevent=""
-                        v-html="item.svg"></li>
+                        @touchend.prevent="onFullMenu(item.label, item.type)"
+                        @click="onFullMenu(item.label, item.type)">
+                        <i class="taskfont" v-html="item.icon"></i>
+                    </li>
                 </ul>
             </div>
             <i slot="close" class="taskfont">&#xe6ab;</i>
@@ -230,7 +233,6 @@ 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";
 
@@ -354,7 +356,55 @@ export default {
             fullInput: false,
             fullQuill: null,
             fullSelection: {index: 0, length: 0},
-            fullTools: fullToolIcons,
+            fullTools: [
+                {
+                    label: 'bold',
+                    type: '',
+                    icon: '&#xe891;',
+                },
+                {
+                    label: 'strike',
+                    type: '',
+                    icon: '&#xe892;',
+                },
+                {
+                    label: 'italic',
+                    type: '',
+                    icon: '&#xe896;',
+                },
+                {
+                    label: 'underline',
+                    type: '',
+                    icon: '&#xe88e;',
+                },
+                {
+                    label: 'blockquote',
+                    type: '',
+                    icon: '&#xe88d;',
+                },
+                {
+                    label: 'link',
+                    type: '',
+                    icon: '&#xe885;',
+                },
+                {
+                    label: 'list',
+                    type: 'ordered',
+                    icon: '&#xe886;',
+                },
+                {
+                    label: 'list',
+                    type: 'bullet',
+                    icon: '&#xe894;',
+                },
+                {
+                    label: 'list',
+                    type: 'unchecked',
+                    icon: '&#xe88c;',
+                },
+            ],
+
+            viewportHeight: 0,
         };
     },
     created() {
@@ -363,6 +413,10 @@ export default {
     mounted() {
         this.init();
         //
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', this.visualViewportResize);
+        }
+        //
         this.recordInter = setInterval(_ => {
             if (this.recordState === 'ing') {
                 // 录音中，但录音时长不增加则取消录音
@@ -399,6 +453,9 @@ export default {
         if (this.recordInter) {
             clearInterval(this.recordInter)
         }
+        if (window.visualViewport) {
+            window.visualViewport.removeEventListener('resize', this.visualViewportResize);
+        }
     },
     computed: {
         ...mapState([
@@ -511,6 +568,14 @@ export default {
             }
             return null;
         },
+
+        chatInputBoxStyle({fullInput, viewportHeight}) {
+            const style = {}
+            if (fullInput && viewportHeight > 0) {
+                style.height = Math.max(100, viewportHeight - 70) + 'px'
+            }
+            return style
+        },
     },
     watch: {
         // Watch content change
@@ -661,7 +726,13 @@ export default {
 
         fullInput(val) {
             this.quill?.enable(!val)
-        }
+        },
+
+        windowScrollY(val) {
+            if (this.fullInput && val > 0) {
+                window.scrollTo(0, 0)
+            }
+        },
     },
     methods: {
         init() {
@@ -1304,6 +1375,9 @@ export default {
                     this.fullQuill.on('selection-change', range => {
                         this.fullSelection = range || {index: 0, length: 0};
                     })
+                    this.fullQuill.on('text-change', _ => {
+                        this.fullSelection = this.fullQuill.getSelection()
+                    })
                     this.fullQuill.enable(true)
                     this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML
                     this.$nextTick(_ => {
@@ -1782,7 +1856,11 @@ export default {
             if (mention.isOpen) {
                 mention.setMentionContainerPosition()
             }
-        }
+        },
+
+        visualViewportResize() {
+            this.viewportHeight = window.visualViewport?.height || 0;
+        },
     }
 }
 </script>

resources/assets/sass/pages/components/chat-input.scss

@@ -769,10 +769,15 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            user-select: none;
+            margin: 0 -12px;
             &.activation {
                 > li {
                     opacity: 1;
                     cursor: pointer;
+                    &:active {
+                        background-color: #eee;
+                    }
                 }
             }
             > li {
@@ -784,39 +789,17 @@
                 justify-content: center;
                 align-items: center;
                 list-style: none;
-                opacity: 0.6;
+                opacity: 0.8;
                 cursor: not-allowed;
-                > svg {
+                border-radius: 8px;
-                    height: 20px;
+                > i {
-                    .im-fill {
+                    color: #555;
-                        fill: #333;
+                    font-size: 16px;
-                    }
-                    .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 {
+                    > i {
-                        height: 18px;
+                        font-size: 14px;
                     }
                 }
             }