feat: 客服

uni_modules/hashmall-customer-service/docs/DESIGN.md

@@ -0,0 +1,82 @@
+# 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 作为核心能力。