feat(rankTable):排行榜增加股票行情K线图弹窗

- 在排名表格中，将股票名称单元格改为可触发 popover 的按钮
- 在 popover 中显示股票的 K 线图
- 引入 KLineChart 组件用于渲染 K线图
- 优化表格展示效果，调整涨跌幅和成交额的显示方式

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>