From d52f9b9543b3ad03dc4f1ca24955516011e1ec82 Mon Sep 17 00:00:00 2001
From: Junyan Qin <1010553892@qq.com>
Date: Tue, 15 Oct 2024 14:23:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(settings):=20json=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg/api/http/controller/group.py           |  5 --
 pkg/api/http/controller/groups/settings.py |  9 ++
 pkg/api/http/controller/main.py            |  2 +
 pkg/core/bootutils/deps.py                 |  1 +
 requirements.txt                           |  3 +-
 web/package-lock.json                      |  7 ++
 web/package.json                           |  1 +
 web/src/pages/Settings.vue                 | 97 ++++++++++++++++++++--
 web/src/store/index.js                     |  1 +
 9 files changed, 113 insertions(+), 13 deletions(-)

diff --git a/pkg/api/http/controller/group.py b/pkg/api/http/controller/group.py
index 4f253e05..053ba1cd 100644
--- a/pkg/api/http/controller/group.py
+++ b/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:
diff --git a/pkg/api/http/controller/groups/settings.py b/pkg/api/http/controller/groups/settings.py
index 15a145d2..72f41d97 100644
--- a/pkg/api/http/controller/groups/settings.py
+++ b/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
+            })
diff --git a/pkg/api/http/controller/main.py b/pkg/api/http/controller/main.py
index ac82a98e..17b15192 100644
--- a/pkg/api/http/controller/main.py
+++ b/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()
diff --git a/pkg/core/bootutils/deps.py b/pkg/core/bootutils/deps.py
index 8c0127e5..69dfe138 100644
--- a/pkg/core/bootutils/deps.py
+++ b/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",
 }
diff --git a/requirements.txt b/requirements.txt
index f001e6af..389f172f 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -17,4 +17,5 @@ async-lru
 ollama
 quart
 sqlalchemy[asyncio]
-aiosqlite
\ No newline at end of file
+aiosqlite
+quart-cors
\ No newline at end of file
diff --git a/web/package-lock.json b/web/package-lock.json
index d60c5734..9067fd2b 100644
--- a/web/package-lock.json
+++ b/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",
diff --git a/web/package.json b/web/package.json
index b24ede85..8f961de1 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/pages/Settings.vue b/web/src/pages/Settings.vue
index 67d15856..16ceaab8 100644
--- a/web/src/pages/Settings.vue
+++ b/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>
\ No newline at end of file
diff --git a/web/src/store/index.js b/web/src/store/index.js
index b7fed0d6..b5966e58 100644
--- a/web/src/store/index.js
+++ b/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
   },