From 29842788ad66ed278c1c24728c05c7c697e7058b Mon Sep 17 00:00:00 2001
From: yangfan <784310601@qq.com>
Date: Wed, 6 May 2026 18:10:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BA=8C=E6=9D=BF=E6=B6=A8?=
 =?UTF-8?q?=E5=81=9C=E6=83=85=E5=86=B5=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/stock.js             |   8 +
 src/views/stock/Download.vue | 942 ++++++++++++++++++++++++++++++-----
 2 files changed, 824 insertions(+), 126 deletions(-)

diff --git a/src/api/stock.js b/src/api/stock.js
index 19006cf..5a8ea28 100644
--- a/src/api/stock.js
+++ b/src/api/stock.js
@@ -32,6 +32,14 @@ export function getLimitBoardOpenThresholdGroups(params) {
   })
 }
 
+export function getSecondBoardProfit(params) {
+  return request({
+    url: '/limit-board/second-board-profit',
+    method: 'get',
+    params
+  })
+}
+
 export function downloadSecondBoardProfitCsv(params) {
   return request({
     url: '/download/limit-board/second-board-profit-csv',
diff --git a/src/views/stock/Download.vue b/src/views/stock/Download.vue
index 6a0d1fc..d07aea9 100644
--- a/src/views/stock/Download.vue
+++ b/src/views/stock/Download.vue
@@ -1,132 +1,439 @@
 <template>
   <div class="download-page">
-    <section class="download-toolbar">
-      <div class="toolbar-copy">
-        <h1>数据下载</h1>
-        <p>按交易日期范围下载策略明细 CSV。</p>
-      </div>
-    </section>
-
     <section class="download-panel">
       <div class="panel-head">
         <div>
-          <h2>二板早盘次日盈利</h2>
-          <p>
-            下载符合二板早盘开盘阈值条件的股票明细，并查看后一交易日盈利情况。
-          </p>
+          <h2>二板次日盈利</h2>
         </div>
       </div>
 
       <el-form :inline="true" class="download-form">
-        <el-form-item label="起始日期">
+        <el-form-item label="起">
           <el-date-picker
             v-model="startDate"
             type="date"
             value-format="YYYY-MM-DD"
             :disabled-date="disableDates"
             :editable="false"
-            placeholder="选择起始日期"
+            placeholder="选择起"
             class="date-input"
           />
         </el-form-item>
-        <el-form-item label="结束日期">
+        <el-form-item label="终">
           <el-date-picker
             v-model="endDate"
             type="date"
             value-format="YYYY-MM-DD"
             :disabled-date="disableDates"
             :editable="false"
-            placeholder="选择结束日期"
+            placeholder="选择终"
             class="date-input"
           />
         </el-form-item>
-        <el-form-item>
+        <el-form-item label="涨停时间">
+          <div class="condition-group">
+            <el-select
+              v-model="limitUpTimeFilter.firstOp"
+              class="operator-input"
+              @change="handleFirstOperatorChange(limitUpTimeFilter)"
+            >
+              <el-option
+                v-for="option in operatorOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+            <el-input
+              v-model="limitUpTimeFilter.firstValue"
+              clearable
+              placeholder="11:00:00"
+              class="condition-value"
+            />
+            <el-select
+              v-model="limitUpTimeFilter.secondOp"
+              class="operator-input"
+              :disabled="limitUpTimeFilter.firstOp === '='"
+            >
+              <el-option
+                v-for="option in operatorOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+            <el-input
+              v-model="limitUpTimeFilter.secondValue"
+              clearable
+              placeholder="可为空"
+              class="condition-value"
+              :disabled="limitUpTimeFilter.firstOp === '='"
+            />
+          </div>
+        </el-form-item>
+        <el-form-item label="开盘涨跌幅">
+          <div class="condition-group">
+            <el-select
+              v-model="openPctChgFilter.firstOp"
+              class="operator-input"
+              @change="handleFirstOperatorChange(openPctChgFilter)"
+            >
+              <el-option
+                v-for="option in operatorOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+            <el-input
+              v-model="openPctChgFilter.firstValue"
+              clearable
+              placeholder="1"
+              class="condition-value"
+            >
+              <template #suffix>%</template>
+            </el-input>
+            <el-select
+              v-model="openPctChgFilter.secondOp"
+              class="operator-input"
+              :disabled="openPctChgFilter.firstOp === '='"
+            >
+              <el-option
+                v-for="option in operatorOptions"
+                :key="option"
+                :label="option"
+                :value="option"
+              />
+            </el-select>
+            <el-input
+              v-model="openPctChgFilter.secondValue"
+              clearable
+              placeholder="可为空"
+              class="condition-value"
+              :disabled="openPctChgFilter.firstOp === '='"
+            >
+              <template #suffix>%</template>
+            </el-input>
+          </div>
+        </el-form-item>
+        <el-form-item class="action-form-item">
           <el-button
             type="primary"
+            :icon="SearchIcon"
+            :loading="loading"
+            :disabled="!canQuery"
+            @click="handleQuery(true)"
+          >
+            查询
+          </el-button>
+          <el-button
+            :icon="ResetIcon"
+            :disabled="loading || downloading"
+            @click="handleReset"
+          >
+            重置
+          </el-button>
+          <el-button
             :icon="DownloadIcon"
             :loading="downloading"
-            :disabled="!canDownload"
+            :disabled="!canQuery"
             @click="handleDownload"
           >
             下载 CSV
           </el-button>
         </el-form-item>
       </el-form>
+    </section>
 
-      <div class="rule-grid">
-        <div class="rule-item">
-          <span class="rule-label">开盘条件</span>
-          <strong>低于前收 101%</strong>
-        </div>
-        <div class="rule-item">
-          <span class="rule-label">涨停时间</span>
-          <strong>早于 11:00</strong>
-        </div>
-        <div class="rule-item">
-          <span class="rule-label">盈利口径</span>
-          <strong>T 日收盘买入</strong>
-        </div>
+    <section class="table-panel">
+      <div class="table-shell">
+        <el-table
+          v-loading="loading"
+          :data="tableData"
+          border
+          stripe
+          class="profit-table"
+          style="width: 100%; min-width: 1280px"
+          :header-cell-style="{
+            background: '#f8f9fb',
+            color: '#444',
+            textAlign: 'center',
+          }"
+        >
+          <el-table-column
+            type="index"
+            label="Id"
+            width="70"
+            fixed="left"
+            align="center"
+          />
+          <el-table-column
+            prop="trade_date"
+            label="交易日"
+            width="132"
+            fixed="left"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            label="股票代码"
+            width="130"
+            fixed="left"
+            align="center"
+          >
+            <template #default="{ row }">
+              <button
+                class="stock-link"
+                type="button"
+                @click="openKlineDialog(row)"
+              >
+                {{ row.ts_code || "-" }}
+              </button>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="股票简称"
+            width="120"
+            fixed="left"
+            align="center"
+          />
+          <el-table-column
+            prop="market"
+            label="市场"
+            width="100"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            prop="industry"
+            label="行业"
+            min-width="130"
+            show-overflow-tooltip
+            sortable
+          />
+          <el-table-column
+            prop="next_open_profitable"
+            label="T+1开盘盈利"
+            width="130"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            prop="next_close_profitable"
+            label="T+1收盘盈利"
+            width="130"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            prop="next_intraday_profitable"
+            label="T+1盘中可盈利"
+            width="140"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            prop="next_high_profit_pct"
+            label="T+1最高盈利%"
+            width="140"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">{{
+              formatPct(row.next_high_profit_pct)
+            }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="next_low_profit_pct"
+            label="T+1最低盈利%"
+            width="140"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">{{
+              formatPct(row.next_low_profit_pct)
+            }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="break_limit_count"
+            label="开板次数"
+            width="100"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            prop="turnover_rate_pct"
+            label="换手率%"
+            width="110"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">{{
+              formatPct(row.turnover_rate_pct)
+            }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="first_limit_time"
+            label="首次涨停时间"
+            width="130"
+            align="center"
+            sortable
+          />
+          <el-table-column
+            prop="seal_amount"
+            label="封单额"
+            width="120"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">{{
+              formatAmount(row.seal_amount)
+            }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="amount"
+            label="成交额"
+            width="120"
+            align="right"
+            sortable
+          >
+            <template #default="{ row }">{{
+              formatAmount(row.amount)
+            }}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="pagination-row">
+        <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100, 1000]"
+          layout="total, sizes, prev, pager, next, jumper"
+          background
+          @size-change="handlePageSizeChange"
+          @current-change="handlePageChange"
+        />
       </div>
     </section>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      class="kline-dialog"
+      :width="dialogWidth"
+      align-center
+      destroy-on-close
+      draggable
+      overflow
+      @closed="disposeChart"
+    >
+      <div
+        id="download-kline-chart"
+        v-loading="klineLoading"
+        :style="{ width: '100%', height: `${chartHeight}px` }"
+      ></div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
+import * as echarts from "echarts";
 import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
-import { Download as DownloadIcon } from "@element-plus/icons-vue";
+import {
+  Download as DownloadIcon,
+  RefreshLeft as ResetIcon,
+  Search as SearchIcon,
+} from "@element-plus/icons-vue";
 import { fetchTradeCalendar } from "@/composables/useTradeCalendar";
-import { downloadSecondBoardProfitCsv } from "@/api/stock";
+import {
+  downloadSecondBoardProfitCsv,
+  getKlineData,
+  getSecondBoardProfit,
+} from "@/api/stock";
 
-const DEFAULT_START_DATE = "2026-04-01";
+const DEFAULT_LIMIT_UP_TIME_FILTER = {
+  firstOp: "<",
+  firstValue: "11:00:00",
+  secondOp: "<",
+  secondValue: "",
+};
+const DEFAULT_OPEN_PCT_CHG_FILTER = {
+  firstOp: "<",
+  firstValue: "1",
+  secondOp: "<",
+  secondValue: "",
+};
+const operatorOptions = ["<", ">", "<=", ">=", "="];
 
-const startDate = ref(DEFAULT_START_DATE);
+const startDate = ref("");
 const endDate = ref("");
+const limitUpTimeFilter = ref({ ...DEFAULT_LIMIT_UP_TIME_FILTER });
+const openPctChgFilter = ref({ ...DEFAULT_OPEN_PCT_CHG_FILTER });
+const loading = ref(false);
 const downloading = ref(false);
+const klineLoading = ref(false);
 const openDatesSet = ref(new Set());
 const maxTradeDate = ref("");
+const tableData = ref([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+const viewportWidth = ref(window.innerWidth);
 
-const canDownload = computed(
+const dialogVisible = ref(false);
+const dialogTitle = ref("");
+let chartInstance = null;
+
+const canQuery = computed(
   () =>
     Boolean(startDate.value && endDate.value) &&
     startDate.value <= endDate.value,
 );
 
+const dialogWidth = computed(() => {
+  if (viewportWidth.value <= 820) return "96%";
+  if (viewportWidth.value <= 1024) return "92%";
+  return "85%";
+});
+
+const chartHeight = computed(() => {
+  if (viewportWidth.value <= 820) return 360;
+  if (viewportWidth.value <= 1024) return 440;
+  return 550;
+});
+
 onMounted(async () => {
+  window.addEventListener("resize", syncViewport);
+
   try {
-    const res = await fetchTradeCalendar();
+    const res = await fetchTradeCalendar(true);
     const { open_dates: openDates = [], max_date: maxDate = "" } = res || {};
 
     openDatesSet.value = new Set(openDates);
     maxTradeDate.value = maxDate;
-    endDate.value = maxDate;
-    startDate.value = getDefaultStartDate(openDates);
+    resetFilters();
+
+    if (canQuery.value) {
+      await handleQuery(true);
+    }
   } catch (err) {
     console.error("初始化下载页失败", err);
   }
 });
 
-const clampToMaxDate = (date) => {
-  if (!date || !maxTradeDate.value || date <= maxTradeDate.value) return date;
-  return maxTradeDate.value;
-};
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", syncViewport);
+  disposeChart();
+});
 
-const getDefaultStartDate = (openDates) => {
-  const fallbackDate = clampToMaxDate(DEFAULT_START_DATE);
-  const sortedOpenDates = [...openDates].sort();
-  const validOpenDates = sortedOpenDates.filter(
-    (date) => !maxTradeDate.value || date <= maxTradeDate.value,
-  );
-
-  if (!validOpenDates.length || openDatesSet.value.has(fallbackDate))
-    return fallbackDate;
-
-  return (
-    validOpenDates.find((date) => date >= fallbackDate) ||
-    validOpenDates[validOpenDates.length - 1] ||
-    fallbackDate
-  );
+const syncViewport = () => {
+  viewportWidth.value = window.innerWidth;
+  chartInstance?.resize();
 };
 
 const disableDates = (time) => {
@@ -135,23 +442,116 @@ const disableDates = (time) => {
   return openDatesSet.value.size > 0 ? !openDatesSet.value.has(date) : false;
 };
 
-const handleDownload = async () => {
-  if (!startDate.value || !endDate.value) {
-    ElMessage.warning("请选择下载日期范围");
-    return;
+const normalizeFilter = (value) => {
+  const filter = String(value || "").trim();
+  return filter || undefined;
+};
+
+const handleFirstOperatorChange = (condition) => {
+  if (condition.firstOp !== "=") return;
+  condition.secondValue = "";
+};
+
+const buildConditionParams = (prefix, condition) => {
+  const firstValue = normalizeFilter(condition.firstValue);
+  const secondValue =
+    condition.firstOp === "="
+      ? undefined
+      : normalizeFilter(condition.secondValue);
+  const params = {};
+
+  if (firstValue) {
+    params[`${prefix}Type1`] = condition.firstOp;
+    params[`${prefix}Value1`] = firstValue;
   }
 
-  if (endDate.value < startDate.value) {
-    ElMessage.warning("结束日期不能早于起始日期");
-    return;
+  if (secondValue) {
+    params[`${prefix}Type2`] = condition.secondOp;
+    params[`${prefix}Value2`] = secondValue;
   }
 
+  return params;
+};
+
+const buildQueryParams = (withPage = true) => {
+  const params = {
+    tradeStartDate: startDate.value,
+    tradeEndDate: endDate.value,
+    ...buildConditionParams("limitUpTimeFilter", limitUpTimeFilter.value),
+    ...buildConditionParams("openPctChgFilter", openPctChgFilter.value),
+  };
+
+  if (withPage) {
+    params.page = page.value;
+    params.pageSize = pageSize.value;
+  }
+
+  return params;
+};
+
+const resetFilters = () => {
+  const latestTradeDate = getLatestTradeDate();
+  startDate.value = latestTradeDate;
+  endDate.value = latestTradeDate;
+  limitUpTimeFilter.value = { ...DEFAULT_LIMIT_UP_TIME_FILTER };
+  openPctChgFilter.value = { ...DEFAULT_OPEN_PCT_CHG_FILTER };
+  page.value = 1;
+};
+
+const handleReset = async () => {
+  resetFilters();
+  if (canQuery.value) {
+    await handleQuery(true);
+  }
+};
+
+const getLatestTradeDate = () => {
+  if (!openDatesSet.value.size) return "";
+  const openDates = [...openDatesSet.value].sort();
+
+  if (!maxTradeDate.value) return openDates.at(-1) || "";
+  if (openDatesSet.value.has(maxTradeDate.value)) return maxTradeDate.value;
+
+  return (
+    openDates.filter((date) => date <= maxTradeDate.value).at(-1) ||
+    openDates.at(-1) ||
+    ""
+  );
+};
+
+const handleQuery = async (resetPage = false) => {
+  if (!validateDateRange()) return;
+  if (resetPage) page.value = 1;
+
+  loading.value = true;
+  try {
+    const res = await getSecondBoardProfit(buildQueryParams(true));
+    tableData.value = Array.isArray(res?.list) ? res.list : [];
+    total.value = Number(res?.total || 0);
+  } catch (err) {
+    console.error("加载二板早盘次日盈利列表失败", err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handlePageChange = async (currentPage) => {
+  page.value = currentPage;
+  await handleQuery(false);
+};
+
+const handlePageSizeChange = async (currentPageSize) => {
+  pageSize.value = currentPageSize;
+  page.value = 1;
+  await handleQuery(false);
+};
+
+const handleDownload = async () => {
+  if (!validateDateRange()) return;
+
   downloading.value = true;
   try {
-    const blob = await downloadSecondBoardProfitCsv({
-      start_date: startDate.value,
-      end_date: endDate.value,
-    });
+    const blob = await downloadSecondBoardProfitCsv(buildQueryParams(false));
     saveBlob(blob, getDownloadFilename());
     ElMessage.success("CSV 下载已开始");
   } catch (err) {
@@ -161,6 +561,32 @@ const handleDownload = async () => {
   }
 };
 
+const validateDateRange = () => {
+  if (!startDate.value || !endDate.value) {
+    ElMessage.warning("请选择日期范围");
+    return false;
+  }
+
+  if (endDate.value < startDate.value) {
+    ElMessage.warning("结束日期不能早于起始日期");
+    return false;
+  }
+
+  if (openDatesSet.value.size > 0) {
+    if (!openDatesSet.value.has(startDate.value)) {
+      ElMessage.warning("起不是交易日");
+      return false;
+    }
+
+    if (!openDatesSet.value.has(endDate.value)) {
+      ElMessage.warning("终不是交易日");
+      return false;
+    }
+  }
+
+  return true;
+};
+
 const saveBlob = (blob, filename) => {
   const url = window.URL.createObjectURL(blob);
   const link = document.createElement("a");
@@ -178,6 +604,202 @@ const getDownloadFilename = () => {
   const end = endDate.value.replaceAll("-", "");
   return `limit_second_board_profit_${start}_${end}_daily_detail.csv`;
 };
+
+const openKlineDialog = async (row) => {
+  const code = row.ts_code;
+  if (!code) return;
+
+  dialogTitle.value = `${row.name || ""} (${code}) - K线走势`;
+  dialogVisible.value = true;
+  klineLoading.value = true;
+
+  try {
+    const rawData = await getKlineData(code);
+    const klineData = Array.isArray(rawData)
+      ? rawData.map((item) => ({
+          trade_date: item.trade_date,
+          open: item.open,
+          close: item.close,
+          low: item.low,
+          high: item.high,
+          pct_chg: item.pct_chg,
+          vol: item.vol,
+        }))
+      : [];
+
+    await nextTick();
+    renderKlineChart(klineData);
+
+    if (!klineData.length) {
+      ElMessage.warning("暂无 K 线数据");
+    }
+  } catch (err) {
+    console.error("加载K线详情失败", err);
+  } finally {
+    klineLoading.value = false;
+  }
+};
+
+const renderKlineChart = (klineData) => {
+  const chartDom = document.getElementById("download-kline-chart");
+  if (!chartDom) return;
+
+  disposeChart();
+  chartInstance = echarts.init(chartDom);
+
+  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,
+  ]);
+  const volumes = klineData.map((item) => ({
+    value: Number(item.vol ?? 0),
+    itemStyle: {
+      color: Number(item.pct_chg || 0) >= 0 ? "#e85d75" : "#45b37b",
+    },
+  }));
+
+  chartInstance.setOption({
+    animation: false,
+    tooltip: {
+      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";
+        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"/>
+            涨跌幅: <span style="color:${color};font-weight:bold;">${formatSignedPct(pct)}</span><br/>
+            开盘价: ${formatPrice(currentItem.open)}<br/>
+            收盘价: ${formatPrice(currentItem.close)}<br/>
+            最低价: ${formatPrice(currentItem.low)}<br/>
+            最高价: ${formatPrice(currentItem.high)}<br/>
+            成交量: ${formatVolume(currentItem.vol)}
+          </div>`;
+      },
+    },
+    axisPointer: {
+      link: [{ xAxisIndex: "all" }],
+    },
+    grid: [
+      { 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",
+        gridIndex: 1,
+        data: dates,
+        scale: true,
+        boundaryGap: false,
+        axisLine: { onZero: false },
+        axisLabel: { show: false },
+        axisTick: { show: false },
+      },
+    ],
+    yAxis: [
+      { scale: true, splitArea: { show: true } },
+      {
+        scale: true,
+        gridIndex: 1,
+        splitNumber: 2,
+        axisLabel: {
+          formatter(value) {
+            return formatVolume(value);
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: "#eef2f7",
+          },
+        },
+      },
+    ],
+    dataZoom: [
+      { type: "inside", xAxisIndex: [0, 1], start: 95, end: 100 },
+      { show: true, type: "slider", xAxisIndex: [0, 1], top: "90%" },
+    ],
+    series: [
+      {
+        name: "日K",
+        type: "candlestick",
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        data: values,
+        itemStyle: {
+          color: "#e85d75",
+          color0: "#45b37b",
+          borderColor: "#e85d75",
+          borderColor0: "#45b37b",
+        },
+      },
+      {
+        name: "成交量",
+        type: "bar",
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        barMaxWidth: 12,
+        data: volumes,
+      },
+    ],
+  });
+  chartInstance.resize();
+};
+
+const disposeChart = () => {
+  if (!chartInstance) return;
+  chartInstance.dispose();
+  chartInstance = null;
+};
+
+const formatPrice = (value) => {
+  if (value === null || value === undefined || value === "") return "-";
+  return Number(value).toFixed(2);
+};
+
+const formatPct = (value) => {
+  if (value === null || value === undefined || value === "") return "-";
+  return `${Number(value).toFixed(2)}%`;
+};
+
+const formatSignedPct = (value) => {
+  const number = Number(value || 0);
+  return `${number > 0 ? "+" : ""}${number.toFixed(2)}%`;
+};
+
+const formatAmount = (value) => {
+  if (value === null || value === undefined || value === "") return "-";
+  const number = Number(value);
+  if (!Number.isFinite(number)) return "-";
+  if (Math.abs(number) >= 100000000)
+    return `${(number / 100000000).toFixed(2)}亿`;
+  if (Math.abs(number) >= 10000) return `${(number / 10000).toFixed(2)}万`;
+  return number.toFixed(2);
+};
+
+const formatVolume = (value) => {
+  const number = Number(value || 0);
+  if (Math.abs(number) >= 100000000)
+    return `${(number / 100000000).toFixed(2)}亿`;
+  if (Math.abs(number) >= 10000) return `${(number / 10000).toFixed(2)}万`;
+  return number.toFixed(0);
+};
 </script>
 
 <style scoped>
@@ -188,40 +810,33 @@ const getDownloadFilename = () => {
   background: #f4f7f9;
 }
 
-.download-toolbar,
-.download-panel {
+.download-panel,
+.table-panel {
   background: #fff;
   border: 1px solid #e5edf5;
   border-radius: 12px;
   box-shadow: 0 8px 22px rgba(31, 42, 55, 0.04);
 }
 
-.download-toolbar {
-  padding: 24px;
-  margin-bottom: 16px;
-}
-
-.toolbar-copy h1 {
-  margin: 0 0 8px;
-  font-size: 28px;
-  line-height: 36px;
-  font-weight: 700;
-  letter-spacing: 0;
-  color: #1f2a37;
-}
-
-.toolbar-copy p,
-.panel-head p {
+.panel-head p,
+.table-head p {
+  margin: 0;
   color: #667085;
   font-size: 14px;
   line-height: 22px;
 }
 
-.download-panel {
+.download-panel,
+.table-panel {
   padding: 22px 24px 24px;
 }
 
-.panel-head {
+.download-panel {
+  margin-bottom: 16px;
+}
+
+.panel-head,
+.table-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -229,7 +844,8 @@ const getDownloadFilename = () => {
   margin-bottom: 18px;
 }
 
-.panel-head h2 {
+.panel-head h2,
+.table-head h2 {
   margin: 0 0 6px;
   font-size: 20px;
   line-height: 28px;
@@ -243,68 +859,116 @@ const getDownloadFilename = () => {
   flex-wrap: wrap;
   gap: 10px 6px;
   align-items: flex-end;
-  margin-bottom: 18px;
+  margin-bottom: 0;
+}
+
+:deep(.action-form-item) {
+  width: 100%;
+  padding-top: 16px;
+  margin-top: 6px;
+  border-top: 1px solid #eef2f7;
+}
+
+:deep(.action-form-item .el-form-item__content) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  width: 100%;
 }
 
 .date-input {
-  width: 156px;
+  width: 136px;
 }
 
-.rule-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.rule-item {
-  min-height: 76px;
-  padding: 14px;
-  box-sizing: border-box;
-  border: 1px solid #e8eef5;
-  border-radius: 8px;
-  background: #f8fbff;
+.condition-group {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  align-items: center;
   gap: 6px;
 }
 
-.rule-label {
-  color: #7c8aa5;
-  font-size: 12px;
-  line-height: 18px;
+.operator-input {
+  width: 70px;
 }
 
-.rule-item strong {
-  color: #1f2a37;
-  font-size: 16px;
-  line-height: 22px;
+.condition-value {
+  width: 112px;
+}
+
+.table-shell {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.stock-link {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: #2f7edb;
+  font: inherit;
+  font-family: "JetBrains Mono", monospace;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.stock-link:hover {
+  color: #155db5;
+  text-decoration: underline;
+}
+
+.pagination-row {
+  display: flex;
+  justify-content: flex-end;
+  padding-top: 16px;
+}
+
+:deep(.profit-table .el-table__cell) {
+  white-space: nowrap;
 }
 
 :deep(.el-form-item) {
   margin-bottom: 0;
 }
 
-:deep(.el-input__wrapper),
-:deep(.el-input__inner) {
+:deep(.date-input .el-input__wrapper),
+:deep(.date-input .el-input__inner) {
   cursor: pointer;
 }
 
+:deep(.kline-dialog) {
+  max-width: 1200px;
+}
+
+:deep(.kline-dialog .el-overlay-dialog) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+:deep(.kline-dialog .el-dialog) {
+  border-radius: 18px;
+  overflow: hidden;
+}
+
+:deep(.kline-dialog .el-dialog__header) {
+  cursor: move;
+  margin-right: 0;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
 @media (max-width: 820px) {
   .download-page {
     padding: 12px;
   }
 
-  .download-toolbar,
-  .download-panel {
+  .download-panel,
+  .table-panel {
     padding: 16px;
   }
 
-  .toolbar-copy h1 {
-    font-size: 24px;
-    line-height: 32px;
-  }
-
   .download-form,
   :deep(.download-form .el-form-item),
   :deep(.download-form .el-form-item__content),
@@ -313,8 +977,34 @@ const getDownloadFilename = () => {
     width: 100%;
   }
 
-  .rule-grid {
-    grid-template-columns: 1fr;
+  :deep(.action-form-item .el-form-item__content) {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .condition-group {
+    display: grid;
+    grid-template-columns: 76px minmax(0, 1fr);
+    width: 100%;
+  }
+
+  .operator-input,
+  .condition-value {
+    width: 100%;
+  }
+
+  .table-head {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .pagination-row {
+    justify-content: flex-start;
+    overflow-x: auto;
+  }
+
+  :deep(.kline-dialog .el-dialog) {
+    border-radius: 14px;
   }
 }
 </style>