通用大模型模板 · Hertz Admin + AI

<div align="center">

<h1>通用大模型模板 · Hertz Admin + AI</h1>

现代化、可即用的管理后台前端模板。聚焦“工程化 + 体验”，内置账号体系、权限路由、主题美化、知识库、YOLO 模型全流程（管理/类别/告警/历史）等典型模块。

<p>
基于 Vite + Vue 3 + TypeScript + Ant Design Vue + Pinia + Vue Router 构建
</p>

</div>

---

## ✨ 特性一览

- 设计统一：全局“苹果风格”主题（卡片/弹窗/按钮/输入/分页），开箱即用且风格一致
- 工程规范：TypeScript 强类型、请求与错误拦截、模块化 API、权限化菜单/路由
- 典型业务：
  - 知识库管理：分类树、列表搜索、编辑/发布，已优化分类切换闪烁
  - YOLO 模型：模型管理、模型类别管理、告警处理中心、检测历史管理
  - 认证体系：登录/注册（字段对齐、错误信息透出），可扩展验证码
- 体验友好：延迟 loading 避免闪烁、毛玻璃质感、统一按钮与交互反馈

## 🧩 技术栈

- 构建：Vite
- 语言：TypeScript
- 框架：Vue 3（Composition API）
- UI：Ant Design Vue
- 状态：Pinia
- 路由：Vue Router

## 📦 目录结构（核心）

```
通用大模型模板/
└─ hertz_server_diango_ui_2/              # 前端工程（Vite）
   ├─ public/                             # 公共静态资源
   ├─ src/
   │  ├─ api/                             # 接口定义（auth、yolo、knowledge、…）
   │  ├─ locales/                         # 国际化
   │  ├─ router/                          # 路由与菜单（admin_menu.ts 自动化）
   │  ├─ stores/                          # Pinia
   │  ├─ styles/                          # 全局样式与变量（index.scss、variables.scss）
   │  ├─ utils/                           # 工具（请求、权限、URL 等）
   │  └─ views/                           # 页面
   │     ├─ admin_page/                   # 管理端模块
   │     ├─ user_pages/                   # 用户端模块
   │     └─ register.vue / Login.vue      # 登录注册
   ├─ index.html
   ├─ package.json
   └─ vite.config.ts
```

## 🚀 快速开始

```bash
# 进入工程目录
cd hertz_server_diango_ui_2

# 安装依赖
npm i

# 开发启动
npm run dev


## ⚙️ 环境与请求

- 默认使用同域代理或反向代理。按需要在环境文件中设置：
```bash
# .env.development（示例）
VITE_API_BASE=/api
```
- 请求封装：`src/utils/hertz_request.ts`（拦截器、错误提示、统一 header）

⚠️注:所有后端IP都更改为“localhost:3000”，需根据具体项目与对应后端开发对接

## 🔧 关键模块说明

- 主题美化（Design System）
  - `src/styles/index.scss`、`src/styles/variables.scss`
  - 全局统一：Modal/Drawer/Button/Input/Select/Table/Pagination…
  - 专门处理闪烁与焦点态的视觉细节

- 菜单与路由
  - `src/router/admin_menu.ts`：单文件维护菜单与路由，支持权限过滤与自动生成
  - 统一面包屑：已移除“首页/”的冗余展示，仅保留当前层级

- 知识库管理
  - `src/views/admin_page/KnowledgeBaseManagement.vue`
  - 分类树 + 列表搜索 + 编辑/发布
  - 已优化分类切换闪烁（分类卡片不 Loading、表格 Loading 延迟）

- YOLO 模块
  - 模型管理：上传/列表/启用禁用（苹果风格拖拽区与卡片）
  - 模型类别管理：别名编辑、等级切换
  - 告警处理中心：统计卡片、筛选、批量处理、详情预览
  - 检测历史管理：搜索、筛选、对比查看（图片/视频），已移除“下载结果”按钮（后端未实现）

- 认证模块
  - API：`src/api/auth.ts`
  - 注册页：`src/views/register.vue` 已与后端对齐字段
    - 提交字段：`username, password, confirm_password, email, phone, real_name`
    - 兼容字段：`captcha, captcha_id`（未启用可传空串）
    - 统一错误提示透出

## 🧪 常见问题（FAQ）

- 按钮样式与其他页面不一致？
  - 已在 `src/styles/index.scss` 对 `.ant-btn` 全局统一。若仍不一致，检查局部覆盖或第三方样式。

- 分类切换时闪烁？
  - 左侧分类卡片不再受列表 Loading 影响；表格 Loading 使用 `{ spinning, delay: 200 }`。仍抖动可增加骨架屏或请求防抖。

- 接口没有请求或字段不匹配？
  - 检查 `src/api/*.ts` 与页面 `payload` 是否一致；打开浏览器 Network 面板查看请求/响应详情。

## 🛠️ 二次开发建议

- 新增模块：在 `src/views/admin_page/` 增加页面，并在 `src/router/admin_menu.ts` 添加菜单与路由映射
- 改造主题：在 `styles/variables.scss` 修改色板与圆角/阴影；在 `index.scss` 扩展组件级风格
- 对接后端：在 `src/api/` 创建对应接口文件，使用统一 `request` 封装

## 📜 脚本列表

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
```