prompt-optimizer/docs/architecture/mobile-basic-implementation.md

> **阶段历史记录。** 现状与架构边界以 [移动端架构评估](mobile-architecture-review.md) 为准。下文保留原记录日期的方案、验证与限制；“当前”“通过”等表述只指当时范围，不代表最新状态或完整移动体验验收。截图、日志及设备操作记录保存在本地证据目录（包括 Git 忽略目录），未随本页发布。

> 2026-10-21 更新：内部分页已被[同屏工作区设计](mobile-co-visible-workspaces.md)取代。以下为上一阶段实现记录；该链接同样是后续阶段记录，现状统一以架构评估为准。

# 基础模式移动端实现与验收

日期：2026-10-20

状态：基础系统、基础用户模式已形成可本地体验的实现。真实模型流程和浏览器模拟尺寸检查通过；等待用户体验反馈与手机实机验收。尚未提交、推送或发布。

后续范围更新：上下文与图像的其余五个工作区已接入相同布局，见 [全部工作区扩展记录](./mobile-all-workspaces-implementation.md)。下文“本轮未适配上下文与图像”描述的是基础阶段的历史范围。

## 体验入口

- 系统模式：`http://127.0.0.1:18181/#/basic/system`
- 用户模式：`http://127.0.0.1:18181/#/basic/user`
- 本地启动：在仓库根目录执行 `pnpm -F @prompt-optimizer/web exec vite --config vite.workspace-preview.config.ts`。预览配置继承项目默认端口 18181，不再单独覆盖端口。
- 2026-10-20 按用户反馈统一回默认端口。下文原验收及截图在此前的 18236 独立来源完成；不自动覆盖或迁移两个来源中的浏览器数据。
- 预览配置直接引用本工作树的 UI 源码，没有演示服务注入。正式 Web 入口也使用相同实现，不依赖预览开关。
- 本次真实调用使用已有配置的自定义模型，在独立预览来源中显示为 `Mobile Preview`。本地配置和运行日志均被 Git 忽略，不能随发布包交付。
- 当前示例内容用于验证流程；真实模型可能补充未给出的信息，本次不把单次生成质量作为模型质量验收。

## 已实现

| 范围 | 行为 |
| --- | --- |
| 两个工作区域 | 小于 1024px 的工作区显示“优化 / 测试”；桌面保持并排。复用两个 Basic 工作区中的真实组件实例，切区域使用显隐，不重建业务状态。 |
| 优化 | 原始输入、模型和功能提示词选择、流式优化、编辑、保存新版本、V0 和历史版本、继续优化、原始/上一版本文字对照。 |
| 测试 | 系统模式保留共享测试输入；用户模式直接测试提示词。支持原始、工作区、上一版和指定版本来源，以及各组模型、单组运行、全部运行和结果保存。 |
| 测试组 | 启用 2/3/4 组与屏幕列数分开；手机一次看一组，窄桌面测试区也可切组，缩放不删除 C/D。 |
| 来源与旧结果 | 来源标签打开只读全文；明确选择编辑才返回优化。条件变化后保留回答并提示重新测试，阻止用旧回答保存当前条件。 |
| 草稿保护 | 切换版本、重新优化、应用收藏/历史前保护未保存工作区；模型表单返回也有确认。两区切换无需确认。 |
| 失败处理 | 继续优化失败恢复之前的提示词与推理内容，保留迭代要求；测试失败标明失败组，部分回答不能直接作为成功样例保存。 |
| 导航与弹窗 | 复用原模式导航和真实管理器；菜单提供收藏、历史、功能提示词、模型、变量、数据、主题、语言和帮助。长表单用整页弹窗，短选择保留紧凑弹窗。 |
| 返回 | 手机浏览器返回优先关闭顶层弹窗；嵌套编辑返回列表。进入收藏页面前先结束菜单的历史记录，避免跳转被弹窗返回覆盖。 |
| 阅读与输入 | 手机测试区固定组与运行入口，只有回答滚动，测试配置进入全屏设置面板；文本编辑保留有界输入区。保留安全区样式，并根据可视视口判断键盘显示、让出底部区域切换栏。 |

移动布局隐藏 AI 评估入口，桌面仍保留原有评估。上下文与图像模式继续使用现有页面，本轮未完成它们的移动布局重组。

## 复用与改动位置

- `useWorkspaceLayout`：容器宽度、布局模式和键盘显示判断。
- `useBasicWorkspaceView`：每个基础模式独立的区域、组、折叠及阅读位置；不改会话持久化格式。
- `WorkspaceRegionSwitch`、`CompactNavigation`：区域切换与原导航入口重排。
- `AdaptiveModal`、`useCompactModalBack`：现有弹窗的窄屏外壳及返回行为。
- `InputPanel`、`PromptPanel`、`OutputDisplay`：保留业务行为，增加紧凑布局与按内容高度阅读。
- `MarkdownRenderer`：滚动容器因断点变化而替换时重新填充相同内容，避免回答变空。
- `BasicSystemWorkspace`、`BasicUserWorkspace`：接入以上布局能力，并保留既有服务、store、测试来源和模型接口。
- 收藏、历史、模型、变量、模板与数据管理继续使用原组件及数据。

旧独立原型代码已移出活跃源码，保存在被忽略的 `.codex-run/mobile-prototype-archive/`。旧原型验收记录仍作为历史资料保留。

## 已执行的验证

### 真实页面流程

1. 两种基础模式均使用真实模型完成优化和继续优化。
2. 系统模式运行原始与工作区 A/B 测试；用户模式在优化前直接运行原始提示词，再测试优化及编辑保存后的工作区。
3. 生成过程中切到测试区，生成继续，完成不会强制切回优化。
4. 编辑后切区仍保留草稿；旧测试出现提示，保存样例被禁用；取消 V0 覆盖确认后草稿仍在，保存修改产生 V3。
5. 文字差异视图显示实际差异；来源全文查看及返回保留当前测试组。
6. 设置四组、选中 D、切桌面再回手机，四组和 D 选择均保留。
7. 测试结果保存到收藏，重新打开详情能看到原测试输入和回答；应用样例恢复系统模式输入；历史恢复回原版本链。
8. 模型列表 → 编辑 → 返回确认取消 → 放弃修改 → 列表 → 工作区，顺序正确。
9. 变量管理 → 添加变量 → 浏览器返回逐层关闭。功能提示词、数据管理可打开并访问原操作。
10. 360×640、393×852、430、768、1024、1280px 宽度检查无页面整体横向溢出；中英文、明暗主题代表页面检查通过。
11. 手机与桌面之间切换后，已生成回答持续可见；最终页面 error 日志为空。

### 工程检查

- 相关既有及新增业务测试：7 个文件、76 项通过。
- 弹窗历史及路由衔接回归：3 项通过。
- 响应式 Markdown 内容保留回归：1 项通过。
- 合计 80 项相关测试通过。
- UI、Web、扩展类型检查通过；受影响 UI 文件 lint 通过。
- 语言键结构一致性、运行时中文检查通过。
- UI、Web、扩展构建通过。构建仍有现有的大包体积和 Vite 配置提示，不影响完成。

测试日志保存在被忽略的 `.codex-run/mobile-*.log`。测试和模拟浏览器验收不等于手机实机验收。

### 画面证据

本地证据集：`basic-mobile-implementation/`（未随仓库发布）

- `01-mobile-optimize.jpg`：真实用户模式，V3 编辑保存后的优化区。
- `02-mobile-test.jpg`：同一工作区的 B 组真实测试回答。
- `03-desktop.jpg`：同一会话切回桌面的并排布局。

## 仍需用户体验与实机验证

- iOS Safari、Android Chrome 的实际软键盘、粘贴、文字选择、安全区、系统返回和文件选择。
- 更长提示词、更多历史版本及用户自己的模型配置下的阅读和操作密度。
- 远程备份授权、所有模型供应商、图片测试、浏览器扩展运行时和桌面安装包不属于本次完整业务验收；本轮只完成受影响扩展的类型和构建检查。
- 上下文、图像和移动 AI 评估继续留在后续范围。

## 2026-10-20：测试结果全文阅读修正

用户试用发现，测试配置占据大半首屏，长回答在底部被截断。此前的短回答页面检查没有覆盖这一问题。

- 根因：共享移动样式中的 `.variant-results-wrap` 与工作区 scoped 桌面样式优先级相同，后加载的桌面 `flex: 1; overflow: hidden` 仍生效。外层结果容器裁剪长回答，没有把完整高度计入测试区滚动范围。
- 修正：提高移动规则的明确性，让结果按内容高度展开，由整个测试区负责纵向滚动；只读文本视图显示完整、可选择的原文，不再使用限制行数的输入框。编辑器仍使用原输入组件。
- 密度：测试组数、来源版本和模型选择通过“测试设置”展开；默认显示来源与模型摘要、运行本组和测试全部。缩短旧回答提示，移除多余卡片留白。
- 阅读：A/B 分组栏随阅读固定在顶部；切组前记录位置，防止较短结果触发浏览器高度收缩而覆盖长结果的位置。
- 验证：独立内存示例复用真实 `BasicSystemWorkspace` / `BasicUserWorkspace` 和渲染组件，不初始化应用存储、不调用模型、不改用户数据。约 2400 字、18 段回答在 393×720 系统模式和 360×640 用户模式中，渲染与文本视图均实际滚到最后一行；分组切换与切区返回保留位置。360px 展开设置无横向溢出，1280px 桌面仍显示并排结果。
- 本地回归入口位于被忽略的 `packages/web/.codex-run/reading-check.html`，通过默认端口 18181 访问；它仅用于本轮布局验收。
- 画面：`basic-mobile-implementation/04-long-answer-end.png`，明确标记示例数据，展示用户模式窄屏长回答末尾。
- 本轮工程检查：输出组件 9 项测试通过（含长文本完整显示、字面标记保留与复制回归），Markdown 响应式切换 1 项通过；UI 类型检查、受影响源码 lint 与 diff 格式检查通过。

这次检查覆盖长回答阅读，不代表手机实机软键盘等交互已验收。

## 2026-10-20：按移动端阅读重新组织测试区

用户随后指出，整页滚动仍然过长。上一节修复了裁剪，但把输入、配置和回答纵向堆叠；读到回答末尾后，设置与运行入口离开视口数千像素，不符合手机反复调整和试验的使用方式。以下布局取代上一节的“整个测试区滚动”。

- `TestWorkspaceLayout` 在手机固定分组、当前来源、模型、运行当前组及全部测试菜单，只有回答区滚动；复制、保存和文本切换工具栏随回答阅读固定。
- 共享测试输入、组数、版本及模型在全屏测试设置中修改，设置内部可切组。沿用相同输入/选择器实例和服务绑定；桌面仍内联显示配置、并排展示结果。
- 关闭设置保留阅读位置；缺少测试输入或模型时打开对应设置；成功开始新测试时返回回答并重置该组的阅读位置。
- 393×720 的隔离示例中，正文容器由约 475px 上移至约 288px，回答容器高度约 456px。滚到底后分组、设置、运行仍保持在原处。360×640 用户模式检查了四组、文本末尾和组间位置保留。
- 同时修正移动样式引用的卡片内容类名，匹配当前组件库实际的 `.n-card-content`；此前部分留白、全屏面板内容滚动、输出容器溢出规则没有生效。修复后输出工具栏可在回答区内固定。
- 本轮使用内存数据与本地模拟回调测试单组和四组运行、修改输入、查看来源、关闭/返回设置，不调用用户模型，也不读写用户会话存储。1280px 桌面检查仍有两列结果且无页面横向溢出。
- 工程检查覆盖同一输入/选择器/回答实例在设置打开、关闭、桌面切换时保留（1 项），加上输出复制/长文本和 Markdown 回归共 11 项。UI 类型及受影响源码检查通过。浏览器尺寸模拟不等于手机实机验收。
- 截图与本轮审查记录见 `mobile-focused-result` 目录及 `docs/architecture/mobile-focused-reading-audit.md`。

## 2026-10-20：优化与测试内部视图切换

本节为当前实现，替代上一节“全屏测试设置”方式。用户要求两区内部同样采用可自由切换的视图，避免配置、输入与结果堆叠。

- 优化区顶部切换“原始提示词 / 优化工作区”。输入框填满可用空间，下方保留模型、功能提示词和优化动作；优化工作区继续使用 `PromptPanel`，保留编辑、版本、继续优化和文字对照。
- 测试区顶部切换“测试配置 / 测试结果”。配置是普通工作视图；结果视图合并分组和运行操作，正文独立滚动。系统模式保留共享输入，用户模式直接测试所选提示词。
- `OptimizeWorkspaceLayout`、`TestWorkspaceLayout` 和共享切换控件只负责布局。输入、选择器和输出使用 `v-show` 保持同一实例，原会话、优化、测试和保存服务保持原绑定。
- 两种基础模式分别保留内层视图、当前组及滚动位置。新优化开始时显示工作区，新测试开始时显示结果；后续完成回调不强制导航。批量测试后续组启动不重复触发跳转。
- 输入组件的桌面折叠由外层元素控制，避免把显示指令施加到含多个根节点的组件上。窄屏选择器取消桌面 160px 最小宽度，360px 下不互相挤压。
- 本轮隔离浏览器验证：393×720 系统模式、360×640 用户模式、1280×720 桌面；原始输入和未保存工作区编辑跨内层视图、跨主区域保留；共享测试草稿保留；A/B 独立阅读位置；长回答最后一行；四组模拟运行；用户模式修改来源后运行；原文差异；桌面输入、工作区和并排结果同时显示。
- 新布局组件回归 2 项通过，覆盖同一输入、选择器、回答实例和草稿在内部视图与桌面布局之间保留。UI 类型检查和受影响源码 lint 通过。
- 实际应用默认端口仍为 18181，已确认新切换入口显示。模拟数据仅用于独立验收页面，本轮不调用用户模型、不改用户会话数据；手机实机软键盘仍待用户体验。
- 本轮截图位于 本地证据集 `mobile-inner-views/`（未随仓库发布）。

## 2026-10-20：移动端控件与视觉细节

- 保留两主区域和内部自由切换；主导航、内层页面、A/B 分组分别使用图标标签、下划线、分段控件。
- 去掉正文区域的嵌套卡片边框，统一移动输入与选择器表面、中文字体回退和工具栏选中态。
- 配置区的版本、模型并排，运行按钮位于配置之后；移动专属 `config-actions` 插槽确保 DOM 顺序与视觉一致，桌面仍在原全局操作区运行。
- 360×640 系统示例中配置与运行按钮可同屏；四组切换、长回答末行、阅读位置恢复、用户模式深色对照、393px 真实 Web 页面及 1280px 桌面已检查。
- 输出和布局回归 11 项、UI 类型检查、受影响源码 lint 通过。模拟服务未调用用户模型。审查和前后截图索引见 `mobile-visual-polish.md`。