From 6f3908221c37a1af8eca4513f134c4fd51908a99 Mon Sep 17 00:00:00 2001
From: yangfan <784310601@qq.com>
Date: Tue, 5 May 2026 14:13:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/stock.js               |   8 +
 src/views/stock/LimitBoard.vue | 852 +++++++++++++++++++++------------
 2 files changed, 554 insertions(+), 306 deletions(-)

diff --git a/src/api/stock.js b/src/api/stock.js
index 9636f4e..95bf6e1 100644
--- a/src/api/stock.js
+++ b/src/api/stock.js
@@ -16,6 +16,14 @@ export function getLimitBoardOverview(params) {
   })
 }
 
+export function getLimitBoardOpenLowerGroups(params) {
+  return request({
+    url: '/limit-board/open-lower-groups',
+    method: 'get',
+    params
+  })
+}
+
 // 新增：获取历史K线
 export function getKlineData(code) {
   return request({
diff --git a/src/views/stock/LimitBoard.vue b/src/views/stock/LimitBoard.vue
index a31f635..bd25d2b 100644
--- a/src/views/stock/LimitBoard.vue
+++ b/src/views/stock/LimitBoard.vue
@@ -9,7 +9,9 @@
       <div class="toolbar-main">
         <div class="toolbar-copy">
           <h1>涨停连板概览</h1>
-          <p>默认展示最新交易日的连板概览，并回看近 30 个交易日的最高连板强度。</p>
+          <p>
+            默认展示最新交易日的连板概览，并回看近 30 个交易日的最高连板强度。
+          </p>
         </div>
         <div class="toolbar-actions">
           <el-date-picker
@@ -21,7 +23,12 @@
             placeholder="选择交易日"
             class="date-picker"
           />
-          <el-button type="primary" :loading="pageLoading" :disabled="!selectedDate" @click="handleQuery">
+          <el-button
+            type="primary"
+            :loading="pageLoading"
+            :disabled="!selectedDate"
+            @click="handleQuery"
+          >
             查询
           </el-button>
         </div>
@@ -30,11 +37,15 @@
       <div class="summary-grid">
         <div class="summary-card">
           <span class="summary-label">查询交易日</span>
-          <strong class="summary-value">{{ overview.trade_date || '--' }}</strong>
+          <strong class="summary-value">{{
+            overview.trade_date || "--"
+          }}</strong>
         </div>
         <div class="summary-card">
           <span class="summary-label">最高连板</span>
-          <strong class="summary-value">{{ summary.max_board_count || 0 }}</strong>
+          <strong class="summary-value">{{
+            summary.max_board_count || 0
+          }}</strong>
         </div>
         <div class="summary-card">
           <span class="summary-label">涨停总数</span>
@@ -66,17 +77,27 @@
     >
       <div class="section-head">
         <div>
-          <h2>涨停分组明细 <span class="detail-date">{{ detailTradeDateLabel }}</span></h2>
+          <h2>
+            涨停分组明细
+            <span class="detail-date">{{ detailTradeDateLabel }}</span>
+          </h2>
           <p v-if="displayDetailGroups.length">{{ detailModeDescription }}</p>
           <p v-else>当日无涨停数据。</p>
         </div>
-        <el-button class="detail-mode-button" type="primary" plain @click="toggleDetailMode">
-          {{ detailModeButtonText }}
-        </el-button>
       </div>
 
+      <el-tabs v-model="activeDetailTab" class="detail-tabs">
+        <el-tab-pane label="按板数" name="board" />
+        <el-tab-pane label="按板块" name="sector" />
+        <el-tab-pane :label="openLowerTabLabel" name="openLower" />
+      </el-tabs>
+
       <div v-if="displayDetailGroups.length" class="group-list">
-        <article v-for="group in displayDetailGroups" :key="group.key" class="group-panel">
+        <article
+          v-for="group in displayDetailGroups"
+          :key="group.key"
+          class="group-panel"
+        >
           <header class="group-head">
             <div class="group-title-wrap">
               <span class="group-badge">{{ group.label }}</span>
@@ -88,18 +109,24 @@
           <div class="stock-grid">
             <button
               v-for="stock in group.stocks"
-              :key="stock.ts_code"
+              :key="stock.ts_code || stock.symbol"
               type="button"
-              class="stock-card"
+              :class="['stock-card', getStockHighlightClass(stock)]"
               @click="openKlineDialog(stock)"
             >
               <div class="stock-head">
                 <span class="stock-name">{{ stock.name }}</span>
-                <span class="stock-status">{{ stock.display_status }}</span>
+                <span class="stock-status">{{ getStockStatus(stock) }}</span>
+              </div>
+              <div
+                v-if="stock.highlight_label"
+                :class="['stock-highlight', getStockHighlightClass(stock)]"
+              >
+                {{ stock.highlight_label }}
               </div>
               <div class="stock-meta">
                 <span>{{ stock.symbol }}</span>
-                <span>{{ stock.market || 'A股' }}</span>
+                <span>{{ stock.market || stock.ak_industry || "A股" }}</span>
               </div>
               <div class="stock-metrics">
                 <span>收盘 {{ formatPrice(stock.close) }}</span>
@@ -107,9 +134,18 @@
                   {{ formatPct(stock.pct_chg) }}
                 </span>
               </div>
-              <div v-if="detailGroupMode === 'sector'" class="stock-limit-time">
+              <div v-if="activeDetailTab === 'sector'" class="stock-limit-time">
                 <span>首次涨停</span>
-                <strong>{{ formatLimitTime(stock.ak_first_limit_time) }}</strong>
+                <strong>{{
+                  formatLimitTime(stock.ak_first_limit_time)
+                }}</strong>
+              </div>
+              <div
+                v-if="activeDetailTab === 'openLower'"
+                class="stock-open-compare"
+              >
+                <span>开盘 {{ formatPrice(stock.open) }}</span>
+                <span>前收 {{ formatPrice(stock.previous_close) }}</span>
               </div>
             </button>
           </div>
@@ -128,406 +164,552 @@
       overflow
       @closed="disposeChart"
     >
-      <div id="limit-board-kline-chart" :style="{ width: '100%', height: `${chartHeight}px` }"></div>
+      <div
+        id="limit-board-kline-chart"
+        :style="{ width: '100%', height: `${chartHeight}px` }"
+      ></div>
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, nextTick } from 'vue'
-import * as echarts from 'echarts'
-import dayjs from 'dayjs'
-import { fetchTradeCalendar } from '@/composables/useTradeCalendar'
-import { getKlineData, getLimitBoardOverview } from '@/api/stock'
+import { computed, onBeforeUnmount, onMounted, ref, nextTick } from "vue";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+import { fetchTradeCalendar } from "@/composables/useTradeCalendar";
+import {
+  getKlineData,
+  getLimitBoardOpenLowerGroups,
+  getLimitBoardOverview,
+} from "@/api/stock";
 
-const PHONE_BREAKPOINT = 820
-const IPAD_MINI_BREAKPOINT = 768
-const TABLET_BREAKPOINT = 1024
+const PHONE_BREAKPOINT = 820;
+const IPAD_MINI_BREAKPOINT = 768;
+const TABLET_BREAKPOINT = 1024;
 
-const viewportWidth = ref(window.innerWidth)
-const selectedDate = ref('')
-const maxTradeDate = ref('')
-const openDates = ref([])
-const openDatesSet = ref(new Set())
-const pageLoading = ref(false)
-const detailLoading = ref(false)
+const viewportWidth = ref(window.innerWidth);
+const selectedDate = ref("");
+const maxTradeDate = ref("");
+const openDates = ref([]);
+const openDatesSet = ref(new Set());
+const pageLoading = ref(false);
+const detailLoading = ref(false);
 const overview = ref({
-  trade_date: '',
+  trade_date: "",
   summary: {
     max_board_count: 0,
     limit_count: 0,
-    group_count: 0
+    group_count: 0,
   },
   recent_max_board_stats: [],
-  groups: []
-})
-const strengthSeries = ref([])
-const detailTradeDate = ref('')
-const detailGroups = ref([])
-const detailGroupMode = ref('board')
+  groups: [],
+});
+const strengthSeries = ref([]);
+const detailTradeDate = ref("");
+const detailGroups = ref([]);
+const activeDetailTab = ref("board");
+const openLowerDetail = ref({
+  trade_date: "",
+  previous_trade_date: "",
+  summary: {
+    limit_count: 0,
+    open_lower_previous_close_count: 0,
+    others_count: 0,
+    first_to_second_board_count: 0,
+    first_second_before_eleven_count: 0,
+  },
+  groups: [],
+});
 
-const dialogVisible = ref(false)
-const dialogTitle = ref('')
-let strengthChartInstance = null
-let chartInstance = null
+const dialogVisible = ref(false);
+const dialogTitle = ref("");
+let strengthChartInstance = null;
+let chartInstance = null;
 
-const summary = computed(() => overview.value.summary || {})
-const isPhoneViewport = computed(() => viewportWidth.value <= PHONE_BREAKPOINT)
-const isIpadMiniViewport = computed(() => viewportWidth.value <= IPAD_MINI_BREAKPOINT)
-const isTabletViewport = computed(() => viewportWidth.value <= TABLET_BREAKPOINT)
-const detailTradeDateLabel = computed(() => detailTradeDate.value || overview.value.trade_date || '--')
-const allDetailStocks = computed(() => detailGroups.value.flatMap((group) => group.stocks || []))
+const summary = computed(() => overview.value.summary || {});
+const isPhoneViewport = computed(() => viewportWidth.value <= PHONE_BREAKPOINT);
+const isIpadMiniViewport = computed(
+  () => viewportWidth.value <= IPAD_MINI_BREAKPOINT,
+);
+const isTabletViewport = computed(
+  () => viewportWidth.value <= TABLET_BREAKPOINT,
+);
+const detailTradeDateLabel = computed(
+  () => detailTradeDate.value || overview.value.trade_date || "--",
+);
+const allDetailStocks = computed(() =>
+  detailGroups.value.flatMap((group) => group.stocks || []),
+);
 const sectorDetailGroups = computed(() => {
-  const groupMap = new Map()
+  const groupMap = new Map();
 
   allDetailStocks.value.forEach((stock) => {
-    const sectorName = stock.ak_industry || stock.market || '未分类'
+    const sectorName = stock.ak_industry || stock.market || "未分类";
     if (!groupMap.has(sectorName)) {
       groupMap.set(sectorName, {
         key: `sector-${sectorName}`,
         label: sectorName,
         count: 0,
-        stocks: []
-      })
+        stocks: [],
+      });
     }
 
-    const sectorGroup = groupMap.get(sectorName)
-    sectorGroup.count += 1
-    sectorGroup.stocks.push(stock)
-  })
+    const sectorGroup = groupMap.get(sectorName);
+    sectorGroup.count += 1;
+    sectorGroup.stocks.push(stock);
+  });
 
   return Array.from(groupMap.values())
     .map((group) => ({
       ...group,
-      maxBoardCount: Math.max(...group.stocks.map((stock) => Number(stock.board_count || 0)), 0),
+      maxBoardCount: Math.max(
+        ...group.stocks.map((stock) => Number(stock.board_count || 0)),
+        0,
+      ),
       stocks: group.stocks.sort((left, right) => {
-        const timeDiff = getLimitTimeOrder(left.ak_first_limit_time) - getLimitTimeOrder(right.ak_first_limit_time)
-        if (timeDiff !== 0) return timeDiff
-        const boardDiff = Number(right.board_count || 0) - Number(left.board_count || 0)
-        if (boardDiff !== 0) return boardDiff
-        const pctDiff = Number(right.pct_chg || 0) - Number(left.pct_chg || 0)
-        if (pctDiff !== 0) return pctDiff
-        return String(left.ts_code || left.symbol || '').localeCompare(String(right.ts_code || right.symbol || ''))
-      })
+        const timeDiff =
+          getLimitTimeOrder(left.ak_first_limit_time) -
+          getLimitTimeOrder(right.ak_first_limit_time);
+        if (timeDiff !== 0) return timeDiff;
+        const boardDiff =
+          Number(right.board_count || 0) - Number(left.board_count || 0);
+        if (boardDiff !== 0) return boardDiff;
+        const pctDiff = Number(right.pct_chg || 0) - Number(left.pct_chg || 0);
+        if (pctDiff !== 0) return pctDiff;
+        return String(left.ts_code || left.symbol || "").localeCompare(
+          String(right.ts_code || right.symbol || ""),
+        );
+      }),
     }))
     .sort((left, right) => {
-      if (right.count !== left.count) return right.count - left.count
-      if (right.maxBoardCount !== left.maxBoardCount) return right.maxBoardCount - left.maxBoardCount
-      return left.label.localeCompare(right.label, 'zh-Hans-CN')
-    })
-})
+      if (right.count !== left.count) return right.count - left.count;
+      if (right.maxBoardCount !== left.maxBoardCount)
+        return right.maxBoardCount - left.maxBoardCount;
+      return left.label.localeCompare(right.label, "zh-Hans-CN");
+    });
+});
 const displayDetailGroups = computed(() => {
-  if (detailGroupMode.value === 'sector') return sectorDetailGroups.value
+  if (activeDetailTab.value === "sector") return sectorDetailGroups.value;
+  if (activeDetailTab.value === "openLower")
+    return openLowerDisplayGroups.value;
   return detailGroups.value.map((group) => ({
     ...group,
-    key: `board-${group.board_count ?? group.label}`
-  }))
-})
-const detailModeDescription = computed(() => (
-  detailGroupMode.value === 'sector'
-    ? '按所属行业或板块汇总展示当日涨停股票。'
-    : '按连板高度从高到低展示当日涨停股票。'
-))
-const detailModeButtonText = computed(() => (
-  detailGroupMode.value === 'sector' ? '切换为按板数' : '切换为按板块'
-))
+    key: `board-${group.board_count ?? group.label}`,
+  }));
+});
+const openLowerDisplayGroups = computed(() =>
+  openLowerDetail.value.groups.map((group) => {
+    if (group.rawKey !== "open_lower_previous_close") return group;
+
+    return {
+      ...group,
+      stocks: [...group.stocks].sort(sortOpenLowerStocks),
+    };
+  }),
+);
+const detailModeDescription = computed(
+  () =>
+    ({
+      board: "按连板高度从高到低展示当日涨停股票。",
+      sector: "按所属行业或板块汇总展示当日涨停股票。",
+      openLower: `仅统计当日涨停且前一交易日也涨停的股票，首二一一红色优先，首板进二板黄色随后，前一交易日 ${openLowerDetail.value.previous_trade_date || "--"}。`,
+    })[activeDetailTab.value],
+);
+const openLowerTabLabel = computed(() => {
+  const lowOpenCount =
+    openLowerDetail.value.summary.open_lower_previous_close_count || 0;
+  const sampleCount = openLowerDetail.value.summary.limit_count || 0;
+  return `连板低开(${lowOpenCount}/${sampleCount})`;
+});
 const dialogWidth = computed(() => {
-  if (isPhoneViewport.value) return '96%'
-  if (isIpadMiniViewport.value) return '94%'
-  if (isTabletViewport.value) return '92%'
-  return '84%'
-})
+  if (isPhoneViewport.value) return "96%";
+  if (isIpadMiniViewport.value) return "94%";
+  if (isTabletViewport.value) return "92%";
+  return "84%";
+});
 const chartHeight = computed(() => {
-  if (isPhoneViewport.value) return 360
-  if (isIpadMiniViewport.value) return 420
-  if (isTabletViewport.value) return 460
-  return 560
-})
+  if (isPhoneViewport.value) return 360;
+  if (isIpadMiniViewport.value) return 420;
+  if (isTabletViewport.value) return 460;
+  return 560;
+});
 
 onMounted(async () => {
-  window.addEventListener('resize', syncViewport)
-  await initializePage()
-})
+  window.addEventListener("resize", syncViewport);
+  await initializePage();
+});
 
 onBeforeUnmount(() => {
-  window.removeEventListener('resize', syncViewport)
-  disposeStrengthChart()
-  disposeChart()
-})
+  window.removeEventListener("resize", syncViewport);
+  disposeStrengthChart();
+  disposeChart();
+});
 
 const syncViewport = () => {
-  viewportWidth.value = window.innerWidth
-  strengthChartInstance?.resize()
-  chartInstance?.resize()
-}
+  viewportWidth.value = window.innerWidth;
+  strengthChartInstance?.resize();
+  chartInstance?.resize();
+};
 
 const initializePage = async () => {
-  pageLoading.value = true
+  pageLoading.value = true;
   try {
-    const calendar = await fetchTradeCalendar()
-    const { open_dates: dates = [], max_date: maxDate = '' } = calendar || {}
+    const calendar = await fetchTradeCalendar();
+    const { open_dates: dates = [], max_date: maxDate = "" } = calendar || {};
 
-    openDates.value = dates
-    openDatesSet.value = new Set(dates)
-    maxTradeDate.value = maxDate
-    selectedDate.value = maxDate
+    openDates.value = dates;
+    openDatesSet.value = new Set(dates);
+    maxTradeDate.value = maxDate;
+    selectedDate.value = maxDate;
 
     if (selectedDate.value) {
-      await fetchOverviewPage(selectedDate.value)
+      await fetchOverviewPage(selectedDate.value);
     }
   } catch (err) {
-    console.error('初始化涨停连板概览页失败', err)
+    console.error("初始化涨停连板概览页失败", err);
   } finally {
-    pageLoading.value = false
+    pageLoading.value = false;
   }
-}
+};
 
 const disableDates = (time) => {
-  const date = dayjs(time).format('YYYY-MM-DD')
-  if (maxTradeDate.value && date > maxTradeDate.value) return true
-  return openDatesSet.value.size > 0 ? !openDatesSet.value.has(date) : false
-}
+  const date = dayjs(time).format("YYYY-MM-DD");
+  if (maxTradeDate.value && date > maxTradeDate.value) return true;
+  return openDatesSet.value.size > 0 ? !openDatesSet.value.has(date) : false;
+};
 
 const fetchOverviewPage = async (tradeDate) => {
-  const currentOverview = await getLimitBoardOverview({ trade_date: tradeDate })
+  const [currentOverview, currentOpenLowerGroups] = await Promise.all([
+    getLimitBoardOverview({ trade_date: tradeDate }),
+    getLimitBoardOpenLowerGroups({ trade_date: tradeDate }),
+  ]);
 
-  overview.value = normalizeOverview(currentOverview, tradeDate)
-  strengthSeries.value = overview.value.recent_max_board_stats
-  detailTradeDate.value = overview.value.trade_date
-  detailGroups.value = overview.value.groups
+  overview.value = normalizeOverview(currentOverview, tradeDate);
+  openLowerDetail.value = normalizeOpenLowerGroups(
+    currentOpenLowerGroups,
+    tradeDate,
+  );
+  strengthSeries.value = overview.value.recent_max_board_stats;
+  detailTradeDate.value = overview.value.trade_date;
+  detailGroups.value = overview.value.groups;
 
-  await nextTick()
-  renderStrengthChart()
-}
+  await nextTick();
+  renderStrengthChart();
+};
 
 const fetchDetailGroups = async (tradeDate) => {
-  if (!tradeDate) return
+  if (!tradeDate) return;
 
-  detailLoading.value = true
+  detailLoading.value = true;
   try {
-    const detailOverview = await getLimitBoardOverview({ trade_date: tradeDate })
-    const normalized = normalizeOverview(detailOverview, tradeDate)
-    detailTradeDate.value = normalized.trade_date
-    detailGroups.value = normalized.groups
+    const [detailOverview, detailOpenLowerGroups] = await Promise.all([
+      getLimitBoardOverview({ trade_date: tradeDate }),
+      getLimitBoardOpenLowerGroups({ trade_date: tradeDate }),
+    ]);
+    const normalized = normalizeOverview(detailOverview, tradeDate);
+    detailTradeDate.value = normalized.trade_date;
+    detailGroups.value = normalized.groups;
+    openLowerDetail.value = normalizeOpenLowerGroups(
+      detailOpenLowerGroups,
+      tradeDate,
+    );
   } catch (err) {
-    console.error('刷新涨停分组明细失败', err)
+    console.error("刷新涨停分组明细失败", err);
   } finally {
-    detailLoading.value = false
+    detailLoading.value = false;
   }
-}
+};
 
-const normalizeOverview = (data, fallbackTradeDate = '') => ({
+const normalizeOverview = (data, fallbackTradeDate = "") => ({
   trade_date: data?.trade_date || fallbackTradeDate,
   summary: {
     max_board_count: data?.summary?.max_board_count || 0,
     limit_count: data?.summary?.limit_count || 0,
-    group_count: data?.summary?.group_count || 0
+    group_count: data?.summary?.group_count || 0,
   },
   recent_max_board_stats: Array.isArray(data?.recent_max_board_stats)
     ? data.recent_max_board_stats.map((item) => ({
-        trade_date: item?.trade_date || '',
-        max_board_count: Number(item?.max_board_count || 0)
+        trade_date: item?.trade_date || "",
+        max_board_count: Number(item?.max_board_count || 0),
       }))
     : [],
-  groups: Array.isArray(data?.groups) ? data.groups : []
-})
+  groups: Array.isArray(data?.groups) ? data.groups : [],
+});
+
+const normalizeOpenLowerGroups = (data, fallbackTradeDate = "") => ({
+  trade_date: data?.trade_date || fallbackTradeDate,
+  previous_trade_date: data?.previous_trade_date || "",
+  previous_two_trade_date: data?.previous_two_trade_date || "",
+  summary: {
+    limit_count: data?.summary?.limit_count || 0,
+    open_lower_previous_close_count:
+      data?.summary?.open_lower_previous_close_count || 0,
+    others_count: data?.summary?.others_count || 0,
+    first_to_second_board_count:
+      data?.summary?.first_to_second_board_count || 0,
+    first_second_before_eleven_count:
+      data?.summary?.first_second_before_eleven_count || 0,
+  },
+  groups: Array.isArray(data?.groups)
+    ? data.groups.map((group) => ({
+        key: `open-lower-${group?.key || group?.label || "group"}`,
+        rawKey: group?.key || "",
+        label: group?.label || "--",
+        count: Number(group?.count || 0),
+        stocks: Array.isArray(group?.stocks) ? group.stocks : [],
+      }))
+    : [],
+});
 
 const handleQuery = async () => {
-  if (!selectedDate.value) return
+  if (!selectedDate.value) return;
 
-  pageLoading.value = true
+  pageLoading.value = true;
   try {
-    await fetchOverviewPage(selectedDate.value)
+    await fetchOverviewPage(selectedDate.value);
   } catch (err) {
-    console.error('查询涨停连板概览失败', err)
+    console.error("查询涨停连板概览失败", err);
   } finally {
-    pageLoading.value = false
+    pageLoading.value = false;
   }
-}
+};
 
-const formatPrice = (value) => Number(value ?? 0).toFixed(2)
+const formatPrice = (value) => {
+  if (value === null || value === undefined || value === "") return "--";
+  return Number(value).toFixed(2);
+};
 
 const formatPct = (value) => {
-  const amount = Number(value ?? 0)
-  return `${amount > 0 ? '+' : ''}${amount.toFixed(2)}%`
-}
+  const amount = Number(value ?? 0);
+  return `${amount > 0 ? "+" : ""}${amount.toFixed(2)}%`;
+};
 
 const getLimitTimeOrder = (value) => {
-  const matched = parseLimitTime(value)
-  if (!matched) return Number.POSITIVE_INFINITY
-  const { hour, minute, second = '0' } = matched
-  return Number(hour) * 3600 + Number(minute) * 60 + Number(second)
-}
+  const matched = parseLimitTime(value);
+  if (!matched) return Number.POSITIVE_INFINITY;
+  const { hour, minute, second = "0" } = matched;
+  return Number(hour) * 3600 + Number(minute) * 60 + Number(second);
+};
 
 const formatLimitTime = (value) => {
-  const matched = parseLimitTime(value)
-  if (!matched) return '--'
-  const { hour, minute, second } = matched
-  return `${hour.padStart(2, '0')}:${minute}${second ? `:${second}` : ''}`
-}
+  const matched = parseLimitTime(value);
+  if (!matched) return "--";
+  const { hour, minute, second } = matched;
+  return `${hour.padStart(2, "0")}:${minute}${second ? `:${second}` : ""}`;
+};
 
 const parseLimitTime = (value) => {
-  if (value === null || value === undefined || value === '') return null
+  if (value === null || value === undefined || value === "") return null;
 
-  const rawValue = String(value).trim()
-  const colonMatched = rawValue.match(/(\d{1,2}):(\d{2})(?::(\d{2}))?/)
+  const rawValue = String(value).trim();
+  const colonMatched = rawValue.match(/(\d{1,2}):(\d{2})(?::(\d{2}))?/);
   if (colonMatched) {
-    const [, hour, minute, second] = colonMatched
-    return { hour, minute, second }
+    const [, hour, minute, second] = colonMatched;
+    return { hour, minute, second };
   }
 
-  const digits = rawValue.replace(/\D/g, '')
-  if (!digits) return null
+  const digits = rawValue.replace(/\D/g, "");
+  if (!digits) return null;
 
   if (digits.length <= 4) {
-    const normalized = digits.padStart(4, '0')
+    const normalized = digits.padStart(4, "0");
     return {
       hour: normalized.slice(0, 2),
       minute: normalized.slice(2, 4),
-      second: ''
-    }
+      second: "",
+    };
   }
 
-  const normalized = digits.padStart(6, '0').slice(0, 6)
+  const normalized = digits.padStart(6, "0").slice(0, 6);
   return {
     hour: normalized.slice(0, 2),
     minute: normalized.slice(2, 4),
-    second: normalized.slice(4, 6)
-  }
-}
+    second: normalized.slice(4, 6),
+  };
+};
 
 const formatVolume = (value) => {
-  const amount = Number(value ?? 0)
-  if (amount >= 100000000) return `${(amount / 100000000).toFixed(2)}亿`
-  if (amount >= 10000) return `${(amount / 10000).toFixed(2)}万`
-  return amount.toLocaleString('zh-CN')
-}
+  const amount = Number(value ?? 0);
+  if (amount >= 100000000) return `${(amount / 100000000).toFixed(2)}亿`;
+  if (amount >= 10000) return `${(amount / 10000).toFixed(2)}万`;
+  return amount.toLocaleString("zh-CN");
+};
 
-const toggleDetailMode = () => {
-  detailGroupMode.value = detailGroupMode.value === 'sector' ? 'board' : 'sector'
-}
+const getOpenLowerCategoryRank = (stock) => {
+  if (
+    stock?.is_first_second_before_eleven ||
+    stock?.highlight_label === "首二一一"
+  )
+    return 0;
+  if (
+    stock?.is_first_to_second_board ||
+    stock?.highlight_label === "首板进二板"
+  )
+    return 1;
+  return 2;
+};
+
+const sortOpenLowerStocks = (left, right) => {
+  const categoryDiff =
+    getOpenLowerCategoryRank(left) - getOpenLowerCategoryRank(right);
+  if (categoryDiff !== 0) return categoryDiff;
+
+  const pctDiff = Number(right.pct_chg || 0) - Number(left.pct_chg || 0);
+  if (pctDiff !== 0) return pctDiff;
+  return String(left.ts_code || left.symbol || "").localeCompare(
+    String(right.ts_code || right.symbol || ""),
+  );
+};
+
+const getStockHighlightClass = (stock) => {
+  if (
+    stock?.is_first_second_before_eleven ||
+    stock?.highlight_label === "首二一一"
+  )
+    return "is-priority-red";
+  if (
+    stock?.is_first_to_second_board ||
+    stock?.highlight_label === "首板进二板"
+  )
+    return "is-priority-yellow";
+  return "";
+};
+
+const getStockStatus = (stock) => {
+  if (stock?.display_status) return stock.display_status;
+  if (stock?.ak_limit_up_stat) return stock.ak_limit_up_stat;
+  if (stock?.ak_limit_up_days) return `${stock.ak_limit_up_days}板`;
+  if (stock?.board_count) return `${stock.board_count}板`;
+  return "涨停";
+};
 
 const disposeStrengthChart = () => {
-  if (!strengthChartInstance) return
-  const chartDom = strengthChartInstance.getDom()
+  if (!strengthChartInstance) return;
+  const chartDom = strengthChartInstance.getDom();
   if (chartDom?._strengthClickHandler) {
-    chartDom.removeEventListener('click', chartDom._strengthClickHandler)
-    delete chartDom._strengthClickHandler
+    chartDom.removeEventListener("click", chartDom._strengthClickHandler);
+    delete chartDom._strengthClickHandler;
   }
-  strengthChartInstance.dispose()
-  strengthChartInstance = null
-}
+  strengthChartInstance.dispose();
+  strengthChartInstance = null;
+};
 
 const triggerDetailForDate = (tradeDate) => {
-  if (!tradeDate || tradeDate === detailTradeDate.value) return
-  fetchDetailGroups(tradeDate)
-}
+  if (!tradeDate || tradeDate === detailTradeDate.value) return;
+  fetchDetailGroups(tradeDate);
+};
 
 const triggerDetailForIndex = (dataIndex) => {
-  if (!Number.isInteger(dataIndex) || dataIndex < 0 || dataIndex >= strengthSeries.value.length) return
-  const clickedDate = strengthSeries.value[dataIndex]?.trade_date
-  triggerDetailForDate(clickedDate)
-}
+  if (
+    !Number.isInteger(dataIndex) ||
+    dataIndex < 0 ||
+    dataIndex >= strengthSeries.value.length
+  )
+    return;
+  const clickedDate = strengthSeries.value[dataIndex]?.trade_date;
+  triggerDetailForDate(clickedDate);
+};
 
 const renderStrengthChart = () => {
-  const chartDom = document.getElementById('strength-line-chart')
-  if (!chartDom) return
+  const chartDom = document.getElementById("strength-line-chart");
+  if (!chartDom) return;
 
-  disposeStrengthChart()
-  strengthChartInstance = echarts.init(chartDom)
+  disposeStrengthChart();
+  strengthChartInstance = echarts.init(chartDom);
 
   strengthChartInstance.setOption({
     animation: false,
     tooltip: {
-      trigger: 'item',
+      trigger: "item",
       axisPointer: {
-        type: 'shadow',
+        type: "shadow",
         lineStyle: {
-          color: '#8db4e8',
-          width: 1
-        }
+          color: "#8db4e8",
+          width: 1,
+        },
       },
       formatter(point) {
-        const axisLabel = point?.name || point?.axisValueLabel || point?.axisValue || '--'
-        const boardCount = Number(point?.value ?? point?.data ?? 0)
+        const axisLabel =
+          point?.name || point?.axisValueLabel || point?.axisValue || "--";
+        const boardCount = Number(point?.value ?? point?.data ?? 0);
         return `
           <div style="font-size:12px; min-width:128px;">
             <b>${axisLabel}</b><br/>
             最高连板数: ${boardCount}
-          </div>`
-      }
+          </div>`;
+      },
     },
     grid: { left: 42, right: 18, top: 30, bottom: 36 },
     xAxis: {
-      type: 'category',
+      type: "category",
       boundaryGap: false,
       data: strengthSeries.value.map((item) => item.trade_date),
       axisLabel: {
         formatter(value) {
-          return dayjs(value).format('MM/DD')
-        }
-      }
+          return dayjs(value).format("MM/DD");
+        },
+      },
     },
     yAxis: {
-      type: 'value',
+      type: "value",
       minInterval: 1,
       splitLine: {
         lineStyle: {
-          color: '#e8eef6'
-        }
-      }
+          color: "#e8eef6",
+        },
+      },
     },
     series: [
       {
-        name: '近30日强度',
-        type: 'bar',
+        name: "近30日强度",
+        type: "bar",
         barMaxWidth: 22,
-        cursor: 'pointer',
+        cursor: "pointer",
         itemStyle: {
-          color: '#6ea2e7',
-          borderRadius: [6, 6, 0, 0]
+          color: "#6ea2e7",
+          borderRadius: [6, 6, 0, 0],
         },
         label: {
           show: true,
-          position: 'top',
-          color: '#365c89',
+          position: "top",
+          color: "#365c89",
           fontSize: 12,
           fontWeight: 600,
           formatter({ value }) {
-            return Number(value ?? 0)
-          }
+            return Number(value ?? 0);
+          },
         },
         emphasis: {
           itemStyle: {
-            color: '#3d7edb'
-          }
+            color: "#3d7edb",
+          },
         },
         data: strengthSeries.value.map((item) => item.max_board_count),
-        z: 1
-      }
-    ]
-  })
+        z: 1,
+      },
+    ],
+  });
 
-  strengthChartInstance.off('click')
-  strengthChartInstance.on('click', (params) => {
-    triggerDetailForIndex(params.dataIndex)
-  })
+  strengthChartInstance.off("click");
+  strengthChartInstance.on("click", (params) => {
+    triggerDetailForIndex(params.dataIndex);
+  });
 
-  strengthChartInstance.resize()
-}
+  strengthChartInstance.resize();
+};
 
 const disposeChart = () => {
-  if (!chartInstance) return
-  chartInstance.dispose()
-  chartInstance = null
-}
+  if (!chartInstance) return;
+  chartInstance.dispose();
+  chartInstance = null;
+};
 
 const openKlineDialog = async (stock) => {
-  dialogTitle.value = `${stock.name} (${stock.ts_code || stock.symbol}) - K线走势`
-  dialogVisible.value = true
+  dialogTitle.value = `${stock.name} (${stock.ts_code || stock.symbol}) - K线走势`;
+  dialogVisible.value = true;
 
   try {
-    const rawData = await getKlineData(stock.ts_code || stock.symbol)
+    const rawData = await getKlineData(stock.ts_code || stock.symbol);
     const klineData = Array.isArray(rawData)
       ? rawData.map((item) => ({
           trade_date: item.trade_date,
@@ -536,42 +718,46 @@ const openKlineDialog = async (stock) => {
           low: item.low,
           high: item.high,
           pct_chg: item.pct_chg,
-          vol: item.vol
+          vol: item.vol,
         }))
-      : []
+      : [];
 
-    await nextTick()
-    const chartDom = document.getElementById('limit-board-kline-chart')
-    if (!chartDom) return
+    await nextTick();
+    const chartDom = document.getElementById("limit-board-kline-chart");
+    if (!chartDom) return;
 
-    disposeChart()
-    chartInstance = echarts.init(chartDom)
+    disposeChart();
+    chartInstance = echarts.init(chartDom);
 
-    const dates = klineData.map((item) => dayjs(item.trade_date).format('YYYY-MM-DD'))
+    const dates = klineData.map((item) =>
+      dayjs(item.trade_date).format("YYYY-MM-DD"),
+    );
     const values = klineData.map((item) => [
       item.open,
       item.close,
       item.low,
       item.high,
-      item.pct_chg
-    ])
+      item.pct_chg,
+    ]);
     const volumes = klineData.map((item) => ({
       value: Number(item.vol ?? 0),
       itemStyle: {
-        color: Number(item.pct_chg || 0) >= 0 ? '#e85d75' : '#45b37b'
-      }
-    }))
+        color: Number(item.pct_chg || 0) >= 0 ? "#e85d75" : "#45b37b",
+      },
+    }));
 
     chartInstance.setOption({
       animation: false,
       tooltip: {
-        trigger: 'axis',
-        axisPointer: { type: 'cross' },
+        trigger: "axis",
+        axisPointer: { type: "cross" },
         formatter(params) {
-          const point = params.find((item) => item.seriesType === 'candlestick') || params[0]
-          const currentItem = klineData[point.dataIndex] || {}
-          const pct = Number(currentItem.pct_chg || 0)
-          const color = pct >= 0 ? '#d9485f' : '#2f9e62'
+          const point =
+            params.find((item) => item.seriesType === "candlestick") ||
+            params[0];
+          const currentItem = klineData[point.dataIndex] || {};
+          const pct = Number(currentItem.pct_chg || 0);
+          const color = pct >= 0 ? "#d9485f" : "#2f9e62";
           return `
             <div style="font-size:12px; min-width:128px;">
               <b>${point.name}</b><hr style="margin:5px 0;border:none;border-top:1px solid #eee"/>
@@ -581,28 +767,34 @@ const openKlineDialog = async (stock) => {
               最低价: ${formatPrice(currentItem.low)}<br/>
               最高价: ${formatPrice(currentItem.high)}<br/>
               成交量: ${formatVolume(currentItem.vol)}
-            </div>`
-        }
+            </div>`;
+        },
       },
       axisPointer: {
-        link: [{ xAxisIndex: 'all' }]
+        link: [{ xAxisIndex: "all" }],
       },
       grid: [
-        { left: 56, right: 28, top: 42, height: '58%' },
-        { left: 56, right: 28, top: '72%', height: '14%' }
+        { left: 56, right: 28, top: 42, height: "58%" },
+        { left: 56, right: 28, top: "72%", height: "14%" },
       ],
       xAxis: [
-        { type: 'category', data: dates, scale: true, boundaryGap: false, axisLine: { onZero: false } },
         {
-          type: 'category',
+          type: "category",
+          data: dates,
+          scale: true,
+          boundaryGap: false,
+          axisLine: { onZero: false },
+        },
+        {
+          type: "category",
           gridIndex: 1,
           data: dates,
           scale: true,
           boundaryGap: false,
           axisLine: { onZero: false },
           axisLabel: { show: false },
-          axisTick: { show: false }
-        }
+          axisTick: { show: false },
+        },
       ],
       yAxis: [
         { scale: true, splitArea: { show: true } },
@@ -612,49 +804,49 @@ const openKlineDialog = async (stock) => {
           splitNumber: 2,
           axisLabel: {
             formatter(value) {
-              return formatVolume(value)
-            }
+              return formatVolume(value);
+            },
           },
           splitLine: {
             lineStyle: {
-              color: '#eef2f7'
-            }
-          }
-        }
+              color: "#eef2f7",
+            },
+          },
+        },
       ],
       dataZoom: [
-        { type: 'inside', xAxisIndex: [0, 1], start: 80, end: 100 },
-        { show: true, type: 'slider', xAxisIndex: [0, 1], top: '90%' }
+        { type: "inside", xAxisIndex: [0, 1], start: 80, end: 100 },
+        { show: true, type: "slider", xAxisIndex: [0, 1], top: "90%" },
       ],
       series: [
         {
-          name: '日K',
-          type: 'candlestick',
+          name: "日K",
+          type: "candlestick",
           xAxisIndex: 0,
           yAxisIndex: 0,
           data: values,
           itemStyle: {
-            color: '#e85d75',
-            color0: '#45b37b',
-            borderColor: '#e85d75',
-            borderColor0: '#45b37b'
-          }
+            color: "#e85d75",
+            color0: "#45b37b",
+            borderColor: "#e85d75",
+            borderColor0: "#45b37b",
+          },
         },
         {
-          name: '成交量',
-          type: 'bar',
+          name: "成交量",
+          type: "bar",
           xAxisIndex: 1,
           yAxisIndex: 1,
           barMaxWidth: 12,
-          data: volumes
-        }
-      ]
-    })
-    chartInstance.resize()
+          data: volumes,
+        },
+      ],
+    });
+    chartInstance.resize();
   } catch (err) {
-    console.error('加载K线详情失败', err)
+    console.error("加载K线详情失败", err);
   }
-}
+};
 </script>
 
 <style scoped>
@@ -783,15 +975,20 @@ const openKlineDialog = async (stock) => {
   margin-bottom: 16px;
 }
 
-.detail-mode-button {
-  flex-shrink: 0;
-}
-
 .strength-chart {
   width: 100%;
   height: 280px;
 }
 
+.detail-tabs {
+  flex: 0 0 auto;
+  margin-bottom: 12px;
+}
+
+:deep(.detail-tabs .el-tabs__header) {
+  margin-bottom: 0;
+}
+
 .group-list {
   flex: 1 1 auto;
   display: flex;
@@ -878,7 +1075,10 @@ const openKlineDialog = async (stock) => {
   text-align: left;
   background: #ffffff;
   cursor: pointer;
-  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  transition:
+    transform 0.18s ease,
+    box-shadow 0.18s ease,
+    border-color 0.18s ease;
 }
 
 .stock-card:hover {
@@ -887,6 +1087,16 @@ const openKlineDialog = async (stock) => {
   box-shadow: 0 8px 22px rgba(58, 105, 165, 0.12);
 }
 
+.stock-card.is-priority-red {
+  border-color: #ef7a7a;
+  background: #fff4f4;
+}
+
+.stock-card.is-priority-yellow {
+  border-color: #f3b35c;
+  background: #fffaf2;
+}
+
 .stock-head,
 .stock-meta,
 .stock-metrics {
@@ -916,9 +1126,33 @@ const openKlineDialog = async (stock) => {
   background: #fff1d6;
 }
 
+.stock-highlight {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 9px;
+  margin-bottom: 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.stock-highlight.is-priority-red {
+  color: #b42318;
+  background: #ffe2e2;
+  border: 1px solid #f4a4a4;
+}
+
+.stock-highlight.is-priority-yellow {
+  color: #9b4d00;
+  background: #fff0d6;
+  border: 1px solid #f7c77d;
+}
+
 .stock-meta,
 .stock-metrics,
-.stock-limit-time {
+.stock-limit-time,
+.stock-open-compare {
   color: #607289;
   font-size: 13px;
 }
@@ -931,7 +1165,8 @@ const openKlineDialog = async (stock) => {
   margin-bottom: 10px;
 }
 
-.stock-limit-time {
+.stock-limit-time,
+.stock-open-compare {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -946,6 +1181,11 @@ const openKlineDialog = async (stock) => {
   color: #7a8aa1;
 }
 
+.stock-open-compare span {
+  color: #526982;
+  font-weight: 600;
+}
+
 .stock-limit-time strong {
   color: #22456f;
   font-size: 14px;