From b4c513a58506aad06fe84d9aa84b40f1c533b9b6 Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Mon, 17 Mar 2025 13:11:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=E5=A2=9E=E5=8A=A0=E5=B7=B2?=
 =?UTF-8?q?=E5=85=B3=E6=B3=A8=E8=82=A1=E7=A5=A8=E5=92=8C=E5=9F=BA=E9=87=91?=
 =?UTF-8?q?=E7=9A=84=E5=BF=AB=E9=80=9F=E5=AE=9A=E4=BD=8D=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E9=97=AA=E7=83=81=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 fund.vue 和 stock.vue 中添加了闪烁边框效果，用于突出显示选中的股票和基金- 实现了滚动到指定元素并添加闪烁效果的 blinkBorder函数
- 在选择股票和基金时调用该函数，以达到视觉提示的效果
- 更新了 CSS 样式，添加了 .blink-border 类以实现闪烁动画
---
 backend/data/stock_data_api.go    |  2 +-
 frontend/src/components/fund.vue  | 41 +++++++++++++++++++++--
 frontend/src/components/stock.vue | 55 +++++++++++++++++++++++++++++--
 3 files changed, 93 insertions(+), 5 deletions(-)

diff --git a/backend/data/stock_data_api.go b/backend/data/stock_data_api.go
index 23c7061..973f53a 100644
--- a/backend/data/stock_data_api.go
+++ b/backend/data/stock_data_api.go
@@ -429,7 +429,7 @@ func (receiver StockDataApi) GetStockList(key string) []StockBasic {
 	db.Dao.Model(&models.StockInfoHK{}).Where("name like ? or code like ?", "%"+key+"%", "%"+key+"%").Find(&result3)
 
 	var result4 []models.StockInfoUS
-	db.Dao.Model(&models.StockInfoUS{}).Where("name like ? or code like ?", "%"+key+"%", "%"+key+"%").Find(&result4)
+	db.Dao.Model(&models.StockInfoUS{}).Where("name like ? or code like ? or e_name like ?", "%"+key+"%", "%"+key+"%", "%"+key+"%").Find(&result4)
 
 	for _, item := range result2 {
 		result = append(result, StockBasic{
diff --git a/frontend/src/components/fund.vue b/frontend/src/components/fund.vue
index 35ac351..2dc1170 100644
--- a/frontend/src/components/fund.vue
+++ b/frontend/src/components/fund.vue
@@ -132,6 +132,7 @@ function getFundList(value){
 }
 function onSelectFund(value){
   data.code=value
+  blinkBorder(value)
 }
 function formatterTitle(title){
   return () => h(NEllipsis,{
@@ -156,14 +157,34 @@ function newchart(code,name){
   data.code=code
   data.fenshiURL='https://image.sinajs.cn/newchart/v5/fund/nav/ss/'+code+'.gif'+"?t="+Date.now()
 }
+
+function blinkBorder(findId){
+  // 获取要滚动到的元素
+  const element = document.getElementById(findId);
+  if (element) {
+    // 滚动到该元素
+    element.scrollIntoView({ behavior: 'smooth' });
+    const pelement = document.getElementById(findId +'_gi');
+    if(pelement){
+      // 添加闪烁效果
+      pelement.classList.add('blink-border');
+      // 3秒后移除闪烁效果
+      setTimeout(() => {
+        pelement.classList.remove('blink-border');
+      }, 1000*5);
+    }else{
+      console.error(`Element with ID ${findId}_gi not found`);
+    }
+  }
+}
 </script>
 
 <template>
   <vue-danmaku v-model:danmus="danmus"  style="height:100px; width:100%;z-index: 9;position:absolute; top: 400px; pointer-events: none;" ></vue-danmaku>
   <n-flex justify="start" >
     <n-grid :x-gap="8" :cols="3"  :y-gap="8" >
-      <n-gi v-for="info in  followList" style="margin-left: 2px" onmouseover="this.style.border='1px solid  #3498db' " onmouseout="this.style.border='0px'">
-        <n-card :title="formatterTitle(info.name)">
+      <n-gi :id="info.code+'_gi'" v-for="info in  followList" style="margin-left: 2px" onmouseover="this.style.border='1px solid  #3498db' " onmouseout="this.style.border='0px'">
+        <n-card :id="info.code" :title="formatterTitle(info.name)">
           <template #header-extra>
             <n-tag size="small"  :bordered="false" type="info">{{info.code}}</n-tag>&nbsp;
             <n-tag size="small"  :bordered="false" type="success" @click="unFollow(info.code)"> 取消关注</n-tag>
@@ -228,5 +249,21 @@ function newchart(code,name){
 </template>
 
 <style scoped>
+/* 添加闪烁效果的CSS类 */
+.blink-border {
+  animation: blink-border 1s linear infinite;
+  border: 4px  solid transparent;
+}
 
+@keyframes blink-border {
+  0% {
+    border-color: red;
+  }
+  50% {
+    border-color: transparent;
+  }
+  100% {
+    border-color: red;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/stock.vue b/frontend/src/components/stock.vue
index 5f63d15..1dfab32 100644
--- a/frontend/src/components/stock.vue
+++ b/frontend/src/components/stock.vue
@@ -391,6 +391,40 @@ function getStockList(value){
   if(value&&value.indexOf("-")<=0){
     data.code=value
   }
+
+  console.log("getStockList-options",data.code)
+
+  if(data.code){
+    let findId=data.code
+    if(findId.startsWith("us")){
+      findId="gb_"+ findId.replace("us", "").toLowerCase()
+    }
+    blinkBorder(findId)
+  }
+
+
+
+
+}
+
+function blinkBorder(findId){
+  // 获取要滚动到的元素
+  const element = document.getElementById(findId);
+  if (element) {
+    // 滚动到该元素
+    element.scrollIntoView({ behavior: 'smooth' });
+    const pelement = document.getElementById(findId +'_gi');
+    if(pelement){
+      // 添加闪烁效果
+      pelement.classList.add('blink-border');
+      // 3秒后移除闪烁效果
+      setTimeout(() => {
+        pelement.classList.remove('blink-border');
+      }, 1000*5);
+    }else{
+      console.error(`Element with ID ${findId}_gi not found`);
+    }
+  }
 }
 
 async function updateData(result) {
@@ -783,8 +817,8 @@ function share(code,name){
 <template>
     <vue-danmaku v-model:danmus="danmus"  style="height:100px; width:100%;z-index: 9;position:absolute; top: 400px; pointer-events: none;" ></vue-danmaku>
   <n-grid :x-gap="8" :cols="3"  :y-gap="8" >
-    <n-gi v-for="result in sortedResults" style="margin-left: 2px" onmouseover="this.style.border='1px solid  #3498db' " onmouseout="this.style.border='0px'">
-         <n-card   :data-code="result['股票代码']" :bordered="false" :title="result['股票名称']"   :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
+    <n-gi :id="result['股票代码']+'_gi'"  v-for="result in sortedResults" style="margin-left: 2px;" onmouseover="this.style.border='1px solid  #3498db' " onmouseout="this.style.border='1px'">
+         <n-card  :id="result['股票代码']"  :data-code="result['股票代码']" :bordered="false" :title="result['股票名称']"   :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
            <n-grid :cols="1" :y-gap="6">
              <n-gi>
                <n-text :type="result.type" >
@@ -965,4 +999,21 @@ function share(code,name){
  .md-editor-preview p{
    text-align: left !important;
  }
+ /* 添加闪烁效果的CSS类 */
+ .blink-border {
+   animation: blink-border 1s linear infinite;
+   border: 4px  solid transparent;
+ }
+
+ @keyframes blink-border {
+   0% {
+     border-color: red;
+   }
+   50% {
+     border-color: transparent;
+   }
+   100% {
+     border-color: red;
+   }
+ }
 </style>