From d22f39bae25161982c5532dc1b2145fe6bc6d8a1 Mon Sep 17 00:00:00 2001
From: Cassianvale <cassianvale4890@linux.do>
Date: Tue, 11 Mar 2025 14:00:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=B6=E9=97=B4=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ApiConfigPanel.vue    | 12 ++-
 frontend/src/components/MarketTimeDisplay.vue | 86 ++++++++++++++--
 frontend/src/components/SafeAreaBottom.vue    | 24 -----
 frontend/src/components/StockAnalysisApp.vue  | 16 ++-
 frontend/src/style.css                        | 99 ++++++++++++++++++-
 5 files changed, 197 insertions(+), 40 deletions(-)
 delete mode 100644 frontend/src/components/SafeAreaBottom.vue

diff --git a/frontend/src/components/ApiConfigPanel.vue b/frontend/src/components/ApiConfigPanel.vue
index 1509ebf..eb0bcd1 100644
--- a/frontend/src/components/ApiConfigPanel.vue
+++ b/frontend/src/components/ApiConfigPanel.vue
@@ -465,8 +465,9 @@ onMounted(() => {
 
 <style scoped>
 .api-config-section {
-  margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
   position: relative;
+  padding-bottom: 10px;
 }
 
 .toggle-button {
@@ -487,12 +488,14 @@ onMounted(() => {
 }
 
 .api-config-card {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   border-radius: 8px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   background: linear-gradient(to bottom, rgba(240, 240, 245, 0.5), rgba(250, 250, 252, 0.8));
   padding: 16px;
   transition: all 0.3s ease;
+  overflow: visible;
+  min-height: 100px;
 }
 
 .api-info-alert {
@@ -680,13 +683,16 @@ onMounted(() => {
 
 @media (max-width: 480px) {
   .api-config-section {
-    margin-bottom: 0.75rem;
+    margin-bottom: 1.5rem;
     width: 100%;
+    padding-bottom: 15px;
   }
   
   .api-config-card {
     padding: 0.5rem;
     border-radius: 0.625rem !important;
+    margin-bottom: 1rem;
+    min-height: 80px;
   }
   
   .api-buttons {
diff --git a/frontend/src/components/MarketTimeDisplay.vue b/frontend/src/components/MarketTimeDisplay.vue
index 9722841..b565949 100644
--- a/frontend/src/components/MarketTimeDisplay.vue
+++ b/frontend/src/components/MarketTimeDisplay.vue
@@ -250,6 +250,18 @@ onBeforeUnmount(() => {
   border-radius: 0.75rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   background: linear-gradient(to bottom, rgba(250, 250, 252, 0.8), rgba(245, 245, 250, 0.5));
+  min-height: 200px; /* 确保卡片有最小高度 */
+}
+
+/* 确保网格布局在各种屏幕尺寸下正确显示 */
+:deep(.n-grid) {
+  justify-content: center;
+  width: 100%;
+}
+
+:deep(.n-grid-item) {
+  display: flex;
+  justify-content: center;
 }
 
 .time-block {
@@ -262,17 +274,24 @@ onBeforeUnmount(() => {
   transition: all 0.3s ease;
   height: 100%;
   box-sizing: border-box;
+  max-width: 100%; /* 确保不超过父容器宽度 */
 }
 
 .current-time-block {
   background-color: rgba(32, 128, 240, 0.05);
   border: 1px solid rgba(32, 128, 240, 0.1);
+  max-width: 360px; /* 限制当前时间块的最大宽度 */
+  width: 100%; /* 确保响应式 */
+  margin: 0 auto; /* 居中显示 */
 }
 
 .market-block {
   position: relative;
   overflow: hidden;
   border: 1px solid transparent;
+  max-width: 360px; /* 限制市场块的最大宽度 */
+  width: 100%; /* 确保响应式 */
+  margin: 0 auto; /* 居中显示 */
 }
 
 .market-open-block {
@@ -305,6 +324,7 @@ onBeforeUnmount(() => {
   justify-content: center;
   min-height: 36px;
   width: 100%;
+  flex-wrap: wrap; /* 允许内容在必要时换行 */
 }
 
 .status-tag {
@@ -315,6 +335,7 @@ onBeforeUnmount(() => {
   align-items: center;
   justify-content: center;
   min-width: 100px;
+  max-width: 100%; /* 确保不超过父容器宽度 */
 }
 
 .market-status :deep(.n-tag__icon) {
@@ -336,6 +357,11 @@ onBeforeUnmount(() => {
   font-size: 0.875rem;
   color: var(--n-text-color-3);
   margin-top: 0.5rem;
+  width: 100%; /* 确保文本容器占满宽度 */
+  text-align: center; /* 文本居中 */
+  white-space: nowrap; /* 防止文本换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }
 
 /* 进度条样式 */
@@ -349,6 +375,7 @@ onBeforeUnmount(() => {
   position: relative;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(200, 200, 200, 0.4);
+  max-width: 100%; /* 确保不超过父容器宽度 */
 }
 
 .market-progress-bar {
@@ -398,6 +425,7 @@ onBeforeUnmount(() => {
   padding: 0 2px;
   font-weight: 500;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
+  box-sizing: border-box; /* 确保内边距不会增加宽度 */
 }
 
 /* 反向标记（休市状态） */
@@ -407,6 +435,10 @@ onBeforeUnmount(() => {
 
 .progress-marker {
   position: relative;
+  white-space: nowrap; /* 防止文本换行 */
+  max-width: 45%; /* 限制宽度，防止重叠 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
 }
 
 @keyframes shimmer {
@@ -435,11 +467,12 @@ onBeforeUnmount(() => {
   .market-time-card {
     padding: 0.5rem;
     margin-bottom: 1rem;
+    min-height: 180px; /* 移动端下的最小高度 */
   }
   
   .time-block {
     padding: 0.625rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.75rem; /* 增加底部外边距 */
   }
   
   .current-time {
@@ -452,8 +485,14 @@ onBeforeUnmount(() => {
   }
   
   .status-tag {
-    min-width: 120px;
-    height: 40px !important;
+    min-width: 100px; /* 减小移动端下的最小宽度 */
+    height: 36px !important;
+    font-size: 0.875rem; /* 减小字体大小 */
+  }
+  
+  .time-counter {
+    font-size: 0.75rem; /* 减小字体大小 */
+    margin-top: 0.375rem;
   }
   
   /* 增强视觉层次 */
@@ -486,10 +525,14 @@ onBeforeUnmount(() => {
   }
   
   .progress-markers {
-    top: -20px;
+    top: -18px; /* 调整位置 */
     font-size: 0.6875rem;
   }
   
+  .progress-marker {
+    max-width: 40%; /* 移动端下进一步限制宽度 */
+  }
+  
   .progress-marker.start::before,
   .progress-marker.end::before {
     top: -10px;
@@ -506,16 +549,26 @@ onBeforeUnmount(() => {
     background-color: rgba(90, 90, 90, 0.9);
     box-shadow: 0 0 4px rgba(90, 90, 90, 0.5);
   }
+  
+  .current-time-block {
+    max-width: 360px; /* 移动端下的最大宽度 */
+  }
+  
+  .market-block {
+    max-width: 360px; /* 移动端下的最大宽度 */
+  }
 }
 
 /* 小屏幕手机适配 */
 @media (max-width: 480px) {
   .market-time-card {
     padding: 0.375rem;
+    min-height: 160px; /* 小屏幕下的最小高度 */
   }
   
   .time-block {
     padding: 0.5rem;
+    margin-bottom: 1rem; /* 增加小屏幕下的底部外边距 */
   }
   
   .current-time {
@@ -531,8 +584,9 @@ onBeforeUnmount(() => {
   }
   
   .status-tag {
-    min-width: 100px;
-    font-size: 0.875rem;
+    min-width: 90px; /* 进一步减小最小宽度 */
+    font-size: 0.8125rem;
+    padding: 0 12px !important; /* 减小内边距 */
   }
   
   /* 确保边框在小屏幕上清晰可见 */
@@ -547,10 +601,14 @@ onBeforeUnmount(() => {
   }
   
   .progress-markers {
-    top: -20px;
+    top: -16px; /* 调整位置 */
     font-size: 0.625rem;
   }
   
+  .progress-marker {
+    max-width: 35%; /* 小屏幕下进一步限制宽度 */
+  }
+  
   .progress-marker.start::before,
   .progress-marker.end::before {
     top: -8px;
@@ -565,5 +623,19 @@ onBeforeUnmount(() => {
   .progress-open, .progress-closed {
     border-width: 0;
   }
+  
+  .current-time-block {
+    max-width: 300px; /* 小屏幕下的最大宽度 */
+  }
+  
+  .market-block {
+    max-width: 300px; /* 小屏幕下的最大宽度 */
+  }
+}
+
+/* 确保API配置面板有足够的空间 */
+.n-collapse {
+  margin-bottom: 16px; /* 添加底部间距 */
+  padding-bottom: 8px; /* 增加内边距底部 */
 }
 </style>
diff --git a/frontend/src/components/SafeAreaBottom.vue b/frontend/src/components/SafeAreaBottom.vue
deleted file mode 100644
index 0f3f46e..0000000
--- a/frontend/src/components/SafeAreaBottom.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <div class="safe-area-bottom"></div>
-</template>
-
-<script setup lang="ts">
-// 底部安全区域组件，用于解决底部背景显示问题
-</script>
-
-<style scoped>
-.safe-area-bottom {
-  width: 100%;
-  height: env(safe-area-inset-bottom, 0);
-  min-height: 10px; /* 确保在不支持env()的浏览器上也有一定的空间 */
-  background-color: inherit;
-  position: relative;
-  z-index: 1;
-}
-
-@media (max-width: 768px) {
-  .safe-area-bottom {
-    min-height: 20px;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/frontend/src/components/StockAnalysisApp.vue b/frontend/src/components/StockAnalysisApp.vue
index 9a73e6e..3100cc8 100644
--- a/frontend/src/components/StockAnalysisApp.vue
+++ b/frontend/src/components/StockAnalysisApp.vue
@@ -143,9 +143,7 @@
             </n-grid-item>
           </n-grid>
         </n-card>
-        
-        <!-- 底部安全区域 -->
-        <SafeAreaBottom />
+
       </n-layout-content>
     </n-layout>
   </div>
@@ -182,7 +180,6 @@ import MarketTimeDisplay from './MarketTimeDisplay.vue';
 import ApiConfigPanel from './ApiConfigPanel.vue';
 import StockSearch from './StockSearch.vue';
 import StockCard from './StockCard.vue';
-import SafeAreaBottom from './SafeAreaBottom.vue';
 import AnnouncementBanner from './AnnouncementBanner.vue';
 
 import { apiService } from '@/services/api';
@@ -974,6 +971,8 @@ function handleAnnouncementClose() {
   width: 100%;
   max-width: 100vw;
   overflow-x: hidden;
+  padding-bottom: 20px; /* 增加底部内边距 */
+  box-sizing: border-box;
 }
 
 .main-layout {
@@ -981,6 +980,7 @@ function handleAnnouncementClose() {
   width: 100%;
   max-width: 100vw;
   overflow-x: hidden;
+  min-height: calc(100vh - 20px); /* 确保至少占满视口高度减去底部空间 */
 }
 
 .main-content {
@@ -1084,6 +1084,10 @@ function handleAnnouncementClose() {
     width: 100% !important;
     max-width: 100% !important;
   }
+  
+  .app-container {
+    padding-bottom: 30px; /* 增加移动端底部内边距 */
+  }
 }
 
 /* 小屏幕手机适配 */
@@ -1116,5 +1120,9 @@ function handleAnnouncementClose() {
   :deep(.n-dropdown-menu) {
     max-width: 90vw;
   }
+  
+  .app-container {
+    padding-bottom: 40px; /* 增加小屏幕底部内边距 */
+  }
 }
 </style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index cfc7325..f9077c4 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -24,10 +24,9 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  background-color: #f5f5f7;
 }
 
 h1 {
@@ -63,6 +62,8 @@ button:focus-visible {
   max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
+  width: 100%;
+  box-sizing: border-box;
   text-align: center;
 }
 
@@ -113,3 +114,97 @@ input::-moz-focus-inner {
   outline: none !important;
   box-shadow: 0 0 0 2px rgba(32, 128, 240, 0.2) !important;
 }
+/* 组件宽度统一规范 */
+.component-container {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+.form-container {
+  width: 100%;
+  max-width: 900px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+.control-container {
+  width: 100%;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  body {
+    background-color: #f5f5f7;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0;
+  }
+  
+  #app {
+    width: 100%;
+    overflow-x: hidden;
+    padding: 1rem;
+    margin: 0 auto;
+  }
+  
+  .component-container {
+    width: calc(100% - 20px);
+    max-width: 560px;
+  }
+  
+  .form-container {
+    width: calc(100% - 20px);
+    max-width: 480px;
+  }
+  
+  .control-container {
+    width: calc(100% - 16px);
+    max-width: 440px;
+  }
+}
+
+@media (max-width: 480px) {
+  #app {
+    padding: 0.5rem;
+  }
+  
+  .component-container {
+    width: calc(100% - 16px);
+    max-width: 360px;
+  }
+  
+  .form-container {
+    width: calc(100% - 12px);
+    max-width: 320px;
+  }
+  
+  .control-container {
+    width: calc(100% - 8px);
+    max-width: 300px;
+  }
+}
+
+/* 表单控件统一样式 */
+.uniform-input,
+.uniform-select,
+.uniform-button {
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 0.5rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  justify-content: center;
+}
+