前端样式修改

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/views/stock/BreakNextPerformance.vue

@@ -33,11 +33,9 @@
         </el-form-item>
         <el-form-item label="筛选">
           <div class="checkbox-group">
-            <el-checkbox v-model="tOpenGainLt101">
-              T开盘小于1%
-            </el-checkbox>
+            <el-checkbox v-model="tOpenGainLt101"> 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

@@ -399,18 +399,24 @@ const formatProfitFlag = (value) => {
 
 <style scoped>
 .second-calendar-page {
-  min-height: 100vh;
-  min-height: 100dvh;
-  padding: 24px;
+  height: 100vh;
+  height: 100dvh;
+  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 +424,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 +489,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;
-  line-height: 30px;
+  font-size: 20px;
+  line-height: 26px;
   font-weight: 700;
   color: #1f2a37;
 }
 
 .month-range {
-  font-size: 13px;
-  line-height: 20px;
+  font-size: 12px;
+  line-height: 18px;
   color: #7c8aa5;
 }
 
@@ -502,26 +517,33 @@ const formatProfitFlag = (value) => {
 }
 
 .weekday-row {
-  gap: 8px;
-  margin-bottom: 8px;
+  flex: 0 0 auto;
+  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;
-  padding: 12px;
+  min-height: 0;
+  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 +587,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;
-  margin-bottom: 10px;
+  min-height: 20px;
+  margin-bottom: 5px;
 }
 
 .day-number {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 15px;
+  line-height: 20px;
   font-weight: 700;
   color: #27364a;
 }
@@ -589,8 +612,8 @@ const formatProfitFlag = (value) => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 18px;
+  height: 18px;
   border-radius: 999px;
   background: #eef2f7;
   color: #7c8aa5;
@@ -600,9 +623,10 @@ const formatProfitFlag = (value) => {
 }
 
 .day-metrics {
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 3px;
 }
 
 .metric-row {
@@ -610,15 +634,15 @@ const formatProfitFlag = (value) => {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  min-height: 24px;
-  font-size: 13px;
-  line-height: 20px;
+  min-height: 18px;
+  font-size: 12px;
+  line-height: 18px;
   color: #5f6f86;
 }
 
 .metric-row strong {
-  font-size: 15px;
-  line-height: 22px;
+  font-size: 14px;
+  line-height: 18px;
   font-weight: 800;
   color: #26364b;
 }
@@ -636,14 +660,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;
-  line-height: 20px;
+  font-size: 12px;
+  line-height: 18px;
 }
 
 .detail-summary {
@@ -686,11 +711,11 @@ const formatProfitFlag = (value) => {
 
 @media (max-width: 1024px) {
   .second-calendar-page {
-    padding: 18px;
+    padding: 14px;
   }
 
   .calendar-panel {
-    padding: 18px;
+    padding: 14px;
   }
 
   .calendar-stage {
@@ -699,8 +724,7 @@ const formatProfitFlag = (value) => {
   }
 
   .day-card {
-    min-height: 128px;
-    padding: 10px;
+    padding: 8px;
   }
 }
 
@@ -742,7 +766,6 @@ const formatProfitFlag = (value) => {
   }
 
   .day-card {
-    min-height: 112px;
     padding: 8px;
   }
 
@@ -762,7 +785,6 @@ const formatProfitFlag = (value) => {
   }
 
   .day-placeholder {
-    min-height: 58px;
     font-size: 12px;
   }
 
@@ -770,4 +792,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>

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,9 +14,9 @@ export default defineConfig({
     port: 5173,      // 你的端口号
     proxy: {
       '/api/v1': {
-        target: 'http://localhost:18080',
+        target: apiProxyTarget,
         changeOrigin: true
       }
     }
   }
-})
+})