# 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 作为核心能力。