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
70 lines
1.7 KiB
Markdown
70 lines
1.7 KiB
Markdown
# 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 确认重发
|
||
- **下拉到顶:** 加载更多历史消息
|
||
- **正在输入:** 导航栏标题下方蓝色小字提示
|