From 95dfd653ba5c3e1b901514790e090284455d48fa Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Sat, 18 Jul 2026 05:11:21 +0800
Subject: [PATCH] fix(mobile): remove inherited page padding gaps around chat
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

客户标注了四处间距问题:头部上方空隙、头部/切换条两侧内缩、
输入条两侧内缩、输入条与 tab 栏之间约 96px 灰色空档。

根因:全局 .page 类自带 padding: 22px 16px 96px 且 min-height:100vh,
会话页继承后四边都被垫开;页面高度 calc 与之叠加产生底部大空档。

修复:
- .sop-chat-page 改为 fixed 铺满窗口区(--window-top 到 --window-bottom),
  padding 清零,头部/线程/输入条边到边,与微信布局一致
- ChatComposer 底部去掉 env(safe-area-inset-bottom) 叠加(tab 栏自行处理)

验证:本地与生产实测 headTop=0 headLeft=0 composer 与 tab 栏间距 ≤1px;
截图目检通过。发布备份 h5-before-20260718051038。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 mobile-uni/src/components/chat/ChatComposer.vue | 2 +-
 mobile-uni/src/pages/user/sop/index.vue         | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/mobile-uni/src/components/chat/ChatComposer.vue b/mobile-uni/src/components/chat/ChatComposer.vue
index 538f0a81..bbda5890 100644
--- a/mobile-uni/src/components/chat/ChatComposer.vue
+++ b/mobile-uni/src/components/chat/ChatComposer.vue
@@ -223,7 +223,7 @@ defineExpose({ teardown });
 .chat-composer-wrap {
   border-top: 1px solid #ebedf0;
   background: #f7f8fa;
-  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
+  padding: 8px 10px 10px;
 }
 
 .chip-scroll {
diff --git a/mobile-uni/src/pages/user/sop/index.vue b/mobile-uni/src/pages/user/sop/index.vue
index a5e7ba87..7fd0ab39 100644
--- a/mobile-uni/src/pages/user/sop/index.vue
+++ b/mobile-uni/src/pages/user/sop/index.vue
@@ -1826,9 +1826,16 @@ onUnload(() => {
 
 /* ===== chat layout (WeChat-style rebuild) ===== */
 .sop-chat-page {
+  position: fixed;
+  top: var(--window-top, 0px);
+  right: 0;
+  bottom: var(--window-bottom, 0px);
+  left: 0;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
+  min-height: 0;
+  height: auto;
+  padding: 0;
   background: #f2f3f5;
   overflow: hidden;
 }