diff --git a/README.md b/README.md index 0377934..08f21a9 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ ## 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`, `vite2` 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 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 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. @@ -17,7 +17,7 @@ If you need a basic template, please switch to the `tempalte` branch. `Tempalte` ## Feature -- **State of The Art Development**：Use front-end front-end technology development such as Vue3/vite2 +- **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 diff --git a/README.zh-CN.md b/README.zh-CN.md index c3a03e1..f06905b 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -9,7 +9,7 @@ ## 介绍 -vue-element-plus-admin 是一个基于 `element-plus` 免费开源的中后台模版。使用了最新的`vue3`，`vite2`，`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。 +vue-element-plus-admin 是一个基于 `element-plus` 免费开源的中后台模版。使用了最新的`vue3`，`vite3`，`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。 vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。 @@ -17,7 +17,7 @@ vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模 ## 特性 -- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发 +- **最新技术栈**：使用 Vue3/vite3 等前端前沿技术开发 - **TypeScript**: 应用程序级 JavaScript 的语言 - **主题**: 可配置的主题 - **国际化**：内置完善的国际化方案 diff --git a/mock/user/index.ts b/mock/user/index.ts index 12a1ccb..83bcd87 100644 --- a/mock/user/index.ts +++ b/mock/user/index.ts @@ -10,18 +10,21 @@ const List: { password: string role: string roleId: string + permissions: string | string[] }[] = [ { username: 'admin', password: 'admin', role: 'admin', - roleId: '1' + roleId: '1', + permissions: ['*.*.*'] }, { username: 'test', password: 'test', role: 'test', - roleId: '2' + roleId: '2', + permissions: ['example:dialog:create', 'example:dialog:delete'] } ] diff --git a/package.json b/package.json index 0b40cb7..62d094f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-element-plus-admin", "version": "1.5.4", - "description": "一套基于vue3、element-plus、typesScript、vite2的后台集成方案。", + "description": "一套基于vue3、element-plus、typesScript、vite3的后台集成方案。", "author": "Archer <502431556@qq.com>", "private": false, "scripts": { @@ -27,17 +27,16 @@ }, "dependencies": { "@iconify/iconify": "^2.2.1", - "@vueuse/core": "^8.9.3", - "@wangeditor/editor": "^5.1.9", + "@vueuse/core": "^8.9.4", + "@wangeditor/editor": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10", - "@zxcvbn-ts/core": "^2.0.1", + "@zxcvbn-ts/core": "^2.0.3", "animate.css": "^4.1.1", "axios": "^0.27.2", "echarts": "^5.3.3", "echarts-wordcloud": "^2.0.0", "element-plus": "2.2.9", "intro.js": "^6.0.0", - "js-md5": "^0.7.3", "lodash-es": "^4.17.21", "mitt": "^3.0.0", "mockjs": "^1.1.0", @@ -56,22 +55,21 @@ "devDependencies": { "@commitlint/cli": "^17.0.3", "@commitlint/config-conventional": "^17.0.3", - "@iconify/json": "^2.1.78", + "@iconify/json": "^2.1.79", "@intlify/vite-plugin-vue-i18n": "^5.0.0", "@purge-icons/generated": "^0.8.1", "@types/intro.js": "^5.1.0", - "@types/js-md5": "^0.4.3", "@types/lodash-es": "^4.17.6", - "@types/node": "^18.0.5", + "@types/node": "^18.0.6", "@types/nprogress": "^0.2.0", "@types/qrcode": "^1.4.2", "@types/qs": "^6.9.7", "@typescript-eslint/eslint-plugin": "^5.30.6", "@typescript-eslint/parser": "^5.30.6", - "@vitejs/plugin-vue": "^3.0.0", + "@vitejs/plugin-vue": "^3.0.1", "@vitejs/plugin-vue-jsx": "^2.0.0", "autoprefixer": "^10.4.7", - "eslint": "^8.19.0", + "eslint": "^8.20.0", "eslint-config-prettier": "^8.5.0", "eslint-define-config": "^1.5.1", "eslint-plugin-prettier": "^4.2.1", @@ -94,7 +92,7 @@ "stylelint-order": "^5.0.0", "typescript": "4.7.4", "unplugin-vue-define-options": "^0.6.2", - "vite": "3.0.0", + "vite": "3.0.1", "vite-plugin-eslint": "^1.6.1", "vite-plugin-html": "^3.2.0", "vite-plugin-mock": "^2.9.6", @@ -102,12 +100,12 @@ "vite-plugin-style-import": "^1.4.1", "vite-plugin-svg-icons": "^2.0.1", "vite-plugin-windicss": "^1.8.7", - "vue-tsc": "^0.38.5", + "vue-tsc": "^0.38.8", "windicss": "^3.5.6", "windicss-analysis": "^0.3.5" }, "engines": { - "node": ">= 14.0.0" + "node": ">= 14.18.0" }, "license": "MIT", "repository": { diff --git a/public/logo.png b/public/logo.png index 7e5002b..b76c71b 100644 Binary files a/public/logo.png and b/public/logo.png differ diff --git a/src/api/login/types.ts b/src/api/login/types.ts index 12730b2..446a023 100644 --- a/src/api/login/types.ts +++ b/src/api/login/types.ts @@ -8,4 +8,5 @@ export type UserType = { password: string role: string roleId: string + permissions: string | string[] } diff --git a/src/assets/imgs/avatar.jpg b/src/assets/imgs/avatar.jpg index faeacd1..d46a70a 100644 Binary files a/src/assets/imgs/avatar.jpg and b/src/assets/imgs/avatar.jpg differ diff --git a/src/assets/imgs/logo.png b/src/assets/imgs/logo.png index 7e5002b..b76c71b 100644 Binary files a/src/assets/imgs/logo.png and b/src/assets/imgs/logo.png differ diff --git a/src/assets/svgs/403.svg b/src/assets/svgs/403.svg index 3fe072c..4500596 100644 --- a/src/assets/svgs/403.svg +++ b/src/assets/svgs/403.svg @@ -1,5290 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/svgs/404.svg b/src/assets/svgs/404.svg index 7aa73e5..5244d8d 100644 --- a/src/assets/svgs/404.svg +++ b/src/assets/svgs/404.svg @@ -1,5287 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/svgs/500.svg b/src/assets/svgs/500.svg index 217c430..9c02092 100644 --- a/src/assets/svgs/500.svg +++ b/src/assets/svgs/500.svg @@ -1,5389 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/svgs/icon.svg b/src/assets/svgs/icon.svg index 82be8ee..7024bec 100644 --- a/src/assets/svgs/icon.svg +++ b/src/assets/svgs/icon.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svgs/login-bg.svg b/src/assets/svgs/login-bg.svg index df0d224..bbe06c1 100644 --- a/src/assets/svgs/login-bg.svg +++ b/src/assets/svgs/login-bg.svg @@ -1,47 +1 @@ - - - - + \ No newline at end of file diff --git a/src/assets/svgs/login-box-bg.svg b/src/assets/svgs/login-box-bg.svg index 21849b6..ab10040 100644 --- a/src/assets/svgs/login-box-bg.svg +++ b/src/assets/svgs/login-box-bg.svg @@ -1,1643 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/assets/svgs/shopping.svg b/src/assets/svgs/shopping.svg index 87513e7..f395bc7 100644 --- a/src/assets/svgs/shopping.svg +++ b/src/assets/svgs/shopping.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/directives/index.ts b/src/directives/index.ts new file mode 100644 index 0000000..11b1da8 --- /dev/null +++ b/src/directives/index.ts @@ -0,0 +1,10 @@ +import type { App } from 'vue' +import { setupPermissionDirective } from './permission/hasPermi' + +/** + * 导出指令：v-xxx + * @methods hasPermi 按钮权限，用法: v-hasPermi + */ +export const setupPermission = (app: App) => { + setupPermissionDirective(app) +} diff --git a/src/directives/permission/hasPermi.ts b/src/directives/permission/hasPermi.ts new file mode 100644 index 0000000..0814c99 --- /dev/null +++ b/src/directives/permission/hasPermi.ts @@ -0,0 +1,47 @@ +import type { App, Directive, DirectiveBinding } from 'vue' +import { useI18n } from '@/hooks/web/useI18n' +import { useCache } from '@/hooks/web/useCache' +import { intersection } from 'lodash-es' +import { isArray } from '@/utils/is' +import { useAppStoreWithOut } from '@/store/modules/app' + +const { t } = useI18n() +const { wsCache } = useCache() +const appStore = useAppStoreWithOut() + +// 全部权限 +const all_permission = ['*.*.*'] +const hasPermission = (value: string | string[]): boolean => { + const permissions = wsCache.get(appStore.getUserInfo).permissions as string[] + if (!value) { + throw new Error(t('permission.hasPermission')) + } + if (!isArray(value)) { + return permissions?.includes(value as string) + } + if (all_permission[0] === permissions[0]) { + return true + } + return (intersection(value, permissions) as string[]).length > 0 +} +function hasPermi(el: Element, binding: DirectiveBinding) { + const value = binding.value + + const flag = hasPermission(value) + if (!flag) { + el.parentNode?.removeChild(el) + } +} +const mounted = (el: Element, binding: DirectiveBinding) => { + hasPermi(el, binding) +} + +const permiDirective: Directive = { + mounted +} + +export const setupPermissionDirective = (app: App) => { + app.directive('hasPermi', permiDirective) +} + +export default permiDirective diff --git a/src/locales/en.ts b/src/locales/en.ts index a7d64c9..24597ea 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -143,6 +143,9 @@ export default { inputPassword: 'InputPassword', sticky: 'Sticky' }, + permission: { + hasPermission: 'Please set the operation permission value' + }, analysis: { newUser: 'New user', unreadInformation: 'Unread information', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 817facc..51abe94 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -143,6 +143,9 @@ export default { inputPassword: '密码输入框', sticky: '黏性' }, + permission: { + hasPermission: '请设置操作权限值' + }, analysis: { newUser: '新增用户', unreadInformation: '未读消息', diff --git a/src/main.ts b/src/main.ts index 4a71197..f6bfd39 100644 --- a/src/main.ts +++ b/src/main.ts @@ -25,6 +25,9 @@ import '@/plugins/animate.css' // 路由 import { setupRouter } from './router' +// 权限 +import { setupPermission } from './directives' + import { createApp } from 'vue' import App from './App.vue' @@ -44,6 +47,8 @@ const setupAll = async () => { setupRouter(app) + setupPermission(app) + app.mount('#app') } diff --git a/src/views/Example/Dialog/ExampleDialog.vue b/src/views/Example/Dialog/ExampleDialog.vue index c2b23d5..c28a09c 100644 --- a/src/views/Example/Dialog/ExampleDialog.vue +++ b/src/views/Example/Dialog/ExampleDialog.vue @@ -231,13 +231,17 @@ const save = async () => { @register="register" > diff --git a/vite.config.ts b/vite.config.ts index 84655f7..c41b5be 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -20,7 +20,6 @@ function pathResolve(dir: string) { return resolve(root, '.', dir) } -// https://vitejs.dev/config/ export default ({ command, mode }: ConfigEnv): UserConfig => { let env = {} as any const isBuild = command === 'build' @@ -146,8 +145,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { 'intro.js', 'qrcode', '@wangeditor/editor', - '@wangeditor/editor-for-vue', - 'js-md5' + '@wangeditor/editor-for-vue' ] } }