样式统一

2025-12-26 17:29:17 +08:00
parent 09393f8ee5
commit c0264faca5
14 changed files with 151 additions and 115 deletions
--- a/Web/src/App.vue
+++ b/Web/src/App.vue
@@ -26,6 +26,7 @@
 <script setup>
 import { RouterView, useRoute } from 'vue-router'
 import { ref, onMounted, onUnmounted, computed } from 'vue'
+import '@/styles/common.css'

 const updateVh = () => {
  // 获取真实的视口高度（PWA 模式下准确）
--- a/Web/src/assets/main.css
+++ b/Web/src/assets/main.css
@@ -59,4 +59,9 @@ html, body, #app {
  margin: 0;
  padding: 0;
  height: 100%;
+}
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background-color: transparent;
 }
--- a/Web/src/styles/common.css
+++ b/Web/src/styles/common.css
@@ -1,45 +1,86 @@
-/* 通用页面容器样式 */
+/* 通用页面容器样式 - 统一风格（灰色背景） */
 .page-container {
-  min-height: var(--vh, 100vh);
-  background-color: #f5f5f5;
-  padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }

@media (prefers-color-scheme: dark) {
  .page-container {
-    background-color: #1a1a1a;
+    background: #141414;
  }
 }

+/* 页面内容区域 */
+.page-content {
+  padding: 16px 0 0 0;
+}
+
 /* 下拉刷新包装器 */
 .refresh-wrapper {
  min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px));
 }

+/* 统一卡片样式 */
+.common-card {
+  background: #ffffff;
+  margin: 0 12px 16px;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .common-card {
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* 卡片头部 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--van-text-color);
+  margin: 0;
+}
+
 /* 增加卡片组的对比度 */
 :deep(.van-cell-group--inset) {
  margin: 10px 16px;
-  background-color: #ffffff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebedf0;
+  border-radius: 16px;
 }

@media (prefers-color-scheme: dark) {
  :deep(.van-cell-group--inset) {
-    background-color: #2c2c2c;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
 }

 /* 单元格样式 */
 :deep(.van-cell) {
-  background-color: #ffffff;
-  border-bottom: 1px solid #f0f0f0;
+  background: #ffffff;
+  border-bottom: 1px solid #ebedf0;
 }

@media (prefers-color-scheme: dark) {
  :deep(.van-cell) {
-    background-color: #2c2c2c;
-    border-bottom: 1px solid #3a3a3a;
+    background: #1f1f1f;
+    border-bottom: 1px solid #2c2c2c;
  }
 }

@@ -52,25 +93,28 @@
  padding: 16px;
  height: 100%;
  overflow-y: auto;
-  background-color: #f5f5f5;
+  background: #f7f8fa;
 }

@media (prefers-color-scheme: dark) {
  .detail-popup {
-    background-color: #1a1a1a;
+    background: #141414;
  }
 }

 /* 弹出层内的卡片组样式 */
 .detail-popup :deep(.van-cell-group--inset) {
-  background-color: #ffffff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  background: #ffffff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border: 1px solid #ebedf0;
+  border-radius: 16px;
 }

@media (prefers-color-scheme: dark) {
  .detail-popup :deep(.van-cell-group--inset) {
-    background-color: #2c2c2c;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
 }

--- a/Web/src/views/BillAnalysisView.vue
+++ b/Web/src/views/BillAnalysisView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="analysis-container">
+  <div class="page-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar 
      title="智能分析" 
@@ -197,26 +197,27 @@ const startAnalysis = async () => {
 </script>

 <style scoped>
-.analysis-container {
-  min-height: 100vh;
-  background: var(--van-background-2);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-}
-
 .analysis-content {
  padding: 16px;
 }

 /* 输入区域 */
 .input-section {
-  background: var(--van-background);
+  background: #ffffff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--van-border-color);
+  border: 1px solid #ebedf0;
  margin-bottom: 16px;
 }

+@media (prefers-color-scheme: dark) {
+  .input-section {
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+  }
+}
+
 .input-header h3 {
  font-size: 18px;
  font-weight: 600;
--- a/Web/src/views/CalendarView.vue
+++ b/Web/src/views/CalendarView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="calendar-container">
+  <div class="page-container calendar-container">
    <van-calendar
      title="日历"
      :poppable="false"
--- a/Web/src/views/ClassificationBatch.vue
+++ b/Web/src/views/ClassificationBatch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
    <van-nav-bar 
      title="批量分类" 
      left-text="返回"
--- a/Web/src/views/ClassificationEdit.vue
+++ b/Web/src/views/ClassificationEdit.vue
@@ -1,7 +1,5 @@
 <template>
-  <div 
-  style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));"
-  >
+  <div class="page-container">
    <van-nav-bar 
      :title="navTitle" 
      left-text="返回"
--- a/Web/src/views/ClassificationNLP.vue
+++ b/Web/src/views/ClassificationNLP.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="classification-nlp">
+  <div class="page-container classification-nlp">
    <van-nav-bar
      title="智能分类助手"
      left-text="返回"
@@ -7,7 +7,7 @@
      @click-left="onClickLeft"
    />

-    <div class="container">
+    <div class="page-content">
      <!-- 输入区域 -->
      <div class="input-section">
        <van-cell-group inset>
@@ -299,16 +299,6 @@ const handleSubmit = async () => {
 </script>

 <style scoped>
-.classification-nlp {
-  min-height: 100vh;
-  background-color: var(--van-background, #f7f8fa);
-  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
-}
-
-.container {
-  padding: 0;
-}
-
 .input-section {
  padding: 12px 0;
 }
--- a/Web/src/views/ClassificationSmart.vue
+++ b/Web/src/views/ClassificationSmart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="smart-classification">
+  <div class="page-container smart-classification">
    <van-nav-bar
      title="智能分类"
      left-text="返回"
@@ -7,7 +7,7 @@
      @click-left="onClickLeft"
    />
    
-    <div class="container" style="padding-top: 5px;">
+    <div class="page-content" style="padding-top: 5px;">
      <!-- 统计信息 -->
      <div class="stats-info">
        <span class="stats-label">未分类账单：</span>
@@ -339,11 +339,6 @@ onMounted(() => {
 </script>

 <style scoped>
-.smart-classification {
-  min-height: var(--vh, 100vh);
-  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
-}
-
 /* 统计信息 */
 .stats-info {
  padding: 12px 16px;
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="email-record-container" style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="邮件记录" placeholder>
      <template #right>
--- a/Web/src/views/LoginView.vue
+++ b/Web/src/views/LoginView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login-container">
+  <div class="page-container login-container">
    <div class="login-box">
      <h1 class="login-title">账单</h1>
      <div class="login-form">
--- a/Web/src/views/SettingView.vue
+++ b/Web/src/views/SettingView.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
    <van-nav-bar title="设置" placeholder/>
-    <div class="detail-header">
+    <div class="detail-header" style="padding-bottom: 5px;">
      <p>账单导入</p>
    </div>
    <van-cell-group inset>
@@ -12,7 +12,7 @@
    <!-- 隐藏的文件选择器 -->
    <input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" />

-    <div class="detail-header">
+    <div class="detail-header" style="padding-bottom: 5px;">
      <p>分类处理</p>
    </div>
    <van-cell-group inset>
@@ -21,7 +21,7 @@
      <van-cell title="智能分类" is-link @click="handleSmartClassification" />
      <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
    </van-cell-group>
-    <div class="detail-header">
+    <div class="detail-header" style="padding-bottom: 5px;">
      <p>账户</p>
    </div>
    <van-cell-group inset>
@@ -140,11 +140,6 @@ const handleLogout = async () => {
 </script>

 <style scoped>
-/* 设置页面容器背景色 */
-:deep(.van-nav-bar) {
-  background-color: transparent;
-}
-
 /* 页面背景色 */
 :deep(body) {
  background-color: #f5f5f5;
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="statistics-container">
+  <div class="page-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="账单统计" placeholder>
      <template #right>
@@ -61,9 +61,9 @@
        </div>

        <!-- 分类统计 -->
-        <div class="stat-card">
-          <div class="stat-header">
-            <h3 class="stat-title">支出分类统计</h3>
+        <div class="common-card">
+          <div class="card-header">
+            <h3 class="card-title">支出分类统计</h3>
            <van-tag type="primary" size="medium">{{ expenseCategories.length }}类</van-tag>
          </div>
          
@@ -119,9 +119,9 @@
        </div>

        <!-- 收入分类统计 -->
-        <div class="stat-card" v-if="incomeCategories.length > 0">
-          <div class="stat-header">
-            <h3 class="stat-title">收入分类统计</h3>
+        <div class="common-card" v-if="incomeCategories.length > 0">
+          <div class="card-header">
+            <h3 class="card-title">收入分类统计</h3>
            <van-tag type="success" size="medium">{{ incomeCategories.length }}类</van-tag>
          </div>
          
@@ -144,9 +144,9 @@
        </div>

        <!-- 趋势统计 -->
-        <div class="stat-card">
-          <div class="stat-header">
-            <h3 class="stat-title">近6个月趋势</h3>
+        <div class="common-card">
+          <div class="card-header">
+            <h3 class="card-title">近6个月趋势</h3>
          </div>
          
          <div class="trend-chart">
@@ -192,9 +192,9 @@
        </div>

        <!-- 其他统计 -->
-        <div class="stat-card">
-          <div class="stat-header">
-            <h3 class="stat-title">其他统计</h3>
+        <div class="common-card">
+          <div class="card-header">
+            <h3 class="card-title">其他统计</h3>
          </div>
          
          <div class="other-stats">
@@ -503,12 +503,6 @@ onMounted(() => {
 </script>

 <style scoped>
-.statistics-container {
-  min-height: 100vh;
-  background: var(--van-background-2);
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-}
-
 .statistics-content {
  padding: 16px 0 0 0;
 }
@@ -520,11 +514,17 @@ onMounted(() => {
  justify-content: space-between;
  padding: 12px 16px;
  margin: 0 12px 16px;
-  background: var(--van-background);
+  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

+@media (prefers-color-scheme: dark) {
+  .month-selector {
+    background: #1f1f1f;
+  }
+}
+
 .month-text {
  font-size: 16px;
  font-weight: 600;
@@ -541,12 +541,19 @@ onMounted(() => {
  display: flex;
  justify-content: space-around;
  align-items: center;
-  background: var(--van-background);
+  background: #ffffff;
  margin: 0 12px 16px;
  padding: 24px 12px;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--van-border-color);
+  border: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .overview-card {
+    background: #1f1f1f;
+    border-color: #2c2c2c;
+  }
 }

 .overview-item {
@@ -585,30 +592,6 @@ onMounted(() => {
  color: #51cf66;
 }

-/* 统计卡片 */
-.stat-card {
-  background: var(--van-background);
-  margin: 0 12px 16px;
-  padding: 16px;
-  border-radius: 16px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-  border: 1px solid var(--van-border-color);
-}
-
-.stat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.stat-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--van-text-color);
-  margin: 0;
-}
-
 /* 环形图 */
 .chart-container {
  padding: 20px;
@@ -653,7 +636,7 @@ onMounted(() => {

 /* 分类列表 */
 .category-list {
-  padding: 12px 16px;
+  padding: 0;
 }

 .category-item {
@@ -661,7 +644,13 @@ onMounted(() => {
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
-  border-bottom: 1px solid var(--van-border-color);
+  border-bottom: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .category-item {
+    border-bottom: 1px solid #2c2c2c;
+  }
 }

 .category-item:last-child {
@@ -701,11 +690,17 @@ onMounted(() => {
 .category-percent {
  font-size: 12px;
  color: var(--van-text-color-3);
-  background: var(--van-background-2);
+  background: #f7f8fa;
  padding: 2px 8px;
  border-radius: 10px;
 }

+@media (prefers-color-scheme: dark) {
+  .category-percent {
+    background: #141414;
+  }
+}
+
 .income-color {
  background-color: #51cf66;
 }
@@ -787,7 +782,13 @@ onMounted(() => {
  justify-content: center;
  gap: 24px;
  padding-top: 12px;
-  border-top: 1px solid var(--van-border-color);
+  border-top: 1px solid #ebedf0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .trend-legend {
+    border-top: 1px solid #2c2c2c;
+  }
 }

 .legend-item {
@@ -813,12 +814,18 @@ onMounted(() => {
 }

 .stat-item {
-  background: var(--van-background-2);
+  background: #f7f8fa;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
 }

+@media (prefers-color-scheme: dark) {
+  .stat-item {
+    background: #141414;
+  }
+}
+
 .stat-label {
  font-size: 13px;
  color: var(--van-text-color-2);
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="transaction-record-container" style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));">
+  <div class="page-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="交易记录" placeholder>
      <template #right>