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

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

App.vue

@@ -196,9 +196,10 @@ page {
   padding: $sp-md $sp-xl;
   border-radius: $radius-full;
   border: 2rpx solid rgba(255, 255, 255, 0.08);
-  text-align: center;
   transition: all $duration-fast $ease-out;
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
   &:active {
     background-color: $bg-card-alt;
     transform: scale(0.97);

components/DrinkCalendar.vue

@@ -25,10 +25,11 @@
         :class="{
           'cal-cell-empty': !cell.day,
           'cal-cell-today': cell.isToday,
+          'cal-cell-future': cell.day && isFuture(cell.date),
           'cal-cell-drank': getRecordMode(cell.date) === 'drank',
           'cal-cell-abstain': getRecordMode(cell.date) === 'abstain'
         }"
-        @click="cell.day && onSelectDate(cell.date)"
+        @click="cell.day && !isFuture(cell.date) && onSelectDate(cell.date)"
       >
         <text v-if="cell.day" class="cal-day-num">{{ cell.day }}</text>
         <view v-if="getRecordMode(cell.date) === 'drank'" class="cal-dot cal-dot-drank"></view>
@@ -61,6 +62,13 @@ export default {
     }
   },
   methods: {
+    isFuture(date) {
+      if (!date) return false
+      const today = new Date()
+      today.setHours(0, 0, 0, 0)
+      const d = new Date(date.replace(/-/g, '/'))
+      return d > today
+    },
     getRecordMode(date) {
       if (!date) return null
       const record = this.records.find(r => r.date === date)
@@ -157,7 +165,7 @@ export default {
     border: 2rpx solid $amber;
   }
 
-  &:active:not(.cal-cell-empty) {
+  &:active:not(.cal-cell-empty):not(.cal-cell-future) {
     transform: scale(0.92);
   }
 }
@@ -186,6 +194,15 @@ export default {
   }
 }
 
+/* 未来日期置灰 */
+.cal-cell-future {
+  opacity: 0.3;
+}
+
+.cal-cell-future .cal-day-num {
+  color: $text-tertiary;
+}
+
 /* 饮酒日高亮背景 */
 .cal-cell-drank {
   background: rgba(232, 168, 56, 0.08);

components/DrinkCard.vue

@@ -1,205 +1,75 @@
 <template>
-  <view class="card-root" :class="['tpl-' + template, 'photos-' + photoLayout]">
+  <view class="card-root">
-    <!-- 装饰背景层 -->
+    <!-- 顶部：日期 -->
-    <view class="card-bg-deco">
+    <view class="card-header">
-      <view class="bg-circle bg-circle-1"></view>
+      <text class="header-date">{{ record.date }}</text>
-      <view class="bg-circle bg-circle-2"></view>
     </view>
 
-    <!-- ====== 0张: 纯文字排版 ====== -->
+    <!-- 照片区域 -->
-    <view v-if="photos.length === 0" class="card-no-photo">
+    <view v-if="photos.length > 0" class="card-photos">
-      <view class="no-photo-header">
+      <!-- 1张: 大图 -->
-        <view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
+      <view v-if="photos.length === 1" class="photo-single">
-        <view class="feeling-tag" v-if="record.feeling">
+        <image :src="photos[0]" mode="aspectFill"></image>
-          <text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
-        </view>
       </view>
-      <view class="no-photo-hero">
+      <!-- 2-6张: 网格 -->
-        <view class="hero-drink-list">
+      <view v-else class="photo-grid">
-          <view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
+        <view
-            <text class="hero-emoji">{{ getCatEmoji(drink.category) }}</text>
+          v-for="(photo, i) in photos"
-            <view class="hero-drink-info">
+          :key="i"
-              <text class="hero-brand">{{ drink.brand }}</text>
+          class="photo-cell"
-              <text class="hero-product">{{ drink.product }} · {{ drink.amount }}{{ drink.unit }}</text>
+          :class="{ 'photo-span': i === 0 && photos.length % 2 !== 0 }"
-            </view>
+        >
-            <text class="hero-cups">{{ drink.standardCups }}杯</text>
+          <image :src="photo" mode="aspectFill"></image>
-          </view>
-        </view>
-      </view>
-      <view class="no-photo-stats">
-        <view class="stat-pill">
-          <text class="stat-num">{{ record.standardCupsTotal }}</text>
-          <text class="stat-label">标准杯</text>
-        </view>
-        <view class="stat-divider"></view>
-        <view class="stat-pill" v-if="record.food">
-          <text class="stat-icon">🍲</text>
-          <text class="stat-label">{{ getFoodName() }}</text>
-        </view>
-      </view>
-      <view class="no-photo-quote">
-        <text class="quote-mark">"</text>
-        <text class="quote-text">{{ quote }}</text>
-      </view>
-    </view>
-
-    <!-- ====== 1张: 全屏沉浸式 ====== -->
-    <view v-else-if="photos.length === 1" class="card-one-photo">
-      <image class="one-photo-bg" :src="photos[0]"></image>
-      <view class="one-photo-overlay"></view>
-      <view class="one-photo-top">
-        <view class="date-badge light"><text class="date-text">{{ record.date }}</text></view>
-      </view>
-      <view class="one-photo-bottom">
-        <view class="photo-drink-chips">
-          <view v-for="(drink, i) in record.drinks" :key="i" class="drink-chip">
-            <text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} {{ drink.standardCups }}杯</text>
-          </view>
-        </view>
-        <view class="photo-stats-row">
-          <text class="photo-total-cups">{{ record.standardCupsTotal }} 标准杯</text>
-          <text v-if="record.feeling" class="photo-feeling">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
-        </view>
-        <view class="photo-quote-line">
-          <text class="quote-mark light">"</text>
-          <text class="quote-text light">{{ quote }}</text>
         </view>
       </view>
     </view>
-
+    <!-- 无照片: emoji -->
-    <!-- ====== 多张: 拼贴布局 ====== -->
+    <view v-else class="card-hero">
-    <view v-else class="card-multi-photo">
+      <view class="hero-emoji-wrap">
-      <view class="multi-top">
+        <text class="hero-emoji">{{ mainEmoji }}</text>
-        <view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
-        <view class="multi-cups-badge">
-          <text class="cups-badge-num">{{ record.standardCupsTotal }}</text>
-          <text class="cups-badge-label">标准杯</text>
-        </view>
-      </view>
-
-      <!-- 2张: 左6右4 -->
-      <view v-if="photos.length === 2" class="photo-grid grid-2">
-        <view class="grid-item gi-large"><image :src="photos[0]" class="grid-img"></image></view>
-        <view class="grid-item gi-medium"><image :src="photos[1]" class="grid-img"></image></view>
-      </view>
-
-      <!-- 3张: 左大右两小 -->
-      <view v-else-if="photos.length === 3" class="photo-grid grid-3">
-        <view class="grid-item gi-hero-left"><image :src="photos[0]" class="grid-img"></image></view>
-        <view class="gi-right-col">
-          <view class="grid-item gi-half"><image :src="photos[1]" class="grid-img"></image></view>
-          <view class="grid-item gi-half"><image :src="photos[2]" class="grid-img"></image></view>
-        </view>
-      </view>
-
-      <!-- 4张: 2×2 -->
-      <view v-else-if="photos.length === 4" class="photo-grid grid-2x2">
-        <view v-for="(p, i) in photos" :key="i" class="grid-item gi-quarter">
-          <image :src="p" class="grid-img"></image>
-        </view>
-      </view>
-
-      <!-- 5张: 上3下2 -->
-      <view v-else-if="photos.length === 5" class="photo-grid grid-rows">
-        <view class="grid-row grid-row-3">
-          <view v-for="(p, i) in photos.slice(0, 3)" :key="i" class="grid-item gi-third">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-        <view class="grid-row grid-row-2">
-          <view v-for="(p, i) in photos.slice(3, 5)" :key="i" class="grid-item gi-half-row">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-      </view>
-
-      <!-- 6张: 3+3 -->
-      <view v-else-if="photos.length === 6" class="photo-grid grid-rows">
-        <view class="grid-row grid-row-3">
-          <view v-for="(p, i) in photos.slice(0, 3)" :key="i" class="grid-item gi-third">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-        <view class="grid-row grid-row-3">
-          <view v-for="(p, i) in photos.slice(3, 6)" :key="i" class="grid-item gi-third">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-      </view>
-
-      <!-- 7张: 3+4 -->
-      <view v-else-if="photos.length === 7" class="photo-grid grid-rows">
-        <view class="grid-row grid-row-3">
-          <view v-for="(p, i) in photos.slice(0, 3)" :key="i" class="grid-item gi-third">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-        <view class="grid-row grid-row-4">
-          <view v-for="(p, i) in photos.slice(3, 7)" :key="i" class="grid-item gi-quarter-row">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-      </view>
-
-      <!-- 8张: 4+4 -->
-      <view v-else-if="photos.length === 8" class="photo-grid grid-rows">
-        <view class="grid-row grid-row-4">
-          <view v-for="(p, i) in photos.slice(0, 4)" :key="i" class="grid-item gi-quarter-row">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-        <view class="grid-row grid-row-4">
-          <view v-for="(p, i) in photos.slice(4, 8)" :key="i" class="grid-item gi-quarter-row">
-            <image :src="p" class="grid-img"></image>
-          </view>
-        </view>
-      </view>
-
-      <!-- 9张: 3×3 -->
-      <view v-else class="photo-grid grid-3x3">
-        <view v-for="(p, i) in photos.slice(0, 9)" :key="i" class="grid-item gi-ninth">
-          <image :src="p" class="grid-img"></image>
-        </view>
-      </view>
-
-      <!-- 底部信息 -->
-      <view class="multi-bottom">
-        <view class="multi-drinks-row">
-          <view v-for="(drink, i) in record.drinks" :key="i" class="multi-drink-tag">
-            <text>{{ getCatEmoji(drink.category) }} {{ drink.brand }} · {{ drink.standardCups }}杯</text>
-          </view>
-        </view>
-        <view class="multi-meta-row">
-          <text v-if="record.food" class="multi-meta-item">🍲 {{ getFoodName() }}</text>
-          <text v-if="record.feeling" class="multi-meta-item">{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
-        </view>
-        <view class="multi-quote">
-          <text class="quote-mark">"</text>
-          <text class="quote-text">{{ quote }}</text>
-        </view>
       </view>
     </view>
 
-    <!-- 统一底部品牌 + 二维码 -->
+    <!-- 酒水清单 -->
-    <view class="card-brand-bar">
+    <view class="drink-list">
-      <view class="brand-left">
+      <view v-for="(drink, i) in record.drinks" :key="i" class="drink-row">
-        <text class="brand-name">🍻 喝了么</text>
+        <text class="drink-name">{{ getCatEmoji(drink.category) }} {{ drink.brand }}</text>
+        <text class="drink-detail">{{ formatAmount(drink) }}·{{ drink.standardCups }}杯</text>
+      </view>
+      <view v-if="record.food" class="drink-row">
+        <text class="drink-name">🍲 {{ getFoodName() }}</text>
+        <text class="drink-detail"></text>
+      </view>
+    </view>
+
+    <!-- 分割线 -->
+    <view class="divider"></view>
+
+    <!-- 喝后心得（酒言酒语） -->
+    <view class="card-footer">
+      <text class="footer-label">喝后心得</text>
+      <text class="footer-quote">"{{ quote }}"</text>
+    </view>
+
+    <!-- 品牌 + 二维码 -->
+    <view class="card-brand">
+      <view class="brand-info">
+        <text class="brand-text">🍻 喝了么</text>
         <text class="brand-slogan">记录每一杯的故事</text>
       </view>
-      <view class="brand-qr">
+      <view class="brand-qr"></view>
-        <text class="brand-qr-text">扫码</text>
-      </view>
     </view>
   </view>
 </template>
 
 <script>
-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 {
   props: {
-    record: { type: Object, required: true },
+    record: { type: Object, required: true }
-    template: { type: String, default: 'amber' }
   },
   data() {
     return {
@@ -210,12 +80,9 @@ export default {
     photos() {
       return (this.record && this.record.photos) || []
     },
-    photoLayout() {
+    mainEmoji() {
-      const len = this.photos.length
+      const first = (this.record.drinks || [])[0]
-      if (len === 0) return 'none'
+      return first ? this.getCatEmoji(first.category) : '🥃'
-      if (len === 1) return 'one'
-      if (len <= 4) return 'few'
-      return 'many'
     }
   },
   methods: {
@@ -225,268 +92,180 @@ export default {
     },
     getFoodName() {
       const food = FOOD_CATEGORIES.find(f => f.id === this.record.food?.category)
-      if (!food) return ''
+      if (!food) return this.record.food?.name || '美食'
       return this.record.food.name ? `${food.name}·${this.record.food.name}` : food.name
     },
-    getFeelingEmoji() {
+    formatAmount(drink) {
-      const f = FEELINGS.find(f => f.id === this.record.feeling)
+      const unitName = UNIT_NAMES[drink.unit] || drink.unit
-      return f ? f.emoji : ''
+      return `${drink.amount}${unitName}`
-    },
-    getFeelingName() {
-      const f = FEELINGS.find(f => f.id === this.record.feeling)
-      return f ? f.name : ''
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-/* ========== 根容器 ========== */
 .card-root {
   position: relative;
-  width: 650rpx;
+  width: 620rpx;
-  border-radius: $radius-xl;
+  border-radius: 32rpx;
   overflow: hidden;
-  padding: $sp-lg;
+  background: linear-gradient(170deg, #1A1510 0%, #0D0B08 100%);
-  min-height: 700rpx;
+  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);
   display: flex;
   flex-direction: column;
 }
 
-/* --- 模板: 琥珀流光 --- */
+/* 顶部 */
-.tpl-amber {
+.card-header {
-  background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
+  padding: $sp-lg $sp-xl 0;
-  border: 2rpx solid rgba(232, 168, 56, 0.25);
 }
-.tpl-amber .bg-circle-1 { background: radial-gradient(circle, rgba(232, 168, 56, 0.12), transparent 70%); }
+.header-date {
-.tpl-amber .bg-circle-2 { background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%); }
+  font-size: $fs-sm;
-
+  color: $text-tertiary;
-/* --- 模板: 暗夜极光 --- */
+  font-family: $font-num;
-.tpl-aurora {
+  letter-spacing: 4rpx;
-  background: linear-gradient(160deg, #0A0E1A 0%, #0B0B14 40%, #0E0A1A 100%);
-  border: 2rpx solid rgba(139, 133, 184, 0.2);
-}
-.tpl-aurora .bg-circle-1 { background: radial-gradient(circle, rgba(94, 198, 160, 0.1), transparent 70%); }
-.tpl-aurora .bg-circle-2 { background: radial-gradient(circle, rgba(139, 133, 184, 0.1), transparent 70%); }
-.tpl-aurora .date-badge { background: rgba(139, 133, 184, 0.15); border-color: rgba(139, 133, 184, 0.2); }
-.tpl-aurora .stat-pill .stat-num,
-.tpl-aurora .cups-badge-num,
-.tpl-aurora .hero-cups,
-.tpl-aurora .photo-total-cups { color: $mint; }
-
-/* --- 模板: 胶片记忆 --- */
-.tpl-film {
-  background: linear-gradient(160deg, #141210 0%, #0D0C0A 40%, #141210 100%);
-  border: 2rpx solid rgba(200, 180, 140, 0.15);
-}
-.tpl-film .bg-circle-1 { background: radial-gradient(circle, rgba(200, 180, 140, 0.08), transparent 70%); }
-.tpl-film .bg-circle-2 { background: radial-gradient(circle, rgba(180, 160, 120, 0.06), transparent 70%); }
-.tpl-film .date-badge { background: rgba(200, 180, 140, 0.1); border-color: rgba(200, 180, 140, 0.15); }
-
-/* 装饰背景 */
-.card-bg-deco { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
-.bg-circle { position: absolute; border-radius: 50%; }
-.bg-circle-1 { width: 400rpx; height: 400rpx; top: -100rpx; right: -100rpx; }
-.bg-circle-2 { width: 300rpx; height: 300rpx; bottom: 100rpx; left: -80rpx; }
-
-/* ========== 公共元素 ========== */
-.date-badge {
-  display: inline-flex; align-items: center;
-  padding: $sp-xs $sp-md;
-  background: rgba(232, 168, 56, 0.1);
-  border: 1rpx solid rgba(232, 168, 56, 0.15);
-  border-radius: $radius-full;
-}
-.date-badge.light { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); }
-.date-text { font-size: $fs-xs; color: $text-secondary; font-family: $font-num; }
-.date-badge.light .date-text { color: rgba(255, 255, 255, 0.85); }
-
-.feeling-tag {
-  display: inline-flex; align-items: center;
-  padding: $sp-xs $sp-md;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: $radius-full;
-  font-size: $fs-xs; color: $text-secondary;
 }
 
-.quote-mark { font-size: $fs-3xl; color: $amber; opacity: 0.3; line-height: 1; margin-right: $sp-xs; }
+/* 照片区域 */
-.quote-mark.light { color: rgba(255, 255, 255, 0.4); }
+.card-photos {
-.quote-text { font-size: $fs-sm; color: $text-secondary; font-style: italic; flex: 1; line-height: $lh-loose; }
+  padding: $sp-lg $sp-xl 0;
-.quote-text.light { color: rgba(255, 255, 255, 0.7); }
+}
 
-/* 品牌底栏 */
+/* 1张：大图 */
-.card-brand-bar {
+.photo-single {
-  position: relative; z-index: 1;
+  width: 100%;
-  display: flex; align-items: center; justify-content: space-between;
+  height: 340rpx;
-  padding-top: $sp-lg; margin-top: auto;
+  border-radius: $radius-lg;
-  border-top: 2rpx solid rgba(255, 255, 255, 0.04);
+  overflow: hidden;
+  image {
+    width: 100%;
+    height: 100%;
+  }
 }
-.brand-left {
+
-  display: flex; flex-direction: column; gap: 4rpx;
+/* 2-6张：网格 */
+.photo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $sp-sm;
 }
-.brand-name { font-size: $fs-xs; color: $text-tertiary; font-weight: $fw-medium; }
+.photo-cell {
-.brand-slogan { font-size: 18rpx; color: $text-tertiary; }
+  aspect-ratio: 1;
-.brand-qr {
-  width: 80rpx; height: 80rpx;
-  background: rgba(255, 255, 255, 0.06);
-  border: 2rpx solid rgba(255, 255, 255, 0.08);
   border-radius: $radius-md;
-  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+/* 奇数张时第一张占满两列 */
+.photo-span {
+  grid-column: span 2;
+  aspect-ratio: 16 / 9;
+}
+
+/* emoji占位 */
+.card-hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $sp-xl $sp-xl $sp-lg;
+}
+.hero-emoji-wrap {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: $radius-full;
+  background: rgba(232, 168, 56, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hero-emoji {
+  font-size: 100rpx;
+  line-height: 1;
+}
+
+/* 酒水清单 */
+.drink-list {
+  padding: 0 $sp-xl;
+  display: flex;
+  flex-direction: column;
+  gap: $sp-md;
+}
+.drink-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.drink-name {
+  font-size: $fs-base;
+  color: $text-primary;
+  font-weight: $fw-medium;
   flex-shrink: 0;
 }
-.brand-qr-text {
+.drink-detail {
-  font-size: 18rpx; color: $text-tertiary;
+  font-size: $fs-sm;
+  color: $amber;
+  font-family: $font-num;
+  font-weight: $fw-bold;
+  flex-shrink: 0;
+  margin-left: $sp-md;
 }
 
-/* ========== 0张: 纯文字 ========== */
+/* 分割线 */
-.card-no-photo {
+.divider {
-  position: relative; z-index: 1; flex: 1;
+  margin: $sp-lg $sp-xl;
-  display: flex; flex-direction: column; gap: $sp-lg;
+  height: 2rpx;
+  background: linear-gradient(90deg, transparent, rgba(232, 168, 56, 0.15), transparent);
 }
-.no-photo-header { display: flex; justify-content: space-between; align-items: center; }
-.no-photo-hero { padding: $sp-md 0; }
-.hero-drink-list { display: flex; flex-direction: column; gap: $sp-md; }
-.hero-drink-item {
-  display: flex; align-items: center; gap: $sp-md;
-  padding: $sp-md;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: $radius-lg;
-  border: 1rpx solid rgba(255, 255, 255, 0.04);
-}
-.hero-emoji { font-size: 56rpx; flex-shrink: 0; }
-.hero-drink-info { flex: 1; }
-.hero-brand { display: block; font-size: $fs-base; font-weight: $fw-bold; color: $text-primary; }
-.hero-product { display: block; font-size: $fs-xs; color: $text-secondary; margin-top: 4rpx; }
-.hero-cups { font-size: $fs-lg; font-weight: $fw-black; color: $amber; font-family: $font-num; flex-shrink: 0; }
-.no-photo-stats {
-  display: flex; align-items: center; gap: $sp-lg;
-  padding: $sp-md; background: rgba(255, 255, 255, 0.03); border-radius: $radius-lg;
-}
-.stat-pill { display: flex; align-items: center; gap: $sp-xs; }
-.stat-num { font-size: $fs-2xl; font-weight: $fw-black; color: $amber; font-family: $font-num; }
-.stat-label { font-size: $fs-xs; color: $text-secondary; }
-.stat-icon { font-size: $fs-base; }
-.stat-divider { width: 2rpx; height: 40rpx; background: rgba(255, 255, 255, 0.08); }
-.no-photo-quote { display: flex; align-items: flex-start; padding: $sp-sm 0; }
 
-/* ========== 1张: 沉浸式 ========== */
+/* 底部 */
-.card-one-photo {
+.card-footer {
-  position: relative; z-index: 1; flex: 1;
+  padding: 0 $sp-xl;
-  min-height: 600rpx; border-radius: $radius-lg;
+  display: flex;
-  overflow: hidden;
+  flex-direction: column;
-  margin: -#{$sp-lg};
+  gap: $sp-sm;
-  padding: $sp-lg; padding-bottom: 0;
-  display: flex; flex-direction: column; justify-content: space-between;
 }
-.one-photo-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
+.footer-label {
-.one-photo-overlay {
+  font-size: $fs-xs;
-  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  color: $text-tertiary;
-  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.75) 100%);
+  letter-spacing: 2rpx;
-  z-index: 1;
 }
-.one-photo-top { position: relative; z-index: 2; display: flex; justify-content: flex-start; padding-top: $sp-sm; }
+.footer-quote {
-.one-photo-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; gap: $sp-md; padding-bottom: $sp-md; }
+  font-size: $fs-sm;
-.photo-drink-chips { display: flex; flex-wrap: wrap; gap: $sp-sm; }
+  color: $text-secondary;
-.drink-chip {
+  line-height: $lh-loose;
-  display: inline-flex; align-items: center;
+  font-style: italic;
-  padding: $sp-xs $sp-md;
-  background: rgba(0, 0, 0, 0.45);
-  border-radius: $radius-full;
-  border: 1rpx solid rgba(255, 255, 255, 0.1);
-  font-size: $fs-xs; color: rgba(255, 255, 255, 0.9);
 }
-.photo-stats-row { display: flex; align-items: center; gap: $sp-lg; }
-.photo-total-cups { font-size: $fs-xl; font-weight: $fw-black; color: $amber-light; font-family: $font-num; }
-.photo-feeling { font-size: $fs-sm; color: rgba(255, 255, 255, 0.7); }
-.photo-quote-line { display: flex; align-items: flex-start; }
 
-/* ========== 多张: 公共 ========== */
+/* 品牌 + 二维码 */
-.card-multi-photo {
+.card-brand {
-  position: relative; z-index: 1; flex: 1;
+  padding: $sp-lg $sp-xl $sp-xl;
-  display: flex; flex-direction: column; gap: $sp-lg;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
-.multi-top { display: flex; justify-content: space-between; align-items: center; }
+.brand-info {
-.multi-cups-badge {
+  display: flex;
-  display: flex; align-items: baseline; gap: $sp-xs;
+  flex-direction: column;
-  padding: $sp-xs $sp-md;
+  gap: 4rpx;
-  background: rgba(232, 168, 56, 0.1);
-  border: 1rpx solid rgba(232, 168, 56, 0.2);
-  border-radius: $radius-full;
 }
-.cups-badge-num { font-size: $fs-lg; font-weight: $fw-black; color: $amber; font-family: $font-num; }
+.brand-text {
-.cups-badge-label { font-size: $fs-xs; color: $text-secondary; }
+  font-size: $fs-sm;
-
+  color: $text-tertiary;
-/* 照片网格公共 */
+  font-weight: $fw-bold;
-.photo-grid { border-radius: $radius-lg; overflow: hidden; }
+  letter-spacing: 2rpx;
-.grid-item {
+}
-  overflow: hidden;
+.brand-slogan {
+  font-size: $fs-xs;
+  color: $text-tertiary;
+}
+.brand-qr {
+  width: 80rpx;
+  height: 80rpx;
   border-radius: $radius-sm;
-  position: relative;
+  border: 2rpx solid rgba(232, 168, 56, 0.15);
+  background: rgba(255, 255, 255, 0.03);
 }
-.grid-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-.grid-row { display: flex; gap: 6rpx; }
-
-/* --- 2张: 左6右4 --- */
-.grid-2 {
-  display: flex; gap: 8rpx; height: 420rpx;
-}
-.grid-2 .gi-large { flex: 6; }
-.grid-2 .gi-medium { flex: 4; }
-
-/* --- 3张: 左大右两小 --- */
-.grid-3 {
-  display: flex; gap: 8rpx; height: 440rpx;
-}
-.grid-3 .gi-hero-left { flex: 1; }
-.grid-3 .gi-right-col {
-  width: 45%; display: flex; flex-direction: column; gap: 8rpx;
-}
-.grid-3 .gi-half { flex: 1; border-radius: $radius-md; }
-
-/* --- 4张: 2×2 --- */
-.grid-2x2 {
-  display: flex; flex-wrap: wrap; gap: 6rpx; height: 460rpx;
-}
-.grid-2x2 .gi-quarter {
-  width: calc(50% - 3rpx); height: calc(50% - 3rpx);
-}
-
-/* --- 行式网格 (5-8张) --- */
-.grid-rows {
-  display: flex; flex-direction: column; gap: 6rpx;
-}
-.grid-row-3 { display: flex; gap: 6rpx; height: 210rpx; }
-.grid-row-2 { display: flex; gap: 6rpx; height: 210rpx; }
-.grid-row-4 { display: flex; gap: 6rpx; height: 170rpx; }
-
-.gi-third { flex: 1; }
-.gi-half-row { flex: 1; }
-.gi-quarter-row { flex: 1; }
-
-/* --- 9张: 3×3 --- */
-.grid-3x3 {
-  display: flex; flex-wrap: wrap; gap: 6rpx;
-}
-.grid-3x3 .gi-ninth {
-  width: calc(33.33% - 4rpx); height: 190rpx;
-}
-
-/* 底部信息 */
-.multi-bottom { display: flex; flex-direction: column; gap: $sp-md; }
-.multi-drinks-row { display: flex; flex-wrap: wrap; gap: $sp-sm; }
-.multi-drink-tag {
-  display: inline-flex; padding: $sp-xs $sp-md;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1rpx solid rgba(255, 255, 255, 0.06);
-  border-radius: $radius-full;
-  font-size: $fs-xs; color: $text-secondary;
-}
-.multi-meta-row { display: flex; gap: $sp-lg; }
-.multi-meta-item { font-size: $fs-sm; color: $text-secondary; }
-.multi-quote { display: flex; align-items: flex-start; }
 </style>

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>
+      <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>
     </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">
+      <button class="btn-cta save-btn" :loading="saving" :disabled="saving" @click="saveToAlbum">
-        {{ saving ? '保存中...' : '💾 保存到相册' }}
+        <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: [
+      saved: false
-        { 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}张照片 · 拼贴布局`
     }
   },
   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 W = 750, H = 1600
-      const P = 56 // 全局padding增大
       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 SUB = '#7E7E96'
-      const GRAY = '#888888'
+      const DIM = '#4A4A62'
-      const DIM = '#5A5A5A'
+      const AMBER = '#E8A838'
       const F = '-apple-system, PingFang SC, Helvetica Neue, sans-serif'
 
-      // ===== 背景绘制 =====
+      const cardW = W
-      ctx.setFillStyle(c.bg)
+      const cardX = 0
-      ctx.fillRect(0, 0, W, H)
+      const cardY = 0
-      // 底部微渐变装饰
+      const R = 0
-      ctx.setFillStyle(c.bgGrad)
+      const P = 48
-      ctx.setGlobalAlpha(0.5)
+      const maxW = cardW - 96
-      ctx.fillRect(0, H * 0.6, W, H * 0.4)
+      const gap = 12
-      ctx.setGlobalAlpha(1)
+      const colW = (maxW - gap) / 2
-      // 顶部强调线条（加粗）
-      ctx.setFillStyle(c.accent)
-      ctx.fillRect(0, 0, W, 5)
 
-      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 drinks = rec.drinks || []
-      const dateStr = rec.date || ''
+      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
+      ctx.setFillStyle(DIM)
-      const pillH = 36, pillR = 18
+      ctx.fillText(rec.date || '', P, y)
-      ctx.setFillStyle(c.tagBg)
+      y += 56
-      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)
 
-      // 标准杯：数字+文字垂直堆叠（右对齐）
+      // 照片区域
-      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 imgs = await Promise.all(photos.map(p => this.loadImg(p)))
-        // 照片底部渐变蒙版
-        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
-      }
 
-      // ===== 酒水信息行 =====
+        if (photos.length === 1) {
-      const drinks = rec.drinks || []
+          // 1张：大图
-      if (drinks.length > 0) {
+          const heroH = 320
-        ctx.font = `bold 30px ${F}`
+          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 = ''
+        ctx.fillText(emoji, eCx - 45, eCy + 30)
-        drinks.forEach(d => {
+        y += eR * 2 + 48
-          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
       }
 
-      // ===== 配餐 + 感受 胶囊标签 =====
+      // 酒水清单
-      let tags = []
+      drinks.forEach(d => {
-      let tagTypes = [] // 'food' | 'feeling'
+        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) {
+        const name = `🍲 ${food ? food.name : '美食'}`
-          tags.push(rec.food.name ? `${food.name} · ${rec.food.name}` : food.name)
+        ctx.font = `500 28px ${F}`
-          tagTypes.push('food')
+        ctx.setFillStyle(WHITE)
-        }
+        ctx.fillText(name, P, y)
-      }
+        y += 52
-      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
       }
 
-      // ===== 分隔线 =====
+      // 分割线（渐变）
-      ctx.setStrokeStyle(c.line)
+      y += 16
-      ctx.setLineWidth(1)
+      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 quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
-      const qr = 80, qx = W - P - qr, qy = y + 2
+      ctx.font = `italic 24px ${F}`
-      ctx.setFillStyle(c.tagBg)
+      ctx.setFillStyle(SUB)
-      this.rr(ctx, qx, qy, qr, qr, 10, 'fill')
+      let dq = `"${quote}"`
-      ctx.setStrokeStyle(c.tagBorder)
+      if (ctx.measureText(dq).width > maxW) {
-      ctx.setLineWidth(1.5)
+        while (dq.length > 0 && ctx.measureText(dq + '..."').width > maxW) dq = dq.slice(0, -1)
-      this.rr(ctx, qx, qy, qr, qr, 10, 'stroke')
+        dq += '..."'
-      ctx.font = `500 16px ${F}`
+      }
-      ctx.setFillStyle(GRAY)
+      ctx.fillText(dq, P, y)
-      const sw = ctx.measureText('扫码').width
+      y += 56
-      ctx.fillText('扫码', qx + (qr - sw) / 2, qy + qr / 2 + 6)
 
-      // 计算实际内容高度（用于动态裁剪导出）
+      // 品牌 + 二维码
-      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: 0;
-  padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
+  display: flex;
-  display: flex; flex-direction: column; min-height: 100vh;
+  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;
+  width: 64rpx;
-  display: flex; align-items: center; justify-content: center;
+  height: 64rpx;
-  border-radius: $radius-full; background: $bg-card;
+  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; }
+.step-back-arrow {
-.photo-hint { text-align: center; margin-bottom: $sp-md; }
+  font-size: $fs-xl;
-.photo-hint-text { font-size: $fs-xs; color: $text-tertiary; }
+  color: $text-secondary;
-.template-switcher { display: flex; gap: $sp-md; margin-bottom: $sp-xl; justify-content: center; }
+  font-weight: $fw-bold;
-.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); }
 }
-.template-swatch {
+
-  width: 64rpx; height: 80rpx; border-radius: $radius-md;
+.card-nav-title {
-  border: 2rpx solid rgba(255,255,255,0.1); position: relative;
+  font-size: $fs-lg;
-  display: flex; align-items: center; justify-content: center;
+  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;
+  flex: 1;
-  justify-content: center; margin-bottom: $sp-xl; width: 100%;
+  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: '',
+      nickname: ''
-      drinkCategories: DRINK_CATEGORIES,
-      selectedCategories: [],
-      selectedFrequency: '',
-      frequencies: [
-        { id: 'daily', name: '几乎每天' },
-        { id: 'often', name: '经常喝' },
-        { id: 'sometimes', name: '偶尔喝' },
-        { id: 'rarely', name: '很少喝' }
-      ]
     }
   },
   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.finishLogin()
-        this.showPreferences = true
       } 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;
+ height: 100vh;
-  padding: $sp-xl;
+  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;
+  width: 300rpx;
-  height: 400rpx;
+  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;
+  width: 140rpx;
-  height: 200rpx;
+  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;
+  letter-spacing: -2rpx;
-  margin-bottom: $sp-sm;
+  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;
+  width: 80rpx;
-  height: 96rpx;
+  height: 80rpx;
   border-radius: $radius-full;
   border: 3rpx solid $amber;
   flex-shrink: 0;
 }
 
 .avatar-placeholder {
-  width: 96rpx;
+  width: 80rpx;
-  height: 96rpx;
+  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) => {