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
40 lines
1.3 KiB
Markdown
40 lines
1.3 KiB
Markdown
# Chat Index (会话列表) Page Overrides
|
||
|
||
> **PROJECT:** EchoChat
|
||
> **Generated:** 2026-03-03 (via ui-ux-pro-max)
|
||
> **Page Type:** TabBar Page — Conversation List
|
||
|
||
> ⚠️ Rules in this file **override** `design-system/echochat/MASTER.md`.
|
||
|
||
---
|
||
|
||
## Page Layout
|
||
|
||
- **结构:** Header + Scrollable List + CustomTabBar
|
||
- **Header:** 左侧"消息"标题 + 右侧搜索图标按钮
|
||
- **Empty State:** 居中图标 + 主文字 + 辅助提示
|
||
|
||
## Icon Mapping
|
||
|
||
| 位置 | uni-icons type | size | color |
|
||
|------|---------------|------|-------|
|
||
| 搜索按钮 | `search` | 20 | `#475569` |
|
||
| 空状态 | `chatbubble` | 64 | `#CBD5E1` |
|
||
| 置顶标记 | `top` | 14 | `#94A3B8` |
|
||
|
||
## Conversation Item Spec
|
||
|
||
```
|
||
[Avatar 96rpx + Badge] | [Name + Time]
|
||
| [Preview/Typing + Pin]
|
||
```
|
||
|
||
- **头像:** 96rpx 圆角 24rpx，无头像时使用首字母占位（Primary 背景）
|
||
- **未读 Badge:** 绝对定位在头像右上角，红色圆角
|
||
- **时间:** 右对齐，`24rpx` `#94A3B8`
|
||
- **预览:** 单行截断，有未读时 `#64748B` + `font-weight: 500`
|
||
- **正在输入:** 替换预览文字，`#2563EB`
|
||
- **置顶条目:** 背景色 `#F8FAFC` 区分
|
||
- **按压态:** `:active { background-color: #F1F5F9 }`
|
||
- **长按:** ActionSheet 操作（置顶/取消置顶、删除会话）
|