# hsh-admin-web

**Repository Path**: techshino/hsh-admin-web

## Basic Information

- **Project Name**: hsh-admin-web
- **Description**: HSH Admin - 基于 Vue3 + Element Plus 的现代后台管理系统，提供用户管理、角色权限、菜单管理、部门管理、字典管理、系统配置、多平台存储管理（支持本地/阿里云OSS/腾讯云COS等）、文件管理、定时任务、代码生成等完整功能，支持按钮级权限控制，开箱即用。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-02-12
- **Last Updated**: 2026-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HSH Admin

基于 Vue3 + Element Plus 的后台管理系统

## 技术栈

- Vue 3
- Vite
- Element Plus
- Vue Router
- Pinia
- Axios
- TypeScript

## 功能特性

- 🎯 用户登录/登出
- 👥 用户管理
- 🔐 角色管理（含权限分配 + 数据权限管理）
- 📋 菜单管理
- 🏢 部门管理
- 📚 字典管理
- ⚙️ 系统配置
- 💾 存储配置管理（支持本地、阿里云 OSS、腾讯云 COS、百度云 BOS、七牛云 Kodo、MinIO）
- 📁 文件管理
- ⏰ 定时任务管理（含 Cron 表达式编辑器 + 执行日志）
- 🔑 权限控制（基于权限标识的按钮级权限）
- 🏷️ 动态菜单加载
- 📌 标签页导航
- 🍞 面包屑导航

## 快速开始

### 安装依赖

```bash
npm install
# 或者
pnpm install
# 或者
yarn install
```

### 开发模式

```bash
npm run dev
```

### 生产环境构建

```bash
npm run build:prod
```

### 预览构建结果

```bash
npm run preview
```

## 环境变量

项目使用了两个环境变量文件：

### .env.development（开发环境）
```
VITE_APP_TITLE=HSH Admin (开发环境)
VITE_APP_BASE_API=/dev-api
VITE_APP_PROXY_TARGET=http://localhost:8080
```

### .env.production（生产环境）
```
VITE_APP_TITLE=HSH Admin (生产环境)
VITE_APP_BASE_API=https://api.example.com
```

## 项目结构

```
hsh-admin-web/
├── src/
│   ├── api/              # API 接口
│   ├── components/       # 公共组件
│   ├── composables/      # Vue 组合式函数
│   ├── layout/           # 布局组件
│   ├── router/           # 路由配置
│   ├── stores/           # Pinia 状态管理
│   ├── styles/           # 全局样式
│   ├── types/            # TypeScript 类型定义
│   ├── utils/            # 工具函数
│   ├── views/            # 页面视图
│   │   ├── system/       # 系统管理
│   │   ├── tool/         # 系统工具
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
├── .gitignore            # Git 忽略文件
├── index.html            # HTML 模板
├── package.json          # 依赖配置
├── vite.config.ts        # Vite 配置
├── tsconfig.json         # TypeScript 配置
├── README.md             # 项目说明
└── DEVELOPMENT.md        # 开发说明文档
```

## 权限控制

### 权限标识列表

| 模块 | 权限标识 | 说明 |
|--------|-----------|------|
| 用户管理 | user:add, user:edit, user:delete |
| 角色管理 | role:add, role:edit, role:delete |
| 菜单管理 | menu:add, menu:edit, menu:delete |
| 部门管理 | dept:add, dept:edit, dept:delete |
| 字典管理 | dict:view, dict:add, dict:edit, dict:delete |
| 系统配置 | config:add, config:edit, config:delete |
| 存储配置 | oss:config:edit, oss:config:active |
| 文件管理 | oss:file:view, oss:file:upload, oss:file:delete |
| 代码生成 | tool:gen:add, tool:gen:edit, tool:gen:preview, tool:gen:gen, tool:gen:delete |
| 定时任务 | tool:job:add, tool:job:edit, tool:job:run, tool:job:delete, tool:job:list |

### 使用方式

#### 使用指令

```vue
<el-button type="primary" v-permission="'user:add'" @click="handleAdd">新增</el-button>
```

#### 使用方法调用

```typescript
import { usePermissionStore } from '@/stores/permission'

const permissionStore = usePermissionStore()
if (permissionStore.hasPermission('user:edit')) {
  // 有编辑权限
}
```

## 后端接口

项目后端接口地址默认为 `http://localhost:8080/api`，可以在 `.env.development` 中修改 `VITE_APP_PROXY_TARGET` 配置。

开发环境使用代理配置，访问 `/dev-api/*` 会被代理到后端接口。

## 组件使用

### FileUploader 组件

通用文件上传组件，支持自定义配置。

```vue
<template>
  <FileUploader 
    button-text="上传图片" 
    @upload-success="handleSuccess"
    @upload-error="handleError"
  />
</template>

<script setup>
import FileUploader from '@/components/FileUploader/index.vue'

const handleSuccess = (file) => {
  console.log('上传成功:', file)
}

const handleError = (error) => {
  console.error('上传失败:', error)
}
</script>
```

**Props:**
- `buttonText` - 按钮文字，默认 "上传文件"
- `showFileList` - 是否显示文件列表，默认 false
- `showTip` - 是否显示提示文字，默认 false
- `tipText` - 提示文字内容
- `limit` - 文件数量限制，默认 1

**Events:**
- `upload-success` - 上传成功回调，参数为上传的文件信息
- `upload-error` - 上传失败回调

### use-file-url Composable

文件 URL 管理 Hook，支持缓存和临时授权 URL 获取。

```vue
<script setup>
import { useFileUrl } from '@/composables/use-file-url'

const { getCachedUrl, loadFileUrl, loadPresignedUrl, clearCache } = useFileUrl()

// 获取缓存的 URL
const cachedUrl = getCachedUrl('file-id')

// 加载文件 URL（带缓存）
const handlePreview = async (fileId) => {
  const url = await loadFileUrl(fileId)
  // 使用 url 进行预览
}

// 获取临时授权 URL
const handleDownload = async (fileId) => {
  const url = await loadPresignedUrl(fileId)
  // 使用临时 URL 下载
}

// 清除缓存
clearCache() // 清除所有缓存
clearCache('file-id') // 清除指定文件的缓存
</script>
```

## License

MIT