1.3 KiB
1.3 KiB
神射手数据中台 - 前端开发规范
📅 更新: 2026-01-31
一、技术栈
| 项目 | 选型 |
|---|---|
| 框架 | Next.js 14 + React 18 |
| UI | Radix UI |
| 样式 | TailwindCSS |
| 图表 | Recharts |
| 状态 | React Hooks |
二、视觉规范（苹果毛玻璃）
| 元素 | 类名 |
|---|---|
| 页面背景 | from-slate-50 via-blue-50/30 to-purple-50/20 |
| 卡片 | bg-white/80 backdrop-blur rounded-xl shadow-lg |
| 按钮 | from-blue-500 to-purple-500 |
| 分割线 | border-slate-200/60 |
三、交互规范
| 要求 | 实现 |
|---|---|
| 骨架屏 | Skeleton 组件，严禁 Spinner |
| 转场 | 路由切换动画 |
| 数据加载 | useEffect + fetch |
四、目录结构
app/
├── page.tsx # 首页
├── data-ingestion/ # 数据接入
├── tag-portrait/ # 标签画像
├── ai-agent/ # AI Agent
├── data-market/ # 数据市场
├── monitoring/ # 系统监控
└── api/ # API 路由
components/
└── ui/ # Radix 组件
lib/
└── mongodb.ts # MongoDB 连接