feat(settings): json 编辑器

pkg/api/http/controller/group.py

@@ -63,11 +63,6 @@ class RouterGroup(abc.ABC):
         return decorator
     
     def _cors(self, response: quart.Response) -> quart.Response:
-        # Quart-Cors 似乎很久没维护了，所以自己写
-        response.headers['Access-Control-Allow-Origin'] = '*'
-        response.headers['Access-Control-Allow-Headers'] = '*'
-        response.headers['Access-Control-Allow-Methods'] = '*'
-        response.headers['Access-Control-Allow-Credentials'] = 'true'
         return response
 
     def success(self, data: typing.Any = None) -> quart.Response:

pkg/api/http/controller/groups/settings.py

@@ -39,3 +39,12 @@ class SettingsRouterGroup(group.RouterGroup):
                     }
                 }
             )
+        
+        @self.route('/<manager_name>/data', methods=['PUT'])
+        async def _(manager_name: str) -> str:
+            data = await quart.request.json
+            manager = self.ap.settings_mgr.get_manager(manager_name)
+            manager.data = data['data']
+            return self.success(data={
+                "data": manager.data
+            })

pkg/api/http/controller/main.py

@@ -3,6 +3,7 @@ from __future__ import annotations
 import asyncio
 
 import quart
+import quart_cors
 
 from ....core import app
 from .groups import logs, system, settings
@@ -18,6 +19,7 @@ class HTTPController:
     def __init__(self, ap: app.Application) -> None:
         self.ap = ap
         self.quart_app = quart.Quart(__name__)
+        quart_cors.cors(self.quart_app, allow_origin='*')
 
     async def initialize(self) -> None:
         await self.register_routes()

pkg/core/bootutils/deps.py

@@ -16,6 +16,7 @@ required_deps = {
     "async_lru": "async-lru",
     "ollama": "ollama",
     "quart": "quart",
+    "quart_cors": "quart-cors",
     "sqlalchemy": "sqlalchemy[asyncio]",
     "aiosqlite": "aiosqlite",
 }

requirements.txt

@@ -18,3 +18,4 @@ ollama
 quart
 sqlalchemy[asyncio]
 aiosqlite
+quart-cors

web/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@mdi/font": "7.4.47",
         "axios": "^1.7.7",
+        "codemirror": "^5.65.18",
         "core-js": "^3.37.1",
         "roboto-fontface": "*",
         "vue": "^3.4.31",
@@ -1466,6 +1467,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/codemirror": {
+      "version": "5.65.18",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.18.tgz",
+      "integrity": "sha512-Gaz4gHnkbHMGgahNt3CA5HBk5lLQBqmD/pBgeB4kQU6OedZmqMBjlRF0LSrp2tJ4wlLNPm2FfaUd1pDy0mdlpA==",
+      "license": "MIT"
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",

web/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@mdi/font": "7.4.47",
     "axios": "^1.7.7",
+    "codemirror": "^5.65.18",
     "core-js": "^3.37.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",

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-tabs id="settings-tabs" v-model="proxy.$store.state.settingsPageTab" show-arrows center-active
-      <v-tab v-for="manager in managerList" :key="manager.name" :value="manager.name">{{ manager.name }}</v-tab>
+      @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="proxy.$store.state.settingsPageTab">
-    <v-tabs-window id="settings-tab-window" v-model="tab">
       <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
   },