115 lines
6.4 KiB
Markdown
115 lines
6.4 KiB
Markdown
# 图标映射表
|
||
|
||
> 全局图标映射，TDesign 优先。自定义图标放 `apps/miniprogram/miniprogram/assets/icons/`。
|
||
> 复杂内联 SVG 统一导出为图片资源，避免小程序中维护大段 SVG 代码。
|
||
|
||
## 全局通用图标
|
||
|
||
| H5 中的图标描述 | 处理方式 | 小程序引用 |
|
||
|----------------|----------|-----------|
|
||
| Logo 台球图标 | 自定义 SVG → 文件 | `/assets/icons/logo-billiard.svg` |
|
||
| 微信图标 | 自定义 SVG → 文件 | `/assets/icons/icon-wechat.svg` |
|
||
| 返回箭头 | TDesign | `<t-icon name="chevron-left" />` |
|
||
| 右箭头 | TDesign | `<t-icon name="chevron-right" />` |
|
||
| 关闭 | TDesign | `<t-icon name="close" />` |
|
||
| 搜索 | TDesign | `<t-icon name="search" />` |
|
||
| 更多（三点） | TDesign | `<t-icon name="ellipsis" />` |
|
||
|
||
## Banner 背景处理方案（统一）
|
||
|
||
原型中所有 Banner 使用 `banner.css` 的 CSS 渐变 + `texture-aurora` SVG 丝带纹理，结构复杂（多层渐变+伪元素+内联 SVG path）。
|
||
|
||
**处理方式：** 统一用 Playwright 截取各主题 Banner 区域，导出为图片资源。
|
||
|
||
| Banner 主题 | 使用页面 | 导出文件 |
|
||
|-------------|----------|----------|
|
||
| `theme-blue texture-aurora` | task-list, performance | `/assets/images/banner-blue.png` |
|
||
| `theme-red texture-aurora` | task-detail（高优先召回） | `/assets/images/banner-red.png` |
|
||
| `theme-orange texture-aurora` | task-detail（优先召回） | `/assets/images/banner-orange.png` |
|
||
| `theme-pink texture-aurora` | task-detail-relationship（关系构建） | `/assets/images/banner-pink.png` |
|
||
| `theme-teal texture-aurora` | task-detail-callback（客户回访） | `/assets/images/banner-teal.png` |
|
||
| `theme-coral texture-aurora` | coach-detail | `/assets/images/banner-coral.png` |
|
||
| `theme-dark-gold` | customer-detail | `/assets/images/banner-dark-gold.png` |
|
||
|
||
> 小程序中 Banner 区域使用 `<image>` 组件 + 绝对定位文字叠加，替代 CSS 渐变方案。
|
||
|
||
## 状态页图标（复杂 SVG → 图片）
|
||
|
||
| H5 中的图标 | 实际 SVG 内容 | 处理方式 | 小程序引用 |
|
||
|-------------|--------------|----------|-----------|
|
||
| reviewing 主图标 | amber→orange 渐变方块 + 白色时钟（圆形表盘+时针分针） | 导出 SVG | `/assets/icons/icon-clock-circle.svg` |
|
||
| reviewing 进度对勾 | 绿色圆圈内白色对勾 polyline | TDesign | `<t-icon name="check-circle-filled" />` |
|
||
| reviewing 信息图标 | Material 风格 info（圆+感叹号） | TDesign | `<t-icon name="info-circle-filled" />` |
|
||
| reviewing 聊天气泡 | 聊天气泡 path | TDesign | `<t-icon name="chat" />` |
|
||
| reviewing 登出箭头 | 右箭头+门框 path | TDesign | `<t-icon name="logout" />` |
|
||
| no-permission 主图标 | rose→red 渐变方块 + 白色禁止符号（圆+对角线） | 导出 SVG | `/assets/icons/icon-forbidden.svg` |
|
||
| no-permission 问号 | 问号圆圈 path | TDesign | `<t-icon name="help-circle-filled" />` |
|
||
|
||
## TabBar 图标
|
||
|
||
| Tab | 处理方式 | 小程序引用 |
|
||
|-----|----------|-----------|
|
||
| 任务（未选中） | 自定义 SVG（剪贴板+勾选，stroke 灰色） | `/assets/icons/tab-task.png` |
|
||
| 任务（选中） | 自定义 SVG（剪贴板+勾选，fill 蓝色） | `/assets/icons/tab-task-active.png` |
|
||
| 看板（未选中） | 自定义 SVG（三柱状图，stroke 灰色） | `/assets/icons/tab-board.png` |
|
||
| 看板（选中） | 自定义 SVG（三柱状图，fill 蓝色） | `/assets/icons/tab-board-active.png` |
|
||
| 我的（未选中） | 自定义 SVG（人物头像，stroke 灰色） | `/assets/icons/tab-my.png` |
|
||
| 我的（选中） | 自定义 SVG（人物头像，fill 蓝色） | `/assets/icons/tab-my-active.png` |
|
||
|
||
> TabBar 图标由 `bottom-nav.js` 定义，包含完整的 active/inactive SVG。建议统一导出为 PNG 图片对。
|
||
|
||
## AI 助手图标
|
||
|
||
| H5 中的图标描述 | 实际 SVG 内容 | 处理方式 | 小程序引用 |
|
||
|----------------|--------------|----------|-----------|
|
||
| AI 悬浮按钮 | 可爱机器人（圆角矩形身体+天线+紫蓝色大眼睛+微笑+粉色腮红+小耳朵），渐变动画背景 | 截图导出按钮整体 | `/assets/icons/icon-ai-float.png` |
|
||
| AI 内联图标（卡片中） | 同上机器人 SVG，小尺寸 | 截图导出 | `/assets/icons/icon-ai-inline.png` |
|
||
| AI 标题徽章 | 同上机器人 + 随机配色 class | 截图导出 | `/assets/icons/icon-ai-badge.png` |
|
||
| 对话发送 | TDesign | TDesign | `<t-icon name="send" />` |
|
||
| 语音输入 | TDesign | TDesign | `<t-icon name="sound" />` |
|
||
|
||
> AI 图标由 `ai-icons.js` 统一管理，页面加载时随机分配配色（red/orange/yellow/blue/indigo/purple）。小程序中可固定一种配色或实现随机逻辑。
|
||
|
||
## 任务模块图标
|
||
|
||
| H5 中的图标描述 | 处理方式 | 小程序引用 |
|
||
|----------------|----------|-----------|
|
||
| 置顶 📌 | Emoji 文本 | `📌` |
|
||
| 放弃 ❌ | Emoji 文本 | `❌` |
|
||
| 备注指示器 📝 | Emoji 文本 | `📝` |
|
||
| 爱心（💖>8.5） | Emoji 文本 | `💖` |
|
||
| 爱心（🧡>7） | Emoji 文本 | `🧡` |
|
||
| 爱心（💛>5） | Emoji 文本 | `💛` |
|
||
| 爱心（💙<5） | Emoji 文本 | `💙` |
|
||
| 喜好-中式 | Emoji 文本 | `🎱` |
|
||
| 喜好-斯诺克 | 文本 | `斯` |
|
||
| 喜好-麻将 | Emoji 文本 | `🀅` |
|
||
| 喜好-团建 | Emoji 文本 | `🎤` |
|
||
| "与我的关系"图标 | 可爱机器人 SVG（同 AI 图标），可视为心形 ICON 扩展 | 截图导出 | `/assets/icons/icon-ai-relationship.png` |
|
||
|
||
## 看板模块图标
|
||
|
||
| H5 中的图标描述 | 处理方式 | 小程序引用 |
|
||
|----------------|----------|-----------|
|
||
| 筛选下拉箭头 | TDesign | `<t-icon name="caret-down-small" />` |
|
||
| 环比上升 | TDesign + 绿色 | `<t-icon name="arrow-up" />` |
|
||
| 环比下降 | TDesign + 红色 | `<t-icon name="arrow-down" />` |
|
||
| 目录导航按钮 | TDesign | `<t-icon name="view-list" />` |
|
||
| 指标帮助"?" | TDesign | `<t-icon name="help-circle" />` |
|
||
|
||
## 我的模块图标
|
||
|
||
| H5 中的图标描述 | 处理方式 | 小程序引用 |
|
||
|----------------|----------|-----------|
|
||
| 备注记录 | TDesign | `<t-icon name="edit-1" />` |
|
||
| 对话记录 | TDesign | `<t-icon name="chat" />` |
|
||
| 退出账号 | TDesign | `<t-icon name="poweroff" />` |
|
||
|
||
## 星级评价组件
|
||
|
||
原型中星级评价由 `ai-icons.js` 渲染：读取 `data-score`（0-10），转换为 5 颗星（支持半星）。
|
||
|
||
- 空星：灰色 SVG 五角星
|
||
- 满星/半星：彩色 SVG 五角星（通过 `clip-path` 实现半星）
|
||
- 小程序建议使用 TDesign `<t-rate>` 组件替代
|