fix(eslint): reduce warnings in GitHub Actions deployment
- Disable formatting rules (handled by Prettier) - Relaxed strict Vue/JS rules for demo code compatibility - Fix syntax errors in ApiPlayground and VoiceCloningDemo - Fix duplicate else-if condition in ApiPlayground - Fix Promise executor async pattern in AutoregressiveAudioDemo - Add TypeScript file support to ESLint config Warnings reduced from 295 to 251 problems. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
sanbuphy
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="data-collection-demo">
|
||||
<div class="header">
|
||||
<div class="title">数据采集方案</div>
|
||||
<div class="subtitle">客户端、服务端、CDN三种采集方式对比</div>
|
||||
<div class="title">
|
||||
数据采集方案
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
客户端、服务端、CDN三种采集方式对比
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collection-methods">
|
||||
@@ -14,32 +18,62 @@
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
class="method-card"
|
||||
@click="selectedMethod = method.id"
|
||||
:class="{ active: selectedMethod === method.id }"
|
||||
@click="selectedMethod = method.id"
|
||||
>
|
||||
<div class="method-icon">{{ method.icon }}</div>
|
||||
<div class="method-name">{{ method.name }}</div>
|
||||
<div class="method-desc">{{ method.desc }}</div>
|
||||
<div class="method-icon">
|
||||
{{ method.icon }}
|
||||
</div>
|
||||
<div class="method-name">
|
||||
{{ method.name }}
|
||||
</div>
|
||||
<div class="method-desc">
|
||||
{{ method.desc }}
|
||||
</div>
|
||||
|
||||
<div class="method-details" v-if="selectedMethod === method.id">
|
||||
<div
|
||||
v-if="selectedMethod === method.id"
|
||||
class="method-details"
|
||||
>
|
||||
<div class="detail-section">
|
||||
<div class="section-title">✅ 优点</div>
|
||||
<div class="section-title">
|
||||
✅ 优点
|
||||
</div>
|
||||
<ul class="detail-list">
|
||||
<li v-for="(pro, i) in method.pros" :key="i">{{ pro }}</li>
|
||||
<li
|
||||
v-for="(pro, i) in method.pros"
|
||||
:key="i"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-title">❌ 缺点</div>
|
||||
<div class="section-title">
|
||||
❌ 缺点
|
||||
</div>
|
||||
<ul class="detail-list">
|
||||
<li v-for="(con, i) in method.cons" :key="i">{{ con }}</li>
|
||||
<li
|
||||
v-for="(con, i) in method.cons"
|
||||
:key="i"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-title">🎯 适用场景</div>
|
||||
<div class="section-title">
|
||||
🎯 适用场景
|
||||
</div>
|
||||
<ul class="detail-list">
|
||||
<li v-for="(use, i) in method.useCases" :key="i">{{ use }}</li>
|
||||
<li
|
||||
v-for="(use, i) in method.useCases"
|
||||
:key="i"
|
||||
>
|
||||
{{ use }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,12 +81,17 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="table-title">方案对比</div>
|
||||
<div class="table-title">
|
||||
方案对比
|
||||
</div>
|
||||
<table class="comparison">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>对比维度</th>
|
||||
<th v-for="method in methods" :key="method.id">
|
||||
<th
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
>
|
||||
{{ method.name }}
|
||||
</th>
|
||||
</tr>
|
||||
@@ -60,25 +99,37 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>数据准确性</td>
|
||||
<td v-for="method in methods" :key="method.id">
|
||||
<td
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
>
|
||||
{{ method.accuracy }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>实时性</td>
|
||||
<td v-for="method in methods" :key="method.id">
|
||||
<td
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
>
|
||||
{{ method.realtime }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>开发成本</td>
|
||||
<td v-for="method in methods" :key="method.id">
|
||||
<td
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
>
|
||||
{{ method.cost }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>维护成本</td>
|
||||
<td v-for="method in methods" :key="method.id">
|
||||
<td
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
>
|
||||
{{ method.maintenance }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
+231
-78
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="data-model-design-demo">
|
||||
<div class="header">
|
||||
<div class="title">数据模型设计</div>
|
||||
<div class="subtitle">埋点数据的核心三要素：事件、用户、会话</div>
|
||||
<div class="title">
|
||||
数据模型设计
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
埋点数据的核心三要素：事件、用户、会话
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="model-tabs">
|
||||
@@ -23,11 +27,18 @@
|
||||
|
||||
<div class="model-content">
|
||||
<!-- 事件模型 -->
|
||||
<div v-if="selectedModel === 'event'" class="model-detail">
|
||||
<div
|
||||
v-if="selectedModel === 'event'"
|
||||
class="model-detail"
|
||||
>
|
||||
<div class="model-intro">
|
||||
<div class="intro-icon">📊</div>
|
||||
<div class="intro-icon">
|
||||
📊
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-title">事件模型 (Event Model)</div>
|
||||
<div class="intro-title">
|
||||
事件模型 (Event Model)
|
||||
</div>
|
||||
<div class="intro-desc">
|
||||
一个事件 = 用户的一次行为动作，是埋点系统中最基本的数据单元
|
||||
</div>
|
||||
@@ -35,10 +46,14 @@
|
||||
</div>
|
||||
|
||||
<div class="event-naming">
|
||||
<div class="section-title">命名规范</div>
|
||||
<div class="section-title">
|
||||
命名规范
|
||||
</div>
|
||||
<div class="naming-rules">
|
||||
<div class="rule-item good">
|
||||
<div class="rule-label">✅ 好的命名</div>
|
||||
<div class="rule-label">
|
||||
✅ 好的命名
|
||||
</div>
|
||||
<div class="rule-examples">
|
||||
<code>click_button</code>
|
||||
<code>view_page</code>
|
||||
@@ -47,7 +62,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="rule-item bad">
|
||||
<div class="rule-label">❌ 不好的命名</div>
|
||||
<div class="rule-label">
|
||||
❌ 不好的命名
|
||||
</div>
|
||||
<div class="rule-examples">
|
||||
<code>button_click</code>
|
||||
<code>page_view</code>
|
||||
@@ -56,11 +73,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="naming-tip">💡 原则：动词在前，名词在后，简洁明确</div>
|
||||
<div class="naming-tip">
|
||||
💡 原则：动词在前，名词在后，简洁明确
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event-structure">
|
||||
<div class="section-title">事件数据结构</div>
|
||||
<div class="section-title">
|
||||
事件数据结构
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<pre><code>{
|
||||
<span class="key">"event"</span>: <span class="string">"click_button"</span>,
|
||||
@@ -86,36 +107,60 @@
|
||||
</div>
|
||||
|
||||
<div class="event-best-practices">
|
||||
<div class="section-title">最佳实践</div>
|
||||
<div class="section-title">
|
||||
最佳实践
|
||||
</div>
|
||||
<div class="practices-grid">
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">🎯</div>
|
||||
<div class="practice-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">明确事件目标</div>
|
||||
<div class="practice-title">
|
||||
明确事件目标
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
每个事件都应有明确的业务分析目标
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">📝</div>
|
||||
<div class="practice-icon">
|
||||
📝
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">属性完整丰富</div>
|
||||
<div class="practice-desc">包含所有可能影响业务决策的维度</div>
|
||||
<div class="practice-title">
|
||||
属性完整丰富
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
包含所有可能影响业务决策的维度
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">🔄</div>
|
||||
<div class="practice-icon">
|
||||
🔄
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">保持命名一致</div>
|
||||
<div class="practice-desc">同一类型事件使用统一的命名规范</div>
|
||||
<div class="practice-title">
|
||||
保持命名一致
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
同一类型事件使用统一的命名规范
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="practice-item">
|
||||
<div class="practice-icon">🚫</div>
|
||||
<div class="practice-icon">
|
||||
🚫
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-title">避免过度采集</div>
|
||||
<div class="practice-desc">只采集必要数据，减少隐私风险</div>
|
||||
<div class="practice-title">
|
||||
避免过度采集
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
只采集必要数据，减少隐私风险
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -123,11 +168,18 @@
|
||||
</div>
|
||||
|
||||
<!-- 用户模型 -->
|
||||
<div v-if="selectedModel === 'user'" class="model-detail">
|
||||
<div
|
||||
v-if="selectedModel === 'user'"
|
||||
class="model-detail"
|
||||
>
|
||||
<div class="model-intro">
|
||||
<div class="intro-icon">👤</div>
|
||||
<div class="intro-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-title">用户模型 (User Model)</div>
|
||||
<div class="intro-title">
|
||||
用户模型 (User Model)
|
||||
</div>
|
||||
<div class="intro-desc">
|
||||
跨设备关联用户身份，实现用户全生命周期管理
|
||||
</div>
|
||||
@@ -135,12 +187,18 @@
|
||||
</div>
|
||||
|
||||
<div class="user-identity">
|
||||
<div class="section-title">身份识别体系</div>
|
||||
<div class="section-title">
|
||||
身份识别体系
|
||||
</div>
|
||||
<div class="identity-types">
|
||||
<div class="identity-card primary">
|
||||
<div class="identity-header">
|
||||
<div class="identity-icon">🆔</div>
|
||||
<div class="identity-name">user_id</div>
|
||||
<div class="identity-icon">
|
||||
🆔
|
||||
</div>
|
||||
<div class="identity-name">
|
||||
user_id
|
||||
</div>
|
||||
</div>
|
||||
<div class="identity-info">
|
||||
<div class="info-row">
|
||||
@@ -160,8 +218,12 @@
|
||||
|
||||
<div class="identity-card secondary">
|
||||
<div class="identity-header">
|
||||
<div class="identity-icon">📱</div>
|
||||
<div class="identity-name">device_id</div>
|
||||
<div class="identity-icon">
|
||||
📱
|
||||
</div>
|
||||
<div class="identity-name">
|
||||
device_id
|
||||
</div>
|
||||
</div>
|
||||
<div class="identity-info">
|
||||
<div class="info-row">
|
||||
@@ -181,8 +243,12 @@
|
||||
|
||||
<div class="identity-card tertiary">
|
||||
<div class="identity-header">
|
||||
<div class="identity-icon">🌐</div>
|
||||
<div class="identity-name">session_id</div>
|
||||
<div class="identity-icon">
|
||||
🌐
|
||||
</div>
|
||||
<div class="identity-name">
|
||||
session_id
|
||||
</div>
|
||||
</div>
|
||||
<div class="identity-info">
|
||||
<div class="info-row">
|
||||
@@ -203,28 +269,40 @@
|
||||
</div>
|
||||
|
||||
<div class="id-mapping">
|
||||
<div class="section-title">ID Mapping（身份打通）</div>
|
||||
<div class="section-title">
|
||||
ID Mapping（身份打通）
|
||||
</div>
|
||||
<div class="mapping-flow">
|
||||
<div class="mapping-step">
|
||||
<div class="step-title">注册前（匿名）</div>
|
||||
<div class="step-title">
|
||||
注册前（匿名）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
<code>device_id: "device_123"</code><br />
|
||||
<code>device_id: "device_123"</code><br>
|
||||
<code>user_id: null</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mapping-arrow">→</div>
|
||||
<div class="mapping-arrow">
|
||||
→
|
||||
</div>
|
||||
<div class="mapping-step">
|
||||
<div class="step-title">注册后（登录）</div>
|
||||
<div class="step-title">
|
||||
注册后（登录）
|
||||
</div>
|
||||
<div class="step-code">
|
||||
<code>device_id: "device_123"</code><br />
|
||||
<code>device_id: "device_123"</code><br>
|
||||
<code>user_id: "user_456"</code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mapping-arrow">→</div>
|
||||
<div class="mapping-arrow">
|
||||
→
|
||||
</div>
|
||||
<div class="mapping-step">
|
||||
<div class="step-title">数据分析</div>
|
||||
<div class="step-title">
|
||||
数据分析
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
通过 device_id 关联<br />
|
||||
通过 device_id 关联<br>
|
||||
用户注册前后行为
|
||||
</div>
|
||||
</div>
|
||||
@@ -232,10 +310,14 @@
|
||||
</div>
|
||||
|
||||
<div class="user-profile">
|
||||
<div class="section-title">用户画像维度</div>
|
||||
<div class="section-title">
|
||||
用户画像维度
|
||||
</div>
|
||||
<div class="profile-dimensions">
|
||||
<div class="dimension-group">
|
||||
<div class="group-title">基础属性</div>
|
||||
<div class="group-title">
|
||||
基础属性
|
||||
</div>
|
||||
<div class="dimension-list">
|
||||
<span class="dimension-tag">性别</span>
|
||||
<span class="dimension-tag">年龄</span>
|
||||
@@ -244,7 +326,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="dimension-group">
|
||||
<div class="group-title">行为特征</div>
|
||||
<div class="group-title">
|
||||
行为特征
|
||||
</div>
|
||||
<div class="dimension-list">
|
||||
<span class="dimension-tag">活跃度</span>
|
||||
<span class="dimension-tag">偏好</span>
|
||||
@@ -253,7 +337,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="dimension-group">
|
||||
<div class="group-title">设备信息</div>
|
||||
<div class="group-title">
|
||||
设备信息
|
||||
</div>
|
||||
<div class="dimension-list">
|
||||
<span class="dimension-tag">平台</span>
|
||||
<span class="dimension-tag">操作系统</span>
|
||||
@@ -266,11 +352,18 @@
|
||||
</div>
|
||||
|
||||
<!-- 会话模型 -->
|
||||
<div v-if="selectedModel === 'session'" class="model-detail">
|
||||
<div
|
||||
v-if="selectedModel === 'session'"
|
||||
class="model-detail"
|
||||
>
|
||||
<div class="model-intro">
|
||||
<div class="intro-icon">⏱️</div>
|
||||
<div class="intro-icon">
|
||||
⏱️
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-title">会话模型 (Session Model)</div>
|
||||
<div class="intro-title">
|
||||
会话模型 (Session Model)
|
||||
</div>
|
||||
<div class="intro-desc">
|
||||
用户一次连续的使用过程，用于分析用户粘性和转化
|
||||
</div>
|
||||
@@ -278,19 +371,31 @@
|
||||
</div>
|
||||
|
||||
<div class="session-definition">
|
||||
<div class="section-title">会话定义</div>
|
||||
<div class="section-title">
|
||||
会话定义
|
||||
</div>
|
||||
<div class="session-rules">
|
||||
<div class="rule-card web">
|
||||
<div class="rule-icon">🌐</div>
|
||||
<div class="rule-icon">
|
||||
🌐
|
||||
</div>
|
||||
<div class="rule-content">
|
||||
<div class="rule-title">Web 会话</div>
|
||||
<div class="rule-desc">连续浏览，无操作超过 30 分钟则结束</div>
|
||||
<div class="rule-title">
|
||||
Web 会话
|
||||
</div>
|
||||
<div class="rule-desc">
|
||||
连续浏览，无操作超过 30 分钟则结束
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rule-card app">
|
||||
<div class="rule-icon">📱</div>
|
||||
<div class="rule-icon">
|
||||
📱
|
||||
</div>
|
||||
<div class="rule-content">
|
||||
<div class="rule-title">App 会话</div>
|
||||
<div class="rule-title">
|
||||
App 会话
|
||||
</div>
|
||||
<div class="rule-desc">
|
||||
App 从后台回到前台，超过 5 分钟则新会话
|
||||
</div>
|
||||
@@ -300,60 +405,108 @@
|
||||
</div>
|
||||
|
||||
<div class="session-metrics">
|
||||
<div class="section-title">会话关键指标</div>
|
||||
<div class="section-title">
|
||||
会话关键指标
|
||||
</div>
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">📊</div>
|
||||
<div class="metric-name">会话时长</div>
|
||||
<div class="metric-value">8m 32s</div>
|
||||
<div class="metric-desc">用户平均使用时长</div>
|
||||
<div class="metric-icon">
|
||||
📊
|
||||
</div>
|
||||
<div class="metric-name">
|
||||
会话时长
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
8m 32s
|
||||
</div>
|
||||
<div class="metric-desc">
|
||||
用户平均使用时长
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">📄</div>
|
||||
<div class="metric-name">会话深度</div>
|
||||
<div class="metric-value">12.5</div>
|
||||
<div class="metric-desc">平均浏览页面数</div>
|
||||
<div class="metric-icon">
|
||||
📄
|
||||
</div>
|
||||
<div class="metric-name">
|
||||
会话深度
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
12.5
|
||||
</div>
|
||||
<div class="metric-desc">
|
||||
平均浏览页面数
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">🔄</div>
|
||||
<div class="metric-name">会话频率</div>
|
||||
<div class="metric-value">3.2/天</div>
|
||||
<div class="metric-desc">日均打开次数</div>
|
||||
<div class="metric-icon">
|
||||
🔄
|
||||
</div>
|
||||
<div class="metric-name">
|
||||
会话频率
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
3.2/天
|
||||
</div>
|
||||
<div class="metric-desc">
|
||||
日均打开次数
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-icon">💼</div>
|
||||
<div class="metric-name">跳出率</div>
|
||||
<div class="metric-value">35.2%</div>
|
||||
<div class="metric-desc">单页面跳出比例</div>
|
||||
<div class="metric-icon">
|
||||
💼
|
||||
</div>
|
||||
<div class="metric-name">
|
||||
跳出率
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
35.2%
|
||||
</div>
|
||||
<div class="metric-desc">
|
||||
单页面跳出比例
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="session-use-cases">
|
||||
<div class="section-title">典型应用场景</div>
|
||||
<div class="section-title">
|
||||
典型应用场景
|
||||
</div>
|
||||
<div class="use-case-list">
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-number">1</div>
|
||||
<div class="use-case-number">
|
||||
1
|
||||
</div>
|
||||
<div class="use-case-content">
|
||||
<div class="use-case-title">转化漏斗分析</div>
|
||||
<div class="use-case-title">
|
||||
转化漏斗分析
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
分析用户从进入到完成目标的转化路径，识别流失环节
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-number">2</div>
|
||||
<div class="use-case-number">
|
||||
2
|
||||
</div>
|
||||
<div class="use-case-content">
|
||||
<div class="use-case-title">用户粘性分析</div>
|
||||
<div class="use-case-title">
|
||||
用户粘性分析
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
通过会话时长和频次，评估产品吸引力和用户忠诚度
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-case-item">
|
||||
<div class="use-case-number">3</div>
|
||||
<div class="use-case-number">
|
||||
3
|
||||
</div>
|
||||
<div class="use-case-content">
|
||||
<div class="use-case-title">用户分群</div>
|
||||
<div class="use-case-title">
|
||||
用户分群
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
基于会话行为特征，将用户分为高价值、流失风险等群体
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="data-pipeline-demo">
|
||||
<div class="header">
|
||||
<div class="title">数据处理管道</div>
|
||||
<div class="subtitle">从用户行为到数据洞察的完整链路</div>
|
||||
<div class="title">
|
||||
数据处理管道
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
从用户行为到数据洞察的完整链路
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pipeline-container">
|
||||
@@ -21,19 +25,32 @@
|
||||
}"
|
||||
>
|
||||
<div class="step-header">
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-info">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-icon">{{ step.icon }}</div>
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-icon">
|
||||
{{ step.icon }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<div class="step-description">{{ step.description }}</div>
|
||||
<div class="step-description">
|
||||
{{ step.description }}
|
||||
</div>
|
||||
|
||||
<div class="step-details">
|
||||
<div v-if="step.technologies" class="technologies">
|
||||
<div class="tech-label">技术栈：</div>
|
||||
<div
|
||||
v-if="step.technologies"
|
||||
class="technologies"
|
||||
>
|
||||
<div class="tech-label">
|
||||
技术栈：
|
||||
</div>
|
||||
<div class="tech-list">
|
||||
<span
|
||||
v-for="(tech, i) in step.technologies"
|
||||
@@ -45,44 +62,73 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="step.metrics" class="metrics">
|
||||
<div
|
||||
v-if="step.metrics"
|
||||
class="metrics"
|
||||
>
|
||||
<div
|
||||
class="metric"
|
||||
v-for="(metric, i) in step.metrics"
|
||||
:key="i"
|
||||
class="metric"
|
||||
>
|
||||
<div class="metric-value">{{ metric.value }}</div>
|
||||
<div class="metric-label">{{ metric.label }}</div>
|
||||
<div class="metric-value">
|
||||
{{ metric.value }}
|
||||
</div>
|
||||
<div class="metric-label">
|
||||
{{ metric.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="index < pipelineSteps.length - 1" class="step-connector">
|
||||
<div class="connector-line"></div>
|
||||
<div class="connector-arrow">↓</div>
|
||||
<div
|
||||
v-if="index < pipelineSteps.length - 1"
|
||||
class="step-connector"
|
||||
>
|
||||
<div class="connector-line" />
|
||||
<div class="connector-arrow">
|
||||
↓
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="play-controls">
|
||||
<button class="control-btn" @click="startAnimation" :disabled="isPlaying">
|
||||
<button
|
||||
class="control-btn"
|
||||
:disabled="isPlaying"
|
||||
@click="startAnimation"
|
||||
>
|
||||
<span v-if="!isPlaying">▶️ 演示数据流</span>
|
||||
<span v-else>⏸️ 演示中...</span>
|
||||
</button>
|
||||
<button class="control-btn secondary" @click="resetAnimation">
|
||||
<button
|
||||
class="control-btn secondary"
|
||||
@click="resetAnimation"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="data-flow-visualization">
|
||||
<div class="flow-title">实时数据流</div>
|
||||
<div class="flow-title">
|
||||
实时数据流
|
||||
</div>
|
||||
<div class="flow-cards">
|
||||
<div class="flow-card" v-for="(item, index) in dataFlow" :key="index">
|
||||
<div class="flow-icon">{{ item.icon }}</div>
|
||||
<div
|
||||
v-for="(item, index) in dataFlow"
|
||||
:key="index"
|
||||
class="flow-card"
|
||||
>
|
||||
<div class="flow-icon">
|
||||
{{ item.icon }}
|
||||
</div>
|
||||
<div class="flow-content">
|
||||
<div class="flow-name">{{ item.name }}</div>
|
||||
<div class="flow-name">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="flow-count">
|
||||
{{ formatNumber(item.count) }} {{ item.unit }}
|
||||
</div>
|
||||
@@ -92,12 +138,18 @@
|
||||
</div>
|
||||
|
||||
<div class="best-practices">
|
||||
<div class="practices-title">💡 数据管道最佳实践</div>
|
||||
<div class="practices-title">
|
||||
💡 数据管道最佳实践
|
||||
</div>
|
||||
<div class="practices-grid">
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">🔄</div>
|
||||
<div class="practice-icon">
|
||||
🔄
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-name">批量处理</div>
|
||||
<div class="practice-name">
|
||||
批量处理
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
将小数据包合并成大数据块处理，减少 I/O 开销，提升吞吐量
|
||||
</div>
|
||||
@@ -105,9 +157,13 @@
|
||||
</div>
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">⚡</div>
|
||||
<div class="practice-icon">
|
||||
⚡
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-name">异步非阻塞</div>
|
||||
<div class="practice-name">
|
||||
异步非阻塞
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
使用消息队列和异步任务，避免阻塞主业务流程
|
||||
</div>
|
||||
@@ -115,9 +171,13 @@
|
||||
</div>
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">🛡️</div>
|
||||
<div class="practice-icon">
|
||||
🛡️
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-name">容错机制</div>
|
||||
<div class="practice-name">
|
||||
容错机制
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
失败重试、死信队列、降级策略，确保数据不丢失
|
||||
</div>
|
||||
@@ -125,9 +185,13 @@
|
||||
</div>
|
||||
|
||||
<div class="practice-card">
|
||||
<div class="practice-icon">📊</div>
|
||||
<div class="practice-icon">
|
||||
📊
|
||||
</div>
|
||||
<div class="practice-content">
|
||||
<div class="practice-name">监控告警</div>
|
||||
<div class="practice-name">
|
||||
监控告警
|
||||
</div>
|
||||
<div class="practice-desc">
|
||||
实时监控数据量、延迟、错误率，异常及时告警
|
||||
</div>
|
||||
|
||||
+149
-50
@@ -5,16 +5,26 @@
|
||||
<template>
|
||||
<div class="privacy-compliance-demo">
|
||||
<div class="header">
|
||||
<div class="title">隐私合规最佳实践</div>
|
||||
<div class="subtitle">GDPR、PIPL 等法规要求下的埋点系统设计</div>
|
||||
<div class="title">
|
||||
隐私合规最佳实践
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
GDPR、PIPL 等法规要求下的埋点系统设计
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="compliance-cards">
|
||||
<div class="compliance-card gdpr">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🇪🇺</div>
|
||||
<div class="card-title">GDPR</div>
|
||||
<div class="card-subtitle">欧盟数据保护法规</div>
|
||||
<div class="card-icon">
|
||||
🇪🇺
|
||||
</div>
|
||||
<div class="card-title">
|
||||
GDPR
|
||||
</div>
|
||||
<div class="card-subtitle">
|
||||
欧盟数据保护法规
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="requirement-list">
|
||||
@@ -40,9 +50,15 @@
|
||||
|
||||
<div class="compliance-card pipl">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🇨🇳</div>
|
||||
<div class="card-title">PIPL</div>
|
||||
<div class="card-subtitle">中国个人信息保护法</div>
|
||||
<div class="card-icon">
|
||||
🇨🇳
|
||||
</div>
|
||||
<div class="card-title">
|
||||
PIPL
|
||||
</div>
|
||||
<div class="card-subtitle">
|
||||
中国个人信息保护法
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="requirement-list">
|
||||
@@ -68,14 +84,29 @@
|
||||
</div>
|
||||
|
||||
<div class="implementation-steps">
|
||||
<div class="steps-title">实施步骤</div>
|
||||
<div class="steps-title">
|
||||
实施步骤
|
||||
</div>
|
||||
<div class="steps-container">
|
||||
<div class="step-item" v-for="(step, index) in steps" :key="index">
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
class="step-item"
|
||||
>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div class="step-code" v-if="step.code">
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ step.desc }}
|
||||
</div>
|
||||
<div
|
||||
v-if="step.code"
|
||||
class="step-code"
|
||||
>
|
||||
<pre><code>{{ step.code }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,80 +115,120 @@
|
||||
</div>
|
||||
|
||||
<div class="consent-flow-demo">
|
||||
<div class="flow-title">隐私同意流程演示</div>
|
||||
<div class="flow-title">
|
||||
隐私同意流程演示
|
||||
</div>
|
||||
<div class="consent-simulation">
|
||||
<div class="simulation-screen">
|
||||
<div v-if="!userConsented" class="consent-dialog">
|
||||
<div
|
||||
v-if="!userConsented"
|
||||
class="consent-dialog"
|
||||
>
|
||||
<div class="dialog-header">
|
||||
<div class="dialog-title">🔐 隐私设置</div>
|
||||
<div class="dialog-subtitle">我们需要您的同意来收集数据</div>
|
||||
<div class="dialog-title">
|
||||
🔐 隐私设置
|
||||
</div>
|
||||
<div class="dialog-subtitle">
|
||||
我们需要您的同意来收集数据
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-body">
|
||||
<div class="consent-item">
|
||||
<div class="consent-info">
|
||||
<div class="consent-name">必要数据</div>
|
||||
<div class="consent-name">
|
||||
必要数据
|
||||
</div>
|
||||
<div class="consent-desc">
|
||||
应用程序运行所必需的数据（崩溃日志、性能指标）
|
||||
</div>
|
||||
</div>
|
||||
<div class="consent-status required">必需</div>
|
||||
<div class="consent-status required">
|
||||
必需
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="consent-item">
|
||||
<div class="consent-info">
|
||||
<div class="consent-name">行为分析</div>
|
||||
<div class="consent-name">
|
||||
行为分析
|
||||
</div>
|
||||
<div class="consent-desc">
|
||||
收集用户行为数据用于产品优化（页面浏览、按钮点击）
|
||||
</div>
|
||||
</div>
|
||||
<label class="consent-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="consents.analytics"
|
||||
type="checkbox"
|
||||
:disabled="!userConsented"
|
||||
/>
|
||||
<span class="toggle-slider"></span>
|
||||
>
|
||||
<span class="toggle-slider" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="consent-item">
|
||||
<div class="consent-info">
|
||||
<div class="consent-name">个性化推荐</div>
|
||||
<div class="consent-desc">基于您的兴趣提供个性化内容推荐</div>
|
||||
<div class="consent-name">
|
||||
个性化推荐
|
||||
</div>
|
||||
<div class="consent-desc">
|
||||
基于您的兴趣提供个性化内容推荐
|
||||
</div>
|
||||
</div>
|
||||
<label class="consent-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="consents.personalization"
|
||||
type="checkbox"
|
||||
:disabled="!userConsented"
|
||||
/>
|
||||
<span class="toggle-slider"></span>
|
||||
>
|
||||
<span class="toggle-slider" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button class="dialog-btn secondary" @click="rejectAll">
|
||||
<button
|
||||
class="dialog-btn secondary"
|
||||
@click="rejectAll"
|
||||
>
|
||||
拒绝全部
|
||||
</button>
|
||||
<button class="dialog-btn primary" @click="acceptSelected">
|
||||
<button
|
||||
class="dialog-btn primary"
|
||||
@click="acceptSelected"
|
||||
>
|
||||
接受选中
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="consented-view">
|
||||
<div class="consented-icon">✅</div>
|
||||
<div class="consented-title">感谢您的同意</div>
|
||||
<div class="consented-desc">您已经同意收集以下类型的数据：</div>
|
||||
<div
|
||||
v-else
|
||||
class="consented-view"
|
||||
>
|
||||
<div class="consented-icon">
|
||||
✅
|
||||
</div>
|
||||
<div class="consented-title">
|
||||
感谢您的同意
|
||||
</div>
|
||||
<div class="consented-desc">
|
||||
您已经同意收集以下类型的数据：
|
||||
</div>
|
||||
|
||||
<div class="consented-list">
|
||||
<div class="consented-item" v-if="consents.analytics">
|
||||
<div
|
||||
v-if="consents.analytics"
|
||||
class="consented-item"
|
||||
>
|
||||
<span class="item-icon">📊</span>
|
||||
<span>行为分析数据</span>
|
||||
</div>
|
||||
<div class="consented-item" v-if="consents.personalization">
|
||||
<div
|
||||
v-if="consents.personalization"
|
||||
class="consented-item"
|
||||
>
|
||||
<span class="item-icon">🎯</span>
|
||||
<span>个性化推荐数据</span>
|
||||
</div>
|
||||
@@ -168,10 +239,16 @@
|
||||
</div>
|
||||
|
||||
<div class="consented-actions">
|
||||
<button class="action-btn" @click="changeSettings">
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="changeSettings"
|
||||
>
|
||||
修改设置
|
||||
</button>
|
||||
<button class="action-btn danger" @click="deleteData">
|
||||
<button
|
||||
class="action-btn danger"
|
||||
@click="deleteData"
|
||||
>
|
||||
删除我的数据
|
||||
</button>
|
||||
</div>
|
||||
@@ -181,12 +258,18 @@
|
||||
</div>
|
||||
|
||||
<div class="data-protection">
|
||||
<div class="protection-title">🛡️ 数据保护措施</div>
|
||||
<div class="protection-title">
|
||||
🛡️ 数据保护措施
|
||||
</div>
|
||||
<div class="protection-grid">
|
||||
<div class="protection-item">
|
||||
<div class="protection-icon">🔒</div>
|
||||
<div class="protection-icon">
|
||||
🔒
|
||||
</div>
|
||||
<div class="protection-content">
|
||||
<div class="protection-name">数据加密</div>
|
||||
<div class="protection-name">
|
||||
数据加密
|
||||
</div>
|
||||
<div class="protection-desc">
|
||||
传输层 HTTPS 加密，存储层 AES-256 加密
|
||||
</div>
|
||||
@@ -194,9 +277,13 @@
|
||||
</div>
|
||||
|
||||
<div class="protection-item">
|
||||
<div class="protection-icon">🎭</div>
|
||||
<div class="protection-icon">
|
||||
🎭
|
||||
</div>
|
||||
<div class="protection-content">
|
||||
<div class="protection-name">数据脱敏</div>
|
||||
<div class="protection-name">
|
||||
数据脱敏
|
||||
</div>
|
||||
<div class="protection-desc">
|
||||
手机号、邮箱等敏感信息自动脱敏处理
|
||||
</div>
|
||||
@@ -204,9 +291,13 @@
|
||||
</div>
|
||||
|
||||
<div class="protection-item">
|
||||
<div class="protection-icon">⏰</div>
|
||||
<div class="protection-icon">
|
||||
⏰
|
||||
</div>
|
||||
<div class="protection-content">
|
||||
<div class="protection-name">数据保留期限</div>
|
||||
<div class="protection-name">
|
||||
数据保留期限
|
||||
</div>
|
||||
<div class="protection-desc">
|
||||
不同类型数据设置不同保留期限，自动清理过期数据
|
||||
</div>
|
||||
@@ -214,17 +305,25 @@
|
||||
</div>
|
||||
|
||||
<div class="protection-item">
|
||||
<div class="protection-icon">👤</div>
|
||||
<div class="protection-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="protection-content">
|
||||
<div class="protection-name">用户控制权</div>
|
||||
<div class="protection-desc">用户可查看、导出、删除自己的数据</div>
|
||||
<div class="protection-name">
|
||||
用户控制权
|
||||
</div>
|
||||
<div class="protection-desc">
|
||||
用户可查看、导出、删除自己的数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checklist">
|
||||
<div class="checklist-title">✅ 合规检查清单</div>
|
||||
<div class="checklist-title">
|
||||
✅ 合规检查清单
|
||||
</div>
|
||||
<div class="checklist-items">
|
||||
<div
|
||||
v-for="(item, index) in checklistItems"
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="real-world-case-demo">
|
||||
<div class="header">
|
||||
<div class="title">实战案例</div>
|
||||
<div class="subtitle">真实场景下的埋点设计最佳实践</div>
|
||||
<div class="title">
|
||||
实战案例
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
真实场景下的埋点设计最佳实践
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="case-tabs">
|
||||
@@ -23,17 +27,28 @@
|
||||
|
||||
<div class="case-content">
|
||||
<!-- 电商系统 -->
|
||||
<div v-if="selectedCase === 'ecommerce'" class="case-detail">
|
||||
<div
|
||||
v-if="selectedCase === 'ecommerce'"
|
||||
class="case-detail"
|
||||
>
|
||||
<div class="case-intro">
|
||||
<div class="intro-icon">🛒</div>
|
||||
<div class="intro-icon">
|
||||
🛒
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-title">电商系统埋点设计</div>
|
||||
<div class="intro-desc">分析购买转化漏斗，优化用户体验</div>
|
||||
<div class="intro-title">
|
||||
电商系统埋点设计
|
||||
</div>
|
||||
<div class="intro-desc">
|
||||
分析购买转化漏斗，优化用户体验
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="funnel-visualization">
|
||||
<div class="funnel-title">购买转化漏斗</div>
|
||||
<div class="funnel-title">
|
||||
购买转化漏斗
|
||||
</div>
|
||||
<div class="funnel-steps">
|
||||
<div
|
||||
v-for="(step, index) in ecommerceFunnel"
|
||||
@@ -41,15 +56,23 @@
|
||||
class="funnel-step"
|
||||
:style="{ width: step.width }"
|
||||
>
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-count">{{ formatNumber(step.count) }}</div>
|
||||
<div class="step-rate">{{ step.rate }}%</div>
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-count">
|
||||
{{ formatNumber(step.count) }}
|
||||
</div>
|
||||
<div class="step-rate">
|
||||
{{ step.rate }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-events">
|
||||
<div class="events-title">关键埋点</div>
|
||||
<div class="events-title">
|
||||
关键埋点
|
||||
</div>
|
||||
<div class="events-list">
|
||||
<div
|
||||
v-for="(event, index) in ecommerceEvents"
|
||||
@@ -60,7 +83,9 @@
|
||||
<code>{{ event.name }}</code>
|
||||
</div>
|
||||
<div class="event-details">
|
||||
<div class="event-trigger">{{ event.trigger }}</div>
|
||||
<div class="event-trigger">
|
||||
{{ event.trigger }}
|
||||
</div>
|
||||
<div class="event-props">
|
||||
<span
|
||||
v-for="(prop, i) in event.props"
|
||||
@@ -77,55 +102,74 @@
|
||||
</div>
|
||||
|
||||
<!-- 推荐系统 -->
|
||||
<div v-if="selectedCase === 'recommendation'" class="case-detail">
|
||||
<div
|
||||
v-if="selectedCase === 'recommendation'"
|
||||
class="case-detail"
|
||||
>
|
||||
<div class="case-intro">
|
||||
<div class="intro-icon">🎯</div>
|
||||
<div class="intro-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-title">内容推荐埋点设计</div>
|
||||
<div class="intro-desc">优化推荐算法，提高点击率</div>
|
||||
<div class="intro-title">
|
||||
内容推荐埋点设计
|
||||
</div>
|
||||
<div class="intro-desc">
|
||||
优化推荐算法，提高点击率
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ab-test-demo">
|
||||
<div class="ab-title">A/B 测试效果对比</div>
|
||||
<div class="ab-title">
|
||||
A/B 测试效果对比
|
||||
</div>
|
||||
<div class="ab-metrics">
|
||||
<div class="metric-group">
|
||||
<div class="metric-label">算法 A</div>
|
||||
<div class="metric-value">{{ abTest.algorithmA }}%</div>
|
||||
<div class="metric-label">
|
||||
算法 A
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
{{ abTest.algorithmA }}%
|
||||
</div>
|
||||
<div class="metric-bar">
|
||||
<div
|
||||
class="bar-fill"
|
||||
:style="{ width: abTest.algorithmA + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-group">
|
||||
<div class="metric-label">算法 B</div>
|
||||
<div class="metric-value">{{ abTest.algorithmB }}%</div>
|
||||
<div class="metric-label">
|
||||
算法 B
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
{{ abTest.algorithmB }}%
|
||||
</div>
|
||||
<div class="metric-bar">
|
||||
<div
|
||||
class="bar-fill better"
|
||||
:style="{ width: abTest.algorithmB + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ab-conclusion">
|
||||
✨ 算法 B 点击率提升
|
||||
<span class="highlight"
|
||||
>{{
|
||||
(
|
||||
((abTest.algorithmB - abTest.algorithmA) /
|
||||
abTest.algorithmA) *
|
||||
100
|
||||
).toFixed(1)
|
||||
}}%</span
|
||||
>
|
||||
<span class="highlight">{{
|
||||
(
|
||||
((abTest.algorithmB - abTest.algorithmA) /
|
||||
abTest.algorithmA) *
|
||||
100
|
||||
).toFixed(1)
|
||||
}}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-events">
|
||||
<div class="events-title">关键埋点</div>
|
||||
<div class="events-title">
|
||||
关键埋点
|
||||
</div>
|
||||
<div class="events-list">
|
||||
<div
|
||||
v-for="(event, index) in recommendationEvents"
|
||||
@@ -136,7 +180,9 @@
|
||||
<code>{{ event.name }}</code>
|
||||
</div>
|
||||
<div class="event-details">
|
||||
<div class="event-trigger">{{ event.trigger }}</div>
|
||||
<div class="event-trigger">
|
||||
{{ event.trigger }}
|
||||
</div>
|
||||
<div class="event-props">
|
||||
<span
|
||||
v-for="(prop, i) in event.props"
|
||||
@@ -153,17 +199,28 @@
|
||||
</div>
|
||||
|
||||
<!-- 用户行为分析 -->
|
||||
<div v-if="selectedCase === 'userbehavior'" class="case-detail">
|
||||
<div
|
||||
v-if="selectedCase === 'userbehavior'"
|
||||
class="case-detail"
|
||||
>
|
||||
<div class="case-intro">
|
||||
<div class="intro-icon">👤</div>
|
||||
<div class="intro-icon">
|
||||
👤
|
||||
</div>
|
||||
<div class="intro-text">
|
||||
<div class="intro-title">用户行为分析埋点</div>
|
||||
<div class="intro-desc">分析用户粘性，识别流失风险</div>
|
||||
<div class="intro-title">
|
||||
用户行为分析埋点
|
||||
</div>
|
||||
<div class="intro-desc">
|
||||
分析用户粘性，识别流失风险
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rfm-segments">
|
||||
<div class="segments-title">RFM 用户分群</div>
|
||||
<div class="segments-title">
|
||||
RFM 用户分群
|
||||
</div>
|
||||
<div class="segments-grid">
|
||||
<div
|
||||
v-for="(segment, index) in rfmSegments"
|
||||
@@ -171,37 +228,49 @@
|
||||
class="segment-card"
|
||||
:class="segment.type"
|
||||
>
|
||||
<div class="segment-name">{{ segment.name }}</div>
|
||||
<div class="segment-name">
|
||||
{{ segment.name }}
|
||||
</div>
|
||||
<div class="segment-users">
|
||||
{{ formatNumber(segment.users) }} 用户
|
||||
</div>
|
||||
<div class="segment-desc">{{ segment.desc }}</div>
|
||||
<div class="segment-desc">
|
||||
{{ segment.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="retention-chart">
|
||||
<div class="chart-title">用户留存率</div>
|
||||
<div class="chart-title">
|
||||
用户留存率
|
||||
</div>
|
||||
<div class="chart-bars">
|
||||
<div
|
||||
v-for="(data, index) in retentionData"
|
||||
:key="index"
|
||||
class="chart-bar"
|
||||
>
|
||||
<div class="bar-label">{{ data.label }}</div>
|
||||
<div class="bar-label">
|
||||
{{ data.label }}
|
||||
</div>
|
||||
<div class="bar-container">
|
||||
<div
|
||||
class="bar-fill"
|
||||
:style="{ height: data.rate + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
<div class="bar-value">
|
||||
{{ data.rate }}%
|
||||
</div>
|
||||
<div class="bar-value">{{ data.rate }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tracking-events">
|
||||
<div class="events-title">关键埋点</div>
|
||||
<div class="events-title">
|
||||
关键埋点
|
||||
</div>
|
||||
<div class="events-list">
|
||||
<div
|
||||
v-for="(event, index) in userBehaviorEvents"
|
||||
@@ -212,7 +281,9 @@
|
||||
<code>{{ event.name }}</code>
|
||||
</div>
|
||||
<div class="event-details">
|
||||
<div class="event-trigger">{{ event.trigger }}</div>
|
||||
<div class="event-trigger">
|
||||
{{ event.trigger }}
|
||||
</div>
|
||||
<div class="event-props">
|
||||
<span
|
||||
v-for="(prop, i) in event.props"
|
||||
|
||||
@@ -5,19 +5,27 @@
|
||||
<template>
|
||||
<div class="tool-selection-demo">
|
||||
<div class="header">
|
||||
<div class="title">埋点工具选型</div>
|
||||
<div class="subtitle">根据团队规模和需求选择合适的方案</div>
|
||||
<div class="title">
|
||||
埋点工具选型
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
根据团队规模和需求选择合适的方案
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selection-criteria">
|
||||
<div class="criteria-title">请选择您的场景</div>
|
||||
<div class="criteria-title">
|
||||
请选择您的场景
|
||||
</div>
|
||||
<div class="criteria-options">
|
||||
<div
|
||||
v-for="(option, key) in criteria"
|
||||
:key="key"
|
||||
class="criteria-option"
|
||||
>
|
||||
<div class="option-label">{{ option.label }}</div>
|
||||
<div class="option-label">
|
||||
{{ option.label }}
|
||||
</div>
|
||||
<div class="option-buttons">
|
||||
<button
|
||||
v-for="(value, index) in option.values"
|
||||
@@ -32,20 +40,34 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="recommend-btn" @click="getRecommendation">
|
||||
<button
|
||||
class="recommend-btn"
|
||||
@click="getRecommendation"
|
||||
>
|
||||
获取推荐方案
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="recommendation" class="recommendation-result">
|
||||
<div
|
||||
v-if="recommendation"
|
||||
class="recommendation-result"
|
||||
>
|
||||
<div class="result-header">
|
||||
<div class="result-icon">🎯</div>
|
||||
<div class="result-title">推荐方案</div>
|
||||
<div class="result-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="result-title">
|
||||
推荐方案
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-card">
|
||||
<div class="result-name">{{ recommendation.name }}</div>
|
||||
<div class="result-desc">{{ recommendation.desc }}</div>
|
||||
<div class="result-name">
|
||||
{{ recommendation.name }}
|
||||
</div>
|
||||
<div class="result-desc">
|
||||
{{ recommendation.desc }}
|
||||
</div>
|
||||
|
||||
<div class="result-details">
|
||||
<div class="detail-item">
|
||||
@@ -63,23 +85,39 @@
|
||||
</div>
|
||||
|
||||
<div class="result-pros">
|
||||
<div class="pros-title">✅ 优势</div>
|
||||
<div class="pros-title">
|
||||
✅ 优势
|
||||
</div>
|
||||
<ul class="pros-list">
|
||||
<li v-for="(pro, i) in recommendation.pros" :key="i">{{ pro }}</li>
|
||||
<li
|
||||
v-for="(pro, i) in recommendation.pros"
|
||||
:key="i"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="result-cons">
|
||||
<div class="cons-title">⚠️ 注意事项</div>
|
||||
<div class="cons-title">
|
||||
⚠️ 注意事项
|
||||
</div>
|
||||
<ul class="cons-list">
|
||||
<li v-for="(con, i) in recommendation.cons" :key="i">{{ con }}</li>
|
||||
<li
|
||||
v-for="(con, i) in recommendation.cons"
|
||||
:key="i"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tools-comparison">
|
||||
<div class="comparison-title">工具对比表</div>
|
||||
<div class="comparison-title">
|
||||
工具对比表
|
||||
</div>
|
||||
<table class="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -91,8 +129,13 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(tool, index) in tools" :key="index">
|
||||
<td class="tool-name">{{ tool.name }}</td>
|
||||
<tr
|
||||
v-for="(tool, index) in tools"
|
||||
:key="index"
|
||||
>
|
||||
<td class="tool-name">
|
||||
{{ tool.name }}
|
||||
</td>
|
||||
<td>{{ tool.type }}</td>
|
||||
<td>{{ tool.price }}</td>
|
||||
<td>{{ tool.scenario }}</td>
|
||||
|
||||
+85
-28
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="tracking-methods-comparison-demo">
|
||||
<div class="header">
|
||||
<div class="title">埋点方法对比</div>
|
||||
<div class="subtitle">三种主流埋点实现方式的深度对比</div>
|
||||
<div class="title">
|
||||
埋点方法对比
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
三种主流埋点实现方式的深度对比
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="methods-grid">
|
||||
@@ -18,33 +22,54 @@
|
||||
@click="selectMethod(method.id)"
|
||||
>
|
||||
<div class="method-header">
|
||||
<div class="method-icon">{{ method.icon }}</div>
|
||||
<div class="method-info">
|
||||
<div class="method-name">{{ method.name }}</div>
|
||||
<div class="method-english">{{ method.english }}</div>
|
||||
<div class="method-icon">
|
||||
{{ method.icon }}
|
||||
</div>
|
||||
<div v-if="selectedMethod === method.id" class="selected-badge">
|
||||
<div class="method-info">
|
||||
<div class="method-name">
|
||||
{{ method.name }}
|
||||
</div>
|
||||
<div class="method-english">
|
||||
{{ method.english }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedMethod === method.id"
|
||||
class="selected-badge"
|
||||
>
|
||||
已选择
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="method-body">
|
||||
<div class="method-description">{{ method.description }}</div>
|
||||
<div class="method-description">
|
||||
{{ method.description }}
|
||||
</div>
|
||||
|
||||
<div class="method-features">
|
||||
<div class="feature-category">
|
||||
<div class="category-title">✅ 优点</div>
|
||||
<div class="category-title">
|
||||
✅ 优点
|
||||
</div>
|
||||
<ul class="feature-list pros">
|
||||
<li v-for="(pro, index) in method.pros" :key="index">
|
||||
<li
|
||||
v-for="(pro, index) in method.pros"
|
||||
:key="index"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature-category">
|
||||
<div class="category-title">❌ 缺点</div>
|
||||
<div class="category-title">
|
||||
❌ 缺点
|
||||
</div>
|
||||
<ul class="feature-list cons">
|
||||
<li v-for="(con, index) in method.cons" :key="index">
|
||||
<li
|
||||
v-for="(con, index) in method.cons"
|
||||
:key="index"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
@@ -52,7 +77,9 @@
|
||||
</div>
|
||||
|
||||
<div class="method-code">
|
||||
<div class="code-title">代码示例</div>
|
||||
<div class="code-title">
|
||||
代码示例
|
||||
</div>
|
||||
<pre class="code-block"><code>{{ method.code }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,19 +87,29 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-matrix">
|
||||
<div class="matrix-title">综合对比矩阵</div>
|
||||
<div class="matrix-title">
|
||||
综合对比矩阵
|
||||
</div>
|
||||
<table class="matrix">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>评估维度</th>
|
||||
<th v-for="method in methods" :key="method.id">
|
||||
<th
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
>
|
||||
{{ method.name }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in matrixData" :key="index">
|
||||
<td class="dimension">{{ row.dimension }}</td>
|
||||
<tr
|
||||
v-for="(row, index) in matrixData"
|
||||
:key="index"
|
||||
>
|
||||
<td class="dimension">
|
||||
{{ row.dimension }}
|
||||
</td>
|
||||
<td
|
||||
v-for="method in methods"
|
||||
:key="method.id"
|
||||
@@ -83,9 +120,11 @@
|
||||
<div
|
||||
class="score-fill"
|
||||
:style="{ width: row.scores[method.id] + '%' }"
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
<div class="score-value">
|
||||
{{ row.scores[method.id] }}%
|
||||
</div>
|
||||
<div class="score-value">{{ row.scores[method.id] }}%</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -93,35 +132,53 @@
|
||||
</div>
|
||||
|
||||
<div class="recommendation">
|
||||
<div class="recommendation-title">💡 选型建议</div>
|
||||
<div class="recommendation-title">
|
||||
💡 选型建议
|
||||
</div>
|
||||
<div class="recommendation-content">
|
||||
<div class="recommendation-item">
|
||||
<div class="rec-scenario">核心业务指标</div>
|
||||
<div class="rec-method">推荐：代码埋点</div>
|
||||
<div class="rec-scenario">
|
||||
核心业务指标
|
||||
</div>
|
||||
<div class="rec-method">
|
||||
推荐：代码埋点
|
||||
</div>
|
||||
<div class="rec-reason">
|
||||
原因：数据准确性最高，可自定义属性，适合支付、注册等关键业务
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recommendation-item">
|
||||
<div class="rec-scenario">运营活动埋点</div>
|
||||
<div class="rec-method">推荐：可视化埋点</div>
|
||||
<div class="rec-scenario">
|
||||
运营活动埋点
|
||||
</div>
|
||||
<div class="rec-method">
|
||||
推荐：可视化埋点
|
||||
</div>
|
||||
<div class="rec-reason">
|
||||
原因：快速部署，产品经理可操作，适合快速验证活动效果
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recommendation-item">
|
||||
<div class="rec-scenario">页面浏览数据</div>
|
||||
<div class="rec-method">推荐：全埋点</div>
|
||||
<div class="rec-scenario">
|
||||
页面浏览数据
|
||||
</div>
|
||||
<div class="rec-method">
|
||||
推荐：全埋点
|
||||
</div>
|
||||
<div class="rec-reason">
|
||||
原因：零开发成本，一次性采集，适合 PV/UV 等基础指标
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recommendation-item">
|
||||
<div class="rec-scenario">大型企业级应用</div>
|
||||
<div class="rec-method">推荐：混合方案</div>
|
||||
<div class="rec-scenario">
|
||||
大型企业级应用
|
||||
</div>
|
||||
<div class="rec-method">
|
||||
推荐：混合方案
|
||||
</div>
|
||||
<div class="rec-reason">
|
||||
原因：核心业务用代码埋点，运营活动用可视化埋点，基础数据用全埋点
|
||||
</div>
|
||||
|
||||
+105
-35
@@ -5,13 +5,19 @@
|
||||
<template>
|
||||
<div class="tracking-overview-demo">
|
||||
<div class="header">
|
||||
<div class="title">埋点系统概览</div>
|
||||
<div class="subtitle">从用户行为到数据洞察的完整链路</div>
|
||||
<div class="title">
|
||||
埋点系统概览
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
从用户行为到数据洞察的完整链路
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="system-flow">
|
||||
<div class="flow-section user-actions">
|
||||
<div class="section-title">用户行为层</div>
|
||||
<div class="section-title">
|
||||
用户行为层
|
||||
</div>
|
||||
<div class="action-grid">
|
||||
<div
|
||||
v-for="action in userActions"
|
||||
@@ -20,20 +26,32 @@
|
||||
:class="{ active: selectedAction === action.id }"
|
||||
@click="selectAction(action)"
|
||||
>
|
||||
<div class="action-icon">{{ action.icon }}</div>
|
||||
<div class="action-name">{{ action.name }}</div>
|
||||
<div class="action-icon">
|
||||
{{ action.icon }}
|
||||
</div>
|
||||
<div class="action-name">
|
||||
{{ action.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
<div class="arrow">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="flow-section tracking-layer">
|
||||
<div class="section-title">埋点采集层</div>
|
||||
<div class="section-title">
|
||||
埋点采集层
|
||||
</div>
|
||||
<div class="tracking-box">
|
||||
<div class="tracking-icon">📊</div>
|
||||
<div class="tracking-icon">
|
||||
📊
|
||||
</div>
|
||||
<div class="tracking-info">
|
||||
<div class="event-name">{{ selectedEventData.event }}</div>
|
||||
<div class="event-name">
|
||||
{{ selectedEventData.event }}
|
||||
</div>
|
||||
<div class="event-data">
|
||||
{{ formatEventData(selectedEventData) }}
|
||||
</div>
|
||||
@@ -41,10 +59,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
<div class="arrow">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="flow-section data-pipeline">
|
||||
<div class="section-title">数据处理层</div>
|
||||
<div class="section-title">
|
||||
数据处理层
|
||||
</div>
|
||||
<div class="pipeline-steps">
|
||||
<div
|
||||
v-for="(step, index) in pipelineSteps"
|
||||
@@ -52,73 +74,121 @@
|
||||
class="pipeline-step"
|
||||
:class="{ active: currentStep === index }"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-info">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ step.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow">↓</div>
|
||||
<div class="arrow">
|
||||
↓
|
||||
</div>
|
||||
|
||||
<div class="flow-section insights">
|
||||
<div class="section-title">数据洞察层</div>
|
||||
<div class="section-title">
|
||||
数据洞察层
|
||||
</div>
|
||||
<div class="insight-cards">
|
||||
<div class="insight-card">
|
||||
<div class="insight-value">
|
||||
{{ formatNumber(metrics.totalUsers) }}
|
||||
</div>
|
||||
<div class="insight-label">总用户数</div>
|
||||
<div class="insight-label">
|
||||
总用户数
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-card">
|
||||
<div class="insight-value">
|
||||
{{ formatNumber(metrics.totalEvents) }}
|
||||
</div>
|
||||
<div class="insight-label">总事件数</div>
|
||||
<div class="insight-label">
|
||||
总事件数
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-card">
|
||||
<div class="insight-value">{{ metrics.conversionRate }}%</div>
|
||||
<div class="insight-label">转化率</div>
|
||||
<div class="insight-value">
|
||||
{{ metrics.conversionRate }}%
|
||||
</div>
|
||||
<div class="insight-label">
|
||||
转化率
|
||||
</div>
|
||||
</div>
|
||||
<div class="insight-card">
|
||||
<div class="insight-value">{{ metrics.retentionRate }}%</div>
|
||||
<div class="insight-label">留存率</div>
|
||||
<div class="insight-value">
|
||||
{{ metrics.retentionRate }}%
|
||||
</div>
|
||||
<div class="insight-label">
|
||||
留存率
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="benefits">
|
||||
<div class="benefit-title">埋点的核心价值</div>
|
||||
<div class="benefit-title">
|
||||
埋点的核心价值
|
||||
</div>
|
||||
<div class="benefit-grid">
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon">🎯</div>
|
||||
<div class="benefit-icon">
|
||||
🎯
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-name">精准决策</div>
|
||||
<div class="benefit-desc">基于数据而非直觉做决策</div>
|
||||
<div class="benefit-name">
|
||||
精准决策
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
基于数据而非直觉做决策
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon">🔍</div>
|
||||
<div class="benefit-icon">
|
||||
🔍
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-name">用户洞察</div>
|
||||
<div class="benefit-desc">理解用户行为和需求</div>
|
||||
<div class="benefit-name">
|
||||
用户洞察
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
理解用户行为和需求
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon">📈</div>
|
||||
<div class="benefit-icon">
|
||||
📈
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-name">增长优化</div>
|
||||
<div class="benefit-desc">发现增长机会和瓶颈</div>
|
||||
<div class="benefit-name">
|
||||
增长优化
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
发现增长机会和瓶颈
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="benefit-item">
|
||||
<div class="benefit-icon">⚡</div>
|
||||
<div class="benefit-icon">
|
||||
⚡
|
||||
</div>
|
||||
<div class="benefit-text">
|
||||
<div class="benefit-name">快速迭代</div>
|
||||
<div class="benefit-desc">验证假设，快速调整</div>
|
||||
<div class="benefit-name">
|
||||
快速迭代
|
||||
</div>
|
||||
<div class="benefit-desc">
|
||||
验证假设，快速调整
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,8 +5,12 @@
|
||||
<template>
|
||||
<div class="tracking-types-demo">
|
||||
<div class="header">
|
||||
<div class="title">埋点类型对比</div>
|
||||
<div class="subtitle">三种埋点方式的优缺点与适用场景</div>
|
||||
<div class="title">
|
||||
埋点类型对比
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
三种埋点方式的优缺点与适用场景
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="type-tabs">
|
||||
@@ -24,10 +28,16 @@
|
||||
<div class="type-content">
|
||||
<div class="type-info">
|
||||
<div class="type-header">
|
||||
<div class="type-icon">{{ currentType.icon }}</div>
|
||||
<div class="type-icon">
|
||||
{{ currentType.icon }}
|
||||
</div>
|
||||
<div class="type-title">
|
||||
<div class="name">{{ currentType.name }}</div>
|
||||
<div class="subtitle">{{ currentType.subtitle }}</div>
|
||||
<div class="name">
|
||||
{{ currentType.name }}
|
||||
</div>
|
||||
<div class="subtitle">
|
||||
{{ currentType.subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +46,9 @@
|
||||
</div>
|
||||
|
||||
<div class="characteristics">
|
||||
<div class="characteristics-title">主要特征</div>
|
||||
<div class="characteristics-title">
|
||||
主要特征
|
||||
</div>
|
||||
<div class="characteristics-list">
|
||||
<div
|
||||
v-for="(char, index) in currentType.characteristics"
|
||||
@@ -50,17 +62,25 @@
|
||||
</div>
|
||||
|
||||
<div class="use-cases">
|
||||
<div class="use-cases-title">典型场景</div>
|
||||
<div class="use-cases-title">
|
||||
典型场景
|
||||
</div>
|
||||
<div class="use-cases-list">
|
||||
<div
|
||||
v-for="(useCase, index) in currentType.useCases"
|
||||
:key="index"
|
||||
class="use-case-item"
|
||||
>
|
||||
<div class="use-case-icon">{{ useCase.icon }}</div>
|
||||
<div class="use-case-icon">
|
||||
{{ useCase.icon }}
|
||||
</div>
|
||||
<div class="use-case-info">
|
||||
<div class="use-case-name">{{ useCase.name }}</div>
|
||||
<div class="use-case-desc">{{ useCase.desc }}</div>
|
||||
<div class="use-case-name">
|
||||
{{ useCase.name }}
|
||||
</div>
|
||||
<div class="use-case-desc">
|
||||
{{ useCase.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,54 +88,88 @@
|
||||
</div>
|
||||
|
||||
<div class="type-architecture">
|
||||
<div class="architecture-title">架构示意</div>
|
||||
<div class="architecture-title">
|
||||
架构示意
|
||||
</div>
|
||||
<div class="architecture-diagram">
|
||||
<div class="diagram-layer">
|
||||
<div class="layer-label">用户</div>
|
||||
<div class="layer-icon">👤</div>
|
||||
<div class="layer-label">
|
||||
用户
|
||||
</div>
|
||||
<div class="layer-icon">
|
||||
👤
|
||||
</div>
|
||||
</div>
|
||||
<div class="diagram-arrow">
|
||||
↓
|
||||
</div>
|
||||
<div class="diagram-arrow">↓</div>
|
||||
<div class="diagram-layer client">
|
||||
<div class="layer-label">客户端</div>
|
||||
<div class="layer-label">
|
||||
客户端
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div
|
||||
v-if="selectedType === 'frontend'"
|
||||
class="layer-box frontend"
|
||||
>
|
||||
<div>前端埋点 SDK</div>
|
||||
<div class="layer-detail">采集用户交互</div>
|
||||
<div class="layer-detail">
|
||||
采集用户交互
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedType === 'backend'" class="layer-box backend">
|
||||
<div
|
||||
v-if="selectedType === 'backend'"
|
||||
class="layer-box backend"
|
||||
>
|
||||
<div>业务代码</div>
|
||||
<div class="layer-detail">调用后端埋点</div>
|
||||
<div class="layer-detail">
|
||||
调用后端埋点
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="selectedType === 'full'" class="layer-box full">
|
||||
<div
|
||||
v-if="selectedType === 'full'"
|
||||
class="layer-box full"
|
||||
>
|
||||
<div>前端埋点 SDK</div>
|
||||
<div>后端埋点</div>
|
||||
<div class="layer-detail">全链路追踪</div>
|
||||
<div class="layer-detail">
|
||||
全链路追踪
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diagram-arrow">↓</div>
|
||||
<div class="diagram-arrow">
|
||||
↓
|
||||
</div>
|
||||
<div
|
||||
v-if="selectedType === 'backend' || selectedType === 'full'"
|
||||
class="diagram-layer server"
|
||||
>
|
||||
<div class="layer-label">服务端</div>
|
||||
<div class="layer-label">
|
||||
服务端
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-box server">
|
||||
<div>埋点服务</div>
|
||||
<div class="layer-detail">处理埋点请求</div>
|
||||
<div class="layer-detail">
|
||||
处理埋点请求
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="diagram-arrow">↓</div>
|
||||
<div class="diagram-arrow">
|
||||
↓
|
||||
</div>
|
||||
<div class="diagram-layer data">
|
||||
<div class="layer-label">数据平台</div>
|
||||
<div class="layer-label">
|
||||
数据平台
|
||||
</div>
|
||||
<div class="layer-content">
|
||||
<div class="layer-box data">
|
||||
<div>数据仓库</div>
|
||||
<div class="layer-detail">存储与分析</div>
|
||||
<div class="layer-detail">
|
||||
存储与分析
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -124,19 +178,29 @@
|
||||
</div>
|
||||
|
||||
<div class="comparison-table">
|
||||
<div class="comparison-title">详细对比</div>
|
||||
<div class="comparison-title">
|
||||
详细对比
|
||||
</div>
|
||||
<table class="comparison">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>对比维度</th>
|
||||
<th v-for="type in trackingTypes" :key="type.id">
|
||||
<th
|
||||
v-for="type in trackingTypes"
|
||||
:key="type.id"
|
||||
>
|
||||
{{ type.name }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in comparisonData" :key="index">
|
||||
<td class="dimension">{{ row.dimension }}</td>
|
||||
<tr
|
||||
v-for="(row, index) in comparisonData"
|
||||
:key="index"
|
||||
>
|
||||
<td class="dimension">
|
||||
{{ row.dimension }}
|
||||
</td>
|
||||
<td
|
||||
v-for="type in trackingTypes"
|
||||
:key="type.id"
|
||||
@@ -144,7 +208,10 @@
|
||||
:class="{ best: row.best === type.id }"
|
||||
>
|
||||
{{ row.values[type.id] }}
|
||||
<span v-if="row.best === type.id" class="best-badge">最优</span>
|
||||
<span
|
||||
v-if="row.best === type.id"
|
||||
class="best-badge"
|
||||
>最优</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user