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,44 @@
# Chat Search (消息搜索) Page Overrides
> **PROJECT:** EchoChat
> **Generated:** 2026-03-03 (via ui-ux-pro-max)
> **Page Type:** Full Screen — Global Message Search
> ⚠️ Rules in this file **override** `design-system/echochat/MASTER.md`.
---
## Page Layout
- **结构:** Search Bar + Result List
- **搜索栏:** 胶囊输入框 + 取消按钮
## Icon Mapping
| 位置 | uni-icons type | size | color |
|------|---------------|------|-------|
| 搜索框内图标 | `search` | 18 | `#94A3B8` |
## Search Bar
- **输入框:** `#F1F5F9` 背景,`36rpx` 圆角,`68rpx`
- **搜索图标:** 左侧内嵌 `uni-icons search`
- **取消按钮:** `#2563EB` 文字,无边框
## Result Item
```
[Avatar 80rpx] | [Sender Name]
| [Content (单行截断)]
| [Time]
```
- **头像:** 80rpx 圆角 20rpx
- **发送者名称:** `28rpx` `font-weight: 500` `#1E293B`
- **内容:** `26rpx` `#64748B` 单行截断
- **时间:** `22rpx` `#94A3B8`
## Empty State
- **位置:** 上方 200rpx 留白后居中
- **文字:** "未找到相关消息" `28rpx` `#94A3B8`