Stapxs · Stapxs · Aug 13, 2024 · Jul 25, 2024 · Jul 29, 2024 · Jul 29, 2024
diff --git a/.env b/.env
@@ -1,5 +1,11 @@
+# 功能 API 相关设置
+VUE_APP_LINK_VIEW=https://api.stapxs.cn/tool/page-info/
+
+# 用户统计 umami 相关设置
 VUE_APP_MU_ADDRESS=https://status.stapxs.cn
 VUE_APP_MU_ID=fa20b37d-93a3-41d5-a180-dd66fbbcc573
 VUE_APP_MU_SHARE=https://status.stapxs.cn/share/dxwhBcriczpA7wWQ/Stapxs%20QQ%20Lite%202.0
+
+# 高德地图相关设置
 VUE_APP_AMAP_KEY=99b8849d7b67f05e9f834bde4108f0f9
-VUE_APP_AMAP_SECRET=e9ac5aac621defdd6bb111b55fb75d73
+VUE_APP_AMAP_SECRET=e9ac5aac621defdd6bb111b55fb75d73
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,18 +1,35 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    "@typescript-eslint/no-explicit-any": "off",  // 忽略使用 any 类型的错误
-    "no-debugger": 1                              // debugger 改为警告而非错误
-  }
+    root: true,
+    env: {
+        node: true
+    },
+    'extends': [
+        'plugin:vue/vue3-essential',
+        'eslint:recommended',
+        '@vue/typescript/recommended'
+    ],
+    parserOptions: {
+        ecmaVersion: 2020
+    },
+    rules: {
+        // 基础规则
+        '@typescript-eslint/no-explicit-any': 'off',           // 忽略使用 any 类型的错误
+        'no-debugger': 'warn',                                 // debugger
+        'no-console': 'warn',                                  // console
+        'prefer-arrow-callback': 'warn',                       // 优先使用箭头函数
+        'quotes': ['warn', 'single'],                          // 引号
+        // Vue 相关规则
+        'vue/html-closing-bracket-spacing': ['warn', {
+            'startTag': 'never',
+            'endTag': 'never',
+            'selfClosingTag': 'always'
+        }],                                                  // html 标签闭合
+        'vue/html-quotes': [ 'warn',
+            'double', 
+            { 'avoidEscape': true }
+        ],                                                  // html 引号
+        'vue/v-for-delimiter-style': ['error', 'in'],         // v-for 分隔符
+        'vue/require-name-property': 'warn',                  // 组件 name 属性
+        'vue/prefer-true-attribute-shorthand': 'warn',        // 属性简写
+    }
 }
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
   </a>
   <h2 align="center" style="font-weight: 600">Stapxs QQ Lite 2.0</h2>
  <p align="center">
-  <img src="https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/assets/42486439/e6a04c61-48d6-471b-883a-f5821a13a002" width="400">
+  <img src="README/gitcode.png" width="400">
  </p>
   <p align="center">
     一个兼容 OneBot 的非官方网页 QQ 客户端

diff --git a/README/gitcode.png b/README/gitcode.png
diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "stapxs-qq-lite",
-  "version": "2.7.18",
+  "version": "2.8.0",
   "private": false,
   "author": "Stapx Steve [林槐]",
   "description": "一个兼容 OneBot 的非官方网页版 QQ 客户端，使用 Vue 重制的全新版本。",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "lint:fix": "vue-cli-service lint --fix",
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
@@ -16,6 +17,7 @@
   "dependencies": {
     "@jakejarrett/gtk-theme": "^2.0.1",
     "@stapxs/umami-logger-typescript": "^1.0.12",
+    "@types/prismjs": "^1.26.4",
     "axios": "^1.7.2",
     "browser-image-compression": "^2.0.0",
     "core-js": "^3.8.3",
@@ -27,6 +29,7 @@
     "js-yaml-loader": "^1.2.2",
     "jsonpath": "^1.1.1",
     "pinyin": "^3.0.0-alpha.4",
+    "prismjs": "^1.29.0",
     "raw-loader": "^4.0.2",
     "register-service-worker": "^1.7.2",
     "semver-compare": "^1.0.0",
@@ -38,6 +41,7 @@
     "vue": "^3.2.13",
     "vue-clipboard2": "^0.3.3",
     "vue-i18n": "^9.2.2",
+    "vue-prism-editor": "^2.0.0-alpha.2",
     "vue3-bcui": "^0.2.3",
     "vue3-danmaku": "^1.6.0",
     "vue3-infinite-scroll-better": "^2.2.0",

diff --git a/src/App.vue b/src/App.vue
@@ -11,36 +11,39 @@
     <div id="base-app">
         <div class="main-body">
             <ul :style="get('fs_adaptation') > 0 ? `padding-bottom: ${get('fs_adaptation')}px;` : ''">
-                <li id="bar-home" @click="changeTab('主页', 'Home', true)"
+                <li id="bar-home" @click="changeTab('主页', 'Home', false)"
                     :class="(tags.page == 'Home' ? 'active' : '') + (loginInfo.status ? ' hiden-home' : '')">
-                    <font-awesome-icon :icon="['fas', 'home']"/>
+                    <font-awesome-icon :icon="['fas', 'home']" />
                 </li>
-                <li id="bar-msg" @click="changeTab('信息', 'Messages', false)" :class="tags.page == 'Messages' ? 'active' : ''">
-                    <font-awesome-icon :icon="['fas', 'envelope']"/>
+                <li id="bar-msg" @click="changeTab('信息', 'Messages', true)" :class="tags.page == 'Messages' ? 'active' : ''">
+                    <font-awesome-icon :icon="['fas', 'envelope']" />
                 </li>
-                <li id="bar-friends" @click="changeTab('列表', 'Friends', false)" :class="tags.page == 'Friends' ? 'active' : ''">
-                    <font-awesome-icon :icon="['fas', 'user']"/>
+                <li id="bar-friends" @click="changeTab('列表', 'Friends', true)" :class="tags.page == 'Friends' ? 'active' : ''">
+                    <font-awesome-icon :icon="['fas', 'user']" />
                 </li>
                 <div class="side-bar-space"></div>
-                <li @click="changeTab('设置', 'Options', true);Connector.send('get_version_info', {}, 'getVersionInfo')"
+                <li v-show="runtimeData.sysConfig.append_scripts" id="bar-friends" @click="changeTab('脚本', 'Scripts', false)" :class="tags.page == 'Scripts' ? 'active' : ''">
+                    <font-awesome-icon :icon="['fas', 'file-code']" />
+                </li>
+                <li @click="changeTab('设置', 'Options', false);Connector.send('get_version_info', {}, 'getVersionInfo')"
                     :class="tags.page == 'Options' ? 'active' : ''">
-                    <font-awesome-icon :icon="['fas', 'gear']"/>
+                    <font-awesome-icon :icon="['fas', 'gear']" />
                 </li>
             </ul>
             <div :style="get('fs_adaptation') > 0 ? `height: calc(100% - ${75 + Number(get('fs_adaptation'))}px);` : ''">
                 <div :name="$t('home_title')" v-if="tags.page == 'Home'">
                     <div class="home-body">
                         <div class="login-pan-card ss-card">
-                            <font-awesome-icon :icon="['fas', 'circle-nodes']"/>
+                            <font-awesome-icon :icon="['fas', 'circle-nodes']" />
                             <p>{{ $t('home_card_title') }}</p>
                             <form @submit.prevent @submit="connect">
                                 <label>
-                                    <font-awesome-icon :icon="['fas', 'link']"/>
+                                    <font-awesome-icon :icon="['fas', 'link']" />
                                     <input v-model="loginInfo.address" :placeholder="$t('home_card_address')"
                                         class="ss-input" id="sev_address" autocomplete="off">
                                 </label>
                                 <label>
-                                    <font-awesome-icon :icon="['fas', 'lock']"/>
+                                    <font-awesome-icon :icon="['fas', 'lock']" />
                                     <input v-model="loginInfo.token" :placeholder="$t('home_card_key')" class="ss-input"
                                         type="password" id="access_token" autocomplete="off">
                                 </label>
@@ -94,6 +97,9 @@
                         @userClick="changeChat">
                     </Friends>
                 </div>
+                <div v-show="tags.page == 'Scripts' && runtimeData.sysConfig.append_scripts">
+                    <Scripts></Scripts>
+                </div>
                 <div class="opt-main-tab">
                     <Options
                         :class="tags.page == 'Options' ? 'active' : ''"
@@ -111,16 +117,16 @@
           :is="runtimeData.pageView.chatView"
           :mumberInfo="runtimeData.chatInfo.info.now_member_info == undefined ? {} : runtimeData.chatInfo.info.now_member_info"
           :mergeList="runtimeData.mergeMessageList"
-          :list= runtimeData.messageList
+          :list= "runtimeData.messageList"
           :chat="runtimeData.chatInfo"
           @userClick="changeChat">
         </component>
         <TransitionGroup class="app-msg" name="appmsg" tag="div">
           <div v-for="msg in appMsgs" :key="'appmsg-' + msg.id">
-            <div><font-awesome-icon :icon="['fas', msg.svg]"/></div>
+            <div><font-awesome-icon :icon="['fas', msg.svg]" /></div>
             <a>{{ msg.text }}</a>
             <div v-if="!msg.autoClose" @click="popInfo.remove(msg.id)">
-                <font-awesome-icon :icon="['fas', 'xmark']"/>
+                <font-awesome-icon :icon="['fas', 'xmark']" />
             </div>
           </div>
         </TransitionGroup>
@@ -134,7 +140,7 @@
                             <font-awesome-icon :icon="['fas', runtimeData.popBoxList[0].svg]" />
                         </div>
                         <a>{{ runtimeData.popBoxList[0].title }}</a>
-                        <font-awesome-icon @click="removePopBox" :icon="['fas','xmark']"/>
+                        <font-awesome-icon @click="removePopBox" :icon="['fas','xmark']" />
                     </header>
                     <div v-if="runtimeData.popBoxList[0].html" v-html="runtimeData.popBoxList[0].html"></div>
                     <component v-else
@@ -191,6 +197,7 @@ import { runtimeData, notificationList } from '@/function/msg'
 import { BaseChatInfoElem } from '@/function/elements/information'
 import * as App from './function/utils/appUtil'
 
+import Scripts from '@/pages/Scripts.vue'
 import Options from '@/pages/Options.vue'
 import Friends from '@/pages/Friends.vue'
 import Messages from '@/pages/Messages.vue'
@@ -199,6 +206,7 @@ import Chat from '@/pages/Chat.vue'
 export default defineComponent({
     name: 'App',
     components: {
+        Scripts,
         Options,
         Friends,
         Messages,
@@ -253,14 +261,14 @@ export default defineComponent({
         changeTab (name: string, view: string, show: boolean) {
             // UM：发送页面路由分析
             Umami.trackPageView('/' + view)
-            this.tags.showChat = !show
+            this.tags.showChat = show
             this.tags.page = view
         },
         barMainClick() {
             if(loginInfo.status) {
-                this.changeTab('信息', 'Messages', false)
+                this.changeTab('信息', 'Messages', true)
             } else {
-                this.changeTab('主页', 'Home', true)
+                this.changeTab('主页', 'Home', false)
             }
         },
 

diff --git a/src/assets/css/append/append_new.css b/src/assets/css/append/append_new.css
@@ -575,7 +575,15 @@
     width: 19px;
 }
 .store-face-list {
-    height: calc(300px - 100px);
+    height: calc(300px - 90px) !important;
+}
+
+.face-stickers {
+    height: calc(300px - 90px);
+}
+.face-stickers > img {
+    height: 44px;
+    width: 44px;
 }
 
 .respond {
@@ -636,6 +644,49 @@
     font-size: 0.7rem;
 }
 
+.script-view .list {
+    margin-left: -20px;
+}
+.script-view .list > header {
+    margin-top: 35px;
+}
+.script-view .list > header > span {
+    margin: 10px -5px 0 -5px;
+    font-size: 0.8rem;
+}
+.script-view .list-body {
+    margin: 0 -5px;
+}
+.script-view .list-body h2 {
+    font-size: 0.9rem;
+}
+.script-view .list-body span {
+    font-size: 0.8rem;
+}
+.script-view .list-body span svg {
+    margin: 0;
+    font-size: 0.75rem;
+}
+.script-view .editor-main {
+    box-shadow: -5px 0px 4px -5px var(--color-shader);
+}
+.script-view .save-controller > span,
+.script-view .save-controller > svg {
+    font-size: 0.8rem;
+}
+.script-view .opt-item > select,
+.script-view .ss-button {
+    height: 30px !important;
+}
+.script-view .ss-button,
+.script-view .opt-item > select,
+.script-view .ss-button > svg {
+    font-size: 0.75rem;
+}
+.script-view .editor {
+    font-size: 0.8rem;
+}
+
 @media (max-width: 700px) {
     .main-body > ul {
         background: var(--color-card-2) !important;

diff --git a/src/assets/css/append/append_vibrancy.css b/src/assets/css/append/append_vibrancy.css
@@ -89,6 +89,15 @@
     left: 270px;
 }
 
+.script-view {
+    background: rgba(var(--color-card-rgb), 0.6) !important;
+}
+.script-view .list > header > span,
+.script-view .list-body > div {
+    background: transparent;
+    backdrop-filter: blur(10px);
+}
+
 @media (max-width: 500px) {
     .chat-pan > div.info {
         margin-top: 35px;

diff --git a/src/assets/css/chat.css b/src/assets/css/chat.css
@@ -383,6 +383,7 @@ input {
 }
 .merge-pan > div:last-child > div:first-child svg {
     color: var(--color-font);
+    cursor: pointer;
     height: 1.5rem;
 }
 .merge-pan > div:last-child > div:last-child {
@@ -728,6 +729,19 @@ input {
 .bulletins > div.base > div.body > span {
     white-space: pre-line;
 }
+.bulletins > div.base > div.body > span > a {
+    color: var(--color-main) !important;
+    font-weight: bold;
+    text-decoration: underline;
+    padding: 0 5px;
+    opacity: 0.8;
+}
+.bulletins > div.base > div.body > span > a:before {
+    text-align: center;
+    content: '🔗';
+    color: transparent;
+    text-shadow: 0 0 0 var(--color-font-1);
+}
 .bulletins > div.base > div.info {
     background: var(--color-card-1);
     transition: background .3s;

diff --git a/src/assets/css/msg.css b/src/assets/css/msg.css
@@ -12,6 +12,7 @@
     margin: 5px 0;
     font-size: 1rem;
     flex-wrap: wrap;
+    transition: opacity 0.3s;
 }
 .message.forward {
     border: 2px solid var(--color-card-2);

diff --git a/src/assets/css/options.css b/src/assets/css/options.css
@@ -58,7 +58,14 @@
     width: 25%;
 }
 .logo-card>svg>path:first-child {
-    fill: var(--color-main);
+    fill: var(--color-main) !important;
+}
+.logo-card>svg>path:not(:last-child):not(:nth-last-child(2)) {
+    fill: var(--color-card);
+}
+.logo-card>svg>path:last-child,
+.logo-card>svg>path:nth-last-child(2) {
+    fill: var(--color-card-2);
 }
 
 .logo-card>a {

diff --git a/src/assets/css/view.css b/src/assets/css/view.css
@@ -455,6 +455,8 @@ textarea:focus {
     font-size: 0.9rem;
     flex: 1;
 }
+/* .friend-body > div > div a.nick {
+} */
 .friend-body.active > div > div a {
     color: var(--color-font-1-r);
 }