feat(theme): 实现日夜主题自动切换功能

- 添加日夜主题CSS变量定义，支持琥珀夜光和暖白琥珀两种风格
- 实现主题切换逻辑，根据时间自动切换白天(light)和夜间(dark)主题
- 在App.vue中集成主题初始化和token恢复功能
- 更新全局样式类应用主题颜色变量，包括卡片、文本、边框等
- 创建主题混入(mixin)供各页面使用，确保主题同步更新
- 实现导航栏和TabBar主题动态切换，提升用户体验
- 添加API服务层封装HaveADrink SDK，统一处理认证和请求
- 优化DrinkCard组件显示饮酒感受信息，丰富打卡记录展示
- 更新项目依赖配置，集成新的API客户端库

App.vue

@@ -1,15 +1,14 @@
 <script>
+import { getCurrentTheme, applyTheme } from './common/utils'
+import client, { refreshAuthToken } from './common/api'
+
 export default {
   onLaunch() {
     console.log('喝了么 App Launch')
-    // 初始化Mock数据(仅首次)
-    const hasData = uni.getStorageSync('drink_records')
-    if (!hasData) {
-      import('./common/mock-data').then(({ initMockData }) => {
-        initMockData()
-        console.log('Mock数据已初始化')
-      })
-    }
+    // 初始化主题
+    this.initTheme()
+    // 尝试刷新 token
+    this.restoreAuth()
     // 数据迁移：清除旧版 logo.png 头像引用
     this.migrateUserData()
     // 启动路由守卫
@@ -17,11 +16,36 @@ export default {
   },
   onShow() {
     console.log('App Show')
+    // 每次回到前台刷新主题（时间可能已变化）
+    this.initTheme()
   },
   onHide() {
     console.log('App Hide')
   },
   methods: {
+    // 初始化并应用日夜主题
+    initTheme() {
+      const theme = getCurrentTheme()
+      applyTheme(theme)
+      // 同步设置page元素背景色
+      const bgColor = theme === 'light' ? '#FAF7F2' : '#0B0B14'
+      try {
+        uni.setBackgroundColor({
+          backgroundColor: bgColor,
+          backgroundColorTop: bgColor,
+          backgroundColorBottom: bgColor
+        })
+      } catch (e) {}
+    },
+    // 恢复登录态：从缓存恢复 token 并尝试刷新
+    async restoreAuth() {
+      const token = uni.getStorageSync('auth_token')
+      if (token) {
+        client.setToken(token)
+        // 后台尝试刷新 token（静默，不阻塞启动）
+        refreshAuthToken().catch(() => {})
+      }
+    },
     // 数据迁移：清除旧版 logo.png 头像引用
     migrateUserData() {
       try {
@@ -72,11 +96,13 @@ page {
 .page-container {
   min-height: 100vh;
   background-color: $bg-base;
+  color: $text-primary;
   padding-bottom: env(safe-area-inset-bottom);
 }
 
 .card {
   background-color: $bg-card;
+  color: $text-primary;
   border-radius: $radius-lg;
   padding: $sp-lg;
   box-shadow: $shadow-sm;
@@ -84,6 +110,7 @@ page {
 
 .card-elevated {
   background-color: $bg-elevated;
+  color: $text-primary;
   border-radius: $radius-lg;
   padding: $sp-lg;
   box-shadow: $shadow-md;
@@ -95,36 +122,42 @@ page {
   font-weight: $fw-black;
   line-height: $lh-tight;
   letter-spacing: -2rpx;
+  color: $text-primary;
 }
 
 .text-display {
   font-size: $fs-3xl;
   font-weight: $fw-black;
   line-height: $lh-tight;
+  color: $text-primary;
 }
 
 .text-h1 {
   font-size: $fs-2xl;
   font-weight: $fw-bold;
   line-height: $lh-tight;
+  color: $text-primary;
 }
 
 .text-h2 {
   font-size: $fs-xl;
   font-weight: $fw-bold;
   line-height: $lh-tight;
+  color: $text-primary;
 }
 
 .text-h3 {
   font-size: $fs-lg;
   font-weight: $fw-medium;
   line-height: $lh-normal;
+  color: $text-primary;
 }
 
 .text-body {
   font-size: $fs-base;
   font-weight: $fw-normal;
   line-height: $lh-normal;
+  color: $text-primary;
 }
 
 .text-caption {
@@ -195,7 +228,7 @@ page {
   font-weight: $fw-medium;
   padding: $sp-md $sp-xl;
   border-radius: $radius-full;
-  border: 2rpx solid rgba(255, 255, 255, 0.08);
+  border: 2rpx solid var(--border-subtle, rgba(255, 255, 255, 0.10));
   transition: all $duration-fast $ease-out;
   display: flex;
   align-items: center;
@@ -252,7 +285,7 @@ page {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+    background: linear-gradient(90deg, transparent, var(--btn-shimmer, rgba(255, 255, 255, 0.15)), transparent);
     animation: shimmer 3s infinite;
   }
 
@@ -287,7 +320,7 @@ page {
 /* --- 分隔线 --- */
 .divider {
   height: 2rpx;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
+  background: linear-gradient(90deg, transparent, var(--divider-color, rgba(255, 255, 255, 0.08)), transparent);
   margin: $sp-lg 0;
 }
 
@@ -330,7 +363,7 @@ page {
   padding: $sp-sm;
   font-size: $fs-xs;
   color: $text-tertiary;
-  background-color: rgba(255, 255, 255, 0.02);
+  background-color: var(--bg-subtle, rgba(255, 255, 255, 0.03));
 
   text {
     opacity: 0.5;

common/api.js

@@ -0,0 +1,143 @@
+/* 喝了么 - API 服务层
+ * 基于 HaveADrink SDK 封装后端接口
+ */
+import HaveADrink from 'HaveADrink'
+
+// ==========================================
+// 后端服务地址（切换环境只需改这里）
+// ==========================================
+const API_HOST = 'https://dev.wash-painting.cn'
+
+// ==========================================
+// HTTP 请求函数（供 SDK 内部调用）
+// 参考 goodBooth 项目的 fetchsomething
+// ==========================================
+function httpRequest(url, params) {
+  console.log('[API] Request:', params.method, url, 'data:', JSON.stringify(params.data))
+  return new Promise((resolve, reject) => {
+    // 自动注入 Authorization token
+    const headers = Object.assign({}, params.headers || {})
+    const token = uni.getStorageSync('auth_token')
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`
+    }
+
+    uni.request({
+      url: url,
+      method: params.method,
+      params: params.query || undefined,
+      data: params.data,
+      header: headers,
+      success: (res) => {
+        const code = res.statusCode
+        if (code === 200 || code === 201 || code === 204) {
+          resolve(res.data)
+        } else if (code === 401) {
+          // token 过期，清除登录态并跳转登录页
+          uni.removeStorageSync('auth_token')
+          uni.removeStorageSync('refresh_token')
+          uni.removeStorageSync('is_logged_in')
+          uni.reLaunch({ url: '/pages/login/login' })
+          reject({ msg: '登录已过期，请重新登录' })
+        } else {
+          const errMsg = (res.data && res.data.msg) || (res.data && res.data.errmsg) || `请求失败(${code})`
+          reject({ msg: errMsg, code })
+        }
+      },
+      fail: (err) => {
+        reject({ msg: err.errMsg || '网络请求失败' })
+      }
+    })
+  })
+}
+
+// ==========================================
+// 文件上传函数（供 SDK 内部调用）
+// ==========================================
+function uploadRequest(url, params) {
+  return new Promise((resolve, reject) => {
+    const headers = Object.assign({}, params.headers || {})
+    const token = uni.getStorageSync('auth_token')
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`
+    }
+
+    uni.uploadFile({
+      url: url,
+      filePath: params.data.fileName || params.data.filePath,
+      name: params.data.name || 'file',
+      header: headers,
+      formData: params.data.formData || {},
+      success: (uploadRes) => {
+        try {
+          const data = typeof uploadRes.data === 'string'
+            ? JSON.parse(uploadRes.data)
+            : uploadRes.data
+          resolve(data)
+        } catch (e) {
+          resolve(uploadRes.data)
+        }
+      },
+      fail: (err) => {
+        reject({ msg: err.errMsg || '上传失败' })
+      }
+    })
+  })
+}
+
+// ==========================================
+// 初始化 SDK 实例
+// ==========================================
+const client = new HaveADrink({
+  host: API_HOST,
+  http_request: httpRequest,
+  upload: uploadRequest,
+  token: uni.getStorageSync('auth_token') || ''
+})
+
+// ==========================================
+// 导出 SDK 实例（各页面直接 import 使用）
+// ==========================================
+export default client
+
+// ==========================================
+// Token 管理辅助函数
+// ==========================================
+
+/** 登录成功后保存 token 并同步到 SDK */
+export function saveAuthTokens(data) {
+  if (data.token) {
+    uni.setStorageSync('auth_token', data.token)
+    client.setToken(data.token)
+  }
+  if (data.refresh_token) {
+    uni.setStorageSync('refresh_token', data.refresh_token)
+  }
+}
+
+/** 清除所有认证信息 */
+export function clearAuth() {
+  uni.removeStorageSync('auth_token')
+  uni.removeStorageSync('refresh_token')
+  uni.removeStorageSync('is_logged_in')
+  uni.removeStorageSync('is_guest')
+  uni.removeStorageSync('user_info')
+  client.setToken('')
+}
+
+/** 尝试用 refresh_token 刷新 token */
+export async function refreshAuthToken() {
+  const refreshToken = uni.getStorageSync('refresh_token')
+  if (!refreshToken) return false
+  try {
+    const res = await client.RefreshToken({ refresh_token: refreshToken })
+    if (res && res.token) {
+      saveAuthTokens(res)
+      return true
+    }
+    return false
+  } catch (e) {
+    console.warn('刷新 token 失败:', e)
+    return false
+  }
+}

common/theme-mixin.js

@@ -0,0 +1,28 @@
+/* 喝了么 - 主题混入 (Theme Mixin)
+ * 每个页面混入此mixin，自动在onShow时刷新日夜主题
+ * 页面根视图需绑定 :class="themeClass"
+ */
+import { getCurrentTheme, applyTheme } from './utils'
+
+export default {
+  data() {
+    return {
+      themeClass: 'theme-dark',
+      currentTheme: 'dark'
+    }
+  },
+  created() {
+    this._refreshTheme()
+  },
+  onShow() {
+    this._refreshTheme()
+  },
+  methods: {
+    _refreshTheme() {
+      const theme = getCurrentTheme()
+      this.currentTheme = theme
+      this.themeClass = theme === 'light' ? 'theme-light' : 'theme-dark'
+      applyTheme(theme)
+    }
+  }
+}

common/utils.js

@@ -190,6 +190,89 @@ export function calcStats(records) {
   }
 }
 
+/**
+ * 主题系统：日夜自动切换
+ * 白天：6:00-16:00 → light
+ * 夜间：16:00-6:00 → dark
+ */
+export function getCurrentTheme() {
+  const hour = new Date().getHours()
+  return (hour >= 6 && hour < 16) ? 'light' : 'dark'
+}
+
+export function applyTheme(theme) {
+  // 同步存储当前主题
+  uni.setStorageSync('current_theme', theme)
+  // 应用导航栏和TabBar主题
+  applyNavBarTheme(theme)
+  applyTabBarTheme(theme)
+}
+
+export function applyNavBarTheme(theme) {
+  const colors = {
+    dark: { backgroundColor: '#0B0B14', frontColor: '#ffffff' },
+    light: { backgroundColor: '#FAF7F2', frontColor: '#000000' }
+  }
+  const c = colors[theme] || colors.dark
+  try {
+    uni.setNavigationBarColor({
+      frontColor: c.frontColor,
+      backgroundColor: c.backgroundColor,
+      animation: { duration: 300, timingFunc: 'easeInOut' }
+    })
+  } catch (e) {}
+}
+
+export function applyTabBarTheme(theme) {
+  // 仅在 tabBar 页面上调用 setTabBarStyle，避免报错
+  const tabBarPages = ['pages/index/index', 'pages/profile/profile']
+  const pages = getCurrentPages()
+  if (!pages.length) return
+  const currentPath = pages[pages.length - 1].route
+  if (!tabBarPages.includes(currentPath)) return
+
+  const styles = {
+    dark: {
+      color: '#9494AC',
+      selectedColor: '#E8A838',
+      backgroundColor: '#151520',
+      borderStyle: 'black'
+    },
+    light: {
+      color: '#B5AEA0',
+      selectedColor: '#D49530',
+      backgroundColor: '#FFFFFF',
+      borderStyle: 'white'
+    }
+  }
+  const s = styles[theme] || styles.dark
+  try {
+    uni.setTabBarStyle({
+      color: s.color,
+      selectedColor: s.selectedColor,
+      backgroundColor: s.backgroundColor,
+      borderStyle: s.borderStyle
+    })
+  } catch (e) {}
+}
+
+export function getThemeColors(theme) {
+  const isDark = theme !== 'light'
+  return {
+    textPrimary: isDark ? '#FFFFFF' : '#2C2416',
+    textSecondary: isDark ? '#C0C0D2' : '#8C8474',
+    textTertiary: isDark ? '#9494AC' : '#B5AEA0',
+    amber: isDark ? '#E8A838' : '#D49530',
+    bgBase: isDark ? '#0B0B14' : '#FAF7F2',
+    bgCard: isDark ? '#1A1A28' : '#FFFFFF',
+    cardGradStart: isDark ? '#1A1510' : '#F5F0E8',
+    cardGradEnd: isDark ? '#0D0B08' : '#EDE8DF',
+    borderSubtle: isDark ? 'rgba(232,168,56,0.15)' : 'rgba(212,149,48,0.2)',
+    bgPlaceholder: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.04)',
+    emojiBg: isDark ? 'rgba(232,168,56,0.08)' : 'rgba(212,149,48,0.1)'
+  }
+}
+
 /**
  * 检查成就解锁
  */

components/AchievementBadge.vue

@@ -66,7 +66,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 3rpx solid rgba(255,255,255,0.06);
+  border: 3rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
   position: relative;
 }
 

components/DrinkCalendar.vue

@@ -126,6 +126,7 @@ export default {
   font-size: $fs-lg;
   font-weight: $fw-bold;
   font-family: $font-num;
+  color: $text-primary;
 }
 
 .cal-weekdays {
@@ -205,7 +206,7 @@ export default {
 
 /* 饮酒日高亮背景 */
 .cal-cell-drank {
-  background: rgba(232, 168, 56, 0.08);
+  background: var(--amber-glow, rgba(232, 168, 56, 0.15));
 }
 
 .cal-cell-abstain {

components/DrinkCard.vue

@@ -34,7 +34,7 @@
     <view class="drink-list">
       <view v-for="(drink, i) in record.drinks" :key="i" class="drink-row">
         <text class="drink-name">{{ getCatEmoji(drink.category) }} {{ drink.brand }}</text>
-        <text class="drink-detail">{{ formatAmount(drink) }}·{{ drink.standardCups }}杯</text>
+        <text class="drink-detail">{{ formatAmount(drink) }}</text>
       </view>
       <view v-if="record.food" class="drink-row">
         <text class="drink-name">🍲 {{ getFoodName() }}</text>
@@ -42,6 +42,11 @@
       </view>
     </view>
 
+    <!-- 饮酒感受 -->
+    <view v-if="feelingLabel" class="feeling-row">
+      <text class="feeling-text">{{ feelingLabel }}</text>
+    </view>
+
     <!-- 分割线 -->
     <view class="divider"></view>
 
@@ -63,7 +68,7 @@
 </template>
 
 <script>
-import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES } from '../common/constants'
+import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES, FEELINGS } from '../common/constants'
 
 const UNIT_NAMES = { ml: 'ml', liang: '两', bottle: '瓶', cup: '杯', can: '听', shot: 'shot' }
 
@@ -83,6 +88,10 @@ export default {
     mainEmoji() {
       const first = (this.record.drinks || [])[0]
       return first ? this.getCatEmoji(first.category) : '🥃'
+    },
+    feelingLabel() {
+      const f = FEELINGS.find(fe => fe.id === this.record.feeling)
+      return f ? `${f.emoji} ${f.name}` : ''
     }
   },
   methods: {
@@ -109,9 +118,9 @@ export default {
   width: 620rpx;
   border-radius: 32rpx;
   overflow: hidden;
-  background: linear-gradient(170deg, #1A1510 0%, #0D0B08 100%);
-  border: 2rpx solid rgba(232, 168, 56, 0.15);
-  box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.5), 0 0 60rpx rgba(232, 168, 56, 0.06);
+  background: linear-gradient(170deg, var(--card-gradient-start, #1A1510) 0%, var(--card-gradient-end, #0D0B08) 100%);
+  border: 2rpx solid var(--border-subtle, rgba(255, 255, 255, 0.10));
+  box-shadow: var(--shadow-lg, 0 16rpx 48rpx rgba(0, 0, 0, 0.45)), 0 0 60rpx var(--amber-glow, rgba(232, 168, 56, 0.15));
   display: flex;
   flex-direction: column;
 }
@@ -213,6 +222,19 @@ export default {
   margin-left: $sp-md;
 }
 
+/* 饮酒感受 */
+.feeling-row {
+  padding: $sp-sm $sp-xl 0;
+  display: flex;
+  align-items: center;
+}
+.feeling-text {
+  font-size: $fs-base;
+  color: $amber;
+  font-weight: $fw-medium;
+  letter-spacing: 2rpx;
+}
+
 /* 分割线 */
 .divider {
   margin: $sp-lg $sp-xl;
@@ -265,7 +287,7 @@ export default {
   width: 80rpx;
   height: 80rpx;
   border-radius: $radius-sm;
-  border: 2rpx solid rgba(232, 168, 56, 0.15);
-  background: rgba(255, 255, 255, 0.03);
+  border: 2rpx solid var(--border-subtle, rgba(255, 255, 255, 0.10));
+  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
 }
 </style>

node_modules/.package-lock.json

@@ -0,0 +1,13 @@
+{
+  "name": "hejiu",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "node_modules/HaveADrink": {
+      "version": "1.0.2",
+      "resolved": "https://npm.wash-painting.cn/HaveADrink/-/HaveADrink-1.0.2.tgz",
+      "integrity": "sha512-rhcILwsr6F1SBK7z+C4HMemUHHd63pl5ggxHisky0ZDgCOL7bITf3TGgvoiqXRoAGe4qmV+4FT8E6oCbvD1PIg==",
+      "license": "ISC"
+    }
+  }
+}

node_modules/HaveADrink/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "HaveADrink",
+  "type": "module",
+  "version": "v1.0.2",
+  "description": "喝酒了么 API 服务",
+  "main": "index.js",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "cuishu",
+  "license": "ISC",
+  "publishConfig": {
+    "registry": "https://npm.wash-painting.cn"
+  }
+}

package-lock.json

@@ -0,0 +1,18 @@
+{
+  "name": "hejiu",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "HaveADrink": "^1.0.2"
+      }
+    },
+    "node_modules/HaveADrink": {
+      "version": "1.0.2",
+      "resolved": "https://npm.wash-painting.cn/HaveADrink/-/HaveADrink-1.0.2.tgz",
+      "integrity": "sha512-rhcILwsr6F1SBK7z+C4HMemUHHd63pl5ggxHisky0ZDgCOL7bITf3TGgvoiqXRoAGe4qmV+4FT8E6oCbvD1PIg==",
+      "license": "ISC"
+    }
+  }
+}

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "HaveADrink": "^1.0.2"
+  }
+}

pages.json

@@ -52,7 +52,7 @@
 		"backgroundColorBottom": "#0B0B14"
 	},
 	"tabBar": {
-		"color": "#4A4A62",
+		"color": "#9494AC",
 		"selectedColor": "#E8A838",
 		"backgroundColor": "#151520",
 		"borderStyle": "black",

pages/card/card.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-container card-page">
+  <view :class="themeClass" class="page-container card-page">
     <view class="card-nav">
       <view class="step-back" @click="goBack">
         <text class="step-back-arrow">‹</text>
@@ -29,12 +29,16 @@
 
 <script>
 import DrinkCard from '../../components/DrinkCard.vue'
+import client from '../../common/api'
 import { getRecords } from '../../common/mock-data'
-import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES } from '../../common/constants'
+import { getThemeColors, calcStandardCups, unitToMl } from '../../common/utils'
+import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES, FEELINGS } from '../../common/constants'
+import themeMixin from '../../common/theme-mixin'
 
 const UNIT_NAMES = { ml: 'ml', liang: '两', bottle: '瓶', cup: '杯', can: '听', shot: 'shot' }
 
 export default {
+  mixins: [themeMixin],
   components: { DrinkCard },
   data() {
     return {
@@ -43,12 +47,57 @@ export default {
       saved: false
     }
   },
-  onLoad(options) {
-    const records = getRecords()
-    if (options && options.recordId) this.record = records.find(r => r.id === options.recordId)
-    if (!this.record) this.record = records.find(r => r.mode === 'drank') || this.fallback()
+  async onLoad(options) {
+    if (options && options.recordId) {
+      try {
+        const resp = await client.GetRecordDetail({ id: options.recordId })
+        const rec = resp.data || resp
+        if (rec) {
+          this.record = {
+            ...rec,
+            mode: String(rec.mode),
+            feeling: rec.feeling ? String(rec.feeling) : null,
+            visibility: rec.visibility ? String(rec.visibility) : 'private',
+            drinks: (rec.drinks || []).map(d => ({
+              ...d,
+              category: String(d.category),
+              unit: String(d.unit)
+            }))
+          }
+        }
+      } catch (e) {
+        console.warn('获取记录详情失败，降级本地:', e)
+      }
+    }
+    if (!this.record) this.record = this.loadLocalRecord(options.recordId) || this.fallback()
   },
   methods: {
+    loadLocalRecord(id) {
+      if (!id) return null
+      try {
+        const records = getRecords()
+        const found = records.find(r => r.id === id)
+        if (!found) return null
+        return {
+          ...found,
+          mode: String(found.mode || 'drank'),
+          feeling: found.feeling ? String(found.feeling) : null,
+          visibility: found.visibility ? String(found.visibility) : 'private',
+          drinks: (found.drinks || []).map(d => {
+            const ml = unitToMl(d.amount || 0, d.unit || 'ml')
+            return {
+              ...d,
+              category: String(d.category || d.categoryId || ''),
+              unit: String(d.unit || 'ml'),
+              standardCups: d.standardCups || calcStandardCups(ml, d.degree || 0)
+            }
+          })
+        }
+      } catch (e) {
+        console.warn('读取本地记录失败:', e)
+        return null
+      }
+    },
     fallback() {
       return {
         date: new Date().toISOString().slice(0, 10), mode: 'drank',
@@ -86,10 +135,11 @@ export default {
       const W = 750, H = 1600
       const rec = this.record
 
-      const WHITE = '#F2F2F2'
-      const SUB = '#7E7E96'
-      const DIM = '#4A4A62'
-      const AMBER = '#E8A838'
+      const colors = getThemeColors(this.currentTheme)
+      const WHITE = colors.textPrimary
+      const SUB = colors.textSecondary
+      const DIM = colors.textTertiary
+      const AMBER = colors.amber
       const F = '-apple-system, PingFang SC, Helvetica Neue, sans-serif'
 
       const cardW = W
@@ -116,12 +166,13 @@ export default {
       const drinks = rec.drinks || []
       const drinkH = drinks.length * 52
       const foodH = rec.food ? 52 : 0
-      const cardH = 48 + 56 + photoAreaH + 32 + drinkH + foodH + 16 + 40 + 36 + 56 + 80 + 40
+      const feelingH = rec.feeling ? 48 : 0
+      const cardH = 48 + 56 + photoAreaH + 32 + drinkH + foodH + feelingH + 16 + 40 + 36 + 56 + 80 + 40
 
       // 卡片背景渐变（填满整个画布）
       const grad = ctx.createLinearGradient(0, 0, cardW, cardY + cardH)
-      grad.addColorStop(0, '#1A1510')
-      grad.addColorStop(1, '#0D0B08')
+      grad.addColorStop(0, colors.cardGradStart)
+      grad.addColorStop(1, colors.cardGradEnd)
       ctx.setFillStyle(grad)
       ctx.fillRect(0, 0, W, cardH)
 
@@ -148,7 +199,7 @@ export default {
           if (imgs[0]) {
             try { ctx.drawImage(imgs[0], P, y, maxW, heroH) } catch (e) {}
           } else {
-            ctx.setFillStyle('rgba(255,255,255,0.03)')
+            ctx.setFillStyle(colors.bgPlaceholder)
             ctx.fillRect(P, y, maxW, heroH)
           }
           ctx.restore()
@@ -193,7 +244,7 @@ export default {
             if (imgs[i]) {
               try { ctx.drawImage(imgs[i], pos.x, pos.y, pos.w, pos.h) } catch (e) {}
             } else {
-              ctx.setFillStyle('rgba(255,255,255,0.03)')
+              ctx.setFillStyle(colors.bgPlaceholder)
               ctx.fillRect(pos.x, pos.y, pos.w, pos.h)
             }
             ctx.restore()
@@ -203,7 +254,7 @@ export default {
         // emoji 圆形
         const eR = 100
         const eCx = W / 2, eCy = y + eR
-        ctx.setFillStyle('rgba(232,168,56,0.08)')
+        ctx.setFillStyle(colors.emojiBg)
         ctx.beginPath()
         ctx.arc(eCx, eCy, eR, 0, Math.PI * 2)
         ctx.fill()
@@ -222,7 +273,7 @@ export default {
         const emoji = cat ? cat.emoji : '🥃'
         const name = `${emoji} ${d.brand}`
         const unitName = UNIT_NAMES[d.unit] || d.unit
-        const detail = `${d.amount}${unitName}·${d.standardCups}杯`
+        const detail = `${d.amount}${unitName}`
 
         ctx.font = `500 28px ${F}`
         ctx.setFillStyle(WHITE)
@@ -246,11 +297,24 @@ export default {
         y += 52
       }
 
+      // 饮酒感受
+      if (rec.feeling) {
+        const feeling = FEELINGS.find(f => f.id === rec.feeling)
+        if (feeling) {
+          y += 8
+          const feelingText = `${feeling.emoji} ${feeling.name}`
+          ctx.font = `500 26px ${F}`
+          ctx.setFillStyle(AMBER)
+          ctx.fillText(feelingText, P, y)
+          y += 40
+        }
+      }
+
       // 分割线（渐变）
       y += 16
       const lineGrad = ctx.createLinearGradient(P, y, W - P, y)
       lineGrad.addColorStop(0, 'transparent')
-      lineGrad.addColorStop(0.5, 'rgba(232,168,56,0.15)')
+      lineGrad.addColorStop(0.5, colors.borderSubtle)
       lineGrad.addColorStop(1, 'transparent')
       ctx.setStrokeStyle(lineGrad)
       ctx.setLineWidth(2)
@@ -290,10 +354,10 @@ export default {
       const qrSize = 80
       const qrX = W - P - qrSize
       const qrY = y - 30
-      ctx.setStrokeStyle('rgba(232,168,56,0.15)')
+      ctx.setStrokeStyle(colors.borderSubtle)
       ctx.setLineWidth(2)
       this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'stroke')
-      ctx.setFillStyle('rgba(255,255,255,0.03)')
+      ctx.setFillStyle(colors.bgPlaceholder)
       this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'fill')
 
       return new Promise(resolve => {
@@ -453,7 +517,7 @@ export default {
   border-radius: $radius-full;
   font-size: $fs-base;
   background: transparent;
-  border: 2rpx solid rgba(255, 255, 255, 0.1);
+  border: 2rpx solid var(--border-active, rgba(255, 255, 255, 0.12));
   color: $text-secondary;
   display: flex;
   align-items: center;

pages/index/index.vue

@@ -1,15 +1,11 @@
 <template>
-  <view class="page-container home">
+  <view :class="themeClass" class="page-container home">
     <!-- 顶部问候 -->
     <view class="greeting-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
       <view class="greeting-left">
         <text class="greeting-text">{{ greeting }}，{{ userName }}</text>
         <text class="greeting-sub">今晚喝一杯？</text>
       </view>
-      <image v-if="userAvatar" class="avatar" :src="userAvatar" mode="aspectFill"></image>
-      <view v-else class="avatar avatar-placeholder">
-        <text class="avatar-placeholder-icon">👤</text>
-      </view>
     </view>
 
     <!-- 核心CTA - 首页最醒目位置 -->
@@ -121,11 +117,13 @@
 
 <script>
 import DrinkCalendar from '../../components/DrinkCalendar.vue'
-import { getRecords, getUserInfo } from '../../common/mock-data'
-import { calcStats, getGreeting, formatDate, getWeekStart } from '../../common/utils'
+import client from '../../common/api'
+import { getGreeting, formatDate, getWeekStart } from '../../common/utils'
 import { FEELINGS } from '../../common/constants'
+import themeMixin from '../../common/theme-mixin'
 
 export default {
+  mixins: [themeMixin],
   components: { DrinkCalendar },
   data() {
     const now = new Date()
@@ -138,7 +136,6 @@ export default {
       stats: {},
       greeting: '',
       userName: '',
-      userAvatar: '',
       showDayDetail: false,
       selectedDate: '',
       selectedRecord: null
@@ -167,17 +164,100 @@ export default {
     this.loadData()
   },
   methods: {
-    loadData() {
-      this.records = getRecords()
-      const user = getUserInfo()
-      this.userName = user.nickname || '酒友'
-      this.userAvatar = user.avatar || ''
+    async loadData() {
       this.greeting = getGreeting()
-      this.stats = calcStats(this.records)
+      // 并行加载用户信息、统计概览、记录列表
+      try {
+        const [userResp, statsResp, recordsResp] = await Promise.allSettled([
+          client.GetUserProfile({}),
+          client.GetStatsOverview({}),
+          client.GetRecords({ page: 1, pageSize: 100 })
+        ])
+
+        // 用户信息
+        if (userResp.status === 'fulfilled' && userResp.value) {
+          const user = userResp.value
+          this.userName = user.nickname || '酒友'
+          uni.setStorageSync('user_info', JSON.stringify(user))
+        } else {
+          // 降级读取本地缓存
+          try {
+            const cached = JSON.parse(uni.getStorageSync('user_info') || '{}')
+            this.userName = cached.nickname || '酒友'
+          } catch (e) {
+            this.userName = '酒友'
+          }
+        }
+
+        // 统计概览
+        if (statsResp.status === 'fulfilled' && statsResp.value) {
+          const s = statsResp.value.data || statsResp.value
+          this.stats = {
+            weekDrinkCount: s.weekDrinkCount || 0,
+            weekCups: s.weekCups || 0,
+            monthDrinkCount: s.monthDrinkCount || 0,
+            monthCups: s.monthCups || 0,
+            streak: s.streak || 0,
+            streakType: String(s.streakType || 'drank'),
+            totalDays: s.totalDays || 0,
+            totalRecords: s.totalRecords || 0,
+            totalCups: s.totalCups || 0,
+            favCategory: s.favCategory ? String(s.favCategory) : null,
+            categoryVariety: s.categoryVariety || 0
+          }
+        }
+
+        // 记录列表
+        if (recordsResp.status === 'fulfilled' && recordsResp.value) {
+          const list = recordsResp.value.list || recordsResp.value
+          this.records = Array.isArray(list) ? list.map(r => ({
+            ...r,
+            mode: String(r.mode),
+            feeling: r.feeling ? String(r.feeling) : null,
+            visibility: r.visibility ? String(r.visibility) : 'private',
+            drinks: (r.drinks || []).map(d => ({
+              ...d,
+              category: String(d.category),
+              unit: String(d.unit)
+            }))
+          })) : []
+        }
+      } catch (e) {
+        console.warn('加载首页数据失败:', e)
+        // 降级：读取本地缓存
+        try {
+          const cached = JSON.parse(uni.getStorageSync('user_info') || '{}')
+          this.userName = cached.nickname || '酒友'
+        } catch (err) {
+          this.userName = '酒友'
+        }
+      }
     },
     onMonthChange({ year, month }) {
       this.calendarYear = year
       this.calendarMonth = month
+      // 切换月份时重新加载记录
+      this.loadRecordsForMonth(year, month)
+    },
+    async loadRecordsForMonth(year, month) {
+      try {
+        const monthStr = `${year}-${String(month).padStart(2, '0')}`
+        const resp = await client.GetRecords({ page: 1, pageSize: 100, month: monthStr })
+        const list = resp.list || resp
+        this.records = Array.isArray(list) ? list.map(r => ({
+          ...r,
+          mode: String(r.mode),
+          feeling: r.feeling ? String(r.feeling) : null,
+          visibility: r.visibility ? String(r.visibility) : 'private',
+          drinks: (r.drinks || []).map(d => ({
+            ...d,
+            category: String(d.category),
+            unit: String(d.unit)
+          }))
+        })) : []
+      } catch (e) {
+        console.warn('加载月度记录失败:', e)
+      }
     },
     onDateSelect(dateStr) {
       this.selectedDate = dateStr
@@ -240,8 +320,7 @@ export default {
 
 .greeting-bar {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   padding: $sp-md 0 $sp-sm;
 }
 
@@ -249,6 +328,7 @@ export default {
   display: block;
   font-size:38rpx;
   font-weight: $fw-bold;
+  color: $text-primary;
 }
 
 .greeting-sub {
@@ -258,27 +338,6 @@ export default {
   margin-top: 4rpx;
 }
 
-.avatar {
-  width: 72rpx;
-  height: 72rpx;
-  border-radius: $radius-full;
-  border: 4rpx solid $amber-glow;
-  flex-shrink: 0;
-}
-
-.avatar-placeholder {
-  background: $bg-elevated;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 4rpx dashed rgba(232,168,56,0.3);
-}
-
-.avatar-placeholder-icon {
-  font-size: 40rpx;
-  opacity: 0.5;
-}
-
 .calendar-section {
   margin-bottom: $sp-md;
   padding: $sp-md;
@@ -299,6 +358,7 @@ export default {
 .stat-value {
   display: block;
   font-size: $fs-xl;
+  color: $text-primary;
   margin-bottom: 4rpx;
 }
 
@@ -328,6 +388,7 @@ export default {
   display: block;
   font-size: $fs-xl;
   font-weight: $fw-bold;
+  color: $text-primary;
   margin-bottom: 4rpx;
 }
 
@@ -338,7 +399,7 @@ export default {
 
 .week-divider {
   width: 2rpx;
-  background: rgba(255,255,255,0.06);
+  background: var(--divider-color, rgba(255, 255, 255, 0.08));
   margin: $sp-xs 0;
 }
 
@@ -395,7 +456,7 @@ export default {
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
+    background: linear-gradient(90deg, transparent, var(--btn-shimmer, rgba(255, 255, 255, 0.15)), transparent);
     animation: shimmer 4s infinite;
   }
 }
@@ -458,7 +519,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0,0,0,0.6);
+  background: var(--overlay-mask, rgba(0, 0, 0, 0.6));
   display: flex;
   align-items: flex-end;
   z-index: 100;
@@ -468,6 +529,7 @@ export default {
 .day-detail {
   width: 100%;
   padding: $sp-xl;
+  color: $text-primary;
   border-radius: $radius-xl $radius-xl 0 0;
 }
 
@@ -478,7 +540,8 @@ export default {
 .day-drink-item {
   padding: $sp-sm 0;
   font-size: $fs-base;
-  border-bottom: 2rpx solid rgba(255,255,255,0.04);
+  color: $text-primary;
+  border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
 }
 
 .day-meta {
@@ -510,6 +573,6 @@ export default {
   width: 100%;
   font-size: $fs-sm;
   color: $text-secondary;
-  border-color: rgba(255,255,255,0.1);
+  border-color: var(--border-active, rgba(255, 255, 255, 0.12));
 }
 </style>

pages/login/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-container login-page">
+  <view :class="themeClass" class="page-container login-page">
     <!-- 顶部品牌区 -->
     <view class="brand-area">
       <view class="brand-glow"></view>
@@ -99,7 +99,11 @@
 </template>
 
 <script>
+import themeMixin from '../../common/theme-mixin'
+import client, { saveAuthTokens } from '../../common/api'
+
 export default {
+  mixins: [themeMixin],
   data() {
     return {
       showNotice: true,
@@ -138,29 +142,43 @@ export default {
       }
       this.loginLoading = true
       try {
-        // 获取微信登录code（用于后续服务端鉴权）
-        const loginRes = await this.wxLogin().catch(() => null)
+        // 1. 获取微信登录 code
+        const loginRes = await this.wxLogin()
+        if (!loginRes || !loginRes.code) {
+          throw new Error('获取微信code失败')
+        }
+        // 2. 调用后端微信登录接口
+        const loginParams = {
+          code: loginRes.code,
+          nickName: this.nickname.trim() || '',
+          avatarUrl: this.avatarUrl || ''
+        }
+        const resp = await client.WechatLogin(loginParams)
 
+        // 3. 保存 token 和用户信息
+        saveAuthTokens(resp)
+        if (resp.user) {
+          uni.setStorageSync('user_info', JSON.stringify(resp.user))
+        }
+        uni.setStorageSync('is_logged_in', 'true')
+        uni.setStorageSync('is_guest', 'false')
+        uni.setStorageSync('is_first_launch', 'false')
+
+        this.finishLogin()
+      } catch (e) {
+        console.warn('后端登录失败，降级为本地模式:', e)
+        uni.showToast({ title: e.msg || '登录失败，使用本地模式', icon: 'none', duration: 2000 })
+        // 降级为本地登录
         const userInfo = {
           id: `user_${Date.now()}`,
           nickname: this.nickname.trim() || '酒友',
           avatar: this.avatarUrl || '',
-          wxCode: (loginRes && loginRes.code) || '',
-          joinedAt: new Date().toISOString().slice(0, 10),
-          preferences: null
-        }
-        uni.setStorageSync('user_info', JSON.stringify(userInfo))
-        this.finishLogin()
-      } catch (e) {
-        console.warn('登录失败，降级为本地登录:', e)
-        const userInfo = {
-          id: `user_${Date.now()}`,
-          nickname: this.nickname.trim() || '酒友',
-          avatar: '',
           joinedAt: new Date().toISOString().slice(0, 10),
           preferences: null
         }
         uni.setStorageSync('user_info', JSON.stringify(userInfo))
+        uni.setStorageSync('is_logged_in', 'true')
+        uni.setStorageSync('is_first_launch', 'false')
         this.finishLogin()
       } finally {
         this.loginLoading = false
@@ -334,7 +352,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: $sp-sm 0;
-  border-bottom: 2rpx solid rgba(255,255,255,0.04);
+  border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
 }
 
 .avatar-btn {
@@ -432,7 +450,7 @@ export default {
 .login-divider-line {
   flex: 1;
   height: 2rpx;
-  background: rgba(255,255,255,0.06);
+  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
 }
 
 .login-divider-text {

pages/onboarding/onboarding.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-container onboarding">
+  <view :class="themeClass" class="page-container onboarding">
     <!-- 跳过按钮 -->
     <view class="skip-bar">
       <text class="btn-text" @click="goLogin">跳过</text>
@@ -63,7 +63,10 @@
 </template>
 
 <script>
+import themeMixin from '../../common/theme-mixin'
+
 export default {
+  mixins: [themeMixin],
   data() {
     return {
       currentSlide: 0,

pages/profile/profile.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-container profile-page safe-bottom">
+  <view :class="themeClass" class="page-container profile-page safe-bottom">
     <!-- 用户头部 -->
     <view class="profile-header">
       <view class="profile-glow"></view>
@@ -108,11 +108,13 @@
 
 <script>
 import AchievementBadge from '../../components/AchievementBadge.vue'
-import { getRecords, getUserInfo } from '../../common/mock-data'
-import { calcStats, checkAchievements } from '../../common/utils'
+import client, { clearAuth } from '../../common/api'
+import { checkAchievements } from '../../common/utils'
 import { ACHIEVEMENTS, DRINK_CATEGORIES } from '../../common/constants'
+import themeMixin from '../../common/theme-mixin'
 
 export default {
+  mixins: [themeMixin],
   components: { AchievementBadge },
   data() {
     return {
@@ -136,11 +138,67 @@ export default {
     this.loadData()
   },
   methods: {
-    loadData() {
-      this.user = getUserInfo()
-      const records = getRecords()
-      this.stats = calcStats(records)
+    async loadData() {
+      try {
+        const [userResp, statsResp, achieveResp] = await Promise.allSettled([
+          client.GetUserProfile({}),
+          client.GetStatsOverview({}),
+          client.GetAchievements({})
+        ])
+
+        // 用户信息
+        if (userResp.status === 'fulfilled' && userResp.value) {
+          this.user = userResp.value.data || userResp.value
+        } else {
+          try {
+            this.user = JSON.parse(uni.getStorageSync('user_info') || '{}')
+          } catch (e) { this.user = {} }
+        }
+
+        // 统计概览
+        if (statsResp.status === 'fulfilled' && statsResp.value) {
+          const s = statsResp.value.data || statsResp.value
+          this.stats = {
+            weekDrinkCount: s.weekDrinkCount || 0,
+            weekCups: s.weekCups || 0,
+            monthDrinkCount: s.monthDrinkCount || 0,
+            monthCups: s.monthCups || 0,
+            streak: s.streak || 0,
+            streakType: String(s.streakType || 'drank'),
+            totalDays: s.totalDays || 0,
+            totalRecords: s.totalRecords || 0,
+            totalCups: s.totalCups || 0,
+            favCategory: s.favCategory ? String(s.favCategory) : null,
+            categoryVariety: s.categoryVariety || 0
+          }
+        }
+
+        // 成就列表
+        if (achieveResp.status === 'fulfilled' && achieveResp.value) {
+          const list = achieveResp.value.list || achieveResp.value.data || achieveResp.value
+          if (Array.isArray(list) && list.length > 0) {
+            this.achievementList = list.map(a => ({
+              id: a.achievement_id || a.id,
+              name: a.name,
+              desc: a.desc,
+              icon: a.icon,
+              condition: a.condition || '',
+              unlocked: !!a.unlocked
+            }))
+          } else {
+            // API 返回空，降级本地计算
             this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
+          }
+        } else {
+          this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
+        }
+      } catch (e) {
+        console.warn('加载个人数据失败:', e)
+        try {
+          this.user = JSON.parse(uni.getStorageSync('user_info') || '{}')
+        } catch (err) { this.user = {} }
+        this.achievementList = checkAchievements(this.stats, ACHIEVEMENTS)
+      }
     },
     showAchievementDetail(a) {
       this.detailAchievement = a
@@ -172,9 +230,7 @@ export default {
         confirmColor: '#FF6B6B',
         success: (res) => {
           if (res.confirm) {
-            uni.removeStorageSync('is_logged_in')
-            uni.removeStorageSync('is_guest')
-            uni.removeStorageSync('user_info')
+            clearAuth()
             uni.reLaunch({ url: '/pages/login/login' })
           }
         }
@@ -239,6 +295,7 @@ export default {
 .profile-name {
   font-size: $fs-xl;
   font-weight: $fw-bold;
+  color: $text-primary;
   margin-bottom: $sp-xs;
 }
 
@@ -256,6 +313,7 @@ export default {
   display: block;
   font-size: $fs-lg;
   font-weight: $fw-bold;
+  color: $text-primary;
   margin-bottom: $sp-lg;
 }
 
@@ -274,6 +332,7 @@ export default {
   display: block;
   font-size: $fs-2xl;
   font-weight: $fw-bold;
+  color: $text-primary;
   margin-bottom: $sp-xs;
 }
 
@@ -299,6 +358,7 @@ export default {
   display: block;
   font-size: $fs-3xl;
   font-weight: $fw-black;
+  color: $text-primary;
 }
 
 .streak-emoji {
@@ -326,6 +386,7 @@ export default {
   align-items: center;
   gap: $sp-md;
   padding: $sp-lg 0;
+  color: $text-primary;
 
   &:active {
     opacity: 0.7;
@@ -364,7 +425,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0,0,0,0.7);
+  background: var(--overlay-modal, rgba(0, 0, 0, 0.7));
   display: flex;
   align-items: center;
   justify-content: center;

pages/record/record.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-container record-page safe-bottom">
+  <view :class="themeClass" class="page-container record-page safe-bottom">
     <!-- 顶部进度 -->
     <view class="step-header">
       <view class="step-back" @click="handleBack">
@@ -336,9 +336,12 @@ import {
   FEELINGS, VISIBILITY_OPTIONS
 } from '../../common/constants'
 import { calcStandardCups, unitToMl, formatDate } from '../../common/utils'
+import client from '../../common/api'
 import { addRecord } from '../../common/mock-data'
+import themeMixin from '../../common/theme-mixin'
 
 export default {
+  mixins: [themeMixin],
   data() {
     return {
       currentStep: 1,
@@ -548,25 +551,48 @@ export default {
       }
       if (this.currentStep < this.totalSteps) this.currentStep++
     },
-    publishRecord() {
+    async publishRecord() {
       const allDrinks = this.allDrinks.length > 0 ? this.allDrinks : this.drinks
-      const record = {
+      const recordData = {
         date: this.backfillDate || formatDate(new Date(), 'YYYY-MM-DD'),
         mode: 'drank',
-        drinks: allDrinks,
-        food: this.selectedFood ? { category: this.selectedFood, name: this.foodName } : null,
+        drinks: allDrinks.map(d => ({
+          category: d.category,
+          brand: d.brand,
+          product: d.product || '',
+          amount: d.amount,
+          unit: d.unit,
+          degree: d.degree,
+          standardCups: d.standardCups
+        })),
+        food: this.selectedFood ? { category: this.selectedFood, name: this.foodName || '' } : null,
         feeling: this.selectedFeeling || null,
-        photos: this.photos,
+        photos: [],
         visibility: 'friends',
-        standardCupsTotal: this.totalCups
+        quote: ''
       }
 
-      const saved = addRecord(record)
+      try {
+        uni.showLoading({ title: '保存中...' })
+        // 调用后端创建记录
+        const resp = await client.CreateRecord(recordData)
+        const saved = resp.data || resp
+        uni.hideLoading()
 
         // 跳转到卡片页，传递记录ID
         uni.redirectTo({
           url: `/pages/card/card?recordId=${saved.id}`
         })
+      } catch (e) {
+        uni.hideLoading()
+        console.warn('创建记录失败，降级本地保存:', e)
+        uni.showToast({ title: e.msg || '保存失败，已本地保存', icon: 'none', duration: 2000 })
+        // 降级：本地保存
+        const saved = addRecord(recordData)
+        uni.redirectTo({
+          url: `/pages/card/card?recordId=${saved.id}`
+        })
+      }
     }
   }
 }
@@ -575,6 +601,7 @@ export default {
 <style lang="scss" scoped>
 .record-page {
   padding: $sp-lg;
+  color: $text-primary;
   display: flex;
   flex-direction: column;
 }
@@ -639,6 +666,7 @@ export default {
   display: block;
   font-size: $fs-2xl;
   font-weight: $fw-black;
+  color: $text-primary;
   margin-bottom: $sp-xs;
 }
 
@@ -687,6 +715,7 @@ export default {
 .category-name {
   font-size: $fs-sm;
   font-weight: $fw-medium;
+  color: $text-primary;
 }
 
 .brand-section {
@@ -718,7 +747,7 @@ export default {
   padding: $sp-md $sp-lg;
   color: $text-primary;
   font-size: $fs-base;
-  border: 2rpx solid rgba(255,255,255,0.06);
+  border: 2rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
 }
 
 .input-placeholder {
@@ -840,6 +869,7 @@ export default {
 .standard-cup-value {
   font-size: $fs-xl;
   font-weight: $fw-bold;
+  color: $text-primary;
 }
 
 /* 标准杯说明弹窗 */
@@ -849,7 +879,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--overlay-modal, rgba(0, 0, 0, 0.7));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -874,6 +904,7 @@ export default {
 .cup-info-title {
   font-size: $fs-lg;
   font-weight: $fw-bold;
+  color: $text-primary;
 }
 
 .cup-info-close {
@@ -924,7 +955,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: $sp-sm 0;
-  border-bottom: 2rpx solid rgba(255, 255, 255, 0.04);
+  border-bottom: 2rpx solid var(--border-micro, rgba(255, 255, 255, 0.05));
 }
 
 .cup-info-cell {
@@ -1034,6 +1065,7 @@ export default {
 .food-name {
   font-size: $fs-sm;
   font-weight: $fw-medium;
+  color: $text-primary;
 }
 
 .food-detail {
@@ -1077,6 +1109,7 @@ export default {
 .feeling-name {
   font-size: $fs-lg;
   font-weight: $fw-bold;
+  color: $text-primary;
   margin-bottom: $sp-xs;
 }
 
@@ -1116,7 +1149,7 @@ export default {
   right: $sp-sm;
   width: 44rpx;
   height: 44rpx;
-  background: rgba(0,0,0,0.6);
+  background: var(--overlay-mask, rgba(0, 0, 0, 0.6));
   border-radius: $radius-full;
   display: flex;
   align-items: center;
@@ -1133,7 +1166,7 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  border: 3rpx dashed rgba(255,255,255,0.1);
+  border: 3rpx dashed var(--border-dashed, rgba(255, 255, 255, 0.12));
 
   &:active {
     background: $bg-card-alt;
@@ -1142,6 +1175,7 @@ export default {
 
 .photo-add-icon {
   font-size: $fs-3xl;
+  color: $text-tertiary;
   margin-bottom: $sp-sm;
   opacity: 0.5;
 }
@@ -1153,6 +1187,7 @@ export default {
 
 .photo-tip {
   text-align: center;
+  color: $text-secondary;
 }
 
 /* Step 6: 发布 */
@@ -1200,6 +1235,7 @@ export default {
   display: block;
   font-size: $fs-base;
   font-weight: $fw-medium;
+  color: $text-primary;
 }
 
 .visibility-desc {
@@ -1236,7 +1272,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding-top: $sp-md;
-  border-top: 2rpx solid rgba(255,255,255,0.06);
+  border-top: 2rpx solid var(--border-faint, rgba(255, 255, 255, 0.08));
 }
 
 /* 保存提示卡片 */

uni.scss

@@ -1,27 +1,122 @@
 /* ==========================================
  * 喝了么 - 设计令牌 (Design Tokens)
- * 设计概念: 琥珀夜光 Amber Night
+ * 设计概念: 琥珀夜光 Amber Night / 暖白琥珀 Warm Day
+ * 支持日夜主题自动切换
  * ========================================== */
 
-/* --- 色彩系统 --- */
-$bg-base:        #0B0B14;    // 深夜底色
-$bg-card:        #151520;    // 卡片底色
-$bg-card-alt:    #1C1C2A;    // 卡片悬浮/选中态
-$bg-elevated:    #222234;    // 弹出层/输入框底色
+/* --- 夜间主题（默认）--- */
+page, .theme-dark {
+  --bg-base:        #0B0B14;
+  --bg-card:        #1A1A28;
+  --bg-card-alt:    #222236;
+  --bg-elevated:    #28283E;
 
-$amber:          #E8A838;    // 琥珀金 - 品牌主色
-$amber-light:    #F5C563;    // 浅金 - 高亮/数字
-$amber-deep:     #C47F17;    // 深琥珀 - 按压态
-$amber-glow:     rgba(232, 168, 56, 0.15);  // 琥珀光晕
+  --amber:          #E8A838;
+  --amber-light:    #F5C563;
+  --amber-deep:     #C47F17;
+  --amber-glow:     rgba(232, 168, 56, 0.15);
 
-$coral:          #FF6B6B;    // 珊瑚红 - 警告/健康提醒
-$mint:           #5EC6A0;    // 薄荷绿 - 成功/正面
-$lavender:       #8B85B8;    // 淡紫灰 - 次要文本
+  --coral:          #FF6B6B;
+  --mint:           #5EC6A0;
+  --lavender:       #8B85B8;
 
-$text-primary:   #FFFFFF;    // 主文本
-$text-secondary: #7E7E96;    // 次要文本
-$text-tertiary:  #4A4A62;    // 辅助文本
-$text-on-amber:  #0B0B14;    // 琥珀色上的文字
+  --text-primary:   #FFFFFF;
+  --text-secondary: #C0C0D2;
+  --text-tertiary:  #9494AC;
+  --text-on-amber:  #0B0B14;
+
+  --border-subtle:  rgba(255, 255, 255, 0.10);
+  --border-faint:   rgba(255, 255, 255, 0.08);
+  --border-micro:   rgba(255, 255, 255, 0.05);
+  --border-dashed:  rgba(255, 255, 255, 0.12);
+  --border-active:  rgba(255, 255, 255, 0.12);
+  --divider-color:  rgba(255, 255, 255, 0.08);
+  --bg-subtle:      rgba(255, 255, 255, 0.03);
+  --bg-hover:       rgba(255, 255, 255, 0.08);
+  --bg-input:       rgba(255, 255, 255, 0.08);
+  --btn-shimmer:    rgba(255, 255, 255, 0.15);
+  --overlay-mask:   rgba(0, 0, 0, 0.6);
+  --overlay-modal:  rgba(0, 0, 0, 0.7);
+
+  --shadow-sm:      0 4rpx 12rpx rgba(0, 0, 0, 0.25);
+  --shadow-md:      0 8rpx 32rpx rgba(0, 0, 0, 0.35);
+  --shadow-amber:   0 8rpx 32rpx rgba(232, 168, 56, 0.25);
+  --shadow-lg:      0 16rpx 48rpx rgba(0, 0, 0, 0.45);
+
+  --card-gradient-start: #1A1510;
+  --card-gradient-end:   #0D0B08;
+  --nav-bar-bg:     #0B0B14;
+  --nav-bar-text:   white;
+  --tab-bar-bg:     #151520;
+  --tab-bar-color:  #9494AC;
+}
+
+/* --- 白天主题 --- */
+.theme-light {
+  --bg-base:        #FAF7F2;
+  --bg-card:        #FFFFFF;
+  --bg-card-alt:    #F0EDE6;
+  --bg-elevated:    #EAE5DA;
+
+  --amber:          #D49530;
+  --amber-light:    #E8A838;
+  --amber-deep:     #B87A1A;
+  --amber-glow:     rgba(212, 149, 48, 0.12);
+
+  --coral:          #E85555;
+  --mint:           #4AAF8A;
+  --lavender:       #7A7598;
+
+  --text-primary:   #2C2416;
+  --text-secondary: #8C8474;
+  --text-tertiary:  #B5AEA0;
+  --text-on-amber:  #FFFFFF;
+
+  --border-subtle:  rgba(0, 0, 0, 0.08);
+  --border-faint:   rgba(0, 0, 0, 0.06);
+  --border-micro:   rgba(0, 0, 0, 0.04);
+  --border-dashed:  rgba(0, 0, 0, 0.12);
+  --border-active:  rgba(0, 0, 0, 0.1);
+  --divider-color:  rgba(0, 0, 0, 0.06);
+  --bg-subtle:      rgba(0, 0, 0, 0.02);
+  --bg-hover:       rgba(0, 0, 0, 0.04);
+  --bg-input:       rgba(0, 0, 0, 0.04);
+  --btn-shimmer:    rgba(255, 255, 255, 0.4);
+  --overlay-mask:   rgba(0, 0, 0, 0.4);
+  --overlay-modal:  rgba(0, 0, 0, 0.5);
+
+  --shadow-sm:      0 4rpx 12rpx rgba(0, 0, 0, 0.06);
+  --shadow-md:      0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  --shadow-amber:   0 8rpx 32rpx rgba(212, 149, 48, 0.2);
+  --shadow-lg:      0 16rpx 48rpx rgba(0, 0, 0, 0.12);
+
+  --card-gradient-start: #F5F0E8;
+  --card-gradient-end:   #EDE8DF;
+  --nav-bar-bg:     #FAF7F2;
+  --nav-bar-text:   black;
+  --tab-bar-bg:     #FFFFFF;
+  --tab-bar-color:  #B5AEA0;
+}
+
+/* --- 色彩系统（SCSS变量桥接到CSS变量，含暗色回退值）--- */
+$bg-base:        var(--bg-base, #0B0B14);
+$bg-card:        var(--bg-card, #1A1A28);
+$bg-card-alt:    var(--bg-card-alt, #222236);
+$bg-elevated:    var(--bg-elevated, #28283E);
+
+$amber:          var(--amber, #E8A838);
+$amber-light:    var(--amber-light, #F5C563);
+$amber-deep:     var(--amber-deep, #C47F17);
+$amber-glow:     var(--amber-glow, rgba(232, 168, 56, 0.15));
+
+$coral:          var(--coral, #FF6B6B);
+$mint:           var(--mint, #5EC6A0);
+$lavender:       var(--lavender, #8B85B8);
+
+$text-primary:   var(--text-primary, #FFFFFF);
+$text-secondary: var(--text-secondary, #C0C0D2);
+$text-tertiary:  var(--text-tertiary, #9494AC);
+$text-on-amber:  var(--text-on-amber, #0B0B14);
 
 /* --- 字体 --- */
 $font-base:      -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
@@ -62,11 +157,11 @@ $radius-lg:      28rpx;
 $radius-xl:      40rpx;
 $radius-full:    999rpx;
 
-/* --- 阴影 --- */
-$shadow-sm:      0 4rpx 12rpx rgba(0, 0, 0, 0.25);
-$shadow-md:      0 8rpx 32rpx rgba(0, 0, 0, 0.35);
-$shadow-amber:   0 8rpx 32rpx rgba(232, 168, 56, 0.25);
-$shadow-lg:      0 16rpx 48rpx rgba(0, 0, 0, 0.45);
+/* --- 阴影（SCSS变量桥接到CSS变量，含暗色回退值）--- */
+$shadow-sm:      var(--shadow-sm, 0 4rpx 12rpx rgba(0, 0, 0, 0.25));
+$shadow-md:      var(--shadow-md, 0 8rpx 32rpx rgba(0, 0, 0, 0.35));
+$shadow-amber:   var(--shadow-amber, 0 8rpx 32rpx rgba(232, 168, 56, 0.25));
+$shadow-lg:      var(--shadow-lg, 0 16rpx 48rpx rgba(0, 0, 0, 0.45));
 
 /* --- 动画 --- */
 $ease-out:       cubic-bezier(0.22, 1, 0.36, 1);