refactor(components): 重构饮酒卡片组件并优化日历交互体验

- 移除DrinkCard组件中的模板切换功能和多种布局模式
- 简化DrinkCard组件结构，统一使用琥珀流光样式
- 添加未来日期禁用功能，防止用户选择未来日期
- 优化卡片样式为现代化深色主题设计
- 调整日历单元格点击交互逻辑，过滤未来日期
- 更新Canvas导出尺寸适配新卡片高度
- 优化照片网格布局算法，支持响应式排列
- 简化页面操作按钮，移除冗余功能入口
- 移除情感状态显示，专注核心饮酒记录功能

pages/card/card.vue

@@ -4,68 +4,43 @@
       <view class="step-back" @click="goBack">
         <text class="step-back-arrow">‹</text>
       </view>
-      <text class="card-nav-title">你的酒局卡片</text>
-    </view>
-
-    <view class="photo-hint" v-if="record">
-      <text class="photo-hint-text">{{ photoHintText }}</text>
-    </view>
-
-    <view class="template-switcher">
-      <view v-for="t in templates" :key="t.id" class="template-option"
-        :class="{ 'template-active': currentTemplate === t.id }" @click="currentTemplate = t.id">
-        <view class="template-swatch" :style="{ background: t.swatch }">
-          <view class="swatch-dot" v-if="currentTemplate === t.id"></view>
-        </view>
-        <text class="template-label">{{ t.name }}</text>
-        <text class="template-desc">{{ t.desc }}</text>
-      </view>
+      <text class="card-nav-title">酒局卡片</text>
     </view>
 
+    <!-- 大卡片预览 -->
     <view class="card-preview-area">
-      <DrinkCard v-if="record" :record="record" :template="currentTemplate" />
+      <DrinkCard v-if="record" :record="record" />
+      <view v-else class="card-empty">暂无记录</view>
     </view>
 
+    <!-- 操作按钮 -->
     <view class="card-actions">
-      <button class="btn-cta" :loading="saving" :disabled="saving" @click="saveToAlbum">
-        {{ saving ? '保存中...' : '💾 保存到相册' }}
+      <button class="btn-cta save-btn" :loading="saving" :disabled="saving" @click="saveToAlbum">
+        <text>{{ saving ? '保存中...' : '保存到相册' }}</text>
+      </button>
+      <button class="btn-secondary share-btn" @click="shareToFriend">
+        <text>分享给好友</text>
       </button>
-      <view class="action-row">
-        <button class="btn-secondary action-btn" @click="shareToFriend">🔗 分享好友</button>
-        <button class="btn-secondary action-btn" @click="goHome">🏠 返回首页</button>
-      </view>
     </view>
 
-    <canvas canvas-id="shareCanvas" class="export-canvas" :style="{width:'750px',height:'1200px'}"></canvas>
+    <canvas canvas-id="shareCanvas" class="export-canvas" :style="{width:'750px',height:'1600px'}"></canvas>
   </view>
 </template>
 
 <script>
 import DrinkCard from '../../components/DrinkCard.vue'
 import { getRecords } from '../../common/mock-data'
-import { DRINK_CATEGORIES, FOOD_CATEGORIES, FEELINGS, DRINK_QUOTES } from '../../common/constants'
+import { DRINK_CATEGORIES, FOOD_CATEGORIES, DRINK_QUOTES } from '../../common/constants'
+
+const UNIT_NAMES = { ml: 'ml', liang: '两', bottle: '瓶', cup: '杯', can: '听', shot: 'shot' }
 
 export default {
   components: { DrinkCard },
   data() {
     return {
-      currentTemplate: 'amber',
       record: null,
       saving: false,
-      templates: [
-        { id: 'amber', name: '琥珀流光', desc: '温暖金色调', swatch: 'linear-gradient(135deg, #1A1308, #0F0B06)' },
-        { id: 'aurora', name: '暗夜极光', desc: '冷色氛围感', swatch: 'linear-gradient(135deg, #0A0E1A, #0E0A1A)' },
-        { id: 'film', name: '胶片记忆', desc: '复古胶片风', swatch: 'linear-gradient(135deg, #141210, #0D0C0A)' }
-      ]
-    }
-  },
-  computed: {
-    photoHintText() {
-      if (!this.record) return ''
-      const p = this.record.photos || []
-      if (p.length === 0) return '📷 无照片 · 纯文字排版'
-      if (p.length === 1) return '📸 单张照片 · 沉浸式全屏'
-      return `🖼️ ${p.length}张照片 · 拼贴布局`
+      saved: false
     }
   },
   onLoad(options) {
@@ -90,6 +65,7 @@ export default {
         const contentH = await this.drawExportCard()
         const path = await this.exportImg(contentH)
         await this.saveImg(path)
+        this.saved = true
         uni.showToast({ title: '已保存到相册', icon: 'success' })
       } catch (e) {
         console.error('保存失败:', e)
@@ -97,7 +73,6 @@ export default {
       } finally { this.saving = false }
     },
 
-    // 加载图片
     loadImg(src) {
       return new Promise(r => {
         if (!src) return r(null)
@@ -105,206 +80,227 @@ export default {
       })
     },
 
-    // ===== 海报导出绘制（优化版） =====
+    // ===== 海报绘制 =====
     async drawExportCard() {
       const ctx = uni.createCanvasContext('shareCanvas', this)
-      const W = 750, H = 1200
-      const P = 56 // 全局padding增大
+      const W = 750, H = 1600
       const rec = this.record
-      const tpl = this.currentTemplate
 
-      // 模板配色体系
-      const TH = {
-        amber: { bg: '#111111', bgGrad: '#1A1510', line: '#2A2218', accent: '#E8A838', accentLight: '#F5C963', tagBg: '#1E1A14', tagBorder: '#3A3228' },
-        aurora: { bg: '#0E0E16', bgGrad: '#141420', line: '#1E1E2E', accent: '#5EC6A0', accentLight: '#8EDCBE', tagBg: '#141420', tagBorder: '#2A2A3E' },
-        film: { bg: '#100F0D', bgGrad: '#181610', line: '#252218', accent: '#C8B48C', accentLight: '#DED0B0', tagBg: '#1A1814', tagBorder: '#352E22' }
-      }
-      const c = TH[tpl] || TH.amber
       const WHITE = '#F2F2F2'
-      const SUB = '#B0B0B0'
-      const GRAY = '#888888'
-      const DIM = '#5A5A5A'
+      const SUB = '#7E7E96'
+      const DIM = '#4A4A62'
+      const AMBER = '#E8A838'
       const F = '-apple-system, PingFang SC, Helvetica Neue, sans-serif'
 
-      // ===== 背景绘制 =====
-      ctx.setFillStyle(c.bg)
-      ctx.fillRect(0, 0, W, H)
-      // 底部微渐变装饰
-      ctx.setFillStyle(c.bgGrad)
-      ctx.setGlobalAlpha(0.5)
-      ctx.fillRect(0, H * 0.6, W, H * 0.4)
-      ctx.setGlobalAlpha(1)
-      // 顶部强调线条（加粗）
-      ctx.setFillStyle(c.accent)
-      ctx.fillRect(0, 0, W, 5)
+      const cardW = W
+      const cardX = 0
+      const cardY = 0
+      const R = 0
+      const P = 48
+      const maxW = cardW - 96
+      const gap = 12
+      const colW = (maxW - gap) / 2
 
-      let y = P + 16
+      // 计算照片区域高度
+      const photoCount = (rec.photos || []).length
+      let photoAreaH = 0
+      if (photoCount === 0) photoAreaH = 248 // emoji
+      else if (photoCount === 1) photoAreaH = 320
+      else if (photoCount === 2) photoAreaH = colW
+      else if (photoCount === 3) photoAreaH = 240 + gap + colW
+      else if (photoCount === 4) photoAreaH = 2 * colW + gap
+      else if (photoCount === 5) photoAreaH = 240 + gap + 2 * (colW + gap) - gap
+      else photoAreaH = 3 * colW + 2 * gap
 
-      // ===== 顶部行：日期药丸 + 标准杯 =====
-      // 日期药丸样式
-      const dateStr = rec.date || ''
+      // 动态计算卡片高度
+      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 grad = ctx.createLinearGradient(0, 0, cardW, cardY + cardH)
+      grad.addColorStop(0, '#1A1510')
+      grad.addColorStop(1, '#0D0B08')
+      ctx.setFillStyle(grad)
+      ctx.fillRect(0, 0, W, cardH)
+
+      let y = cardY + 48
+
+      // 日期
       ctx.font = `500 22px ${F}`
-      const dateW = ctx.measureText(dateStr).width + 28
-      const pillH = 36, pillR = 18
-      ctx.setFillStyle(c.tagBg)
-      this.rr(ctx, P, y - 4, dateW, pillH, pillR, 'fill')
-      ctx.setStrokeStyle(c.tagBorder)
-      ctx.setLineWidth(1)
-      this.rr(ctx, P, y - 4, dateW, pillH, pillR, 'stroke')
-      ctx.font = `500 22px ${F}`
-      ctx.setFillStyle(SUB)
-      ctx.fillText(dateStr, P + 14, y + 18)
+      ctx.setFillStyle(DIM)
+      ctx.fillText(rec.date || '', P, y)
+      y += 56
 
-      // 标准杯：数字+文字垂直堆叠（右对齐）
-      const num = String(rec.standardCupsTotal)
-      ctx.font = `800 44px ${F}`
-      ctx.setFillStyle(c.accent)
-      const nw = ctx.measureText(num).width
-      ctx.font = `normal 18px ${F}`
-      const lw = ctx.measureText('标准杯').width
-      const cupBlockW = Math.max(nw, lw) + 4
-      const cupX = W - P - cupBlockW
-      ctx.font = `800 44px ${F}`
-      ctx.setFillStyle(c.accent)
-      ctx.fillText(num, cupX + (cupBlockW - nw) / 2, y + 16)
-      ctx.font = `normal 18px ${F}`
-      ctx.setFillStyle(GRAY)
-      ctx.fillText('标准杯', cupX + (cupBlockW - lw) / 2, y + 34)
-      y += 58
-
-      // ===== 照片区域 =====
+      // 照片区域
       const photos = rec.photos || []
       if (photos.length > 0) {
-        const loaded = await Promise.all(photos.slice(0, 9).map(p => this.loadImg(p)))
-        const ph = this.drawPhotos(ctx, loaded, P, y, W - P * 2, c.accent)
-        // 照片底部渐变蒙版
-        const gradH = 80
-        const grd = ctx.createLinearGradient(P, y + ph - gradH, P, y + ph)
-        grd.addColorStop(0, 'rgba(0,0,0,0)')
-        grd.addColorStop(1, 'rgba(0,0,0,0.45)')
-        ctx.setFillStyle(grd)
-        ctx.fillRect(P, y + ph - gradH, W - P * 2, gradH)
-        y += ph + 28
-      }
+        // 预加载所有照片
+        const imgs = await Promise.all(photos.map(p => this.loadImg(p)))
 
-      // ===== 酒水信息行 =====
-      const drinks = rec.drinks || []
-      if (drinks.length > 0) {
-        ctx.font = `bold 30px ${F}`
+        if (photos.length === 1) {
+          // 1张：大图
+          const heroH = 320
+          ctx.save()
+          this.rr(ctx, P, y, maxW, heroH, 16, 'fill')
+          ctx.clip()
+          if (imgs[0]) {
+            try { ctx.drawImage(imgs[0], P, y, maxW, heroH) } catch (e) {}
+          } else {
+            ctx.setFillStyle('rgba(255,255,255,0.03)')
+            ctx.fillRect(P, y, maxW, heroH)
+          }
+          ctx.restore()
+          y += heroH + 32
+        } else {
+          // 2-6张：网格布局
+          const positions = []
+
+          if (photos.length % 2 !== 0) {
+            // 奇数张：第一张占满两列
+            const heroH = 240
+            positions.push({ x: P, y: y, w: maxW, h: heroH })
+            const rowStart = y + heroH + gap
+            for (let i = 1; i < photos.length; i += 2) {
+              const row = Math.floor((i - 1) / 2)
+              const rowY = rowStart + row * (colW + gap)
+              positions.push({ x: P, y: rowY, w: colW, h: colW })
+              if (i + 1 < photos.length) {
+                positions.push({ x: P + colW + gap, y: rowY, w: colW, h: colW })
+              }
+            }
+            const totalRows = Math.ceil((photos.length - 1) / 2)
+            y = rowStart + totalRows * (colW + gap) - gap + 32
+          } else {
+            // 偶数张：全部两列
+            for (let i = 0; i < photos.length; i += 2) {
+              const row = i / 2
+              const rowY = y + row * (colW + gap)
+              positions.push({ x: P, y: rowY, w: colW, h: colW })
+              positions.push({ x: P + colW + gap, y: rowY, w: colW, h: colW })
+            }
+            const totalRows = photos.length / 2
+            y = y + totalRows * (colW + gap) - gap + 32
+          }
+
+          // 绘制每张照片
+          for (let i = 0; i < positions.length; i++) {
+            const pos = positions[i]
+            ctx.save()
+            this.rr(ctx, pos.x, pos.y, pos.w, pos.h, 12, 'fill')
+            ctx.clip()
+            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.fillRect(pos.x, pos.y, pos.w, pos.h)
+            }
+            ctx.restore()
+          }
+        }
+      } else {
+        // emoji 圆形
+        const eR = 100
+        const eCx = W / 2, eCy = y + eR
+        ctx.setFillStyle('rgba(232,168,56,0.08)')
+        ctx.beginPath()
+        ctx.arc(eCx, eCy, eR, 0, Math.PI * 2)
+        ctx.fill()
+        const firstDrink = (rec.drinks || [])[0]
+        const cat = firstDrink ? DRINK_CATEGORIES.find(cc => cc.id === firstDrink.category) : null
+        const emoji = cat ? cat.emoji : '🥃'
+        ctx.font = `90px ${F}`
         ctx.setFillStyle(WHITE)
-        let line = ''
-        drinks.forEach(d => {
-          const cat = DRINK_CATEGORIES.find(cc => cc.id === d.category)
-          const nm = cat ? cat.name : '酒水'
-          line += (line ? '  ·  ' : '') + `${nm} ${d.brand} · ${d.standardCups}杯`
-        })
-        ctx.fillText(line, P, y + 24)
-        y += 48
+        ctx.fillText(emoji, eCx - 45, eCy + 30)
+        y += eR * 2 + 48
       }
 
-      // ===== 配餐 + 感受 胶囊标签 =====
-      let tags = []
-      let tagTypes = [] // 'food' | 'feeling'
+      // 酒水清单
+      drinks.forEach(d => {
+        const cat = DRINK_CATEGORIES.find(cc => cc.id === d.category)
+        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}杯`
+
+        ctx.font = `500 28px ${F}`
+        ctx.setFillStyle(WHITE)
+        ctx.fillText(name, P, y)
+
+        ctx.font = `bold 24px ${F}`
+        ctx.setFillStyle(AMBER)
+        const dw = ctx.measureText(detail).width
+        ctx.fillText(detail, W - P - dw, y)
+
+        y += 52
+      })
+
+      // 配餐
       if (rec.food) {
         const food = FOOD_CATEGORIES.find(f => f.id === rec.food.category)
-        if (food) {
-          tags.push(rec.food.name ? `${food.name} · ${rec.food.name}` : food.name)
-          tagTypes.push('food')
-        }
-      }
-      if (rec.feeling) {
-        const f = FEELINGS.find(fe => fe.id === rec.feeling)
-        if (f) { tags.push(f.name); tagTypes.push('feeling') }
-      }
-      if (tags.length > 0) {
-        let tx = P
-        ctx.font = `normal 22px ${F}`
-        tags.forEach((tag, i) => {
-          const tw = ctx.measureText(tag).width + 32
-          const th = 36
-          // 胶囊背景+边框
-          ctx.setFillStyle(c.tagBg)
-          this.rr(ctx, tx, y, tw, th, th / 2, 'fill')
-          ctx.setStrokeStyle(tagTypes[i] === 'food' ? c.accent : c.accentLight)
-          ctx.setLineWidth(1)
-          this.rr(ctx, tx, y, tw, th, th / 2, 'stroke')
-          // 标签文字（场景用强调色，感受用次要白）
-          ctx.setFillStyle(tagTypes[i] === 'food' ? c.accentLight : SUB)
-          ctx.fillText(tag, tx + 16, y + 24)
-          tx += tw + 14
-        })
-        y += 56
+        const name = `🍲 ${food ? food.name : '美食'}`
+        ctx.font = `500 28px ${F}`
+        ctx.setFillStyle(WHITE)
+        ctx.fillText(name, P, y)
+        y += 52
       }
 
-      // ===== 分隔线 =====
-      ctx.setStrokeStyle(c.line)
-      ctx.setLineWidth(1)
+      // 分割线（渐变）
+      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(1, 'transparent')
+      ctx.setStrokeStyle(lineGrad)
+      ctx.setLineWidth(2)
       ctx.beginPath()
       ctx.moveTo(P, y)
       ctx.lineTo(W - P, y)
       ctx.stroke()
-      y += 28
+      y += 40
 
-      // ===== 酒言酒语（优化装饰） =====
-      const quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
-      // 左侧装饰竖条（加宽、渐变感）
-      ctx.setFillStyle(c.accent)
-      this.rr(ctx, P, y + 2, 5, 48, 2.5, 'fill')
-      // 装饰引号（大字、半透明）
-      ctx.font = `bold 60px ${F}`
-      ctx.setGlobalAlpha(0.15)
-      ctx.setFillStyle(c.accentLight)
-      ctx.fillText('\u201C', P + 16, y + 44)
-      ctx.setGlobalAlpha(1)
-      // 引文内容
-      ctx.font = `italic 26px ${F}`
-      ctx.setFillStyle(SUB)
-      const maxQW = W - P * 2 - 40
-      let dq = quote
-      if (ctx.measureText(dq).width > maxQW) {
-        while (dq.length > 0 && ctx.measureText(dq + '...').width > maxQW) dq = dq.slice(0, -1)
-        dq += '...'
-      }
-      ctx.fillText(dq, P + 20, y + 32)
-      y += 72
-
-      // ===== 底部品牌栏 =====
-      ctx.setStrokeStyle(c.line)
-      ctx.beginPath()
-      ctx.moveTo(P, y)
-      ctx.lineTo(W - P, y)
-      ctx.stroke()
-      y += 32
-
-      // 品牌名 + 副标语纵向排列
-      ctx.font = `bold 28px ${F}`
-      ctx.setFillStyle(WHITE)
-      ctx.fillText('喝了么', P, y + 20)
+      // 喝后心得
       ctx.font = `normal 20px ${F}`
       ctx.setFillStyle(DIM)
-      ctx.fillText('记录每一杯的故事', P, y + 50)
+      ctx.fillText('喝后心得', P, y)
+      y += 36
 
-      // 二维码占位（优化样式）
-      const qr = 80, qx = W - P - qr, qy = y + 2
-      ctx.setFillStyle(c.tagBg)
-      this.rr(ctx, qx, qy, qr, qr, 10, 'fill')
-      ctx.setStrokeStyle(c.tagBorder)
-      ctx.setLineWidth(1.5)
-      this.rr(ctx, qx, qy, qr, qr, 10, 'stroke')
-      ctx.font = `500 16px ${F}`
-      ctx.setFillStyle(GRAY)
-      const sw = ctx.measureText('扫码').width
-      ctx.fillText('扫码', qx + (qr - sw) / 2, qy + qr / 2 + 6)
+      const quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
+      ctx.font = `italic 24px ${F}`
+      ctx.setFillStyle(SUB)
+      let dq = `"${quote}"`
+      if (ctx.measureText(dq).width > maxW) {
+        while (dq.length > 0 && ctx.measureText(dq + '..."').width > maxW) dq = dq.slice(0, -1)
+        dq += '..."'
+      }
+      ctx.fillText(dq, P, y)
+      y += 56
 
-      // 计算实际内容高度（用于动态裁剪导出）
-      const contentH = qy + qr + P
+      // 品牌 + 二维码
+      ctx.font = `bold 22px ${F}`
+      ctx.setFillStyle(DIM)
+      ctx.fillText('🍻 喝了么', P, y + 16)
+      y += 30
+      ctx.font = `normal 18px ${F}`
+      ctx.setFillStyle(DIM)
+      ctx.fillText('记录每一杯的故事', P, y + 16)
+
+      // 二维码占位框
+      const qrSize = 80
+      const qrX = W - P - qrSize
+      const qrY = y - 30
+      ctx.setStrokeStyle('rgba(232,168,56,0.15)')
+      ctx.setLineWidth(2)
+      this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'stroke')
+      ctx.setFillStyle('rgba(255,255,255,0.03)')
+      this.rr(ctx, qrX, qrY, qrSize, qrSize, 8, 'fill')
 
       return new Promise(resolve => {
-        ctx.draw(false, () => setTimeout(() => resolve(contentH), 600))
+        ctx.draw(false, () => setTimeout(() => resolve(cardH), 600))
       })
     },
 
-    // 圆角矩形
     rr(ctx, x, y, w, h, r, act) {
       ctx.beginPath()
       ctx.moveTo(x + r, y)
@@ -317,77 +313,9 @@ export default {
       else ctx.fill()
     },
 
-    // 照片网格
-    drawPhotos(ctx, photos, x, y, maxW, accent) {
-      const gap = 8, r = 12
-      const n = Math.min(photos.length, 9)
-      let h = 0
-
-      if (n === 1) {
-        h = 440
-        this.ci(ctx, photos[0], x, y, maxW, h, r, accent)
-      } else if (n === 2) {
-        h = 360
-        const w1 = maxW * 0.6 - gap / 2, w2 = maxW * 0.4 - gap / 2
-        this.ci(ctx, photos[0], x, y, w1, h, r, accent)
-        this.ci(ctx, photos[1], x + w1 + gap, y, w2, h, r, accent)
-      } else if (n === 3) {
-        h = 380
-        const w1 = maxW * 0.55 - gap / 2, w2 = maxW * 0.45 - gap / 2
-        const hh = (h - gap) / 2
-        this.ci(ctx, photos[0], x, y, w1, h, r, accent)
-        this.ci(ctx, photos[1], x + w1 + gap, y, w2, hh, r, accent)
-        this.ci(ctx, photos[2], x + w1 + gap, y + hh + gap, w2, hh, r, accent)
-      } else if (n === 4) {
-        h = 400
-        const hw = (maxW - gap) / 2, hh = (h - gap) / 2
-        for (let i = 0; i < 4; i++) {
-          this.ci(ctx, photos[i], x + (i % 2) * (hw + gap), y + Math.floor(i / 2) * (hh + gap), hw, hh, r, accent)
-        }
-      } else {
-        h = 0
-        const rows = this.getRows(n)
-        const ih = n <= 6 ? 200 : 150
-        rows.forEach((rc, ri) => {
-          const iw = (maxW - gap * (rc - 1)) / rc
-          for (let ci = 0; ci < rc; ci++) {
-            const idx = rows.slice(0, ri).reduce((a, b) => a + b, 0) + ci
-            if (idx < photos.length) this.ci(ctx, photos[idx], x + ci * (iw + gap), y + h, iw, ih, r, accent)
-          }
-          h += ih + gap
-        })
-        h -= gap
-      }
-      return h
-    },
-
-    ci(ctx, src, x, y, w, h, r, accent) {
-      ctx.save()
-      this.rr(ctx, x, y, w, h, r)
-      ctx.clip()
-      if (src) {
-        try { ctx.drawImage(src, x, y, w, h) } catch (e) {
-          ctx.setFillStyle(accent); ctx.setGlobalAlpha(0.05)
-          ctx.fillRect(x, y, w, h); ctx.setGlobalAlpha(1)
-        }
-      } else {
-        ctx.setFillStyle('#1A1A1A'); ctx.fillRect(x, y, w, h)
-      }
-      ctx.restore()
-    },
-
-    getRows(n) {
-      if (n === 5) return [3, 2]
-      if (n === 6) return [3, 3]
-      if (n === 7) return [3, 4]
-      if (n === 8) return [4, 4]
-      return [3, 3, 3]
-    },
-
-    // 导出（动态裁剪到实际内容区域）
     exportImg(contentH) {
       return new Promise((resolve, reject) => {
-        const cropH = Math.min(contentH || 1200, 1200)
+        const cropH = Math.min(contentH || 1600, 1600)
         uni.canvasToTempFilePath({
           canvasId: 'shareCanvas', quality: 1,
           x: 0, y: 0, width: 750, height: cropH,
@@ -398,7 +326,6 @@ export default {
       })
     },
 
-    // 保存
     saveImg(fp) {
       return new Promise((resolve, reject) => {
         uni.saveImageToPhotosAlbum({
@@ -417,56 +344,125 @@ export default {
     },
 
     shareToFriend() { uni.showToast({ title: '点击右上角分享', icon: 'none' }) },
-    goHome() { uni.switchTab({ url: '/pages/index/index' }) },
-    goBack() { uni.navigateBack() }
+
+    goBack() {
+      if (this.saved) {
+        uni.navigateBack()
+        return
+      }
+      uni.showModal({
+        title: '离开前保存海报？',
+        content: '海报还未保存到相册，离开后需要重新生成。',
+        confirmText: '保存并离开',
+        cancelText: '直接离开',
+        success: async (res) => {
+          if (res.confirm) {
+            await this.saveToAlbum()
+          }
+          uni.navigateBack()
+        }
+      })
+    }
   },
   onShareAppMessage() {
     return { title: '今晚的酒局记录 - 喝了么', path: '/pages/index/index' }
+  },
+  onBackPress() {
+    this.goBack()
+    return true
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .card-page {
-  padding: $sp-lg;
-  padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
-  display: flex; flex-direction: column; min-height: 100vh;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: $bg-base;
 }
+
 .card-nav {
-  display: flex; align-items: center; gap: $sp-md; padding: $sp-md 0 $sp-lg;
+  display: flex;
+  align-items: center;
+  gap: $sp-md;
+  padding: $sp-md $sp-lg;
 }
+
 .step-back {
-  width: 64rpx; height: 64rpx;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: $radius-full; background: $bg-card;
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius-full;
+  background: $bg-card;
 }
-.step-back-arrow { font-size: $fs-xl; color: $text-secondary; font-weight: $fw-bold; }
-.card-nav-title { font-size: $fs-lg; font-weight: $fw-bold; }
-.photo-hint { text-align: center; margin-bottom: $sp-md; }
-.photo-hint-text { font-size: $fs-xs; color: $text-tertiary; }
-.template-switcher { display: flex; gap: $sp-md; margin-bottom: $sp-xl; justify-content: center; }
-.template-option {
-  display: flex; flex-direction: column; align-items: center;
-  gap: $sp-xs; padding: $sp-sm $sp-md; border-radius: $radius-lg;
-  border: 2rpx solid rgba(255,255,255,0.05);
-  background: rgba(255,255,255,0.02);
-  transition: all $duration-fast $ease-out; flex: 1; max-width: 220rpx;
-  &.template-active { border-color: $amber; background: rgba(232,168,56,0.05); }
+
+.step-back-arrow {
+  font-size: $fs-xl;
+  color: $text-secondary;
+  font-weight: $fw-bold;
 }
-.template-swatch {
-  width: 64rpx; height: 80rpx; border-radius: $radius-md;
-  border: 2rpx solid rgba(255,255,255,0.1); position: relative;
-  display: flex; align-items: center; justify-content: center;
+
+.card-nav-title {
+  font-size: $fs-lg;
+  font-weight: $fw-bold;
+  color: $text-primary;
 }
-.swatch-dot { width: 12rpx; height: 12rpx; border-radius: $radius-full; background: $amber; }
-.template-label { font-size: $fs-xs; color: $text-primary; font-weight: $fw-medium; }
-.template-desc { font-size: 18rpx; color: $text-tertiary; }
+
+/* 大卡片预览区 */
 .card-preview-area {
-  flex: 1; display: flex; align-items: flex-start;
-  justify-content: center; margin-bottom: $sp-xl; width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $sp-lg;
+  min-height: 0;
+}
+
+.card-empty {
+  color: $text-tertiary;
+  font-size: $fs-md;
+}
+
+/* 操作按钮 */
+.card-actions {
+  padding: $sp-lg;
+  padding-bottom: calc($sp-lg + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+  gap: $sp-md;
+}
+
+.save-btn {
+  width: 100%;
+  height: 92rpx;
+  border-radius: $radius-full;
+  font-size: $fs-lg;
+  font-weight: $fw-bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.share-btn {
+  width: 100%;
+  height: 92rpx;
+  border-radius: $radius-full;
+  font-size: $fs-base;
+  background: transparent;
+  border: 2rpx solid rgba(255, 255, 255, 0.1);
+  color: $text-secondary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.export-canvas {
+  position: fixed;
+  left: -9999px;
+  top: -9999px;
 }
-.card-actions { padding-bottom: $sp-xl; }
-.action-row { display: flex; gap: $sp-md; margin-top: $sp-md; }
-.action-btn { flex: 1; }
-.export-canvas { position: fixed; left: -9999px; top: -9999px; }
 </style>

pages/index/index.vue

@@ -27,15 +27,15 @@
 
     <!-- 统计卡片 -->
     <view class="stats-row">
-      <view class="stat-card card" @click="goProfile">
+      <view class="stat-card card">
         <text class="stat-value text-num text-amber">{{ stats.monthDrinkCount }}</text>
         <text class="stat-label">本月饮酒</text>
       </view>
-      <view class="stat-card card" @click="goProfile">
+      <view class="stat-card card">
         <text class="stat-value text-num">{{ stats.monthCups }}</text>
         <text class="stat-label">标准杯</text>
       </view>
-      <view class="stat-card card" @click="goProfile">
+      <view class="stat-card card">
         <text class="stat-value text-num" :class="stats.streakType === 'drank' ? 'text-amber' : 'text-mint'">
           {{ stats.streak }}
         </text>
@@ -84,11 +84,6 @@
       <text>过量饮酒有害健康 · 请理性记录</text>
     </view>
 
-    <!-- 悬浮记录按钮 -->
-    <view class="fab-record" @click="goRecord">
-      <text class="fab-icon">+</text>
-    </view>
-
     <!-- 日期记录弹窗 -->
     <view v-if="showDayDetail" class="day-overlay" @click="showDayDetail = false">
       <view class="day-detail card-elevated" @click.stop>
@@ -107,10 +102,12 @@
               <text class="text-caption">{{ getFeelingName(selectedRecord.feeling) }}</text>
               <text class="text-caption text-amber text-num">{{ selectedRecord.standardCupsTotal }} 标准杯</text>
             </view>
+            <button class="btn-ghost day-toggle-btn" @click="toggleToAbstain">改为未饮酒</button>
           </view>
           <view v-else class="day-abstain">
             <text class="day-abstain-emoji">🚫</text>
             <text class="text-caption">今日未饮酒，好样的</text>
+            <button class="btn-ghost day-toggle-btn" @click="toggleToDrank">改为饮酒</button>
           </view>
         </view>
         <view v-else class="day-empty">
@@ -197,12 +194,40 @@ export default {
         url: `/pages/record/record?date=${this.selectedDate}&mode=backfill`
       })
     },
+    // 改为未饮酒
+    toggleToAbstain() {
+      uni.showModal({
+        title: '确认修改',
+        content: '确定将这天改为未饮酒吗？饮酒记录将被清除。',
+        success: (res) => {
+          if (!res.confirm) return
+          const idx = this.records.findIndex(r => r.date === this.selectedDate)
+          if (idx === -1) return
+          this.records[idx].mode = 'abstain'
+          this.records[idx].drinks = []
+          this.records[idx].food = null
+          this.records[idx].feeling = null
+          this.records[idx].standardCupsTotal = 0
+          this.selectedRecord = this.records[idx]
+          this.saveRecords()
+        }
+      })
+    },
+    // 改为饮酒（跳转到补录页）
+    toggleToDrank() {
+      this.showDayDetail = false
+      uni.navigateTo({
+        url: `/pages/record/record?date=${this.selectedDate}&mode=backfill`
+      })
+    },
+    // 保存记录到本地存储
+    saveRecords() {
+      uni.setStorageSync('drink_records', JSON.stringify(this.records))
+    },
     goRecord() {
       uni.navigateTo({ url: '/pages/record/record' })
     },
-    goProfile() {
-      uni.switchTab({ url: '/pages/profile/profile' })
-    }
+
   }
 }
 </script>
@@ -222,7 +247,7 @@ export default {
 
 .greeting-text {
   display: block;
-  font-size: $fs-lg;
+  font-size:38rpx;
   font-weight: $fw-bold;
 }
 
@@ -283,7 +308,6 @@ export default {
 }
 
 .week-summary {
-  margin-bottom: $sp-md;
   padding: $sp-md;
 }
 
@@ -422,38 +446,11 @@ export default {
 .bottom-health-tip {
   text-align: center;
   padding: $sp-sm 0;
-  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
   font-size: $fs-xs;
   color: $text-tertiary;
   opacity: 0.4;
 }
 
-/* 悬浮记录按钮 */
-.fab-record {
-  position: fixed;
-  right: 40rpx;
-  bottom: calc(140rpx + env(safe-area-inset-bottom));
-  width: 100rpx;
-  height: 100rpx;
-  background: linear-gradient(135deg, $amber-light, $amber-deep);
-  border-radius: $radius-full;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: $shadow-amber;
-  z-index: 50;
-
-  &:active {
-    transform: scale(0.92);
-  }
-}
-
-.fab-icon {
-  font-size: $fs-2xl;
-  font-weight: $fw-bold;
-  color: $text-on-amber;
-}
-
 /* 日期弹窗 */
 .day-overlay {
   position: fixed;
@@ -507,4 +504,12 @@ export default {
     margin-top: $sp-lg;
   }
 }
+
+.day-toggle-btn {
+  margin-top: $sp-lg;
+  width: 100%;
+  font-size: $fs-sm;
+  color: $text-secondary;
+  border-color: rgba(255,255,255,0.1);
+}
 </style>

pages/login/login.vue

@@ -88,51 +88,6 @@
       </view>
     </view>
 
-    <!-- 饮酒偏好(登录后显示) -->
-    <view v-if="showPreferences" class="pref-overlay">
-      <view class="pref-card card-elevated">
-        <view class="pref-header">
-          <text class="text-h2">你的饮酒偏好</text>
-          <text class="text-caption">选择你常喝的酒类（可多选）</text>
-        </view>
-
-        <view class="pref-section">
-          <text class="pref-label">常喝的酒类</text>
-          <view class="pref-tags">
-            <view
-              v-for="cat in drinkCategories"
-              :key="cat.id"
-              class="tag"
-              :class="{ 'tag-active': selectedCategories.includes(cat.id) }"
-              @click="toggleCategory(cat.id)"
-            >
-              <text>{{ cat.emoji }} {{ cat.name }}</text>
-            </view>
-          </view>
-        </view>
-
-        <view class="pref-section">
-          <text class="pref-label">饮酒频率</text>
-          <view class="pref-options">
-            <view
-              v-for="freq in frequencies"
-              :key="freq.id"
-              class="freq-option"
-              :class="{ 'freq-active': selectedFrequency === freq.id }"
-              @click="selectedFrequency = freq.id"
-            >
-              <text>{{ freq.name }}</text>
-            </view>
-          </view>
-        </view>
-
-        <view class="pref-actions">
-          <button class="btn-text" @click="skipPreferences">跳过</button>
-          <button class="btn-primary" :loading="prefSaving" @click="savePreferences">{{ selectedCategories.length > 0 || selectedFrequency ? '保存并进入' : '进入首页' }}</button>
-        </view>
-      </view>
-    </view>
-
     <!-- 底部协议（非登录状态时显示） -->
     <view v-if="showNotice" class="agreement">
       <text class="text-tiny">登录即代表同意</text>
@@ -144,27 +99,14 @@
 </template>
 
 <script>
-import { DRINK_CATEGORIES } from '../../common/constants'
-
 export default {
   data() {
     return {
       showNotice: true,
-      showPreferences: false,
       loginLoading: false,
-      prefSaving: false,
       agreed: false,
       avatarUrl: '',
-      nickname: '',
-      drinkCategories: DRINK_CATEGORIES,
-      selectedCategories: [],
-      selectedFrequency: '',
-      frequencies: [
-        { id: 'daily', name: '几乎每天' },
-        { id: 'often', name: '经常喝' },
-        { id: 'sometimes', name: '偶尔喝' },
-        { id: 'rarely', name: '很少喝' }
-      ]
+      nickname: ''
     }
   },
   methods: {
@@ -207,10 +149,8 @@ export default {
           joinedAt: new Date().toISOString().slice(0, 10),
           preferences: null
         }
-        // 暂存用户信息，登录完成标记延迟到 finishLogin
         uni.setStorageSync('user_info', JSON.stringify(userInfo))
-        // 显示偏好设置（此时不算正式登录）
-        this.showPreferences = true
+        this.finishLogin()
       } catch (e) {
         console.warn('登录失败，降级为本地登录:', e)
         const userInfo = {
@@ -220,9 +160,8 @@ export default {
           joinedAt: new Date().toISOString().slice(0, 10),
           preferences: null
         }
-        // 暂存用户信息，登录完成标记延迟到 finishLogin
         uni.setStorageSync('user_info', JSON.stringify(userInfo))
-        this.showPreferences = true
+        this.finishLogin()
       } finally {
         this.loginLoading = false
       }
@@ -258,37 +197,6 @@ export default {
       uni.switchTab({ url: '/pages/index/index' })
     },
 
-    // ===== 偏好选择 =====
-    toggleCategory(id) {
-      const idx = this.selectedCategories.indexOf(id)
-      if (idx > -1) {
-        this.selectedCategories.splice(idx, 1)
-      } else {
-        this.selectedCategories.push(id)
-      }
-    },
-
-    skipPreferences() {
-      this.finishLogin()
-    },
-
-    async savePreferences() {
-      if (this.prefSaving) return
-      this.prefSaving = true
-      try {
-        const user = JSON.parse(uni.getStorageSync('user_info') || '{}')
-        user.preferences = {
-          favoriteCategories: this.selectedCategories,
-          frequency: this.selectedFrequency
-        }
-        uni.setStorageSync('user_info', JSON.stringify(user))
-        await new Promise(r => setTimeout(r, 300)) // 短暂反馈
-        this.finishLogin()
-      } finally {
-        this.prefSaving = false
-      }
-    },
-
     finishLogin() {
       uni.setStorageSync('is_logged_in', 'true')
       uni.setStorageSync('is_first_launch', 'false')
@@ -308,24 +216,24 @@ export default {
 .login-page {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
-  padding: $sp-xl;
+ height: 100vh;
+  padding: $sp-lg;
 }
 
 .brand-area {
-  flex: 1;
+  flex: 0.6;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: relative;
-  padding-top: 120rpx;
+  padding-top: 60rpx;
 }
 
 .brand-glow {
   position: absolute;
-  width: 400rpx;
-  height: 400rpx;
+  width: 300rpx;
+  height: 300rpx;
   background: radial-gradient(circle, rgba(232,168,56,0.15) 0%, transparent 70%);
   border-radius: 50%;
   top: 50%;
@@ -335,70 +243,70 @@ export default {
 }
 
 .brand-icon {
-  width: 200rpx;
-  height: 200rpx;
+  width: 140rpx;
+  height: 140rpx;
   background: $bg-card;
-  border-radius: $radius-xl;
+  border-radius: $radius-lg;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: $shadow-md;
-  margin-bottom: $sp-xl;
+  margin-bottom: $sp-md;
   position: relative;
   z-index: 2;
 }
 
 .brand-emoji {
-  font-size: 96rpx;
+  font-size: 64rpx;
 }
 
 .brand-name {
-  font-size: $fs-hero;
+  font-size: $fs-3xl;
   font-weight: $fw-black;
   color: $text-primary;
-  letter-spacing: -4rpx;
-  margin-bottom: $sp-sm;
+  letter-spacing: -2rpx;
+  margin-bottom: $sp-xs;
 }
 
 .brand-slogan {
-  font-size: $fs-md;
+  font-size: $fs-sm;
   color: $text-secondary;
 }
 
 .login-area {
-  padding-bottom: $sp-3xl;
+  padding-bottom: $sp-lg;
 }
 
 /* 理性饮酒须知 */
 .notice-card {
-  padding: $sp-xl;
+  padding: $sp-lg;
 }
 
 .notice-header {
   display: flex;
   align-items: center;
   gap: $sp-sm;
-  margin-bottom: $sp-lg;
+  margin-bottom: $sp-md;
 }
 
 .notice-icon {
-  font-size: $fs-xl;
+  font-size: $fs-lg;
 }
 
 .notice-title {
-  font-size: $fs-lg;
+  font-size: $fs-base;
   font-weight: $fw-bold;
 }
 
 .notice-content {
-  margin-bottom: $sp-lg;
+  margin-bottom: $sp-md;
 }
 
 .notice-item {
   display: block;
-  font-size: $fs-sm;
+  font-size: $fs-xs;
   color: $text-secondary;
-  line-height: $lh-loose;
+  line-height: $lh-normal;
 }
 
 .notice-btn {
@@ -407,16 +315,16 @@ export default {
 
 /* 资料表单 */
 .profile-form {
-  padding: $sp-xl;
+  padding: $sp-lg;
   margin-bottom: 0;
 }
 
 .form-title-row {
-  margin-bottom: $sp-lg;
+  margin-bottom: $sp-md;
 }
 
 .form-title {
-  font-size: $fs-lg;
+  font-size: $fs-base;
   font-weight: $fw-bold;
   color: $text-primary;
 }
@@ -425,7 +333,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: $sp-md 0;
+  padding: $sp-sm 0;
   border-bottom: 2rpx solid rgba(255,255,255,0.04);
 }
 
@@ -442,16 +350,16 @@ export default {
 }
 
 .avatar-preview {
-  width: 96rpx;
-  height: 96rpx;
+  width: 80rpx;
+  height: 80rpx;
   border-radius: $radius-full;
   border: 3rpx solid $amber;
   flex-shrink: 0;
 }
 
 .avatar-placeholder {
-  width: 96rpx;
-  height: 96rpx;
+  width: 80rpx;
+  height: 80rpx;
   border-radius: $radius-full;
   border: 3rpx dashed rgba(232,168,56,0.4);
   background: $bg-elevated;
@@ -462,7 +370,7 @@ export default {
 }
 
 .avatar-placeholder-icon {
-  font-size: 48rpx;
+  font-size: 40rpx;
   opacity: 0.5;
 }
 
@@ -475,7 +383,7 @@ export default {
   display: flex;
   align-items: center;
   gap: $sp-lg;
-  padding: $sp-md 0;
+  padding: $sp-sm 0;
 }
 
 .form-label {
@@ -496,7 +404,7 @@ export default {
 .login-actions {
   display: flex;
   flex-direction: column;
-  gap: $sp-lg;
+  gap: $sp-md;
 }
 
 .login-btn {
@@ -511,7 +419,7 @@ export default {
 }
 
 .login-btn-text {
-  font-size: $fs-xl;
+  font-size: $fs-lg;
   font-weight: $fw-bold;
 }
 
@@ -569,104 +477,12 @@ export default {
   color: $text-tertiary;
 }
 
-/* 偏好设置弹层 */
-.pref-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.7);
-  display: flex;
-  align-items: flex-end;
-  z-index: 100;
-  padding: $sp-lg;
-  animation: fadeIn $duration-base $ease-out;
-}
-
-.pref-card {
-  width: 100%;
-  padding: $sp-xl;
-  border-radius: $radius-xl $radius-xl 0 0;
-  animation: slideUp $duration-base $ease-out;
-}
-
-.pref-header {
-  margin-bottom: $sp-xl;
-
-  .text-h2 {
-    display: block;
-    margin-bottom: $sp-xs;
-  }
-}
-
-.pref-section {
-  margin-bottom: $sp-xl;
-}
-
-.pref-label {
-  display: block;
-  font-size: $fs-sm;
-  font-weight: $fw-medium;
-  color: $text-secondary;
-  margin-bottom: $sp-md;
-}
-
-.pref-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $sp-sm;
-}
-
-.pref-options {
-  display: flex;
-  gap: $sp-sm;
-}
-
-.freq-option {
-  flex: 1;
-  text-align: center;
-  padding: $sp-md $sp-sm;
-  border-radius: $radius-md;
-  background: $bg-card;
-  font-size: $fs-sm;
-  color: $text-secondary;
-  border: 2rpx solid transparent;
-  transition: all $duration-fast $ease-out;
-
-  &.freq-active {
-    background: $amber-glow;
-    color: $amber;
-    border-color: rgba(232,168,56,0.3);
-  }
-}
-
-.pref-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: $sp-lg;
-
-  .btn-primary {
-    flex: 1;
-  }
-}
-
 /* 底部协议 */
 .agreement {
   display: flex;
   justify-content: center;
   gap: $sp-xs;
-  padding: $sp-lg 0;
+  padding: $sp-sm 0;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
 </style>

pages/record/record.vue

@@ -257,13 +257,13 @@
             <text>✕</text>
           </view>
         </view>
-        <view v-if="photos.length < 9" class="photo-add" @click="choosePhoto">
+        <view v-if="photos.length < 6" class="photo-add" @click="choosePhoto">
           <text class="photo-add-icon">📷</text>
           <text class="photo-add-text">拍照/相册</text>
         </view>
       </view>
       <view class="photo-tip">
-        <text class="text-caption">最多选择9张照片，记录今夜的精彩瞬间</text>
+        <text class="text-caption">最多选择6张照片，记录今夜的精彩瞬间</text>
       </view>
     </view>
 
@@ -472,7 +472,7 @@ export default {
     },
     choosePhoto() {
       uni.chooseImage({
-        count: 9 - this.photos.length,
+        count: 6 - this.photos.length,
         sizeType: ['compressed'],
         sourceType: ['album', 'camera'],
         success: (res) => {