wanglei/EchoChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
17d2d0a1db6ce179cd91e27a18bc2fe77af7bf78
EchoChat/design-system/echochat/pages/chat-conversation.md
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.7 KiB
Raw Blame History

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

自己的消息（右侧）

.bubble-self {
  background-color: #2563EB;
  color: #FFFFFF;
  border-radius: 24rpx;
  border-bottom-right-radius: 8rpx;
  max-width: 560rpx;
}

对方的消息（左侧）

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