47 lines
2.3 KiB
Markdown
47 lines
2.3 KiB
Markdown
# WTFX Frontend Monorepo Architecture
|
||
|
||
WTFX 前端采用 **pnpm workspace Monorepo + Feature-Driven 领域划分** 架构。
|
||
|
||
---
|
||
|
||
## 1. 架构总览
|
||
|
||
```
|
||
wtf-frontend/
|
||
├── apps/
|
||
│ ├── admin/ # 超级管理员控制台 (合约部署向导、协议治理、风险裁决)
|
||
│ │ └── src/
|
||
│ │ ├── routes/ # 路由页面 (dashboard, markets, governance, deploy)
|
||
│ │ └── features/ # 独立业务领域 (contract-deploy, protocol-governance, risk-control)
|
||
│ │
|
||
│ └── web/ # 用户端交易主站 (高频预测交易、图表、持仓)
|
||
│ └── src/
|
||
│ ├── routes/ # 路由页面 (markets, trade, portfolio, profile)
|
||
│ └── features/ # 独立业务领域 (market, trading, wallet, prediction)
|
||
│
|
||
├── packages/
|
||
│ ├── types/ # 【核心】全栈共享 TypeScript 数据类型 (Market, Order, Position)
|
||
│ ├── api-client/ # 【核心】统一 API SDK 客户端 (供 Web/Admin/后续 TMA 复用)
|
||
│ ├── ui/ # 共享 Trading UI 基础原子组件库
|
||
│ └── config/ # 共享 ESLint / TS / Tailwind 配置
|
||
│
|
||
├── package.json # Monorepo 根管理
|
||
└── pnpm-workspace.yaml # Workspace 定义
|
||
```
|
||
|
||
---
|
||
|
||
## 2. 核心架构守则 (Frontend Architecture Rules)
|
||
|
||
1. **【Feature-Driven 组织业务】**：
|
||
- 业务代码按领域归类在 `src/features/<feature-name>/` 下，严禁在全局 `components/` 堆积上百个业务大泥球组件。
|
||
2. **【SDK 与 Type 唯一维护源】**：
|
||
- 所有前后端交互数据类型在 `packages/types` 统一定义；
|
||
- 所有 REST / GraphQL API 调用通过 `packages/api-client`，确保 Web、Admin 以及后续 TMA 共享同一套接口客户端。
|
||
3. **【按需抽象，拒绝过度设计】**：
|
||
- 业务特定的复杂图表/组件（如 TradingView 集成）优先放在 `apps/web/features/trading/` 中；
|
||
- 仅当多个 App（如 Admin 与 Web）真实产生复用时，才提取到 `packages/ui/`。
|
||
4. **【Admin 与 Web 严格独立部署】**：
|
||
- Admin 运行在 `:3100` (`admin.wtfx.app`)，Web 运行在 `:3000` (`wtfx.app`)；
|
||
- 两者拥有独立的路由体系与鉴权逻辑，严禁在同一 App 内通过 `if (isAdmin)` 揉杂代码。
|