perf: 配置文件页放到单独组件

web/src/components/SettingWindow.vue

@@ -0,0 +1,287 @@
+<template>
+    <v-card class="config-tab-toolbar">
+        <v-tooltip :text="currentManagerSchema == null ? '仅配置文件管理器提供了 JSON Schema 时支持可视化配置' : '切换编辑模式'" location="top">
+            <template v-slot:activator="{ props }">
+
+                <v-btn-toggle id="config-type-toggle" color="primary" v-model="configType" mandatory v-bind="props"
+                    density="compact">
+
+                    <v-btn class="config-type-toggle-btn" value="ui" :readonly="currentManagerSchema == null"
+                        density="compact">
+                        <v-icon>mdi-view-dashboard-edit-outline</v-icon>
+                    </v-btn>
+                    <v-btn class="config-type-toggle-btn" value="json" :readonly="currentManagerSchema == null"
+                        density="compact">
+                        <v-icon>mdi-code-json</v-icon>
+                    </v-btn>
+                </v-btn-toggle>
+            </template>
+        </v-tooltip>
+
+        <div id="file-operation-toolbar">
+            <v-btn @click="reset" color="warning" prepend-icon="mdi-undo"
+                :disabled="!modified && configType == 'json'">重置</v-btn>
+            <v-btn @click="saveAndApply" color="primary" prepend-icon="mdi-content-save-outline"
+                :disabled="!modified && configType == 'json'">应用</v-btn>
+        </div>
+    </v-card>
+
+    <div id="config-tab-content">
+
+        <div id="config-tab-content-ui" v-if="configType == 'ui'">
+            <v-form id="config-tab-content-ui-form">
+                <vjsf id="config-tab-content-ui-form-vjsf" :schema="currentManagerSchema" v-model="currentManagerData"
+                    :options="VJSFOptions" />
+            </v-form>
+        </div>
+
+        <v-card id="config-tab-content-json" v-if="configType == 'json'">
+            <JsonEditorVue id="config-tab-content-json-json-editor-vue" v-model="currentManagerData" mode="text"
+                @change="onInput" />
+        </v-card>
+
+        <div id="config-tab-json-doc-link"
+            v-if="configType == 'json' && currentManagerDocLink != undefined && currentManagerDocLink != ''">*配置文件格式请查看
+            <a :href="currentManagerDocLink" target="_blank">文档</a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, getCurrentInstance, onMounted, inject } from 'vue'
+import JsonEditorVue from 'json-editor-vue';
+
+import Vjsf from '@koumoul/vjsf';
+
+const VJSFOptions = {
+    "context": {},
+    "width": 1208,
+    "readOnly": false,
+    "summary": false,
+    "density": "comfortable",
+    "indent": true,
+    "titleDepth": 4,
+    "validateOn": "input",
+    "initialValidation": "withData",
+    "updateOn": "input",
+    "debounceInputMs": 300,
+    "defaultOn": "empty",
+    "removeAdditional": "error",
+    "autofocus": false,
+    "readOnlyPropertiesMode": "show",
+    "pluginsOptions": {},
+    "locale": "en",
+    "messages": {
+        "errorOneOf": "请选择一个",
+        "errorRequired": "必填信息",
+        "addItem": "添加",
+        "delete": "删除",
+        "edit": "编辑",
+        "close": "关闭",
+        "duplicate": "复制",
+        "sort": "排序",
+        "up": "向上移动",
+        "down": "向下移动",
+        "showHelp": "显示帮助信息",
+        "mdeLink1": "[链接标题",
+        "mdeLink2": "](链接地址)",
+        "mdeImg1": "![](",
+        "mdeImg2": "图片地址)",
+        "mdeTable1": "",
+        "mdeTable2": "\n\n| 列 1 | 列 2 | 列 3 |\n| -------- | -------- | -------- |\n| 文本     | 文本     | 文本     |\n\n",
+        "bold": "加粗",
+        "italic": "斜体",
+        "heading": "标题",
+        "quote": "引用",
+        "unorderedList": "无序列表",
+        "orderedList": "有序列表",
+        "createLink": "创建链接",
+        "insertImage": "插入图片",
+        "createTable": "创建表格",
+        "preview": "预览",
+        "mdeGuide": "文档",
+        "undo": "撤销",
+        "redo": "重做"
+    }
+}
+
+const snackbar = inject('snackbar');
+
+const { proxy } = getCurrentInstance()
+
+const props = defineProps({
+    name: String
+})
+
+const currentManagerData = ref({})
+const currentManagerSchema = ref(null)
+const currentManagerDocLink = ref(null)
+const configType = ref('')
+const modified = ref(false)
+
+const fetchCurrentManagerData = (name) => {
+    console.log(name)
+    return new Promise((resolve, reject) => {
+        proxy.$axios.get(`/settings/${name}`).then(response => {
+            console.log(response.data.data)
+            currentManagerData.value = response.data.data.manager.data
+            currentManagerSchema.value = response.data.data.manager.schema
+            currentManagerDocLink.value = response.data.data.manager.doc_link
+            resolve()
+        }).catch(error => {
+            snackbar.error(error)
+            reject(error)
+        })
+    })
+}
+
+const autoSwitchConfigType = () => {
+    console.log(currentManagerSchema == null)
+    if (currentManagerSchema.value == null) {
+        configType.value = 'json'
+    } else {
+        configType.value = 'ui'
+    }
+}
+
+
+const isJsonValid = ref(true)
+const errorMessage = ref('')
+
+const checkJsonValid = () => {
+    try {
+        JSON.parse(currentManagerData.value)
+        isJsonValid.value = true
+        errorMessage.value = ''
+    } catch (error) {
+        isJsonValid.value = false
+        errorMessage.value = error.message
+    }
+}
+
+const onInput = () => {
+    modified.value = true
+    checkJsonValid()
+}
+
+const saveAndApply = () => {
+    if (configType.value == 'json') {
+        checkJsonValid()
+    }
+    if (!isJsonValid.value) {
+        snackbar.error('JSON 格式不正确: ' + errorMessage.value)
+        return
+    }
+    if (configType.value == 'json') {
+        currentManagerData.value = JSON.parse(currentManagerData.value)
+    }
+
+    proxy.$axios.put(`/settings/${props.name}/data`, {
+        data: currentManagerData.value
+    }).then(response => {
+        if (response.data.code != 0) {
+            snackbar.error(response.data.msg)
+            return
+        }
+        fetchCurrentManagerData(props.name).then(() => {
+            modified.value = false
+            snackbar.success('应用成功')
+        }).catch(error => {
+            snackbar.error(error)
+        })
+    })
+}
+
+const reset = () => {
+    fetchCurrentManagerData(props.name).then(() => {
+        snackbar.success('重置成功')
+        modified.value = false
+    })
+}
+
+onMounted(() => {
+    console.log(props.name)
+    fetchCurrentManagerData(props.name).then(() => {
+        autoSwitchConfigType()
+    })
+})
+</script>
+
+<style scoped>
+.config-tab-window {
+    overflow: hidden;
+}
+
+.config-tab-toolbar {
+    margin: 0.5rem;
+    height: 3.2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#file-operation-toolbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+#config-type-toggle {
+    margin: 0.5rem;
+    box-shadow: 0 0 0 2px #dddddd;
+}
+
+#config-tab-content {
+    margin: 0.2rem;
+    height: calc(100% - 1rem);
+    overflow: hidden;
+}
+
+#config-tab-content-ui {
+    margin: 0.5rem;
+    height: calc(100vh - 15rem);
+    margin-top: 1rem;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#config-tab-content-ui-form {
+    height: 100%;
+    width: calc(100% - 1.5rem);
+    margin-left: 0.5rem;
+    overflow-y: auto;
+}
+
+#config-tab-content-ui-form-vjsf {
+    height: 100%;
+    width: calc(100% - 1rem);
+}
+
+#config-tab-content-json {
+    margin: 0.5rem;
+    height: calc(100vh - 16rem);
+    margin-top: 1rem;
+}
+
+#config-tab-content-json-json-editor-vue {
+    height: 100%;
+    width: 100%;
+}
+
+#config-tab-json-doc-link {
+    margin: 0rem;
+    margin-left: 0.6rem;
+    height: 1.5rem;
+    margin-top: 0.2rem;
+    font-size: 0.8rem;
+    color: rgb(26, 98, 214);
+}
+</style>

web/src/pages/Settings.vue

@@ -14,42 +14,8 @@
     <v-tabs-window id="settings-tab-window" v-model="proxy.$store.state.settingsPageTab">
       <v-tabs-window-item v-for="manager in managerList" :key="manager.name" :value="manager.name"
         class="config-tab-window">
-        <v-card class="config-tab-toolbar">
+        <SettingWindow style="height: 100%;width: 100%;" :name="manager.name" />
-          <v-tooltip :text="currentManagerSchema == null ? '仅配置文件管理器提供了 JSON Schema 时支持可视化配置' : '切换编辑模式'" location="top">
+         <!-- {{ manager.name }} -->
-            <template v-slot:activator="{ props }">
-
-              <v-btn-toggle id="config-type-toggle" color="primary" v-model="configType" mandatory v-bind="props" density="compact">
-
-                <v-btn class="config-type-toggle-btn" value="ui" :readonly="currentManagerSchema == null" density="compact">
-                  <v-icon>mdi-view-dashboard-edit-outline</v-icon>
-                </v-btn>
-                <v-btn class="config-type-toggle-btn" value="json" :readonly="currentManagerSchema == null" density="compact">
-                  <v-icon>mdi-code-json</v-icon>
-                </v-btn>
-              </v-btn-toggle>
-            </template>
-          </v-tooltip>
-
-          <div id="file-operation-toolbar">
-            <v-btn @click="reset" color="warning" prepend-icon="mdi-undo" :disabled="!modified && configType == 'json'">重置</v-btn>
-            <v-btn @click="saveAndApply" color="primary" prepend-icon="mdi-content-save-outline" :disabled="!modified && configType == 'json'">应用</v-btn>
-          </div>
-        </v-card>
-
-        <div id="config-tab-content">
-
-          <div id="config-tab-content-ui" v-if="configType == 'ui'">
-            <v-form id="config-tab-content-ui-form">
-              <vjsf id="config-tab-content-ui-form-vjsf" :schema="currentManagerSchema" v-model="currentManagerData" :options="VJSFOptions" />
-            </v-form>
-          </div>
-
-          <v-card id="config-tab-content-json" v-if="configType == 'json'">
-            <JsonEditorVue id="config-tab-content-json-json-editor-vue" v-model="currentManagerData" mode="text" @change="onInput"/>
-          </v-card>
-
-        <div id="config-tab-json-doc-link" v-if="configType == 'json' && currentManagerDocLink != undefined && currentManagerDocLink != ''">*配置文件格式请查看 <a :href="currentManagerDocLink" target="_blank">文档</a></div>
-        </div>
       </v-tabs-window-item>
     </v-tabs-window>
   </v-card>
@@ -59,78 +25,16 @@
 <script setup>
 
 import PageTitle from '@/components/PageTitle.vue'
+import SettingWindow from '@/components/SettingWindow.vue'
 import { ref, getCurrentInstance, onMounted } from 'vue'
 
 import {inject} from "vue";
 
 const snackbar = inject('snackbar');
 
-import JsonEditorVue from 'json-editor-vue';
-
-import Vjsf from '@koumoul/vjsf';
-
 const { proxy } = getCurrentInstance()
 
 const managerList = ref([])
-const configType = ref('')  // ui or json
-const currentManager = ref(null)
-const currentManagerName = ref('')
-const currentManagerDocLink = ref('')
-const currentManagerData = ref({})
-const currentManagerSchema = ref(null)
-const modified = ref(false)
-
-const VJSFOptions = {
-  "context": {},
-  "width": 1208,
-  "readOnly": false,
-  "summary": false,
-  "density": "comfortable",
-  "indent": true,
-  "titleDepth": 4,
-  "validateOn": "input",
-  "initialValidation": "withData",
-  "updateOn": "input",
-  "debounceInputMs": 300,
-  "defaultOn": "empty",
-  "removeAdditional": "error",
-  "autofocus": false,
-  "readOnlyPropertiesMode": "show",
-  "pluginsOptions": {},
-  "locale": "en",
-  "messages": {
-    "errorOneOf": "请选择一个",
-    "errorRequired": "必填信息",
-    "addItem": "添加",
-    "delete": "删除",
-    "edit": "编辑",
-    "close": "关闭",
-    "duplicate": "复制",
-    "sort": "排序",
-    "up": "向上移动",
-    "down": "向下移动",
-    "showHelp": "显示帮助信息",
-    "mdeLink1": "[链接标题",
-    "mdeLink2": "](链接地址)",
-    "mdeImg1": "![](",
-    "mdeImg2": "图片地址)",
-    "mdeTable1": "",
-    "mdeTable2": "\n\n| 列 1 | 列 2 | 列 3 |\n| -------- | -------- | -------- |\n| 文本     | 文本     | 文本     |\n\n",
-    "bold": "加粗",
-    "italic": "斜体",
-    "heading": "标题",
-    "quote": "引用",
-    "unorderedList": "无序列表",
-    "orderedList": "有序列表",
-    "createLink": "创建链接",
-    "insertImage": "插入图片",
-    "createTable": "创建表格",
-    "preview": "预览",
-    "mdeGuide": "文档",
-    "undo": "撤销",
-    "redo": "重做"
-  }
-}
 
 const refresh = () => {
   proxy.$axios.get('/settings').then(response => {
@@ -145,105 +49,13 @@ const refresh = () => {
     if (proxy.$store.state.settingsPageTab == '') {
       proxy.$store.state.settingsPageTab = managerList.value[0].name
     }
-    fetchCurrentManagerData(proxy.$store.state.settingsPageTab).then(() => {
-      firstJumpEditorAfterChangeTab()
-    })
   }).catch(error => {
     snackbar.error(error)
   })
 }
 
 const onTabChange = (tab) => {
-  isJsonValid.value = true
+  console.log(tab)
-  errorMessage.value = ''
-  fetchCurrentManagerData(tab).then(() => {
-    firstJumpEditorAfterChangeTab()
-  })
-}
-
-const firstJumpEditorAfterChangeTab = () => {
-  if (currentManagerSchema.value != null) {
-    configType.value = 'ui'
-  } else {
-    configType.value = 'json'
-  }
-}
-
-const fetchCurrentManagerData = (tab) => {
-  return proxy.$axios.get(`/settings/${tab}`).catch(error => {
-    snackbar.error(error)
-  }).then(response => {
-    if (response.data.code != 0) {
-      snackbar.error(response.data.msg)
-      return
-    }
-    currentManager.value = response.data.data.manager
-    currentManagerName.value = currentManager.value.name
-    currentManagerData.value = currentManager.value.data
-    currentManagerSchema.value = currentManager.value.schema
-    currentManagerDocLink.value = currentManager.value.doc_link
-  })
-}
-
-const isJsonValid = ref(true)
-const errorMessage = ref('')
-
-const checkJsonValid = () => {
-  try {
-    JSON.parse(currentManagerData.value)
-    isJsonValid.value = true
-    errorMessage.value = ''
-  } catch (error) {
-    isJsonValid.value = false
-    errorMessage.value = error.message
-  }
-}
-
-const onInput = () => {
-  modified.value = true
-  checkJsonValid()
-}
-
-const saveAndApply = () => {
-  if (configType.value == 'json') {
-    checkJsonValid()
-  }
-  if (!isJsonValid.value) {
-    snackbar.error('JSON 格式不正确: ' + errorMessage.value)
-    return
-  }
-  if (configType.value == 'json') {
-    currentManagerData.value = JSON.parse(currentManagerData.value)
-  }
-
-  proxy.$axios.put(`/settings/${currentManager.value.name}/data`, {
-    data: currentManagerData.value
-  }).then(response => {
-    if (response.data.code != 0) {
-      snackbar.error(response.data.msg)
-      return
-    }
-    fetchCurrentManagerData(currentManager.value.name)
-    modified.value = false
-    snackbar.success('应用成功')
-  }).catch(error => {
-    snackbar.error(error)
-  })
-}
-
-const reset = () => {
-  if (configType.value == 'json') {
-    currentManagerData.value = currentManager.value.data
-    isJsonValid.value = true
-    errorMessage.value = ''
-    modified.value = false
-    snackbar.success('重置成功')
-  } else {
-    fetchCurrentManagerData(currentManager.value.name).then(() => {
-      snackbar.success('重置成功')
-      modified.value = false
-    })
-  }
 }
 
 onMounted(async () => {
@@ -274,79 +86,4 @@ onMounted(async () => {
   /* background-color: aqua; */
 }
 
-.config-tab-window {
-  overflow: hidden;
-}
-
-.config-tab-toolbar {
-  margin: 0.5rem;
-  height: 3.2rem;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-
-#file-operation-toolbar {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-#config-type-toggle {
-  margin: 0.5rem;
-  box-shadow: 0 0 0 2px #dddddd;
-}
-
-#config-tab-content {
-  margin: 0.2rem;
-  height: calc(100% - 1rem);
-  overflow: hidden;
-}
-
-#config-tab-content-ui {
-  margin: 0.5rem;
-  height: calc(100vh - 15rem);
-  margin-top: 1rem;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-#config-tab-content-ui-form {
-  height: 100%;
-  width: calc(100% - 1.5rem);
-  margin-left: 0.5rem;
-  overflow-y: auto;
-}
-
-#config-tab-content-ui-form-vjsf {
-  height: 100%;
-  width: calc(100% - 1rem);
-}
-
-#config-tab-content-json {
-  margin: 0.5rem;
-  height: calc(100vh - 16rem);
-  margin-top: 1rem;
-}
-
-#config-tab-content-json-json-editor-vue {
-  height: 100%;
-  width: 100%;
-}
-
-#config-tab-json-doc-link {
-  margin: 0rem;
-  margin-left: 0.6rem;
-  height: 1.5rem;
-  margin-top: 0.2rem;
-  font-size: 0.8rem;
-  color: rgb(26, 98, 214);
-}
 </style>