feat(app): React 18 + Vite 前端,像素级复刻 Maestro 设计系统 console

复用 design/ 设计系统作单一真相源(token + _ds_bundle.js + 6 个 surface
源文件不改),只移植 App 入口。整屏 console 与原型截图 diff 0.023%(≤0.5% 阈)。

- vite.config.js:经典 JSX + 注入 React,alias @ds → ../design
- src/globals.js:先注入 window.React,供预编译 bundle 使用
- src/main.jsx:按序加载 tokens → bundle → mock/i18n → 6 surface → App
- src/app.jsx:移植自原型 App(),三栏可拖拽 grid
- src/ambience.css:扫描线 + 暗角 phosphor 氛围层

下一步:mock data.js/i18n.js 换成真实 REST + WebSocket(按 ⑧ 前端 API 契约)。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-24 13:50:22 +08:00
parent a5a3c967ce
commit 0a896439d1
8 changed files with 1296 additions and 0 deletions
+21
View File
@@ -0,0 +1,21 @@
// 加载顺序很重要:globals 先注入 window.React → bundle → mock/i18n → 各 surface → App。
import './globals.js';
import '@ds/styles.css';
import './ambience.css';
import '@ds/_ds_bundle.js';
// ui_kit 数据与文案(暂用设计系统自带 mock;下一步换成真实 REST+WS
import '@ds/ui_kits/console/data.js';
import '@ds/ui_kits/console/i18n.js';
// 六个整屏 surface(保持 design/ 源文件不动,作为单一真相源)
import '@ds/ui_kits/console/Sidebar.jsx';
import '@ds/ui_kits/console/EventPanel.jsx';
import '@ds/ui_kits/console/Topbar.jsx';
import '@ds/ui_kits/console/GateSection.jsx';
import '@ds/ui_kits/console/TaskTree.jsx';
import '@ds/ui_kits/console/ArchiveSection.jsx';
import { mount } from './app.jsx';
mount();