feat: complete English translation of AI IDE introduction including Appendix 2
This commit is contained in:
sanbuphy
@@ -20,7 +20,7 @@ const localeMap = {
|
||||
lang: 'zh-CN',
|
||||
hreflang: 'zh-CN'
|
||||
},
|
||||
'en': {
|
||||
en: {
|
||||
ogLocale: 'en_US',
|
||||
twitterSite: '@datawhale',
|
||||
lang: 'en-US',
|
||||
@@ -1025,7 +1025,7 @@ export default defineConfig({
|
||||
locales: {
|
||||
// 根路径 — 仅用于 404 页面兜底，实际首页由 docs/index.md 自动重定向
|
||||
root: {
|
||||
label: '简体中文',
|
||||
label: '',
|
||||
lang: 'zh-CN',
|
||||
link: '/zh-cn/',
|
||||
themeConfig: {
|
||||
@@ -1778,7 +1778,7 @@ export default defineConfig({
|
||||
},
|
||||
|
||||
// 英文
|
||||
'en': {
|
||||
en: {
|
||||
label: 'English',
|
||||
lang: 'en-US',
|
||||
link: '/en/',
|
||||
@@ -1794,7 +1794,8 @@ export default defineConfig({
|
||||
...commonThemeConfig,
|
||||
notFound: {
|
||||
title: 'Page Not Found',
|
||||
quote: 'The page you are looking for does not exist or has been moved.',
|
||||
quote:
|
||||
'The page you are looking for does not exist or has been moved.',
|
||||
linkText: 'Take me home',
|
||||
linkUrl: '/en/'
|
||||
},
|
||||
@@ -2015,8 +2016,8 @@ export default defineConfig({
|
||||
...commonThemeConfig,
|
||||
notFound: {
|
||||
title: 'Page non trouvée',
|
||||
quote: 'La page que vous recherchez n\'existe pas ou a été déplacée.',
|
||||
linkText: 'Retour à l\'accueil',
|
||||
quote: "La page que vous recherchez n'existe pas ou a été déplacée.",
|
||||
linkText: "Retour à l'accueil",
|
||||
linkUrl: '/fr-fr/'
|
||||
},
|
||||
outline: {
|
||||
@@ -2138,7 +2139,8 @@ export default defineConfig({
|
||||
...commonThemeConfig,
|
||||
notFound: {
|
||||
title: 'Không tìm thấy trang',
|
||||
quote: 'Trang bạn đang tìm kiếm không tồn tại hoặc đã được di chuyển.',
|
||||
quote:
|
||||
'Trang bạn đang tìm kiếm không tồn tại hoặc đã được di chuyển.',
|
||||
linkText: 'Về trang chủ',
|
||||
linkUrl: '/vi-vn/'
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { withBase } from 'vitepress'
|
||||
|
||||
const categories = [
|
||||
@@ -9,14 +9,17 @@ const categories = [
|
||||
icon: '💻',
|
||||
color: '#10b981',
|
||||
bgGradient: 'linear-gradient(135deg, #10b98115, #10b98108)',
|
||||
description: '理解计算机最底层的工作原理',
|
||||
whyLearn: '这是所有软件工程的基础。掌握计算机如何执行代码、管理内存、处理请求，能帮助你写出更高效的代码。',
|
||||
learningGoals: ['CPU 与内存原理', '操作系统核心', '网络通信基础', '数据结构与算法'],
|
||||
articles: [
|
||||
{ title: 'Vibe Coding 全栈开发', path: '/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack' },
|
||||
{ title: '从晶体管到 CPU', path: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu' },
|
||||
{ title: '操作系统', path: '/zh-cn/appendix/1-computer-fundamentals/operating-systems' },
|
||||
{ title: '数据结构', path: '/zh-cn/appendix/1-computer-fundamentals/data-structures' },
|
||||
{ title: '算法思维入门', path: '/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking' },
|
||||
{ title: '编程语言图谱', path: '/zh-cn/appendix/1-computer-fundamentals/programming-languages' },
|
||||
{ title: '网络基础', path: '/zh-cn/appendix/1-computer-fundamentals/computer-networks' }
|
||||
{ title: 'Vibe Coding 全栈开发', path: '/zh-cn/appendix/1-computer-fundamentals/vibe-coding-fullstack', description: 'AI 辅助时代下的全栈开发全景图' },
|
||||
{ title: '从晶体管到 CPU', path: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu', description: '理解计算机最底层的硬件逻辑' },
|
||||
{ title: '操作系统', path: '/zh-cn/appendix/1-computer-fundamentals/operating-systems', description: '进程管理、内存管理、文件系统' },
|
||||
{ title: '数据结构', path: '/zh-cn/appendix/1-computer-fundamentals/data-structures', description: '数组、链表、树、图的组织方式' },
|
||||
{ title: '算法思维入门', path: '/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking', description: '排序、搜索、递归的思维框架' },
|
||||
{ title: '编程语言图谱', path: '/zh-cn/appendix/1-computer-fundamentals/programming-languages', description: '从汇编到高级语言的演进' },
|
||||
{ title: '网络基础', path: '/zh-cn/appendix/1-computer-fundamentals/computer-networks', description: '从网线到互联网的通信原理' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -25,13 +28,16 @@ const categories = [
|
||||
icon: '🔧',
|
||||
color: '#3b82f6',
|
||||
bgGradient: 'linear-gradient(135deg, #3b82f615, #3b82f608)',
|
||||
description: '熟练使用命令行、Git、IDE 等工具',
|
||||
whyLearn: '工具是开发者的武器。掌握高效的工具使用能让你事半功倍，减少重复劳动。',
|
||||
learningGoals: ['IDE 高效使用', 'Git 版本控制', '命令行操作', '调试与排查'],
|
||||
articles: [
|
||||
{ title: 'IDE 基础', path: '/zh-cn/appendix/2-development-tools/ide-basics' },
|
||||
{ title: '命令行与 Shell', path: '/zh-cn/appendix/2-development-tools/command-line-shell' },
|
||||
{ title: 'Git 版本控制', path: '/zh-cn/appendix/2-development-tools/git-version-control' },
|
||||
{ title: '环境变量与 PATH', path: '/zh-cn/appendix/2-development-tools/environment-path' },
|
||||
{ title: '包管理器', path: '/zh-cn/appendix/2-development-tools/package-managers' },
|
||||
{ title: '调试的艺术', path: '/zh-cn/appendix/2-development-tools/debugging-art/' }
|
||||
{ title: 'IDE 基础', path: '/zh-cn/appendix/2-development-tools/ide-basics', description: 'VS Code、Cursor、Trae 的使用技巧' },
|
||||
{ title: '命令行与 Shell', path: '/zh-cn/appendix/2-development-tools/command-line-shell', description: '终端操作与脚本自动化' },
|
||||
{ title: 'Git 版本控制', path: '/zh-cn/appendix/2-development-tools/git-version-control', description: '版本控制与团队协作' },
|
||||
{ title: '环境变量与 PATH', path: '/zh-cn/appendix/2-development-tools/environment-path', description: '系统环境配置与问题排查' },
|
||||
{ title: '包管理器', path: '/zh-cn/appendix/2-development-tools/package-managers', description: 'npm、pip、cargo 依赖管理' },
|
||||
{ title: '调试的艺术', path: '/zh-cn/appendix/2-development-tools/debugging-art/', description: '断点调试与问题定位' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -40,13 +46,16 @@ const categories = [
|
||||
icon: '🌍',
|
||||
color: '#f59e0b',
|
||||
bgGradient: 'linear-gradient(135deg, #f59e0b15, #f59e0b08)',
|
||||
description: '掌握浏览器原理和前端开发技术',
|
||||
whyLearn: '浏览器是用户接触软件的入口。理解浏览器如何渲染页面，能帮助你构建更流畅的 Web 应用。',
|
||||
learningGoals: ['浏览器渲染原理', 'JavaScript 核心', '前端框架对比', '前端工程化'],
|
||||
articles: [
|
||||
{ title: 'JavaScript 深入', path: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive' },
|
||||
{ title: 'TypeScript', path: '/zh-cn/appendix/3-browser-and-frontend/typescript' },
|
||||
{ title: '浏览器是一个操作系统', path: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os' },
|
||||
{ title: '浏览器渲染管道', path: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering' },
|
||||
{ title: '前端框架对比', path: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks' },
|
||||
{ title: '前端工程化', path: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering' }
|
||||
{ title: 'JavaScript 深入', path: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive', description: '闭包、原型链、异步核心概念' },
|
||||
{ title: 'TypeScript', path: '/zh-cn/appendix/3-browser-and-frontend/typescript', description: '类型安全与接口定义' },
|
||||
{ title: '浏览器是一个操作系统', path: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os', description: '进程模型与资源管理' },
|
||||
{ title: '浏览器渲染管道', path: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering', description: 'DOM、CSSOM、布局与绘制' },
|
||||
{ title: '前端框架对比', path: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks', description: 'React、Vue、Svelte、Angular' },
|
||||
{ title: '前端工程化', path: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering', description: '构建工具与模块化' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -55,14 +64,17 @@ const categories = [
|
||||
icon: '⚙️',
|
||||
color: '#8b5cf6',
|
||||
bgGradient: 'linear-gradient(135deg, #8b5cf615, #8b5cf608)',
|
||||
description: '构建可靠的后端服务和 API',
|
||||
whyLearn: '后端是应用的神经中枢。学会设计 API、处理数据，能让你独立完成全栈开发。',
|
||||
learningGoals: ['HTTP 协议', 'API 设计原则', '认证与授权', '缓存与消息队列'],
|
||||
articles: [
|
||||
{ title: '后端语言对比', path: '/zh-cn/appendix/4-server-and-backend/backend-languages' },
|
||||
{ title: 'HTTP 协议', path: '/zh-cn/appendix/4-server-and-backend/http-protocol' },
|
||||
{ title: 'API 设计哲学', path: '/zh-cn/appendix/4-server-and-backend/api-design' },
|
||||
{ title: 'Web 框架的本质', path: '/zh-cn/appendix/4-server-and-backend/web-frameworks' },
|
||||
{ title: '认证与授权', path: '/zh-cn/appendix/4-server-and-backend/auth-authorization' },
|
||||
{ title: '缓存策略', path: '/zh-cn/appendix/4-server-and-backend/caching' },
|
||||
{ title: '消息队列', path: '/zh-cn/appendix/4-server-and-backend/message-queues' }
|
||||
{ title: '后端语言对比', path: '/zh-cn/appendix/4-server-and-backend/backend-languages', description: 'Go、Node.js、Python 后端选型' },
|
||||
{ title: 'HTTP 协议', path: '/zh-cn/appendix/4-server-and-backend/http-protocol', description: '请求响应与状态码' },
|
||||
{ title: 'API 设计哲学', path: '/zh-cn/appendix/4-server-and-backend/api-design', description: 'RESTful 与 GraphQL 设计' },
|
||||
{ title: 'Web 框架的本质', path: '/zh-cn/appendix/4-server-and-backend/web-frameworks', description: '路由、中间件、模板引擎' },
|
||||
{ title: '认证与授权', path: '/zh-cn/appendix/4-server-and-backend/auth-authorization', description: 'JWT、OAuth 与权限控制' },
|
||||
{ title: '缓存策略', path: '/zh-cn/appendix/4-server-and-backend/caching', description: 'Redis 与 CDN 缓存' },
|
||||
{ title: '消息队列', path: '/zh-cn/appendix/4-server-and-backend/message-queues', description: 'RabbitMQ、Kafka 应用' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -71,11 +83,14 @@ const categories = [
|
||||
icon: '📊',
|
||||
color: '#ec4899',
|
||||
bgGradient: 'linear-gradient(135deg, #ec489915, #ec489908)',
|
||||
description: '掌握数据库和数据分析技能',
|
||||
whyLearn: '数据是现代应用的核心资产。学会存储、查询、分析数据，能帮助你做出数据驱动的决策。',
|
||||
learningGoals: ['SQL 查询', '数据库原理', '数据模型设计', '数据分析基础'],
|
||||
articles: [
|
||||
{ title: 'SQL', path: '/zh-cn/appendix/5-data/sql' },
|
||||
{ title: '数据库原理', path: '/zh-cn/appendix/5-data/database-fundamentals' },
|
||||
{ title: '数据模型全景', path: '/zh-cn/appendix/5-data/data-models' },
|
||||
{ title: '数据分析基础', path: '/zh-cn/appendix/5-data/data-analysis' }
|
||||
{ title: 'SQL', path: '/zh-cn/appendix/5-data/sql', description: '查询、聚合与事务' },
|
||||
{ title: '数据库原理', path: '/zh-cn/appendix/5-data/database-fundamentals', description: '索引、事务与隔离级别' },
|
||||
{ title: '数据模型全景', path: '/zh-cn/appendix/5-data/data-models', description: '关系型 vs NoSQL vs NewSQL' },
|
||||
{ title: '数据分析基础', path: '/zh-cn/appendix/5-data/data-analysis', description: 'Excel、SQL 与 BI 可视化' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -84,11 +99,14 @@ const categories = [
|
||||
icon: '🏗️',
|
||||
color: '#14b8a6',
|
||||
bgGradient: 'linear-gradient(135deg, #14b8a615, #14b8a608)',
|
||||
description: '学习系统设计和架构模式',
|
||||
whyLearn: '架构决定系统的未来。学会从宏观角度设计系统，能让你构建可扩展的大型应用。',
|
||||
learningGoals: ['微服务架构', '分布式系统', '高可用设计', '系统设计方法论'],
|
||||
articles: [
|
||||
{ title: '从单体到微服务', path: '/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices' },
|
||||
{ title: '分布式系统', path: '/zh-cn/appendix/6-architecture-and-system-design/distributed-systems' },
|
||||
{ title: '高可用与容灾', path: '/zh-cn/appendix/6-architecture-and-system-design/high-availability' },
|
||||
{ title: '系统设计方法论', path: '/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology' }
|
||||
{ title: '从单体到微服务', path: '/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices', description: '服务拆分与架构演进' },
|
||||
{ title: '分布式系统', path: '/zh-cn/appendix/6-architecture-and-system-design/distributed-systems', description: 'CAP 定理与一致性' },
|
||||
{ title: '高可用与容灾', path: '/zh-cn/appendix/6-architecture-and-system-design/high-availability', description: '负载均衡与故障转移' },
|
||||
{ title: '系统设计方法论', path: '/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology', description: '从需求到方案的思路' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -97,11 +115,14 @@ const categories = [
|
||||
icon: '☁️',
|
||||
color: '#06b6d4',
|
||||
bgGradient: 'linear-gradient(135deg, #06b6d415, #06b6d408)',
|
||||
description: '掌握云原生和运维技能',
|
||||
whyLearn: '基础设施是应用的底座。学会容器化、自动化部署，能让你高效地运维应用。',
|
||||
learningGoals: ['Linux 基础', 'Docker 容器化', 'Kubernetes', 'CI/CD 自动化'],
|
||||
articles: [
|
||||
{ title: 'Linux 基础', path: '/zh-cn/appendix/7-infrastructure-and-operations/linux-basics' },
|
||||
{ title: 'Docker 容器化', path: '/zh-cn/appendix/7-infrastructure-and-operations/docker-containers' },
|
||||
{ title: 'Kubernetes', path: '/zh-cn/appendix/7-infrastructure-and-operations/kubernetes' },
|
||||
{ title: 'CI/CD 自动化', path: '/zh-cn/appendix/7-infrastructure-and-operations/ci-cd' }
|
||||
{ title: 'Linux 基础', path: '/zh-cn/appendix/7-infrastructure-and-operations/linux-basics', description: '文件系统与进程管理' },
|
||||
{ title: 'Docker 容器化', path: '/zh-cn/appendix/7-infrastructure-and-operations/docker-containers', description: '镜像、容器与网络' },
|
||||
{ title: 'Kubernetes', path: '/zh-cn/appendix/7-infrastructure-and-operations/kubernetes', description: 'Pod、Deployment 与 Service' },
|
||||
{ title: 'CI/CD 自动化', path: '/zh-cn/appendix/7-infrastructure-and-operations/ci-cd', description: 'GitHub Actions 与流水线' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -110,13 +131,16 @@ const categories = [
|
||||
icon: '🤖',
|
||||
color: '#f97316',
|
||||
bgGradient: 'linear-gradient(135deg, #f9731615, #f9731608)',
|
||||
description: '了解 AI 原理和 LLM 应用开发',
|
||||
whyLearn: 'AI 正在改变软件开发的方式。理解大语言模型，能帮助你更好地利用 AI 提升效率。',
|
||||
learningGoals: ['神经网络基础', 'Transformer 架构', 'LLM 原理', 'RAG 与 Agent'],
|
||||
articles: [
|
||||
{ title: 'AI 简史', path: '/zh-cn/appendix/8-artificial-intelligence/ai-history' },
|
||||
{ title: '神经网络', path: '/zh-cn/appendix/8-artificial-intelligence/neural-networks' },
|
||||
{ title: 'Transformer', path: '/zh-cn/appendix/8-artificial-intelligence/transformer-attention' },
|
||||
{ title: '大语言模型原理', path: '/zh-cn/appendix/8-artificial-intelligence/llm-principles' },
|
||||
{ title: 'RAG 架构', path: '/zh-cn/appendix/8-artificial-intelligence/rag' },
|
||||
{ title: 'AI Agent', path: '/zh-cn/appendix/8-artificial-intelligence/ai-agents' }
|
||||
{ title: 'AI 简史', path: '/zh-cn/appendix/8-artificial-intelligence/ai-history', description: '从专家系统到深度学习' },
|
||||
{ title: '神经网络', path: '/zh-cn/appendix/8-artificial-intelligence/neural-networks', description: '感知机与反向传播' },
|
||||
{ title: 'Transformer', path: '/zh-cn/appendix/8-artificial-intelligence/transformer-attention', description: '注意力机制与自注意力' },
|
||||
{ title: '大语言模型原理', path: '/zh-cn/appendix/8-artificial-intelligence/llm-principles', description: '预训练与指令微调' },
|
||||
{ title: 'RAG 架构', path: '/zh-cn/appendix/8-artificial-intelligence/rag', description: '检索增强生成实战' },
|
||||
{ title: 'AI Agent', path: '/zh-cn/appendix/8-artificial-intelligence/ai-agents', description: 'Agent 架构与工具调用' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -125,24 +149,39 @@ const categories = [
|
||||
icon: '✨',
|
||||
color: '#a855f7',
|
||||
bgGradient: 'linear-gradient(135deg, #a855f715, #a855f708)',
|
||||
description: '提升代码质量和工程实践能力',
|
||||
whyLearn: '代码是写给人看的。掌握设计模式、测试策略，能让你写出更优雅、更易维护的代码。',
|
||||
learningGoals: ['设计模式', '代码重构', '测试策略', '技术写作'],
|
||||
articles: [
|
||||
{ title: '设计模式', path: '/zh-cn/appendix/9-engineering-excellence/design-patterns' },
|
||||
{ title: '代码质量与重构', path: '/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring' },
|
||||
{ title: '测试策略', path: '/zh-cn/appendix/9-engineering-excellence/testing-strategies' },
|
||||
{ title: '技术写作', path: '/zh-cn/appendix/9-engineering-excellence/technical-writing' },
|
||||
{ title: '开源协作', path: '/zh-cn/appendix/9-engineering-excellence/open-source-collaboration' }
|
||||
{ title: '设计模式', path: '/zh-cn/appendix/9-engineering-excellence/design-patterns', description: 'SOLID 原则与 23 种模式' },
|
||||
{ title: '代码质量与重构', path: '/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring', description: '坏味道与重构手法' },
|
||||
{ title: '测试策略', path: '/zh-cn/appendix/9-engineering-excellence/testing-strategies', description: '单元测试、集成测试、E2E' },
|
||||
{ title: '技术写作', path: '/zh-cn/appendix/9-engineering-excellence/technical-writing', description: '文档与 API 编写规范' },
|
||||
{ title: '开源协作', path: '/zh-cn/appendix/9-engineering-excellence/open-source-collaboration', description: 'Issue、PR 与社区参与' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const activeCategory = ref(null)
|
||||
const hoveredArticle = ref(null)
|
||||
const showDetail = ref(true)
|
||||
|
||||
const toggleCategory = (id) => {
|
||||
activeCategory.value = activeCategory.value === id ? null : id
|
||||
showDetail.value = true
|
||||
}
|
||||
|
||||
const articleCount = categories.reduce((sum, cat) => sum + cat.articles.length, 0)
|
||||
|
||||
const activeCategoryData = computed(() => {
|
||||
if (!activeCategory.value) return null
|
||||
return categories.find(cat => cat.id === activeCategory.value)
|
||||
})
|
||||
|
||||
const hoveredArticleData = computed(() => {
|
||||
if (!hoveredArticle.value || !activeCategoryData.value) return null
|
||||
return activeCategoryData.value.articles.find(article => article.path === hoveredArticle.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -152,45 +191,89 @@ const articleCount = categories.reduce((sum, cat) => sum + cat.articles.length,
|
||||
<p class="bento-subtitle">9 个主题方向 · {{ articleCount }} 篇文章</p>
|
||||
</div>
|
||||
|
||||
<div class="bento-grid">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="bento-card"
|
||||
:class="{ active: activeCategory === category.id }"
|
||||
:style="{
|
||||
'--card-color': category.color,
|
||||
'--card-bg': category.bgGradient
|
||||
}"
|
||||
@click="toggleCategory(category.id)"
|
||||
>
|
||||
<div class="card-icon">{{ category.icon }}</div>
|
||||
<div class="card-content">
|
||||
<h4 class="card-title">{{ category.name }}</h4>
|
||||
<p class="card-count">{{ category.articles.length }} 篇</p>
|
||||
</div>
|
||||
|
||||
<Transition name="pop">
|
||||
<div v-if="activeCategory === category.id" class="card-articles">
|
||||
<a
|
||||
v-for="article in category.articles"
|
||||
:key="article.path"
|
||||
:href="withBase(article.path)"
|
||||
class="article-item"
|
||||
@mouseenter="hoveredArticle = article.path"
|
||||
@mouseleave="hoveredArticle = null"
|
||||
>
|
||||
<span class="article-dot"></span>
|
||||
<span class="article-title">{{ article.title }}</span>
|
||||
<span class="article-arrow">→</span>
|
||||
</a>
|
||||
<div class="bento-main">
|
||||
<div class="bento-grid">
|
||||
<div
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="bento-card"
|
||||
:class="{ active: activeCategory === category.id }"
|
||||
:style="{
|
||||
'--card-color': category.color,
|
||||
'--card-bg': category.bgGradient
|
||||
}"
|
||||
@click="toggleCategory(category.id)"
|
||||
>
|
||||
<div class="card-icon">{{ category.icon }}</div>
|
||||
<div class="card-content">
|
||||
<h4 class="card-title">{{ category.name }}</h4>
|
||||
<p class="card-count">{{ category.articles.length }} 篇</p>
|
||||
</div>
|
||||
|
||||
<div class="card-indicator" v-if="activeCategory !== category.id">
|
||||
<span>{{ category.articles.length }} 篇 →</span>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<div class="card-indicator" v-if="activeCategory !== category.id">
|
||||
<span>{{ category.articles.length }} 篇 →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="slide">
|
||||
<div
|
||||
v-if="activeCategoryData"
|
||||
class="detail-panel"
|
||||
:style="{ '--panel-color': activeCategoryData.color }"
|
||||
>
|
||||
<!-- 头部信息 -->
|
||||
<div class="panel-header">
|
||||
<div class="panel-title-row">
|
||||
<span class="panel-icon">{{ hoveredArticleData ? '📄' : activeCategoryData.icon }}</span>
|
||||
<div class="panel-title-group">
|
||||
<h4 class="panel-title">{{ hoveredArticleData?.title || activeCategoryData.name }}</h4>
|
||||
<p class="panel-desc">{{ hoveredArticleData?.description || activeCategoryData.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类介绍 -->
|
||||
<div v-if="!hoveredArticleData" class="panel-intro">
|
||||
<p class="intro-text">{{ activeCategoryData.whyLearn }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 学习目标 -->
|
||||
<div v-if="!hoveredArticleData" class="panel-goals">
|
||||
<h5 class="goals-title">能学到什么？</h5>
|
||||
<div class="goals-list">
|
||||
<span v-for="(goal, index) in activeCategoryData.learningGoals" :key="index" class="goal-tag">
|
||||
{{ goal }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章列表区 -->
|
||||
<div class="panel-articles">
|
||||
<div class="articles-header">
|
||||
<span class="articles-icon">{{ activeCategoryData.icon }}</span>
|
||||
<span class="articles-title">文章列表 ({{ activeCategoryData.articles.length }}篇)</span>
|
||||
</div>
|
||||
<div class="articles-list-scroll">
|
||||
<a
|
||||
v-for="article in activeCategoryData.articles"
|
||||
:key="article.path"
|
||||
:href="withBase(article.path)"
|
||||
class="article-item"
|
||||
:class="{ hover: hoveredArticle === article.path }"
|
||||
@mouseenter="hoveredArticle = article.path"
|
||||
@mouseleave="hoveredArticle = null"
|
||||
>
|
||||
<span class="article-bullet"></span>
|
||||
<div class="article-info">
|
||||
<span class="article-name">{{ article.title }}</span>
|
||||
<span class="article-desc">{{ article.description }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -219,24 +302,19 @@ const articleCount = categories.reduce((sum, cat) => sum + cat.articles.length,
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bento-main {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 360px;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.bento-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.bento-card {
|
||||
position: relative;
|
||||
background: var(--vp-c-bg);
|
||||
@@ -269,7 +347,6 @@ const articleCount = categories.reduce((sum, cat) => sum + cat.articles.length,
|
||||
|
||||
.bento-card.active {
|
||||
border-color: var(--card-color);
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.bento-card.active::before {
|
||||
@@ -312,79 +389,210 @@ const articleCount = categories.reduce((sum, cat) => sum + cat.articles.length,
|
||||
color: var(--card-color);
|
||||
}
|
||||
|
||||
.card-articles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
/* 右侧面板 */
|
||||
.detail-panel {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 15px;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
z-index: 2;
|
||||
border: 1px solid var(--panel-color);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
max-height: 520px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.panel-title-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.panel-icon {
|
||||
font-size: 1.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.panel-title-group {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin: 0 0 0.25rem;
|
||||
}
|
||||
|
||||
.panel-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.panel-intro {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 学习目标 */
|
||||
.panel-goals {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.goals-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--panel-color);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.goals-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.goal-tag {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.3rem 0.6rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
/* 文章列表区 */
|
||||
.panel-articles {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.articles-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.articles-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.articles-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--panel-color);
|
||||
}
|
||||
|
||||
.articles-list-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.article-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
align-items: flex-start;
|
||||
gap: 0.6rem;
|
||||
padding: 0.6rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
color: var(--vp-c-text-1);
|
||||
transition: all 0.15s ease;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.article-item:hover {
|
||||
.article-item:hover,
|
||||
.article-item.hover {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.article-dot {
|
||||
.article-bullet {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--card-color);
|
||||
background: var(--panel-color);
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
.article-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.article-name {
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.article-arrow {
|
||||
opacity: 0;
|
||||
color: var(--card-color);
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.9rem;
|
||||
.article-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.article-item:hover .article-arrow {
|
||||
opacity: 1;
|
||||
transform: translateX(3px);
|
||||
/* 动画 */
|
||||
.slide-enter-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.pop-enter-active {
|
||||
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.pop-leave-active {
|
||||
.slide-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.pop-enter-from {
|
||||
.slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.pop-leave-to {
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 1100px) {
|
||||
.bento-main {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.bento-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.bento-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const activeOp = ref('groupBy')
|
||||
|
||||
const rawOrders = [
|
||||
{ userId: 'U001', orderId: 'ORD001', amount: 100, date: '2024-01-01' },
|
||||
{ userId: 'U001', orderId: 'ORD002', amount: 200, date: '2024-01-02' },
|
||||
{ userId: 'U002', orderId: 'ORD003', amount: 150, date: '2024-01-01' },
|
||||
{ userId: 'U002', orderId: 'ORD004', amount: 300, date: '2024-01-03' },
|
||||
{ userId: 'U003', orderId: 'ORD005', amount: 250, date: '2024-01-02' },
|
||||
{ userId: 'U001', orderId: 'ORD006', amount: 180, date: '2024-01-04' }
|
||||
]
|
||||
|
||||
const ops = {
|
||||
groupBy: {
|
||||
name: '按用户分组',
|
||||
sql: `SELECT user_id, COUNT(*) as order_count, SUM(amount) as total
|
||||
FROM orders GROUP BY user_id;`,
|
||||
columns: ['用户 ID', '订单数', '总金额'],
|
||||
data: [
|
||||
{ '用户 ID': 'U001', 订单数: 3, 总金额: 480 },
|
||||
{ '用户 ID': 'U002', 订单数: 2, 总金额: 450 },
|
||||
{ '用户 ID': 'U003', 订单数: 1, 总金额: 250 }
|
||||
]
|
||||
},
|
||||
sum: {
|
||||
name: '总销售额',
|
||||
sql: `SELECT SUM(amount) as total_sales FROM orders;`,
|
||||
columns: ['总销售额'],
|
||||
data: [{ 总销售额: 1180 }]
|
||||
},
|
||||
avg: {
|
||||
name: '平均订单额',
|
||||
sql: `SELECT AVG(amount) as avg_amount FROM orders;`,
|
||||
columns: ['平均订单额'],
|
||||
data: [{ 平均订单额: 196.67 }]
|
||||
},
|
||||
max: {
|
||||
name: '最大订单额',
|
||||
sql: `SELECT MAX(amount) as max_amount FROM orders;`,
|
||||
columns: ['最大订单额'],
|
||||
data: [{ 最大订单额: 300 }]
|
||||
}
|
||||
}
|
||||
|
||||
const opKeys = Object.keys(ops)
|
||||
const currentOp = computed(() => ops[activeOp.value])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="agg-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🧮</span>
|
||||
<span class="title">数据聚合演示</span>
|
||||
<span class="subtitle">拆分-计算-组合</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
"所有用户平均转化率 5%" 往往毫无意义。通过
|
||||
<span class="hl">分组聚合</span>
|
||||
把数据"切开"，才能发现不同用户之间的真实差异。点击下方操作，观察同一份原始数据如何产生不同的
|
||||
<span class="hl">聚合视角</span>。
|
||||
</div>
|
||||
|
||||
<!-- 原始数据表 -->
|
||||
<div class="section">
|
||||
<div class="section-label">原始订单数据</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>用户 ID</th>
|
||||
<th>订单号</th>
|
||||
<th>金额（元）</th>
|
||||
<th>日期</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="r in rawOrders" :key="r.orderId">
|
||||
<td>{{ r.userId }}</td>
|
||||
<td>{{ r.orderId }}</td>
|
||||
<td>{{ r.amount }}</td>
|
||||
<td>{{ r.date }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="ops-row">
|
||||
<button
|
||||
v-for="k in opKeys"
|
||||
:key="k"
|
||||
:class="['op-btn', { active: activeOp === k }]"
|
||||
@click="activeOp = k"
|
||||
>
|
||||
{{ ops[k].name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 聚合结果 -->
|
||||
<div class="section result-section">
|
||||
<div class="section-label">{{ currentOp.name }} 结果</div>
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="col in currentOp.columns" :key="col">{{ col }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, i) in currentOp.data" :key="i">
|
||||
<td v-for="col in currentOp.columns" :key="col">
|
||||
{{ row[col] }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sql-block">
|
||||
<div class="sql-label">SQL 示例</div>
|
||||
<pre class="sql-code">{{ currentOp.sql }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.agg-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
padding: 16px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--vp-c-bg-alt);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
.ops-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 0 20px 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.op-btn {
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.op-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.op-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.sql-block {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sql-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sql-code {
|
||||
margin: 0;
|
||||
padding: 10px 12px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ops-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,124 +1,95 @@
|
||||
<template>
|
||||
<div class="demo data-tracking-demo">
|
||||
<div class="header">
|
||||
<span class="title">数据埋点与采集演示</span>
|
||||
</div>
|
||||
|
||||
<!-- Overview Diagram -->
|
||||
<div v-if="activeTab === 'overview'" class="content">
|
||||
<div class="overview-container">
|
||||
<div class="app-screen">
|
||||
<div class="app-header">电商 App</div>
|
||||
<div class="app-body">
|
||||
<div class="product-card">
|
||||
<div class="product-img"></div>
|
||||
<div class="product-info">新款手机</div>
|
||||
<div class="product-btn">点击购买</div>
|
||||
</div>
|
||||
<!-- Animated click cursor and ripple -->
|
||||
<div class="animation-cursor"></div>
|
||||
<div class="animation-ripple"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-flow">
|
||||
<div class="flow-line"></div>
|
||||
<div class="data-packet">
|
||||
<span class="bracket">{</span>
|
||||
<div class="packet-lines">
|
||||
<div class="pline">e: "click_buy"</div>
|
||||
<div class="pline">u: "user123"</div>
|
||||
</div>
|
||||
<span class="bracket">}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="server-db">
|
||||
<div class="server-header">后端分析系统</div>
|
||||
<div class="server-body">
|
||||
<div class="db-row">user123 | click_buy | 10:05</div>
|
||||
<div class="db-row skeleton"></div>
|
||||
<div class="db-row skeleton"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="desc">用户每一次关键操作都在底层触发了一个埋点事件，飞掠网络被永远记录在案。</p>
|
||||
</div>
|
||||
|
||||
<!-- Methods Compare -->
|
||||
<!-- Methods: 同一场景，三种方式各自捕获到什么 -->
|
||||
<div v-if="activeTab === 'methods'" class="content">
|
||||
<div class="methods-compare">
|
||||
<div class="method-card">
|
||||
<div class="method-title">代码埋点 (Code)</div>
|
||||
<div class="method-body">
|
||||
<div class="code-block">tracker.track('buy', { price: 299 })</div>
|
||||
<div class="method-pro">极度精准、深入业务字段</div>
|
||||
<div class="method-con">需要开发排期，成本高</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-card">
|
||||
<div class="method-title">可视化埋点 (Visual)</div>
|
||||
<div class="method-body">
|
||||
<div class="visual-tool">
|
||||
<div class="v-box selected"></div>
|
||||
<div class="v-box"></div>
|
||||
</div>
|
||||
<div class="method-pro">产品经理可自行圈选</div>
|
||||
<div class="method-con">只能抓取表层点击，无法获取深层属性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="method-card">
|
||||
<div class="method-title">全埋点 (Auto)</div>
|
||||
<div class="method-body">
|
||||
<div class="auto-tool">
|
||||
<div class="noise-line"></div>
|
||||
<div class="noise-line"></div>
|
||||
<div class="noise-line"></div>
|
||||
</div>
|
||||
<div class="method-pro">无死角全量捕捉</div>
|
||||
<div class="method-con">数据如同雪花般庞大，无用噪音极多</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scenario-bar">场景：用户在电商 App 点击了「加入购物车」按钮</div>
|
||||
<table class="capture-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-dim">捕获到的信息</th>
|
||||
<th>代码埋点</th>
|
||||
<th>可视化埋点</th>
|
||||
<th>全埋点</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in captureRows" :key="row.label">
|
||||
<td class="col-dim">{{ row.label }}</td>
|
||||
<td><span :class="row.code ? 'yes' : 'no'">{{ row.code ? '✔' : '✘' }}</span></td>
|
||||
<td><span :class="row.visual ? 'yes' : 'no'">{{ row.visual ? '✔' : '✘' }}</span></td>
|
||||
<td><span :class="row.auto ? 'yes' : 'no'">{{ row.auto ? '✔' : '✘' }}</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="capture-footer">
|
||||
<span class="cf-item"><span class="yes">✔</span> 能捕获</span>
|
||||
<span class="cf-item"><span class="no">✘</span> 无法捕获</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Model -->
|
||||
<!-- Model: 点击模拟，看 JSON 逐行组装 -->
|
||||
<div v-if="activeTab === 'model'" class="content">
|
||||
<div class="model-container">
|
||||
<div class="json-code">
|
||||
{
|
||||
<span class="key">"event_name"</span>: <span class="string">"add_to_cart"</span>, <span class="comment">// 发生了什么 (What)</span>
|
||||
<span class="key">"timestamp"</span>: <span class="number">1723456789000</span>, <span class="comment">// 什么时候 (When)</span>
|
||||
<span class="key">"user_id"</span>: <span class="string">"u_98765"</span>, <span class="comment">// 是谁 (Who)</span>
|
||||
|
||||
<span class="key">"common_props"</span>: { <span class="comment">// 在哪里/环境 (Where & How)</span>
|
||||
<span class="key">"device"</span>: <span class="string">"iPhone 15Pro"</span>,
|
||||
<span class="key">"network"</span>: <span class="string">"5G"</span>,
|
||||
<span class="key">"os"</span>: <span class="string">"iOS 17"</span>
|
||||
},
|
||||
|
||||
<span class="key">"custom_props"</span>: { <span class="comment">// 业务详情 (Details)</span>
|
||||
<span class="key">"product_id"</span>: <span class="string">"p_001"</span>,
|
||||
<span class="key">"price"</span>: <span class="number">7999.00</span>
|
||||
}
|
||||
}
|
||||
<div class="sim-header">
|
||||
<button class="sim-btn" @click="runSimulation" :disabled="simRunning">
|
||||
{{ simRunning ? '记录生成中...' : '模拟：用户点击「加入购物车」' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="json-build">
|
||||
<div class="json-line" v-for="(line, i) in jsonLines" :key="i"
|
||||
:class="{ visible: simStep > i, highlight: simStep === i + 1 }">
|
||||
<span class="line-tag" :style="{ background: line.color }">{{ line.tag }}</span>
|
||||
<code>{{ line.code }}</code>
|
||||
</div>
|
||||
</div>
|
||||
<p class="desc">每一个标准事件都必须回答 4W1H：Who, What, When, Where, How。</p>
|
||||
<div class="sim-hint" v-if="simStep === 0">点击上方按钮，观察一条埋点记录是如何被组装出来的</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Pipeline -->
|
||||
<!-- Pipeline: 动画数据流 -->
|
||||
<div v-if="activeTab === 'pipeline'" class="content">
|
||||
<div class="pipeline-flow">
|
||||
<div class="pipe-node">App 客户端</div>
|
||||
<div class="pipe-arrow">本地缓存<br>批量上报</div>
|
||||
<div class="pipe-node server">接入网关</div>
|
||||
<div class="pipe-arrow">消息队列</div>
|
||||
<div class="pipe-node etl">清洗 (ETL)</div>
|
||||
<div class="pipe-arrow">入库</div>
|
||||
<div class="pipe-node db">数据仓库</div>
|
||||
</div>
|
||||
<p class="desc">数据并非立刻入库，为了抵御高并发和弱网环境，它必须经历缓存、打包、列队和清洗的漫长流水线。</p>
|
||||
<div class="pipe-visual">
|
||||
<div class="pipe-stage" v-for="(s, i) in pipeStages" :key="i">
|
||||
<div class="stage-icon" :style="{ background: s.bg }">{{ s.icon }}</div>
|
||||
<div class="stage-name">{{ s.name }}</div>
|
||||
</div>
|
||||
<div class="pipe-track">
|
||||
<div class="packet" :class="{ flying: pipeFlying }"
|
||||
v-for="n in 3" :key="n"
|
||||
:style="{ animationDelay: (n - 1) * 0.6 + 's' }">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="sim-btn pipe-btn" @click="startPipeAnim">
|
||||
{{ pipeFlying ? '传输中...' : '模拟：发送一批数据' }}
|
||||
</button>
|
||||
<div class="pipe-legend">
|
||||
<span v-for="(s, i) in pipeStages" :key="i" class="legend-item">
|
||||
<span class="legend-dot" :style="{ background: s.bg }"></span>{{ s.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ETL: before / after 数据对比 -->
|
||||
<div v-if="activeTab === 'overview'" class="content">
|
||||
<div class="etl-compare">
|
||||
<div class="etl-side etl-before">
|
||||
<div class="etl-side-title">原始数据（服务器收到的）</div>
|
||||
<div class="etl-row-data" v-for="(r, i) in rawData" :key="i" :class="r.issue">
|
||||
<code>{{ r.text }}</code>
|
||||
<span class="issue-tag" v-if="r.tag">{{ r.tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="etl-arrow-col">
|
||||
<div class="etl-arrow-label">ETL 清洗</div>
|
||||
<div class="etl-arrow-icon">→</div>
|
||||
</div>
|
||||
<div class="etl-side etl-after">
|
||||
<div class="etl-side-title">清洗后（写入数据仓库的）</div>
|
||||
<div class="etl-row-data clean" v-for="(r, i) in cleanData" :key="i">
|
||||
<code>{{ r }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -128,13 +99,77 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
tab: {
|
||||
type: String,
|
||||
default: 'overview'
|
||||
}
|
||||
tab: { type: String, default: 'overview' }
|
||||
})
|
||||
|
||||
const activeTab = ref(props.tab)
|
||||
|
||||
// === Methods tab: 同一场景，三种方式各自能捕获什么 ===
|
||||
const captureRows = [
|
||||
{ label: '点击了哪个按钮', code: true, visual: true, auto: true },
|
||||
{ label: '点击发生的时间', code: true, visual: true, auto: true },
|
||||
{ label: '用户停留了多久', code: false, visual: false, auto: true },
|
||||
{ label: '商品名称 / 价格', code: true, visual: false, auto: false },
|
||||
{ label: '用了哪张优惠券', code: true, visual: false, auto: false },
|
||||
{ label: '账户余额', code: true, visual: false, auto: false },
|
||||
{ label: '页面滑动轨迹', code: false, visual: false, auto: true }
|
||||
]
|
||||
|
||||
// === Model tab: 模拟 JSON 逐行组装 ===
|
||||
const simStep = ref(0)
|
||||
const simRunning = ref(false)
|
||||
const jsonLines = [
|
||||
{ tag: 'What', color: '#10b981', code: '"event": "add_to_cart"' },
|
||||
{ tag: 'Who', color: '#3b82f6', code: '"user_id": "u_98765"' },
|
||||
{ tag: 'When', color: '#8b5cf6', code: '"time": "2025-08-12T10:33:09Z"' },
|
||||
{ tag: 'Where', color: '#f59e0b', code: '"device": "iPhone 15", "network": "5G"' },
|
||||
{ tag: 'What', color: '#10b981', code: '"product": "新款手机", "price": 2999' }
|
||||
]
|
||||
|
||||
function runSimulation() {
|
||||
if (simRunning.value) return
|
||||
simRunning.value = true
|
||||
simStep.value = 0
|
||||
let i = 0
|
||||
const timer = setInterval(() => {
|
||||
i++
|
||||
simStep.value = i
|
||||
if (i >= jsonLines.length) {
|
||||
clearInterval(timer)
|
||||
simRunning.value = false
|
||||
}
|
||||
}, 600)
|
||||
}
|
||||
|
||||
// === Pipeline tab: 动画数据流 ===
|
||||
const pipeFlying = ref(false)
|
||||
const pipeStages = [
|
||||
{ icon: '📱', name: '手机', label: '产生数据', bg: '#e0f2fe' },
|
||||
{ icon: '📦', name: '打包', label: '攒一批', bg: '#fef08a' },
|
||||
{ icon: '🌐', name: '发送', label: '网络传输', bg: '#fed7aa' },
|
||||
{ icon: '🚦', name: '排队', label: '消息队列', bg: '#fecaca' },
|
||||
{ icon: '🗄️', name: '入库', label: '数据仓库', bg: '#bbf7d0' }
|
||||
]
|
||||
|
||||
function startPipeAnim() {
|
||||
if (pipeFlying.value) return
|
||||
pipeFlying.value = true
|
||||
setTimeout(() => { pipeFlying.value = false }, 3000)
|
||||
}
|
||||
|
||||
// === ETL tab: before / after 对比 ===
|
||||
const rawData = [
|
||||
{ text: 'id-001 userId: "zhang" add_to_cart ¥2999', issue: '', tag: '' },
|
||||
{ text: 'id-001 userId: "zhang" add_to_cart ¥2999', issue: 'dup', tag: '重复' },
|
||||
{ text: 'id-002 user_id: "li" click_buy ¥0', issue: '', tag: '' },
|
||||
{ text: 'id-003 userId: "wang" pay 1970-01-01', issue: 'bad', tag: '时间异常' },
|
||||
{ text: 'id-004 user_id: "zhao" click_buy ¥599', issue: '', tag: '' }
|
||||
]
|
||||
|
||||
const cleanData = [
|
||||
'id-001 user_id: "zhang" add_to_cart ¥2999',
|
||||
'id-002 user_id: "li" click_buy ¥0',
|
||||
'id-004 user_id: "zhao" click_buy ¥599'
|
||||
]
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -144,20 +179,6 @@ const activeTab = ref(props.tab)
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -165,326 +186,348 @@ const activeTab = ref(props.tab)
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
.dark .content {
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
|
||||
/* Overview Styles & Animations */
|
||||
.overview-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.app-screen {
|
||||
width: 140px;
|
||||
height: 220px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
border: 4px solid #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
.sim-btn {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
padding: 10px 24px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.sim-btn:hover:not(:disabled) { background: #2563eb; }
|
||||
.sim-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
/* === Methods: Capture Table === */
|
||||
.scenario-bar {
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
height: 60px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
font-size: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.product-btn {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes cursor-move {
|
||||
0% { transform: translate(60px, 180px); opacity: 0; }
|
||||
20% { opacity: 1; }
|
||||
40% { transform: translate(60px, 120px); }
|
||||
50% { transform: translate(60px, 120px) scale(0.9); }
|
||||
60% { transform: translate(60px, 120px); }
|
||||
80% { opacity: 1; }
|
||||
100% { transform: translate(60px, 180px); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes ripple-effect {
|
||||
0% { transform: scale(0.5); opacity: 1; }
|
||||
100% { transform: scale(2); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes packet-fly {
|
||||
0% { left: 0; opacity: 0; }
|
||||
10% { opacity: 1; left: 0;}
|
||||
90% { left: 100%; opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
.animation-cursor {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 12px; height: 12px;
|
||||
background: #1e293b;
|
||||
border-radius: 50%;
|
||||
animation: cursor-move 3s infinite;
|
||||
}
|
||||
|
||||
.animation-ripple {
|
||||
position: absolute;
|
||||
top: 120px; left: 60px;
|
||||
width: 20px; height: 20px;
|
||||
border: 2px solid #ef4444;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: ripple-effect 3s infinite;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.data-flow {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
position: relative;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.flow-line {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: dashed 2px #cbd5e1;
|
||||
}
|
||||
|
||||
.data-packet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateY(-5px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
background: #e0f2fe;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
color: #0369a1;
|
||||
animation: packet-fly 3s infinite;
|
||||
animation-delay: 1.5s;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.server-db {
|
||||
width: 160px;
|
||||
background: #1e293b;
|
||||
.capture-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.server-header {
|
||||
background: #334155;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.server-body {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.db-row {
|
||||
background: #475569;
|
||||
color: #94a3b8;
|
||||
padding: 4px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.db-row.skeleton {
|
||||
height: 14px;
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
/* Methods Compare */
|
||||
.methods-compare {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.method-card {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.method-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
color: #1e293b;
|
||||
.capture-table th,
|
||||
.capture-table td {
|
||||
padding: 10px 14px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
background: #1e293b;
|
||||
color: #cbd5e1;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
margin-bottom: 12px;
|
||||
.capture-table th {
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.visual-tool {
|
||||
background: #f1f5f9;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
.col-dim {
|
||||
text-align: left !important;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.yes { color: #16a34a; font-weight: 700; }
|
||||
.no { color: #dc2626; opacity: 0.4; }
|
||||
|
||||
.capture-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.v-box {
|
||||
width: 20px; height: 20px;
|
||||
background: #cbd5e1;
|
||||
border-radius: 2px;
|
||||
.cf-item { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
/* === Model: JSON 逐行组装 === */
|
||||
.sim-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-box.selected {
|
||||
border: 2px dashed #ef4444;
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.auto-tool {
|
||||
background: #f1f5f9;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.noise-line {
|
||||
height: 4px;
|
||||
background: #cbd5e1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.method-pro, .method-con {
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.method-pro {
|
||||
color: #16a34a;
|
||||
}
|
||||
.method-pro::before { content: "优势："; font-weight: bold; }
|
||||
.method-con {
|
||||
color: #dc2626;
|
||||
}
|
||||
.method-con::before { content: "劣势："; font-weight: bold; }
|
||||
|
||||
/* JSON Model */
|
||||
.model-container {
|
||||
.json-build {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
overflow-x: auto;
|
||||
padding: 20px 24px;
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.json-code {
|
||||
.json-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.json-line.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.json-line.highlight {
|
||||
background: rgba(56, 189, 248, 0.08);
|
||||
border-radius: 4px;
|
||||
margin: 0 -8px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.line-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
min-width: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.json-line code {
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 13px;
|
||||
color: #cbd5e1;
|
||||
line-height: 1.6;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.key { color: #38bdf8; }
|
||||
.string { color: #a3e635; }
|
||||
.number { color: #f472b6; }
|
||||
.comment { color: #64748b; font-style: italic; }
|
||||
.sim-hint {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* Pipeline */
|
||||
.pipeline-flow {
|
||||
/* === Pipeline: 动画数据流 === */
|
||||
.pipe-visual {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 28px 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pipe-stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
overflow-x: auto;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.pipe-node {
|
||||
padding: 12px 16px;
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid #bae6fd;
|
||||
text-align: center;
|
||||
.stage-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.pipe-node.server { background: #fef08a; color: #854d0e; border-color: #fde047; }
|
||||
.pipe-node.etl { background: #fed7aa; color: #9a3412; border-color: #fdba74; }
|
||||
.pipe-node.db { background: #bbf7d0; color: #166534; border-color: #86efac; }
|
||||
.pipe-track {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
height: 3px;
|
||||
background: #e2e8f0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.pipe-arrow {
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
.packet {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #3b82f6;
|
||||
border-radius: 50%;
|
||||
top: -3.5px;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.packet.flying {
|
||||
animation: fly-across 2.4s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fly-across {
|
||||
0% { left: 0; opacity: 0; }
|
||||
5% { opacity: 1; }
|
||||
90% { opacity: 1; }
|
||||
100% { left: 100%; opacity: 0; }
|
||||
}
|
||||
|
||||
.pipe-btn {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pipe-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pipe-arrow::after {
|
||||
content: "→";
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* === ETL: Before / After 对比 === */
|
||||
.etl-compare {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.etl-side {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.etl-before {
|
||||
background: #fefce8;
|
||||
}
|
||||
|
||||
.etl-after {
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
.etl-side-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.etl-before .etl-side-title { color: #854d0e; }
|
||||
.etl-after .etl-side-title { color: #166534; }
|
||||
|
||||
.etl-arrow-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.etl-arrow-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.etl-arrow-icon {
|
||||
font-size: 22px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.etl-row-data {
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 11px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.etl-row-data:last-child { margin-bottom: 0; }
|
||||
|
||||
.etl-row-data.dup {
|
||||
background: #fef2f2;
|
||||
text-decoration: line-through;
|
||||
color: #991b1b;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.etl-row-data.bad {
|
||||
background: #fff7ed;
|
||||
color: #9a3412;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.etl-row-data.clean {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.issue-tag {
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
background: #fecaca;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.capture-table { font-size: 12px; }
|
||||
.capture-table th,
|
||||
.capture-table td { padding: 8px 8px; }
|
||||
|
||||
.etl-compare { flex-direction: column; }
|
||||
|
||||
.etl-arrow-col {
|
||||
flex-direction: row;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.pipe-visual { padding: 20px 12px; }
|
||||
.stage-name { font-size: 10px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,316 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const dataInput = ref('23, 45, 67, 89, 12, 34, 56, 78, 90, 21')
|
||||
|
||||
const rawData = computed(() =>
|
||||
dataInput.value
|
||||
.split(',')
|
||||
.map((s) => parseFloat(s.trim()))
|
||||
.filter((n) => !isNaN(n))
|
||||
)
|
||||
|
||||
const sortedData = computed(() => [...rawData.value].sort((a, b) => a - b))
|
||||
const count = computed(() => rawData.value.length)
|
||||
|
||||
const mean = computed(() => {
|
||||
if (!count.value) return 0
|
||||
return (rawData.value.reduce((a, b) => a + b, 0) / count.value).toFixed(2)
|
||||
})
|
||||
|
||||
const median = computed(() => {
|
||||
const s = sortedData.value
|
||||
const n = s.length
|
||||
if (!n) return 0
|
||||
return n % 2 === 0
|
||||
? ((s[n / 2 - 1] + s[n / 2]) / 2).toFixed(2)
|
||||
: s[Math.floor(n / 2)].toFixed(2)
|
||||
})
|
||||
|
||||
const mode = computed(() => {
|
||||
const freq = {}
|
||||
let maxFreq = 0
|
||||
rawData.value.forEach((n) => {
|
||||
freq[n] = (freq[n] || 0) + 1
|
||||
if (freq[n] > maxFreq) maxFreq = freq[n]
|
||||
})
|
||||
if (maxFreq === 1) return '无'
|
||||
return Object.keys(freq)
|
||||
.filter((k) => freq[k] === maxFreq)
|
||||
.join(', ')
|
||||
})
|
||||
|
||||
const stdDev = computed(() => {
|
||||
if (!count.value) return 0
|
||||
const m = parseFloat(mean.value)
|
||||
const variance =
|
||||
rawData.value.reduce((sum, n) => sum + Math.pow(n - m, 2), 0) /
|
||||
count.value
|
||||
return Math.sqrt(variance).toFixed(2)
|
||||
})
|
||||
|
||||
const stats = computed(() => [
|
||||
{ label: '样本数', value: count.value, desc: '数据点总数', color: '#3b82f6' },
|
||||
{
|
||||
label: '均值',
|
||||
value: mean.value,
|
||||
desc: '所有数值的平均值',
|
||||
color: '#22c55e'
|
||||
},
|
||||
{
|
||||
label: '中位数',
|
||||
value: median.value,
|
||||
desc: '排序后中间位置的值',
|
||||
color: '#f59e0b'
|
||||
},
|
||||
{
|
||||
label: '众数',
|
||||
value: mode.value,
|
||||
desc: '出现次数最多的值',
|
||||
color: '#8b5cf6'
|
||||
},
|
||||
{
|
||||
label: '标准差',
|
||||
value: stdDev.value,
|
||||
desc: '数据离散程度',
|
||||
color: '#06b6d4'
|
||||
}
|
||||
])
|
||||
|
||||
function generateRandom() {
|
||||
dataInput.value = Array.from(
|
||||
{ length: 10 },
|
||||
() => Math.floor(Math.random() * 100) + 1
|
||||
).join(', ')
|
||||
}
|
||||
|
||||
function getBarHeight(val) {
|
||||
const max = Math.max(...sortedData.value)
|
||||
const min = Math.min(...sortedData.value)
|
||||
const range = max - min || 1
|
||||
return ((val - min) / range) * 80 + 20 + '%'
|
||||
}
|
||||
|
||||
const barColors = ['#3b82f6', '#22c55e', '#f59e0b', '#8b5cf6', '#ec4899']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stats-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">📊</span>
|
||||
<span class="title">描述性统计演示</span>
|
||||
<span class="subtitle">输入数据，实时计算统计指标</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
面对大量数据时，我们需要用少数
|
||||
<span class="hl">代表性指标</span>
|
||||
来概括全貌。输入一组数字，观察均值、中位数、标准差等指标如何描述数据的
|
||||
<span class="hl">集中趋势</span> 和
|
||||
<span class="hl">离散程度</span>。
|
||||
</div>
|
||||
|
||||
<div class="input-area">
|
||||
<div class="input-row">
|
||||
<input
|
||||
v-model="dataInput"
|
||||
class="data-input"
|
||||
placeholder="用逗号分隔，例如：1, 2, 3, 4, 5"
|
||||
/>
|
||||
<button class="btn-random" @click="generateRandom">随机生成</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div v-for="s in stats" :key="s.label" class="stat-card">
|
||||
<div class="stat-label">{{ s.label }}</div>
|
||||
<div class="stat-value" :style="{ color: s.color }">{{ s.value }}</div>
|
||||
<div class="stat-desc">{{ s.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-area">
|
||||
<div class="chart-title">数据分布（升序排列）</div>
|
||||
<div class="bar-chart">
|
||||
<div
|
||||
v-for="(val, i) in sortedData"
|
||||
:key="i"
|
||||
class="bar"
|
||||
:style="{
|
||||
height: getBarHeight(val),
|
||||
background: barColors[i % barColors.length]
|
||||
}"
|
||||
>
|
||||
<span class="bar-label">{{ val }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stats-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
padding: 16px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.data-input {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-size: 13px;
|
||||
font-family: 'Menlo', 'Monaco', monospace;
|
||||
}
|
||||
|
||||
.btn-random {
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-random:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 10px;
|
||||
padding: 0 20px 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-desc {
|
||||
font-size: 11px;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
padding: 16px 20px 20px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.bar-chart {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
height: 160px;
|
||||
gap: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 20px 12px 8px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
flex: 1;
|
||||
max-width: 50px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
position: relative;
|
||||
transition: height 0.3s;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.bar-chart {
|
||||
gap: 3px;
|
||||
}
|
||||
.bar-label {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,238 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const steps = [
|
||||
{ name: '访问商品页', count: 10000 },
|
||||
{ name: '加入购物车', count: 6000 },
|
||||
{ name: '进入结算页', count: 4000 },
|
||||
{ name: '完成支付', count: 2500 }
|
||||
]
|
||||
|
||||
const total = steps[0].count
|
||||
|
||||
function stepRate(i) {
|
||||
if (i === 0) return '100%'
|
||||
return ((steps[i].count / steps[i - 1].count) * 100).toFixed(1) + '%'
|
||||
}
|
||||
|
||||
function overallRate(i) {
|
||||
return ((steps[i].count / total) * 100).toFixed(1) + '%'
|
||||
}
|
||||
|
||||
function barWidth(i) {
|
||||
return Math.max(30, (steps[i].count / total) * 100) + '%'
|
||||
}
|
||||
|
||||
const worstIdx = computed(() => {
|
||||
let min = 100
|
||||
let idx = 1
|
||||
for (let i = 1; i < steps.length; i++) {
|
||||
const r = (steps[i].count / steps[i - 1].count) * 100
|
||||
if (r < min) {
|
||||
min = r
|
||||
idx = i
|
||||
}
|
||||
}
|
||||
return idx
|
||||
})
|
||||
|
||||
const overallConversion = computed(() =>
|
||||
((steps[steps.length - 1].count / total) * 100).toFixed(1)
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="funnel-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🔻</span>
|
||||
<span class="title">漏斗分析演示</span>
|
||||
<span class="subtitle">定位转化链的"出血点"</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
用户从进入到完成目标是一个层层筛选的过程。漏斗模型不只看最终转化率，更要找到
|
||||
<span class="hl">在哪里丢了人</span>
|
||||
——在最窄的地方投入优化，收益通常最大。
|
||||
</div>
|
||||
|
||||
<div class="funnel-body">
|
||||
<div
|
||||
v-for="(step, i) in steps"
|
||||
:key="step.name"
|
||||
:class="['funnel-step', { worst: i === worstIdx }]"
|
||||
:style="{ width: barWidth(i) }"
|
||||
>
|
||||
<div class="step-top">
|
||||
<span class="step-name">{{ step.name }}</span>
|
||||
<span class="step-count">{{ step.count.toLocaleString() }} 人</span>
|
||||
</div>
|
||||
<div class="step-bar"></div>
|
||||
<div class="step-rates">
|
||||
<span>总转化 {{ overallRate(i) }}</span>
|
||||
<span v-if="i > 0" class="step-conv">
|
||||
步骤转化 {{ stepRate(i) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="insights">
|
||||
<div class="insight-title">洞察</div>
|
||||
<div class="insight-items">
|
||||
<div class="insight-item">
|
||||
最低转化步骤：
|
||||
<strong>{{ steps[worstIdx].name }}</strong>
|
||||
（{{ stepRate(worstIdx) }}）
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
整体转化率：<strong>{{ overallConversion }}%</strong>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
建议：优先优化
|
||||
<strong>{{ steps[worstIdx].name }}</strong>
|
||||
环节，减少体验摩擦
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.funnel-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
padding: 16px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.hl {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.funnel-body {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.funnel-step {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.funnel-step.worst {
|
||||
border-color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
.step-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.step-count {
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.step-bar {
|
||||
height: 20px;
|
||||
background: linear-gradient(90deg, var(--vp-c-brand), #60a5fa);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.worst .step-bar {
|
||||
background: linear-gradient(90deg, #ef4444, #f87171);
|
||||
}
|
||||
|
||||
.step-rates {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.step-conv {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.worst .step-conv {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.insights {
|
||||
padding: 16px 20px 20px;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.insight-title {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.insight-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.insight-item {
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.funnel-step {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,232 @@
|
||||
<script setup>
|
||||
const retentionData = [
|
||||
{ date: '2024-01-01', users: 1000, day1: 45, day7: 32, day30: 18 },
|
||||
{ date: '2024-01-02', users: 1200, day1: 42, day7: 28, day30: 15 },
|
||||
{ date: '2024-01-03', users: 950, day1: 40, day7: 25, day30: 12 },
|
||||
{ date: '2024-01-04', users: 1100, day1: 38, day7: 30, day30: 14 },
|
||||
{ date: '2024-01-05', users: 1050, day1: 41, day7: 33, day30: 16 },
|
||||
{ date: '2024-01-06', users: 1300, day1: 43, day7: 29, day30: 13 },
|
||||
{ date: '2024-01-07', users: 1150, day1: 40, day7: 31, day30: 15 }
|
||||
]
|
||||
|
||||
const curves = [
|
||||
{
|
||||
label: '次日留存',
|
||||
color: '#3b82f6',
|
||||
data: retentionData.map((r) => r.day1)
|
||||
},
|
||||
{
|
||||
label: '7日留存',
|
||||
color: '#22c55e',
|
||||
data: retentionData.map((r) => r.day7)
|
||||
},
|
||||
{
|
||||
label: '30日留存',
|
||||
color: '#f59e0b',
|
||||
data: retentionData.map((r) => r.day30)
|
||||
}
|
||||
]
|
||||
|
||||
function points(data) {
|
||||
return data.map((v, i) => `${60 + i * 50},${180 - v * 1.6}`).join(' ')
|
||||
}
|
||||
|
||||
function rateClass(rate) {
|
||||
if (rate >= 40) return 'high'
|
||||
if (rate >= 25) return 'mid'
|
||||
return 'low'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="retention-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">📈</span>
|
||||
<span class="title">留存分析演示</span>
|
||||
<span class="subtitle">产品的"硬核"体检</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
拉新是给桶加水，留存是看桶漏不漏。留存曲线若
|
||||
<span class="hl">趋于平稳</span>，说明产品已获得 PMF；若
|
||||
<span class="hl">持续跌落至零</span>，说明核心价值未被验证。
|
||||
</div>
|
||||
|
||||
<!-- 留存数据表 -->
|
||||
<div class="section">
|
||||
<div class="section-label">留存数据</div>
|
||||
<div class="table-wrap">
|
||||
<table class="r-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>注册日期</th>
|
||||
<th>注册人数</th>
|
||||
<th>次日留存</th>
|
||||
<th>7日留存</th>
|
||||
<th>30日留存</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="r in retentionData" :key="r.date">
|
||||
<td>{{ r.date }}</td>
|
||||
<td>{{ r.users }}</td>
|
||||
<td :class="rateClass(r.day1)">{{ r.day1 }}%</td>
|
||||
<td :class="rateClass(r.day7)">{{ r.day7 }}%</td>
|
||||
<td :class="rateClass(r.day30)">{{ r.day30 }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 留存曲线 -->
|
||||
<div class="section">
|
||||
<div class="section-label">留存曲线</div>
|
||||
<div class="chart-wrap">
|
||||
<svg viewBox="0 0 400 210" class="curve-svg">
|
||||
<!-- 坐标轴 -->
|
||||
<line x1="40" y1="180" x2="380" y2="180" stroke="#666" stroke-width="1" />
|
||||
<line x1="40" y1="20" x2="40" y2="180" stroke="#666" stroke-width="1" />
|
||||
|
||||
<!-- Y轴标签 -->
|
||||
<text x="12" y="30" font-size="10" fill="#999">100%</text>
|
||||
<text x="17" y="100" font-size="10" fill="#999">50%</text>
|
||||
<text x="25" y="183" font-size="10" fill="#999">0</text>
|
||||
|
||||
<!-- 曲线 -->
|
||||
<template v-for="c in curves" :key="c.label">
|
||||
<polyline
|
||||
:points="points(c.data)"
|
||||
fill="none"
|
||||
:stroke="c.color"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
v-for="(v, i) in c.data"
|
||||
:key="i"
|
||||
:cx="60 + i * 50"
|
||||
:cy="180 - v * 1.6"
|
||||
r="3.5"
|
||||
:fill="c.color"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- X轴标签 -->
|
||||
<text
|
||||
v-for="(d, i) in ['D1','D2','D3','D4','D5','D6','D7']"
|
||||
:key="d"
|
||||
:x="60 + i * 50"
|
||||
y="196"
|
||||
font-size="10"
|
||||
fill="#999"
|
||||
text-anchor="middle"
|
||||
>{{ d }}</text>
|
||||
</svg>
|
||||
|
||||
<div class="legend">
|
||||
<div v-for="c in curves" :key="c.label" class="legend-item">
|
||||
<span class="legend-dot" :style="{ background: c.color }"></span>
|
||||
<span class="legend-text">{{ c.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.retention-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 24px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: 14px 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.icon { font-size: 18px; }
|
||||
.title { font-weight: 600; font-size: 15px; }
|
||||
.subtitle { font-size: 12px; color: var(--vp-c-text-3); margin-left: auto; }
|
||||
|
||||
.intro-text {
|
||||
padding: 16px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.7;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.hl { color: var(--vp-c-brand); font-weight: 600; }
|
||||
|
||||
.section { padding: 16px 20px; }
|
||||
.section-label { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
|
||||
|
||||
.table-wrap {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.r-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.r-table th,
|
||||
.r-table td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.r-table th {
|
||||
background: var(--vp-c-bg-alt);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.r-table tbody tr:hover { background: var(--vp-c-bg-soft); }
|
||||
|
||||
.high { color: #22c55e; font-weight: 600; }
|
||||
.mid { color: #f59e0b; font-weight: 600; }
|
||||
.low { color: #ef4444; font-weight: 600; }
|
||||
|
||||
.chart-wrap {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.curve-svg { width: 100%; height: auto; }
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.legend-text { color: var(--vp-c-text-2); }
|
||||
</style>
|
||||
@@ -710,7 +710,10 @@ import DecisionMatrixDemo from './components/appendix/engineering-excellence/Dec
|
||||
import SqlDemo from './components/appendix/data/SqlDemo.vue'
|
||||
import DataModelsDemo from './components/appendix/data/DataModelsDemo.vue'
|
||||
import ABTestingDemo from './components/appendix/data/ABTestingDemo.vue'
|
||||
import DataAnalysisDemo from './components/appendix/data/DataAnalysisDemo.vue'
|
||||
import DescriptiveStatsDemo from './components/appendix/data/DescriptiveStatsDemo.vue'
|
||||
import DataAggregationDemo from './components/appendix/data/DataAggregationDemo.vue'
|
||||
import FunnelAnalysisDemo from './components/appendix/data/FunnelAnalysisDemo.vue'
|
||||
import RetentionAnalysisDemo from './components/appendix/data/RetentionAnalysisDemo.vue'
|
||||
import DataTrackingDemo from './components/appendix/data/DataTrackingDemo.vue'
|
||||
|
||||
// RAG Components
|
||||
@@ -1542,7 +1545,10 @@ export default {
|
||||
app.component('SqlDemo', SqlDemo)
|
||||
app.component('DataModelsDemo', DataModelsDemo)
|
||||
app.component('ABTestingDemo', ABTestingDemo)
|
||||
app.component('DataAnalysisDemo', DataAnalysisDemo)
|
||||
app.component('DescriptiveStatsDemo', DescriptiveStatsDemo)
|
||||
app.component('DataAggregationDemo', DataAggregationDemo)
|
||||
app.component('FunnelAnalysisDemo', FunnelAnalysisDemo)
|
||||
app.component('RetentionAnalysisDemo', RetentionAnalysisDemo)
|
||||
app.component('DataTrackingDemo', DataTrackingDemo)
|
||||
|
||||
// Engineering Excellence Components Registration
|
||||
@@ -1673,7 +1679,10 @@ export default {
|
||||
app.component('NetworkArchitectureDemo', NetworkArchitectureDemo)
|
||||
|
||||
// Project Architecture Components Registration
|
||||
app.component('ProjectArchitectureComparisonDemo', ProjectArchitectureComparisonDemo)
|
||||
app.component(
|
||||
'ProjectArchitectureComparisonDemo',
|
||||
ProjectArchitectureComparisonDemo
|
||||
)
|
||||
|
||||
// Appendix Navigation Component Registration
|
||||
app.component('AppendixFlowMap', AppendixFlowMap)
|
||||
|
||||
@@ -48,13 +48,45 @@ export default {
|
||||
foundation: {
|
||||
label: 'Core idea of Symbolism — encoding knowledge as rules',
|
||||
lines: [
|
||||
{ parts: [{ kw: 'IF' }, { text: ' temperature > 38.5°C ' }, { kw: 'AND' }, { text: ' WBC count > 11000' }] },
|
||||
{ indent: true, parts: [{ kw: 'THEN' }, { text: ' diagnosis = ' }, { str: '"bacterial infection"' }] },
|
||||
{ parts: [{ kw: 'IF' }, { text: ' diagnosis = ' }, { str: '"bacterial infection"' }, { text: ' ' }, { kw: 'AND' }, { text: ' no penicillin allergy' }] },
|
||||
{ indent: true, parts: [{ kw: 'THEN' }, { text: ' treatment = ' }, { str: '"penicillin 400mg / twice daily"' }] }
|
||||
{
|
||||
parts: [
|
||||
{ kw: 'IF' },
|
||||
{ text: ' temperature > 38.5°C ' },
|
||||
{ kw: 'AND' },
|
||||
{ text: ' WBC count > 11000' }
|
||||
]
|
||||
},
|
||||
{
|
||||
indent: true,
|
||||
parts: [
|
||||
{ kw: 'THEN' },
|
||||
{ text: ' diagnosis = ' },
|
||||
{ str: '"bacterial infection"' }
|
||||
]
|
||||
},
|
||||
{
|
||||
parts: [
|
||||
{ kw: 'IF' },
|
||||
{ text: ' diagnosis = ' },
|
||||
{ str: '"bacterial infection"' },
|
||||
{ text: ' ' },
|
||||
{ kw: 'AND' },
|
||||
{ text: ' no penicillin allergy' }
|
||||
]
|
||||
},
|
||||
{
|
||||
indent: true,
|
||||
parts: [
|
||||
{ kw: 'THEN' },
|
||||
{ text: ' treatment = ' },
|
||||
{ str: '"penicillin 400mg / twice daily"' }
|
||||
]
|
||||
}
|
||||
],
|
||||
comment: '// The early medical expert system MYCIN (1977) consisted of 450+ rules like these',
|
||||
caption: 'Human experts translate experience into IF-THEN rules; the machine matches and executes them one by one'
|
||||
comment:
|
||||
'// The early medical expert system MYCIN (1977) consisted of 450+ rules like these',
|
||||
caption:
|
||||
'Human experts translate experience into IF-THEN rules; the machine matches and executes them one by one'
|
||||
},
|
||||
|
||||
// PerceptronDemo
|
||||
@@ -63,16 +95,33 @@ export default {
|
||||
biasLabel: 'Bias',
|
||||
activated: 'Fire',
|
||||
silent: 'Silent',
|
||||
caption: '① Input features\u2003② Multiply by weights (importance)\u2003③ Sum + bias\u2003④ Fires output 1 if above threshold, otherwise 0'
|
||||
caption:
|
||||
'① Input features\u2003② Multiply by weights (importance)\u2003③ Sum + bias\u2003④ Fires output 1 if above threshold, otherwise 0'
|
||||
},
|
||||
|
||||
// BackpropagationDemo
|
||||
backprop: {
|
||||
steps: [
|
||||
{ icon: '➡️', name: 'Forward Pass', desc: 'Data flows through the network to produce a prediction' },
|
||||
{ icon: '📐', name: 'Compute Loss', desc: 'Prediction vs. ground truth → calculate loss' },
|
||||
{ icon: '⬅️', name: 'Backpropagation', desc: 'Trace back each weight\'s "responsibility" layer by layer' },
|
||||
{ icon: '⚙️', name: 'Update Weights', desc: 'Adjust proportionally to reduce future error' }
|
||||
{
|
||||
icon: '➡️',
|
||||
name: 'Forward Pass',
|
||||
desc: 'Data flows through the network to produce a prediction'
|
||||
},
|
||||
{
|
||||
icon: '📐',
|
||||
name: 'Compute Loss',
|
||||
desc: 'Prediction vs. ground truth → calculate loss'
|
||||
},
|
||||
{
|
||||
icon: '⬅️',
|
||||
name: 'Backpropagation',
|
||||
desc: 'Trace back each weight\'s "responsibility" layer by layer'
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
name: 'Update Weights',
|
||||
desc: 'Adjust proportionally to reduce future error'
|
||||
}
|
||||
],
|
||||
lossLabel: 'Loss decreases over training epochs:',
|
||||
axisHigh: 'High',
|
||||
@@ -84,7 +133,10 @@ export default {
|
||||
neuralNet: {
|
||||
layers: [
|
||||
{ name: 'Input Layer', desc: 'Raw pixels / numerical signals' },
|
||||
{ name: 'Hidden Layers (stackable)', desc: 'Low → edges; Mid → shapes; High → semantic concepts' },
|
||||
{
|
||||
name: 'Hidden Layers (stackable)',
|
||||
desc: 'Low → edges; Mid → shapes; High → semantic concepts'
|
||||
},
|
||||
{ name: 'Output Layer', desc: 'Final classification or prediction' }
|
||||
]
|
||||
},
|
||||
@@ -94,16 +146,41 @@ export default {
|
||||
colLabel: 'Attention distribution when processing "{word}":',
|
||||
sentence: ['John', 'gave', 'the', 'apple', 'to', 'his', 'mother'],
|
||||
focusIdx: 5,
|
||||
weights: [0.62, 0.08, 0.03, 0.10, 0.05, 0.07, 0.05],
|
||||
caption: '"his" sits mid-sentence, yet the model directs 62% attention to "John" at the start — resolving the pronoun across distance'
|
||||
weights: [0.62, 0.08, 0.03, 0.1, 0.05, 0.07, 0.05],
|
||||
caption:
|
||||
'"his" sits mid-sentence, yet the model directs 62% attention to "John" at the start — resolving the pronoun across distance'
|
||||
},
|
||||
|
||||
// GPTEvolutionDemo
|
||||
gptEvolution: [
|
||||
{ name: 'GPT-1', year: '2018', params: '117 M', barWidth: '2%', key: 'Pre-train + fine-tune paradigm' },
|
||||
{ name: 'GPT-2', year: '2019', params: '1.5 B', barWidth: '6%', key: 'Zero-shot generalization' },
|
||||
{ name: 'GPT-3', year: '2020', params: '175 B', barWidth: '45%', key: '⚡ Emergence! In-context learning' },
|
||||
{ name: 'GPT-4', year: '2023', params: '~1.8 T', barWidth: '100%', key: 'Multimodal + complex reasoning' }
|
||||
{
|
||||
name: 'GPT-1',
|
||||
year: '2018',
|
||||
params: '117 M',
|
||||
barWidth: '2%',
|
||||
key: 'Pre-train + fine-tune paradigm'
|
||||
},
|
||||
{
|
||||
name: 'GPT-2',
|
||||
year: '2019',
|
||||
params: '1.5 B',
|
||||
barWidth: '6%',
|
||||
key: 'Zero-shot generalization'
|
||||
},
|
||||
{
|
||||
name: 'GPT-3',
|
||||
year: '2020',
|
||||
params: '175 B',
|
||||
barWidth: '45%',
|
||||
key: '⚡ Emergence! In-context learning'
|
||||
},
|
||||
{
|
||||
name: 'GPT-4',
|
||||
year: '2023',
|
||||
params: '~1.8 T',
|
||||
barWidth: '100%',
|
||||
key: 'Multimodal + complex reasoning'
|
||||
}
|
||||
],
|
||||
|
||||
// AIErasComparisonDemo
|
||||
@@ -113,11 +190,41 @@ export default {
|
||||
mechanismLabel: 'Core Mechanism',
|
||||
examplesLabel: 'Key Examples',
|
||||
eras: [
|
||||
{ name: 'Rule-Based Era', time: '1960s - 1980s', driver: 'Human-coded knowledge', mechanism: 'If-Then logical deduction', examples: ['Dendral', 'Deep Blue'] },
|
||||
{ name: 'Classical ML', time: '1990s - 2000s', driver: 'Manual feature engineering + statistics', mechanism: 'Finding mathematical decision boundaries', examples: ['SVM', 'Random Forest'] },
|
||||
{ name: 'Deep Learning Revolution', time: '2010s', driver: 'Big data + GPU compute', mechanism: 'Neural nets auto-extract features', examples: ['AlexNet (CNN)', 'AlphaGo (RL)'] },
|
||||
{ name: 'Large Language Models', time: '2018 - present', driver: 'Massive unlabeled data + brute-force compute', mechanism: 'Next-token prediction + emergent knowledge', examples: ['GPT-4', 'Claude 3'] },
|
||||
{ name: 'Agentic AI', time: 'Now - future', driver: 'LLM brain + environment perception', mechanism: 'Autonomous planning + tool use', examples: ['AI Programmer', 'Embodied AI'] }
|
||||
{
|
||||
name: 'Rule-Based Era',
|
||||
time: '1960s - 1980s',
|
||||
driver: 'Human-coded knowledge',
|
||||
mechanism: 'If-Then logical deduction',
|
||||
examples: ['Dendral', 'Deep Blue']
|
||||
},
|
||||
{
|
||||
name: 'Classical ML',
|
||||
time: '1990s - 2000s',
|
||||
driver: 'Manual feature engineering + statistics',
|
||||
mechanism: 'Finding mathematical decision boundaries',
|
||||
examples: ['SVM', 'Random Forest']
|
||||
},
|
||||
{
|
||||
name: 'Deep Learning Revolution',
|
||||
time: '2010s',
|
||||
driver: 'Big data + GPU compute',
|
||||
mechanism: 'Neural nets auto-extract features',
|
||||
examples: ['AlexNet (CNN)', 'AlphaGo (RL)']
|
||||
},
|
||||
{
|
||||
name: 'Large Language Models',
|
||||
time: '2018 - present',
|
||||
driver: 'Massive unlabeled data + brute-force compute',
|
||||
mechanism: 'Next-token prediction + emergent knowledge',
|
||||
examples: ['GPT-4', 'Claude 3']
|
||||
},
|
||||
{
|
||||
name: 'Agentic AI',
|
||||
time: 'Now - future',
|
||||
driver: 'LLM brain + environment perception',
|
||||
mechanism: 'Autonomous planning + tool use',
|
||||
examples: ['AI Programmer', 'Embodied AI']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,10 +48,36 @@ export default {
|
||||
foundation: {
|
||||
label: '符号主义的核心思路 ── 把知识写成规则',
|
||||
lines: [
|
||||
{ parts: [{ kw: 'IF' }, { text: ' 体温 > 38.5°C ' }, { kw: 'AND' }, { text: ' 白细胞计数 > 11000' }] },
|
||||
{ indent: true, parts: [{ kw: 'THEN' }, { text: ' 诊断 = ' }, { str: '"细菌感染"' }] },
|
||||
{ parts: [{ kw: 'IF' }, { text: ' 诊断 = ' }, { str: '"细菌感染"' }, { text: ' ' }, { kw: 'AND' }, { text: ' 对青霉素不过敏' }] },
|
||||
{ indent: true, parts: [{ kw: 'THEN' }, { text: ' 治疗方案 = ' }, { str: '"青霉素 400mg / 每日两次"' }] }
|
||||
{
|
||||
parts: [
|
||||
{ kw: 'IF' },
|
||||
{ text: ' 体温 > 38.5°C ' },
|
||||
{ kw: 'AND' },
|
||||
{ text: ' 白细胞计数 > 11000' }
|
||||
]
|
||||
},
|
||||
{
|
||||
indent: true,
|
||||
parts: [{ kw: 'THEN' }, { text: ' 诊断 = ' }, { str: '"细菌感染"' }]
|
||||
},
|
||||
{
|
||||
parts: [
|
||||
{ kw: 'IF' },
|
||||
{ text: ' 诊断 = ' },
|
||||
{ str: '"细菌感染"' },
|
||||
{ text: ' ' },
|
||||
{ kw: 'AND' },
|
||||
{ text: ' 对青霉素不过敏' }
|
||||
]
|
||||
},
|
||||
{
|
||||
indent: true,
|
||||
parts: [
|
||||
{ kw: 'THEN' },
|
||||
{ text: ' 治疗方案 = ' },
|
||||
{ str: '"青霉素 400mg / 每日两次"' }
|
||||
]
|
||||
}
|
||||
],
|
||||
comment: '// 早期医疗专家系统（MYCIN，1977）就是由 450+ 条这样的规则组成的',
|
||||
caption: '人类专家把经验翻译成一条条 IF-THEN 规则，机器逐条匹配执行'
|
||||
@@ -63,7 +89,8 @@ export default {
|
||||
biasLabel: '偏置',
|
||||
activated: '激活',
|
||||
silent: '静默',
|
||||
caption: '① 输入特征\u2003② 乘以权重（重要性）\u2003③ 求和 + 偏置\u2003④ 超过阈值就激活输出 1，否则输出 0'
|
||||
caption:
|
||||
'① 输入特征\u2003② 乘以权重（重要性）\u2003③ 求和 + 偏置\u2003④ 超过阈值就激活输出 1，否则输出 0'
|
||||
},
|
||||
|
||||
// BackpropagationDemo
|
||||
@@ -84,7 +111,10 @@ export default {
|
||||
neuralNet: {
|
||||
layers: [
|
||||
{ name: '输入层', desc: '原始像素 / 数值信号' },
|
||||
{ name: '隐藏层（可叠加多层）', desc: '底层识别边缘 → 中层识别形状 → 高层识别语义概念' },
|
||||
{
|
||||
name: '隐藏层（可叠加多层）',
|
||||
desc: '底层识别边缘 → 中层识别形状 → 高层识别语义概念'
|
||||
},
|
||||
{ name: '输出层', desc: '最终分类或预测结果' }
|
||||
]
|
||||
},
|
||||
@@ -94,16 +124,41 @@ export default {
|
||||
colLabel: '处理「{word}」时的注意力分配：',
|
||||
sentence: ['小明', '把', '苹果', '给了', '他', '的', '母亲'],
|
||||
focusIdx: 4,
|
||||
weights: [0.65, 0.05, 0.10, 0.10, 0.05, 0.03, 0.02],
|
||||
caption: '「他」虽在句中间，模型却把 65% 注意力精准投向句首的「小明」，跨越距离识别代词指代'
|
||||
weights: [0.65, 0.05, 0.1, 0.1, 0.05, 0.03, 0.02],
|
||||
caption:
|
||||
'「他」虽在句中间，模型却把 65% 注意力精准投向句首的「小明」，跨越距离识别代词指代'
|
||||
},
|
||||
|
||||
// GPTEvolutionDemo
|
||||
gptEvolution: [
|
||||
{ name: 'GPT-1', year: '2018', params: '1.17 亿', barWidth: '2%', key: '预训练+微调范式确立' },
|
||||
{ name: 'GPT-2', year: '2019', params: '15 亿', barWidth: '6%', key: 'Zero-shot 零样本泛化' },
|
||||
{ name: 'GPT-3', year: '2020', params: '1750 亿', barWidth: '45%', key: '⚡ 涌现！上下文学习' },
|
||||
{ name: 'GPT-4', year: '2023', params: '~1.8 万亿', barWidth: '100%', key: '多模态 + 复杂推理' }
|
||||
{
|
||||
name: 'GPT-1',
|
||||
year: '2018',
|
||||
params: '1.17 亿',
|
||||
barWidth: '2%',
|
||||
key: '预训练+微调范式确立'
|
||||
},
|
||||
{
|
||||
name: 'GPT-2',
|
||||
year: '2019',
|
||||
params: '15 亿',
|
||||
barWidth: '6%',
|
||||
key: 'Zero-shot 零样本泛化'
|
||||
},
|
||||
{
|
||||
name: 'GPT-3',
|
||||
year: '2020',
|
||||
params: '1750 亿',
|
||||
barWidth: '45%',
|
||||
key: '⚡ 涌现！上下文学习'
|
||||
},
|
||||
{
|
||||
name: 'GPT-4',
|
||||
year: '2023',
|
||||
params: '~1.8 万亿',
|
||||
barWidth: '100%',
|
||||
key: '多模态 + 复杂推理'
|
||||
}
|
||||
],
|
||||
|
||||
// AIErasComparisonDemo
|
||||
@@ -113,11 +168,41 @@ export default {
|
||||
mechanismLabel: '核心机制',
|
||||
examplesLabel: '典型代表',
|
||||
eras: [
|
||||
{ name: '规则系统时代', time: '1960s - 1980s', driver: '人类硬编码知识', mechanism: 'If-Then 逻辑推演', examples: ['Dendral', '深蓝 (Deep Blue)'] },
|
||||
{ name: '传统机器学习', time: '1990s - 2000s', driver: '人工特征工程 + 统计学', mechanism: '寻找数学决策边界', examples: ['支持向量机 (SVM)', '随机森林'] },
|
||||
{ name: '深度学习革命', time: '2010s', driver: '大数据 + 算力爬升', mechanism: '神经网络自动提取特征', examples: ['AlexNet (CNN)', 'AlphaGo (RL)'] },
|
||||
{ name: '大语言模型 (LLM)', time: '2018 - 至今', driver: '海量无标注数据 + 暴力计算', mechanism: '预测下一个词 + 涌现常识', examples: ['GPT-4', 'Claude 3'] },
|
||||
{ name: '智能体 (Agentic AI)', time: '现在 - 未来', driver: '大模型大脑 + 环境感知', mechanism: '自主规划 + 工具调用', examples: ['AI 程序员', '具身智能'] }
|
||||
{
|
||||
name: '规则系统时代',
|
||||
time: '1960s - 1980s',
|
||||
driver: '人类硬编码知识',
|
||||
mechanism: 'If-Then 逻辑推演',
|
||||
examples: ['Dendral', '深蓝 (Deep Blue)']
|
||||
},
|
||||
{
|
||||
name: '传统机器学习',
|
||||
time: '1990s - 2000s',
|
||||
driver: '人工特征工程 + 统计学',
|
||||
mechanism: '寻找数学决策边界',
|
||||
examples: ['支持向量机 (SVM)', '随机森林']
|
||||
},
|
||||
{
|
||||
name: '深度学习革命',
|
||||
time: '2010s',
|
||||
driver: '大数据 + 算力爬升',
|
||||
mechanism: '神经网络自动提取特征',
|
||||
examples: ['AlexNet (CNN)', 'AlphaGo (RL)']
|
||||
},
|
||||
{
|
||||
name: '大语言模型 (LLM)',
|
||||
time: '2018 - 至今',
|
||||
driver: '海量无标注数据 + 暴力计算',
|
||||
mechanism: '预测下一个词 + 涌现常识',
|
||||
examples: ['GPT-4', 'Claude 3']
|
||||
},
|
||||
{
|
||||
name: '智能体 (Agentic AI)',
|
||||
time: '现在 - 未来',
|
||||
driver: '大模型大脑 + 环境感知',
|
||||
mechanism: '自主规划 + 工具调用',
|
||||
examples: ['AI 程序员', '具身智能']
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user