Files
Neo-ZQYY/apps/admin-web
Neo b25308c3f4 feat: P1-P3 全栈集成 — 数据库基础 + DWS 扩展 + 小程序鉴权 + 工程化体系
## P1 数据库基础
- zqyy_app: 创建 auth/biz schema、FDW 连接 etl_feiqiu
- etl_feiqiu: 创建 app schema RLS 视图、商品库存预警表
- 清理 assistant_abolish 残留数据

## P2 ETL/DWS 扩展
- 新增 DWS 助教订单贡献度表 (dws.assistant_order_contribution)
- 新增 assistant_order_contribution_task 任务及 RLS 视图
- member_consumption 增加充值字段、assistant_daily 增加处罚字段
- 更新 ODS/DWD/DWS 任务文档及业务规则文档
- 更新 consistency_checker、flow_runner、task_registry 等核心模块

## P3 小程序鉴权系统
- 新增 xcx_auth 路由/schema(微信登录 + JWT)
- 新增 wechat/role/matching/application 服务层
- zqyy_app 鉴权表迁移 + 角色权限种子数据
- auth/dependencies.py 支持小程序 JWT 鉴权

## 文档与审计
- 新增 DOCUMENTATION-MAP 文档导航
- 新增 7 份 BD_Manual 数据库变更文档
- 更新 DDL 基线快照(etl_feiqiu 6 schema + zqyy_app auth)
- 新增全栈集成审计记录、部署检查清单更新
- 新增 BACKLOG 路线图、FDW→Core 迁移计划

## Kiro 工程化
- 新增 5 个 Spec(P1/P2/P3/全栈集成/核心业务)
- 新增审计自动化脚本(agent_on_stop/build_audit_context/compliance_prescan)
- 新增 6 个 Hook(合规检查/会话日志/提交审计等)
- 新增 doc-map steering 文件

## 运维与测试
- 新增 ops 脚本:迁移验证/API 健康检查/ETL 监控/集成报告
- 新增属性测试:test_dws_contribution / test_auth_system
- 清理过期 export 报告文件
- 更新 .gitignore 排除规则
2026-02-26 08:03:53 +08:00
..

apps/admin-web — 管理后台

基于 React + Vite + Ant Design 构建的 ETL 管理后台提供任务管理、调度配置、数据查看、ETL 监控和运维控制功能。

技术栈

  • React 19 + TypeScript
  • Vite 6构建工具
  • Ant Design 5UI 组件库)
  • Zustand 5状态管理
  • React Router DOM 7路由
  • AxiosHTTP 客户端)
  • Day.js日期处理

目录结构

apps/admin-web/
├── src/
│   ├── App.tsx              # 主布局 + 路由配置 + 路由守卫
│   ├── main.tsx             # 应用入口
│   ├── pages/               # 8 个功能页面
│   │   ├── Login.tsx        # 登录页
│   │   ├── TaskConfig.tsx   # 任务配置Flow 选择 + 任务勾选 + 参数设置)
│   │   ├── TaskManager.tsx  # 任务管理(队列 + 执行历史 + 实时日志)
│   │   ├── ETLStatus.tsx    # ETL 状态(游标监控 + 最近执行)
│   │   ├── DBViewer.tsx     # 数据库查看器Schema/表/列浏览 + SQL 执行)
│   │   ├── LogViewer.tsx    # 日志查看器
│   │   ├── EnvConfig.tsx    # 环境配置管理
│   │   └── OpsPanel.tsx     # 运维面板(服务启停 + Git + 系统监控)
│   ├── components/          # 可复用组件
│   │   ├── DwdTableSelector.tsx  # DWD 表选择器
│   │   ├── ErrorBoundary.tsx     # 错误边界
│   │   ├── LogStream.tsx         # 实时日志流组件
│   │   ├── ScheduleTab.tsx       # 调度配置标签页
│   │   └── TaskSelector.tsx      # 任务选择器
│   ├── api/                 # API 调用层
│   │   ├── client.ts        # Axios 实例baseURL + JWT 拦截器)
│   │   ├── tasks.ts         # 任务配置 API
│   │   ├── execution.ts     # 任务执行 API
│   │   ├── schedules.ts     # 调度管理 API
│   │   ├── etlStatus.ts     # ETL 状态 API
│   │   ├── dbViewer.ts      # 数据库查看器 API
│   │   ├── envConfig.ts     # 环境配置 API
│   │   └── opsPanel.ts      # 运维面板 API
│   ├── store/
│   │   └── authStore.ts     # Zustand 认证状态JWT 持久化 + hydrate
│   └── types/               # TypeScript 类型定义
├── index.html               # HTML 入口
├── vite.config.ts           # Vite 配置
├── tsconfig.json            # TypeScript 配置
└── package.json             # 依赖声明

启动

cd apps/admin-web
pnpm install
pnpm dev          # 启动开发服务器(默认 http://localhost:5173
pnpm build        # 生产构建
pnpm preview      # 预览生产构建

页面功能

登录页 (/login)

用户名密码登录JWT 令牌存储在 localStorage通过 Zustand authStore 管理。

任务配置 (/)

ETL 任务的核心配置界面:

  • 选择执行流程7 种 Flow
  • 勾选要执行的任务(按业务域分组)
  • 设置处理模式(增量/校验/全窗口)
  • 配置时间窗口参数
  • 实时预览生成的 CLI 命令
  • 一键执行或加入队列

任务管理 (/task-manager)

  • 查看执行队列(拖拽排序、删除、取消)
  • 执行历史列表(状态、耗时、退出码)
  • 实时日志流WebSocket 推送)

ETL 状态 (/etl-status)

  • 各 ODS 表的数据游标(最后抓取时间、记录数)
  • 最近 50 条执行记录

数据库查看器 (/db-viewer)

  • 浏览 ETL 数据库 Schema → 表 → 列结构
  • 执行只读 SQL 查询(带安全限制)
  • 结果表格展示

日志查看器 (/log-viewer)

查看历史执行的完整日志输出。

环境配置 (/env-config)

查看和编辑根 .env 文件中的配置项(敏感值脱敏显示)。

运维面板 (/ops-panel)

  • 服务状态监控test/prod 环境的 PID、内存、CPU
  • 服务启停控制(启动/停止/重启)
  • Git 状态查看和 pull 操作
  • 依赖同步(uv sync
  • 系统资源概况CPU、内存、磁盘

认证与路由守卫

  • 所有功能页面通过 PrivateRoute 组件保护
  • 未登录自动重定向到 /login
  • JWT 令牌通过 Axios 拦截器自动附加到请求头
  • 应用启动时通过 hydrate() 从 localStorage 恢复认证状态

API 层

src/api/client.ts 创建 Axios 实例,配置:

  • baseURL:默认 http://localhost:8000
  • 请求拦截器:自动附加 Authorization: Bearer <token>
  • 响应拦截器401 时自动清除认证状态并跳转登录

各 API 模块对应后端路由,提供类型安全的调用接口。

状态管理

使用 Zustand 管理全局认证状态:

  • isAuthenticated:是否已登录
  • token / refreshTokenJWT 令牌
  • login() / logout() / hydrate():状态操作

与后端的关系

管理后台通过 REST API 与 apps/backend/ 通信:

  • 开发环境Vite 代理到 http://localhost:8000
  • 生产环境:通过 CORS_ORIGINS 配置跨域

依赖

{
  "react": "^19.1.0",
  "react-dom": "^19.1.0",
  "react-router-dom": "^7.6.1",
  "antd": "^5.24.7",
  "axios": "^1.9.0",
  "zustand": "^5.0.5",
  "dayjs": "^1.11.19"
}

Roadmap

  • 用户申请审批界面(对接 /api/xcx-auth 审批端点)
  • 数据看板页面(助教业绩、财务日报、客户分析)
  • 权限管理界面(角色/权限配置)
  • 暗色主题支持
  • 国际化i18n