运营端小程序页面优化

haha-admin-mp/src/App.vue

@@ -123,7 +123,7 @@ const bindPendingInviteRelation = async (onSuccess?: () => void) => {
 </script>
 <style>
 /* 
- * 清新绿色设计系统
+ * 暖金黄设计系统 - 与用户端品牌统一
  * 特点: 纯色无渐变、简约清晰、科学排版
  */
 
@@ -144,11 +144,11 @@ page {
 
 /* ==================== 色彩系统 ==================== */
 :root {
-  /* 主色调 - 清新绿 */
-  --primary: #10b981;
-  --primary-light: #34d399;
-  --primary-dark: #059669;
-  --primary-bg: #ecfdf5;
+  /* 主色调 - 暖金黄 */
+  --primary: #FFC107;
+  --primary-light: #FFE082;
+  --primary-dark: #FFA000;
+  --primary-bg: #FFF8E1;
   
   /* 辅助色 - 活力橙 */
   --accent: #f97316;

haha-admin-mp/src/components/CustomTabBar.vue

@@ -52,6 +52,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 
 const tabPages = [
   '/pages/index/index',
@@ -87,7 +88,7 @@ const handleScan = () => {
   uni.scanCode({
     scanType: ['qrCode', 'barCode'],
     success: (res) => {
-      console.log('扫码结果:', res.result);
+      logger.log('扫码结果:', res.result);
       // 解析设备ID
       let deviceId = '';
       
@@ -135,8 +136,8 @@ const handleScan = () => {
   left: 0;
   right: 0;
   height: 120rpx;
-  background: #ffffff;
-  border-top: 1rpx solid #e5e7eb;
+  background: $bg-color-card;
+  border-top: 1rpx solid $border-color;
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -172,115 +173,120 @@ const handleScan = () => {
   position: relative;
 }
 
-/* 首页图标 - 房子 */
+/* 首页图标 - 房子（线框） */
 .icon-home {
   width: 32rpx;
-  height: 28rpx;
+  height: 32rpx;
   position: relative;
   margin: 0 auto;
-  
+
   &::before {
+    /* 屋顶 - 旋转正方形形成 ^ 形 */
     content: '';
     position: absolute;
-    top: 0;
+    top: 2rpx;
     left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 16rpx solid transparent;
-    border-right: 16rpx solid transparent;
-    border-bottom: 14rpx solid #94a3b8;
+    transform: translateX(-50%) rotate(-45deg);
+    width: 18rpx;
+    height: 18rpx;
+    border-top: 2.5rpx solid $text-color-muted;
+    border-right: 2.5rpx solid $text-color-muted;
   }
-  
+
   &::after {
+    /* 房屋主体 - 三边边框 */
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 24rpx;
-    height: 14rpx;
-    background: #94a3b8;
-    border-radius: 2rpx;
+    height: 16rpx;
+    border-left: 2.5rpx solid $text-color-muted;
+    border-right: 2.5rpx solid $text-color-muted;
+    border-bottom: 2.5rpx solid $text-color-muted;
   }
 }
 
-/* 订单图标 - 文档 */
+/* 订单图标 - 文档（线框） */
 .icon-order {
   width: 28rpx;
   height: 32rpx;
-  background: #94a3b8;
-  border-radius: 4rpx;
+  border: 2.5rpx solid $text-color-muted;
+  border-radius: 3rpx;
   position: relative;
   margin: 0 auto;
-  
+
   &::before {
+    /* 折角 */
     content: '';
     position: absolute;
-    top: 8rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 18rpx;
-    height: 2rpx;
-    background: #ffffff;
-    border-radius: 1rpx;
+    top: 0;
+    right: 0;
+    width: 0;
+    height: 0;
+    border-left: 8rpx solid transparent;
+    border-bottom: 8rpx solid $bg-color-card;
   }
-  
+
   &::after {
+    /* 文字横线 */
     content: '';
     position: absolute;
-    top: 14rpx;
+    top: 10rpx;
     left: 50%;
     transform: translateX(-50%);
-    width: 18rpx;
-    height: 2rpx;
-    background: #ffffff;
+    width: 16rpx;
+    height: 2.5rpx;
+    background: $text-color-muted;
     border-radius: 1rpx;
+    box-shadow: 0 6rpx 0 $text-color-muted;
   }
 }
 
-/* 设备图标 - 设备 */
+/* 设备图标 - 显示器（线框） */
 .icon-device {
-  width: 28rpx;
-  height: 32rpx;
-  background: #94a3b8;
-  border-radius: 4rpx;
+  width: 32rpx;
+  height: 28rpx;
   position: relative;
   margin: 0 auto;
-  
+
   &::before {
+    /* 屏幕 */
     content: '';
     position: absolute;
-    top: 50%;
+    top: 0;
     left: 50%;
-    transform: translate(-50%, -50%);
-    width: 12rpx;
-    height: 12rpx;
-    border: 2rpx solid #ffffff;
-    border-radius: 50%;
+    transform: translateX(-50%);
+    width: 28rpx;
+    height: 20rpx;
+    border: 2.5rpx solid $text-color-muted;
+    border-radius: 3rpx;
   }
-  
+
   &::after {
+    /* 底座 */
     content: '';
     position: absolute;
-    bottom: 2rpx;
+    bottom: 0;
     left: 50%;
     transform: translateX(-50%);
-    width: 8rpx;
-    height: 4rpx;
-    background: #ffffff;
-    border-radius: 2rpx;
+    width: 18rpx;
+    height: 2.5rpx;
+    background: $text-color-muted;
+    border-radius: 1rpx;
   }
 }
 
-/* 我的图标 - 用户 */
+/* 我的图标 - 人物（线框） */
 .icon-my {
   width: 28rpx;
   height: 32rpx;
   position: relative;
   margin: 0 auto;
-  
+
   &::before {
+    /* 头部 - 空心圆 */
     content: '';
     position: absolute;
     top: 0;
@@ -288,11 +294,12 @@ const handleScan = () => {
     transform: translateX(-50%);
     width: 14rpx;
     height: 14rpx;
-    background: #94a3b8;
+    border: 2.5rpx solid $text-color-muted;
     border-radius: 50%;
   }
-  
+
   &::after {
+    /* 身体 - 半圆弧 */
     content: '';
     position: absolute;
     bottom: 0;
@@ -300,42 +307,58 @@ const handleScan = () => {
     transform: translateX(-50%);
     width: 24rpx;
     height: 12rpx;
-    background: #94a3b8;
-    border-radius: 12rpx 12rpx 0 0;
+    border: 2.5rpx solid $text-color-muted;
+    border-radius: 14rpx 14rpx 0 0;
+    border-bottom: none;
   }
 }
 
 .tab-text {
   font-size: 20rpx;
-  color: #333333;
+  color: $text-color-primary;
   transition: all 0.2s;
 }
 
 .tab-item.active .tab-text {
-  color: #fdd835;
+  color: $primary-color;
   font-weight: 600;
 }
 
 /* 激活状态图标颜色 */
 .tab-item.active .icon-home::before {
-  border-bottom-color: #fdd835;
+  border-top-color: $primary-color;
+  border-right-color: $primary-color;
 }
 
 .tab-item.active .icon-home::after {
-  background: #fdd835;
+  border-left-color: $primary-color;
+  border-right-color: $primary-color;
+  border-bottom-color: $primary-color;
 }
 
 .tab-item.active .icon-order {
-  background: #fdd835;
+  border-color: $primary-color;
+}
+
+.tab-item.active .icon-order::after {
+  background: $primary-color;
+  box-shadow: 0 6rpx 0 $primary-color;
+}
+
+.tab-item.active .icon-device::before {
+  border-color: $primary-color;
+}
+
+.tab-item.active .icon-device::after {
+  background: $primary-color;
 }
 
-.tab-item.active .icon-device {
-  background: #fdd835;
+.tab-item.active .icon-my::before {
+  border-color: $primary-color;
 }
 
-.tab-item.active .icon-my::before,
 .tab-item.active .icon-my::after {
-  background: #fdd835;
+  border-color: $primary-color;
 }
 
 /* 扫码按钮 */
@@ -363,12 +386,12 @@ const handleScan = () => {
   height: 80rpx;
   min-width: 80rpx;
   min-height: 80rpx;
-  background: linear-gradient(135deg, #fdd835 0%, #fbc02d 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 6rpx 20rpx rgba(253, 216, 53, 0.4);
+  box-shadow: 0 6rpx 20rpx rgba(255, 193, 7, 0.4);
   margin-bottom: 4rpx;
   transition: all 0.2s;
   flex-shrink: 0;
@@ -376,7 +399,7 @@ const handleScan = () => {
 
 .scan-btn:active .scan-icon-circle {
   transform: scale(0.92);
-  box-shadow: 0 4rpx 12rpx rgba(253, 216, 53, 0.3);
+  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.3);
 }
 
 .scan-qr-icon {
@@ -391,7 +414,7 @@ const handleScan = () => {
     left: 0;
     width: 14rpx;
     height: 14rpx;
-    border: 3rpx solid #ffffff;
+    border: 3rpx solid $bg-color-card;
     border-radius: 3rpx;
   }
   
@@ -402,14 +425,14 @@ const handleScan = () => {
     right: 0;
     width: 14rpx;
     height: 14rpx;
-    border: 3rpx solid #ffffff;
+    border: 3rpx solid $bg-color-card;
     border-radius: 3rpx;
   }
 }
 
 .scan-text {
   font-size: 18rpx;
-  color: #333333;
+  color: $text-color-primary;
   font-weight: 500;
 }
 </style>

haha-admin-mp/src/components/NavBar.vue

@@ -172,7 +172,7 @@ const goBack = () => {
   .title-text {
     font-size: 34rpx;
     font-weight: 600;
-    color: #1e293b;
+    color: $text-color-primary;
     max-width: 400rpx;
     overflow: hidden;
     text-overflow: ellipsis;

haha-admin-mp/src/components/WatermarkCamera.vue

@@ -222,7 +222,7 @@ const handleConfirm = () => {
   .camera-lens {
     width: 30rpx;
     height: 30rpx;
-    background: #ffffff;
+    background: $bg-color-card;
     border: 4rpx solid #0ea5e9;
     border-radius: 50%;
     position: absolute;
@@ -315,7 +315,7 @@ const handleConfirm = () => {
 
 .wm-value {
   font-size: 22rpx;
-  color: #ffffff;
+  color: $bg-color-card;
   flex: 1;
 }
 
@@ -361,15 +361,15 @@ const handleConfirm = () => {
   }
   
   &.confirm-icon {
-    background: #10b981;
+    background: $primary-color;
     position: relative;
     
     &::before {
       content: '';
       width: 20rpx;
       height: 12rpx;
-      border-left: 4rpx solid #ffffff;
-      border-bottom: 4rpx solid #ffffff;
+      border-left: 4rpx solid $bg-color-card;
+      border-bottom: 4rpx solid $bg-color-card;
       transform: rotate(-45deg);
       margin-top: -8rpx;
     }
@@ -381,7 +381,7 @@ const handleConfirm = () => {
   color: #475569;
   
   .confirm & {
-    color: #10b981;
+    color: $primary-color;
     font-weight: 500;
   }
 }

haha-admin-mp/src/pages.json

@@ -76,7 +76,7 @@
 			"path": "pages/products/list",
 			"style": {
 				"navigationBarTitleText": "配置上架商品",
-				"navigationBarBackgroundColor": "#FFD93D",
+				"navigationBarBackgroundColor": "#FFC107",
 				"navigationBarTextStyle": "black",
 				"navigationStyle": "custom"
 			}
@@ -235,7 +235,7 @@
 	"tabBar": {
 		"custom": true,
 		"color": "#94a3b8",
-		"selectedColor": "#10b981",
+		"selectedColor": "#FFC107",
 		"backgroundColor": "#ffffff",
 		"borderStyle": "white",
 		"height": "50px",

haha-admin-mp/src/pages/checkin/index.vue

@@ -367,7 +367,7 @@ const handleSuccessClose = () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .content {
@@ -376,11 +376,11 @@ const handleSuccessClose = () => {
 }
 
 .location-card {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 24rpx;
   margin-bottom: 24rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .location-header {
@@ -392,7 +392,7 @@ const handleSuccessClose = () => {
 .location-icon {
   width: 36rpx;
   height: 36rpx;
-  background: #10b981;
+  background: $primary-color;
   border-radius: 50%;
   margin-right: 12rpx;
   position: relative;
@@ -405,7 +405,7 @@ const handleSuccessClose = () => {
     transform: translate(-50%, -50%);
     width: 12rpx;
     height: 12rpx;
-    background: #ffffff;
+    background: $bg-color-card;
     border-radius: 50%;
   }
 }
@@ -413,7 +413,7 @@ const handleSuccessClose = () => {
 .location-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   flex: 1;
 }
 
@@ -423,18 +423,18 @@ const handleSuccessClose = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
   border-radius: 50%;
   
   &:active {
-    background: #e2e8f0;
+    background: $border-color;
   }
 }
 
 .refresh-icon {
   width: 24rpx;
   height: 24rpx;
-  border: 3rpx solid #64748b;
+  border: 3rpx solid $text-color-tertiary;
   border-radius: 50%;
   border-top-color: transparent;
   
@@ -450,7 +450,7 @@ const handleSuccessClose = () => {
 
 .location-content {
   padding: 16rpx;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 12rpx;
 }
 
@@ -466,14 +466,14 @@ const handleSuccessClose = () => {
 
 .location-label {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   width: 100rpx;
   flex-shrink: 0;
 }
 
 .location-value {
   font-size: 24rpx;
-  color: #1e293b;
+  color: $text-color-primary;
   flex: 1;
 }
 
@@ -484,7 +484,7 @@ const handleSuccessClose = () => {
 
 .loading-text {
   font-size: 26rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .section-header {
@@ -497,12 +497,12 @@ const handleSuccessClose = () => {
 .section-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .section-tip {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .type-section {
@@ -510,9 +510,9 @@ const handleSuccessClose = () => {
 }
 
 .type-list {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
   overflow: hidden;
 }
 
@@ -520,7 +520,7 @@ const handleSuccessClose = () => {
   display: flex;
   align-items: center;
   padding: 28rpx 24rpx;
-  border-bottom: 1rpx solid #f1f5f9;
+  border-bottom: 1rpx solid $bg-color-secondary;
   transition: background 0.15s;
   
   &:last-child {
@@ -528,11 +528,11 @@ const handleSuccessClose = () => {
   }
   
   &:active {
-    background: #f8fafc;
+    background: $bg-color-page;
   }
   
   &.active {
-    background: #ecfdf5;
+    background: $success-color-bg;
   }
 }
 
@@ -546,12 +546,12 @@ const handleSuccessClose = () => {
   margin-right: 20rpx;
   
   &.inventory {
-    background: #ecfdf5;
+    background: $success-color-bg;
     
     .icon-inner {
       width: 32rpx;
       height: 40rpx;
-      border: 3rpx solid #10b981;
+      border: 3rpx solid $primary-color;
       border-radius: 4rpx;
       position: relative;
       
@@ -562,7 +562,7 @@ const handleSuccessClose = () => {
         left: 6rpx;
         width: 14rpx;
         height: 3rpx;
-        background: #10b981;
+        background: $primary-color;
         border-radius: 2rpx;
       }
       
@@ -573,19 +573,19 @@ const handleSuccessClose = () => {
         left: 6rpx;
         width: 10rpx;
         height: 3rpx;
-        background: #10b981;
+        background: $primary-color;
         border-radius: 2rpx;
       }
     }
   }
   
   &.delivery {
-    background: #fff7ed;
+    background: $accent-color-bg;
     
     .icon-inner {
       width: 36rpx;
       height: 28rpx;
-      border: 3rpx solid #f97316;
+      border: 3rpx solid $accent-color;
       border-radius: 4rpx;
       position: relative;
       
@@ -597,7 +597,7 @@ const handleSuccessClose = () => {
         transform: translate(-50%, -50%);
         width: 12rpx;
         height: 12rpx;
-        background: #f97316;
+        background: $accent-color;
         border-radius: 50%;
       }
     }
@@ -612,19 +612,19 @@ const handleSuccessClose = () => {
   display: block;
   font-size: 28rpx;
   font-weight: 500;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 4rpx;
 }
 
 .type-desc {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .type-check {
   width: 40rpx;
   height: 40rpx;
-  background: #10b981;
+  background: $primary-color;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -634,8 +634,8 @@ const handleSuccessClose = () => {
 .check-icon {
   width: 16rpx;
   height: 10rpx;
-  border-left: 3rpx solid #ffffff;
-  border-bottom: 3rpx solid #ffffff;
+  border-left: 3rpx solid $bg-color-card;
+  border-bottom: 3rpx solid $bg-color-card;
   transform: rotate(-45deg);
   margin-top: -4rpx;
 }
@@ -656,7 +656,7 @@ const handleSuccessClose = () => {
   border-radius: 12rpx;
   overflow: hidden;
   position: relative;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
 }
 
 .photo-image {
@@ -689,7 +689,7 @@ const handleSuccessClose = () => {
     left: 50%;
     width: 20rpx;
     height: 3rpx;
-    background: #ffffff;
+    background: $bg-color-card;
     border-radius: 2rpx;
   }
   
@@ -714,22 +714,22 @@ const handleSuccessClose = () => {
   align-items: center;
   justify-content: center;
   font-size: 22rpx;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .photo-add {
   width: calc(33.33% - 12rpx);
   aspect-ratio: 1;
   border-radius: 12rpx;
-  border: 2rpx dashed #cbd5e1;
+  border: 2rpx dashed $text-color-placeholder;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: #ffffff;
+  background: $bg-color-card;
   
   &:active {
-    background: #f8fafc;
+    background: $bg-color-page;
   }
 }
 
@@ -745,7 +745,7 @@ const handleSuccessClose = () => {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #94a3b8;
+  background: $text-color-muted;
   border-radius: 2rpx;
 }
 
@@ -761,7 +761,7 @@ const handleSuccessClose = () => {
 
 .add-text {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .remark-section {
@@ -771,17 +771,17 @@ const handleSuccessClose = () => {
 .remark-input {
   width: 100%;
   min-height: 160rpx;
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 20rpx;
   font-size: 28rpx;
-  color: #1e293b;
+  color: $text-color-primary;
   box-sizing: border-box;
 }
 
 .placeholder {
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .remark-count {
@@ -790,7 +790,7 @@ const handleSuccessClose = () => {
   
   text {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -798,8 +798,8 @@ const handleSuccessClose = () => {
   display: flex;
   align-items: center;
   padding: 20rpx 24rpx;
-  background: #fffbeb;
-  border: 1rpx solid #fcd34d;
+  background: $warning-color-bg;
+  border: 1rpx solid $primary-color-light;
   border-radius: 12rpx;
   margin-bottom: 24rpx;
 }
@@ -807,7 +807,7 @@ const handleSuccessClose = () => {
 .tip-icon {
   width: 32rpx;
   height: 32rpx;
-  background: #f59e0b;
+  background: $warning-color;
   border-radius: 50%;
   margin-right: 12rpx;
   position: relative;
@@ -820,19 +820,19 @@ const handleSuccessClose = () => {
     transform: translate(-50%, -50%);
     font-size: 22rpx;
     font-weight: 700;
-    color: #ffffff;
+    color: $bg-color-card;
   }
 }
 
 .tip-text {
   flex: 1;
   font-size: 26rpx;
-  color: #92400e;
+  color: $primary-color-dark;
 }
 
 .tip-action {
   font-size: 26rpx;
-  color: #f59e0b;
+  color: $warning-color;
   font-weight: 500;
 }
 
@@ -844,19 +844,19 @@ const handleSuccessClose = () => {
 .submit-btn {
   width: 100%;
   height: 96rpx;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 48rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
   
   &.disabled {
-    background: #cbd5e1;
-    color: #94a3b8;
+    background: $text-color-placeholder;
+    color: $text-color-muted;
   }
   
   &:active:not(.disabled) {
@@ -868,7 +868,7 @@ const handleSuccessClose = () => {
   width: 36rpx;
   height: 36rpx;
   border: 3rpx solid rgba(255, 255, 255, 0.3);
-  border-top-color: #ffffff;
+  border-top-color: $bg-color-card;
   border-radius: 50%;
   animation: rotate 0.8s linear infinite;
   
@@ -893,7 +893,7 @@ const handleSuccessClose = () => {
 
 .success-content {
   width: 560rpx;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 24rpx;
   padding: 48rpx;
   display: flex;
@@ -904,7 +904,7 @@ const handleSuccessClose = () => {
 .success-icon {
   width: 120rpx;
   height: 120rpx;
-  background: #ecfdf5;
+  background: $success-color-bg;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -915,8 +915,8 @@ const handleSuccessClose = () => {
 .check-mark {
   width: 48rpx;
   height: 28rpx;
-  border-left: 6rpx solid #10b981;
-  border-bottom: 6rpx solid #10b981;
+  border-left: 6rpx solid $primary-color;
+  border-bottom: 6rpx solid $primary-color;
   transform: rotate(-45deg);
   margin-top: -12rpx;
 }
@@ -924,24 +924,24 @@ const handleSuccessClose = () => {
 .success-title {
   font-size: 36rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 12rpx;
 }
 
 .success-time {
   font-size: 26rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   margin-bottom: 32rpx;
 }
 
 .success-btn {
   width: 100%;
   height: 88rpx;
-  background: #10b981;
+  background: $primary-color;
   border-radius: 44rpx;
   font-size: 30rpx;
   font-weight: 500;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
   
   &:active {

haha-admin-mp/src/pages/checkin/records.vue

@@ -243,6 +243,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { CheckinType, getCheckinList, getCheckinStats, exportCheckinRecords } from '@/api/checkin';
 import type { CheckinRecord, CheckinStats } from '@/api/checkin';
@@ -313,7 +314,7 @@ const loadData = async (reset = false) => {
     total.value = result.total;
     hasMore.value = records.value.length < result.total;
   } catch (error) {
-    console.error('加载签到记录失败', error);
+    logger.warn('加载签到记录失败', error);
   } finally {
     isLoading.value = false;
     isRefreshing.value = false;
@@ -325,7 +326,7 @@ const loadStats = async () => {
   try {
     stats.value = await getCheckinStats();
   } catch (error) {
-    console.error('加载统计数据失败', error);
+    logger.warn('加载统计数据失败', error);
   }
 };
 
@@ -425,7 +426,7 @@ const handleExport = async () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
 }
@@ -441,7 +442,7 @@ const handleExport = async () => {
 .export-icon {
   width: 36rpx;
   height: 36rpx;
-  border: 3rpx solid #1e293b;
+  border: 3rpx solid $text-color-primary;
   border-radius: 6rpx;
   position: relative;
   
@@ -455,7 +456,7 @@ const handleExport = async () => {
     height: 0;
     border-left: 6rpx solid transparent;
     border-right: 6rpx solid transparent;
-    border-bottom: 8rpx solid #1e293b;
+    border-bottom: 8rpx solid $text-color-primary;
   }
   
   &::after {
@@ -466,7 +467,7 @@ const handleExport = async () => {
     transform: translateX(-50%);
     width: 12rpx;
     height: 3rpx;
-    background: #1e293b;
+    background: $text-color-primary;
   }
 }
 
@@ -479,8 +480,8 @@ const handleExport = async () => {
 
 .filter-section {
   padding: 16rpx 24rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .filter-row {
@@ -494,18 +495,18 @@ const handleExport = async () => {
   align-items: center;
   justify-content: center;
   height: 64rpx;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 12rpx;
   padding: 0 16rpx;
   
   &:active {
-    background: #f1f5f9;
+    background: $bg-color-secondary;
   }
 }
 
 .filter-label {
   font-size: 24rpx;
-  color: #475569;
+  color: $text-color-secondary;
   margin-right: 8rpx;
 }
 
@@ -514,14 +515,14 @@ const handleExport = async () => {
   height: 0;
   border-left: 8rpx solid transparent;
   border-right: 8rpx solid transparent;
-  border-top: 8rpx solid #94a3b8;
+  border-top: 8rpx solid $text-color-muted;
 }
 
 .stats-row {
   display: flex;
   padding: 20rpx 24rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .stats-item {
@@ -532,7 +533,7 @@ const handleExport = async () => {
   
   &.warning {
     .stats-value {
-      color: #f59e0b;
+      color: $warning-color;
     }
   }
 }
@@ -540,13 +541,13 @@ const handleExport = async () => {
 .stats-value {
   font-size: 40rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 4rpx;
 }
 
 .stats-label {
   font-size: 22rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .list-section {
@@ -566,12 +567,12 @@ const handleExport = async () => {
 .list-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .list-count {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .list-scroll {
@@ -587,14 +588,14 @@ const handleExport = async () => {
 .record-item {
   display: flex;
   align-items: flex-start;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
   
   &:active {
-    background: #f8fafc;
+    background: $bg-color-page;
   }
 }
 
@@ -611,23 +612,23 @@ const handleExport = async () => {
   justify-content: center;
   
   &.inventory_tally {
-    background: #ecfdf5;
+    background: $success-color-bg;
     
     .type-icon {
       width: 28rpx;
       height: 36rpx;
-      border: 3rpx solid #10b981;
+      border: 3rpx solid $primary-color;
       border-radius: 4rpx;
     }
   }
   
   &.delivery_replenish {
-    background: #fff7ed;
+    background: $accent-color-bg;
     
     .type-icon {
       width: 32rpx;
       height: 24rpx;
-      border: 3rpx solid #f97316;
+      border: 3rpx solid $accent-color;
       border-radius: 4rpx;
     }
   }
@@ -648,7 +649,7 @@ const handleExport = async () => {
 .record-type-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .record-status {
@@ -657,18 +658,18 @@ const handleExport = async () => {
   font-size: 22rpx;
   
   &.synced {
-    background: #ecfdf5;
-    color: #10b981;
+    background: $success-color-bg;
+    color: $primary-color;
   }
   
   &.pending {
-    background: #fffbeb;
-    color: #f59e0b;
+    background: $warning-color-bg;
+    color: $warning-color;
   }
   
   &.failed {
-    background: #fef2f2;
-    color: #ef4444;
+    background: $error-color-bg;
+    color: $error-color;
   }
 }
 
@@ -693,7 +694,7 @@ const handleExport = async () => {
   border-radius: 50%;
   
   &.user {
-    background: #e0f2fe;
+    background: $info-color-bg;
     position: relative;
     
     &::before {
@@ -704,7 +705,7 @@ const handleExport = async () => {
       transform: translateX(-50%);
       width: 8rpx;
       height: 8rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 50%;
     }
     
@@ -716,13 +717,13 @@ const handleExport = async () => {
       transform: translateX(-50%);
       width: 14rpx;
       height: 6rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 6rpx 6rpx 0 0;
     }
   }
   
   &.location {
-    background: #ecfdf5;
+    background: $success-color-bg;
     position: relative;
     
     &::before {
@@ -733,7 +734,7 @@ const handleExport = async () => {
       transform: translate(-50%, -50%);
       width: 8rpx;
       height: 8rpx;
-      background: #10b981;
+      background: $primary-color;
       border-radius: 50%;
     }
     
@@ -745,13 +746,13 @@ const handleExport = async () => {
       transform: translate(-50%, -50%);
       width: 14rpx;
       height: 14rpx;
-      border: 2rpx solid #10b981;
+      border: 2rpx solid $primary-color;
       border-radius: 50%;
     }
   }
   
   &.time {
-    background: #faf5ff;
+    background: $primary-color-bg;
     position: relative;
     
     &::before {
@@ -762,7 +763,7 @@ const handleExport = async () => {
       transform: translate(-50%, -50%);
       width: 12rpx;
       height: 12rpx;
-      border: 2rpx solid #a855f7;
+      border: 2rpx solid $primary-color;
       border-radius: 50%;
     }
     
@@ -774,14 +775,14 @@ const handleExport = async () => {
       transform: translateX(-50%);
       width: 2rpx;
       height: 6rpx;
-      background: #a855f7;
+      background: $primary-color;
     }
   }
 }
 
 .info-text {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -798,7 +799,7 @@ const handleExport = async () => {
   width: 80rpx;
   height: 80rpx;
   border-radius: 8rpx;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
 }
 
 .photo-more {
@@ -812,18 +813,18 @@ const handleExport = async () => {
   
   text {
     font-size: 24rpx;
-    color: #ffffff;
+    color: $bg-color-card;
   }
 }
 
 .record-remark {
   padding: 12rpx;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 8rpx;
   
   text {
     font-size: 24rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
   }
 }
 
@@ -836,8 +837,8 @@ const handleExport = async () => {
 .arrow-icon {
   width: 12rpx;
   height: 12rpx;
-  border-top: 3rpx solid #cbd5e1;
-  border-right: 3rpx solid #cbd5e1;
+  border-top: 3rpx solid $text-color-placeholder;
+  border-right: 3rpx solid $text-color-placeholder;
   transform: rotate(45deg);
 }
 
@@ -851,7 +852,7 @@ const handleExport = async () => {
 .empty-icon {
   width: 120rpx;
   height: 120rpx;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
   border-radius: 50%;
   margin-bottom: 24rpx;
   position: relative;
@@ -864,14 +865,14 @@ const handleExport = async () => {
     transform: translate(-50%, -50%);
     width: 40rpx;
     height: 40rpx;
-    border: 4rpx solid #cbd5e1;
+    border: 4rpx solid $text-color-placeholder;
     border-radius: 8rpx;
   }
 }
 
 .empty-text {
   font-size: 28rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .loading-more {
@@ -884,8 +885,8 @@ const handleExport = async () => {
 .loading-spinner {
   width: 32rpx;
   height: 32rpx;
-  border: 3rpx solid #e2e8f0;
-  border-top-color: #10b981;
+  border: 3rpx solid $border-color;
+  border-top-color: $primary-color;
   border-radius: 50%;
   animation: rotate 0.8s linear infinite;
   
@@ -897,7 +898,7 @@ const handleExport = async () => {
 
 .loading-text {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   margin-left: 12rpx;
 }
 
@@ -907,7 +908,7 @@ const handleExport = async () => {
   
   text {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -935,7 +936,7 @@ const handleExport = async () => {
   left: 0;
   right: 0;
   max-height: 80vh;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 32rpx 32rpx 0 0;
   display: flex;
   flex-direction: column;
@@ -946,13 +947,13 @@ const handleExport = async () => {
   justify-content: space-between;
   align-items: center;
   padding: 32rpx;
-  border-bottom: 1rpx solid #e2e8f0;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .detail-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .detail-close {
@@ -961,7 +962,7 @@ const handleExport = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
   border-radius: 50%;
 }
 
@@ -977,7 +978,7 @@ const handleExport = async () => {
     left: 50%;
     width: 24rpx;
     height: 3rpx;
-    background: #64748b;
+    background: $text-color-tertiary;
     border-radius: 2rpx;
   }
   
@@ -1005,7 +1006,7 @@ const handleExport = async () => {
   justify-content: space-between;
   align-items: center;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f1f5f9;
+  border-bottom: 1rpx solid $bg-color-secondary;
   
   &:last-child {
     border-bottom: none;
@@ -1014,24 +1015,24 @@ const handleExport = async () => {
 
 .detail-label {
   font-size: 26rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .detail-value {
   font-size: 26rpx;
-  color: #1e293b;
+  color: $text-color-primary;
   font-weight: 500;
 }
 
 .section-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 16rpx;
 }
 
 .location-map {
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 16rpx;
   overflow: hidden;
 }
@@ -1046,7 +1047,7 @@ const handleExport = async () => {
 .map-icon {
   width: 48rpx;
   height: 48rpx;
-  background: #10b981;
+  background: $primary-color;
   border-radius: 50%;
   margin-bottom: 16rpx;
   position: relative;
@@ -1059,21 +1060,21 @@ const handleExport = async () => {
     transform: translate(-50%, -50%);
     width: 16rpx;
     height: 16rpx;
-    background: #ffffff;
+    background: $bg-color-card;
     border-radius: 50%;
   }
 }
 
 .map-text {
   font-size: 26rpx;
-  color: #1e293b;
+  color: $text-color-primary;
   text-align: center;
   margin-bottom: 8rpx;
 }
 
 .map-coords {
   font-size: 22rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .photo-grid {
@@ -1086,17 +1087,17 @@ const handleExport = async () => {
   width: calc(33.33% - 8rpx);
   aspect-ratio: 1;
   border-radius: 12rpx;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
 }
 
 .remark-box {
   padding: 20rpx;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 12rpx;
   
   text {
     font-size: 26rpx;
-    color: #475569;
+    color: $text-color-secondary;
     line-height: 1.6;
   }
 }
@@ -1113,38 +1114,38 @@ const handleExport = async () => {
   border-radius: 12rpx;
   
   &.synced {
-    background: #ecfdf5;
+    background: $success-color-bg;
     
     .status-dot {
-      background: #10b981;
+      background: $primary-color;
     }
     
     text {
-      color: #10b981;
+      color: $primary-color;
     }
   }
   
   &.pending {
-    background: #fffbeb;
+    background: $warning-color-bg;
     
     .status-dot {
-      background: #f59e0b;
+      background: $warning-color;
     }
     
     text {
-      color: #f59e0b;
+      color: $warning-color;
     }
   }
   
   &.failed {
-    background: #fef2f2;
+    background: $error-color-bg;
     
     .status-dot {
-      background: #ef4444;
+      background: $error-color;
     }
     
     text {
-      color: #ef4444;
+      color: $error-color;
     }
   }
 }
@@ -1158,7 +1159,7 @@ const handleExport = async () => {
 
 .sync-time {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   margin-left: 16rpx;
 }
 </style>

haha-admin-mp/src/pages/customer/detail.vue

@@ -102,6 +102,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getCustomerDetail, updateCustomerStatus, updateCustomerCredit } from '@/api/customer';
 import { UserStatus, UserStatusText } from '@/utils/constants';
@@ -158,7 +159,7 @@ const loadCustomerDetail = async () => {
     const res = await getCustomerDetail(customerId);
     customer.value = res || {};
   } catch (error) {
-    console.error('加载客户详情失败', error);
+    logger.warn('加载客户详情失败', error);
     showToast('加载客户详情失败', 'error');
   } finally {
     loading.value = false;
@@ -177,7 +178,7 @@ const handleToggleStatus = async () => {
     customer.value.status = newStatus;
     showToast(`${actionText}成功`, 'success');
   } catch (error) {
-    console.error('更新客户状态失败', error);
+    logger.warn('更新客户状态失败', error);
     showToast('操作失败', 'error');
   }
 };
@@ -196,7 +197,7 @@ const handleUpdateCredit = async () => {
     newCreditScore.value = '';
     showToast('信用分更新成功', 'success');
   } catch (error) {
-    console.error('更新信用分失败', error);
+    logger.warn('更新信用分失败', error);
     showToast('操作失败', 'error');
   }
 };
@@ -209,7 +210,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   padding-bottom: 40rpx;
 }
 
@@ -219,8 +220,8 @@ onMounted(() => {
 }
 
 .info-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 20rpx;
   padding: 32rpx;
 }
@@ -234,7 +235,7 @@ onMounted(() => {
 .info-avatar {
   width: 100rpx;
   height: 100rpx;
-  background: #ecfdf5;
+  background: $success-color-bg;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -245,7 +246,7 @@ onMounted(() => {
   .avatar-text {
     font-size: 40rpx;
     font-weight: 700;
-    color: #10b981;
+    color: $primary-color;
   }
 }
 
@@ -256,7 +257,7 @@ onMounted(() => {
     display: block;
     font-size: 34rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 8rpx;
   }
 }
@@ -269,13 +270,13 @@ onMounted(() => {
   font-weight: 500;
 
   &.enabled {
-    background: #ecfdf5;
-    color: #10b981;
+    background: $success-color-bg;
+    color: $primary-color;
   }
 
   &.disabled {
-    background: #fef2f2;
-    color: #ef4444;
+    background: $error-color-bg;
+    color: $error-color;
   }
 }
 
@@ -283,7 +284,7 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20rpx;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 12rpx;
   padding: 20rpx;
 }
@@ -292,19 +293,19 @@ onMounted(() => {
   .info-label {
     display: block;
     font-size: 22rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
     margin-bottom: 4rpx;
   }
 
   .info-value {
     font-size: 28rpx;
-    color: #1e293b;
+    color: $text-color-primary;
     font-weight: 500;
 
-    &.high { color: #10b981; }
-    &.medium { color: #f97316; }
-    &.low { color: #ef4444; }
-    &.id { font-size: 22rpx; color: #64748b; font-family: monospace; }
+    &.high { color: $primary-color; }
+    &.medium { color: $accent-color; }
+    &.low { color: $error-color; }
+    &.id { font-size: 22rpx; color: $text-color-tertiary; font-family: monospace; }
   }
 }
 
@@ -314,8 +315,8 @@ onMounted(() => {
 }
 
 .action-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 20rpx;
   overflow: hidden;
 
@@ -323,7 +324,7 @@ onMounted(() => {
     display: block;
     padding: 20rpx 24rpx 12rpx;
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
     font-weight: 600;
   }
 }
@@ -333,7 +334,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     padding: 20rpx 24rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
     transition: background 0.15s;
 
     &:last-child {
@@ -341,7 +342,7 @@ onMounted(() => {
     }
 
     &:active {
-      background: #f8fafc;
+      background: $bg-color-page;
     }
   }
 }
@@ -356,15 +357,15 @@ onMounted(() => {
   margin-right: 16rpx;
   flex-shrink: 0;
 
-  &.warning { background: #fff7ed; }
-  &.success { background: #ecfdf5; }
-  &.primary { background: #f0f9ff; }
+  &.warning { background: $accent-color-bg; }
+  &.success { background: $success-color-bg; }
+  &.primary { background: $info-color-bg; }
 
   .icon-status {
     width: 20rpx;
     height: 20rpx;
     border-radius: 50%;
-    border: 3rpx solid #f97316;
+    border: 3rpx solid $accent-color;
     position: relative;
 
     &::after {
@@ -375,7 +376,7 @@ onMounted(() => {
       transform: translate(-50%, -50%);
       width: 8rpx;
       height: 8rpx;
-      background: #f97316;
+      background: $accent-color;
       border-radius: 50%;
     }
   }
@@ -383,7 +384,7 @@ onMounted(() => {
   .icon-credit {
     width: 20rpx;
     height: 20rpx;
-    border: 3rpx solid #0ea5e9;
+    border: 3rpx solid $info-color;
     border-radius: 50%;
     position: relative;
 
@@ -395,7 +396,7 @@ onMounted(() => {
       transform: translate(-50%, -50%);
       width: 3rpx;
       height: 10rpx;
-      background: #0ea5e9;
+      background: $info-color;
     }
 
     &::after {
@@ -406,7 +407,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 3rpx;
       height: 3rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 50%;
     }
   }
@@ -418,22 +419,22 @@ onMounted(() => {
   .action-name {
     display: block;
     font-size: 30rpx;
-    color: #1e293b;
+    color: $text-color-primary;
     font-weight: 500;
     margin-bottom: 2rpx;
   }
 
   .action-desc {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
 .action-arrow {
   width: 12rpx;
   height: 12rpx;
-  border-top: 3rpx solid #cbd5e1;
-  border-right: 3rpx solid #cbd5e1;
+  border-top: 3rpx solid $text-color-placeholder;
+  border-right: 3rpx solid $text-color-placeholder;
   transform: rotate(45deg);
   margin-left: 12rpx;
   flex-shrink: 0;
@@ -446,14 +447,14 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   padding: 100rpx 0;
-  color: #94a3b8;
+  color: $text-color-muted;
   font-size: 28rpx;
 
   .loading-spinner {
     width: 48rpx;
     height: 48rpx;
-    border: 4rpx solid #e2e8f0;
-    border-top-color: #10b981;
+    border: 4rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 16rpx;
@@ -481,18 +482,18 @@ onMounted(() => {
 
 .modal-content {
   width: 100%;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   overflow: hidden;
 
   .modal-header {
     padding: 24rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
 
     .modal-title {
       font-size: 32rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
     }
   }
 
@@ -502,19 +503,19 @@ onMounted(() => {
     .modal-label {
       display: block;
       font-size: 26rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
       margin-bottom: 16rpx;
     }
 
     .modal-input {
       width: 100%;
       height: 88rpx;
-      background: #f8fafc;
-      border: 2rpx solid #e2e8f0;
+      background: $bg-color-page;
+      border: 2rpx solid $border-color;
       border-radius: 12rpx;
       padding: 0 20rpx;
       font-size: 28rpx;
-      color: #1e293b;
+      color: $text-color-primary;
       box-sizing: border-box;
     }
   }
@@ -538,18 +539,18 @@ onMounted(() => {
     }
 
     .btn-cancel {
-      background: #f8fafc;
-      color: #64748b;
+      background: $bg-color-page;
+      color: $text-color-tertiary;
     }
 
     .btn-confirm {
-      background: #10b981;
+      background: $primary-color;
       color: #fff;
     }
   }
 }
 
 .input-placeholder {
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 </style>

haha-admin-mp/src/pages/customer/list.vue

@@ -112,6 +112,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import CustomTabBar from '@/components/CustomTabBar.vue';
 import { getCustomerList } from '@/api/customer';
@@ -180,7 +181,7 @@ const loadCustomers = async () => {
 
     hasMore.value = customerList.value.length < (res.total || 0);
   } catch (error) {
-    console.error('加载客户列表失败', error);
+    logger.warn('加载客户列表失败', error);
   } finally {
     loading.value = false;
   }
@@ -211,7 +212,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
   padding-bottom: 200rpx;
@@ -223,8 +224,8 @@ onMounted(() => {
   align-items: center;
   padding: 16rpx 24rpx;
   gap: 12rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .filter-tabs {
@@ -234,17 +235,17 @@ onMounted(() => {
 
   .filter-tab {
     padding: 14rpx 24rpx;
-    background: #f8fafc;
-    border: 2rpx solid #e2e8f0;
+    background: $bg-color-page;
+    border: 2rpx solid $border-color;
     border-radius: 20rpx;
     font-size: 26rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     transition: all 0.15s;
 
     &.active {
-      background: #ecfdf5;
-      border-color: #10b981;
-      color: #10b981;
+      background: $success-color-bg;
+      border-color: $primary-color;
+      color: $primary-color;
     }
   }
 }
@@ -252,8 +253,8 @@ onMounted(() => {
 .search-btn {
   width: 72rpx;
   height: 72rpx;
-  background: #ecfdf5;
-  border: 2rpx solid #10b981;
+  background: $success-color-bg;
+  border: 2rpx solid $primary-color;
   border-radius: 20rpx;
   display: flex;
   align-items: center;
@@ -262,7 +263,7 @@ onMounted(() => {
   .search-icon {
     width: 28rpx;
     height: 28rpx;
-    border: 3rpx solid #10b981;
+    border: 3rpx solid $primary-color;
     border-radius: 50%;
     position: relative;
 
@@ -273,7 +274,7 @@ onMounted(() => {
       right: -6rpx;
       width: 10rpx;
       height: 3rpx;
-      background: #10b981;
+      background: $primary-color;
       transform: rotate(45deg);
     }
   }
@@ -290,8 +291,8 @@ onMounted(() => {
 }
 
 .customer-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 12rpx;
   margin-bottom: 10rpx;
   padding: 14rpx 16rpx;
@@ -307,7 +308,7 @@ onMounted(() => {
 .card-avatar {
   width: 80rpx;
   height: 80rpx;
-  background: #ecfdf5;
+  background: $success-color-bg;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -318,7 +319,7 @@ onMounted(() => {
   .avatar-text {
     font-size: 32rpx;
     font-weight: 600;
-    color: #10b981;
+    color: $primary-color;
   }
 }
 
@@ -335,7 +336,7 @@ onMounted(() => {
   .customer-name {
     font-size: 28rpx;
     font-weight: 600;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-right: 12rpx;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -351,13 +352,13 @@ onMounted(() => {
   flex-shrink: 0;
 
   &.enabled {
-    background: #ecfdf5;
-    color: #10b981;
+    background: $success-color-bg;
+    color: $primary-color;
   }
 
   &.disabled {
-    background: #fef2f2;
-    color: #ef4444;
+    background: $error-color-bg;
+    color: $error-color;
   }
 }
 
@@ -367,12 +368,12 @@ onMounted(() => {
 
   .info-text {
     font-size: 24rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
   }
 
   .info-divider {
     margin: 0 8rpx;
-    color: #cbd5e1;
+    color: $text-color-placeholder;
     font-size: 24rpx;
   }
 }
@@ -380,8 +381,8 @@ onMounted(() => {
 .card-arrow {
   width: 12rpx;
   height: 12rpx;
-  border-top: 3rpx solid #cbd5e1;
-  border-right: 3rpx solid #cbd5e1;
+  border-top: 3rpx solid $text-color-placeholder;
+  border-right: 3rpx solid $text-color-placeholder;
   transform: rotate(45deg);
   margin-left: 12rpx;
   flex-shrink: 0;
@@ -394,14 +395,14 @@ onMounted(() => {
   justify-content: center;
   gap: 12rpx;
   padding: 32rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   font-size: 24rpx;
 
   .loading-spinner {
     width: 32rpx;
     height: 32rpx;
-    border: 3rpx solid #e2e8f0;
-    border-top-color: #10b981;
+    border: 3rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -415,7 +416,7 @@ onMounted(() => {
   text-align: center;
   padding: 32rpx;
   font-size: 24rpx;
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 
 .empty-state {
@@ -427,7 +428,7 @@ onMounted(() => {
   .empty-icon {
     width: 120rpx;
     height: 120rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 24rpx;
     margin-bottom: 20rpx;
     display: flex;
@@ -437,7 +438,7 @@ onMounted(() => {
     .empty-icon-inner {
       width: 48rpx;
       height: 48rpx;
-      border: 4rpx solid #cbd5e1;
+      border: 4rpx solid $text-color-placeholder;
       border-radius: 50%;
       position: relative;
 
@@ -449,7 +450,7 @@ onMounted(() => {
         transform: translate(-50%, -50%);
         width: 20rpx;
         height: 20rpx;
-        background: #cbd5e1;
+        background: $text-color-placeholder;
         border-radius: 50%;
       }
     }
@@ -457,7 +458,7 @@ onMounted(() => {
 
   .empty-text {
     font-size: 28rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -478,18 +479,18 @@ onMounted(() => {
 
 .modal-content {
   width: 100%;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   overflow: hidden;
 
   .modal-header {
     padding: 24rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
 
     .modal-title {
       font-size: 32rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
     }
   }
 
@@ -499,12 +500,12 @@ onMounted(() => {
     .search-input {
       width: 100%;
       height: 88rpx;
-      background: #f8fafc;
-      border: 2rpx solid #e2e8f0;
+      background: $bg-color-page;
+      border: 2rpx solid $border-color;
       border-radius: 12rpx;
       padding: 0 20rpx;
       font-size: 28rpx;
-      color: #1e293b;
+      color: $text-color-primary;
       box-sizing: border-box;
     }
   }
@@ -528,18 +529,18 @@ onMounted(() => {
     }
 
     .btn-cancel {
-      background: #f8fafc;
-      color: #64748b;
+      background: $bg-color-page;
+      color: $text-color-tertiary;
     }
 
     .btn-confirm {
-      background: #10b981;
+      background: $primary-color;
       color: #fff;
     }
   }
 }
 
 .input-placeholder {
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 </style>

haha-admin-mp/src/pages/device/detail.vue

@@ -189,6 +189,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getDeviceDetail, openDeviceDoor, setDeviceTemperature, setDeviceVolume, getDeviceDoorRecords } from '@/api/device';
 import { DeviceStatusText, DeviceStatusColor } from '@/utils/constants';
@@ -203,7 +204,7 @@ const newVolume = ref('');
 const formatMoney = formatMoneyUtil;
 
 const getStatusText = (status: number) => DeviceStatusText[status] || '未知';
-const getStatusColor = (status: number) => DeviceStatusColor[status] || '#94a3b8';
+const getStatusColor = (status: number) => DeviceStatusColor[status] || '$text-color-muted';
 
 const getStatusClass = (status: number) => {
   if (status === 1) return 'online';
@@ -236,7 +237,7 @@ const loadDoorRecords = async (deviceId: string) => {
     const res = await getDeviceDoorRecords(deviceId, { page: 1, pageSize: 5 });
     doorRecords.value = res.list || [];
   } catch (error) {
-    console.error('加载开门记录失败', error);
+    logger.warn('加载开门记录失败', error);
   }
 };
 
@@ -296,12 +297,12 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   padding-bottom: 120rpx;
 }
 
 .status-section {
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 30rpx 32rpx;
   margin-bottom: 16rpx;
   
@@ -314,7 +315,7 @@ onMounted(() => {
     .device-name {
       font-size: 36rpx;
       font-weight: 700;
-      color: #1e293b;
+      color: $text-color-primary;
     }
     
     .device-status {
@@ -334,34 +335,34 @@ onMounted(() => {
       }
       
       &.online {
-        background: #ecfdf5;
-        color: #10b981;
-        .status-dot { background: #10b981; }
+        background: $success-color-bg;
+        color: $primary-color;
+        .status-dot { background: $primary-color; }
       }
       
       &.offline {
-        background: #fff7ed;
-        color: #f97316;
-        .status-dot { background: #f97316; }
+        background: $accent-color-bg;
+        color: $accent-color;
+        .status-dot { background: $accent-color; }
       }
       
       &.maintenance {
-        background: #faf5ff;
-        color: #a855f7;
-        .status-dot { background: #a855f7; }
+        background: $primary-color-bg;
+        color: $primary-color;
+        .status-dot { background: $primary-color; }
       }
     }
   }
   
   .device-no {
     font-size: 26rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
     font-family: monospace;
   }
 }
 
 .info-section {
-  background: #ffffff;
+  background: $bg-color-card;
   margin-bottom: 16rpx;
   padding: 24rpx 32rpx;
   
@@ -369,10 +370,10 @@ onMounted(() => {
     display: block;
     font-size: 28rpx;
     font-weight: 600;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 20rpx;
     padding-bottom: 16rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
   }
   
   .info-item {
@@ -382,12 +383,12 @@ onMounted(() => {
     
     .label {
       font-size: 28rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
     }
     
     .value {
       font-size: 28rpx;
-      color: #1e293b;
+      color: $text-color-primary;
     }
   }
   
@@ -398,7 +399,7 @@ onMounted(() => {
       flex: 1;
       text-align: center;
       padding: 20rpx;
-      background: #f8fafc;
+      background: $bg-color-page;
       border-radius: 12rpx;
       margin-right: 16rpx;
       
@@ -416,23 +417,23 @@ onMounted(() => {
         justify-content: center;
         
         &.temp {
-          background: #ecfdf5;
+          background: $success-color-bg;
           
           .icon-inner {
             width: 20rpx;
             height: 20rpx;
-            border: 4rpx solid #10b981;
+            border: 4rpx solid $primary-color;
             border-radius: 50%;
           }
         }
         
         &.volume {
-          background: #f0f9ff;
+          background: $info-color-bg;
           
           .icon-inner {
             width: 0;
             height: 0;
-            border-left: 10rpx solid #0ea5e9;
+            border-left: 10rpx solid $info-color;
             border-top: 8rpx solid transparent;
             border-bottom: 8rpx solid transparent;
           }
@@ -445,7 +446,7 @@ onMounted(() => {
         justify-content: center;
         font-size: 32rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
         margin-bottom: 8rpx;
       }
       
@@ -454,14 +455,14 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
         font-size: 24rpx;
-        color: #64748b;
+        color: $text-color-tertiary;
       }
     }
   }
   
   .sales-grid {
     display: flex;
-    background: #f8fafc;
+    background: $bg-color-page;
     border-radius: 12rpx;
     padding: 20rpx 0;
     
@@ -478,15 +479,15 @@ onMounted(() => {
         justify-content: center;
         font-size: 30rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
         margin-bottom: 8rpx;
         
         &.accent {
-          color: #f97316;
+          color: $accent-color;
         }
         
         &.primary {
-          color: #10b981;
+          color: $primary-color;
         }
       }
       
@@ -495,7 +496,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
         font-size: 22rpx;
-        color: #64748b;
+        color: $text-color-tertiary;
       }
     }
   }
@@ -507,13 +508,13 @@ onMounted(() => {
     .inventory-bar {
       flex: 1;
       height: 20rpx;
-      background: #e2e8f0;
+      background: $border-color;
       border-radius: 10rpx;
       overflow: hidden;
       
       .inventory-progress {
         height: 100%;
-        background: #10b981;
+        background: $primary-color;
         border-radius: 10rpx;
       }
     }
@@ -522,7 +523,7 @@ onMounted(() => {
       width: 120rpx;
       text-align: right;
       font-size: 26rpx;
-      color: #475569;
+      color: $text-color-secondary;
       font-weight: 500;
     }
   }
@@ -530,7 +531,7 @@ onMounted(() => {
   .low-stock-list {
     margin-top: 20rpx;
     padding: 20rpx;
-    background: #fef2f2;
+    background: $error-color-bg;
     border-radius: 12rpx;
     
     .low-stock-title {
@@ -539,13 +540,13 @@ onMounted(() => {
       gap: 8rpx;
       font-size: 26rpx;
       font-weight: 600;
-      color: #ef4444;
+      color: $error-color;
       margin-bottom: 16rpx;
       
       .warning-icon {
         width: 20rpx;
         height: 20rpx;
-        border: 3rpx solid #ef4444;
+        border: 3rpx solid $error-color;
         border-radius: 50%;
         position: relative;
         
@@ -557,7 +558,7 @@ onMounted(() => {
           transform: translateX(-50%);
           width: 3rpx;
           height: 3rpx;
-          background: #ef4444;
+          background: $error-color;
           border-radius: 50%;
         }
         
@@ -569,7 +570,7 @@ onMounted(() => {
           transform: translateX(-50%);
           width: 3rpx;
           height: 6rpx;
-          background: #ef4444;
+          background: $error-color;
           border-radius: 2rpx;
         }
       }
@@ -582,12 +583,12 @@ onMounted(() => {
       
       .product-name {
         font-size: 26rpx;
-        color: #1e293b;
+        color: $text-color-primary;
       }
       
       .stock-warning {
         font-size: 24rpx;
-        color: #ef4444;
+        color: $error-color;
       }
     }
   }
@@ -597,7 +598,7 @@ onMounted(() => {
       display: flex;
       align-items: center;
       padding: 16rpx 0;
-      border-bottom: 1rpx solid #f1f5f9;
+      border-bottom: 1rpx solid $bg-color-secondary;
       
       &:last-child {
         border-bottom: none;
@@ -606,7 +607,7 @@ onMounted(() => {
       .order-no {
         flex: 1;
         font-size: 26rpx;
-        color: #1e293b;
+        color: $text-color-primary;
         font-family: monospace;
       }
       
@@ -614,7 +615,7 @@ onMounted(() => {
         width: 120rpx;
         text-align: right;
         font-size: 26rpx;
-        color: #1e293b;
+        color: $text-color-primary;
         font-weight: 600;
       }
       
@@ -622,7 +623,7 @@ onMounted(() => {
         width: 160rpx;
         text-align: right;
         font-size: 24rpx;
-        color: #94a3b8;
+        color: $text-color-muted;
       }
     }
   }
@@ -634,7 +635,7 @@ onMounted(() => {
     justify-content: space-between;
     align-items: center;
     padding: 16rpx 0;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
 
     &:last-child {
       border-bottom: none;
@@ -644,19 +645,19 @@ onMounted(() => {
       .record-action {
         display: block;
         font-size: 28rpx;
-        color: #1e293b;
+        color: $text-color-primary;
         margin-bottom: 4rpx;
       }
 
       .record-user {
         font-size: 22rpx;
-        color: #94a3b8;
+        color: $text-color-muted;
       }
     }
 
     .record-time {
       font-size: 24rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
     }
   }
 }
@@ -671,12 +672,12 @@ onMounted(() => {
     flex-direction: column;
     align-items: center;
     padding: 24rpx 0;
-    background: #f8fafc;
+    background: $bg-color-page;
     border-radius: 16rpx;
     transition: background 0.15s;
 
     &:active {
-      background: #f1f5f9;
+      background: $bg-color-secondary;
     }
 
     .op-icon {
@@ -688,14 +689,14 @@ onMounted(() => {
       justify-content: center;
       margin-bottom: 12rpx;
 
-      &.green { background: #ecfdf5; }
-      &.amber { background: #fff7ed; }
-      &.blue { background: #f0f9ff; }
+      &.green { background: $success-color-bg; }
+      &.amber { background: $accent-color-bg; }
+      &.blue { background: $info-color-bg; }
 
       .icon-door {
         width: 28rpx;
         height: 32rpx;
-        border: 3rpx solid #10b981;
+        border: 3rpx solid $primary-color;
         border-radius: 4rpx;
         position: relative;
 
@@ -707,7 +708,7 @@ onMounted(() => {
           transform: translateY(-50%);
           width: 4rpx;
           height: 8rpx;
-          background: #10b981;
+          background: $primary-color;
           border-radius: 2rpx;
         }
       }
@@ -715,7 +716,7 @@ onMounted(() => {
       .icon-temp {
         width: 20rpx;
         height: 20rpx;
-        border: 3rpx solid #f97316;
+        border: 3rpx solid $accent-color;
         border-radius: 50%;
         position: relative;
 
@@ -727,14 +728,14 @@ onMounted(() => {
           transform: translate(-50%, -50%);
           width: 3rpx;
           height: 10rpx;
-          background: #f97316;
+          background: $accent-color;
         }
       }
 
       .icon-vol {
         width: 0;
         height: 0;
-        border-left: 12rpx solid #0ea5e9;
+        border-left: 12rpx solid $info-color;
         border-top: 8rpx solid transparent;
         border-bottom: 8rpx solid transparent;
         position: relative;
@@ -746,7 +747,7 @@ onMounted(() => {
           left: -4rpx;
           width: 6rpx;
           height: 20rpx;
-          background: #0ea5e9;
+          background: $info-color;
           border-radius: 3rpx;
         }
       }
@@ -754,7 +755,7 @@ onMounted(() => {
 
     .op-name {
       font-size: 24rpx;
-      color: #475569;
+      color: $text-color-secondary;
     }
   }
 }
@@ -780,18 +781,18 @@ onMounted(() => {
 
 .modal-content {
   width: 100%;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   overflow: hidden;
 
   .modal-header {
     padding: 24rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
 
     .modal-title {
       font-size: 32rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
     }
   }
 
@@ -801,19 +802,19 @@ onMounted(() => {
     .modal-label {
       display: block;
       font-size: 26rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
       margin-bottom: 16rpx;
     }
 
     .modal-input {
       width: 100%;
       height: 88rpx;
-      background: #f8fafc;
-      border: 2rpx solid #e2e8f0;
+      background: $bg-color-page;
+      border: 2rpx solid $border-color;
       border-radius: 12rpx;
       padding: 0 20rpx;
       font-size: 28rpx;
-      color: #1e293b;
+      color: $text-color-primary;
       box-sizing: border-box;
     }
   }
@@ -837,18 +838,18 @@ onMounted(() => {
     }
 
     .btn-cancel {
-      background: #f8fafc;
-      color: #64748b;
+      background: $bg-color-page;
+      color: $text-color-tertiary;
     }
 
     .btn-confirm {
-      background: #10b981;
+      background: $primary-color;
       color: #fff;
     }
   }
 }
 
 .input-placeholder {
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 </style>

haha-admin-mp/src/pages/device/list.vue

@@ -228,7 +228,7 @@ const loadDevices = async () => {
     totalCount.value = res.total || 0;
     hasMore.value = deviceList.value.length < (res.total || 0);
   } catch (error) {
-    console.error('加载设备列表失败', error);
+    logger.warn('加载设备列表失败', error);
   } finally {
     loading.value = false;
     refreshing.value = false;
@@ -320,7 +320,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   height: 100vh;
-  background: #f5f5f5;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -330,7 +330,7 @@ onMounted(() => {
 
 /* ========== 黄色头部区域 ========== */
 .header-section {
-  background: #FFD93D;
+  background: $primary-color;
   padding-bottom: 20rpx;
   transition: box-shadow 0.2s ease;
   flex-shrink: 0;
@@ -354,7 +354,7 @@ onMounted(() => {
   .title-text {
     font-size: 36rpx;
     font-weight: 600;
-    color: #333333;
+    color: $text-color-primary;
   }
 }
 
@@ -376,12 +376,12 @@ onMounted(() => {
 
   .tab-text {
     font-size: 30rpx;
-    color: #666666;
+    color: $text-color-secondary;
     font-weight: 500;
   }
 
   &.active .tab-text {
-    color: #333333;
+    color: $text-color-primary;
     font-weight: 600;
   }
 
@@ -390,7 +390,7 @@ onMounted(() => {
     bottom: 0;
     width: 48rpx;
     height: 6rpx;
-    background: #333333;
+    background: $text-color-primary;
     border-radius: 3rpx;
   }
 }
@@ -401,8 +401,8 @@ onMounted(() => {
   align-items: center;
   gap: 16rpx;
   padding: 20rpx 24rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $bg-color-secondary;
   flex-shrink: 0;
 }
 
@@ -410,7 +410,7 @@ onMounted(() => {
   flex: 1;
   display: flex;
   align-items: center;
-  background: #f5f5f5;
+  background: $bg-color-page;
   border-radius: 40rpx;
   padding: 16rpx 24rpx;
   height: 72rpx;
@@ -426,7 +426,7 @@ onMounted(() => {
   .search-icon-circle {
     width: 24rpx;
     height: 24rpx;
-    border: 3rpx solid #999999;
+    border: 3rpx solid $text-color-muted;
     border-radius: 50%;
     position: absolute;
     top: 0;
@@ -436,7 +436,7 @@ onMounted(() => {
   .search-icon-line {
     width: 10rpx;
     height: 3rpx;
-    background: #999999;
+    background: $text-color-muted;
     border-radius: 2rpx;
     position: absolute;
     bottom: 2rpx;
@@ -448,17 +448,17 @@ onMounted(() => {
 .search-input {
   flex: 1;
   font-size: 28rpx;
-  color: #333333;
+  color: $text-color-primary;
   height: 100%;
 }
 
 .search-placeholder {
-  color: #aaaaaa;
+  color: $text-color-muted;
   font-size: 28rpx;
 }
 
 .search-btn {
-  background: #FFD93D;
+  background: $primary-color;
   border-radius: 36rpx;
   padding: 16rpx 36rpx;
   display: flex;
@@ -472,7 +472,7 @@ onMounted(() => {
 
   .search-btn-text {
     font-size: 28rpx;
-    color: #333333;
+    color: $text-color-primary;
     font-weight: 500;
   }
 }
@@ -483,14 +483,14 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 24rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $bg-color-secondary;
   flex-shrink: 0;
 }
 
 .stats-total {
   font-size: 26rpx;
-  color: #999999;
+  color: $text-color-muted;
   flex-shrink: 0;
 }
 
@@ -504,13 +504,13 @@ onMounted(() => {
 
   .refresh-text {
     font-size: 24rpx;
-    color: #999999;
+    color: $text-color-muted;
     white-space: nowrap;
   }
 
   .refresh-link {
     font-size: 24rpx;
-    color: #1890ff;
+    color: $info-color;
     white-space: nowrap;
   }
 }
@@ -527,7 +527,7 @@ onMounted(() => {
 
   .filter-text {
     font-size: 26rpx;
-    color: #666666;
+    color: $text-color-secondary;
   }
 
   .filter-icon {
@@ -535,7 +535,7 @@ onMounted(() => {
     height: 0;
     border-left: 8rpx solid transparent;
     border-right: 8rpx solid transparent;
-    border-top: 10rpx solid #666666;
+    border-top: 10rpx solid $text-color-secondary;
     margin-top: 4rpx;
   }
 }
@@ -552,7 +552,7 @@ onMounted(() => {
 
 /* ========== 设备卡片 ========== */
 .device-card {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
@@ -582,15 +582,15 @@ onMounted(() => {
   margin-top: 4rpx;
 
   &.online {
-    background: #e6f7e6;
+    background: $success-color-bg;
   }
 
   &.offline {
-    background: #f5f5f5;
+    background: $bg-color-page;
   }
 
   &.maintenance {
-    background: #fff7e6;
+    background: $accent-color-bg;
   }
 
   .status-text {
@@ -599,15 +599,15 @@ onMounted(() => {
   }
 
   &.online .status-text {
-    color: #52c41a;
+    color: $success-color;
   }
 
   &.offline .status-text {
-    color: #999999;
+    color: $text-color-muted;
   }
 
   &.maintenance .status-text {
-    color: #faad14;
+    color: $warning-color;
   }
 }
 
@@ -661,26 +661,26 @@ onMounted(() => {
 
 .wifi-icon:not(.offline) {
   .wifi-arc {
-    border-color: #52c41a;
+    border-color: $success-color;
   }
   .wifi-dot {
-    background: #52c41a;
+    background: $success-color;
   }
 }
 
 .wifi-icon.offline {
   .wifi-arc {
-    border-color: #cccccc;
+    border-color: $text-color-placeholder;
   }
   .wifi-dot {
-    background: #cccccc;
+    background: $text-color-placeholder;
   }
 
   .wifi-slash {
     position: absolute;
     width: 2rpx;
     height: 24rpx;
-    background: #ff4d4f;
+    background: $error-color;
     transform: rotate(45deg);
     top: -2rpx;
     left: 50%;
@@ -698,7 +698,7 @@ onMounted(() => {
 
 .device-name {
   font-size: 30rpx;
-  color: #333333;
+  color: $text-color-primary;
   font-weight: 500;
   line-height: 1.4;
   word-break: break-all;
@@ -712,27 +712,27 @@ onMounted(() => {
 
   .meta-label {
     font-size: 22rpx;
-    color: #999999;
-    background: #f5f5f5;
+    color: $text-color-muted;
+    background: $bg-color-page;
     padding: 2rpx 8rpx;
     border-radius: 4rpx;
   }
 
   .meta-value {
     font-size: 24rpx;
-    color: #666666;
+    color: $text-color-secondary;
     font-weight: 500;
     font-family: monospace;
   }
 
   .meta-divider {
     font-size: 22rpx;
-    color: #dddddd;
+    color: $border-color;
   }
 
   .meta-shop {
     font-size: 24rpx;
-    color: #999999;
+    color: $text-color-muted;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -745,7 +745,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   padding-top: 16rpx;
-  border-top: 1rpx solid #f5f5f5;
+  border-top: 1rpx solid $bg-color-page;
 }
 
 .action-item {
@@ -769,20 +769,20 @@ onMounted(() => {
   margin-bottom: 10rpx;
 
   &.orange {
-    background: #fff7e6;
-    border: 2rpx solid #ffd591;
+    background: $accent-color-bg;
+    border: 2rpx solid $accent-color-bg;
   }
 
   .action-num {
     font-size: 28rpx;
     font-weight: 600;
-    color: #fa8c16;
+    color: $accent-color;
   }
 }
 
 .action-label {
   font-size: 24rpx;
-  color: #666666;
+  color: $text-color-secondary;
 }
 
 .arrow-icon {
@@ -792,8 +792,8 @@ onMounted(() => {
   .arrow-right {
     width: 16rpx;
     height: 16rpx;
-    border-top: 3rpx solid #cccccc;
-    border-right: 3rpx solid #cccccc;
+    border-top: 3rpx solid $text-color-placeholder;
+    border-right: 3rpx solid $text-color-placeholder;
     transform: rotate(45deg);
   }
 }
@@ -805,14 +805,14 @@ onMounted(() => {
   justify-content: center;
   gap: 12rpx;
   padding: 32rpx;
-  color: #999999;
+  color: $text-color-muted;
   font-size: 24rpx;
 
   .loading-spinner {
     width: 32rpx;
     height: 32rpx;
-    border: 3rpx solid #e8e8e8;
-    border-top-color: #FFD93D;
+    border: 3rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -828,7 +828,7 @@ onMounted(() => {
   text-align: center;
   padding: 32rpx;
   font-size: 24rpx;
-  color: #cccccc;
+  color: $text-color-placeholder;
 }
 
 /* ========== 空状态 ========== */
@@ -841,7 +841,7 @@ onMounted(() => {
   .empty-icon {
     width: 140rpx;
     height: 140rpx;
-    background: #f5f5f5;
+    background: $bg-color-page;
     border-radius: 50%;
     margin-bottom: 24rpx;
     display: flex;
@@ -863,7 +863,7 @@ onMounted(() => {
     width: 56rpx;
     height: 28rpx;
     border-radius: 50%;
-    border: 4rpx solid #cccccc;
+    border: 4rpx solid $text-color-placeholder;
     border-bottom-color: transparent;
     border-left-color: transparent;
     border-right-color: transparent;
@@ -874,18 +874,18 @@ onMounted(() => {
     width: 10rpx;
     height: 10rpx;
     border-radius: 50%;
-    background: #cccccc;
+    background: $text-color-placeholder;
   }
 
   .empty-text {
     font-size: 30rpx;
-    color: #666666;
+    color: $text-color-secondary;
     margin-bottom: 12rpx;
   }
 
   .empty-subtext {
     font-size: 26rpx;
-    color: #999999;
+    color: $text-color-muted;
   }
 }
 </style>

haha-admin-mp/src/pages/distribution/index.vue

@@ -89,6 +89,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getMyStats, getMyWithdrawalList } from '@/api/distribution';
 import type { DistributionStats, WithdrawalRecord } from '@/api/distribution';
@@ -106,7 +107,7 @@ const loadStats = async () => {
   try {
     myStats.value = await getMyStats();
   } catch (error) {
-    console.error('加载分销统计失败', error);
+    logger.warn('加载分销统计失败', error);
   }
 };
 
@@ -115,7 +116,7 @@ const loadRecentRecords = async () => {
     const result = await getMyWithdrawalList({ page: 1, pageSize: 5 });
     recentList.value = result.list;
   } catch (error) {
-    console.error('加载提现记录失败', error);
+    logger.warn('加载提现记录失败', error);
   }
 };
 
@@ -145,7 +146,7 @@ const goToRecords = () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .content {
@@ -154,11 +155,11 @@ const goToRecords = () => {
 }
 
 .commission-overview {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 20rpx;
   padding: 36rpx;
   margin-bottom: 24rpx;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .overview-header {
@@ -179,14 +180,14 @@ const goToRecords = () => {
 .amount-symbol {
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   margin-right: 4rpx;
 }
 
 .amount-value {
   font-size: 64rpx;
   font-weight: 700;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .overview-desc {
@@ -213,11 +214,11 @@ const goToRecords = () => {
 .overview-stat-item .stat-num {
   font-size: 32rpx;
   font-weight: 700;
-  color: #ffffff;
+  color: $bg-color-card;
   margin-bottom: 6rpx;
 
   &.frozen {
-    color: #fbbf24;
+    color: $primary-color;
   }
 }
 
@@ -233,13 +234,13 @@ const goToRecords = () => {
 }
 
 .referral-stats {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 32rpx;
   margin-bottom: 24rpx;
   display: flex;
   align-items: center;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .stat-card {
@@ -252,23 +253,23 @@ const goToRecords = () => {
 .stat-card .stat-num {
   font-size: 44rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 8rpx;
 
   &.success {
-    color: #10b981;
+    color: $primary-color;
   }
 }
 
 .stat-card .stat-label {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .stat-divider {
   width: 1rpx;
   height: 60rpx;
-  background: #e2e8f0;
+  background: $border-color;
 }
 
 .action-section {
@@ -278,14 +279,14 @@ const goToRecords = () => {
 .btn-primary {
   width: 100%;
   height: 96rpx;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 48rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
   margin-bottom: 16rpx;
 
@@ -297,35 +298,35 @@ const goToRecords = () => {
 .btn-secondary {
   width: 100%;
   height: 88rpx;
-  background: #ffffff;
-  border: 2rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 2rpx solid $border-color;
   border-radius: 44rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28rpx;
   font-weight: 500;
-  color: #475569;
+  color: $text-color-secondary;
 
   &:active {
-    background: #f8fafc;
+    background: $bg-color-page;
   }
 }
 
 .arrow-right {
   width: 12rpx;
   height: 12rpx;
-  border-top: 3rpx solid #94a3b8;
-  border-right: 3rpx solid #94a3b8;
+  border-top: 3rpx solid $text-color-muted;
+  border-right: 3rpx solid $text-color-muted;
   transform: rotate(45deg);
   margin-left: 8rpx;
 }
 
 .recent-section {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 28rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .section-header {
@@ -338,19 +339,19 @@ const goToRecords = () => {
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .section-more {
   font-size: 24rpx;
-  color: #3b82f6;
+  color: $info-color;
 }
 
 .empty-tip {
   padding: 40rpx 0;
   text-align: center;
   font-size: 26rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .record-item {
@@ -358,7 +359,7 @@ const goToRecords = () => {
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #f1f5f9;
+  border-bottom: 1rpx solid $bg-color-secondary;
 
   &:last-child {
     border-bottom: none;
@@ -373,13 +374,13 @@ const goToRecords = () => {
 .record-amount {
   font-size: 30rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 4rpx;
 }
 
 .record-time {
   font-size: 22rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .record-status {
@@ -387,19 +388,19 @@ const goToRecords = () => {
   font-weight: 500;
 
   &.status-pending {
-    color: #f59e0b;
+    color: $warning-color;
   }
 
   &.status-approved {
-    color: #3b82f6;
+    color: $info-color;
   }
 
   &.status-rejected {
-    color: #ef4444;
+    color: $error-color;
   }
 
   &.status-paid {
-    color: #10b981;
+    color: $primary-color;
   }
 }
 </style>

haha-admin-mp/src/pages/distribution/records.vue

@@ -84,6 +84,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getMyWithdrawalList } from '@/api/distribution';
 import type { WithdrawalRecord } from '@/api/distribution';
@@ -132,7 +133,7 @@ const loadRecords = async (reset = false) => {
       page.value++;
     }
   } catch (error) {
-    console.error('加载提现记录失败', error);
+    logger.warn('加载提现记录失败', error);
   } finally {
     isLoading.value = false;
   }
@@ -152,7 +153,7 @@ const getStatusLabel = (status: string): string => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .content {
@@ -162,11 +163,11 @@ const getStatusLabel = (status: string): string => {
 
 .filter-tabs {
   display: flex;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 16rpx;
   padding: 8rpx;
   margin-bottom: 24rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .tab-item {
@@ -177,17 +178,17 @@ const getStatusLabel = (status: string): string => {
   height: 64rpx;
   border-radius: 12rpx;
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   transition: all 0.2s;
 
   &.active {
-    background: #10b981;
-    color: #ffffff;
+    background: $primary-color;
+    color: $bg-color-card;
     font-weight: 600;
   }
 
   &:active:not(.active) {
-    background: #f1f5f9;
+    background: $bg-color-secondary;
   }
 }
 
@@ -195,15 +196,15 @@ const getStatusLabel = (status: string): string => {
   padding: 80rpx 0;
   text-align: center;
   font-size: 28rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .record-card {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 28rpx;
   margin-bottom: 20rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .card-header {
@@ -212,13 +213,13 @@ const getStatusLabel = (status: string): string => {
   justify-content: space-between;
   margin-bottom: 20rpx;
   padding-bottom: 20rpx;
-  border-bottom: 1rpx solid #f1f5f9;
+  border-bottom: 1rpx solid $bg-color-secondary;
 }
 
 .card-amount {
   font-size: 36rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .card-status {
@@ -228,23 +229,23 @@ const getStatusLabel = (status: string): string => {
   border-radius: 8rpx;
 
   &.status-pending {
-    color: #f59e0b;
-    background: #fef3c7;
+    color: $warning-color;
+    background: $primary-color-bg;
   }
 
   &.status-approved {
-    color: #3b82f6;
-    background: #dbeafe;
+    color: $info-color;
+    background: $info-color-bg;
   }
 
   &.status-rejected {
-    color: #ef4444;
-    background: #fee2e2;
+    color: $error-color;
+    background: $error-color-bg;
   }
 
   &.status-paid {
-    color: #10b981;
-    background: #d1fae5;
+    color: $primary-color;
+    background: $success-color-bg;
   }
 }
 
@@ -262,15 +263,15 @@ const getStatusLabel = (status: string): string => {
 
 .info-label {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .info-value {
   font-size: 24rpx;
-  color: #475569;
+  color: $text-color-secondary;
 
   &.reject {
-    color: #ef4444;
+    color: $error-color;
   }
 }
 
@@ -278,6 +279,6 @@ const getStatusLabel = (status: string): string => {
   padding: 24rpx 0;
   text-align: center;
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 </style>

haha-admin-mp/src/pages/distribution/withdrawal.vue

@@ -60,6 +60,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getMyStats, applyWithdrawal } from '@/api/distribution';
 import type { DistributionStats } from '@/api/distribution';
@@ -76,7 +77,7 @@ const loadStats = async () => {
   try {
     myStats.value = await getMyStats();
   } catch (error) {
-    console.error('加载分销统计失败', error);
+    logger.warn('加载分销统计失败', error);
   }
 };
 
@@ -119,7 +120,7 @@ const handleSubmit = async () => {
       uni.showToast({ title: result.message || '提现申请失败', icon: 'none' });
     }
   } catch (error) {
-    console.error('提现申请失败', error);
+    logger.warn('提现申请失败', error);
     uni.showToast({ title: '提现申请失败，请重试', icon: 'none' });
   } finally {
     isSubmitting.value = false;
@@ -130,7 +131,7 @@ const handleSubmit = async () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .content {
@@ -139,11 +140,11 @@ const handleSubmit = async () => {
 }
 
 .balance-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 20rpx;
   padding: 36rpx;
   margin-bottom: 24rpx;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .balance-label {
@@ -162,14 +163,14 @@ const handleSubmit = async () => {
 .amount-symbol {
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   margin-right: 4rpx;
 }
 
 .amount-value {
   font-size: 64rpx;
   font-weight: 700;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .balance-detail {
@@ -183,17 +184,17 @@ const handleSubmit = async () => {
 }
 
 .input-section {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 28rpx;
   margin-bottom: 24rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .input-label {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   display: block;
   margin-bottom: 20rpx;
 }
@@ -202,15 +203,15 @@ const handleSubmit = async () => {
   display: flex;
   align-items: center;
   padding: 20rpx 24rpx;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 12rpx;
-  border: 2rpx solid #e2e8f0;
+  border: 2rpx solid $border-color;
 }
 
 .input-prefix {
   font-size: 40rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-right: 12rpx;
 }
 
@@ -218,7 +219,7 @@ const handleSubmit = async () => {
   flex: 1;
   font-size: 40rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   height: 56rpx;
 }
 
@@ -230,22 +231,22 @@ const handleSubmit = async () => {
 
 .action-link {
   font-size: 26rpx;
-  color: #3b82f6;
+  color: $info-color;
   font-weight: 500;
 }
 
 .tips-section {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 28rpx;
   margin-bottom: 40rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .tips-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   display: block;
   margin-bottom: 16rpx;
 }
@@ -263,7 +264,7 @@ const handleSubmit = async () => {
 .tip-dot {
   width: 10rpx;
   height: 10rpx;
-  background: #94a3b8;
+  background: $text-color-muted;
   border-radius: 50%;
   margin-right: 12rpx;
   margin-top: 12rpx;
@@ -272,26 +273,26 @@ const handleSubmit = async () => {
 
 .tip-text {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   line-height: 36rpx;
 }
 
 .btn-submit {
   width: 100%;
   height: 96rpx;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 48rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
 
   &[disabled] {
-    background: #cbd5e1;
-    color: #94a3b8;
+    background: $text-color-placeholder;
+    color: $text-color-muted;
   }
 
   &:active:not([disabled]) {

haha-admin-mp/src/pages/index/index.vue

@@ -54,9 +54,13 @@
             <text class="footer-value">{{ overview.monthOrders || 0 }}</text>
           </view>
         </view>
+        <view class="sales-stats-link" @click="navigateTo('/pages/statistics/overview')">
+          <text class="stats-link-text">查看完整数据统计</text>
+          <text class="stats-link-arrow">›</text>
+        </view>
       </view>
 
-      <!-- 设备状态 + 数据入口 -->
+      <!-- 设备概况 -->
       <view class="device-card">
         <view class="card-title">
           <text>设备概况</text>
@@ -78,46 +82,14 @@
             <text class="device-num">{{ overview.offlineDevices || 0 }}</text>
           </view>
         </view>
-        <view class="data-entry-row">
-          <view class="data-entry" @click="navigateTo('/pages/statistics/overview')">
-            <view class="data-entry-icon chart">
-              <view class="icon-chart"></view>
-            </view>
-            <view class="data-entry-info">
-              <text class="data-entry-title">数据统计</text>
-              <text class="data-entry-sub">销售 · 订单分析</text>
-            </view>
-            <text class="data-entry-arrow">›</text>
-          </view>
-          <view class="data-entry" @click="navigateTo('/pages/statistics/overview')">
-            <view class="data-entry-icon analytics">
-              <view class="icon-analytics"></view>
-            </view>
-            <view class="data-entry-info">
-              <text class="data-entry-title">生意参谋</text>
-              <text class="data-entry-sub">经营决策助手</text>
-            </view>
-            <text class="data-entry-arrow">›</text>
-          </view>
-        </view>
       </view>
 
       <!-- 待办事项 -->
       <view class="todo-card">
-        <view class="card-title">
-          <text>待办事项</text>
-          <text class="card-sub" v-if="totalTodo > 0">共 {{ totalTodo }} 项待处理</text>
-          <text class="card-sub" v-else>暂无待办</text>
-        </view>
-        <view class="todo-grid">
+        <view class="todo-row">
           <view class="todo-item" v-for="item in todoItems" :key="item.key" @click="navigateTo(item.url)">
-            <view :class="['todo-icon', item.color, { disabled: !item.count }]">
-              <view :class="item.iconClass"></view>
-            </view>
-            <view class="todo-info">
-              <text :class="['todo-value', { active: item.count > 0 }]">{{ item.count }}</text>
-              <text class="todo-label">{{ item.label }}</text>
-            </view>
+            <text :class="['todo-value', { active: item.count > 0 }]">{{ item.count }}</text>
+            <text class="todo-label">{{ item.label }}</text>
           </view>
         </view>
       </view>
@@ -129,25 +101,25 @@
         </view>
         <view class="quick-grid">
           <view class="quick-item" @click="navigateTo('/pages/products/apply')">
-            <view class="quick-icon primary">
+            <view class="quick-icon">
               <view class="icon-apply"></view>
             </view>
             <text class="quick-name">新品申请</text>
           </view>
           <view class="quick-item" @click="navigateTo('/pages/marketing/list')">
-            <view class="quick-icon orange">
+            <view class="quick-icon">
               <view class="icon-marketing"></view>
             </view>
             <text class="quick-name">营销管理</text>
           </view>
           <view class="quick-item" @click="navigateTo('/pages/staff/list')">
-            <view class="quick-icon green">
+            <view class="quick-icon">
               <view class="icon-staff"></view>
             </view>
             <text class="quick-name">人员管理</text>
           </view>
           <view class="quick-item" @click="navigateTo('/pages/shop/list')">
-            <view class="quick-icon blue">
+            <view class="quick-icon">
               <view class="icon-shop-quick"></view>
             </view>
             <text class="quick-name">门店管理</text>
@@ -163,6 +135,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import { getDashboardOverview, getTodoList } from '@/api/dashboard';
 import { formatMoney as formatMoneyUtil } from '@/utils/common';
 import CustomTabBar from '@/components/CustomTabBar.vue';
@@ -171,11 +144,8 @@ const statusBarHeight = ref(20); // 状态栏高度，默认20px
 const overview = ref<any>({});
 const todo = ref<any>({
   pendingRefunds: 0,
-  pendingAlerts: 0,
   unpaidOrders: 0,
-  lowStockItems: 0,
-  pendingInvoices: 0,
-  expiringProducts: 0
+  lowStockItems: 0
 });
 
 // 系统通知列表
@@ -184,20 +154,12 @@ const noticeList = ref<any[]>([
   { id: 2, content: '应政府监管要求，请尽快完成资质备案信息填写', type: 'important' }
 ]);
 
-// 待办项结构化配置
 const todoItems = computed(() => [
-  { key: 'pendingRefunds', label: '待处理退款', count: todo.value.pendingRefunds || 0, color: 'red', iconClass: 'icon-refund', url: '/pages/orders/list?tab=refund' },
-  { key: 'pendingAlerts', label: '待处理异常', count: todo.value.pendingAlerts || 0, color: 'orange', iconClass: 'icon-alert', url: '/pages/device/list?tab=alert' },
-  { key: 'unpaidOrders', label: '未支付订单', count: todo.value.unpaidOrders || 0, color: 'yellow', iconClass: 'icon-unpaid', url: '/pages/orders/list?tab=unpaid' },
-  { key: 'lowStockItems', label: '待补货', count: todo.value.lowStockItems || 0, color: 'blue', iconClass: 'icon-restock', url: '/pages/inventory/list' },
-  { key: 'pendingInvoices', label: '待开发票', count: todo.value.pendingInvoices || 0, color: 'purple', iconClass: 'icon-invoice', url: '/pages/invoice/list' },
-  { key: 'expiringProducts', label: '临期商品', count: todo.value.expiringProducts || 0, color: 'cyan', iconClass: 'icon-expire', url: '/pages/products/expire' }
+  { key: 'pendingRefunds', label: '待处理退款', count: todo.value.pendingRefunds || 0, url: '/pages/orders/list?tab=refund' },
+  { key: 'unpaidOrders', label: '未支付订单', count: todo.value.unpaidOrders || 0, url: '/pages/orders/list?tab=unpaid' },
+  { key: 'lowStockItems', label: '待补货', count: todo.value.lowStockItems || 0, url: '/pages/inventory/list' }
 ]);
 
-const totalTodo = computed(() =>
-  todoItems.value.reduce((sum, item) => sum + (item.count || 0), 0)
-);
-
 const formatMoney = (amount: number | string) => {
   const num = typeof amount === 'string' ? parseFloat(amount) : amount;
   return formatMoneyUtil(num || 0);
@@ -221,15 +183,12 @@ const loadData = async () => {
     if (todoRes) {
       todo.value = {
         pendingRefunds: todoRes.pendingRefunds || 0,
-        pendingAlerts: todoRes.pendingAlerts || 0,
         unpaidOrders: todoRes.unpaidOrders || 0,
-        lowStockItems: todoRes.lowStockItems || 0,
-        pendingInvoices: todoRes.pendingInvoices || 0,
-        expiringProducts: todoRes.expiringProducts || 0
+        lowStockItems: todoRes.lowStockItems || 0
       };
     }
   } catch (error) {
-    console.error('获取仪表盘数据失败', error);
+    logger.warn('获取仪表盘数据失败', error);
   }
 };
 
@@ -247,14 +206,14 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f4f5f7;
-  padding-bottom: 180rpx;
+  background: $bg-color-page;
+  padding-bottom: 140rpx;
 }
 
 /* ========== 顶部品牌栏 ========== */
 .header {
-  background: #fdd835;
-  padding: 0 32rpx 120rpx;
+  background: $primary-color;
+  padding: 0 32rpx 90rpx;
   position: relative;
 }
 
@@ -271,29 +230,29 @@ onMounted(() => {
 }
 
 .avatar {
-  width: 88rpx;
-  height: 88rpx;
-  border-radius: 20rpx;
-  background: #ffffff;
-  color: #333333;
-  font-size: 40rpx;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
+  background: $bg-color-card;
+  color: $text-color-primary;
+  font-size: 34rpx;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 20rpx;
+  margin-right: 16rpx;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 }
 
 .name-text {
-  font-size: 34rpx;
+  font-size: 30rpx;
   font-weight: 700;
-  color: #1a1a1a;
+  color: $text-color-primary;
 }
 
 /* ========== 内容区域（上浮） ========== */
 .content {
-  margin-top: -100rpx;
+  margin-top: -50rpx;
   padding: 0 24rpx;
   position: relative;
   z-index: 2;
@@ -304,57 +263,57 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 24rpx;
+  margin-bottom: 16rpx;
 
   > text:first-child {
-    font-size: 30rpx;
+    font-size: 28rpx;
     font-weight: 600;
-    color: #1a1a1a;
+    color: $text-color-primary;
   }
 }
 
 .card-more {
-  font-size: 24rpx;
-  color: #999999;
+  font-size: 22rpx;
+  color: $text-color-muted;
 
   &:active { opacity: 0.6; }
 }
 
 .card-sub {
-  font-size: 24rpx;
-  color: #999999;
+  font-size: 22rpx;
+  color: $text-color-muted;
 }
 
 /* ========== 通知栏 ========== */
 .notice-bar {
-  background: #ffffff;
-  padding: 18rpx 20rpx;
-  border-radius: 16rpx;
+  background: $bg-color-card;
+  padding: 14rpx 20rpx;
+  border-radius: 14rpx;
   display: flex;
   align-items: center;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 12rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
 
   &:active { opacity: 0.85; }
 }
 
 .notice-tag {
-  padding: 4rpx 14rpx;
-  background: #fff7ed;
-  color: #f97316;
-  font-size: 22rpx;
+  padding: 4rpx 12rpx;
+  background: $accent-color-bg;
+  color: $accent-color;
+  font-size: 20rpx;
   font-weight: 600;
-  border-radius: 8rpx;
-  margin-right: 16rpx;
+  border-radius: 6rpx;
+  margin-right: 12rpx;
   flex-shrink: 0;
 }
 
 .notice-content { flex: 1; overflow: hidden; }
-.notice-swiper { height: 40rpx; }
+.notice-swiper { height: 36rpx; }
 .notice-text {
-  font-size: 26rpx;
-  color: #333333;
-  line-height: 40rpx;
+  font-size: 24rpx;
+  color: $text-color-primary;
+  line-height: 36rpx;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -363,25 +322,25 @@ onMounted(() => {
 
 .notice-arrow {
   font-size: 36rpx;
-  color: #cccccc;
+  color: $text-color-placeholder;
   margin-left: 12rpx;
 }
 
 /* ========== 核心销售卡片 ========== */
 .sales-card {
-  background: #ffffff;
-  border-radius: 20rpx;
-  padding: 32rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  background: $bg-color-card;
+  border-radius: 18rpx;
+  padding: 24rpx;
+  margin-bottom: 12rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
 }
 
 .sales-main {
   display: flex;
   justify-content: space-between;
   align-items: stretch;
-  padding-bottom: 24rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid $border-color-light;
 }
 
 .sales-primary {
@@ -391,24 +350,24 @@ onMounted(() => {
   flex: 1;
 }
 .sales-primary .label {
-  font-size: 24rpx;
-  color: #888888;
-  margin-bottom: 12rpx;
+  font-size: 22rpx;
+  color: $text-color-tertiary;
+  margin-bottom: 8rpx;
 }
 .primary-value {
-  font-size: 64rpx;
+  font-size: 56rpx;
   font-weight: 700;
-  color: #10b981;
+  color: $primary-color;
   line-height: 1;
-  margin-bottom: 10rpx;
+  margin-bottom: 8rpx;
 }
 .compare {
   display: flex;
   align-items: center;
   font-size: 22rpx;
 }
-.compare-text { color: #999999; margin-right: 8rpx; }
-.compare-value { color: #10b981; font-weight: 600; }
+.compare-text { color: $text-color-muted; margin-right: 8rpx; }
+.compare-value { color: $primary-color; font-weight: 600; }
 
 .sales-secondary {
   display: flex;
@@ -419,19 +378,19 @@ onMounted(() => {
 }
 
 .sales-secondary .label {
-  font-size: 24rpx;
-  color: #888888;
-  margin-bottom: 12rpx;
+  font-size: 22rpx;
+  color: $text-color-tertiary;
+  margin-bottom: 8rpx;
 }
 .secondary-value {
-  font-size: 44rpx;
+  font-size: 36rpx;
   font-weight: 700;
-  color: #1a1a1a;
+  color: $text-color-primary;
   line-height: 1;
 }
 .unit {
   font-size: 22rpx;
-  color: #999999;
+  color: $text-color-muted;
   margin-top: 6rpx;
 }
 
@@ -439,7 +398,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 24rpx;
+  margin-top: 16rpx;
   gap: 0;
 }
 .footer-item {
@@ -449,46 +408,45 @@ onMounted(() => {
   flex: 1;
 }
 .footer-label {
-  font-size: 24rpx;
-  color: #888888;
-  margin-bottom: 8rpx;
+  font-size: 22rpx;
+  color: $text-color-tertiary;
+  margin-bottom: 6rpx;
 }
 .footer-value {
-  font-size: 30rpx;
+  font-size: 28rpx;
   font-weight: 600;
-  color: #1a1a1a;
+  color: $text-color-primary;
 }
 .footer-divider {
   width: 1rpx;
-  height: 40rpx;
-  background: #e5e7eb;
+  height: 36rpx;
+  background: $border-color;
 }
 
 /* ========== 设备卡片 ========== */
 .device-card {
-  background: #ffffff;
-  border-radius: 20rpx;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  background: $bg-color-card;
+  border-radius: 18rpx;
+  padding: 20rpx;
+  margin-bottom: 12rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
 }
 
 .device-row {
   display: flex;
-  gap: 20rpx;
-  margin-bottom: 24rpx;
+  gap: 16rpx;
 }
 
 .device-box {
   flex: 1;
-  padding: 24rpx;
-  border-radius: 16rpx;
+  padding: 18rpx;
+  border-radius: 14rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
 
-  &.online { background: #ecfdf5; }
-  &.offline { background: #fff7ed; }
+  &.online { background: $primary-color-bg; }
+  &.offline { background: $accent-color-bg; }
 
   &:active { opacity: 0.85; }
 }
@@ -496,361 +454,103 @@ onMounted(() => {
 .device-top {
   display: flex;
   align-items: center;
-  margin-bottom: 12rpx;
+  margin-bottom: 10rpx;
 }
 
 .device-dot {
-  width: 14rpx;
-  height: 14rpx;
+  width: 12rpx;
+  height: 12rpx;
   border-radius: 50%;
-  margin-right: 10rpx;
+  margin-right: 8rpx;
 
-  &.online-dot { background: #10b981; }
-  &.offline-dot { background: #f97316; }
+  &.online-dot { background: $primary-color; }
+  &.offline-dot { background: $accent-color; }
 }
 
 .device-label {
-  font-size: 24rpx;
-  color: #666666;
+  font-size: 22rpx;
+  color: $text-color-secondary;
 }
 
 .device-num {
-  font-size: 48rpx;
+  font-size: 40rpx;
   font-weight: 700;
-  color: #1a1a1a;
+  color: $text-color-primary;
   line-height: 1;
 }
 
-.data-entry-row {
-  display: flex;
-  gap: 20rpx;
-}
-
-.data-entry {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  padding: 20rpx;
-  background: #f9fafb;
-  border-radius: 16rpx;
-
-  &:active { opacity: 0.8; }
-}
-
-.data-entry-icon {
-  width: 60rpx;
-  height: 60rpx;
-  border-radius: 14rpx;
+.sales-stats-link {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-right: 14rpx;
-  flex-shrink: 0;
-
-  &.chart { background: #ecfdf5; }
-  &.analytics { background: #fff7ed; }
-}
-
-.data-entry-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.data-entry-title {
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 4rpx;
-}
-
-.data-entry-sub {
-  font-size: 20rpx;
-  color: #999999;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  margin-top: 14rpx;
+  padding: 12rpx 0 0;
+  border-top: 1rpx solid $border-color-light;
 
-.data-entry-arrow {
-  font-size: 32rpx;
-  color: #cccccc;
-  margin-left: 8rpx;
+  &:active { opacity: 0.7; }
 }
 
-.icon-chart {
-  display: flex;
-  align-items: flex-end;
-  width: 30rpx;
-  height: 28rpx;
-
-  &::before, &::after {
-    content: '';
-    width: 7rpx;
-    background: #10b981;
-    border-radius: 2rpx;
-    margin-right: 3rpx;
-  }
-  &::before { height: 14rpx; }
-  &::after { height: 24rpx; margin-right: 0; }
+.stats-link-text {
+  font-size: 24rpx;
+  color: $primary-color;
+  font-weight: 500;
 }
 
-.icon-analytics {
-  width: 28rpx;
-  height: 28rpx;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 3rpx solid #f97316;
-    border-radius: 50%;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 3rpx;
-    height: 14rpx;
-    background: #f97316;
-    transform-origin: bottom center;
-    transform: translate(-50%, -100%) rotate(35deg);
-  }
+.stats-link-arrow {
+  font-size: 24rpx;
+  color: $primary-color;
+  margin-left: 4rpx;
 }
 
 /* ========== 待办事项 ========== */
 .todo-card {
-  background: #ffffff;
-  border-radius: 20rpx;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  background: $bg-color-card;
+  border-radius: 18rpx;
+  padding: 24rpx 20rpx;
+  margin-bottom: 12rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
 }
 
-.todo-grid {
+.todo-row {
   display: flex;
-  flex-wrap: wrap;
+  justify-content: space-between;
 }
 
 .todo-item {
-  width: 33.333%;
-  display: flex;
-  align-items: center;
-  padding: 14rpx 6rpx;
-  box-sizing: border-box;
-
-  &:active { opacity: 0.7; }
-}
-
-.todo-icon {
-  width: 64rpx;
-  height: 64rpx;
-  border-radius: 16rpx;
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-right: 14rpx;
-  flex-shrink: 0;
-
-  &.red { background: #fef2f2; }
-  &.orange { background: #fff7ed; }
-  &.yellow { background: #fefce8; }
-  &.blue { background: #eff6ff; }
-  &.purple { background: #f5f3ff; }
-  &.cyan { background: #ecfeff; }
-
-  &.disabled { opacity: 0.6; }
-}
+  padding: 8rpx 6rpx;
 
-.todo-info {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+  &:active { opacity: 0.7; }
 }
 
 .todo-value {
   font-size: 32rpx;
   font-weight: 700;
-  color: #cccccc;
+  color: $text-color-placeholder;
   line-height: 1.2;
 
-  &.active { color: #1a1a1a; }
+  &.active { color: $primary-color; }
 }
 
 .todo-label {
   font-size: 22rpx;
-  color: #666666;
+  color: $text-color-secondary;
   margin-top: 2rpx;
   white-space: nowrap;
 }
 
-/* 待办图标 */
-.icon-refund {
-  width: 30rpx;
-  height: 30rpx;
-  border: 3rpx solid #ef4444;
-  border-radius: 50%;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 14rpx;
-    height: 3rpx;
-    background: #ef4444;
-  }
-}
-
-.icon-alert {
-  width: 0;
-  height: 0;
-  border-left: 16rpx solid transparent;
-  border-right: 16rpx solid transparent;
-  border-bottom: 28rpx solid #f97316;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: -20rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 3rpx;
-    height: 10rpx;
-    background: #ffffff;
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: -26rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 3rpx;
-    height: 3rpx;
-    background: #ffffff;
-    border-radius: 50%;
-  }
-}
-
-.icon-unpaid {
-  width: 30rpx;
-  height: 30rpx;
-  border: 3rpx solid #eab308;
-  border-radius: 50%;
-  position: relative;
-
-  &::before {
-    content: '¥';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 22rpx;
-    font-weight: 700;
-    color: #eab308;
-    line-height: 1;
-  }
-}
-
-.icon-restock {
-  width: 30rpx;
-  height: 28rpx;
-  background: #3b82f6;
-  border-radius: 3rpx;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 14rpx;
-    height: 6rpx;
-    background: #3b82f6;
-    border-radius: 3rpx 3rpx 0 0;
-    top: -4rpx;
-  }
-  &::after {
-    content: '+';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 24rpx;
-    color: #ffffff;
-    font-weight: 700;
-    line-height: 1;
-  }
-}
-
-.icon-invoice {
-  width: 28rpx;
-  height: 32rpx;
-  background: #8b5cf6;
-  border-radius: 3rpx;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 10rpx;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 16rpx;
-    height: 2rpx;
-    background: #ffffff;
-    box-shadow: 0 5rpx 0 #ffffff, 0 10rpx 0 #ffffff;
-  }
-}
-
-.icon-expire {
-  width: 30rpx;
-  height: 30rpx;
-  border: 3rpx solid #06b6d4;
-  border-radius: 50%;
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 3rpx;
-    height: 10rpx;
-    background: #06b6d4;
-    transform-origin: bottom center;
-    transform: translate(-50%, -100%);
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 3rpx;
-    height: 7rpx;
-    background: #06b6d4;
-    transform-origin: bottom center;
-    transform: translate(-50%, -100%) rotate(90deg);
-  }
-}
 
 /* ========== 商户运营 ========== */
 .quick-card {
-  background: #ffffff;
-  border-radius: 20rpx;
-  padding: 28rpx 20rpx 20rpx;
-  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  background: $bg-color-card;
+  border-radius: 18rpx;
+  padding: 20rpx 16rpx 16rpx;
+  margin-bottom: 12rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
 
   .card-title {
     padding: 0 8rpx;
@@ -867,30 +567,26 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 8rpx 0;
+  padding: 4rpx 0;
 
   &:active .quick-icon { transform: scale(0.92); }
 }
 
 .quick-icon {
-  width: 92rpx;
-  height: 92rpx;
-  border-radius: 22rpx;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 12rpx;
+  margin-bottom: 8rpx;
   transition: transform 0.15s;
-
-  &.primary { background: #ecfdf5; }
-  &.orange { background: #fff7ed; }
-  &.green { background: #f0fdf4; }
-  &.blue { background: #eff6ff; }
+  background: $primary-color-bg;
 }
 
 .quick-name {
-  font-size: 24rpx;
-  color: #333333;
+  font-size: 22rpx;
+  color: $text-color-primary;
 }
 
 .icon-apply {
@@ -905,7 +601,7 @@ onMounted(() => {
     left: 0;
     width: 100%;
     height: 100%;
-    border: 3rpx solid #10b981;
+    border: 3rpx solid $primary-color;
     border-radius: 6rpx;
   }
   &::after {
@@ -915,7 +611,7 @@ onMounted(() => {
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 28rpx;
-    color: #10b981;
+    color: $primary-color;
     font-weight: 700;
     line-height: 1;
   }
@@ -934,7 +630,7 @@ onMounted(() => {
     transform: translateY(-50%);
     width: 26rpx;
     height: 16rpx;
-    background: #f97316;
+    background: $primary-color;
     border-radius: 2rpx 0 0 2rpx;
   }
   &::after {
@@ -947,7 +643,7 @@ onMounted(() => {
     height: 0;
     border-top: 14rpx solid transparent;
     border-bottom: 14rpx solid transparent;
-    border-left: 14rpx solid #f97316;
+    border-left: 14rpx solid $primary-color;
   }
 }
 
@@ -964,7 +660,7 @@ onMounted(() => {
     transform: translateX(-50%);
     width: 18rpx;
     height: 18rpx;
-    background: #22c55e;
+    background: $primary-color;
     border-radius: 50%;
   }
   &::after {
@@ -975,7 +671,7 @@ onMounted(() => {
     transform: translateX(-50%);
     width: 30rpx;
     height: 14rpx;
-    background: #22c55e;
+    background: $primary-color;
     border-radius: 14rpx 14rpx 0 0;
   }
 }
@@ -995,7 +691,7 @@ onMounted(() => {
     height: 0;
     border-left: 20rpx solid transparent;
     border-right: 20rpx solid transparent;
-    border-bottom: 14rpx solid #3b82f6;
+    border-bottom: 14rpx solid $primary-color;
   }
   &::after {
     content: '';
@@ -1005,7 +701,7 @@ onMounted(() => {
     transform: translateX(-50%);
     width: 30rpx;
     height: 20rpx;
-    background: #3b82f6;
+    background: $primary-color;
     border-radius: 2rpx;
   }
 }

haha-admin-mp/src/pages/inventory/query.vue

@@ -109,6 +109,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getInventoryList, getInventoryStatistics } from '@/api/inventory';
 import { formatMoney as formatMoneyUtil } from '@/utils/common';
@@ -147,7 +148,7 @@ const loadStats = async () => {
     const stats = await getInventoryStatistics();
     inventoryStats.value = stats || inventoryStats.value;
   } catch (error) {
-    console.error('加载库存统计失败', error);
+    logger.warn('加载库存统计失败', error);
   }
 };
 
@@ -177,7 +178,7 @@ const loadInventory = async () => {
     
     hasMore.value = inventoryList.value.length < res.total;
   } catch (error) {
-    console.error('加载库存列表失败', error);
+    logger.warn('加载库存列表失败', error);
   } finally {
     loading.value = false;
   }
@@ -198,7 +199,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
 }
@@ -206,8 +207,8 @@ onMounted(() => {
 /* 统计区域 */
 .stats-section {
   padding: 12rpx 24rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .stats-grid {
@@ -217,8 +218,8 @@ onMounted(() => {
 }
 
 .stat-card {
-  background: #f8fafc;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-page;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 20rpx 16rpx;
   display: flex;
@@ -228,15 +229,15 @@ onMounted(() => {
   position: relative;
   
   &.warning {
-    border-top: 3rpx solid #f97316;
+    border-top: 3rpx solid $accent-color;
   }
   
   &.error {
-    border-top: 3rpx solid #ef4444;
+    border-top: 3rpx solid $error-color;
   }
   
   &.primary {
-    border-top: 3rpx solid #10b981;
+    border-top: 3rpx solid $primary-color;
   }
   
   .stat-value {
@@ -245,7 +246,7 @@ onMounted(() => {
     justify-content: center;
     font-size: 32rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 4rpx;
   }
   
@@ -254,7 +255,7 @@ onMounted(() => {
     align-items: center;
     justify-content: center;
     font-size: 22rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
   }
   
   .alert-dot {
@@ -268,11 +269,11 @@ onMounted(() => {
   }
   
   &.warning .alert-dot {
-    background: #f97316;
+    background: $accent-color;
   }
   
   &.error .alert-dot {
-    background: #ef4444;
+    background: $error-color;
   }
 }
 
@@ -284,7 +285,7 @@ onMounted(() => {
 /* 筛选栏 */
 .filter-section {
   padding: 12rpx 24rpx;
-  background: #ffffff;
+  background: $bg-color-card;
 }
 
 .filter-tabs {
@@ -293,11 +294,11 @@ onMounted(() => {
   
   .filter-tab {
     padding: 12rpx 24rpx;
-    background: #f8fafc;
-    border: 2rpx solid #e2e8f0;
+    background: $bg-color-page;
+    border: 2rpx solid $border-color;
     border-radius: 20rpx;
     font-size: 26rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     transition: all 0.15s;
     
     &.active {
@@ -305,18 +306,18 @@ onMounted(() => {
     }
     
     &.warning.active {
-      background: #f97316;
-      border-color: #f97316;
+      background: $accent-color;
+      border-color: $accent-color;
     }
     
     &.error.active {
-      background: #ef4444;
-      border-color: #ef4444;
+      background: $error-color;
+      border-color: $error-color;
     }
     
     &:not(.warning):not(.error).active {
-      background: #10b981;
-      border-color: #10b981;
+      background: $primary-color;
+      border-color: $primary-color;
     }
   }
 }
@@ -332,8 +333,8 @@ onMounted(() => {
 }
 
 .inventory-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   margin-bottom: 12rpx;
   overflow: hidden;
@@ -355,13 +356,13 @@ onMounted(() => {
       display: block;
       font-size: 28rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
       margin-bottom: 4rpx;
     }
     
     .location {
       font-size: 22rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
     }
   }
   
@@ -372,18 +373,18 @@ onMounted(() => {
     font-weight: 500;
     
     &.normal {
-      background: #ecfdf5;
-      color: #10b981;
+      background: $success-color-bg;
+      color: $primary-color;
     }
     
     &.low {
-      background: #fff7ed;
-      color: #f97316;
+      background: $accent-color-bg;
+      color: $accent-color;
     }
     
     &.out {
-      background: #fef2f2;
-      color: #ef4444;
+      background: $error-color-bg;
+      color: $error-color;
     }
   }
 }
@@ -393,7 +394,7 @@ onMounted(() => {
   
   .progress-bar {
     height: 10rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 5rpx;
     overflow: hidden;
     margin-bottom: 10rpx;
@@ -402,9 +403,9 @@ onMounted(() => {
       height: 100%;
       border-radius: 5rpx;
       
-      &.normal { background: #10b981; }
-      &.low { background: #f97316; }
-      &.out { background: #ef4444; }
+      &.normal { background: $primary-color; }
+      &.low { background: $accent-color; }
+      &.out { background: $error-color; }
     }
   }
   
@@ -414,13 +415,13 @@ onMounted(() => {
     
     .current {
       font-size: 26rpx;
-      color: #1e293b;
+      color: $text-color-primary;
       font-weight: 500;
     }
     
     .range {
       font-size: 22rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
     }
   }
 }
@@ -432,14 +433,14 @@ onMounted(() => {
   justify-content: center;
   gap: 12rpx;
   padding: 32rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   font-size: 24rpx;
   
   .loading-spinner {
     width: 32rpx;
     height: 32rpx;
-    border: 3rpx solid #e2e8f0;
-    border-top-color: #10b981;
+    border: 3rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -453,7 +454,7 @@ onMounted(() => {
   text-align: center;
   padding: 32rpx;
   font-size: 24rpx;
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 
 .empty-state {
@@ -465,7 +466,7 @@ onMounted(() => {
   .empty-icon {
     width: 120rpx;
     height: 120rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 24rpx;
     margin-bottom: 20rpx;
     display: flex;
@@ -482,7 +483,7 @@ onMounted(() => {
       &::before, &::after, & {
         content: '';
         width: 16rpx;
-        background: #cbd5e1;
+        background: $text-color-placeholder;
         border-radius: 4rpx;
       }
       
@@ -494,7 +495,7 @@ onMounted(() => {
   
   .empty-text {
     font-size: 28rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 </style>

haha-admin-mp/src/pages/inventory/warning.vue

@@ -106,6 +106,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getInventoryList, getInventoryStatistics } from '@/api/inventory';
 
@@ -133,7 +134,7 @@ const loadStats = async () => {
       stats.value.zeroStockCount = res.zeroStockCount || 0;
     }
   } catch (error) {
-    console.error('加载库存统计失败', error);
+    logger.warn('加载库存统计失败', error);
   }
 };
 
@@ -165,7 +166,7 @@ const loadWarnings = async () => {
 
     hasMore.value = warningList.value.length < (res.total || 0);
   } catch (error) {
-    console.error('加载预警列表失败', error);
+    logger.warn('加载预警列表失败', error);
   } finally {
     loading.value = false;
   }
@@ -186,7 +187,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
 }
@@ -194,8 +195,8 @@ onMounted(() => {
 /* 预警统计 */
 .alert-section {
   padding: 16rpx 24rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .alert-grid {
@@ -209,16 +210,16 @@ onMounted(() => {
   align-items: center;
   padding: 24rpx 20rpx;
   border-radius: 16rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 
   &.warning {
-    background: #fff7ed;
-    border-color: #f97316;
+    background: $accent-color-bg;
+    border-color: $accent-color;
   }
 
   &.error {
-    background: #fef2f2;
-    border-color: #ef4444;
+    background: $error-color-bg;
+    border-color: $error-color;
   }
 }
 
@@ -226,7 +227,7 @@ onMounted(() => {
   width: 64rpx;
   height: 64rpx;
   border-radius: 16rpx;
-  background: #ffffff;
+  background: $bg-color-card;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -236,7 +237,7 @@ onMounted(() => {
   .icon-alert {
     width: 28rpx;
     height: 28rpx;
-    border: 3rpx solid #f97316;
+    border: 3rpx solid $accent-color;
     border-radius: 50%;
     position: relative;
 
@@ -248,7 +249,7 @@ onMounted(() => {
       transform: translate(-50%, -50%);
       width: 3rpx;
       height: 12rpx;
-      background: #f97316;
+      background: $accent-color;
     }
 
     &::after {
@@ -259,7 +260,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 3rpx;
       height: 3rpx;
-      background: #f97316;
+      background: $accent-color;
       border-radius: 50%;
     }
   }
@@ -267,7 +268,7 @@ onMounted(() => {
   .icon-out {
     width: 28rpx;
     height: 28rpx;
-    border: 3rpx solid #ef4444;
+    border: 3rpx solid $error-color;
     border-radius: 50%;
     position: relative;
 
@@ -279,7 +280,7 @@ onMounted(() => {
       transform: translate(-50%, -50%) rotate(45deg);
       width: 16rpx;
       height: 3rpx;
-      background: #ef4444;
+      background: $error-color;
     }
 
     &::after {
@@ -290,7 +291,7 @@ onMounted(() => {
       transform: translate(-50%, -50%) rotate(-45deg);
       width: 16rpx;
       height: 3rpx;
-      background: #ef4444;
+      background: $error-color;
     }
   }
 }
@@ -300,20 +301,20 @@ onMounted(() => {
     display: block;
     font-size: 40rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 4rpx;
   }
 
   .alert-label {
     font-size: 24rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
   }
 }
 
 /* 标签切换 */
 .tab-section {
   padding: 12rpx 24rpx;
-  background: #ffffff;
+  background: $bg-color-card;
 }
 
 .tab-list {
@@ -324,17 +325,17 @@ onMounted(() => {
     flex: 1;
     padding: 14rpx 0;
     text-align: center;
-    background: #f8fafc;
-    border: 2rpx solid #e2e8f0;
+    background: $bg-color-page;
+    border: 2rpx solid $border-color;
     border-radius: 20rpx;
     font-size: 26rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     transition: all 0.15s;
 
     &.active {
-      background: #ecfdf5;
-      border-color: #10b981;
-      color: #10b981;
+      background: $success-color-bg;
+      border-color: $primary-color;
+      color: $primary-color;
       font-weight: 500;
     }
   }
@@ -351,8 +352,8 @@ onMounted(() => {
 }
 
 .warning-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   margin-bottom: 12rpx;
   overflow: hidden;
@@ -377,7 +378,7 @@ onMounted(() => {
       display: block;
       font-size: 28rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
       margin-bottom: 4rpx;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -386,7 +387,7 @@ onMounted(() => {
 
     .location {
       font-size: 22rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
     }
   }
 }
@@ -400,13 +401,13 @@ onMounted(() => {
   flex-shrink: 0;
 
   &.low {
-    background: #fff7ed;
-    color: #f97316;
+    background: $accent-color-bg;
+    color: $accent-color;
   }
 
   &.out {
-    background: #fef2f2;
-    color: #ef4444;
+    background: $error-color-bg;
+    color: $error-color;
   }
 }
 
@@ -415,7 +416,7 @@ onMounted(() => {
 
   .progress-bar {
     height: 10rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 5rpx;
     overflow: hidden;
     margin-bottom: 10rpx;
@@ -424,8 +425,8 @@ onMounted(() => {
       height: 100%;
       border-radius: 5rpx;
 
-      &.low { background: #f97316; }
-      &.out { background: #ef4444; }
+      &.low { background: $accent-color; }
+      &.out { background: $error-color; }
     }
   }
 
@@ -435,7 +436,7 @@ onMounted(() => {
 
     .detail-text {
       font-size: 22rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
     }
   }
 }
@@ -447,14 +448,14 @@ onMounted(() => {
   justify-content: center;
   gap: 12rpx;
   padding: 32rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   font-size: 24rpx;
 
   .loading-spinner {
     width: 32rpx;
     height: 32rpx;
-    border: 3rpx solid #e2e8f0;
-    border-top-color: #10b981;
+    border: 3rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -468,7 +469,7 @@ onMounted(() => {
   text-align: center;
   padding: 32rpx;
   font-size: 24rpx;
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 
 .empty-state {
@@ -480,7 +481,7 @@ onMounted(() => {
   .empty-icon {
     width: 120rpx;
     height: 120rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 24rpx;
     margin-bottom: 20rpx;
     display: flex;
@@ -490,7 +491,7 @@ onMounted(() => {
     .empty-icon-inner {
       width: 48rpx;
       height: 48rpx;
-      border: 4rpx solid #cbd5e1;
+      border: 4rpx solid $text-color-placeholder;
       border-radius: 50%;
       position: relative;
 
@@ -502,7 +503,7 @@ onMounted(() => {
         transform: translate(-50%, -50%);
         width: 20rpx;
         height: 20rpx;
-        background: #cbd5e1;
+        background: $text-color-placeholder;
         border-radius: 50%;
       }
     }
@@ -510,7 +511,7 @@ onMounted(() => {
 
   .empty-text {
     font-size: 28rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 </style>

haha-admin-mp/src/pages/invite/index.vue

@@ -100,6 +100,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import {
   getInviteCode,
@@ -138,7 +139,7 @@ const loadActivityInfo = async () => {
   try {
     activityInfo.value = await getActivityInfo();
   } catch (error) {
-    console.error('加载活动信息失败', error);
+    logger.warn('加载活动信息失败', error);
   }
 };
 
@@ -146,7 +147,7 @@ const loadStatistics = async () => {
   try {
     myStats.value = await getMyInviteStatistics();
   } catch (error) {
-    console.error('加载统计数据失败', error);
+    logger.warn('加载统计数据失败', error);
   }
 };
 
@@ -154,7 +155,7 @@ const loadInviteCode = async () => {
   try {
     inviteCodeInfo.value = await getInviteCode();
   } catch (error) {
-    console.error('获取邀请码失败', error);
+    logger.warn('获取邀请码失败', error);
   }
 };
 
@@ -207,7 +208,7 @@ const handleShare = async () => {
       },
       fail: (err: any) => {
         // 如果分享失败，尝试使用小程序分享
-        console.log('share failed, try fallback', err);
+        logger.log('share failed, try fallback', err);
         showShareMenu();
       }
     });
@@ -217,7 +218,7 @@ const handleShare = async () => {
     showShareMenu();
     // #endif
   } catch (error) {
-    console.error('分享失败', error);
+    logger.warn('分享失败', error);
     uni.showToast({
       title: '分享失败，请重试',
       icon: 'none'
@@ -277,7 +278,7 @@ const handleGeneratePoster = async () => {
       icon: 'success'
     });
   } catch (error) {
-    console.error('生成海报失败', error);
+    logger.warn('生成海报失败', error);
     uni.showToast({
       title: '生成海报失败',
       icon: 'none'
@@ -297,7 +298,7 @@ const goToRecords = () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .content {
@@ -306,11 +307,11 @@ const goToRecords = () => {
 }
 
 .activity-rules {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 20rpx;
   padding: 32rpx;
   margin-bottom: 24rpx;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .rules-header {
@@ -335,7 +336,7 @@ const goToRecords = () => {
     transform: translate(-50%, -60%);
     width: 24rpx;
     height: 16rpx;
-    border: 3rpx solid #ffffff;
+    border: 3rpx solid $bg-color-card;
     border-radius: 4rpx 4rpx 0 0;
   }
 
@@ -347,14 +348,14 @@ const goToRecords = () => {
     transform: translateX(-50%);
     width: 4rpx;
     height: 12rpx;
-    background: #ffffff;
+    background: $bg-color-card;
   }
 }
 
 .rules-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .rules-content {
@@ -381,7 +382,7 @@ const goToRecords = () => {
   justify-content: center;
   font-size: 22rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   margin-right: 16rpx;
   flex-shrink: 0;
 }
@@ -419,7 +420,7 @@ const goToRecords = () => {
 .highlight-text {
   font-size: 26rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .time-icon {
@@ -450,13 +451,13 @@ const goToRecords = () => {
 }
 
 .invite-stats {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 32rpx;
   margin-bottom: 24rpx;
   display: flex;
   align-items: center;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .stat-card {
@@ -469,35 +470,35 @@ const goToRecords = () => {
 .stat-num {
   font-size: 44rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 8rpx;
 
   &.success {
-    color: #10b981;
+    color: $primary-color;
   }
 
   &.primary {
-    color: #3b82f6;
+    color: $info-color;
   }
 }
 
 .stat-label {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .stat-divider {
   width: 1rpx;
   height: 60rpx;
-  background: #e2e8f0;
+  background: $border-color;
 }
 
 .invite-code-section {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   padding: 28rpx;
   margin-bottom: 24rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .code-header {
@@ -507,14 +508,14 @@ const goToRecords = () => {
 .code-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
   display: block;
   margin-bottom: 4rpx;
 }
 
 .code-tip {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .code-display {
@@ -527,21 +528,21 @@ const goToRecords = () => {
   flex: 1;
   font-size: 36rpx;
   font-weight: 700;
-  color: #3b82f6;
+  color: $info-color;
   letter-spacing: 4rpx;
   padding: 16rpx 24rpx;
-  background: #eff6ff;
+  background: $info-color-bg;
   border-radius: 12rpx;
   text-align: center;
 }
 
 .copy-btn {
   padding: 16rpx 32rpx;
-  background: #3b82f6;
+  background: $info-color;
   border-radius: 12rpx;
   font-size: 26rpx;
   font-weight: 500;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
 
   &:active {
@@ -556,20 +557,20 @@ const goToRecords = () => {
 .btn-primary {
   width: 100%;
   height: 96rpx;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 48rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
   margin-bottom: 12rpx;
 
   &[disabled] {
-    background: #cbd5e1;
-    color: #94a3b8;
+    background: $text-color-placeholder;
+    color: $text-color-muted;
   }
 
   &:active:not([disabled]) {
@@ -584,30 +585,30 @@ const goToRecords = () => {
 
 .desc-text {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .btn-secondary {
   width: 100%;
   height: 96rpx;
-  background: #ffffff;
-  border: 2rpx solid #3b82f6;
+  background: $bg-color-card;
+  border: 2rpx solid $info-color;
   border-radius: 48rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30rpx;
   font-weight: 500;
-  color: #3b82f6;
+  color: $info-color;
   margin-bottom: 20rpx;
 
   &[disabled] {
-    border-color: #cbd5e1;
-    color: #94a3b8;
+    border-color: $text-color-placeholder;
+    color: $text-color-muted;
   }
 
   &:active:not([disabled]) {
-    background: #eff6ff;
+    background: $info-color-bg;
   }
 }
 
@@ -620,10 +621,10 @@ const goToRecords = () => {
   align-items: center;
   justify-content: center;
   font-size: 28rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 
   &:active {
-    color: #475569;
+    color: $text-color-secondary;
   }
 }
 
@@ -633,7 +634,7 @@ const goToRecords = () => {
   margin-right: 12rpx;
 
   &.share {
-    border: 3rpx solid #ffffff;
+    border: 3rpx solid $bg-color-card;
     border-radius: 50%;
     position: relative;
 
@@ -644,7 +645,7 @@ const goToRecords = () => {
       right: -8rpx;
       width: 14rpx;
       height: 14rpx;
-      background: #ffffff;
+      background: $bg-color-card;
       border-radius: 50%;
     }
 
@@ -655,14 +656,14 @@ const goToRecords = () => {
       right: -4rpx;
       width: 18rpx;
       height: 10rpx;
-      border-left: 3rpx solid #ffffff;
-      border-bottom: 3rpx solid #ffffff;
+      border-left: 3rpx solid $bg-color-card;
+      border-bottom: 3rpx solid $bg-color-card;
       transform: rotate(-45deg);
     }
   }
 
   &.poster {
-    border: 3rpx solid #3b82f6;
+    border: 3rpx solid $info-color;
     border-radius: 6rpx;
     position: relative;
 
@@ -674,7 +675,7 @@ const goToRecords = () => {
       transform: translate(-50%, -50%);
       width: 12rpx;
       height: 12rpx;
-      background: #3b82f6;
+      background: $info-color;
       border-radius: 2rpx;
     }
 
@@ -686,7 +687,7 @@ const goToRecords = () => {
       transform: translateX(-50%);
       width: 3rpx;
       height: 6rpx;
-      background: #3b82f6;
+      background: $info-color;
     }
   }
 }
@@ -694,20 +695,20 @@ const goToRecords = () => {
 .arrow-right {
   width: 12rpx;
   height: 12rpx;
-  border-top: 3rpx solid #94a3b8;
-  border-right: 3rpx solid #94a3b8;
+  border-top: 3rpx solid $text-color-muted;
+  border-right: 3rpx solid $text-color-muted;
   transform: rotate(45deg);
   margin-left: 8rpx;
 }
 
 .reward-info {
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  background: linear-gradient(135deg, $primary-color-bg 0%, $primary-color-light 100%);
   border-radius: 20rpx;
   padding: 32rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: 1rpx solid #fcd34d;
+  border: 1rpx solid $primary-color-light;
 }
 
 .reward-header {
@@ -719,7 +720,7 @@ const goToRecords = () => {
 .reward-icon {
   width: 40rpx;
   height: 40rpx;
-  background: #f59e0b;
+  background: $warning-color;
   border-radius: 50%;
   margin-right: 12rpx;
   position: relative;
@@ -732,14 +733,14 @@ const goToRecords = () => {
     transform: translate(-50%, -50%);
     font-size: 22rpx;
     font-weight: 700;
-    color: #ffffff;
+    color: $bg-color-card;
   }
 }
 
 .reward-title {
   font-size: 26rpx;
   font-weight: 500;
-  color: #92400e;
+  color: $primary-color-dark;
 }
 
 .reward-amount {
@@ -751,18 +752,18 @@ const goToRecords = () => {
 .amount-symbol {
   font-size: 32rpx;
   font-weight: 600;
-  color: #d97706;
+  color: $primary-color-dark;
   margin-right: 4rpx;
 }
 
 .amount-value {
   font-size: 56rpx;
   font-weight: 700;
-  color: #d97706;
+  color: $primary-color-dark;
 }
 
 .reward-desc {
   font-size: 24rpx;
-  color: #a16207;
+  color: $primary-color-dark;
 }
 </style>

haha-admin-mp/src/pages/invite/records.vue

@@ -121,6 +121,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getMyInviteRecords, getMyInviteStatistics, InviteStatus, InviteStatusLabel } from '@/api/invite';
 import type { InviteRecord, InviteStatistics, InviteQueryParams } from '@/api/invite';
@@ -144,7 +145,7 @@ const loadStatistics = async () => {
   try {
     statistics.value = await getMyInviteStatistics();
   } catch (error) {
-    console.error('加载统计数据失败', error);
+    logger.warn('加载统计数据失败', error);
   }
 };
 
@@ -174,7 +175,7 @@ const loadData = async (reset = false) => {
     total.value = result.total;
     hasMore.value = recordList.value.length < result.total;
   } catch (error) {
-    console.error('加载邀请记录失败', error);
+    logger.warn('加载邀请记录失败', error);
   } finally {
     isLoading.value = false;
     isRefreshing.value = false;
@@ -262,7 +263,7 @@ const goToInvite = () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
 }
@@ -278,7 +279,7 @@ const goToInvite = () => {
 .invite-icon {
   width: 36rpx;
   height: 36rpx;
-  border: 3rpx solid #3b82f6;
+  border: 3rpx solid $info-color;
   border-radius: 50%;
   position: relative;
 
@@ -289,7 +290,7 @@ const goToInvite = () => {
     right: -6rpx;
     width: 14rpx;
     height: 14rpx;
-    background: #3b82f6;
+    background: $info-color;
     border-radius: 50%;
   }
 
@@ -300,8 +301,8 @@ const goToInvite = () => {
     right: -2rpx;
     width: 16rpx;
     height: 10rpx;
-    border-left: 3rpx solid #3b82f6;
-    border-bottom: 3rpx solid #3b82f6;
+    border-left: 3rpx solid $info-color;
+    border-bottom: 3rpx solid $info-color;
     transform: rotate(-45deg);
   }
 }
@@ -316,7 +317,7 @@ const goToInvite = () => {
 .stats-header {
   display: flex;
   padding: 24rpx;
-  background: #ffffff;
+  background: $bg-color-card;
   gap: 20rpx;
 }
 
@@ -325,10 +326,10 @@ const goToInvite = () => {
   align-items: center;
   justify-content: center;
   padding: 16rpx 24rpx;
-  background: #fef3c7;
+  background: $primary-color-bg;
   margin: 0 24rpx 16rpx;
   border-radius: 10rpx;
-  border: 1rpx solid #fcd34d;
+  border: 1rpx solid $primary-color-light;
 }
 
 .notice-icon {
@@ -338,42 +339,42 @@ const goToInvite = () => {
 
 .notice-text {
   font-size: 24rpx;
-  color: #92400e;
+  color: $primary-color-dark;
 }
 
 .stat-card {
   flex: 1;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 16rpx;
   padding: 24rpx 16rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 
   &.success {
-    background: #ecfdf5;
-    border-color: #a7f3d0;
+    background: $success-color-bg;
+    border-color: $success-color-bg;
 
     .stat-num {
-      color: #059669;
+      color: $primary-color-dark;
     }
 
     .stat-label {
-      color: #047857;
+      color: $success-color;
     }
   }
 
   &.primary {
-    background: #eff6ff;
-    border-color: #bfdbfe;
+    background: $info-color-bg;
+    border-color: $info-color-bg;
 
     .stat-num {
-      color: #2563eb;
+      color: $info-color;
     }
 
     .stat-label {
-      color: #1d4ed8;
+      color: $info-color;
     }
   }
 }
@@ -381,13 +382,13 @@ const goToInvite = () => {
 .stat-num {
   font-size: 40rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 8rpx;
 }
 
 .stat-label {
   font-size: 22rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
 }
 
 .list-section {
@@ -402,19 +403,19 @@ const goToInvite = () => {
   justify-content: space-between;
   align-items: center;
   padding: 20rpx 24rpx;
-  background: #ffffff;
-  border-top: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-top: 1rpx solid $border-color;
 }
 
 .list-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .list-count {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 .records-list {
@@ -430,11 +431,11 @@ const goToInvite = () => {
 .record-item {
   display: flex;
   align-items: flex-start;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
-  border: 1rpx solid #e2e8f0;
+  border: 1rpx solid $border-color;
 }
 
 .record-left {
@@ -444,7 +445,7 @@ const goToInvite = () => {
 .avatar-placeholder {
   width: 80rpx;
   height: 80rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -454,7 +455,7 @@ const goToInvite = () => {
 .avatar-text {
   font-size: 32rpx;
   font-weight: 600;
-  color: #ffffff;
+  color: $bg-color-card;
 }
 
 .record-content {
@@ -472,7 +473,7 @@ const goToInvite = () => {
 .invitee-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1e293b;
+  color: $text-color-primary;
 }
 
 .status-tag {
@@ -484,23 +485,23 @@ const goToInvite = () => {
   margin-left: 12rpx;
 
   &.pending {
-    background: #f1f5f9;
-    color: #64748b;
+    background: $bg-color-secondary;
+    color: $text-color-tertiary;
   }
 
   &.activated {
-    background: #ecfdf5;
-    color: #059669;
+    background: $success-color-bg;
+    color: $primary-color-dark;
   }
 
   &.rewarded {
-    background: #eff6ff;
-    color: #2563eb;
+    background: $info-color-bg;
+    color: $info-color;
   }
 
   &.failed {
-    background: #fef2f2;
-    color: #dc2626;
+    background: $error-color-bg;
+    color: $error-color;
   }
 }
 
@@ -525,7 +526,7 @@ const goToInvite = () => {
   border-radius: 50%;
 
   &.phone {
-    background: #e0f2fe;
+    background: $info-color-bg;
     position: relative;
 
     &::before {
@@ -536,7 +537,7 @@ const goToInvite = () => {
       transform: translate(-50%, -50%);
       width: 10rpx;
       height: 16rpx;
-      border: 2rpx solid #0ea5e9;
+      border: 2rpx solid $info-color;
       border-radius: 3rpx;
     }
 
@@ -548,13 +549,13 @@ const goToInvite = () => {
       transform: translateX(-50%);
       width: 4rpx;
       height: 2rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 1rpx;
     }
   }
 
   &.time {
-    background: #faf5ff;
+    background: $primary-color-bg;
     position: relative;
 
     &::before {
@@ -565,7 +566,7 @@ const goToInvite = () => {
       transform: translate(-50%, -50%);
       width: 11rpx;
       height: 11rpx;
-      border: 2rpx solid #a855f7;
+      border: 2rpx solid $primary-color;
       border-radius: 50%;
     }
 
@@ -577,12 +578,12 @@ const goToInvite = () => {
       transform: translateX(-50%);
       width: 2rpx;
       height: 5rpx;
-      background: #a855f7;
+      background: $primary-color;
     }
   }
 
   &.activate {
-    background: #ecfdf5;
+    background: $success-color-bg;
     position: relative;
 
     &::before {
@@ -593,7 +594,7 @@ const goToInvite = () => {
       transform: translate(-50%, -50%);
       width: 12rpx;
       height: 8rpx;
-      border: 2rpx solid #10b981;
+      border: 2rpx solid $primary-color;
       border-radius: 2rpx;
     }
 
@@ -605,13 +606,13 @@ const goToInvite = () => {
       transform: translate(-50%, -50%);
       width: 4rpx;
       height: 4rpx;
-      background: #10b981;
+      background: $primary-color;
       border-radius: 50%;
     }
   }
 
   &.reward {
-    background: #fffbeb;
+    background: $warning-color-bg;
     position: relative;
 
     &::before {
@@ -622,14 +623,14 @@ const goToInvite = () => {
       transform: translate(-50%, -50%);
       font-size: 14rpx;
       font-weight: 700;
-      color: #f59e0b;
+      color: $warning-color;
     }
   }
 }
 
 .info-text {
   font-size: 24rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -638,38 +639,38 @@ const goToInvite = () => {
 
 .record-reward {
   padding-top: 12rpx;
-  border-top: 1rpx solid #f1f5f9;
+  border-top: 1rpx solid $bg-color-secondary;
 }
 
 .reward-badge {
   display: inline-flex;
   align-items: center;
   padding: 8rpx 16rpx;
-  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  background: linear-gradient(135deg, $primary-color-bg 0%, $primary-color-light 100%);
   border-radius: 8rpx;
   gap: 8rpx;
 
   &.type-inviter {
-    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+    background: linear-gradient(135deg, $info-color-bg 0%, $info-color-bg 100%);
 
     .reward-amount {
-      color: #1d4ed8;
+      color: $info-color;
     }
 
     .reward-name {
-      color: #1e40af;
+      color: $text-color-primary;
     }
   }
 
   &.type-invitee {
-    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+    background: linear-gradient(135deg, $success-color-bg 0%, $success-color-bg 100%);
 
     .reward-amount {
-      color: #059669;
+      color: $primary-color-dark;
     }
 
     .reward-name {
-      color: #047857;
+      color: $success-color;
     }
   }
 }
@@ -680,18 +681,18 @@ const goToInvite = () => {
   padding: 2rpx 10rpx;
   background: rgba(255, 255, 255, 0.6);
   border-radius: 6rpx;
-  color: #92400e;
+  color: $primary-color-dark;
 }
 
 .reward-amount {
   font-size: 26rpx;
   font-weight: 700;
-  color: #d97706;
+  color: $primary-color-dark;
 }
 
 .reward-name {
   font-size: 22rpx;
-  color: #a16207;
+  color: $primary-color-dark;
 }
 
 .empty-state {
@@ -704,7 +705,7 @@ const goToInvite = () => {
 .empty-icon {
   width: 160rpx;
   height: 160rpx;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
   border-radius: 50%;
   margin-bottom: 32rpx;
   position: relative;
@@ -717,7 +718,7 @@ const goToInvite = () => {
     transform: translate(-50%, -60%);
     width: 56rpx;
     height: 36rpx;
-    border: 4rpx solid #cbd5e1;
+    border: 4rpx solid $text-color-placeholder;
     border-radius: 8rpx 8rpx 0 0;
   }
 
@@ -729,29 +730,29 @@ const goToInvite = () => {
     transform: translateX(-50%);
     width: 6rpx;
     height: 18rpx;
-    background: #cbd5e1;
+    background: $text-color-placeholder;
   }
 }
 
 .empty-text {
   font-size: 30rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   margin-bottom: 12rpx;
 }
 
 .empty-tip {
   font-size: 26rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   margin-bottom: 32rpx;
 }
 
 .empty-btn {
   padding: 20rpx 48rpx;
-  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  background: linear-gradient(135deg, $primary-color 0%, $primary-color-dark 100%);
   border-radius: 44rpx;
   font-size: 28rpx;
   font-weight: 500;
-  color: #ffffff;
+  color: $bg-color-card;
   border: none;
 
   &:active {
@@ -769,8 +770,8 @@ const goToInvite = () => {
 .loading-spinner {
   width: 32rpx;
   height: 32rpx;
-  border: 3rpx solid #e2e8f0;
-  border-top-color: #10b981;
+  border: 3rpx solid $border-color;
+  border-top-color: $primary-color;
   border-radius: 50%;
   animation: rotate 0.8s linear infinite;
 
@@ -782,7 +783,7 @@ const goToInvite = () => {
 
 .loading-text {
   font-size: 24rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   margin-left: 12rpx;
 }
 
@@ -792,7 +793,7 @@ const goToInvite = () => {
 
   text {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 </style>

haha-admin-mp/src/pages/login/login.vue

@@ -232,7 +232,7 @@ const handleBindWechat = async () => {
 <style lang="scss" scoped>
 .login-page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
   padding-top: constant(safe-area-inset-top);
@@ -255,7 +255,7 @@ const handleBindWechat = async () => {
   .logo {
     width: 120rpx;
     height: 120rpx;
-    background: #10b981;
+    background: $primary-color;
     border-radius: 32rpx;
     margin: 0 auto 28rpx;
     display: flex;
@@ -272,7 +272,7 @@ const handleBindWechat = async () => {
         position: absolute;
         width: 24rpx;
         height: 40rpx;
-        background: #ffffff;
+        background: $bg-color-card;
         border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
         left: 0;
         top: 4rpx;
@@ -291,7 +291,7 @@ const handleBindWechat = async () => {
     display: block;
     font-size: 44rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 12rpx;
     letter-spacing: 2rpx;
   }
@@ -299,14 +299,14 @@ const handleBindWechat = async () => {
   .brand-subtitle {
     display: block;
     font-size: 28rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
   }
 }
 
 /* 登录卡片 */
 .login-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 24rpx;
   padding: 40rpx 32rpx;
 }
@@ -317,7 +317,7 @@ const handleBindWechat = async () => {
   .form-label {
     display: block;
     font-size: 26rpx;
-    color: #475569;
+    color: $text-color-secondary;
     margin-bottom: 12rpx;
     font-weight: 500;
   }
@@ -326,16 +326,16 @@ const handleBindWechat = async () => {
 .input-wrapper {
   display: flex;
   align-items: center;
-  background: #f8fafc;
-  border: 2rpx solid #e2e8f0;
+  background: $bg-color-page;
+  border: 2rpx solid $border-color;
   border-radius: 16rpx;
   padding: 0 20rpx;
   transition: all 0.2s;
   
   &:focus-within {
-    border-color: #10b981;
-    background: #ffffff;
-    box-shadow: 0 0 0 4rpx rgba(16, 185, 129, 0.1);
+    border-color: $primary-color;
+    background: $bg-color-card;
+    box-shadow: 0 0 0 4rpx rgba(255, 193, 7, 0.1);
   }
   
   .input-icon {
@@ -355,7 +355,7 @@ const handleBindWechat = async () => {
         transform: translateX(-50%);
         width: 16rpx;
         height: 16rpx;
-        background: #94a3b8;
+        background: $text-color-muted;
         border-radius: 50%;
       }
       
@@ -367,7 +367,7 @@ const handleBindWechat = async () => {
         transform: translateX(-50%);
         width: 26rpx;
         height: 14rpx;
-        background: #94a3b8;
+        background: $text-color-muted;
         border-radius: 14rpx 14rpx 0 0;
       }
     }
@@ -383,7 +383,7 @@ const handleBindWechat = async () => {
         transform: translateX(-50%);
         width: 18rpx;
         height: 14rpx;
-        border: 3rpx solid #94a3b8;
+        border: 3rpx solid $text-color-muted;
         border-bottom: none;
         border-radius: 16rpx 16rpx 0 0;
       }
@@ -396,7 +396,7 @@ const handleBindWechat = async () => {
         transform: translateX(-50%);
         width: 22rpx;
         height: 18rpx;
-        background: #94a3b8;
+        background: $text-color-muted;
         border-radius: 4rpx;
       }
     }
@@ -406,7 +406,7 @@ const handleBindWechat = async () => {
     flex: 1;
     height: 100rpx;
     font-size: 30rpx;
-    color: #1e293b;
+    color: $text-color-primary;
   }
   
   .input-action {
@@ -417,7 +417,7 @@ const handleBindWechat = async () => {
     .eye-icon {
       width: 40rpx;
       height: 28rpx;
-      border: 3rpx solid #94a3b8;
+      border: 3rpx solid $text-color-muted;
       border-radius: 50%;
       position: relative;
       
@@ -429,30 +429,30 @@ const handleBindWechat = async () => {
         transform: translate(-50%, -50%);
         width: 12rpx;
         height: 12rpx;
-        background: #94a3b8;
+        background: $text-color-muted;
         border-radius: 50%;
       }
       
       &.active::before {
-        background: #10b981;
+        background: $primary-color;
       }
       
       &.active {
-        border-color: #10b981;
+        border-color: $primary-color;
       }
     }
   }
 }
 
 .input-placeholder {
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 
 /* 登录按钮 */
 .login-btn {
   width: 100%;
   height: 100rpx;
-  background: #10b981;
+  background: $primary-color;
   color: #fff;
   font-size: 32rpx;
   font-weight: 600;
@@ -469,7 +469,7 @@ const handleBindWechat = async () => {
   }
   
   &:active {
-    background: #059669;
+    background: $primary-color-dark;
     transform: scale(0.98);
   }
   
@@ -484,13 +484,13 @@ const handleBindWechat = async () => {
   justify-content: center;
   margin-top: 28rpx;
   padding: 20rpx;
-  background: #ecfdf5;
+  background: $success-color-bg;
   border-radius: 12rpx;
   
   .tips-icon {
     width: 32rpx;
     height: 32rpx;
-    background: #10b981;
+    background: $primary-color;
     border-radius: 50%;
     margin-right: 12rpx;
     position: relative;
@@ -522,13 +522,13 @@ const handleBindWechat = async () => {
   
   .tips-label {
     font-size: 24rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     margin-right: 12rpx;
   }
   
   .tips-value {
     font-size: 24rpx;
-    color: #10b981;
+    color: $primary-color;
     font-weight: 600;
   }
 }
@@ -543,13 +543,13 @@ const handleBindWechat = async () => {
   .divider-line {
     flex: 1;
     height: 1rpx;
-    background: #e2e8f0;
+    background: $border-color;
   }
   
   .divider-text {
     padding: 0 24rpx;
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -557,11 +557,11 @@ const handleBindWechat = async () => {
 .wechat-btn {
   width: 100%;
   height: 100rpx;
-  background: #ffffff;
-  color: #1e293b;
+  background: $bg-color-card;
+  color: $text-color-primary;
   font-size: 30rpx;
   font-weight: 500;
-  border: 2rpx solid #e2e8f0;
+  border: 2rpx solid $border-color;
   border-radius: 16rpx;
   display: flex;
   align-items: center;
@@ -573,8 +573,8 @@ const handleBindWechat = async () => {
   }
   
   &:active {
-    background: #f8fafc;
-    border-color: #10b981;
+    background: $bg-color-page;
+    border-color: $primary-color;
   }
   
   &[disabled] {
@@ -625,7 +625,7 @@ const handleBindWechat = async () => {
   text-align: center;
   margin-top: 20rpx;
   font-size: 24rpx;
-  color: #10b981;
+  color: $primary-color;
 }
 
 /* 绑定码区域 */
@@ -634,37 +634,37 @@ const handleBindWechat = async () => {
   
   .divider-line {
     height: 1rpx;
-    background: #e2e8f0;
+    background: $border-color;
     margin-bottom: 20rpx;
   }
   
   .bind-hint {
     display: block;
     font-size: 24rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     margin-bottom: 16rpx;
     line-height: 1.5;
   }
   
   .bind-input-wrapper {
-    background: #f8fafc;
-    border: 2rpx solid #e2e8f0;
+    background: $bg-color-page;
+    border: 2rpx solid $border-color;
     border-radius: 16rpx;
     padding: 0 20rpx;
     margin-bottom: 16rpx;
     transition: all 0.2s;
     
     &:focus-within {
-      border-color: #10b981;
-      background: #ffffff;
-      box-shadow: 0 0 0 4rpx rgba(16, 185, 129, 0.1);
+      border-color: $primary-color;
+      background: $bg-color-card;
+      box-shadow: 0 0 0 4rpx rgba(255, 193, 7, 0.1);
     }
     
     .bind-input {
       width: 100%;
       height: 100rpx;
       font-size: 30rpx;
-      color: #1e293b;
+      color: $text-color-primary;
       letter-spacing: 4rpx;
     }
   }
@@ -672,7 +672,7 @@ const handleBindWechat = async () => {
   .bind-btn {
     width: 100%;
     height: 90rpx;
-    background: #10b981;
+    background: $primary-color;
     color: #fff;
     font-size: 30rpx;
     font-weight: 600;
@@ -687,7 +687,7 @@ const handleBindWechat = async () => {
     }
     
     &:active {
-      background: #059669;
+      background: $primary-color-dark;
     }
     
     &[disabled] {
@@ -703,7 +703,7 @@ const handleBindWechat = async () => {
   
   text {
     font-size: 24rpx;
-    color: #cbd5e1;
+    color: $text-color-placeholder;
   }
 }
 </style>

haha-admin-mp/src/pages/my/my.vue

@@ -255,7 +255,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   padding-bottom: 200rpx;
 }
 
@@ -265,8 +265,8 @@ onMounted(() => {
 }
 
 .user-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 20rpx;
   padding: 32rpx;
 }
@@ -279,13 +279,13 @@ onMounted(() => {
   .avatar {
     width: 96rpx;
     height: 96rpx;
-    background: #ecfdf5;
+    background: $success-color-bg;
     border-radius: 24rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 24rpx;
-    border: 2rpx solid #10b981;
+    border: 2rpx solid $primary-color;
     
     .avatar-icon {
       width: 100%;
@@ -298,7 +298,7 @@ onMounted(() => {
     .avatar-text {
       font-size: 40rpx;
       font-weight: 700;
-      color: #10b981;
+      color: $primary-color;
     }
   }
   
@@ -309,20 +309,20 @@ onMounted(() => {
       display: block;
       font-size: 34rpx;
       font-weight: 700;
-      color: #1e293b;
+      color: $text-color-primary;
       margin-bottom: 4rpx;
     }
     
     .user-role {
       font-size: 26rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
     }
   }
 }
 
 .user-stats {
   display: flex;
-  background: #f8fafc;
+  background: $bg-color-page;
   border-radius: 12rpx;
   padding: 20rpx 0;
   
@@ -339,7 +339,7 @@ onMounted(() => {
       justify-content: center;
       font-size: 32rpx;
       font-weight: 700;
-      color: #1e293b;
+      color: $text-color-primary;
       margin-bottom: 4rpx;
     }
     
@@ -348,13 +348,13 @@ onMounted(() => {
       align-items: center;
       justify-content: center;
       font-size: 22rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
     }
   }
   
   .stat-divider {
     width: 1rpx;
-    background: #e2e8f0;
+    background: $border-color;
   }
 }
 
@@ -364,8 +364,8 @@ onMounted(() => {
 }
 
 .menu-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 20rpx;
   margin-bottom: 16rpx;
   overflow: hidden;
@@ -374,7 +374,7 @@ onMounted(() => {
     display: block;
     padding: 20rpx 24rpx 12rpx;
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
     font-weight: 600;
   }
 }
@@ -384,7 +384,7 @@ onMounted(() => {
     display: flex;
     align-items: center;
     padding: 20rpx 24rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
     transition: background 0.15s;
     
     &:last-child {
@@ -392,7 +392,7 @@ onMounted(() => {
     }
     
     &:active {
-      background: #f8fafc;
+      background: $bg-color-page;
     }
   }
 }
@@ -406,17 +406,17 @@ onMounted(() => {
   justify-content: center;
   margin-right: 16rpx;
   
-  &.green { background: #ecfdf5; }
-  &.blue { background: #f0f9ff; }
-  &.amber { background: #fff7ed; }
-  &.purple { background: #faf5ff; }
-  &.cyan { background: #ecfeff; }
+  &.green { background: $success-color-bg; }
+  &.blue { background: $info-color-bg; }
+  &.amber { background: $accent-color-bg; }
+  &.purple { background: $primary-color-bg; }
+  &.cyan { background: $primary-color-bg; }
   
   /* 图标 - 纯CSS几何图形 */
   .icon-shop {
     width: 22rpx;
     height: 22rpx;
-    background: #f97316;
+    background: $accent-color;
     position: relative;
     
     &::before {
@@ -429,14 +429,14 @@ onMounted(() => {
       height: 0;
       border-left: 14rpx solid transparent;
       border-right: 14rpx solid transparent;
-      border-bottom: 10rpx solid #f97316;
+      border-bottom: 10rpx solid $accent-color;
     }
   }
   
   .icon-product {
     width: 20rpx;
     height: 18rpx;
-    background: #a855f7;
+    background: $primary-color;
     border-radius: 4rpx;
     position: relative;
     
@@ -450,7 +450,7 @@ onMounted(() => {
       height: 0;
       border-left: 8rpx solid transparent;
       border-right: 8rpx solid transparent;
-      border-bottom: 10rpx solid #a855f7;
+      border-bottom: 10rpx solid $primary-color;
     }
   }
   
@@ -463,7 +463,7 @@ onMounted(() => {
     &::before, &, &::after {
       content: '';
       width: 6rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 3rpx;
       margin-right: 3rpx;
     }
@@ -475,7 +475,7 @@ onMounted(() => {
   .icon-lock {
     width: 16rpx;
     height: 20rpx;
-    background: #10b981;
+    background: $primary-color;
     border-radius: 4rpx;
     position: relative;
     
@@ -487,7 +487,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 10rpx;
       height: 8rpx;
-      border: 3rpx solid #10b981;
+      border: 3rpx solid $primary-color;
       border-bottom: none;
       border-radius: 8rpx 8rpx 0 0;
     }
@@ -496,7 +496,7 @@ onMounted(() => {
   .icon-info {
     width: 20rpx;
     height: 20rpx;
-    border: 3rpx solid #0ea5e9;
+    border: 3rpx solid $info-color;
     border-radius: 50%;
     position: relative;
 
@@ -508,7 +508,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 3rpx;
       height: 3rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 50%;
     }
 
@@ -520,7 +520,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 3rpx;
       height: 6rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 2rpx;
     }
   }
@@ -528,7 +528,7 @@ onMounted(() => {
   .icon-warning {
     width: 24rpx;
     height: 24rpx;
-    border: 3rpx solid #f43f5e;
+    border: 3rpx solid $error-color;
     border-radius: 50%;
     position: relative;
 
@@ -540,7 +540,7 @@ onMounted(() => {
       transform: translate(-50%, -50%);
       width: 3rpx;
       height: 10rpx;
-      background: #f43f5e;
+      background: $error-color;
     }
 
     &::after {
@@ -551,7 +551,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 3rpx;
       height: 3rpx;
-      background: #f43f5e;
+      background: $error-color;
       border-radius: 50%;
     }
   }
@@ -559,7 +559,7 @@ onMounted(() => {
   .icon-user {
     width: 20rpx;
     height: 20rpx;
-    border: 3rpx solid #10b981;
+    border: 3rpx solid $primary-color;
     border-radius: 50%;
     position: relative;
 
@@ -571,7 +571,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 10rpx;
       height: 10rpx;
-      border: 3rpx solid #10b981;
+      border: 3rpx solid $primary-color;
       border-radius: 50%;
     }
   }
@@ -585,7 +585,7 @@ onMounted(() => {
     &::before, &::after, & {
       content: '';
       width: 6rpx;
-      background: #0ea5e9;
+      background: $info-color;
       border-radius: 3rpx;
     }
 
@@ -597,7 +597,7 @@ onMounted(() => {
   .icon-device {
     width: 20rpx;
     height: 16rpx;
-    border: 3rpx solid #10b981;
+    border: 3rpx solid $primary-color;
     border-radius: 4rpx;
     position: relative;
 
@@ -609,7 +609,7 @@ onMounted(() => {
       transform: translateX(-50%);
       width: 12rpx;
       height: 6rpx;
-      background: #10b981;
+      background: $primary-color;
       border-radius: 0 0 4rpx 4rpx;
     }
   }
@@ -621,22 +621,22 @@ onMounted(() => {
   .menu-name {
     display: block;
     font-size: 30rpx;
-    color: #1e293b;
+    color: $text-color-primary;
     font-weight: 500;
     margin-bottom: 2rpx;
   }
   
   .menu-desc {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
 .menu-arrow {
   width: 12rpx;
   height: 12rpx;
-  border-top: 3rpx solid #cbd5e1;
-  border-right: 3rpx solid #cbd5e1;
+  border-top: 3rpx solid $text-color-placeholder;
+  border-right: 3rpx solid $text-color-placeholder;
   transform: rotate(45deg);
 }
 
@@ -647,12 +647,12 @@ onMounted(() => {
   .logout-btn {
     width: 100%;
     height: 100rpx;
-    background: #fef2f2;
-    border: 1rpx solid #fecaca;
+    background: $error-color-bg;
+    border: 1rpx solid $error-color-bg;
     border-radius: 16rpx;
     font-size: 32rpx;
     font-weight: 600;
-    color: #ef4444;
+    color: $error-color;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -663,7 +663,7 @@ onMounted(() => {
     }
     
     &:active {
-      background: #fee2e2;
+      background: $error-color-bg;
       transform: scale(0.98);
     }
   }
@@ -676,7 +676,7 @@ onMounted(() => {
   
   text {
     font-size: 24rpx;
-    color: #cbd5e1;
+    color: $text-color-placeholder;
   }
 }
 </style>

haha-admin-mp/src/pages/orders/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <!-- 黄色导航栏 -->
-    <NavBar :title="navTitle" bgColor="#FFD100" titleColor="#333333" :showBack="true" />
+    <NavBar :title="navTitle" :showBack="true" />
 
     <scroll-view class="detail-scroll" scroll-y v-if="order">
       <!-- 状态区域 -->
@@ -216,7 +216,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
 }
@@ -229,7 +229,7 @@ onMounted(() => {
 
 /* 状态区域 */
 .status-section {
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 24rpx 32rpx;
   margin-bottom: 16rpx;
 
@@ -246,25 +246,25 @@ onMounted(() => {
       margin-right: 16rpx;
 
       &.success {
-        background: #ecfdf5;
-        color: #10b981;
+        background: $primary-color-bg;
+        color: $primary-color;
       }
 
       &.danger {
-        background: #fef2f2;
-        color: #ef4444;
+        background: $error-color-bg;
+        color: $error-color;
       }
 
       &.warning {
-        background: #fff7ed;
-        color: #f97316;
+        background: $accent-color-bg;
+        color: $accent-color;
       }
     }
 
     .order-no-text {
       font-size: 30rpx;
       font-weight: 600;
-      color: #333333;
+      color: $text-color-primary;
     }
   }
 
@@ -272,22 +272,22 @@ onMounted(() => {
     font-size: 26rpx;
 
     &.success {
-      color: #10b981;
+      color: $primary-color;
     }
 
     &.danger {
-      color: #ef4444;
+      color: $error-color;
     }
 
     &.warning {
-      color: #f97316;
+      color: $accent-color;
     }
   }
 }
 
 /* 视频区域 */
 .video-section {
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 20rpx 32rpx;
   margin-bottom: 16rpx;
 
@@ -301,7 +301,7 @@ onMounted(() => {
 
 /* 通用卡片 */
 .section {
-  background: #ffffff;
+  background: $bg-color-card;
   margin-bottom: 16rpx;
   padding: 24rpx 32rpx;
 
@@ -309,7 +309,7 @@ onMounted(() => {
     display: block;
     font-size: 30rpx;
     font-weight: 600;
-    color: #333333;
+    color: $text-color-primary;
     margin-bottom: 20rpx;
   }
 }
@@ -320,7 +320,7 @@ onMounted(() => {
     display: flex;
     align-items: flex-start;
     padding: 16rpx 0;
-    border-bottom: 1rpx solid #f5f5f5;
+    border-bottom: 1rpx solid $bg-color-page;
 
     &:last-child {
       border-bottom: none;
@@ -330,7 +330,7 @@ onMounted(() => {
       width: 120rpx;
       height: 120rpx;
       border-radius: 8rpx;
-      background: #f5f5f5;
+      background: $bg-color-page;
       margin-right: 20rpx;
       flex-shrink: 0;
     }
@@ -341,14 +341,14 @@ onMounted(() => {
       .product-name {
         display: block;
         font-size: 28rpx;
-        color: #333333;
+        color: $text-color-primary;
         margin-bottom: 8rpx;
       }
 
       .product-meta {
         display: block;
         font-size: 24rpx;
-        color: #999999;
+        color: $text-color-muted;
         margin-bottom: 4rpx;
       }
     }
@@ -359,7 +359,7 @@ onMounted(() => {
 
       .deal-price {
         font-size: 24rpx;
-        color: #999999;
+        color: $text-color-muted;
       }
     }
   }
@@ -370,18 +370,18 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 20rpx 0 0;
-  border-top: 1rpx solid #f5f5f5;
+  border-top: 1rpx solid $bg-color-page;
   margin-top: 16rpx;
 
   .amount-label {
     font-size: 28rpx;
-    color: #666666;
+    color: $text-color-secondary;
   }
 
   .amount-value {
     font-size: 32rpx;
     font-weight: 700;
-    color: #333333;
+    color: $text-color-primary;
   }
 }
 
@@ -391,7 +391,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $bg-color-page;
 
   &:last-child {
     border-bottom: none;
@@ -399,12 +399,12 @@ onMounted(() => {
 
   .info-label {
     font-size: 28rpx;
-    color: #999999;
+    color: $text-color-muted;
   }
 
   .info-value {
     font-size: 28rpx;
-    color: #333333;
+    color: $text-color-primary;
   }
 
   .info-value-wrapper {
@@ -415,7 +415,7 @@ onMounted(() => {
     .copy-icon {
       width: 32rpx;
       height: 32rpx;
-      background: #f5f5f5;
+      background: $bg-color-page;
       border-radius: 4rpx;
       position: relative;
 
@@ -427,7 +427,7 @@ onMounted(() => {
         transform: translate(-50%, -50%);
         width: 16rpx;
         height: 20rpx;
-        border: 2rpx solid #999999;
+        border: 2rpx solid $text-color-muted;
         border-radius: 2rpx;
       }
 
@@ -438,14 +438,14 @@ onMounted(() => {
         right: 4rpx;
         width: 8rpx;
         height: 8rpx;
-        background: #ffffff;
+        background: $bg-color-card;
       }
     }
 
     .phone-icon {
       width: 40rpx;
       height: 40rpx;
-      background: #10b981;
+      background: $primary-color;
       border-radius: 50%;
       display: flex;
       align-items: center;
@@ -457,7 +457,7 @@ onMounted(() => {
         position: absolute;
         width: 16rpx;
         height: 20rpx;
-        background: #ffffff;
+        background: $bg-color-card;
         border-radius: 4rpx 4rpx 8rpx 8rpx;
       }
     }
@@ -473,7 +473,7 @@ onMounted(() => {
 
     .blacklist-tip {
       font-size: 22rpx;
-      color: #999999;
+      color: $text-color-muted;
       margin-top: 4rpx;
       line-height: 1.4;
     }
@@ -486,7 +486,7 @@ onMounted(() => {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 20rpx 32rpx;
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
   box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
@@ -494,8 +494,8 @@ onMounted(() => {
   .refund-btn {
     width: 100%;
     height: 96rpx;
-    background: #FFD100;
-    color: #333333;
+    background: $primary-color;
+    color: $text-color-primary;
     font-size: 32rpx;
     font-weight: 600;
     border-radius: 16rpx;
@@ -506,7 +506,7 @@ onMounted(() => {
     }
 
     &:active {
-      background: #e6bc00;
+      background: $primary-color-dark;
     }
   }
 }

haha-admin-mp/src/pages/orders/list.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <!-- 黄色导航栏 -->
-    <NavBar title="销售订单" bgColor="#FFD100" titleColor="#333333" :showBack="true" />
+    <NavBar title="销售订单" :showBack="true" />
 
     <!-- Tab 栏 -->
     <view class="tab-bar">
@@ -157,6 +157,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import CustomTabBar from '@/components/CustomTabBar.vue';
 import { getOrderList, getOrderStats } from '@/api/order';
@@ -206,7 +207,7 @@ const formatMoney = formatMoneyUtil;
 
 const getStatusText = (status: number) => OrderStatusText[status] || '未知';
 
-const getStatusColor = (status: number) => OrderStatusColor[status] || '#999999';
+const getStatusColor = (status: number) => OrderStatusColor[status] || '$text-color-muted';
 
 const formatDateTime = (datetime: string) => {
   if (!datetime) return '-';
@@ -229,7 +230,7 @@ const loadStats = async () => {
     const res = await getOrderStats({ startDate: startDate.value, endDate: endDate.value });
     stats.value = res || {};
   } catch (error) {
-    console.error('加载统计失败', error);
+    logger.warn('加载统计失败', error);
   }
 };
 
@@ -260,7 +261,7 @@ const loadOrders = async () => {
     total.value = res.total || 0;
     hasMore.value = orderList.value.length < total.value;
   } catch (error) {
-    console.error('加载订单失败', error);
+    logger.warn('加载订单失败', error);
   } finally {
     loading.value = false;
   }
@@ -309,7 +310,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
   padding-bottom: 200rpx;
@@ -318,8 +319,8 @@ onMounted(() => {
 /* Tab 栏 */
 .tab-bar {
   display: flex;
-  background: #ffffff;
-  border-bottom: 1rpx solid #eeeeee;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 
   .tab-item {
     flex: 1;
@@ -332,12 +333,12 @@ onMounted(() => {
 
     text {
       font-size: 28rpx;
-      color: #666666;
+      color: $text-color-secondary;
     }
 
     &.active {
       text {
-        color: #333333;
+        color: $text-color-primary;
         font-weight: 600;
       }
 
@@ -348,7 +349,7 @@ onMounted(() => {
         transform: translateX(-50%);
         width: 60rpx;
         height: 4rpx;
-        background: #FFD100;
+        background: $primary-color;
         border-radius: 2rpx;
       }
     }
@@ -358,18 +359,18 @@ onMounted(() => {
 /* 时间筛选 */
 .time-filter {
   padding: 16rpx 24rpx;
-  background: #ffffff;
+  background: $bg-color-card;
 
   .time-label {
     font-size: 24rpx;
-    color: #999999;
+    color: $text-color-muted;
   }
 }
 
 /* 统计卡片 */
 .stats-bar {
   display: flex;
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 20rpx 0;
 
   .stat-item {
@@ -381,27 +382,27 @@ onMounted(() => {
     .stat-value {
       font-size: 36rpx;
       font-weight: 700;
-      color: #ff4d4f;
+      color: $error-color;
       margin-bottom: 8rpx;
     }
 
     .stat-label {
       font-size: 24rpx;
-      color: #333333;
+      color: $text-color-primary;
     }
   }
 }
 
 /* 说明文字 */
 .tips-section {
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 16rpx 24rpx;
   margin-bottom: 16rpx;
 
   .tips-text {
     display: block;
     font-size: 22rpx;
-    color: #999999;
+    color: $text-color-muted;
     line-height: 1.6;
   }
 }
@@ -415,17 +416,17 @@ onMounted(() => {
 
   .list-info {
     font-size: 26rpx;
-    color: #999999;
+    color: $text-color-muted;
   }
 
   .filter-btn {
     display: flex;
     align-items: center;
     padding: 8rpx 16rpx;
-    background: #ffffff;
+    background: $bg-color-card;
     border-radius: 8rpx;
     font-size: 26rpx;
-    color: #666666;
+    color: $text-color-secondary;
   }
 }
 
@@ -440,7 +441,7 @@ onMounted(() => {
 }
 
 .order-card {
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 12rpx;
   margin-bottom: 16rpx;
   padding: 20rpx;
@@ -453,7 +454,7 @@ onMounted(() => {
 
     .order-time {
       font-size: 28rpx;
-      color: #333333;
+      color: $text-color-primary;
     }
 
     .order-status {
@@ -471,7 +472,7 @@ onMounted(() => {
       width: 120rpx;
       height: 120rpx;
       border-radius: 8rpx;
-      background: #f5f5f5;
+      background: $bg-color-page;
       margin-right: 20rpx;
     }
 
@@ -484,13 +485,13 @@ onMounted(() => {
       .product-amount {
         font-size: 32rpx;
         font-weight: 600;
-        color: #333333;
+        color: $text-color-primary;
         margin-bottom: 8rpx;
       }
 
       .product-count {
         font-size: 24rpx;
-        color: #999999;
+        color: $text-color-muted;
       }
     }
   }
@@ -504,13 +505,13 @@ onMounted(() => {
 
       .info-label {
         font-size: 26rpx;
-        color: #666666;
+        color: $text-color-secondary;
         margin-right: 8rpx;
       }
 
       .info-value {
         font-size: 26rpx;
-        color: #333333;
+        color: $text-color-primary;
       }
     }
   }
@@ -521,12 +522,12 @@ onMounted(() => {
 
     .view-btn {
       padding: 10rpx 32rpx;
-      border: 1rpx solid #cccccc;
+      border: 1rpx solid $text-color-placeholder;
       border-radius: 8rpx;
 
       text {
         font-size: 26rpx;
-        color: #666666;
+        color: $text-color-secondary;
       }
     }
   }
@@ -539,14 +540,14 @@ onMounted(() => {
   justify-content: center;
   gap: 12rpx;
   padding: 32rpx;
-  color: #999999;
+  color: $text-color-muted;
   font-size: 24rpx;
 
   .loading-spinner {
     width: 32rpx;
     height: 32rpx;
-    border: 3rpx solid #eeeeee;
-    border-top-color: #FFD100;
+    border: 3rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -560,7 +561,7 @@ onMounted(() => {
   text-align: center;
   padding: 32rpx;
   font-size: 24rpx;
-  color: #cccccc;
+  color: $text-color-placeholder;
 }
 
 .empty-state {
@@ -571,7 +572,7 @@ onMounted(() => {
 
   .empty-text {
     font-size: 28rpx;
-    color: #999999;
+    color: $text-color-muted;
   }
 }
 
@@ -592,18 +593,18 @@ onMounted(() => {
 
 .modal-content {
   width: 100%;
-  background: #ffffff;
+  background: $bg-color-card;
   border-radius: 20rpx;
   overflow: hidden;
 
   .modal-header {
     padding: 24rpx;
-    border-bottom: 1rpx solid #f5f5f5;
+    border-bottom: 1rpx solid $bg-color-page;
 
     .modal-title {
       font-size: 32rpx;
       font-weight: 600;
-      color: #333333;
+      color: $text-color-primary;
     }
   }
 
@@ -615,18 +616,18 @@ onMounted(() => {
       align-items: center;
       justify-content: space-between;
       padding: 20rpx 0;
-      border-bottom: 1rpx solid #f5f5f5;
+      border-bottom: 1rpx solid $bg-color-page;
 
       text {
         font-size: 28rpx;
-        color: #333333;
+        color: $text-color-primary;
       }
 
       .picker-value {
         font-size: 28rpx;
-        color: #333333;
+        color: $text-color-primary;
         padding: 8rpx 16rpx;
-        background: #f5f5f5;
+        background: $bg-color-page;
         border-radius: 8rpx;
       }
     }
@@ -651,13 +652,13 @@ onMounted(() => {
     }
 
     .btn-cancel {
-      background: #f5f5f5;
-      color: #666666;
+      background: $bg-color-page;
+      color: $text-color-secondary;
     }
 
     .btn-confirm {
-      background: #FFD100;
-      color: #333333;
+      background: $primary-color;
+      color: $text-color-primary;
     }
   }
 }

haha-admin-mp/src/pages/products/list.vue

@@ -157,6 +157,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import { formatMoney } from '@/utils/common';
 import { getDeviceProductConfig, saveDeviceProductConfig } from '@/api/device';
 
@@ -405,7 +406,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   height: 100vh;
-  background: #f5f5f5;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -413,7 +414,7 @@ onMounted(() => {
 
 /* 黄色头部区域 */
 .header-section {
-  background: #FFD93D;
+  background: $primary-color;
   flex-shrink: 0;
 }
 
@@ -439,14 +440,14 @@ onMounted(() => {
 
 .back-icon {
   font-size: 40rpx;
-  color: #333;
+  color: $text-color-primary;
   font-weight: bold;
 }
 
 .header-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $text-color-primary;
   text-align: center;
   flex: 1;
 }
@@ -457,7 +458,7 @@ onMounted(() => {
 
 /* 楼层Tab */
 .floor-tabs {
-  background: #FFD93D;
+  background: $primary-color;
   padding: 16rpx 20rpx;
   flex-shrink: 0;
 }
@@ -477,8 +478,8 @@ onMounted(() => {
   transition: all 0.2s;
 
   &.active {
-    background: #fff;
-    border-color: #333;
+    background: $bg-color-card;
+    border-color: $text-color-primary;
     box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
   }
 }
@@ -486,7 +487,7 @@ onMounted(() => {
 .floor-text {
   font-size: 28rpx;
   font-weight: 500;
-  color: #333;
+  color: $text-color-primary;
   line-height: 1.2;
 }
 
@@ -504,14 +505,14 @@ onMounted(() => {
   top: 20rpx;
   right: 20rpx;
   z-index: 10;
-  background: rgba(255, 217, 61, 0.9);
+  background: rgba($primary-color, 0.9);
   padding: 10rpx 20rpx;
   border-radius: 24rpx;
 }
 
 .template-float-text {
   font-size: 24rpx;
-  color: #333;
+  color: $text-color-primary;
 }
 
 /* 楼层区块 */
@@ -526,7 +527,7 @@ onMounted(() => {
 
 .hint-text {
   font-size: 26rpx;
-  color: #999;
+  color: $text-color-muted;
 }
 
 /* 货道网格 */
@@ -538,13 +539,13 @@ onMounted(() => {
 
 .slot-card {
   width: calc((100% - 32rpx) / 3);
-  background: #fff;
+  background: $bg-color-card;
   border-radius: 12rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 
   &.empty {
-    background: #fff;
+    background: $bg-color-card;
     min-height: 320rpx;
   }
 }
@@ -554,7 +555,7 @@ onMounted(() => {
   position: relative;
   width: 100%;
   height: 200rpx;
-  background: #f8f8f8;
+  background: $bg-color-page;
 }
 
 .slot-image {
@@ -568,12 +569,12 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #f0f0f0;
+  background: $bg-color-secondary;
 }
 
 .placeholder-text {
   font-size: 24rpx;
-  color: #bbb;
+  color: $text-color-placeholder;
 }
 
 .slot-delete {
@@ -592,7 +593,7 @@ onMounted(() => {
 
 .delete-icon {
   font-size: 26rpx;
-  color: #999;
+  color: $text-color-muted;
   line-height: 1;
 }
 
@@ -601,19 +602,19 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: #ff4d4f;
+  background: $error-color;
   padding: 6rpx 10rpx;
 }
 
 .meta-position {
   font-size: 20rpx;
-  color: #fff;
+  color: $bg-color-card;
   font-weight: 600;
 }
 
 .meta-price {
   font-size: 20rpx;
-  color: #fff;
+  color: $bg-color-card;
   font-weight: 600;
 }
 
@@ -624,7 +625,7 @@ onMounted(() => {
 .slot-name {
   display: block;
   font-size: 22rpx;
-  color: #333;
+  color: $text-color-primary;
   line-height: 1.4;
   height: 62rpx;
   overflow: hidden;
@@ -638,7 +639,7 @@ onMounted(() => {
 .slot-stock-label {
   display: block;
   font-size: 18rpx;
-  color: #999;
+  color: $text-color-muted;
   margin-bottom: 6rpx;
 }
 
@@ -658,7 +659,7 @@ onMounted(() => {
 
 .stock-btn-text {
   font-size: 28rpx;
-  color: #999;
+  color: $text-color-muted;
   line-height: 1;
 }
 
@@ -667,7 +668,7 @@ onMounted(() => {
   height: 40rpx;
   text-align: center;
   font-size: 24rpx;
-  color: #333;
+  color: $text-color-primary;
 }
 
 /* 空货道 */
@@ -677,14 +678,14 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2rpx dashed #e0e0e0;
+  border: 2rpx dashed $border-color;
   border-radius: 12rpx;
   box-sizing: border-box;
 }
 
 .add-icon {
   font-size: 60rpx;
-  color: #ddd;
+  color: $border-color;
   line-height: 1;
 }
 
@@ -697,14 +698,14 @@ onMounted(() => {
 .footer-section {
   padding: 20rpx 30rpx;
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  background: #fff;
-  border-top: 1rpx solid #eee;
+  background: $bg-color-card;
+  border-top: 1rpx solid $border-color;
   flex-shrink: 0;
 }
 
 .save-btn {
   height: 88rpx;
-  background: #FFD93D;
+  background: $primary-color;
   border-radius: 44rpx;
   display: flex;
   align-items: center;
@@ -714,7 +715,7 @@ onMounted(() => {
 .save-btn-text {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $text-color-primary;
 }
 
 /* 价格弹窗 */
@@ -733,7 +734,7 @@ onMounted(() => {
 
 .price-modal-content {
   width: 560rpx;
-  background: #fff;
+  background: $bg-color-card;
   border-radius: 24rpx;
   overflow: hidden;
 }
@@ -743,18 +744,18 @@ onMounted(() => {
   align-items: center;
   justify-content: space-between;
   padding: 30rpx;
-  border-bottom: 1rpx solid #eee;
+  border-bottom: 1rpx solid $border-color;
 }
 
 .price-modal-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $text-color-primary;
 }
 
 .price-modal-close {
   font-size: 40rpx;
-  color: #999;
+  color: $text-color-muted;
   line-height: 1;
 }
 
@@ -765,7 +766,7 @@ onMounted(() => {
 .price-modal-label {
   display: block;
   font-size: 28rpx;
-  color: #666;
+  color: $text-color-secondary;
   margin-bottom: 20rpx;
 }
 
@@ -774,25 +775,25 @@ onMounted(() => {
   align-items: center;
   gap: 12rpx;
   padding: 20rpx;
-  background: #f5f5f5;
+  background: $bg-color-page;
   border-radius: 12rpx;
 }
 
 .price-symbol {
   font-size: 32rpx;
-  color: #333;
+  color: $text-color-primary;
   font-weight: 600;
 }
 
 .price-input {
   flex: 1;
   font-size: 32rpx;
-  color: #333;
+  color: $text-color-primary;
 }
 
 .price-modal-footer {
   display: flex;
-  border-top: 1rpx solid #eee;
+  border-top: 1rpx solid $border-color;
 }
 
 .price-modal-btn {
@@ -807,16 +808,16 @@ onMounted(() => {
   }
 
   &.cancel {
-    border-right: 1rpx solid #eee;
+    border-right: 1rpx solid $border-color;
 
     text {
-      color: #666;
+      color: $text-color-secondary;
     }
   }
 
   &.confirm {
     text {
-      color: #FFD93D;
+      color: $primary-color;
       font-weight: 600;
     }
   }

haha-admin-mp/src/pages/replenish/bind.vue

@@ -128,7 +128,7 @@ const handleBind = async () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .content {
@@ -145,7 +145,7 @@ const handleBind = async () => {
   .bind-icon {
     width: 160rpx;
     height: 160rpx;
-    background: #ecfdf5;
+    background: $success-color-bg;
     border-radius: 40rpx;
     display: flex;
     align-items: center;
@@ -192,13 +192,13 @@ const handleBind = async () => {
 .title {
   font-size: 36rpx;
   font-weight: 700;
-  color: #1e293b;
+  color: $text-color-primary;
   margin-bottom: 12rpx;
 }
 
 .subtitle {
   font-size: 26rpx;
-  color: #64748b;
+  color: $text-color-tertiary;
   margin-bottom: 40rpx;
   text-align: center;
 }
@@ -206,8 +206,8 @@ const handleBind = async () => {
 /* 绑定码卡片 */
 .code-card {
   width: 100%;
-  background: #ffffff;
-  border: 2rpx solid #10b981;
+  background: $bg-color-card;
+  border: 2rpx solid $primary-color;
   border-radius: 20rpx;
   padding: 32rpx;
   text-align: center;
@@ -216,7 +216,7 @@ const handleBind = async () => {
   .code-label {
     display: block;
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
     margin-bottom: 16rpx;
   }
 
@@ -224,7 +224,7 @@ const handleBind = async () => {
     display: block;
     font-size: 36rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     letter-spacing: 6rpx;
     font-family: 'Courier New', monospace;
     margin-bottom: 16rpx;
@@ -232,15 +232,15 @@ const handleBind = async () => {
 
   .code-expire {
     font-size: 22rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
 /* 绑定流程说明 */
 .bind-info {
   width: 100%;
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 40rpx;
@@ -265,7 +265,7 @@ const handleBind = async () => {
       justify-content: center;
 
       &.done {
-        background: #10b981;
+        background: $primary-color;
 
         &::after {
           content: '';
@@ -279,7 +279,7 @@ const handleBind = async () => {
       }
 
       &.active {
-        background: #10b981;
+        background: $primary-color;
         animation: pulse 2s infinite;
 
         &::after {
@@ -294,21 +294,21 @@ const handleBind = async () => {
 
     .info-text {
       font-size: 26rpx;
-      color: #475569;
+      color: $text-color-secondary;
     }
   }
 }
 
 @keyframes pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
-  50% { box-shadow: 0 0 0 12rpx rgba(16, 185, 129, 0); }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
+  50% { box-shadow: 0 0 0 12rpx rgba(255, 193, 7, 0); }
 }
 
 /* 绑定按钮 */
 .bind-btn {
   width: 100%;
   height: 100rpx;
-  background: #10b981;
+  background: $primary-color;
   color: #fff;
   font-size: 32rpx;
   font-weight: 600;
@@ -323,7 +323,7 @@ const handleBind = async () => {
   }
 
   &:active {
-    background: #059669;
+    background: $primary-color-dark;
   }
 
   &[disabled] {
@@ -335,7 +335,7 @@ const handleBind = async () => {
   display: block;
   margin-top: 28rpx;
   font-size: 26rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 /* 成功状态 */
@@ -346,7 +346,7 @@ const handleBind = async () => {
   .success-icon {
     width: 140rpx;
     height: 140rpx;
-    background: #ecfdf5;
+    background: $success-color-bg;
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -355,7 +355,7 @@ const handleBind = async () => {
 
     .success-check {
       font-size: 64rpx;
-      color: #10b981;
+      color: $primary-color;
       font-weight: 700;
     }
   }
@@ -363,13 +363,13 @@ const handleBind = async () => {
   .success-title {
     font-size: 36rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 12rpx;
   }
 
   .success-desc {
     font-size: 28rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
   }
 }
 </style>

haha-admin-mp/src/pages/replenish/index.vue

@@ -184,7 +184,7 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   padding-bottom: 200rpx;
 }
 
@@ -194,8 +194,8 @@ onMounted(async () => {
 }
 
 .user-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 20rpx;
   padding: 28rpx;
 
@@ -207,18 +207,18 @@ onMounted(async () => {
     .avatar {
       width: 80rpx;
       height: 80rpx;
-      background: #ecfdf5;
+      background: $success-color-bg;
       border-radius: 20rpx;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 20rpx;
-      border: 2rpx solid #10b981;
+      border: 2rpx solid $primary-color;
 
       .avatar-text {
         font-size: 36rpx;
         font-weight: 700;
-        color: #10b981;
+        color: $primary-color;
       }
     }
 
@@ -229,25 +229,25 @@ onMounted(async () => {
         display: block;
         font-size: 32rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
       }
 
       .user-role {
         font-size: 24rpx;
-        color: #10b981;
+        color: $primary-color;
         font-weight: 500;
       }
 
       .user-employee {
         font-size: 22rpx;
-        color: #94a3b8;
+        color: $text-color-muted;
       }
     }
   }
 
   .user-stats {
     display: flex;
-    background: #f8fafc;
+    background: $bg-color-page;
     border-radius: 12rpx;
     padding: 16rpx 0;
 
@@ -260,18 +260,18 @@ onMounted(async () => {
       .stat-value {
         font-size: 30rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
       }
 
       .stat-label {
         font-size: 22rpx;
-        color: #64748b;
+        color: $text-color-tertiary;
       }
     }
 
     .stat-divider {
       width: 1rpx;
-      background: #e2e8f0;
+      background: $border-color;
     }
   }
 }
@@ -286,7 +286,7 @@ onMounted(async () => {
   .loading-text {
     margin-top: 16rpx;
     font-size: 26rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -304,12 +304,12 @@ onMounted(async () => {
   .section-title {
     font-size: 30rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
   }
 
   .section-count {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -323,7 +323,7 @@ onMounted(async () => {
   .empty-icon {
     width: 120rpx;
     height: 120rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 24rpx;
     margin-bottom: 24rpx;
     display: flex;
@@ -333,7 +333,7 @@ onMounted(async () => {
     .icon-device {
       width: 40rpx;
       height: 32rpx;
-      border: 4rpx solid #94a3b8;
+      border: 4rpx solid $text-color-muted;
       border-radius: 6rpx;
       position: relative;
 
@@ -345,7 +345,7 @@ onMounted(async () => {
         transform: translateX(-50%);
         width: 20rpx;
         height: 8rpx;
-        background: #94a3b8;
+        background: $text-color-muted;
         border-radius: 0 0 6rpx 6rpx;
       }
     }
@@ -353,26 +353,26 @@ onMounted(async () => {
 
   .empty-text {
     font-size: 28rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     margin-bottom: 8rpx;
   }
 
   .empty-hint {
     font-size: 24rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
 /* 设备卡片 */
 .device-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
 
   &:active {
-    background: #fafafa;
+    background: $bg-color-secondary;
   }
 
   .device-header {
@@ -388,12 +388,12 @@ onMounted(async () => {
         display: block;
         font-size: 30rpx;
         font-weight: 600;
-        color: #1e293b;
+        color: $text-color-primary;
       }
 
       .device-id {
         font-size: 22rpx;
-        color: #94a3b8;
+        color: $text-color-muted;
       }
     }
 
@@ -404,13 +404,13 @@ onMounted(async () => {
       font-weight: 500;
 
       &.online {
-        background: #ecfdf5;
-        color: #10b981;
+        background: $success-color-bg;
+        color: $primary-color;
       }
 
       &.offline {
-        background: #f1f5f9;
-        color: #94a3b8;
+        background: $bg-color-secondary;
+        color: $text-color-muted;
       }
     }
   }
@@ -420,7 +420,7 @@ onMounted(async () => {
 
     .address-text {
       font-size: 24rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
     }
   }
 
@@ -431,7 +431,7 @@ onMounted(async () => {
 
     .stock-item {
       flex: 1;
-      background: #f8fafc;
+      background: $bg-color-page;
       border-radius: 10rpx;
       padding: 12rpx;
       text-align: center;
@@ -439,7 +439,7 @@ onMounted(async () => {
       .stock-label {
         display: block;
         font-size: 20rpx;
-        color: #94a3b8;
+        color: $text-color-muted;
         margin-bottom: 4rpx;
       }
 
@@ -447,19 +447,19 @@ onMounted(async () => {
         display: block;
         font-size: 28rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
       }
 
       &.warn {
-        background: #fffbeb;
+        background: $warning-color-bg;
 
-        .stock-value { color: #f59e0b; }
+        .stock-value { color: $warning-color; }
       }
 
       &.danger {
-        background: #fef2f2;
+        background: $error-color-bg;
 
-        .stock-value { color: #ef4444; }
+        .stock-value { color: $error-color; }
       }
     }
   }
@@ -473,13 +473,13 @@ onMounted(async () => {
     .bar-bg {
       flex: 1;
       height: 8rpx;
-      background: #f1f5f9;
+      background: $bg-color-secondary;
       border-radius: 4rpx;
       overflow: hidden;
 
       .bar-fill {
         height: 100%;
-        background: #10b981;
+        background: $primary-color;
         border-radius: 4rpx;
         transition: width 0.3s;
       }
@@ -487,7 +487,7 @@ onMounted(async () => {
 
     .bar-text {
       font-size: 20rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
       width: 48rpx;
       text-align: right;
     }
@@ -495,11 +495,11 @@ onMounted(async () => {
 
   .device-action {
     padding-top: 12rpx;
-    border-top: 1rpx solid #f1f5f9;
+    border-top: 1rpx solid $bg-color-secondary;
 
     .action-text {
       font-size: 24rpx;
-      color: #10b981;
+      color: $primary-color;
       font-weight: 500;
     }
   }

haha-admin-mp/src/pages/replenish/operation.vue

@@ -266,7 +266,7 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   padding-bottom: 200rpx;
 }
 
@@ -280,7 +280,7 @@ onMounted(async () => {
   .loading-text {
     margin-top: 16rpx;
     font-size: 26rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -289,8 +289,8 @@ onMounted(async () => {
   padding: 16rpx 24rpx 0;
 
   .device-card {
-    background: #ffffff;
-    border: 1rpx solid #e2e8f0;
+    background: $bg-color-card;
+    border: 1rpx solid $border-color;
     border-radius: 16rpx;
     padding: 24rpx;
 
@@ -301,7 +301,7 @@ onMounted(async () => {
       .device-icon {
         width: 48rpx;
         height: 48rpx;
-        background: #ecfdf5;
+        background: $success-color-bg;
         border-radius: 12rpx;
         margin-right: 16rpx;
         position: relative;
@@ -314,7 +314,7 @@ onMounted(async () => {
           transform: translateX(-50%);
           width: 20rpx;
           height: 16rpx;
-          border: 3rpx solid #10b981;
+          border: 3rpx solid $primary-color;
           border-radius: 4rpx;
         }
 
@@ -326,7 +326,7 @@ onMounted(async () => {
           transform: translateX(-50%);
           width: 12rpx;
           height: 6rpx;
-          background: #10b981;
+          background: $primary-color;
           border-radius: 0 0 4rpx 4rpx;
         }
       }
@@ -338,12 +338,12 @@ onMounted(async () => {
           display: block;
           font-size: 30rpx;
           font-weight: 600;
-          color: #1e293b;
+          color: $text-color-primary;
         }
 
         .device-id {
           font-size: 24rpx;
-          color: #64748b;
+          color: $text-color-tertiary;
         }
       }
     }
@@ -361,7 +361,7 @@ onMounted(async () => {
   .section-title {
     font-size: 30rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
   }
 }
 
@@ -371,14 +371,14 @@ onMounted(async () => {
 
   .empty-text {
     font-size: 26rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
 /* 商品卡片 */
 .inventory-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 16rpx;
@@ -391,13 +391,13 @@ onMounted(async () => {
     .item-name {
       font-size: 28rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
       flex: 1;
     }
 
     .item-code {
       font-size: 20rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
       margin-right: 12rpx;
     }
 
@@ -408,18 +408,18 @@ onMounted(async () => {
       font-weight: 500;
 
       &.normal {
-        background: #ecfdf5;
-        color: #10b981;
+        background: $success-color-bg;
+        color: $primary-color;
       }
 
       &.warning {
-        background: #fffbeb;
-        color: #f59e0b;
+        background: $warning-color-bg;
+        color: $warning-color;
       }
 
       &.danger {
-        background: #fef2f2;
-        color: #ef4444;
+        background: $error-color-bg;
+        color: $error-color;
       }
     }
   }
@@ -436,25 +436,25 @@ onMounted(async () => {
 
       .stock-label {
         font-size: 24rpx;
-        color: #94a3b8;
+        color: $text-color-muted;
         margin-right: 8rpx;
       }
 
       .stock-value {
         font-size: 28rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
 
         &.muted {
-          color: #94a3b8;
+          color: $text-color-muted;
         }
 
         &.low-stock {
-          color: #f59e0b;
+          color: $warning-color;
         }
 
         &.out-of-stock {
-          color: #ef4444;
+          color: $error-color;
         }
       }
     }
@@ -463,20 +463,20 @@ onMounted(async () => {
   .replenish-input-section {
     display: flex;
     align-items: center;
-    background: #f8fafc;
+    background: $bg-color-page;
     border-radius: 12rpx;
     padding: 16rpx;
 
     .input-label {
       font-size: 24rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
       margin-right: 16rpx;
     }
 
     .quantity-control {
       display: flex;
       align-items: center;
-      border: 1rpx solid #e2e8f0;
+      border: 1rpx solid $border-color;
       border-radius: 8rpx;
       overflow: hidden;
 
@@ -488,11 +488,11 @@ onMounted(async () => {
         justify-content: center;
         font-size: 32rpx;
         font-weight: 500;
-        color: #64748b;
-        background: #ffffff;
+        color: $text-color-tertiary;
+        background: $bg-color-card;
 
         &:active {
-          background: #f1f5f9;
+          background: $bg-color-secondary;
         }
       }
 
@@ -502,23 +502,23 @@ onMounted(async () => {
         text-align: center;
         font-size: 28rpx;
         font-weight: 600;
-        color: #1e293b;
-        border-left: 1rpx solid #e2e8f0;
-        border-right: 1rpx solid #e2e8f0;
+        color: $text-color-primary;
+        border-left: 1rpx solid $border-color;
+        border-right: 1rpx solid $border-color;
       }
     }
 
     .suggest-btn {
       margin-left: auto;
       padding: 10rpx 20rpx;
-      background: #ecfdf5;
+      background: $success-color-bg;
       border-radius: 8rpx;
       font-size: 22rpx;
-      color: #10b981;
+      color: $primary-color;
       font-weight: 500;
 
       &:active {
-        background: #d1fae5;
+        background: $success-color-bg;
       }
     }
   }
@@ -530,8 +530,8 @@ onMounted(async () => {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #ffffff;
-  border-top: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-top: 1rpx solid $border-color;
   padding: 20rpx 24rpx;
   padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
@@ -545,13 +545,13 @@ onMounted(async () => {
 
     .total-label {
       font-size: 24rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
     }
 
     .total-value {
       font-size: 36rpx;
       font-weight: 700;
-      color: #10b981;
+      color: $primary-color;
       margin: 0 8rpx;
     }
   }
@@ -559,7 +559,7 @@ onMounted(async () => {
   .submit-btn {
     flex: 1;
     height: 88rpx;
-    background: #10b981;
+    background: $primary-color;
     color: #fff;
     font-size: 30rpx;
     font-weight: 600;
@@ -573,7 +573,7 @@ onMounted(async () => {
     }
 
     &:active {
-      background: #059669;
+      background: $primary-color-dark;
     }
 
     &[disabled] {

haha-admin-mp/src/pages/shop/detail.vue

@@ -87,9 +87,9 @@ const shop = ref<any>(null);
 const formatMoney = formatMoneyUtil;
 
 const getStatusText = (status: number) => ShopStatusText[status] || '未知';
-const getStatusColor = (status: number) => ShopStatusColor[status] || '#94a3b8';
+const getStatusColor = (status: number) => ShopStatusColor[status] || '$text-color-muted';
 const getDeviceStatusText = (status: number) => DeviceStatusText[status] || '未知';
-const getDeviceStatusColor = (status: number) => DeviceStatusColor[status] || '#94a3b8';
+const getDeviceStatusColor = (status: number) => DeviceStatusColor[status] || '$text-color-muted';
 
 const getStatusClass = (status: number) => {
   if (status === 1) return 'active';
@@ -129,11 +129,11 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
 }
 
 .status-section {
-  background: #ffffff;
+  background: $bg-color-card;
   padding: 30rpx 32rpx;
   margin-bottom: 16rpx;
   
@@ -145,7 +145,7 @@ onMounted(() => {
     .shop-name {
       font-size: 36rpx;
       font-weight: 700;
-      color: #1e293b;
+      color: $text-color-primary;
     }
     
     .shop-status {
@@ -165,22 +165,22 @@ onMounted(() => {
       }
       
       &.active {
-        background: #ecfdf5;
-        color: #10b981;
-        .status-dot { background: #10b981; }
+        background: $success-color-bg;
+        color: $primary-color;
+        .status-dot { background: $primary-color; }
       }
       
       &.inactive {
-        background: #fff7ed;
-        color: #f97316;
-        .status-dot { background: #f97316; }
+        background: $accent-color-bg;
+        color: $accent-color;
+        .status-dot { background: $accent-color; }
       }
     }
   }
 }
 
 .info-section {
-  background: #ffffff;
+  background: $bg-color-card;
   margin-bottom: 16rpx;
   padding: 24rpx 32rpx;
   
@@ -188,10 +188,10 @@ onMounted(() => {
     display: block;
     font-size: 28rpx;
     font-weight: 600;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 20rpx;
     padding-bottom: 16rpx;
-    border-bottom: 1rpx solid #f1f5f9;
+    border-bottom: 1rpx solid $bg-color-secondary;
   }
   
   .info-item {
@@ -201,18 +201,18 @@ onMounted(() => {
     
     .label {
       font-size: 28rpx;
-      color: #64748b;
+      color: $text-color-tertiary;
     }
     
     .value {
       font-size: 28rpx;
-      color: #1e293b;
+      color: $text-color-primary;
     }
   }
   
   .sales-grid {
     display: flex;
-    background: #f8fafc;
+    background: $bg-color-page;
     border-radius: 12rpx;
     padding: 20rpx 0;
     
@@ -229,15 +229,15 @@ onMounted(() => {
         justify-content: center;
         font-size: 30rpx;
         font-weight: 700;
-        color: #1e293b;
+        color: $text-color-primary;
         margin-bottom: 8rpx;
         
         &.accent {
-          color: #f97316;
+          color: $accent-color;
         }
         
         &.primary {
-          color: #10b981;
+          color: $primary-color;
         }
       }
       
@@ -246,7 +246,7 @@ onMounted(() => {
         align-items: center;
         justify-content: center;
         font-size: 22rpx;
-        color: #64748b;
+        color: $text-color-tertiary;
       }
     }
   }
@@ -257,7 +257,7 @@ onMounted(() => {
       justify-content: space-between;
       align-items: center;
       padding: 20rpx 0;
-      border-bottom: 1rpx solid #f1f5f9;
+      border-bottom: 1rpx solid $bg-color-secondary;
       
       &:last-child {
         border-bottom: none;
@@ -267,14 +267,14 @@ onMounted(() => {
         .device-name {
           display: block;
           font-size: 28rpx;
-          color: #1e293b;
+          color: $text-color-primary;
           font-weight: 500;
           margin-bottom: 4rpx;
         }
         
         .device-no {
           font-size: 24rpx;
-          color: #94a3b8;
+          color: $text-color-muted;
           font-family: monospace;
         }
       }
@@ -295,21 +295,21 @@ onMounted(() => {
         }
         
         &.online {
-          background: #ecfdf5;
-          color: #10b981;
-          .status-dot { background: #10b981; }
+          background: $success-color-bg;
+          color: $primary-color;
+          .status-dot { background: $primary-color; }
         }
         
         &.offline {
-          background: #fff7ed;
-          color: #f97316;
-          .status-dot { background: #f97316; }
+          background: $accent-color-bg;
+          color: $accent-color;
+          .status-dot { background: $accent-color; }
         }
         
         &.maintenance {
-          background: #faf5ff;
-          color: #a855f7;
-          .status-dot { background: #a855f7; }
+          background: $primary-color-bg;
+          color: $primary-color;
+          .status-dot { background: $primary-color; }
         }
       }
     }

haha-admin-mp/src/pages/shop/list.vue

@@ -82,6 +82,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getShopList } from '@/api/shop';
 import { ShopStatusText, ShopStatusColor } from '@/utils/constants';
@@ -118,7 +119,7 @@ const loadShops = async () => {
     
     hasMore.value = shopList.value.length < res.total;
   } catch (error) {
-    console.error('加载门店列表失败', error);
+    logger.warn('加载门店列表失败', error);
   } finally {
     loading.value = false;
   }
@@ -142,7 +143,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   display: flex;
   flex-direction: column;
 }
@@ -158,8 +159,8 @@ onMounted(() => {
 }
 
 .shop-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   margin-bottom: 12rpx;
   overflow: hidden;
@@ -181,13 +182,13 @@ onMounted(() => {
       display: block;
       font-size: 30rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
       margin-bottom: 4rpx;
     }
     
     .shop-no {
       font-size: 22rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
       font-family: monospace;
     }
   }
@@ -209,15 +210,15 @@ onMounted(() => {
     }
     
     &.active {
-      background: #ecfdf5;
-      color: #10b981;
-      .status-dot { background: #10b981; }
+      background: $success-color-bg;
+      color: $primary-color;
+      .status-dot { background: $primary-color; }
     }
     
     &.inactive {
-      background: #fff7ed;
-      color: #f97316;
-      .status-dot { background: #f97316; }
+      background: $accent-color-bg;
+      color: $accent-color;
+      .status-dot { background: $accent-color; }
     }
   }
 }
@@ -244,24 +245,24 @@ onMounted(() => {
       justify-content: center;
       
       &.location {
-        background: #ecfdf5;
+        background: $success-color-bg;
         
         .icon-inner {
           width: 10rpx;
           height: 10rpx;
-          background: #10b981;
+          background: $primary-color;
           border-radius: 50% 50% 50% 0;
           transform: rotate(-45deg);
         }
       }
       
       &.contact {
-        background: #f0f9ff;
+        background: $info-color-bg;
         
         .icon-inner {
           width: 12rpx;
           height: 12rpx;
-          background: #0ea5e9;
+          background: $info-color;
           border-radius: 50%;
         }
       }
@@ -269,7 +270,7 @@ onMounted(() => {
     
     .info-text {
       font-size: 26rpx;
-      color: #475569;
+      color: $text-color-secondary;
     }
   }
 }
@@ -277,8 +278,8 @@ onMounted(() => {
 .card-stats {
   display: flex;
   align-items: center;
-  background: #f8fafc;
-  border-top: 1rpx solid #f1f5f9;
+  background: $bg-color-page;
+  border-top: 1rpx solid $bg-color-secondary;
   padding: 16rpx 12rpx;
   
   .stat-item {
@@ -294,15 +295,15 @@ onMounted(() => {
       justify-content: center;
       font-size: 26rpx;
       font-weight: 600;
-      color: #1e293b;
+      color: $text-color-primary;
       margin-bottom: 4rpx;
       
       &.accent {
-        color: #f97316;
+        color: $accent-color;
       }
       
       &.primary {
-        color: #10b981;
+        color: $primary-color;
       }
     }
     
@@ -311,14 +312,14 @@ onMounted(() => {
       align-items: center;
       justify-content: center;
       font-size: 20rpx;
-      color: #94a3b8;
+      color: $text-color-muted;
     }
   }
   
   .stat-divider {
     width: 1rpx;
     height: 40rpx;
-    background: #e2e8f0;
+    background: $border-color;
   }
 }
 
@@ -329,14 +330,14 @@ onMounted(() => {
   justify-content: center;
   gap: 12rpx;
   padding: 32rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
   font-size: 24rpx;
   
   .loading-spinner {
     width: 32rpx;
     height: 32rpx;
-    border: 3rpx solid #e2e8f0;
-    border-top-color: #10b981;
+    border: 3rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -350,7 +351,7 @@ onMounted(() => {
   text-align: center;
   padding: 32rpx;
   font-size: 24rpx;
-  color: #cbd5e1;
+  color: $text-color-placeholder;
 }
 
 .empty-state {
@@ -362,7 +363,7 @@ onMounted(() => {
   .empty-icon {
     width: 120rpx;
     height: 120rpx;
-    background: #f1f5f9;
+    background: $bg-color-secondary;
     border-radius: 24rpx;
     margin-bottom: 20rpx;
     display: flex;
@@ -372,7 +373,7 @@ onMounted(() => {
     .empty-icon-inner {
       width: 40rpx;
       height: 32rpx;
-      background: #cbd5e1;
+      background: $text-color-placeholder;
       border-radius: 0 0 8rpx 8rpx;
       position: relative;
       
@@ -386,14 +387,14 @@ onMounted(() => {
         height: 0;
         border-left: 24rpx solid transparent;
         border-right: 24rpx solid transparent;
-        border-bottom: 14rpx solid #cbd5e1;
+        border-bottom: 14rpx solid $text-color-placeholder;
       }
     }
   }
   
   .empty-text {
     font-size: 28rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 </style>

haha-admin-mp/src/pages/statistics/overview.vue

@@ -107,6 +107,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import { logger } from '@/utils/logger';
 import NavBar from '@/components/NavBar.vue';
 import { getStatisticsOverview, getProductTop, getShopRanking } from '@/api/statistics';
 import { formatMoney as formatMoneyUtil } from '@/utils/common';
@@ -172,7 +173,7 @@ const loadData = async () => {
     productTopList.value = Array.isArray(productRes) ? productRes : (productRes?.list || []);
     shopRankingList.value = Array.isArray(shopRes) ? shopRes : (shopRes?.list || []);
   } catch (error) {
-    console.error('加载统计数据失败', error);
+    logger.warn('加载统计数据失败', error);
   } finally {
     loading.value = false;
   }
@@ -186,7 +187,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .page {
   min-height: 100vh;
-  background: #f8fafc;
+  background: $bg-color-page;
   padding-bottom: 40rpx;
 }
 
@@ -195,22 +196,22 @@ onMounted(() => {
   display: flex;
   padding: 16rpx 24rpx;
   gap: 12rpx;
-  background: #ffffff;
-  border-bottom: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border-bottom: 1rpx solid $border-color;
 
   .filter-btn {
     padding: 12rpx 28rpx;
-    background: #f8fafc;
-    border: 2rpx solid #e2e8f0;
+    background: $bg-color-page;
+    border: 2rpx solid $border-color;
     border-radius: 20rpx;
     font-size: 26rpx;
-    color: #64748b;
+    color: $text-color-tertiary;
     transition: all 0.15s;
 
     &.active {
-      background: #ecfdf5;
-      border-color: #10b981;
-      color: #10b981;
+      background: $success-color-bg;
+      border-color: $primary-color;
+      color: $primary-color;
       font-weight: 500;
     }
   }
@@ -228,34 +229,34 @@ onMounted(() => {
 }
 
 .stat-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 24rpx 20rpx;
   display: flex;
   flex-direction: column;
 
   &.primary {
-    background: #ecfdf5;
-    border-color: #10b981;
+    background: $success-color-bg;
+    border-color: $primary-color;
   }
 
   .stat-label {
     font-size: 22rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
     margin-bottom: 8rpx;
   }
 
   .stat-value {
     font-size: 36rpx;
     font-weight: 700;
-    color: #1e293b;
+    color: $text-color-primary;
     margin-bottom: 4rpx;
   }
 
   .stat-trend {
     font-size: 20rpx;
-    color: #10b981;
+    color: $primary-color;
   }
 }
 
@@ -275,13 +276,13 @@ onMounted(() => {
   .section-title {
     font-size: 30rpx;
     font-weight: 600;
-    color: #1e293b;
+    color: $text-color-primary;
   }
 }
 
 .rank-card {
-  background: #ffffff;
-  border: 1rpx solid #e2e8f0;
+  background: $bg-color-card;
+  border: 1rpx solid $border-color;
   border-radius: 16rpx;
   padding: 8rpx 16rpx;
 }
@@ -290,7 +291,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   padding: 16rpx 8rpx;
-  border-bottom: 1rpx solid #f1f5f9;
+  border-bottom: 1rpx solid $bg-color-secondary;
 
   &:last-child {
     border-bottom: none;
@@ -301,7 +302,7 @@ onMounted(() => {
   width: 44rpx;
   height: 44rpx;
   border-radius: 12rpx;
-  background: #f1f5f9;
+  background: $bg-color-secondary;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -311,11 +312,11 @@ onMounted(() => {
   text {
     font-size: 24rpx;
     font-weight: 600;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 
   &.top {
-    background: #10b981;
+    background: $primary-color;
 
     text {
       color: #fff;
@@ -330,7 +331,7 @@ onMounted(() => {
   .rank-name {
     display: block;
     font-size: 28rpx;
-    color: #1e293b;
+    color: $text-color-primary;
     font-weight: 500;
     margin-bottom: 4rpx;
     overflow: hidden;
@@ -340,7 +341,7 @@ onMounted(() => {
 
   .rank-meta {
     font-size: 22rpx;
-    color: #94a3b8;
+    color: $text-color-muted;
   }
 }
 
@@ -351,7 +352,7 @@ onMounted(() => {
   .rank-amount {
     font-size: 28rpx;
     font-weight: 600;
-    color: #f97316;
+    color: $accent-color;
   }
 }
 
@@ -359,7 +360,7 @@ onMounted(() => {
   text-align: center;
   padding: 40rpx 0;
   font-size: 26rpx;
-  color: #94a3b8;
+  color: $text-color-muted;
 }
 
 /* 加载状态 */
@@ -369,14 +370,14 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   padding: 60rpx 0;
-  color: #94a3b8;
+  color: $text-color-muted;
   font-size: 28rpx;
 
   .loading-spinner {
     width: 48rpx;
     height: 48rpx;
-    border: 4rpx solid #e2e8f0;
-    border-top-color: #10b981;
+    border: 4rpx solid $border-color;
+    border-top-color: $primary-color;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 16rpx;

haha-admin-mp/src/static/tabbar/device-active.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <rect x="5" y="2" width="14" height="18" rx="2"/>
   <line x1="9" y1="6" x2="15" y2="6"/>
   <line x1="9" y1="10" x2="15" y2="10"/>

haha-admin-mp/src/static/tabbar/my-active.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <circle cx="12" cy="7" r="4"/>
   <path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/>
 </svg>

haha-admin-mp/src/static/tabbar/order-active.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <rect x="4" y="2" width="16" height="20" rx="2"/>
   <line x1="8" y1="7" x2="16" y2="7"/>
   <line x1="8" y1="11" x2="16" y2="11"/>

haha-admin-mp/src/static/tabbar/work-active.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#FFC107" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <rect x="3" y="3" width="7" height="7" rx="1"/>
   <rect x="14" y="3" width="7" height="7" rx="1"/>
   <rect x="3" y="14" width="7" height="7" rx="1"/>

haha-admin-mp/src/uni.scss

@@ -5,11 +5,11 @@
 
 /* ==================== 色彩系统 ==================== */
 
-/* 主色调 - 清新绿 */
-$primary-color: #10b981;
-$primary-color-light: #34d399;
-$primary-color-dark: #059669;
-$primary-color-bg: #ecfdf5;
+/* 主色调 - 暖金黄（与用户端统一） */
+$primary-color: #FFC107;
+$primary-color-light: #FFE082;
+$primary-color-dark: #FFA000;
+$primary-color-bg: #FFF8E1;
 
 /* 辅助色 - 活力橙 */
 $accent-color: #f97316;

haha-admin-mp/src/utils/config.ts

@@ -3,7 +3,7 @@
  */
 
 // API基础路径
-export const API_BASE_URL = 'http://localhost:7070/admin';
+export const API_BASE_URL = 'https://dev-haha-cloud.kuaiyuman.cn/admin';
 
 // 是否使用Mock数据
 export const USE_MOCK = false;
@@ -15,4 +15,4 @@ export const APP_NAME = '哈哈运营平台';
 export const UPLOAD_URL = `${API_BASE_URL}/upload`;
 
 // 图片预览地址前缀
-export const IMAGE_BASE_URL = 'http://localhost:7077';
+export const IMAGE_BASE_URL = 'https://dev-haha-cloud.kuaiyuman.cn';

haha-admin-mp/src/utils/constants.ts

@@ -20,10 +20,10 @@ export const OrderStatusText: Record<number, string> = {
 };
 
 export const OrderStatusColor: Record<number, string> = {
-  [OrderStatus.CANCELLED]: '#999999',
-  [OrderStatus.PENDING_PAYMENT]: '#faad14',
-  [OrderStatus.COMPLETED]: '#52c41a',
-  [OrderStatus.CLOSED]: '#666666'
+  [OrderStatus.CANCELLED]: '#94a3b8',
+  [OrderStatus.PENDING_PAYMENT]: '#f59e0b',
+  [OrderStatus.COMPLETED]: '#10b981',
+  [OrderStatus.CLOSED]: '#64748b'
 };
 
 // ==================== 设备状态 ====================
@@ -43,10 +43,10 @@ export const DeviceStatusText: Record<number, string> = {
 };
 
 export const DeviceStatusColor: Record<number, string> = {
-  [DeviceStatus.ONLINE]: '#52c41a',
-  [DeviceStatus.OFFLINE]: '#999999',
-  [DeviceStatus.MAINTENANCE]: '#faad14',
-  [DeviceStatus.ERROR]: '#ff4d4f'
+  [DeviceStatus.ONLINE]: '#10b981',
+  [DeviceStatus.OFFLINE]: '#94a3b8',
+  [DeviceStatus.MAINTENANCE]: '#f59e0b',
+  [DeviceStatus.ERROR]: '#ef4444'
 };
 
 // ==================== 商品状态 ====================
@@ -64,9 +64,9 @@ export const ProductStatusText: Record<number, string> = {
 };
 
 export const ProductStatusColor: Record<number, string> = {
-  [ProductStatus.ACTIVE]: '#52c41a',
-  [ProductStatus.INACTIVE]: '#999999',
-  [ProductStatus.OUT_OF_STOCK]: '#ff4d4f'
+  [ProductStatus.ACTIVE]: '#10b981',
+  [ProductStatus.INACTIVE]: '#94a3b8',
+  [ProductStatus.OUT_OF_STOCK]: '#ef4444'
 };
 
 // ==================== 库存状态 ====================
@@ -98,9 +98,9 @@ export const ShopStatusText: Record<number, string> = {
 };
 
 export const ShopStatusColor: Record<number, string> = {
-  [ShopStatus.ACTIVE]: '#52c41a',
-  [ShopStatus.INACTIVE]: '#999999',
-  [ShopStatus.MAINTENANCE]: '#faad14'
+  [ShopStatus.ACTIVE]: '#10b981',
+  [ShopStatus.INACTIVE]: '#94a3b8',
+  [ShopStatus.MAINTENANCE]: '#f59e0b'
 };
 
 // ==================== 用户/客户状态 ====================

haha-admin-mp/src/utils/logger.ts

@@ -0,0 +1,18 @@
+/**
+ * 轻量日志工具
+ */
+const isDev = process.env.NODE_ENV === 'development';
+
+export const logger = {
+  log(...args: any[]) {
+    if (isDev) {
+      console.log(...args);
+    }
+  },
+  warn(...args: any[]) {
+    console.warn(...args);
+  },
+  error(...args: any[]) {
+    console.error(...args);
+  }
+};