埋点产品交互方案设计

设计原则：一切皆 ChartConfig。预设模板、AI 对话、异常预警、分享链接——四个入口产出同一份 JSON，走同一条渲染管道。这就是”不臃肿”的秘诀。

一、产品愿景与用户

1.1 一句话定位

让产品经理用自然语言问数据，系统自动分析并呈现可视化结果。

1.2 目标用户

角色 痛点 使用方式
产品经理 不懂 SQL，不会配置分析参数，每次分析都找开发 自然语言对话，AI 翻译意图
运营 需要定期看数据，但每次都重复同样的操作 固定看板 + 一键导出报告
研发负责人 需要快速了解产品数据全貌 预设看板，一页概览
老板 只关心结论，不关心过程 分享链接 / 静态报告

1.3 用户故事

编号 故事 优先级
US-1 作为产品经理，我打开页面就能看到常用指标，不需要每次手动配置 P0
US-2 作为产品经理，我可以用大白话描述需求（”上周各渠道的访问量对比”），系统帮我生成图表 P0
US-3 作为产品经理，AI 生成的分析参数我可以在确认前修改，防止理解偏差 P0
US-4 作为产品经理，我可以把 AI 对话中生成的图表”钉”到看板上，下次打开还在 P1
US-5 作为运营，我每天早上收到企微消息，告诉我昨天数据有没有异常 P1
US-6 作为运营，我可以把分析结论一键导出为 HTML 报告发给老板 P1
US-7 作为产品经理，我可以把分析结果分享链接发给同事，对方打开就能看到同样的图表 P2
US-8 作为产品经理，我可以继续上次的分析会话，而不是从头开始 P2

二、核心设计：一切皆 ChartConfig

2.1 数据结构

整个系统的唯一流通数据格式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "id": "uuid",
  "title": "首页浏览 → 按钮点击 转化漏斗",
  "chartType": "funnel",
  "apiEndpoint": "/analytics/funnel",
  "apiParams": {
    "steps": ["page_view", "click_btn"],
    "startTime": "2026-09-01 00:00:00",
    "endTime": "2026-09-30 23:59:59",
    "windowMinutes": 30
  },
  "options": {
    "showTable": true,
    "height": 400
  },
  "source": "preset",
  "createdAt": "2026-09-03T10:00:00"
}

2.2 图表类型枚举

类型 说明 对应 API
funnel 漏斗图，展示逐步转化率 /analytics/funnel
trend 趋势折线图，按天展示变化 /analytics/range-times-count / range-people-count
bar 柱状图，维度对比排名 /analytics/dimension
pie 饼图，占比分布 /analytics/dimension
table 数据表格，支持排序和分页 任意 API
retention 留存热力图，N 日留存矩阵 /analytics/retention
metric_card 指标卡，大数字 + 环比变化 /analytics/times-count + people-count

2.3 四入口 → 一管道

1
2
3
4
5
6
7
8
9
┌──────────────┐
│ 预设模板 (L1) │──┐
├──────────────┤  │
│ AI 对话 (L2)  │──┼──→ ChartConfig ──→ ChartRenderer ──→ 图表
├──────────────┤  │
│ 异常预警 (L3) │──┤
├──────────────┤  │
│ 分享链接 (L4) │──┘
└──────────────┘

关键设计决策：ChartRenderer 不关心 ChartConfig 的来源。无论它是预设的、AI 生成的、还是告警触发的，渲染逻辑完全相同。这是整个系统不臃肿的根本原因。

三、页面设计

3.1 整体布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
┌──────────────────────────────────────────────────────────┐
│  顶部导航栏                                                │
│  [Logo] AI 智能分析工作台              [🔔 3] [头像 ▼]     │
├──────────────────────────────────────────────────────────┤
│                                                          │
│  ┌──────────────────────┬───────────────────────────────┐│
│  │                      │                               ││
│  │    AI 对话面板        │     数据看板                    ││
│  │    (ChatPanel)       │     (DashboardGrid)            ││
│  │                      │                               ││
│  │  ┌──────────────────┐│  ┌─────────┐ ┌─────────────┐ ││
│  │  │ 🤖 有什么可以帮  ││  │ 指标卡1  │ │  指标卡2    │ ││
│  │  │   助你的？       ││  │ 12,855  │ │  3,421     │ ││
│  │  └──────────────────┘│  │ 总访问量 │ │  总人数     │ ││
│  │                      │  └─────────┘ └─────────────┘ ││
│  │  ┌──────────────────┐│                               ││
│  │  │ 👤 帮我看看9月  ││  ┌─────────────────────────┐ ││
│  │  │   首页各渠道的  ││  │   📊 事件趋势（7天）     │ ││
│  │  │   访问量        ││  │   ╱╲   ╱╲              │ ││
│  │  └──────────────────┘│  │  ╱  ╲_╱  ╲___          │ ││
│  │                      │  └─────────────────────────┘ ││
│  │  ┌──────────────────┐│                               ││
│  │  │ 🤖 我理解你要查  ││  ┌──────────┐ ┌───────────┐ ││
│  │  │ 询 9月 page_view││  │ 📊 渠道   │ │ 📊 漏斗   │ ││
│  │  │ 按渠道分组的访  ││  │   分布    │ │   分析    │ ││
│  │  │ 问量：          ││  │  🟡 h5   │ │ 100%→85% │ ││
│  │  │ · 事件:page_view││  │  🔵 mp   │ │     →60% │ ││
│  │  │ · 时间:9月1-30日││  │  🟢 web  │ │          │ ││
│  │  │ · 分组:渠道来源 ││  └──────────┘ └───────────┘ ││
│  │  │ · 指标:总次数   ││                               ││
│  │  │                 ││  [添加图表] [导出报告]         ││
│  │  │ [确认执行][修改]││                               ││
│  │  └──────────────────┘│                               ││
│  │                      │                               ││
│  │  ┌──────────────────┐│                               ││
│  │  │      📊 饼图     ││                               ││
│  │  │  [📌] [🔗] [📥] ││                               ││
│  │  └──────────────────┘│                               ││
│  │                      │                               ││
│  ├──────────────────────┤                               ││
│  │  [输入你想分析的...]  │                               ││
│  │                  [➤] │                               ││
│  └──────────────────────┴───────────────────────────────┘│
│                                                          │
└──────────────────────────────────────────────────────────┘

3.2 页面状态

3.2.1 首次访问（无历史数据）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
┌──────────────────────┬───────────────────────────────┐
│                      │                               │
│    AI 对话面板        │     数据看板                    │
│                      │                               │
│  ┌──────────────────┐│  ┌─────────────────────────┐ │
│  │ 🤖 你好！我是   ││  │                         │ │
│  │    AI 分析助手  ││  │   📊 欢迎使用            │ │
│  │                 ││  │   AI 智能分析工作台       │ │
│  │ 你可以这样问我： ││  │                         │ │
│  │                 ││  │   点击左侧对话框         │ │
│  │ "帮我看看过去   ││  │   开始你的第一次分析     │ │
│  │  7天的访问量"   ││  │                         │ │
│  │                 ││  │   或者                    │ │
│  │ "对比各渠道的   ││  │                         │ │
│  │  转化率"        ││  │   [加载预设看板]         │ │
│  │                 ││  │                         │ │
│  │ "查看9月的事件  ││  │                         │ │
│  │  排行"          ││  └─────────────────────────┘ │
│  └──────────────────┘│                               │
└──────────────────────┴───────────────────────────────┘

3.2.2 正常使用状态

  • 左侧：对话历史 + 输入框
  • 右侧：已固定的图表网格（上次保存的布局）
  • 对话中生成的图表可以用 “📌 固定到看板” 添加到右侧
  • 右侧图表可以拖拽排序、删除、单独刷新

3.2.3 AI 思考中

1
2
3
4
┌──────────────────┐
│ 🤖 正在分析...   │
│    ⣾ 思考中      │  ← 加载动画
└──────────────────┘

3.2.4 参数确认状态

1
2
3
4
5
6
7
8
9
10
┌──────────────────────────────┐
│ 🤖 我理解你要查询：          │
│                              │
│  事件: page_view     [✏️]   │  ← 每个字段可点击修改
│  时间: 2026-09-01 ~ 09-30    │
│  分组: 渠道来源       [✏️]   │
│  指标: 总次数         [✏️]   │
│                              │
│  [确认执行]  [取消]          │
└──────────────────────────────┘

3.2.5 错误状态

1
2
3
4
5
6
7
┌──────────────────────────────┐
│ 🤖 抱歉，查询出错了          │
│                              │
│  原因：时间范围不能超过 90 天 │
│                              │
│  [重新输入]  [修改参数]      │
└──────────────────────────────┘

3.2.6 空数据状态

1
2
3
4
5
6
7
8
9
10
┌──────────────────────────────┐
│ 🤖 查询完成，但该时间段内    │
│    没有匹配的数据            │
│                              │
│  建议：                      │
│  · 检查时间范围是否正确      │
│  · 检查事件名是否存在        │
│                              │
│  [修改参数重新查询]          │
└──────────────────────────────┘

四、交互流程

4.1 预设看板流程（L1）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
打开页面
    │
    ├── 首次访问 → 空状态 → 点击 [加载预设看板]
    │                              │
    └── 回访用户 → 加载上次保存的布局 ←──┘
                        │
                        ▼
              渲染 6 个预设图表（并排显示）
              （每个图表独立加载，loading 状态独立）
                        │
                        ▼
              用户可拖拽排序、删除、刷新单个图表
              用户可点击 [添加图表] 从预设库中选择更多
              布局自动保存到 localStorage

4.2 AI 对话流程（L2）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
用户在对话面板输入自然语言
    │  例："帮我看看 9 月首页各渠道的访问量"
    ▼
前端发送 POST /ai/chat { message: "..." }
    │
    ▼
后端调用 LLM API 解析意图
    │  System Prompt: 你是一个数据分析助手，可用 API 有...
    │  LLM 返回：{ intent, apiEndpoint, apiParams, confirmMessage }
    │
    ▼
后端风控检查
    │  · 时间范围 ≤ 90 天？
    │  · API 在白名单中？
    │  · 参数值合法？
    │  · 频率限制？
    │
    ├── 不通过 → 返回错误提示，前端展示修改建议
    │
    └── 通过 → 返回 AiChatResult (ChartConfig + confirmMessage)
                    │
                    ▼
            前端展示参数确认卡片
                    │
            ┌───────┼───────┐
            │       │       │
        [确认]  [修改]   [取消]
            │       │       │
            ▼       ▼       ▼
    POST /ai/execute  修改参数后  放弃本次查询
    { chartConfig }   重新确认
            │
            ▼
    后端调用对应的分析 API，返回数据
            │
            ▼
    前端在对话中内联渲染图表
            │
            ├── [📌 固定到看板] → 添加到右侧 DashboardGrid
            ├── [🔗 分享] → 生成分享链接
            └── [📥 导出] → 导出 PNG/HTML

4.3 异常预警流程（L3）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
定时任务（每天 9:00 触发）
    │
    ▼
后端遍历所有监控规则
    │  每条规则 = ChartConfig + 阈值 + 对比窗口
    │
    ▼
执行每条规则的 ChartConfig，获取当日数据
    │
    ▼
计算 当日值 vs 过去 N 天均值
    │
    ├── 正常 → 跳过
    │
    └── 超过阈值 → 生成告警记录
            │
            ├── 存入数据库（前端轮询展示）
            │
            └── 推送企微消息
                  │
                  ▼
            企微机器人消息格式：
            ┌──────────────────────────────┐
            │ ⚠️ 数据异常预警               │
            │                              │
            │ page_view 日访问量            │
            │ 昨日：850 次                  │
            │ 近 7 日均值：1,200 次          │
            │ 下降：29.2%                   │
            │                              │
            │ 建议：查看渠道是否有异常       │
            │                              │
            │ [查看详情] ← 跳转到分析页面    │
            └──────────────────────────────┘

4.4 分享与导出流程（L4）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
用户点击 [🔗 分享]
    │
    ▼
前端发送 POST /analytics/report/share
    { chartConfig, data }
    │
    ▼
后端生成唯一 share_token，存入 MySQL
    │
    ▼
返回分享链接：/analytics/report/abc123
    │
    ▼
用户复制链接发给同事
    │
    ▼
同事打开链接 → 只读报告页
    · 展示图表 + 数据表格
    · 无 AI 功能，无编辑功能
    · 底部显示：生成时间 | 过期时间（7 天）
    · 支持导出为 HTML / PNG

═════════════════════════════════

用户点击 [📥 导出]
    │
    ├── 导出看板 → 所有图表打包为一个 HTML 文件
    │     · 内联 CSS + ECharts base64 截图
    │     · 包含数据表格
    │     · 不依赖外部资源，可离线打开
    │
    └── 导出单个图表 → PNG 图片（html2canvas 截图）

五、后端 API 设计

5.1 已有 API（Phase 1-3，8 个）

API 方法 用途
/analytics/report POST 单条上报
/analytics/reportBatch POST 批量上报
/analytics/times-count POST 查询总次数
/analytics/range-times-count POST 按天统计总次数
/analytics/people-count POST 查询总人数
/analytics/range-people-count POST 按天统计总人数
/analytics/funnel POST 漏斗分析
/analytics/retention POST 留存分析
/analytics/monthly-aggregate POST 触发月度聚合
/analytics/monthly-stats POST 查询月度统计
/analytics/dimension POST EAV 维度聚合

5.2 Phase 4 新增 API

5.2.1 AI 对话 - 意图解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
POST /ai/chat

请求：
{
  "message": "帮我看看9月首页各渠道的访问量",
  "history": [                          // 可选，多轮对话上下文
    { "role": "user", "content": "..." },
    { "role": "assistant", "content": "..." }
  ]
}

响应（成功）：
{
  "code": 10000,
  "data": {
    "chartConfig": {
      "id": "uuid",
      "title": "9月 page_view 按渠道来源分布",
      "chartType": "pie",
      "apiEndpoint": "/analytics/dimension",
      "apiParams": {
        "event": "page_view",
        "startTime": "2026-09-01 00:00:00",
        "endTime": "2026-09-30 23:59:59",
        "groupByFields": ["channelSource"],
        "metric": "count"
      },
      "source": "ai"
    },
    "confirmMessage": "我理解你要查询 9 月份 page_view 事件按渠道来源分组的访问量，是这样吗？",
    "needConfirm": true
  }
}

响应（风控拦截）：
{
  "code": 10003,
  "message": "时间范围不能超过 90 天，请缩小范围后重试"
}

5.2.2 AI 对话 - 执行查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
POST /ai/execute

请求：
{
  "chartConfig": { ... }   // 用户确认（或修改后）的 ChartConfig
}

响应：
{
  "code": 10000,
  "data": {
    "chartConfig": { ... },
    "data": { ... },        // 后端 API 返回的原始数据
    "executedAt": "2026-09-03T10:05:00"
  }
}

5.2.3 分享报告

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
POST /analytics/report/share

请求：
{
  "chartConfig": { ... },
  "data": { ... }          // 图表数据快照
}

响应：
{
  "code": 10000,
  "data": {
    "shareUrl": "/analytics/report/abc123",
    "expiresAt": "2026-09-10T10:00:00"   // 7 天后过期
  }
}

GET /analytics/report/{token}

响应：
{
  "code": 10000,
  "data": {
    "chartConfig": { ... },
    "data": { ... },
    "createdAt": "2026-09-03T10:00:00",
    "expiresAt": "2026-09-10T10:00:00"
  }
}

5.2.4 预设配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
GET /analytics/presets

响应：
{
  "code": 10000,
  "data": {
    "presets": [
      {
        "id": "preset-001",
        "category": "趋势分析",
        "title": "事件总览（过去 7 天）",
        "chartConfig": { ... }
      },
      ...
    ]
  }
}

5.2.5 告警查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
GET /analytics/alerts?limit=10

响应：
{
  "code": 10000,
  "data": {
    "alerts": [
      {
        "id": "alert-001",
        "ruleName": "page_view 日访问量骤降",
        "currentValue": 850,
        "baselineValue": 1200,
        "changeRate": -0.29,
        "severity": "warning",       // warning / critical
        "triggeredAt": "2026-09-03T09:00:00",
        "suggestion": "建议查看渠道是否有异常",
        "chartConfig": { ... }       // 点击查看详情时自动加载
      }
    ]
  }
}

六、LLM 集成策略

6.1 设计原则

接口隔离，灵活替换。通过 LlmService 接口解耦，当前使用外部大模型 API Key 方式，后续可无缝切换到 FastGPT 或其他模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
┌──────────────────────┐
│  AiAnalysisService   │  ← 业务层，不关心 LLM 具体实现
└──────────┬───────────┘
           │ 依赖接口
┌──────────▼───────────┐
│  LlmService 接口      │  ← chat(String message, List<Message> history) → LlmResult
└──────────┬───────────┘
           │
     ┌─────┴─────┐
     │           │
┌────▼─────┐ ┌───▼──────┐
│OpenAiImpl│ │FastGptImpl│  ← 各自实现，通过配置切换
│(API Key) │ │(内网API)  │
└──────────┘ └──────────┘

6.2 配置项（Nacos / application.yml）

1
2
3
4
5
6
7
8
9
10
11
12
analytics:
  llm:
    provider: openai           # openai / fastgpt / custom
    openai:
      api-key: ${LLM_API_KEY}
      endpoint: https://api.openai.com/v1/chat/completions
      model: gpt-4o-mini
      timeout: 15000
    fastgpt:
      endpoint: http://fastgpt.internal/api/v1/chat
      api-key: ${FASTGPT_API_KEY}
      timeout: 15000

6.3 System Prompt 设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
你是一个埋点数据分析助手。你可以使用以下 API 查询数据：

## 可用 API

### funnel - 漏斗分析
用途：分析用户按顺序完成多个步骤的转化率
参数：
  - steps: string[]（必填，事件名数组，按顺序）
  - startTime: string（必填，格式 yyyy-MM-dd HH:mm:ss）
  - endTime: string（必填，格式 yyyy-MM-dd HH:mm:ss）
  - windowMinutes: int（可选，步骤间时间窗口分钟数，默认 30）

### retention - 留存分析
用途：计算 N 日留存率
参数：
  - initialEvent: string（必填，初始事件名）
  - returnEvent: string（必填，回访事件名）
  - startDate: string（必填，格式 yyyy-MM-dd）
  - retentionDays: int[]（必填，留存天数列表，如 [1,3,7,14,30]）

### dimension - 维度聚合
用途：按任意维度组合分组统计
参数：
  - event: string（必填，事件名）
  - startTime: string（必填，格式 yyyy-MM-dd HH:mm:ss）
  - endTime: string（必填，格式 yyyy-MM-dd HH:mm:ss）
  - groupByFields: string[]（必填，分组字段列表）
    可用字段：event, env, channelSource, channelApp, channelCode, sourcePage, sourceFeature
  - metric: "count" | "people"（可选，默认 count）
  - filters: object（可选，额外筛选条件，如 {"channelSource": "web"}）

### times-count - 查询总次数
参数：eventNameEn, startTime, endTime

### people-count - 查询总人数
参数：eventNameEn, startTime, endTime

### range-times-count - 按天统计次数
参数：eventNameEn, startTime, endTime

### range-people-count - 按天统计人数
参数：eventNameEn, startTime, endTime

### monthly-stats - 月度统计
参数：month（格式 yyyy-MM）

## 输出格式

你必须返回合法的 JSON，格式如下：
{
  "intent": "dimension_analysis",
  "chartType": "pie|bar|trend|funnel|retention|table|metric_card",
  "apiEndpoint": "/analytics/xxx",
  "apiParams": { ... },
  "title": "图表标题（简短描述）",
  "confirmMessage": "用中文向用户确认：你理解他要查询什么，列出了哪些参数"
}

## 规则

1. 时间格式必须是 yyyy-MM-dd HH:mm:ss
2. 如果用户没有指定时间范围，默认为最近 7 天
3. 如果用户没有指定事件名，尽可能从上下文推断（如"首页"→page_view）
4. 如果用户没有指定图表类型，根据数据特征推荐：
   - 按时间统计 → trend（折线图）
   - 维度对比 → bar（柱状图）
   - 占比分布 → pie（饼图）
   - 转化分析 → funnel（漏斗图）
   - 留存分析 → retention（热力图）
5. 如果用户说的不够明确，在 confirmMessage 中追问
6. chartType 的推荐在 confirmMessage 中说明，让用户确认

七、风控策略

7.1 拦截规则

层级 规则 触发条件 处理
时间范围 最大跨度 90 天 startTime ~ endTime > 90 天 拒绝，提示缩小范围
时间范围 必须包含起止时间 缺少 startTime 或 endTime 默认最近 7 天
API 白名单 仅允许调用 8 个分析 API LLM 返回了非白名单 API 拒绝，记录日志
参数白名单 groupByFields 仅允许 7 个字段 字段不在白名单 拒绝，提示可用字段
参数白名单 metric 仅允许 count/people 其他值 拒绝，提示可用指标
频率限制 同一用户 1 分钟 10 次 超限 拒绝，提示稍后重试
敏感数据 distinct_id 精确查询 检测到精确用户查询 二次确认弹窗

7.2 写入操作隔离

AI 对话路由只暴露查询 API。写入接口（/analytics/report、/analytics/reportBatch）不在 AI 可用 API 列表中，LLM 无法生成写入请求。即使 LLM 被 prompt injection 攻击，后端 API 白名单也会拦截。

八、企微通知设计

8.1 触发时机

场景 触发条件 频率
日访问量异常 当日值 vs 7 日均值，波动 > 30% 每天 9:00
转化率骤降 漏斗最后一步转化率 < 历史均值 50% 每天 9:00
数据归零 某事件当日数据为 0 每天 9:00

8.2 消息格式

1
2
3
4
5
6
7
8
9
10
11
12
13
⚠️ 数据异常预警 — 2026-09-03

page_view 日访问量下降
  昨日：850 次
  近 7 日均值：1,200 次
  下降幅度：29.2%

click_btn 转化率下降
  昨日：12.5%
  近 7 日均值：28.3%
  下降幅度：55.8%

[查看详情] → 跳转到分析页面

8.3 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
analytics:
  alert:
    wework:
      enabled: true
      webhook-url: ${WEWORK_WEBHOOK_URL}   # 企微机器人 Webhook
    rules:
      - name: "page_view 日访问量"
        chartConfig: { ... }
        checkType: drop
        threshold: 0.3
        compareWindow: 7
      - name: "漏斗转化率"
        chartConfig: { ... }
        checkType: drop
        threshold: 0.5
        compareWindow: 7

九、前端组件树（供独立前端项目参考）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
App.vue
└── AnalyticsPortal.vue              # 页面入口，路由 /analytics
    ├── TopNavbar.vue                # 顶部导航（Logo + 告警角标 + 用户头像）
    │   └── AlertBadge.vue           # 告警铃铛 + 数字角标
    ├── ChatPanel.vue                # 左侧：AI 对话面板
    │   ├── ChatMessage.vue          # 单条消息（用户/AI）
    │   │   ├── ConfigConfirmCard.vue # AI 回复中的参数确认卡片
    │   │   └── ChartRenderer.vue    # AI 回复中内联的图表
    │   └── ChatInput.vue            # 底部输入框
    └── DashboardGrid.vue            # 右侧：看板网格
        ├── DashboardCard.vue        # 单个图表卡片（标题栏 + 操作按钮）
        │   └── ChartRenderer.vue    # ★ 核心：统一图表渲染器
        │       ├── FunnelChart.vue   # 漏斗图（ECharts funnel）
        │       ├── TrendChart.vue    # 趋势折线图（ECharts line）
        │       ├── BarChart.vue      # 柱状图（ECharts bar）
        │       ├── PieChart.vue      # 饼图（ECharts pie）
        │       ├── TableChart.vue    # 数据表格
        │       ├── RetentionChart.vue # 留存热力图
        │       └── MetricCard.vue    # 指标卡
        └── AddChartButton.vue       # 添加图表按钮

十、实施阶段

阶段 内容 工时 依赖
4.1 后端：ChartConfig DTO + 预设配置 API 1 天 —
4.1 前端：ChartRenderer + 6 个子图表 + 预设看板 2-3 天 4.1 后端
4.2 后端：LlmService 接口 + OpenAiImpl + AiAnalysisService 2 天 4.1 后端
4.2 后端：AiAnalysisController + 风控 1 天 4.2 后端
4.2 前端：ChatPanel + ConfigConfirmCard 1-2 天 4.1 前端
4.3 后端：异常检测定时任务 + 企微推送 1 天 4.1 后端
4.3 前端：AlertBadge 组件 0.5 天 4.1 前端
4.4 后端：分享报告 API 0.5 天 4.1 后端
4.4 前端：分享页 + 导出功能 0.5-1 天 4.1 前端
合计 9-13 天

最小可行版本（MVP）

如果时间紧张，只做 4.1 + 4.2 的核心功能（不含多轮对话上下文），约 5-7 天 即可上线一个可用版本。

十一、风险与缓解

风险 概率 影响 缓解
LLM 解析不准确，生成错误的 ChartConfig 中 中 强制展示参数确认卡片，用户可修改
LLM 响应慢（>5s），用户体验差 中 高 后续加 SSE 流式返回；当前先设 15s 超时 + loading 动画
用户不知道怎么用 AI 对话 高 中 提供示例问题引导；4.1 预设看板作为保底方案
外部 LLM API 不稳定 低 高 预设看板不依赖 LLM，可独立使用
图表数据量大导致渲染卡顿 低 低 ECharts 原生支持大数据量；表格分页
架构心得
#架构设计
埋点产品交互方案设计
https://blog.baoyanfudao.com/tech/埋点前端交互设计/
作者
XuYafei
发布于
2026年8月14日
许可协议