设精！

🙈 去除了 no-explicit-any 的编译警告（SS：烦内） 💄 修改没有更多消息的样式 ✨ 现在加载失败的图片会显示为加载失败样式而不是裂掉的图片 ✨ 消息有发送区间时间戳了 ✨ 精华消息支持查看了 ✨ 增加了消息加载中提示 💩 自动清屏消息数降低到 200 条（因为现在消息列表的性能很不好，积压条数会导致卡顿） 🌐 补充遗漏的 i18n 内容
Stapxs · Dec 17, 2022 · 619d6e4 · 619d6e4
1 parent 3d7e500
commit 619d6e4
Show file tree

Hide file tree

Showing 22 changed files with 566 additions and 164 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -13,6 +13,8 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    // 忽略使用 any 的警告
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="referrer" content="no-referrer" id="referrer">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Stapxs QQ Lite</title>
     <!-- Border Card UI -->
     <link rel="stylesheet" href="https://stapxs.github.io/Border-Card-UI/css/style.css">
     <link rel="stylesheet" href="https://stapxs.github.io/Border-Card-UI/css/color-light.css">

diff --git a/src/App.vue b/src/App.vue
@@ -192,7 +192,7 @@ export default defineComponent({
                 showChat: false
             },
             viewerOpt: { inline: false, button: false, title: false, toolbar: { prev: true, rotateLeft: true, reset: true, rotateRight: true, next: true } },
-            viewerBody: undefined
+            viewerBody: undefined as HTMLDivElement | undefined
         }
     },
     methods: {
@@ -265,8 +265,8 @@ export default defineComponent({
                     group_sub_files: {}
                 }
             }
-            // 清空合并转发缓存
-            runtimeData.mergeMessageList = []
+            runtimeData.mergeMessageList = []           // 清空合并转发缓存
+            runtimeData.tags.canLoadHistory = true      // 重置终止加载标志
             // 重置图片预览器状态
             // Object.assign(this.$data.imgView, this.$options.data().imgView)
             if (data.type == 'group') {
@@ -282,7 +282,7 @@ export default defineComponent({
          * 图片查看器初始化
          * @param viewer viewer 对象
          */
-        viewerInited (viewer: any) {
+        viewerInited (viewer: HTMLDivElement) {
             this.viewerBody = viewer
         },
 
@@ -337,3 +337,20 @@ export default defineComponent({
     }
 })
 </script>
+
+<style>
+  .appmsg-move,
+  .appmsg-enter-active,
+  .appmsg-leave-active {
+    transition: all 0.2s;
+  }
+  .appmsg-leave-active {
+    position: absolute;
+  }
+
+  .appmsg-enter-from,
+  .appmsg-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+</style>
diff --git a/src/assets/css/chat.css b/src/assets/css/chat.css
@@ -898,6 +898,85 @@ textarea {
     width: 25px;
 }
 
+.jin-pan {
+    background: var(--color-card-1);
+    transform: translateY(-100%);
+    width: calc(100% - 40px);
+    flex-direction: column;
+    position: absolute;
+    margin-left: 20px;
+    max-height: 50vh;
+    overflow: hidden;
+    display: flex;
+    padding: 0;
+}
+.jin-pan > div:first-child {
+    align-items: center;
+    display: flex;
+    padding: 20px;
+}
+.jin-pan > div:first-child > svg {
+    fill: var(--color-font);
+    cursor: pointer;
+    height: 1.5rem;
+}
+.jin-pan > div:first-child > span {
+    white-space: nowrap;
+    margin-left: 15px;
+    font-size: 1rem;
+    flex: 1;
+}
+.jin-pan-body {
+    margin-bottom: -15px;
+    overflow: scroll;
+    padding: 0 5px;
+}
+.jin-pan-body > div {
+    background: var(--color-card-2);
+    border-radius: 7px;
+    margin: 10px 0;
+    padding: 10px;
+}
+.jin-pan-body > div:first-child {
+    margin-top: 0 !important;
+}
+.jin-pan-body > div > div:first-child {
+    align-items: center;
+    display: flex;
+}
+.jin-pan-body > div > div:first-child > img {
+    border: 1px solid var(--color-card-2);
+    outline: 2px solid var(--color-main);
+    border-radius: 100%;
+    margin-right: 10px;
+    width: 22px;
+}
+.jin-pan-body > div > div:first-child > div {
+    flex-direction: column;
+    display: flex;
+}
+.jin-pan-body > div > div:first-child span {
+    color: var(--color-font-2);
+    border-radius: 2rem;
+    font-size: 0.5rem;
+}
+.jin-pan-body > div > div.context {
+    align-items: flex-end;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 15px;
+    display: flex;
+}
+.jin-pan-body > div > div.context > img {
+    margin: 0 10px 10px 10px;
+    border-radius: 7px;
+    max-width: 60%;
+}
+.jin-pan-body > div > div.context > img.face {
+    margin: -5px 5px 0 5px;
+    height: 1.4rem;
+}
+
 .replay-tag {
     background: var(--color-card-1);
     margin: 0 20px -10px 20px;

diff --git a/src/assets/css/msg.css b/src/assets/css/msg.css
@@ -390,9 +390,6 @@
     margin: 10px 0;
     display: flex;
 }
-.note.top {
-    margin: 40px 0 10px 0;
-}
 .note-base {
     border-radius: calc(3rem + 30px);
     background: var(--color-card-1);
@@ -401,11 +398,31 @@
     font-size: 0.6rem;
     display: flex;
 }
+.note-time {
+    color: var(--color-font-2) !important;
+    display: block;
+}
 .note-nomsg {
+    margin: 10px auto 40px auto;
     color: var(--color-font-2);
+    text-align: center;
     display: block;
-    margin-top: -30px;
     opacity: 0.5;
+    width: 80%;
+}
+.note-nomsg > a {
+    background: var(--color-card);
+    position: relative;
+    font-size: 0.8rem;
+    padding: 0 20px;
+    z-index: 1;
+}
+.note-nomsg > hr {
+    border-style: inset !important;
+    border: 0 !important;
+    border-bottom: 1px solid var(--color-main) !important;
+    opacity: 0.5;
+    margin-bottom: -0.5rem;
 }
 .note-recall > a {
     color: var(--color-main);

diff --git a/src/assets/css/view.css b/src/assets/css/view.css
@@ -495,12 +495,12 @@ html, body {
     float: left;
 }
 
-.viewer-toolbar > ul > li:focus,
 .viewer-toolbar > ul > li:hover {
-    background-color: var(--color-card-2);
+    background-color: var(--color-main);
 }
 
 .viewer-toolbar > ul > li:focus {
+    background-color: var(--color-main);
     box-shadow: 0 0 3px transparent;
 }
 

diff --git a/src/assets/l10n/en-US.json b/src/assets/l10n/en-US.json
@@ -54,7 +54,7 @@
   "chat_msg_menu_withdraw": "Revoke",
   "chat_no_more_msg": "No more messages available",
   "chat_no_msg": "No messages found",
-  "chat_send_pic_send": "Send",
+  "chat_send": "Send",
   "chat_send_pic_title": "Send Image",
   "chat_space": "Start messaging with one of your contacts",
   "chat_unsupported_msg": "(Unsupported message)",
@@ -187,5 +187,12 @@
   "log_cq_msg_parsred": "Log CQ messages parsed",
   "chat_chat_info_option_top": "Pin group / contact",
   "chat_chat_info_option_top_tip": "But no cyberstalking allowed plz",
-  "log_com_err": "Failed to establish connection"
+  "log_com_err": "Failed to establish connection",
+  "sw_ready": "App is being served from cache by a service worker. For more details, visit https://goo.gl/AFskqB",
+  "sw_registered": "Service worker has been registered.",
+  "sw_cached": "Content has been cached for offline use.",
+  "sw_update": "New content is downloading.",
+  "sw_updated": "New content is available; please refresh.",
+  "sw_offline": "No internet connection found. App is running in offline mode.",
+  "sw_error": "Error during service worker registration"
 }
diff --git a/src/assets/l10n/zh-CN.json b/src/assets/l10n/zh-CN.json
@@ -54,7 +54,7 @@
   "chat_msg_menu_withdraw": "撤回",
   "chat_no_more_msg": "没有更多消息了",
   "chat_no_msg": "暂无消息",
-  "chat_send_pic_send": "发送",
+  "chat_send": "发送",
   "chat_send_pic_title": "发送图片",
   "chat_space": "选择联系人开始聊天",
   "chat_unsupported_msg": "不支持的消息",
@@ -186,5 +186,16 @@
   "log_cq_msg_parsred": "解析 CQ 消息结果",
   "chat_chat_info_option_top": "置顶群 / 好友",
   "chat_chat_info_option_top_tip": "再多看我一眼（无端",
-  "log_com_err": "创建连接失败"
+  "log_com_err": "创建连接失败",
+  "sw_ready": "应用已通过 service worker 服务从缓存中加载，更多信息请查看 https://goo.gl/AFskqB。",
+  "sw_registered": "Service worker 服务注册成功。",
+  "sw_cached": "内容已完成缓存便于离线使用。",
+  "sw_update": "正在下载新的内容 ……",
+  "sw_updated": "新的内容已缓存完成，请刷新以生效。",
+  "sw_offline": "没有有效的网络连接，应用正在以离线模式运行。",
+  "sw_error": "注册 service worker 时发生错误",
+  "sw_no_internet": "没有网络",
+  "chat_load_img_fail": "加载图片失败",
+  "chat_fun_menu_jin": "精华消息",
+  "message_title": "消息"
 }
diff --git a/src/assets/l10n/zh-TW.json b/src/assets/l10n/zh-TW.json
@@ -54,7 +54,7 @@
   "chat_msg_menu_withdraw": "收回",
   "chat_no_more_msg": "沒有更多的訊息了",
   "chat_no_msg": "沒有訊息",
-  "chat_send_pic_send": "傳送",
+  "chat_send": "傳送",
   "chat_send_pic_title": "傳送圖片",
   "chat_space": "選取聯絡人來開始聊天",
   "chat_unsupported_msg": "（不支援的訊息）",

diff --git a/src/components/MsgBody.vue b/src/components/MsgBody.vue
@@ -35,7 +35,7 @@
                 <div v-for="(item, index) in data.message" :class="View.isMsgInline(item.type) ? 'msg-inline' : ''" :key="data.message_id + '-m-' + index">
                     <span v-if="isDebugMsg" class="msg-text">{{ item }}</span>
                     <span v-else-if="item.type === 'text'" v-show="item.text !== ''" class="msg-text" v-html="parseText(item.text)"></span>
-                    <img v-else-if="item.type === 'image'" :title="$t('chat_view_pic')" :alt="$t('chat_group_pic')" @load="scrollButtom" @click="imgClick(data.message_id)" :class="imgStyle(data.message.length, index)" :src="item.url">
+                    <img v-else-if="item.type === 'image'" :title="$t('chat_view_pic')" :alt="$t('chat_group_pic')" @load="scrollButtom" @error="imgLoadFail" @click="imgClick(data.message_id)" :class="imgStyle(data.message.length, index)" :src="item.url">
                     <img v-else-if="item.type === 'face'" :alt="item.text" class="msg-face" :src="require('./../assets/img/qq-face/' + item.id + '.gif')" :title="item.text">
                     <span v-else-if="item.type === 'bface'" style="font-style: italic;opacity: 0.7;">[ {{ $t('chat_fun_menu_pic') }}：{{ item.text }} ]</span>
                     <div v-else-if="item.type === 'at'" v-show="isAtShow(data.source, item.qq)" :class="getAtClass(item.qq)">
@@ -131,7 +131,7 @@ export default defineComponent({
 
         /**
          * 滚动到指定消息
-         * @param id 消息 ID
+         * @param id 消息 seq
          */
         scrollToMsg (id: string) {
             this.$emit('scrollToMsg', 'chat-' + id)
@@ -185,6 +185,36 @@ export default defineComponent({
             this.$emit('scrollButtom', null)
         },
 
+        /**
+         * 图片加载失败
+         */
+        imgLoadFail (event: Event) {
+            const sender = event.currentTarget as HTMLImageElement
+            const parent = sender.parentNode as HTMLDivElement
+            parent.style.display = 'flex'
+            parent.style.flexDirection = 'column'
+            parent.style.alignItems = 'center'
+            parent.style.padding = '20px'
+            parent.style.border = '2px dashed var(--color-card-2)'
+            parent.innerText = ''
+            parent.title = sender.src
+            // 新建 svg
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+            svg.setAttribute('viewBox', '0 0 512 512')
+            svg.innerHTML = '<path d="M119.4 44.1c23.3-3.9 46.8-1.9 68.6 5.3l49.8 77.5-75.4 75.4c-1.5 1.5-2.4 3.6-2.3 5.8s1 4.2 2.6 5.7l112 104c2.9 2.7 7.4 2.9 10.5 .3s3.8-7 1.7-10.4l-60.4-98.1 90.7-75.6c2.6-2.1 3.5-5.7 2.4-8.8L296.8 61.8c28.5-16.7 62.4-23.2 95.7-17.6C461.5 55.6 512 115.2 512 185.1v5.8c0 41.5-17.2 81.2-47.6 109.5L283.7 469.1c-7.5 7-17.4 10.9-27.7 10.9s-20.2-3.9-27.7-10.9L47.6 300.4C17.2 272.1 0 232.4 0 190.9v-5.8c0-69.9 50.5-129.5 119.4-141z"/>'
+            svg.style.width = '40px'
+            svg.style.opacity = '0.8'
+            svg.style.fill = 'var(--color-main)'
+            parent.appendChild(svg)
+            // 新建 span
+            const span = document.createElement('span')
+            span.innerText = this.$t('chat_load_img_fail')
+            span.style.marginTop = '10px'
+            span.style.fontSize = '0.8rem'
+            span.style.color = 'var(--color-font-2)'
+            parent.appendChild(span)
+        },
+
         /**
          * 获取消息 ID 的 seq
          * @param id 消息 ID

diff --git a/src/components/NoticeBody.vue b/src/components/NoticeBody.vue
@@ -14,18 +14,25 @@
 
             </div>
         </div>
+        <div class="note-time note-base" v-if="data.sub_type === 'time'">
+            <a>{{ Intl.DateTimeFormat(trueLang, 
+                { hour: "numeric", minute: "numeric", second: "numeric" })
+                    .format(new Date(data.time * 1000)) }}</a>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
 import { runtimeData } from '@/function/msg'
+import { getTrueLang } from '@/function/util'
 
 export default defineComponent({
     name: 'NoticeBody',
     props: ['data'],
     data () {
         return {
+            trueLang: getTrueLang(),
             info: ref(this.data) as { [key: string]: any }
         }
     },

diff --git a/src/function/base.ts b/src/function/base.ts
@@ -6,6 +6,7 @@
  * @Description: 此模块主要为程序相关的基础功能
 */
 
+import Option from './option'
 import { reactive } from 'vue'
 import { PopInfoElem } from './elements/system'
 
@@ -33,15 +34,14 @@ export class Logger {
      * @param args 日志内容
      */
     add(type: LogType, args: string) {
-        // const logLevel = Option.get('log_level');
-        // // PS：info 级别是指除了 ws、ui 和 debug 类型以外的其他日志
-        // if (logLevel === 'all' && (type === LogType.WS || type === LogType.UI) ||
-        //     logLevel === 'debug' && type === LogType.DEBUG||
-        //     logLevel === 'info' && type === LogType.INFO ||
-        //     logLevel === 'err' && type === LogType.ERR) {
-        //     this.print(type, args)
-        // }
-        // this.print(type, args)
+        const logLevel = Option.get('log_level')
+        // PS：info 级别是指除了 ws、ui 和 debug 类型以外的其他日志
+        if (logLevel === 'all' && (type === LogType.WS || type === LogType.UI) ||
+            logLevel === 'debug' && type === LogType.DEBUG ||
+            logLevel === 'info' && type === LogType.INFO ||
+            logLevel === 'err' && type === LogType.ERR) {
+            this.print(type, args)
+        }
     }
     error(args: string) {
         this.add(LogType.ERR, args)