feat(frontend):增加已关注股票和基金的快速定位功能，闪烁显示效果

- 在 fund.vue 和 stock.vue 中添加了闪烁边框效果，用于突出显示选中的股票和基金- 实现了滚动到指定元素并添加闪烁效果的 blinkBorder函数
- 在选择股票和基金时调用该函数，以达到视觉提示的效果
- 更新了 CSS 样式，添加了 .blink-border 类以实现闪烁动画

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{

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-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 :title="formatterTitle(info.name)">
+        <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>

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-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   :data-code="result['股票代码']" :bordered="false" :title="result['股票名称']"   :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
+         <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>