Files

bujinyuan 35788f6d2f 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

2026-03-03 11:23:11 +08:00

1.3 KiB

Raw Blame History

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 操作（置顶/取消置顶、删除会话）

1.3 KiB Raw Blame History Unescape Escape

Chat Index (会话列表) Page Overrides

Page Layout

Icon Mapping

Conversation Item Spec

1.3 KiB

Raw Blame History