# qinghe-vue-pro-naive

**Repository Path**: unvue/qinghe-vue-pro-naive

## Basic Information

- **Project Name**: qinghe-vue-pro-naive
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2025-06-11
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QingHe Pro - 中后台管理系统

<div align="center">

[在线预览](http://111.231.25.169/login) | [文档](./docs/start.md) | [更新日志](./docs/update.md)

![QingHe Pro](https://img.shields.io/badge/QingHe%20Pro-中后台管理系统-blue)
![Vue](https://img.shields.io/badge/Vue-3.5.13-green)
![Naive UI](https://img.shields.io/badge/Naive%20UI-2.41.0-blue)
![Vite](https://img.shields.io/badge/Vite-6.3.5-orange)
![Pinia](https://img.shields.io/badge/Pinia-3.0.3-yellow)

**基于 Vue 3 + VueRouter + Pinia + Naive UI + Vite 的现代化中后台管理系统**

</div>

## 🔥 项目截图

<div align="center">

### 🎨 登录页面
<!-- 登录页面截图位置 -->
![登录页面](./docs/images/login.png)

> 登录页面采用动态粒子背景和渐变动画，提供流畅的用户体验
> 
### 📝 注册页面
<!-- 注册页面截图位置 -->
![注册页面](./docs/images/register.png)

> 用户注册页面，支持表单验证和用户信息录入


### 🔒 锁屏界面
<!-- 锁屏界面截图位置 -->
![锁屏界面](./docs/images/lockscreen.png)

> 美观的锁屏界面，支持自动锁屏和密码验证解锁

### 🏠 主控台
<!-- 主控台截图位置 -->
![主控台](./docs/images/dashboard.png)

> 现代化的主控台界面，支持菜单缩放、全屏、多标签页、无跳转刷新、页签数据缓存等功能

</div>

## 🔐 演示账号

<div align="center">

| 账号类型 | 用户名 | 密码 | 权限说明 |
|---------|--------|------|----------|
| 管理员 | admin | 任意密码 | 拥有所有权限，可访问所有功能模块 |

> 💡 **提示**：使用演示账号登录后，可以体验完整的系统功能，包括用户管理、权限控制、锁屏功能等。

</div>

## 📖 项目介绍

QingHe Pro 是一个基于 Vue 3 + Naive UI + Vite 构建的现代化中后台管理系统。项目采用 JavaScript 开发，让没有 TypeScript 经验的开发者也能快速上手最先进的前端技术栈，展示从 0 到成型过程中需要使用的技术和业界最佳实践。

### 🎯 项目目标

- **学习参考**：为前端开发人员提供完整的中后台项目开发思路
- **快速上手**：使用 JavaScript 开发，降低学习门槛，让更多开发者受益
- **效率提升**：通过组件化设计，让开发者在修改很少代码的前提下完成功能开发
- **最佳实践**：展示业界主流技术栈的组合使用方式
- **开源共享**：愿天下没有难写的代码，天下没有加班的程序员

### 🚧 后续开发计划

#### 📋 组件库开发
- **带搜索的列表组件**：支持搜索、筛选、分页等功能
- **高级表格组件**：支持排序、筛选、导出、批量操作
- **表单组件**：动态表单、验证规则、联动表单
- **图表组件**：基于 ECharts 的数据可视化组件
- **文件上传组件**：支持拖拽上传、进度显示、文件预览

#### 🎨 页面模板
- **数据统计页面**：图表展示、数据卡片、趋势分析
- **用户管理页面**：用户列表、角色分配、权限管理
- **系统设置页面**：配置管理、菜单管理、参数设置
- **个人中心页面**：个人信息、密码修改、偏好设置

#### 🔧 功能增强
- **主题系统**：支持多主题切换、自定义主题
- **国际化**：多语言支持、语言切换
- **权限系统**：细粒度权限控制、动态权限
- **消息通知**：实时消息、系统通知、消息中心
- **工作流**：审批流程、状态管理、流程设计

#### 📱 移动端适配
- **响应式设计**：完美适配移动端设备
- **PWA 支持**：离线缓存、推送通知
- **触摸优化**：手势操作、触摸反馈

#### 🔐 安全增强
- **数据加密**：敏感数据加密存储
- **防XSS攻击**：输入过滤、输出转义
- **CSRF防护**：Token验证、请求签名
- **审计日志**：操作记录、安全审计

## ✨ 核心特性

### 🏗️ 架构设计
- **现代化技术栈**：Vue 3 + JavaScript + Vite + Pinia
- **UI 框架**：基于 Naive UI 的组件库
- **状态管理**：Pinia 持久化状态管理
- **路由管理**：Vue Router 4 动态路由
- **样式方案**：Less + Tailwind CSS

### 🔐 安全特性
- **自动锁屏**：无操作自动锁屏保护
- **数据加密**：localStorage 数据加密存储
- **权限控制**：基于角色的权限管理系统
- **路由守卫**：完整的路由权限验证

### 🎨 用户体验
- **响应式设计**：适配各种屏幕尺寸
- **主题定制**：支持主题切换和自定义
- **动画效果**：流畅的页面切换和交互动画
- **锁屏界面**：美观的锁屏界面设计

### 📱 功能模块
- **用户认证**：登录、注册、权限验证
- **仪表盘**：数据可视化、工作台
- **系统管理**：用户、角色、菜单、租户管理
- **监控中心**：缓存、数据库、JVM、任务监控

<div align="center">

| 功能模块 | 特性 | 技术实现 |
|---------|------|----------|
| 🔐 用户认证 | 动态粒子背景、表单验证 | Vue 3 + Naive UI |
| 🏠 主控台 | 多标签页、无跳转刷新、数据缓存 | Vue Router + Pinia |
| 🔒 锁屏系统 | 极光背景、自动锁屏 | CSS3 + JavaScript |
| 👥 用户管理 | CRUD操作、权限控制 | Naive UI + 状态管理 |

</div>

## 🚀 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install
```

### 启动开发服务器

```bash
# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview
```

## 📁 项目结构

```
qinghe-vue-pro-naive/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 公共组件
│   │   ├── icon/          # 图标组件
│   │   ├── lockscreen/    # 锁屏组件
│   │   └── provider/      # 提供者组件
│   ├── config/            # 配置文件
│   ├── enums/             # 枚举定义
│   ├── layout/            # 布局组件
│   │   ├── header/        # 头部组件
│   │   ├── sider/         # 侧边栏组件
│   │   ├── tabview/       # 标签页组件
│   │   └── main/          # 主内容区
│   ├── plugins/           # 插件配置
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理
│   │   └── modules/       # 状态模块
│   ├── style/             # 样式文件
│   ├── utils/             # 工具函数
│   │   ├── dom/          # DOM 工具
│   │   ├── encrypt/      # 加密工具
│   │   └── use/          # 组合式函数
│   └── views/            # 页面组件
│       ├── auth/         # 认证页面
│       ├── dashboard/    # 仪表盘
│       ├── monitor/      # 监控页面
│       └── system/       # 系统管理
├── package.json
├── vite.config.js
└── README.md
```

## 🛠️ 技术栈

### 核心框架
- **Vue 3.5.13** - 渐进式 JavaScript 框架
- **JavaScript** - 原生 JavaScript 开发，无需 TypeScript 学习成本
- **Vite 6.3.5** - 下一代前端构建工具
- **Vue Router 4.5.1** - Vue.js 官方路由管理器

### UI 框架
- **Naive UI 2.41.0** - Vue 3 组件库
- **@vicons/antd** - Ant Design 图标库
- **Tailwind CSS 3.4.17** - 实用优先的 CSS 框架

### 状态管理
- **Pinia 3.0.3** - Vue 的状态管理库
- **pinia-plugin-persistedstate 4.4.1** - Pinia 持久化插件

### 工具库
- **@vueuse/core 13.3.0** - Vue 组合式 API 工具集
- **date-fns 4.1.0** - 现代 JavaScript 日期工具库
- **sm-crypto 0.3.13** - 国密算法库

### 开发工具
- **unplugin-auto-import 19.3.0** - 自动导入 API
- **unplugin-vue-components 28.7.0** - 自动导入组件
- **vite-plugin-pages 0.33.0** - 基于文件系统的路由

## 🎯 核心功能

### 认证系统
- 用户登录/注册
- 记住密码功能
- 自动登录验证
- 权限路由控制

### 布局系统
- 响应式侧边栏
- 多标签页管理（支持无跳转刷新）
- 页签数据缓存（keep-alive）
- 面包屑导航
- 页面缓存控制

### 锁屏功能
- 自动锁屏检测
- 美观的锁屏界面
- 密码验证解锁
- 防调试保护

### 状态管理
- 用户信息管理
- 菜单权限管理
- 配置信息持久化
- 页面状态缓存

<div align="center">

![功能架构](https://img.shields.io/badge/功能架构-模块化设计-blue)
![技术栈](https://img.shields.io/badge/技术栈-现代化-green)
![开发效率](https://img.shields.io/badge/开发效率-组件化-orange)

</div>

## 🔧 配置说明

### 基础配置

```javascript
// src/config/config.js
export const config = {
  title: "QingHe Pro",
  subtitle: "中后台管理系统",
  storageEncryptKey: "qingheabcd123",
  storageEncryptEnable: false,
  enableDebugModel: true,
  autoLock: {
    enabled: true,
    timeout: 60 * 30 * 1000, // 30分钟
    excludeRoutes: ['Login']
  }
}
```

### 自动锁屏配置

```javascript
// 启用自动锁屏
const { useAutoLock } = '@/utils/use/useAutoLock'
useAutoLock(30 * 60 * 1000) // 30分钟无操作自动锁屏
```

## 🎨 组件使用

### 图标组件

```vue
<template>
  <AIcon name="UserOutlined" size="24" color="#666" />
</template>

<script setup>
import { AIcon } from '@/components/icon'
</script>
```

### 锁屏组件

```vue
<template>
  <LockScreen v-if="isLocked" />
</template>

<script setup>
import { useLockScreenStore } from '@/store/modules/useLockScreenStore'
import LockScreen from '@/components/lockscreen'

const lockScreenStore = useLockScreenStore()
const isLocked = computed(() => lockScreenStore.isLocked)
</script>
```

## 📚 开发指南

### 添加新页面

1. 在 `src/views/` 下创建页面组件（使用 `.vue` 文件）
2. 在 `src/store/modules/useUserStore.js` 中添加菜单配置
3. 路由会自动生成并添加权限控制

### 添加新组件

1. 在 `src/components/` 下创建组件
2. 使用 `unplugin-vue-components` 自动导入
3. 组件可直接在模板中使用

### 状态管理

```javascript
// 使用 Pinia Store
import { useUserStore } from '@/store/modules/useUserStore'

const userStore = useUserStore()
await userStore.login(loginData)
```

### JavaScript 开发优势

- **零学习成本**：无需学习 TypeScript 语法
- **快速上手**：熟悉 JavaScript 即可开发
- **灵活性强**：动态类型，开发效率高
- **生态丰富**：JavaScript 生态更加成熟

## 🤝 贡献指南

我们欢迎所有形式的贡献，包括但不限于：

- 🐛 问题反馈
- 💡 功能建议
- 📝 文档改进
- 🔧 代码贡献

### 贡献步骤

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开 Pull Request

## 📄 授权协议

本项目采用 [Apache License 2.0](LICENSE) 开源协议。

- 允许个人和商业用途，免费使用、修改和分发本项目源代码及其衍生作品。
- 允许将本项目用于闭源或开源项目。
- 需要在分发时保留原作者版权声明和协议文件。
- 允许在修改后添加自己的版权声明，但需注明变更。
- 不得以任何方式暗示原作者为衍生作品背书。
- 本项目以“按现状”为基础提供，不提供任何明示或暗示的担保。

详细条款请参阅 [LICENSE](LICENSE) 文件。

## 🙏 致谢

感谢以下开源项目的支持：

- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
- [Naive UI](https://www.naiveui.com/) - Vue 3 组件库
- [Vite](https://vitejs.dev/) - 下一代前端构建工具
- [Pinia](https://pinia.vuejs.org/) - Vue 的状态管理库

## 📞 联系我们

- 项目地址：[GitHub](https://github.com/your-username/qinghe-vue-pro-naive)
- 问题反馈：[Issues](https://github.com/your-username/qinghe-vue-pro-naive/issues)
- 邮箱：your-email@example.com

---

<div align="center">

**愿天下没有难写的代码，天下没有加班的程序员**

Made with ❤️ by QingHe Team

</div>