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