# 神射手数据中台 - 前端开发规范

> 📅 更新: 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 连接
```

---

## 五、关联文档
- [核心组件代码.md](./核心组件代码.md)
- [../3、原型/原型设计规范.md](../3、原型/原型设计规范.md)