# ice-cream-admin
**Repository Path**: cloud_of_tim/ice-cream-admin
## Basic Information
- **Project Name**: ice-cream-admin
- **Description**: 雪糕后台管理系统（Ice Crean Admin）是一个 vue3+vite+vue-router+pinia 后台管理系统。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-07-04
- **Last Updated**: 2023-07-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Ice Cream Admin
雪糕后台管理系统
一个极简的 vue3 多窗口后台管理系统
版本：v1.1.0
## 前言
该项目目前为个人学习所用，还没有真正经历过产品的鞭打，因此不确保其系统的稳定性。
你可以基于此项目进行魔改，从而进行商业使用，但因其产生的任何负面影响，本人均不会进行承担。
简单来说，你只需要遵循本项目的 MIT 开源协议即可，本人只想安安静静地打打代码。
当然，如果项目有 bug 或者你有更好的建议，欢迎你提 issue 或 pull request。
本项目的灵感来源于花裤衩大佬的 vue-admin-template 和 vue-element-admin。
在此，很感谢花裤衩大佬的开源精神，至今大佬的项目都有很多地方值得进行学习。
本项目对标 vue-admin-template，旨在使用最新的 vue3 技术进行实现一个小而精的后台管理系统模板。
## 关于“雪糕”（Ice Cream）这个名称
“雪糕”其实是我养的一只猫，原本是想起名“竖琴海豹”（Harp Seal），但是想到不知道怎么 p logo，用别人的图片生怕会侵权，所以干脆把自己养的猫 p 成 logo 算了o(=•ェ•=)m。
随便画了一下，目前的 logo 有点生草......
| 原图 | logo |
| --- | --- |
| 
| |
## 主要框架/插件及其文档
| 框架/插件 | 文档 |
| --- | --- |
| vue3 | https://cn.vuejs.org/ |
| vite | https://vitejs.cn/ |
| vue-router | https://router.vuejs.org/zh/ |
| pinia | https://pinia.vuejs.org/ |
| pinia-plugin-persistedstate | https://github.com/prazdevs/pinia-plugin-persistedstate |
| element-plus | https://element-plus.gitee.io/zh-CN/ |
| @element-plus/icons-vue | https://github.com/element-plus/element-plus-icons |
另外，该项目是基于 create-vue 脚手架搭建的，相关文档在这里：https://github.com/vuejs/create-vue
项目里 vue 暴露的属性或方法和 element-plus 组件都是通过插件按需自动导入的，所以你会发现项目里有很多类似如下这种情况。
```js
// import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
// ref 和 ElMessage 都会按需自动导入，无需上面的 import
const test = ref()
ElMessage('element-plus 消息')
```
如果你想知道如何实现“按需自动导入”，可以参考这个项目 element-plus-best-practices 的 vite.config.ts 配置（也有关于如何配置 vue 的自动导入）以及 element-plus 自动导入的相关文档。
## 关于分支（branch）和标签（tags）
| 分支 | 说明 |
| --- | --- |
| master | 主干分支 |
| develop | 开发分支 |
| deploy | 发布分支 |
| gh-pages | github/gitee pages 部署分支 |
如果想要项目的稳定版本，请拉取标签（tags）的相关代码。
## 目前实现的功能
- 多窗口功能
- 可配置菜单
- 设置功能（是否开启多窗口功能、是否固定头部等等）
- 静态权限验证
- 动态权限验证
## 基于角色的权限验证（RBAC）
### 静态权限验证和动态权限验证
本系统给予两种方式进行权限验证，可根据自己的需求进行选择合适的方式。
（1）静态权限验证思路
- 在登录时，后端返回角色集字段，如：张三的角色集为：['admin', 'teacher']
- 前端根据“需求”在对应的路由 meta.roles 配置可以访问到该路由的角色集
（2）动态权限验证思路
- 在登录时，后端根据表（通常是用户表、角色表、权限表、用户角色表、角色权限表）数据进行返回登录用户的权限树（建议与前端的路由树结构一致）
- 前端将后端返回的权限树转化为自己的路由树（如果结构一致，可以省略这一步），再利用路由前置守卫将路由树添加到路由上。
### 静态权限验证和动态权限验证的区别
- 理论上，两种验证方式均可同时使用，但考虑到在实际业务中，通常仅会使用其中一种方式，本系统不做这个兼容，如有需要可以自己改写。
- 动态权限验证会比静态权限验证好很多，因为这可以随时在系统上定制菜单以及权限而无需做部署，而静态权限验证方案，每次修改权限都要进行部署一遍前端。
- 建议使用动态权限验证，它唯一的缺点可能就是稍微有点难实现，但是本系统已经把这个难点解决了，只需要后端的配合即可简单实现这一功能。
### 如何使用静态验证和动态验证
- 首先更改 .env 的 VITE_AUTH_MODE 环境变量（static: 静态权限验证；dynamic: 动态权限验证）
- 如果是静态权限验证方式
- 首先要在 login 页面的 login 接口对接里，需要将后端返回的角色集直接赋予到 userStore.roles，
后面的一切权限判断都会以 userStore.roles 数据作为依据。
- 前端根据“需求”在对应的路由 meta.roles 配置可以访问到该路由的角色集即可，如下所示：
```js
{
path: '/form',
...
meta: { ..., roles: ['admin', 'teacher'] },
...
}
```
- 如果是动态权限验证方式
- 首先要在 login 页面的 login 接口对接里，需要将后端返回的权限直接赋予到 userStore.auths。
- 然后改写 userStore.initDynamicRoutes() 方法，这个方法是用来根据 userStore.auths（即后端返回的权限） 初始化 userStore.dynamicRoutes，就是需要将后端的数据转化为前端的路由树结构，如果结构本来就一致，那就只需要直接赋值即可（建议与后端沟通，保持数据结构一致）。另外，这个方法会在登录后自动调用（详看：路由前置守卫）。
## Features
### 关于多窗口功能
现在的多窗口功能是基于 element-plus 的Tabs 组件来写的，所以有诸多限制。
第一个问题是，这里的样式难以改写成我理想中的样式，我理想中的样式是比较接近浏览器窗口的那种感觉。
第二个问题是，固定（fixed）窗口的头部时，样式发生了一点点异常的变化，暂时找不到原因。
第三个问题，由于这个 Tabs 的组件的设计并不太适合做类似浏览器的多窗口（主要是它的很多事件都是传递 name 值），我这里的写法存在内存泄漏问题，不过这只会发生在删除过多的窗口的极端情况下发生。
总之，后面肯定需要自己手写一个窗口组件来代替 element-plus 的 Tabs 组件进行实现多窗口功能。
## 使用
### Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
## License
[MIT](https://gitee.com/only1zhuo/ice-cream-admin/blob/master/LICENSE) license.
Copyright (c) 2022-present only1zhuo(技术四毛喵)