修订与优化

src/router/index.js

@@ -17,11 +17,15 @@ const routes = [
     component: () => import('@/views/stock/LimitBoard.vue'),
     meta: { title: '涨停连板概览', icon: 'Histogram' }
   },
+  {
+    path: '/stock/second-board',
+    name: 'StockSecondBoard',
+    component: () => import('@/views/stock/SecondBoard.vue'),
+    meta: { title: '二板', icon: 'Download' }
+  },
   {
     path: '/stock/download',
-    name: 'StockDownload',
+    redirect: '/stock/second-board'
-    component: () => import('@/views/stock/Download.vue'),
-    meta: { title: '下载', icon: 'Download' }
   }
 ]
 

src/views/stock/SecondBoard.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="download-page">
+  <div class="second-board-page">
-    <section class="download-panel">
+    <section class="second-board-panel">
       <div class="panel-head">
         <div>
           <h2>二板次日盈利</h2>
         </div>
       </div>
 
-      <el-form :inline="true" class="download-form">
+      <el-form :inline="true" class="second-board-form">
         <el-form-item label="起">
           <el-date-picker
             v-model="startDate"
@@ -345,7 +345,8 @@
           v-model:page-size="pageSize"
           :total="total"
           :page-sizes="[10, 20, 50, 100, 1000]"
-          layout="total, sizes, prev, pager, next, jumper"
+          :layout="paginationLayout"
+          :pager-count="paginationPagerCount"
           background
           @size-change="handlePageSizeChange"
           @current-change="handlePageChange"
@@ -365,7 +366,7 @@
       @closed="disposeChart"
     >
       <div
-        id="download-kline-chart"
+        id="second-board-kline-chart"
         v-loading="klineLoading"
         :style="{ width: '100%', height: `${chartHeight}px` }"
       ></div>
@@ -390,6 +391,10 @@ import {
   getSecondBoardProfit,
 } from "@/api/stock";
 
+defineOptions({
+  name: "SecondBoard",
+});
+
 const DEFAULT_LIMIT_UP_TIME_FILTER = {
   firstOp: "<",
   firstValue: "11:00:00",
@@ -430,17 +435,25 @@ const canQuery = computed(
 );
 
 const dialogWidth = computed(() => {
-  if (viewportWidth.value <= 820) return "96%";
+  if (viewportWidth.value <= 820) return "94%";
   if (viewportWidth.value <= 1024) return "92%";
   return "85%";
 });
 
 const chartHeight = computed(() => {
-  if (viewportWidth.value <= 820) return 360;
+  if (viewportWidth.value <= 820) return 380;
   if (viewportWidth.value <= 1024) return 440;
   return 550;
 });
 
+const paginationLayout = computed(() =>
+  viewportWidth.value <= 820
+    ? "total, prev, pager, next"
+    : "total, sizes, prev, pager, next, jumper",
+);
+
+const paginationPagerCount = computed(() => (viewportWidth.value <= 820 ? 5 : 7));
+
 onMounted(async () => {
   window.addEventListener("resize", syncViewport);
 
@@ -456,7 +469,7 @@ onMounted(async () => {
       await handleQuery(true);
     }
   } catch (err) {
-    console.error("初始化下载页失败", err);
+    console.error("初始化二板页失败", err);
   }
 });
 
@@ -675,7 +688,7 @@ const openKlineDialog = async (row) => {
 };
 
 const renderKlineChart = (klineData) => {
-  const chartDom = document.getElementById("download-kline-chart");
+  const chartDom = document.getElementById("second-board-kline-chart");
   if (!chartDom) return;
 
   disposeChart();
@@ -837,7 +850,7 @@ const formatVolume = (value) => {
 </script>
 
 <style scoped>
-.download-page {
+.second-board-page {
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -848,11 +861,11 @@ const formatVolume = (value) => {
   background: #f4f7f9;
 }
 
-.download-panel,
+.second-board-panel,
 .table-panel {
   background: #fff;
   border: 1px solid #e5edf5;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: 0 8px 22px rgba(31, 42, 55, 0.04);
 }
 
@@ -864,12 +877,12 @@ const formatVolume = (value) => {
   line-height: 22px;
 }
 
-.download-panel,
+.second-board-panel,
 .table-panel {
   padding: 22px 24px 24px;
 }
 
-.download-panel {
+.second-board-panel {
   flex: 0 0 auto;
   margin-bottom: 16px;
 }
@@ -900,7 +913,7 @@ const formatVolume = (value) => {
   color: #1f2a37;
 }
 
-.download-form {
+.second-board-form {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 6px;
@@ -942,7 +955,7 @@ const formatVolume = (value) => {
 
 .table-shell {
   flex: 1 1 auto;
-  min-height: 0;
+  min-height: 360px;
   width: 100%;
   overflow: hidden;
 }
@@ -987,6 +1000,7 @@ const formatVolume = (value) => {
 
 :deep(.el-form-item) {
   margin-bottom: 0;
+  margin-right: 0;
 }
 
 :deep(.date-input .el-input__wrapper),
@@ -1018,32 +1032,86 @@ const formatVolume = (value) => {
   border-bottom: 1px solid #f5f5f5;
 }
 
-@media (max-width: 820px) {
+@media (max-width: 1180px) {
-  .download-page {
+  .second-board-page {
-    padding: 12px;
-  }
-
-  .download-panel,
-  .table-panel {
     padding: 16px;
   }
 
-  .download-form,
+  .second-board-panel,
-  :deep(.download-form .el-form-item),
+  .table-panel {
-  :deep(.download-form .el-form-item__content),
+    padding: 18px;
-  .date-input,
-  :deep(.download-form .el-button) {
-    width: 100%;
   }
 
-  :deep(.action-form-item .el-form-item__content) {
+  .second-board-form {
-    flex-direction: column;
+    display: grid;
-    gap: 8px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  :deep(.second-board-form .el-form-item),
+  :deep(.second-board-form .el-form-item__content),
+  .date-input {
+    width: 100%;
   }
 
   .condition-group {
     display: grid;
-    grid-template-columns: 76px minmax(0, 1fr);
+    grid-template-columns: 66px minmax(0, 1fr) 66px minmax(0, 1fr);
+    width: 100%;
+  }
+
+  .operator-input,
+  .condition-value {
+    width: 100%;
+  }
+
+  :deep(.action-form-item) {
+    grid-column: 1 / -1;
+    padding-top: 12px;
+    margin-top: 0;
+  }
+
+  :deep(.action-form-item .el-form-item__content) {
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 820px) {
+  .second-board-page {
+    padding: 12px;
+  }
+
+  .second-board-panel,
+  .table-panel {
+    padding: 16px;
+  }
+
+  .second-board-form {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  :deep(.second-board-form .el-form-item),
+  :deep(.second-board-form .el-form-item__content),
+  .date-input {
+    width: 100%;
+  }
+
+  :deep(.action-form-item .el-form-item__content) {
+    justify-content: stretch;
+    gap: 8px;
+  }
+
+  :deep(.action-form-item .el-button) {
+    flex: 1 1 0;
+    min-width: 0;
+    margin-left: 0;
+  }
+
+  .condition-group {
+    display: grid;
+    grid-template-columns: 72px minmax(0, 1fr);
     width: 100%;
   }
 
@@ -1057,13 +1125,37 @@ const formatVolume = (value) => {
     flex-direction: column;
   }
 
+  .table-shell {
+    min-height: 430px;
+  }
+
   .pagination-row {
     justify-content: flex-start;
     overflow-x: auto;
+    padding-top: 12px;
+    padding-bottom: 2px;
   }
 
   :deep(.kline-dialog .el-dialog) {
     border-radius: 14px;
   }
+
+  :deep(.kline-dialog .el-overlay-dialog) {
+    padding: 14px;
+  }
+}
+
+@media (max-width: 640px) {
+  .second-board-form {
+    grid-template-columns: 1fr;
+  }
+
+  :deep(.action-form-item .el-form-item__content) {
+    flex-direction: column;
+  }
+
+  :deep(.action-form-item .el-button) {
+    width: 100%;
+  }
 }
 </style>