# WISERUNION 数字产品设计系统 V0.1

2026-11-04 · AI辅助设计建议，待需求负责人确认采用。用于品牌网站及未来数字产品的界面设计起点，不表示全站或NST软件已经采用，也不替代具体业务、权限、法律或无障碍验收。

## 文件与运行

- `design-tokens.json`：浅深主题、字体、间距、尺寸、圆角、布局、动态和34组实际sRGB对比记录。品牌颜色沿用现有规范，语义状态色是本版界面建议。
- `components.css`：`.wu-ds`作用域内的按钮、字段、标签、提示、卡片、原生选择控件、标签页及表格样式。不会自动替换宿主网站；先在局部页面接入。
- `component-recipes.html`、`guide.css`、`preview.js`：配套的原生HTML示例、指南布局和交互脚本。HTML由本轮实际Astro面板构建输出，脚本由同一TypeScript源打包，不维护两套演示逻辑。
- `package-manifest.json`、`SHA256SUMS.txt`、`kit.sha256`：来源、状态及内容指纹。登记、采用、合并与发布分别记录。

解压后保留文件相对位置。可在该目录使用任意本地静态服务器，例如 `python3 -m http.server 8080 --bind 127.0.0.1`，然后打开 `http://127.0.0.1:8080/component-recipes.html`。不需要安装前端依赖、字体、账户或密钥。部分浏览器在 `file://` 下限制ES module；通过本地服务器操作更可靠。

示例不请求网络API、不写设备存储。阅读普通官网链接或主动点击下载会按浏览器正常导航；离线组件本身不依赖外部字体、脚本或图像。ZIP下载链接指向官网，以避免包内嵌套自身。

## 接入顺序

1. 阅读当前品牌规范，确认具体产品的用户、任务、语言、数据与权限。
2. 在局部容器添加 `.wu-ds`，加载 `components.css`，按实际控件结构组合。深色局部容器使用 `data-ds-theme="dark"`。
3. 通过JSON中的语义用途选择变量，不随意把组件状态色变成品牌主色。CSS使用 `--wu-ds-*` 名称；`onAccent`对应 `--wu-ds-on-accent`。
4. 示例的 `guide.css` 含企业文化页旧样式的局部适配；新产品通常只需基础样式及自己的布局。不要把指南页面当整站框架。
5. 逐个接入真实业务行为与权限，补齐网络失败、取消、重试、保存和恢复。按完整页面和流程验收后记录采用范围。

字体只声明回退栈，不随包分发。缺字、换行、网页嵌入和文档外发按实际字体来源与许可复核。原标志继续调用原SVG，不能以界面字体或状态色重画。

## 设计基础

正文从1rem/1.7倍行距开始，说明0.8125rem；用户放大与字体替代应保留。以0.25rem为间距基础步进，根字号16px时为4px，随用户字号缩放。控件至少44 CSS px是本版品牌目标；不能将其表述为WCAG 2.5.8 AA的原文阈值或全站认证。

组件建议断点为640/960 CSS px、4/8/12栏，按实际内容宽度重排；宿主页的800px目录规则独立保留。卡片与正文避免无限拉长，完整表格限制在有名称且可键盘操作的滚动容器内。颜色、焦点、边界分别核对浅深背景；装饰分隔线不能承担唯一控件边界。

## 实际示例与状态

- 主题按钮只切换四个预览区域，不修改网站其他页面，不保存用户偏好。
- 组件标签页有tablist/tab/tabpanel关联及单一Tab入口，支持左右箭头、Home和End。无脚本时隐藏控制并展示全部示例；本版不承诺隐藏内层标签页的独立hash路由。
- 示例操作只更新本页文字。禁用按钮说明原因；图标、颜色和悬停不能代替可见文字。
- 原生确认对话框可以取消、Escape关闭；清空只重置本页练习表单。切换企业文化栏目会关闭对话框，避免旧模态层遮挡新内容。
- 表单先注册阻止提交，再启用字段与按钮。任务名称4–80字符、场景必选；错误汇总链接到具体字段，字段有关联说明和`aria-invalid`。生成结果通过textContent写入，不把输入当HTML。修改后清除旧结果，重置后清空本页状态；不会显示“需求已受理”。
- 工作台三条记录是人工编制的界面示例，搜索与状态筛选仅在本页改变可见行。无结果给出恢复办法，不删除原记录。状态播报只报告条数，不重复朗读整张表。

## 组件交付与验收

交付时保留任务、结构、设计变量、默认/焦点/禁用/错误/空白/失败/完成状态、真实数据与权限说明、来源/版本、实际设备与键盘结果。输入、生成、发送、收到、复核、验收、采用分别有事实记录。动态遵循减少动态偏好，任何等待或进度必须有真实处理依据。

本版34组不透明sRGB配对均实算：文本最低5.029:1，控件边框最低3.595:1。主题与背景、透明叠色、图片文字及实际浏览器表现仍须按使用场景核验。这是设计与局部验证记录，不是全站WCAG合规认证或辅助技术全面测试。

参考：W3C [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)、[Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)、[表单反馈](https://www.w3.org/WAI/tutorials/forms/notifications/)、[状态消息](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)、[目标尺寸](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)。原生语义与示例不替代真实产品流程验收。

## 维护

V0.1保留为建议稿，approvedBy/approvedAt为空。新增变量、控件或状态先记录原因、来源与适用场景，复核后由需求负责人确认采用范围。旧版保留内容指纹，不静默覆盖已被其他页面依赖的含义。

仓库人工复现：先运行网站构建，再执行 `node scripts/build-digital-product.mjs` 生成原生示例与ZIP；然后更新品牌登记并重新构建、检查。生成器只读取当前设计源，不联网、不批准、不删除、不发布，不设置定时任务。