Jelajahi Sumber

docs: clarify UI redesign dual entries and dashboard metrics

Pin the four primary MetricCards, secondary metric placement, shared
theme module for admin/auth entry points, and Inter loading guidance.

AI-Co-Authored-By: Grok
chendeben 1 bulan lalu
induk
melakukan
037217ed2a

+ 20 - 10
docs/superpowers/specs/2026-07-09-mailhub-ui-redesign-design.md

@@ -36,14 +36,15 @@ Continue the current React admin app (`src/frontend/`, `src/layouts/`, `src/page
 
 Business logic remains in existing model modules (`*-model.js`), `api.ts`, and page containers.
 
+Admin and auth are **separate Vite entry points** (`src/frontend/main.tsx` → `App.tsx`, `src/frontend/auth/main.tsx` → `AuthApp`). Each mounts its own `ConfigProvider`. Extract a **shared theme/token module** (e.g. `src/frontend/theme.ts` + CSS variables in `styles.css`) and apply it in both entry trees so brand stays consistent without implying a single React tree.
+
 ```text
-ConfigProvider(theme tokens)
-  └── I18nProvider
-        ├── AuthApp (login/register/forgot/reset)  ← shared tokens
-        └── App
-              └── AdminLayout (sider + header + content)
-                    └── pages (Dashboard, Domains, …)
-                          └── shared presentation components
+theme.ts + styles.css (shared tokens)
+  ├── Auth entry: ConfigProvider → I18nProvider → AuthApp
+  └── Admin entry: ConfigProvider → I18nProvider → App
+        └── AdminLayout (sider + header + content)
+              └── pages (Dashboard, Domains, …)
+                    └── shared presentation components
 ```
 
 ## Visual System (Tokens)
@@ -71,7 +72,8 @@ ConfigProvider(theme tokens)
 - **Shadow:** light elevation — thin border + soft ambient (`0 1px 2px` + `0 8px 24px` slate-tinted)
 - **Spacing rhythm:** 8-based (`8 / 16 / 24 / 32`); content padding `24–32px`
 - **Type scale:** page title `22–24px`, metric value `28–32px`, body `14px`
-- **Font stack:** Inter, system-ui, -apple-system, Segoe UI, sans-serif
+- **Font stack:** Inter preferred, with system-ui / -apple-system / Segoe UI fallbacks
+- **Inter loading:** prefer **system stack only** or **self-hosted** font files if Inter is added later; avoid third-party CDN font loads for self-hosted deploy reliability. Default implementation may use system-ui stack without shipping Inter files.
 
 ### Ant Design Theme Mapping
 
@@ -127,9 +129,17 @@ Prefer placing these under `src/components/common/` (or equivalent) and reusing
 ### Dashboard
 
 - Keep security alert (default admin password) at top when applicable
-- Condense metric strip from many flat cards to **~4 primary MetricCards** (e.g. today sent, success rate, verified domains, DNS issues). Secondary metrics fold into charts, lists, or tooltips rather than equal-weight cards
+- Condense the metric strip to **exactly four primary MetricCards**:
+  1. **今日发送** (today sent)
+  2. **成功率** (success rate)
+  3. **已验证域名** (verified domains)
+  4. **DNS 问题** (DNS issues count)
+- Place remaining current summary fields as secondary, not equal-weight cards:
+  - **Bounce rate / complaint rate** — show as captions or mini stats under success-rate card, or in status distribution context
+  - **Last sent at** — meta line under recent-sends SectionCard header or toolbar
+  - **SMTP status** — compact readiness chip in PageHeader extra area or a small readiness row above charts
 - Chart row: trend + status distribution in SectionCards; recolor plots to token palette
-- Domain ranking / hourly charts retain structure with updated card chrome
+- **Retain existing secondary panels** (domain ranking, hourly heatmap, domain health list / recent failures if present) — restyle with SectionCard chrome; do not drop them from the layout inventory
 - Recent sends table inside SectionCard
 - No analytics model API changes