From 0a2491d725751bc3bd5814e1439102d5e043e192 Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Tue, 17 Jun 2025 09:49:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=E4=B8=BA=E8=82=A1=E7=A5=A8?=
 =?UTF-8?q?=E5=85=AC=E5=91=8A=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0=E8=B5=B0?=
 =?UTF-8?q?=E5=8A=BF=E5=9B=BE=E5=92=8C=E8=B5=84=E9=87=91=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 StockNoticeList 组件中添加 KLineChart 和 MoneyTrend 组件
- 实现股票代码和名称的悬停显示功能- 添加资金趋势图和 K线图的渲染
- 优化股票代码显示格式
---
 frontend/src/components/StockNoticeList.vue | 30 ++++++++++++++++++---
 frontend/src/components/moneyTrend.vue      |  7 +++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/StockNoticeList.vue b/frontend/src/components/StockNoticeList.vue
index f99fc31..8eabb74 100644
--- a/frontend/src/components/StockNoticeList.vue
+++ b/frontend/src/components/StockNoticeList.vue
@@ -4,6 +4,8 @@ import {GetStockList, StockNotice} from "../../wailsjs/go/main/App";
 import {BrowserOpenURL} from "../../wailsjs/runtime";
 import {RefreshCircleSharp} from "@vicons/ionicons5";
 import _ from "lodash";
+import KLineChart from "./KLineChart.vue";
+import MoneyTrend from "./moneyTrend.vue";
 
 
 const list  = ref([])
@@ -66,7 +68,19 @@ function getTypeColor(name){
   return "info"
 
 }
-
+function getmMarketCode(market,code) {
+  if(market==="0"){
+    return "sz"+code
+  }else if(market==="1"){
+    return "sh"+code
+  }else if(market==="2"){
+    return "bj"+code
+  }else if(market==="3"){
+    return "hk"+code
+  }else{
+    return code
+  }
+}
 </script>
 
 <template>
@@ -87,10 +101,20 @@ function getTypeColor(name){
     <n-tbody>
       <n-tr v-for="item in list" :key="item.art_code">
         <n-td>
-          <n-tag type="info">{{item.codes[0].stock_code }}</n-tag>
+          <n-popover trigger="hover" placement="right">
+            <template #trigger>
+              <n-tag type="info"  :bordered="false">{{item.codes[0].stock_code }}</n-tag>
+            </template>
+            <money-trend style="width: 800px" :code="getmMarketCode(item.codes[0].market_code,item.codes[0].stock_code)" :name="item.codes[0].short_name"  :days="360" :dark-theme="true" :chart-height="500"></money-trend>
+          </n-popover>
         </n-td>
         <n-td>
-          <n-tag type="info">{{item.codes[0].short_name }}</n-tag>
+          <n-popover trigger="hover" placement="right">
+            <template #trigger>
+              <n-tag type="info"  :bordered="false">{{item.codes[0].short_name }}</n-tag>
+            </template>
+            <k-line-chart style="width: 800px" :code="getmMarketCode(item.codes[0].market_code,item.codes[0].stock_code)" :chart-height="500" :name="item.codes[0].short_name" :k-days="20" :dark-theme="true"></k-line-chart>
+          </n-popover>
         </n-td>
         <n-td>
           <n-a type="info"  @click="openWin(item.art_code)"><n-text  :type="getTypeColor(item.columns[0].column_name)"> {{item.title}}</n-text></n-a>
diff --git a/frontend/src/components/moneyTrend.vue b/frontend/src/components/moneyTrend.vue
index fa782b0..f02246c 100644
--- a/frontend/src/components/moneyTrend.vue
+++ b/frontend/src/components/moneyTrend.vue
@@ -72,6 +72,13 @@ const handleLine = (code, days) => {
     const upColor = '#ec0000';
     const downColor = '#00da3c';
     let option = {
+      title: {
+        text: name,
+        left: '20px',
+        textStyle: {
+          color: darkTheme?'#ccc':'#456'
+        }
+      },
       tooltip: {
         trigger: 'axis',
         axisPointer: {