优化市场列表显示逻辑，新增符号市场映射和弹出框可见性管理，改进数据更新机制以支持延迟加载和合并市场数据。

src/views/exchangeStock/index.vue

@@ -47,6 +47,8 @@
 		        ref="popover"
 		        width="400"
 		        trigger="click"
+		        @show="popoverVisible = true"
+		        @hide="popoverVisible = false"
 		      >
 		        <div slot="reference">
 		          <!-- {{ activeContract.pair_name }} -->
@@ -56,52 +58,45 @@
 		          </el-button>
 		        </div>
 		        <div
+		          v-if="popoverVisible"
 		          class="markets-pair-list"
 		          style="max-height:300px;overflow:auto;"
 		        >
-		          <template v-for="parent in marketList">
+		          <table class="table">
-		            <div class="px-3 text-primary" :key="parent.coin_name">
+		            <thead>
-		              <!-- {{ parent.coin_name }} -->
+		              <tr class="text-secondary">
-		            </div>
+		                <th class="w-10/24">{{ $t("contract.h5") }}</th>
-		            <table class="table" :key="parent.coin_name + 1">
+		                <th class="w-7/24">{{ $t("contract.g3") }}</th>
-		              <thead>
+		                <th class="w-7/24 text-right">
-		                <tr class="text-secondary">
+		                  {{ $t("contract.h6") }}
-		                  <th class="w-10/24">{{ $t("contract.h5") }}</th>
+		                </th>
-		                  <th class="w-7/24">{{ $t("contract.g3") }}</th>
+		              </tr>
-		                  <th class="w-7/24 text-right">
+		            </thead>
-		                    {{ $t("contract.h6") }}
+		            <tbody>
-		                  </th>
+		              <tr
-		                </tr>
+		                v-for="item in flatMarketList"
-		              </thead>
+		                :key="item.symbol"
-		              <tbody>
+		                :class="{ active: item.symbol == symbol }"
-		                  <!-- @click="symbol = item.symbol" -->
+		                @click="ispopover1(item.symbol)"
-		                <tr
+		              >
-		                  v-for="item in parent.marketInfoList"
+		                <td class="w-10/24">
-		                  :key="item.symbol"
+		                  {{ item.coin_name }}
-		                  :class="{ active: item.symbol == symbol }"
+		                </td>
-		                  @click="ispopover1(item.symbol)"
+		                <td
+		                  class="w-7/24"
+		                  :class="item.increase < 0 ? 'decreace' : 'increace'"
 		                >
-		                  <td class="w-10/24">
+		                  {{ item.price }}
-		                    <!-- {{ item.symbol }}/{{ parent.coin_name }} -->
+		                </td>
-		                    {{ item.coin_name }}
+		                <td
-		                  </td>
+		                  class="w-7/24"
-		                  <td
+		                  :class="item.increase < 0 ? 'decreace' : 'increace'"
-		                    class="w-7/24 "
+		                >
-		                    :class="item.increase < 0 ? 'decreace' : 'increace'"
+		                  {{ item.increaseStr }}
-		                  >
+		                </td>
-		                    {{item.price}}
+		              </tr>
-										  <!-- item.symbol == symbol ? price1 : -->
+		            </tbody>
-		                  </td>
+		          </table>
-		                  <td
-		                    class="w-7/24"
-		                    :class="item.increase < 0 ? 'decreace' : 'increace'"
-		                  >
-		                    {{ item.increaseStr }}
-		                  </td>
-		                </tr>
-		              </tbody>
-		            </table>
-		          </template>
 		        </div>
 		      </el-popover>
 		    </div>
@@ -207,6 +202,10 @@
 					to: '-',
 				},
 				marketList: [], // 在symbol组件中 需要遍历 因此默认数组避免出错
+				symbolMarketMap: {},
+				popoverVisible: false,
+				marketListPending: null,
+				marketListUpdateTimer: null,
 				trade: [],
 				pcBannerList: [],
 				newTrade: null,
@@ -312,15 +311,18 @@
 					};
 				}
 			},
-			activeContract(val) {
+			activeContract() {
-			    let marketList=this.marketList
+				return this.symbolMarketMap[this.symbol] || {};
-			        .map(item => item.marketInfoList)
+			},
-			        .flat()
+			flatMarketList() {
-			        .find(item => item.symbol == this.symbol) || {}
+				if (!this.popoverVisible) return [];
-			        if(val.price){
+				const list = [];
-			            delete marketList.price
+				this.marketList.forEach(group => {
-			        }
+					(group.marketInfoList || []).forEach(item => {
-			    return marketList;
+						list.push(item);
+					});
+				});
+				return list;
 			},
 		},
 
@@ -405,6 +407,59 @@
 			ispopover1(item){
 			    this.symbol=item;
 			},
+			rebuildSymbolMarketMap() {
+				const map = {};
+				this.marketList.forEach(group => {
+					(group.marketInfoList || []).forEach(item => {
+						map[item.symbol] = item;
+					});
+				});
+				this.symbolMarketMap = map;
+			},
+			mergeMarketListInPlace(newData) {
+				const symbolMap = {};
+				newData.forEach(group => {
+					(group.marketInfoList || []).forEach(item => {
+						symbolMap[item.symbol] = item;
+					});
+				});
+				this.marketList.forEach(group => {
+					(group.marketInfoList || []).forEach((item, index) => {
+						const updated = symbolMap[item.symbol];
+						if (updated) {
+							this.$set(group.marketInfoList, index, Object.assign({}, item, updated));
+						}
+					});
+				});
+				this.rebuildSymbolMarketMap();
+			},
+			updateMarketList(data) {
+				if (!data || !data.length) return;
+				if (!this.marketList.length) {
+					this.marketList = data;
+					this.rebuildSymbolMarketMap();
+				} else {
+					this.mergeMarketListInPlace(data);
+				}
+				if (!this.symbol) {
+					this.initDefaultSymbol(data);
+				} else {
+					this.findMarketBySymbol();
+				}
+			},
+			scheduleMarketListUpdate(data) {
+				if (!this.popoverVisible) {
+					this.updateMarketList(data);
+					return;
+				}
+				this.marketListPending = data;
+				if (this.marketListUpdateTimer) return;
+				this.marketListUpdateTimer = setTimeout(() => {
+					this.updateMarketList(this.marketListPending);
+					this.marketListPending = null;
+					this.marketListUpdateTimer = null;
+				}, 300);
+			},
 			initMarket() {
 				// 初始化订阅marketList数据
 				this.ws.send({
@@ -652,13 +707,7 @@
 
 						case "exchangeMarketList":
 
-							this.marketList = data;
+							this.scheduleMarketListUpdate(data);
-
-							if (!this.symbol) {
-								this.initDefaultSymbol(data);
-							} else {
-								this.findMarketBySymbol();
-							}
 
 							break;
 
@@ -708,13 +757,16 @@
 			this.indexList()
 			
 			Market.getstockMarketList().then(data => {
-			    this.marketList = data;
+			    this.updateMarketList(data);
-				this.initDefaultSymbol(data);
 			}).catch(err => {});
 			// this.update();
 		},
 		beforeDestroy() {
 		    clearInterval(this.timer);
+			if (this.marketListUpdateTimer) {
+				clearTimeout(this.marketListUpdateTimer);
+				this.marketListUpdateTimer = null;
+			}
 		},
 
 		mounted() {