# qzy-naive-admin

**Repository Path**: qinzhiyong2/qzy-naive-admin

## Basic Information

- **Project Name**: qzy-naive-admin
- **Description**: 一个对接若依(RuoYi)后端的管理系统模版！
- **Primary Language**: 其他
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-08-24
- **Last Updated**: 2024-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简介

- **技术**：Vue 3 + TypeScript + Vite5 + Pinia + naive-ui。
- **描述**：因为公司后端使用若依，但是若依没有提供vue3+ts版本，并且UI本人接受不了，故重新造个轮子对接RuoYi后端。

## 特别鸣谢

- **SoybeanAdmin**：在网上找了一圈，SoybeanAdmin的UI设计风格我最喜欢，所以UI抄了它，附上官网链接：https://docs.soybeanjs.cn/zh/
- **RuoYi**：项目对接RuoYi前后端分离版本的后端，附上仓库链接：https://gitee.com/y_project/RuoYi-Vue

## 使用

**环境准备**

确保你的环境满足以下要求：

- **git**: 你需要git来克隆和管理项目版本。
- **NodeJS**: >=18.19.0，推荐 18.19.0 或更高。
- **pnpm**: >= 8.7.0，推荐 8.14.0 或更高。

**克隆项目**

```bash
git clone https://gitee.com/qinzhiyong2/qzy-naive-admin.git
```

**安装依赖**

```bash
pnpm i
```

> 由于本项目采用了 pnpm monorepo 的管理方式，因此请不要使用 npm 或 yarn 来安装依赖。

**启动项目**

```bash
开发环境： pnpm dev
测试环境： pnpm test
生产环境： pnpm prod
PS: 不喜欢自己去package.json改命令
```

**打包项目**

```bash
开发环境： pnpm build:dev
测试环境： pnpm build:test
生产环境： pnpm build:prod
PS: 不喜欢自己去package.json改命令
```

## 内置功能

1.  用户管理：用户是系统操作者，该功能主要完成系统用户配置。
2.  部门管理：配置系统组织机构（公司、部门、小组），树结构展现支持数据权限。
3.  岗位管理：配置系统用户所属担任职务。
4.  菜单管理：配置系统菜单，操作权限，按钮权限标识等。
5.  角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
6.  字典管理：对系统中经常使用的一些较为固定的数据进行维护。
7.  参数管理：对系统动态配置常用参数。
8.  通知公告：系统通知公告信息发布维护。
9.  操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
10. 登录日志：系统登录日志记录查询包含登录异常。

## 文件结构

```bash
├── public —— 公共文件
│ ├── favicon.svg —— 页签图标
├── src —— 主要代码
│ ├── api —— 所有接口
│ ├── assets —— 图标等静态资源
│ ├── auto-import —— 自动引入VueApi及导入组件
│ ├── components —— 全局公用组件
│ ├── config —— 请求封装等配置
│ ├── directives —— 全局自定义指令
│ ├── hooks —— 全局通用hooks
│ ├── layout —— 布局
│ ├── plugins —— 通用方法/工具
│ ├── router —— 路由
│ ├── store —— 全局store管理
│ ├── styles —— 样式
│ ├── types —— 全局类型
│ ├── utils —— 公用方法
│ ├── views —— 视图
│ ├── App.vue —— 入口页面
│ ├── main.ts —— 入口文件
│ ├── permission.ts —— 权限管理
│ └── vite-env.d.ts —— 系统类型
├── .env —— 全局环境配置（无论什么环境）
├── .env.development —— 开发环境配置
├── .env.test —— 测试环境配置
├── .env.production —— 生产环境配置
├── .eslintrc-auto-import.json —— 语法检查自动导入文件
├── eslint.config.mjs—— 语法检查规范文件
├── .gitignore —— git 忽略项
├── .prettierignore —— prettierrc 忽略项
├── index.html
├── LICENSE —— 许可证文件，自行删除
├── package.json 声明文件
├── pnpm-lock.yaml 插件版本锁定文件
├── prettier.config.js —— 语法格式规范
├── README.md —— 我自己
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
```

## 技术栈

> 列举所用到的技术栈和工具等信息。

| 依赖包名                    | 简要说明      |
| :-------------------------- | :------------ |
| @better-scroll/core         | 滚动组件      |
| @vueuse/core                | vue的工具方法 |
| @wangeditor/editor          | 富文本组件    |
| axios                       | 用来请求的    |
| js-cookie                   | 处理cookie    |
| jsencrypt                   | 加密工具      |
| naive-ui                    | UI框架        |
| pinia                       | 状态管理      |
| pinia-plugin-persistedstate | 持久化状态    |
| v3-cropper                  | 图片裁剪组件  |
| vue                         | 你说呢        |
| vue-draggable-plus          | 拖拽组件      |
| vue-router                  | 路由          |

## 预览图

![alt text](./src/assets/project-preview/1.png)![alt text](./src/assets/project-preview/2.png) ![alt text](./src/assets/project-preview/3.jpg) ![alt text](./src/assets/project-preview/4.jpg)