From b5843bcdb8982e9ad4aa8bd64a803f0ef6f2f51d Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Mon, 7 Jul 2025 10:50:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=E9=87=8D=E6=9E=84=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E8=B7=AF=E7=94=B1=E5=B9=B6=E4=BC=98=E5=8C=96=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改路由配置，使用 createWebHashHistory 替代 createWebHistory- 重命名部分组件以提高代码一致性
- 优化设置页面布局，使用卡片组件分类显示不同设置项
- 调整提示词模板展示方式，增加警告提示
---
 frontend/src/App.vue                 | 48 +++++++++++++---
 frontend/src/components/settings.vue | 82 +++++++++++++++++-----------
 frontend/src/router/router.js        | 11 ++--
 3 files changed, 97 insertions(+), 44 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6a0040c..484520c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -44,9 +44,9 @@ const enableNews = ref(false)
 const contentStyle = ref("")
 const enableFund = ref(false)
 const enableDarkTheme = ref(null)
-const content = ref('数据来源于网络,仅供参考;投资有风险,入市需谨慎\n\n未经授权,禁止商业目的!')
+const content = ref('未经授权,禁止商业目的!\n\n数据来源于网络,仅供参考;投资有风险,入市需谨慎')
 const isFullscreen = ref(false)
-const activeKey = ref('')
+const activeKey = ref('stock')
 const containerRef = ref({})
 const realtimeProfit = ref(0)
 const telegraph = ref([])
@@ -64,7 +64,10 @@ const menuOptions = ref([
                   groupId: 0,
                 },
                 params: {},
-              }
+              },
+              onClick: () => {
+                activeKey.value = 'stock'
+              },
             },
             {default: () => '股票自选',}
         ),
@@ -79,6 +82,7 @@ const menuOptions = ref([
                   href: '#',
                   type: 'info',
                   onClick: () => {
+                    activeKey.value = 'stock'
                     //console.log("push",item)
                     router.push({
                       name: 'stock',
@@ -114,6 +118,7 @@ const menuOptions = ref([
                 params: {}
               },
               onClick: () => {
+                activeKey.value = 'market'
                 EventsEmit("changeMarketTab", {ID: 0, name: '市场快讯'})
               },
             },
@@ -135,6 +140,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '市场快讯'})
                   },
                 },
@@ -156,6 +162,7 @@ const menuOptions = ref([
                     },
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '全球股指'})
                   },
                 },
@@ -177,6 +184,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '指标行情'})
                   },
                 },
@@ -198,6 +206,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '行业排名'})
                   },
                 },
@@ -219,6 +228,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '个股资金流向'})
                   },
                 },
@@ -240,6 +250,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '龙虎榜'})
                   },
                 },
@@ -261,6 +272,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '个股研报'})
                   },
                 },
@@ -282,6 +294,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '公司公告'})
                   },
                 },
@@ -303,6 +316,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '行业研究'})
                   },
                 },
@@ -324,6 +338,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '当前热门'})
                   },
                 },
@@ -345,6 +360,7 @@ const menuOptions = ref([
                     }
                   },
                   onClick: () => {
+                    activeKey.value = 'market'
                     EventsEmit("changeMarketTab", {ID: 0, name: '指标选股'})
                   },
                 },
@@ -362,8 +378,13 @@ const menuOptions = ref([
             {
               to: {
                 name: 'fund',
-                params: {},
-              }
+                query: {
+                  name: '基金自选',
+                },
+              },
+              onClick: () => {
+                activeKey.value = 'fund'
+              },
             },
             {default: () => '基金自选',}
         ),
@@ -386,7 +407,12 @@ const menuOptions = ref([
             {
               to: {
                 name: 'settings',
-                params: {}
+                query: {
+                  name:"设置",
+                },
+                onClick: () => {
+                  activeKey.value = 'settings'
+                },
               }
             },
             {default: () => '设置'}
@@ -401,8 +427,13 @@ const menuOptions = ref([
             {
               to: {
                 name: 'about',
-                params: {}
-              }
+                query: {
+                  name:"关于",
+                }
+              },
+              onClick: () => {
+                activeKey.value = 'about'
+              },
             },
             {default: () => '关于'}
         ),
@@ -451,6 +482,7 @@ function renderIcon(icon) {
 }
 
 function toggleFullscreen(e) {
+  activeKey.value = 'full'
   //console.log(e)
   if (isFullscreen.value) {
     WindowUnfullscreen()
diff --git a/frontend/src/components/settings.vue b/frontend/src/components/settings.vue
index 8cfa20d..0bf6606 100644
--- a/frontend/src/components/settings.vue
+++ b/frontend/src/components/settings.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import {computed, onBeforeUnmount, onMounted, ref} from "vue";
+import {h, onBeforeUnmount, onMounted, ref} from "vue";
 import {
   AddPrompt, DelPrompt,
   ExportConfig,
@@ -9,7 +9,7 @@ import {
   SendDingDingMessageByType,
   UpdateConfig
 } from "../../wailsjs/go/main/App";
-import {useMessage} from "naive-ui";
+import {NTag, useMessage} from "naive-ui";
 import {data, models} from "../../wailsjs/go/models";
 import {EventsEmit} from "../../wailsjs/runtime";
 const message = useMessage()
@@ -267,12 +267,13 @@ function deletePrompt(ID){
 </script>
 
 <template>
-  <n-flex justify="left" style="margin-top: 12px;padding-left: 12px;">
+  <n-flex justify="left" style="text-align: left">
   <n-form ref="formRef"  :label-placement="'left'" :label-align="'left'" >
-      <n-grid :cols="24" :x-gap="24" style="text-align: left" :layout-shift-disabled="true">
-        <n-gi :span="24">
-          <n-text type="success" style="font-size: 25px;font-weight: bold">基础设置</n-text>
-        </n-gi>
+    <n-card :title="()=> h(NTag, { type: 'primary',bordered:false },()=> '基础设置')" size="small" >
+      <n-grid :cols="24" :x-gap="24" style="text-align: left" >
+        <!--        <n-gi :span="24">-->
+        <!--          <n-text type="success" style="font-size: 25px;font-weight: bold">基础设置</n-text>-->
+        <!--        </n-gi>-->
         <n-form-item-gi  :span="10" label="Tushare &nbsp;&nbsp;Token：" path="tushareToken"  >
           <n-input  type="text" placeholder="Tushare api token"  v-model:value="formValue.tushareToken" clearable />
         </n-form-item-gi>
@@ -296,11 +297,14 @@ function deletePrompt(ID){
           <n-switch v-model:value="formValue.enableFund" />
         </n-form-item-gi>
       </n-grid>
+    </n-card>
 
+
+    <n-card  :title="()=> h(NTag, { type: 'primary',bordered:false },()=> '通知设置')"  size="small" >
         <n-grid :cols="24" :x-gap="24" style="text-align: left">
-          <n-gi :span="24">
-            <n-text type="success" style="font-size: 25px;font-weight: bold">通知设置</n-text>
-          </n-gi>
+<!--          <n-gi :span="24">-->
+<!--            <n-text type="success" style="font-size: 25px;font-weight: bold">通知设置</n-text>-->
+<!--          </n-gi>-->
           <n-form-item-gi  :span="4" label="钉钉推送：" path="dingPush.enable" >
             <n-switch v-model:value="formValue.dingPush.enable" />
           </n-form-item-gi>
@@ -321,11 +325,13 @@ function deletePrompt(ID){
             <n-button type="primary" @click="sendTestNotice">发送测试通知</n-button>
           </n-form-item-gi>
         </n-grid>
+    </n-card>
 
+    <n-card   :title="()=> h(NTag, { type: 'primary',bordered:false },()=> 'AI设置')" size="small" >
     <n-grid :cols="24" :x-gap="24" style="text-align: left;">
-      <n-gi :span="24">
-        <n-text type="success" style="font-size: 25px;font-weight: bold">OpenAI设置</n-text>
-      </n-gi>
+<!--      <n-gi :span="24">-->
+<!--        <n-text type="success" style="font-size: 25px;font-weight: bold">OpenAI设置</n-text>-->
+<!--      </n-gi>-->
       <n-form-item-gi  :span="3" label="AI诊股：" path="openAI.enable" >
         <n-switch v-model:value="formValue.openAI.enable" />
       </n-form-item-gi>
@@ -376,28 +382,38 @@ function deletePrompt(ID){
         />
      </n-form-item-gi>
     </n-grid>
-    <n-gi :span="24">
+    <n-grid :cols="24">
+      <n-gi :span="24">
         <n-space justify="center">
-          <n-button  type="warning" @click="managePrompts">
+          <n-button type="warning" @click="managePrompts">
             添加提示词模板
           </n-button>
-        <n-button  type="primary" @click="saveConfig">
-          保存
-        </n-button>
-        <n-button  type="info" @click="exportConfig">
-          导出
-        </n-button>
-        <n-button  type="error" @click="importConfig">
-          导入
-        </n-button>
+          <n-button type="primary" @click="saveConfig">
+            保存
+          </n-button>
+          <n-button type="info" @click="exportConfig">
+            导出
+          </n-button>
+          <n-button type="error" @click="importConfig">
+            导入
+          </n-button>
         </n-space>
-    </n-gi>
+      </n-gi>
+      <n-gi :span="24"   v-if="promptTemplates.length>0" type="warning">
+        <n-flex justify="start" style="margin-top: 4px" >
+          <n-text type="warning" >
+            <n-flex  justify="left"  >
+              <n-tag :bordered="false" type="warning" > 提示词模板:</n-tag>
+              <n-tag size="medium" secondary v-if="promptTemplates.length>0" v-for="prompt in promptTemplates" closable @close="deletePrompt(prompt.ID)" @click="editPrompt(prompt)" :title="prompt.content"
+                      :type="prompt.type==='模型系统Prompt'?'success':'info'" :bordered="false"> {{ prompt.name }}
+              </n-tag>
+            </n-flex>
+          </n-text>
+        </n-flex>
+      </n-gi>
+    </n-grid>
+    </n-card>
   </n-form>
-    <n-gi :span="24"  v-if="promptTemplates.length>0"  v-for="prompt in promptTemplates" >
-      <n-flex justify="start">
-        <n-tag closable  @close="deletePrompt(prompt.ID)" @click="editPrompt(prompt)" :title="prompt.content" :type="prompt.type==='模型系统Prompt'?'success':'info'" :bordered="false"> {{prompt.name}} </n-tag>
-      </n-flex>
-    </n-gi>
   </n-flex>
   <n-modal v-model:show="showManagePromptsModal" closable  :mask-closable="false">
     <n-card
@@ -442,5 +458,9 @@ function deletePrompt(ID){
 </template>
 
 <style scoped>
-
+.cardHeaderClass{
+  font-size: 16px;
+  font-weight: bold;
+  color: red;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/router/router.js b/frontend/src/router/router.js
index 4715a20..3aa52af 100644
--- a/frontend/src/router/router.js
+++ b/frontend/src/router/router.js
@@ -2,21 +2,22 @@ import {createMemoryHistory, createRouter, createWebHashHistory, createWebHistor
 
 import stockView from '../components/stock.vue'
 import settingsView from '../components/settings.vue'
-import about from "../components/about.vue";
+import aboutView from "../components/about.vue";
 import fundView from "../components/fund.vue";
-import market from "../components/market.vue";
+import marketView from "../components/market.vue";
 
 const routes = [
     { path: '/', component: stockView,name: 'stock'},
     { path: '/fund', component: fundView,name: 'fund' },
     { path: '/settings', component: settingsView,name: 'settings' },
-    { path: '/about', component: about,name: 'about' },
-    { path: '/market', component: market,name: 'market' },
+    { path: '/about', component: aboutView,name: 'about' },
+    { path: '/market', component: marketView,name: 'market' },
 
 ]
 
 const router = createRouter({
-    history: createWebHistory(),
+    //history: createWebHistory(),
+    history: createWebHashHistory(),
     routes,
 })