Files
prompt-optimizer/docs/architecture/mobile-all-workspaces-implementation.md
linshen d6274e1f71 docs: record mobile baseline and architecture review
Separate the current architecture and acceptance boundaries from historical mobile experiments. Document corrected desktop regressions, shared behavioral fixes and the remaining CSS, view-state and management-page design work.
2026-10-22 15:21:46 +08:00

6.7 KiB
Raw Permalink Blame History

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

2026-10-21 更新:内部分页已被同屏工作区设计取代。以下为上一阶段实现记录;该链接同样是后续阶段记录,现状统一以架构评估为准。

其余工作区移动端实现与验证

日期:2026-10-20;最终检查完成于 2026-10-21 凌晨。

状态:上下文及图像五个工作区已接入两区布局,延续基础模式的移动端设计。可在本地默认端口体验;尚未提交、推送或发布。本文的浏览器流程使用隔离模拟服务,不代表新增五个模式的真实模型调用或手机实机验收。

本轮范围

工作区 路由 保留的业务能力
上下文多消息 /#/pro/multi 多角色消息、选中消息优化、应用回会话、上下文与工具编辑、整段对话来源查看和测试
上下文变量 /#/pro/variable 提示词变量填写、预览、优化、各组测试
文生图 /#/image/text2image 文本优化模型、优化模板、图像模型、提示词来源、生成与结果操作
图生图 /#/image/image2image 参考图上传与预览、提示词优化、携带参考图测试
多图生图 /#/image/multiimage 多参考图、顺序调整、提示词优化、携带多图测试

统一入口:http://127.0.0.1:18181/。通过顶部原有模式切换进入;无需另外打开原型。

交互与复用

  • 底部“优化 / 测试”自由切换。优化内“原始提示词 / 优化工作区”,测试内“测试配置 / 测试结果”。
  • 原编辑器、提示词版本、差异显示、测试输出、session store 和服务接口继续复用。切换通过显隐保留组件实例,不生成第二份业务状态。
  • 七个模式分别保留区域、内部视图、选中测试组和阅读位置。有效请求开始时进入输出;用户随后离开,后续批次和完成事件不抢走当前视图。
  • 测试配置包含输入、2/3/4 组、当前组的来源与模型。结果显示一组,固定分组与运行入口,正文单独滚动。
  • 来源摘要打开完整提示词;多消息模式显示实际完整会话。明确点击“前往编辑”才切回对应编辑区域。
  • 移动布局隐藏 AI 评估入口;桌面并排布局及原有评估保留。
  • 应用历史/收藏内容时,扩展模式重置移动视图,避免新内容被留在隐藏区域。

共享实现为 useCompactWorkspace、VariantTestWorkspaceLayout,组合已有 OptimizeWorkspaceLayout、TestWorkspaceLayout 和 WorkspaceRegionSwitch。模式级代码只提供原组件、当前组摘要与现有操作回调。

本轮细节修正

  • 变量填写:桌面固定宽度的变量名和操作区曾把窄屏输入框挤到零宽;手机改为名称与操作在上、输入全宽在下。
  • 上下文消息:角色和操作一行,正文独占下一行。长内容仍用原编辑器。
  • 参考图:横向缩略图列表,多图增加前移/后移按钮;桌面拖动排序保留。
  • 图像结果:先图片,再下载/复制,再模型返回的文字,下载入口不再被长文字推到末尾。
  • 上下文、工具、提示词预览、图像上传及图像模型编辑接入 AdaptiveModal。长表单在窄屏全屏,短变量输入仍使用紧凑对话框。
  • 本地预览关闭符号链接路径保留并去重 Vue,修复预览中 CodeMirror 状态模块重复导致真实上下文编辑器打不开的问题。

已执行的浏览器检查

类型 证据范围
真实页面 默认端口中的上下文消息编辑器正常显示;上下文、工具及嵌套工具编辑弹窗在 360px 下可打开和返回,未保存测试修改
上下文变量模拟流程 优化、变量填写、双组测试;长回答滚到最后一行;切 B 再回 A 恢复阅读位置;来源查看后进入编辑;请求期间切区且完成不跳转
测试组 4 组可选 D,减回 2 组回到有效组;组件测试覆盖隐藏组时仍保留输入和实例
上下文多消息模拟流程 选中消息优化,应用回会话后正文实际更新;双组测试;来源查看包含 SYSTEM 和 USER
三种图像模拟流程 优化、双组生成,实际结果组件显示图片和文本;图生图通过浏览器文件选择器上传本地测试 PNG
多参考图 点击顺序按钮后图像 ID 从 ref-1/ref-2 变为 ref-2/ref-1
下载 从隔离文生图结果实际点击下载,收到浏览器下载事件并核对 222431 字节 PNG 文件
窄屏 代表流程采用 360/393px;360px 多图暗色主题无整页横向溢出
桌面 五个模式在 1280px 保持优化/测试并排,两个结果同时可见,无移动导航和整体横向溢出

隔离夹具只位于忽略目录 packages/web/.codex-run/,使用真实组件与 store、内存服务和模拟流式输出,不调用用户模型,不初始化或覆盖用户存储。真实应用没有注入这些服务。

画面证据:本任务可视化目录 mobile-all-workspaces/ 中的 variable-result-bottom.png、variable-config.png、multiimage-result.png、multiimage-dark-360.png、context-editor.png。

工程验证

  • 新增共享布局/状态测试,加上已有测试布局和上下文/图像集成测试:6 文件、13 项通过。
  • 变量面板、上下文编辑、图片下载、图像与多图会话持久化回归:5 文件、36 项通过。
  • 本轮合计 49 项测试通过。
  • UI 类型检查、受影响文件 ESLint、三语言键结构校验、运行时中文检查通过。
  • Web、扩展类型检查,UI(含类型声明)、Web 和扩展构建通过。仍有已有的大包体积与 Vite 配置提示。
  • 补充回归覆盖在同一优化结果视图内再次开始优化时回到新内容开头;单项复跑通过。
  • git diff --check 通过;主仓库无改动,修改保留在原移动端工作树;默认端口 HTTP 200。

日志位于忽略目录 .codex-run/mobile-all-*.log。

仍需体验

  • 五个新增模式在用户实际模型配置下的生成结果与供应商行为。
  • iOS Safari / Android Chrome 实机键盘、粘贴、图片选择、安全区和返回行为。
  • 用户长提示词、大量消息与参考图下的实际操作密度。

以上验收范围不包含新增移动端评估能力,也不把一次模拟验收等同于所有供应商、管理操作和真实设备均已验证。