From 7d9e504861076b9ee07f2a1763663d8493c6f625 Mon Sep 17 00:00:00 2001
From: stapxs <1007028430.stapx@gmail.com>
Date: Tue, 13 Aug 2024 16:44:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=B7=E4=B8=8D=E4=BA=86=E4=B8=80=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

:sparkles: 客户端脚本支持！现在你可以通过编写 js 脚本来执行一些自动化操作；在 设置 - 高级 - 进阶功能 处打开它。
:bug: 修正获取历史会话异步异常的问题
:heavy_plus_sign: 新增依赖 prismjs、vue-prism-editor
---
 package.json                              |   5 +-
 src/App.vue                               |  22 +-
 src/assets/css/append/append_new.css      |  43 +++
 src/assets/css/append/append_vibrancy.css |   9 +
 src/assets/l10n/zh-CN.json                |  12 +
 src/function/electron/ipc.ts              |  57 +--
 src/function/elements/information.ts      |   3 +
 src/function/msg.ts                       |  14 +
 src/function/utils/appUtil.ts             |   3 -
 src/function/utils/msgUtil.ts             |   4 +-
 src/main.ts                               |   3 +
 src/pages/Scripts.vue                     | 418 ++++++++++++++++++++++
 src/pages/options/OptDev.vue              |  17 +
 13 files changed, 572 insertions(+), 38 deletions(-)
 create mode 100644 src/pages/Scripts.vue

diff --git a/package.json b/package.json
index 17272d25..76097629 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stapxs-qq-lite",
-  "version": "2.7.18",
+  "version": "2.8.0",
   "private": false,
   "author": "Stapx Steve [林槐]",
   "description": "一个兼容 OneBot 的非官方网页版 QQ 客户端，使用 Vue 重制的全新版本。",
@@ -17,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",
@@ -28,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",
@@ -39,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
index e0e931fa..a9c4e7cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,18 +11,21 @@
     <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']" />
                 </li>
-                <li id="bar-msg" @click="changeTab('信息', 'Messages', false)" :class="tags.page == 'Messages' ? 'active' : ''">
+                <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' : ''">
+                <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']" />
                 </li>
@@ -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' : ''"
@@ -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
index 1bb4479e..1dec176b 100644
--- a/src/assets/css/append/append_new.css
+++ b/src/assets/css/append/append_new.css
@@ -644,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
index 39cfd48e..792ad0bc 100644
--- 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/l10n/zh-CN.json b/src/assets/l10n/zh-CN.json
index f86231e8..3a7216b5 100644
--- a/src/assets/l10n/zh-CN.json
+++ b/src/assets/l10n/zh-CN.json
@@ -321,6 +321,18 @@
   "option_dev_chat_respond": "关闭回应功能",
   "option_dev_chat_respond_tip": "如果你不想用它或者 bot 不支持，可以关闭这个功能",
   "chat_jump_reply_fail": "（获取回复消息失败）",
+  "title_scripts": "脚本",
+  "scripts_tip": "脚本功能提供了一种简便的自动化操作方式，能够执行如自动回复等任务。",
+  "scripts_run_save": "保存",
+  "scripts_run_condition": "条件",
+  "scripts_run_trigger": "触发",
+  "scripts_run_message": "新消息",
+  "option_dev_append": "进阶功能",
+  "option_dev_scripts_tip": "显示脚本功能面板",
+  "statue_enabled": "已启用",
+  "statue_disabled": "已禁用",
+  "scripts_run_title_err": "脚本标题已存在",
+  "scripts_run_notice": "脚本方法将限制在当前页面内，你可以参考当前页面的源代码来了解可用的方法可用。",
 
   "menu_about": "关于",
   "menu_update": "检查更新…",
diff --git a/src/function/electron/ipc.ts b/src/function/electron/ipc.ts
index f43c8154..5e9db4ff 100644
--- a/src/function/electron/ipc.ts
+++ b/src/function/electron/ipc.ts
@@ -20,32 +20,32 @@ export function regIpcListener() {
         return os.release()
     })
     // 代理请求 HTTP
-    ipcMain.on('sys:requestHttp', (event, args) => {
-        console.log(args)
+    // ipcMain.on('sys:requestHttp', (event, args) => {
+        // console.log(args)
 
-        const cookies = JSON.parse(args.cookies)
-        console.log(cookies)
-        const cookieStrs = Object.keys(cookies).map((key) => {
-            return key + '=' + cookies[key]
-        })
-        console.log(cookieStrs.join('; '))
-        // 异步请求，不需要立即返回
-        axios({
-            method: args.type,
-            url: args.url,
-            headers: {
-                'Content-Type': 'application/json',
-                'Cookie': cookieStrs.join('; '),
-            },
-            data: args.data
-        }).then((res) => {
-            // res.data
-            console.log(res.data)
-        }).catch((err) => {
-            // err
-            console.error(err)
-        })
-    })
+        // const cookies = JSON.parse(args.cookies)
+        // console.log(cookies)
+        // const cookieStrs = Object.keys(cookies).map((key) => {
+        //     return key + '=' + cookies[key]
+        // })
+        // console.log(cookieStrs.join('; '))
+        // // 异步请求，不需要立即返回
+        // axios({
+        //     method: args.type,
+        //     url: args.url,
+        //     headers: {
+        //         'Content-Type': 'application/json',
+        //         'Cookie': cookieStrs.join('; '),
+        //     },
+        //     data: args.data
+        // }).then((res) => {
+        //     // res.data
+        //     console.log(res.data)
+        // }).catch((err) => {
+        //     // err
+        //     console.error(err)
+        // })
+    // })
     // 关闭窗口
     ipcMain.on('win:close', () => {
         if(win) win.close()
@@ -63,6 +63,13 @@ export function regIpcListener() {
         app.relaunch()
         app.exit()
     })
+    // 保存信息
+    ipcMain.on('sys:store', (event, arg) => {
+        store.set(arg.key, arg.value)
+    })
+    ipcMain.handle('sys:getStore', (event, key) => {
+        return store.get(key)
+    })
     // 保存设置
     // PS：升级至 electron 27 后 cookie 已完全无法持久化，只能进行保存
     ipcMain.on('opt:saveAll', (event, arg) => {
diff --git a/src/function/elements/information.ts b/src/function/elements/information.ts
index 0cd17307..f35189c0 100644
--- a/src/function/elements/information.ts
+++ b/src/function/elements/information.ts
@@ -37,6 +37,9 @@ export interface RunTimeDataElem {
         classes: any[],
         sw?: boolean
     },
+    watch: {                // PS: 一些给监听器捕捉用的数据
+        newMsg: any
+    },
     messageList: any[]
     mergeMessageList?: any[] | undefined,
     stickerCache?: any[],
diff --git a/src/function/msg.ts b/src/function/msg.ts
index 8dca34c7..dc3ea131 100644
--- a/src/function/msg.ts
+++ b/src/function/msg.ts
@@ -33,6 +33,9 @@ const popInfo = new PopInfo()
 // eslint-disable-next-line
 let msgPath = require('@/assets/pathMap/Lagrange.OneBot.yaml')
 
+// 其他 tag
+let listLoadTimes = 0
+
 export function parse(str: string) {
     const msg = JSON.parse(str)
     if (msg.echo !== undefined) {
@@ -244,6 +247,7 @@ function createRecentContact(data: any) {
 }
 
 function saveUser(msg: { [key: string]: any }, type: string) {
+    listLoadTimes ++
     let list: any[] | undefined
     if(msgPath.user_list)
         list = getMsgData('user_list', msg, msgPath.user_list)
@@ -324,6 +328,12 @@ function saveUser(msg: { [key: string]: any }, type: string) {
             value: app.config.globalProperties.$t('menu_user_list', { count: runtimeData.userList.length })
         })
     }
+    // 如果获取次数大于 0 并且是双数，刷新一下历史会话
+    if(listLoadTimes > 0 && listLoadTimes % 2 == 0) {
+        // 获取最近的会话
+        if(runtimeData.jsonMap.recent_contact)
+            Connector.send(runtimeData.jsonMap.recent_contact.name, {}, 'GetRecentContact')
+    }
 }
 
 function updateTopMsg(msg: any, echoList: string[]) {
@@ -781,6 +791,7 @@ function newMsg(data: any) {
             return item.user_id == sender
         })
         const isImportant = senderInfo?.class_id == 9999
+        runtimeData.watch.newMsg = data
 
         // 消息回调检查
         // PS：如果在新消息中获取到了自己的消息，则自动打开“停止消息回调”设置防止发送的消息重复
@@ -1170,6 +1181,9 @@ const baseRuntime = {
         connectSsl: false,
         classes: []
     },
+    watch: {
+        newMsg: {}
+    },
     chatInfo: {
         show: { type: '', id: 0, name: '', avatar: '' },
         info: {
diff --git a/src/function/utils/appUtil.ts b/src/function/utils/appUtil.ts
index 75e12fe7..d0f56797 100644
--- a/src/function/utils/appUtil.ts
+++ b/src/function/utils/appUtil.ts
@@ -155,9 +155,6 @@ export function reloadUsers() {
         Connector.send(groupName, {}, 'getGroupList')
         // 获取系统消息
         Connector.send('get_system_msg', {}, 'getSystemMsg')
-        // 获取最近的会话
-        if(runtimeData.jsonMap.recent_contact)
-            Connector.send(runtimeData.jsonMap.recent_contact.name, {}, 'GetRecentContact')
     }
 }
 
diff --git a/src/function/utils/msgUtil.ts b/src/function/utils/msgUtil.ts
index 6ff11cd4..85a531ba 100644
--- a/src/function/utils/msgUtil.ts
+++ b/src/function/utils/msgUtil.ts
@@ -390,7 +390,7 @@ export function sendMsgRaw(id: string, type: string, msg: string | { type: strin
         switch (type) {
             case 'group': 
                 Connector.send(
-                    runtimeData.jsonMap.message_list.name_group_send ?? 'send_group_msg',
+                    runtimeData.jsonMap.message_list.name_group_send ?? 'send_msg',
                     { 'group_id': id, 'message': msg },'sendMsgBack_uuid_' + msgUUID); break
             case 'user': 
             {
@@ -400,7 +400,7 @@ export function sendMsgRaw(id: string, type: string, msg: string | { type: strin
                         { 'user_id': id.split('/')[0], 'group_id': id.split('/')[1], 'message': msg }, 'sendMsgBack_uuid_' + msgUUID);
                 } else {
                     Connector.send(
-                        runtimeData.jsonMap.message_list.name_user_send ?? 'send_private_msg',
+                        runtimeData.jsonMap.message_list.name_user_send ?? 'send_msg',
                          { 'user_id': id, 'message': msg }, 'sendMsgBack_uuid_' + msgUUID);
                 }
                 break
diff --git a/src/main.ts b/src/main.ts
index 5211bc8e..ef6d39a9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,7 @@ import VueViewer from 'v-viewer'
 import VueClipboard from 'vue-clipboard2'
 import InfiniteScroll from 'vue3-infinite-scroll-better'
 import packageInfo from '../package.json'
+import { PrismEditor } from 'vue-prism-editor'
 
 import App from './App.vue'
 
@@ -16,6 +17,7 @@ import { faSquare } from '@fortawesome/free-regular-svg-icons'
 import './registerServiceWorker'
 
 import 'viewerjs/dist/viewer.css'
+import 'vue-prism-editor/dist/prismeditor.min.css'
 
 import './assets/css/view.css'
 import './assets/css/chat.css'
@@ -48,6 +50,7 @@ app.use(InfiniteScroll)
 library.add(fas)
 library.add(faSquare)
 app.component('font-awesome-icon', FontAwesomeIcon)
+app.component('PrismEditor', PrismEditor)
 
 app.mount('#app')
 export default app
diff --git a/src/pages/Scripts.vue b/src/pages/Scripts.vue
new file mode 100644
index 00000000..a6e6b7a6
--- /dev/null
+++ b/src/pages/Scripts.vue
@@ -0,0 +1,418 @@
+<!--
+ * @FileDescription: 自定义脚本相关功能
+ * @Author: Stapxs
+ * @Date: 2024/08/12
+ * @Version: 1.0
+-->
+
+<template>
+    <div class="script-view">
+        <div class="list">
+            <header>
+                <div>
+                    <span>{{ $t('title_scripts') }}</span>
+                    <font-awesome-icon :icon="['fas', 'globe']" style="margin-right: 15px;" />
+                    <font-awesome-icon @click="cnewScript" :icon="['fas', 'add']" />
+                </div>
+                <span>{{ $t('scripts_tip') }}</span>
+            </header>
+            <div class="list-body">
+                <div v-for="(item, index) in savedList"
+                    :class="{selected: (select == item.title && editScript)}"
+                    :key="index">
+                    <div @click="selectItem(item)">
+                        <div style="flex: 1">
+                            <h2>{{ item.title }}</h2>
+                            <span>
+                                <font-awesome-icon :icon="['fas', 'code-branch']" />
+                                {{ $t('scripts_run_' + item.condition) }}{{ $t('scripts_run_trigger') }}
+                            </span>
+                        </div>
+                        <span v-if="item.enabled">{{ $t('statue_enabled') }}</span>
+                        <span v-else>{{ $t('statue_disabled') }}</span>
+                    </div>
+                    <div>
+                        <font-awesome-icon @click="item.enabled = !item.enabled;updateSave();" :icon="['fas', 'check']" />
+                        <font-awesome-icon :icon="['fas', 'edit']" @click="selectItem(item)" />
+                        <font-awesome-icon :icon="['fas', 'trash-alt']" @click="remove(item.title)" />
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="editor-main" v-if="editScript">
+            <div class="save-controller">
+                <font-awesome-icon :icon="['fas', 'code-branch']" />
+                <span>{{ $t('scripts_run_condition') }}</span>
+                <div class="opt-item">
+                    <select v-model="condition">
+                        <option value="message">{{ $t('scripts_run_message') }}</option>
+                    </select>
+                </div>
+                <div style="flex: 1;"></div>
+                <button class="ss-button"
+                    @click="save">
+                    <font-awesome-icon :icon="['fas', 'save']" />
+                    <span>{{ $t('scripts_run_save') }}</span>
+                </button>
+                <button class="ss-button"
+                    @click="editScript = false">
+                    <font-awesome-icon :icon="['fas', 'times']" />
+                </button>
+            </div>
+            <prism-editor class="editor" v-model="script"
+                :highlight="highlighter" line-numbers></prism-editor>
+        </div>
+        <div class="editor-main notice" v-else>
+            <div class="ss-card">
+                <font-awesome-icon :icon="['fas', 'info-circle']" />
+                <span>{{ $t('scripts_run_notice') }}</span>
+                <button class="ss-button" style="width: 100%; margin-top: 10px;"
+                    @click="openLink('https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/blob/next/src/pages/Scripts.vue')">
+                    Github
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import 'prismjs/themes/prism.css'
+
+import { Connector } from '@/function/connect'
+import { runtimeData } from '@/function/msg'
+import { defineComponent } from 'vue'
+import { openLink } from '@/function/utils/appUtil'
+
+import { PrismEditor } from 'vue-prism-editor'
+import { highlight, languages } from 'prismjs'
+
+import { getMsgData } from '@/function/utils/msgUtil'
+import { PopInfo, PopType } from '@/function/base'
+
+export default defineComponent({
+    name: 'ViewScripts',
+    components: {
+        PrismEditor
+    },
+    data() {
+        return {
+            runtimedata: runtimeData,
+            openLink: openLink,
+            script: '',
+            condition: 'message',
+            editScript: false,
+            savedList: [] as {
+                title: string,
+                condition: string,
+                script: string,
+                enabled: boolean
+            }[],
+            select: '',
+
+            message: null as any | null,
+            msgInfo: null as {[key: string]: any} | null,
+            isMe: false
+        }
+    },
+    methods: {
+        cnewScript() {
+            this.select = ''
+            this.script = '/*\n    title: Demo Script\n*/\n\nconsole.log(\'Hello World!\')'
+            this.editScript = true
+        },
+        updateSave() {
+            const saveJson = JSON.stringify(this.savedList)
+            if(runtimeData.tags.isElectron) {
+                runtimeData.reader?.send('sys:store', {
+                    key: 'scripts', value: saveJson
+                })
+            } else {
+                localStorage.setItem('scripts', saveJson)
+            }
+        },
+        save() {
+            this.editScript = false
+            // title 获取 script 第二行 title: 后的内容
+            const title = this.script.split('\n')[1].split(':')[1].trim()
+            if(title == '') {
+                new PopInfo().add(PopType.ERR, this.$t('scripts_run_title_err'))
+                return
+            }
+            if(this.savedList.find((item) => item.title == title)) {
+                // 覆盖
+                this.savedList = this.savedList.map((item) => {
+                    if(item.title == title) {
+                        item.condition = this.condition
+                        item.script = this.script
+                    }
+                    return item
+                })
+            } else {
+                this.savedList.push({
+                    title: title,
+                    condition: this.condition,
+                    script: this.script,
+                    enabled: false
+                })
+            }
+            this.updateSave()
+        },
+        remove(title: string) {
+            this.savedList = this.savedList.filter((item) => item.title != title)
+            this.updateSave()
+        },
+
+        selectItem(item: {
+                title: string,
+                condition: string,
+                script: string,
+                enabled: boolean
+            }) {
+            // 选中脚本
+            this.select = item.title
+            this.script = item.script
+            this.condition = item.condition
+            this.editScript = true
+        },
+
+        highlighter(code: any) {
+            return highlight(code, languages.js, 'js')
+        },
+
+        onMessage() {
+            // 筛选出消息中的 condition 为 message 的脚本
+            const scripts = this.savedList.filter((item) => item.condition == 'message')
+            for(const script of scripts) {
+                if(script.enabled) {
+                    eval(script.script)
+                }
+            }
+        },
+
+        // 发送消息
+        sendText(text: string) {
+            if(this.message && this.msgInfo) {
+                const id = this.msgInfo.group_id ?? this.msgInfo.private_id
+                const type = this.msgInfo.group_id ? 'group' : 'private'
+                let action = runtimeData.jsonMap.message_list.name_group_send ?? 'send_msg'
+                if(type == 'private') {
+                    action = runtimeData.jsonMap.message_list.name_user_send ?? 'send_msg'
+                }
+                if(type == 'group') {
+                    this.sendMsg(action, {group_id: id, message: { type: 'text', data: { text: text }}})
+                } else {
+                    this.sendMsg(action, {user_id: id, message: { type: 'text', data: { text: text }}})
+                }
+            }
+        },
+
+        sendMsg(action: string, params: {[key: string]: any}) {
+            Connector.send(action, params, 'ScriptBack')
+        }
+    },
+    async mounted() {
+        // 读取保存的脚本
+        const electron = window.require('electron')
+        let data = null
+        if(electron) {
+            const reader = electron.ipcRenderer
+            if(reader) data = await reader.invoke('sys:getStore', 'scripts')
+        }
+        if(data) {
+            this.savedList = JSON.parse(data)
+        } else {
+            data = localStorage.getItem('scripts')
+            if(data) {
+                this.savedList = JSON.parse(data)
+            }
+        }
+        // 监听数据
+        this.$watch(() => runtimeData.watch.newMsg, () => {
+            if(runtimeData.sysConfig.append_scripts) {
+                this.message = runtimeData.watch.newMsg
+                // FIXME 这儿没有判断是不是自身返回的消息，注意谨防死循环
+                const infoList = getMsgData('message_info', this.message, runtimeData.jsonMap.message_info)
+                if(infoList != undefined) {
+                    this.msgInfo = infoList[0]
+                }
+                if(this.msgInfo) {
+                    this.isMe = Number(this.msgInfo.sender) == Number(runtimeData.loginInfo.uin)
+                } else {
+                    this.isMe = false
+                }
+                this.onMessage()
+            }
+        })
+    }
+})
+</script>
+
+<style scoped>
+.script-view {
+    background: var(--color-bg);
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+.list {
+    width: 270px;
+    display: flex;
+    flex-direction: column;
+}
+.list > header {
+    padding: 10px 10px 0 10px;
+    margin: 15px;
+}
+.list > header > div {
+    align-items: center;
+    display: flex;
+}
+.list > header > div > span {
+    color: var(--color-font);
+    font-weight: bold;
+    font-size: 1rem;
+    flex: 1;
+}
+.list > header > div > svg {
+    color: var(--color-font-2);
+    cursor: pointer;
+}
+.list > header > span {
+    background: var(--color-card-2);
+    color: var(--color-font-1);
+    font-size: 0.9rem;
+    padding: 15px;
+    margin-top: 10px;
+    border-radius: 7px;
+    display: block;
+}
+
+.list-body {
+    overflow-x: scroll;
+    padding: 0 25px;
+    flex: 1;
+}
+.list-body::-webkit-scrollbar {
+    display: none;
+}
+.list-body > div {
+    background: var(--color-card-1);
+    transition: background .3s;
+    flex-direction: column;
+    margin-bottom: 10px;
+    border-radius: 7px;
+    cursor: pointer;
+    display: flex;
+    padding: 10px;
+}
+.list-body > div.selected {
+    background: var(--color-main);
+}
+.list-body > div.selected h2 {
+    color: var(--color-font-r);
+}
+.list-body > div.selected span,
+.list-body > div.selected > div:last-child > svg {
+    color: var(--color-font-1-r);
+}
+.list-body h2 {
+    font-size: 1rem;
+    margin: 0;
+    color: var(--color-main);
+    transition: color .3s;
+}
+.list-body span {
+    font-size: 0.9rem;
+    color: var(--color-font-2);
+    transition: color .3s;
+    margin-left: 5px;
+}
+.list-body span svg {
+    font-size: 0.85rem;
+    margin: 0 5px;
+}
+.list-body > div > div:first-child {
+    display: flex;
+    flex: 1;
+}
+.list-body > div > div:last-child {
+    justify-content: space-evenly;
+    margin-top: 5px;
+    display: flex;
+}
+.list-body > div > div:last-child > svg {
+    transition: color .3s;
+    color: var(--color-font-1);
+    margin: 5px 10px;
+}
+
+.editor-main {
+    background: var(--color-card);
+    padding: 20px 0;
+    flex: 1;
+}
+
+.editor-main.notice > div {
+    width: 50%;
+    background: var(--color-card-1);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: 50%;
+    transform: translateY(-50%);
+    padding: 30px;
+}
+.editor-main.notice > div > svg {
+    font-size: 2.5rem;
+    color: var(--color-main);
+    margin: 20px 0;
+}
+
+.editor {
+    font-size: 0.9rem;
+}
+.editor > div:first-child {
+    color: var(--color-font-1);
+}
+
+.save-controller {
+    display: flex;
+    padding: 15px;
+    margin-top: -15px;
+    align-items: center;
+}
+.save-controller button:first-child {
+    margin-left: 0;
+}
+.save-controller button {
+    font-size: 0.8rem;
+    margin-left: 10px;
+    cursor: pointer;
+    min-width: 35px;
+    height: 35px;
+}
+.save-controller button > svg {
+    margin: 0 5px;
+}
+.save-controller button > span {
+    margin: 0 5px;
+}
+.save-controller > span,
+.save-controller > svg {
+    color: var(--color-font-2);
+    font-size: 0.9rem;
+    margin-right: 10px;
+}
+
+.opt-item {
+    padding: 0;
+}
+.opt-item > select {
+    height: 35px;
+}
+.opt-item:hover {
+    background: transparent;
+}
+</style>
diff --git a/src/pages/options/OptDev.vue b/src/pages/options/OptDev.vue
index 4bf37585..8f1e283b 100644
--- a/src/pages/options/OptDev.vue
+++ b/src/pages/options/OptDev.vue
@@ -7,6 +7,23 @@
 
 <template>
     <div class="opt-page">
+        <div class="ss-card">
+            <header>{{ $t('option_dev_append') }}</header>
+            <div class="opt-item">
+                <font-awesome-icon :icon="['fas', 'code']" />
+                <div>
+                    <span>{{ $t('title_scripts') }}</span>
+                    <span>{{ $t('option_dev_scripts_tip') }}</span>
+                </div>
+                <label class="ss-switch">
+                    <input type="checkbox" @change="save" name="append_scripts" v-model="runtimeData.sysConfig.append_scripts">
+                    <div>
+                        <div></div>
+                    </div>
+                </label>
+            </div>
+        </div>
+
         <div class="ss-card">
             <header>{{ $t('option_dev_connect') }}</header>
             <div class="tip">