新增历史二板页面

README.md

@@ -1,3 +1,15 @@
 # Vue 3 + Vite
 
-# 运行项目使用：npm run dev
+# 运行项目使用
+
+先启动后端服务，默认接口地址为 `http://127.0.0.1:18080`。
+
+```sh
+npm run dev
+```
+
+如果后端端口或地址不同，可以启动前端时覆盖代理目标：
+
+```sh
+VITE_API_PROXY_TARGET=http://127.0.0.1:18080 npm run dev
+```

src/api/stock.js

@@ -48,6 +48,22 @@ export function getSecondBoardCalendar(params) {
   })
 }
 
+export function getSecondBoardProfitSummary(params) {
+  return request({
+    url: '/limit-board/second-board-profit-summary',
+    method: 'get',
+    params
+  })
+}
+
+export function getSecondBoardProfitDetail(params) {
+  return request({
+    url: '/limit-board/second-board-profit-detail',
+    method: 'get',
+    params
+  })
+}
+
 export function getLimitBoardBreakNextPerformance(params) {
   return request({
     url: '/limit-board/break-next-performance',

src/components/TradeDateRangePicker.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-form-item :label="startLabel">
+    <el-date-picker
+      v-model="localStartDate"
+      type="date"
+      value-format="YYYY-MM-DD"
+      :disabled-date="disableDates"
+      :editable="false"
+      :placeholder="startPlaceholder"
+      class="trade-date-input"
+    />
+  </el-form-item>
+  <el-form-item :label="endLabel">
+    <el-date-picker
+      v-model="localEndDate"
+      type="date"
+      value-format="YYYY-MM-DD"
+      :disabled-date="disableDates"
+      :editable="false"
+      :placeholder="endPlaceholder"
+      class="trade-date-input"
+    />
+  </el-form-item>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import dayjs from "dayjs";
+import { fetchTradeCalendar } from "@/composables/useTradeCalendar";
+
+defineOptions({
+  name: "TradeDateRangePicker",
+});
+
+const props = defineProps({
+  startDate: {
+    type: String,
+    default: "",
+  },
+  endDate: {
+    type: String,
+    default: "",
+  },
+  startLabel: {
+    type: String,
+    default: "T日起",
+  },
+  endLabel: {
+    type: String,
+    default: "T日止",
+  },
+  startPlaceholder: {
+    type: String,
+    default: "选择起始日",
+  },
+  endPlaceholder: {
+    type: String,
+    default: "选择结束日",
+  },
+});
+
+const emit = defineEmits([
+  "update:startDate",
+  "update:endDate",
+  "calendar-ready",
+]);
+
+const openDatesSet = ref(new Set());
+const maxTradeDate = ref("");
+
+const localStartDate = computed({
+  get: () => props.startDate,
+  set: (value) => emit("update:startDate", value),
+});
+
+const localEndDate = computed({
+  get: () => props.endDate,
+  set: (value) => emit("update:endDate", value),
+});
+
+onMounted(async () => {
+  try {
+    const calendar = await fetchTradeCalendar();
+    const { open_dates: openDates = [], max_date: maxDate = "" } = calendar || {};
+
+    openDatesSet.value = new Set(openDates);
+    maxTradeDate.value = maxDate;
+    emit("calendar-ready", {
+      open_dates: openDates,
+      max_date: maxDate,
+    });
+  } catch (err) {
+    console.error("加载交易日历失败", err);
+    emit("calendar-ready", {
+      open_dates: [],
+      max_date: "",
+    });
+  }
+});
+
+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;
+};
+</script>
+
+<style scoped>
+.trade-date-input {
+  width: 156px;
+}
+
+@media (max-width: 820px) {
+  .trade-date-input {
+    width: 100%;
+  }
+}
+</style>

src/router/index.js

@@ -11,6 +11,12 @@ const routes = [
     component: () => import('@/views/stock/SecondBoardCalendar.vue'),
     meta: { title: '二板日历', icon: 'Calendar' }
   },
+  {
+    path: '/stock/second-board-profit-summary',
+    name: 'StockSecondBoardProfitSummary',
+    component: () => import('@/views/stock/SecondBoardProfitSummary.vue'),
+    meta: { title: '二板获利综合', icon: 'TrendCharts' }
+  },
   {
     path: '/stock/second-board',
     name: 'StockSecondBoard',

src/views/stock/BreakNextPerformance.vue

@@ -33,11 +33,9 @@
         </el-form-item>
         <el-form-item label="筛选">
           <div class="checkbox-group">
-            <el-checkbox v-model="tOpenGainLt101">
+            <el-checkbox v-model="tOpenGainLt101"> T开盘小于1% </el-checkbox>
-              T开盘小于1%
-            </el-checkbox>
             <el-checkbox v-model="breakTimeBefore1100">
-              11点前炸板
+              10点前炸板
             </el-checkbox>
           </div>
         </el-form-item>
@@ -124,7 +122,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatSignedPct(row.t_pct_chg) }}</template>
+            <template #default="{ row }">{{
+              formatSignedPct(row.t_pct_chg)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="t_open_gain_lt_101"
@@ -154,7 +154,7 @@
           </el-table-column>
           <el-table-column
             prop="break_time_before_1100"
-            label="11点前炸板"
+            label="10点前炸板"
             width="104"
             align="center"
             sortable
@@ -193,7 +193,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatSignedPct(row.next_high_profit_pct) }}</template>
+            <template #default="{ row }">{{
+              formatSignedPct(row.next_high_profit_pct)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="next_open_pct_chg"
@@ -202,7 +204,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatSignedPct(row.next_open_pct_chg) }}</template>
+            <template #default="{ row }">{{
+              formatSignedPct(row.next_open_pct_chg)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="market"
@@ -225,7 +229,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.t_open) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.t_open)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="t_open_pct_chg"
@@ -234,7 +240,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatSignedPct(row.t_open_pct_chg) }}</template>
+            <template #default="{ row }">{{
+              formatSignedPct(row.t_open_pct_chg)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="t_high"
@@ -243,7 +251,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.t_high) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.t_high)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="t_close"
@@ -252,7 +262,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.t_close) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.t_close)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="has_tushare_break_data"
@@ -278,7 +290,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.next_open) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.next_open)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="next_high"
@@ -287,7 +301,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.next_high) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.next_high)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="next_low"
@@ -296,7 +312,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.next_low) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.next_low)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="next_close"
@@ -305,7 +323,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatPrice(row.next_close) }}</template>
+            <template #default="{ row }">{{
+              formatPrice(row.next_close)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="next_low_loss_pct"
@@ -314,7 +334,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatSignedPct(row.next_low_loss_pct) }}</template>
+            <template #default="{ row }">{{
+              formatSignedPct(row.next_low_loss_pct)
+            }}</template>
           </el-table-column>
           <el-table-column
             prop="next_close_pct_chg"
@@ -323,7 +345,9 @@
             align="right"
             sortable
           >
-            <template #default="{ row }">{{ formatSignedPct(row.next_close_pct_chg) }}</template>
+            <template #default="{ row }">{{
+              formatSignedPct(row.next_close_pct_chg)
+            }}</template>
           </el-table-column>
         </el-table>
       </div>
@@ -390,7 +414,9 @@ const paginationLayout = computed(() =>
     : "total, sizes, prev, pager, next, jumper",
 );
 
-const paginationPagerCount = computed(() => (viewportWidth.value <= 820 ? 5 : 7));
+const paginationPagerCount = computed(() =>
+  viewportWidth.value <= 820 ? 5 : 7,
+);
 
 onMounted(async () => {
   window.addEventListener("resize", syncViewport);

src/views/stock/SecondBoardCalendar.vue

@@ -77,11 +77,21 @@
               </div>
               <div class="metric-row break">
                 <span>炸板</span>
-                <strong>{{ formatRatio(day.stat.break_next_profit_count, day.stat.break_count) }}</strong>
+                <strong>{{
+                  formatRatio(
+                    day.stat.break_next_profit_count,
+                    getProfitDataCount(day.stat, "break"),
+                  )
+                }}</strong>
               </div>
               <div class="metric-row limit">
                 <span>涨停板</span>
-                <strong>{{ formatRatio(day.stat.limit_next_profit_count, day.stat.limit_count) }}</strong>
+                <strong>{{
+                  formatRatio(
+                    day.stat.limit_next_profit_count,
+                    getProfitDataCount(day.stat, "limit"),
+                  )
+                }}</strong>
               </div>
             </div>
 
@@ -123,7 +133,7 @@
           <strong>{{
             formatRatio(
               selectedDayStat?.limit_next_profit_count,
-              selectedDayStat?.limit_count,
+              getProfitDataCount(selectedDayStat, "limit"),
             )
           }}</strong>
         </div>
@@ -132,59 +142,70 @@
           <strong>{{
             formatRatio(
               selectedDayStat?.break_next_profit_count,
-              selectedDayStat?.break_count,
+              getProfitDataCount(selectedDayStat, "break"),
             )
           }}</strong>
         </div>
       </div>
 
       <el-tabs v-model="activeDetailTab" class="detail-tabs">
-        <el-tab-pane :label="`涨停板(${limitStocks.length})`" name="limit">
+        <el-tab-pane
-          <el-table :data="limitStocks" border stripe max-height="520">
+          v-for="tab in detailTabs"
-            <el-table-column prop="name" label="股票简称" min-width="120" />
+          :key="tab.name"
-            <el-table-column prop="ts_code" label="股票代码" min-width="120" />
+          :label="`${tab.label}(${tab.stocks.length})`"
-            <el-table-column prop="industry" label="行业" min-width="120" show-overflow-tooltip />
+          :name="tab.name"
-            <el-table-column label="T日最高" width="100" align="right">
+        >
+          <el-table
+            :data="tab.stocks"
+            border
+            stripe
+            max-height="520"
+            class="detail-stock-table"
+            :default-sort="defaultDetailSort"
+            :row-class-name="getStockRowClassName"
+          >
+            <el-table-column v-if="tab.showStatus" prop="status" label="状态" width="86" align="center" sortable>
+              <template #default="{ row }">
+                <span :class="['stock-status', row.status === 'break' ? 'break' : 'limit']">
+                  {{ formatStatus(row.status) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="股票简称" min-width="120" sortable />
+            <el-table-column prop="ts_code" label="股票代码" min-width="120" sortable />
+            <el-table-column prop="industry" label="行业" min-width="120" sortable show-overflow-tooltip />
+            <el-table-column
+              prop="first_limit_time"
+              label="首次涨停时间"
+              width="130"
+              align="center"
+              sortable
+              :sort-method="sortLimitTimeColumn"
+            >
+              <template #default="{ row }">
+                {{ formatLimitTime(row.first_limit_time) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="open_times" label="炸板次数" width="100" align="center" sortable>
+              <template #default="{ row }">
+                {{ formatOpenTimes(row.open_times) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="t_high" label="T日最高" width="100" align="right" sortable>
               <template #default="{ row }">{{ formatPrice(row.t_high) }}</template>
             </el-table-column>
-            <el-table-column label="T日收盘" width="100" align="right">
+            <el-table-column prop="t_close" label="T日收盘" width="100" align="right" sortable>
               <template #default="{ row }">{{ formatPrice(row.t_close) }}</template>
             </el-table-column>
-            <el-table-column label="T+1最高" width="100" align="right">
+            <el-table-column prop="next_high" label="T+1最高" width="100" align="right" sortable>
               <template #default="{ row }">{{ formatPrice(row.next_high) }}</template>
             </el-table-column>
-            <el-table-column label="T+1盈利" width="100" align="center">
+            <el-table-column prop="next_intraday_profitable" label="T+1盈利" width="100" align="center" sortable>
               <template #default="{ row }">
                 {{ formatProfitFlag(row.next_intraday_profitable) }}
               </template>
             </el-table-column>
-            <el-table-column label="最高收益" width="110" align="right">
+            <el-table-column prop="next_high_profit_pct" label="最高收益" width="110" align="right" sortable>
-              <template #default="{ row }">
-                {{ formatSignedRate(row.next_high_profit_pct) }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-tab-pane>
-        <el-tab-pane :label="`炸板(${breakStocks.length})`" name="break">
-          <el-table :data="breakStocks" border stripe max-height="520">
-            <el-table-column prop="name" label="股票简称" min-width="120" />
-            <el-table-column prop="ts_code" label="股票代码" min-width="120" />
-            <el-table-column prop="industry" label="行业" min-width="120" show-overflow-tooltip />
-            <el-table-column label="T日最高" width="100" align="right">
-              <template #default="{ row }">{{ formatPrice(row.t_high) }}</template>
-            </el-table-column>
-            <el-table-column label="T日收盘" width="100" align="right">
-              <template #default="{ row }">{{ formatPrice(row.t_close) }}</template>
-            </el-table-column>
-            <el-table-column label="T+1最高" width="100" align="right">
-              <template #default="{ row }">{{ formatPrice(row.next_high) }}</template>
-            </el-table-column>
-            <el-table-column label="T+1盈利" width="100" align="center">
-              <template #default="{ row }">
-                {{ formatProfitFlag(row.next_intraday_profitable) }}
-              </template>
-            </el-table-column>
-            <el-table-column label="最高收益" width="110" align="right">
               <template #default="{ row }">
                 {{ formatSignedRate(row.next_high_profit_pct) }}
               </template>
@@ -220,6 +241,7 @@ const calendarStats = ref([]);
 const detailVisible = ref(false);
 const selectedDay = ref(null);
 const activeDetailTab = ref("limit");
+const defaultDetailSort = { prop: "first_limit_time", order: "ascending" };
 
 const monthStart = computed(() =>
   selectedMonth.value
@@ -246,12 +268,43 @@ const detailDialogTitle = computed(() => {
 const detailStocks = computed(() =>
   Array.isArray(selectedDayStat.value?.stocks) ? selectedDayStat.value.stocks : [],
 );
+const totalStocks = computed(() => {
+  const stocks = Array.isArray(selectedDayStat.value?.total_stocks)
+    ? selectedDayStat.value.total_stocks
+    : detailStocks.value;
+
+  return sortStocksByLimitTime(stocks);
+});
 const limitStocks = computed(() =>
+  sortStocksByLimitTime(
     detailStocks.value.filter((stock) => stock?.status === "limit"),
+  ),
 );
 const breakStocks = computed(() =>
+  sortStocksByLimitTime(
     detailStocks.value.filter((stock) => stock?.status === "break"),
+  ),
 );
+const detailTabs = computed(() => [
+  {
+    name: "total",
+    label: "合计",
+    stocks: totalStocks.value,
+    showStatus: true,
+  },
+  {
+    name: "limit",
+    label: "涨停板",
+    stocks: limitStocks.value,
+    showStatus: false,
+  },
+  {
+    name: "break",
+    label: "炸板",
+    stocks: breakStocks.value,
+    showStatus: false,
+  },
+]);
 const statMap = computed(() => {
   const map = new Map();
 
@@ -332,7 +385,11 @@ const openDayDetail = (day) => {
   if (!day?.stat) return;
 
   selectedDay.value = day;
-  activeDetailTab.value = limitStocks.value.length ? "limit" : "break";
+  activeDetailTab.value = totalStocks.value.length
+    ? "total"
+    : limitStocks.value.length
+      ? "limit"
+      : "break";
   detailVisible.value = true;
 };
 
@@ -359,6 +416,40 @@ const fetchMonthData = async (withLoading = true) => {
   }
 };
 
+const sortStocksByLimitTime = (stocks) =>
+  [...stocks].sort((left, right) => {
+    const timeDiff =
+      getLimitTimeSortValue(left?.first_limit_time) -
+      getLimitTimeSortValue(right?.first_limit_time);
+
+    if (timeDiff !== 0) return timeDiff;
+    return String(left?.ts_code || "").localeCompare(String(right?.ts_code || ""));
+  });
+
+const sortLimitTimeColumn = (left, right) =>
+  getLimitTimeSortValue(left?.first_limit_time) -
+  getLimitTimeSortValue(right?.first_limit_time);
+
+const getLimitTimeSortValue = (value) => {
+  if (value === null || value === undefined || value === "") {
+    return Number.MAX_SAFE_INTEGER;
+  }
+
+  const text = String(value);
+  const timeMatch = text.match(/(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?/);
+  if (timeMatch) {
+    const [, hour, minute, second = "0"] = timeMatch;
+    return Number(hour) * 3600 + Number(minute) * 60 + Number(second);
+  }
+
+  const digits = text.replace(/\D/g, "");
+  if (!digits) return Number.MAX_SAFE_INTEGER;
+
+  const timeDigits = digits.length > 6 ? digits.slice(-6) : digits;
+  const number = Number(timeDigits);
+  return Number.isFinite(number) ? number : Number.MAX_SAFE_INTEGER;
+};
+
 const formatRate = (value) => {
   if (value === null || value === undefined || value === "") return "--";
 
@@ -375,6 +466,14 @@ const formatCount = (value) => {
 const formatRatio = (numerator, denominator) =>
   `${formatCount(numerator)}/${formatCount(denominator)}`;
 
+const getProfitDataCount = (stat, type) => {
+  if (!stat) return 0;
+
+  const nextDataKey = type === "break" ? "break_next_data_count" : "limit_next_data_count";
+  const fallbackKey = type === "break" ? "break_count" : "limit_count";
+  return stat[nextDataKey] ?? stat[fallbackKey];
+};
+
 const formatPrice = (value) => {
   if (value === null || value === undefined || value === "") return "--";
 
@@ -395,22 +494,49 @@ const formatProfitFlag = (value) => {
   if (value === false) return "否";
   return "--";
 };
+
+const formatStatus = (value) => {
+  if (value === "limit") return "封板";
+  if (value === "break") return "炸板";
+  return "--";
+};
+
+const formatLimitTime = (value) => {
+  if (value === null || value === undefined || value === "") return "--";
+  return String(value);
+};
+
+const formatOpenTimes = (value) => {
+  if (value === null || value === undefined || value === "") return "--";
+
+  const number = Number(value);
+  return Number.isFinite(number) ? number : "--";
+};
+
+const getStockRowClassName = ({ row }) =>
+  row?.status === "break" ? "break-stock-row" : "";
 </script>
 
 <style scoped>
 .second-calendar-page {
-  min-height: 100vh;
+  height: 100vh;
-  min-height: 100dvh;
+  height: 100dvh;
-  padding: 24px;
+  min-height: 0;
+  padding: 16px 20px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: #f4f7f9;
 }
 
 .month-filter {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 18px;
+  min-height: 32px;
+  margin-bottom: 10px;
 }
 
 .month-picker {
@@ -418,18 +544,26 @@ const formatProfitFlag = (value) => {
 }
 
 .calendar-stage {
+  width: 100%;
   max-width: 1280px;
   margin: 0 auto;
+  flex: 1 1 auto;
+  min-height: 0;
   display: grid;
-  grid-template-columns: 72px minmax(0, 1fr) 72px;
+  grid-template-columns: 56px minmax(0, 1fr) 56px;
   align-items: stretch;
-  gap: 12px;
+  gap: 10px;
 }
 
 .calendar-panel {
   min-width: 0;
-  padding: 22px 24px 26px;
+  min-height: 0;
+  height: 100%;
+  padding: 16px 18px 18px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   background: #ffffff;
   border: 1px solid #e5edf5;
   border-radius: 8px;
@@ -475,23 +609,24 @@ const formatProfitFlag = (value) => {
 }
 
 .calendar-head {
+  flex: 0 0 auto;
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 18px;
+  margin-bottom: 10px;
 }
 
 .month-title {
-  font-size: 22px;
+  font-size: 20px;
-  line-height: 30px;
+  line-height: 26px;
   font-weight: 700;
   color: #1f2a37;
 }
 
 .month-range {
-  font-size: 13px;
+  font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
   color: #7c8aa5;
 }
 
@@ -502,26 +637,33 @@ const formatProfitFlag = (value) => {
 }
 
 .weekday-row {
-  gap: 8px;
+  flex: 0 0 auto;
-  margin-bottom: 8px;
+  gap: 6px;
+  margin-bottom: 6px;
 }
 
 .weekday-cell {
   text-align: center;
   font-size: 13px;
-  line-height: 20px;
+  line-height: 18px;
   font-weight: 700;
   color: #5f6f86;
 }
 
 .calendar-grid {
-  gap: 8px;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: 6px;
+  grid-auto-rows: minmax(0, 1fr);
 }
 
 .day-card {
-  min-height: 138px;
+  min-height: 0;
-  padding: 12px;
+  padding: 8px 10px;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   border: 1px solid #e4ebf3;
   border-radius: 8px;
   background: #ffffff;
@@ -565,17 +707,18 @@ const formatProfitFlag = (value) => {
 }
 
 .day-card-head {
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 24px;
+  min-height: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 
 .day-number {
-  font-size: 16px;
+  font-size: 15px;
-  line-height: 24px;
+  line-height: 20px;
   font-weight: 700;
   color: #27364a;
 }
@@ -589,8 +732,8 @@ const formatProfitFlag = (value) => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
+  width: 18px;
-  height: 22px;
+  height: 18px;
   border-radius: 999px;
   background: #eef2f7;
   color: #7c8aa5;
@@ -600,9 +743,10 @@ const formatProfitFlag = (value) => {
 }
 
 .day-metrics {
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 3px;
 }
 
 .metric-row {
@@ -610,15 +754,15 @@ const formatProfitFlag = (value) => {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 24px;
+  min-height: 18px;
-  font-size: 13px;
+  font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
   color: #5f6f86;
 }
 
 .metric-row strong {
-  font-size: 15px;
+  font-size: 14px;
-  line-height: 22px;
+  line-height: 18px;
   font-weight: 800;
   color: #26364b;
 }
@@ -636,14 +780,15 @@ const formatProfitFlag = (value) => {
 }
 
 .day-placeholder {
-  min-height: 70px;
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #a0acbb;
-  font-size: 13px;
+  font-size: 12px;
-  line-height: 20px;
+  line-height: 18px;
 }
 
 .detail-summary {
@@ -680,17 +825,50 @@ const formatProfitFlag = (value) => {
   min-width: 0;
 }
 
+.stock-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 24px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.stock-status.limit {
+  background: #eaf2ff;
+  color: #2563a8;
+}
+
+.stock-status.break {
+  background: #fee2e2;
+  color: #b4232c;
+}
+
+:deep(.detail-stock-table .break-stock-row td.el-table__cell) {
+  background: #fff1f2 !important;
+  color: #b4232c;
+}
+
+:deep(.detail-stock-table .break-stock-row:hover > td.el-table__cell) {
+  background: #ffe4e6 !important;
+}
+
 :deep(.second-calendar-detail-dialog .el-dialog__body) {
   padding-top: 8px;
 }
 
 @media (max-width: 1024px) {
   .second-calendar-page {
-    padding: 18px;
+    padding: 14px;
   }
 
   .calendar-panel {
-    padding: 18px;
+    padding: 14px;
   }
 
   .calendar-stage {
@@ -699,8 +877,7 @@ const formatProfitFlag = (value) => {
   }
 
   .day-card {
-    min-height: 128px;
+    padding: 8px;
-    padding: 10px;
   }
 }
 
@@ -742,7 +919,6 @@ const formatProfitFlag = (value) => {
   }
 
   .day-card {
-    min-height: 112px;
     padding: 8px;
   }
 
@@ -762,7 +938,6 @@ const formatProfitFlag = (value) => {
   }
 
   .day-placeholder {
-    min-height: 58px;
     font-size: 12px;
   }
 
@@ -770,4 +945,56 @@ const formatProfitFlag = (value) => {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-height: 900px) {
+  .second-calendar-page {
+    padding: 12px 16px;
+  }
+
+  .month-filter {
+    margin-bottom: 8px;
+  }
+
+  .calendar-stage {
+    grid-template-columns: 48px minmax(0, 1fr) 48px;
+    gap: 8px;
+  }
+
+  .calendar-panel {
+    padding: 12px 14px;
+  }
+
+  .calendar-head {
+    margin-bottom: 8px;
+  }
+
+  .month-title {
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .weekday-row {
+    margin-bottom: 5px;
+  }
+
+  .weekday-cell {
+    line-height: 17px;
+  }
+
+  .calendar-grid {
+    gap: 5px;
+  }
+
+  .day-card {
+    padding: 7px 8px;
+  }
+
+  .day-card-head {
+    margin-bottom: 4px;
+  }
+
+  .day-metrics {
+    gap: 2px;
+  }
+}
 </style>

src/views/stock/SecondBoardProfitSummary.vue

@@ -0,0 +1,843 @@
+<template>
+  <div class="profit-summary-page">
+    <section class="filter-panel">
+      <div class="panel-head">
+        <div>
+          <h2>二板获利综合</h2>
+          <p>统计 09:31:00-09:59:59 早盘二板后的 T+1 最高获利。</p>
+        </div>
+      </div>
+
+      <el-form :inline="true" class="filter-form">
+        <TradeDateRangePicker
+          v-model:start-date="startDate"
+          v-model:end-date="endDate"
+          @calendar-ready="handleCalendarReady"
+        />
+        <el-form-item label="搜索">
+          <el-input
+            v-model.trim="keyword"
+            clearable
+            placeholder="股票简称 / 代码 / 行业"
+            class="keyword-input"
+          />
+        </el-form-item>
+        <el-form-item class="action-form-item">
+          <el-button
+            type="primary"
+            :icon="SearchIcon"
+            :loading="loading"
+            :disabled="loading || !canQuery"
+            @click="handleQuery"
+          >
+            查询
+          </el-button>
+          <el-button :icon="ResetIcon" :disabled="loading" @click="handleReset">
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </section>
+
+    <section class="summary-strip">
+      <div class="summary-item">
+        <span>命中个股</span>
+        <strong>{{ formatCount(responseMeta.total ?? tableData.length) }}</strong>
+      </div>
+      <div class="summary-item">
+        <span>二板次数</span>
+        <strong>{{ formatCount(totalSecondBoardCount) }}</strong>
+      </div>
+      <div class="summary-item">
+        <span>可统计次数</span>
+        <strong>{{ formatCount(totalProfitDataCount) }}</strong>
+      </div>
+      <div class="summary-item">
+        <span>累计获利合计</span>
+        <strong :class="getPctClass(totalProfitPct)">
+          {{ formatSignedPct(totalProfitPct) }}
+        </strong>
+      </div>
+      <div class="summary-item">
+        <span>筛选区间</span>
+        <strong class="range-text">{{ rangeLabel }}</strong>
+      </div>
+    </section>
+
+    <section class="table-panel">
+      <div class="table-shell">
+        <el-table
+          v-loading="loading"
+          :data="pagedTableData"
+          border
+          stripe
+          height="100%"
+          class="summary-table"
+          row-key="ts_code"
+          :default-sort="{ prop: 'total_next_high_profit_pct', order: 'descending' }"
+          :header-cell-style="{
+            background: '#f8f9fb',
+            color: '#444',
+            textAlign: 'center',
+          }"
+          @sort-change="handleSortChange"
+          @row-dblclick="openDetail"
+        >
+          <el-table-column
+            type="index"
+            label="排名"
+            width="72"
+            fixed="left"
+            align="center"
+            :index="getTableIndex"
+          />
+          <el-table-column prop="name" label="股票简称" width="128" fixed="left" align="center" sortable>
+            <template #default="{ row }">
+              <button class="stock-link" type="button" @click.stop="openDetail(row)">
+                {{ row.name || "--" }}
+              </button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="ts_code" label="股票代码" width="126" fixed="left" align="center" sortable />
+          <el-table-column prop="market" label="市场" width="92" align="center" sortable />
+          <el-table-column prop="industry" label="行业" min-width="132" show-overflow-tooltip sortable />
+          <el-table-column prop="second_board_count" label="二板次数" width="98" align="center" sortable>
+            <template #default="{ row }">{{ formatCount(row.second_board_count) }}</template>
+          </el-table-column>
+          <el-table-column label="封板 / 炸板" width="118" align="center">
+            <template #default="{ row }">
+              {{ formatCount(row.limit_count) }} / {{ formatCount(row.break_count) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="profit_data_count" label="可统计次数" width="108" align="center" sortable>
+            <template #default="{ row }">{{ formatCount(row.profit_data_count) }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="total_next_high_profit_pct"
+            label="累计获利"
+            width="116"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">
+              <span :class="getPctClass(row.total_next_high_profit_pct)">
+                {{ formatSignedPct(row.total_next_high_profit_pct) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="average_next_high_profit_pct"
+            label="平均获利"
+            width="116"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">
+              <span :class="getPctClass(row.average_next_high_profit_pct)">
+                {{ formatSignedPct(row.average_next_high_profit_pct) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="first_trade_date" label="首次命中" width="118" align="center" sortable />
+          <el-table-column prop="last_trade_date" label="最近命中" width="118" align="center" sortable />
+          <el-table-column label="操作" width="96" fixed="right" align="center">
+            <template #default="{ row }">
+              <el-button size="small" :icon="ViewIcon" @click.stop="openDetail(row)">
+                详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pagination-row">
+        <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="tableTotal"
+          :page-sizes="[10, 20, 50, 100, 200]"
+          :layout="paginationLayout"
+          :pager-count="paginationPagerCount"
+          background
+          @size-change="handlePageSizeChange"
+          @current-change="handlePageChange"
+        />
+      </div>
+    </section>
+
+    <el-dialog
+      v-model="detailVisible"
+      class="profit-detail-dialog"
+      :title="detailTitle"
+      width="86%"
+      align-center
+      destroy-on-close
+    >
+      <div class="detail-summary">
+        <div class="detail-summary-item">
+          <span>二板次数</span>
+          <strong>{{ formatCount(detailMeta.second_board_count) }}</strong>
+        </div>
+        <div class="detail-summary-item">
+          <span>可统计次数</span>
+          <strong>{{ formatCount(detailMeta.profit_data_count) }}</strong>
+        </div>
+        <div class="detail-summary-item">
+          <span>累计获利</span>
+          <strong :class="getPctClass(detailMeta.total_next_high_profit_pct)">
+            {{ formatSignedPct(detailMeta.total_next_high_profit_pct) }}
+          </strong>
+        </div>
+        <div class="detail-summary-item">
+          <span>平均获利</span>
+          <strong :class="getPctClass(detailMeta.average_next_high_profit_pct)">
+            {{ formatSignedPct(detailMeta.average_next_high_profit_pct) }}
+          </strong>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="detailLoading"
+        :data="detailRows"
+        border
+        stripe
+        max-height="560"
+        class="detail-table"
+        :default-sort="{ prop: 'trade_date', order: 'descending' }"
+        :row-class-name="getDetailRowClassName"
+      >
+        <el-table-column prop="trade_date" label="T日" width="118" fixed="left" align="center" sortable />
+        <el-table-column prop="status" label="状态" width="82" align="center" sortable>
+          <template #default="{ row }">
+            <span :class="['stock-status', row.status === 'break' ? 'break' : 'limit']">
+              {{ formatStatus(row.status) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="first_limit_time" label="首次涨停时间" width="132" align="center" sortable>
+          <template #default="{ row }">{{ row.first_limit_time || "--" }}</template>
+        </el-table-column>
+        <el-table-column prop="previous_two_trade_date" label="T-2" width="118" align="center" sortable />
+        <el-table-column prop="previous_trade_date" label="T-1" width="118" align="center" sortable />
+        <el-table-column prop="next_trade_date" label="T+1" width="118" align="center" sortable />
+        <el-table-column prop="open_times" label="炸板次数" width="96" align="center" sortable>
+          <template #default="{ row }">{{ formatNullableCount(row.open_times) }}</template>
+        </el-table-column>
+        <el-table-column prop="t_high" label="T最高" width="92" align="right" sortable>
+          <template #default="{ row }">{{ formatPrice(row.t_high) }}</template>
+        </el-table-column>
+        <el-table-column prop="t_close" label="T收盘" width="92" align="right" sortable>
+          <template #default="{ row }">{{ formatPrice(row.t_close) }}</template>
+        </el-table-column>
+        <el-table-column prop="next_high" label="T+1最高" width="98" align="right" sortable>
+          <template #default="{ row }">{{ formatPrice(row.next_high) }}</template>
+        </el-table-column>
+        <el-table-column prop="next_close" label="T+1收盘" width="98" align="right" sortable>
+          <template #default="{ row }">{{ formatPrice(row.next_close) }}</template>
+        </el-table-column>
+        <el-table-column prop="next_intraday_profitable" label="T+1盈利" width="96" align="center" sortable>
+          <template #default="{ row }">{{ formatProfitFlag(row.next_intraday_profitable) }}</template>
+        </el-table-column>
+        <el-table-column prop="next_high_profit_pct" label="最高获利" width="108" align="right" sortable>
+          <template #default="{ row }">
+            <span :class="getPctClass(row.next_high_profit_pct)">
+              {{ formatSignedPct(row.next_high_profit_pct) }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import dayjs from "dayjs";
+import { ElMessage } from "element-plus";
+import {
+  RefreshLeft as ResetIcon,
+  Search as SearchIcon,
+  View as ViewIcon,
+} from "@element-plus/icons-vue";
+import TradeDateRangePicker from "@/components/TradeDateRangePicker.vue";
+import {
+  getSecondBoardProfitDetail,
+  getSecondBoardProfitSummary,
+} from "@/api/stock";
+
+defineOptions({
+  name: "SecondBoardProfitSummary",
+});
+
+const DEFAULT_START_DATE = "2020-01-01";
+
+const startDate = ref(DEFAULT_START_DATE);
+const endDate = ref(dayjs().format("YYYY-MM-DD"));
+const keyword = ref("");
+const openDatesSet = ref(new Set());
+const maxTradeDate = ref("");
+const loading = ref(true);
+const detailLoading = ref(false);
+const tableData = ref([]);
+const responseMeta = ref({});
+const detailVisible = ref(false);
+const selectedStock = ref(null);
+const detailMeta = ref({});
+const detailRows = ref([]);
+const page = ref(1);
+const pageSize = ref(20);
+const viewportWidth = ref(typeof window === "undefined" ? 1200 : window.innerWidth);
+const sortState = ref({
+  prop: "total_next_high_profit_pct",
+  order: "descending",
+});
+
+const canQuery = computed(
+  () => Boolean(startDate.value && endDate.value) && startDate.value <= endDate.value,
+);
+
+const filteredTableData = computed(() => {
+  const text = keyword.value.trim().toLowerCase();
+  if (!text) return tableData.value;
+
+  return tableData.value.filter((row) =>
+    [row?.name, row?.symbol, row?.ts_code, row?.market, row?.industry]
+      .filter(Boolean)
+      .some((value) => String(value).toLowerCase().includes(text)),
+  );
+});
+
+const sortedFilteredTableData = computed(() => {
+  const data = [...filteredTableData.value];
+  const { prop, order } = sortState.value;
+
+  if (!prop || !order) return data;
+
+  const direction = order === "ascending" ? 1 : -1;
+  return data.sort((left, right) => compareValues(left?.[prop], right?.[prop]) * direction);
+});
+
+const tableTotal = computed(() => filteredTableData.value.length);
+
+const pagedTableData = computed(() => {
+  const start = (page.value - 1) * pageSize.value;
+  return sortedFilteredTableData.value.slice(start, start + pageSize.value);
+});
+
+const paginationLayout = computed(() =>
+  viewportWidth.value <= 820
+    ? "total, prev, pager, next"
+    : "total, sizes, prev, pager, next, jumper",
+);
+
+const paginationPagerCount = computed(() => (viewportWidth.value <= 820 ? 5 : 7));
+
+const totalSecondBoardCount = computed(() =>
+  tableData.value.reduce((sum, item) => sum + toNumber(item?.second_board_count), 0),
+);
+
+const totalProfitDataCount = computed(() =>
+  tableData.value.reduce((sum, item) => sum + toNumber(item?.profit_data_count), 0),
+);
+
+const totalProfitPct = computed(() =>
+  tableData.value.reduce((sum, item) => sum + toNumber(item?.total_next_high_profit_pct), 0),
+);
+
+const rangeLabel = computed(() => {
+  const start = responseMeta.value.trade_start_date || startDate.value || "--";
+  const end = responseMeta.value.trade_end_date || endDate.value || "--";
+  return `${start} 至 ${end}`;
+});
+
+const detailTitle = computed(() => {
+  const stock = selectedStock.value || detailMeta.value;
+  const name = stock?.name || "个股";
+  const code = stock?.ts_code || stock?.symbol || "";
+
+  return code ? `${name} (${code}) 二板获利详情` : `${name}二板获利详情`;
+});
+
+onMounted(() => {
+  window.addEventListener("resize", syncViewport);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", syncViewport);
+});
+
+watch(keyword, () => {
+  page.value = 1;
+});
+
+watch(tableTotal, (total) => {
+  const maxPage = Math.max(1, Math.ceil(total / pageSize.value));
+  if (page.value > maxPage) page.value = maxPage;
+});
+
+const syncViewport = () => {
+  viewportWidth.value = window.innerWidth;
+};
+
+const handleCalendarReady = async (calendar = {}) => {
+  loading.value = true;
+  try {
+    const { open_dates: openDates = [], max_date: maxDate = "" } = calendar || {};
+
+    openDatesSet.value = new Set(openDates);
+    maxTradeDate.value = maxDate;
+    resetDates();
+    await fetchSummary(false);
+  } catch (err) {
+    console.error("初始化二板获利综合页失败", err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const resetDates = () => {
+  endDate.value = getLatestTradeDate();
+  startDate.value = getDefaultStartDate();
+};
+
+const getLatestTradeDate = () => {
+  const openDates = [...openDatesSet.value].sort();
+  if (!openDates.length) return maxTradeDate.value || dayjs().format("YYYY-MM-DD");
+  if (maxTradeDate.value && openDatesSet.value.has(maxTradeDate.value)) return maxTradeDate.value;
+  if (maxTradeDate.value) {
+    return openDates.filter((date) => date <= maxTradeDate.value).at(-1) || openDates.at(-1) || "";
+  }
+
+  return openDates.at(-1) || "";
+};
+
+const getDefaultStartDate = () => {
+  const openDates = [...openDatesSet.value].sort();
+  if (!openDates.length) return DEFAULT_START_DATE;
+
+  return (
+    openDates.find((date) => date >= DEFAULT_START_DATE && (!endDate.value || date <= endDate.value)) ||
+    openDates[0]
+  );
+};
+
+const handleReset = async () => {
+  keyword.value = "";
+  resetDates();
+  await handleQuery();
+};
+
+const handleQuery = async () => {
+  if (!validateDateRange()) return;
+  page.value = 1;
+  await fetchSummary(true);
+};
+
+const fetchSummary = async (withLoading = true) => {
+  if (withLoading) loading.value = true;
+  try {
+    const res = await getSecondBoardProfitSummary({
+      tradeStartDate: startDate.value,
+      tradeEndDate: endDate.value,
+    });
+
+    tableData.value = Array.isArray(res?.list) ? res.list : [];
+    responseMeta.value = res || {};
+    page.value = 1;
+  } catch (err) {
+    console.error("加载二板获利综合失败", err);
+    tableData.value = [];
+    responseMeta.value = {};
+  } finally {
+    if (withLoading) loading.value = false;
+  }
+};
+
+const handlePageChange = (currentPage) => {
+  page.value = currentPage;
+};
+
+const handlePageSizeChange = (currentPageSize) => {
+  pageSize.value = currentPageSize;
+  page.value = 1;
+};
+
+const handleSortChange = ({ prop, order }) => {
+  sortState.value = {
+    prop: prop || "",
+    order: order || "",
+  };
+  page.value = 1;
+};
+
+const openDetail = async (stock) => {
+  if (!stock?.ts_code && !stock?.symbol) return;
+
+  selectedStock.value = stock;
+  detailVisible.value = true;
+  detailLoading.value = true;
+  detailRows.value = [];
+  detailMeta.value = { ...stock };
+
+  try {
+    const res = await getSecondBoardProfitDetail({
+      tsCode: stock.ts_code,
+      symbol: stock.symbol,
+      tradeStartDate: startDate.value,
+      tradeEndDate: endDate.value,
+    });
+
+    detailMeta.value = res || {};
+    detailRows.value = Array.isArray(res?.list) ? res.list : [];
+  } catch (err) {
+    console.error("加载个股二板获利详情失败", err);
+    detailRows.value = [];
+  } finally {
+    detailLoading.value = false;
+  }
+};
+
+const validateDateRange = () => {
+  if (!startDate.value || !endDate.value) {
+    ElMessage.warning("请选择 T 日范围");
+    return false;
+  }
+
+  if (endDate.value < startDate.value) {
+    ElMessage.warning("结束日期不能早于起始日期");
+    return false;
+  }
+
+  return true;
+};
+
+const toNumber = (value) => {
+  const number = Number(value ?? 0);
+  return Number.isFinite(number) ? number : 0;
+};
+
+const compareValues = (left, right) => {
+  const leftEmpty = left === null || left === undefined || left === "";
+  const rightEmpty = right === null || right === undefined || right === "";
+
+  if (leftEmpty && rightEmpty) return 0;
+  if (leftEmpty) return 1;
+  if (rightEmpty) return -1;
+
+  const leftNumber = Number(left);
+  const rightNumber = Number(right);
+  if (Number.isFinite(leftNumber) && Number.isFinite(rightNumber)) {
+    return leftNumber - rightNumber;
+  }
+
+  return String(left).localeCompare(String(right), "zh-Hans-CN", {
+    numeric: true,
+    sensitivity: "base",
+  });
+};
+
+const getTableIndex = (index) => (page.value - 1) * pageSize.value + index + 1;
+
+const formatCount = (value) => {
+  const number = Number(value ?? 0);
+  return Number.isFinite(number) ? number : 0;
+};
+
+const formatNullableCount = (value) => {
+  if (value === null || value === undefined || value === "") return "--";
+  return formatCount(value);
+};
+
+const formatPrice = (value) => {
+  if (value === null || value === undefined || value === "") return "--";
+
+  const number = Number(value);
+  return Number.isFinite(number) ? number.toFixed(2) : "--";
+};
+
+const formatSignedPct = (value) => {
+  if (value === null || value === undefined || value === "") return "--";
+
+  const number = Number(value);
+  if (!Number.isFinite(number)) return "--";
+  return `${number > 0 ? "+" : ""}${number.toFixed(2)}%`;
+};
+
+const formatProfitFlag = (value) => {
+  if (value === true) return "是";
+  if (value === false) return "否";
+  return "--";
+};
+
+const formatStatus = (value) => {
+  if (value === "limit") return "封板";
+  if (value === "break") return "炸板";
+  return "--";
+};
+
+const getPctClass = (value) => {
+  const number = Number(value);
+  if (!Number.isFinite(number) || number === 0) return "";
+  return number > 0 ? "is-up" : "is-down";
+};
+
+const getDetailRowClassName = ({ row }) =>
+  row?.status === "break" ? "break-detail-row" : "";
+</script>
+
+<style scoped>
+.profit-summary-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #f4f7f9;
+}
+
+.filter-panel,
+.table-panel {
+  flex: 0 0 auto;
+  background: #ffffff;
+  border: 1px solid #e5edf5;
+  border-radius: 8px;
+  box-shadow: 0 8px 22px rgba(31, 42, 55, 0.04);
+}
+
+.filter-panel {
+  padding: 18px 20px 8px;
+}
+
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 20px;
+  line-height: 28px;
+  color: #1f2a37;
+}
+
+.panel-head p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 20px;
+  color: #6d7d93;
+}
+
+.filter-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0 8px;
+}
+
+.keyword-input {
+  width: 226px;
+}
+
+.summary-strip {
+  flex: 0 0 auto;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+  margin: 12px 0;
+}
+
+.summary-item {
+  min-width: 0;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  border: 1px solid #e5edf5;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.summary-item span {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #6d7d93;
+}
+
+.summary-item strong {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 20px;
+  line-height: 28px;
+  color: #223047;
+}
+
+.summary-item .range-text {
+  font-size: 14px;
+  line-height: 28px;
+}
+
+.table-panel {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.table-shell {
+  flex: 1 1 auto;
+  height: auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.summary-table {
+  width: 100%;
+}
+
+.pagination-row {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  padding-top: 12px;
+}
+
+.stock-link {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: #1f5fa8;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.stock-link:hover {
+  color: #0f3f78;
+  text-decoration: underline;
+}
+
+.is-up {
+  color: #1f7a55;
+  font-weight: 700;
+}
+
+.is-down {
+  color: #c2414b;
+  font-weight: 700;
+}
+
+.detail-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.detail-summary-item {
+  min-width: 0;
+  padding: 12px 14px;
+  box-sizing: border-box;
+  border: 1px solid #e5edf5;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.detail-summary-item span {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 13px;
+  line-height: 20px;
+  color: #6d7d93;
+}
+
+.detail-summary-item strong {
+  font-size: 20px;
+  line-height: 28px;
+  color: #223047;
+}
+
+.stock-status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 24px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.stock-status.limit {
+  background: #eaf2ff;
+  color: #2563a8;
+}
+
+.stock-status.break {
+  background: #fee2e2;
+  color: #b4232c;
+}
+
+:deep(.detail-table .break-detail-row td.el-table__cell) {
+  background: #fff1f2 !important;
+}
+
+:deep(.detail-table .break-detail-row:hover > td.el-table__cell) {
+  background: #ffe4e6 !important;
+}
+
+:deep(.profit-detail-dialog .el-dialog__body) {
+  padding-top: 8px;
+}
+
+@media (max-width: 1180px) {
+  .summary-strip {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 820px) {
+  .profit-summary-page {
+    padding: 14px;
+  }
+
+  .filter-panel {
+    padding: 14px 14px 4px;
+  }
+
+  .filter-form {
+    display: block;
+  }
+
+  .keyword-input {
+    width: 100%;
+  }
+
+  .summary-strip,
+  .detail-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .table-panel {
+    padding: 10px;
+  }
+
+  .pagination-row {
+    justify-content: flex-start;
+    overflow-x: auto;
+    padding-top: 10px;
+    padding-bottom: 2px;
+  }
+}
+</style>

vite.config.js

@@ -2,6 +2,8 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 
+const apiProxyTarget = process.env.VITE_API_PROXY_TARGET || 'http://127.0.0.1:18080'
+
 export default defineConfig({
   plugins: [vue()],
   resolve: {
@@ -12,7 +14,7 @@ export default defineConfig({
     port: 5173,      // 你的端口号
     proxy: {
       '/api/v1': {
-        target: 'http://localhost:18080',
+        target: apiProxyTarget,
         changeOrigin: true
       }
     }