Appearance
新增组件独立审查与 Web 验证
验证日期:2026-10-29。项目:H:\code\tianfengx\shopbill\other_account\uniappx_ui。
结论:最终完整运行 52 项检查,通过 52,失败 0。这是脚本中独立 check 的数量,组合检查包含多个断言,不把单个断言或网络响应另算测试用例。
审查发现与修复
xtf-description-item默认 label/value 原先在view内直接插值。为符合 uni-app x 文本节点规范,改为默认插槽内的text,并显式保留字体、颜色、字号及对应的自定义 class。- 连续长值存在可复现的 Web 溢出。修复前在 390px 视口,补充挂载的值容器
clientWidth=323、scrollWidth=4132,且含直接文本节点。默认值改用text,通过仅 Web 生效的 class 样式word-break: break-all断行。最终在两种视口、横向/纵向布局下检查滚动宽度不超过容器宽度、无直接裸文本节点,全部通过。 xtf-descriptions数组模式原先将裸文本 fallback 作为插槽传给子项,使子项自身 fallback 无法接管。改为只有调用者提供label或item插槽时才转发,其余情况使用子项的默认text。保留了0、false和插槽作用域参数。xtf-space的数据模式默认 item 也存在同样的裸文本插值,已补text包裹,并验证默认数据0/false与默认插槽仍正常。
仅修改上述三个新组件。xtf-state-view 及三个 Demo 无需修改。未修改生成器、组件文档、路由或其他组件。
测试环境与口径
- 复用
http://localhost:5173。未执行启动、停止、重启服务或安装依赖。 - 使用现有 HBuilderX
uniapp-debugger插件依赖中的 Puppeteer,以及C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe。 - 视口为 390×900(移动视口仿真)及 1280×900(桌面),共六次独立浏览器页面会话。
- Demo 操作使用真实页面 DOM 点击;补充边界通过从现有 Vite 服务动态导入真实组件及同一 Vue runtime 后挂载验证,没有用重写组件逻辑的 mock 替代组件。
- 首轮发现长值失败;首轮运行受命令超时限制未完成全部六个会话。最终统计只采用最后一次完整运行。
- 骨架初版断言曾误用其他预设的
.xtf-skeleton-row,核对源码后改为检查实际.xtf-skeleton-block,最终四个占位块通过。这是测试选择器修正,无须修改骨架组件。
最终结果
| 检查范围 | 390px | 1280px | 总数 |
|---|---|---|---|
| Space 页面及浏览器补充验证 | 7 | 7 | 14 |
| Descriptions/DescriptionItem 页面及浏览器补充验证 | 8 | 8 | 16 |
| StateView 页面及浏览器补充验证 | 7 | 7 | 14 |
| 四组件、三 Demo 模块转换检查 | 不区分视口 | 不区分视口 | 7 |
| 七份源码的 flex 方向及 class 选择器检查 | 不区分视口 | 不区分视口 | 1 |
| 合计 | 52 |
Space 覆盖动态间距切换与恢复、手机换行、项目 5→4→5、纵向几何间距、分隔符数量/顺序、默认数据 0/false、默认插槽,以及 wrap 时抑制分隔符。
Descriptions 覆盖两列同排几何、列数 2→3→2、水平/垂直切换及恢复、数组与声明式 span=2、label/extra/item/default 插槽、刷新计数、作用域的 item/index、0/false,以及 570 字符连续长值在水平和垂直布局下不越界。
StateView 覆盖 content/loading/empty/error 的真实切换、spinner、四行骨架、自定义 loading/empty/error/default/action 插槽及 action 状态参数。默认操作按 empty 一次、error 两次执行,精确得到 action=3 / retry=2 / retry:error;自定义 empty/action 点击计数为 1,补充挂载事件顺序为 action(empty)、action(error)、retry(error)。
七份源码的样式规则均使用 class 选择器,每条声明 display:flex 的规则均显式声明 flex-direction。
编译模块与运行状态
- 四个组件及三个 Demo,分别请求主模块
?import和脚本模块?import&vue&type=script&setup=true&lang.uts,共 14/14 响应为 HTTP 200、JavaScript,未检测到转换失败内容。 - 六次浏览器会话累计记录 4432 个脚本响应,包含开发模式预加载及重复加载;这个数字不是独立模块数量,也不是测试数量。
- 最终会话
pageerror=0、控制台错误=0、警告=0、失败请求=0、HTTP 4xx/5xx 响应=0,未出现 Vite 错误覆盖层。 - 按编译验证技能先检查运行态,确认已有 Web 日志后使用运行态日志流程,未调用
launch --compile。修改后lastBuild返回三个修改组件的热更新记录,没有新增错误。 - 初次取得的完整历史日志含其他既有组件的类型警告,例如 collapse-animation、lazyload、image-crop、popup 等。本次未修改这些组件;最终专项会话无警告不等于整个项目历史日志或全平台类型检查无警告。
复验与产物
在项目目录运行:
powershell
& 'D:\soft\HBuilderX\plugins\node\node.exe' '.hbuilderx/verify-component-additions.cjs'脚本输出逐项结果,并生成 .hbuilderx/component-additions-report.json,其中保留各会话网络记录、错误数组、模块状态及关键几何/事件证据。再次运行会覆盖该 JSON。
未验证边界
- 本次为 Web 开发服务验证,未运行 Android/iOS/Harmony/小程序、原生 UTS 编译或发行构建;不能将 Web 模块转换成功等同于全平台编译通过。
- 390px 为 Edge 移动视口仿真,未做真实手机触摸、不同系统字体、Safari/WebKit 或其他浏览器验证。
- 长值回归覆盖默认 value 与数组 fallback。调用者自定义插槽内部的任意 CSS、超长 label、超大 labelWidth、极端非法 props 和混合跨列自动补齐不在本次验证范围内。
- 核心布局通过 DOM 几何及可见节点检查,未生成截图,也未做逐像素视觉比对或完整可访问性审计。
- 文档生成器的 112 组件支持数沿用任务给定信息,本次未执行或修改生成器,也未重新审计文档完整性。