feat(settings): json 编辑器

web/src/pages/Settings.vue

@@ -2,11 +2,16 @@
   <PageTitle title="设置" @refresh="refresh" />
 
   <v-card id="settings-card">
-    <v-tabs id="settings-tabs" v-model="tab" show-arrows center-active>
-      <v-tab v-for="manager in managerList" :key="manager.name" :value="manager.name">{{ manager.name }}</v-tab>
+    <v-tabs id="settings-tabs" v-model="proxy.$store.state.settingsPageTab" show-arrows center-active
+      @update:model-value="onTabChange">
+      <v-tooltip v-for="manager in managerList" :key="manager.name" :text="manager.description"
+        location="top">
+        <template v-slot:activator="{ props }">
+          <v-tab v-bind="props" :value="manager.name">{{ manager.name }}</v-tab>
+        </template>
+      </v-tooltip>
     </v-tabs>
-
-    <v-tabs-window id="settings-tab-window" v-model="tab">
+    <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">
@@ -24,7 +29,22 @@
               </v-btn-toggle>
             </template>
           </v-tooltip>
+
+          <div id="file-operation-toolbar">
+            <v-btn @click="reset" color="warning" prepend-icon="mdi-undo" :disabled="!modified">重置</v-btn>
+            <v-btn @click="saveAndApply" color="primary" prepend-icon="mdi-content-save-outline" :disabled="!modified">应用</v-btn>
+          </div>
         </v-card>
+        <div id="config-tab-content">
+
+          <div id="config-tab-content-ui" v-if="configType == 'ui'">
+
+          </div>
+
+          <v-card id="config-tab-content-json" v-if="configType == 'json'">
+            <textarea id="config-tab-content-json-textarea" @input="onInput" v-model="currentManagerData" />
+          </v-card>
+        </div>
       </v-tabs-window-item>
     </v-tabs-window>
   </v-card>
@@ -34,13 +54,15 @@
 <script setup>
 
 import PageTitle from '@/components/PageTitle.vue'
-import { ref, getCurrentInstance, onMounted, onUnmounted } from 'vue'
+import { ref, getCurrentInstance, onMounted } from 'vue'
 
 const { proxy } = getCurrentInstance()
 
 const managerList = ref([])
-const tab = ref('')
 const configType = ref('json')  // ui or json
+const currentManager = ref(null)
+const currentManagerData = ref('')
+const modified = ref(false)
 
 const refresh = () => {
   proxy.$axios.get('/settings').then(response => {
@@ -48,6 +70,36 @@ const refresh = () => {
   })
 }
 
+const onTabChange = (tab) => {
+  fetchCurrentManagerData(tab)
+}
+
+const fetchCurrentManagerData = (tab) => {
+  proxy.$axios.get(`/settings/${tab}`).then(response => {
+    currentManager.value = response.data.data.manager
+    currentManagerData.value = JSON.stringify(currentManager.value.data, null, 2)
+  })
+}
+
+const onInput = () => {
+  modified.value = true
+}
+
+const saveAndApply = () => {
+
+  proxy.$axios.put(`/settings/${currentManager.value.name}/data`, {
+    data: JSON.parse(currentManagerData.value)
+  }).then(response => {
+    fetchCurrentManagerData(currentManager.value.name)
+    modified.value = false
+  })
+}
+
+const reset = () => {
+  currentManagerData.value = JSON.stringify(currentManager.value.data, null, 2)
+  modified.value = false
+}
+
 onMounted(async () => {
   refresh()
 })
@@ -85,10 +137,19 @@ onMounted(async () => {
   height: 4rem;
   display: flex;
   flex-direction: row;
-  justify-content: flex-start;
+  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;
@@ -98,5 +159,27 @@ onMounted(async () => {
 
 .config-tab-content {
   margin: 0.2rem;
+  height: calc(100% - 1rem);
+}
+
+#config-tab-content-json {
+  margin: 0.5rem;
+  height: calc(100vh - 18rem);
+  margin-top: 1rem;
+}
+
+#config-tab-content-json-textarea {
+  width: 100%;
+  height: 100%;
+  resize: none;
+  padding: 0.6rem;
+  background-color: #f0f0f0;
+  border: none;
+  outline: none;
+  appearance: none;
+  /*字间隔增大*/
+  letter-spacing: 0.05rem;
+  line-height: 1.6rem;
+  text-wrap: nowrap;
 }
 </style>

web/src/store/index.js

@@ -6,6 +6,7 @@ export default createStore({
   state: {
     apiBaseUrl: 'http://localhost:5300/api/v1',
     autoRefreshLog: false,
+    settingsPageTab: '',
     version: 'v0.0.0',
     debug: false
   },