Ipad适配问题

spec_kit/iPad Adaptation/plan.md

@@ -0,0 +1,137 @@
+# iPad Adaptation（技术计划）
+
+## 1. 计划目标
+
+基于 `spec.md`，落地“全应用 iPad 适配（含 iOS Widget）”实施方案，确保：
+
+- 客户端所有页面在 iPad 下可用、可读、可交互；
+- 以 **竖屏** 为主目标完成逐页适配与验收；
+- iOS Widget 在 iPad 相关尺寸下展示稳定；
+- 全过程保持 **iPhone 零回归**。
+
+## 2. 默认技术决策
+
+- **适配方式**：React Native 断点 + 条件样式（不改 iPhone 基线参数）。
+- **iPad 判定**：`Platform.OS === 'ios' && Math.min(width, height) >= 768`。
+- **尺寸获取**：统一使用 `useWindowDimensions()`，避免 `Dimensions.get()` 静态值问题。
+- **布局原则**：页面采用“最大内容宽度 + 居中 + 弹性留白”。
+- **改造策略**：按页面逐个交付，单页完成后冻结，待确认再进入下一页。
+
+## 3. 工程配置基线（先决条件）
+
+### 3.1 原生配置核查
+
+- `app.json` 中 `expo.ios.supportsTablet = true`（已要求）。
+- iOS 工程目标设备族支持 iPad（`TARGETED_DEVICE_FAMILY` 需包含 `1,2`）。
+- 方向策略与产品要求一致（当前优先竖屏；若仅竖屏，则 iPad 也收敛为竖屏策略）。
+- 避免 iPad 以 iPhone 兼容模式运行（该模式会导致系统黑边）。
+
+### 3.2 运行模式与验收环境
+
+- iPad 模拟器：至少 1 台主流尺寸（如 11-inch）。
+- iPad 真机：至少 1 台（若可用），用于确认系统级显示行为。
+- iPhone 回归机型：至少小屏 + 大屏各 1 个。
+
+## 4. 页面适配实施策略（逐页）
+
+### 4.1 页面分批顺序
+
+1. 启动链路：`splash / consent / index`  
+2. Onboarding 全流程页  
+3. 主应用页：`home`、详情/弹层、设置、收藏等  
+4. 边缘页：`modal`、`not-found`、其他辅助页
+
+### 4.2 单页改造标准模板
+
+每页按以下模板执行：
+
+1. 梳理页面结构：首屏视觉区、正文区、底部操作区、浮层区。  
+2. 抽离 iPad 分支参数：最大宽度、字号、行高、间距、按钮尺寸。  
+3. 保持 iPhone 参数不变：原样式分支保留。  
+4. 自测：
+   - iPad 竖屏显示完整；
+   - 文案不截断、按钮可点击；
+   - iPhone 关键路径不回归。  
+5. 输出截图与验收点，待确认后冻结该页。
+
+### 4.3 可复用样式基线（建议）
+
+- 页面容器：`flex: 1` + `width/height: '100%'` + `alignSelf: 'stretch'`。  
+- 内容最大宽度：按页面类型设置（例如 560/620/680 分级），统一居中。  
+- 底部操作区：基于安全区与窗口高度计算，不使用硬编码魔法值。  
+- 文案区：限制最大阅读宽度，iPad 适度增大字号与行高。  
+- 图片/插画：按比例缩放，优先保持构图稳定，不压缩变形。
+
+## 5. iOS Widget 适配计划
+
+### 5.1 覆盖范围
+
+- 小/中/大组件在 iPad 下的展示一致性；
+- 文案长度、换行与截断策略；
+- 图形与文本的层级、边距、留白；
+- 浅色模式基线（深色模式按资源情况补充）。
+
+### 5.2 实施要点
+
+- 统一组件内边距与字号层级映射；
+- 对长文本提供优雅截断（避免溢出与跳变）；
+- 验证不同语言长度对布局影响；
+- 输出尺寸矩阵截图作为最终验收材料。
+
+## 6. iPhone 零回归保障
+
+- 所有 iPad 适配均以条件分支或断点参数实现；
+- 禁止直接覆盖 iPhone 基线字号/间距；
+- 每完成一页，执行 iPhone 冒烟回归：
+  - 启动流程；
+  - Onboarding 关键交互；
+  - Home 关键按钮与弹层；
+  - Settings/Favorites 基础可用性。
+
+## 7. 验收清单与交付物
+
+### 7.1 页面级验收清单
+
+- 布局完整：无重叠、无错位、无异常黑边；
+- 文案可读：不截断（可接受预期截断场景需说明）；
+- 交互可用：触控面积合理、按钮不被遮挡；
+- 状态一致：加载/空态/异常态显示正常；
+- iPhone 回归：关键路径无变化。
+
+### 7.2 交付物
+
+- 每页适配说明（改动点 + 参数策略）；
+- iPad 改前/改后截图；
+- iPhone 回归截图；
+- Widget 各尺寸截图；
+- 最终页面覆盖矩阵与验收记录。
+
+## 8. 分阶段里程碑
+
+1. **M1 基线搭建**  
+   - 完成原生配置核查与适配基线工具/约定；
+   - 输出页面清单与验收模板。  
+
+2. **M2 页面逐页适配**  
+   - 按既定顺序逐页改造；
+   - 每页交付后等待确认，再继续下一页。  
+
+3. **M3 Widget 收口**  
+   - 完成 iPad 尺寸矩阵验证；
+   - 修复文本/间距/层级问题。  
+
+4. **M4 全量回归与发布前验收**  
+   - iPad 全页验收 + iPhone 零回归确认；
+   - 形成最终验收文档。
+
+## 9. 风险与应对
+
+- **风险**：页面存在大量固定像素值，局部改动引发联动。  
+  **应对**：参数分层、按区块替换、单页冻结机制。
+
+- **风险**：iPad 多窗口/舞台管理导致尺寸波动。  
+  **应对**：以竖屏全屏为主验收，同时保留窗口变化最小兼容策略。
+
+- **风险**：多语言文案长度影响 widget 与页面稳定性。  
+  **应对**：统一截断/换行规则，增加长文案样本回归。
+

spec_kit/iPad Adaptation/spec.md

@@ -0,0 +1,92 @@
+# iPad Adaptation Spec
+
+## Background
+
+当前应用主要按 iPhone 体验实现，iPad 上存在以下问题：
+- 页面布局在竖屏/横屏或不同窗口尺寸下出现留黑边、内容拥挤、元素比例失衡。
+- 各页面对 iPad 的适配策略不统一，样式行为不可预测。
+- iOS Widget 在 iPad 场景下缺少完整的尺寸与排版一致性规范。
+
+本需求定义“全应用 iPad 适配”高层规范，覆盖客户端全部页面与 iOS 小组件，确保不回归现有 iPhone 体验。
+
+## Goals
+
+1. 为客户端所有页面建立统一的 iPad 适配规范（优先竖屏，兼容 iPad 常见窗口模式）。
+2. 完成全部页面在 iPad 下的布局、间距、字号、交互可用性优化。
+3. 完成 iOS Widget 在 iPad 相关尺寸上的视觉与信息层级适配。
+4. 明确“iPad 适配不影响 iPhone”的约束、验收与回归策略。
+
+## Non-Goals
+
+- 不重做品牌视觉与核心交互流程。
+- 不引入与 iPad 适配无关的新业务功能。
+- 不调整后端接口契约（除非为 Widget 展示字段做最小兼容补充）。
+
+## Scope
+
+### In Scope
+
+- `client/app/` 下所有用户可见页面（启动、协议、onboarding、home、modal、not-found 等）。
+- 共享组件与页面级组件在 iPad 场景下的布局策略（容器宽度、断点、字号、触控面积、safe area 处理）。
+- iPad 竖屏主流程视觉一致性与可用性。
+- iOS Widget（小/中/大尺寸）在 iPad 的展示、文本截断、间距与点击目标。
+- iPad 相关工程配置核查（如设备家族支持、方向策略与运行模式）。
+
+### Out of Scope
+
+- Android 平板专项适配。
+- Web 端平板适配。
+- 新增 widget 类型或新增推荐策略。
+
+## Core Requirements
+
+### R1. 统一适配基线
+
+- 定义 iPad 判定与布局断点策略，避免各页面各自实现。
+- 页面默认使用“内容最大宽度 + 居中 + 弹性留白”模式，不出现视觉黑边误判。
+- 明确安全区、状态栏、底部操作区在 iPad 下的通用规则。
+
+### R2. 页面逐页适配
+
+- 按页面清单逐页交付，单页可独立验收。
+- 每页适配需覆盖：首屏构图、正文可读性、底部操作区、长文案换行与触控可用性。
+- 已完成页面进入“冻结状态”，未经确认不回改。
+
+### R3. iPhone 零回归
+
+- 所有 iPad 样式调整必须使用条件分支或断点方案，不修改 iPhone 基线参数。
+- 每次页面适配后执行 iPhone 快速回归（关键路径与关键组件）。
+
+### R4. iOS Widget 适配
+
+- 覆盖 iPad 下 widget 尺寸与展示密度差异，保证文本与图形不溢出、不遮挡。
+- 小组件与主 App 的主题、字体层级、文案截断策略保持一致。
+- 提供 widget 预览/截图验收基线（至少包含浅色模式）。
+
+### R5. 验收与质量
+
+- 建立页面级验收清单：布局完整性、可读性、点击可达性、状态一致性、异常文案表现。
+- 关键页面提供 iPad 对比截图（改前/改后）与 iPhone 回归截图。
+- 适配完成后输出覆盖清单，确保无遗漏页面。
+
+## Acceptance Criteria
+
+1. 应用在 iPad 真机/模拟器上以 iPad 模式运行，不出现 iPhone 兼容模式导致的系统黑边。
+2. 全部页面在 iPad 竖屏下通过视觉与交互验收，页面无明显错位、截断、重叠。
+3. iPhone 主流尺寸下关键路径无样式与交互回归。
+4. iOS Widget 在 iPad 对应尺寸下通过展示验收。
+5. 提供最终“页面覆盖矩阵 + 验收记录”。
+
+## Risks
+
+- 现有页面存在大量固定像素值，逐页改造可能引入局部联动风险。
+- iPad 多窗口/舞台管理会带来额外窗口尺寸变化，需要明确支持级别。
+- Widget 文案长度受多语言影响，需预留截断与回退策略。
+
+## Milestones (High-Level)
+
+1. 基线与清单：完成断点策略、页面与组件清单、验收模板。
+2. 页面适配：按“启动链路 -> onboarding -> 主页面 -> 弹层/边缘页面”逐页交付。
+3. Widget 适配：完成尺寸验证与视觉一致性收口。
+4. 全量回归：iPad 全页检查 + iPhone 零回归确认 + 发布前验收。
+

spec_kit/iPad Adaptation/task.md

@@ -0,0 +1,151 @@
+# iPad Adaptation（任务清单）
+
+> 说明：本清单由 `plan.md` 拆解，强调“详细、可执行、可验收”。  
+> 执行规则：完成后将 `- [ ]` 改为 `- [x]`；阻塞项需补充阻塞原因与解除条件。  
+> 约束：所有 iPad 改动不得影响 iPhone 现有适配。
+
+## 0. 基线与准备
+
+- [ ] **T0-1 建立页面与组件盘点清单**  
+  - 输出：`client/app/` 页面清单 + 关键共享组件清单（含负责人/优先级）  
+  - 验收：清单覆盖启动链路、onboarding、home、settings、favorites、modal、not-found
+
+- [ ] **T0-2 建立验收模板（页面级）**  
+  - 输出：统一验收模板（布局、文案、交互、状态、iPhone 回归、截图）  
+  - 验收：模板可用于每页独立签收
+
+- [x] **T0-3 建立 iPad 适配基线工具函数/约定**  
+  - 内容：统一 `isTablet` 判定、宽度分级（560/620/680）、容器基线写法  
+  - 验收：至少在 1 个页面实际接入并可复用
+
+## 1. 原生配置修正（黑边先决条件）
+
+- [x] **T1-1 修正 iOS 目标设备族为 iPhone+iPad**  
+  - 文件：`client/ios/client.xcodeproj/project.pbxproj`  
+  - 要求：主 App target（Debug/Release）`TARGETED_DEVICE_FAMILY` 包含 `1,2`  
+  - 验收：iPad 运行不再是 iPhone 兼容模式
+
+- [x] **T1-2 校验方向策略与产品要求一致（优先竖屏）**  
+  - 文件：`client/app.json`、`client/ios/client/Info.plist`  
+  - 要求：iPad 方向策略与“竖屏优先”一致，不引入系统级黑边  
+  - 验收：iPad 竖屏全屏显示稳定
+
+- [ ] **T1-3 设备验证（基础冒烟）**  
+  - 场景：iPad 模拟器（至少 11-inch）+ iPhone 两档尺寸  
+  - 验收：启动页无系统黑边，应用可正常进入主流程
+
+## 2. 启动链路页面适配（第一批）
+
+- [x] **T2-1 适配 `app/(splash)/splash.tsx`（同意页）**  
+  - 范围：首屏构图、文案可读、底部按钮区、安全区  
+  - 要求：iPad 使用独立参数分支，iPhone 参数保持不变  
+  - 验收：iPad 竖屏无错位、无遮挡；iPhone 对比无回归
+
+- [x] **T2-2 适配 `app/index.tsx`（启动分发页）**  
+  - 范围：加载态容器尺寸、跳转前视觉稳定性  
+  - 验收：iPad 下不闪烁、不出现异常留边
+
+- [ ] **T2-3 启动链路验收与冻结**  
+  - 输出：iPad 改前/改后截图 + iPhone 回归截图  
+  - 验收：产品确认后标记“冻结”，不再改动本批页面
+
+## 3. Onboarding 全流程适配（第二批）
+
+- [x] **T3-1 适配 `components/onboarding/OnboardingLayout.tsx`**  
+  - 范围：标题区、进度区、内容最大宽度、顶部操作区  
+  - 验收：iPad 竖屏布局层级清晰，交互区域可达
+
+- [x] **T3-2 适配 `components/onboarding/NameInputStep.tsx`**  
+  - 范围：输入卡片宽度、键盘抬升、底部按钮区  
+  - 验收：iPad 输入过程不卡位、不遮挡按钮
+
+- [x] **T3-3 适配 `components/onboarding/SelectionStep.tsx`**  
+  - 范围：选项卡宽度/间距、滚动区底部留白、底部按钮区  
+  - 验收：末项可见且不被按钮覆盖
+
+- [x] **T3-4 适配 `components/onboarding/ReminderStep.tsx`**  
+  - 范围：数字区比例、加减按钮间距、完成按钮区域  
+  - 验收：iPad 读数清晰，触控误触率低
+
+- [x] **T3-5 适配 `app/(onboarding)/onboarding.tsx`（流程壳）**  
+  - 范围：步骤切换稳定性、loading 态布局一致性  
+  - 验收：全流程在 iPad 竖屏可连续通过
+
+- [ ] **T3-6 Onboarding 批次验收与冻结**  
+  - 输出：逐页截图 + 关键交互录屏（可选） + iPhone 回归截图  
+  - 验收：确认后冻结本批页面
+
+## 4. 主应用页面适配（第三批）
+
+- [x] **T4-1 适配 `app/(app)/home.tsx`**  
+  - 范围：卡片区、顶部入口、底部操作、空/加载状态  
+  - 验收：iPad 信息层级清晰，无文本溢出
+
+- [ ] **T4-2 适配 Home 相关弹层组件**  
+  - 范围：`components/home/` 下弹层、设置卡片、协议入口弹窗  
+  - 验收：弹层在 iPad 下尺寸与点击区合理
+
+- [ ] **T4-3 适配收藏/设置相关页面与入口**  
+  - 范围：Favorites、Settings 及关联子组件  
+  - 验收：列表与信息卡在 iPad 下无拥挤/空旷失衡
+
+- [ ] **T4-4 主应用批次验收与冻结**  
+  - 输出：关键页面截图 + 回归记录  
+  - 验收：产品确认后冻结
+
+## 5. 边缘页面与通用组件适配（第四批）
+
+- [x] **T5-1 适配边缘路由页面**  
+  - 范围：`modal`、`+not-found`、其他辅助页  
+  - 验收：iPad 下无明显样式异常
+
+- [ ] **T5-2 清理固定像素高风险点**  
+  - 范围：扫描固定宽高/绝对定位集中区域，替换为分支参数  
+  - 验收：高风险点清单完成闭环
+
+- [ ] **T5-3 通用组件收口**  
+  - 范围：复用组件（如 Sheet、按钮、卡片容器）统一 iPad 参数  
+  - 验收：跨页面表现一致
+
+## 6. iOS Widget iPad 适配
+
+- [ ] **T6-1 盘点 Widget 展示尺寸与当前问题**  
+  - 范围：Small/Medium/Large 在 iPad 下的展示差异  
+  - 验收：输出问题矩阵（文字溢出/留白/层级）
+
+- [ ] **T6-2 调整 Widget 排版参数**  
+  - 范围：边距、字号、行高、文本截断策略  
+  - 验收：各尺寸均无溢出、无遮挡、层级清晰
+
+- [ ] **T6-3 多语言长文案回归**  
+  - 范围：至少 TC/EN 长短文案样本  
+  - 验收：不同语言下展示稳定
+
+- [ ] **T6-4 Widget 验收截图归档**  
+  - 输出：各尺寸截图（浅色模式必选）  
+  - 验收：可用于最终发布验收材料
+
+## 7. 全量回归与发布前验收
+
+- [ ] **T7-1 iPad 全页面走查**  
+  - 范围：按页面清单逐项验证布局/交互/状态  
+  - 验收：无 P0/P1 视觉与交互问题
+
+- [ ] **T7-2 iPhone 零回归冒烟**  
+  - 范围：启动、onboarding、home、settings、favorites、关键弹层  
+  - 验收：关键路径行为与样式无回归
+
+- [ ] **T7-3 输出最终覆盖矩阵与验收记录**  
+  - 输出：页面覆盖表、问题清单、处理结论、剩余风险  
+  - 验收：可直接作为发布前审阅材料
+
+## 8. 收尾与文档同步（全部完成后执行）
+
+- [ ] **T8-1 更新 `spec_kit/overview.md` 对应条目**  
+  - 要求：新增 `iPad Adaptation` 小节，记录目标、范围、阶段产物、完成状态  
+  - 验收：`overview.md` 可一眼看出该需求“任务已全部执行完毕”
+
+- [ ] **T8-2 标记本文件完成状态**  
+  - 要求：`task.md` 全部条目改为 `[x]`，并在文件顶部补“已完成日期/负责人”  
+  - 验收：任务清单闭环
+