# Admin New (F006) **重构后的管理后台** — 替代老的 renren-cloud-admin,渐进式双前端策略。 > **外网访问 (W5.x.x+3.5)**: > - 主入口 (frp): `http://direv.cloud:8080/admin/` (快 2-60x vs Tailscale) > - 备用 (Tailscale): `http://100.111.84.16:3000/admin/` > - 详细: 项目根目录 `FRP-接入快速参考.md` > 任何架构变更必须先看 [`ARCHITECTURE.md`](./ARCHITECTURE.md) 再改代码。 ## 启动 ```bash # 安装依赖 npm install # Dev (端口 3001,proxy /api 到 gateway:8080) npm run dev # Build npm run build # Type check npm run type-check ``` 访问: - Dev: http://localhost:3001/admin/ - Prod: http://100.111.84.16:3000/admin/(待 nginx 配置) ## 4 套主题 切主题:顶栏"主题"按钮,或登录页底部 4 个色点。 | 主题 | 主色 | 触发 | |---|---|---| | 科技蓝(默认) | `#2563EB` | data-theme="tech-blue" | | 中国红 | `#DC2626` | data-theme="red" | | Notion 紫 | `#5645D4` | data-theme="purple" | | 暗夜黑 | `#0F172A` | data-theme="dark" | 新增主题:改 `src/theme/themes.scss` + `src/theme/presets.ts` 两处即可。 ## 当前进度 (W1 D1 末) - [x] 项目骨架(Vite + Vue 3 + TS + Pinia + Element Plus) - [x] 4 套主题系统(tokens + themes + presets) - [x] ThemePicker 顶栏组件 - [x] AppLayout 主布局(顶栏 + 侧边栏 + 内容区) - [x] LoginView 登录页(渐变 + 主题切换) - [x] DashboardView 数据看板(mock 数据) - [x] Vite proxy /api → gateway:8080 - [ ] D2: 登录接真实 OAuth2(axios + 路由守卫) — **明日** - [ ] D3: 菜单从后端拉 - [ ] D4: 看板接真实 API - [ ] D5: nginx 部署到 /admin/ ## 目录结构(按 ARCHITECTURE.md) ``` src/ ├── theme/ # 主题系统(独立子模块) ├── layout/ # 布局(AppLayout 已迁移至 components/AppLayout) ├── modules/ # 业务模块(每个独立) │ ├── auth/ # 登录 │ └── dashboard/ # 数据看板 ├── components/ # 跨模块组件 │ ├── AppLayout/ │ └── ThemePicker/ ├── stores/ # Pinia (theme/user/menu) ├── api/ # HTTP 封装(W2 接入) ├── router/ # 路由 + 守卫 ├── composables/ # 可复用逻辑(预留) ├── directives/ # 全局指令(预留) ├── styles/ # 全局样式 └── utils/ # 工具函数 ```