feat: 优化规则JSON编辑器

packages/vscode/package.json

@@ -3,7 +3,7 @@
   "displayName": "any-reader",
   "description": "any-reader for vscode",
   "icon": "resources/icon.png",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "preview": true,
   "publisher": "aooiu",
   "qna": "https://github.com/aooiuu/any-reader/issues",

packages/vscode/src/webview/index.ts

@@ -54,7 +54,7 @@ export class WebView {
     this.pm.emit('getBookSource', ruleFileManager.list(), source);
   }
 
-  // 获取单个谷子额
+  // 获取单个规则
   onGetRule({ source, data }: { source: WebView; data: Rule }) {
     const rules = ruleFileManager.list();
     this.pm.emit(

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "any-reader-web",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -21,6 +21,7 @@
     "dplayer": "^1.27.1",
     "easy-post-message": "^0.1.0",
     "hls.js": "^1.5.3",
+    "monaco-editor": "0.47.0",
     "pinia": "^2.1.7",
     "uuid": "^9.0.1",
     "vue": "^3.4.15",

packages/web/src/main.ts

@@ -13,6 +13,8 @@ import '@arco-design/web-vue/dist/arco.css';
 
 import { createPinia } from 'pinia';
 
+import '@/utils/monaco';
+
 const app = createApp(App);
 
 app.use(router);

packages/web/src/pages/rule-info/MonacoEditor.vue

@@ -0,0 +1,43 @@
+<template>
+  <div ref="monacoEl" class="w-full h-full"></div>
+</template>
+
+<script setup>
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+const modelValue = defineModel();
+let lastValue = '';
+
+const monacoEl = ref();
+let editor;
+
+onMounted(() => {
+  editor = monaco.editor.create(monacoEl.value, {
+    value: modelValue.value,
+    language: 'json',
+    theme: 'vs-dark',
+    minimap: {
+      enabled: false
+    }
+  });
+  // configure the JSON language support with schemas and schema associations
+  // monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+  //   validate: true
+  // });
+  editor.onDidChangeModelContent(() => {
+    const value = editor.getValue();
+    if (modelValue.value !== value) {
+      lastValue = value;
+      modelValue.value = value;
+    }
+  });
+});
+
+watch(modelValue, (value) => {
+  if (value !== lastValue) editor?.setValue(value);
+});
+
+onUnmounted(() => {
+  editor?.dispose();
+});
+</script>

packages/web/src/pages/rule-info/index.vue

@@ -4,26 +4,32 @@
       <div class="flex-1 overflow-hidden flex flex-col">
         <div class="mb-10">
           <a-radio-group v-model="formType" type="button">
+            <a-radio value="All">双栏</a-radio>
             <a-radio value="Form">Form</a-radio>
             <a-radio value="JSON">JSON</a-radio>
           </a-radio-group>
         </div>
 
-        <AForm v-if="formType === 'Form'" :model="formData" :auto-label-width="true" class="flex-1 overflow-auto">
-          <template v-for="item in formItems" :key="item.prop">
-            <AFormItem v-if="!item.show || item.show(formData)" :label="item.label">
-              <template v-if="item.type === 'select'">
-                <a-select v-model="formData[item.prop]">
-                  <a-option v-for="o in item.options" :key="o.value" :value="o.value">{{ o.label }}</a-option>
-                </a-select>
-              </template>
-              <template v-else>
-                <AInput v-model="formData[item.prop]" :placeholder="item.prop" />
-              </template>
-            </AFormItem>
-          </template>
-        </AForm>
-        <pre v-else class="flex-1 overflow-auto">{{ JSON.stringify(formData, null, 4) }}</pre>
+        <div class="flex-1 flex">
+          <AForm v-if="formType === 'All' || formType === 'Form'" :model="formData" :auto-label-width="true" class="flex-1 overflow-auto">
+            <template v-for="item in formItems" :key="item.prop">
+              <AFormItem v-if="!item.show || item.show(formData)" :label="item.label">
+                <template v-if="item.type === 'select'">
+                  <a-select v-model="formData[item.prop]">
+                    <a-option v-for="o in item.options" :key="o.value" :value="o.value">{{ o.label }}</a-option>
+                  </a-select>
+                </template>
+                <template v-else>
+                  <AInput v-model="formData[item.prop]" :placeholder="item.prop" />
+                </template>
+              </AFormItem>
+            </template>
+          </AForm>
+
+          <div v-if="formType === 'All' || formType === 'JSON'" class="flex-1 overflow-auto">
+            <MonacoEditor :model-value="formDataText" @update:model-value="setFormData" />
+          </div>
+        </div>
       </div>
 
       <div class="flex mt-10 justify-end gap-5">
@@ -38,13 +44,14 @@
 import { v4 as uuidV4 } from 'uuid';
 import { CONTENT_TYPES, CONTENT_TYPE } from '@/constants';
 import { postMessage, useMessage } from '@/utils/postMessage';
+import MonacoEditor from './MonacoEditor.vue';
 
 const loading = ref(false);
 
 const router = useRouter();
 const route = useRoute();
 
-const formType = ref('Form');
+const formType = ref('All');
 
 const formItems = [
   { prop: 'id', label: 'uuid', show: () => false },
@@ -140,6 +147,17 @@ const formData = reactive({
   viewStyle: ''
 });
 
+// 规则字符串
+const formDataText = computed(() => JSON.stringify(formData, null, 4));
+
+// 更新规则
+function setFormData(v) {
+  const json = JSON.parse(v);
+  Object.keys(formData).forEach((k) => {
+    formData[k] = json[k];
+  });
+}
+
 function submit() {
   postMessage('addRule', {
     ...formData,

packages/web/src/utils/monaco.ts

@@ -0,0 +1,27 @@
+import * as monaco from 'monaco-editor';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+    if (label === 'json') {
+      return new jsonWorker();
+    }
+    // if (label === 'css' || label === 'scss' || label === 'less') {
+    //   return new cssWorker();
+    // }
+    // if (label === 'html' || label === 'handlebars' || label === 'razor') {
+    //   return new htmlWorker();
+    // }
+    // if (label === 'typescript' || label === 'javascript') {
+    //   return new tsWorker();
+    // }
+    return new editorWorker();
+  }
+};
+
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);