From 26b7111af02b23f842ba75a2fb4c2473036c2fa7 Mon Sep 17 00:00:00 2001
From: cheng <545895878@qq.com>
Date: Thu, 20 Aug 2026 22:34:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(card):=20=E5=AE=9E=E7=8E=B0=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88=E5=8C=BA=E5=9F=9F=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94=E7=BC=A9=E6=94=BE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加预览区高度动态计算逻辑，确保按钮始终可见
- 实现超大卡片等比缩放功能，避免超出屏幕范围
- 添加卡片真实高度测量和缩放比例计算
- 优化页面布局结构，设置固定操作按钮区域
- 调整样式防止内容溢出和滚动条显示
---
 pages/card/card.vue | 66 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 57 insertions(+), 9 deletions(-)

diff --git a/pages/card/card.vue b/pages/card/card.vue
index 9502185..679b24f 100644
--- a/pages/card/card.vue
+++ b/pages/card/card.vue
@@ -7,9 +7,15 @@
       <text class="card-nav-title">酒局卡片</text>
     </view>
 
-    <!-- 大卡片预览 -->
-    <view class="card-preview-area">
-      <DrinkCard v-if="record" :record="record" />
+    <!-- 大卡片预览：超高时自动等比缩放，保证按钮始终可见 -->
+    <view class="card-preview-area" :style="{ height: previewH + 'px' }">
+      <view
+        v-if="record"
+        class="card-scale-wrap"
+        :style="previewScale < 1 ? { transform: 'scale(' + previewScale + ')', width: '620rpx' } : {}"
+      >
+        <DrinkCard :record="record" />
+      </view>
       <view v-else class="card-empty">暂无记录</view>
     </view>
 
@@ -50,7 +56,11 @@ export default {
       record: null,
       saving: false,
       saved: false,
-      posterPath: '' // 预生成的海报图片路径
+      posterPath: '', // 预生成的海报图片路径
+      // 预览区自适应缩放
+      previewScale: 1,
+      previewH: 400,
+      cardNaturalH: 0
     }
   },
   async onLoad(options) {
@@ -76,12 +86,45 @@ export default {
       }
     }
     if (!this.record) this.record = this.loadLocalRecord(options.recordId) || this.fallback()
+    this.$nextTick(() => this.fitPreview())
   },
   onReady() {
     // 页面渲染完成后预生成海报，供分享使用
     this.preGeneratePoster()
+    // 图片加载完成后卡片高度会变化，延迟再适配一次
+    setTimeout(() => this.fitPreview(), 1500)
   },
   methods: {
+    // ===== 预览区自适应：卡片超高时等比缩放，按钮始终完整可见 =====
+    fitPreview() {
+      const sys = uni.getSystemInfoSync()
+      // 头部导航与底部按钮区的实测高度
+      const query = uni.createSelectorQuery().in(this)
+      query.select('.card-nav').boundingClientRect()
+      query.select('.card-actions').boundingClientRect()
+      query.exec(res => {
+        const navH = (res && res[0] && res[0].height) || 88
+        const actH = (res && res[1] && res[1].height) || 320
+        this.previewH = Math.max(200, sys.windowHeight - navH - actH)
+        this.measureCard()
+      })
+    },
+    measureCard() {
+      uni.createSelectorQuery().in(this)
+        .select('.card-root').boundingClientRect()
+        .exec(res => {
+          const h = res && res[0] && res[0].height
+          if (!h || h <= 0) {
+            // 卡片尚未渲染完成，稍后重试
+            setTimeout(() => this.measureCard(), 150)
+            return
+          }
+          // scale 后测量值已被缩放，还原真实高度
+          const natural = this.previewScale < 1 ? h / this.previewScale : h
+          this.cardNaturalH = natural
+          this.previewScale = natural > this.previewH ? Math.max(0.5, this.previewH / natural) : 1
+        })
+    },
     loadLocalRecord(id) {
       if (!id) return null
       try {
@@ -757,7 +800,8 @@ export default {
   padding: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
   background: $bg-base;
 }
 
@@ -792,14 +836,17 @@ export default {
   color: $text-primary;
 }
 
-/* 大卡片预览区 */
+/* 大卡片预览区：高度由 JS 按剩余可用空间动态设定，卡片超高时缩放 */
 .card-preview-area {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: $sp-lg;
-  min-height: 0;
+  padding: 0 $sp-lg;
+  overflow: hidden;
+}
+
+.card-scale-wrap {
+  transform-origin: center center;
 }
 
 .card-empty {
@@ -809,6 +856,7 @@ export default {
 
 /* 操作按钮 */
 .card-actions {
+  flex-shrink: 0;
   padding: $sp-lg;
   padding-bottom: calc($sp-lg + env(safe-area-inset-bottom));
   display: flex;