是 BUG 总会被修掉的.png

🎨 优化 options 保存读取逻辑对 object 的处理 🐛 添加商城表情后列表未被刷新 🐛 后端连接模式下前端刷新后无法正常重连 🐛 消息菜单在添加回应功能后右侧出界判断错误，由 b1c880b 损坏 :bug: 消息列表右击菜单底部出界问题
Stapxs · Aug 23, 2024 · 88cbb78 · 88cbb78
1 parent 9f44133
commit 88cbb78
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "clear": "rm -rf dist && rm -rf dist_electron",
     "lint:fix": "vue-cli-service lint --fix",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",

diff --git a/src/assets/css/view.css b/src/assets/css/view.css
@@ -505,7 +505,7 @@ textarea:focus {
     padding: 10px;
 }
 .msg-menu-body.topOut {
-    transition: transform .1s, margin-top .1s;
+    transition: transform .1s, margin-top .2s;
 }
 .msg-menu-body.show {
     transform: scaleY(1);

diff --git a/src/components/FacePan.vue b/src/components/FacePan.vue
@@ -84,13 +84,13 @@ export default defineComponent({
         },
 
         getStoreFaceList() {
-            this.storeFace = JSON.parse(decodeURIComponent(Option.getRaw('store_face') || '[]'))
+            this.storeFace = Option.get('store_face') ?? []
         },
         removeMface(data: any) {
             const index = this.storeFace.findIndex((face) => face.emoji_id === data.emoji_id)
             if (index !== -1) {
                 this.storeFace.splice(index, 1)
-                Option.save('store_face', JSON.stringify(this.storeFace))
+                Option.save('store_face', this.storeFace)
             }
         }
     },
@@ -104,6 +104,10 @@ export default defineComponent({
             }
         }
         this.getStoreFaceList()
+        // 监听表情商店列表
+        this.$watch(() => runtimeData.sysConfig.store_face.length, () => {
+            this.getStoreFaceList()
+        })
     }
 })
 </script>

diff --git a/src/function/electron/connector.ts b/src/function/electron/connector.ts
@@ -37,6 +37,11 @@ export class Connector {
         if(!this.websocket) {
             this.logger.info('正在连接到：', url)
             this.websocket = new WebSocket(url + '?access_token=' + token)
+        } else {
+            // 如果前端发起了连接请求，说明前端在未连接状态；断开已有连接，重新连接
+            // PS：这种情况一般不会发生，大部分情况是因为 debug 模式前端热重载导致的
+            this.websocket.close(1000)
+            this.connect(url, token)
         }
 
         this.websocket.onopen = () => {

diff --git a/src/function/option.ts b/src/function/option.ts
@@ -318,16 +318,13 @@ function loadOptData(data: { [key: string]: any }) {
             options[key] = value === 'true'
         } else if (value === 'null') {
             options[key] = null
-        } else if (key == 'top_info') {
-            // 特殊处理 top_info
-            try {
-                options[key] = JSON.parse(decodeURIComponent(value))
-            } catch (e) {
-                // 无法解析的数据，初始化为空对象
-                options[key] = {}
-            }
         } else if(typeof value == 'string') {
             options[key] = decodeURIComponent(value)
+            try {
+                options[key] = JSON.parse(options[key])
+            } catch(e: unknown) {
+                //
+            }
         } else {
             options[key] = value
         }

diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
@@ -129,7 +129,7 @@
                 <!-- 回复指示器 -->
                 <div :class="tags.isReply ? 'replay-tag show' : 'replay-tag'">
                     <font-awesome-icon :icon="['fas', 'reply']" />
-                    <span>{{ selectedMsg === null ? '' : (selectedMsg.sender.nickname + ': ' + (selectedMsg.raw_message ?? fun.getMsgRawTxt(selectedMsg.message)))
+                    <span>{{ selectedMsg === null ? '' : (selectedMsg.sender.nickname + ': ' + fun.getMsgRawTxt(selectedMsg.message))
                     }}</span>
                     <div @click="cancelReply"><font-awesome-icon :icon="['fas', 'xmark']" /></div>
                 </div>
@@ -799,10 +799,15 @@ export default defineComponent({
                 menu.style.marginLeft = pointX + 'px'
                 menu.style.marginTop = pointY + 'px'
                 // 出界判定
-                const menuWidth = menu.clientWidth
+                let menuWidth = menu.clientWidth
+                if(this.tags.menuDisplay.showRespond) {
+                    // 如果有回应功能，获取回应功能的宽度；它比菜单长
+                    const item = menu.children[0] as HTMLDivElement
+                    menuWidth = item.clientWidth
+                }
                 const msgWidth = msg.offsetWidth
                 if (pointX + menuWidth > msgWidth + 27) {
-                    menu.style.marginLeft = (msgWidth + 27 - menuWidth) + 'px'
+                    menu.style.marginLeft = (msgWidth + 7 - menuWidth) + 'px'
                 }
                 // 显示菜单
                 this.tags.showMsgMenu = true
@@ -811,12 +816,11 @@ export default defineComponent({
                     // 出界判定
                     const menuHeight = menu.clientHeight
                     const bodyHeight = document.body.clientHeight
-                    if (pointY + menuHeight > bodyHeight + 10) {
+                    if (pointY + menuHeight > bodyHeight - 20) {
                         menu.classList.add('topOut')
                         menu.style.marginTop = (bodyHeight - menuHeight - 10) + 'px'
-                        // menu.classList.remove('topOut')
                     }
-                }, 90)
+                }, 100)
                 // 设置消息背景
                 this.tags.openedMenuMsg = msg
                 msg.style.background = '#00000008'
@@ -971,8 +975,7 @@ export default defineComponent({
             const msg = this.selectedMsg
             if (msg !== null) {
             const mface = msg.message[0]
-                const storeFace = option.get('store_face') ?? '[]'
-                const storeFaceList = JSON.parse(storeFace)
+                const storeFaceList = option.get('store_face') ?? []
                 const face = storeFaceList.find((item: any) => {
                     return item.emoji_package_id == mface.emoji_package_id && 
                         item.emoji_id == mface.emoji_id
@@ -981,7 +984,7 @@ export default defineComponent({
                     popInfo.add(PopType.INFO, this.$t('pop_chat_msg_menu_store_face_exist'))
                 } else {
                     storeFaceList.push(mface)
-                    option.save('store_face', JSON.stringify(storeFaceList))
+                    option.save('store_face', storeFaceList)
                     popInfo.add(PopType.INFO, this.$t('pop_chat_msg_menu_store_face_success'))
                 }
             }

diff --git a/src/pages/Messages.vue b/src/pages/Messages.vue
@@ -212,6 +212,12 @@ export default defineComponent({
          * @param id 选择的菜单 ID
          */
         listMenuClose(id: string) {
+            const menu = document.getElementById('msg-menu-view-messages-menu')?.children[1] as HTMLDivElement
+            if(menu) {
+                setTimeout(() => {
+                    menu.style.transition = 'transform .1s'
+                }, 200)
+            }
             this.listMenu.show = false
             const item = this.menu.select
             if(id) {
@@ -345,6 +351,22 @@ export default defineComponent({
             }
             this.listMenu = info
             this.menu.select = item
+            // 出界处理
+            setTimeout(() => {
+                const menu = document.getElementById('msg-menu-view-messages-menu')?.children[1] as HTMLDivElement
+                if(menu) {
+                        menu.style.transition = 'margin .2s, transform .1s'
+                    const hight = menu.clientHeight
+                    const top = menu.getBoundingClientRect().top
+                    const docHight = document.documentElement.clientHeight
+                    // 出界高度
+                    const dtHight = ( hight + top ) - docHight + 20
+                    if(dtHight > 0) {
+                        menu.style.marginTop = (docHight - hight - 30)  + 'px'
+                    }
+
+                }
+            }, 100)
         },
 
         showMenuStart(event: TouchEvent, item: (UserFriendElem & UserGroupElem)) {