feat(frontend): Design Tokens + AntD ConfigProvider

REQ_ID: FE-01

feat(frontend): Design Tokens + AntD ConfigProvider
REQ_ID: FE-01
zichun
1 parent 6c1cc4b8
Showing 4 changed files with 81 additions and 1 deletions
frontend/src/App.test.tsx
frontend/src/App.tsx
frontend/src/styles/global.css
frontend/src/styles/tokens.css
@@ -7,4 +7,11 @@ describe(&#39;App&#39;, () =&gt; {
     render(<App />);
     expect(screen.getByText(/Antler ERP/i)).toBeInTheDocument();
   });
+
+  it('wraps children with AntD ConfigProvider and renders Button', () => {
+    render(<App />);
+    const btn = screen.getByTestId('sentinel-btn');
+    expect(btn).toBeInTheDocument();
+    expect(btn.className).toContain('ant-btn');
+  });
 });
+import { ConfigProvider, Button } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import './styles/tokens.css';
+import './styles/global.css';
+
+const theme = {
+  token: {
+    colorPrimary: '#1890ff',
+  },
+};
+
 export default function App() {
-  return <div>Antler ERP</div>;
+  return (
+    <ConfigProvider locale={zhCN} theme={theme}>
+      <div>
+        <h1>Antler ERP</h1>
+        <Button type="primary" data-testid="sentinel-btn">test</Button>
+      </div>
+    </ConfigProvider>
+  );
 }
+html, body, #root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', Roboto, sans-serif;
+  background: var(--color-bg-base);
+  color: var(--color-text);
+}
+
+* {
+  box-sizing: border-box;
+}
+/*
+ * src/styles/tokens.css — Design Tokens
+ * 命名规范见 docs/04-技术规范.md § 2.5
+ * 色值锁定见 docs/06-UI交互规范.md § 四
+ *
+ * 命名格式：--color-<scope>-<role>-<state>
+ *   <scope> 组件域：form / table-row / table-header / ...
+ *   <role>  作用：bg（背景）/ fg（前景/字体）/ border
+ *   <state> 状态：edit / readonly / hover / selected（无状态时省略）
+ *
+ * 约束：
+ *   - 组件样式中只用 var(--color-xxx)，禁止硬编码 hex / rgba
+ *   - 修改色值只改本文件，不允许在组件级覆盖
+ *   - 新增 token 须先登记到 docs/06 § 4.1 / 4.2，再补到此处
+ */
+
+:root {
+  /* === 1. 全局调色板（与 Ant Design 主题对齐） === */
+  --color-primary: #1890ff;
+  --color-success: #52c41a;
+  --color-warning: #faad14;
+  --color-error: #ff4d4f;
+  --color-text: rgba(0, 0, 0, 0.85);
+  --color-text-secondary: rgba(0, 0, 0, 0.45);
+  --color-border: #d9d9d9;
+  --color-bg-base: #f0f2f5;
+
+  /* === 2. 组件级状态色（与 docs/06 § 4.2 一一对应） === */
+
+  /* form：输入框 / 备注框 / 时间框 / 下拉框共用 */
+  --color-form-bg-edit: #ffffff;
+  --color-form-bg-readonly: #f1f2f8;
+  --color-form-bg-hover: #f5f5f5;          /* 仅下拉框使用 */
+  --color-form-fg: #000000;
+
+  /* table */
+  --color-table-row-bg-selected: #86d5fb;
+  --color-table-row-bg-hover: #fff7e6;
+  --color-table-row-bg-readonly: #f1f2f8;  /* = rgb(241, 242, 248) */
+  --color-table-row-fg: #000000;
+  --color-table-header-bg: #f5f5f5;
+  --color-table-header-fg: rgba(0, 0, 0, 0.85);  /* = #000000D9 */
+}