hertz_django/hertz_server_diango_ui/README.md

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

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

基于 Vite + Vue 3 + TypeScript + Ant Design Vue + Pinia + Vue Router 构建

---

✨ 特性一览

• 设计统一：全局“苹果风格”主题（卡片/弹窗/按钮/输入/分页），开箱即用且风格一致
• 工程规范：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

🚀 快速开始

# 进入工程目录
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 封装

📜 脚本列表

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