wtf-frontend/ARCHITECTURE.md

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