suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式统一
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 13s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 5s
Details

Browse Source
This commit is contained in:
孙诚
2025-12-26 17:29:17 +08:00
parent 09393f8ee5
commit c0264faca5
14 changed files with 151 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Web/src/App.vue
View File

@@ -26,6 +26,7 @@
<script setup> <script setup>
import { RouterView, useRoute } from 'vue-router' import { RouterView, useRoute } from 'vue-router'
import { ref, onMounted, onUnmounted, computed } from 'vue' import { ref, onMounted, onUnmounted, computed } from 'vue'
import '@/styles/common.css'
const updateVh = () => { const updateVh = () => {
// 获取真实的视口高度（PWA 模式下准确） // 获取真实的视口高度（PWA 模式下准确）

5
Web/src/assets/main.css
View File

@@ -60,3 +60,8 @@ html, body, #app {
padding: 0; padding: 0;
height: 100%; height: 100%;
} }
/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
background-color: transparent;
}

82
Web/src/styles/common.css
View File

@@ -1,45 +1,86 @@
/* 通用页面容器样式 */ /* 通用页面容器样式 - 统一风格（灰色背景） */
.page-container { .page-container {
min-height: var(--vh, 100vh); min-height: 100vh;
background-color: #f5f5f5; background: #f7f8fa;
padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.page-container { .page-container {
background-color: #1a1a1a; background: #141414;
} }
} }
/* 页面内容区域 */
.page-content {
padding: 16px 0 0 0;
}
/* 下拉刷新包装器 */ /* 下拉刷新包装器 */
.refresh-wrapper { .refresh-wrapper {
min-height: calc(var(--vh, 100vh) - 46px - 50px - env(safe-area-inset-bottom, 0px)); 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) { :deep(.van-cell-group--inset) {
margin: 10px 16px; margin: 10px 16px;
background-color: #ffffff; background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #ebedf0;
border-radius: 16px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:deep(.van-cell-group--inset) { :deep(.van-cell-group--inset) {
background-color: #2c2c2c; background: #1f1f1f;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-color: #2c2c2c;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
} }
} }
/* 单元格样式 */ /* 单元格样式 */
:deep(.van-cell) { :deep(.van-cell) {
background-color: #ffffff; background: #ffffff;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #ebedf0;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:deep(.van-cell) { :deep(.van-cell) {
background-color: #2c2c2c; background: #1f1f1f;
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid #2c2c2c;
} }
} }
@@ -52,25 +93,28 @@
padding: 16px; padding: 16px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: #f5f5f5; background: #f7f8fa;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.detail-popup { .detail-popup {
background-color: #1a1a1a; background: #141414;
} }
} }
/* 弹出层内的卡片组样式 */ /* 弹出层内的卡片组样式 */
.detail-popup :deep(.van-cell-group--inset) { .detail-popup :deep(.van-cell-group--inset) {
background-color: #ffffff; background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #ebedf0;
border-radius: 16px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.detail-popup :deep(.van-cell-group--inset) { .detail-popup :deep(.van-cell-group--inset) {
background-color: #2c2c2c; background: #1f1f1f;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-color: #2c2c2c;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
} }
} }

19
Web/src/views/BillAnalysisView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="analysis-container"> <div class="page-container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<van-nav-bar <van-nav-bar
title="智能分析" title="智能分析"
@@ -197,26 +197,27 @@ const startAnalysis = async () => {
</script> </script>
<style scoped> <style scoped>
.analysis-container {
min-height: 100vh;
background: var(--van-background-2);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.analysis-content { .analysis-content {
padding: 16px; padding: 16px;
} }
/* 输入区域 */ /* 输入区域 */
.input-section { .input-section {
background: var(--van-background); background: #ffffff;
padding: 20px; padding: 20px;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); 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; margin-bottom: 16px;
} }
@media (prefers-color-scheme: dark) {
.input-section {
background: #1f1f1f;
border-color: #2c2c2c;
}
}
.input-header h3 { .input-header h3 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;

2
Web/src/views/CalendarView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="calendar-container"> <div class="page-container calendar-container">
<van-calendar <van-calendar
title="日历" title="日历"
:poppable="false" :poppable="false"

2
Web/src/views/ClassificationBatch.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));"> <div class="page-container">
<van-nav-bar <van-nav-bar
title="批量分类" title="批量分类"
left-text="返回" left-text="返回"

4
Web/src/views/ClassificationEdit.vue
View File

@@ -1,7 +1,5 @@
<template> <template>
<div <div class="page-container">
style="padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));"
>
<van-nav-bar <van-nav-bar
:title="navTitle" :title="navTitle"
left-text="返回" left-text="返回"

14
Web/src/views/ClassificationNLP.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="classification-nlp"> <div class="page-container classification-nlp">
<van-nav-bar <van-nav-bar
title="智能分类助手" title="智能分类助手"
left-text="返回" left-text="返回"
@@ -7,7 +7,7 @@
@click-left="onClickLeft" @click-left="onClickLeft"
/> />
<div class="container"> <div class="page-content">
<!-- 输入区域 --> <!-- 输入区域 -->
<div class="input-section"> <div class="input-section">
<van-cell-group inset> <van-cell-group inset>
@@ -299,16 +299,6 @@ const handleSubmit = async () => {
</script> </script>
<style scoped> <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 { .input-section {
padding: 12px 0; padding: 12px 0;
} }

9
Web/src/views/ClassificationSmart.vue
View File

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

2
Web/src/views/EmailRecord.vue
View File

@@ -1,5 +1,5 @@
<template> <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> <van-nav-bar title="邮件记录" placeholder>
<template #right> <template #right>

2
Web/src/views/LoginView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="login-container"> <div class="page-container login-container">
<div class="login-box"> <div class="login-box">
<h1 class="login-title">账单</h1> <h1 class="login-title">账单</h1>
<div class="login-form"> <div class="login-form">

13
Web/src/views/SettingView.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div style="padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));"> <div class="page-container">
<van-nav-bar title="设置" placeholder/> <van-nav-bar title="设置" placeholder/>
<div class="detail-header"> <div class="detail-header" style="padding-bottom: 5px;">
<p>账单导入</p> <p>账单导入</p>
</div> </div>
<van-cell-group inset> <van-cell-group inset>
@@ -12,7 +12,7 @@
<!-- 隐藏的文件选择器 --> <!-- 隐藏的文件选择器 -->
<input ref="fileInputRef" type="file" accept=".csv,.xlsx,.xls" style="display: none" @change="handleFileChange" /> <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> <p>分类处理</p>
</div> </div>
<van-cell-group inset> <van-cell-group inset>
@@ -21,7 +21,7 @@
<van-cell title="智能分类" is-link @click="handleSmartClassification" /> <van-cell title="智能分类" is-link @click="handleSmartClassification" />
<van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" /> <van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
</van-cell-group> </van-cell-group>
<div class="detail-header"> <div class="detail-header" style="padding-bottom: 5px;">
<p>账户</p> <p>账户</p>
</div> </div>
<van-cell-group inset> <van-cell-group inset>
@@ -140,11 +140,6 @@ const handleLogout = async () => {
</script> </script>
<style scoped> <style scoped>
/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
background-color: transparent;
}
/* 页面背景色 */ /* 页面背景色 */
:deep(body) { :deep(body) {
background-color: #f5f5f5; background-color: #f5f5f5;

109
Web/src/views/StatisticsView.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="statistics-container"> <div class="page-container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<van-nav-bar title="账单统计" placeholder> <van-nav-bar title="账单统计" placeholder>
<template #right> <template #right>
@@ -61,9 +61,9 @@
</div> </div>
<!-- 分类统计 --> <!-- 分类统计 -->
<div class="stat-card"> <div class="common-card">
<div class="stat-header"> <div class="card-header">
<h3 class="stat-title">支出分类统计</h3> <h3 class="card-title">支出分类统计</h3>
<van-tag type="primary" size="medium">{{ expenseCategories.length }}类</van-tag> <van-tag type="primary" size="medium">{{ expenseCategories.length }}类</van-tag>
</div> </div>
@@ -119,9 +119,9 @@
</div> </div>
<!-- 收入分类统计 --> <!-- 收入分类统计 -->
<div class="stat-card" v-if="incomeCategories.length > 0"> <div class="common-card" v-if="incomeCategories.length > 0">
<div class="stat-header"> <div class="card-header">
<h3 class="stat-title">收入分类统计</h3> <h3 class="card-title">收入分类统计</h3>
<van-tag type="success" size="medium">{{ incomeCategories.length }}类</van-tag> <van-tag type="success" size="medium">{{ incomeCategories.length }}类</van-tag>
</div> </div>
@@ -144,9 +144,9 @@
</div> </div>
<!-- 趋势统计 --> <!-- 趋势统计 -->
<div class="stat-card"> <div class="common-card">
<div class="stat-header"> <div class="card-header">
<h3 class="stat-title">近6个月趋势</h3> <h3 class="card-title">近6个月趋势</h3>
</div> </div>
<div class="trend-chart"> <div class="trend-chart">
@@ -192,9 +192,9 @@
</div> </div>
<!-- 其他统计 --> <!-- 其他统计 -->
<div class="stat-card"> <div class="common-card">
<div class="stat-header"> <div class="card-header">
<h3 class="stat-title">其他统计</h3> <h3 class="card-title">其他统计</h3>
</div> </div>
<div class="other-stats"> <div class="other-stats">
@@ -503,12 +503,6 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
.statistics-container {
min-height: 100vh;
background: var(--van-background-2);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.statistics-content { .statistics-content {
padding: 16px 0 0 0; padding: 16px 0 0 0;
} }
@@ -520,11 +514,17 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
margin: 0 12px 16px; margin: 0 12px 16px;
background: var(--van-background); background: #ffffff;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
} }
@media (prefers-color-scheme: dark) {
.month-selector {
background: #1f1f1f;
}
}
.month-text { .month-text {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@@ -541,12 +541,19 @@ onMounted(() => {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
background: var(--van-background); background: #ffffff;
margin: 0 12px 16px; margin: 0 12px 16px;
padding: 24px 12px; padding: 24px 12px;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); 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 { .overview-item {
@@ -585,30 +592,6 @@ onMounted(() => {
color: #51cf66; 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 { .chart-container {
padding: 20px; padding: 20px;
@@ -653,7 +636,7 @@ onMounted(() => {
/* 分类列表 */ /* 分类列表 */
.category-list { .category-list {
padding: 12px 16px; padding: 0;
} }
.category-item { .category-item {
@@ -661,7 +644,13 @@ onMounted(() => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 0; 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 { .category-item:last-child {
@@ -701,11 +690,17 @@ onMounted(() => {
.category-percent { .category-percent {
font-size: 12px; font-size: 12px;
color: var(--van-text-color-3); color: var(--van-text-color-3);
background: var(--van-background-2); background: #f7f8fa;
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: 10px;
} }
@media (prefers-color-scheme: dark) {
.category-percent {
background: #141414;
}
}
.income-color { .income-color {
background-color: #51cf66; background-color: #51cf66;
} }
@@ -787,7 +782,13 @@ onMounted(() => {
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
padding-top: 12px; 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 { .legend-item {
@@ -813,12 +814,18 @@ onMounted(() => {
} }
.stat-item { .stat-item {
background: var(--van-background-2); background: #f7f8fa;
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
text-align: center; text-align: center;
} }
@media (prefers-color-scheme: dark) {
.stat-item {
background: #141414;
}
}
.stat-label { .stat-label {
font-size: 13px; font-size: 13px;
color: var(--van-text-color-2); color: var(--van-text-color-2);

2
Web/src/views/TransactionsRecord.vue
View File

@@ -1,5 +1,5 @@
<template> <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> <van-nav-bar title="交易记录" placeholder>
<template #right> <template #right>