# 前端页面功能完整汇总

## 一、基础页面

### 1. base.html
- **功能**：基础布局模板
- **包含内容**：
  - 侧边栏导航（首页、生成题目、任务、部署管理、个人中心、管理后台）
  - 顶部栏（搜索框、主题切换、用户菜单、通知）
  - 用户认证状态显示
  - 角色标识（超级管理员、管理员）
  - 响应式移动端菜单

## 二、首页

### 2. pages/home/index.html
- **功能**：系统首页
- **主要功能**：
  - 英雄区域（系统介绍、快速开始按钮）
  - 功能卡片展示（AI智能生成、多方向支持、一键部署、知识库管理、灵活配置、多语言支持）
  - 可用方向展示（动态加载所有已启用的方向）
  - 快速开始步骤指引（选择方向 → 填写需求 → AI生成 → 部署测试）

## 三、认证相关页面

### 3. pages/auth/login.html
- **功能**：用户登录
- **主要功能**：
  - 用户名/邮箱登录
  - 密码输入
  - 记住我选项
  - 跳转注册链接

### 4. pages/auth/register.html
- **功能**：用户注册
- **主要功能**：
  - 用户名注册（3-20字符，字母数字下划线）
  - 邮箱注册
  - 密码设置（至少8字符，包含大小写字母和数字）
  - 确认密码
  - 跳转登录链接

### 5. pages/auth/profile.html
- **功能**：个人中心
- **主要功能**：
  - **我的题目标签页**：
    - 按方向筛选题目
    - 题目列表展示（名称、描述、创建时间、难度）
    - 题目操作（查看题目、下载源码、部署题目、删除题目）
    - 空状态提示
  - **AI配置标签页**：
    - 当前AI配置状态显示
    - 系统默认AI选项
    - 个人配置选项（自定义API、Augment CLI）
    - 自定义API配置（提供商、模型、API Key、Base URL、测试连接）
    - Augment CLI配置（Session Token、验证Token）
    - 我的配置列表（查看、编辑、设为默认、删除）
  - **修改密码标签页**：
    - 当前密码验证
    - 新密码设置
    - 确认新密码

## 四、管理后台页面

### 6. pages/admin/index.html
- **功能**：管理控制台首页
- **主要功能**：
  - 欢迎区域（角色标识）
  - 统计卡片（题目数、用户数等）
  - 快速操作（方向管理、生成题目、数据管理、系统设置）
  - 方向概览（显示所有方向，支持快速生成题目）

### 7. pages/admin/categories.html
- **功能**：CTF方向管理
- **主要功能**：
  - 方向列表展示（网格布局）
  - 方向卡片（图标、名称、描述、启用状态）
  - 方向操作（生成题目、配置、启用/禁用、删除）
  - 添加新方向（模态框：ID、名称、图标选择器、描述、启用状态）
  - 导出全部方向配置（JSON格式）
  - 批量导入方向配置（支持JSON文件或粘贴JSON，支持创建/覆盖/合并模式）
  - 初始化默认方向配置
  - 浮动图标大全面板（Font Awesome图标选择器，支持分类、搜索）

### 8. pages/admin/category_detail.html
- **功能**：方向详细配置页面
- **主要功能**：
  - **标签页导航**：基础信息、表单设计、阶段配置、Prompt模板、知识库
  - **基础信息标签页**：
    - 方向名称编辑
    - 图标编辑
    - 描述编辑
    - 启用状态开关
    - 保存所有更改
  - **表单设计标签页**：
    - 表单字段列表（支持拖拽排序）
    - 字段编辑（ID、标签、类型、必填、占位符、默认值、选项列表）
    - 添加字段按钮
    - 可视化设计器链接
    - JSON编辑器（格式化、应用更改）
    - 保存所有更改
  - **阶段配置标签页**：
    - 难度标签栏（入门、简单、中等、困难）
    - 阶段列表（支持拖拽排序）
    - 阶段编辑（ID、名称、排序、描述、输出格式、知识库脚本配置）
    - 添加阶段按钮
    - JSON编辑器
    - 保存所有更改
  - **Prompt模板标签页**：
    - 难度标签栏切换
    - 系统提示配置（阶段开始前的内容，支持插入任务流程、插入模板、格式化）
    - 阶段Prompt配置列表（每个阶段可配置独立的Prompt）
    - Prompt编辑（名称、描述、内容、支持Jinja2模板语法）
    - 导出当前难度Prompt
    - 导出全部Prompt
    - 预览完整Prompt
    - 保存所有更改
  - **知识库标签页**：
    - Windows风格文件浏览器（左侧文件夹树、右侧文件列表）
    - 文件操作（上传、下载、删除、创建文件/文件夹、编辑文件内容）
    - 压缩包上传并解压
    - 面包屑导航
    - 工具栏（向上、后退、前进、刷新）
    - 保存所有更改
  - 浮动图标大全面板

### 9. pages/admin/form_designer.html
- **功能**：表单可视化设计器
- **主要功能**：
  - 左侧字段类型面板（单选字段、多选字段、分类多选、文本输入、多行文本、数字输入）
  - 中间预览区域（拖拽排序、点击编辑）
  - 右侧属性设置面板（基础信息、选项列表、验证规则）
  - 字段计数显示
  - 清空、导出JSON、保存表单
  - 浮动图标大全面板

### 10. pages/admin/settings.html
- **功能**：系统设置
- **主要功能**：
  - **系统默认AI配置**：
    - AI提供商选择
    - API Key设置（支持显示/隐藏）
    - 模型选择
    - Base URL设置
    - 测试连接
    - 保存配置
  - **用户注册开关**：
    - 允许/禁止新用户注册
  - **系统信息**：
    - 系统状态
    - Python版本
    - Docker状态
    - 数据库类型
  - **系统工具**：
    - 系统健康检查
    - 清理过期部署
    - 清理临时文件
    - 清理无效题目
    - 刷新系统缓存
    - 重置数据库（危险操作）

### 11. pages/admin/system_config.html
- **功能**：系统配置
- **主要功能**：
  - **题目生成限制**：
    - 用户注册开关
    - 允许的编程语言（多选，支持全选/反选）
    - 允许的难度（多选）
    - 允许的场景（多选）
    - 允许的漏洞类型（多选）
    - 保存配置
  - **UI定制配置**：
    - 页面标题
    - 主色调（颜色选择器）
    - 页面描述
    - 次要色调
    - Logo URL
    - Favicon URL
    - 保存UI配置
  - **文件上传配置**：
    - 最大上传大小（MB）
    - 保存上传配置

### 12. pages/admin/data.html
- **功能**：数据管理
- **主要功能**：
  - **标签页导航**：用户、题目、部署
  - **用户标签页**：
    - 用户列表（ID、用户名、邮箱、状态、注册时间）
    - 用户操作（查看详情、编辑、权限管理、删除）
    - 新增用户（模态框：用户名、邮箱、密码、角色、状态）
    - 编辑用户（模态框：邮箱、角色、状态、新密码）
    - 查看用户详情（模态框：完整用户信息）
    - 权限管理（模态框：为管理员分配方向权限）
    - 分页显示
  - **题目标签页**：
    - 方向筛选按钮
    - 题目列表（ID、名称、方向、出题人、状态、创建时间）
    - 题目操作（查看、部署）
    - 清理无效题目按钮
    - 分页显示
  - **部署标签页**：
    - 部署列表（ID、UUID、题目、端口、状态、创建时间）
    - 部署操作（查看详情、访问）
    - 分页显示

### 13. pages/admin/user_permissions.html
- **功能**：用户权限管理
- **主要功能**：
  - 左侧用户列表（搜索、用户卡片）
  - 右侧权限配置面板
  - 用户详情卡片（头像、用户名、邮箱、角色）
  - 权限统计（已授权方向数、管理者权限数、编辑者权限数）
  - 添加权限表单（选择方向、选择权限级别）
  - 权限表格（方向、权限级别、操作）
  - 权限级别：查看者、编辑者、管理者
  - 更新权限级别
  - 移除权限

## 五、生成相关页面

### 14. pages/generate/wizard/select_category.html
- **功能**：选择题目方向
- **主要功能**：
  - 方向网格展示
  - 方向卡片（图标、名称、描述）
  - 空状态提示（无可用方向时）
  - 管理员可跳转到配置页面

### 15. pages/generate/wizard/dynamic.html
- **功能**：动态生成向导
- **主要功能**：
  - 向导头部（标题、描述、步骤指示器）
  - 动态表单面板（根据配置的字段动态生成）
  - 字段类型支持：
    - 单选字段（select）
    - 多选字段（multi_select）
    - 分类多选（multi_select_categorized）
    - 文本输入（text）
    - 多行文本（textarea）
    - 数字输入（number）
  - 步骤锁定机制（必须按顺序完成）
  - 选择摘要显示
  - 重置向导
  - 开始生成按钮（所有步骤完成后启用）

### 16. pages/generate/wizard/auto_start.html
- **功能**：自动启动生成
- **主要功能**：
  - 加载动画
  - 自动跳转到任务页面

### 17. pages/generate/tasks/list.html
- **功能**：任务列表
- **主要功能**：
  - 方向标签页（按方向分类显示任务）
  - 任务卡片（名称、状态、进度条、创建时间）
  - 任务状态（运行中、已完成、失败、已取消）
  - 任务操作（查看详情、查看结果）
  - 新建任务按钮
  - 空状态提示

### 18. pages/generate/tasks/detail.html
- **功能**：任务详情
- **主要功能**：
  - 任务头部（名称、状态、创建时间、查看结果按钮）
  - 左侧进度卡片（进度条、状态消息、错误信息）
  - 右侧日志容器（实时日志显示、清空、自动滚动）
  - 返回任务列表

### 19. pages/generate/result/index.html
- **功能**：生成结果查看
- **主要功能**：
  - **英雄头部卡片**：题目名称、描述、难度、创建时间、作者、方向
  - **标签页导航**：项目结构、AI助手
  - **项目结构标签页**：
    - Windows风格文件浏览器
    - 左侧文件夹树
    - 右侧文件列表
    - 工具栏（向上、后退、前进、刷新）
    - 面包屑导航
    - 文件操作（查看、编辑、下载）
  - **AI助手标签页**：
    - 快捷指令（代码优化、安全增强、Docker修复、难度调整）
    - 对话历史
    - 输入框（支持Enter发送、Shift+Enter换行）
    - 清屏、清空记忆
  - **快速操作按钮**：下载源码、部署题目、生成新题目
  - 文件编辑模态框（查看/编辑文件内容）
  - 文件上传模态框（知识库复用）
  - 压缩包上传模态框（知识库复用）

### 20. pages/generate/log/view.html
- **功能**：查看生成日志
- **主要功能**：
  - 日志头部（题目名称、返回链接、查看题目链接）
  - 日志信息（文件名、文件大小、行数）
  - 日志操作（复制日志、下载日志）
  - 日志查看器（代码高亮显示）

## 六、部署相关页面

### 21. pages/deployment/index.html
- **功能**：部署管理
- **主要功能**：
  - **三栏布局**：部署列表、题目列表、部署配置
  - **左侧部署列表**：
    - 部署统计（运行中、已停止、总数）
    - 部署项（状态点、题目名称、创建时间、访问链接）
    - 部署操作（查看详情、停止/启动、删除）
    - 空状态提示
  - **中间题目列表**：
    - 搜索框
    - 题目卡片（名称、难度、创建时间、运行状态）
    - 题目选择（点击选中）
    - 空状态提示
  - **右侧部署配置**：
    - 未选择占位
    - 选中题目信息
    - 部署表单（部署时长、端口设置）
    - 部署进度（进度条、实时日志）
    - 开始部署按钮
  - 确认操作模态框

### 22. pages/deployment/view.html
- **功能**：部署详情
- **主要功能**：
  - 操作栏（题目名称、部署ID、返回、停止/启动、删除）
  - **两列布局**：
    - **左侧部署信息**：
      - 部署信息卡片（容器ID、创建时间、过期时间、端口、访问地址、状态）
      - 状态历史表格（时间、状态、消息）
    - **右侧实时日志**：
      - 日志容器（深色主题、代码风格）
      - 日志控制（刷新、自动刷新开关）
      - 日志行分类（错误、警告、成功、信息）
  - 确认操作模态框

## 七、组件页面

### 23. components/logs/log_viewer.html
- **功能**：日志查看器组件

### 24. components/generate/log-modal.html
- **功能**：生成日志模态框组件

### 25. components/cards/selection_card.html
- **功能**：选择卡片组件

### 26. components/navigation/stepper.html
- **功能**：步骤指示器组件

### 27. components/alerts/status_alert.html
- **功能**：状态提示组件

### 28. components/forms/wizard_form.html
- **功能**：向导表单组件

### 29. components/lists/badge_list.html
- **功能**：徽章列表组件

### 30. components/lists/selection_list.html
- **功能**：选择列表组件

### 31. components/cards/info_card.html
- **功能**：信息卡片组件

### 32. components/navigation/nav_buttons.html
- **功能**：导航按钮组件

## 八、功能特性总结

### 核心功能模块

1. **用户认证与权限**
   - 用户登录/注册
   - 个人中心（题目管理、AI配置、密码修改）
   - 用户权限管理（方向级别的权限分配）

2. **方向管理**
   - 方向的CRUD操作
   - 方向配置（基础信息、表单设计、阶段配置、Prompt模板、知识库）
   - 方向导入/导出
   - 可视化表单设计器

3. **题目生成**
   - 动态生成向导（根据方向配置动态生成表单）
   - 任务管理（列表、详情、日志）
   - 生成结果查看（文件浏览器、AI助手）

4. **部署管理**
   - 部署列表管理
   - 题目选择与部署
   - 部署详情与日志

5. **系统管理**
   - 系统设置（默认AI、用户注册开关）
   - 系统配置（生成限制、UI定制、文件上传）
   - 数据管理（用户、题目、部署）
   - 系统工具（健康检查、清理、缓存刷新）

6. **知识库管理**
   - 文件浏览器（Windows风格）
   - 文件操作（上传、下载、删除、创建、编辑）
   - 压缩包上传与解压

7. **AI配置**
   - 系统默认AI配置
   - 个人AI配置（自定义API、Augment CLI）
   - AI配置测试与验证

8. **UI特性**
   - 玻璃拟态设计风格
   - 深色/浅色主题切换
   - 响应式布局
   - 图标大全面板（Font Awesome）
   - 实时日志显示
   - 进度条与状态指示

### 技术特性

- **动态表单系统**：根据数据库配置动态生成表单字段
- **多阶段生成流程**：支持按难度配置不同的生成阶段
- **Prompt模板管理**：支持Jinja2模板语法，按难度和阶段配置
- **文件浏览器**：Windows风格的文件管理界面
- **AI助手集成**：在生成结果页面提供AI对话功能
- **实时日志**：任务和部署的实时日志显示
- **权限分级**：查看者、编辑者、管理者三级权限