Skip to content

Issue 153 Validation

Jump to bottom
clean edited this page Oct 2, 2026 · 5 revisions

Issue #153：Alune-UI 验收记录

环境与安装

macOS arm64；本机 Node 25.5.0 / npm 11.8.0；必需检查另用 Node 22.22.0 复测。React / React DOM 19.2.6、Ant Design 6.3.7、Astro 6.4.8，保持原有 React / Ant Design 锁定版本。

在根执行全新 npm ci 成功。另在完整源码临时副本中执行 npm ci --workspace website --workspace @alune/ui --include-workspace-root=false 成功，随后 Node 22 执行 npm run ui:check 与 npm run website:check 成功。实际确认 Electron、better-sqlite3、@nestjs/core 未安装，官网不构建服务端或桌面。源码包不依赖残留 dist。

构建与自动验证

命令 / 场景 环境 实际结果
迁移前 npm test -w web、Web build、官网 check/build/test 原基线 Web 218/218，全部通过
npm run ui:check Node 22.22.0 类型通过，18/18，API 无漂移，130 导出 / 46 文档 / 31 TSX 示例覆盖
npm test -w web Node 22.22.0 218/218，通过
npm run desktop:test:unit Node 22.22.0 45/45，通过
npm run desktop:build Node 22.22.0 6 个任务成功；Web build 成功；隔离 staging 中 better-sqlite3 重建成功
npm run website:check 本机及选择性 Node 22 环境 0 errors / 0 warnings，79 页构建，5/5 静态测试
node apps/desktop/scripts/test-feedback.mjs Electron 44.2.0 四类反馈、滚动布局、焦点、草稿、单弹窗、轮询去重、离开释放、富内容全部通过
node apps/desktop/scripts/test-ui-dialogs.mjs Electron 44.2.0 + 构建后 preview L0/L1/L2、Enter/Escape、默认焦点与恢复、双门槛、异步成功/失败及输入保留、同周期重复提交锁、role 恢复通过

静态测试递归检查所有文档/预览的 base、JS/CSS/图片/字体、内部链接、跨页 hash、唯一 ID、aria-controls、canonical；无 JS 内容与首页无示例 runtime；全部渲染示例源码与执行 TSX 字节一致。

浏览器与交互验证

使用同一 Ego Lite TaskSpace，直接操作构建产物 astro preview；桌面 1280×900，窄屏 390×844，组件对照使用 reduceMotion=true。

场景 操作与结果
搜索 英文 Modal、中文弹窗、无结果、清空；ArrowDown/ArrowUp、Enter 导航、Escape 收起通过
静态路由 文档、组件和 preview 直接访问 / reload；基路径与资源通过
iframe 深浅主题不影响外层；Portal 只存在于 iframe；390px、重置恢复、独立打开通过
源码 真实 Clipboard API 复制成功；模拟拒绝显示失败说明并展开；静态源码与文件完全一致
加载异常 阻断 modal 懒加载 JS，实际加载失败进入错误状态；解除后重置恢复。无 ready 的 404 iframe 触发 15 秒超时，重置恢复
弹窗 默认 field / ok / cancel；关闭恢复；Enter/Escape；L2 两个门槛及 Enter 不提交；失败保留草稿，等待中不重复提交
表单 / 空 / 结果 必填错误与帮助同时显示；本地异步失败保留输入；创建/清空记录、返回检查状态真实可操作
390px 主页面宽度 390，无页面级溢出；API 和代码局部滚动；移动目录 Escape 恢复焦点
渐进增强 关闭 JavaScript 后导航、正文、API、展开源码仍可读
偏好 模拟 Storage getItem/setItem 抛错仍可切换；系统深色与减少动态效果传入预览通过
官网回归 移动菜单开闭与 Escape、产品锚点、下载区及 Release 文档链接、主题、UI 入口通过；首页不加载 UI runtime

postMessage 接收代码核对 origin、source 和示例 ID，未放宽任意消息来源。示例只操作本地状态；没有 Git、SSH 或后端写请求。

联调发现与修复

  • 基线 L0/L1 可能停在 Ant Design 的关闭按钮：首次执行等级焦点选择后，后续用户移动不被夺取；实际基线复现与修复验证均已记录。
  • 同一事件周期内两次提交可重复进入 onOk：增加同步 ref 锁，Electron 验证只调用一次，异步失败后仍可重试。
  • L2 复用弹窗切回 L0 的 alertdialog 角色未清除：每次打开按等级重设 role。
  • Astro 会去掉高亮源码的末尾换行：高亮 transformer 恢复，静态测试覆盖全部示例。
  • Form 的固定 help 会遮住校验错误：改为 extra，错误与帮助可同时阅读。

这些是验收后修复的明确行为差异；不把基线已有问题记录为迁移回归。#151/#152 再次核对仍 Open，未改变通知策略。

视觉证据

所有截图使用相同桌面视口 1280×900，浅/深主题，模拟状态；基线来自 4b4d96c fixture，最终来自上述代码提交。普通控件、危险弹窗布局一致；L0 焦点环移动是已说明的修复；反馈中时间文案变化属于动态内容。

浅色应用对照

控件与状态：基线 / 最终。

Alune 控件与状态基线

Alune 控件与状态最终

普通弹窗：基线 / 最终。

Alune 普通弹窗基线

Alune 普通弹窗最终

危险弹窗：基线 / 最终。

Alune 危险弹窗基线

Alune 危险弹窗最终

反馈：基线 / 最终。

Alune 反馈基线

Alune 反馈最终

深色应用对照

控件与状态：基线 / 最终。

Alune 控件与状态基线

Alune 控件与状态最终

普通弹窗：基线 / 最终。

Alune 普通弹窗基线

Alune 普通弹窗最终

危险弹窗：基线 / 最终。

Alune 危险弹窗基线

Alune 危险弹窗最终

反馈：基线 / 最终。

Alune 反馈基线

Alune 反馈最终

官网文档

Alune UI 文档 浅色 1280×900

Alune UI 文档 深色 1280×900

Alune UI 文档 窄屏 390×844

Alune UI 文档 无 JavaScript 390×844

集成与公开验收

  • PR、Actions 与 required checks。
  • Pages 部署。
  • 公开 UI / 组件 / preview 直接访问、刷新、资源、主题与交互。

Windows / Linux 原生现场 UI 未执行；现有跨平台 CI 作为自动验证，不能冒充现场验收。公开部署已验收；总 Issue / P6 的全部关闭条件已满足。

CI 交接

Wiki 初次推送遇到 HTTP400 和 github.com DNS 连接故障；通过 GitHub 官方 Git IP、保持主机名与 TLS 校验的单次 DNS 解析配置成功推送。没有改变全局网络配置。

快速开始与贡献指南的 TSX 模板分别提取到全新依赖副本，Node 22 的示例 tsconfig 检查通过；没有依赖应用私有路径。

公开部署验收（2026-10-02 02:00，北京时间）

  • 合并提交：bdc2c4f7258727f5b3eb41a4a994f22b2ea26d75；与本地已验证内容 tree 完全一致。
  • Pages Actions：build / deploy 成功，选择性安装与 UI / 官网检查均成功。
  • 公开入口：直接访问、刷新、搜索 Modal → Enter 导航通过。
  • AluneModal：直访 / 刷新，浅外层 + 深 iframe 独立、浮层隔离、L0 聚焦 / Escape 恢复、真实复制成功。
  • 独立预览：直访 / 刷新，L2 取消焦点、文字与勾选门槛、Enter 停用通过。
  • 390×844 组件页无页面横向溢出，移动目录 Escape 后恢复。
  • 真实已加载资源（主页面与 iframe 的 JS/CSS/图片/字体）21 项 HEAD 请求均成功，无失败。
  • Wiki 方案、覆盖、验收 Markdown 与代表截图公开 GET/HEAD 200；截图如下。

Alune 公开 UI 文档

Alune 公开文档窄屏

Alune 公开独立预览危险确认

合入后的持续检查

P0～P6、PR、部署和公开验收均完成。Windows/Linux 原生现场 UI 未执行，已明确区别于通过的跨平台自动测试；不影响本计划已定义的关闭条件。

官网文档排版修正（2026-10-02，北京时间）

问题与调整

侧栏链接的负外边距伸出滚动容器，导致左侧圆角被裁切。移除负边距并留出内侧空间，使 hover、选中和键盘焦点均显示完整四角圆角。实测 hover 四角均为 8px，左侧内缩 4px、右侧 12px。

全部 31 个示例补齐文档专用布局：图标分类网格、表单字段、按钮组、状态区域及组合内容均有明确宽度、分组和间距。样式保存在官网 ui-examples.css，不扩展共享组件 API。示例源码仍是运行与复制的唯一来源。

长示例和窄屏换行由 ResizeObserver 测量内容高度并通知父页面；父页面继续检查同源、iframe 实例和示例 ID，并保留注册表中的最小高度供浮层展示。侧栏及示例主题保持独立。

官网页眉、页脚、分享图统一使用 Alune；截图下方的版本文案已移除，截图来源和版本记录仍在官网 README 中。

验证结果

检查 结果
npm run website:check 通过：0 类型错误、0 警告；79 页构建；5/5 测试，包括资源/锚点/源码一致性
npm run ui:check 通过：类型与 20/20 测试；131 导出、46 文档、31 示例覆盖
31 个示例桌面浅色 逐页查看；发现固定高度不足后补齐自动高度适配
31 个示例在 390px 文档深色 页面及 iframe 无横向溢出；内容高度均完整适配，见审计数据
表单 必填校验、保存成功、模拟失败及输入保留通过
弹窗 L0/L1/L2、Enter/Escape、焦点恢复、typed+checkbox、异步失败保留输入、同一轮重复提交锁定通过
宿主控件 主题、390px 宽度切换、重置通过
首页 页眉与页脚均为 Alune，无截图版本说明，无页面横向溢出
git diff --check 通过

弹窗回归复用 ui-dialog-browser.mjs。其 Electron 按键名称 Return 在 ego-browser 中不被识别；适配为 Enter 后完整回归通过，未修改仓库测试脚本。

31 个示例窄屏尺寸审计。线上合并与部署未执行，CI 状态以 PR 页面为准。本次未更改桌面业务代码；Wiki 随独立 Git 历史维护，代码回退时需核对本记录。

前后截图

修改前，来自本次问题反馈：

修改前：图标与文件名缺少分组

修改后，侧栏圆角与图标分类网格：

修改后：文档侧栏 hover 与图标示例

窄屏深色示例：

修改后：窄屏深色图标示例

首页品牌与截图区域：

修改后：Alune 首页

设计文档首页 · Alune 品牌说明 · 维护约定 · 代码仓库

Alune

Clone this wiki locally