diff --git a/common/mock-data.js b/common/mock-data.js
index 2ae4572..c445b7e 100644
--- a/common/mock-data.js
+++ b/common/mock-data.js
@@ -113,7 +113,7 @@ export function generateMockRecords() {
 }
 
 // 初始化并缓存Mock数据
-export function initMockData() {
+export function initMockData() {自己看
   const records = generateMockRecords()
   uni.setStorageSync('drink_records', JSON.stringify(records))
   uni.setStorageSync('user_info', JSON.stringify(MOCK_USER))
diff --git a/components/DrinkCard.vue b/components/DrinkCard.vue
index 3d92f8c..6c34828 100644
--- a/components/DrinkCard.vue
+++ b/components/DrinkCard.vue
@@ -6,17 +6,14 @@
       <view class="bg-circle bg-circle-2"></view>
     </view>
 
-    <!-- ====== 无照片: 纯文字排版 ====== -->
+    <!-- ====== 0张: 纯文字排版 ====== -->
     <view v-if="photos.length === 0" class="card-no-photo">
       <view class="no-photo-header">
-        <view class="date-badge">
-          <text class="date-text">{{ record.date }}</text>
-        </view>
+        <view class="date-badge"><text class="date-text">{{ record.date }}</text></view>
         <view class="feeling-tag" v-if="record.feeling">
           <text>{{ getFeelingEmoji() }} {{ getFeelingName() }}</text>
         </view>
       </view>
-
       <view class="no-photo-hero">
         <view class="hero-drink-list">
           <view v-for="(drink, i) in record.drinks" :key="i" class="hero-drink-item">
@@ -29,7 +26,6 @@
           </view>
         </view>
       </view>
-
       <view class="no-photo-stats">
         <view class="stat-pill">
           <text class="stat-num">{{ record.standardCupsTotal }}</text>
@@ -41,36 +37,29 @@
           <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张照片: 全屏沉浸式 ====== -->
+    <!-- ====== 1张: 全屏沉浸式 ====== -->
     <view v-else-if="photos.length === 1" class="card-one-photo">
-      <image class="one-photo-bg" :src="photos[0]" mode="aspectFill"></image>
+      <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 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>
@@ -78,82 +67,112 @@
       </view>
     </view>
 
-    <!-- ====== 多张照片: 拼贴布局 ====== -->
+    <!-- ====== 多张: 拼贴布局 ====== -->
     <view v-else class="card-multi-photo">
-      <!-- 顶部信息条 -->
       <view class="multi-top">
-        <view class="date-badge">
-          <text class="date-text">{{ record.date }}</text>
-        </view>
+        <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>
 
-      <!-- 照片拼贴区域 -->
-      <view class="photo-collage" :class="'collage-' + photoLayout">
-        <!-- 2张: 左大右小 -->
-        <template v-if="photos.length === 2">
-          <view class="collage-item collage-large">
-            <image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
-          </view>
-          <view class="collage-item collage-small">
-            <image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
-          </view>
-        </template>
-
-        <!-- 3张: 左大右两小 -->
-        <template v-else-if="photos.length === 3">
-          <view class="collage-item c3-left">
-            <image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
-          </view>
-          <view class="c3-right">
-            <view class="collage-item c3-right-top">
-              <image :src="photos[1]" mode="aspectFill" class="collage-img"></image>
-            </view>
-            <view class="collage-item c3-right-bottom">
-              <image :src="photos[2]" mode="aspectFill" class="collage-img"></image>
-            </view>
-          </view>
-        </template>
-
-        <!-- 4张: 田字格 -->
-        <template v-else-if="photos.length === 4">
-          <view v-for="(p, i) in photos.slice(0, 4)" :key="i" class="collage-item collage-quarter">
-            <image :src="p" mode="aspectFill" class="collage-img"></image>
-          </view>
-        </template>
-
-        <!-- 5+张: 瀑布流 -->
-        <template v-else>
-          <view class="collage-item collage-hero">
-            <image :src="photos[0]" mode="aspectFill" class="collage-img"></image>
-          </view>
-          <view class="collage-strip">
-            <view v-for="(p, i) in photos.slice(1, 5)" :key="i" class="collage-item collage-strip-item">
-              <image :src="p" mode="aspectFill" class="collage-img"></image>
-            </view>
-            <view v-if="photos.length > 5" class="collage-more">
-              <text>+{{ photos.length - 5 }}</text>
-            </view>
-          </view>
-        </template>
+      <!-- 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>
@@ -161,11 +180,15 @@
       </view>
     </view>
 
-    <!-- 统一底部品牌 -->
+    <!-- 统一底部品牌 + 二维码 -->
     <view class="card-brand-bar">
-      <text class="brand-name">🍻 喝酒了么</text>
-      <view class="brand-dot"></view>
-      <text class="brand-slogan">记录每一杯的故事</text>
+      <view class="brand-left">
+        <text class="brand-name">🍻 喝酒了么</text>
+        <text class="brand-slogan">记录每一杯的故事</text>
+      </view>
+      <view class="brand-qr">
+        <text class="brand-qr-text">扫码</text>
+      </view>
     </view>
   </view>
 </template>
@@ -191,9 +214,7 @@ export default {
       const len = this.photos.length
       if (len === 0) return 'none'
       if (len === 1) return 'one'
-      if (len === 2) return 'two'
-      if (len === 3) return 'three'
-      if (len === 4) return 'four'
+      if (len <= 4) return 'few'
       return 'many'
     }
   },
@@ -223,7 +244,7 @@ export default {
 /* ========== 根容器 ========== */
 .card-root {
   position: relative;
-  width: 100%;
+  width: 650rpx;
   border-radius: $radius-xl;
   overflow: hidden;
   padding: $sp-lg;
@@ -237,531 +258,235 @@ export default {
   background: linear-gradient(160deg, #1A1308 0%, #0F0B06 40%, #1A1308 100%);
   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%);
-}
-.tpl-amber .bg-circle-2 {
-  background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%);
-}
+.tpl-amber .bg-circle-1 { background: radial-gradient(circle, rgba(232, 168, 56, 0.12), transparent 70%); }
+.tpl-amber .bg-circle-2 { background: radial-gradient(circle, rgba(245, 197, 99, 0.08), transparent 70%); }
 
 /* --- 模板: 暗夜极光 --- */
 .tpl-aurora {
   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 .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-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);
-}
+.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;
-}
+.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;
+  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);
-}
+.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;
+  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;
+  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);
-}
-.quote-text {
-  font-size: $fs-sm;
-  color: $text-secondary;
-  font-style: italic;
-  flex: 1;
-  line-height: $lh-loose;
-}
-.quote-text.light {
-  color: rgba(255, 255, 255, 0.7);
-}
+.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); }
+.quote-text { font-size: $fs-sm; color: $text-secondary; font-style: italic; flex: 1; line-height: $lh-loose; }
+.quote-text.light { color: rgba(255, 255, 255, 0.7); }
 
 /* 品牌底栏 */
 .card-brand-bar {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: $sp-sm;
-  padding-top: $sp-lg;
-  margin-top: auto;
+  position: relative; z-index: 1;
+  display: flex; align-items: center; justify-content: space-between;
+  padding-top: $sp-lg; margin-top: auto;
+  border-top: 2rpx solid rgba(255, 255, 255, 0.04);
 }
-.brand-name {
-  font-size: $fs-xs;
-  color: $text-tertiary;
+.brand-left {
+  display: flex; flex-direction: column; gap: 4rpx;
 }
-.brand-dot {
-  width: 4rpx;
-  height: 4rpx;
-  border-radius: $radius-full;
-  background: $text-tertiary;
+.brand-name { font-size: $fs-xs; color: $text-tertiary; font-weight: $fw-medium; }
+.brand-slogan { font-size: 18rpx; color: $text-tertiary; }
+.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;
+  flex-shrink: 0;
 }
-.brand-slogan {
-  font-size: $fs-xs;
-  color: $text-tertiary;
+.brand-qr-text {
+  font-size: 18rpx; color: $text-tertiary;
 }
 
-/* ========== 无照片布局 ========== */
+/* ========== 0张: 纯文字 ========== */
 .card-no-photo {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: $sp-lg;
+  position: relative; z-index: 1; flex: 1;
+  display: flex; flex-direction: column; gap: $sp-lg;
 }
-
-.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;
-}
-
+.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;
+  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;
-}
-
+.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;
+  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; }
 
-.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张照片布局 ========== */
+/* ========== 1张: 沉浸式 ========== */
 .card-one-photo {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  min-height: 600rpx;
-  border-radius: $radius-lg;
+  position: relative; z-index: 1; flex: 1;
+  min-height: 600rpx; border-radius: $radius-lg;
   overflow: hidden;
   margin: -#{$sp-lg};
-  /* 把 padding 加回来让品牌栏有空间 */
-  padding: $sp-lg;
-  padding-bottom: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  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%;
-  z-index: 0;
-}
-
+.one-photo-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
 .one-photo-overlay {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.3) 0%,
-    transparent 30%,
-    transparent 50%,
-    rgba(0, 0, 0, 0.75) 100%
-  );
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 30%, transparent 50%, rgba(0,0,0,0.75) 100%);
   z-index: 1;
 }
-
-.one-photo-top {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  justify-content: flex-start;
-  padding-top: $sp-sm;
-}
-
-.one-photo-bottom {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  flex-direction: column;
-  gap: $sp-md;
-  padding-bottom: $sp-md;
-}
-
-.photo-drink-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $sp-sm;
-}
-
+.one-photo-top { position: relative; z-index: 2; display: flex; justify-content: flex-start; padding-top: $sp-sm; }
+.one-photo-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; gap: $sp-md; padding-bottom: $sp-md; }
+.photo-drink-chips { display: flex; flex-wrap: wrap; gap: $sp-sm; }
 .drink-chip {
-  display: inline-flex;
-  align-items: center;
+  display: inline-flex; align-items: center;
   padding: $sp-xs $sp-md;
   background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(10px);
   border-radius: $radius-full;
   border: 1rpx solid rgba(255, 255, 255, 0.1);
-  font-size: $fs-xs;
-  color: rgba(255, 255, 255, 0.9);
+  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; }
 
-.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 {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: $sp-lg;
+  position: relative; z-index: 1; flex: 1;
+  display: flex; flex-direction: column; gap: $sp-lg;
 }
-
-.multi-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
+.multi-top { display: flex; justify-content: space-between; align-items: center; }
 .multi-cups-badge {
-  display: flex;
-  align-items: baseline;
-  gap: $sp-xs;
+  display: flex; align-items: baseline; gap: $sp-xs;
   padding: $sp-xs $sp-md;
   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; }
+.cups-badge-label { font-size: $fs-xs; color: $text-secondary; }
 
-.cups-badge-num {
-  font-size: $fs-lg;
-  font-weight: $fw-black;
-  color: $amber;
-  font-family: $font-num;
-}
-
-.cups-badge-label {
-  font-size: $fs-xs;
-  color: $text-secondary;
-}
-
-/* 照片拼贴 */
-.photo-collage {
-  border-radius: $radius-lg;
-  overflow: hidden;
-}
-
-/* 2张: 左大右小 */
-.collage-two {
-  display: flex;
-  gap: 6rpx;
-  height: 420rpx;
-}
-.collage-two .collage-large {
-  flex: 3;
-}
-.collage-two .collage-small {
-  flex: 2;
-}
-
-/* 3张: 左大右两小 */
-.collage-three {
-  display: flex;
-  gap: 8rpx;
-  height: 440rpx;
-}
-.collage-three .c3-left {
-  flex: 1;
-  height: 100%;
-  border-radius: $radius-md;
-}
-.collage-three .c3-right {
-  width: 45%;
-  display: flex;
-  flex-direction: column;
-  gap: 8rpx;
-}
-.collage-three .c3-right-top,
-.collage-three .c3-right-bottom {
-  flex: 1;
-  border-radius: $radius-md;
-}
-
-/* 4张: 田字格 */
-.collage-four {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6rpx;
-  height: 460rpx;
-}
-.collage-four .collage-quarter {
-  width: calc(50% - 3rpx);
-  height: calc(50% - 3rpx);
-}
-
-/* 5+张: 瀑布流 */
-.collage-many {
-  display: flex;
-  flex-direction: column;
-  gap: 6rpx;
-}
-.collage-many .collage-hero {
-  height: 320rpx;
-  border-radius: $radius-md;
-  overflow: hidden;
-}
-.collage-strip {
-  display: flex;
-  gap: 6rpx;
-  height: 160rpx;
-}
-.collage-strip-item {
-  flex: 1;
-  border-radius: $radius-sm;
-  overflow: hidden;
-}
-.collage-more {
-  width: 100rpx;
-  flex-shrink: 0;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: $radius-sm;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: $fs-sm;
-  color: $text-secondary;
-  font-weight: $fw-bold;
-}
-
-.collage-item {
+/* 照片网格公共 */
+.photo-grid { border-radius: $radius-lg; overflow: hidden; }
+.grid-item {
   overflow: hidden;
   border-radius: $radius-sm;
+  position: relative;
 }
-
-.collage-img {
+.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-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;
+  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;
+  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>
diff --git a/pages/card/card.vue b/pages/card/card.vue
index 5339331..ac22bcc 100644
--- a/pages/card/card.vue
+++ b/pages/card/card.vue
@@ -1,6 +1,5 @@
 <template>
   <view class="page-container card-page">
-    <!-- 顶部导航 -->
     <view class="card-nav">
       <view class="step-back" @click="goBack">
         <text class="step-back-arrow">‹</text>
@@ -8,22 +7,13 @@
       <text class="card-nav-title">你的酒局卡片</text>
     </view>
 
-    <!-- 照片提示 -->
     <view class="photo-hint" v-if="record">
-      <text class="photo-hint-text">
-        {{ photoHintText }}
-      </text>
+      <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 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>
@@ -32,36 +22,28 @@
       </view>
     </view>
 
-    <!-- 卡片预览 -->
     <view class="card-preview-area">
       <DrinkCard v-if="record" :record="record" :template="currentTemplate" />
     </view>
 
-    <!-- 操作按钮 -->
     <view class="card-actions">
-      <button class="btn-cta" @click="saveToAlbum">
-        💾 保存到相册
+      <button class="btn-cta" :loading="saving" :disabled="saving" @click="saveToAlbum">
+        {{ saving ? '保存中...' : '💾 保存到相册' }}
       </button>
       <view class="action-row">
-        <button class="btn-secondary action-btn" @click="shareToFriend">
-          🔗 分享好友
-        </button>
-        <button class="btn-secondary action-btn" @click="goHome">
-          🏠 返回首页
-        </button>
+        <button class="btn-secondary action-btn" @click="shareToFriend">🔗 分享好友</button>
+        <button class="btn-secondary action-btn" @click="goHome">🏠 返回首页</button>
       </view>
     </view>
 
-    <!-- 成功提示 -->
-    <view v-if="showSuccess" class="success-toast">
-      <text>✅ 已保存到相册</text>
-    </view>
+    <canvas canvas-id="shareCanvas" class="export-canvas" :style="{width:'750px',height:'1200px'}"></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'
 
 export default {
   components: { DrinkCard },
@@ -69,79 +51,328 @@ export default {
     return {
       currentTemplate: 'amber',
       record: null,
-      showSuccess: false,
+      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)'
-        }
+        { 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 photos = this.record.photos || []
-      if (photos.length === 0) return '📷 无照片 · 纯文字排版'
-      if (photos.length === 1) return '📸 单张照片 · 沉浸式全屏'
-      return `🖼️ ${photos.length}张照片 · 拼贴布局`
+      const p = this.record.photos || []
+      if (p.length === 0) return '📷 无照片 · 纯文字排版'
+      if (p.length === 1) return '📸 单张照片 · 沉浸式全屏'
+      return `🖼️ ${p.length}张照片 · 拼贴布局`
     }
   },
   onLoad(options) {
     const records = getRecords()
-    if (options && options.recordId) {
-      this.record = records.find(r => r.id === options.recordId)
-    }
-    if (!this.record) {
-      this.record = records.find(r => r.mode === 'drank') || this.getFallbackRecord()
-    }
+    if (options && options.recordId) this.record = records.find(r => r.id === options.recordId)
+    if (!this.record) this.record = records.find(r => r.mode === 'drank') || this.fallback()
   },
   methods: {
-    getFallbackRecord() {
+    fallback() {
       return {
-        date: new Date().toISOString().slice(0, 10),
-        mode: 'drank',
+        date: new Date().toISOString().slice(0, 10), mode: 'drank',
         drinks: [{ category: 'beer', brand: '青岛啤酒', product: '经典', amount: 2, unit: 'bottle', degree: 4.3, standardCups: 3.4 }],
-        food: { category: 'bbq', name: '烤串' },
-        feeling: 'tipsy',
-        photos: [],
-        standardCupsTotal: 3.4
+        food: { category: 'bbq', name: '烤串' }, feeling: 'tipsy', photos: [], standardCupsTotal: 3.4
       }
     },
-    saveToAlbum() {
-      this.showSuccess = true
-      uni.showToast({ title: '已保存到相册', icon: 'success' })
-      setTimeout(() => { this.showSuccess = false }, 2000)
+
+    // ===== 保存流程 =====
+    async saveToAlbum() {
+      if (this.saving) return
+      this.saving = true
+      try {
+        await this.drawExportCard()
+        const path = await this.exportImg()
+        await this.saveImg(path)
+        uni.showToast({ title: '已保存到相册', icon: 'success' })
+      } catch (e) {
+        console.error('保存失败:', e)
+        uni.showToast({ title: e.message || e.msg || '保存失败', icon: 'none', duration: 3000 })
+      } finally { this.saving = false }
     },
-    shareToFriend() {
-      uni.showToast({ title: '点击右上角分享', icon: 'none' })
+
+    // 加载图片
+    loadImg(src) {
+      return new Promise(r => {
+        if (!src) return r(null)
+        uni.getImageInfo({ src, success: res => r(res.path), fail: () => r(null) })
+      })
     },
-    goHome() {
-      uni.reLaunch({ url: '/pages/index/index' })
+
+    // ===== 简洁导出卡片绘制 =====
+    async drawExportCard() {
+      const ctx = uni.createCanvasContext('shareCanvas', this)
+      const W = 750, H = 1200
+      const rec = this.record
+      const P = 50 // padding
+      const tpl = this.currentTemplate
+
+      // 配色
+      const TH = {
+        amber: { bg: '#111111', line: '#2A2218', accent: '#E8A838', tagBg: '#1E1A14' },
+        aurora: { bg: '#0E0E16', line: '#1E1E2E', accent: '#5EC6A0', tagBg: '#141420' },
+        film: { bg: '#100F0D', line: '#252218', accent: '#C8B48C', tagBg: '#1A1814' }
+      }
+      const c = TH[tpl] || TH.amber
+      const WHITE = '#F0F0F0'
+      const GRAY = '#999999'
+      const DIM = '#666666'
+      const F = 'PingFang SC'
+
+      // 背景
+      ctx.setFillStyle(c.bg)
+      ctx.fillRect(0, 0, W, H)
+
+      // 顶部细线装饰
+      ctx.setFillStyle(c.accent)
+      ctx.fillRect(0, 0, W, 4)
+
+      let y = P + 10
+
+      // === 日期行 ===
+      ctx.font = `normal 26px ${F}`
+      ctx.setFillStyle(GRAY)
+      ctx.fillText(rec.date || '', P, y + 20)
+
+      // 标准杯（右对齐）
+      ctx.font = `bold 40px ${F}`
+      ctx.setFillStyle(c.accent)
+      const num = String(rec.standardCupsTotal)
+      const nw = ctx.measureText(num).width
+      ctx.fillText(num, W - P - nw - ctx.measureText(' 标准杯').width - 6, y + 24)
+      ctx.font = `normal 22px ${F}`
+      ctx.setFillStyle(GRAY)
+      ctx.fillText(' 标准杯', W - P - ctx.measureText(' 标准杯').width, y + 22)
+      y += 50
+
+      // === 照片 ===
+      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)
+        y += ph + 28
+      }
+
+      // === 酒水信息行 ===
+      const drinks = rec.drinks || []
+      if (drinks.length > 0) {
+        ctx.font = `bold 28px ${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 + 22)
+        y += 42
+      }
+
+      // === 配餐 + 感受 标签 ===
+      let tags = []
+      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)
+      }
+      if (rec.feeling) {
+        const f = FEELINGS.find(fe => fe.id === rec.feeling)
+        if (f) tags.push(f.name)
+      }
+      if (tags.length > 0) {
+        let tx = P
+        ctx.font = `normal 22px ${F}`
+        tags.forEach(tag => {
+          const tw = ctx.measureText(tag).width + 24
+          ctx.setFillStyle(c.tagBg)
+          this.rr(ctx, tx, y, tw, 32, 6, 'fill')
+          ctx.setFillStyle(GRAY)
+          ctx.fillText(tag, tx + 12, y + 22)
+          tx += tw + 10
+        })
+        y += 48
+      }
+
+      // === 分隔线 ===
+      ctx.setStrokeStyle(c.line)
+      ctx.setLineWidth(1)
+      ctx.beginPath()
+      ctx.moveTo(P, y)
+      ctx.lineTo(W - P, y)
+      ctx.stroke()
+      y += 24
+
+      // === 酒言酒语 ===
+      const quote = DRINK_QUOTES[Math.floor(Math.random() * DRINK_QUOTES.length)]
+      // 左侧装饰竖线
+      ctx.setFillStyle(c.accent)
+      this.rr(ctx, P, y, 4, 40, 2, 'fill')
+      // 引号
+      ctx.font = `bold 48px ${F}`
+      ctx.setGlobalAlpha(0.2)
+      ctx.fillText('"', P + 14, y + 38)
+      ctx.setGlobalAlpha(1)
+      // 引文
+      ctx.font = `normal 26px ${F}`
+      ctx.setFillStyle(GRAY)
+      const dq = quote.length > 14 ? quote.substring(0, 14) + '...' : quote
+      ctx.fillText(dq, P + 16, y + 28)
+      y += 60
+
+      // === 底部品牌栏 ===
+      ctx.setStrokeStyle(c.line)
+      ctx.beginPath()
+      ctx.moveTo(P, y)
+      ctx.lineTo(W - P, y)
+      ctx.stroke()
+      y += 28
+
+      // 品牌名
+      ctx.font = `bold 26px ${F}`
+      ctx.setFillStyle(WHITE)
+      ctx.fillText('喝酒了么', P, y + 20)
+      // 副标语
+      ctx.font = `normal 20px ${F}`
+      ctx.setFillStyle(DIM)
+      ctx.fillText('记录每一杯的故事', P, y + 50)
+
+      // 二维码占位
+      const qr = 80, qx = W - P - qr, qy = y
+      ctx.setFillStyle(c.tagBg)
+      this.rr(ctx, qx, qy, qr, qr, 8, 'fill')
+      ctx.setStrokeStyle(c.line)
+      ctx.setLineWidth(1)
+      this.rr(ctx, qx, qy, qr, qr, 8, 'stroke')
+      ctx.font = `normal 18px ${F}`
+      ctx.setFillStyle(DIM)
+      const sw = ctx.measureText('扫码').width
+      ctx.fillText('扫码', qx + (qr - sw) / 2, qy + qr / 2 + 7)
+
+      return new Promise(resolve => {
+        ctx.draw(false, () => setTimeout(resolve, 600))
+      })
     },
-    goBack() {
-      uni.navigateBack()
-    }
+
+    // 圆角矩形
+    rr(ctx, x, y, w, h, r, act) {
+      ctx.beginPath()
+      ctx.moveTo(x + r, y)
+      ctx.arcTo(x + w, y, x + w, y + h, r)
+      ctx.arcTo(x + w, y + h, x, y + h, r)
+      ctx.arcTo(x, y + h, x, y, r)
+      ctx.arcTo(x, y, x + w, y, r)
+      ctx.closePath()
+      if (act === 'stroke') ctx.stroke()
+      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() {
+      return new Promise((resolve, reject) => {
+        uni.canvasToTempFilePath({
+          canvasId: 'shareCanvas', quality: 1,
+          success: res => resolve(res.tempFilePath),
+          fail: err => reject({ msg: '导出失败: ' + (err.errMsg || '') })
+        }, this)
+      })
+    },
+
+    // 保存
+    saveImg(fp) {
+      return new Promise((resolve, reject) => {
+        uni.saveImageToPhotosAlbum({
+          filePath: fp, success: () => resolve(),
+          fail: err => {
+            if (err.errMsg && err.errMsg.includes('auth deny')) {
+              uni.showModal({
+                title: '提示', content: '需要授权保存相册',
+                confirmText: '去设置', success: r => { if (r.confirm) uni.openSetting() }
+              })
+              reject({ msg: '请授权相册' })
+            } else reject({ msg: '保存失败' })
+          }
+        })
+      })
+    },
+
+    shareToFriend() { uni.showToast({ title: '点击右上角分享', icon: 'none' }) },
+    goHome() { uni.reLaunch({ url: '/pages/index/index' }) },
+    goBack() { uni.navigateBack() }
   },
   onShareAppMessage() {
-    return {
-      title: '今晚的酒局记录 - 喝酒了么',
-      path: '/pages/index/index'
-    }
+    return { title: '今晚的酒局记录 - 喝酒了么', path: '/pages/index/index' }
   }
 }
 </script>
@@ -150,142 +381,43 @@ export default {
 .card-page {
   padding: $sp-lg;
   padding-bottom: calc(env(safe-area-inset-bottom) + $sp-xl);
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+  display: flex; flex-direction: column; min-height: 100vh;
 }
-
-/* 导航 */
 .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 0 $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;
-}
-
+.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);
-  }
+  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;
-  border: 2rpx solid rgba(255, 255, 255, 0.1);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  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;
 }
-
-.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;
-}
-
-/* 卡片预览 */
+.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%;
-}
-
-/* 操作按钮 */
-.card-actions {
-  padding-bottom: $sp-xl;
-}
-
-.action-row {
-  display: flex;
-  gap: $sp-md;
-  margin-top: $sp-md;
-}
-
-.action-btn {
-  flex: 1;
-}
-
-.success-toast {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.8);
-  color: #fff;
-  padding: $sp-lg $sp-xl;
-  border-radius: $radius-lg;
-  font-size: $fs-base;
-  z-index: 100;
+  flex: 1; display: flex; align-items: flex-start;
+  justify-content: center; margin-bottom: $sp-xl; width: 100%;
 }
+.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>
diff --git a/pages/record/record.vue b/pages/record/record.vue
index 62191a4..c544d97 100644
--- a/pages/record/record.vue
+++ b/pages/record/record.vue
@@ -420,6 +420,23 @@ export default {
       this.backfillDate = options.date
     }
   },
+  onBackPress() {
+    if (this.currentStep > 1 || this.hasFormData()) {
+      uni.showModal({
+        title: '放弃记录？',
+        content: '当前填写的内容将不会保存',
+        confirmText: '继续填写',
+        cancelText: '放弃',
+        success: (res) => {
+          if (res.cancel) {
+            uni.navigateBack()
+          }
+        }
+      })
+      return true // 阻止默认返回
+    }
+    return false
+  },
   methods: {
     selectCategory(cat) {
       this.currentDrink.category = cat.id
@@ -484,10 +501,30 @@ export default {
     handleBack() {
       if (this.currentStep > 1) {
         this.prevStep()
+      } else if (this.hasFormData()) {
+        uni.showModal({
+          title: '放弃记录？',
+          content: '当前填写的内容将不会保存',
+          confirmText: '继续填写',
+          cancelText: '放弃',
+          success: (res) => {
+            if (res.cancel) {
+              uni.navigateBack()
+            }
+          }
+        })
       } else {
         uni.navigateBack()
       }
     },
+    hasFormData() {
+      return this.drinks.length > 0 ||
+        this.currentDrink.brand ||
+        this.currentDrink.category ||
+        this.selectedFood ||
+        this.selectedFeeling ||
+        this.photos.length > 0
+    },
     prevStep() {
       if (this.currentStep > 1) this.currentStep--
     },