From 0481f917ee920f3347b1de28c94fea519076de8e Mon Sep 17 00:00:00 2001
From: yueli <yueli@example.com>
Date: Mon, 14 Sep 2026 11:10:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(stocktake):=20=E4=BF=AE=E6=AD=A3=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=AE=B9=E5=99=A8=E9=AB=98=E5=BA=A6=20=E2=80=94?=
 =?UTF-8?q?=E2=80=94=20=E7=9C=9F=E6=AD=A3=E8=A7=A3=E5=86=B3=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E8=A2=AB=E8=A3=81=E7=9A=84=E7=9C=9F=E6=A0=B9=E5=9B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

前几轮都在 .idle-card 内层打转（min-height:0 / overflow / padding / 去居中），
全都没打到点上。真根因在页面容器**之外**：

  .app-wrapper  { height:100vh; overflow:hidden }        App.vue
    .app-content { flex:1; min-height:0; overflow:hidden }  ← 高度 = 100vh − 90px
      .app-main  { position:relative }                       ← 无高度
        .app-container { height:100vh }                      ← 就是本页

App.vue 里 .app-header 是 60px、.app-footer 是 30px，所以 .app-content 的实际
高度是 100vh − 90px。而本页容器写死 height:100vh，**比父容器高出整整 90px**，
超出的那一截被 .app-content 的 overflow:hidden 裁掉 —— 【开始新盘点】按钮
恰好就在那一截里，所以看不见也滚不到（滚动条属于被裁掉的那部分）。

改法：height 改为 calc(100vh - 60px - 30px)，两个高度提成 CSS 变量并注明
对应 App.vue 的哪个类，便于外壳改动时同步。

为何不用 height:100%：.app-main 是 auto 高度，百分比无从解析，会退化成 auto。

同时保留前几轮的成果（它们各自都是对的，只是不足以单独解决问题）：
- .idle-card { min-height:0; display:block; overflow:hidden auto }
- .idle-content { margin:0 auto; padding:20px 20px 60px }
- .scope-columns 高度 380 → 260，再省 120px
---
 .../src/views/stock/stocktake/index.vue       | 62 ++++++++++++-------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/inventory-web/src/views/stock/stocktake/index.vue b/inventory-web/src/views/stock/stocktake/index.vue
index 0fa8e2c..24f7a3e 100644
--- a/inventory-web/src/views/stock/stocktake/index.vue
+++ b/inventory-web/src/views/stock/stocktake/index.vue
@@ -1844,8 +1844,21 @@ const goToVarianceReview = () => {
 
 <style scoped>
 .app-container.mobile-optimized {
+  /* ★★★ 防截断的关键在这里，不在 .idle-card ★★★
+     本页嵌在 Layout 里，链路是：
+       .app-wrapper { height:100vh; overflow:hidden }
+         .app-content { flex:1; min-height:0; overflow:hidden }  ← 实际高度 = 100vh − 90px
+           .app-main { position:relative }                        ← 无高度
+             .app-container ← 就是本元素
+     .app-content 的高度已扣除头部 60px 与页脚 30px，而这里写死 100vh 就会
+     比父容器高出整整 90px —— 超出的部分被 .app-content 的 overflow:hidden
+     直接裁掉，而【开始新盘点】按钮恰好落在那一截里。所以无论内层怎么加
+     overflow-y 都救不回来：裁剪点在页面容器之外。
+     （实测 height:100% 无效 —— .app-main 是 auto 高度，百分比无从解析。） */
+  --shell-header-h: 60px;   /* 对应 App.vue 的 .app-header */
+  --shell-footer-h: 30px;   /* 对应 App.vue 的 .app-footer */
   width: 100%;
-  height: 100vh;
+  height: calc(100vh - var(--shell-header-h) - var(--shell-footer-h));
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -1853,35 +1866,34 @@ const goToVarianceReview = () => {
 }
 
 .idle-card {
+  /* ★★ 本页布局的三条命根，缺一条按钮就会被裁在屏幕外 ★★
+     1) flex:1 + min-height:0 —— 卡片被约束成「容器剩余高度」。
+        flex 子项默认 min-height:auto 会拒绝收缩到内容高度以下，
+        那样卡片会撑破 .app-container 的 100vh，overflow 永不触发，
+        最终被 body 的全局 overflow:hidden（src/style.css）裁掉。
+     2) display:block —— 彻底放弃 flex 垂直居中。此前用 flex + margin:auto
+        居中，一旦内容超高就会向上下两头溢出，属于防不住的经典陷阱。
+        回归常规块级排布后不存在"居中溢出"这回事，内容永远从顶部往下排。
+     3) overflow-y:auto —— 内容超高时卡片内部滚动（显式写两轴，
+        压过 .el-card 默认的 overflow:hidden）。 */
   flex: 1;
-  /* ★★ min-height: 0 是整套布局的关键，缺了它前面几轮都白改 ★★
-     flex 子项默认 min-height: auto —— 拒绝收缩到内容高度以下。于是卡片会
-     撑破 .app-container 的 100vh，自己的 overflow-y 永远不会触发，最终被
-     body 上的全局 overflow: hidden（src/style.css）裁掉：按钮既看不见、
-     也滚不到。
-     加上它，卡片被约束成「容器剩余高度」，内部滚动才真正生效。 */
   min-height: 0;
-  display: flex;
-  flex-direction: column;
-  /* 刻意不用 justify-content: center —— flex 居中在内容超出时会把上下两端
-     **同时裁掉**，居中改由子元素的 margin:auto 承担：内容不高时正常居中，
-     超高时 auto 塌缩为 0，从顶部开始排布并保留底部安全边距。 */
-  align-items: center;
-  text-align: center;
+  display: block;
+  overflow: hidden auto;
+  text-align: center;                  /* 居中只靠文字对齐，不靠 flex */
   border: none;
   border-radius: 0;
-  /* 显式写全 overflow 两轴：.el-card 默认 overflow:hidden，
-     这里用 scoped 选择器（.idle-card[data-v-x]，特异性 0,2,0）压过它，
-     明确声明「横向裁掉、纵向可滚」 */
-  overflow: hidden auto;
   -webkit-overflow-scrolling: touch;   /* 平板/iOS 惯性滚动 */
-  /* ★ 上下各留 40px 安全边距。用 padding 而不是子元素 margin：
-     margin:auto 在内容超高时会塌缩为 0，导致文字紧贴屏幕顶端；
-     容器自身的 padding 则始终保留，滚到顶/底都有呼吸空间 */
-  padding: 40px 0;
+}
+.idle-content {
+  width: 100%;
+  max-width: 400px;
+  /* ★ 只做水平居中，绝不做垂直居中 —— 垂直居中是按钮被挤出屏幕的根源 */
+  margin: 0 auto;
+  /* 上 20 / 下 60：底部多留，保证滚到底时按钮下方还有呼吸空间 */
+  padding: 20px 20px 60px;
   box-sizing: border-box;
 }
-.idle-content { width: 100%; max-width: 400px; padding: 20px; margin: auto; }
 /* 抽盘配置区是双栏，窄容器装不下，此时放宽欢迎页 */
 .idle-content.is-wide { max-width: 780px; }
 .app-title { font-size: 24px; margin-bottom: 10px; color: #303133; }
@@ -2003,7 +2015,9 @@ const goToVarianceReview = () => {
 .scope-columns {
   display: flex;
   gap: 10px;
-  height: 380px;
+  /* 从 380 压到 260，省出 120px 垂直空间，小屏/100% 缩放时按钮更容易露出。
+     树与已选列表各自 flex:1 + overflow 独立滚动，内容多少都不会撑高。 */
+  height: 260px;
 }
 .scope-col-left {
   flex: 0 0 60%;