From 2dd4f072b24f5441070eeb8107b3b7c88435a9b8 Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Mon, 7 Jul 2025 17:17:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=E6=B7=BB=E5=8A=A0=E8=82=A1?=
 =?UTF-8?q?=E7=A5=A8=E5=88=86=E9=92=9F=E7=BA=BF=E8=BF=B7=E4=BD=A0=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=B9=B6=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 StockSparkLine 组件，用于显示股票分钟迷你线图表
- 在股票页面中集成 StockSparkLine 组件
- 为 about、market 和 settings 页面的主体元素添加可拖拽样式
- 优化股票页面布局，调整网格列数和对齐方式
---
 frontend/src/components/about.vue          |   2 +-
 frontend/src/components/market.vue         |   3 +-
 frontend/src/components/settings.vue       |   2 +-
 frontend/src/components/stock.vue          |   8 +-
 frontend/src/components/stockSparkLine.vue | 128 +++++++++++++++++++++
 5 files changed, 138 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/stockSparkLine.vue

diff --git a/frontend/src/components/about.vue b/frontend/src/components/about.vue
index b47b6a8..5a734f3 100644
--- a/frontend/src/components/about.vue
+++ b/frontend/src/components/about.vue
@@ -80,7 +80,7 @@ EventsOn("updateVersion",async (msg) => {
 </script>
 
 <template>
-      <n-space vertical size="large">
+      <n-space vertical size="large"  style="--wails-draggable:drag">
         <!-- 软件描述 -->
         <n-card size="large">
           <n-divider title-placement="center">关于软件</n-divider>
diff --git a/frontend/src/components/market.vue b/frontend/src/components/market.vue
index d641383..2d84a8b 100644
--- a/frontend/src/components/market.vue
+++ b/frontend/src/components/market.vue
@@ -199,6 +199,7 @@ function getAiSummary() {
   summaryModal.value = true
   loading.value = true
   GetAIResponseResult("市场资讯").then(result => {
+    loading.value = false
     if (result.content) {
       aiSummary.value = result.content
       question.value = result.question
@@ -310,7 +311,7 @@ function ReFlesh(source) {
 </script>
 
 <template>
-  <n-card>
+  <n-card  style="--wails-draggable:drag">
     <n-tabs type="line" animated @update-value="updateTab" :value="nowTab">
       <n-tab-pane name="市场快讯" tab="市场快讯">
         <n-grid :cols="2" :y-gap="0">
diff --git a/frontend/src/components/settings.vue b/frontend/src/components/settings.vue
index 0bf6606..d0ff16b 100644
--- a/frontend/src/components/settings.vue
+++ b/frontend/src/components/settings.vue
@@ -267,7 +267,7 @@ function deletePrompt(ID){
 </script>
 
 <template>
-  <n-flex justify="left" style="text-align: left">
+  <n-flex justify="left" style="text-align: left;--wails-draggable:drag" >
   <n-form ref="formRef"  :label-placement="'left'" :label-align="'left'" >
     <n-card :title="()=> h(NTag, { type: 'primary',bordered:false },()=> '基础设置')" size="small" >
       <n-grid :cols="24" :x-gap="24" style="text-align: left" >
diff --git a/frontend/src/components/stock.vue b/frontend/src/components/stock.vue
index 20a0f22..cafaf44 100644
--- a/frontend/src/components/stock.vue
+++ b/frontend/src/components/stock.vue
@@ -64,6 +64,7 @@ import {keys, padStart} from "lodash";
 import {useRoute, useRouter} from 'vue-router'
 import MoneyTrend from "./moneyTrend.vue";
 import {TaskTools} from "@vicons/carbon";
+import StockSparkLine from "./stockSparkLine.vue";
 
 const route = useRoute()
 const router = useRouter()
@@ -1796,8 +1797,8 @@ function searchStockReport(stockCode) {
           <n-card :data-sort="result.sort" :id="result['股票代码']" :data-code="result['股票代码']" :bordered="true"
                   :title="result['股票名称']" :closable="false"
                   @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
-            <n-grid :cols="1" :y-gap="6">
-              <n-gi>
+            <n-grid :cols="12" :y-gap="6">
+              <n-gi :span="6">
                 <n-text :type="result.type">
                   <n-number-animation :duration="1000" :precision="2" :from="result['上次当前价格']"
                                       :to="Number(result['当前价格'])"/>
@@ -1813,6 +1814,9 @@ function searchStockReport(stockCode) {
                   <n-number-animation :duration="1000" :precision="2" :from="0" :to="result.profitAmountToday"/>
                 </n-text>
               </n-gi>
+              <n-gi :span="6">
+                <stock-spark-line :open-price="result['今日开盘价']" :stock-code="result['股票代码']" :stock-name="result['股票名称']" ></stock-spark-line>
+              </n-gi>
             </n-grid>
             <n-grid :cols="2" :y-gap="4" :x-gap="4">
               <n-gi>
diff --git a/frontend/src/components/stockSparkLine.vue b/frontend/src/components/stockSparkLine.vue
new file mode 100644
index 0000000..30a2e56
--- /dev/null
+++ b/frontend/src/components/stockSparkLine.vue
@@ -0,0 +1,128 @@
+<script setup>
+import {onMounted,onBeforeMount, ref} from "vue";
+import * as echarts from 'echarts';
+import {GetStockMinutePriceLineData} from "../../wailsjs/go/main/App"; // 如果您使用多个组件，请将此样式导入放在您的主文件中
+const {stockCode,stockName,openPrice,darkTheme} = defineProps({
+  stockCode: {
+    type: String,
+    default: ""
+  },
+  stockName: {
+    type: String,
+    default: ""
+  },
+  openPrice: {
+    type: Number,
+    default: 0
+  },
+  darkTheme: {
+    type: Boolean,
+    default: true
+  },
+})
+
+const chartRef=ref();
+
+function setChartData(chart) {
+  GetStockMinutePriceLineData(stockCode, stockName).then(result => {
+    //console.log("GetStockMinutePriceLineData",result)
+    const priceData = result.priceData
+    let category = []
+    let price = []
+    let min = 0
+    let max = 0
+    let lastPrice = priceData[priceData.length - 1].price
+    for (let i = 0; i < priceData.length; i++) {
+      category.push(priceData[i].time)
+      price.push(priceData[i].price)
+      if (min === 0 || min > priceData[i].price) {
+        min = priceData[i].price
+      }
+      if (max < priceData[i].price) {
+        max = priceData[i].price
+      }
+    }
+    let option = {
+      padding: [0, 0, 0, 0],
+      grid: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      xAxis: {
+        show: false,
+        type: 'category',
+        data: category
+      },
+      yAxis: {
+        show: false,
+        type: 'value',
+        min: (min).toFixed(2),
+        max: (max).toFixed(2),
+        minInterval: 0.01,
+      },
+      // visualMap: {
+      //   show: false,
+      //   type: 'piecewise',
+      //   pieces: [
+      //     {
+      //       min: Number(min),
+      //       max: Number(openPrice),
+      //       color: 'green'
+      //     },
+      //     {
+      //       min: Number(openPrice),
+      //       max: Number(max),
+      //       color: 'red'
+      //     }
+      //   ]
+      // },
+      series: [
+        {
+          data: price,
+          type: 'line',
+          smooth: false,
+          stack: '总量',
+          showSymbol: false,
+          lineStyle: {
+            color: lastPrice > openPrice ? 'rgba(245, 0, 0, 1)' : 'rgb(6,251,10)'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: lastPrice > openPrice ? 'rgba(245, 0, 0, 1)' : 'rgba(6,251,10, 1)'
+            }, {
+              offset: 1,
+              color: lastPrice > openPrice ? 'rgba(245, 0, 0, 0.25)' : 'rgba(6,251,10, 0.25)'
+            }])
+          },
+        }
+      ]
+    };
+    chart.setOption(option);
+  })
+}
+
+onMounted(() => {
+  const chart = echarts.init(chartRef.value);
+  setChartData(chart);
+
+  // setInterval(() => {
+  //   setChartData(chart);
+  // }, 1000 * 5 );
+})
+</script>
+<template>
+<div style="height: 20px;width: 100%" ref="chartRef">
+</div>
+</template>
\ No newline at end of file