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/          # 可复用组件
│   │   ├── BusinessDayHint.tsx   # 营业日提示组件
│   │   ├── DwdTableSelector.tsx  # DWD 表选择器
│   │   ├── ErrorBoundary.tsx     # 错误边界
│   │   ├── LogStream.tsx         # 实时日志流组件
│   │   ├── ScheduleTab.tsx       # 调度配置标签页
│   │   └── TaskSelector.tsx      # 任务选择器
│   ├── api/                 # API 调用层
│   │   ├── client.ts        # Axios 实例（baseURL + JWT 拦截器）
│   │   ├── businessDay.ts   # 营业日配置 API
│   │   ├── 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）
│   │   └── businessDayStore.ts  # 营业日状态管理
│   └── 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 管理全局状态：

认证状态 (authStore)：

isAuthenticated：是否已登录
token / refreshToken：JWT 令牌
login() / logout() / hydrate()：状态操作

营业日状态 (businessDayStore)：

businessDayStartHour：营业日分割点
init() / refresh()：配置获取与刷新

与后端的关系

管理后台通过 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）

README.md Unescape Escape

apps/admin-web — 管理后台

技术栈

目录结构

启动

页面功能

登录页 (/login)

任务配置 (/)

任务管理 (/task-manager)

ETL 状态 (/etl-status)

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

日志查看器 (/log-viewer)

环境配置 (/env-config)

运维面板 (/ops-panel)