Go to file
zou 894d381953 feat(F006-W9): 视图开发模板 (VIEW-TEMPLATE.md) + 3 通用组件 + OrderListView 标准化示范
W9 P0 目标: 让所有 list view 写法统一, Codex 改任何 view 5-10 分钟搞定

改动:
- 新增 项目文档/F006-VIEW-TEMPLATE.md (475 行) - 8 硬性约定 + 完整模板代码 + 18+ view 字段对照表 + 5 常见改动模式 + 边界 case
- 新增 src/components/PageHeader/PageHeader.vue (65 行) - 通用页面头 (title + sub + slot 操作按钮)
- 新增 src/components/SearchBar/SearchBar.vue (147 行) - 通用搜索条 (5 字段类型: text/select/date/daterange/number, v-model:filters)
- 新增 src/components/FormDialog/FormDialog.vue (177 行) - 通用增改弹窗 (5 字段类型: text/textarea/number/radio/select, schema 驱动)
- 改 src/components/DataTable/DataTable.vue - + type:'selection' 支持 + selection-change 事件
- 改 src/modules/order/OrderListView.vue (240→262 行, -22 净代码) - 用 PageHeader/SearchBar/DataTable 替换硬编码, 做标准化示范

AGENTS.md §11 加 F006 视图开发约定 (8 硬性约定 + 4 组件 + 18+ view 改写时间表 + 验收清单 + Codex 提示词模板)

验收: 13/13 URL 200 (admin + 12 业务页), OrderListView 用 3 组件后样式/交互一致
build: gzip 375KB 无回退, PageHeader/SearchBar/FormDialog 内联到 OrderListView 路由 chunk

下一阶段 W10: 按 §11 改写时间表 7 批次 18+ view 全部标准化 (~2-3 小时 Codex 工作量)
2026-07-05 21:21:20 +08:00
public feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
src feat(F006-W9): 视图开发模板 (VIEW-TEMPLATE.md) + 3 通用组件 + OrderListView 标准化示范 2026-07-05 21:21:20 +08:00
.gitignore feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
ARCHITECTURE.md feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
index.html feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
package-lock.json feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
package.json feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
README.md docs(F006): update README with frp main entry (W5.x.x+3.5) 2026-07-04 18:07:15 +08:00
tsconfig.json feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
tsconfig.node.json feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00
vite.config.ts feat(F006): W2 + W4 + W31 admin_new 全部改动首次 commit 2026-06-24 11:05:18 +08:00

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 再改代码。

启动

# 安装依赖
npm install

# Dev (端口 3001,proxy /api 到 gateway:8080)
npm run dev

# Build
npm run build

# Type check
npm run type-check

访问:

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 末)

  • 项目骨架(Vite + Vue 3 + TS + Pinia + Element Plus)
  • 4 套主题系统(tokens + themes + presets)
  • ThemePicker 顶栏组件
  • AppLayout 主布局(顶栏 + 侧边栏 + 内容区)
  • LoginView 登录页(渐变 + 主题切换)
  • DashboardView 数据看板(mock 数据)
  • 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/         # 工具函数