chore: 以本地为准,上传全部并替换 GitHub
This commit is contained in:
63
开发文档/4、前端/前端开发规范.md
Normal file
63
开发文档/4、前端/前端开发规范.md
Normal file
@@ -0,0 +1,63 @@
|
||||
# 神射手数据中台 - 前端开发规范
|
||||
|
||||
> 📅 更新: 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)
|
||||
Reference in New Issue
Block a user