style(frontend): ui-ux-pro-max 规范改造 — chat 页面 + CustomTabBar

改造内容:
- 安装 @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
This commit is contained in:
bujinyuan
2026-03-03 11:23:11 +08:00
parent 143cb8aa5f
commit 35788f6d2f
13 changed files with 896 additions and 213 deletions

View File

@@ -0,0 +1,69 @@
# Chat Conversation (聊天对话) Page Overrides
> **PROJECT:** EchoChat
> **Generated:** 2026-03-03 (via ui-ux-pro-max)
> **Page Type:** Full Screen — Chat Dialog (custom navigation)
> ⚠️ Rules in this file **override** `design-system/echochat/MASTER.md`.
---
## Page Layout
- **结构:** Custom NavBar + Scrollable Message List + Input Bar
- **背景:** `#F1F5F9` (区分于白色列表页)
- **导航栏:** 自定义,包含返回 + 标题/输入提示 + 更多设置
## Icon Mapping
| 位置 | uni-icons type | size | color |
|------|---------------|------|-------|
| 返回按钮 | `back` | 20 | `#1E293B` |
| 更多按钮 | `more-filled` | 20 | `#475569` |
| 发送按钮 | `paperplane` | 22 | `#FFFFFF` |
| 发送中状态 | `loop` | 16 | `#94A3B8` |
| 发送失败 | `info-filled` | 18 | `#EF4444` |
## Message Bubble Spec
### 自己的消息(右侧)
```css
.bubble-self {
background-color: #2563EB;
color: #FFFFFF;
border-radius: 24rpx;
border-bottom-right-radius: 8rpx;
max-width: 560rpx;
}
```
### 对方的消息(左侧)
```css
.bubble-other {
background-color: #FFFFFF;
color: #1E293B;
border-radius: 24rpx;
border-bottom-left-radius: 8rpx;
max-width: 560rpx;
}
```
### 已撤回消息
- 背景透明,灰色斜体文字 `#94A3B8`
## Input Bar
- **背景:** `#FFFFFF` + 顶部 `1rpx` 边框 `#E2E8F0`
- **输入框:** `#F1F5F9` 背景,`36rpx` 圆角
- **发送按钮:** 圆形 72rpx默认 `#CBD5E1`,有内容时 `#2563EB`
- **安全区:** `padding-bottom: calc(16rpx + env(safe-area-inset-bottom))`
## Interactions
- **长按自己消息:** ActionSheet 撤回
- **点击失败图标:** Modal 确认重发
- **下拉到顶:** 加载更多历史消息
- **正在输入:** 导航栏标题下方蓝色小字提示