From df1504642ccd533e9e47e1626207d26e8a955a7e Mon Sep 17 00:00:00 2001 From: wosiwq Date: Mon, 25 Dec 2023 15:35:40 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(codemirror):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9Ecodemirror?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 176 ++++++++++++++++++++++++++++++++++++++++- package.json | 6 +- src/views/BaseView.vue | 64 +++++++++++++-- 3 files changed, 236 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f2b759..e0539cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,14 @@ "name": "bilichat", "version": "1.0.1", "dependencies": { + "@codemirror/lang-json": "^6.0.1", + "@codemirror/theme-one-dark": "^6.1.2", "axios": "^1.6.2", + "codemirror": "^6.0.1", "element-plus": "^2.4.3", "qrcode.vue": "^3.4.1", - "vue": "^3.3.10" + "vue": "^3.3.10", + "vue-codemirror": "^6.1.1" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", @@ -827,6 +831,102 @@ "node": ">=6.9.0" } }, + "node_modules/@codemirror/autocomplete": { + "version": "6.11.1", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.11.1.tgz", + "integrity": "sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.3.2", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.2.tgz", + "integrity": "sha512-tjoi4MCWDNxgIpoLZ7+tezdS9OEB6pkiDKhfKx9ReJ/XBcs2G2RXIu+/FxXBlWsPTsz6C9q/r4gjzrsxpcnqCQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.2.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0" + } + }, + "node_modules/@codemirror/lang-json": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz", + "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@lezer/json": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.9.3", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.9.3.tgz", + "integrity": "sha512-qq48pYzoi6ldYWV/52+Z9Ou6QouVI+8YwvxFbUypI33NbjG2UeRHKENRyhwljTTiOqjQ33FjyZj6EREQ9apAOQ==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz", + "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/search": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.5.tgz", + "integrity": "sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.3.3.tgz", + "integrity": "sha512-0wufKcTw2dEwEaADajjHf6hBy1sh3M6V0e+q4JKIhLuiMSe5td5HOWpUdvKth1fT1M9VYOboajoBHpkCd7PG7A==" + }, + "node_modules/@codemirror/theme-one-dark": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz", + "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@codemirror/view": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.22.3.tgz", + "integrity": "sha512-rqnq+Zospwoi3x1vZ8BGV1MlRsaGljX+6qiGYmIpJ++M+LCC+wjfDaPklhwpWSgv7pr/qx29KiAKQBH5+DOn4w==", + "dependencies": { + "@codemirror/state": "^6.1.4", + "style-mod": "^4.1.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@ctrl/tinycolor": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", @@ -1385,6 +1485,36 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lezer/common": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.1.2.tgz", + "integrity": "sha512-V+GqBsga5+cQJMfM0GdnHmg4DgWvLzgMWjbldBg0+jC3k9Gu6nJNZDLJxXEBT1Xj8KhRN4jmbC5CY7SIL++sVw==" + }, + "node_modules/@lezer/highlight": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", + "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/json": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.1.tgz", + "integrity": "sha512-nkVC27qiEZEjySbi6gQRuMwa2sDu2PtfjSgz0A4QF81QyRGm3kb2YRzLcOPcTEtmcwvrX/cej7mlhbwViA4WJw==", + "dependencies": { + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.3.14", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.14.tgz", + "integrity": "sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2886,6 +3016,20 @@ "node": ">= 6" } }, + "node_modules/codemirror": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", + "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -2948,6 +3092,11 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -5272,6 +5421,11 @@ "url": "https://github.com/sponsors/antfu" } }, + "node_modules/style-mod": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz", + "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==" + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -5801,6 +5955,21 @@ } } }, + "node_modules/vue-codemirror": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-6.1.1.tgz", + "integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==", + "dependencies": { + "@codemirror/commands": "6.x", + "@codemirror/language": "6.x", + "@codemirror/state": "6.x", + "@codemirror/view": "6.x" + }, + "peerDependencies": { + "codemirror": "6.x", + "vue": "3.x" + } + }, "node_modules/vue-eslint-parser": { "version": "9.3.2", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz", @@ -5852,6 +6021,11 @@ "typescript": "*" } }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" + }, "node_modules/webpack-sources": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", diff --git a/package.json b/package.json index 69e8ace..2e4407d 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,14 @@ "format": "prettier --write src/" }, "dependencies": { + "@codemirror/lang-json": "^6.0.1", + "@codemirror/theme-one-dark": "^6.1.2", "axios": "^1.6.2", + "codemirror": "^6.0.1", "element-plus": "^2.4.3", "qrcode.vue": "^3.4.1", - "vue": "^3.3.10" + "vue": "^3.3.10", + "vue-codemirror": "^6.1.1" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", diff --git a/src/views/BaseView.vue b/src/views/BaseView.vue index 032a627..e815736 100644 --- a/src/views/BaseView.vue +++ b/src/views/BaseView.vue @@ -12,13 +12,17 @@

配置文件

- + placeholder="等待配置文件载入" + :extensions="getExtensions()" + :autofocus="true" + :indent-with-tab="true" + :tab-size="2" + :phrases="chinesePhrases" + style="max-height: 600px"> 保存修改
@@ -228,8 +232,11 @@ import type { PlatformOption, Qrcode } from '@/types' +import { json } from '@codemirror/lang-json' +import { oneDark } from '@codemirror/theme-one-dark' import axios from 'axios' import QrcodeVue from 'qrcode.vue' +import { Codemirror } from 'vue-codemirror' import { version } from '../../package.json' const isManageCookieDialogVisible = ref(false) @@ -249,6 +256,43 @@ const authInfo = ref() const platformOption = ref() +const chinesePhrases = { + // @codemirror/view + 'Control character': '控制字符', + // @codemirror/commands + 'Selection deleted': '选定删除', + // @codemirror/language + 'Folded lines': '折叠块', + 'Unfolded lines': '展开快', + to: '至', + 'folded code': '折叠代码', + unfold: '展开', + 'Fold line': '折叠', + 'Unfold line': '展开', + // @codemirror/search + 'Go to line': '转到行', + go: '去', + Find: '查找', + Replace: '替换为', + next: '下一个', + previous: '前一个', + all: '全部', + 'match case': '区分大小写', + 'by word': '全词匹配', + replace: '替换', + 'replace all': '全部替换', + close: '关闭', + 'current match': '当前匹配', + 'replaced $ matches': '替换了 $ 个匹配', + 'replaced match on line $': '在第 $ 行替换匹配', + 'on line': '在行', + // @codemirror/autocomplete + Completions: '补全', + // @codemirror/lint + Diagnostics: '诊断', + 'No diagnostics': '无诊断' +} + watch( () => bilichat.value, (newVal) => { @@ -288,9 +332,9 @@ onMounted(() => { }) }) -const handleFormattedBilichatChange = (val: string) => { +const handleFormattedBilichatChange = () => { try { - bilichat.value = JSON.parse(val) as BiliChat + bilichat.value = JSON.parse(formattedBilichat.value as string) as BiliChat } catch (e) { ElMessage.error('JSON格式错误') formattedBilichat.value = JSON.stringify(bilichat.value, null, 2) @@ -445,5 +489,9 @@ const coverDataToLocalString = (ts: number) => { second: '2-digit' }) } + +const getExtensions = () => { + return [json(), oneDark] +}