# manage-system

**Repository Path**: haifengworker/manage-system

## Basic Information

- **Project Name**: manage-system
- **Description**: 毕业设计 后台管理系统
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-03
- **Last Updated**: 2026-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中医药材管理系统 - 前端项目

基于 Vue 3 + TypeScript + Element Plus + Tailwind CSS 的现代化管理系统前端。

## 技术栈

- **框架：** Vue 3.5 + TypeScript 5.6
- **构建工具：** Vite 7.1
- **UI 组件库：** Element Plus 2.11
- **CSS 框架：** Tailwind CSS 4.1
- **状态管理：** Pinia 3.0
- **路由：** Vue Router 4.5
- **HTTP 客户端：** Axios 1.12
- **图表：** ECharts 6.0
- **富文本编辑器：** WangEditor 5.1
- **图片裁剪：** Vue Cropper 1.1
- **代码规范：** ESLint + Prettier + Stylelint
- **Git 提交规范：** Commitizen + Commitlint + Husky

## 功能特性

### 核心功能

- ✅ 用户认证与权限管理（JWT Token）
- ✅ 用户管理（增删改查、权限分配、密码重置）
- ✅ 个人中心（头像上传、信息修改、密码修改）
- ✅ 药材管理（药材信息维护、图片上传）
- ✅ 图片上传与裁剪（支持正方形/长方形裁剪）
- ✅ RAG 智能问答（基于向量数据库的知识检索）
- ✅ 响应式布局（支持桌面端和移动端）

### 技术特性

- ✅ 自动按需导入组件和 API
- ✅ 路由懒加载与代码分割
- ✅ Gzip 压缩优化
- ✅ 暗黑模式支持
- ✅ 多主题切换
- ✅ 国际化支持
- ✅ 锁屏功能
- ✅ 全屏功能
- ✅ 面包屑导航
- ✅ 标签页导航

## 环境要求

- **Node.js：** >= 20.19.0
- **pnpm：** >= 8.8.0

## 快速开始

### 1. 克隆项目

```bash
git clone <repository-url>
cd manage-system
```

### 2. 安装依赖

```bash
pnpm install
```

### 3. 配置环境变量

编辑 `.env` 文件，配置前端端口与后端地址（开发环境默认通过 Vite 代理转发 `/api` 到后端）：

```env
# 版本号
VITE_VERSION = 3.0.1

# 端口号
VITE_PORT = 3006

# 应用部署基础路径
VITE_BASE_URL = /

# API 服务地址
# - 推荐（默认）：留空表示同源（配合 Vite 代理转发 /api）
# - 直连后端：填写 http://127.0.0.1:8000（不走代理，注意跨域/CORS）
VITE_API_URL =

# 代理目标地址（后端服务器地址）
VITE_API_PROXY_URL = http://127.0.0.1:8000

# 跨域请求时是否携带 Cookie
VITE_WITH_CREDENTIALS = false

# 是否打开路由信息
VITE_OPEN_ROUTE_INFO = false

# 锁屏加密密钥
VITE_LOCK_ENCRYPT_KEY = s3cur3k3y4adpro
```

**重要配置说明：**

- `VITE_API_PROXY_URL`：后端服务器地址（`vite.config.ts` 固定代理 `/api` → `VITE_API_PROXY_URL`）
- `VITE_PORT`：前端开发服务器端口

> 提示：本项目接口路径统一以 `/api` 开头；开发环境建议保持 `VITE_API_URL` 为空，让浏览器请求走同源 + Vite 代理，避免跨域问题。

### 4. 启动开发服务器

```bash
pnpm run dev
```

浏览器会自动打开 `http://localhost:3006`

### 5. 构建生产版本

```bash
pnpm run build
```

构建产物会生成在 `dist` 目录。

### 6. 预览生产构建

```bash
pnpm run serve
```

## 项目结构

```
manage-system/
├── public/                 # 静态资源
├── src/
│   ├── api/               # API 接口定义
│   │   ├── auth.ts        # 认证相关接口
│   │   ├── system-manage.ts # 系统管理接口
│   │   └── rag.ts         # RAG 问答接口
│   ├── assets/            # 资源文件
│   │   ├── images/        # 图片资源
│   │   ├── icons/         # 图标资源
│   │   └── styles/        # 样式文件
│   ├── components/        # 组件
│   │   ├── common/        # 通用组件
│   │   │   ├── ImageUpload.vue      # 图片上传组件
│   │   │   └── ImageCropper.vue     # 图片裁剪组件
│   │   └── core/          # 核心组件
│   │       ├── forms/     # 表单组件
│   │       └── layouts/   # 布局组件
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   │   └── modules/
│   │       ├── user.ts    # 用户状态
│   │       └── setting.ts # 系统设置
│   ├── types/             # TypeScript 类型定义
│   ├── utils/             # 工具函数
│   │   ├── http/          # HTTP 请求封装
│   │   └── auth/          # 认证工具
│   ├── views/             # 页面视图
│   │   ├── auth/          # 认证页面（登录/注册）
│   │   ├── system/        # 系统管理
│   │   │   ├── user/      # 用户管理
│   │   │   └── user-center/ # 个人中心
│   │   ├── herb/          # 药材管理
│   │   └── rag/           # RAG 问答
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件
├── .env                   # 环境变量配置
├── vite.config.ts         # Vite 配置
├── tsconfig.json          # TypeScript 配置
├── package.json           # 项目依赖
└── README.md              # 项目说明
```

## 可用脚本

```bash
# 启动开发服务器
pnpm run dev

# 构建生产版本
pnpm run build

# 预览生产构建
pnpm run serve

# 代码检查
pnpm run lint

# 代码修复
pnpm run fix

# 格式化代码
pnpm run lint:prettier

# 样式检查
pnpm run lint:stylelint

# Git 提交（使用 Commitizen）
pnpm run commit

# 清理开发缓存
pnpm run clean:dev
```

## 核心功能说明

### 1. 用户认证

- **登录：** 支持用户名/密码登录，返回 JWT Token
- **Token 管理：** 自动在请求头添加 Token，Token 过期自动跳转登录页
- **权限控制：** 基于角色的权限控制（超级管理员、管理员、普通用户）

### 2. 图片上传与裁剪

**ImageUpload 组件：**

```vue
<ImageUpload
  v-model="imageUrl"
  width="200px"
  height="150px"
  :crop-aspect-ratio="[4, 3]"
  placeholder="上传图片"
/>
```

**参数说明：**

- `v-model`：图片 URL（双向绑定）
- `width/height`：预览尺寸
- `crop-aspect-ratio`：裁剪比例 [宽, 高]，如 [1, 1] 正方形，[4, 3] 长方形
- `enable-crop`：是否启用裁剪（默认 true）
- `circle`：是否圆形显示（用于头像）

**使用场景：**

- 用户头像：1:1 正方形裁剪
- 药材图片：4:3 长方形裁剪

### 3. RAG 智能问答

基于向量数据库的知识检索问答系统：

- 支持上传文档（PDF、TXT、MD、DOCX）
- 自动向量化并存储到 Chroma 数据库
- 智能检索相关文档片段
- 基于检索结果生成回答

### 4. 响应式布局

- 桌面端：完整功能展示
- 平板端：自适应布局调整
- 移动端：优化的移动端体验

## 开发规范

### 代码风格

项目使用 ESLint + Prettier + Stylelint 统一代码风格：

- **JavaScript/TypeScript：** ESLint + Prettier
- **Vue 单文件组件：** ESLint + Stylelint + Prettier
- **CSS/SCSS：** Stylelint + Prettier

### Git 提交规范

使用 Commitizen 规范提交信息：

```bash
pnpm run commit
```

提交类型：

- `feat`：新功能
- `fix`：修复 Bug
- `docs`：文档更新
- `style`：代码格式调整
- `refactor`：重构
- `perf`：性能优化
- `test`：测试相关
- `chore`：构建/工具相关

### 组件开发规范

1. **组件命名：** 使用 PascalCase，如 `ImageUpload.vue`
2. **Props 定义：** 使用 TypeScript 接口定义
3. **事件命名：** 使用 kebab-case，如 `@update:modelValue`
4. **样式作用域：** 使用 `<style scoped>`

## 常见问题

### 1. 安装依赖失败

**问题：** pnpm install 报错

**解决方案：**

```bash
# 清理缓存
pnpm store prune

# 重新安装
pnpm install
```

### 2. 启动失败

**问题：** 端口被占用

**解决方案：** 修改 `.env` 文件中的 `VITE_PORT` 为其他端口。

### 3. API 请求失败

**问题：** 请求后端接口 404 或跨域

**解决方案：**

1. 确认后端服务已启动
2. 检查 `.env` 中的 `VITE_API_PROXY_URL` 是否正确
3. 检查 `vite.config.ts` 中的代理配置

### 4. 图片上传失败

**问题：** 上传图片返回 401 Unauthorized

**解决方案：**

1. 确认已登录且 Token 有效
2. 检查后端 MinIO 服务是否正常
3. 查看浏览器控制台错误信息

### 5. 构建失败

**问题：** pnpm run build 报错

**解决方案：**

```bash
# 清理缓存
rm -rf node_modules/.vite
rm -rf dist

# 重新构建
pnpm run build
```

## 浏览器支持

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## 相关文档

- [Vue 3 官方文档](https://cn.vuejs.org/)
- [Vite 官方文档](https://cn.vitejs.dev/)
- [Element Plus 官方文档](https://element-plus.org/zh-CN/)
- [Tailwind CSS 官方文档](https://tailwindcss.com/)
- [Pinia 官方文档](https://pinia.vuejs.org/zh/)

## 许可证

MIT License

## 联系方式

如有问题，请提交 Issue 或联系开发团队。