更新
This commit is contained in:
ktianc
parent
21daab781c
commit
3250099714
@ -5,64 +5,64 @@
|
||||
<h1>vue-element-plus-admin</h1>
|
||||
</div>
|
||||
|
||||
**English** | [中文](./README.zh-CN.md)
|
||||
[English](./README.md) | **中文**
|
||||
|
||||
## Introduction
|
||||
## 介绍
|
||||
|
||||
vue-element-plus-admin is a free and open source middle and background template based on `element-plus`. Developed using the latest mainstream technologies such as `vue3`, `vite3` and `typescript`, the out of the box middle and background front-end solution can be used as the starting template of the project and learning reference. And always pay attention to the latest technological trends and update them as soon as possible.
|
||||
vue-element-plus-admin 是一个基于 `element-plus` 免费开源的中后台模版。使用了最新的`vue3`，`vite3`，`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。
|
||||
|
||||
vue-element-plus-admin is positioned as a background integration scheme, which is not suitable for secondary development as a basic template. Because it integrates many functions that you may not use, it will cause a lot of code redundancy. If your project doesn't pay attention to this problem, you can also directly carry out secondary development based on it.
|
||||
vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
|
||||
|
||||
If you need a basic template, please switch to the `tempalte` branch. `Tempalte` simply integrates some common layout functions such as layout and dynamic menu, which is more suitable for developers to carry out secondary development.
|
||||
如需要基础模版，请切换到 `tempalte` 分支，`tempalte` 只简单集成了一些如：布局、动态菜单等常用布局功能，更适合开发者进行二次开发。
|
||||
|
||||
## Feature
|
||||
## 特性
|
||||
|
||||
- **State of The Art Development**：Use front-end front-end technology development such as Vue3/vite3
|
||||
- **TypeScript**: Application-level JavaScript language
|
||||
- **Theming**: Configurable themes
|
||||
- **International**：Built-in complete internationalization program
|
||||
- **Mock Server** Built-in mock data scheme
|
||||
- **Authority** Built-in complete dynamic routing permission generation scheme.
|
||||
- **Component** Multiple commonly used components are encapsulated twice
|
||||
- **Examples** Built-in rich examples
|
||||
- **最新技术栈**：使用 Vue3/vite3 等前端前沿技术开发
|
||||
- **TypeScript**: 应用程序级 JavaScript 的语言
|
||||
- **主题**: 可配置的主题
|
||||
- **国际化**：内置完善的国际化方案
|
||||
- **自定义数据** 内置 Mock 数据方案
|
||||
- **权限** 内置完善的动态路由权限生成方案
|
||||
- **组件** 二次封装了多个常用的组件
|
||||
- **示例** 内置丰富的示例
|
||||
|
||||
## Preview
|
||||
## 预览
|
||||
|
||||
- [vue-element-plus-admin](https://element-plus-admin.cn/) - Full version of the github site
|
||||
- [vue-element-plus-admin](https://kailong110120130.gitee.io/vue-element-plus-admin) - Full version of the gitee site
|
||||
- [vue-element-plus-admin](https://element-plus-admin.cn/) - 完整版 github 站点
|
||||
- [vue-element-plus-admin](https://kailong110120130.gitee.io/vue-element-plus-admin) - 完整版 gitee 站点
|
||||
|
||||
account: **admin/admin test/test**
|
||||
帐号：**admin/admin test/test**
|
||||
|
||||
`admin` account is used to simulate the control permission of the server, and render whatever the server returns
|
||||
`admin` 帐号用于模拟服务端控制权限，服务端返回什么就渲染什么
|
||||
|
||||
`test` account is used to simulate the front-end control authority. The server only returns the menu key to be displayed, and the front-end performs matching rendering
|
||||
`test` 帐号用于模拟前端控制权限，服务端只返回需要显示的菜单 key，前端进行匹配渲染
|
||||
|
||||
## Documentation
|
||||
## 文档
|
||||
|
||||
[Document Github](https://element-plus-admin-doc.cn/)
|
||||
[文档地址 Github](https://element-plus-admin-doc.cn/)
|
||||
|
||||
[Document Gitee](https://kailong110120130.gitee.io/vue-element-plus-admin-doc)
|
||||
[文档地址 Gitee](https://kailong110120130.gitee.io/vue-element-plus-admin-doc)
|
||||
|
||||
## Preparation
|
||||
## 前序准备
|
||||
|
||||
- [node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment
|
||||
- [Vite](https://vitejs.dev/) - Familiar with vite features
|
||||
- [Vue3](https://v3.vuejs.org/) - Familiar with Vue basic syntax
|
||||
- [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript`
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router
|
||||
- [Element-Plus](https://element-plus.org/) - Familiar with the basic use of element-plus
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax
|
||||
- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
|
||||
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
|
||||
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
|
||||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
|
||||
- [Element-Plus](https://element-plus.org/) - element-plus 基本使用
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
|
||||
|
||||
## Install and use
|
||||
## 安装和使用
|
||||
|
||||
- Get the project code
|
||||
- 获取代码
|
||||
|
||||
```bash
|
||||
git clone https://github.com/kailong321200875/vue-element-plus-admin.git
|
||||
```
|
||||
|
||||
- Installation dependencies
|
||||
- 安装依赖
|
||||
|
||||
```bash
|
||||
cd vue-element-plus-admin
|
||||
@ -71,170 +71,61 @@ pnpm install
|
||||
|
||||
```
|
||||
|
||||
- run
|
||||
- 运行
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
- build
|
||||
- 打包
|
||||
|
||||
```bash
|
||||
pnpm run build:pro
|
||||
```
|
||||
|
||||
## Change Log
|
||||
## 更新日志
|
||||
|
||||
[CHANGELOG](./CHANGELOG.md)
|
||||
[更新日志](./CHANGELOG.md)
|
||||
|
||||
## How to contribute
|
||||
## 如何贡献
|
||||
|
||||
You can [Raise an issue](https://github.com/kailong321200875/vue-element-plus-admin/issues/new) Or submit a Pull Request.
|
||||
你可以[提一个 issue](https://github.com/kailong321200875/vue-element-plus-admin/issues/new) 或者提交一个 Pull Request。
|
||||
|
||||
**Pull Request:**
|
||||
|
||||
1. Fork code
|
||||
2. Create your own branch: `git checkout -b feat/xxxx`
|
||||
3. Submit your changes: `git commit -am 'feat(function): add xxxxx'`
|
||||
4. Push your branch: `git push origin feat/xxxx`
|
||||
5. submit `pull request`
|
||||
1. Fork 代码
|
||||
2. 创建自己的分支: `git checkout -b feat/xxxx`
|
||||
3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
|
||||
4. 推送您的分支: `git push origin feat/xxxx`
|
||||
5. 提交 `pull request`
|
||||
|
||||
## Git Contribution submission specification
|
||||
## Git 贡献提交规范
|
||||
|
||||
- `feat` New features
|
||||
- `fix` Fix bugs
|
||||
- `docs` document
|
||||
- `style` Format and style (changes that do not affect code operation)
|
||||
- `refactor` Refactor
|
||||
- `perf` Optimize related, such as improving performance and experience
|
||||
- `test` Add test
|
||||
- `build` Compilation related modifications, changes to project construction or dependencies
|
||||
- `ci` Continuous integration modification
|
||||
- `chore` Changes in the construction process or auxiliary tools
|
||||
- `revert` Rollback to previous version
|
||||
- `workflow` Workflow improvement
|
||||
- `mod` Uncertain modification classification
|
||||
- `wip` Under development
|
||||
- `types` type
|
||||
- `feat` 新功能
|
||||
- `fix` 修补 bug
|
||||
- `docs` 文档
|
||||
- `style` 格式、样式(不影响代码运行的变动)
|
||||
- `refactor` 重构(即不是新增功能，也不是修改 BUG 的代码)
|
||||
- `perf` 优化相关，比如提升性能、体验
|
||||
- `test` 添加测试
|
||||
- `build` 编译相关的修改，对项目构建或者依赖的改动
|
||||
- `ci` 持续集成修改
|
||||
- `chore` 构建过程或辅助工具的变动
|
||||
- `revert` 回滚到上一个版本
|
||||
- `workflow` 工作流改进
|
||||
- `mod` 不确定分类的修改
|
||||
- `wip` 开发中
|
||||
- `types` 类型
|
||||
|
||||
## Browser support
|
||||
## 浏览器支持
|
||||
|
||||
The `Chrome 80+` browser is recommended for local development
|
||||
本地开发推荐使用 `Chrome 80+` 浏览器
|
||||
|
||||
Support modern browsers, not IE
|
||||
支持现代浏览器, 不支持 IE
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| :-: | :-: | :-: | :-: | :-: |
|
||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
## License
|
||||
## 依赖组件
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
## Collaborators
|
||||
|
||||
<!-- readme: collaborators -start -->
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/niyg">
|
||||
<img src="https://avatars.githubusercontent.com/u/14817820?v=4" width="100;" alt="niyg"/>
|
||||
<br />
|
||||
<sub><b>福州-大雨</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/git-Where">
|
||||
<img src="https://avatars.githubusercontent.com/u/16344566?v=4" width="100;" alt="git-Where"/>
|
||||
<br />
|
||||
<sub><b>葉家男孩</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/z6w6j6">
|
||||
<img src="https://avatars.githubusercontent.com/u/23661303?v=4" width="100;" alt="z6w6j6"/>
|
||||
<br />
|
||||
<sub><b>Z6w6j6</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/kailong321200875">
|
||||
<img src="https://avatars.githubusercontent.com/u/32283845?v=4" width="100;" alt="kailong321200875"/>
|
||||
<br />
|
||||
<sub><b>Archer</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
<!-- readme: collaborators -end -->
|
||||
|
||||
## Contributors
|
||||
|
||||
<!-- readme: contributors -start -->
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/kailong321200875">
|
||||
<img src="https://avatars.githubusercontent.com/u/32283845?v=4" width="100;" alt="kailong321200875"/>
|
||||
<br />
|
||||
<sub><b>Archer</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/kailong502431556">
|
||||
<img src="https://avatars.githubusercontent.com/u/30221169?v=4" width="100;" alt="kailong502431556"/>
|
||||
<br />
|
||||
<sub><b>Kailong502431556</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/xingyu4j">
|
||||
<img src="https://avatars.githubusercontent.com/u/41043753?v=4" width="100;" alt="xingyu4j"/>
|
||||
<br />
|
||||
<sub><b>Xingyu4j</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/snowords">
|
||||
<img src="https://avatars.githubusercontent.com/u/22708432?v=4" width="100;" alt="snowords"/>
|
||||
<br />
|
||||
<sub><b>Snoword</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/huanghong1125">
|
||||
<img src="https://avatars.githubusercontent.com/u/12794817?v=4" width="100;" alt="huanghong1125"/>
|
||||
<br />
|
||||
<sub><b>Huanghong</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/amifed">
|
||||
<img src="https://avatars.githubusercontent.com/u/36906371?v=4" width="100;" alt="amifed"/>
|
||||
<br />
|
||||
<sub><b>Yangyu</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/WuYihui">
|
||||
<img src="https://avatars.githubusercontent.com/u/29938095?v=4" width="100;" alt="WuYihui"/>
|
||||
<br />
|
||||
<sub><b>WuYihui</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/xiterjia">
|
||||
<img src="https://avatars.githubusercontent.com/u/3360879?v=4" width="100;" alt="xiterjia"/>
|
||||
<br />
|
||||
<sub><b>Xiterjia</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/z6w6j6">
|
||||
<img src="https://avatars.githubusercontent.com/u/23661303?v=4" width="100;" alt="z6w6j6"/>
|
||||
<br />
|
||||
<sub><b>Z6w6j6</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
<!-- readme: contributors -end -->
|
||||
|
||||
@ -1,240 +0,0 @@
|
||||
<div align="center"> <a href="https://github.com/kailong321200875/vue-element-plus-admin"> <img width="100" src="./public/logo.png"> </a> <br> <br>
|
||||
|
||||
[](LICENSE)
|
||||
|
||||
<h1>vue-element-plus-admin</h1>
|
||||
</div>
|
||||
|
||||
[English](./README.md) | **中文**
|
||||
|
||||
## 介绍
|
||||
|
||||
vue-element-plus-admin 是一个基于 `element-plus` 免费开源的中后台模版。使用了最新的`vue3`，`vite3`，`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。
|
||||
|
||||
vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。
|
||||
|
||||
如需要基础模版，请切换到 `tempalte` 分支，`tempalte` 只简单集成了一些如：布局、动态菜单等常用布局功能，更适合开发者进行二次开发。
|
||||
|
||||
## 特性
|
||||
|
||||
- **最新技术栈**：使用 Vue3/vite3 等前端前沿技术开发
|
||||
- **TypeScript**: 应用程序级 JavaScript 的语言
|
||||
- **主题**: 可配置的主题
|
||||
- **国际化**：内置完善的国际化方案
|
||||
- **自定义数据** 内置 Mock 数据方案
|
||||
- **权限** 内置完善的动态路由权限生成方案
|
||||
- **组件** 二次封装了多个常用的组件
|
||||
- **示例** 内置丰富的示例
|
||||
|
||||
## 预览
|
||||
|
||||
- [vue-element-plus-admin](https://element-plus-admin.cn/) - 完整版 github 站点
|
||||
- [vue-element-plus-admin](https://kailong110120130.gitee.io/vue-element-plus-admin) - 完整版 gitee 站点
|
||||
|
||||
帐号：**admin/admin test/test**
|
||||
|
||||
`admin` 帐号用于模拟服务端控制权限，服务端返回什么就渲染什么
|
||||
|
||||
`test` 帐号用于模拟前端控制权限，服务端只返回需要显示的菜单 key，前端进行匹配渲染
|
||||
|
||||
## 文档
|
||||
|
||||
[文档地址 Github](https://element-plus-admin-doc.cn/)
|
||||
|
||||
[文档地址 Gitee](https://kailong110120130.gitee.io/vue-element-plus-admin-doc)
|
||||
|
||||
## 前序准备
|
||||
|
||||
- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境
|
||||
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
|
||||
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
|
||||
- [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法
|
||||
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
|
||||
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
|
||||
- [Element-Plus](https://element-plus.org/) - element-plus 基本使用
|
||||
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法
|
||||
|
||||
## 安装和使用
|
||||
|
||||
- 获取代码
|
||||
|
||||
```bash
|
||||
git clone https://github.com/kailong321200875/vue-element-plus-admin.git
|
||||
```
|
||||
|
||||
- 安装依赖
|
||||
|
||||
```bash
|
||||
cd vue-element-plus-admin
|
||||
|
||||
pnpm install
|
||||
|
||||
```
|
||||
|
||||
- 运行
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
- 打包
|
||||
|
||||
```bash
|
||||
pnpm run build:pro
|
||||
```
|
||||
|
||||
## 更新日志
|
||||
|
||||
[更新日志](./CHANGELOG.md)
|
||||
|
||||
## 如何贡献
|
||||
|
||||
你可以[提一个 issue](https://github.com/kailong321200875/vue-element-plus-admin/issues/new) 或者提交一个 Pull Request。
|
||||
|
||||
**Pull Request:**
|
||||
|
||||
1. Fork 代码
|
||||
2. 创建自己的分支: `git checkout -b feat/xxxx`
|
||||
3. 提交你的修改: `git commit -am 'feat(function): add xxxxx'`
|
||||
4. 推送您的分支: `git push origin feat/xxxx`
|
||||
5. 提交 `pull request`
|
||||
|
||||
## Git 贡献提交规范
|
||||
|
||||
- `feat` 新功能
|
||||
- `fix` 修补 bug
|
||||
- `docs` 文档
|
||||
- `style` 格式、样式(不影响代码运行的变动)
|
||||
- `refactor` 重构(即不是新增功能，也不是修改 BUG 的代码)
|
||||
- `perf` 优化相关，比如提升性能、体验
|
||||
- `test` 添加测试
|
||||
- `build` 编译相关的修改，对项目构建或者依赖的改动
|
||||
- `ci` 持续集成修改
|
||||
- `chore` 构建过程或辅助工具的变动
|
||||
- `revert` 回滚到上一个版本
|
||||
- `workflow` 工作流改进
|
||||
- `mod` 不确定分类的修改
|
||||
- `wip` 开发中
|
||||
- `types` 类型
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
本地开发推荐使用 `Chrome 80+` 浏览器
|
||||
|
||||
支持现代浏览器, 不支持 IE
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| :-: | :-: | :-: | :-: | :-: |
|
||||
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
## 许可证
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
||||
## 合作者
|
||||
|
||||
<!-- readme: collaborators -start -->
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/niyg">
|
||||
<img src="https://avatars.githubusercontent.com/u/14817820?v=4" width="100;" alt="niyg"/>
|
||||
<br />
|
||||
<sub><b>福州-大雨</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/git-Where">
|
||||
<img src="https://avatars.githubusercontent.com/u/16344566?v=4" width="100;" alt="git-Where"/>
|
||||
<br />
|
||||
<sub><b>葉家男孩</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/z6w6j6">
|
||||
<img src="https://avatars.githubusercontent.com/u/23661303?v=4" width="100;" alt="z6w6j6"/>
|
||||
<br />
|
||||
<sub><b>Z6w6j6</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/kailong321200875">
|
||||
<img src="https://avatars.githubusercontent.com/u/32283845?v=4" width="100;" alt="kailong321200875"/>
|
||||
<br />
|
||||
<sub><b>Archer</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
<!-- readme: collaborators -end -->
|
||||
|
||||
## 贡献者
|
||||
|
||||
<!-- readme: contributors -start -->
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/kailong321200875">
|
||||
<img src="https://avatars.githubusercontent.com/u/32283845?v=4" width="100;" alt="kailong321200875"/>
|
||||
<br />
|
||||
<sub><b>Archer</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/kailong502431556">
|
||||
<img src="https://avatars.githubusercontent.com/u/30221169?v=4" width="100;" alt="kailong502431556"/>
|
||||
<br />
|
||||
<sub><b>Kailong502431556</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/xingyu4j">
|
||||
<img src="https://avatars.githubusercontent.com/u/41043753?v=4" width="100;" alt="xingyu4j"/>
|
||||
<br />
|
||||
<sub><b>Xingyu4j</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/snowords">
|
||||
<img src="https://avatars.githubusercontent.com/u/22708432?v=4" width="100;" alt="snowords"/>
|
||||
<br />
|
||||
<sub><b>Snoword</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/huanghong1125">
|
||||
<img src="https://avatars.githubusercontent.com/u/12794817?v=4" width="100;" alt="huanghong1125"/>
|
||||
<br />
|
||||
<sub><b>Huanghong</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/amifed">
|
||||
<img src="https://avatars.githubusercontent.com/u/36906371?v=4" width="100;" alt="amifed"/>
|
||||
<br />
|
||||
<sub><b>Yangyu</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
<tr>
|
||||
<td align="center">
|
||||
<a href="https://github.com/WuYihui">
|
||||
<img src="https://avatars.githubusercontent.com/u/29938095?v=4" width="100;" alt="WuYihui"/>
|
||||
<br />
|
||||
<sub><b>WuYihui</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/xiterjia">
|
||||
<img src="https://avatars.githubusercontent.com/u/3360879?v=4" width="100;" alt="xiterjia"/>
|
||||
<br />
|
||||
<sub><b>Xiterjia</b></sub>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center">
|
||||
<a href="https://github.com/z6w6j6">
|
||||
<img src="https://avatars.githubusercontent.com/u/23661303?v=4" width="100;" alt="z6w6j6"/>
|
||||
<br />
|
||||
<sub><b>Z6w6j6</b></sub>
|
||||
</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
<!-- readme: contributors -end -->
|
||||
@ -7,3 +7,7 @@ export const getMenuListApi = (params: any): Promise<IResponse> => {
|
||||
export const delMenuListApi = (params: any): Promise<IResponse> => {
|
||||
return request.delete({ url: '/vadmin/auth/menus/', params })
|
||||
}
|
||||
|
||||
export const getMenuTreeOptionsApi = (): Promise<IResponse> => {
|
||||
return request.get({ url: '/vadmin/auth/menus/tree/options/' })
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@ import {
|
||||
ElTimeSelect,
|
||||
ElTransfer,
|
||||
ElAutocomplete,
|
||||
ElDivider
|
||||
ElDivider,
|
||||
ElTreeSelect
|
||||
} from 'element-plus'
|
||||
import { InputPassword } from '@/components/InputPassword'
|
||||
import { Editor } from '@/components/Editor'
|
||||
@ -42,7 +43,8 @@ const componentMap: Recordable<Component, ComponentName> = {
|
||||
SelectV2: ElSelectV2,
|
||||
RadioButton: ElRadioGroup,
|
||||
InputPassword: InputPassword,
|
||||
Editor: Editor
|
||||
Editor: Editor,
|
||||
TreeSelect: ElTreeSelect
|
||||
}
|
||||
|
||||
export { componentMap }
|
||||
|
||||
@ -4,6 +4,8 @@ import { useForm } from '@/hooks/web/useForm'
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import { TableData } from '@/api/table/types'
|
||||
import { useValidator } from '@/hooks/web/useValidator'
|
||||
import { getMenuTreeOptionsApi } from '@/api/vadmin/auth/menu'
|
||||
import { ElButton } from 'element-plus'
|
||||
|
||||
const { required } = useValidator()
|
||||
|
||||
@ -11,13 +13,73 @@ const props = defineProps({
|
||||
currentRow: {
|
||||
type: Object as PropType<Nullable<TableData>>,
|
||||
default: () => null
|
||||
},
|
||||
formSchema: {
|
||||
type: Array as PropType<FormSchema[]>,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const schema = reactive<FormSchema[]>([
|
||||
{
|
||||
field: 'parent_id',
|
||||
label: '上级菜单',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
component: 'TreeSelect',
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
checkStrictly: true,
|
||||
placeholder: '请选择上级菜单'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'menu_type',
|
||||
label: '菜单类型',
|
||||
colProps: {
|
||||
span: 24
|
||||
},
|
||||
component: 'Radio',
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '目录',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '菜单',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '按钮',
|
||||
value: '2'
|
||||
}
|
||||
]
|
||||
},
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
field: 'icon',
|
||||
label: '菜单图标',
|
||||
component: 'Input',
|
||||
colProps: {
|
||||
span: 20
|
||||
},
|
||||
componentProps: {
|
||||
placeholder: '支持 Iconify 中的所有图标，请登录网站自行搜索：https://iconify.design/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'iconClick',
|
||||
label: '',
|
||||
colProps: {
|
||||
span: 3
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const rules = reactive({
|
||||
title: [required()],
|
||||
author: [required()],
|
||||
@ -28,7 +90,7 @@ const rules = reactive({
|
||||
})
|
||||
|
||||
const { register, methods, elFormRef } = useForm({
|
||||
schema: props.formSchema
|
||||
schema: schema
|
||||
})
|
||||
|
||||
watch(
|
||||
@ -44,6 +106,22 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
const getMenuTreeOptions = async () => {
|
||||
const res = await getMenuTreeOptionsApi()
|
||||
if (res) {
|
||||
const { setSchema } = methods
|
||||
setSchema([
|
||||
{
|
||||
field: 'parent_id',
|
||||
path: 'componentProps.data',
|
||||
value: res.data
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
getMenuTreeOptions()
|
||||
|
||||
defineExpose({
|
||||
elFormRef,
|
||||
getFormData: methods.getFormData
|
||||
@ -51,5 +129,16 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form :rules="rules" @register="register" />
|
||||
<Form :rules="rules" @register="register">
|
||||
<template #iconClick-label>
|
||||
<!-- <div>
|
||||
<el-button type="primary">跳转</el-button>
|
||||
</div> -->
|
||||
</template>
|
||||
<template #iconClick>
|
||||
<div>
|
||||
<ElButton type="primary">跳转</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
@ -7,114 +7,11 @@ import { useTable } from '@/hooks/web/useTable'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ElButton, ElTag } from 'element-plus'
|
||||
import { h, ref, unref, reactive } from 'vue'
|
||||
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
|
||||
import { Dialog } from '@/components/Dialog'
|
||||
import Write from './components/Write.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const crudSchemas = reactive<CrudSchema[]>([
|
||||
{
|
||||
field: 'title',
|
||||
label: '菜单名称',
|
||||
form: {
|
||||
colProps: {
|
||||
span: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'author',
|
||||
label: t('tableDemo.author')
|
||||
},
|
||||
{
|
||||
field: 'display_time',
|
||||
label: t('tableDemo.displayTime'),
|
||||
form: {
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
type: 'datetime',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'importance',
|
||||
label: t('tableDemo.importance'),
|
||||
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
|
||||
return h(
|
||||
ElTag,
|
||||
{
|
||||
type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
|
||||
},
|
||||
() =>
|
||||
cellValue === 1
|
||||
? t('tableDemo.important')
|
||||
: cellValue === 2
|
||||
? t('tableDemo.good')
|
||||
: t('tableDemo.commonly')
|
||||
)
|
||||
},
|
||||
form: {
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
style: {
|
||||
width: '100%'
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '重要',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '良好',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'pageviews',
|
||||
label: t('tableDemo.pageviews'),
|
||||
form: {
|
||||
component: 'InputNumber',
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'content',
|
||||
label: t('exampleDemo.content'),
|
||||
table: {
|
||||
show: false
|
||||
},
|
||||
form: {
|
||||
component: 'Editor',
|
||||
colProps: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
span: 24
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
width: '260px',
|
||||
label: t('tableDemo.action'),
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
])
|
||||
|
||||
const columns = reactive<TableColumn[]>([
|
||||
{
|
||||
field: 'title',
|
||||
@ -164,8 +61,6 @@ const { register, tableObject, methods } = useTable<TableData>({
|
||||
}
|
||||
})
|
||||
|
||||
const { allSchemas } = useCrudSchemas(crudSchemas)
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const actionType = ref('')
|
||||
@ -223,12 +118,8 @@ getList()
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<Write
|
||||
ref="writeRef"
|
||||
:form-schema="allSchemas.formSchema"
|
||||
:current-row="tableObject.currentRow"
|
||||
/>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
|
||||
<Write ref="writeRef" :current-row="tableObject.currentRow" />
|
||||
|
||||
<template #footer>
|
||||
<ElButton type="primary" :loading="loading" @click="save">
|
||||
|
||||
1
kinit-admin/types/componentType/form.d.ts
vendored
1
kinit-admin/types/componentType/form.d.ts
vendored
@ -23,6 +23,7 @@ declare global {
|
||||
| 'SelectV2'
|
||||
| 'InputPassword'
|
||||
| 'Editor'
|
||||
| 'TreeSelect'
|
||||
|
||||
declare type ColProps = {
|
||||
span?: number
|
||||
|
||||
@ -68,6 +68,16 @@ class MenuDal(DalBase):
|
||||
roots = filter(lambda i: not i.parent_id, menus)
|
||||
return self.generate_tree_list(menus, roots)
|
||||
|
||||
async def get_tree_options(self):
|
||||
"""
|
||||
获取菜单树选择项
|
||||
"""
|
||||
sql = select(self.model)
|
||||
queryset = await self.db.execute(sql)
|
||||
menus = queryset.scalars().all()
|
||||
roots = filter(lambda i: not i.parent_id, menus)
|
||||
return self.generate_tree_options(menus, roots)
|
||||
|
||||
async def get_routers(self, user: models.VadminUser):
|
||||
"""
|
||||
获取路由表
|
||||
@ -103,7 +113,7 @@ class MenuDal(DalBase):
|
||||
|
||||
def generate_router_tree(self, menus: List[models.VadminMenu], nodes: filter) -> list:
|
||||
"""
|
||||
生成路由数
|
||||
生成路由树
|
||||
|
||||
menus: 总菜单列表
|
||||
nodes：节点菜单列表
|
||||
@ -121,7 +131,7 @@ class MenuDal(DalBase):
|
||||
|
||||
def generate_tree_list(self, menus: List[models.VadminMenu], nodes: filter) -> list:
|
||||
"""
|
||||
生成菜单树
|
||||
生成菜单树列表
|
||||
|
||||
menus: 总菜单列表
|
||||
nodes：每层节点菜单列表
|
||||
@ -135,6 +145,22 @@ class MenuDal(DalBase):
|
||||
data.append(router.dict())
|
||||
return data
|
||||
|
||||
def generate_tree_options(self, menus: List[models.VadminMenu], nodes: filter) -> list:
|
||||
"""
|
||||
生成菜单树选择项
|
||||
|
||||
menus: 总菜单列表
|
||||
nodes：每层节点菜单列表
|
||||
"""
|
||||
data = []
|
||||
for root in nodes:
|
||||
router = {"value": root.id, "label": root.title}
|
||||
if root.menu_type == "0" or root.menu_type == "1":
|
||||
sons = filter(lambda i: i.parent_id == root.id, menus)
|
||||
router["children"] = self.generate_tree_options(menus, sons)
|
||||
data.append(router)
|
||||
return data
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -86,7 +86,13 @@ async def get_menus(auth: Auth = Depends(login_auth)):
|
||||
return SuccessResponse(datas)
|
||||
|
||||
|
||||
@app.get("/menus/treeselect/", summary="获取菜单列表树信息，角色权限使用")
|
||||
@app.get("/menus/tree/options/", summary="获取菜单树选择项")
|
||||
async def get_menus_options(auth: Auth = Depends(login_auth)):
|
||||
datas = await crud.MenuDal(auth.db).get_tree_options()
|
||||
return SuccessResponse(datas)
|
||||
|
||||
|
||||
@app.get("/menus/role/tree/options/", summary="获取菜单列表树信息，角色权限使用")
|
||||
async def get_menus_treeselect(auth: Auth = Depends(login_auth)):
|
||||
return SuccessResponse(await crud.MenuDal(auth.db).get_treeselect())
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user