# ProPrice / 智价云（药店版）Design System

> Stitch 项目根设计规范。生成任意页面前，先将本文档导入 Stitch 作为全局上下文。

---

## 1. Brand Identity

| 项 | 值 |
|----|-----|
| Product EN | ProPrice |
| Product CN | 智价云（药店版） |
| Tagline | 绑定您的 B2B 账号，一键聚合查低价 |
| Personality | 专业、可信、高效；B2B 采购工具感，非 C 端促销电商 |
| Target User | 终端药店老板、采购员 |

### Voice & Tone

- 简洁、直接、偏采购场景
- 使用：聚合查询、参考低价、去平台购买、绑定账号、审核中
- 禁用：抢购、秒杀、全网最低保证、限时疯抢

### Compliance Footer（每屏页脚或关于页）

> 数据来源于您本人绑定的 B2B 平台账号，智价云不提供药品交易服务。

---

## 2. Color System

### Primary Palette

| Token | Hex | Usage |
|-------|-----|-------|
| `klein-blue` | `#002FA7` | 主色：导航、主按钮、链接、选中态 |
| `true-red` | `#E60012` | 最低价标签、错误、驳回、危险操作 |
| `medical-green` | `#00A870` | 成功、已绑定、审核通过、正向状态 |

### Neutral Palette

| Token | Hex | Usage |
|-------|-----|-------|
| `bg-page` | `#F5F7FA` | 页面背景 |
| `bg-card` | `#FFFFFF` | 卡片、表格行背景 |
| `border` | `#E4E7ED` | 分割线、表格线 |
| `text-primary` | `#1A1A2E` | 主文字 |
| `text-secondary` | `#6B7280` | 次要说明 |
| `text-disabled` | `#C0C4CC` | 禁用态 |

### Semantic Colors

| Token | Hex | Usage |
|-------|-----|-------|
| `warning` | `#F5A623` | 近效期、体验即将到期 |
| `info` | `#409EFF` | 提示信息 |
| `lowest-price-bg` | `#FFF1F0` | 最低价行/卡片浅底 |

---

## 3. Typography

| Role | Font | Size | Weight |
|------|------|------|--------|
| Display | PingFang SC / Noto Sans SC | 24px | 600 |
| H1 | PingFang SC | 20px | 600 |
| H2 | PingFang SC | 16px | 600 |
| Body | PingFang SC | 14px | 400 |
| Caption | PingFang SC | 12px | 400 |
| Price | DIN / tabular nums | 18–24px | 700 |
| Invite Code | JetBrains Mono / Consolas | 28px | 700 |

- 价格数字必须等宽（tabular-nums）
- 最低价用 `true-red`，可加「最低」Tag

---

## 4. Spacing & Layout

| Token | Value |
|-------|-------|
| `space-xs` | 4px |
| `space-sm` | 8px |
| `space-md` | 16px |
| `space-lg` | 24px |
| `space-xl` | 32px |
| `radius-sm` | 4px |
| `radius-md` | 8px |
| `radius-lg` | 12px |

### Platform Layouts

**Windows Desktop（1280×800 min）**
- 左侧导航栏：220px 固定宽
- 顶栏：56px（搜索 + 会员状态条）
- 主内容：表格比价为主
- 窗口 chrome：标题「智价云（药店版）」+ 最小化/最大化/关闭

**Android Mobile（375×812）**
- 底部 Tab 栏：56px，4 Tab
- 顶栏：48px
- 扫码 FAB：右下角浮动按钮

**Admin Web（1440×900）**
- 左侧菜单：240px
- 顶栏：面包屑 + 用户信息
- 内容区：表格 + 筛选栏

**H5 Landing（375×812）**
- 单栏滚动，大 CTA 按钮

---

## 5. Component Library

### 5.1 Buttons

| Variant | Style |
|---------|-------|
| Primary | bg `#002FA7`, text white, radius 8px, h 40px |
| Secondary | border `#002FA7`, text `#002FA7`, bg white |
| Danger | bg `#E60012`, text white |
| Ghost | text `#002FA7`, no border |
| Disabled | bg `#F5F7FA`, text `#C0C4CC` |

Primary label examples: 立即查询、去平台购买、提交审核、复制邀请码

### 5.2 Platform Badge

三个 B2B 平台标识（占位色块 + 文字）：

| Platform | Badge Color | Label |
|----------|-------------|-------|
| 药师帮 | `#FF6B00` | 药师帮 |
| 药帮忙 | `#1890FF` | 药帮忙 |
| 1药城 | `#52C41A` | 1药城 |

尺寸：小 20px 高 inline；大 32px 卡片头

### 5.3 Status Tags

| Status | BG | Text | Label |
|--------|-----|------|-------|
| 待审核 | `#FFF7E6` | `#F5A623` | 待审核 |
| 已通过 | `#E6F7F0` | `#00A870` | 已通过 |
| 已驳回 | `#FFF1F0` | `#E60012` | 已驳回 |
| 已绑定 | `#E6F7F0` | `#00A870` | 已绑定 |
| 未绑定 | `#F5F7FA` | `#6B7280` | 未绑定 |
| 最低 | `#E60012` | white | 最低 |

### 5.4 Expiry Tag

- 正常效期：caption gray
- 近效期（<90天）：warning orange tag「近效期」

### 5.5 Quota Progress Bar

- 体验用户：「今日查询 12/20」progress bar
- 关注：「本月关注 45/199」或「156/1999」
- 颜色：>80% 用量时变 warning

### 5.6 Member Status Bar

| Type | Style |
|------|-------|
| 体验中 | klein-blue bg light, 「体验剩余 12 天 · 今日查询 8/20」 |
| 会员 | medical-green accent, 「会员至 2026-12-31 · 关注 156/1999」 |
| 已过期 | true-red accent, 「体验已到期 · 立即开通」CTA |

### 5.7 Price Compare Table Row（Windows 主组件）

Columns: 平台 | 价格 | 规格 | 厂家 | 效期 | 起订量 | 库存 | 操作

- 最低价行：`lowest-price-bg` + 「最低」Tag
- 价格列：tabular nums, bold
- 操作：「去购买」link button → 外链

### 5.8 Price Compare Card（Android 主组件）

- 平台 Badge + 价格（大号 red if lowest）
- 规格 / 厂家 / 效期 / 起订量 / 库存
- Bottom: 「去平台购买」secondary button

### 5.9 Invite Code Card

- 大号等宽字体邀请码：`PX8K2M`
- 「复制邀请码」「复制链接」两个 ghost buttons
- 统计：已邀请 5 人 · 已激活 3 人 · 累计奖励 +21 天

### 5.10 Search Parallel Loading

三平台横排进度：
- 药师帮 ✓ / 药帮忙 查询中… / 1药城 等待中
- klein-blue progress bars

### 5.11 Gate Modal（查询门禁）

居中 modal，icon + title + description + CTA：

| State | Title | CTA |
|-------|-------|-----|
| 未上传执照 | 请先上传营业执照 | 去上传 |
| 审核中 | 营业执照审核中 | 我知道了 |
| 审核驳回 | 审核未通过 | 重新上传 |
| 未绑平台 | 请先绑定 B2B 平台账号 | 去绑定 |
| 配额用尽 | 今日查询次数已用完 | 开通会员 |

### 5.12 Payment

**Windows QR**: 套餐卡片 + 微信/支付宝 Tab + 二维码 200×200 + 「请使用手机扫码支付」+ 倒计时

**Android Native**: 套餐卡片 + 微信支付 / 支付宝 radio + 「立即支付」primary button

### 5.13 Admin Table

- 标准 data table, zebra optional
- 筛选栏 top
- 分页 bottom
- 待审 badge red dot on sidebar

---

## 6. Navigation Patterns

### Windows Sidebar

```
🏠 比价首页
⭐ 我的关注
👥 邀请好友
🔗 平台账号
⚙️ 设置与帮助
```

Bottom: 会员状态 mini card

### Android Bottom Tabs

```
首页 | 关注 | 邀请 | 我的
```

Home FAB: 扫码 icon

### Admin Sidebar

```
📊 数据看板
👤 用户管理
📋 执照审核
🎫 邀请管理
🎟️ 体验券
💳 会员订单
🏪 平台配置
📝 运营内容
🔐 系统设置
```

---

## 7. Page ID Convention

| Prefix | Platform |
|--------|----------|
| `h5-` | 私域 H5 落地页 |
| `w-` | Windows 桌面 |
| `m-` | Android APP |
| `a-` | Admin Web |

Total: 63 screens

---

## 8. Sample Data（原型占位）

**Search keyword**: 阿莫西林胶囊 0.25g×24粒

**Sample prices**:

| Platform | Price | Expiry | MOQ |
|----------|-------|--------|-----|
| 药帮忙 | ¥8.50 | 2027-06 | 10盒 |
| 药师帮 | ¥9.20 | 2027-03 | 5盒 |
| 1药城 | ¥8.80 | 2027-08 | 20盒 |

**Pharmacy**: 康宁大药房 · 广东省广州市天河区

**Invite code**: PX8K2M

---

## 9. Icon Style

- Line icons, 1.5px stroke
- 24px default, 20px inline
- Color: inherit from text or klein-blue for active

---

## 10. Stitch Generation Rules

1. Always reference this DESIGN.md before generating new screens
2. Chinese UI labels throughout
3. Use realistic pharmacy/B2B sample data from Section 8
4. Windows screens: show window chrome + left sidebar
5. Android screens: show status bar + bottom tabs
6. Admin screens: show admin sidebar + breadcrumb
7. Never use e-commerce promotional patterns
8. Every user-facing screen includes subtle compliance hint in footer or about section