Skip to content

✨ 增加安装代码全屏预览 - #1743

Open
cyfung1031 wants to merge 3 commits into
mainfrom
codex/fullscreen-code-preview
Open

✨ 增加安装代码全屏预览#1743
cyfung1031 wants to merge 3 commits into
mainfrom
codex/fullscreen-code-preview

Conversation

@cyfung1031

Copy link
Copy Markdown
Collaborator

Checklist / 检查清单

  • Fixes mentioned issues / 修复已提及的问题
  • Code reviewed by human / 代码通过人工检查
  • Changes tested / 已完成测试

N/A — 本次没有关联 issue;这是用户请求的新功能。

Description / 描述

背景

安装/更新页面的代码预览原本固定在代码卡中,长脚本在窄视口或需要集中查看时不便阅读。

本次改动

  • 在代码卡头部增加本地化的全页面查看入口,折叠状态下仍可打开。
  • 使用 Radix Dialog 展示占满当前视口的 Monaco 编辑器,支持复制、Escape、关闭和焦点恢复。
  • 更新态 diff 编辑器也正确报告就绪状态,避免全屏预览永久显示加载骨架。
  • 同步 10 个界面的 code_fullscreen 翻译,并为共享 Dialog 支持本地化关闭标签。

实现考虑

内联与全屏编辑器使用互不冲突的 host id,并在两种模式间卸载/重新挂载,避免同时占用 Monaco 容器。全屏布局使用 h-dvh/w-dvw;移动端图标按钮提供 44×44 触控区域,桌面端保留紧凑视觉尺寸。

已知限制

本次人工会话覆盖安装页在浅色/深色主题及 390×844 移动视口的真实浏览器表现;更新态 diff 的就绪回归由 CodeEditor 与 CodePreview 测试覆盖,未在会话中另建远端更新脚本流程。

建议审查重点

  • 安装态与更新态打开全屏后 Monaco 内容、diff 和加载骨架状态。
  • 折叠状态、Escape/关闭后的焦点恢复,以及移动窄视口的触控尺寸。
  • 10 个 locale 的新增入口文案和共享 Dialog 关闭标签。

Verification / 验证

  • pnpm exec vitest run --no-coverage src/pages/install: 18 files, 231 tests passed
  • pnpm exec vitest run --no-coverage src/pages/components/CodeEditor/index.test.tsx: 5 tests passed
  • pnpm run lint: passed (Prettier, TypeScript, i18n, issue templates, ESLint)
  • pnpm run build: passed; existing asset-size and Monaco critical-dependency warnings remain
  • pnpm exec prettier --check ...: passed
  • git diff --check: passed
  • Two independent subagent reviews approved the pre-commit diff and exact commit 5694ba90827e7c9963d7e20187b81df06d0c4cef with no actionable findings.

Screenshots / 截图

本地 throwaway 浏览器会话截图(未加入提交)验证了浅色/深色桌面视口 1280×720 与移动视口 390×844;全屏 Dialog 实测从 x=0,y=0 填满视口,移动入口按钮实测为 44×44。截图保存在本地 gitignored 的 e2e/scratch/fullscreen-code-preview/shots/

@cyfung1031

Copy link
Copy Markdown
Collaborator Author

吓死我了。打开电脑看看这Repo有什么改动时,发现有一个我开的PR,在6分钟前开的

Screenshot 2026-09-14 at 20 52 30

原来是我其中一个AI Task。它跑了三天!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant