通用大模型模板 · Hertz Admin + AI
现代化的管理后台前端模板，面向二次开发的前端工程师。内置账号体系、权限路由、主题美化、知识库、YOLO 模型全流程（管理 / 类别 / 告警 / 历史）等典型模块。
基于 Vite + Vue 3 + TypeScript + Ant Design Vue + Pinia + Vue Router 构建
---
## ✨ 特性（面向前端）
- **工程化完善**：TS 强类型、模块化 API、统一请求封装、权限化菜单/路由
- **设计统一**：全局“超现代风格”主题，卡片 / 弹窗 / 按钮 / 输入 / 分页风格一致
- **业务可复用**：
- 知识库管理：分类树 + 列表搜索 + 编辑/发布
- YOLO 模型：模型管理、模型类别管理、告警处理中心、检测历史管理
- AI 助手：多会话列表 + 消息记录 + 多布局对话界面（含错误调试信息）
- 认证体系：登录/注册、验证码
- **可扩展**：清晰的目录划分和命名规范，方便直接加模块或替换现有实现
## 🧩 技术栈
- 构建：Vite
- 语言：TypeScript
- 框架：Vue 3（Composition API）
- UI：Ant Design Vue
- 状态：Pinia
- 路由：Vue Router
## 📦 项目结构与职责
> 根目录：`通用大模型模板/`
```bash
通用大模型模板/
└─ hertz_server_diango_ui_2/ # 前端工程（Vite）
├─ public/ # 公共静态资源（不走打包器）
├─ src/
│ ├─ api/ # 接口定义（auth / yolo / knowledge / captcha / ai ...）
│ │ └─ yolo.ts # YOLO 模型 & 检测 & 类别相关 API
│ ├─ locales/ # 国际化文案
│ ├─ router/ # 路由与菜单配置
│ │ ├─ admin_menu.ts # 管理端菜单 + 路由映射（权限 key）
│ │ ├─ user_menu_ai.ts # 用户端菜单 + 路由映射（含 AI 助手）
│ │ └─ index.ts # Vue Router 实例 + 全局路由守卫
│ ├─ stores/ # Pinia Store
│ │ ├─ hertz_app.ts # 全局应用设置（语言、布局、菜单折叠等）
│ │ ├─ hertz_user.ts # 用户 / 鉴权状态
│ │ └─ hertz_theme.ts # 主题配置与 CSS 变量
│ ├─ styles/ # 全局样式与变量
│ │ ├─ index.scss # 全局组件风格覆盖（Button / Table / Modal ...）
│ │ └─ variables.scss # 主题色、阴影、圆角等变量
│ ├─ utils/ # 工具方法 & 基础设施
│ │ ├─ hertz_request.ts # Axios 封装（baseURL、拦截器、错误提示）
│ │ ├─ hertz_url.ts # 统一 URL 构造（API / 媒体 / WebSocket）
│ │ ├─ hertz_env.ts # 读取 & 校验 env 变量
│ │ └─ hertz_router_utils.ts # 路由相关工具 & 调试
│ ├─ views/ # 所有页面
│ │ ├─ admin_page/ # 管理端页面
│ │ │ ├─ ModelManagement.vue # YOLO 模型管理
│ │ │ ├─ AlertLevelManagement.vue # 模型类别管理
│ │ │ ├─ DetectionHistoryManagement.vue # 检测历史管理
│ │ │ └─ ... # 其他管理端模块
│ │ ├─ user_pages/ # 用户端页面（检测端 + AI 助手）
│ │ │ ├─ index.vue # 用户端主布局 + 顶部导航
│ │ │ ├─ AiChat.vue # AI 助手对话页面
│ │ │ ├─ YoloDetection.vue # 离线检测页面
│ │ │ ├─ LiveDetection.vue # 实时检测页面（WebSocket）
│ │ │ └─ ... # 告警中心 / 通知中心 / 知识库等
│ │ ├─ Login.vue # 登录页
│ │ └─ register.vue # 注册页
│ ├─ App.vue # 应用根组件
│ └─ main.ts # 入口文件（挂载 Vue / 路由 / Pinia）
├─ .env.development # 开发环境变量（前端专用）
├─ .env.production # 生产构建环境变量
├─ vite.config.ts # Vite 配置（代理、构建、别名等）
└─ package.json
```
## 📁 文件与命名规范（建议）
- **组件 / 页面**
- 页面：`src/views/admin_page/FooBarManagement.vue`，以业务 + Management 命名
- 纯组件：放到 `src/components/`，使用大驼峰命名，如 `UserSelector.vue`
- **接口文件**
- 同一业务一个文件：`src/api/yolo.ts`、`src/api/auth.ts`
- 内部导出 `xxxApi` 对象 + TS 类型：`type AlertLevel`, `type YoloModel` 等
- **样式**
- 全局或主题相关：放 `src/styles/`（注意不要在这里写页面私有样式）
- 单页面样式：使用 `