3.1 KiB
3.1 KiB
Design System
Overview
HashMall 客服前台采用轻量、克制的移动产品界面。用户在商城浏览或订单处理过程中进入，因此页面应像商城内部的原生工具，而不是独立活动页。默认使用浅色主题，消息阅读区保持低干扰。
Color
- Brand primary:
#7934F6 - Brand pressed:
#6426D8 - Brand soft:
#F2EBFF - Page background:
#F5F5F7 - Surface:
#FFFFFF - Primary text:
#1A1A1D - Secondary text:
#5F6068 - Muted text:
#777983 - Divider:
#E7E7EC - Success:
#168A5B - Warning:
#A45A00 - Error:
#C93636
品牌色只用于主按钮、本人消息气泡、焦点和少量状态标识。客服消息使用白色表面和清晰正文色。
Typography
使用平台系统无衬线字体。H5 优先 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif，小程序沿用系统字体。
- Page title: 17px / 600
- Section or state title: 16px / 600
- Message body: 15px / 400, line-height 1.55
- Supporting text: 13px / 400
- Caption and timestamp: 12px / 400
消息正文允许换行和长字符串断行，不使用装饰性字体。
Layout
- 页面采用纵向三段结构：状态/导航、可滚动消息区、固定输入区。
- 内容宽度在桌面 H5 最大 720px，移动端占满视口。
- 页面横向安全间距 16px，气泡最大宽度约 76%。
- 使用 4、8、12、16、24px 的间距节奏。
- 输入区适配底部安全区和软键盘，不用固定像素高度锁死页面。
Components
Message bubble
- 本人消息：紫色实底、白字，圆角 14px，右上角保留较小圆角以区分方向。
- 客服消息：白色实底、深色文字，可使用 1px 中性边界，不叠加宽阴影。
- 气泡内文本可选中；URL、图片、卡片按明确组件渲染。
Composer
- 白色表面与顶部细分隔线。
- 文本输入框使用中性浅灰背景，圆角 12px。
- 图片与更多操作使用至少 44px 的触控区。
- 发送按钮使用品牌色；空文本时为明确禁用状态。
Context card
- 商品或订单上下文在输入区上方单层展示。
- 使用缩略图、两行标题和一组关键元数据，不嵌套卡片。
- 提供“发送”与“移除”两个清晰动作。
Status feedback
- 连接中、离线、轮询中显示在顶部状态条，状态文字与图标同时变化。
- 发送失败在对应消息旁展示“重新发送”，不使用全屏弹窗。
- 首屏使用消息骨架，空状态提供简短欢迎语和可执行提示。
Motion
- 状态切换和新消息定位使用 150 至 220ms 的 ease-out。
- 不做页面入场编排或弹跳动画。
- 系统启用减少动态效果时取消非必要过渡。
Responsive and platform behavior
- H5 与微信小程序均使用 uni-app 原生组件。
- Socket 使用
uni.connectSocket，图片使用uni.chooseMedia/兼容接口和uni.previewImage。 - H5 处理
100dvh与 iOS 软键盘；小程序处理safe-area-inset-bottom、导航栏和cursor-spacing。 - 不使用浏览器全局
WebSocket、DOM 文件选择器或 iframe 作为核心能力。