# 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)` 揉杂代码。