前端工程初始化：脚手架 + 白标引擎 + i18n/主题 + 画布 demo + Storybook/E2E

[JIAQIA]

背景

hashmatrix-webui 是平台唯一前端工程，技术选型已敲定。本 Issue 跟踪初始化脚手架落地，由前端工程师执行。

选型依据（先通读）

完整 spec（ADR）见仓内 docs/00-前端初始化-spec.md（已随本仓 main 提交）。决策细节、集成矩阵、白标引擎设计均以该文件为准。

技术栈（摘要）

• React 19 + TypeScript(strict) + Vite SPA（pnpm workspaces 单体）
• Ant Design v6 + ProComponents（ProLayout / ProTable / ProForm）
• AntV：X6（DAG/ER 编排）、G6（血缘/关系图谱）、G2（图表）、S2（透视/数据预览）
• react-i18next（zh-CN 源 + en-US）、AntD 明暗算法 + CSS Variables
• TanStack Query + Zustand + axios
• Keycloak OIDC（react-oidc-context + oidc-client-ts），对接网关
• Storybook（Vite builder）+ Playwright（@storybook/test-runner，基于 Storybook 做 E2E）
• 部署：静态产物 → Nginx 容器，运行期 config.js 注入

验收清单（DoD）

• 1. 脚手架：pnpm workspaces + Vite + React 19 + TS(strict) + AntD v6 + ProComponents；Vite build.target 降级兼容国产旧内核
• 2. 白标引擎：单一 brand 配置源 → 四路分发（AntD token / CSS Vars / i18n 品牌串 / logo·favicon 槽位）；构建期默认 brand.default.json + 运行期 public/config.js（window.__CONFIG__）覆盖
• 3. i18n（zh/en）+ 明暗主题 + 三开关 demo（语言 / 明暗 / 换肤）打通
• 4. Keycloak OIDC 登录壳 + ProLayout 导航 + 路由级/按钮级权限骨架
• 5. 画布 demo：血缘（G6）+ DAG 编排（X6）各一个最小可运行，强调色随品牌（结构/状态色固定）
• 6. 数据大屏 scale 自适应容器 demo（G2）
• 7. Storybook：组件 + 关键页面 story，msw mock 自含数据，工程师可独立调试
• 8. E2E：@storybook/test-runner（Playwright）跑在 Storybook 之上，story 即夹具，免备后端环境
• 9. CI：lint + Vitest + Storybook 构建 + Playwright(基于 Storybook) E2E + build；deploy/（Dockerfile + nginx + config.js 模板）
• 10. 更新 README / CLAUDE.md 技术栈段

关键约束（务必遵守）

• 🔴 信息红线：公开开源仓，禁止任何甲方/客户可识别信息与项目机密；示例数据一律脱敏（example.com / acme / tenant-demo）。详见 CLAUDE.md。
• 信创：兼容国产浏览器/旧 Chromium 内核（降低 ES build target、必要 polyfill）+ 国产 OS 适配；运行期不依赖公网 CDN（资源自托管）。
• 白标深度：v1 做品牌层（logo / 品牌名 / 企业名 / 主辅色），架构预留升级到全 token；换肤改 config.js 即生效、免重建。
• 字体：系统中文字体栈优先（零版权风险），预留客户自备商用字体槽位。
• 大数据量表格：服务端分页 + 虚拟滚动。

集成边界（参考 spec §3）

核心治理/安全/数据基础 + 血缘 + 编排 + 大屏 → 原生自研；BI 报表设计器（DataEase/Superset）、隐私计算（SecretFlow/SecretPad）→ iframe + SSO 品牌化外框集成。

暂缓（不入本次，仅保留可演进边界）

微前端运行时、前端可观测自托管、离线 npm 私服、全 token 白标、字段/行级权限。见 spec §7。

---

如需调整选型，请在本 Issue 讨论后更新 docs/00-前端初始化-spec.md，保持 spec 为单一事实源。