From ad92c41d08945999523b9048283f4ec30f15c908 Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Wed, 14 May 2025 15:29:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(rankTable):=E6=8E=92=E8=A1=8C=E6=A6=9C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=82=A1=E7=A5=A8=E8=A1=8C=E6=83=85K?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在排名表格中，将股票名称单元格改为可触发 popover 的按钮
- 在 popover 中显示股票的 K 线图
- 引入 KLineChart 组件用于渲染 K线图
- 优化表格展示效果，调整涨跌幅和成交额的显示方式
---
 frontend/src/components/rankTable.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/rankTable.vue b/frontend/src/components/rankTable.vue
index 90bf5c6..edaf01f 100644
--- a/frontend/src/components/rankTable.vue
+++ b/frontend/src/components/rankTable.vue
@@ -4,6 +4,7 @@ import {CaretDown, CaretUp} from "@vicons/ionicons5";
 import {NText} from "naive-ui";
 import {onMounted, ref} from "vue";
 import {GetMoneyRankSina} from "../../wailsjs/go/main/App";
+import KLineChart from "./KLineChart.vue";
 
 const props = defineProps({
   headerTitle: {
@@ -60,8 +61,15 @@ function GetMoneyRankSinaData(){
     <n-tbody>
       <n-tr v-for="item in dataList" :key="item.symbol">
         <n-td><n-tag :bordered=false type="info">{{ item.symbol }}</n-tag></n-td>
-        <n-td><n-tag :bordered=false type="info">{{ item.name }}</n-tag></n-td>
-        <n-td><n-text :type="item.trade>0?'error':'success'">{{item.trade}}</n-text></n-td>
+        <n-td>
+          <n-popover trigger="hover" placement="right">
+            <template #trigger>
+              <n-button tag="a"  text :type="item.changeratio>0?'error':'success'" :bordered=false >{{ item.name }}</n-button>
+            </template>
+            <k-line-chart style="width: 800px" :code="item.symbol" :chart-height="500" :name="item.name" :k-days="20" :dark-theme="true"></k-line-chart>
+          </n-popover>
+        </n-td>
+        <n-td><n-text :type="item.changeratio>0?'error':'success'">{{item.trade}}</n-text></n-td>
         <n-td><n-text :type="item.changeratio>0?'error':'success'">{{(item.changeratio*100).toFixed(2)}}%</n-text></n-td>
         <n-td><n-text :type="item.turnover>500?'error':'info'">{{(item.turnover/100).toFixed(2)}}%</n-text></n-td>
         <n-td><n-text type="info">{{(item.amount/10000).toFixed(2)}}</n-text></n-td>