埋点分析系统 - 前端技术架构
代码路径：
e:\AI工作台\埋点分析系统\frontend\
技术栈
| 组件 | 技术 |
|---|---|
| 框架 | React 18 + TypeScript 5 |
| 构建 | Vite 5 |
| 图表 | Chart.js 4.x + react-chartjs-2 |
| 图标 | lucide-react |
| HTTP | Axios |
| 路由 | React Router v6 |
| 样式 | CSS 变量 + 玻璃态设计 |
路由结构
/login → Login.tsx
/ → Overview.tsx (概览看板)
/events → Events.tsx (事件分析)
/elements → ElementsContent.tsx (元素分析)
/users → Users.tsx (用户分析)
/retention → Retention.tsx (留存分析)
/funnel → Funnel.tsx (漏斗分析)
/screens → Screens.tsx (页面路径)
/detail → Detail.tsx (数据明细)
/sysusers → SysUsers.tsx (系统用户管理)
/users/:id → UserDetail.tsx (用户行为序列)组件架构
App.tsx
├── AuthContext.tsx (认证状态)
├── ProtectedRoute.tsx (路由守卫)
├── Sidebar.tsx (侧边栏：环境切换 + 项目选择 + 菜单)
├── Header.tsx (顶栏：日期选择 + 用户菜单)
├── ProjectSelector.tsx (项目下拉多选，createPortal 渲染)
├── Card.tsx (卡片容器)
├── KpiCard.tsx (KPI 指标卡)
├── Loading.tsx (加载/空状态)
├── Toast.tsx (消息提示)
└── ChangePasswordModal.tsx (修改密码弹窗)API 层
api/index.ts
├── Axios 实例 (baseURL, 超时, 拦截器)
├── 请求拦截器: 注入 Authorization Bearer Token
├── 响应拦截器: 统一错误处理 + 401 跳转登录
├── authApi (登录/登出/信息/修改密码)
├── overviewApi (概览 KPI/趋势)
├── eventsApi (事件分析)
├── elementsApi (元素分析)
├── usersApi (用户分析)
├── screensApi (页面路径)
├── detailApi (数据明细)
├── retentionApi (留存分析)
├── funnelApi (漏斗分析)
└── flowApi (流量分析)设计系统
CSS 变量体系
- 色彩: --primary, --bg, --glass-bg, --text-primary
- 阴影: --shadow-sm, --shadow-md, --shadow-lg
- 圆角: --radius-sm, --radius-md, --radius-lg
- 动效: --transition-fast, --transition-normal
玻璃态设计
- 卡片: backdrop-filter: blur(20px) saturate(180%)
- 侧边栏/顶栏: 半透明磨砂质感
- KPI 卡片: 渐变光晕 + 顶部装饰条
关键约束
- 图标传 JSX 节点
- Chart.js drawBorder 已废弃，改用 border: { display: false }
- verbatimModuleSyntax 开启，类型必须用 import type
- 多接口并行用 Promise.allSettled
- .glass-card:hover 不可使用 transform
- .app-sidebar 需要 z-index: 50 + overflow: visible