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