35788f6d2f
改造内容： - 安装 @dcloudio/uni-ui + sass，配置 easycom 自动引入 uni-icons - 4 个 chat 页面：emoji/HTML 实体 → uni-icons 组件（跨平台兼容） - CustomTabBar：emoji → uni-icons（chatbubble/contact/videocam/person） - 选中态使用 filled 变体，未选中态使用轮廓图标 - 所有可交互元素添加 :active 按压反馈 + transition (150-200ms) - 触控目标保证 ≥ 88rpx (44px) - input-bar/tab-bar 适配 safe-area-inset-bottom 设计规范文件： - MASTER.md 修正为项目蓝色色板 (#2563EB) + 移动聊天应用规范 - 新增 4 个页面覆盖规范：chat-index/conversation/settings/search.md - Pre-Delivery Checklist 全部通过 - npm run build:h5 编译验证通过 Made-with: Cursor
261 lines
6.3 KiB
Markdown
261 lines
6.3 KiB
Markdown
# Design System Master File
|
||
|
||
> **LOGIC:** When building a specific page, first check `design-system/echochat/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-03 (via ui-ux-pro-max)
|
||
**Category:** Mobile Messaging Application
|
||
|
||
---
|
||
|
||
## Global Rules
|
||
|
||
### Color Palette
|
||
|
||
| Role | Hex | CSS Variable | Usage |
|
||
|------|-----|--------------|-------|
|
||
| Primary | `#2563EB` | `--color-primary` | 按钮、链接、选中态、自己的消息气泡 |
|
||
| Secondary | `#3B82F6` | `--color-secondary` | 次级操作、hover 态 |
|
||
| CTA/Accent | `#10B981` | `--color-cta` | 在线状态、成功提示 |
|
||
| Background | `#F8FAFC` | `--color-background` | 页面主背景 |
|
||
| Surface | `#FFFFFF` | `--color-surface` | 卡片、列表项背景 |
|
||
| Text | `#1E293B` | `--color-text` | 主要文字 |
|
||
| Muted | `#94A3B8` | `--color-muted` | 辅助文字、时间戳、placeholder |
|
||
| Border | `#E2E8F0` | `--color-border` | 分隔线 |
|
||
| Border Light | `#F1F5F9` | `--color-border-light` | 浅分隔线 |
|
||
| Danger | `#EF4444` | `--color-danger` | 错误、删除、未读 badge |
|
||
|
||
**Color Notes:** Professional blue + clean slate gray
|
||
|
||
### Typography (uni-app)
|
||
|
||
- **Body Font:** System default (uni-app 跨平台自动适配)
|
||
- **Line Height:** 1.5 for body, 1.3 for headings
|
||
- **Font Size Scale (rpx):**
|
||
- xs: `22rpx` — 极小辅助文字
|
||
- sm: `24rpx` — 时间戳、标签
|
||
- base: `28rpx` — 正文、列表内容
|
||
- md: `30rpx` — 列表标题
|
||
- lg: `32rpx` — 页面标题
|
||
- xl: `36rpx` — 大标题
|
||
|
||
### Spacing Variables (rpx)
|
||
|
||
| Token | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `xs` | `8rpx` | 图标间距 |
|
||
| `sm` | `16rpx` | 行内间距 |
|
||
| `md` | `24rpx` | 列表项内边距 |
|
||
| `lg` | `32rpx` | 区域边距 |
|
||
| `xl` | `48rpx` | 大区域分隔 |
|
||
|
||
### Shadow Depths
|
||
|
||
| Level | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `sm` | `0 1px 2px rgba(0,0,0,0.05)` | 微弱浮起 |
|
||
| `md` | `0 4px 6px rgba(0,0,0,0.07)` | 卡片 |
|
||
| `lg` | `0 10px 15px rgba(0,0,0,0.1)` | 弹出层 |
|
||
|
||
### Border Radius Scale (rpx)
|
||
|
||
| Token | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `sm` | `8rpx` | 小元素 |
|
||
| `md` | `16rpx` | 按钮、输入框 |
|
||
| `lg` | `24rpx` | 卡片、头像 |
|
||
| `xl` | `36rpx` | 胶囊按钮、搜索框 |
|
||
| `full` | `50%` | 圆形按钮 |
|
||
|
||
---
|
||
|
||
## Icon System (uni-icons)
|
||
|
||
**图标方案:** `@dcloudio/uni-ui` 的 `uni-icons` 组件（跨平台兼容）
|
||
|
||
**严禁:** 使用 emoji 或 HTML 实体字符（&#xxxx;）作为图标
|
||
|
||
| 场景 | 图标名 | 尺寸 | 颜色 |
|
||
|------|--------|------|------|
|
||
| 搜索 | `search` | 20 | `#475569` |
|
||
| 返回 | `back` | 20 | `#1E293B` |
|
||
| 更多 | `more-filled` | 20 | `#475569` |
|
||
| 发送 | `paperplane` | 22 | `#FFFFFF` |
|
||
| 发送中 | `loop` | 16 | `#94A3B8` |
|
||
| 发送失败 | `info-filled` | 18 | `#EF4444` |
|
||
| 置顶 | `top` | 16 | `#94A3B8` |
|
||
| 聊天（空状态）| `chatbubble` | 64 | `#CBD5E1` |
|
||
| 删除 | `trash` | 20 | `#EF4444` |
|
||
| 清除 | `clear` | 20 | `#EF4444` |
|
||
|
||
**使用方式:**
|
||
|
||
```html
|
||
<uni-icons type="search" size="20" color="#475569" />
|
||
```
|
||
|
||
---
|
||
|
||
## Component Specs
|
||
|
||
### Touch Targets (CRITICAL for Mobile)
|
||
|
||
```css
|
||
/* 所有可点击元素最小尺寸 */
|
||
.touchable {
|
||
min-width: 88rpx;
|
||
min-height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
```
|
||
|
||
### Buttons
|
||
|
||
```css
|
||
.btn-primary {
|
||
background: #2563EB;
|
||
color: #FFFFFF;
|
||
padding: 24rpx 48rpx;
|
||
border-radius: 16rpx;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
transition: opacity 200ms ease;
|
||
}
|
||
|
||
.btn-primary:active {
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.btn-danger {
|
||
background: transparent;
|
||
color: #EF4444;
|
||
font-size: 30rpx;
|
||
}
|
||
```
|
||
|
||
### Cards / List Items
|
||
|
||
```css
|
||
.list-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 32rpx;
|
||
background-color: #FFFFFF;
|
||
border-bottom: 1rpx solid #F1F5F9;
|
||
transition: background-color 150ms ease;
|
||
}
|
||
|
||
.list-item:active {
|
||
background-color: #F1F5F9;
|
||
}
|
||
```
|
||
|
||
### Avatar
|
||
|
||
```css
|
||
.avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
background-color: #2563EB;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #FFFFFF;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.avatar-sm { width: 72rpx; height: 72rpx; border-radius: 18rpx; }
|
||
.avatar-lg { width: 120rpx; height: 120rpx; border-radius: 30rpx; }
|
||
```
|
||
|
||
### Inputs
|
||
|
||
```css
|
||
.input-wrap {
|
||
background-color: #F1F5F9;
|
||
border-radius: 36rpx;
|
||
padding: 0 28rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #1E293B;
|
||
}
|
||
```
|
||
|
||
### Badge
|
||
|
||
```css
|
||
.badge {
|
||
min-width: 36rpx;
|
||
height: 36rpx;
|
||
padding: 0 8rpx;
|
||
background-color: #EF4444;
|
||
border-radius: 18rpx;
|
||
color: #FFFFFF;
|
||
font-size: 20rpx;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Style Guidelines
|
||
|
||
**Style:** Clean & Functional Messaging
|
||
|
||
**Keywords:** Clean, functional, chat-focused, mobile-first, fast interactions, minimal visual noise
|
||
|
||
**Best For:** Instant messaging, social chat, real-time communication
|
||
|
||
**Key Effects:**
|
||
- `:active` 状态替代 `:hover`（移动端优先）
|
||
- 所有状态切换使用 `transition: 150-200ms ease`
|
||
- 消息气泡圆角差异化（自己 vs 对方）
|
||
- 列表项按压态反馈
|
||
|
||
---
|
||
|
||
## Anti-Patterns (Do NOT Use)
|
||
|
||
- ❌ **Emojis as icons** — 使用 `uni-icons` 组件（跨平台兼容）
|
||
- ❌ **HTML 实体字符 (&#xxxx;) as icons** — 同上
|
||
- ❌ **Low contrast text** — 最低 4.5:1 对比度
|
||
- ❌ **Instant state changes** — 必须使用 transition (150-200ms)
|
||
- ❌ **Touch targets < 44px (88rpx)** — 所有可交互元素最小 88rpx
|
||
- ❌ **相邻触控元素间距 < 8px (16rpx)** — 保证误触防护
|
||
- ❌ **硬编码 px** — uni-app 中统一使用 rpx（状态栏除外）
|
||
|
||
---
|
||
|
||
## Pre-Delivery Checklist
|
||
|
||
Before delivering any UI code, verify:
|
||
|
||
- [ ] No emojis or HTML entities used as icons (use `uni-icons`)
|
||
- [ ] All icons from `@dcloudio/uni-ui` uni-icons
|
||
- [ ] Touch targets ≥ 88rpx (44px) on all interactive elements
|
||
- [ ] `:active` states for press feedback (mobile)
|
||
- [ ] Transitions (150-200ms) on all state changes
|
||
- [ ] Text contrast 4.5:1 minimum
|
||
- [ ] No horizontal scroll on any screen
|
||
- [ ] Content not hidden behind navigation bars
|
||
- [ ] `padding-bottom` accounts for safe-area-inset-bottom
|
||
- [ ] Avatar placeholder with first character fallback
|
||
- [ ] Empty states with icon + text + hint
|