基本功能完成，下一步开始美化UI

docs/design-system.md

@@ -0,0 +1,53 @@
+# UI Design System & Brand Guidelines
+
+## 1. Brand Identity
+The visual identity is centered around **Mars Green**, representing a professional, modern, and technological atmosphere.
+
+### Colors
+- **Primary (Mars Green)**: `#008C8C` (Base), `#00A3A3` (Light), `#006666` (Dark)
+- **Neutral**: Slate Grays for text and borders.
+- **Background**: Very light cool grays (`#F9FAFB` or Mars-tinted whites).
+
+### Logo Usage
+- **Primary Logo**:
+  - **Dimensions**: 100px width x 40px height.
+  - **Placement**: Top Navigation Bar (Left).
+  - **Style**: Contains watermark "Placeholder" at 15% opacity.
+- **Secondary Logo**:
+  - **Dimensions**: 80px width x 30px height.
+  - **Placement**: Footer (Right).
+  - **Style**: Simplified version.
+
+## 2. Layout & Spacing
+- **Grid System**: 8px baseline. All margins and paddings should be multiples of 8px (e.g., 8, 16, 24, 32).
+- **Container**: Max-width 1200px for main content areas.
+- **Responsive**:
+  - Mobile (<768px): 16px padding.
+  - Desktop (>=768px): 24px+ padding.
+
+## 3. Typography
+- **Font Family**: Inter, system-ui, sans-serif.
+- **Base Size**: 14px (Body), 16px (Inputs/Buttons).
+- **Headings**:
+  - H1: 24px/32px Bold
+  - H2: 20px/28px Bold
+  - H3: 16px/24px SemiBold
+
+## 4. Components
+- **Buttons**:
+  - Height: 40px (Default), 48px (Large/Mobile).
+  - Radius: 8px.
+  - Shadow: Soft colored shadow on primary buttons.
+- **Cards**:
+  - Radius: 12px.
+  - Shadow: Multi-layered soft shadow.
+  - Border: None or 1px solid gray-100.
+- **Inputs**:
+  - Height: 40px.
+  - Radius: 8px.
+  - Border: Gray-300 default, Mars Green on focus.
+
+## 5. Implementation Notes
+- Use `ConfigProvider` in `src/main.tsx` for global Ant Design overrides.
+- Use `tailwind.config.js` for utility classes (`bg-mars-500`, `text-mars-600`).
+- Use `src/components/common/Logo.tsx` for all logo instances.

docs/visual-checklist.md

@@ -0,0 +1,35 @@
+# Visual QA Checklist
+
+## Brand Consistency
+- [ ] **Logo Placement**: 
+  - Primary Logo (100x40px) is visible in the top left of the Header.
+  - Secondary Logo (80x30px) is visible in the bottom right of the Footer.
+  - Watermark "Placeholder" is visible and rotated inside the logo box.
+- [ ] **Colors**:
+  - Primary actions (Buttons, Links) use Mars Green (`#008C8C`).
+  - Hover states use darker Mars Green (`#006666`).
+  - Backgrounds use correct subtle gradients or neutral grays.
+
+## Layout & Spacing
+- [ ] **Grid Alignment**: Margins and paddings follow 8px increments (8, 16, 24...).
+- [ ] **Whitespace**: Content has sufficient breathing room (min 24px padding in containers).
+- [ ] **Alignment**: Form labels and inputs are vertically aligned.
+
+## Typography
+- [ ] **Legibility**: Text contrast passes WCAG AA standards (Gray-600+ on White).
+- [ ] **Hierarchy**: Headings are distinct from body text.
+
+## Responsive Behavior
+- [ ] **Mobile (<768px)**:
+  - Sidebar collapses correctly (Admin).
+  - Header adjusts layout (Logo/User info alignment).
+  - Touch targets (Buttons, Inputs) are at least 48px height.
+  - Padding reduces to 16px to maximize content width.
+- [ ] **Desktop**:
+  - Sidebar expands correctly.
+  - Content is centered with max-width restriction where appropriate.
+
+## Interaction
+- [ ] **Hover Effects**: Buttons and Cards show subtle state changes on hover.
+- [ ] **Focus States**: Inputs show Mars Green outline on focus.
+- [ ] **Transitions**: Smooth transitions (0.2s - 0.3s) for all interactive elements.