feat: Phase 1 完成 — 基础设施 + 用户认证 + 管理端 + 端到端验证
Phase 1 (基础设施与用户认证) 全部 11 个 Task 开发完成: 后端 (Go): - Auth 模块: 注册/登录/JWT(有状态)/Profile/密码修改 - Admin 模块: 用户列表/详情/禁用/启用/角色分配/创建用户 - 中间件: JWT认证 + RBAC角色权限 + 请求日志 + CORS + Panic恢复 - Dockerfile 多阶段构建 + Docker Compose 全栈部署 前台 (uni-app): - 登录/注册页面 + 自定义 TabBar + 个人中心 - 请求封装 + 状态管理 (Pinia) 管理端 (Vue 3 + Element Plus): - 登录/仪表盘/用户列表/用户详情 - Axios 封装 + 路由守卫 + Pinia 状态管理 验证: - 全流程 API 端到端测试通过 - Playwright 页面自动化验证通过 - code-reviewer 代码审查通过 Made-with: Cursor
This commit is contained in:
202
design-system/echochat/MASTER.md
Normal file
202
design-system/echochat/MASTER.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# Design System Master File
|
||||
|
||||
> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
|
||||
> If that file exists, its rules **override** this Master file.
|
||||
> If not, strictly follow the rules below.
|
||||
|
||||
---
|
||||
|
||||
**Project:** EchoChat
|
||||
**Generated:** 2026-03-02 10:27:26
|
||||
**Category:** Analytics Dashboard
|
||||
|
||||
---
|
||||
|
||||
## Global Rules
|
||||
|
||||
### Color Palette
|
||||
|
||||
| Role | Hex | CSS Variable |
|
||||
|------|-----|--------------|
|
||||
| Primary | `#7C3AED` | `--color-primary` |
|
||||
| Secondary | `#A78BFA` | `--color-secondary` |
|
||||
| CTA/Accent | `#F97316` | `--color-cta` |
|
||||
| Background | `#FAF5FF` | `--color-background` |
|
||||
| Text | `#4C1D95` | `--color-text` |
|
||||
|
||||
**Color Notes:** Excitement purple + action orange
|
||||
|
||||
### Typography
|
||||
|
||||
- **Heading Font:** Fira Code
|
||||
- **Body Font:** Fira Sans
|
||||
- **Mood:** dashboard, data, analytics, code, technical, precise
|
||||
- **Google Fonts:** [Fira Code + Fira Sans](https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700)
|
||||
|
||||
**CSS Import:**
|
||||
```css
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
|
||||
```
|
||||
|
||||
### Spacing Variables
|
||||
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
|
||||
| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
|
||||
| `--space-md` | `16px` / `1rem` | Standard padding |
|
||||
| `--space-lg` | `24px` / `1.5rem` | Section padding |
|
||||
| `--space-xl` | `32px` / `2rem` | Large gaps |
|
||||
| `--space-2xl` | `48px` / `3rem` | Section margins |
|
||||
| `--space-3xl` | `64px` / `4rem` | Hero padding |
|
||||
|
||||
### Shadow Depths
|
||||
|
||||
| Level | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
|
||||
| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
|
||||
| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
|
||||
| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
|
||||
|
||||
---
|
||||
|
||||
## Component Specs
|
||||
|
||||
### Buttons
|
||||
|
||||
```css
|
||||
/* Primary Button */
|
||||
.btn-primary {
|
||||
background: #F97316;
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Secondary Button */
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #7C3AED;
|
||||
border: 2px solid #7C3AED;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
```css
|
||||
.card {
|
||||
background: #FAF5FF;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 200ms ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
```
|
||||
|
||||
### Inputs
|
||||
|
||||
```css
|
||||
.input {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: border-color 200ms ease;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: #7C3AED;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px #7C3AED20;
|
||||
}
|
||||
```
|
||||
|
||||
### Modals
|
||||
|
||||
```css
|
||||
.modal-overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
box-shadow: var(--shadow-xl);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Style Guidelines
|
||||
|
||||
**Style:** Data-Dense Dashboard
|
||||
|
||||
**Keywords:** Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility
|
||||
|
||||
**Best For:** Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
|
||||
|
||||
**Key Effects:** Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
|
||||
|
||||
### Page Pattern
|
||||
|
||||
**Pattern Name:** Data-Dense + Drill-Down
|
||||
|
||||
- **CTA Placement:** Above fold
|
||||
- **Section Order:** Hero > Features > CTA
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns (Do NOT Use)
|
||||
|
||||
- ❌ Ornate design
|
||||
- ❌ No filtering
|
||||
|
||||
### Additional Forbidden Patterns
|
||||
|
||||
- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
|
||||
- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
|
||||
- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
|
||||
- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
|
||||
- ❌ **Instant state changes** — Always use transitions (150-300ms)
|
||||
- ❌ **Invisible focus states** — Focus states must be visible for a11y
|
||||
|
||||
---
|
||||
|
||||
## Pre-Delivery Checklist
|
||||
|
||||
Before delivering any UI code, verify:
|
||||
|
||||
- [ ] No emojis used as icons (use SVG instead)
|
||||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||||
- [ ] `cursor-pointer` on all clickable elements
|
||||
- [ ] Hover states with smooth transitions (150-300ms)
|
||||
- [ ] Light mode: text contrast 4.5:1 minimum
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
- [ ] `prefers-reduced-motion` respected
|
||||
- [ ] Responsive: 375px, 768px, 1024px, 1440px
|
||||
- [ ] No content hidden behind fixed navbars
|
||||
- [ ] No horizontal scroll on mobile
|
||||
46
design-system/echochat/pages/admin-login.md
Normal file
46
design-system/echochat/pages/admin-login.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# Admin Login Page Overrides
|
||||
|
||||
> **PROJECT:** EchoChat
|
||||
> **Generated:** 2026-03-02 10:27:26
|
||||
> **Page Type:** Dashboard / Data View
|
||||
|
||||
> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).
|
||||
> Only deviations from the Master are documented here. For all other rules, refer to the Master.
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Rules
|
||||
|
||||
### Layout Overrides
|
||||
|
||||
- **Max Width:** 1200px (standard)
|
||||
- **Layout:** Full-width sections, centered content
|
||||
|
||||
### Spacing Overrides
|
||||
|
||||
- No overrides — use Master spacing
|
||||
|
||||
### Typography Overrides
|
||||
|
||||
- No overrides — use Master typography
|
||||
|
||||
### Color Overrides
|
||||
|
||||
- No overrides — use Master colors
|
||||
|
||||
### Component Overrides
|
||||
|
||||
- Avoid: Use arbitrary large z-index values
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Components
|
||||
|
||||
- No unique components for this page
|
||||
|
||||
---
|
||||
|
||||
## Recommendations
|
||||
|
||||
- Effects: Deal movement animations, metric updates, leaderboard ranking changes, gauge needle movements, status change highlights
|
||||
- Layout: Define z-index scale system (10 20 30 50)
|
||||
52
design-system/echochat/pages/admin-user-list.md
Normal file
52
design-system/echochat/pages/admin-user-list.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# Admin User List Page Overrides
|
||||
|
||||
> **PROJECT:** EchoChat
|
||||
> **Generated:** 2026-03-02 10:58:45
|
||||
> **Page Type:** Dashboard / Data View
|
||||
|
||||
> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).
|
||||
> Only deviations from the Master are documented here. For all other rules, refer to the Master.
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Rules
|
||||
|
||||
### Layout Overrides
|
||||
|
||||
- **Max Width:** 1400px or full-width
|
||||
- **Grid:** 12-column grid for data flexibility
|
||||
- **Sections:** 1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA
|
||||
|
||||
### Spacing Overrides
|
||||
|
||||
- **Content Density:** High — optimize for information display
|
||||
|
||||
### Typography Overrides
|
||||
|
||||
- No overrides — use Master typography
|
||||
|
||||
### Color Overrides
|
||||
|
||||
- **Strategy:** Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.
|
||||
|
||||
### Component Overrides
|
||||
|
||||
- Avoid: Use for flat single-level sites
|
||||
- Avoid: Ignore accessibility motion settings
|
||||
- Avoid: Validate only on submit
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Components
|
||||
|
||||
- No unique components for this page
|
||||
|
||||
---
|
||||
|
||||
## Recommendations
|
||||
|
||||
- Effects: Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
|
||||
- Navigation: Use for sites with 3+ levels of depth
|
||||
- Animation: Check prefers-reduced-motion media query
|
||||
- Forms: Validate on blur for most fields
|
||||
- CTA Placement: After reviews summary + Buy button alongside reviews
|
||||
50
design-system/echochat/pages/login.md
Normal file
50
design-system/echochat/pages/login.md
Normal file
@@ -0,0 +1,50 @@
|
||||
# Login Page Overrides
|
||||
|
||||
> **PROJECT:** EchoChat
|
||||
> **Generated:** 2026-03-02 09:58:55
|
||||
> **Page Type:** Authentication
|
||||
|
||||
> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).
|
||||
> Only deviations from the Master are documented here. For all other rules, refer to the Master.
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Rules
|
||||
|
||||
### Layout Overrides
|
||||
|
||||
- **Max Width:** 800px (narrow, focused)
|
||||
- **Layout:** Single column, centered
|
||||
- **Sections:** 1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit
|
||||
|
||||
### Spacing Overrides
|
||||
|
||||
- **Content Density:** Low — focus on clarity
|
||||
|
||||
### Typography Overrides
|
||||
|
||||
- No overrides — use Master typography
|
||||
|
||||
### Color Overrides
|
||||
|
||||
- **Strategy:** Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color
|
||||
|
||||
### Component Overrides
|
||||
|
||||
- Avoid: No feedback after submit
|
||||
- Avoid: Placeholder-only inputs
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Components
|
||||
|
||||
- No unique components for this page
|
||||
|
||||
---
|
||||
|
||||
## Recommendations
|
||||
|
||||
- Effects: Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback
|
||||
- Forms: Show loading then success/error state
|
||||
- Accessibility: Use label with for attribute or wrap input
|
||||
- CTA Placement: Form CTA: Submit button
|
||||
Reference in New Issue
Block a user