# 第五步：前端全量迁移 — 工程部+设计部+JC组 工作报告

> 日期: 2026-05-21
> 部门: 工程部 / 设计部 / JC组
> 负责人: CTO / 项目经理(设计) / CTO
> 任务编号: F1-F16

---

## 工作内容

### F1: @theme 设计系统
- 品牌色 `--color-brand: oklch(55% 0.2 250)`
- 暗色系配色方案（slate-950 背景 + slate-900 卡片）
- 所有页面使用统一 `@theme` 定义

### F2: 布局壳（Alpine.js）
- Sidebar（可折叠）+ Header + Main 三栏布局
- Alpine.js `x-data` 管理侧边栏和暗黑模式状态
- 导航链接：仪表盘/服务器/文件/推送/脚本/凭据/调度/审计/设置

### F3: 暗黑模式
- `darkMode` 变量存储到 localStorage
- 全局 slate-950 暗色方案

### F4: Dashboard
- 4个统计卡片（总数/在线/离线/告警）
- 最近活动列表（从审计日志 API 获取）

### F5: 服务器列表
- 表格展示（状态/名称/地址/平台/Agent版本/最后心跳）
- 搜索过滤
- SSH终端链接
- 删除操作

### F6: 文件管理
- 服务器选择 + 目录路径输入
- 基础框架（待后端 API 完善文件浏览接口）

### F7: 推送页面
- 源路径 + 多选目标服务器 + 同步模式
- 调用 /api/sync/files 接口

### F8: 设置页
- 可变配置项编辑保存
- 调用 /api/settings/ 接口

### F9: 审计日志
- 表格展示（操作人/操作/目标/详情/时间）
- 彩色标签（login=绿, delete=红）

### F10: 脚本库
- 脚本列表 + 新建脚本表单

### F11: 凭据管理
- 密码预设列表

### F12: 其他页面
- 调度管理 (schedules.html)
- 重试队列 (retries.html)

### F13: 设计系统验收
⏳ 待设计部 UI 走查

### F14: E2E 测试
⏳ 待测试部

### F15: 前端安全审查
⏳ 待ECC组

### F16: PHP-FPM 下线
- Nginx 配置已更新：root=/web/app/，移除 PHP-FPM 配置块
- Supervisor 配置已更新：--workers + uvloop + httptools

## 交付物

### 前端页面 (12)
- `web/app/login.html` — 登录页
- `web/app/index.html` — 仪表盘 + 布局壳
- `web/app/servers.html` — 服务器列表
- `web/app/terminal.html` — Web SSH终端
- `web/app/push.html` — 批量推送
- `web/app/files.html` — 文件管理
- `web/app/scripts.html` — 脚本库
- `web/app/credentials.html` — 凭据管理
- `web/app/schedules.html` — 定时调度
- `web/app/retries.html` — 重试队列
- `web/app/audit.html` — 审计日志
- `web/app/settings.html` — 系统设置

### 部署配置
- `deploy/nexus.conf` — Supervisor (workers+uvloop)
- `deploy/nginx_172.31.170.47.conf` — Nginx (PHP-FPM移除)

## 验收意见

⏳ 待设计部UI走查 + 测试部E2E测试 + ECC安全审查