fix: 渠道账号群聊同步缓存 key 及成员名称兜底；统一 Docker/Maven 项目约定
This commit is contained in:
116
.stitch/DESIGN.md
Normal file
116
.stitch/DESIGN.md
Normal file
@@ -0,0 +1,116 @@
|
||||
# Design System: Sino-MCI 消息中台
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
A modern, high-density administration dashboard with a calm, professional atmosphere. The interface feels like a precision cockpit: information-dense but breathable, predictable but polished. Visual hierarchy is established through restrained color, generous whitespace in headers, and tight data grids in tables. The personality is trustworthy and operational — no marketing fluff, no decorative gradients, no visual noise.
|
||||
|
||||
- **Density:** 7/10 — Cockpit-dense tables and forms, airy page headers.
|
||||
- **Variance:** 3/10 — Predictable, symmetric layouts for operational efficiency.
|
||||
- **Motion:** 4/10 — Fluid, purposeful micro-interactions; no cinematic delays.
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
- **Canvas White** (#F8FAFC) — Primary background surface behind all content.
|
||||
- **Pure Surface** (#FFFFFF) — Cards, modals, drawers, table rows, input backgrounds.
|
||||
- **Charcoal Ink** (#0F172A) — Primary text, headings, key labels.
|
||||
- **Muted Steel** (#64748B) — Secondary text, placeholders, metadata, disabled states.
|
||||
- **Whisper Border** (#E2E8F0) — 1px structural borders, table dividers, section separators.
|
||||
- **Soft Tint** (#F1F5F9) — Hover backgrounds, zebra striping, subtle section fills.
|
||||
- **Signal Blue** (#2563EB) — Single accent for primary buttons, active nav items, focus rings, links, status "online".
|
||||
- **Signal Red** (#DC2626) — Destructive actions, errors, failed status.
|
||||
- **Signal Green** (#16A34A) — Success states, sent/delivered status.
|
||||
- **Signal Amber** (#D97706) — Warnings, pending status, cautions.
|
||||
|
||||
No neon glows, no purple accents, no gradient text, no pure black.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
- **Display / Headlines:** `Geist, "Noto Sans SC", system-ui, sans-serif` — tight tracking, weight-driven hierarchy. H1 24px/700, H2 20px/600, H3 16px/600.
|
||||
- **Body:** `Geist, "Noto Sans SC", system-ui, sans-serif` — 14px/1.6 line-height for Chinese readability, max 65ch in prose.
|
||||
- **Mono / Data:** `"Geist Mono", "JetBrains Mono", "SF Mono", monospace` — timestamps, IDs, counts, JSON preview. 13px.
|
||||
- **Banned:** Inter as the primary font, generic serifs, decorative display fonts.
|
||||
|
||||
Numbers in tables and metrics use monospace for alignment.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
- **Primary:** Signal Blue fill (#2563EB), white text, 6px border-radius, 32px height, 12px horizontal padding. Active: -1px translateY, darker fill (#1D4ED8). No outer glow.
|
||||
- **Secondary:** White fill, Whisper Border, Charcoal Ink text. Hover: Soft Tint background.
|
||||
- **Danger:** Signal Red fill or ghost style depending on context.
|
||||
- **Text/Link buttons:** Signal Blue text, no underline, hover underline.
|
||||
|
||||
### Cards / Sections
|
||||
- White surface, 1px Whisper Border, 8px border-radius, subtle shadow `0 1px 3px rgba(15, 23, 42, 0.06)`.
|
||||
- Used to group related controls (filter bar, stats row, form sections).
|
||||
- In high-density tables, replace nested cards with border-top dividers.
|
||||
|
||||
### Inputs / Forms
|
||||
- Label above input, 12px/500 Muted Steel.
|
||||
- Input height 32px, 6px border-radius, Whisper Border, focus ring 2px Signal Blue at 20% opacity.
|
||||
- Error text below input in Signal Red, 12px.
|
||||
- No floating labels, no placeholder-only inputs.
|
||||
|
||||
### Tables
|
||||
- Header: Soft Tint background, 13px/600 Muted Steel uppercase tracking.
|
||||
- Rows: White, 44px min-height, hover Soft Tint.
|
||||
- Cell padding: 12px 16px.
|
||||
- Status tags: small rounded pills with tinted backgrounds.
|
||||
- Row actions: icon buttons or link buttons grouped at right.
|
||||
|
||||
### Navigation
|
||||
- Left sidebar: 220px width, White surface, Whisper Border right.
|
||||
- Menu items: 40px height, 12px/14px text, Signal Blue left-border active indicator, Soft Tint active background.
|
||||
- Submenu: indented 16px, lighter Muted Steel.
|
||||
- Top header: 56px height, White surface, bottom Whisper Border, page title left, global search + user avatar right.
|
||||
|
||||
### Drawers / Modals
|
||||
- Drawer: 560px width from right, White surface, Whisper Border left, 16px padding.
|
||||
- Modal: 520px max-width, 8px border-radius, centered, backdrop rgba(15,23,42,0.4).
|
||||
- Close icon top-right.
|
||||
|
||||
### Tags / Pills
|
||||
- Small rounded pills (12px height, 4px radius) with tinted background.
|
||||
- Examples: blue tint for active, gray tint for default, green tint for success, red tint for error.
|
||||
|
||||
### Empty States
|
||||
- Centered composed illustration + headline + single CTA.
|
||||
- No generic "No data" alone; explain what to do next.
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
- **Sidebar + Main:** Fixed left sidebar, main content scrolls. Main has 24px padding.
|
||||
- **Page Header:** H1 page title + short description + top-right primary action button.
|
||||
- **Filter Bar:** Collapsible card directly below header; inline form items with 12px gaps.
|
||||
- **Data Table:** Full-width card below filter bar.
|
||||
- **Max Width:** None for tables (fluid); prose max-width 720px.
|
||||
- **Grid:** Use CSS Grid for dashboard cards; tables are full-width.
|
||||
- **Responsive:** Below 768px, sidebar collapses to hamburger, tables horizontal-scroll with sticky first column, drawers become full-screen.
|
||||
- **Spacing Scale:** 4px base. Common: 8, 12, 16, 24, 32, 48.
|
||||
|
||||
## 6. Motion & Interaction
|
||||
|
||||
- **Spring default:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for UI transitions; 150ms for hovers, 200ms for drawer/modal open.
|
||||
- **Micro-interactions:**
|
||||
- Buttons: -1px lift on hover, press-down on active.
|
||||
- Table rows: background-color transition on hover.
|
||||
- Status dots: subtle pulse when in "sending" / "online" state.
|
||||
- Drawers: slide from right with backdrop fade.
|
||||
- **Loading:** Skeleton shimmer matching exact row dimensions in tables; no generic spinners.
|
||||
- **Performance:** Animate only `transform` and `opacity`.
|
||||
|
||||
## 7. Anti-Patterns (Banned)
|
||||
|
||||
- No emojis in UI copy or icons.
|
||||
- No Inter as the primary typeface.
|
||||
- No pure black (#000000).
|
||||
- No neon/outer glow shadows.
|
||||
- No gradient text or hero gradients.
|
||||
- No 3-column equal feature cards.
|
||||
- No centered hero sections.
|
||||
- No AI copywriting clichés: "Seamless", "Elevate", "Unleash", "Next-Gen".
|
||||
- No filler text like "Scroll to explore" or bouncing arrows.
|
||||
- No fabricated metrics or fake statistics.
|
||||
- No overlapping elements — every component has clear spatial separation.
|
||||
- No custom mouse cursors.
|
||||
- No broken Unsplash links — use abstract SVG patterns or neutral placeholders.
|
||||
Reference in New Issue
Block a user