From 4f42f2c342c63c4c0a238ca4ab23e524f7e359a3 Mon Sep 17 00:00:00 2001
From: wangxiaogang <wangxiaogang420@gmail.com>
Date: Sat, 6 Jun 2026 22:37:46 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20UI/UX=20=E5=85=A8=E9=9D=A2=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=20=E2=80=94=20=E8=AE=BE=E8=AE=A1=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

设计系统：
- uni.scss 扩展：间距/圆角/字体/阴影/动画 token 体系
- 新建 styles/mixins.scss：20+ 公共 mixin

页面重构（12 个页面）：
- 首页/记账/统计/账单/个人中心/预算/分类管理
- 群组管理/通知中心/管理员/用户管理/编辑资料

所有硬编码替换为设计 token：
- 颜色：#FFF8F0→$bg, #FFFFFF→$surface, #FF8C69→$primary 等
- 间距：40rpx→$space-xl, 24rpx→$space-md 等
- 字体：28rpx→$font-lg, 24rpx→$font-md 等
- 圆角：20rpx→$radius-lg, 40rpx→$radius-2xl 等
- 阴影：统一使用 $shadow-md/$shadow-sm

重复样式提取为 mixin：
- page-base, sticky-header, nav-bar, card, modal-mask
- tabs, tab, state-box, shimmer, flex-center 等
---
 client/src/App.vue                         |   9 +-
 client/src/pages/add/index.vue             |  93 ++++----
 client/src/pages/admin/index.vue           | 235 ++++++++++----------
 client/src/pages/admin/users.vue           |  97 ++++-----
 client/src/pages/bills/filter-panel.vue    |   7 -
 client/src/pages/bills/index.vue           | 107 ++++-----
 client/src/pages/budget/index.vue          | 158 +++++++-------
 client/src/pages/category-manage/index.vue | 149 ++++++-------
 client/src/pages/group-manage/index.vue    | 220 +++++++++----------
 client/src/pages/index/index.vue           | 193 +++++++----------
 client/src/pages/notifications/index.vue   | 136 ++++++------
 client/src/pages/profile-edit/index.vue    |  85 ++++----
 client/src/pages/profile/index.vue         | 220 +++++++++----------
 client/src/pages/stats/index.vue           | 141 +++++-------
 client/src/styles/mixins.scss              | 238 +++++++++++++++++++++
 client/src/uni.scss                        |  58 ++++-
 16 files changed, 1116 insertions(+), 1030 deletions(-)
 create mode 100644 client/src/styles/mixins.scss

diff --git a/client/src/App.vue b/client/src/App.vue
index 0e94386..d81a597 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -49,10 +49,15 @@ onLaunch(() => {
 <style lang="scss">
 @import './uni.scss';
 
+// 全局盒模型
+view, text, image, input, textarea, scroll-view, picker {
+  box-sizing: border-box;
+}
+
 page {
-  background-color: #FFF8F0;
+  background-color: $bg;
   font-family: 'Nunito', 'PingFang SC', sans-serif;
-  color: #2D1B1B;
+  color: $text;
   -webkit-font-smoothing: antialiased;
 }
 </style>
diff --git a/client/src/pages/add/index.vue b/client/src/pages/add/index.vue
index 37aed76..846bac5 100644
--- a/client/src/pages/add/index.vue
+++ b/client/src/pages/add/index.vue
@@ -216,51 +216,44 @@ function goBack() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
+  @include page-base;
   display: flex;
   flex-direction: column;
+  padding-bottom: 0;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
 .status-bar {
-  background: #FFF8F0;
+  @include status-bar;
 }
 
 .header {
-  display: flex;
+  @include nav-bar;
   justify-content: space-between;
-  align-items: center;
-  padding: 16rpx 40rpx;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include nav-back;
   border-radius: 50%;
 
-  &:active { background: #F0E0D6; }
+  &:active { background: $border; }
 }
 
-.title { font-size: 32rpx; font-weight: 500; color: #2D1B1B; }
+.title { font-size: $font-xl; font-weight: 500; color: $text; }
 
-.type-toggle-wrap { display: flex; justify-content: center; margin: 16rpx 0; }
+.type-toggle-wrap { display: flex; justify-content: center; margin: $space-sm 0; }
 
 .type-toggle {
   display: inline-flex;
-  background: #FFF0E6;
-  border-radius: 24rpx;
-  padding: 8rpx;
+  background: $surface-warm;
+  border-radius: $radius-lg;
+  padding: $space-xs;
   position: relative;
 }
 
@@ -270,48 +263,48 @@ function goBack() {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 28rpx;
-  color: #8B7E7E;
-  border-radius: 20rpx;
+  font-size: $font-lg;
+  color: $text-sec;
+  border-radius: $radius-lg;
   position: relative;
   z-index: 1;
-  transition: color 0.2s;
+  transition: color $transition-normal;
 
-  &.active { color: #FF8C69; font-weight: 600; }
+  &.active { color: $primary; font-weight: 600; }
 }
 
 .slider {
   position: absolute;
-  top: 8rpx;
-  left: 8rpx;
+  top: $space-xs;
+  left: $space-xs;
   width: 160rpx;
   height: 72rpx;
-  background: #FFFFFF;
-  border-radius: 20rpx;
-  box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.08);
-  transition: transform 0.2s;
+  background: $surface;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-sm;
+  transition: transform $transition-normal;
 }
 
 .income .slider { transform: translateX(160rpx); }
 
 .amount-display {
   text-align: center;
-  padding: 32rpx 40rpx 24rpx;
+  padding: $space-lg $space-xl $space-md;
 }
 
 .currency {
   font-family: 'Fredoka', sans-serif;
-  font-size: 48rpx;
+  font-size: $space-2xl;
   font-weight: 500;
-  color: #BFB3B3;
-  margin-right: 8rpx;
+  color: $text-muted;
+  margin-right: $space-xs;
 }
 
 .digits {
   font-family: 'Fredoka', sans-serif;
   font-size: 88rpx;
   font-weight: 700;
-  color: #2D1B1B;
+  color: $text;
   font-variant-numeric: tabular-nums;
 }
 
@@ -319,7 +312,7 @@ function goBack() {
   font-family: 'Fredoka', monospace;
   font-size: 88rpx;
   font-weight: 300;
-  color: #FF8C69;
+  color: $primary;
   animation: blink 1s step-end infinite;
 }
 
@@ -334,8 +327,8 @@ function goBack() {
 .category-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 16rpx;
-  padding: 8rpx 0;
+  gap: $space-sm;
+  padding: $space-xs 0;
 }
 
 .cat-item {
@@ -348,15 +341,15 @@ function goBack() {
   &:active { transform: scale(0.95); }
 }
 
-.cat-name { font-size: 22rpx; color: #8B7E7E; }
+.cat-name { font-size: $font-sm; color: $text-sec; }
 
 .cat-name.active {
-  color: #FF8C69;
+  color: $primary;
   font-weight: 600;
 }
 
 .extra-fields {
-  padding: 16rpx 40rpx;
+  padding: $space-sm $space-xl;
   display: flex;
   flex-direction: column;
   gap: 12rpx;
@@ -364,19 +357,19 @@ function goBack() {
 
 .extra-row {
   height: 88rpx;
-  background: #FFFFFF;
-  border-radius: 20rpx;
-  border: 2rpx solid #F0E0D6;
-  padding: 0 24rpx;
+  background: $surface;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+  padding: 0 $space-md;
   display: flex;
   align-items: center;
   gap: 12rpx;
 }
 
-.extra-text { font-size: 28rpx; color: #2D1B1B; flex: 1; }
-.extra-input { font-size: 28rpx; color: #2D1B1B; flex: 1; }
+.extra-text { font-size: $font-lg; color: $text; flex: 1; }
+.extra-input { font-size: $font-lg; color: $text; flex: 1; }
 
-.placeholder { color: #BFB3B3; }
+.placeholder { color: $text-muted; }
 
 @media (prefers-reduced-motion: reduce) {
   .cursor {
diff --git a/client/src/pages/admin/index.vue b/client/src/pages/admin/index.vue
index 6f4a4b9..fece1c1 100644
--- a/client/src/pages/admin/index.vue
+++ b/client/src/pages/admin/index.vue
@@ -220,42 +220,34 @@ async function handlePublish() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
-.status-bar { background: #FFF8F0; }
+.status-bar { @include status-bar; }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 40rpx 24rpx;
+  padding: $space-sm $space-xl $space-md;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:active { opacity: 0.6; }
+  @include nav-back;
 }
 
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .nav-placeholder { width: 88rpx; }
@@ -268,60 +260,60 @@ async function handlePublish() {
 }
 
 .loading-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  font-size: $font-lg;
+  color: $text-muted;
 }
 
-.content { padding: 0 40rpx; }
+.content { padding: 0 $space-xl; }
 
 .metric-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 16rpx;
-  margin-bottom: 32rpx;
+  gap: $space-sm;
+  margin-bottom: $space-lg;
 }
 
 .metric-card {
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  padding: 28rpx 24rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  background: $surface;
+  border-radius: $radius-xl;
+  padding: $font-lg $space-md;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
 }
 
 .metric-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 40rpx;
+  font-size: $font-3xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
 
-  &.up { color: #7BC67E; }
-  &.down { color: #FF6B6B; }
+  &.up { color: $success; }
+  &.down { color: $danger; }
 }
 
 .metric-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
-  margin-top: 8rpx;
+  margin-top: $space-xs;
 }
 
 .detail-card {
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  padding: 32rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
-  margin-bottom: 32rpx;
+  background: $surface;
+  border-radius: $radius-xl;
+  padding: $space-lg;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  margin-bottom: $space-lg;
 }
 
 .detail-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
-  margin-bottom: 20rpx;
+  margin-bottom: $space-lg;
 }
 
 .detail-row {
@@ -335,65 +327,57 @@ async function handlePublish() {
 }
 
 .detail-label {
-  font-size: 26rpx;
-  color: #8B7E7E;
+  font-size: $font-base;
+  color: $text-sec;
 }
 
 .detail-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 26rpx;
+  font-size: $font-base;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .section-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
-  margin-bottom: 16rpx;
+  color: $text;
+  margin-bottom: $space-sm;
 }
 
-.entry-list { margin-bottom: 32rpx; }
+.entry-list { margin-bottom: $space-lg; }
 
 .entry-item {
   display: flex;
   align-items: center;
-  gap: 20rpx;
-  padding: 28rpx 32rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
-  margin-bottom: 16rpx;
+  gap: $space-lg;
+  padding: $font-lg $space-lg;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  margin-bottom: $space-sm;
 
-  &:active { background: #FFF8F0; }
+  &:active { background: $bg; }
 }
 
 .entry-text {
   flex: 1;
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
 }
 
 /* 发布公告弹窗 */
 .modal-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 200;
-  display: flex;
-  align-items: flex-end;
+  @include modal-mask;
 }
 
 .publish-modal {
   width: 100%;
   max-height: 85vh;
-  background: #FFFFFF;
-  border-radius: 40rpx 40rpx 0 0;
+  background: $surface;
+  border-radius: $radius-2xl $radius-2xl 0 0;
   display: flex;
   flex-direction: column;
 }
@@ -402,14 +386,14 @@ async function handlePublish() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32rpx 40rpx 24rpx;
-  border-bottom: 2rpx solid #F0E0D6;
+  padding: $space-lg $space-xl $space-md;
+  border-bottom: 2rpx solid $border;
 }
 
 .modal-title {
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .modal-close {
@@ -419,61 +403,58 @@ async function handlePublish() {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: #F0E0D6;
-  &:active { background: #E0D6D0; }
+  background: $border;
+  &:active { background: darken($border, 5%); }
 }
 
 .modal-close-text {
-  font-size: 36rpx;
-  color: #8B7E7E;
+  font-size: $font-2xl;
+  color: $text-sec;
   line-height: 1;
 }
 
 .modal-body {
   flex: 1;
-  padding: 24rpx 40rpx;
+  padding: $space-md $space-xl;
   max-height: 60vh;
 }
 
 .form-group {
-  margin-bottom: 24rpx;
+  margin-bottom: $space-md;
 }
 
 .form-label {
-  font-size: 26rpx;
+  font-size: $font-base;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
   margin-bottom: 12rpx;
 }
 
 .form-input {
-  width: 100%;
   height: 80rpx;
-  padding: 0 24rpx;
-  background: #FFF8F0;
-  border-radius: 20rpx;
-  border: 2rpx solid #F0E0D6;
-  font-size: 28rpx;
-  color: #2D1B1B;
-  box-sizing: border-box;
+  padding: 0 $space-md;
+  background: $bg;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+  font-size: $font-lg;
+  color: $text;
 }
 
 .form-textarea {
   width: 100%;
   height: 200rpx;
-  padding: 16rpx 24rpx;
-  background: #FFF8F0;
-  border-radius: 20rpx;
-  border: 2rpx solid #F0E0D6;
-  font-size: 28rpx;
-  color: #2D1B1B;
-  box-sizing: border-box;
+  padding: $space-sm $space-md;
+  background: $bg;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+  font-size: $font-lg;
+  color: $text;
 }
 
 .form-row {
   display: flex;
-  gap: 24rpx;
+  gap: $space-md;
 }
 
 .switch-item {
@@ -481,17 +462,17 @@ async function handlePublish() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16rpx 20rpx;
-  background: #FFF8F0;
-  border-radius: 16rpx;
-  border: 2rpx solid #F0E0D6;
+  padding: $space-sm $space-lg;
+  background: $bg;
+  border-radius: $radius-md;
+  border: 2rpx solid $border;
 
-  &:active { background: #F0E0D6; }
+  &:active { background: $border; }
 }
 
 .switch-label {
-  font-size: 26rpx;
-  color: #2D1B1B;
+  font-size: $font-base;
+  color: $text;
 }
 
 .switch-toggle {
@@ -500,9 +481,9 @@ async function handlePublish() {
   border-radius: 12rpx;
   background: #D0C4C4;
   position: relative;
-  transition: background 0.2s;
+  transition: background $transition-normal;
 
-  &.on { background: #FF8C69; }
+  &.on { background: $primary; }
 
   &::after {
     content: '';
@@ -512,16 +493,16 @@ async function handlePublish() {
     width: 20rpx;
     height: 20rpx;
     border-radius: 50%;
-    background: #FFFFFF;
-    transition: transform 0.2s;
+    background: $surface;
+    transition: transform $transition-normal;
   }
 
   &.on::after { transform: translateX(20rpx); }
 }
 
 .modal-footer {
-  padding: 24rpx 40rpx 40rpx;
-  border-top: 2rpx solid #F0E0D6;
+  padding: $space-md $space-xl $space-xl;
+  border-top: 2rpx solid $border;
 }
 
 .publish-btn-text {
@@ -529,10 +510,10 @@ async function handlePublish() {
   text-align: center;
   font-size: 30rpx;
   font-weight: 600;
-  color: #FFFFFF;
-  padding: 20rpx;
-  background: linear-gradient(135deg, #FF8C69, #E67355);
-  border-radius: 20rpx;
+  color: $surface;
+  padding: $space-lg;
+  background: linear-gradient(135deg, $primary, #E67355);
+  border-radius: $radius-lg;
 
   &:active { opacity: 0.8; }
 }
@@ -541,19 +522,19 @@ async function handlePublish() {
   width: 200rpx;
   height: 200rpx;
   border: 2rpx dashed #D0C4C4;
-  border-radius: 16rpx;
+  border-radius: $radius-md;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8rpx;
+  gap: $space-xs;
 
-  &:active { background: #FFF8F0; }
+  &:active { background: $bg; }
 }
 
 .upload-text {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
 }
 
 .image-preview {
@@ -565,7 +546,7 @@ async function handlePublish() {
 .preview-img {
   width: 100%;
   height: 100%;
-  border-radius: 16rpx;
+  border-radius: $radius-md;
 }
 
 .image-remove {
@@ -574,7 +555,7 @@ async function handlePublish() {
   right: -12rpx;
   width: 40rpx;
   height: 40rpx;
-  background: #FF6B6B;
+  background: $danger;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -582,8 +563,8 @@ async function handlePublish() {
 }
 
 .image-remove-text {
-  font-size: 28rpx;
-  color: #FFFFFF;
+  font-size: $font-lg;
+  color: $surface;
   line-height: 1;
 }
 
@@ -591,6 +572,6 @@ async function handlePublish() {
   display: flex;
   align-items: center;
 
-  .placeholder { color: #BFB3B3; }
+  .placeholder { color: $text-muted; }
 }
 </style>
diff --git a/client/src/pages/admin/users.vue b/client/src/pages/admin/users.vue
index bb0b7c1..130413a 100644
--- a/client/src/pages/admin/users.vue
+++ b/client/src/pages/admin/users.vue
@@ -162,86 +162,77 @@ onReachBottom(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
-.status-bar { background: #FFF8F0; }
+.status-bar { @include status-bar; }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 40rpx 24rpx;
+  padding: $space-sm $space-xl $space-md;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:active { opacity: 0.6; }
+  @include nav-back;
 }
 
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .nav-placeholder { width: 88rpx; }
 
 .search-bar {
-  padding: 0 40rpx 24rpx;
+  padding: 0 $space-xl $space-md;
 }
 
 .search-input {
-  width: 100%;
   height: 72rpx;
-  padding: 0 24rpx;
-  background: #FFFFFF;
-  border-radius: 20rpx;
-  border: 2rpx solid #F0E0D6;
-  font-size: 28rpx;
-  color: #2D1B1B;
+  padding: 0 $space-md;
+  background: $surface;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+  font-size: $font-lg;
+  color: $text;
 }
 
 .loading-box, .empty-box {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16rpx;
+  gap: $space-sm;
   padding: 120rpx 0;
 }
 
 .loading-text, .empty-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  font-size: $font-lg;
+  color: $text-muted;
 }
 
-.user-list { padding: 0 40rpx; }
+.user-list { padding: 0 $space-xl; }
 
 .user-item {
   display: flex;
   align-items: flex-start;
-  gap: 20rpx;
-  padding: 24rpx 28rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
-  margin-bottom: 16rpx;
+  gap: $space-lg;
+  padding: $space-md $font-lg;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  margin-bottom: $space-sm;
   overflow: hidden;
 }
 
@@ -249,7 +240,7 @@ onReachBottom(() => {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: #F0E0D6;
+  background: $border;
   flex-shrink: 0;
 }
 
@@ -262,9 +253,9 @@ onReachBottom(() => {
 }
 
 .user-name {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -272,24 +263,24 @@ onReachBottom(() => {
 
 .role-tag {
   padding: 2rpx 12rpx;
-  border-radius: 8rpx;
+  border-radius: $radius-xs;
 }
 
 .role-tag-text {
-  font-size: 20rpx;
+  font-size: $font-xs;
   font-weight: 500;
 }
 
 .user-meta {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
   margin-top: 4rpx;
 }
 
 .user-time {
-  font-size: 22rpx;
-  color: #BFB3B3;
+  font-size: $font-sm;
+  color: $text-muted;
   display: block;
   margin-top: 4rpx;
 }
@@ -297,23 +288,23 @@ onReachBottom(() => {
 .user-actions {
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: $space-xs;
   flex-shrink: 0;
 }
 
 .action-btn {
-  padding: 8rpx 16rpx;
-  background: #FFF0E6;
-  border-radius: 12rpx;
+  padding: $space-xs $space-sm;
+  background: $surface-warm;
+  border-radius: $radius-sm;
   text-align: center;
 
-  &.danger { background: #FFE8E8; }
+  &.danger { background: $danger-light; }
   &:active { opacity: 0.7; }
 }
 
 .action-text {
-  font-size: 22rpx;
-  color: #FF8C69;
-  &.danger-text { color: #FF6B6B; }
+  font-size: $font-sm;
+  color: $primary;
+  &.danger-text { color: $danger; }
 }
 </style>
diff --git a/client/src/pages/bills/filter-panel.vue b/client/src/pages/bills/filter-panel.vue
index 217b386..5ae41bc 100644
--- a/client/src/pages/bills/filter-panel.vue
+++ b/client/src/pages/bills/filter-panel.vue
@@ -290,7 +290,6 @@ async function handleDeleteSaved(id: number) {
   border-radius: 40rpx 40rpx 0 0;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   overflow: hidden;
 }
 
@@ -332,13 +331,11 @@ async function handleDeleteSaved(id: number) {
   padding: 24rpx 40rpx;
   max-height: 55vh;
   overflow-x: hidden;
-  box-sizing: border-box;
 }
 
 .filter-section {
   margin-bottom: 32rpx;
   width: 100%;
-  box-sizing: border-box;
 }
 
 .section-label {
@@ -354,7 +351,6 @@ async function handleDeleteSaved(id: number) {
   flex-wrap: wrap;
   gap: 12rpx;
   width: 100%;
-  box-sizing: border-box;
 }
 
 .chip {
@@ -388,7 +384,6 @@ async function handleDeleteSaved(id: number) {
   align-items: center;
   gap: 16rpx;
   width: 100%;
-  box-sizing: border-box;
 }
 
 .date-picker {
@@ -420,7 +415,6 @@ async function handleDeleteSaved(id: number) {
   align-items: center;
   gap: 16rpx;
   width: 100%;
-  box-sizing: border-box;
 }
 
 .amount-input {
@@ -440,7 +434,6 @@ async function handleDeleteSaved(id: number) {
 }
 
 .keyword-input {
-  width: 100%;
   height: 72rpx;
   padding: 0 20rpx;
   background: #fff8f0;
diff --git a/client/src/pages/bills/index.vue b/client/src/pages/bills/index.vue
index 9a65606..ad08f4c 100644
--- a/client/src/pages/bills/index.vue
+++ b/client/src/pages/bills/index.vue
@@ -245,60 +245,36 @@ onPullDownRefresh(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
 .status-bar {
-  background: #FFF8F0;
+  @include status-bar;
 }
 
 .page-title {
-  display: block;
-  text-align: center;
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #2D1B1B;
-  padding: 16rpx 0 24rpx;
+  @include page-title;
 }
 
 .tabs-wrap {
-  display: flex;
-  align-items: center;
+  @include tabs-wrap;
   justify-content: center;
-  margin: 0 0 24rpx;
-  gap: 16rpx;
+  margin: 0 0 $space-md;
 }
 
 .tabs {
-  display: inline-flex;
-  background: #FFF0E6;
-  border-radius: 24rpx;
-  padding: 8rpx;
+  @include tabs;
 }
 
 .tab {
-  padding: 16rpx 40rpx;
-  border-radius: 20rpx;
-  font-size: 28rpx;
-  color: #8B7E7E;
-  transition: all 0.2s;
-
-  &.active {
-    background: #FFFFFF;
-    color: #FF8C69;
-    font-weight: 600;
-    box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
-  }
+  @include tab;
 }
 
 .filter-btn {
@@ -306,104 +282,99 @@ onPullDownRefresh(() => {
   align-items: center;
   gap: 6rpx;
   padding: 12rpx 20rpx;
-  background: #FFF0E6;
-  border-radius: 20rpx;
-  border: 2rpx solid #F0E0D6;
+  background: $surface-warm;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
 
   &.active {
-    border-color: #FF8C69;
-    background: #FFE8E0;
+    border-color: $primary;
+    background: $primary-light;
   }
 
   &:active { opacity: 0.7; }
 }
 
 .filter-btn-text {
-  font-size: 24rpx;
-  color: #8B7E7E;
-  .active & { color: #FF8C69; }
+  font-size: $font-md;
+  color: $text-sec;
+  .active & { color: $primary; }
 }
 
 .filter-stats {
   display: flex;
-  gap: 24rpx;
-  padding: 0 40rpx 16rpx;
+  gap: $space-md;
+  padding: 0 $space-xl $space-sm;
 }
 
 .filter-stats-text {
-  font-size: 24rpx;
+  font-size: $font-md;
   font-family: 'Fredoka', sans-serif;
-  color: #8B7E7E;
+  color: $text-sec;
 }
 
-.tx-list { padding: 0 40rpx; }
+.tx-list { padding: 0 $space-xl; }
 
 .date-group {
-  margin-bottom: 24rpx;
+  margin-bottom: $space-md;
 }
 
 .group-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16rpx 0;
-  border-bottom: 1rpx solid #F0E0D6;
-  margin-bottom: 8rpx;
+  padding: $space-sm 0;
+  border-bottom: 1rpx solid $border;
+  margin-bottom: $space-xs;
 }
 
 .group-date {
-  font-size: 26rpx;
+  font-size: $font-base;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .group-total {
   font-family: 'Fredoka', sans-serif;
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
 
-  &.expense { color: #2D1B1B; }
+  &.expense { color: $text; }
 }
 
 .skeleton-item {
   display: flex;
   align-items: center;
   padding: 28rpx 0;
-  gap: 24rpx;
+  gap: $space-md;
 }
 
 .skeleton-info {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: $space-xs;
 }
 
 .loading-more {
   text-align: center;
-  padding: 32rpx 0;
+  padding: $space-lg 0;
 }
 
-.loading-text { font-size: 24rpx; color: #BFB3B3; }
+.loading-text { font-size: $font-md; color: $text-muted; }
 
 .empty {
   text-align: center;
   padding: 120rpx 0;
 }
 
-.empty-text { font-size: 28rpx; color: #BFB3B3; }
+.empty-text { font-size: $font-lg; color: $text-muted; }
 
 .state-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  @include state-box;
   justify-content: center;
-  gap: 16rpx;
-  padding: 120rpx 0;
 }
 
 .state-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  @include state-text;
 }
 </style>
diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue
index 628e86b..50c13ee 100644
--- a/client/src/pages/budget/index.vue
+++ b/client/src/pages/budget/index.vue
@@ -180,46 +180,41 @@ function goBack() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
   min-height: 100vh;
-  background: #FFF8F0;
+  background: $bg;
   padding-bottom: 120rpx;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
 .status-bar {
-  background: #FFF8F0;
+  @include status-bar;
 }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 32rpx;
+  padding: $space-sm $space-lg;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include nav-back;
   border-radius: 50%;
 
-  &:active { background: #F0E0D6; }
+  &:active { background: $border; }
 }
 
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .nav-placeholder {
@@ -227,18 +222,18 @@ function goBack() {
 }
 
 .content {
-  padding: 0 40rpx;
+  padding: 0 $space-xl;
 }
 
 .overview-row {
   display: flex;
   align-items: center;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  padding: 28rpx 32rpx;
-  margin-bottom: 24rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  background: $surface;
+  border-radius: $radius-xl;
+  padding: $font-lg $space-lg;
+  margin-bottom: $space-md;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
 }
 
 .overview-item {
@@ -247,151 +242,144 @@ function goBack() {
 }
 
 .overview-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
-  margin-bottom: 8rpx;
+  margin-bottom: $space-xs;
 }
 
 .overview-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 
-  &.highlight { color: #FF8C69; }
+  &.highlight { color: $primary; }
 }
 
 .overview-divider {
   width: 2rpx;
   height: 56rpx;
-  background: #F0E0D6;
+  background: $border;
   flex-shrink: 0;
 }
 
 .preview-card {
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  padding: 48rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
-  margin-bottom: 48rpx;
+  background: $surface;
+  border-radius: $radius-2xl;
+  padding: $space-2xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  margin-bottom: $space-2xl;
 }
 
 .preview-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16rpx;
+  margin-bottom: $space-sm;
 }
 
 .preview-label {
-  font-size: 28rpx;
-  color: #8B7E7E;
+  font-size: $font-lg;
+  color: $text-sec;
 }
 
 .preview-month {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
 }
 
 .preview-amount {
   font-family: 'Fredoka', sans-serif;
-  font-size: 56rpx;
+  font-size: $font-4xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
-  margin-bottom: 24rpx;
+  margin-bottom: $space-md;
 }
 
 .preview-skeleton {
   width: 240rpx;
   height: 64rpx;
-  background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
-  background-size: 200% 100%;
-  border-radius: 12rpx;
-  margin-bottom: 24rpx;
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  @include shimmer;
+  border-radius: $radius-sm;
+  margin-bottom: $space-md;
 }
 
 .preview-hint {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  font-size: $font-lg;
+  color: $text-muted;
   display: block;
   text-align: center;
-  padding: 16rpx 0;
+  padding: $space-sm 0;
 }
 
 .section-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
-  margin-bottom: 24rpx;
+  color: $text;
+  margin-bottom: $space-md;
 }
 
 .preset-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 20rpx;
-  margin-bottom: 48rpx;
+  gap: $space-lg;
+  margin-bottom: $space-2xl;
 }
 
 .preset-item {
   height: 96rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s;
+  transition: all $transition-normal;
 
   &:active {
-    background: #FFF8F0;
-    border-color: #FF8C69;
+    background: $bg;
+    border-color: $primary;
   }
 
   &.active {
-    background: #FFE8E0;
-    border-color: #FF8C69;
+    background: $primary-light;
+    border-color: $primary;
   }
 }
 
 .preset-text {
   font-family: 'Fredoka', sans-serif;
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .custom-input {
   display: flex;
   align-items: baseline;
-  gap: 8rpx;
-  margin-bottom: 32rpx;
-  padding: 24rpx 32rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
+  gap: $space-xs;
+  margin-bottom: $space-lg;
+  padding: $space-md $space-lg;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
 }
 
 .input-prefix {
   font-family: 'Fredoka', sans-serif;
-  font-size: 40rpx;
+  font-size: $font-3xl;
   font-weight: 600;
-  color: #FF8C69;
+  color: $primary;
 }
 
 .input-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 56rpx;
+  font-size: $font-4xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   flex: 1;
 
   &.placeholder {
@@ -400,15 +388,15 @@ function goBack() {
 }
 
 .input-unit {
-  font-size: 28rpx;
-  color: #8B7E7E;
+  font-size: $font-lg;
+  color: $text-sec;
 }
 
 .input-cursor {
   font-family: 'Fredoka', monospace;
-  font-size: 56rpx;
+  font-size: $font-4xl;
   font-weight: 300;
-  color: #FF8C69;
+  color: $primary;
   animation: blink 1s step-end infinite;
 }
 
diff --git a/client/src/pages/category-manage/index.vue b/client/src/pages/category-manage/index.vue
index f5d8e92..bc64cd9 100644
--- a/client/src/pages/category-manage/index.vue
+++ b/client/src/pages/category-manage/index.vue
@@ -268,73 +268,66 @@ async function onMigrateConfirm() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
-.status-bar { background: #FFF8F0; }
+.status-bar { @include status-bar; }
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16rpx 40rpx;
+  padding: $space-sm $space-xl;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include nav-back;
   border-radius: 50%;
 
-  &:active { background: #F0E0D6; }
+  &:active { background: $border; }
 }
 
-.title { font-size: 32rpx; font-weight: 600; color: #2D1B1B; }
+.title { font-size: $font-xl; font-weight: 600; color: $text; }
 
-.tabs-wrap { display: flex; justify-content: center; margin: 16rpx 0 32rpx; }
+.tabs-wrap { display: flex; justify-content: center; margin: $space-sm 0 $space-lg; }
 
 .tabs {
   display: inline-flex;
-  background: #FFF0E6;
-  border-radius: 24rpx;
-  padding: 8rpx;
+  background: $surface-warm;
+  border-radius: $space-md;
+  padding: $space-xs;
 }
 
 .tab {
-  padding: 16rpx 40rpx;
-  border-radius: 20rpx;
-  font-size: 28rpx;
-  color: #8B7E7E;
-  transition: all 0.2s;
+  padding: $space-sm $space-xl;
+  border-radius: $radius-lg;
+  font-size: $font-lg;
+  color: $text-sec;
+  transition: all $transition-normal;
 
   &.active {
-    background: #FFFFFF;
-    color: #FF8C69;
+    background: $surface;
+    color: $primary;
     font-weight: 600;
-    box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
+    box-shadow: $shadow-sm;
   }
 }
 
-.cat-list { padding: 0 40rpx; }
+.cat-list { padding: 0 $space-xl; }
 
 .cat-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 24rpx 0;
-  border-bottom: 1rpx solid #F0E0D6;
+  padding: $space-md 0;
+  border-bottom: 1rpx solid $border;
 
   &:last-child { border-bottom: none; }
 }
@@ -342,26 +335,26 @@ async function onMigrateConfirm() {
 .cat-info {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $space-sm;
   flex: 1;
-  padding: 8rpx 0;
+  padding: $space-xs 0;
 
   &:active { opacity: 0.6; }
 }
 
-.cat-name { font-size: 28rpx; color: #2D1B1B; font-weight: 500; }
+.cat-name { font-size: $font-lg; color: $text; font-weight: 500; }
 
 .cat-badge {
-  font-size: 20rpx;
-  color: #FF8C69;
-  background: #FFE8E0;
+  font-size: $font-xs;
+  color: $primary;
+  background: $primary-light;
   padding: 4rpx 12rpx;
-  border-radius: 8rpx;
+  border-radius: $radius-xs;
 }
 
 .cat-actions {
   display: flex;
-  gap: 8rpx;
+  gap: $space-xs;
 }
 
 .action-btn {
@@ -372,16 +365,16 @@ async function onMigrateConfirm() {
   justify-content: center;
   border-radius: 50%;
 
-  &:active { background: #F0E0D6; }
+  &:active { background: $border; }
 }
 
 .fab {
   position: fixed;
-  right: 40rpx;
+  right: $space-xl;
   bottom: 120rpx;
   width: 112rpx;
   height: 112rpx;
-  background: linear-gradient(135deg, #FF8C69, #E67355);
+  background: linear-gradient(135deg, $primary, #E67355);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -394,8 +387,8 @@ async function onMigrateConfirm() {
 
 .color-picker {
   display: flex;
-  gap: 20rpx;
-  margin-bottom: 24rpx;
+  gap: $space-lg;
+  margin-bottom: $space-md;
   flex-wrap: wrap;
 }
 
@@ -404,10 +397,10 @@ async function onMigrateConfirm() {
   height: 56rpx;
   border-radius: 50%;
   border: 4rpx solid transparent;
-  transition: all 0.2s;
+  transition: all $transition-normal;
 
   &.selected {
-    border-color: #2D1B1B;
+    border-color: $text;
     transform: scale(1.15);
   }
   &:active { opacity: 0.7; }
@@ -425,87 +418,85 @@ async function onMigrateConfirm() {
 
 .modal {
   width: 600rpx;
-  background: #FFFFFF;
-  border-radius: 32rpx;
-  padding: 48rpx;
+  background: $surface;
+  border-radius: $space-lg;
+  padding: $space-2xl;
 }
 
 .modal-title {
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
   text-align: center;
-  margin-bottom: 32rpx;
+  margin-bottom: $space-lg;
 }
 
 .modal-desc {
-  font-size: 28rpx;
-  color: #8B7E7E;
+  font-size: $font-lg;
+  color: $text-sec;
   display: block;
-  margin-bottom: 24rpx;
+  margin-bottom: $space-md;
 }
 
 .modal-input {
-  width: 100%;
   height: 96rpx;
-  background: #FFF8F0;
-  border-radius: 24rpx;
-  padding: 0 32rpx;
-  font-size: 28rpx;
-  margin-bottom: 24rpx;
-  box-sizing: border-box;
+  background: $bg;
+  border-radius: $space-md;
+  padding: 0 $space-lg;
+  font-size: $font-lg;
+  margin-bottom: $space-md;
 }
 
 .migrate-list {
   max-height: 400rpx;
-  margin-bottom: 24rpx;
+  margin-bottom: $space-md;
 }
 
 .migrate-item {
   display: flex;
   align-items: center;
-  gap: 16rpx;
-  padding: 20rpx 16rpx;
-  border-radius: 16rpx;
-  margin-bottom: 8rpx;
-  transition: background 0.2s;
+  gap: $space-sm;
+  padding: $space-lg $space-sm;
+  border-radius: $radius-md;
+  margin-bottom: $space-xs;
+  transition: background $transition-normal;
 
   &.selected {
-    background: #FFE8E0;
+    background: $primary-light;
   }
-  &:active { background: #FFF0E6; }
+  &:active { background: $surface-warm; }
 }
 
 .migrate-name {
-  font-size: 28rpx;
-  color: #2D1B1B;
+  font-size: $font-lg;
+  color: $text;
   font-weight: 500;
 }
 
 .modal-btns {
   display: flex;
-  gap: 24rpx;
+  gap: $space-md;
 }
 
 .modal-btn {
   flex: 1;
   height: 88rpx;
-  border-radius: 24rpx;
+  border-radius: $space-md;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
 
   &.cancel {
-    background: #FFF8F0;
-    color: #8B7E7E;
+    background: $bg;
+    color: $text-sec;
   }
 
   &.confirm {
-    background: linear-gradient(135deg, #FF8C69, #E67355);
-    color: #FFFFFF;
+    background: linear-gradient(135deg, $primary, #E67355);
+    color: $surface;
   }
 
   &.disabled { opacity: 0.5; }
diff --git a/client/src/pages/group-manage/index.vue b/client/src/pages/group-manage/index.vue
index a05462a..9df1df2 100644
--- a/client/src/pages/group-manage/index.vue
+++ b/client/src/pages/group-manage/index.vue
@@ -325,59 +325,50 @@ function handleDissolve(group: Group) {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
-.status-bar { background: #FFF8F0; }
+.status-bar { @include status-bar; }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 40rpx 24rpx;
+  padding: $space-sm $space-xl $space-md;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:active { opacity: 0.6; }
+  @include nav-back;
 }
 
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 /* Tab 卡片 */
 .action-card {
-  margin: 24rpx 40rpx 0;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  margin: $space-md $space-xl 0;
+  background: $surface;
+  border-radius: $radius-2xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
   overflow: hidden;
 }
 
 .tab-bar {
   display: flex;
-  padding: 16rpx 16rpx 0;
-  gap: 8rpx;
+  padding: $space-sm $space-sm 0;
+  gap: $space-xs;
 }
 
 .tab-item {
@@ -386,69 +377,69 @@ function handleDissolve(group: Group) {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 20rpx 20rpx 0 0;
-  transition: all 0.2s;
+  border-radius: $radius-lg $radius-lg 0 0;
+  transition: all $transition-normal;
 
   &.active {
-    background: #FFF0E6;
+    background: $surface-warm;
 
-    .tab-text { color: #FF8C69; }
+    .tab-text { color: $primary; }
   }
 }
 
 .tab-text {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #8B7E7E;
+  color: $text-sec;
 }
 
 .action-body {
   display: flex;
-  gap: 16rpx;
-  padding: 24rpx 32rpx 32rpx;
+  gap: $space-sm;
+  padding: $space-md $space-lg $space-lg;
 }
 
 .action-input {
   flex: 1;
   height: 80rpx;
-  padding: 0 24rpx;
-  background: #FFF8F0;
-  border-radius: 20rpx;
-  border: 2rpx solid #F0E0D6;
-  font-size: 28rpx;
-  color: #2D1B1B;
+  padding: 0 $space-md;
+  background: $bg;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+  font-size: $font-lg;
+  color: $text;
 }
 
 .action-btn {
   height: 80rpx;
-  padding: 0 32rpx;
-  background: linear-gradient(135deg, #FF8C69, #E67355);
-  border-radius: 20rpx;
+  padding: 0 $space-lg;
+  background: linear-gradient(135deg, $primary, #E67355);
+  border-radius: $radius-lg;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8rpx;
+  gap: $space-xs;
 
   &.disabled { opacity: 0.5; }
   &:active { opacity: 0.8; }
 }
 
 .action-btn-text {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #FFFFFF;
+  color: $surface;
   white-space: nowrap;
 }
 
 /* 群组列表 */
 .section-header {
-  padding: 40rpx 40rpx 16rpx;
+  padding: $space-xl $space-xl $space-sm;
 }
 
 .section-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #8B7E7E;
+  color: $text-sec;
 }
 
 .loading-box, .empty-box {
@@ -456,36 +447,36 @@ function handleDissolve(group: Group) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 16rpx;
+  gap: $space-sm;
   padding: 80rpx 0;
 }
 
 .loading-text, .empty-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  font-size: $font-lg;
+  color: $text-muted;
 }
 
 .group-list {
-  padding: 0 40rpx;
+  padding: 0 $space-xl;
 }
 
 .group-item {
   display: flex;
   align-items: flex-start;
-  padding: 28rpx 32rpx;
-  margin-bottom: 16rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
-  gap: 24rpx;
+  padding: $font-lg $space-lg;
+  margin-bottom: $space-sm;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  gap: $space-md;
 }
 
 .group-icon {
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
-  background: #FFF0E6;
+  background: $surface-warm;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -505,24 +496,24 @@ function handleDissolve(group: Group) {
 }
 
 .group-name {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .role-badge {
   padding: 2rpx 12rpx;
-  border-radius: 8rpx;
+  border-radius: $radius-xs;
 }
 
 .role-badge-text {
-  font-size: 20rpx;
+  font-size: $font-xs;
   font-weight: 500;
 }
 
 .group-meta {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
   display: block;
   margin-top: 4rpx;
 }
@@ -532,19 +523,19 @@ function handleDissolve(group: Group) {
   display: flex;
   align-items: center;
   margin-top: 12rpx;
-  gap: 8rpx;
+  gap: $space-xs;
   flex-wrap: wrap;
 }
 
 .invite-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
 }
 
 .invite-code {
-  font-size: 24rpx;
+  font-size: $font-md;
   font-weight: 600;
-  color: #FF8C69;
+  color: $primary;
   font-family: 'Fredoka', monospace;
 }
 
@@ -553,70 +544,61 @@ function handleDissolve(group: Group) {
   align-items: center;
   gap: 4rpx;
   padding: 4rpx 12rpx;
-  background: #FFF8F0;
-  border-radius: 12rpx;
+  background: $bg;
+  border-radius: $radius-sm;
 
-  &:active { background: #F0E0D6; }
+  &:active { background: $border; }
 }
 
 .invite-action-text {
-  font-size: 22rpx;
-  color: #8B7E7E;
+  font-size: $font-sm;
+  color: $text-sec;
 }
 
 /* 操作按钮 */
 .group-actions {
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: $space-xs;
   flex-shrink: 0;
 }
 
 .group-btn {
-  padding: 12rpx 24rpx;
-  border-radius: 16rpx;
+  padding: 12rpx $space-md;
+  border-radius: $radius-md;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  &.manage { background: #FFF0E6; }
-  &.leave { background: #FFF0E6; }
-  &.dissolve { background: #FFE8E8; }
+  &.manage { background: $surface-warm; }
+  &.leave { background: $surface-warm; }
+  &.dissolve { background: $danger-light; }
 
   &:active { opacity: 0.7; }
 }
 
 .group-btn-text {
-  font-size: 24rpx;
+  font-size: $font-md;
   font-weight: 500;
   white-space: nowrap;
 
-  &.manage-text { color: #FF8C69; }
-  &.leave-text { color: #FF8C69; }
-  &.dissolve-text { color: #FF6B6B; }
+  &.manage-text { color: $primary; }
+  &.leave-text { color: $primary; }
+  &.dissolve-text { color: $danger; }
 }
 
 /* 成员管理弹窗 */
 .modal-mask {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 200;
-  display: flex;
-  align-items: flex-end;
+  @include modal-mask;
 }
 
 .member-modal {
   width: 100%;
   max-height: 75vh;
-  background: #FFFFFF;
-  border-radius: 40rpx 40rpx 0 0;
+  background: $surface;
+  border-radius: $radius-2xl $radius-2xl 0 0;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
   overflow: hidden;
 }
 
@@ -624,14 +606,14 @@ function handleDissolve(group: Group) {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32rpx 40rpx 24rpx;
-  border-bottom: 2rpx solid #F0E0D6;
+  padding: $space-lg $space-xl $space-md;
+  border-bottom: 2rpx solid $border;
 }
 
 .modal-title {
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .modal-close {
@@ -641,14 +623,14 @@ function handleDissolve(group: Group) {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background: #F0E0D6;
+  background: $border;
 
-  &:active { background: #E0D6D0; }
+  &:active { background: darken($border, 5%); }
 }
 
 .modal-close-text {
-  font-size: 36rpx;
-  color: #8B7E7E;
+  font-size: $font-2xl;
+  color: $text-sec;
   line-height: 1;
 }
 
@@ -661,19 +643,17 @@ function handleDissolve(group: Group) {
 
 .member-list {
   max-height: 60vh;
-  padding: 16rpx 40rpx 40rpx;
-  box-sizing: border-box;
+  padding: $space-sm $space-xl $space-xl;
   width: 100%;
 }
 
 .member-item {
   display: flex;
   align-items: center;
-  padding: 20rpx 0;
-  gap: 20rpx;
+  padding: $space-lg 0;
+  gap: $space-lg;
   border-bottom: 2rpx solid #F8F0EB;
   width: 100%;
-  box-sizing: border-box;
 
   &:last-child { border-bottom: none; }
 }
@@ -682,7 +662,7 @@ function handleDissolve(group: Group) {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: #F0E0D6;
+  background: $border;
   flex-shrink: 0;
 }
 
@@ -692,9 +672,9 @@ function handleDissolve(group: Group) {
 }
 
 .member-name {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -706,22 +686,22 @@ function handleDissolve(group: Group) {
 }
 
 .member-role-text {
-  font-size: 22rpx;
+  font-size: $font-sm;
 }
 
 .member-remove {
-  padding: 12rpx 24rpx;
-  background: #FFE8E8;
-  border-radius: 16rpx;
+  padding: 12rpx $space-md;
+  background: $danger-light;
+  border-radius: $radius-md;
   flex-shrink: 0;
 
   &:active { opacity: 0.7; }
 }
 
 .member-remove-text {
-  font-size: 24rpx;
+  font-size: $font-md;
   font-weight: 500;
-  color: #FF6B6B;
+  color: $danger;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/client/src/pages/index/index.vue b/client/src/pages/index/index.vue
index be5889f..f34a4cd 100644
--- a/client/src/pages/index/index.vue
+++ b/client/src/pages/index/index.vue
@@ -280,38 +280,33 @@ function goBills() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
 .status-bar {
-  background: #FFF8F0;
+  @include status-bar;
 }
 
 .header {
   display: flex;
   align-items: center;
-  padding: 16rpx 40rpx 32rpx;
+  padding: $space-sm $space-xl $space-lg;
 }
 
 .avatar-wrap {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  border: 2rpx solid #F0E0D6;
-  background: #FFF0E6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  border: 2rpx solid $border;
+  background: $surface-warm;
+  @include flex-center;
   overflow: hidden;
 }
 
@@ -322,71 +317,63 @@ function goBills() {
 
 .greeting {
   flex: 1;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
-  margin-left: 16rpx;
+  color: $text;
+  margin-left: $space-sm;
 }
 
 .bell {
   width: 88rpx;
   height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
   position: relative;
-
   &:active { opacity: 0.6; }
 }
 
 .bell-badge {
   position: absolute;
-  top: 8rpx;
-  right: 8rpx;
+  top: $space-xs;
+  right: $space-xs;
   min-width: 32rpx;
   height: 32rpx;
-  padding: 0 8rpx;
-  background: #FF6B6B;
-  border-radius: 16rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  padding: 0 $space-xs;
+  background: $danger;
+  border-radius: $radius-full;
+  @include flex-center;
 }
 
 .bell-badge-text {
-  font-size: 18rpx;
+  font-size: $font-xs;
   font-weight: 600;
-  color: #FFFFFF;
+  color: $surface;
 }
 
 .overview-card {
-  margin: 0 40rpx;
-  padding: 48rpx;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08),
-              inset -2rpx -2rpx 6rpx rgba(45, 27, 27, 0.04);
+  margin: 0 $space-xl;
+  padding: $space-2xl;
+  @include card($radius-2xl);
+  box-shadow: $shadow-clay;
 }
 
 .card-label {
-  font-size: 28rpx;
-  color: #8B7E7E;
+  font-size: $font-lg;
+  color: $text-sec;
   display: block;
-  margin-bottom: 12rpx;
+  margin-bottom: $space-sm;
 }
 
 .amount-row {
   display: flex;
   align-items: baseline;
-  margin-bottom: 32rpx;
+  margin-bottom: $space-lg;
 }
 
 .currency {
   font-family: 'Fredoka', sans-serif;
-  font-size: 44rpx;
+  font-size: $font-3xl;
   font-weight: 500;
-  color: #8B7E7E;
+  color: $text-sec;
   margin-right: 4rpx;
 }
 
@@ -394,174 +381,156 @@ function goBills() {
   font-family: 'Fredoka', sans-serif;
   font-size: 72rpx;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   font-variant-numeric: tabular-nums;
 }
 
 .mini-stats {
   display: flex;
-  gap: 24rpx;
-  margin-top: 40rpx;
+  gap: $space-md;
+  margin-top: $space-xl;
 }
 
 .mini-stat {
   flex: 1;
   min-width: 0;
-  padding: 24rpx 12rpx;
-  border-radius: 24rpx;
-  background: #FFF8F0;
+  padding: $space-md $space-sm;
+  border-radius: $radius-xl;
+  background: $bg;
   text-align: center;
 }
 
 .mini-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
-  margin-bottom: 8rpx;
+  margin-bottom: $space-xs;
 }
 
 .mini-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include text-ellipsis;
 
-  &.income { color: #7BC67E; }
-  &.expense { color: #FF6B6B; }
+  &.income { color: $success; }
+  &.expense { color: $danger; }
 }
 
 .today-card {
-  margin: 24rpx 40rpx 0;
-  padding: 28rpx 32rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  margin: $space-md $space-xl 0;
+  padding: $space-lg $space-lg;
+  @include card($radius-xl);
   display: flex;
   align-items: center;
-  gap: 24rpx;
+  gap: $space-md;
 }
 
 .today-item {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: $space-xs;
 }
 
 .today-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
 }
 
 .today-amount {
   font-family: 'Fredoka', sans-serif;
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
 
-  &.expense { color: #FF6B6B; }
-  &.income { color: #7BC67E; }
+  &.expense { color: $danger; }
+  &.income { color: $success; }
 }
 
 .today-divider {
   width: 2rpx;
   height: 56rpx;
-  background: #F0E0D6;
+  background: $border;
   flex-shrink: 0;
 }
 
 .today-count {
-  font-size: 22rpx;
-  color: #BFB3B3;
+  font-size: $font-sm;
+  color: $text-muted;
   flex-shrink: 0;
 }
 
 .quick-actions {
   display: flex;
-  gap: 24rpx;
-  padding: 0 40rpx;
-  margin-top: 40rpx;
+  gap: $space-md;
+  padding: 0 $space-xl;
+  margin-top: $space-xl;
 }
 
 .quick-btn {
   flex: 1;
   height: 144rpx;
-  border-radius: 32rpx;
-  background: #FFFFFF;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
-  display: flex;
+  border-radius: $radius-2xl;
+  @include card;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8rpx;
+  @include flex-center;
+  gap: $space-xs;
 
   &:active {
     transform: scale(0.97);
-    box-shadow: inset 2rpx 2rpx 6rpx rgba(45, 27, 27, 0.1);
+    box-shadow: $shadow-clay-pressed;
   }
 }
 
-.quick-text { font-size: 24rpx; font-weight: 500; color: #2D1B1B; }
+.quick-text { font-size: $font-md; font-weight: 500; color: $text; }
 
 .section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 48rpx 40rpx 24rpx;
+  @include flex-between;
+  padding: $space-2xl $space-xl $space-md;
 }
 
 .section-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #8B7E7E;
+  color: $text-sec;
 }
 
 .section-more {
-  font-size: 24rpx;
-  color: #FF8C69;
-  padding: 16rpx 24rpx;
-  margin: -16rpx -24rpx;
-
+  font-size: $font-md;
+  color: $primary;
+  padding: $space-sm $space-md;
+  margin: -$space-sm -#{$space-md};
   &:active { opacity: 0.6; }
 }
 
 .tx-list {
-  padding: 0 40rpx;
+  padding: 0 $space-xl;
 }
 
 .amount-skeleton {
-  margin-bottom: 32rpx;
+  margin-bottom: $space-lg;
 }
 
 .skeleton-item {
   display: flex;
   align-items: center;
-  padding: 28rpx 0;
-  gap: 24rpx;
+  padding: $space-lg 0;
+  gap: $space-md;
 }
 
 .skeleton-info {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8rpx;
+  gap: $space-xs;
 }
 
 .state-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16rpx;
-  padding: 80rpx 0;
+  @include state-box;
 }
 
 .state-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  @include state-text;
 }
 
 /* 强提醒公告弹窗 */
diff --git a/client/src/pages/notifications/index.vue b/client/src/pages/notifications/index.vue
index 0a535f2..52bf98e 100644
--- a/client/src/pages/notifications/index.vue
+++ b/client/src/pages/notifications/index.vue
@@ -247,75 +247,67 @@ onReachBottom(() => {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
-.status-bar { background: #FFF8F0; }
+.status-bar { @include status-bar; }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 40rpx 24rpx;
+  padding: $space-sm $space-xl $space-md;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &:active { opacity: 0.6; }
+  @include nav-back;
 }
 
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .nav-action {
-  padding: 8rpx 16rpx;
+  padding: $space-xs $space-sm;
   &:active { opacity: 0.6; }
 }
 
 .nav-action-text {
-  font-size: 26rpx;
-  color: #FF8C69;
+  font-size: $font-base;
+  color: $primary;
 }
 
-.tabs-wrap { display: flex; justify-content: center; margin: 0 0 24rpx; }
+.tabs-wrap { display: flex; justify-content: center; margin: 0 0 $space-md; }
 
 .tabs {
   display: inline-flex;
-  background: #FFF0E6;
-  border-radius: 24rpx;
-  padding: 8rpx;
+  background: $surface-warm;
+  border-radius: $space-md;
+  padding: $space-xs;
 }
 
 .tab {
-  padding: 12rpx 32rpx;
-  border-radius: 20rpx;
-  font-size: 26rpx;
-  color: #8B7E7E;
-  transition: all 0.2s;
+  padding: 12rpx $space-lg;
+  border-radius: $radius-lg;
+  font-size: $font-base;
+  color: $text-sec;
+  transition: all $transition-normal;
 
   &.active {
-    background: #FFFFFF;
-    color: #FF8C69;
+    background: $surface;
+    color: $primary;
     font-weight: 600;
-    box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
+    box-shadow: $shadow-sm;
   }
 }
 
@@ -323,31 +315,31 @@ onReachBottom(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16rpx;
+  gap: $space-sm;
   padding: 120rpx 0;
 }
 
 .loading-text, .empty-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  font-size: $font-lg;
+  color: $text-muted;
 }
 
-.notification-list { padding: 0 40rpx; }
+.notification-list { padding: 0 $space-xl; }
 
 .notification-item {
   display: flex;
   align-items: flex-start;
-  gap: 20rpx;
-  padding: 28rpx 32rpx;
-  margin-bottom: 16rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  gap: $space-lg;
+  padding: $font-lg $space-lg;
+  margin-bottom: $space-sm;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
   position: relative;
   overflow: hidden;
 
-  &.unread { border-left: 6rpx solid #FF8C69; }
+  &.unread { border-left: 6rpx solid $primary; }
 }
 
 .notif-icon {
@@ -365,25 +357,25 @@ onReachBottom(() => {
 .notif-title-row {
   display: flex;
   align-items: center;
-  gap: 8rpx;
+  gap: $space-xs;
 }
 
 .pin-badge {
-  font-size: 24rpx;
+  font-size: $font-md;
 }
 
 .notif-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
 }
 
 .notif-body {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
-  margin-top: 8rpx;
+  margin-top: $space-xs;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -391,7 +383,7 @@ onReachBottom(() => {
 
 .notif-image {
   width: 100%;
-  border-radius: 12rpx;
+  border-radius: $radius-sm;
   margin-top: 12rpx;
 }
 
@@ -399,42 +391,42 @@ onReachBottom(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 8rpx;
+  margin-top: $space-xs;
 }
 
 .notif-time {
-  font-size: 22rpx;
-  color: #BFB3B3;
+  font-size: $font-sm;
+  color: $text-muted;
 }
 
 .unread-dot {
-  width: 16rpx;
-  height: 16rpx;
+  width: $space-sm;
+  height: $space-sm;
   border-radius: 50%;
-  background: #FF8C69;
+  background: $primary;
   flex-shrink: 0;
-  margin-top: 8rpx;
+  margin-top: $space-xs;
 }
 
 .notif-link {
-  font-size: 22rpx;
-  color: #FF8C69;
+  font-size: $font-sm;
+  color: $primary;
   text-decoration: underline;
 }
 
 .pinned {
-  border-color: #FF8C69;
+  border-color: $primary;
   background: #FFFAF7;
 }
 
 .no-more {
   text-align: center;
-  padding: 32rpx 0;
+  padding: $space-lg 0;
 }
 
 .no-more-text {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
 }
 
 .admin-actions {
@@ -444,17 +436,17 @@ onReachBottom(() => {
 }
 
 .admin-btn {
-  padding: 8rpx 16rpx;
-  background: #FFF0E6;
-  border-radius: 12rpx;
+  padding: $space-xs $space-sm;
+  background: $surface-warm;
+  border-radius: $radius-sm;
 
-  &.danger { background: #FFE8E8; }
+  &.danger { background: $danger-light; }
   &:active { opacity: 0.7; }
 }
 
 .admin-btn-text {
-  font-size: 22rpx;
-  color: #FF8C69;
-  &.danger-text { color: #FF6B6B; }
+  font-size: $font-sm;
+  color: $primary;
+  &.danger-text { color: $danger; }
 }
 </style>
diff --git a/client/src/pages/profile-edit/index.vue b/client/src/pages/profile-edit/index.vue
index 53bb887..3f15d9f 100644
--- a/client/src/pages/profile-edit/index.vue
+++ b/client/src/pages/profile-edit/index.vue
@@ -105,43 +105,34 @@ async function saveProfile() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
-.status-bar { background: #FFF8F0; }
+.status-bar { @include status-bar; }
 
 .nav-bar {
   display: flex;
   align-items: center;
-  padding: 16rpx 40rpx 24rpx;
+  padding: $space-sm $space-xl $space-md;
 }
 
 .nav-back {
-  width: 88rpx;
-  height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:active { opacity: 0.6; }
+  @include nav-back;
 }
 
 .nav-title {
   flex: 1;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .nav-save {
@@ -155,16 +146,16 @@ async function saveProfile() {
 }
 
 .save-text {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #FF8C69;
+  color: $primary;
 }
 
 .avatar-section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 48rpx 0 32rpx;
+  padding: $space-2xl 0 $space-lg;
 }
 
 .avatar-wrap {
@@ -172,7 +163,7 @@ async function saveProfile() {
   height: 160rpx;
   border-radius: 50%;
   border: 6rpx solid rgba(255, 255, 255, 0.5);
-  background: linear-gradient(135deg, #FF8C69, #FFB89A);
+  background: linear-gradient(135deg, $primary, #FFB89A);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -196,61 +187,61 @@ async function saveProfile() {
 }
 
 .avatar-hint {
-  font-size: 24rpx;
-  color: #BFB3B3;
-  margin-top: 16rpx;
+  font-size: $font-md;
+  color: $text-muted;
+  margin-top: $space-sm;
 }
 
 .form-card {
-  margin: 32rpx 40rpx 0;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  margin: $space-lg $space-xl 0;
+  background: $surface;
+  border-radius: $radius-2xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
   overflow: hidden;
 }
 
 .form-item {
   display: flex;
   align-items: center;
-  padding: 32rpx 40rpx;
+  padding: $space-lg $space-xl;
 }
 
 .form-label {
   width: 120rpx;
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
   flex-shrink: 0;
 }
 
 .form-input {
   flex: 1;
-  font-size: 28rpx;
-  color: #2D1B1B;
+  font-size: $font-lg;
+  color: $text;
 }
 
 .tips-card {
-  margin: 32rpx 40rpx 0;
-  padding: 32rpx 40rpx;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  margin: $space-lg $space-xl 0;
+  padding: $space-lg $space-xl;
+  background: $surface;
+  border-radius: $radius-2xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
 }
 
 .tips-title {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
-  margin-bottom: 16rpx;
+  margin-bottom: $space-sm;
 }
 
 .tips-text {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
-  margin-bottom: 8rpx;
+  margin-bottom: $space-xs;
 }
 </style>
diff --git a/client/src/pages/profile/index.vue b/client/src/pages/profile/index.vue
index b4d6fb2..4581f95 100644
--- a/client/src/pages/profile/index.vue
+++ b/client/src/pages/profile/index.vue
@@ -357,41 +357,38 @@ async function exportData() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
 .status-bar {
-  background: #FFF8F0;
+  @include status-bar;
 }
 
 .page-title {
   display: block;
   text-align: center;
-  font-size: 36rpx;
+  font-size: $font-2xl;
   font-weight: 600;
-  color: #2D1B1B;
-  padding: 16rpx 0 24rpx;
+  color: $text;
+  padding: $space-sm 0 $space-md;
 }
 
 .profile-card {
-  margin: 0 40rpx;
-  padding: 48rpx;
-  background: linear-gradient(135deg, #FF8C69, #FFB89A);
-  border-radius: 40rpx;
+  margin: 0 $space-xl;
+  padding: $space-2xl;
+  background: linear-gradient(135deg, $primary, #FFB89A);
+  border-radius: $radius-2xl;
   box-shadow: 8rpx 8rpx 24rpx rgba(45, 27, 27, 0.1);
   display: flex;
   align-items: center;
-  gap: 32rpx;
+  gap: $space-lg;
 
   &:active { opacity: 0.85; }
 }
@@ -408,72 +405,65 @@ async function exportData() {
 }
 
 .p-name {
-  font-size: 40rpx;
+  font-size: $font-3xl;
   font-weight: 600;
-  color: #FFFFFF;
+  color: $surface;
   display: block;
 }
 
 .p-tagline {
-  font-size: 28rpx;
+  font-size: $font-lg;
   color: rgba(255, 255, 255, 0.8);
   display: block;
   margin-top: 4rpx;
 }
 
 .p-streak {
-  font-size: 24rpx;
+  font-size: $font-md;
   color: rgba(255, 255, 255, 0.65);
   display: block;
-  margin-top: 16rpx;
+  margin-top: $space-sm;
 }
 
 .quick-stats {
   display: flex;
-  gap: 24rpx;
-  padding: 0 40rpx;
-  margin-top: 32rpx;
+  gap: $space-md;
+  padding: 0 $space-xl;
+  margin-top: $space-lg;
 }
 
 .qs-card {
   flex: 1;
-  padding: 32rpx 24rpx;
-  background: #FFFFFF;
+  padding: $space-lg $space-md;
+  background: $surface;
   border-radius: 32rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
   text-align: center;
 }
 
 .qs-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
-  margin-bottom: 8rpx;
+  margin-bottom: $space-xs;
 }
 
 .qs-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 
-  &.income { color: #7BC67E; }
+  &.income { color: $success; }
 }
 
 .qs-skeleton {
   width: 160rpx;
   height: 40rpx;
-  background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
-  background-size: 200% 100%;
-  border-radius: 8rpx;
+  @include shimmer;
+  border-radius: $radius-xs;
   margin: 0 auto;
-  animation: shimmer 1.5s infinite;
-}
-
-@keyframes shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -483,57 +473,57 @@ async function exportData() {
 }
 
 .menu-card {
-  margin: 40rpx 40rpx 0;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  margin: $space-xl $space-xl 0;
+  background: $surface;
+  border-radius: $radius-2xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
   overflow: hidden;
 
-  &.mt { margin-top: 32rpx; }
+  &.mt { margin-top: $space-lg; }
 }
 
 .menu-item {
   height: 112rpx;
-  padding: 0 40rpx;
+  padding: 0 $space-xl;
   display: flex;
   align-items: center;
-  border-bottom: 1rpx solid #F0E0D6;
+  border-bottom: 1rpx solid $border;
 
   &:last-child { border-bottom: none; }
-  &:active { background: #FFF8F0; }
+  &:active { background: $bg; }
 }
 
-.mi-label { flex: 1; font-size: 28rpx; font-weight: 500; color: #2D1B1B; }
-.mi-extra { font-size: 28rpx; color: #FF8C69; font-weight: 600; margin-right: 16rpx; }
+.mi-label { flex: 1; font-size: $font-lg; font-weight: 500; color: $text; }
+.mi-extra { font-size: $font-lg; color: $primary; font-weight: 600; margin-right: $space-sm; }
 
 .admin-entry {
-  gap: 16rpx;
-  .mi-label { color: #FF8C69; font-weight: 600; }
+  gap: $space-sm;
+  .mi-label { color: $primary; font-weight: 600; }
 }
 
 .about-title {
-  font-size: 40rpx;
+  font-size: $font-3xl;
   font-weight: 600;
-  color: #FF8C69;
+  color: $primary;
   display: block;
   text-align: center;
 }
 
 .about-version {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
   display: block;
   text-align: center;
-  margin: 8rpx 0 24rpx;
+  margin: $space-xs 0 $space-md;
 }
 
 .about-desc {
-  font-size: 28rpx;
-  color: #8B7E7E;
+  font-size: $font-lg;
+  color: $text-sec;
   display: block;
   text-align: center;
-  margin-bottom: 8rpx;
+  margin-bottom: $space-xs;
 }
 
 .modal-mask {
@@ -548,33 +538,33 @@ async function exportData() {
 
 .modal {
   width: 600rpx;
-  background: #FFFFFF;
-  border-radius: 32rpx;
-  padding: 48rpx;
+  background: $surface;
+  border-radius: $space-lg;
+  padding: $space-2xl;
 }
 
 .modal-btns {
   display: flex;
-  gap: 24rpx;
+  gap: $space-md;
 }
 
 .modal-btns-top {
-  margin-top: 40rpx;
+  margin-top: $space-xl;
 }
 
 .modal-btn {
   flex: 1;
   height: 88rpx;
-  border-radius: 24rpx;
+  border-radius: $space-md;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
 
   &.confirm {
-    background: linear-gradient(135deg, #FF8C69, #E67355);
-    color: #FFFFFF;
+    background: linear-gradient(135deg, $primary, #E67355);
+    color: $surface;
   }
 }
 
@@ -585,17 +575,17 @@ async function exportData() {
 }
 
 .identity-card {
-  margin: 24rpx 40rpx 0;
-  padding: 28rpx 32rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  margin: $space-md $space-xl 0;
+  padding: $font-lg $space-lg;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
   display: flex;
   align-items: center;
-  gap: 20rpx;
+  gap: $space-lg;
 
-  &:active { background: #FFF0E6; }
+  &:active { background: $surface-warm; }
 }
 
 .id-info {
@@ -605,14 +595,14 @@ async function exportData() {
 }
 
 .id-name {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .id-desc {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
   margin-top: 4rpx;
 }
 
@@ -621,33 +611,33 @@ async function exportData() {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #FFFFFF;
-  border-radius: 40rpx 40rpx 0 0;
-  padding: 40rpx;
-  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+  background: $surface;
+  border-radius: $radius-2xl $radius-2xl 0 0;
+  padding: $space-xl;
+  padding-bottom: calc($space-xl + env(safe-area-inset-bottom));
   max-height: 70vh;
   overflow-y: auto;
 }
 
 .modal-title {
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
   display: block;
   text-align: center;
-  margin-bottom: 32rpx;
+  margin-bottom: $space-lg;
 }
 
 .id-option {
   display: flex;
   align-items: center;
-  gap: 20rpx;
-  padding: 28rpx 24rpx;
-  border-radius: 20rpx;
+  gap: $space-lg;
+  padding: $font-lg $space-md;
+  border-radius: $radius-lg;
   margin-bottom: 12rpx;
 
-  &.active { background: #FFF0E6; }
-  &:active { background: #FFF8F0; }
+  &.active { background: $surface-warm; }
+  &:active { background: $bg; }
 }
 
 .id-option-info {
@@ -657,53 +647,53 @@ async function exportData() {
 }
 
 .id-option-name {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .id-option-desc {
-  font-size: 24rpx;
-  color: #BFB3B3;
+  font-size: $font-md;
+  color: $text-muted;
   margin-top: 2rpx;
 }
 
 .id-actions {
   display: flex;
-  gap: 24rpx;
-  margin-top: 24rpx;
-  padding-top: 24rpx;
-  border-top: 1rpx solid #F0E0D6;
+  gap: $space-md;
+  margin-top: $space-md;
+  padding-top: $space-md;
+  border-top: 1rpx solid $border;
 }
 
 .id-action-btn {
   flex: 1;
   height: 80rpx;
-  border-radius: 20rpx;
-  background: #FFF0E6;
+  border-radius: $radius-lg;
+  background: $surface-warm;
   display: flex;
   align-items: center;
   justify-content: center;
 
-  &:active { background: #FFE8D6; }
+  &:active { background: darken($surface-warm, 3%); }
 }
 
 .id-action-text {
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 500;
-  color: #FF8C69;
+  color: $primary;
 }
 
 .id-manage {
-  margin-top: 16rpx;
-  padding: 24rpx 20rpx;
+  margin-top: $space-sm;
+  padding: $space-md $space-lg;
   text-align: center;
 
-  &:active { background: #FFF0E6; border-radius: 16rpx; }
+  &:active { background: $surface-warm; border-radius: $radius-md; }
 }
 
 .id-manage-text {
-  font-size: 26rpx;
-  color: #8B7E7E;
+  font-size: $font-base;
+  color: $text-sec;
 }
 </style>
diff --git a/client/src/pages/stats/index.vue b/client/src/pages/stats/index.vue
index 60d86b0..13322c2 100644
--- a/client/src/pages/stats/index.vue
+++ b/client/src/pages/stats/index.vue
@@ -313,46 +313,36 @@ function getBarWidth(amount: number) {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .page {
-  min-height: 100vh;
-  background: #FFF8F0;
-  padding: 0 0 180rpx;
+  @include page-base;
 }
 
 .header-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: #FFF8F0;
+  @include sticky-header;
 }
 
 .status-bar {
-  background: #FFF8F0;
+  @include status-bar;
 }
 
 .page-title {
-  display: block;
-  text-align: center;
-  font-size: 36rpx;
-  font-weight: 600;
-  color: #2D1B1B;
-  padding: 16rpx 0 24rpx;
+  @include page-title;
 }
 
 .month-picker {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 48rpx;
-  padding: 16rpx 0;
+  gap: $space-2xl;
+  padding: $space-sm 0;
 }
 
 .arrow {
   width: 88rpx;
   height: 88rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flex-center;
 
   &.disabled { opacity: 0.5; }
 
@@ -361,42 +351,35 @@ function getBarWidth(amount: number) {
 
 .month-text {
   font-family: 'Fredoka', sans-serif;
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
 }
 
-.tabs-wrap { display: flex; justify-content: center; margin: 16rpx 0 32rpx; }
+.tabs-wrap {
+  @include tabs-wrap;
+  margin: $space-sm 0 $space-lg;
+}
 
 .tabs {
-  display: inline-flex;
-  background: #FFF0E6;
-  border-radius: 24rpx;
-  padding: 8rpx;
+  @include tabs;
+  border-radius: $radius-xl;
 }
 
 .tab {
-  padding: 16rpx 40rpx;
-  border-radius: 20rpx;
-  font-size: 28rpx;
-  color: #8B7E7E;
-  transition: all 0.2s;
+  @include tab;
+  border-radius: $radius-xl;
 
   &.active {
-    background: #FFFFFF;
-    color: #FF8C69;
-    font-weight: 600;
-    box-shadow: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
+    border-radius: $radius-lg;
+    box-shadow: $shadow-md;
   }
 }
 
 .overview-card, .chart-card {
-  margin: 0 40rpx 32rpx;
-  padding: 40rpx;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  @include card($radius-2xl);
+  margin: 0 $space-xl $space-lg;
+  padding: $space-xl;
 }
 
 .overview-card {
@@ -407,64 +390,61 @@ function getBarWidth(amount: number) {
 
 .extra-stats {
   display: flex;
-  gap: 24rpx;
-  margin: 0 40rpx 32rpx;
+  gap: $space-md;
+  margin: 0 $space-xl $space-lg;
 }
 
 .es-item {
   flex: 1;
-  padding: 24rpx;
-  background: #FFFFFF;
-  border-radius: 28rpx;
-  border: 2rpx solid #F0E0D6;
-  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  @include card($radius-xl);
+  padding: $space-md;
   text-align: center;
 }
 
 .es-label {
-  font-size: 22rpx;
-  color: #8B7E7E;
+  font-size: $font-sm;
+  color: $text-sec;
   display: block;
-  margin-bottom: 8rpx;
+  margin-bottom: $space-xs;
 }
 
 .es-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 28rpx;
+  font-size: $font-lg;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 
-  &.up { color: #FF6B6B; }
-  &.down { color: #7BC67E; }
-  &.same { color: #8B7E7E; }
+  &.up { color: $danger; }
+  &.down { color: $success; }
+  &.same { color: $text-sec; }
 }
 
 .ov-label {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
   display: block;
   margin-bottom: 12rpx;
 }
 
 .ov-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 40rpx;
+  font-size: $font-3xl;
   font-weight: 600;
-  color: #2D1B1B;
+  color: $text;
 }
 
 .chart-title {
-  font-size: 32rpx;
+  font-size: $font-xl;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
   display: block;
-  margin-bottom: 24rpx;
+  margin-bottom: $space-md;
 }
 
 .chart-legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx 32rpx;
+  gap: $space-sm $space-lg;
 }
 
 .legend-item {
@@ -479,74 +459,69 @@ function getBarWidth(amount: number) {
   border-radius: 50%;
 }
 
-.legend-text { font-size: 24rpx; color: #8B7E7E; }
+.legend-text { font-size: $font-md; color: $text-sec; }
 
 .empty {
   text-align: center;
   padding: 80rpx 0;
 }
 
-.empty-text { font-size: 28rpx; color: #BFB3B3; }
+.empty-text { font-size: $font-lg; color: $text-muted; }
 
 .state-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16rpx;
+  @include state-box;
   padding: 80rpx 0;
 }
 
 .state-text {
-  font-size: 28rpx;
-  color: #BFB3B3;
+  @include state-text;
 }
 
-.trend-list { display: flex; flex-direction: column; gap: 16rpx; }
+.trend-list { display: flex; flex-direction: column; gap: $space-sm; }
 
 .skeleton-legend {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx 32rpx;
+  gap: $space-sm $space-lg;
 }
 
 .skeleton-trend {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $space-sm;
 }
 
 .trend-item {
   display: flex;
   align-items: center;
-  gap: 16rpx;
+  gap: $space-sm;
 }
 
 .trend-date {
-  font-size: 24rpx;
-  color: #8B7E7E;
+  font-size: $font-md;
+  color: $text-sec;
 }
 
 .trend-bar-bg {
   flex: 1;
   height: 12rpx;
   border-radius: 6rpx;
-  background: #F0E0D6;
+  background: $border;
   overflow: hidden;
 }
 
 .trend-bar {
   height: 100%;
   border-radius: 6rpx;
-  background: linear-gradient(90deg, #FF8C69, #FFB89A);
+  background: linear-gradient(90deg, $primary, #FFB89A);
   transition: width 0.6s ease-out;
 }
 
 .trend-amount {
   width: 120rpx;
   font-family: 'Fredoka', sans-serif;
-  font-size: 24rpx;
+  font-size: $font-md;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
 }
 </style>
diff --git a/client/src/styles/mixins.scss b/client/src/styles/mixins.scss
new file mode 100644
index 0000000..c8933bd
--- /dev/null
+++ b/client/src/styles/mixins.scss
@@ -0,0 +1,238 @@
+/* ===== 公共 Mixins ===== */
+
+// 页面基础样式
+@mixin page-base {
+  min-height: 100vh;
+  background: $bg;
+  padding-bottom: 180rpx;
+}
+
+// 粘性头部
+@mixin sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: $bg;
+}
+
+// 状态栏
+@mixin status-bar {
+  background: $bg;
+}
+
+// 卡片
+@mixin card($radius: $radius-2xl) {
+  background: $surface;
+  border-radius: $radius;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+}
+
+// 导航栏
+@mixin nav-bar {
+  display: flex;
+  align-items: center;
+  padding: $space-sm $space-xl $space-md;
+}
+
+// 返回按钮
+@mixin nav-back {
+  width: 88rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:active { opacity: 0.6; }
+}
+
+// 页面标题
+@mixin page-title {
+  display: block;
+  text-align: center;
+  font-size: $font-2xl;
+  font-weight: 600;
+  color: $text;
+  padding: $space-sm 0 $space-md;
+}
+
+// 状态空/错误/加载
+@mixin state-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $space-sm;
+  padding: 120rpx 0;
+}
+
+@mixin state-text {
+  font-size: $font-lg;
+  color: $text-muted;
+}
+
+// Tabs
+@mixin tabs-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-sm;
+}
+
+@mixin tabs {
+  display: inline-flex;
+  background: $surface-warm;
+  border-radius: $radius-lg;
+  padding: $space-xs;
+}
+
+@mixin tab {
+  padding: $space-sm $space-xl;
+  border-radius: $radius-lg;
+  font-size: $font-lg;
+  color: $text-sec;
+  transition: all $transition-normal;
+
+  &.active {
+    background: $surface;
+    color: $primary;
+    font-weight: 600;
+    box-shadow: $shadow-sm;
+  }
+}
+
+// 弹窗
+@mixin modal-mask {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 200;
+  display: flex;
+  align-items: flex-end;
+}
+
+@mixin bottom-modal {
+  width: 100%;
+  max-height: 80vh;
+  background: $surface;
+  border-radius: $radius-2xl $radius-2xl 0 0;
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $space-lg $space-xl $space-md;
+  border-bottom: 2rpx solid $border;
+}
+
+@mixin modal-title {
+  font-size: $font-xl;
+  font-weight: 600;
+  color: $text;
+}
+
+@mixin modal-close {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: $border;
+  &:active { background: darken($border, 5%); }
+}
+
+// 列表项
+@mixin list-item {
+  display: flex;
+  align-items: center;
+  gap: $space-md;
+  padding: $space-lg $space-lg;
+  background: $surface;
+  border-radius: $radius-xl;
+  border: 2rpx solid $border;
+  box-shadow: $shadow-md;
+  margin-bottom: $space-sm;
+}
+
+// 输入框
+@mixin input {
+  width: 100%;
+  height: 80rpx;
+  padding: 0 $space-md;
+  background: $bg;
+  border-radius: $radius-lg;
+  border: 2rpx solid $border;
+  font-size: $font-lg;
+  color: $text;
+}
+
+// 按钮
+@mixin btn-primary {
+  height: 80rpx;
+  padding: 0 $space-lg;
+  background: linear-gradient(135deg, $primary, $primary-dark);
+  border-radius: $radius-lg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:active { opacity: 0.8; }
+}
+
+@mixin btn-primary-text {
+  font-size: $font-lg;
+  font-weight: 600;
+  color: $surface;
+  white-space: nowrap;
+}
+
+@mixin btn-ghost {
+  padding: $space-sm $space-md;
+  background: $surface-warm;
+  border-radius: $radius-md;
+  &:active { background: $border; }
+}
+
+@mixin btn-ghost-text {
+  font-size: $font-md;
+  color: $primary;
+}
+
+// Shimmer 动画
+@mixin shimmer {
+  background: linear-gradient(90deg, $border 25%, $surface-warm 50%, $border 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+// Flex 工具
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+// 文本溢出
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 安全区域
+@mixin safe-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
diff --git a/client/src/uni.scss b/client/src/uni.scss
index 9f887c5..8ec32f3 100644
--- a/client/src/uni.scss
+++ b/client/src/uni.scss
@@ -1,31 +1,69 @@
-/* Design Tokens */
+/* ===== Design Tokens ===== */
+
+// 颜色系统
 $primary: #FF8C69;
-$primary-light: #FFB89A;
+$primary-light: #FFE8E0;
 $primary-dark: #E67355;
 $secondary: #6C9BCF;
 $accent: #FFD166;
+
 $bg: #FFF8F0;
 $surface: #FFFFFF;
 $surface-warm: #FFF0E6;
+
 $text: #2D1B1B;
 $text-sec: #8B7E7E;
 $text-muted: #BFB3B3;
+
 $success: #7BC67E;
 $warning: #FFB347;
 $danger: #FF6B6B;
+$danger-light: #FFE8E8;
+
 $border: #F0E0D6;
 
-$shadow-clay: 4px 4px 12px rgba(45, 27, 27, 0.08), inset -2px -2px 6px rgba(45, 27, 27, 0.04);
-$shadow-clay-hover: 6px 6px 16px rgba(45, 27, 27, 0.12), inset -2px -2px 6px rgba(45, 27, 27, 0.04);
-$shadow-clay-pressed: inset 2px 2px 6px rgba(45, 27, 27, 0.1);
+// 间距系统
+$space-xs: 8rpx;
+$space-sm: 16rpx;
+$space-md: 24rpx;
+$space-lg: 32rpx;
+$space-xl: 40rpx;
+$space-2xl: 48rpx;
 
-$radius-sm: 8rpx;
-$radius-md: 12rpx;
-$radius-lg: 16rpx;
-$radius-xl: 20rpx;
+// 圆角系统
+$radius-xs: 8rpx;
+$radius-sm: 12rpx;
+$radius-md: 16rpx;
+$radius-lg: 20rpx;
+$radius-xl: 28rpx;
+$radius-2xl: 40rpx;
 $radius-full: 9999rpx;
 
-/* uCharts theme */
+// 字体系统
+$font-xs: 20rpx;
+$font-sm: 22rpx;
+$font-md: 24rpx;
+$font-base: 26rpx;
+$font-lg: 28rpx;
+$font-xl: 32rpx;
+$font-2xl: 36rpx;
+$font-3xl: 40rpx;
+$font-4xl: 56rpx;
+
+// 阴影系统
+$shadow-sm: 2rpx 2rpx 8rpx rgba(45, 27, 27, 0.06);
+$shadow-md: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+$shadow-lg: 8rpx 8rpx 24rpx rgba(45, 27, 27, 0.12);
+$shadow-clay: $shadow-md, inset -2rpx -2rpx 6rpx rgba(45, 27, 27, 0.04);
+$shadow-clay-hover: 6rpx 6rpx 16rpx rgba(45, 27, 27, 0.12), inset -2rpx -2rpx 6rpx rgba(45, 27, 27, 0.04);
+$shadow-clay-pressed: inset 2rpx 2rpx 6rpx rgba(45, 27, 27, 0.1);
+
+// 动画
+$transition-fast: 0.15s ease;
+$transition-normal: 0.2s ease;
+$transition-slow: 0.3s ease;
+
+/* ===== uCharts theme ===== */
 page {
   --u-charts-color-0: #FF8C69;
   --u-charts-color-1: #FFD166;