From 6508e319a6b1423fad4720bac30e3b499b4b74f7 Mon Sep 17 00:00:00 2001
From: stapxs <1007028430.stapx@gmail.com>
Date: Thu, 5 Sep 2024 16:20:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=80=E6=97=B6=E7=88=BD?=
 =?UTF-8?q?=EF=BC=8CBUG=20=E7=81=AB=E8=91=AC=E5=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

:sparkles: 支持群 poke 消息以及相关动画/窗口动画
:sparkles: 新增一个没什么用的 bot 状态功能，仅限于开启了 ws 心跳功能的 bot
:bug: 修正消息列表在窄布局下的错误，由 3a5483e42d0c42708d525c1ff36a22c9007c5a99 损坏
:bug: 修正在 iOS 浏览器下由于通知功能缺失导致通知下游功能损坏的问题
:bug: 修正初次打开由于存储的商城表情未初始化导致的页面卡死问题
:bug: 修正初次打开由于存储的代码未初始导致的页面卡死问题
:bug: 修正由于消息解析器调整公告解析出现错误导致的页面卡死问题，由 c64592d54c8490906ad6eb184b7842f4519fa66b 损坏
:lipstick: 将全局字体限制为非衬线字体，防止在某些浏览器以及 linux 下出现默认为衬线字体的情况
:lipstick: 新增一组常见状态色便于使用
:heavy_plus_sign: 新增依赖：animejs
:green_heart: 发布版本现在会构建一个用于 root 的 web 包便于使用
---
 .github/workflows/build-app.yml           | 57 +++++++++++++-------
 package.json                              |  4 +-
 public/css/append-dark.css                | 11 ++++
 public/css/append-light.css               | 11 ++++
 public/index.html                         |  1 +
 src/assets/css/append/append_vibrancy.css |  4 ++
 src/assets/css/msg.css                    |  7 +++
 src/assets/css/options.css                | 35 +++++++++++++
 src/assets/css/view.css                   |  4 +-
 src/assets/l10n/zh-CN.json                |  3 ++
 src/components/BulletinBody.vue           |  2 +-
 src/components/NoticeBody.vue             | 64 +++++++++++++++++++++--
 src/function/electron/ipc.ts              | 19 ++++++-
 src/function/msg.ts                       | 60 +++++++++++++--------
 src/function/option.ts                    |  5 +-
 src/function/utils/msgUtil.ts             |  2 +-
 src/pages/Chat.vue                        |  5 +-
 src/pages/Scripts.vue                     |  4 +-
 src/pages/options/OptAccount.vue          | 23 ++++++++
 19 files changed, 263 insertions(+), 58 deletions(-)
 create mode 100644 public/css/append-dark.css
 create mode 100644 public/css/append-light.css

diff --git a/.github/workflows/build-app.yml b/.github/workflows/build-app.yml
index 1158aa36..965a4819 100644
--- a/.github/workflows/build-app.yml
+++ b/.github/workflows/build-app.yml
@@ -25,31 +25,50 @@ jobs:
     - name: Init Env
       id: step_init
       run: |
-        # 判断是否需要构建 web 版本，检查 push message 中最后一行是否不包含 [not-build-web]（默认构建）
-        if [[ $(git log -1 --pretty=%B) != *"[not-build-web]"* ]]; then
-          echo 'BUILD_WEB=true'
-          echo 'BUILD_WEB=true' >> $GITHUB_OUTPUT
-        else
-          echo 'BUILD_WEB=false'
-          echo 'BUILD_WEB=false' >> $GITHUB_OUTPUT
-        fi
-        # 判断是否需要构建 electron 版本，检查 push message 中最后一行是否包含 [build-electron]
-        if [[ $(git log -1 --pretty=%B) == *"[build-electron]"* ]]; then
-          echo 'BUILD_ELECTRON=true'
-          echo 'BUILD_ELECTRON=true' >> $GITHUB_OUTPUT
-        else
-          echo 'BUILD_ELECTRON=false'
-          echo 'BUILD_ELECTRON=false' >> $GITHUB_OUTPUT
-        fi
         # 获取版本号
         echo VERSION=$(node -p "require('./package.json').version") >> $GITHUB_OUTPUT
 
-  # ========================= 构建 Web 版本 ========================= 
+  # ========================= 构建 Web 版本 =========================
+
+  build-root-web:
+    name: 构建 Web 版本（根目录）
+    runs-on: ubuntu-latest
+    needs: init
+    steps:
+    # 拉取代码
+    - name: Checkout
+      uses: actions/checkout@v4
+      with:
+        submodules: recursive
+        persist-credentials: false
+    # 设置 Node.js 版本
+    - name: Load Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 18.x
+    # 更新依赖
+    - name: Install
+      run: yarn
+    # 构建
+    - name: Build
+      run: yarn build
+
+    # 将 dist 目录压缩为 zip
+    - name: Zip
+      run: zip -r Stapxs.QQ.Lite-${{ needs.init.outputs.version }}-web.zip dist
+    
+    # 上传构建结果
+    - name: Upload Artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: ${{ needs.init.outputs.version }}-web
+        path: Stapxs.QQ.Lite-${{ needs.init.outputs.version }}-web.zip
+
+  # ==================== 构建 Github Pages 版本 ===================== 
   build-pages:
     name: 构建 Github Pages 版本
     runs-on: ubuntu-latest
     needs: init
-    if: needs.init.outputs.build_web == 'true'
     steps:
     # 拉取代码
     - name: Checkout
@@ -90,10 +109,8 @@ jobs:
       version: ${{ needs.init.outputs.version }}
 
     needs: init
-    if: needs.init.outputs.build_electron == 'true'
 
     steps:
-
     # 拉取代码
     - name: Checkout
       uses: actions/checkout@v4
diff --git a/package.json b/package.json
index 123a5f89..db4cd90e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stapxs-qq-lite",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "private": false,
   "author": "Stapx Steve [林槐]",
   "description": "一个兼容 OneBot 的非官方网页版 QQ 客户端，使用 Vue 重制的全新版本。",
@@ -19,6 +19,7 @@
     "@jakejarrett/gtk-theme": "^2.0.1",
     "@stapxs/umami-logger-typescript": "^1.0.12",
     "@types/prismjs": "^1.26.4",
+    "animejs": "^3.2.2",
     "axios": "^1.7.2",
     "browser-image-compression": "^2.0.0",
     "core-js": "^3.8.3",
@@ -50,6 +51,7 @@
     "xss": "^1.0.14"
   },
   "devDependencies": {
+    "@types/animejs": "^3.1.12",
     "@types/css": "^0.0.33",
     "@types/electron-devtools-installer": "^2.2.0",
     "@types/jsonpath": "^0.2.3",
diff --git a/public/css/append-dark.css b/public/css/append-dark.css
new file mode 100644
index 00000000..c88c7292
--- /dev/null
+++ b/public/css/append-dark.css
@@ -0,0 +1,11 @@
+:root {
+    --color-blue: #316cf4;
+    --color-green: #408558;
+    --color-red: #cb444a;
+    --color-yellow: #f6c344;
+
+    --color-bg-blue: #393e47;
+    --color-bg-green: #3f544a;
+    --color-bg-red: #523a3c;
+    --color-bg-yellow: #504b3d;
+}
\ No newline at end of file
diff --git a/public/css/append-light.css b/public/css/append-light.css
new file mode 100644
index 00000000..9cb77a7e
--- /dev/null
+++ b/public/css/append-light.css
@@ -0,0 +1,11 @@
+:root {
+    --color-blue: #316cf4;
+    --color-green: #408558;
+    --color-red: #cb444a;
+    --color-yellow: #f6c344;
+
+    --color-bg-blue: #d3e1fc;
+    --color-bg-green: #d5e6de;
+    --color-bg-red: #f3d8da;
+    --color-bg-yellow: #fdf3d1;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 03a2933e..67dd18cf 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
     <title>Stapxs QQ Lite</title>
     <link rel="stylesheet" href="bcui/css/style.css">
     <link rel="stylesheet" href="bcui/css/color-light.css">
+    <link rel="stylesheet" href="css/append-light.css">
   </head>
   <body>
     <noscript>
diff --git a/src/assets/css/append/append_vibrancy.css b/src/assets/css/append/append_vibrancy.css
index 09320e20..00d79cd4 100644
--- a/src/assets/css/append/append_vibrancy.css
+++ b/src/assets/css/append/append_vibrancy.css
@@ -1,3 +1,7 @@
+html, body {
+    background: transparent;
+}
+
 .home-body {
     background: rgba(var(--color-card-rgb), 0.6);
 }
diff --git a/src/assets/css/msg.css b/src/assets/css/msg.css
index 13d0ceee..8c7202ce 100644
--- a/src/assets/css/msg.css
+++ b/src/assets/css/msg.css
@@ -499,6 +499,10 @@
     margin: 0 5px;
 }
 
+.note-notify {
+    transition: border .5s;
+    border: 1px solid transparent;
+}
 .note-notify img {
     display: inline-block;
     width: 1rem;
@@ -509,6 +513,9 @@
     color: var(--color-main);
     font-weight: bold;
 }
+.note.poking > div.note-notify {
+    border: 1px solid var(--color-main);
+}
 
 @media (max-width: 992px) {
     /* 消息体 */
diff --git a/src/assets/css/options.css b/src/assets/css/options.css
index 6ca5b720..adc49355 100644
--- a/src/assets/css/options.css
+++ b/src/assets/css/options.css
@@ -418,6 +418,41 @@
     margin-left: 40px;
 }
 
+.bot-status {
+    background: var(--color-card-1);
+    transition: background .3s;
+    padding: 10px;
+    margin-top: -10px;
+    margin-bottom: 10px;
+    border-radius: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.bot-status.normal {
+    background: var(--color-bg-green);
+}
+.bot-status.slow {
+    background: var(--color-bg-yellow);
+}
+.bot-status > div {
+    transition: background .3s;
+    background: var(--color-main);
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 10px;
+}
+.bot-status.normal > div {
+    background: var(--color-green);
+}
+.bot-status.slow > div {
+    background: var(--color-yellow);
+}
+.bot-status > span {
+    font-size: 0.85rem;
+}
+
 .theme-color-col {
     flex-direction: row-reverse !important;
     margin-right: 0 !important;
diff --git a/src/assets/css/view.css b/src/assets/css/view.css
index 6b706243..3b3ec491 100644
--- a/src/assets/css/view.css
+++ b/src/assets/css/view.css
@@ -1,4 +1,6 @@
 html, body {
+    background: var(--color-main);
+    font-family: 'Arial', 'Helvetica', 'sans-serif';
     user-select: none;
     overflow: hidden;
     height: 100%;
@@ -384,7 +386,6 @@ textarea:focus {
     border-radius: 7px;
     transform: translate(0, 0);
     transition: background .2s, color .2s, transform .2s;
-    align-items: center;
 }
 .friend-body.active {
     background: var(--color-main);
@@ -424,7 +425,6 @@ textarea:focus {
     overflow: hidden;
 }
 .friend-body > div:nth-child(1) {
-    height: 54px;
     flex: unset;
     width: 4px;
     background: var(--color-main);
diff --git a/src/assets/l10n/zh-CN.json b/src/assets/l10n/zh-CN.json
index 12344ebb..6ef83a3b 100644
--- a/src/assets/l10n/zh-CN.json
+++ b/src/assets/l10n/zh-CN.json
@@ -367,6 +367,9 @@
   "option_dev_restart_tip1": "此操作将在重启应用后生效，现在就要重启吗？",
   "option_dev_restart_tip2": "此操作仅供娱乐，将会在下次关闭时恢复。",
   "a_inner_script": "这是个内嵌示例脚本，你可以修改它并保存使用。",
+  "opt_bot_status_normal": "连接正常（{timeout} - {step} s）",
+  "opt_bot_status_slow": "连接延迟（{timeout} - {step} s）",
+  "opt_bot_status_loading": "正在收集连接信息……",
 
   "menu_about": "关于",
   "menu_update": "检查更新…",
diff --git a/src/components/BulletinBody.vue b/src/components/BulletinBody.vue
index 083e8154..da31c810 100644
--- a/src/components/BulletinBody.vue
+++ b/src/components/BulletinBody.vue
@@ -15,7 +15,7 @@
                     .format(data.time) }}</span>
         </header>
         <div :id="'bulletins-msg-' + index" :class="'body' + (!showAll ? '' : ' all')">
-            <span @click="textClick" v-html="parseText(data.content)"></span>
+            <span @click="textClick" v-html="parseText(data.content[0])"></span>
         </div>
         <span v-show="needShow && !showAll">{{ $t('bulletin_show_tip') }}</span>
         <div class="info">
diff --git a/src/components/NoticeBody.vue b/src/components/NoticeBody.vue
index a35d9761..3cead764 100644
--- a/src/components/NoticeBody.vue
+++ b/src/components/NoticeBody.vue
@@ -6,7 +6,7 @@
 -->
 
 <template>
-    <div class="note">
+    <div :id="'notice-' + id" class="note">
         <div class="note-recall note-base" v-if="data.notice_type && data.notice_type.indexOf('recall') >= 0">
             <a>{{ info.name }}</a>
             <span>{{ $t('chat_notice_recall') }}</span>
@@ -28,7 +28,7 @@
             </template>
             <span v-else>{{ $t('note_unban', { name: isMe(data.user_id) ? $t('you') : getName(data.user_id) }) }}</span>
         </div>
-        <div v-if="data.sub_type === 'poke'" class="note-notify note-base" v-html="data.str"></div>
+        <div v-if="data.sub_type === 'poke'" class="note-notify note-base" v-html="data.str + '<div class=\'space\'</div>'"></div>
         <div v-if="data.sub_type === 'time'" class="note-time note-base">
             <a>{{
                 Intl.DateTimeFormat(trueLang, getTimeConfig(new Date(data.time * 1000)))
@@ -39,13 +39,15 @@
 </template>
 
 <script lang="ts">
+import anime from 'animejs'
+
 import { defineComponent, ref } from 'vue'
 import { runtimeData } from '@/function/msg'
 import { getTimeConfig, getTrueLang } from '@/function/utils/systemUtil'
 
 export default defineComponent({
     name: 'NoticeBody',
-    props: ['data'],
+    props: ['data', 'id'],
     data() {
         return {
             trueLang: getTrueLang(),
@@ -89,9 +91,16 @@ export default defineComponent({
             return back
         }
     },
-    mounted() {
+    async mounted() {
+        let windowInfo = null as { x: number, y: number, width: number, height: number } | null
+        if(runtimeData.tags.isElectron) {
+            const reader = runtimeData.reader
+            if(reader) {
+                windowInfo = await reader.invoke('win:getWindowInfo')
+            }
+        }
+        // 补全撤回者信息
         if (this.info.notice_type && this.info.notice_type.indexOf('recall') >= 0) {
-            // 补全撤回者信息
             if (runtimeData.chatInfo.show.type === 'group') {
                 const id = this.info.operator_id
                 // 寻找群成员信息
@@ -111,6 +120,51 @@ export default defineComponent({
                 this.info.name = runtimeData.chatInfo.show.name
             }
         }
+        // poke 通知创建对应的动画
+        if(this.info.sub_type === 'poke' && this.info.pokeMe) {
+            // 给 body 创建一个三段的动画
+            let item = document.getElementById('app')
+            if(runtimeData.tags.isElectron) {
+                item = document.getElementById('notice-' + this.id)
+                        ?.getElementsByClassName('space')[0] as HTMLElement
+            }
+            if(item) {
+                const timeLine = anime.timeline({ targets: item })
+                // 如果窗口小于 500px 播放完整的动画（手机端样式）
+                if((document.getElementById('app')?.offsetWidth ?? 500) < 500) {
+                    navigator.vibrate([10, 740, 10])
+                    timeLine.add({ translateX: 30, duration: 600, easing: 'cubicBezier(.44,.09,.53,1)' })
+                    .add({ translateX: 0, duration: 150, easing: 'cubicBezier(.44,.09,.53,1)' })
+                    .add({ translateX: [0, 25, 0], duration: 500, easing: 'cubicBezier(.21,.27,.82,.67)'})
+                    .add({ targets: {}, duration: 1000 })
+                    .add({ translateX: 70, duration: 1300, easing: 'cubicBezier(.89,.72,.72,1.13)'})
+                    .add({ translateX: 0, duration: 100, easing: 'easeOutSine'})
+                }
+                timeLine.add({ translateX: [-10, 10, -5, 5 , 0], duration: 500, easing: 'cubicBezier(.44,.09,.53,1)' })
+                timeLine.change = () => {
+                    if(item) {
+                        item.parentElement?.parentElement?.classList.add('poking')
+                        const teansformX = item.style.transform
+                        // teansformX 的数字可能是科学计数法，需要转换为普通数字
+                        let num = Number((teansformX.match(/-?\d+\.?\d*/g) ?? [0])[0])
+                        // 取整
+                        num = Math.round(num)
+                        // 输出 translateX
+                        if(runtimeData.tags.isElectron && windowInfo) {
+                            const reader = runtimeData.reader
+                            if(reader) {
+                                reader.send('win:move', { x: windowInfo.x + num, y: windowInfo.y })
+                            }
+                        }
+                    }
+                }
+                timeLine.changeComplete = () => {
+                    if(item) {
+                        item.parentElement?.parentElement?.classList.remove('poking')
+                    }
+                }
+            }
+        }
     }
 })
 </script>
diff --git a/src/function/electron/ipc.ts b/src/function/electron/ipc.ts
index 61a4b13b..00a73342 100644
--- a/src/function/electron/ipc.ts
+++ b/src/function/electron/ipc.ts
@@ -2,7 +2,7 @@ import Store from 'electron-store'
 import path from 'path'
 import os from 'os'
 
-import { ipcMain, shell, systemPreferences, app, Menu, MenuItemConstructorOptions, Notification as ELNotification } from 'electron'
+import { ipcMain, shell, systemPreferences, app, Menu, MenuItemConstructorOptions, Notification as ELNotification, screen as sysScreen } from 'electron'
 import { GtkTheme, GtkData } from '@jakejarrett/gtk-theme'
 import { runCommand } from './util'
 import { win, touchBarInstance } from '@/background'
@@ -76,6 +76,23 @@ export function regIpcListener() {
     ipcMain.on('win:alwaysTop', (event, args) => {
         if(win) win.setAlwaysOnTop(args)
     })
+    // 获取窗口信息
+    ipcMain.handle('win:getWindowInfo', () => {
+        if(win) {
+            const [x, y] = win.getPosition()
+            const [width, height] = win.getSize()
+            return {
+                x: x, y: y,
+                width: width, height: height
+            }
+        }
+    })
+    // 移动窗口位置
+    ipcMain.on('win:move', (event, point) => {
+        if(win) {
+            win.setPosition(point.x, point.y)
+        }
+    })
     // 保存信息
     ipcMain.on('sys:store', (event, arg) => {
         store.set(arg.key, arg.value)
diff --git a/src/function/msg.ts b/src/function/msg.ts
index c0d391cc..15a7c4fd 100644
--- a/src/function/msg.ts
+++ b/src/function/msg.ts
@@ -75,7 +75,14 @@ const noticeFunctions = {
      */
     meta_event: (name: string, msg: { [key: string]: any }) => {
         if(firstHeartbeatTime == -1) {
+            firstHeartbeatTime = 0
+            runtimeData.watch.heartbeatTime = 0
+            return
+        }
+        if(firstHeartbeatTime == 0) {
             firstHeartbeatTime = msg.time
+            runtimeData.watch.lastHeartbeatTime = msg.time
+            return
         }
         if(firstHeartbeatTime != -1 && heartbeatTime == -1) {
             // 计算心跳时间
@@ -214,6 +221,7 @@ const noticeFunctions = {
             })
             // 插入系统消息
             msg.str = str
+            msg.pokeMe = userInfo[1].isMe
             runtimeData.messageList.push(msg)
         }
     }
@@ -230,9 +238,7 @@ const msgFunctons = {
             const data = msgBody[0]
 
             // 如果 runtime 存在（即不是第一次连接），且 app_name 不同，重置 runtime
-            if(runtimeData.botInfo.app_name != data.app_name) {
-                resetRimtime()
-            }
+            resetRimtime(runtimeData.botInfo.app_name != data.app_name && !login.status)
 
             runtimeData.botInfo = data
             // UM：提交分析信息，主要在意的是 bot 类型
@@ -264,9 +270,7 @@ const msgFunctons = {
             const data = msgBody[0]
 
             // 如果 runtime 存在（即不是第一次连接），且 uin 不同，重置 runtime
-            if(runtimeData.loginInfo.uin != data.uin) {
-                resetRimtime()
-            }
+            resetRimtime(runtimeData.loginInfo.uin != data.uin && !login.status)
 
             // 完成登陆初始化
             runtimeData.loginInfo = data
@@ -1332,13 +1336,21 @@ function newMsg(name: string, data: any) {
                             runtimeData.reader.send('sys:sendNotice', msgInfo)
                         }
                     } else {
-                        // 检查通知权限，老旧浏览器不支持这个功能
-                        if (Notification.permission === 'default') {
-                            Notification.requestPermission(() => {
+                        // Safari：在 iOS 下，如果页面没有被创建为主屏幕，通知无法被调用
+                        // 最见鬼的是它不是方法返回失败，而且整个 Notification 对象都没有
+                        const isSupported = () =>
+                            'Notification' in window &&
+                            'serviceWorker' in navigator &&
+                            'PushManager' in window
+                        if(isSupported()) {
+                            // 检查通知权限，老旧浏览器不支持这个功能
+                            if (Notification.permission === 'default') {
+                                Notification.requestPermission(() => {
+                                    sendNotice(msgInfo)
+                                })
+                            } else if (Notification.permission !== 'denied') {
                                 sendNotice(msgInfo)
-                            })
-                        } else if (Notification.permission !== 'denied') {
-                            sendNotice(msgInfo)
+                            }
                         }
                     }
                 }
@@ -1512,15 +1524,19 @@ export const runtimeData: RunTimeDataElem = reactive(baseRuntime)
 export const notificationList: Notification[] = reactive([])
 
 // 重置 Runtime，但是保留应用设置之类已经加载好的应用内容
-export function resetRimtime() {
-    runtimeData.tags = reactive(baseRuntime.tags)
-    runtimeData.chatInfo = reactive(baseRuntime.chatInfo)
-    runtimeData.userList = reactive([])
-    runtimeData.showList = reactive([])
-    runtimeData.watch = reactive(baseRuntime.watch)
-    runtimeData.systemNoticesList = reactive([])
-    runtimeData.onMsgList = reactive([])
-    runtimeData.loginInfo = reactive([])
+export function resetRimtime(resetAll = false) {
     runtimeData.botInfo = reactive([])
-    runtimeData.messageList = reactive([])
+    runtimeData.watch = reactive(baseRuntime.watch)
+    firstHeartbeatTime = -1
+    heartbeatTime = -1
+    if(resetAll) {
+        runtimeData.tags = reactive(baseRuntime.tags)
+        runtimeData.chatInfo = reactive(baseRuntime.chatInfo)
+        runtimeData.userList = reactive([])
+        runtimeData.showList = reactive([])
+        runtimeData.systemNoticesList = reactive([])
+        runtimeData.onMsgList = reactive([])
+        runtimeData.loginInfo = reactive([])
+        runtimeData.messageList = reactive([])
+    }
 }
\ No newline at end of file
diff --git a/src/function/option.ts b/src/function/option.ts
index a24ad995..cb875163 100644
--- a/src/function/option.ts
+++ b/src/function/option.ts
@@ -35,7 +35,8 @@ const optDefault: { [key: string]: any } = {
     theme_color: 0,
     chat_background_blur: 0,
     msg_type: 2,
-    vibrancy_mode: 'default'
+    vibrancy_mode: 'default',
+    store_face: '[]'
 }
 
 // =============== 设置项事件 ===============
@@ -215,7 +216,7 @@ function changeColorMode(mode: string) {
         runtimeData.tags.firstLoad = false
     }
     // 切换颜色
-    const match_list = ['color-.*.css', 'prism-.*.css']
+    const match_list = ['color-.*.css', 'prism-.*.css', 'append-.*.css']
     const css_list = document.getElementsByTagName('link')
     for (let i = 0; i < css_list.length; i++) {
         const name = css_list[i].href
diff --git a/src/function/utils/msgUtil.ts b/src/function/utils/msgUtil.ts
index 4d282d71..daccd16a 100644
--- a/src/function/utils/msgUtil.ts
+++ b/src/function/utils/msgUtil.ts
@@ -1,12 +1,12 @@
 import jp from 'jsonpath'
 import app from '@/main'
+import Umami from '@stapxs/umami-logger-typescript'
 
 import { Logger } from '@/function/base'
 import { runtimeData } from '@/function/msg'
 import { v4 as uuid } from 'uuid'
 import { Connector } from '@/function/connect'
 import { BotMsgType, UserFriendElem, UserGroupElem } from '../elements/information'
-import Umami from '@stapxs/umami-logger-typescript'
 
 const logger = new Logger()
 
diff --git a/src/pages/Chat.vue b/src/pages/Chat.vue
index 6041bd15..e01972fe 100644
--- a/src/pages/Chat.vue
+++ b/src/pages/Chat.vue
@@ -66,7 +66,7 @@
                         @touchend="msgMoveEnd($event, msg)">
                     </MsgBody>
                     <!-- 其他通知消息 -->
-                    <NoticeBody v-if="msg.post_type === 'notice'" :key="'notice-' + index" :data="msg"></NoticeBody>
+                    <NoticeBody :id="uuid()" v-if="msg.post_type === 'notice'" :key="'notice-' + index" :data="msg"></NoticeBody>
                 </template> 
             </TransitionGroup>
         </div>
@@ -223,6 +223,7 @@
                         <NoticeBody
                             v-if="isShowTime((mergeList[index - 1] ? mergeList[index - 1].time : undefined), msg.time, index == 0)"
                             :key="'notice-time-' + index"
+                            :id="uuid()"
                             :data="{sub_type: 'time', time: msg.time}">
                         </NoticeBody>
                         <!-- 合并转发消息忽略是不是自己的判定 -->
@@ -384,6 +385,7 @@ import FacePan from '@/components/FacePan.vue'
 import imageCompression from 'browser-image-compression'
 
 import { defineComponent, markRaw } from 'vue'
+import { v4 as uuid } from 'uuid'
 import { downloadFile, loadHistory as loadHistoryFirst } from '@/function/utils/appUtil'
 import { getTimeConfig, getTrueLang } from '@/function/utils/systemUtil'
 import { getMsgRawTxt, sendMsgRaw, getFace } from '@/function/utils/msgUtil'
@@ -400,6 +402,7 @@ export default defineComponent({
     components: { Info, MsgBody, NoticeBody, FacePan },
     data() {
         return {
+            uuid,
             fun: {
                 getMsgRawTxt: getMsgRawTxt
             },
diff --git a/src/pages/Scripts.vue b/src/pages/Scripts.vue
index fbf54e91..af6e6f2f 100644
--- a/src/pages/Scripts.vue
+++ b/src/pages/Scripts.vue
@@ -62,7 +62,7 @@
                     <font-awesome-icon :icon="['fas', 'save']" />
                     <span>{{ $t('scripts_run_save') }}</span>
                 </button>
-                <button class="ss-button"
+                <button class="ss-button" v-if="!select?.inner"
                     @click="editScript = false;remove(select?.title);">
                     <font-awesome-icon v-if="!select" :icon="['fas', 'times']" />
                     <font-awesome-icon v-else :icon="['fas', 'trash-alt']" />
@@ -251,7 +251,7 @@ export default defineComponent({
             }
         })
         // 读取保存的脚本
-        this.savedList = JSON.parse(decodeURIComponent(getRaw('scripts'))) ?? []
+        this.savedList = getRaw('scripts') ? JSON.parse(decodeURIComponent(getRaw('scripts'))) : []
         // 读取内嵌脚本
         for (const scriptInfo of sysScriptsList) {
             const title = scriptInfo.title
diff --git a/src/pages/options/OptAccount.vue b/src/pages/options/OptAccount.vue
index 18f8fd6c..bbd46c0d 100644
--- a/src/pages/options/OptAccount.vue
+++ b/src/pages/options/OptAccount.vue
@@ -61,6 +61,10 @@
                     <span>{{ $t('option_account_bot_tip') }}</span>
                 </div>
             </div>
+            <div :class="'bot-status ' + getRunStatus()" v-if="getRunStatus() != 'unknown'">
+                <div></div>
+                <span>{{ $t('opt_bot_status_' + getRunStatus(), { step: runtimeData.watch.heartbeatTime, timeout: (runtimeData.watch.lastHeartbeatTime ?? 0) - (runtimeData.watch.oldHeartbeatTime ?? 0)}) }}</span>
+            </div>
             <div class="bot-info">
                 <div v-for="key in Object.keys(runtimeData.botInfo)" :key="'botinfo-' + key">
                     <span v-if="key !== 'app_name' && key !== 'app_version' && key !== 'version'">
@@ -149,6 +153,25 @@ export default {
             if (event.key === 'Enter' && runtimeData.loginInfo.info.lnick !== '') {
                 Connector.send('set_signature', {signature: runtimeData.loginInfo.info.lnick}, 'setSignature')
             }
+        },
+
+        getRunStatus() {
+            const step = runtimeData.watch.heartbeatTime
+            const old = runtimeData.watch.oldHeartbeatTime
+            const last = runtimeData.watch.lastHeartbeatTime
+            
+            if(step && old && last) {
+                if(last - old == step) {
+                    return 'normal'
+                } else {
+                    return 'slow'
+                }
+            } else {
+                if(step == 0) {
+                    return 'loading'
+                }
+                return 'unknown'
+            }
         }
     }
 }