Merge branch 'client_sync'
# Conflicts: # web/.env # web/.env.development # web/.env.production # web/.eslintrc.js # web/README.md # web/index.html # web/package.json # web/public/favicon.ico # web/src/App.vue # web/src/api/login/index.ts # web/src/api/menu/index.ts # web/src/assets/logo-mini.svg # web/src/components/auth/auth.vue # web/src/components/auth/authAll.vue # web/src/components/auth/auths.vue # web/src/components/cropper/index.vue # web/src/components/editor/index.vue # web/src/components/iconSelector/index.vue # web/src/components/noticeBar/index.vue # web/src/components/svgIcon/index.vue # web/src/i18n/index.ts # web/src/i18n/lang/en.ts # web/src/i18n/lang/zh-cn.ts # web/src/i18n/lang/zh-tw.ts # web/src/layout/component/aside.vue # web/src/layout/component/columnsAside.vue # web/src/layout/component/header.vue # web/src/layout/component/main.vue # web/src/layout/footer/index.vue # web/src/layout/index.vue # web/src/layout/lockScreen/index.vue # web/src/layout/logo/index.vue # web/src/layout/main/classic.vue # web/src/layout/main/columns.vue # web/src/layout/main/defaults.vue # web/src/layout/main/transverse.vue # web/src/layout/navBars/breadcrumb/breadcrumb.vue # web/src/layout/navBars/breadcrumb/closeFull.vue # web/src/layout/navBars/breadcrumb/index.vue # web/src/layout/navBars/breadcrumb/search.vue # web/src/layout/navBars/breadcrumb/setings.vue # web/src/layout/navBars/breadcrumb/user.vue # web/src/layout/navBars/breadcrumb/userNews.vue # web/src/layout/navBars/index.vue # web/src/layout/navBars/tagsView/contextmenu.vue # web/src/layout/navBars/tagsView/tagsView.vue # web/src/layout/navMenu/horizontal.vue # web/src/layout/navMenu/subItem.vue # web/src/layout/navMenu/vertical.vue # web/src/layout/routerView/iframes.vue # web/src/layout/routerView/link.vue # web/src/layout/routerView/parent.vue # web/src/main.ts # web/src/router/backEnd.ts # web/src/router/frontEnd.ts # web/src/router/index.ts # web/src/router/route.ts # web/src/stores/keepAliveNames.ts # web/src/stores/requestOldRoutes.ts # web/src/stores/routesList.ts # web/src/stores/tagsViewRoutes.ts # web/src/stores/themeConfig.ts # web/src/stores/userInfo.ts # web/src/theme/app.scss # web/src/theme/common/transition.scss # web/src/theme/dark.scss # web/src/theme/element.scss # web/src/theme/iconSelector.scss # web/src/theme/index.scss # web/src/theme/media/form.scss # web/src/theme/media/layout.scss # web/src/theme/media/login.scss # web/src/theme/media/pagination.scss # web/src/theme/other.scss # web/src/utils/arrayOperation.ts # web/src/utils/commonFunction.ts # web/src/utils/loading.ts # web/src/utils/other.ts # web/src/utils/request.ts # web/src/utils/setIconfont.ts # web/src/utils/storage.ts # web/src/utils/theme.ts # web/src/utils/wartermark.ts # web/src/views/system/dept/index.vue # web/src/views/system/dic/index.vue # web/src/views/system/menu/index.vue # web/src/views/system/role/index.vue # web/src/views/system/user/index.vue # web/tsconfig.json # web/vite.config.ts
This commit is contained in:
H0nGzA1
@@ -13,9 +13,18 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
|
extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
|
||||||
plugins: ['vue', '@typescript-eslint'],
|
plugins: ['vue', '@typescript-eslint'],
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['*.ts', '*.tsx', '*.vue'],
|
||||||
|
rules: {
|
||||||
|
'no-undef': 'off',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
rules: {
|
rules: {
|
||||||
// http://eslint.cn/docs/rules/
|
// http://eslint.cn/docs/rules/
|
||||||
// https://eslint.vuejs.org/rules/
|
// https://eslint.vuejs.org/rules/
|
||||||
|
// https://typescript-eslint.io/rules/no-unused-vars/
|
||||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||||
'@typescript-eslint/no-explicit-any': 'off',
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
@@ -26,6 +35,9 @@ module.exports = {
|
|||||||
'@typescript-eslint/ban-types': 'off',
|
'@typescript-eslint/ban-types': 'off',
|
||||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||||
|
'@typescript-eslint/no-redeclare': 'error',
|
||||||
|
'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': [2],
|
||||||
'vue/custom-event-name-casing': 'off',
|
'vue/custom-event-name-casing': 'off',
|
||||||
'vue/attributes-order': 'off',
|
'vue/attributes-order': 'off',
|
||||||
'vue/one-component-per-file': 'off',
|
'vue/one-component-per-file': 'off',
|
||||||
@@ -59,5 +71,6 @@ module.exports = {
|
|||||||
'no-v-model-argument': 'off',
|
'no-v-model-argument': 'off',
|
||||||
'no-case-declarations': 'off',
|
'no-case-declarations': 'off',
|
||||||
'no-console': 'error',
|
'no-console': 'error',
|
||||||
|
'no-redeclare': 'off',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
435
web/CHANGELOG.md
Normal file
435
web/CHANGELOG.md
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
# <a href="https://gitee.com/lyt-top/vue-next-admin" target="_blank">vue-next-admin 更新日志</a>
|
||||||
|
|
||||||
|
🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
|
||||||
|
|
||||||
|
## 2.4.21
|
||||||
|
|
||||||
|
`2022.12.12`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 菜单背景高亮颜色可自定义，通过 `布局配置 -> 菜单设置 -> 菜单高亮背景色` 进行设置
|
||||||
|
- 🐞 修复 `分栏布局` 二级导航菜单内容多时，无法滚动问题，感谢群友@静雨轩主人
|
||||||
|
- 🐞 修复 [!42 修复 工作流无法添加新节点问题](https://gitee.com/lyt-top/vue-next-admin/pulls/42)，感谢[@beta](https://gitee.com/beta_dz)
|
||||||
|
- 🎯 优化 `/make/tableDemo` 表头很多时，无法滚动问题，感谢群友@糊涂涂涂
|
||||||
|
|
||||||
|
## 2.4.2
|
||||||
|
|
||||||
|
`2022.12.09`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 国际化自动导入文件功能，只需在 `/src/i18n/pages` 下新建文件夹定义即可
|
||||||
|
- 🎉 新增 `/make/tableDemo` 中 [搜索框展开，收缩功能，高级筛选组件 有计划做吗](https://gitee.com/lyt-top/vue-next-admin/issues/I6511L)
|
||||||
|
- 🐞 修复 [!40 开启 TagsView 缓存后，刷新后所有的路由都变成组件缓存了](https://gitee.com/lyt-top/vue-next-admin/pulls/40)，感谢[@mrjimin](https://gitee.com/mrjimin)
|
||||||
|
- 🐞 修复 [!41 修复 get 请求传递嵌套对象或数组时无法正常编码问题](https://gitee.com/lyt-top/vue-next-admin/pulls/41)，感谢[@随心](https://gitee.com/jiangqiang1996)
|
||||||
|
- 🐞 修复 组件 wangEditor 回显值的问题
|
||||||
|
- 🐞 修复 `/fun/echartsMap`（地理坐标/地图）、`visualizingDemo2`（数据可视化演示 2） 演示报错问题
|
||||||
|
- 🎯 优化 版本升级提示
|
||||||
|
- 🎯 优化 无权限登录时增加提示信息，[BUG：因前端加载路由(initFrontEndControlRoutes)中当前用户角色为一个陌生角色, 导致 router.beforeEach 会死循环 浏览器崩溃](https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO)，感谢[@canroc](https://gitee.com/canroc)、[@随心](https://gitee.com/jiangqiang1996)
|
||||||
|
- 🌈 重构 `/views/system` 新增修改组件合并。[可以把新增修改组件合并成一个吧](https://gitee.com/lyt-top/vue-next-admin/issues/I64WES)
|
||||||
|
- 🌈 重构 图标选择器，[图标选择器没办法筛选，只能筛选 ali 的](https://gitee.com/lyt-top/vue-next-admin/issues/I64HZD)，感谢[@随心](https://gitee.com/jiangqiang1996)
|
||||||
|
|
||||||
|
## 2.4.1
|
||||||
|
|
||||||
|
`2022.11.30`
|
||||||
|
|
||||||
|
- 🎉 新增 版本升级提示
|
||||||
|
- 🐞 修复 [先打开 F12 再登录进去，然后改变浏览器大小 js 报错](https://gitee.com/lyt-top/vue-next-admin/issues/I63ZZT)，感谢[@Quber](https://gitee.com/quber)
|
||||||
|
|
||||||
|
## 2.4.0
|
||||||
|
|
||||||
|
`2022.11.29`
|
||||||
|
|
||||||
|
⚡⚡⚡ 此版为破坏性更新，应群友建议 `script lang="ts"` 改 `script lang="ts" setup 语法糖`。
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 表格封装演示，路径：`组件封装 -> 表格封装演示`
|
||||||
|
- 🎉 新增 master 分支 script lang="ts" 改成 script lang="ts" setup 语法糖，将同步基础分支
|
||||||
|
- 🐞 修复 [v2.3.0 版本报错问题处理](https://gitee.com/lyt-top/vue-next-admin/issues/I623RP)
|
||||||
|
- 🐞 修复 [el-backtop 滚动高度不触发（固定了 header）](https://gitee.com/lyt-top/vue-next-admin/issues/I63N0D)，感谢[@dejavuuuuu](https://gitee.com/zc19951010)
|
||||||
|
- 🎯 优化 完善 ts 类型，删除根目录 `plugins.d.ts、shim.d.ts、source.d.ts`，移入到 `/src/types/global.d.ts`
|
||||||
|
- 🎯 优化 代码 `watch` 移动到 `生命周期钩子` 最后，文字注释等
|
||||||
|
|
||||||
|
## 2.3.0
|
||||||
|
|
||||||
|
`2022.11.16`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 新版登录页
|
||||||
|
- 🎉 新增 tagsview 鼠标中键 `关闭当前 tagsview`
|
||||||
|
- 🎉 新增 `分栏菜单鼠标悬停预加载`。[分栏模式如何去掉鼠标悬浮父级菜单，分栏菜单自动加载的功能啊](https://gitee.com/lyt-top/vue-next-admin/issues/I5RUY7)。操作路径：`布局配置 -> 分栏设置`
|
||||||
|
- 🐞 修复 [vue-i18n](https://vue-i18n.intlify.dev/api/general.html#createi18n) 报错，[!39 修复 i18n 兼容性问题](https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/39/files)，感谢[@随心](https://toscode.gitee.com/jiangqiang1996)
|
||||||
|
- 🐞 修复 顶栏搜索功能点击蒙蔽弹窗不关闭
|
||||||
|
- 🐞 修复 [!38 fix: bug refreshRouterViewKey 值为 null 导致路由缓存第一次无效](https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files)，感谢[@P)](https://toscode.gitee.com/foxp8y)
|
||||||
|
- 🐞 修复 `路由参数 -> 普通路由/动态路由` 国际化演示时，`tagsView` 和 `浏览器标题` 显示异常。[演示中：路由参数界面 -> 动态路由，国际化显示时面包屑、浏览器标题有 bug](https://gitee.com/lyt-top/vue-next-admin/issues/I5JRJG)
|
||||||
|
- 🐞 修复 `路由参数 -> 普通路由/动态路由` 动态设置 `tagsViewName` 时，`tagsView 右键菜单刷新` 功能失效（也就是路由后面有参数时，query、params）。[普通或动态路由新建页面后点击 tagview 刷新无效](https://gitee.com/lyt-top/vue-next-admin/issues/I5K3YO)，感谢[@dejavuuuuu](https://gitee.com/zc19951010)
|
||||||
|
- 🐞 修复 [表单（el-form）中，字体图标偏移问题](https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM)
|
||||||
|
- 🐞 修复 路由 `router.addRoute` 时，一直提示 `No match found for location with path 'xxx'`
|
||||||
|
- 🎯 优化 全局 `getCurrentInstance` 替换成 [`provide/inject`](https://cn.vuejs.org/api/application.html#app-provide) 或通过 `ref` 处理
|
||||||
|
- 🎯 优化 引入组件方式 `(import xxx from xxx)` 改成 `defineAsyncComponent(() => import(xxx))`
|
||||||
|
- 🎯 优化 页面高度 100% 问题，重写布局配置 `界面设置 -> 固定 Header` 多余的 `el-scrollbar` 逻辑、重写各界面需 `计算属性 computed` 设置动态高度问题（改为 css `flex` 设置自适应高度，具体查看文档：[设置可视区高度 100%](https://lyt-top.gitee.io/vue-next-admin-doc-preview/config/otherIssues/#%E8%AE%BE%E7%BD%AE%E5%8F%AF%E8%A7%86%E5%8C%BA%E9%AB%98%E5%BA%A6-100)。[!31 修复页面样式无法通过百分比设置的问题](https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/31)，感谢[@LostDeer](https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/31/files)。`（改动较大，删除多余代码）`
|
||||||
|
- 🎯 优化 [wangeditor](https://www.wangeditor.com/) 组件，`@wangeditor/editor-for-vue`。可自行修改，组件位置：`/src/components/editor`。相关 Issues：[wangeditor 编辑器多个菜单不能回弹](https://gitee.com/lyt-top/vue-next-admin/issues/I5M5H7)
|
||||||
|
- 🌈 重构 外链、内嵌 iframe 逻辑 + 美化，iframe 支持缓存
|
||||||
|
|
||||||
|
## 2.2.0
|
||||||
|
|
||||||
|
`2022.07.10`
|
||||||
|
|
||||||
|
⚡⚡⚡ [/sec/stores/userInfo.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/stores/userInfo.ts) 下添加了 `getApiUserInfo` 接口模拟数据 `setTimeout` 为 3 秒
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🐞 修复 [主界面重新授权按钮点击卡死不跳转登录界面#I5C3JS](https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS)，感谢[@Hero-Typ](https://gitee.com/tian_yu_peng)
|
||||||
|
- 🐞 修复 编译警告[#I5CVSB](https://gitee.com/lyt-top/vue-next-admin/issues/I5CVSB)，全局替换成 `:deep(attr)`，感谢[@Linvas](https://gitee.com/linvas)。参考文档：[vue3 sfc-style](https://v3.cn.vuejs.org/api/sfc-style.html#style-scoped)。`node_modules\print-js\dist\print.js` 需 `print-js` 作者适配或去除 `package.json` 中的 `"print-js": "^1.6.0"`
|
||||||
|
- 🐞 修复 [vue-next-admin-template-js 版本前端控制路由：userInfo.js 请求用户信息接口报错，加载不到路由 可以写个定时器模拟一下接口 一样的报错#I5F1HP](https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP)，感谢[@白开水](https://gitee.com/libin951223)
|
||||||
|
|
||||||
|
## 2.1.1
|
||||||
|
|
||||||
|
`2022.05.27`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 深色模式下，`<el-button text></el-button>` 时，`:active` 样式
|
||||||
|
- 🎯 优化 [页面缓存在刷新之后失效 #I58U75](https://gitee.com/lyt-top/vue-next-admin/issues/I58U75))，感谢[@ls0428](https://gitee.com/ls0428)
|
||||||
|
- 🎯 优化 [SvgIcon 对下载的 Svg 图像设置颜色无效 #I59ND0](https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0))，感谢[@elus_z](https://gitee.com/elus_z)
|
||||||
|
- 🎯 优化 `/src/utils/toolsValidate.ts` 工具类
|
||||||
|
- 🐞 修复 [布局切换，TagsView 显示的 tab 会多一个出来 #I58WGM](https://gitee.com/lyt-top/vue-next-admin/issues/I58WGM)，感谢[@lg_boy](https://gitee.com/lg_boy)
|
||||||
|
- 🐞 修复 [如果设置顶部面包屑导航开启图标 isBreadcrumbIcon=true 后，样式有点问题 如果不开启就是正常的 #I58VB8](https://gitee.com/lyt-top/vue-next-admin/issues/I58VB8)
|
||||||
|
- 🐞 修复 地址栏路由地址输入错误时，返回首页后，再次输入路由地址错误时，不跳转 404 问题
|
||||||
|
- 🐞 修复 [2.1.0 版本的图标选择组件多次点击后功能失效 #I590TH](https://gitee.com/lyt-top/vue-next-admin/issues/I590TH)，感谢[@quber](https://gitee.com/quber)
|
||||||
|
|
||||||
|
## 2.1.0
|
||||||
|
|
||||||
|
`2022.04.18`
|
||||||
|
|
||||||
|
⚡⚡⚡ 此版本为破环性更新，优化内容如下：（谨慎更新！谨慎更新！！谨慎更新！！！）。因为 `vuex` 替换成 `pinia`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 部分界面图片不显示问题（更换 gitee 在线图片地址源）
|
||||||
|
- 🎯 优化 各界面方法引入与逻辑之间添加一行空行，方便区分内容
|
||||||
|
- 🎯 优化 图标选择器 [#I4YAHB](https://gitee.com/lyt-top/vue-next-admin/issues/I4YAHB)，感谢[@真有你的](https://gitee.com/sunliusen)
|
||||||
|
- 🎯 优化 图标选择器 icon type 类型为 all 时，类型 ali、ele、awe 回显问题
|
||||||
|
- 🎯 优化 去掉开发环境 i18n 控制台警告，页面代码：[i18n/index.ts](https://gitee.com/lyt-top/vue-next-admin/blob/master/src/i18n/index.ts)
|
||||||
|
- 🎯 优化 `NextLoading.start()` 方法，防止第一次进入界面时出现短暂空白
|
||||||
|
- 🎯 优化 地址栏有参数退出登录，再次登录不跳之前界面问题 `src/layout/navBars/breadcrumb/user.vue`
|
||||||
|
- 🎯 优化 `SvgIcon` 组件，防止 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题，工作流不可连线、全屏时关闭按钮消失问题
|
||||||
|
- 🎯 优化 [如果 url 中有中文等特殊字符，第一次切换该 tab 时 keep-alive 失效#I55JS7](https://gitee.com/lyt-top/vue-next-admin/issues/I55JS7),感谢[yuyong1566](https://gitee.com/yuyong1566)
|
||||||
|
- 🎯 优化 [wangEditor](https://www.wangeditor.com/) 更新到 v5，[vue3 版本线上示例中 wangeditor 富文本编辑器 demo 实例,无法换行#I5565B](https://gitee.com/lyt-top/vue-next-admin/issues/I5565B)，感谢@[jenchih](https://gitee.com/jenchih)
|
||||||
|
- 🎯 优化 [在关闭 tagview 时，高度刷新时会会变化，出现滚动条](https://gitee.com/lyt-top/vue-next-admin/issues/I55FHM)，感谢[张松](https://gitee.com/zs310071113)
|
||||||
|
- 🎯 优化 [路由参数](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)演示
|
||||||
|
- 🎉 新增 [vuex](https://vuex.vuejs.org/) 替换成 [pinia](https://pinia.vuejs.org/getting-started.html)
|
||||||
|
- 🎉 新增 tagsView 支持自定义 tagsView 名称（文章详情时有用），前往体验：[路由参数/普通路由](https://lyt-top.gitee.io/vue-next-admin-preview/#/params/common)。新增 tagsView 支持自定义名称国际化，感谢[@q7but](https://gitee.com/q7but)、[!22 add 添加自定义 tagVIewName 拓展,支持国际化](https://gitee.com/lyt-top/vue-next-admin/pulls/22/files)、感谢[@tony_tong_xin](https://gitee.com/tony_tong_xin)
|
||||||
|
- 🐞 修复 适配 `"element-plus": "^2.1.9"，2.2.0` 版本
|
||||||
|
- 🐞 修复 [导航栏横向布局后，一级菜单显示问题#I4Z3M3](https://gitee.com/lyt-top/vue-next-admin/issues/I4Z3M3)
|
||||||
|
- 🐞 修复 横向布局三级及以上导航菜单高亮、导航高度不统一问题
|
||||||
|
- 🐞 修复 分栏模式下,选中的菜单是 primary 样式,鼠标移入字也变成 primary 色了，感谢群友@孤夜-流殇
|
||||||
|
- 🐞 修复 [vuex 里面改了颜色 但是不生效 #I4WFMA](https://gitee.com/lyt-top/vue-next-admin/issues/I4WFMA)
|
||||||
|
- 🐞 修复 全局主题 primary 清空颜色后报错，[#I4X0LG](https://gitee.com/lyt-top/vue-next-admin/issues/I4X0LG)，感谢[面向 BUG 编程](https://gitee.com/fhtfy)
|
||||||
|
- 🐞 修复 [.eslintrc.js 文件 rules 标签名错误 #I53IPK](https://gitee.com/lyt-top/vue-next-admin/issues/I53IPK)，感谢[yuyong1566](https://gitee.com/yuyong1566)
|
||||||
|
- 🐞 修复 `开启 Tagsview 图标` 时，`tagsView 右键菜单关闭` 报错问题
|
||||||
|
- 🐞 修复 `router.push` 路径找不到时报错问题，`404、401 界面` 已移入到 `main` 主布局里（之前全屏）
|
||||||
|
- 🐞 修复 [全局修改组件大小失效了](https://gitee.com/lyt-top/vue-next-admin/issues/I551RP)，感谢[lg_boy](https://gitee.com/lg_boy)
|
||||||
|
- 🐞 修复 [修改一下配置时，需要每次都清理 `window.localStorage` 浏览器永久缓存，配置才会生效，问题解决#I567R1](https://gitee.com/lyt-top/vue-next-admin/issues/I567R1),感谢[@lanbao123](https://gitee.com/lanbao123)
|
||||||
|
- 🐞 修复 [标记为需要缓存的 tab 页后，再次从左侧菜单打开，还是显示被缓存的页面内容#I4UY3G](https://gitee.com/lyt-top/vue-next-admin/issues/I4UY3G)，感谢@axcc1234、特别感谢群友@华仔
|
||||||
|
- 🌈 重构 路由（`/src/router/index.ts`）解决 No match found for location with path "xxx"(前端控制，后端控制未解决) 问题
|
||||||
|
|
||||||
|
## 2.0.2
|
||||||
|
|
||||||
|
`2022.03.04`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 Alert 提示添加边框
|
||||||
|
- 🎯 优化 功能 / 数字滚动 演示界面
|
||||||
|
- 🐞 修复 全局主题按钮颜色 :active 问题
|
||||||
|
- 🐞 修复 Dropdown 下拉菜单样式问题
|
||||||
|
- 🐞 修复 SvgIcon 图标组件动态切换时报警告问题，[SvgIcon 改变 name 时可能导致图像不显示](https://gitee.com/lyt-top/vue-next-admin/issues/I4VGE0)，感谢@axcc1234
|
||||||
|
|
||||||
|
## 2.0.1
|
||||||
|
|
||||||
|
`2022.02.25`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 svgIcon 图标组件
|
||||||
|
- 🎯 优化 vite.config.ts 打包，感谢群友@YourObjec
|
||||||
|
- 🐞 修复 tagViews 开启图标不显示问题（风格 5），感谢群友@坏人
|
||||||
|
- 🐞 修复 [Element Plus 1.2.0-beta.6 以后的版本 el-table 在移动端无法左右滑动](https://gitee.com/lyt-top/vue-next-admin/issues/I4UPTP)，感谢@YGDada
|
||||||
|
|
||||||
|
## 2.0.0
|
||||||
|
|
||||||
|
`2022.02.21`
|
||||||
|
|
||||||
|
⚡⚡⚡ 此版本为破环性更新，优化内容如下：（谨慎更新！谨慎更新！！谨慎更新！！！）。演示界面建议直接覆盖文件。如需使用之前版本，请前往[gitee 发行版](https://gitee.com/lyt-top/vue-next-admin/releases) 进行对应版本下载。基础版会基于 `master` 分支进行修改
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🌟 更新 登录页、首页
|
||||||
|
- 💔 移除 vue-web-screen-shot
|
||||||
|
- 💔 移除 城市多级联动，完整 json 数据请去 [vue-next-admin-images/menu](https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu) 仓库查看
|
||||||
|
- 💔 移除 功能/echartsTree 树图
|
||||||
|
- 💔 移除 其它设置/Tagsview 风格 2、Tagsview 风格 3
|
||||||
|
- 💔 移除 功能/验证器
|
||||||
|
- 🚧 调整 src/api 编写方式
|
||||||
|
- 🚧 调整 自定义封装公用组件演示，更好的维护
|
||||||
|
- 🎉 新增 Volar 支持，vs code 配置参考 [Vue Language Features (Volar)](https://lyt-top.gitee.io/vue-next-admin-doc-preview/home/vscode/)
|
||||||
|
- 🎉 新增 `SvgIcon` 支持本地 svg 图标使用
|
||||||
|
- 🎉 新增 表单表格验证演示
|
||||||
|
- 🎯 优化 全局主题（移除 success、info、warning、danger）
|
||||||
|
- 🎯 优化 工作流（开源）
|
||||||
|
- 🎯 优化 element plus svg 图标，`elementXXX` 改成 `ele-XXX`
|
||||||
|
- 🌈 重构 深色模式
|
||||||
|
- 🌹 合并 [处理 parent 的 h100 由于外层有 min-height 导致失效的问题](https://gitee.com/lyt-top/vue-next-admin/pulls/20)，感谢@MaxNull、@21030442-mao
|
||||||
|
- 🐞 修复 element plus 升级 `^1.3.0-beta.5` 后 组件 size 大小问题（大改：涉及布局、演示界面）
|
||||||
|
- 🐞 修复 vs code 使用 Vue Language Features (Volar) 插件 代码报红问题（可以把公用的 ts 类型定义封装起来公用）
|
||||||
|
|
||||||
|
## 1.2.2
|
||||||
|
|
||||||
|
`2021.12.21`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 iframes 滚动条问题
|
||||||
|
- 🎯 优化 部署后每次都要强制刷新清浏览器缓存问题
|
||||||
|
- 🎉 新增 工具类百分比验证演示
|
||||||
|
- 🐞 修复 [tag-view 标签右键会超出浏览器 #I4KN78](https://gitee.com/lyt-top/vue-next-admin/issues/I4KN78)
|
||||||
|
|
||||||
|
## 1.2.1
|
||||||
|
|
||||||
|
`2021.12.12`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 cropper 裁剪时卡顿问题 [#I4M2VQ](https://gitee.com/lyt-top/vue-next-admin/issues/I4M2VQ)
|
||||||
|
- 🎯 优化 Wangeditor 富文本编辑器的问题 [#I4LPC1](https://gitee.com/lyt-top/vue-next-admin/issues/I4LPC1)、[#I4LM7I](https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I)
|
||||||
|
- 🐞 修复 浏览器标题问题
|
||||||
|
- 🐞 修复 element plus svg 图标引入
|
||||||
|
- 🐞 修复 工作流不可以拖线连接问题
|
||||||
|
|
||||||
|
## 1.2.0
|
||||||
|
|
||||||
|
`2021.11.28`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 深色模式
|
||||||
|
- 🎯 优化 `/@/utils` 文件夹，合并删除单一内容
|
||||||
|
- 🎯 优化 系统设置：菜单管理（新增、修改）、角色管理（新增菜单权限）、用户管理、部门管理、字典管理
|
||||||
|
- 🎯 优化 登录界面逻辑、权限管理逻辑
|
||||||
|
- 🎯 优化 同步 [vue-next-admin-images](https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu) 后端控制菜单模拟数据
|
||||||
|
- 🎉 新增 适配 Font Icon 向 SVG Icon 迁移（改动大，"element-plus": "^1.2.0-beta.4" 谨慎更新）
|
||||||
|
- 🐞 修复 热更新问题，感谢@甜蜜蜜
|
||||||
|
- 🐞 修复 页面/element 字体图标演示
|
||||||
|
- 🐞 修复 功能/图标选择器演示，新增高级功能 [issues #I4GJXQ](https://gitee.com/lyt-top/vue-next-admin/issues/I4GJXQ)
|
||||||
|
|
||||||
|
## 1.1.2
|
||||||
|
|
||||||
|
`2021.10.17`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🐞 修复 开启全屏时，刷新界面被还原成未全屏的状态
|
||||||
|
- 🎯 优化 tagsView 右键菜单关闭逻辑
|
||||||
|
- 🎯 优化 wangeditor 富文本编辑器（增加双向绑定）
|
||||||
|
- 🎉 新增 工作流（暂不开源）
|
||||||
|
- 🎉 新增 基础版 ts（不带国际化），切换 `vue-next-admin-template` 分支
|
||||||
|
|
||||||
|
## 1.1.1
|
||||||
|
|
||||||
|
`2021.09.25`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本（`"element-plus": "^1.1.0-beta.13"` 版本运行错误，`^1.1.0-beta.16`修复横向菜单卡死问题）
|
||||||
|
- 🐞 修复 Dialog 弹窗位置错误、Drawer 抽屉内边距、el-menu 菜单收起时背景色问题
|
||||||
|
- 🎯 优化 锁屏界面自动锁屏(s/秒)必须设置至少 1 秒
|
||||||
|
- 🎉 新增 分栏布局，鼠标移入当前项时，显示当前项菜单内容
|
||||||
|
- 🎉 新增 工作流（未完成）
|
||||||
|
|
||||||
|
## 1.1.0
|
||||||
|
|
||||||
|
`2021.09.10`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 小屏模式下登录页二维码遮挡标题问题
|
||||||
|
- 🎉 新增 图片验证器
|
||||||
|
- 🎉 新增 动态复杂表单
|
||||||
|
- 🎉 新增 工作流（未完成）
|
||||||
|
- 🎉 新增 深色主题(伪深色，样式变动大，谨慎更新)
|
||||||
|
|
||||||
|
## 1.0.18
|
||||||
|
|
||||||
|
`2021.08.29`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 权限组件去掉顶级 div（`/src/components/auth`）
|
||||||
|
- 🎉 新增 布局配置添加恢复默认按钮
|
||||||
|
- 🐞 修复 升级 <a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">element plus 1.1.0-beta.7</a>后项目无法启动、el-menu 菜单
|
||||||
|
- 🐞 修复 表格固定列时的层级、设置了相对定位时，遮挡左侧导航菜单问题
|
||||||
|
|
||||||
|
## 1.0.17
|
||||||
|
|
||||||
|
`2021.08.22`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 去除设置布局切换，重置主题样式（initSetLayoutChange），切换布局需手动设置样式，设置的样式自动同步各布局
|
||||||
|
- 🎯 优化 Dropdown 下拉菜单用户账号靠边时换行问题
|
||||||
|
- 🎯 优化 左侧导航菜单，共用菜单树，防止 `布局配置` 设置 `菜单 / 顶栏` 时，样式丢失等问题
|
||||||
|
- 🐞 修复 固定 header 后没有回到顶部的 bug，拉取项目后运行不起来的 bug。<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/14" target="_blank">!14</a>，感谢<a href="https://gitee.com/wjs0509" target="_blank">@wjs0509</a>
|
||||||
|
- 🐞 修复 tagView 右键全屏后，浏览器窗口大小发生任何变化都会导致左边菜单显示出来，并且可点击打开对应页面。<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I46E6T" target="_blank">I46E6T</a>
|
||||||
|
- 🐞 修复 默认设置 `菜单 / 顶栏` 样式不生效问题（/@/src/store/modules/themeConfig.ts）
|
||||||
|
|
||||||
|
## 1.0.16
|
||||||
|
|
||||||
|
`2021.08.14`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 菜单高亮（详情且详情设置了 meta.isHide 时，顶级菜单高亮），感谢群友@YourObject
|
||||||
|
- 🎯 优化 详情路径写法：如父级（/pages/filtering），那么详情为（/pages/filtering/details?id=1）。这样写可实现（详情时，父级菜单高亮），否则写成（/pages/filteringDetails?id=1）顶级菜单将不会高亮。可参考：`页面/过滤筛选组件`，点击当前图片进行测试
|
||||||
|
- 🎯 优化 tagsView 右键菜单全屏时，打开的界面高度问题
|
||||||
|
- 🎯 优化 图表批量 resize 问题
|
||||||
|
- 🐞 修复 菜单收起时（设置全局主题：primary 且有二级菜单时），文字高亮颜色不对
|
||||||
|
- 🐞 修复 国际化 <a href="https://gitee.com/lyt-top/vue-next-admin/issues/I43NPE" target="_blank">#I43NPE</a>。可参考：`页面/过滤筛选组件`，点击顶部语言切换，进行底部分页国际化查看
|
||||||
|
|
||||||
|
## 1.0.15
|
||||||
|
|
||||||
|
`2021.08.06`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 tagsView 右键菜单点击时的字段名（id 已修改成 contextMenuClickId）与路由中返回的 id 名冲突问题，感谢群友@伯牙已遇钟子期
|
||||||
|
- 🎉 新增 多个 form 表单验证界面演示
|
||||||
|
|
||||||
|
## 1.0.14
|
||||||
|
|
||||||
|
`2021.07.29`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本（vue、vuex、vue-router）,出现问题，请手动降级。版本查看：<a href="https://www.npmjs.com/" target="_blank">vnpm</a>
|
||||||
|
- 🎯 优化 数据可视化图表演示加载卡顿问题、优化有图表的演示界面
|
||||||
|
- 🎯 优化 路由参数演示界面
|
||||||
|
- 🎯 优化 tagsView 操作演示界面，由于存在相同路由多标签，必须要传全部参数值（query 或者 params）
|
||||||
|
- 🎉 新增 开启 TagsView 共用，开启时：（多个路由菜单共用一个详情组件（参数为后点击的覆盖前面点击的），tagsView 中只会出现一个（不支持同时出现多个 tagsView 标签））。关闭时：（多个路由菜单共用一个详情组件，参数不同，会同时出现多个 tagsView 标签）
|
||||||
|
- 🐞 修复 tagsView 共用（单标签）时，右键菜单功能点击，参数不对的问题（第 2n+个参数未覆盖第一个参数值）
|
||||||
|
- 🐞 修复 多 tagsView 标签（参数不同）、单个 tagsView 标签公用（参数不同）所带来的刷新功能、横向自动滚动等问题
|
||||||
|
- 🐞 修复 处理全屏若干问题，<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/12" target="_blank">pr!12</a>，感谢群友@另一个前端
|
||||||
|
|
||||||
|
## 1.0.13
|
||||||
|
|
||||||
|
`2021.07.25`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 数据可视化演示界面（/visualizingDemo1、/visualizingDemo2）
|
||||||
|
- 🎉 新增 登录页扫码登录
|
||||||
|
|
||||||
|
## 1.0.12
|
||||||
|
|
||||||
|
`2021.07.16`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 数据可视化演示空界面（待完善）
|
||||||
|
- 🎯 优化 tagsView 动态路由（xxx/:id/:name）时的右键菜单刷新、关闭其它时参数丢失问题（2021.07.15 优化）
|
||||||
|
- 🐞 修复 路由带参数时，复制路径到登录页，跳转后参数消失的问题
|
||||||
|
- 🐞 修复 设置多个外链，点击后，页面内容停留在上一个内容（内容未改变）、国际化处理、打开新窗口 sessionStorage 共享等
|
||||||
|
|
||||||
|
## 1.0.11
|
||||||
|
|
||||||
|
`2021.07.14`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 路由参数、图片懒加载界面演示
|
||||||
|
- ⚠️ 警告 Form 表单 `binding value must be a string or number`，解决：加上 `label-position="top"` 不报警告（等待官方修复）
|
||||||
|
- 🎯 优化 锁屏界面动画效果、首页图表显示
|
||||||
|
- 🎯 优化 tagsView 右键菜单 `关闭` 功能逻辑
|
||||||
|
- 🐞 修复 开启 TagsView 拖拽报错及小于 `1000px` 时自动设置禁止拖拽（<a href="https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI" target="_blank">#I3ZRRI</a>）
|
||||||
|
- 🐞 修复 `iframe 内嵌、外链` 高度问题，使用 computed 进行计算
|
||||||
|
- 🐞 修复 默认布局开启 `侧边栏 Logo` 与关闭 `菜单水平折叠`，切换到横向布局时，菜单看不见的问题
|
||||||
|
- 🐞 修复 切换不同布局时，再去开启 `经典布局分割菜单` 功能不生效问题
|
||||||
|
- 🐞 修复 浏览器窗口标题中/英文切换不实时生效的问题
|
||||||
|
- 🐞 修复 切换布局时，某些功能不可以使用。部分界面不需要取消事件监听(proxy.mittBus.off('xxx'))
|
||||||
|
- 🐞 修复 动态路由带参数，router-link 跳转问题（<a href="hhttps://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G" target="_blank">#I3YX6G</a>）
|
||||||
|
- 🐞 修复 横向菜单有二级菜单时，点击子级菜单不高亮问题
|
||||||
|
- 🐞 修复 功能 tagsView 操作演示不生效
|
||||||
|
|
||||||
|
## 1.0.10
|
||||||
|
|
||||||
|
`2021.07.07`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本（字体图标无问题）
|
||||||
|
- 🎯 优化 内嵌 iframe、外链，解决 tagsView 刷新问题
|
||||||
|
|
||||||
|
## 1.0.9
|
||||||
|
|
||||||
|
`2021.07.02`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎯 优化 图标选择器设置宽度、v-model 等问题
|
||||||
|
- 🎯 优化 滚动通知栏在手机上的体验
|
||||||
|
- 🎯 优化 系统管理/新增菜单（编辑菜单），使用 `图标选择器` 进行模拟
|
||||||
|
- 🎯 优化 字体图标(自动载入) 逻辑
|
||||||
|
- 🐞 修复 screenfull 全屏时，按键盘 esc 键图标不改变问题，感谢群友@伯牙已遇钟子期
|
||||||
|
|
||||||
|
## 1.0.8
|
||||||
|
|
||||||
|
`2021.06.29`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 表单中英文切换演示
|
||||||
|
- 🎯 优化 登录页查看密码 icon 图标
|
||||||
|
- 🎯 优化 图标选择器
|
||||||
|
- 🎯 优化 拖动指令
|
||||||
|
- 🐞 修复 form 表单在页面小于 576px 时的排版问题
|
||||||
|
|
||||||
|
## 1.0.7
|
||||||
|
|
||||||
|
`2021.06.24`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🎉 新增 拖动指令及其演示界面
|
||||||
|
- 🎯 优化 锁屏界面，解锁提示
|
||||||
|
- 🎯 优化 登录页在手机上显示的效果
|
||||||
|
|
||||||
|
## 1.0.6
|
||||||
|
|
||||||
|
`2021.06.23`
|
||||||
|
|
||||||
|
- 🎯 优化 去掉内嵌 iframe 内边距（padding）
|
||||||
|
- 🎯 优化 城市多级联动组件
|
||||||
|
- 🎯 优化 Tree 树形控件改成表格组件
|
||||||
|
- 🐞 修复 Cascader 级联选择器高度问题
|
||||||
|
|
||||||
|
## 1.0.5
|
||||||
|
|
||||||
|
`2021.06.22`
|
||||||
|
|
||||||
|
- 🌟 更新 vite 降级为@vite2.3.7，降级方法 `cnpm install vite@2.3.7`，防止 element plus 字体图标消失
|
||||||
|
- 🐞 修复 开启后端控制路由（isRequestRoutes = true）时，内嵌 iframe、外链不可使用的问题
|
||||||
|
|
||||||
|
## 1.0.4
|
||||||
|
|
||||||
|
`2021.06.19`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本（"vite": "^2.3.7"）热更新无问题
|
||||||
|
- 🎉 新增 深克隆工具，方便开发，感谢<a href="https://gitee.com/kangert" target="_blank">@kangert</a>(<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/6" target="_blank">#6</a>)
|
||||||
|
- 🎯 优化 vuex 模块自动导入。感谢<a href="https://gitee.com/kangert" target="_blank">@kangert</a>(<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/4" target="_blank">#4</a>)，感谢群友@web 小学生-第五君
|
||||||
|
- 🎯 优化 类型定义提高编码体验，修复不能将类型“string | undefined”分配给类型“string”的问题。感谢<a href="https://gitee.com/kangert" target="_blank">@kangert</a>(<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/5" target="_blank">#5</a>)
|
||||||
|
- 🎯 优化 `layout` 文件夹移动到与 `views` 文件夹同级（改动较大，`/@/views/layout` 变成 `/@/layout`）
|
||||||
|
- 🎯 优化 页面有 `console.log` 时 `eslint` 不生效问题
|
||||||
|
- 🎯 优化 页面、ts 中 `any` 类型问题（改动较大）
|
||||||
|
- 🎯 优化 登录页在手机上显示的效果
|
||||||
|
- 🎯 优化 多行注释信息，鼠标放到方法名即可查看，更加直观的知道方法参数等。引入方法时需去掉以 `.ts` 结尾的后缀（改动较大）
|
||||||
|
- 🎯 优化 移除 `utils/storage.ts` 下的旧写法（改动较大）
|
||||||
|
- 🎯 优化 拆分 `router` 下内容，路由、前端、后端控制分开写，方便理解
|
||||||
|
- 🐞 修复 鼠标移入顶部用户信息栏 `开/关全屏` 文字反向问题
|
||||||
|
- 🐞 修复 热更新时，NextLoading（界面 loading） 不消失问题 `window.nextLoading === undefined`
|
||||||
|
- 🐞 修复 vuex 中不可以使用 `/@/api/xxx` 下的接口调用问题
|
||||||
|
|
||||||
|
## 1.0.3
|
||||||
|
|
||||||
|
`2021.06.02`
|
||||||
|
|
||||||
|
- ❄️ 删除 G6 思维导图界面
|
||||||
|
- 🌟 更新 手动更新 vue、vue-router、vuex 到最近最多人使用的版本，出现不可预测的问题请降低版本。版本查看：<a href="https://www.npmjs.com/package/vue" target="_blank">vue 版本查看</a>
|
||||||
|
- 🐞 修复 开启后端控制路由 `isRequestRoutes` 在非首页刷新页面后，回到首页的问题，感谢群友@伯牙已遇钟子期
|
||||||
|
|
||||||
|
## 1.0.2
|
||||||
|
|
||||||
|
`2021.06.01`
|
||||||
|
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🐞 修复 菜单搜索中文不可以搜索的问题，感谢群友@逍遥天意
|
||||||
|
|
||||||
|
## 1.0.1
|
||||||
|
|
||||||
|
`2021.05.31`
|
||||||
|
|
||||||
|
- 🎉 新增 更新日志文件 `CHANGELOG.md`，以后每次更新都会在这里显示对应内容
|
||||||
|
- 🌟 更新 依赖更新最新版本
|
||||||
|
- 🐞 修复 分栏、经典布局路由设置 `meta.isHide` 为 `true` 时报错问题，感谢群友@29、@芭芭拉
|
||||||
|
- 🐞 修复 经典布局点击 `tagsView` 左侧菜单数据不变问题
|
||||||
@@ -4,15 +4,29 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="keywords"
|
||||||
|
content="vue-next-admin，vue-prev-admin，vue-admin-wonderful，后台管理系统一站式平台模板，希望可以帮你完成快速开发。vue2.x，vue2.0，vue2，vue3，vue3.x，vue3.0，CompositionAPI，typescript，element plus，element，plus，admin，wonderful，wonderful-next，vue-next-admin，vite，vite-admin，快速，高效，后台模板，后台系统，管理系统"
|
||||||
|
/>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="django-vue-admin web，基于 vue3 + CompositionAPI + typescript + vite + element plus"
|
content="vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，适配手机、平板、pc 的后台开源免费管理系统模板！vue-prev-admin，基于 vue2 + element ui，适配手机、平板、pc 的后台开源免费管理系统模板！"
|
||||||
/>
|
/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<title>vue-next-admin</title>
|
<title>vue-next-admin</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var _hmt = _hmt || [];
|
||||||
|
(function () {
|
||||||
|
var hm = document.createElement('script');
|
||||||
|
hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
|
||||||
|
var s = document.getElementsByTagName('script')[0];
|
||||||
|
s.parentNode.insertBefore(hm, s);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=wsijQt8sLXrCW71YesmispvYHitfG9gv&s=1"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
6818
web/package-lock.json
generated
Normal file
6818
web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
165
web/package.json
165
web/package.json
@@ -1,86 +1,83 @@
|
|||||||
{
|
{
|
||||||
"name": "django-vue-admin-web",
|
"name": "vue-next-admin",
|
||||||
"version": "2.2.0",
|
"version": "2.4.21",
|
||||||
"description": "django-vue-admin 全栈快速开发后台管理系统前端",
|
"description": "vue3 vite next admin template",
|
||||||
"license": "MIT",
|
"author": "lyt_20201208",
|
||||||
"scripts": {
|
"license": "MIT",
|
||||||
"dev": "vite --force",
|
"scripts": {
|
||||||
"build": "vite build",
|
"dev": "vite --force",
|
||||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
"build": "vite build",
|
||||||
},
|
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||||
"dependencies": {
|
},
|
||||||
"@element-plus/icons-vue": "^2.0.6",
|
"dependencies": {
|
||||||
"@fast-crud/fast-crud": "^1.4.2",
|
"@element-plus/icons-vue": "^2.0.10",
|
||||||
"@fast-crud/ui-element": "^1.4.2",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
"@vitejs/plugin-vue-jsx": "^2.1.0",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
"@wangeditor/editor": "^5.1.11",
|
"axios": "^1.2.1",
|
||||||
"axios": "^0.27.2",
|
"countup.js": "^2.3.2",
|
||||||
"countup.js": "^2.3.2",
|
"cropperjs": "^1.5.13",
|
||||||
"cropperjs": "^1.5.12",
|
"echarts": "^5.4.1",
|
||||||
"echarts": "^5.3.3",
|
"echarts-gl": "^2.0.9",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-wordcloud": "^2.1.0",
|
||||||
"echarts-wordcloud": "^2.0.0",
|
"element-plus": "^2.2.26",
|
||||||
"element-plus": "^2.2.9",
|
"js-cookie": "^3.0.1",
|
||||||
"js-cookie": "^3.0.1",
|
"js-table2excel": "^1.0.3",
|
||||||
"jsplumb": "^2.15.6",
|
"jsplumb": "^2.15.6",
|
||||||
"lodash-es": "^4.17.21",
|
"mitt": "^3.0.0",
|
||||||
"mitt": "^3.0.0",
|
"nprogress": "^0.2.0",
|
||||||
"nprogress": "^0.2.0",
|
"pinia": "^2.0.28",
|
||||||
"pinia": "^2.0.16",
|
"print-js": "^1.6.0",
|
||||||
"pinia-plugin-persist": "^1.0.0",
|
"qrcodejs2-fixes": "^0.0.2",
|
||||||
"pinia-plugin-persistedstate": "^3.0.2",
|
"qs": "^6.11.0",
|
||||||
"print-js": "^1.6.0",
|
"screenfull": "^6.0.2",
|
||||||
"qrcodejs2-fixes": "^0.0.2",
|
"sortablejs": "^1.15.0",
|
||||||
"screenfull": "^6.0.2",
|
"splitpanes": "^3.1.5",
|
||||||
"sortablejs": "^1.15.0",
|
"vue": "^3.2.45",
|
||||||
"splitpanes": "^3.1.1",
|
"vue-clipboard3": "^2.0.0",
|
||||||
"ts-md5": "^1.3.1",
|
"vue-grid-layout": "^3.0.0-beta1",
|
||||||
"vue": "^3.2.37",
|
"vue-i18n": "^9.2.2",
|
||||||
"vue-clipboard3": "^2.0.0",
|
"vue-router": "^4.1.6"
|
||||||
"vue-grid-layout": "^3.0.0-beta1",
|
},
|
||||||
"vue-i18n": "^9.1.10",
|
"devDependencies": {
|
||||||
"vue-router": "^4.1.2",
|
"@types/node": "^18.11.13",
|
||||||
"xe-utils": "^3.5.7"
|
"@types/nprogress": "^0.2.0",
|
||||||
},
|
"@types/sortablejs": "^1.15.0",
|
||||||
"devDependencies": {
|
"@typescript-eslint/eslint-plugin": "^5.46.0",
|
||||||
"@types/node": "^18.0.6",
|
"@typescript-eslint/parser": "^5.46.0",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@vitejs/plugin-vue": "^4.0.0",
|
||||||
"@types/sortablejs": "^1.13.0",
|
"@vue/compiler-sfc": "^3.2.45",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.30.7",
|
"eslint": "^8.29.0",
|
||||||
"@typescript-eslint/parser": "^5.30.7",
|
"eslint-plugin-vue": "^9.8.0",
|
||||||
"@vitejs/plugin-vue": "^2.3.3",
|
"prettier": "^2.8.1",
|
||||||
"@vue/compiler-sfc": "^3.2.37",
|
"sass": "^1.56.2",
|
||||||
"dotenv": "^16.0.1",
|
"typescript": "^4.9.4",
|
||||||
"eslint": "^8.20.0",
|
"vite": "^4.0.0",
|
||||||
"eslint-plugin-vue": "^9.2.0",
|
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||||
"prettier": "^2.7.1",
|
"vue-eslint-parser": "^9.1.0"
|
||||||
"sass": "^1.53.0",
|
},
|
||||||
"sass-loader": "^13.0.2",
|
"browserslist": [
|
||||||
"typescript": "^4.7.4",
|
"> 1%",
|
||||||
"vite": "^3.0.0",
|
"last 2 versions",
|
||||||
"vue-eslint-parser": "^9.0.3"
|
"not dead"
|
||||||
},
|
],
|
||||||
"browserslist": [
|
"bugs": {
|
||||||
"> 1%",
|
"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
|
||||||
"last 2 versions",
|
},
|
||||||
"not dead"
|
"engines": {
|
||||||
],
|
"node": ">=16.0.0",
|
||||||
"bugs": {
|
"npm": ">= 7.0.0"
|
||||||
"url": "https://gitee.com/lyt-top/vue-next-admin/issues"
|
},
|
||||||
},
|
"keywords": [
|
||||||
"engines": {
|
"vue",
|
||||||
"node": ">=12.0.0",
|
"vue3",
|
||||||
"npm": ">= 6.0.0"
|
"vuejs/vue-next",
|
||||||
},
|
"element-ui",
|
||||||
"keywords": [
|
"element-plus",
|
||||||
"vue",
|
"vue-next-admin",
|
||||||
"vue3",
|
"next-admin"
|
||||||
"element-plus",
|
],
|
||||||
"django",
|
"repository": {
|
||||||
"django-restframework"
|
"type": "git",
|
||||||
],
|
"url": "https://gitee.com/lyt-top/vue-next-admin.git"
|
||||||
"repository": {
|
}
|
||||||
"type": "git",
|
|
||||||
"url": "https://gitee.com/lyt-top/vue-next-admin.git"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
155
web/src/App.vue
155
web/src/App.vue
@@ -1,96 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
|
<el-config-provider :size="getGlobalComponentSize" :locale="getGlobalI18n">
|
||||||
<router-view v-show="themeConfig.lockScreenTime > 1" />
|
<router-view v-show="themeConfig.lockScreenTime > 1" />
|
||||||
<LockScreen v-if="themeConfig.isLockScreen" />
|
<LockScreen v-if="themeConfig.isLockScreen" />
|
||||||
<Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
|
<Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1" />
|
||||||
<CloseFull v-if="!themeConfig.isLockScreen" />
|
<CloseFull v-if="!themeConfig.isLockScreen" />
|
||||||
|
<Upgrade v-if="getVersion" />
|
||||||
</el-config-provider>
|
</el-config-provider>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="app">
|
||||||
import { computed, ref, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, nextTick, defineComponent, watch, reactive, toRefs } from 'vue';
|
import { defineAsyncComponent, computed, ref, onBeforeMount, onMounted, onUnmounted, nextTick, watch } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import other from '/@/utils/other';
|
import other from '/@/utils/other';
|
||||||
import { Local, Session } from '/@/utils/storage';
|
import { Local, Session } from '/@/utils/storage';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
import setIntroduction from '/@/utils/setIconfont';
|
import setIntroduction from '/@/utils/setIconfont';
|
||||||
import LockScreen from '/@/layout/lockScreen/index.vue';
|
|
||||||
import Setings from '/@/layout/navBars/breadcrumb/setings.vue';
|
|
||||||
import CloseFull from '/@/layout/navBars/breadcrumb/closeFull.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'app',
|
const LockScreen = defineAsyncComponent(() => import('/@/layout/lockScreen/index.vue'));
|
||||||
components: { LockScreen, Setings, CloseFull },
|
const Setings = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/setings.vue'));
|
||||||
setup() {
|
const CloseFull = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/closeFull.vue'));
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const Upgrade = defineAsyncComponent(() => import('/@/layout/upgrade/index.vue'));
|
||||||
const setingsRef = ref();
|
|
||||||
const route = useRoute();
|
// 定义变量内容
|
||||||
const stores = useTagsViewRoutes();
|
const { messages, locale } = useI18n();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const setingsRef = ref();
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const route = useRoute();
|
||||||
const state = reactive({
|
const stores = useTagsViewRoutes();
|
||||||
i18nLocale: null,
|
const storesThemeConfig = useThemeConfig();
|
||||||
});
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
// 获取全局组件大小
|
|
||||||
const getGlobalComponentSize = computed(() => {
|
// 获取版本号
|
||||||
return other.globalComponentSize();
|
const getVersion = computed(() => {
|
||||||
});
|
let isVersion = false;
|
||||||
// 布局配置弹窗打开
|
if (route.path !== '/login') {
|
||||||
const openSetingsDrawer = () => {
|
// @ts-ignore
|
||||||
setingsRef.value.openDrawer();
|
if ((Local.get('version') && Local.get('version') !== __VERSION__) || !Local.get('version')) isVersion = true;
|
||||||
};
|
}
|
||||||
// 设置初始化，防止刷新时恢复默认
|
return isVersion;
|
||||||
onBeforeMount(() => {
|
|
||||||
// 设置批量第三方 icon 图标
|
|
||||||
setIntroduction.cssCdn();
|
|
||||||
// 设置批量第三方 js
|
|
||||||
setIntroduction.jsCdn();
|
|
||||||
});
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
nextTick(() => {
|
|
||||||
// 监听布局配置弹窗点击打开
|
|
||||||
proxy.mittBus.on('openSetingsDrawer', () => {
|
|
||||||
openSetingsDrawer();
|
|
||||||
});
|
|
||||||
// 设置 i18n，App.vue 中的 el-config-provider
|
|
||||||
proxy.mittBus.on('getI18nConfig', (locale: string) => {
|
|
||||||
(state.i18nLocale as string | null) = locale;
|
|
||||||
});
|
|
||||||
// 获取缓存中的布局配置
|
|
||||||
if (Local.get('themeConfig')) {
|
|
||||||
storesThemeConfig.setThemeConfig(Local.get('themeConfig'));
|
|
||||||
document.documentElement.style.cssText = Local.get('themeConfigStyle');
|
|
||||||
}
|
|
||||||
// 获取缓存中的全屏配置
|
|
||||||
if (Session.get('isTagsViewCurrenFull')) {
|
|
||||||
stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 页面销毁时，关闭监听布局配置/i18n监听
|
|
||||||
onUnmounted(() => {
|
|
||||||
proxy.mittBus.off('openSetingsDrawer', () => {});
|
|
||||||
proxy.mittBus.off('getI18nConfig', () => {});
|
|
||||||
});
|
|
||||||
// 监听路由的变化，设置网站标题
|
|
||||||
watch(
|
|
||||||
() => route.path,
|
|
||||||
() => {
|
|
||||||
other.useTitle();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
themeConfig,
|
|
||||||
setingsRef,
|
|
||||||
getGlobalComponentSize,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
// 获取全局组件大小
|
||||||
|
const getGlobalComponentSize = computed(() => {
|
||||||
|
return other.globalComponentSize();
|
||||||
|
});
|
||||||
|
// 获取全局 i18n
|
||||||
|
const getGlobalI18n = computed(() => {
|
||||||
|
return messages.value[locale.value];
|
||||||
|
});
|
||||||
|
// 设置初始化，防止刷新时恢复默认
|
||||||
|
onBeforeMount(() => {
|
||||||
|
// 设置批量第三方 icon 图标
|
||||||
|
setIntroduction.cssCdn();
|
||||||
|
// 设置批量第三方 js
|
||||||
|
setIntroduction.jsCdn();
|
||||||
|
});
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
// 监听布局配'置弹窗点击打开
|
||||||
|
mittBus.on('openSetingsDrawer', () => {
|
||||||
|
setingsRef.value.openDrawer();
|
||||||
|
});
|
||||||
|
// 获取缓存中的布局配置
|
||||||
|
if (Local.get('themeConfig')) {
|
||||||
|
storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') });
|
||||||
|
document.documentElement.style.cssText = Local.get('themeConfigStyle');
|
||||||
|
}
|
||||||
|
// 获取缓存中的全屏配置
|
||||||
|
if (Session.get('isTagsViewCurrenFull')) {
|
||||||
|
stores.setCurrenFullscreen(Session.get('isTagsViewCurrenFull'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 页面销毁时，关闭监听布局配置/i18n监听
|
||||||
|
onUnmounted(() => {
|
||||||
|
mittBus.off('openSetingsDrawer', () => {});
|
||||||
|
});
|
||||||
|
// 监听路由的变化，设置网站标题
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
other.useTitle();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
19
web/src/assets/login-bg.svg
Normal file
19
web/src/assets/login-bg.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.4 KiB |
1
web/src/assets/login-main.svg
Normal file
1
web/src/assets/login-main.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 36 KiB |
@@ -1,53 +1,9 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 50" width="64" height="50">
|
||||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
<defs>
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <image id="image0" width="64" height="64" x="0" y="0"
|
<image width="64" height="50" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAyCAYAAADsg90UAAAAAXNSR0IB2cksfwAACI5JREFUeJy1WgtsW9UZdvNq0xU6WhZoCCVx7Gunbld1GSsMdYpGREhwr+2IMbQWqRoTk+iWPZi2wWhm1kwEmqV52feRJrbvvd6DiUnbQCAemzY2xh4tSB0wOqZIqAtLYzultIWEpt13btLq+sap/R8nRzpK4vh+5/++85///8851yEk1V+hX6B0tyE3OWwt0x789VR78AKlZ0KBz1oxBE3+BdUW9PNuQ7nJbk/BDQ/v4hi0x44z1R64jyrAVCjQ/fLNN8/ZoUWdgqGc57AFE6I86giH+QRw6XI9QE4RBz3iTAyVW3EyQdEDUmeIIhyeFNtMHO/o0B4e8qYASfVvLk2p4BKgdnioFCAvEQeddhnyFivOpOgvBaFXiAKcygQDrk927S/zjkae5xUA/X3YI/C5AFwHLrSPw+2+YYfCMugiCvDaCbGt0hc9uAXuP1OEAPACZQ+fAGguQ9nGgglx0OfsOAhq24lBcG/YYQa/kWLIz3XlCW4B6mKRCoCMEQdNu3VpnRVnMhBYA2L/LVCATCooXuNJSHXFzv58P+mMyyu5RQDAKNntdLnNjoN0+NMCM0D8901NDkGXuyBAseRZn3Ubagu3AFjTd1GXAdZdpCqurMgSIBS4BwRn8wgwje/d4pV6yz2adGQJyM/bo/ZyC+DSlWqApIiDHqtPyFdlCyBeD4Lv5xHgr5mAWO4ZjTRh9s8tlQDoryIbrOISoLYvvAIALxIHnIHn3GnFmfDfztLhH/IEv/vYd72xyKElJM/6Gdjj4fYCuNA3yYMa6ogdBwQfvIwAk+mguHZz3+MbMPsfLrEALD3v5RfAkH3UOID+Jqqwj2ULIDZeJvhF2He8I0NfX2ry8wI85VSy41LBzaUPsXT4L/Iy0OUbrTgpsXUlyI7lEOAsvGOboPRdKejK28shAPqpek1etxjHArxAiXCo/pAdB2QPLRQg8BLcv8ITi4h4bnaZBGD2+IsQQG0DCDUyv2LfjcHVQyB93iLAecz+bvY/T1x6YrnImwIkVakIAeSrAfIucdCz7qRcY8VJh8RrQDplWfvHxttaVvkGe6vg/h8tpwDoR926wpcOb9CkEhQ4Mbrqym4rTkrcydLhs5bU95Wwwwx+311m8qxPQ4CtvE6AdKjcLlCrQkNJXNXdnYUD0t+eF+AE1v76rV0/qvTEo/8kkkGJq/yFLIKhPsgtgEszl8E4cdAxPHdllgDBwGZW9k6Fguaa9A4PtMEwkrDe0chhCPAZ/E5dNn/kPiWqGe5mVSH1rJCdze2w4rDNDsi/gdn/FPtb0KTfUmeyQenvuE45WCLQd6unsc3fwKeAw0yHX+Zwu247DpbB3emQv3R7x7du8GgybdtrKGc39Ty23rQnqfKk5y9wCwD1XACZJg56xGUMZFVhx1taytjPBnWAfuihyT+3TEiAQwC1Mhzmqwrr9QhbBoeJg36A6Ou0Y/kGe2qQ+mhiGspHDcODTZfs0eRr8fkE0Z4xpyGt4RJgTnX1carq8Jw9dhzv6BB5k+VJyK9t6+y8dNK74bGHMSHK00Scc/CC7fwC6MotAjX6GuqTzsTBkosYW/f9YKUnIb1OFiAW/c4Ce5Lq18jLKKnu5xaApTWBHn0n8Nz6ixhw4zvJ5HXlvU2R3gWui02XizwhrEznbTW9vQ64nUEckBUut13EQOHzFFUA70jErBv+09xcYrXHqUXK8H9qIXXapSs1dm4FN1SF95DdzlD72LMNUt/15CMvXT65NfzIRtQOq5FCv7jAHkPppdqDZ3YvZFZgY8WEQN8dvvFxpB8hLvWT3T8uyWxckG9CEfX38fk0ahGgmboMMIk/2xg5UJKbYZ62sf9RbI7UPxGJzLgT0R2Y/RM0z1HO+QZ6Gl/3+dh2Wmdb6HQwUJc9IfI6fPc40Z5xCLeW2wvw8Pfoy0B5mfoMAuYLn+7oKE0FxZqp+YvWTHugw24PvvtLIjZLh83cAghzmxHqASb5qntz/4EvsfEy7UHroepvJoKtWdUcPPKrVGwsA6k2FuYTAPXAGoC8RfYCStflqRvv3VuB4Hc1SI9bBJjAZ1VWe+p1+TqBHpfG+M8Ksa0EgLacAnhiETNzIPjdbztLPIfPWrME0CSkQ+UfxDFmkQ5v5RPAYcYBckFTcDfUWc+hwZsw06tA+EiOi5RoDns66ctA/Qm3AE4tuhYgZ5Zl9uPR32165PtlINoMwjM5jtPfSvn9WTe/iEufw7PUW+U3a2NSKZ8CTU0s+DyzHAJgq9yuNDaywxNtkQuVWaTDBqs5SIdsQt4hjsXOCvmvzrDu6Fdnebo3Hj3u69xXngoFqkH09KL3ie2BB6y2XCsfZNt1apnOqsL7uY/KoB57k+SDJRUhIZlX2iD4UJ4b5ef+3dqabY9hlunUdPt0XXyIryqs1yKVAv3qbPFuKNNedaAR5FeD4NE8AqRTwZ1ZmxqnHv0EcI4Rxz3hNqSqxThevrEXqpJq31IJgOD3TN3+h0tYmmPpLt9bJex80W4SRBzmEF7kE8Bhbo5aONwutwCx6K4JUVyByu/JfOTn+6EFAiTNN1uoAgxyC1BvqFcAZLJo8pr8rlvuq8wExfpFUl+u/s7/dt6R9UKkS5ergHeaOP6Yc2SQLw7Mqa6SDznsHakvzLAyoeAPCyRvVoXpUGCb1ZZqRWFnhdQXPWcg3Jac5App7C2MImf/5Kb+nupJ0X8FSL1NEOACEyyHPQ9QbWA73CIEkBuEIqrCzUO9CsNB6esCqQ8pAqD/Oe33l9vs2SLQd6svuhJSWW6GeVptLFKGbMD9eltjZ2cjw5m4o60ChF4lCvBeJhjIuntAYF4N3KNEO9Lwgmo+F/D5mNt1cbr/2OeD916qx+HSB4gCsDdNdmXZM7dbjRJtYXeZd/EJ4DDX3Q4uARLSj604yO23UgVA2jRy2EO+OkNX/w+fZNm8pw5QbAAAAABJRU5ErkJggg=="/>
|
||||||
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
|
</defs>
|
||||||
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAJ
|
<style>
|
||||||
30lEQVR42u2ae3QU1R3HP3dmd1kSIAlCIJDwCMpDEXxU0MpDEY5wRK2CVhTFqhUrWBSh9VFaUXvq
|
tspan { white-space:pre }
|
||||||
oe1RSxWLYkFbqsJpFbFqUNE2gghKgaA5SokYjCRgIhDy3JnbP353ybDsZndDCO3pfs+ZMzuzd+69
|
</style>
|
||||||
v+/93d9rBlJIIYUUUkghhRRSSOH/EupETyAW8p+oBrCAIJAJ+IH2QDvgEFAPHACqAWfnjA7/uwQY
|
<use id="Background" href="#img1" x="0" y="0" />
|
||||||
YTHC9gYGA/2BQeY6xwgeMETUAY1ABfAZsAlYD2wF6pIh44QSYARvDwwBRpvjDCAb8CXZXSWwFlhs
|
</svg>
|
||||||
zo2JENHmBHhWuytwMXA1MALIaqUh9gNLgAVAeTwSjjsBRmAfor4KZXUGfSWa60CfSfIrnQg08Aow
|
|
||||||
AyhrjoRWI8AjaFegD3AKosp9kD2M8gf+7NZUfePW152FUrbVLj2gAmndlbI6oFRfXLe31k4OWgdb
|
|
||||||
aVpLgDuA2lgktJgAjyp3Ak4HzgWGm989gXTEijdi2WtwGh/ddW+/Bufg3qlAP8AF9gHfYNl7fR2z
|
|
||||||
vw32H3mg08hb7GD+efnKFzhPu6Fz0Dr9GAioB24DlgJEIyFpAjzuaQAw0RxnGCIiuy9R/sAjZY+O
|
|
||||||
X1/76dtTgJsRrYgGjbi0EmCdP7vfxuwb/+gG84eP027oErTOaCEJ64DLgG+OiQCP4IOBacBVQF7M
|
|
||||||
B5T1lltTOe+LObk9gZ8jlj4ZNAAbrfYZL+XMePnb4MnfnaKdxrEkbzMagKnAihYR4FH1bsAPgelA
|
|
||||||
bjOPhLDsv1R/8NwjFcumTwFmAR2TnLQXDvCPQO7Qxbk/fa8Xtv9OtM5Jso+ngB/B0dvASlD484EX
|
|
||||||
gAfjCO8q27do79JpD1csm34/cN8xCg9gAxc27N7yxM4fZwUbK3bcgWVvTbKP02PNIyYBHuEvBZYD
|
|
||||||
FxBPYyx75b4XZi46uOGlBcC18QhOEp3Rel7pA0PHHdr88lwse0MSz+YCnRMmwCP8xcAioFfcIZRa
|
|
||||||
X1dc8OD+d5+ZDVzeioJ74QOmly+ecm3djsK5KGtzgs9lAd0TJsBgABJN9UxggAqcxl+UPX75ROAH
|
|
||||||
x0l4L64v++24S92afT8DVZFAez+SZ8QnwBPQzCJBy61s/9Mld3YBmIPs2eMNC5jxxdzeOcq2H0Nc
|
|
||||||
aIs7ioazETeXgPSqqHrjiyu1E5oNdGkD4cNIQ+s5FUtvKsSyC+O01bFIikXAmESFUXZgefmSG04F
|
|
||||||
LmpD4cMYePCD5VcQql+CpMexcBDYG5cAj/qfk9DwSu2q/ey9NcB1yD47EZhc/vTUUiz7o2baVJrj
|
|
||||||
KESLqgIkuvqWb+3XCy/NAkZ6bjtAObIiXrfZyRxh0l2kokPE/VpzhO/7kJi+BimKpEVMI+/Q1tUj
|
|
||||||
lFKrteQj0VACVEX7w4pxLxH/rVHWe7qhdhhHBhl7gElIjj8SGGXOY5DE5G0ghISo9wKXAEWH+4Rf
|
|
||||||
IzHHDUjFJ4SE0qORQMyJMpcL6ku3FqFUNdGx04yXEAGhWI2PhNpX/+XHxUZALzKRIkc18CWS+d2D
|
|
||||||
rObTwGTgD4hbykeSlTfNs+XACmAbstLdge3Ac+bei8hqRmJw1euP1KOsL2JMdhtEzwajEVAPxOrI
|
|
||||||
86RVUrX6l43AwIh/0oEraNKKAUgc/jyiCd8CDwMfIaufDRQiW2IT8LmZ1wRz/jtiwHzALuCtKLM5
|
|
||||||
qfaTNd2UZX8W5b9KM1Z0MbwXhiHd3ANhKGX9u7b4nU4k7vrygGvM7z1IxWYQMB7YgBQ3/2kWoB/i
|
|
||||||
VaqAvxniLjBzW02TjTgsh1t3sAfwVZRxi0zf8QnwYD0x3EYTA9Y+t766OzEirBgY6GlfgRjJy5A6
|
|
||||||
3grgXfPfKCT8LgS2IPlImLz3EU2JRI52na+j3H8fcYNJEbANKGieAAVHWu9EYNPkGcLnUcBpwO+R
|
|
||||||
srYf0QqQ1W+PGMAxQF9kC62MOiVUpKU/gLEvsUpiR03eNGwE/tQccy1EOU0Gtrc5dwW+h2hEHbIt
|
|
||||||
RgPFwOtIVDrQCB8m5k3EHnihNTqy2vQhcbZzc6u3Fng55r9ag1j6WHF45Eo3GIEc5KXHlZ62E5CC
|
|
||||||
C8A4Q0oBYitGIIYVxGgGkT39WsR4XynL7ua51sAqM8fkCDBaUA88TiyPoHWm8gfLONIglQKbEfc3
|
|
||||||
CbjJCFsIzEf2OUiaXWPabjak3IZUnM5B9r0CbgWGIltyK+Ia84xwb9CkTSG7Y/bXaPp45vJJeAGb
|
|
||||||
K4vHq699BPzKEHGEsdPaOaV9/1EHarYXVNIUnS0CnkX2cXi/rzEkhVciDdnDf40yF2UEc8215bkO
|
|
||||||
46Dpf7/pNwCUdxh2TaXWjtclv2AWpFnEJGDnjA7h3OB5swq3H9HAdftkTZxn1WwvKKapTHYjosLR
|
|
||||||
Kkfeey1OX00/GokfwpXoTZnj7srCdcNF2iIzb+K9GWpWAwwJtcBDRsjLPDJkB/OHD0DUe6y52d8c
|
|
||||||
bQmtfO3W+jJ7jNJOox/ZTos52khGRVwXZhjcA8xEjFjTs1pfqPztC2lKak4EtnSZ8rsd2nUmmOt3
|
|
||||||
EA8Wd/UTIsDTUakh4Y3wfe2Exva4+639ZtATgZCy/c92On/ahWg3F3nTtACoSvQVecJBjOlwJ2Kp
|
|
||||||
VxkKegX7DpsALEOselvjtZ73Fu7WrjPNXD9FkouRVNnakLAbeTmyGAjpUMO0vHmbdnO0VT/eKOow
|
|
||||||
7PtPBnoOuR2tuyDB0eOAm8wHEknX7T02YTbwE9AZgR6nzfR3P/kxxPe2BUr92f0e6HbTc5fjOmOR
|
|
||||||
lPkeYF+yn8q06MWFGeQQ8BhwnXadvF7zt58F3I/sw+OJz/1d+83Jm190rnYapwNlwFzgXy3prMVv
|
|
||||||
bjypcwFwvQ6FgvkLK8tQ6m7EVrQ2XODN9KETZ/d6cPtoXOcuJLeYhfFOLflQqlU+kDABkx9ldVM2
|
|
||||||
9p4nr+55aMvqS5AUtm8rjFOCZS/NmfnK5rRTx96undB4pDI0C3i1pcK3GgGHSVAWaJ2tfP4J2nXq
|
|
||||||
KpbeXFa9Yfm5SAB1Jk1JTSJoBD4FVmWMmbnhpMkLzgZuRbs9kETtPuCDYxG+VQk4TIIgA7gRyx6p
|
|
||||||
LHtTbfG7GyuW3ZIWqvzyTCT3H0BTKBueQy1SvioBttsZ3bd1ueo3lelnTxoCTMF1BiEp8zPAQmDP
|
|
||||||
sQh+XAiIIMICvgPMQKnhyvLtQql1zqGqHXWfF1bWfFLghPbuzHTrq0OqXXrA7tC1Lm3QRU6w/+gM
|
|
||||||
X+fc3kpZI7TrDEe7WYaYVxE//yFJuro2JyCCCD8wDKkUjwb6opSLsvYrpeqQIkhQax1E60y07gja
|
|
||||||
QrLHIqSMvgpJmxP69u+/hoAIIhTyjv50RDPygZOQL8gUUo4vRQqhxcDH5rwfjm2fn3ACmiHFRvJ5
|
|
||||||
EJfaQCuqdwoppJBCCimkkEJz+A8yuCszfDFdCAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMy0wMi0w
|
|
||||||
NFQwOToyODoxNyswMDowMFBCTAkAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjMtMDItMDRUMDk6Mjg6
|
|
||||||
MTcrMDA6MDAhH/S1AAAAAElFTkSuQmCC" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 3.2 KiB |
@@ -2,29 +2,25 @@
|
|||||||
<slot v-if="getUserAuthBtnList" />
|
<slot v-if="getUserAuthBtnList" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="auth">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useUserInfo } from '/@/stores/userInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'auth',
|
const props = defineProps({
|
||||||
props: {
|
value: {
|
||||||
value: {
|
type: String,
|
||||||
type: String,
|
default: () => '',
|
||||||
default: () => '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const stores = useUserInfo();
|
|
||||||
const { userInfos } = storeToRefs(stores);
|
|
||||||
// 获取 vuex 中的用户权限
|
|
||||||
const getUserAuthBtnList = computed(() => {
|
|
||||||
return userInfos.value.authBtnList.some((v: string) => v === props.value);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
getUserAuthBtnList,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const stores = useUserInfo();
|
||||||
|
const { userInfos } = storeToRefs(stores);
|
||||||
|
|
||||||
|
// 获取 pinia 中的用户权限
|
||||||
|
const getUserAuthBtnList = computed(() => {
|
||||||
|
return userInfos.value.authBtnList.some((v: string) => v === props.value);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,30 +2,26 @@
|
|||||||
<slot v-if="getUserAuthBtnList" />
|
<slot v-if="getUserAuthBtnList" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="authAll">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useUserInfo } from '/@/stores/userInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
import { judementSameArr } from '/@/utils/arrayOperation';
|
import { judementSameArr } from '/@/utils/arrayOperation';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'authAll',
|
const props = defineProps({
|
||||||
props: {
|
value: {
|
||||||
value: {
|
type: Array,
|
||||||
type: Array,
|
default: () => [],
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const stores = useUserInfo();
|
|
||||||
const { userInfos } = storeToRefs(stores);
|
|
||||||
// 获取 pinia 中的用户权限
|
|
||||||
const getUserAuthBtnList = computed(() => {
|
|
||||||
return judementSameArr(props.value, userInfos.value.authBtnList);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
getUserAuthBtnList,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const stores = useUserInfo();
|
||||||
|
const { userInfos } = storeToRefs(stores);
|
||||||
|
|
||||||
|
// 获取 pinia 中的用户权限
|
||||||
|
const getUserAuthBtnList = computed(() => {
|
||||||
|
return judementSameArr(props.value, userInfos.value.authBtnList);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -2,35 +2,31 @@
|
|||||||
<slot v-if="getUserAuthBtnList" />
|
<slot v-if="getUserAuthBtnList" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="auths">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useUserInfo } from '/@/stores/userInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'auths',
|
const props = defineProps({
|
||||||
props: {
|
value: {
|
||||||
value: {
|
type: Array,
|
||||||
type: Array,
|
default: () => [],
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const stores = useUserInfo();
|
|
||||||
const { userInfos } = storeToRefs(stores);
|
|
||||||
// 获取 vuex 中的用户权限
|
|
||||||
const getUserAuthBtnList = computed(() => {
|
|
||||||
let flag = false;
|
|
||||||
userInfos.value.authBtnList.map((val: string) => {
|
|
||||||
props.value.map((v) => {
|
|
||||||
if (val === v) flag = true;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return flag;
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
getUserAuthBtnList,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const stores = useUserInfo();
|
||||||
|
const { userInfos } = storeToRefs(stores);
|
||||||
|
|
||||||
|
// 获取 pinia 中的用户权限
|
||||||
|
const getUserAuthBtnList = computed(() => {
|
||||||
|
let flag = false;
|
||||||
|
userInfos.value.authBtnList.map((val: string) => {
|
||||||
|
props.value.map((v) => {
|
||||||
|
if (val === v) flag = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return flag;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-dialog title="更换头像" v-model="isShowDialog" width="769px">
|
<el-dialog title="更换头像" v-model="state.isShowDialog" width="769px">
|
||||||
<div class="cropper-warp">
|
<div class="cropper-warp">
|
||||||
<div class="cropper-warp-left">
|
<div class="cropper-warp-left">
|
||||||
<img :src="cropperImg" class="cropper-warp-left-img" />
|
<img :src="state.cropperImg" class="cropper-warp-left-img" />
|
||||||
</div>
|
</div>
|
||||||
<div class="cropper-warp-right">
|
<div class="cropper-warp-right">
|
||||||
<div class="cropper-warp-right-title">预览</div>
|
<div class="cropper-warp-right-title">预览</div>
|
||||||
<div class="cropper-warp-right-item">
|
<div class="cropper-warp-right-item">
|
||||||
<div class="cropper-warp-right-value">
|
<div class="cropper-warp-right-value">
|
||||||
<img :src="cropperImgBase64" class="cropper-warp-right-value-img" />
|
<img :src="state.cropperImgBase64" class="cropper-warp-right-value-img" />
|
||||||
</div>
|
</div>
|
||||||
<div class="cropper-warp-right-label">100 x 100</div>
|
<div class="cropper-warp-right-label">100 x 100</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cropper-warp-right-item">
|
<div class="cropper-warp-right-item">
|
||||||
<div class="cropper-warp-right-value">
|
<div class="cropper-warp-right-value">
|
||||||
<img :src="cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
|
<img :src="state.cropperImgBase64" class="cropper-warp-right-value-img cropper-size" />
|
||||||
</div>
|
</div>
|
||||||
<div class="cropper-warp-right-label">50 x 50</div>
|
<div class="cropper-warp-right-label">50 x 50</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -31,66 +31,60 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="cropper">
|
||||||
import { reactive, toRefs, nextTick, defineComponent } from 'vue';
|
import { reactive, nextTick } from 'vue';
|
||||||
import Cropper from 'cropperjs';
|
import Cropper from 'cropperjs';
|
||||||
import 'cropperjs/dist/cropper.css';
|
import 'cropperjs/dist/cropper.css';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'cropperIndex',
|
const state = reactive({
|
||||||
setup() {
|
isShowDialog: false,
|
||||||
const state = reactive({
|
cropperImg: '',
|
||||||
isShowDialog: false,
|
cropperImgBase64: '',
|
||||||
cropperImg: '',
|
cropper: '' as RefType,
|
||||||
cropperImgBase64: '',
|
});
|
||||||
cropper: null,
|
|
||||||
});
|
// 打开弹窗
|
||||||
// 打开弹窗
|
const openDialog = (imgs: string) => {
|
||||||
const openDialog = (imgs: any) => {
|
state.cropperImg = imgs;
|
||||||
state.cropperImg = imgs;
|
state.isShowDialog = true;
|
||||||
state.isShowDialog = true;
|
nextTick(() => {
|
||||||
nextTick(() => {
|
initCropper();
|
||||||
initCropper();
|
});
|
||||||
});
|
};
|
||||||
};
|
// 关闭弹窗
|
||||||
// 关闭弹窗
|
const closeDialog = () => {
|
||||||
const closeDialog = () => {
|
state.isShowDialog = false;
|
||||||
state.isShowDialog = false;
|
};
|
||||||
};
|
// 取消
|
||||||
// 取消
|
const onCancel = () => {
|
||||||
const onCancel = () => {
|
closeDialog();
|
||||||
closeDialog();
|
};
|
||||||
};
|
// 更换
|
||||||
// 更换
|
const onSubmit = () => {
|
||||||
const onSubmit = () => {
|
// state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
|
||||||
// state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
|
};
|
||||||
};
|
// 初始化cropperjs图片裁剪
|
||||||
// 初始化cropperjs图片裁剪
|
const initCropper = () => {
|
||||||
const initCropper = () => {
|
const letImg = <HTMLImageElement>document.querySelector('.cropper-warp-left-img');
|
||||||
const letImg: any = document.querySelector('.cropper-warp-left-img');
|
state.cropper = new Cropper(letImg, {
|
||||||
(<any>state.cropper) = new Cropper(letImg, {
|
viewMode: 1,
|
||||||
viewMode: 1,
|
dragMode: 'none',
|
||||||
dragMode: 'none',
|
initialAspectRatio: 1,
|
||||||
initialAspectRatio: 1,
|
aspectRatio: 1,
|
||||||
aspectRatio: 1,
|
preview: '.before',
|
||||||
preview: '.before',
|
background: false,
|
||||||
background: false,
|
autoCropArea: 0.6,
|
||||||
autoCropArea: 0.6,
|
zoomOnWheel: false,
|
||||||
zoomOnWheel: false,
|
crop: () => {
|
||||||
crop: () => {
|
state.cropperImgBase64 = state.cropper.getCroppedCanvas().toDataURL('image/jpeg');
|
||||||
state.cropperImgBase64 = (<any>state.cropper).getCroppedCanvas().toDataURL('image/jpeg');
|
},
|
||||||
},
|
});
|
||||||
});
|
};
|
||||||
};
|
|
||||||
return {
|
// 暴露变量
|
||||||
openDialog,
|
defineExpose({
|
||||||
closeDialog,
|
openDialog,
|
||||||
onCancel,
|
|
||||||
onSubmit,
|
|
||||||
initCropper,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,115 +1,101 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="editor-container">
|
<div class="editor-container">
|
||||||
<div ref="editorToolbar"></div>
|
<Toolbar :editor="editorRef" :mode="mode" />
|
||||||
<div ref="editorContent" :style="{ height }"></div>
|
<Editor
|
||||||
|
:mode="mode"
|
||||||
|
:defaultConfig="state.editorConfig"
|
||||||
|
:style="{ height }"
|
||||||
|
v-model="state.editorVal"
|
||||||
|
@onCreated="handleCreated"
|
||||||
|
@onChange="handleChange"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="wngEditor">
|
||||||
import { toRefs, reactive, onMounted, watch, defineComponent } from 'vue';
|
// https://www.wangeditor.com/v5/for-frame.html#vue3
|
||||||
import { createEditor, createToolbar, IEditorConfig, IToolbarConfig, IDomEditor } from '@wangeditor/editor';
|
|
||||||
import '@wangeditor/editor/dist/css/style.css';
|
import '@wangeditor/editor/dist/css/style.css';
|
||||||
import { toolbarKeys } from './toolbar';
|
import { reactive, shallowRef, watch, onBeforeUnmount } from 'vue';
|
||||||
|
import { IDomEditor } from '@wangeditor/editor';
|
||||||
|
import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 定义父组件传过来的值
|
||||||
interface WangeditorState {
|
const props = defineProps({
|
||||||
editorToolbar: HTMLDivElement | null;
|
// 是否禁用
|
||||||
editorContent: HTMLDivElement | null;
|
disable: {
|
||||||
editor: any;
|
type: Boolean,
|
||||||
}
|
default: () => false,
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'wngEditor',
|
|
||||||
props: {
|
|
||||||
// 节点 id
|
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'wangeditor',
|
|
||||||
},
|
|
||||||
// 是否禁用
|
|
||||||
isDisable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => false,
|
|
||||||
},
|
|
||||||
// 内容框默认 placeholder
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: () => '请输入内容',
|
|
||||||
},
|
|
||||||
// 双向绑定：双向绑定值，字段名为固定，改了之后将不生效
|
|
||||||
// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
|
||||||
modelValue: String,
|
|
||||||
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
|
|
||||||
// 模式，可选 <default|simple>，默认 default
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'default',
|
|
||||||
},
|
|
||||||
// 高度
|
|
||||||
height: {
|
|
||||||
type: String,
|
|
||||||
default: () => '310px',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
setup(props, { emit }) {
|
// 内容框默认 placeholder
|
||||||
const state = reactive<WangeditorState>({
|
placeholder: {
|
||||||
editorToolbar: null,
|
type: String,
|
||||||
editor: null,
|
default: () => '请输入内容...',
|
||||||
editorContent: null,
|
|
||||||
});
|
|
||||||
// 富文本配置
|
|
||||||
const wangeditorConfig = () => {
|
|
||||||
const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
|
|
||||||
props.isDisable ? (editorConfig.readOnly = true) : (editorConfig.readOnly = false);
|
|
||||||
editorConfig.placeholder = props.placeholder;
|
|
||||||
editorConfig.onChange = (editor: IDomEditor) => {
|
|
||||||
// console.log('content', editor.children);
|
|
||||||
// console.log('html', editor.getHtml());
|
|
||||||
emit('update:modelValue', editor.getHtml());
|
|
||||||
};
|
|
||||||
(<any>editorConfig).MENU_CONF['uploadImage'] = {
|
|
||||||
base64LimitSize: 10 * 1024 * 1024,
|
|
||||||
};
|
|
||||||
return editorConfig;
|
|
||||||
};
|
|
||||||
//
|
|
||||||
const toolbarConfig = () => {
|
|
||||||
const toolbarConfig: Partial<IToolbarConfig> = {};
|
|
||||||
toolbarConfig.toolbarKeys = toolbarKeys;
|
|
||||||
return toolbarConfig;
|
|
||||||
};
|
|
||||||
// 初始化富文本
|
|
||||||
// https://www.wangeditor.com/
|
|
||||||
const initWangeditor = () => {
|
|
||||||
state.editor = createEditor({
|
|
||||||
html: props.modelValue,
|
|
||||||
selector: state.editorContent!,
|
|
||||||
config: wangeditorConfig(),
|
|
||||||
mode: props.mode,
|
|
||||||
});
|
|
||||||
createToolbar({
|
|
||||||
editor: state.editor,
|
|
||||||
selector: state.editorToolbar!,
|
|
||||||
mode: props.mode,
|
|
||||||
config: toolbarConfig(),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initWangeditor();
|
|
||||||
});
|
|
||||||
// 监听双向绑定值的改变
|
|
||||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(value) => {
|
|
||||||
state.editor.clear();
|
|
||||||
state.editor.dangerouslyInsertHtml(value);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
// https://www.wangeditor.com/v5/getting-started.html#mode-%E6%A8%A1%E5%BC%8F
|
||||||
|
// 模式，可选 <default|simple>，默认 default
|
||||||
|
mode: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'default',
|
||||||
|
},
|
||||||
|
// 高度
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: () => '310px',
|
||||||
|
},
|
||||||
|
// 双向绑定，用于获取 editor.getHtml()
|
||||||
|
getHtml: String,
|
||||||
|
// 双向绑定，用于获取 editor.getText()
|
||||||
|
getText: String,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 定义子组件向父组件传值/事件
|
||||||
|
const emit = defineEmits(['update:getHtml', 'update:getText']);
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const editorRef = shallowRef();
|
||||||
|
const state = reactive({
|
||||||
|
editorConfig: {
|
||||||
|
placeholder: props.placeholder,
|
||||||
|
},
|
||||||
|
editorVal: props.getHtml,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 编辑器回调函数
|
||||||
|
const handleCreated = (editor: IDomEditor) => {
|
||||||
|
editorRef.value = editor;
|
||||||
|
};
|
||||||
|
// 编辑器内容改变时
|
||||||
|
const handleChange = (editor: IDomEditor) => {
|
||||||
|
emit('update:getHtml', editor.getHtml());
|
||||||
|
emit('update:getText', editor.getText());
|
||||||
|
};
|
||||||
|
// 页面销毁时
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
const editor = editorRef.value;
|
||||||
|
if (editor == null) return;
|
||||||
|
editor.destroy();
|
||||||
|
});
|
||||||
|
// 监听是否禁用改变
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I4LM7I
|
||||||
|
watch(
|
||||||
|
() => props.disable,
|
||||||
|
(bool) => {
|
||||||
|
const editor = editorRef.value;
|
||||||
|
if (editor == null) return;
|
||||||
|
bool ? editor.disable() : editor.enable();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 监听双向绑定值改变，用于回显
|
||||||
|
watch(
|
||||||
|
() => props.getHtml,
|
||||||
|
(val) => {
|
||||||
|
state.editorVal = val;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,252 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="icon-selector w100 h100">
|
<div class="icon-selector w100 h100">
|
||||||
|
<el-input
|
||||||
|
v-model="state.fontIconSearch"
|
||||||
|
:placeholder="state.fontIconPlaceholder"
|
||||||
|
:clearable="clearable"
|
||||||
|
:disabled="disabled"
|
||||||
|
:size="size"
|
||||||
|
ref="inputWidthRef"
|
||||||
|
@clear="onClearFontIcon"
|
||||||
|
@focus="onIconFocus"
|
||||||
|
@blur="onIconBlur"
|
||||||
|
>
|
||||||
|
<template #prepend>
|
||||||
|
<SvgIcon
|
||||||
|
:name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix"
|
||||||
|
class="font14"
|
||||||
|
v-if="state.fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : state.fontIconPrefix?.indexOf('ele-') > -1"
|
||||||
|
/>
|
||||||
|
<i v-else :class="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14"></i>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
:width="fontIconWidth"
|
:width="state.fontIconWidth"
|
||||||
trigger="click"
|
|
||||||
transition="el-zoom-in-top"
|
transition="el-zoom-in-top"
|
||||||
popper-class="icon-selector-popper"
|
popper-class="icon-selector-popper"
|
||||||
@show="onPopoverShow"
|
trigger="click"
|
||||||
|
:virtual-ref="inputWidthRef"
|
||||||
|
virtual-triggering
|
||||||
>
|
>
|
||||||
<template #reference>
|
|
||||||
<el-input
|
|
||||||
v-model="fontIconSearch"
|
|
||||||
:placeholder="fontIconPlaceholder"
|
|
||||||
:clearable="clearable"
|
|
||||||
:disabled="disabled"
|
|
||||||
:size="size"
|
|
||||||
ref="inputWidthRef"
|
|
||||||
@clear="onClearFontIcon"
|
|
||||||
@focus="onIconFocus"
|
|
||||||
@blur="onIconBlur"
|
|
||||||
>
|
|
||||||
<template #prepend>
|
|
||||||
<SvgIcon
|
|
||||||
:name="fontIconPrefix === '' ? prepend : fontIconPrefix"
|
|
||||||
class="font14"
|
|
||||||
v-if="fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : fontIconPrefix?.indexOf('ele-') > -1"
|
|
||||||
/>
|
|
||||||
<i v-else :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</template>
|
|
||||||
<template #default>
|
<template #default>
|
||||||
<div class="icon-selector-warp">
|
<div class="icon-selector-warp">
|
||||||
<div class="icon-selector-warp-title flex">
|
<div class="icon-selector-warp-title">{{ title }}</div>
|
||||||
<div class="flex-auto">{{ title }}</div>
|
<el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
|
||||||
<div class="icon-selector-warp-title-tab" v-if="type === 'all'">
|
<el-tab-pane lazy label="ali" name="ali">
|
||||||
<span :class="{ 'span-active': fontIconType === 'ali' }" @click="onIconChange('ali')" class="ml10" title="iconfont 图标">ali</span>
|
<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
|
||||||
<span :class="{ 'span-active': fontIconType === 'ele' }" @click="onIconChange('ele')" class="ml10" title="elementPlus 图标">ele</span>
|
</el-tab-pane>
|
||||||
<span :class="{ 'span-active': fontIconType === 'awe' }" @click="onIconChange('awe')" class="ml10" title="fontawesome 图标">awe</span>
|
<el-tab-pane lazy label="ele" name="ele">
|
||||||
</div>
|
<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
|
||||||
</div>
|
</el-tab-pane>
|
||||||
<div class="icon-selector-warp-row">
|
<el-tab-pane lazy label="awe" name="awe">
|
||||||
<el-scrollbar ref="selectorScrollbarRef">
|
<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
|
||||||
<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
|
</el-tab-pane>
|
||||||
<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
|
</el-tabs>
|
||||||
<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">
|
|
||||||
<div class="flex-margin">
|
|
||||||
<div class="icon-selector-warp-item-value">
|
|
||||||
<SvgIcon :name="v" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0" :description="emptyDescription"></el-empty>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="iconSelector">
|
||||||
import { ref, toRefs, reactive, onMounted, nextTick, computed, watch, defineComponent } from 'vue';
|
import { defineAsyncComponent, ref, reactive, onMounted, nextTick, computed, watch } from 'vue';
|
||||||
|
import type { TabsPaneContext } from 'element-plus';
|
||||||
import initIconfont from '/@/utils/getStyleSheets';
|
import initIconfont from '/@/utils/getStyleSheets';
|
||||||
|
import '/@/theme/iconSelector.scss';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'iconSelector',
|
const props = defineProps({
|
||||||
emits: ['update:modelValue', 'get', 'clear'],
|
// 输入框前置内容
|
||||||
props: {
|
prepend: {
|
||||||
// 输入框前置内容
|
type: String,
|
||||||
prepend: {
|
default: () => 'ele-Pointer',
|
||||||
type: String,
|
|
||||||
default: () => 'ele-Pointer',
|
|
||||||
},
|
|
||||||
// 输入框占位文本
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: () => '请输入内容搜索图标或者选择图标',
|
|
||||||
},
|
|
||||||
// 输入框占位文本
|
|
||||||
size: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'default',
|
|
||||||
},
|
|
||||||
// 弹窗标题
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: () => '请选择图标',
|
|
||||||
},
|
|
||||||
// icon 图标类型
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'ele',
|
|
||||||
},
|
|
||||||
// 禁用
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => false,
|
|
||||||
},
|
|
||||||
// 是否可清空
|
|
||||||
clearable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => true,
|
|
||||||
},
|
|
||||||
// 自定义空状态描述文字
|
|
||||||
emptyDescription: {
|
|
||||||
type: String,
|
|
||||||
default: () => '无相关图标',
|
|
||||||
},
|
|
||||||
// 双向绑定值，默认为 modelValue，
|
|
||||||
// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
|
||||||
// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
|
|
||||||
modelValue: String,
|
|
||||||
},
|
},
|
||||||
setup(props, { emit }) {
|
// 输入框占位文本
|
||||||
const inputWidthRef = ref();
|
placeholder: {
|
||||||
const selectorScrollbarRef = ref();
|
type: String,
|
||||||
const state = reactive({
|
default: () => '请输入内容搜索图标或者选择图标',
|
||||||
fontIconPrefix: '',
|
},
|
||||||
fontIconWidth: 0,
|
// 输入框占位文本
|
||||||
fontIconSearch: '',
|
size: {
|
||||||
fontIconTabsIndex: 0,
|
type: String,
|
||||||
fontIconSheetsList: [],
|
default: () => 'default',
|
||||||
fontIconPlaceholder: '',
|
},
|
||||||
fontIconType: 'ali',
|
// 弹窗标题
|
||||||
fontIconShow: true,
|
title: {
|
||||||
});
|
type: String,
|
||||||
// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
|
default: () => '请选择图标',
|
||||||
const onIconFocus = () => {
|
},
|
||||||
if (!props.modelValue) return false;
|
// 禁用
|
||||||
state.fontIconSearch = '';
|
disabled: {
|
||||||
state.fontIconPlaceholder = props.modelValue;
|
type: Boolean,
|
||||||
};
|
default: () => false,
|
||||||
// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
|
},
|
||||||
const onIconBlur = () => {
|
// 是否可清空
|
||||||
setTimeout(() => {
|
clearable: {
|
||||||
const icon = state.fontIconSheetsList.filter((icon: string) => icon === state.fontIconSearch);
|
type: Boolean,
|
||||||
if (icon.length <= 0) state.fontIconSearch = '';
|
default: () => true,
|
||||||
}, 300);
|
},
|
||||||
};
|
// 自定义空状态描述文字
|
||||||
// 处理 icon 双向绑定数值回显
|
emptyDescription: {
|
||||||
const initModeValueEcho = () => {
|
type: String,
|
||||||
if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
|
default: () => '无相关图标',
|
||||||
(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
|
},
|
||||||
(<string | undefined>state.fontIconPrefix) = props.modelValue;
|
// 双向绑定值，默认为 modelValue，
|
||||||
};
|
// 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
|
||||||
// 处理 icon type 类型为 all 时，类型 ali、ele、awe 回显问题
|
// 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
|
||||||
const initFontIconTypeEcho = () => {
|
modelValue: String,
|
||||||
if ((<any>props.modelValue)?.indexOf('iconfont') > -1) onIconChange('ali');
|
});
|
||||||
else if ((<any>props.modelValue)?.indexOf('ele-') > -1) onIconChange('ele');
|
|
||||||
else if ((<any>props.modelValue)?.indexOf('fa') > -1) onIconChange('awe');
|
|
||||||
else onIconChange('ali');
|
|
||||||
};
|
|
||||||
// 图标搜索及图标数据显示
|
|
||||||
const fontIconSheetsFilterList = computed(() => {
|
|
||||||
if (!state.fontIconSearch) return state.fontIconSheetsList;
|
|
||||||
let search = state.fontIconSearch.trim().toLowerCase();
|
|
||||||
return state.fontIconSheetsList.filter((item: any) => {
|
|
||||||
if (item.toLowerCase().indexOf(search) !== -1) return item;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 获取 input 的宽度
|
|
||||||
const getInputWidth = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 监听页面宽度改变
|
|
||||||
const initResize = () => {
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
getInputWidth();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 初始化数据
|
|
||||||
const initFontIconData = async (type: string) => {
|
|
||||||
state.fontIconSheetsList = [];
|
|
||||||
if (type === 'ali') {
|
|
||||||
await initIconfont.ali().then((res: any) => {
|
|
||||||
// 阿里字体图标使用 `iconfont xxx`
|
|
||||||
state.fontIconSheetsList = res.map((i: string) => `iconfont ${i}`);
|
|
||||||
});
|
|
||||||
} else if (type === 'ele') {
|
|
||||||
await initIconfont.ele().then((res: any) => {
|
|
||||||
state.fontIconSheetsList = res;
|
|
||||||
});
|
|
||||||
} else if (type === 'awe') {
|
|
||||||
await initIconfont.awe().then((res: any) => {
|
|
||||||
// fontawesome字体图标使用 `fa xxx`
|
|
||||||
state.fontIconSheetsList = res.map((i: string) => `fa ${i}`);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// 初始化 input 的 placeholder
|
|
||||||
// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
|
|
||||||
state.fontIconPlaceholder = props.placeholder;
|
|
||||||
// 初始化双向绑定回显
|
|
||||||
initModeValueEcho();
|
|
||||||
};
|
|
||||||
// 图标点击切换
|
|
||||||
const onIconChange = (type: string) => {
|
|
||||||
state.fontIconType = type;
|
|
||||||
initFontIconData(type);
|
|
||||||
};
|
|
||||||
// 获取当前点击的 icon 图标
|
|
||||||
const onColClick = (v: any) => {
|
|
||||||
state.fontIconPlaceholder = v;
|
|
||||||
state.fontIconPrefix = v;
|
|
||||||
emit('get', state.fontIconPrefix);
|
|
||||||
emit('update:modelValue', state.fontIconPrefix);
|
|
||||||
};
|
|
||||||
// 清空当前点击的 icon 图标
|
|
||||||
const onClearFontIcon = () => {
|
|
||||||
state.fontIconPrefix = '';
|
|
||||||
emit('clear', state.fontIconPrefix);
|
|
||||||
emit('update:modelValue', state.fontIconPrefix);
|
|
||||||
};
|
|
||||||
// 监听 Popover 打开，用于双向绑定值回显
|
|
||||||
const onPopoverShow = () => {
|
|
||||||
initModeValueEcho();
|
|
||||||
initFontIconTypeEcho();
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initModeValueEcho();
|
|
||||||
initResize();
|
|
||||||
getInputWidth();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 监听双向绑定 modelValue 的变化
|
// 定义子组件向父组件传值/事件
|
||||||
watch(
|
const emit = defineEmits(['update:modelValue', 'get', 'clear']);
|
||||||
() => props.modelValue,
|
|
||||||
() => {
|
// 引入组件
|
||||||
initModeValueEcho();
|
const IconList = defineAsyncComponent(() => import('/@/components/iconSelector/list.vue'));
|
||||||
}
|
|
||||||
);
|
// 定义变量内容
|
||||||
return {
|
const inputWidthRef = ref();
|
||||||
inputWidthRef,
|
const state = reactive({
|
||||||
selectorScrollbarRef,
|
fontIconPrefix: '',
|
||||||
fontIconSheetsFilterList,
|
fontIconWidth: 0,
|
||||||
onColClick,
|
fontIconSearch: '',
|
||||||
onIconChange,
|
fontIconPlaceholder: '',
|
||||||
onClearFontIcon,
|
fontIconTabActive: 'ali',
|
||||||
onIconFocus,
|
fontIconList: {
|
||||||
onIconBlur,
|
ali: [],
|
||||||
onPopoverShow,
|
ele: [],
|
||||||
...toRefs(state),
|
awe: [],
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
|
||||||
|
const onIconFocus = () => {
|
||||||
|
if (!props.modelValue) return false;
|
||||||
|
state.fontIconSearch = '';
|
||||||
|
state.fontIconPlaceholder = props.modelValue;
|
||||||
|
};
|
||||||
|
// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
|
||||||
|
const onIconBlur = () => {
|
||||||
|
const list = fontIconTabNameList();
|
||||||
|
setTimeout(() => {
|
||||||
|
const icon = list.filter((icon: string) => icon === state.fontIconSearch);
|
||||||
|
if (icon.length <= 0) state.fontIconSearch = '';
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
// 图标搜索及图标数据显示
|
||||||
|
const fontIconSheetsFilterList = computed(() => {
|
||||||
|
const list = fontIconTabNameList();
|
||||||
|
if (!state.fontIconSearch) return list;
|
||||||
|
let search = state.fontIconSearch.trim().toLowerCase();
|
||||||
|
return list.filter((item: string) => {
|
||||||
|
if (item.toLowerCase().indexOf(search) !== -1) return item;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 根据 tab name 类型设置图标
|
||||||
|
const fontIconTabNameList = () => {
|
||||||
|
let iconList: any = [];
|
||||||
|
if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
|
||||||
|
else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
|
||||||
|
else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
|
||||||
|
return iconList;
|
||||||
|
};
|
||||||
|
// 处理 icon 双向绑定数值回显
|
||||||
|
const initModeValueEcho = () => {
|
||||||
|
if (props.modelValue === '') return ((<string | undefined>state.fontIconPlaceholder) = props.placeholder);
|
||||||
|
(<string | undefined>state.fontIconPlaceholder) = props.modelValue;
|
||||||
|
(<string | undefined>state.fontIconPrefix) = props.modelValue;
|
||||||
|
};
|
||||||
|
// 处理 icon 类型，用于回显时，tab 高亮与初始化数据
|
||||||
|
const initFontIconName = () => {
|
||||||
|
let name = 'ali';
|
||||||
|
if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
|
||||||
|
else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
|
||||||
|
else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
|
||||||
|
// 初始化 tab 高亮回显
|
||||||
|
state.fontIconTabActive = name;
|
||||||
|
return name;
|
||||||
|
};
|
||||||
|
// 初始化数据
|
||||||
|
const initFontIconData = async (name: string) => {
|
||||||
|
if (name === 'ali') {
|
||||||
|
// 阿里字体图标使用 `iconfont xxx`
|
||||||
|
if (state.fontIconList.ali.length > 0) return;
|
||||||
|
await initIconfont.ali().then((res: any) => {
|
||||||
|
state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
|
||||||
|
});
|
||||||
|
} else if (name === 'ele') {
|
||||||
|
// element plus 图标
|
||||||
|
if (state.fontIconList.ele.length > 0) return;
|
||||||
|
await initIconfont.ele().then((res: any) => {
|
||||||
|
state.fontIconList.ele = res;
|
||||||
|
});
|
||||||
|
} else if (name === 'awe') {
|
||||||
|
// fontawesome字体图标使用 `fa xxx`
|
||||||
|
if (state.fontIconList.awe.length > 0) return;
|
||||||
|
await initIconfont.awe().then((res: any) => {
|
||||||
|
state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 初始化 input 的 placeholder
|
||||||
|
// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
|
||||||
|
state.fontIconPlaceholder = props.placeholder;
|
||||||
|
// 初始化双向绑定回显
|
||||||
|
initModeValueEcho();
|
||||||
|
};
|
||||||
|
// 图标点击切换
|
||||||
|
const onIconClick = (pane: TabsPaneContext) => {
|
||||||
|
initFontIconData(pane.paneName as string);
|
||||||
|
inputWidthRef.value.focus();
|
||||||
|
};
|
||||||
|
// 获取当前点击的 icon 图标
|
||||||
|
const onColClick = (v: string) => {
|
||||||
|
state.fontIconPlaceholder = v;
|
||||||
|
state.fontIconPrefix = v;
|
||||||
|
emit('get', state.fontIconPrefix);
|
||||||
|
emit('update:modelValue', state.fontIconPrefix);
|
||||||
|
inputWidthRef.value.focus();
|
||||||
|
};
|
||||||
|
// 清空当前点击的 icon 图标
|
||||||
|
const onClearFontIcon = () => {
|
||||||
|
state.fontIconPrefix = '';
|
||||||
|
emit('clear', state.fontIconPrefix);
|
||||||
|
emit('update:modelValue', state.fontIconPrefix);
|
||||||
|
};
|
||||||
|
// 获取 input 的宽度
|
||||||
|
const getInputWidth = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 监听页面宽度改变
|
||||||
|
const initResize = () => {
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
getInputWidth();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initFontIconData(initFontIconName());
|
||||||
|
initResize();
|
||||||
|
getInputWidth();
|
||||||
|
});
|
||||||
|
// 监听双向绑定 modelValue 的变化
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
() => {
|
||||||
|
initModeValueEcho();
|
||||||
|
initFontIconName();
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
84
web/src/components/iconSelector/list.vue
Normal file
84
web/src/components/iconSelector/list.vue
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div class="icon-selector-warp-row">
|
||||||
|
<el-scrollbar ref="selectorScrollbarRef">
|
||||||
|
<el-row :gutter="10" v-if="props.list.length > 0">
|
||||||
|
<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" v-for="(v, k) in list" :key="k" @click="onColClick(v)">
|
||||||
|
<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': prefix === v }">
|
||||||
|
<SvgIcon :name="v" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-empty :image-size="100" v-if="list.length <= 0" :description="empty"></el-empty>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="iconSelectorList">
|
||||||
|
// 定义父组件传过来的值
|
||||||
|
const props = defineProps({
|
||||||
|
// 图标列表数据
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 自定义空状态描述文字
|
||||||
|
empty: {
|
||||||
|
type: String,
|
||||||
|
default: () => '无相关图标',
|
||||||
|
},
|
||||||
|
// 高亮当前选中图标
|
||||||
|
prefix: {
|
||||||
|
type: String,
|
||||||
|
default: () => '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义子组件向父组件传值/事件
|
||||||
|
const emit = defineEmits(['get-icon']);
|
||||||
|
|
||||||
|
// 当前 icon 图标点击时
|
||||||
|
const onColClick = (v: unknown | string) => {
|
||||||
|
emit('get-icon', v);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.icon-selector-warp-row {
|
||||||
|
height: 230px;
|
||||||
|
overflow: hidden;
|
||||||
|
.el-row {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
.el-scrollbar__bar.is-horizontal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.icon-selector-warp-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
height: 30px;
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: var(--el-color-primary-light-9);
|
||||||
|
border: 1px solid var(--el-color-primary-light-5);
|
||||||
|
i {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-selector-active {
|
||||||
|
background-color: var(--el-color-primary-light-9);
|
||||||
|
border: 1px solid var(--el-color-primary-light-5);
|
||||||
|
i {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!isMode">
|
<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!state.isMode">
|
||||||
<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
|
<div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
|
||||||
<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
|
<i v-if="leftIcon" class="notice-bar-warp-left-icon" :class="leftIcon"></i>
|
||||||
<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
|
<div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
|
||||||
@@ -11,139 +11,135 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="noticeBar">
|
||||||
import { toRefs, reactive, defineComponent, ref, onMounted, nextTick } from 'vue';
|
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'noticeBar',
|
const props = defineProps({
|
||||||
props: {
|
// 通知栏模式，可选值为 closeable link
|
||||||
// 通知栏模式，可选值为 closeable link
|
mode: {
|
||||||
mode: {
|
type: String,
|
||||||
type: String,
|
default: () => '',
|
||||||
default: () => '',
|
|
||||||
},
|
|
||||||
// 通知文本内容
|
|
||||||
text: {
|
|
||||||
type: String,
|
|
||||||
default: () => '',
|
|
||||||
},
|
|
||||||
// 通知文本颜色
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'var(--el-color-warning)',
|
|
||||||
},
|
|
||||||
// 通知背景色
|
|
||||||
background: {
|
|
||||||
type: String,
|
|
||||||
default: () => 'var(--el-color-warning-light-9)',
|
|
||||||
},
|
|
||||||
// 字体大小，单位px
|
|
||||||
size: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: () => 14,
|
|
||||||
},
|
|
||||||
// 通知栏高度，单位px
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 40,
|
|
||||||
},
|
|
||||||
// 动画延迟时间 (s)
|
|
||||||
delay: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 1,
|
|
||||||
},
|
|
||||||
// 滚动速率 (px/s)
|
|
||||||
speed: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 100,
|
|
||||||
},
|
|
||||||
// 是否开启垂直滚动
|
|
||||||
scrollable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => false,
|
|
||||||
},
|
|
||||||
// 自定义左侧图标
|
|
||||||
leftIcon: {
|
|
||||||
type: String,
|
|
||||||
default: () => '',
|
|
||||||
},
|
|
||||||
// 自定义右侧图标
|
|
||||||
rightIcon: {
|
|
||||||
type: String,
|
|
||||||
default: () => '',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
setup(props, { emit }) {
|
// 通知文本内容
|
||||||
const noticeBarWarpRef = ref();
|
text: {
|
||||||
const noticeBarTextRef = ref();
|
type: String,
|
||||||
const state = reactive({
|
default: () => '',
|
||||||
order: 1,
|
|
||||||
oneTime: 0,
|
|
||||||
twoTime: 0,
|
|
||||||
warpOWidth: 0,
|
|
||||||
textOWidth: 0,
|
|
||||||
isMode: false,
|
|
||||||
});
|
|
||||||
// 初始化 animation 各项参数
|
|
||||||
const initAnimation = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
|
||||||
state.textOWidth = noticeBarTextRef.value.offsetWidth;
|
|
||||||
document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
|
|
||||||
document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
|
|
||||||
computeAnimationTime();
|
|
||||||
setTimeout(() => {
|
|
||||||
changeAnimation();
|
|
||||||
}, props.delay * 1000);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 计算 animation 滚动时长
|
|
||||||
const computeAnimationTime = () => {
|
|
||||||
state.oneTime = state.textOWidth / props.speed;
|
|
||||||
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
|
|
||||||
};
|
|
||||||
// 改变 animation 动画调用
|
|
||||||
const changeAnimation = () => {
|
|
||||||
if (state.order === 1) {
|
|
||||||
noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
|
|
||||||
state.order = 2;
|
|
||||||
} else {
|
|
||||||
noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 监听 animation 动画的结束
|
|
||||||
const listenerAnimationend = () => {
|
|
||||||
noticeBarTextRef.value.addEventListener(
|
|
||||||
'animationend',
|
|
||||||
() => {
|
|
||||||
changeAnimation();
|
|
||||||
},
|
|
||||||
false
|
|
||||||
);
|
|
||||||
};
|
|
||||||
// 右侧 icon 图标点击
|
|
||||||
const onRightIconClick = () => {
|
|
||||||
if (!props.mode) return false;
|
|
||||||
if (props.mode === 'closeable') {
|
|
||||||
state.isMode = true;
|
|
||||||
emit('close');
|
|
||||||
} else if (props.mode === 'link') {
|
|
||||||
emit('link');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.scrollable) return false;
|
|
||||||
initAnimation();
|
|
||||||
listenerAnimationend();
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
noticeBarWarpRef,
|
|
||||||
noticeBarTextRef,
|
|
||||||
onRightIconClick,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
// 通知文本颜色
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'var(--el-color-warning)',
|
||||||
|
},
|
||||||
|
// 通知背景色
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: () => 'var(--el-color-warning-light-9)',
|
||||||
|
},
|
||||||
|
// 字体大小，单位px
|
||||||
|
size: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: () => 14,
|
||||||
|
},
|
||||||
|
// 通知栏高度，单位px
|
||||||
|
height: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 40,
|
||||||
|
},
|
||||||
|
// 动画延迟时间 (s)
|
||||||
|
delay: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 1,
|
||||||
|
},
|
||||||
|
// 滚动速率 (px/s)
|
||||||
|
speed: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 100,
|
||||||
|
},
|
||||||
|
// 是否开启垂直滚动
|
||||||
|
scrollable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => false,
|
||||||
|
},
|
||||||
|
// 自定义左侧图标
|
||||||
|
leftIcon: {
|
||||||
|
type: String,
|
||||||
|
default: () => '',
|
||||||
|
},
|
||||||
|
// 自定义右侧图标
|
||||||
|
rightIcon: {
|
||||||
|
type: String,
|
||||||
|
default: () => '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义子组件向父组件传值/事件
|
||||||
|
const emit = defineEmits(['close', 'link']);
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const noticeBarWarpRef = ref();
|
||||||
|
const noticeBarTextRef = ref();
|
||||||
|
const state = reactive({
|
||||||
|
order: 1,
|
||||||
|
oneTime: 0,
|
||||||
|
twoTime: 0,
|
||||||
|
warpOWidth: 0,
|
||||||
|
textOWidth: 0,
|
||||||
|
isMode: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化 animation 各项参数
|
||||||
|
const initAnimation = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
|
||||||
|
state.textOWidth = noticeBarTextRef.value.offsetWidth;
|
||||||
|
document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
|
||||||
|
document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
|
||||||
|
computeAnimationTime();
|
||||||
|
setTimeout(() => {
|
||||||
|
changeAnimation();
|
||||||
|
}, props.delay * 1000);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 计算 animation 滚动时长
|
||||||
|
const computeAnimationTime = () => {
|
||||||
|
state.oneTime = state.textOWidth / props.speed;
|
||||||
|
state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
|
||||||
|
};
|
||||||
|
// 改变 animation 动画调用
|
||||||
|
const changeAnimation = () => {
|
||||||
|
if (state.order === 1) {
|
||||||
|
noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
|
||||||
|
state.order = 2;
|
||||||
|
} else {
|
||||||
|
noticeBarTextRef.value.style.cssText = `animation: twoAnimation ${state.twoTime}s linear infinite; opacity: 1;`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 监听 animation 动画的结束
|
||||||
|
const listenerAnimationend = () => {
|
||||||
|
noticeBarTextRef.value.addEventListener(
|
||||||
|
'animationend',
|
||||||
|
() => {
|
||||||
|
changeAnimation();
|
||||||
|
},
|
||||||
|
false
|
||||||
|
);
|
||||||
|
};
|
||||||
|
// 右侧 icon 图标点击
|
||||||
|
const onRightIconClick = () => {
|
||||||
|
if (!props.mode) return false;
|
||||||
|
if (props.mode === 'closeable') {
|
||||||
|
state.isMode = true;
|
||||||
|
emit('close');
|
||||||
|
} else if (props.mode === 'link') {
|
||||||
|
emit('link');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.scrollable) return false;
|
||||||
|
initAnimation();
|
||||||
|
listenerAnimationend();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -8,66 +8,56 @@
|
|||||||
<i v-else :class="getIconName" :style="setIconSvgStyle" />
|
<i v-else :class="getIconName" :style="setIconSvgStyle" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="svgIcon">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'svgIcon',
|
const props = defineProps({
|
||||||
props: {
|
// svg 图标组件名字
|
||||||
// svg 图标组件名字
|
name: {
|
||||||
name: {
|
type: String,
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
// svg 大小
|
|
||||||
size: {
|
|
||||||
type: Number,
|
|
||||||
default: () => 14,
|
|
||||||
},
|
|
||||||
// svg 颜色
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
setup(props) {
|
// svg 大小
|
||||||
// 在线链接、本地引入地址前缀
|
size: {
|
||||||
const linesString = ['https', 'http', '/src', '/assets', import.meta.env.VITE_PUBLIC_PATH];
|
type: Number,
|
||||||
|
default: () => 14,
|
||||||
// 获取 icon 图标名称
|
},
|
||||||
const getIconName = computed(() => {
|
// svg 颜色
|
||||||
return props?.name;
|
color: {
|
||||||
});
|
type: String,
|
||||||
// 用于判断 element plus 自带 svg 图标的显示、隐藏
|
|
||||||
const isShowIconSvg = computed(() => {
|
|
||||||
return props?.name?.startsWith('ele-');
|
|
||||||
});
|
|
||||||
// 用于判断在线链接、本地引入等图标显示、隐藏
|
|
||||||
const isShowIconImg = computed(() => {
|
|
||||||
return linesString.find((str) => props.name?.startsWith(str));
|
|
||||||
});
|
|
||||||
// 设置图标样式
|
|
||||||
const setIconSvgStyle = computed(() => {
|
|
||||||
return `font-size: ${props.size}px;color: ${props.color};`;
|
|
||||||
});
|
|
||||||
// 设置图片样式
|
|
||||||
const setIconImgOutStyle = computed(() => {
|
|
||||||
return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
|
|
||||||
});
|
|
||||||
// 设置图片样式
|
|
||||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
|
|
||||||
const setIconSvgInsStyle = computed(() => {
|
|
||||||
const filterStyle: string[] = [];
|
|
||||||
const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
|
|
||||||
compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
|
|
||||||
return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
getIconName,
|
|
||||||
isShowIconSvg,
|
|
||||||
isShowIconImg,
|
|
||||||
setIconSvgStyle,
|
|
||||||
setIconImgOutStyle,
|
|
||||||
setIconSvgInsStyle,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 在线链接、本地引入地址前缀
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I62OVL
|
||||||
|
const linesString = ['https', 'http', '/src', '/assets', 'data:image', import.meta.env.VITE_PUBLIC_PATH];
|
||||||
|
|
||||||
|
// 获取 icon 图标名称
|
||||||
|
const getIconName = computed(() => {
|
||||||
|
return props?.name;
|
||||||
|
});
|
||||||
|
// 用于判断 element plus 自带 svg 图标的显示、隐藏
|
||||||
|
const isShowIconSvg = computed(() => {
|
||||||
|
return props?.name?.startsWith('ele-');
|
||||||
|
});
|
||||||
|
// 用于判断在线链接、本地引入等图标显示、隐藏
|
||||||
|
const isShowIconImg = computed(() => {
|
||||||
|
return linesString.find((str) => props.name?.startsWith(str));
|
||||||
|
});
|
||||||
|
// 设置图标样式
|
||||||
|
const setIconSvgStyle = computed(() => {
|
||||||
|
return `font-size: ${props.size}px;color: ${props.color};`;
|
||||||
|
});
|
||||||
|
// 设置图片样式
|
||||||
|
const setIconImgOutStyle = computed(() => {
|
||||||
|
return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
|
||||||
|
});
|
||||||
|
// 设置图片样式
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I59ND0
|
||||||
|
const setIconSvgInsStyle = computed(() => {
|
||||||
|
const filterStyle: string[] = [];
|
||||||
|
const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz'];
|
||||||
|
compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`));
|
||||||
|
return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
256
web/src/components/table/index.vue
Normal file
256
web/src/components/table/index.vue
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
<template>
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table
|
||||||
|
:data="data"
|
||||||
|
:border="setBorder"
|
||||||
|
v-bind="$attrs"
|
||||||
|
row-key="id"
|
||||||
|
stripe
|
||||||
|
style="width: 100%"
|
||||||
|
v-loading="config.loading"
|
||||||
|
@selection-change="onSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" :reserve-selection="true" width="30" v-if="config.isSelection" />
|
||||||
|
<el-table-column type="index" label="序号" width="60" v-if="config.isSerialNo" />
|
||||||
|
<el-table-column
|
||||||
|
v-for="(item, index) in setHeader"
|
||||||
|
:key="index"
|
||||||
|
show-overflow-tooltip
|
||||||
|
:prop="item.key"
|
||||||
|
:width="item.colWidth"
|
||||||
|
:label="item.title"
|
||||||
|
>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<template v-if="item.type === 'image'">
|
||||||
|
<img :src="scope.row[item.key]" :width="item.width" :height="item.height" />
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{ scope.row[item.key] }}
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="100" v-if="config.isOperate">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-popconfirm title="确定删除吗？" @confirm="onDelRow(scope.row)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button text type="primary">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template #empty>
|
||||||
|
<el-empty description="暂无数据" />
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
<div class="table-footer mt15">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="state.page.pageNum"
|
||||||
|
v-model:page-size="state.page.pageSize"
|
||||||
|
:pager-count="5"
|
||||||
|
:page-sizes="[10, 20, 30]"
|
||||||
|
:total="config.total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
background
|
||||||
|
@size-change="onHandleSizeChange"
|
||||||
|
@current-change="onHandleCurrentChange"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
<div class="table-footer-tool">
|
||||||
|
<SvgIcon name="iconfont icon-yunxiazai_o" :size="22" title="导出" @click="onImportTable" />
|
||||||
|
<SvgIcon name="iconfont icon-shuaxin" :size="22" title="刷新" @click="onRefreshTable" />
|
||||||
|
<el-popover
|
||||||
|
placement="top-end"
|
||||||
|
trigger="click"
|
||||||
|
transition="el-zoom-in-top"
|
||||||
|
popper-class="table-tool-popper"
|
||||||
|
:width="300"
|
||||||
|
:persistent="false"
|
||||||
|
@show="onSetTable"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<SvgIcon name="iconfont icon-quanjushezhi_o" :size="22" title="设置" />
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<div class="tool-box">
|
||||||
|
<el-tooltip content="拖动进行排序" placement="top-start">
|
||||||
|
<SvgIcon name="fa fa-question-circle-o" :size="17" class="ml11" color="#909399" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-checkbox
|
||||||
|
v-model="state.checkListAll"
|
||||||
|
:indeterminate="state.checkListIndeterminate"
|
||||||
|
class="ml10 mr1"
|
||||||
|
label="列显示"
|
||||||
|
@change="onCheckAllChange"
|
||||||
|
/>
|
||||||
|
<el-checkbox v-model="getConfig.isSerialNo" class="ml12 mr1" label="序号" />
|
||||||
|
<el-checkbox v-model="getConfig.isSelection" class="ml12 mr1" label="多选" />
|
||||||
|
</div>
|
||||||
|
<el-scrollbar>
|
||||||
|
<div ref="toolSetRef" class="tool-sortable">
|
||||||
|
<div class="tool-sortable-item" v-for="v in header" :key="v.key" :data-key="v.key">
|
||||||
|
<i class="fa fa-arrows-alt handle cursor-pointer"></i>
|
||||||
|
<el-checkbox v-model="v.isCheck" size="default" class="ml12 mr8" :label="v.title" @change="onCheckChange" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="netxTable">
|
||||||
|
import { reactive, computed, nextTick, ref } from 'vue';
|
||||||
|
import { ElMessage } from 'element-plus';
|
||||||
|
import table2excel from 'js-table2excel';
|
||||||
|
import Sortable from 'sortablejs';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
|
import '/@/theme/tableTool.scss';
|
||||||
|
|
||||||
|
// 定义父组件传过来的值
|
||||||
|
const props = defineProps({
|
||||||
|
// 列表内容
|
||||||
|
data: {
|
||||||
|
type: Array<EmptyObjectType>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 表头内容
|
||||||
|
header: {
|
||||||
|
type: Array<EmptyObjectType>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
// 配置项
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义子组件向父组件传值/事件
|
||||||
|
const emit = defineEmits(['delRow', 'pageChange', 'sortHeader']);
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const toolSetRef = ref();
|
||||||
|
const storesThemeConfig = useThemeConfig();
|
||||||
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
|
const state = reactive({
|
||||||
|
page: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
selectlist: [] as EmptyObjectType[],
|
||||||
|
checkListAll: true,
|
||||||
|
checkListIndeterminate: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 设置边框显示/隐藏
|
||||||
|
const setBorder = computed(() => {
|
||||||
|
return props.config.isBorder ? true : false;
|
||||||
|
});
|
||||||
|
// 获取父组件 配置项（必传）
|
||||||
|
const getConfig = computed(() => {
|
||||||
|
return props.config;
|
||||||
|
});
|
||||||
|
// 设置 tool header 数据
|
||||||
|
const setHeader = computed(() => {
|
||||||
|
return props.header.filter((v) => v.isCheck);
|
||||||
|
});
|
||||||
|
// tool 列显示全选改变时
|
||||||
|
const onCheckAllChange = <T>(val: T) => {
|
||||||
|
if (val) props.header.forEach((v) => (v.isCheck = true));
|
||||||
|
else props.header.forEach((v) => (v.isCheck = false));
|
||||||
|
state.checkListIndeterminate = false;
|
||||||
|
};
|
||||||
|
// tool 列显示当前项改变时
|
||||||
|
const onCheckChange = () => {
|
||||||
|
const headers = props.header.filter((v) => v.isCheck).length;
|
||||||
|
state.checkListAll = headers === props.header.length;
|
||||||
|
state.checkListIndeterminate = headers > 0 && headers < props.header.length;
|
||||||
|
};
|
||||||
|
// 表格多选改变时，用于导出
|
||||||
|
const onSelectionChange = (val: EmptyObjectType[]) => {
|
||||||
|
state.selectlist = val;
|
||||||
|
};
|
||||||
|
// 删除当前项
|
||||||
|
const onDelRow = (row: EmptyObjectType) => {
|
||||||
|
emit('delRow', row);
|
||||||
|
};
|
||||||
|
// 分页改变
|
||||||
|
const onHandleSizeChange = (val: number) => {
|
||||||
|
state.page.pageSize = val;
|
||||||
|
emit('pageChange', state.page);
|
||||||
|
};
|
||||||
|
// 分页改变
|
||||||
|
const onHandleCurrentChange = (val: number) => {
|
||||||
|
state.page.pageNum = val;
|
||||||
|
emit('pageChange', state.page);
|
||||||
|
};
|
||||||
|
// 搜索时，分页还原成默认
|
||||||
|
const pageReset = () => {
|
||||||
|
state.page.pageNum = 1;
|
||||||
|
state.page.pageSize = 10;
|
||||||
|
emit('pageChange', state.page);
|
||||||
|
};
|
||||||
|
// 导出
|
||||||
|
const onImportTable = () => {
|
||||||
|
if (state.selectlist.length <= 0) return ElMessage.warning('请先选择要导出的数据');
|
||||||
|
table2excel(props.header, state.selectlist, `${themeConfig.value.globalTitle} ${new Date().toLocaleString()}`);
|
||||||
|
};
|
||||||
|
// 刷新
|
||||||
|
const onRefreshTable = () => {
|
||||||
|
emit('pageChange', state.page);
|
||||||
|
};
|
||||||
|
// 设置
|
||||||
|
const onSetTable = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
const sortable = Sortable.create(toolSetRef.value, {
|
||||||
|
handle: '.handle',
|
||||||
|
dataIdAttr: 'data-key',
|
||||||
|
animation: 150,
|
||||||
|
onEnd: () => {
|
||||||
|
const headerList: EmptyObjectType[] = [];
|
||||||
|
sortable.toArray().forEach((val) => {
|
||||||
|
props.header.forEach((v) => {
|
||||||
|
if (v.key === val) headerList.push({ ...v });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
emit('sortHeader', headerList);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 暴露变量
|
||||||
|
defineExpose({
|
||||||
|
pageReset,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.table-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.el-table {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.table-footer {
|
||||||
|
display: flex;
|
||||||
|
.table-footer-tool {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
&:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
40
web/src/directive/authDirective.ts
Normal file
40
web/src/directive/authDirective.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import type { App } from 'vue';
|
||||||
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
|
import { judementSameArr } from '/@/utils/arrayOperation';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 用户权限指令
|
||||||
|
* @directive 单个权限验证（v-auth="xxx"）
|
||||||
|
* @directive 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
|
||||||
|
* @directive 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
|
||||||
|
*/
|
||||||
|
export function authDirective(app: App) {
|
||||||
|
// 单个权限验证（v-auth="xxx"）
|
||||||
|
app.directive('auth', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
const stores = useUserInfo();
|
||||||
|
if (!stores.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
|
||||||
|
app.directive('auths', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
let flag = false;
|
||||||
|
const stores = useUserInfo();
|
||||||
|
stores.userInfos.authBtnList.map((val: string) => {
|
||||||
|
binding.value.map((v: string) => {
|
||||||
|
if (val === v) flag = true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
if (!flag) el.parentNode.removeChild(el);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
|
||||||
|
app.directive('auth-all', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
const stores = useUserInfo();
|
||||||
|
const flag = judementSameArr(binding.value, stores.userInfos.authBtnList);
|
||||||
|
if (!flag) el.parentNode.removeChild(el);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
178
web/src/directive/customDirective.ts
Normal file
178
web/src/directive/customDirective.ts
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
import type { App } from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 按钮波浪指令
|
||||||
|
* @directive 默认方式：v-waves，如 `<div v-waves></div>`
|
||||||
|
* @directive 参数方式：v-waves=" |light|red|orange|purple|green|teal"，如 `<div v-waves="'light'"></div>`
|
||||||
|
*/
|
||||||
|
export function wavesDirective(app: App) {
|
||||||
|
app.directive('waves', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
el.classList.add('waves-effect');
|
||||||
|
binding.value && el.classList.add(`waves-${binding.value}`);
|
||||||
|
function setConvertStyle(obj: { [key: string]: unknown }) {
|
||||||
|
let style: string = '';
|
||||||
|
for (let i in obj) {
|
||||||
|
if (obj.hasOwnProperty(i)) style += `${i}:${obj[i]};`;
|
||||||
|
}
|
||||||
|
return style;
|
||||||
|
}
|
||||||
|
function onCurrentClick(e: { [key: string]: unknown }) {
|
||||||
|
let elDiv = document.createElement('div');
|
||||||
|
elDiv.classList.add('waves-ripple');
|
||||||
|
el.appendChild(elDiv);
|
||||||
|
let styles = {
|
||||||
|
left: `${e.layerX}px`,
|
||||||
|
top: `${e.layerY}px`,
|
||||||
|
opacity: 1,
|
||||||
|
transform: `scale(${(el.clientWidth / 100) * 10})`,
|
||||||
|
'transition-duration': `750ms`,
|
||||||
|
'transition-timing-function': `cubic-bezier(0.250, 0.460, 0.450, 0.940)`,
|
||||||
|
};
|
||||||
|
elDiv.setAttribute('style', setConvertStyle(styles));
|
||||||
|
setTimeout(() => {
|
||||||
|
elDiv.setAttribute(
|
||||||
|
'style',
|
||||||
|
setConvertStyle({
|
||||||
|
opacity: 0,
|
||||||
|
transform: styles.transform,
|
||||||
|
left: styles.left,
|
||||||
|
top: styles.top,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
setTimeout(() => {
|
||||||
|
elDiv && el.removeChild(elDiv);
|
||||||
|
}, 750);
|
||||||
|
}, 450);
|
||||||
|
}
|
||||||
|
el.addEventListener('mousedown', onCurrentClick, false);
|
||||||
|
},
|
||||||
|
unmounted(el) {
|
||||||
|
el.addEventListener('mousedown', () => {});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 自定义拖动指令
|
||||||
|
* @description 使用方式：v-drag="[dragDom,dragHeader]"，如 `<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']"></div>`
|
||||||
|
* @description dragDom 要拖动的元素，dragHeader 要拖动的 Header 位置
|
||||||
|
* @link 注意：https://github.com/element-plus/element-plus/issues/522
|
||||||
|
* @lick 参考：https://blog.csdn.net/weixin_46391323/article/details/105228020?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-10&spm=1001.2101.3001.4242
|
||||||
|
*/
|
||||||
|
export function dragDirective(app: App) {
|
||||||
|
app.directive('drag', {
|
||||||
|
mounted(el, binding) {
|
||||||
|
if (!binding.value) return false;
|
||||||
|
|
||||||
|
const dragDom = document.querySelector(binding.value[0]) as HTMLElement;
|
||||||
|
const dragHeader = document.querySelector(binding.value[1]) as HTMLElement;
|
||||||
|
|
||||||
|
dragHeader.onmouseover = () => (dragHeader.style.cursor = `move`);
|
||||||
|
|
||||||
|
function down(e: any, type: string) {
|
||||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||||
|
const disX = type === 'pc' ? e.clientX - dragHeader.offsetLeft : e.touches[0].clientX - dragHeader.offsetLeft;
|
||||||
|
const disY = type === 'pc' ? e.clientY - dragHeader.offsetTop : e.touches[0].clientY - dragHeader.offsetTop;
|
||||||
|
|
||||||
|
// body当前宽度
|
||||||
|
const screenWidth = document.body.clientWidth;
|
||||||
|
// 可见区域高度(应为body高度，可某些环境下无法获取)
|
||||||
|
const screenHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
|
// 对话框宽度
|
||||||
|
const dragDomWidth = dragDom.offsetWidth;
|
||||||
|
// 对话框高度
|
||||||
|
const dragDomheight = dragDom.offsetHeight;
|
||||||
|
|
||||||
|
const minDragDomLeft = dragDom.offsetLeft;
|
||||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
|
||||||
|
|
||||||
|
const minDragDomTop = dragDom.offsetTop;
|
||||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
|
||||||
|
|
||||||
|
// 获取到的值带px 正则匹配替换
|
||||||
|
let styL: any = getComputedStyle(dragDom).left;
|
||||||
|
let styT: any = getComputedStyle(dragDom).top;
|
||||||
|
|
||||||
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||||
|
if (styL.includes('%')) {
|
||||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
|
||||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
|
||||||
|
} else {
|
||||||
|
styL = +styL.replace(/\px/g, '');
|
||||||
|
styT = +styT.replace(/\px/g, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
disX,
|
||||||
|
disY,
|
||||||
|
minDragDomLeft,
|
||||||
|
maxDragDomLeft,
|
||||||
|
minDragDomTop,
|
||||||
|
maxDragDomTop,
|
||||||
|
styL,
|
||||||
|
styT,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function move(e: any, type: string, obj: any) {
|
||||||
|
let { disX, disY, minDragDomLeft, maxDragDomLeft, minDragDomTop, maxDragDomTop, styL, styT } = obj;
|
||||||
|
|
||||||
|
// 通过事件委托，计算移动的距离
|
||||||
|
let left = type === 'pc' ? e.clientX - disX : e.touches[0].clientX - disX;
|
||||||
|
let top = type === 'pc' ? e.clientY - disY : e.touches[0].clientY - disY;
|
||||||
|
|
||||||
|
// 边界处理
|
||||||
|
if (-left > minDragDomLeft) {
|
||||||
|
left = -minDragDomLeft;
|
||||||
|
} else if (left > maxDragDomLeft) {
|
||||||
|
left = maxDragDomLeft;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (-top > minDragDomTop) {
|
||||||
|
top = -minDragDomTop;
|
||||||
|
} else if (top > maxDragDomTop) {
|
||||||
|
top = maxDragDomTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动当前元素
|
||||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* pc端
|
||||||
|
* onmousedown 鼠标按下触发事件
|
||||||
|
* onmousemove 鼠标按下时持续触发事件
|
||||||
|
* onmouseup 鼠标抬起触发事件
|
||||||
|
*/
|
||||||
|
dragHeader.onmousedown = (e) => {
|
||||||
|
const obj = down(e, 'pc');
|
||||||
|
document.onmousemove = (e) => {
|
||||||
|
move(e, 'pc', obj);
|
||||||
|
};
|
||||||
|
document.onmouseup = () => {
|
||||||
|
document.onmousemove = null;
|
||||||
|
document.onmouseup = null;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 移动端
|
||||||
|
* ontouchstart 当按下手指时，触发ontouchstart
|
||||||
|
* ontouchmove 当移动手指时，触发ontouchmove
|
||||||
|
* ontouchend 当移走手指时，触发ontouchend
|
||||||
|
*/
|
||||||
|
dragHeader.ontouchstart = (e) => {
|
||||||
|
const obj = down(e, 'app');
|
||||||
|
document.ontouchmove = (e) => {
|
||||||
|
move(e, 'app', obj);
|
||||||
|
};
|
||||||
|
document.ontouchend = () => {
|
||||||
|
document.ontouchmove = null;
|
||||||
|
document.ontouchend = null;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
18
web/src/directive/index.ts
Normal file
18
web/src/directive/index.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import type { App } from 'vue';
|
||||||
|
import { authDirective } from '/@/directive/authDirective';
|
||||||
|
import { wavesDirective, dragDirective } from '/@/directive/customDirective';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导出指令方法：v-xxx
|
||||||
|
* @methods authDirective 用户权限指令，用法：v-auth
|
||||||
|
* @methods wavesDirective 按钮波浪指令，用法：v-waves
|
||||||
|
* @methods dragDirective 自定义拖动指令，用法：v-drag
|
||||||
|
*/
|
||||||
|
export function directive(app: App) {
|
||||||
|
// 用户权限指令
|
||||||
|
authDirective(app);
|
||||||
|
// 按钮波浪指令
|
||||||
|
wavesDirective(app);
|
||||||
|
// 自定义拖动指令
|
||||||
|
dragDirective(app);
|
||||||
|
}
|
||||||
@@ -2,53 +2,53 @@ import { createI18n } from 'vue-i18n';
|
|||||||
import pinia from '/@/stores/index';
|
import pinia from '/@/stores/index';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
|
|
||||||
import enLocale from 'element-plus/lib/locale/lang/en';
|
|
||||||
import zhtwLocale from 'element-plus/lib/locale/lang/zh-tw';
|
|
||||||
|
|
||||||
import nextZhcn from '/@/i18n/lang/zh-cn';
|
|
||||||
import nextEn from '/@/i18n/lang/en';
|
|
||||||
import nextZhtw from '/@/i18n/lang/zh-tw';
|
|
||||||
|
|
||||||
import pagesLoginZhcn from '/@/i18n/pages/login/zh-cn';
|
|
||||||
import pagesLoginEn from '/@/i18n/pages/login/en';
|
|
||||||
import pagesLoginZhtw from '/@/i18n/pages/login/zh-tw';
|
|
||||||
import pagesFormI18nZhcn from '/@/i18n/pages/formI18n/zh-cn';
|
|
||||||
import pagesFormI18nEn from '/@/i18n/pages/formI18n/en';
|
|
||||||
import pagesFormI18nZhtw from '/@/i18n/pages/formI18n/zh-tw';
|
|
||||||
|
|
||||||
// 定义语言国际化内容
|
// 定义语言国际化内容
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 说明：
|
* 说明：
|
||||||
* /src/i18n/lang 下的 ts 为框架的国际化内容
|
* 须在 pages 下新建文件夹（建议 `要国际化界面目录` 与 `i18n 目录` 相同，方便查找），
|
||||||
* /src/i18n/pages 下的 ts 为各界面的国际化内容
|
* 注意国际化定义的字段，不要与原有的定义字段相同。
|
||||||
|
* 1、/src/i18n/lang 下的 ts 为框架的国际化内容
|
||||||
|
* 2、/src/i18n/pages 下的 ts 为各界面的国际化内容
|
||||||
*/
|
*/
|
||||||
const messages = {
|
|
||||||
[zhcnLocale.name]: {
|
// element plus 自带国际化
|
||||||
...zhcnLocale,
|
import enLocale from 'element-plus/lib/locale/lang/en';
|
||||||
message: {
|
import zhcnLocale from 'element-plus/lib/locale/lang/zh-cn';
|
||||||
...nextZhcn,
|
import zhtwLocale from 'element-plus/lib/locale/lang/zh-tw';
|
||||||
...pagesLoginZhcn,
|
|
||||||
...pagesFormI18nZhcn,
|
// 定义变量内容
|
||||||
},
|
const messages = {};
|
||||||
},
|
const element = { en: enLocale, 'zh-cn': zhcnLocale, 'zh-tw': zhtwLocale };
|
||||||
[enLocale.name]: {
|
const itemize = { en: [], 'zh-cn': [], 'zh-tw': [] };
|
||||||
...enLocale,
|
const modules: Record<string, any> = import.meta.glob('./**/*.ts', { eager: true });
|
||||||
message: {
|
|
||||||
...nextEn,
|
// 对自动引入的 modules 进行分类 en、zh-cn、zh-tw
|
||||||
...pagesLoginEn,
|
// https://vitejs.cn/vite3-cn/guide/features.html#glob-import
|
||||||
...pagesFormI18nEn,
|
for (const path in modules) {
|
||||||
},
|
const key = path.match(/(\S+)\/(\S+).ts/);
|
||||||
},
|
if (itemize[key![2]]) itemize[key![2]].push(modules[path].default);
|
||||||
[zhtwLocale.name]: {
|
else itemize[key![2]] = modules[path];
|
||||||
...zhtwLocale,
|
}
|
||||||
message: {
|
|
||||||
...nextZhtw,
|
// 合并数组对象（非标准数组对象，数组中对象的每项 key、value 都不同）
|
||||||
...pagesLoginZhtw,
|
function mergeArrObj<T>(list: T, key: string) {
|
||||||
...pagesFormI18nZhtw,
|
let obj = {};
|
||||||
},
|
list[key].forEach((i: EmptyObjectType) => {
|
||||||
},
|
obj = Object.assign({}, obj, i);
|
||||||
};
|
});
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理最终格式
|
||||||
|
for (const key in itemize) {
|
||||||
|
messages[key] = {
|
||||||
|
name: key,
|
||||||
|
el: element[key].el,
|
||||||
|
message: mergeArrObj(itemize, key),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
// 读取 pinia 默认语言
|
// 读取 pinia 默认语言
|
||||||
const stores = useThemeConfig(pinia);
|
const stores = useThemeConfig(pinia);
|
||||||
@@ -58,7 +58,6 @@ const { themeConfig } = storeToRefs(stores);
|
|||||||
// https://vue-i18n.intlify.dev/guide/essentials/fallback.html#explicit-fallback-with-one-locale
|
// https://vue-i18n.intlify.dev/guide/essentials/fallback.html#explicit-fallback-with-one-locale
|
||||||
export const i18n = createI18n({
|
export const i18n = createI18n({
|
||||||
legacy: false,
|
legacy: false,
|
||||||
globalInjection: true,
|
|
||||||
silentTranslationWarn: true,
|
silentTranslationWarn: true,
|
||||||
missingWarn: false,
|
missingWarn: false,
|
||||||
silentFallbackWarn: true,
|
silentFallbackWarn: true,
|
||||||
|
|||||||
@@ -59,6 +59,7 @@ export default {
|
|||||||
makeSelector: '圖標選擇器',
|
makeSelector: '圖標選擇器',
|
||||||
makeNoticeBar: '滾動通知欄',
|
makeNoticeBar: '滾動通知欄',
|
||||||
makeSvgDemo: 'svgIcon 演示',
|
makeSvgDemo: 'svgIcon 演示',
|
||||||
|
makeTableDemo: '表格封裝演示',
|
||||||
paramsIndex: '路由參數',
|
paramsIndex: '路由參數',
|
||||||
paramsCommon: '普通路由',
|
paramsCommon: '普通路由',
|
||||||
paramsDynamic: '動態路由',
|
paramsDynamic: '動態路由',
|
||||||
@@ -71,8 +72,8 @@ export default {
|
|||||||
personal: '個人中心',
|
personal: '個人中心',
|
||||||
tools: '工具類集合',
|
tools: '工具類集合',
|
||||||
layoutLinkView: '外鏈',
|
layoutLinkView: '外鏈',
|
||||||
layoutIfameView: '内嵌 iframe',
|
layoutIframeViewOne: '内嵌 iframe1',
|
||||||
demo1:'demo1'
|
layoutIframeViewTwo: '内嵌 iframe2',
|
||||||
},
|
},
|
||||||
staticRoutes: {
|
staticRoutes: {
|
||||||
signIn: '登入',
|
signIn: '登入',
|
||||||
@@ -136,10 +137,12 @@ export default {
|
|||||||
twoIsTopBarColorGradual: '頂欄背景漸變',
|
twoIsTopBarColorGradual: '頂欄背景漸變',
|
||||||
twoMenuBar: '選單背景',
|
twoMenuBar: '選單背景',
|
||||||
twoMenuBarColor: '選單默認字體顏色',
|
twoMenuBarColor: '選單默認字體顏色',
|
||||||
|
twoMenuBarActiveColor: '選單高亮背景色',
|
||||||
twoIsMenuBarColorGradual: '選單背景漸變',
|
twoIsMenuBarColorGradual: '選單背景漸變',
|
||||||
twoColumnsMenuBar: '分欄選單背景',
|
twoColumnsMenuBar: '分欄選單背景',
|
||||||
twoColumnsMenuBarColor: '分欄選單默認字體顏色',
|
twoColumnsMenuBarColor: '分欄選單默認字體顏色',
|
||||||
twoIsColumnsMenuBarColorGradual: '分欄選單背景漸變',
|
twoIsColumnsMenuBarColorGradual: '分欄選單背景漸變',
|
||||||
|
twoIsColumnsMenuHoverPreload: '分欄選單滑鼠懸停預加載',
|
||||||
threeTitle: '介面設定',
|
threeTitle: '介面設定',
|
||||||
threeIsCollapse: '選單水准折疊',
|
threeIsCollapse: '選單水准折疊',
|
||||||
threeIsUniqueOpened: '選單手風琴',
|
threeIsUniqueOpened: '選單手風琴',
|
||||||
@@ -178,4 +181,12 @@ export default {
|
|||||||
copyTextSuccess: '複製成功！',
|
copyTextSuccess: '複製成功！',
|
||||||
copyTextError: '複製失敗！',
|
copyTextError: '複製失敗！',
|
||||||
},
|
},
|
||||||
|
upgrade: {
|
||||||
|
title: '新版本陞級',
|
||||||
|
msg: '新版本來啦，馬上更新嘗鮮吧！ 不用擔心，更新很快的哦！',
|
||||||
|
desc: '提示：更新會還原默認配寘',
|
||||||
|
btnOne: '殘忍拒絕',
|
||||||
|
btnTwo: '馬上更新',
|
||||||
|
btnTwoLoading: '更新中',
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -3,161 +3,152 @@
|
|||||||
<el-aside class="layout-aside" :class="setCollapseStyle">
|
<el-aside class="layout-aside" :class="setCollapseStyle">
|
||||||
<Logo v-if="setShowLogo" />
|
<Logo v-if="setShowLogo" />
|
||||||
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
|
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
|
||||||
<Vertical :menuList="menuList" />
|
<Vertical :menuList="state.menuList" />
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutAside">
|
||||||
import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue';
|
import { defineAsyncComponent, reactive, computed, watch, onBeforeMount, ref } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import pinia from '/@/stores/index';
|
import pinia from '/@/stores/index';
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
import { useRoutesList } from '/@/stores/routesList';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
import Logo from '/@/layout/logo/index.vue';
|
import mittBus from '/@/utils/mitt';
|
||||||
import Vertical from '/@/layout/navMenu/vertical.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutAside',
|
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
|
||||||
components: { Logo, Vertical },
|
const Vertical = defineAsyncComponent(() => import('/@/layout/navMenu/vertical.vue'));
|
||||||
setup() {
|
|
||||||
const { proxy } = <any>getCurrentInstance();
|
// 定义变量内容
|
||||||
const stores = useRoutesList();
|
const layoutAsideScrollbarRef = ref();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const stores = useRoutesList();
|
||||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const { routesList } = storeToRefs(stores);
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { routesList } = storeToRefs(stores);
|
||||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const state = reactive({
|
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||||
menuList: [],
|
const state = reactive<AsideState>({
|
||||||
clientWidth: 0,
|
menuList: [],
|
||||||
});
|
clientWidth: 0,
|
||||||
// 设置菜单展开/收起时的宽度
|
|
||||||
const setCollapseStyle = computed(() => {
|
|
||||||
const { layout, isCollapse, menuBar } = themeConfig.value;
|
|
||||||
const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
|
|
||||||
const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
|
|
||||||
// 判断是否是手机端
|
|
||||||
if (state.clientWidth <= 1000) {
|
|
||||||
if (isCollapse) {
|
|
||||||
document.body.setAttribute('class', 'el-popup-parent--hidden');
|
|
||||||
const asideEle = document.querySelector('.layout-container') as HTMLElement;
|
|
||||||
const modeDivs = document.createElement('div');
|
|
||||||
modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
|
|
||||||
asideEle.appendChild(modeDivs);
|
|
||||||
modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
|
|
||||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
|
|
||||||
} else {
|
|
||||||
// 关闭弹窗
|
|
||||||
closeLayoutAsideMobileMode();
|
|
||||||
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (layout === 'columns') {
|
|
||||||
// 分栏布局，菜单收起时宽度给 1px
|
|
||||||
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
|
|
||||||
else return [asideBrColor, 'layout-aside-pc-220'];
|
|
||||||
} else {
|
|
||||||
// 其它布局给 64px
|
|
||||||
if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
|
|
||||||
else return [asideBrColor, 'layout-aside-pc-220'];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 关闭移动端蒙版
|
|
||||||
const closeLayoutAsideMobileMode = () => {
|
|
||||||
const el = document.querySelector('.layout-aside-mobile-mode');
|
|
||||||
el?.setAttribute('style', 'animation: error-img-two 0.3s');
|
|
||||||
setTimeout(() => {
|
|
||||||
el?.parentNode?.removeChild(el);
|
|
||||||
}, 300);
|
|
||||||
const clientWidth = document.body.clientWidth;
|
|
||||||
if (clientWidth < 1000) themeConfig.value.isCollapse = false;
|
|
||||||
document.body.setAttribute('class', '');
|
|
||||||
};
|
|
||||||
// 设置显示/隐藏 logo
|
|
||||||
const setShowLogo = computed(() => {
|
|
||||||
let { layout, isShowLogo } = themeConfig.value;
|
|
||||||
return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
|
|
||||||
});
|
|
||||||
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
|
||||||
const setFilterRoutes = () => {
|
|
||||||
if (themeConfig.value.layout === 'columns') return false;
|
|
||||||
(state.menuList as any) = filterRoutesFun(routesList.value);
|
|
||||||
};
|
|
||||||
// 路由过滤递归函数
|
|
||||||
const filterRoutesFun = (arr: Array<string>) => {
|
|
||||||
return arr
|
|
||||||
.filter((item: any) => !item.meta.isHide)
|
|
||||||
.map((item: any) => {
|
|
||||||
item = Object.assign({}, item);
|
|
||||||
if (item.children) item.children = filterRoutesFun(item.children);
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 设置菜单导航是否固定（移动端）
|
|
||||||
const initMenuFixed = (clientWidth: number) => {
|
|
||||||
state.clientWidth = clientWidth;
|
|
||||||
};
|
|
||||||
// 鼠标移入、移出
|
|
||||||
const onAsideEnterLeave = (bool: Boolean) => {
|
|
||||||
let { layout } = themeConfig.value;
|
|
||||||
if (layout !== 'columns') return false;
|
|
||||||
if (!bool) proxy.mittBus.emit('restoreDefault');
|
|
||||||
stores.setColumnsMenuHover(bool);
|
|
||||||
};
|
|
||||||
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
|
||||||
watch(themeConfig.value, (val) => {
|
|
||||||
if (val.isShowLogoChange !== val.isShowLogo) {
|
|
||||||
if (!proxy.$refs.layoutAsideScrollbarRef) return false;
|
|
||||||
proxy.$refs.layoutAsideScrollbarRef.update();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 监听vuex值的变化，动态赋值给菜单中
|
|
||||||
watch(
|
|
||||||
pinia.state,
|
|
||||||
(val) => {
|
|
||||||
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
|
|
||||||
if (layout === 'classic' && isClassicSplitMenu) return false;
|
|
||||||
setFilterRoutes();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 页面加载前
|
|
||||||
onBeforeMount(() => {
|
|
||||||
initMenuFixed(document.body.clientWidth);
|
|
||||||
setFilterRoutes();
|
|
||||||
// 此界面不需要取消监听(proxy.mittBus.off('setSendColumnsChildren))
|
|
||||||
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
|
|
||||||
proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
|
|
||||||
state.menuList = res.children;
|
|
||||||
});
|
|
||||||
proxy.mittBus.on('setSendClassicChildren', (res: any) => {
|
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
|
||||||
if (layout === 'classic' && isClassicSplitMenu) {
|
|
||||||
state.menuList = [];
|
|
||||||
state.menuList = res.children;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
|
||||||
setFilterRoutes();
|
|
||||||
});
|
|
||||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
|
||||||
initMenuFixed(res.clientWidth);
|
|
||||||
closeLayoutAsideMobileMode();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
setCollapseStyle,
|
|
||||||
setShowLogo,
|
|
||||||
isTagsViewCurrenFull,
|
|
||||||
onAsideEnterLeave,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 设置菜单展开/收起时的宽度
|
||||||
|
const setCollapseStyle = computed(() => {
|
||||||
|
const { layout, isCollapse, menuBar } = themeConfig.value;
|
||||||
|
const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
|
||||||
|
const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
|
||||||
|
// 判断是否是手机端
|
||||||
|
if (state.clientWidth <= 1000) {
|
||||||
|
if (isCollapse) {
|
||||||
|
document.body.setAttribute('class', 'el-popup-parent--hidden');
|
||||||
|
const asideEle = document.querySelector('.layout-container') as HTMLElement;
|
||||||
|
const modeDivs = document.createElement('div');
|
||||||
|
modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
|
||||||
|
asideEle.appendChild(modeDivs);
|
||||||
|
modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
|
||||||
|
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
|
||||||
|
} else {
|
||||||
|
// 关闭弹窗
|
||||||
|
closeLayoutAsideMobileMode();
|
||||||
|
return [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (layout === 'columns') {
|
||||||
|
// 分栏布局，菜单收起时宽度给 1px
|
||||||
|
if (isCollapse) return [asideBrColor, 'layout-aside-pc-1'];
|
||||||
|
else return [asideBrColor, 'layout-aside-pc-220'];
|
||||||
|
} else {
|
||||||
|
// 其它布局给 64px
|
||||||
|
if (isCollapse) return [asideBrColor, 'layout-aside-pc-64'];
|
||||||
|
else return [asideBrColor, 'layout-aside-pc-220'];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 设置显示/隐藏 logo
|
||||||
|
const setShowLogo = computed(() => {
|
||||||
|
let { layout, isShowLogo } = themeConfig.value;
|
||||||
|
return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
|
||||||
|
});
|
||||||
|
// 关闭移动端蒙版
|
||||||
|
const closeLayoutAsideMobileMode = () => {
|
||||||
|
const el = document.querySelector('.layout-aside-mobile-mode');
|
||||||
|
el?.setAttribute('style', 'animation: error-img-two 0.3s');
|
||||||
|
setTimeout(() => {
|
||||||
|
el?.parentNode?.removeChild(el);
|
||||||
|
}, 300);
|
||||||
|
const clientWidth = document.body.clientWidth;
|
||||||
|
if (clientWidth < 1000) themeConfig.value.isCollapse = false;
|
||||||
|
document.body.setAttribute('class', '');
|
||||||
|
};
|
||||||
|
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
||||||
|
const setFilterRoutes = () => {
|
||||||
|
if (themeConfig.value.layout === 'columns') return false;
|
||||||
|
state.menuList = filterRoutesFun(routesList.value);
|
||||||
|
};
|
||||||
|
// 路由过滤递归函数
|
||||||
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
||||||
|
return arr
|
||||||
|
.filter((item: T) => !item.meta?.isHide)
|
||||||
|
.map((item: T) => {
|
||||||
|
item = Object.assign({}, item);
|
||||||
|
if (item.children) item.children = filterRoutesFun(item.children);
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 设置菜单导航是否固定（移动端）
|
||||||
|
const initMenuFixed = (clientWidth: number) => {
|
||||||
|
state.clientWidth = clientWidth;
|
||||||
|
};
|
||||||
|
// 鼠标移入、移出
|
||||||
|
const onAsideEnterLeave = (bool: Boolean) => {
|
||||||
|
let { layout } = themeConfig.value;
|
||||||
|
if (layout !== 'columns') return false;
|
||||||
|
if (!bool) mittBus.emit('restoreDefault');
|
||||||
|
stores.setColumnsMenuHover(bool);
|
||||||
|
};
|
||||||
|
// 页面加载前
|
||||||
|
onBeforeMount(() => {
|
||||||
|
initMenuFixed(document.body.clientWidth);
|
||||||
|
setFilterRoutes();
|
||||||
|
// 此界面不需要取消监听(mittBus.off('setSendColumnsChildren))
|
||||||
|
// 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效
|
||||||
|
mittBus.on('setSendColumnsChildren', (res: MittMenu) => {
|
||||||
|
state.menuList = res.children;
|
||||||
|
});
|
||||||
|
mittBus.on('setSendClassicChildren', (res: MittMenu) => {
|
||||||
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||||
|
if (layout === 'classic' && isClassicSplitMenu) {
|
||||||
|
state.menuList = [];
|
||||||
|
state.menuList = res.children;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||||
|
setFilterRoutes();
|
||||||
|
});
|
||||||
|
mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
|
||||||
|
initMenuFixed(res.clientWidth);
|
||||||
|
closeLayoutAsideMobileMode();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||||
|
watch(themeConfig.value, (val) => {
|
||||||
|
if (val.isShowLogoChange !== val.isShowLogo) {
|
||||||
|
if (layoutAsideScrollbarRef.value) layoutAsideScrollbarRef.value.update();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 监听 pinia 值的变化，动态赋值给菜单中
|
||||||
|
watch(
|
||||||
|
pinia.state,
|
||||||
|
(val) => {
|
||||||
|
let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
|
||||||
|
if (layout === 'classic' && isClassicSplitMenu) return false;
|
||||||
|
setFilterRoutes();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<ul @mouseleave="onColumnsAsideMenuMouseleave()">
|
<ul @mouseleave="onColumnsAsideMenuMouseleave()">
|
||||||
<li
|
<li
|
||||||
v-for="(v, k) in columnsAsideList"
|
v-for="(v, k) in state.columnsAsideList"
|
||||||
:key="k"
|
:key="k"
|
||||||
@click="onColumnsAsideMenuClick(v, k)"
|
@click="onColumnsAsideMenuClick(v, k)"
|
||||||
@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
|
@mouseenter="onColumnsAsideMenuMouseenter(v, k)"
|
||||||
@@ -12,7 +12,7 @@
|
|||||||
if (el) columnsAsideOffsetTopRefs[k] = el;
|
if (el) columnsAsideOffsetTopRefs[k] = el;
|
||||||
}
|
}
|
||||||
"
|
"
|
||||||
:class="{ 'layout-columns-active': liIndex === k, 'layout-columns-hover': liHoverIndex === k }"
|
:class="{ 'layout-columns-active': state.liIndex === k, 'layout-columns-hover': state.liHoverIndex === k }"
|
||||||
:title="$t(v.meta.title)"
|
:title="$t(v.meta.title)"
|
||||||
>
|
>
|
||||||
<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
|
<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
|
||||||
@@ -44,174 +44,151 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutColumnsAside">
|
||||||
import { reactive, toRefs, ref, onMounted, nextTick, getCurrentInstance, watch, onUnmounted, defineComponent } from 'vue';
|
import { reactive, ref, onMounted, nextTick, watch, onUnmounted } from 'vue';
|
||||||
import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
import { useRoute, useRouter, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import pinia from '/@/stores/index';
|
import pinia from '/@/stores/index';
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
import { useRoutesList } from '/@/stores/routesList';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 定义变量内容
|
||||||
interface ColumnsAsideState {
|
const columnsAsideOffsetTopRefs = ref<RefType>([]);
|
||||||
columnsAsideList: any[];
|
const columnsAsideActiveRef = ref();
|
||||||
liIndex: number;
|
const stores = useRoutesList();
|
||||||
liOldIndex: null | number;
|
const storesThemeConfig = useThemeConfig();
|
||||||
liHoverIndex: null | number;
|
const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
|
||||||
liOldPath: null | string;
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
difference: number;
|
const route = useRoute();
|
||||||
routeSplit: string[];
|
const router = useRouter();
|
||||||
}
|
const state = reactive<ColumnsAsideState>({
|
||||||
|
columnsAsideList: [],
|
||||||
export default defineComponent({
|
liIndex: 0,
|
||||||
name: 'layoutColumnsAside',
|
liOldIndex: null,
|
||||||
setup() {
|
liHoverIndex: null,
|
||||||
const columnsAsideOffsetTopRefs: any = ref([]);
|
liOldPath: null,
|
||||||
const columnsAsideActiveRef = ref();
|
difference: 0,
|
||||||
const { proxy } = <any>getCurrentInstance();
|
routeSplit: [],
|
||||||
const stores = useRoutesList();
|
|
||||||
const storesThemeConfig = useThemeConfig();
|
|
||||||
const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
|
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const state = reactive<ColumnsAsideState>({
|
|
||||||
columnsAsideList: [],
|
|
||||||
liIndex: 0,
|
|
||||||
liOldIndex: null,
|
|
||||||
liHoverIndex: null,
|
|
||||||
liOldPath: null,
|
|
||||||
difference: 0,
|
|
||||||
routeSplit: [],
|
|
||||||
});
|
|
||||||
// 设置菜单高亮位置移动
|
|
||||||
const setColumnsAsideMove = (k: number) => {
|
|
||||||
state.liIndex = k;
|
|
||||||
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
|
||||||
};
|
|
||||||
// 菜单高亮点击事件
|
|
||||||
const onColumnsAsideMenuClick = (v: Object, k: number) => {
|
|
||||||
setColumnsAsideMove(k);
|
|
||||||
let { path, redirect } = v as any;
|
|
||||||
if (redirect) router.push(redirect);
|
|
||||||
else router.push(path);
|
|
||||||
};
|
|
||||||
// 鼠标移入时，显示当前的子级菜单
|
|
||||||
const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
|
|
||||||
let { path } = v;
|
|
||||||
state.liOldPath = path;
|
|
||||||
state.liOldIndex = k;
|
|
||||||
state.liHoverIndex = k;
|
|
||||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(path));
|
|
||||||
stores.setColumnsMenuHover(false);
|
|
||||||
stores.setColumnsNavHover(true);
|
|
||||||
};
|
|
||||||
// 鼠标移走时，显示原来的子级菜单
|
|
||||||
const onColumnsAsideMenuMouseleave = async () => {
|
|
||||||
await stores.setColumnsNavHover(false);
|
|
||||||
// 添加延时器，防止拿到的 store.state.routesList 值不是最新的
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!isColumnsMenuHover && !isColumnsNavHover) proxy.mittBus.emit('restoreDefault');
|
|
||||||
}, 100);
|
|
||||||
};
|
|
||||||
// 设置高亮动态位置
|
|
||||||
const onColumnsAsideDown = (k: number) => {
|
|
||||||
nextTick(() => {
|
|
||||||
setColumnsAsideMove(k);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
|
||||||
const setFilterRoutes = () => {
|
|
||||||
state.columnsAsideList = filterRoutesFun(routesList.value);
|
|
||||||
const resData: any = setSendChildren(route.path);
|
|
||||||
if (Object.keys(resData).length <= 0) return false;
|
|
||||||
onColumnsAsideDown(resData.item[0].k);
|
|
||||||
proxy.mittBus.emit('setSendColumnsChildren', resData);
|
|
||||||
};
|
|
||||||
// 传送当前子级数据到菜单中
|
|
||||||
const setSendChildren = (path: string) => {
|
|
||||||
const currentPathSplit = path.split('/');
|
|
||||||
let currentData: any = {};
|
|
||||||
state.columnsAsideList.map((v: any, k: number) => {
|
|
||||||
if (v.path === `/${currentPathSplit[1]}`) {
|
|
||||||
v['k'] = k;
|
|
||||||
currentData['item'] = [{ ...v }];
|
|
||||||
currentData['children'] = [{ ...v }];
|
|
||||||
if (v.children) currentData['children'] = v.children;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return currentData;
|
|
||||||
};
|
|
||||||
// 路由过滤递归函数
|
|
||||||
const filterRoutesFun = (arr: Array<string>) => {
|
|
||||||
return arr
|
|
||||||
.filter((item: any) => !item.meta.isHide)
|
|
||||||
.map((item: any) => {
|
|
||||||
item = Object.assign({}, item);
|
|
||||||
if (item.children) item.children = filterRoutesFun(item.children);
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
|
|
||||||
const setColumnsMenuHighlight = (path: string) => {
|
|
||||||
state.routeSplit = path.split('/');
|
|
||||||
state.routeSplit.shift();
|
|
||||||
const routeFirst = `/${state.routeSplit[0]}`;
|
|
||||||
const currentSplitRoute = state.columnsAsideList.find((v: any) => v.path === routeFirst);
|
|
||||||
if (!currentSplitRoute) return false;
|
|
||||||
// 延迟拿值，防止取不到
|
|
||||||
setTimeout(() => {
|
|
||||||
onColumnsAsideDown((<any>currentSplitRoute).k);
|
|
||||||
}, 0);
|
|
||||||
};
|
|
||||||
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
|
|
||||||
watch(
|
|
||||||
pinia.state,
|
|
||||||
(val) => {
|
|
||||||
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
|
|
||||||
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
|
||||||
state.liHoverIndex = null;
|
|
||||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
|
|
||||||
} else {
|
|
||||||
state.liHoverIndex = state.liOldIndex;
|
|
||||||
if (!state.liOldPath) return false;
|
|
||||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
setFilterRoutes();
|
|
||||||
// 销毁变量，防止鼠标再次移入时，保留了上次的记录
|
|
||||||
proxy.mittBus.on('restoreDefault', () => {
|
|
||||||
state.liOldIndex = null;
|
|
||||||
state.liOldPath = null;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 页面卸载时
|
|
||||||
onUnmounted(() => {
|
|
||||||
proxy.mittBus.off('restoreDefault', () => {});
|
|
||||||
});
|
|
||||||
// 路由更新时
|
|
||||||
onBeforeRouteUpdate((to) => {
|
|
||||||
setColumnsMenuHighlight(to.path);
|
|
||||||
proxy.mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
themeConfig,
|
|
||||||
columnsAsideOffsetTopRefs,
|
|
||||||
columnsAsideActiveRef,
|
|
||||||
onColumnsAsideDown,
|
|
||||||
onColumnsAsideMenuClick,
|
|
||||||
onColumnsAsideMenuMouseenter,
|
|
||||||
onColumnsAsideMenuMouseleave,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 设置菜单高亮位置移动
|
||||||
|
const setColumnsAsideMove = (k: number) => {
|
||||||
|
state.liIndex = k;
|
||||||
|
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
|
||||||
|
};
|
||||||
|
// 菜单高亮点击事件
|
||||||
|
const onColumnsAsideMenuClick = (v: RouteItem, k: number) => {
|
||||||
|
setColumnsAsideMove(k);
|
||||||
|
let { path, redirect } = v;
|
||||||
|
if (redirect) router.push(redirect);
|
||||||
|
else router.push(path);
|
||||||
|
};
|
||||||
|
// 鼠标移入时，显示当前的子级菜单
|
||||||
|
const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
|
||||||
|
if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
|
||||||
|
let { path } = v;
|
||||||
|
state.liOldPath = path;
|
||||||
|
state.liOldIndex = k;
|
||||||
|
state.liHoverIndex = k;
|
||||||
|
mittBus.emit('setSendColumnsChildren', setSendChildren(path));
|
||||||
|
stores.setColumnsMenuHover(false);
|
||||||
|
stores.setColumnsNavHover(true);
|
||||||
|
};
|
||||||
|
// 鼠标移走时，显示原来的子级菜单
|
||||||
|
const onColumnsAsideMenuMouseleave = async () => {
|
||||||
|
await stores.setColumnsNavHover(false);
|
||||||
|
// 添加延时器，防止拿到的 store.state.routesList 值不是最新的
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!isColumnsMenuHover && !isColumnsNavHover) mittBus.emit('restoreDefault');
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
// 设置高亮动态位置
|
||||||
|
const onColumnsAsideDown = (k: number) => {
|
||||||
|
nextTick(() => {
|
||||||
|
setColumnsAsideMove(k);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
||||||
|
const setFilterRoutes = () => {
|
||||||
|
state.columnsAsideList = filterRoutesFun(routesList.value);
|
||||||
|
const resData: MittMenu = setSendChildren(route.path);
|
||||||
|
if (Object.keys(resData).length <= 0) return false;
|
||||||
|
onColumnsAsideDown(resData.item?.k);
|
||||||
|
mittBus.emit('setSendColumnsChildren', resData);
|
||||||
|
};
|
||||||
|
// 传送当前子级数据到菜单中
|
||||||
|
const setSendChildren = (path: string) => {
|
||||||
|
const currentPathSplit = path.split('/');
|
||||||
|
let currentData: MittMenu = { children: [] };
|
||||||
|
state.columnsAsideList.map((v: RouteItem, k: number) => {
|
||||||
|
if (v.path === `/${currentPathSplit[1]}`) {
|
||||||
|
v['k'] = k;
|
||||||
|
currentData['item'] = { ...v };
|
||||||
|
currentData['children'] = [{ ...v }];
|
||||||
|
if (v.children) currentData['children'] = v.children;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return currentData;
|
||||||
|
};
|
||||||
|
// 路由过滤递归函数
|
||||||
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
||||||
|
return arr
|
||||||
|
.filter((item: T) => !item.meta?.isHide)
|
||||||
|
.map((item: T) => {
|
||||||
|
item = Object.assign({}, item);
|
||||||
|
if (item.children) item.children = filterRoutesFun(item.children);
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// tagsView 点击时，根据路由查找下标 columnsAsideList，实现左侧菜单高亮
|
||||||
|
const setColumnsMenuHighlight = (path: string) => {
|
||||||
|
state.routeSplit = path.split('/');
|
||||||
|
state.routeSplit.shift();
|
||||||
|
const routeFirst = `/${state.routeSplit[0]}`;
|
||||||
|
const currentSplitRoute = state.columnsAsideList.find((v: RouteItem) => v.path === routeFirst);
|
||||||
|
if (!currentSplitRoute) return false;
|
||||||
|
// 延迟拿值，防止取不到
|
||||||
|
setTimeout(() => {
|
||||||
|
onColumnsAsideDown(currentSplitRoute.k);
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
setFilterRoutes();
|
||||||
|
// 销毁变量，防止鼠标再次移入时，保留了上次的记录
|
||||||
|
mittBus.on('restoreDefault', () => {
|
||||||
|
state.liOldIndex = null;
|
||||||
|
state.liOldPath = null;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 页面卸载时
|
||||||
|
onUnmounted(() => {
|
||||||
|
mittBus.off('restoreDefault', () => {});
|
||||||
|
});
|
||||||
|
// 路由更新时
|
||||||
|
onBeforeRouteUpdate((to) => {
|
||||||
|
setColumnsMenuHighlight(to.path);
|
||||||
|
mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
|
||||||
|
});
|
||||||
|
// 监听布局配置信息的变化，动态增加菜单高亮位置移动像素
|
||||||
|
watch(
|
||||||
|
pinia.state,
|
||||||
|
(val) => {
|
||||||
|
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
|
||||||
|
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
|
||||||
|
state.liHoverIndex = null;
|
||||||
|
mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
|
||||||
|
} else {
|
||||||
|
state.liHoverIndex = state.liOldIndex;
|
||||||
|
if (!state.liOldPath) return false;
|
||||||
|
mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -221,6 +198,16 @@ export default defineComponent({
|
|||||||
background: var(--next-bg-columnsMenuBar);
|
background: var(--next-bg-columnsMenuBar);
|
||||||
ul {
|
ul {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
.layout-columns-active {
|
||||||
|
color: var(--next-bg-columnsMenuBarColor) !important;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.layout-columns-hover {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
a {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
li {
|
li {
|
||||||
color: var(--next-bg-columnsMenuBarColor);
|
color: var(--next-bg-columnsMenuBarColor);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -230,6 +217,9 @@ export default defineComponent({
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
&:hover {
|
||||||
|
@extend .layout-columns-hover;
|
||||||
|
}
|
||||||
.columns-vertical {
|
.columns-vertical {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
.columns-vertical-title {
|
.columns-vertical-title {
|
||||||
@@ -257,16 +247,6 @@ export default defineComponent({
|
|||||||
color: var(--next-bg-columnsMenuBarColor);
|
color: var(--next-bg-columnsMenuBarColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.layout-columns-active {
|
|
||||||
color: var(--next-bg-columnsMenuBarColor) !important;
|
|
||||||
transition: 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
.layout-columns-hover {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
a {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.columns-round {
|
.columns-round {
|
||||||
background: var(--el-color-primary);
|
background: var(--el-color-primary);
|
||||||
color: var(--el-color-white);
|
color: var(--el-color-white);
|
||||||
|
|||||||
@@ -1,34 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-header class="layout-header" :height="setHeaderHeight" v-show="!isTagsViewCurrenFull">
|
<el-header class="layout-header" v-show="!isTagsViewCurrenFull">
|
||||||
<NavBarsIndex />
|
<NavBarsIndex />
|
||||||
</el-header>
|
</el-header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutHeader">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { defineAsyncComponent } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
import NavBarsIndex from '/@/layout/navBars/index.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutHeader',
|
const NavBarsIndex = defineAsyncComponent(() => import('/@/layout/navBars/index.vue'));
|
||||||
components: { NavBarsIndex },
|
|
||||||
setup() {
|
// 定义变量内容
|
||||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
|
||||||
// 设置 header 的高度
|
|
||||||
const setHeaderHeight = computed(() => {
|
|
||||||
let { isTagsview, layout } = themeConfig.value;
|
|
||||||
if (isTagsview && layout !== 'classic') return '84px';
|
|
||||||
else return '50px';
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
setHeaderHeight,
|
|
||||||
isTagsViewCurrenFull,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,101 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-main class="layout-main">
|
<el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
|
||||||
<el-scrollbar
|
<el-scrollbar
|
||||||
ref="layoutScrollbarRef"
|
ref="layoutMainScrollbarRef"
|
||||||
:class="{
|
class="layout-main-scroll layout-backtop-header-fixed"
|
||||||
'layout-scrollbar':
|
wrap-class="layout-main-scroll"
|
||||||
(!isClassicOrTransverse && !currentRouteMeta.isLink && !currentRouteMeta.isIframe) ||
|
view-class="layout-main-scroll"
|
||||||
(!isClassicOrTransverse && currentRouteMeta.isLink && !currentRouteMeta.isIframe),
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<LayoutParentView
|
<LayoutParentView />
|
||||||
:style="{
|
<LayoutFooter v-if="isFooter" />
|
||||||
padding: !isClassicOrTransverse || (currentRouteMeta.isLink && currentRouteMeta.isIframe) ? '0' : '15px',
|
|
||||||
transition: 'padding 0.3s ease-in-out',
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<Footer v-if="themeConfig.isFooter" />
|
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
<el-backtop :target="setBacktopClass" />
|
||||||
</el-main>
|
</el-main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutMain">
|
||||||
import { defineComponent, toRefs, reactive, getCurrentInstance, watch, onMounted, computed } from 'vue';
|
import { defineAsyncComponent, onMounted, computed, ref } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { NextLoading } from '/@/utils/loading';
|
import { NextLoading } from '/@/utils/loading';
|
||||||
import LayoutParentView from '/@/layout/routerView/parent.vue';
|
|
||||||
import Footer from '/@/layout/footer/index.vue';
|
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 引入组件
|
||||||
interface MainState {
|
const LayoutParentView = defineAsyncComponent(() => import('/@/layout/routerView/parent.vue'));
|
||||||
headerHeight: string | number;
|
const LayoutFooter = defineAsyncComponent(() => import('/@/layout/footer/index.vue'));
|
||||||
currentRouteMeta: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutMain',
|
const layoutMainScrollbarRef = ref();
|
||||||
components: { LayoutParentView, Footer },
|
const route = useRoute();
|
||||||
setup() {
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||||
const route = useRoute();
|
|
||||||
const state = reactive<MainState>({
|
// 设置 footer 显示/隐藏
|
||||||
headerHeight: '',
|
const isFooter = computed(() => {
|
||||||
currentRouteMeta: {},
|
return themeConfig.value.isFooter && !route.meta.isIframe;
|
||||||
});
|
});
|
||||||
// 判断布局
|
// 设置 header 固定
|
||||||
const isClassicOrTransverse = computed(() => {
|
const isFixedHeader = computed(() => {
|
||||||
const { layout } = themeConfig.value;
|
return themeConfig.value.isFixedHeader;
|
||||||
return layout === 'classic' || layout === 'transverse';
|
});
|
||||||
});
|
// 设置 Backtop 回到顶部
|
||||||
// 设置 main 的高度
|
const setBacktopClass = computed(() => {
|
||||||
const initHeaderHeight = () => {
|
if (themeConfig.value.isFixedHeader) return `.layout-backtop-header-fixed .el-scrollbar__wrap`;
|
||||||
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
|
else return `.layout-backtop .el-scrollbar__wrap`;
|
||||||
let { isTagsview } = themeConfig.value;
|
});
|
||||||
if (isTagsview) return (state.headerHeight = bool ? `86px` : `115px`);
|
// 设置主内容区的高度
|
||||||
else return (state.headerHeight = `80px`);
|
const setMainHeight = computed(() => {
|
||||||
};
|
if (isTagsViewCurrenFull.value) return '0px';
|
||||||
// 初始化获取当前路由 meta，用于设置 iframes padding
|
const { isTagsview, layout } = themeConfig.value;
|
||||||
const initGetMeta = () => {
|
if (isTagsview && layout !== 'classic') return '85px';
|
||||||
state.currentRouteMeta = route.meta;
|
else return '51px';
|
||||||
};
|
});
|
||||||
// 页面加载前
|
// 页面加载前
|
||||||
onMounted(async () => {
|
onMounted(() => {
|
||||||
await initGetMeta();
|
NextLoading.done(600);
|
||||||
initHeaderHeight();
|
});
|
||||||
NextLoading.done();
|
|
||||||
});
|
// 暴露变量
|
||||||
// 监听路由变化
|
defineExpose({
|
||||||
watch(
|
layoutMainScrollbarRef,
|
||||||
() => route.path,
|
|
||||||
() => {
|
|
||||||
state.currentRouteMeta = route.meta;
|
|
||||||
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
|
|
||||||
state.headerHeight = bool ? `86px` : `115px`;
|
|
||||||
proxy.$refs.layoutScrollbarRef.update();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
|
||||||
watch(
|
|
||||||
themeConfig,
|
|
||||||
(val) => {
|
|
||||||
state.currentRouteMeta = route.meta;
|
|
||||||
const bool = state.currentRouteMeta.isLink && state.currentRouteMeta.isIframe;
|
|
||||||
state.headerHeight = val.isTagsview ? (bool ? `86px` : `115px`) : '51px';
|
|
||||||
proxy.$refs?.layoutScrollbarRef?.update();
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
themeConfig,
|
|
||||||
isClassicOrTransverse,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-footer mt15" v-show="isDelayFooter">
|
<div class="layout-footer pb15">
|
||||||
<div class="layout-footer-warp">
|
<div class="layout-footer-warp">
|
||||||
<div>vue-next-admin，Made by lyt with ❤️</div>
|
<div>vue-next-admin，Made by lyt with ❤️</div>
|
||||||
<div class="mt5">深圳市 xxx 公司版权所有</div>
|
<div class="mt5">深圳市 xxx 公司版权所有</div>
|
||||||
@@ -7,30 +7,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutFooter">
|
||||||
import { toRefs, reactive, defineComponent } from 'vue';
|
// 此处需有内容（注释也得），否则缓存将失败
|
||||||
import { onBeforeRouteUpdate } from 'vue-router';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'layoutFooter',
|
|
||||||
setup() {
|
|
||||||
const state = reactive({
|
|
||||||
isDelayFooter: true,
|
|
||||||
});
|
|
||||||
// 路由改变时，等主界面动画加载完毕再显示 footer
|
|
||||||
onBeforeRouteUpdate(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
state.isDelayFooter = false;
|
|
||||||
setTimeout(() => {
|
|
||||||
state.isDelayFooter = true;
|
|
||||||
}, 800);
|
|
||||||
}, 0);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -41,7 +19,7 @@ export default defineComponent({
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
color: var(--el-text-color-secondary);
|
color: var(--el-text-color-secondary);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
animation: error-num 1s ease-in-out;
|
animation: error-num 0.3s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,54 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<component :is="themeConfig.layout" />
|
<component :is="layouts[themeConfig.layout]" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layout">
|
||||||
import { onBeforeMount, onUnmounted, getCurrentInstance, defineComponent, defineAsyncComponent } from 'vue';
|
import { onBeforeMount, onUnmounted, defineAsyncComponent } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layout',
|
const layouts: any = {
|
||||||
components: {
|
defaults: defineAsyncComponent(() => import('/@/layout/main/defaults.vue')),
|
||||||
defaults: defineAsyncComponent(() => import('/@/layout/main/defaults.vue')),
|
classic: defineAsyncComponent(() => import('/@/layout/main/classic.vue')),
|
||||||
classic: defineAsyncComponent(() => import('/@/layout/main/classic.vue')),
|
transverse: defineAsyncComponent(() => import('/@/layout/main/transverse.vue')),
|
||||||
transverse: defineAsyncComponent(() => import('/@/layout/main/transverse.vue')),
|
columns: defineAsyncComponent(() => import('/@/layout/main/columns.vue')),
|
||||||
columns: defineAsyncComponent(() => import('/@/layout/main/columns.vue')),
|
};
|
||||||
},
|
|
||||||
setup() {
|
// 定义变量内容
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
// 窗口大小改变时(适配移动端)
|
// 窗口大小改变时(适配移动端)
|
||||||
const onLayoutResize = () => {
|
const onLayoutResize = () => {
|
||||||
if (!Local.get('oldLayout')) Local.set('oldLayout', themeConfig.value.layout);
|
if (!Local.get('oldLayout')) Local.set('oldLayout', themeConfig.value.layout);
|
||||||
const clientWidth = document.body.clientWidth;
|
const clientWidth = document.body.clientWidth;
|
||||||
if (clientWidth < 1000) {
|
if (clientWidth < 1000) {
|
||||||
themeConfig.value.isCollapse = false;
|
themeConfig.value.isCollapse = false;
|
||||||
proxy.mittBus.emit('layoutMobileResize', {
|
mittBus.emit('layoutMobileResize', {
|
||||||
layout: 'defaults',
|
layout: 'defaults',
|
||||||
clientWidth,
|
clientWidth,
|
||||||
});
|
|
||||||
} else {
|
|
||||||
proxy.mittBus.emit('layoutMobileResize', {
|
|
||||||
layout: Local.get('oldLayout') ? Local.get('oldLayout') : themeConfig.value.layout,
|
|
||||||
clientWidth,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 页面加载前
|
|
||||||
onBeforeMount(() => {
|
|
||||||
onLayoutResize();
|
|
||||||
window.addEventListener('resize', onLayoutResize);
|
|
||||||
});
|
});
|
||||||
// 页面卸载时
|
} else {
|
||||||
onUnmounted(() => {
|
mittBus.emit('layoutMobileResize', {
|
||||||
window.removeEventListener('resize', onLayoutResize);
|
layout: Local.get('oldLayout') ? Local.get('oldLayout') : themeConfig.value.layout,
|
||||||
|
clientWidth,
|
||||||
});
|
});
|
||||||
return {
|
}
|
||||||
themeConfig,
|
};
|
||||||
};
|
// 页面加载前
|
||||||
},
|
onBeforeMount(() => {
|
||||||
|
onLayoutResize();
|
||||||
|
window.addEventListener('resize', onLayoutResize);
|
||||||
|
});
|
||||||
|
// 页面卸载时
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('resize', onLayoutResize);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-show="isShowLockScreen">
|
<div v-show="state.isShowLockScreen">
|
||||||
<div class="layout-lock-screen-mask"></div>
|
<div class="layout-lock-screen-mask"></div>
|
||||||
<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': isShowLoockLogin }"></div>
|
<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
|
||||||
<div class="layout-lock-screen">
|
<div class="layout-lock-screen">
|
||||||
<div
|
<div
|
||||||
class="layout-lock-screen-date"
|
class="layout-lock-screen-date"
|
||||||
ref="layoutLockScreenDateRef"
|
ref="layoutLockScreenDateRef"
|
||||||
@mousedown="onDown"
|
@mousedown="onDownPc"
|
||||||
@mousemove="onMove"
|
@mousemove="onMovePc"
|
||||||
@mouseup="onEnd"
|
@mouseup="onEnd"
|
||||||
@touchstart.stop="onDown"
|
@touchstart.stop="onDownApp"
|
||||||
@touchmove.stop="onMove"
|
@touchmove.stop="onMoveApp"
|
||||||
@touchend.stop="onEnd"
|
@touchend.stop="onEnd"
|
||||||
>
|
>
|
||||||
<div class="layout-lock-screen-date-box">
|
<div class="layout-lock-screen-date-box">
|
||||||
<div class="layout-lock-screen-date-box-time">
|
<div class="layout-lock-screen-date-box-time">
|
||||||
{{ time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ time.s }}</span>
|
{{ state.time.hm }}<span class="layout-lock-screen-date-box-minutes">{{ state.time.s }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-lock-screen-date-box-info">{{ time.mdq }}</div>
|
<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-lock-screen-date-top">
|
<div class="layout-lock-screen-date-top">
|
||||||
<SvgIcon name="ele-Top" />
|
<SvgIcon name="ele-Top" />
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<transition name="el-zoom-in-center">
|
<transition name="el-zoom-in-center">
|
||||||
<div v-show="isShowLoockLogin" class="layout-lock-screen-login">
|
<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
|
||||||
<div class="layout-lock-screen-login-box">
|
<div class="layout-lock-screen-login-box">
|
||||||
<div class="layout-lock-screen-login-box-img">
|
<div class="layout-lock-screen-login-box-img">
|
||||||
<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
|
<img src="https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500" />
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
<el-input
|
<el-input
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
ref="layoutLockScreenInputRef"
|
ref="layoutLockScreenInputRef"
|
||||||
v-model="lockScreenPassword"
|
v-model="state.lockScreenPassword"
|
||||||
@keyup.enter.native.stop="onLockScreenSubmit()"
|
@keyup.enter.native.stop="onLockScreenSubmit()"
|
||||||
>
|
>
|
||||||
<template #append>
|
<template #append>
|
||||||
@@ -59,159 +59,139 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutLockScreen">
|
||||||
import { nextTick, onMounted, reactive, toRefs, ref, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
|
import { nextTick, onMounted, reactive, ref, onUnmounted } from 'vue';
|
||||||
import { formatDate } from '/@/utils/formatTime';
|
import { formatDate } from '/@/utils/formatTime';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 定义变量内容
|
||||||
interface LockScreenState {
|
const layoutLockScreenDateRef = ref<HtmlType>();
|
||||||
transparency: number;
|
const layoutLockScreenInputRef = ref();
|
||||||
downClientY: number;
|
const storesThemeConfig = useThemeConfig();
|
||||||
moveDifference: number;
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
isShowLoockLogin: boolean;
|
const state = reactive({
|
||||||
isFlags: boolean;
|
transparency: 1,
|
||||||
querySelectorEl: HTMLElement | string;
|
downClientY: 0,
|
||||||
|
moveDifference: 0,
|
||||||
|
isShowLoockLogin: false,
|
||||||
|
isFlags: false,
|
||||||
|
querySelectorEl: '' as HtmlType,
|
||||||
time: {
|
time: {
|
||||||
hm: string;
|
hm: '',
|
||||||
s: string;
|
s: '',
|
||||||
mdq: string;
|
mdq: '',
|
||||||
};
|
|
||||||
setIntervalTime: number;
|
|
||||||
isShowLockScreen: boolean;
|
|
||||||
isShowLockScreenIntervalTime: number;
|
|
||||||
lockScreenPassword: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'layoutLockScreen',
|
|
||||||
setup() {
|
|
||||||
const { proxy } = <any>getCurrentInstance();
|
|
||||||
const layoutLockScreenInputRef = ref();
|
|
||||||
const storesThemeConfig = useThemeConfig();
|
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
const state = reactive<LockScreenState>({
|
|
||||||
transparency: 1,
|
|
||||||
downClientY: 0,
|
|
||||||
moveDifference: 0,
|
|
||||||
isShowLoockLogin: false,
|
|
||||||
isFlags: false,
|
|
||||||
querySelectorEl: '',
|
|
||||||
time: {
|
|
||||||
hm: '',
|
|
||||||
s: '',
|
|
||||||
mdq: '',
|
|
||||||
},
|
|
||||||
setIntervalTime: 0,
|
|
||||||
isShowLockScreen: false,
|
|
||||||
isShowLockScreenIntervalTime: 0,
|
|
||||||
lockScreenPassword: '',
|
|
||||||
});
|
|
||||||
// 鼠标按下
|
|
||||||
const onDown = (down: any) => {
|
|
||||||
state.isFlags = true;
|
|
||||||
state.downClientY = down.touches ? down.touches[0].clientY : down.clientY;
|
|
||||||
};
|
|
||||||
// 鼠标移动
|
|
||||||
const onMove = (move: any) => {
|
|
||||||
if (state.isFlags) {
|
|
||||||
const el = <HTMLElement>state.querySelectorEl;
|
|
||||||
const opacitys = (state.transparency -= 1 / 200);
|
|
||||||
if (move.touches) {
|
|
||||||
state.moveDifference = move.touches[0].clientY - state.downClientY;
|
|
||||||
} else {
|
|
||||||
state.moveDifference = move.clientY - state.downClientY;
|
|
||||||
}
|
|
||||||
if (state.moveDifference >= 0) return false;
|
|
||||||
el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
|
|
||||||
if (state.moveDifference < -400) {
|
|
||||||
el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
|
|
||||||
state.moveDifference = -el.clientHeight;
|
|
||||||
setTimeout(() => {
|
|
||||||
el && el.parentNode?.removeChild(el);
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
if (state.moveDifference === -el.clientHeight) {
|
|
||||||
state.isShowLoockLogin = true;
|
|
||||||
layoutLockScreenInputRef.value.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 鼠标松开
|
|
||||||
const onEnd = () => {
|
|
||||||
state.isFlags = false;
|
|
||||||
state.transparency = 1;
|
|
||||||
if (state.moveDifference >= -400) {
|
|
||||||
(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 获取要拖拽的初始元素
|
|
||||||
const initGetElement = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
state.querySelectorEl = proxy.$refs.layoutLockScreenDateRef;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 时间初始化
|
|
||||||
const initTime = () => {
|
|
||||||
state.time.hm = formatDate(new Date(), 'HH:MM');
|
|
||||||
state.time.s = formatDate(new Date(), 'SS');
|
|
||||||
state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
|
|
||||||
};
|
|
||||||
// 时间初始化定时器
|
|
||||||
const initSetTime = () => {
|
|
||||||
initTime();
|
|
||||||
state.setIntervalTime = window.setInterval(() => {
|
|
||||||
initTime();
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
// 锁屏时间定时器
|
|
||||||
const initLockScreen = () => {
|
|
||||||
if (themeConfig.value.isLockScreen) {
|
|
||||||
state.isShowLockScreenIntervalTime = window.setInterval(() => {
|
|
||||||
if (themeConfig.value.lockScreenTime <= 1) {
|
|
||||||
state.isShowLockScreen = true;
|
|
||||||
setLocalThemeConfig();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
themeConfig.value.lockScreenTime--;
|
|
||||||
}, 1000);
|
|
||||||
} else {
|
|
||||||
clearInterval(state.isShowLockScreenIntervalTime);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 存储布局配置
|
|
||||||
const setLocalThemeConfig = () => {
|
|
||||||
themeConfig.value.isDrawer = false;
|
|
||||||
Local.set('themeConfig', themeConfig.value);
|
|
||||||
};
|
|
||||||
// 密码输入点击事件
|
|
||||||
const onLockScreenSubmit = () => {
|
|
||||||
themeConfig.value.isLockScreen = false;
|
|
||||||
themeConfig.value.lockScreenTime = 30;
|
|
||||||
setLocalThemeConfig();
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initGetElement();
|
|
||||||
initSetTime();
|
|
||||||
initLockScreen();
|
|
||||||
});
|
|
||||||
// 页面卸载时
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.clearInterval(state.setIntervalTime);
|
|
||||||
window.clearInterval(state.isShowLockScreenIntervalTime);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
layoutLockScreenInputRef,
|
|
||||||
onDown,
|
|
||||||
onMove,
|
|
||||||
onEnd,
|
|
||||||
onLockScreenSubmit,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
setIntervalTime: 0,
|
||||||
|
isShowLockScreen: false,
|
||||||
|
isShowLockScreenIntervalTime: 0,
|
||||||
|
lockScreenPassword: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标按下 pc
|
||||||
|
const onDownPc = (down: MouseEvent) => {
|
||||||
|
state.isFlags = true;
|
||||||
|
state.downClientY = down.clientY;
|
||||||
|
};
|
||||||
|
// 鼠标按下 app
|
||||||
|
const onDownApp = (down: TouchEvent) => {
|
||||||
|
state.isFlags = true;
|
||||||
|
state.downClientY = down.touches[0].clientY;
|
||||||
|
};
|
||||||
|
// 鼠标移动 pc
|
||||||
|
const onMovePc = (move: MouseEvent) => {
|
||||||
|
state.moveDifference = move.clientY - state.downClientY;
|
||||||
|
onMove();
|
||||||
|
};
|
||||||
|
// 鼠标移动 app
|
||||||
|
const onMoveApp = (move: TouchEvent) => {
|
||||||
|
state.moveDifference = move.touches[0].clientY - state.downClientY;
|
||||||
|
onMove();
|
||||||
|
};
|
||||||
|
// 鼠标移动事件
|
||||||
|
const onMove = () => {
|
||||||
|
if (state.isFlags) {
|
||||||
|
const el = <HTMLElement>state.querySelectorEl;
|
||||||
|
const opacitys = (state.transparency -= 1 / 200);
|
||||||
|
if (state.moveDifference >= 0) return false;
|
||||||
|
el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
|
||||||
|
if (state.moveDifference < -400) {
|
||||||
|
el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
|
||||||
|
state.moveDifference = -el.clientHeight;
|
||||||
|
setTimeout(() => {
|
||||||
|
el && el.parentNode?.removeChild(el);
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
if (state.moveDifference === -el.clientHeight) {
|
||||||
|
state.isShowLoockLogin = true;
|
||||||
|
layoutLockScreenInputRef.value.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 鼠标松开
|
||||||
|
const onEnd = () => {
|
||||||
|
state.isFlags = false;
|
||||||
|
state.transparency = 1;
|
||||||
|
if (state.moveDifference >= -400) {
|
||||||
|
(<HTMLElement>state.querySelectorEl).setAttribute('style', `top:0px;opacity:1;transition:all 0.3s ease;`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 获取要拖拽的初始元素
|
||||||
|
const initGetElement = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
state.querySelectorEl = layoutLockScreenDateRef.value;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 时间初始化
|
||||||
|
const initTime = () => {
|
||||||
|
state.time.hm = formatDate(new Date(), 'HH:MM');
|
||||||
|
state.time.s = formatDate(new Date(), 'SS');
|
||||||
|
state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
|
||||||
|
};
|
||||||
|
// 时间初始化定时器
|
||||||
|
const initSetTime = () => {
|
||||||
|
initTime();
|
||||||
|
state.setIntervalTime = window.setInterval(() => {
|
||||||
|
initTime();
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
// 锁屏时间定时器
|
||||||
|
const initLockScreen = () => {
|
||||||
|
if (themeConfig.value.isLockScreen) {
|
||||||
|
state.isShowLockScreenIntervalTime = window.setInterval(() => {
|
||||||
|
if (themeConfig.value.lockScreenTime <= 1) {
|
||||||
|
state.isShowLockScreen = true;
|
||||||
|
setLocalThemeConfig();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
themeConfig.value.lockScreenTime--;
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
clearInterval(state.isShowLockScreenIntervalTime);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 存储布局配置
|
||||||
|
const setLocalThemeConfig = () => {
|
||||||
|
themeConfig.value.isDrawer = false;
|
||||||
|
Local.set('themeConfig', themeConfig.value);
|
||||||
|
};
|
||||||
|
// 密码输入点击事件
|
||||||
|
const onLockScreenSubmit = () => {
|
||||||
|
themeConfig.value.isLockScreen = false;
|
||||||
|
themeConfig.value.lockScreenTime = 30;
|
||||||
|
setLocalThemeConfig();
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initGetElement();
|
||||||
|
initSetTime();
|
||||||
|
initLockScreen();
|
||||||
|
});
|
||||||
|
// 页面卸载时
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.clearInterval(state.setIntervalTime);
|
||||||
|
window.clearInterval(state.isShowLockScreenIntervalTime);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -8,36 +8,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutLogo">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
|
|
||||||
import logoMini from '/@/assets/logo-mini.svg';
|
import logoMini from '/@/assets/logo-mini.svg';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutLogo',
|
const storesThemeConfig = useThemeConfig();
|
||||||
setup() {
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const storesThemeConfig = useThemeConfig();
|
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
// 设置 logo 的显示。classic 经典布局默认显示 logo
|
||||||
// 设置 logo 的显示。classic 经典布局默认显示 logo
|
const setShowLogo = computed(() => {
|
||||||
const setShowLogo = computed(() => {
|
let { isCollapse, layout } = themeConfig.value;
|
||||||
let { isCollapse, layout } = themeConfig.value;
|
return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
|
||||||
return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
|
|
||||||
});
|
|
||||||
// logo 点击实现菜单展开/收起
|
|
||||||
const onThemeConfigChange = () => {
|
|
||||||
if (themeConfig.value.layout === 'transverse') return false;
|
|
||||||
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
logoMini,
|
|
||||||
setShowLogo,
|
|
||||||
themeConfig,
|
|
||||||
onThemeConfigChange,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
// logo 点击实现菜单展开/收起
|
||||||
|
const onThemeConfigChange = () => {
|
||||||
|
if (themeConfig.value.layout === 'transverse') return false;
|
||||||
|
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -1,35 +1,71 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="layout-container flex-center">
|
<el-container class="layout-container flex-center">
|
||||||
<Header />
|
<LayoutHeader />
|
||||||
<el-container class="layout-mian-height-50">
|
<el-container class="layout-mian-height-50">
|
||||||
<Aside />
|
<LayoutAside />
|
||||||
<div class="flex-center layout-backtop">
|
<div class="flex-center layout-backtop">
|
||||||
<TagsView v-if="themeConfig.isTagsview" />
|
<LayoutTagsView v-if="isTagsview" />
|
||||||
<Main style="padding: 10px !important" />
|
<LayoutMain ref="layoutMainRef" />
|
||||||
</div>
|
</div>
|
||||||
</el-container>
|
</el-container>
|
||||||
<el-backtop target=".layout-backtop .el-main .el-scrollbar__wrap"></el-backtop>
|
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutClassic">
|
||||||
import { defineComponent } from 'vue';
|
import { defineAsyncComponent, computed, ref, watch, nextTick, onMounted } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import Aside from '/@/layout/component/aside.vue';
|
|
||||||
import Header from '/@/layout/component/header.vue';
|
|
||||||
import Main from '/@/layout/component/main.vue';
|
|
||||||
import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutClassic',
|
const LayoutAside = defineAsyncComponent(() => import('/@/layout/component/aside.vue'));
|
||||||
components: { Aside, Header, Main, TagsView },
|
const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
|
||||||
setup() {
|
const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
|
||||||
const storesThemeConfig = useThemeConfig();
|
const LayoutTagsView = defineAsyncComponent(() => import('/@/layout/navBars/tagsView/tagsView.vue'));
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
return {
|
// 定义变量内容
|
||||||
themeConfig,
|
const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
|
||||||
};
|
const route = useRoute();
|
||||||
},
|
const storesThemeConfig = useThemeConfig();
|
||||||
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
|
|
||||||
|
// 判断是否显示 tasgview
|
||||||
|
const isTagsview = computed(() => {
|
||||||
|
return themeConfig.value.isTagsview;
|
||||||
});
|
});
|
||||||
|
// 重置滚动条高度，更新子级 scrollbar
|
||||||
|
const updateScrollbar = () => {
|
||||||
|
layoutMainRef.value?.layoutMainScrollbarRef.update();
|
||||||
|
};
|
||||||
|
// 重置滚动条高度，由于组件是异步引入的
|
||||||
|
const initScrollBarHeight = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
updateScrollbar();
|
||||||
|
// '!' not null 断言操作符，不执行运行时检查
|
||||||
|
layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
});
|
||||||
|
// 监听路由的变化，切换界面时，滚动条置顶
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||||
|
watch(
|
||||||
|
themeConfig,
|
||||||
|
() => {
|
||||||
|
updateScrollbar();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,41 +1,71 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="layout-container">
|
<el-container class="layout-container">
|
||||||
<ColumnsAside />
|
<ColumnsAside />
|
||||||
<div class="layout-columns-warp">
|
<el-container class="layout-columns-warp layout-container-view h100">
|
||||||
<Aside />
|
<LayoutAside />
|
||||||
<el-container class="flex-center layout-backtop" :class="{ 'layout-backtop': !isFixedHeader }">
|
<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
|
||||||
<Header v-if="isFixedHeader" />
|
<LayoutHeader />
|
||||||
<el-scrollbar :class="{ 'layout-backtop': isFixedHeader }">
|
<LayoutMain ref="layoutMainRef" />
|
||||||
<Header v-if="!isFixedHeader" />
|
</el-scrollbar>
|
||||||
<Main style="padding: 10px !important;height: 100vh" />
|
</el-container>
|
||||||
</el-scrollbar>
|
|
||||||
</el-container>
|
|
||||||
</div>
|
|
||||||
<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
|
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutColumns">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import Aside from '/@/layout/component/aside.vue';
|
|
||||||
import Header from '/@/layout/component/header.vue';
|
|
||||||
import Main from '/@/layout/component/main.vue';
|
|
||||||
import ColumnsAside from '/@/layout/component/columnsAside.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutColumns',
|
const LayoutAside = defineAsyncComponent(() => import('/@/layout/component/aside.vue'));
|
||||||
components: { Aside, Header, Main, ColumnsAside },
|
const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
|
||||||
setup() {
|
const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
|
||||||
const storesThemeConfig = useThemeConfig();
|
const ColumnsAside = defineAsyncComponent(() => import('/@/layout/component/columnsAside.vue'));
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
const isFixedHeader = computed(() => {
|
// 定义变量内容
|
||||||
return themeConfig.value.isFixedHeader;
|
const layoutScrollbarRef = ref<RefType>('');
|
||||||
});
|
const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
|
||||||
return {
|
const route = useRoute();
|
||||||
isFixedHeader,
|
const storesThemeConfig = useThemeConfig();
|
||||||
};
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
},
|
|
||||||
|
// 重置滚动条高度
|
||||||
|
const updateScrollbar = () => {
|
||||||
|
// 更新父级 scrollbar
|
||||||
|
layoutScrollbarRef.value.update();
|
||||||
|
// 更新子级 scrollbar
|
||||||
|
layoutMainRef.value!.layoutMainScrollbarRef.update();
|
||||||
|
};
|
||||||
|
// 重置滚动条高度，由于组件是异步引入的
|
||||||
|
const initScrollBarHeight = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
updateScrollbar();
|
||||||
|
layoutScrollbarRef.value.wrapRef.scrollTop = 0;
|
||||||
|
layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initScrollBarHeight();
|
||||||
});
|
});
|
||||||
|
// 监听路由的变化，切换界面时，滚动条置顶
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||||
|
watch(
|
||||||
|
themeConfig,
|
||||||
|
() => {
|
||||||
|
updateScrollbar();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,47 +1,71 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="layout-container">
|
<el-container class="layout-container">
|
||||||
<Aside />
|
<LayoutAside />
|
||||||
<el-container class="flex-center" :class="{ 'layout-backtop': !isFixedHeader }">
|
<el-container class="layout-container-view h100">
|
||||||
<Header v-if="isFixedHeader" />
|
<el-scrollbar ref="layoutScrollbarRef" class="layout-backtop">
|
||||||
<el-scrollbar ref="layoutDefaultsScrollbarRef" :class="{ 'layout-backtop': isFixedHeader }">
|
<LayoutHeader />
|
||||||
<Header v-if="!isFixedHeader" />
|
<LayoutMain ref="layoutMainRef" />
|
||||||
<Main style="padding: 10px !important;height: 100vh" />
|
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</el-container>
|
</el-container>
|
||||||
<el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
|
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutDefaults">
|
||||||
import { computed, getCurrentInstance, watch, defineComponent } from 'vue';
|
import { defineAsyncComponent, watch, onMounted, nextTick, ref } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import Aside from '/@/layout/component/aside.vue';
|
import { NextLoading } from '/@/utils/loading';
|
||||||
import Header from '/@/layout/component/header.vue';
|
|
||||||
import Main from '/@/layout/component/main.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutDefaults',
|
const LayoutAside = defineAsyncComponent(() => import('/@/layout/component/aside.vue'));
|
||||||
components: { Aside, Header, Main },
|
const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
|
||||||
setup() {
|
const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
|
||||||
const { proxy } = <any>getCurrentInstance();
|
|
||||||
const route = useRoute();
|
// 定义变量内容
|
||||||
const storesThemeConfig = useThemeConfig();
|
const layoutScrollbarRef = ref<RefType>('');
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
|
||||||
const isFixedHeader = computed(() => {
|
const route = useRoute();
|
||||||
return themeConfig.value.isFixedHeader;
|
const storesThemeConfig = useThemeConfig();
|
||||||
});
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
// 监听路由的变化
|
|
||||||
watch(
|
// 重置滚动条高度
|
||||||
() => route.path,
|
const updateScrollbar = () => {
|
||||||
() => {
|
// 更新父级 scrollbar
|
||||||
proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0;
|
layoutScrollbarRef.value.update();
|
||||||
}
|
// 更新子级 scrollbar
|
||||||
);
|
layoutMainRef.value!.layoutMainScrollbarRef.update();
|
||||||
return {
|
};
|
||||||
isFixedHeader,
|
// 重置滚动条高度，由于组件是异步引入的
|
||||||
};
|
const initScrollBarHeight = () => {
|
||||||
},
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
updateScrollbar();
|
||||||
|
layoutScrollbarRef.value.wrapRef.scrollTop = 0;
|
||||||
|
layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
NextLoading.done(600);
|
||||||
});
|
});
|
||||||
|
// 监听路由的变化，切换界面时，滚动条置顶
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||||
|
watch(
|
||||||
|
themeConfig,
|
||||||
|
() => {
|
||||||
|
updateScrollbar();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,17 +1,58 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="layout-container flex-center layout-backtop">
|
<el-container class="layout-container flex-center layout-backtop">
|
||||||
<Header />
|
<LayoutHeader />
|
||||||
<Main style="padding: 10px !important" />
|
<LayoutMain ref="layoutMainRef" />
|
||||||
<el-backtop target=".layout-backtop .el-main .el-scrollbar__wrap"></el-backtop>
|
|
||||||
</el-container>
|
</el-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutTransverse">
|
||||||
import Header from '/@/layout/component/header.vue';
|
import { defineAsyncComponent, ref, watch, nextTick, onMounted } from 'vue';
|
||||||
import Main from '/@/layout/component/main.vue';
|
import { useRoute } from 'vue-router';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
|
|
||||||
export default {
|
// 引入组件
|
||||||
name: 'layoutTransverse',
|
const LayoutHeader = defineAsyncComponent(() => import('/@/layout/component/header.vue'));
|
||||||
components: { Header, Main },
|
const LayoutMain = defineAsyncComponent(() => import('/@/layout/component/main.vue'));
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const layoutMainRef = ref<InstanceType<typeof LayoutMain>>();
|
||||||
|
const storesThemeConfig = useThemeConfig();
|
||||||
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
// 重置滚动条高度，更新子级 scrollbar
|
||||||
|
const updateScrollbar = () => {
|
||||||
|
layoutMainRef.value!.layoutMainScrollbarRef.update();
|
||||||
};
|
};
|
||||||
|
// 重置滚动条高度，由于组件是异步引入的
|
||||||
|
const initScrollBarHeight = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
updateScrollbar();
|
||||||
|
layoutMainRef.value!.layoutMainScrollbarRef.wrapRef.scrollTop = 0;
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
});
|
||||||
|
// 监听路由的变化，切换界面时，滚动条置顶
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
initScrollBarHeight();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
|
||||||
|
watch(
|
||||||
|
themeConfig,
|
||||||
|
() => {
|
||||||
|
updateScrollbar();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -8,8 +8,8 @@
|
|||||||
/>
|
/>
|
||||||
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
|
<el-breadcrumb class="layout-navbars-breadcrumb-hide">
|
||||||
<transition-group name="breadcrumb">
|
<transition-group name="breadcrumb">
|
||||||
<el-breadcrumb-item v-for="(v, k) in breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
|
<el-breadcrumb-item v-for="(v, k) in state.breadcrumbList" :key="!v.meta.tagsViewName ? v.meta.title : v.meta.tagsViewName">
|
||||||
<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
|
<span v-if="k === state.breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">
|
||||||
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
|
<SvgIcon :name="v.meta.icon" class="layout-navbars-breadcrumb-iconfont" v-if="themeConfig.isBreadcrumbIcon" />
|
||||||
<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
|
<div v-if="!v.meta.tagsViewName">{{ $t(v.meta.title) }}</div>
|
||||||
<div v-else>{{ v.meta.tagsViewName }}</div>
|
<div v-else>{{ v.meta.tagsViewName }}</div>
|
||||||
@@ -23,8 +23,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutBreadcrumb">
|
||||||
import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
|
import { reactive, computed, onMounted } from 'vue';
|
||||||
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
import other from '/@/utils/other';
|
import other from '/@/utils/other';
|
||||||
@@ -32,93 +32,76 @@ import { storeToRefs } from 'pinia';
|
|||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
import { useRoutesList } from '/@/stores/routesList';
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 定义变量内容
|
||||||
interface BreadcrumbState {
|
const stores = useRoutesList();
|
||||||
breadcrumbList: Array<any>;
|
const storesThemeConfig = useThemeConfig();
|
||||||
routeSplit: Array<string>;
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
routeSplitFirst: string;
|
const { routesList } = storeToRefs(stores);
|
||||||
routeSplitIndex: number;
|
const route = useRoute();
|
||||||
}
|
const router = useRouter();
|
||||||
|
const state = reactive<BreadcrumbState>({
|
||||||
|
breadcrumbList: [],
|
||||||
|
routeSplit: [],
|
||||||
|
routeSplitFirst: '',
|
||||||
|
routeSplitIndex: 1,
|
||||||
|
});
|
||||||
|
|
||||||
export default defineComponent({
|
// 动态设置经典、横向布局不显示
|
||||||
name: 'layoutBreadcrumb',
|
const isShowBreadcrumb = computed(() => {
|
||||||
setup() {
|
initRouteSplit(route.path);
|
||||||
const stores = useRoutesList();
|
const { layout, isBreadcrumb } = themeConfig.value;
|
||||||
const storesThemeConfig = useThemeConfig();
|
if (layout === 'classic' || layout === 'transverse') return false;
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
else return isBreadcrumb ? true : false;
|
||||||
const { routesList } = storeToRefs(stores);
|
});
|
||||||
const route = useRoute();
|
// 面包屑点击时
|
||||||
const router = useRouter();
|
const onBreadcrumbClick = (v: RouteItem) => {
|
||||||
const state = reactive<BreadcrumbState>({
|
const { redirect, path } = v;
|
||||||
breadcrumbList: [],
|
if (redirect) router.push(redirect);
|
||||||
routeSplit: [],
|
else router.push(path);
|
||||||
routeSplitFirst: '',
|
};
|
||||||
routeSplitIndex: 1,
|
// 展开/收起左侧菜单点击
|
||||||
|
const onThemeConfigChange = () => {
|
||||||
|
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
||||||
|
setLocalThemeConfig();
|
||||||
|
};
|
||||||
|
// 存储布局配置
|
||||||
|
const setLocalThemeConfig = () => {
|
||||||
|
Local.remove('themeConfig');
|
||||||
|
Local.set('themeConfig', themeConfig.value);
|
||||||
|
};
|
||||||
|
// 处理面包屑数据
|
||||||
|
const getBreadcrumbList = (arr: RouteItems) => {
|
||||||
|
arr.forEach((item: RouteItem) => {
|
||||||
|
state.routeSplit.forEach((v: string, k: number, arrs: string[]) => {
|
||||||
|
if (state.routeSplitFirst === item.path) {
|
||||||
|
state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
|
||||||
|
state.breadcrumbList.push(item);
|
||||||
|
state.routeSplitIndex++;
|
||||||
|
if (item.children) getBreadcrumbList(item.children);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
// 动态设置经典、横向布局不显示
|
});
|
||||||
const isShowBreadcrumb = computed(() => {
|
};
|
||||||
initRouteSplit(route.path);
|
// 当前路由字符串切割成数组，并删除第一项空内容
|
||||||
const { layout, isBreadcrumb } = themeConfig.value;
|
const initRouteSplit = (path: string) => {
|
||||||
if (layout === 'classic' || layout === 'transverse') return false;
|
if (!themeConfig.value.isBreadcrumb) return false;
|
||||||
else return isBreadcrumb ? true : false;
|
state.breadcrumbList = [routesList.value[0]];
|
||||||
});
|
state.routeSplit = path.split('/');
|
||||||
// 面包屑点击时
|
state.routeSplit.shift();
|
||||||
const onBreadcrumbClick = (v: any) => {
|
state.routeSplitFirst = `/${state.routeSplit[0]}`;
|
||||||
const { redirect, path } = v;
|
state.routeSplitIndex = 1;
|
||||||
if (redirect) router.push(redirect);
|
getBreadcrumbList(routesList.value);
|
||||||
else router.push(path);
|
if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
|
||||||
};
|
if (state.breadcrumbList.length > 0)
|
||||||
// 展开/收起左侧菜单点击
|
state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(<RouteToFrom>route);
|
||||||
const onThemeConfigChange = () => {
|
};
|
||||||
themeConfig.value.isCollapse = !themeConfig.value.isCollapse;
|
// 页面加载时
|
||||||
setLocalThemeConfig();
|
onMounted(() => {
|
||||||
};
|
initRouteSplit(route.path);
|
||||||
// 存储布局配置
|
});
|
||||||
const setLocalThemeConfig = () => {
|
// 路由更新时
|
||||||
Local.remove('themeConfig');
|
onBeforeRouteUpdate((to) => {
|
||||||
Local.set('themeConfig', themeConfig.value);
|
initRouteSplit(to.path);
|
||||||
};
|
|
||||||
// 处理面包屑数据
|
|
||||||
const getBreadcrumbList = (arr: Array<string>) => {
|
|
||||||
arr.forEach((item: any) => {
|
|
||||||
state.routeSplit.forEach((v: any, k: number, arrs: any) => {
|
|
||||||
if (state.routeSplitFirst === item.path) {
|
|
||||||
state.routeSplitFirst += `/${arrs[state.routeSplitIndex]}`;
|
|
||||||
state.breadcrumbList.push(item);
|
|
||||||
state.routeSplitIndex++;
|
|
||||||
if (item.children) getBreadcrumbList(item.children);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 当前路由字符串切割成数组，并删除第一项空内容
|
|
||||||
const initRouteSplit = (path: string) => {
|
|
||||||
if (!themeConfig.value.isBreadcrumb) return false;
|
|
||||||
state.breadcrumbList = [routesList.value[0]];
|
|
||||||
state.routeSplit = path.split('/');
|
|
||||||
state.routeSplit.shift();
|
|
||||||
state.routeSplitFirst = `/${state.routeSplit[0]}`;
|
|
||||||
state.routeSplitIndex = 1;
|
|
||||||
getBreadcrumbList(routesList.value);
|
|
||||||
if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift();
|
|
||||||
if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route);
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initRouteSplit(route.path);
|
|
||||||
});
|
|
||||||
// 路由更新时
|
|
||||||
onBeforeRouteUpdate((to) => {
|
|
||||||
initRouteSplit(to.path);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
onThemeConfigChange,
|
|
||||||
isShowBreadcrumb,
|
|
||||||
themeConfig,
|
|
||||||
onBreadcrumbClick,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -6,26 +6,18 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutCloseFull">
|
||||||
import { defineComponent } from 'vue';
|
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutCloseFull',
|
const stores = useTagsViewRoutes();
|
||||||
setup() {
|
const { isTagsViewCurrenFull } = storeToRefs(stores);
|
||||||
const stores = useTagsViewRoutes();
|
|
||||||
const { isTagsViewCurrenFull } = storeToRefs(stores);
|
// 关闭当前全屏
|
||||||
// 关闭当前全屏
|
const onCloseFullscreen = () => {
|
||||||
const onCloseFullscreen = () => {
|
stores.setCurrenFullscreen(false);
|
||||||
stores.setCurrenFullscreen(false);
|
};
|
||||||
};
|
|
||||||
return {
|
|
||||||
isTagsViewCurrenFull,
|
|
||||||
onCloseFullscreen,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -2,109 +2,97 @@
|
|||||||
<div class="layout-navbars-breadcrumb-index">
|
<div class="layout-navbars-breadcrumb-index">
|
||||||
<Logo v-if="setIsShowLogo" />
|
<Logo v-if="setIsShowLogo" />
|
||||||
<Breadcrumb />
|
<Breadcrumb />
|
||||||
<Horizontal :menuList="menuList" v-if="isLayoutTransverse" />
|
<Horizontal :menuList="state.menuList" v-if="isLayoutTransverse" />
|
||||||
<User />
|
<User />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutBreadcrumbIndex">
|
||||||
import { computed, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
|
import { defineAsyncComponent, computed, reactive, onMounted, onUnmounted } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
import { useRoutesList } from '/@/stores/routesList';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import Breadcrumb from '/@/layout/navBars/breadcrumb/breadcrumb.vue';
|
import mittBus from '/@/utils/mitt';
|
||||||
import User from '/@/layout/navBars/breadcrumb/user.vue';
|
|
||||||
import Logo from '/@/layout/logo/index.vue';
|
|
||||||
import Horizontal from '/@/layout/navMenu/horizontal.vue';
|
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 引入组件
|
||||||
interface IndexState {
|
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
|
||||||
menuList: object[];
|
const User = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/user.vue'));
|
||||||
}
|
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
|
||||||
|
const Horizontal = defineAsyncComponent(() => import('/@/layout/navMenu/horizontal.vue'));
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutBreadcrumbIndex',
|
const stores = useRoutesList();
|
||||||
components: { Breadcrumb, User, Logo, Horizontal },
|
const storesThemeConfig = useThemeConfig();
|
||||||
setup() {
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const { routesList } = storeToRefs(stores);
|
||||||
const stores = useRoutesList();
|
const route = useRoute();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const state = reactive({
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
menuList: [] as RouteItems,
|
||||||
const { routesList } = storeToRefs(stores);
|
});
|
||||||
const route = useRoute();
|
|
||||||
const state = reactive<IndexState>({
|
// 设置 logo 显示/隐藏
|
||||||
menuList: [],
|
const setIsShowLogo = computed(() => {
|
||||||
|
let { isShowLogo, layout } = themeConfig.value;
|
||||||
|
return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
|
||||||
|
});
|
||||||
|
// 设置是否显示横向导航菜单
|
||||||
|
const isLayoutTransverse = computed(() => {
|
||||||
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||||
|
return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
|
||||||
|
});
|
||||||
|
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
||||||
|
const setFilterRoutes = () => {
|
||||||
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||||
|
if (layout === 'classic' && isClassicSplitMenu) {
|
||||||
|
state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
|
||||||
|
const resData = setSendClassicChildren(route.path);
|
||||||
|
mittBus.emit('setSendClassicChildren', resData);
|
||||||
|
} else {
|
||||||
|
state.menuList = filterRoutesFun(routesList.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 设置了分割菜单时，删除底下 children
|
||||||
|
const delClassicChildren = <T extends ChilType>(arr: T[]): T[] => {
|
||||||
|
arr.map((v: T) => {
|
||||||
|
if (v.children) delete v.children;
|
||||||
|
});
|
||||||
|
return arr;
|
||||||
|
};
|
||||||
|
// 路由过滤递归函数
|
||||||
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
||||||
|
return arr
|
||||||
|
.filter((item: T) => !item.meta?.isHide)
|
||||||
|
.map((item: T) => {
|
||||||
|
item = Object.assign({}, item);
|
||||||
|
if (item.children) item.children = filterRoutesFun(item.children);
|
||||||
|
return item;
|
||||||
});
|
});
|
||||||
// 设置 logo 显示/隐藏
|
};
|
||||||
const setIsShowLogo = computed(() => {
|
// 传送当前子级数据到菜单中
|
||||||
let { isShowLogo, layout } = themeConfig.value;
|
const setSendClassicChildren = (path: string) => {
|
||||||
return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse');
|
const currentPathSplit = path.split('/');
|
||||||
});
|
let currentData: MittMenu = { children: [] };
|
||||||
// 设置是否显示横向导航菜单
|
filterRoutesFun(routesList.value).map((v: RouteItem, k: number) => {
|
||||||
const isLayoutTransverse = computed(() => {
|
if (v.path === `/${currentPathSplit[1]}`) {
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
v['k'] = k;
|
||||||
return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic');
|
currentData['item'] = { ...v };
|
||||||
});
|
currentData['children'] = [{ ...v }];
|
||||||
// 设置/过滤路由（非静态路由/是否显示在菜单中）
|
if (v.children) currentData['children'] = v.children;
|
||||||
const setFilterRoutes = () => {
|
}
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
});
|
||||||
if (layout === 'classic' && isClassicSplitMenu) {
|
return currentData;
|
||||||
state.menuList = delClassicChildren(filterRoutesFun(routesList.value));
|
};
|
||||||
const resData = setSendClassicChildren(route.path);
|
// 页面加载时
|
||||||
proxy.mittBus.emit('setSendClassicChildren', resData);
|
onMounted(() => {
|
||||||
} else {
|
setFilterRoutes();
|
||||||
state.menuList = filterRoutesFun(routesList.value);
|
mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
||||||
}
|
setFilterRoutes();
|
||||||
};
|
});
|
||||||
// 设置了分割菜单时，删除底下 children
|
});
|
||||||
const delClassicChildren = (arr: Array<object>) => {
|
// 页面卸载时
|
||||||
arr.map((v: any) => {
|
onUnmounted(() => {
|
||||||
if (v.children) delete v.children;
|
mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
|
||||||
});
|
|
||||||
return arr;
|
|
||||||
};
|
|
||||||
// 路由过滤递归函数
|
|
||||||
const filterRoutesFun = (arr: Array<string>) => {
|
|
||||||
return arr
|
|
||||||
.filter((item: any) => !item.meta.isHide)
|
|
||||||
.map((item: any) => {
|
|
||||||
item = Object.assign({}, item);
|
|
||||||
if (item.children) item.children = filterRoutesFun(item.children);
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 传送当前子级数据到菜单中
|
|
||||||
const setSendClassicChildren = (path: string) => {
|
|
||||||
const currentPathSplit = path.split('/');
|
|
||||||
let currentData: any = {};
|
|
||||||
filterRoutesFun(routesList.value).map((v, k) => {
|
|
||||||
if (v.path === `/${currentPathSplit[1]}`) {
|
|
||||||
v['k'] = k;
|
|
||||||
currentData['item'] = [{ ...v }];
|
|
||||||
currentData['children'] = [{ ...v }];
|
|
||||||
if (v.children) currentData['children'] = v.children;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return currentData;
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
setFilterRoutes();
|
|
||||||
proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
|
|
||||||
setFilterRoutes();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 页面卸载时
|
|
||||||
onUnmounted(() => {
|
|
||||||
proxy.mittBus.off('getBreadcrumbIndexSetFilterRoutes', () => {});
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
setIsShowLogo,
|
|
||||||
isLayoutTransverse,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,136 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-search-dialog">
|
<div class="layout-search-dialog">
|
||||||
<el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
|
<el-dialog v-model="state.isShowSearch" destroy-on-close :show-close="false">
|
||||||
<el-autocomplete
|
<template #footer>
|
||||||
v-model="menuQuery"
|
<el-autocomplete
|
||||||
:fetch-suggestions="menuSearch"
|
v-model="state.menuQuery"
|
||||||
:placeholder="$t('message.user.searchPlaceholder')"
|
:fetch-suggestions="menuSearch"
|
||||||
ref="layoutMenuAutocompleteRef"
|
:placeholder="$t('message.user.searchPlaceholder')"
|
||||||
@select="onHandleSelect"
|
ref="layoutMenuAutocompleteRef"
|
||||||
@blur="onSearchBlur"
|
@select="onHandleSelect"
|
||||||
>
|
:fit-input-width="true"
|
||||||
<template #prefix>
|
>
|
||||||
<el-icon class="el-input__icon">
|
<template #prefix>
|
||||||
<ele-Search />
|
<el-icon class="el-input__icon">
|
||||||
</el-icon>
|
<ele-Search />
|
||||||
</template>
|
</el-icon>
|
||||||
<template #default="{ item }">
|
</template>
|
||||||
<div>
|
<template #default="{ item }">
|
||||||
<SvgIcon :name="item.meta.icon" class="mr5" />
|
<div>
|
||||||
{{ $t(item.meta.title) }}
|
<SvgIcon :name="item.meta.icon" class="mr5" />
|
||||||
</div>
|
{{ $t(item.meta.title) }}
|
||||||
</template>
|
</div>
|
||||||
</el-autocomplete>
|
</template>
|
||||||
|
</el-autocomplete>
|
||||||
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutBreadcrumbSearch">
|
||||||
import { reactive, toRefs, defineComponent, ref, nextTick } from 'vue';
|
import { reactive, ref, nextTick } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 定义变量内容
|
||||||
interface SearchState {
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||||
isShowSearch: boolean;
|
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
|
||||||
menuQuery: string;
|
const layoutMenuAutocompleteRef = ref();
|
||||||
tagsViewList: object[];
|
const { t } = useI18n();
|
||||||
}
|
const router = useRouter();
|
||||||
interface Restaurant {
|
const state = reactive<SearchState>({
|
||||||
path: string;
|
isShowSearch: false,
|
||||||
meta: {
|
menuQuery: '',
|
||||||
title: string;
|
tagsViewList: [],
|
||||||
};
|
});
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 搜索弹窗打开
|
||||||
name: 'layoutBreadcrumbSearch',
|
const openSearch = () => {
|
||||||
setup() {
|
state.menuQuery = '';
|
||||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
state.isShowSearch = true;
|
||||||
const { tagsViewRoutes } = storeToRefs(storesTagsViewRoutes);
|
initTageView();
|
||||||
const layoutMenuAutocompleteRef = ref();
|
nextTick(() => {
|
||||||
const { t } = useI18n();
|
setTimeout(() => {
|
||||||
const router = useRouter();
|
layoutMenuAutocompleteRef.value.focus();
|
||||||
const state = reactive<SearchState>({
|
|
||||||
isShowSearch: false,
|
|
||||||
menuQuery: '',
|
|
||||||
tagsViewList: [],
|
|
||||||
});
|
});
|
||||||
// 搜索弹窗打开
|
});
|
||||||
const openSearch = () => {
|
};
|
||||||
state.menuQuery = '';
|
// 搜索弹窗关闭
|
||||||
state.isShowSearch = true;
|
const closeSearch = () => {
|
||||||
initTageView();
|
state.isShowSearch = false;
|
||||||
nextTick(() => {
|
};
|
||||||
setTimeout(() => {
|
// 菜单搜索数据过滤
|
||||||
layoutMenuAutocompleteRef.value.focus();
|
const menuSearch = (queryString: string, cb: Function) => {
|
||||||
});
|
let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
|
||||||
});
|
cb(results);
|
||||||
};
|
};
|
||||||
// 搜索弹窗关闭
|
// 菜单搜索过滤
|
||||||
const closeSearch = () => {
|
const createFilter = (queryString: string) => {
|
||||||
state.isShowSearch = false;
|
return (restaurant: RouteItem) => {
|
||||||
};
|
return (
|
||||||
// 菜单搜索数据过滤
|
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
||||||
const menuSearch = (queryString: string, cb: Function) => {
|
restaurant.meta!.title!.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
||||||
let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
|
t(restaurant.meta!.title!).indexOf(queryString.toLowerCase()) > -1
|
||||||
cb(results);
|
);
|
||||||
};
|
};
|
||||||
// 菜单搜索过滤
|
};
|
||||||
const createFilter: any = (queryString: string) => {
|
// 初始化菜单数据
|
||||||
return (restaurant: Restaurant) => {
|
const initTageView = () => {
|
||||||
return (
|
if (state.tagsViewList.length > 0) return false;
|
||||||
restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
tagsViewRoutes.value.map((v: RouteItem) => {
|
||||||
restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 ||
|
if (!v.meta?.isHide) state.tagsViewList.push({ ...v });
|
||||||
t(restaurant.meta.title).indexOf(queryString.toLowerCase()) > -1
|
});
|
||||||
);
|
};
|
||||||
};
|
// 当前菜单选中时
|
||||||
};
|
const onHandleSelect = (item: RouteItem) => {
|
||||||
// 初始化菜单数据
|
let { path, redirect } = item;
|
||||||
const initTageView = () => {
|
if (item.meta?.isLink && !item.meta?.isIframe) window.open(item.meta?.isLink);
|
||||||
if (state.tagsViewList.length > 0) return false;
|
else if (redirect) router.push(redirect);
|
||||||
tagsViewRoutes.value.map((v: any) => {
|
else router.push(path);
|
||||||
if (!v.meta.isHide) state.tagsViewList.push({ ...v });
|
closeSearch();
|
||||||
});
|
};
|
||||||
};
|
|
||||||
// 当前菜单选中时
|
// 暴露变量
|
||||||
const onHandleSelect = (item: any) => {
|
defineExpose({
|
||||||
let { path, redirect } = item;
|
openSearch,
|
||||||
if (item.meta.isLink && !item.meta.isIframe) window.open(item.meta.isLink);
|
|
||||||
else if (redirect) router.push(redirect);
|
|
||||||
else router.push(path);
|
|
||||||
closeSearch();
|
|
||||||
};
|
|
||||||
// input 失去焦点时
|
|
||||||
const onSearchBlur = () => {
|
|
||||||
closeSearch();
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
layoutMenuAutocompleteRef,
|
|
||||||
openSearch,
|
|
||||||
closeSearch,
|
|
||||||
menuSearch,
|
|
||||||
onHandleSelect,
|
|
||||||
onSearchBlur,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.layout-search-dialog {
|
.layout-search-dialog {
|
||||||
|
position: relative;
|
||||||
:deep(.el-dialog) {
|
:deep(.el-dialog) {
|
||||||
box-shadow: unset !important;
|
.el-dialog__header,
|
||||||
border-radius: 0 !important;
|
.el-dialog__body {
|
||||||
background: rgba(0, 0, 0, 0.5);
|
display: none;
|
||||||
|
}
|
||||||
|
.el-dialog__footer {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: -53vh;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
:deep(.el-autocomplete) {
|
:deep(.el-autocomplete) {
|
||||||
width: 560px;
|
width: 560px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100px;
|
top: 150px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,6 +59,17 @@
|
|||||||
<el-color-picker v-model="getThemeConfig.menuBarColor" size="default" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
|
<el-color-picker v-model="getThemeConfig.menuBarColor" size="default" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="layout-breadcrumb-seting-bar-flex">
|
||||||
|
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBarActiveColor') }}</div>
|
||||||
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
|
<el-color-picker
|
||||||
|
v-model="getThemeConfig.menuBarActiveColor"
|
||||||
|
size="default"
|
||||||
|
show-alpha
|
||||||
|
@change="onBgColorPickerChange('menuBarActiveColor')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorGradual') }}</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorGradual') }}</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
@@ -105,6 +116,17 @@
|
|||||||
></el-switch>
|
></el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
|
||||||
|
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuHoverPreload') }}</div>
|
||||||
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
|
<el-switch
|
||||||
|
v-model="getThemeConfig.isColumnsMenuHoverPreload"
|
||||||
|
size="small"
|
||||||
|
@change="onColumnsMenuHoverPreloadChange"
|
||||||
|
:disabled="getThemeConfig.layout !== 'columns'"
|
||||||
|
></el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 界面设置 -->
|
<!-- 界面设置 -->
|
||||||
<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
|
<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
|
||||||
@@ -216,12 +238,12 @@
|
|||||||
<el-switch v-model="getThemeConfig.isCacheTagsView" size="small" @change="setLocalThemeConfig"></el-switch>
|
<el-switch v-model="getThemeConfig.isCacheTagsView" size="small" @change="setLocalThemeConfig"></el-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: isMobile ? 0.5 : 1 }">
|
<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: state.isMobile ? 0.5 : 1 }">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="getThemeConfig.isSortableTagsView"
|
v-model="getThemeConfig.isSortableTagsView"
|
||||||
:disabled="isMobile ? true : false"
|
:disabled="state.isMobile ? true : false"
|
||||||
size="small"
|
size="small"
|
||||||
@change="onSortableTagsViewChange"
|
@change="onSortableTagsViewChange"
|
||||||
></el-switch>
|
></el-switch>
|
||||||
@@ -260,7 +282,7 @@
|
|||||||
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
<div class="layout-breadcrumb-seting-bar-flex mt14">
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWartermarkText') }}</div>
|
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWartermarkText') }}</div>
|
||||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||||
<el-input v-model="getThemeConfig.wartermarkText" size="default" style="width: 90px" @input="onWartermarkTextInput($event)"></el-input>
|
<el-input v-model="getThemeConfig.wartermarkText" size="default" style="width: 90px" @input="onWartermarkTextInput"></el-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -407,271 +429,257 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutBreadcrumbSeting">
|
||||||
import { nextTick, onUnmounted, onMounted, getCurrentInstance, defineComponent, computed, reactive, toRefs } from 'vue';
|
import { nextTick, onUnmounted, onMounted, computed, reactive } from 'vue';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { getLightColor, getDarkColor } from '/@/utils/theme';
|
import { useChangeColor } from '/@/utils/theme';
|
||||||
import { verifyAndSpace } from '/@/utils/toolsValidate';
|
import { verifyAndSpace } from '/@/utils/toolsValidate';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
import Watermark from '/@/utils/wartermark';
|
import Watermark from '/@/utils/wartermark';
|
||||||
import commonFunction from '/@/utils/commonFunction';
|
import commonFunction from '/@/utils/commonFunction';
|
||||||
import other from '/@/utils/other';
|
import other from '/@/utils/other';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutBreadcrumbSeting',
|
const { locale } = useI18n();
|
||||||
setup() {
|
const storesThemeConfig = useThemeConfig();
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const storesThemeConfig = useThemeConfig();
|
const { copyText } = commonFunction();
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { getLightColor, getDarkColor } = useChangeColor();
|
||||||
const { copyText } = commonFunction();
|
const state = reactive({
|
||||||
const state = reactive({
|
isMobile: false,
|
||||||
isMobile: false,
|
});
|
||||||
});
|
|
||||||
// 获取布局配置信息
|
// 获取布局配置信息
|
||||||
const getThemeConfig = computed(() => {
|
const getThemeConfig = computed(() => {
|
||||||
return themeConfig.value;
|
return themeConfig.value;
|
||||||
});
|
});
|
||||||
// 1、全局主题
|
// 1、全局主题
|
||||||
const onColorPickerChange = () => {
|
const onColorPickerChange = () => {
|
||||||
if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
|
if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
|
||||||
// 颜色加深
|
// 颜色加深
|
||||||
document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
|
document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
|
||||||
document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
|
document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
|
||||||
// 颜色变浅
|
// 颜色变浅
|
||||||
for (let i = 1; i <= 9; i++) {
|
for (let i = 1; i <= 9; i++) {
|
||||||
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
|
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
|
||||||
}
|
}
|
||||||
setDispatchThemeConfig();
|
setDispatchThemeConfig();
|
||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏
|
// 2、菜单 / 顶栏
|
||||||
const onBgColorPickerChange = (bg: string) => {
|
const onBgColorPickerChange = (bg: string) => {
|
||||||
document.documentElement.style.setProperty(`--next-bg-${bg}`, (<any>getThemeConfig.value)[bg]);
|
document.documentElement.style.setProperty(`--next-bg-${bg}`, themeConfig.value[bg]);
|
||||||
if (bg === 'menuBar') {
|
if (bg === 'menuBar') {
|
||||||
document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, <any>getLightColor(getThemeConfig.value.menuBar, 0.05));
|
document.documentElement.style.setProperty(`--next-bg-menuBar-light-1`, getLightColor(getThemeConfig.value.menuBar, 0.05));
|
||||||
}
|
}
|
||||||
onTopBarGradualChange();
|
onTopBarGradualChange();
|
||||||
onMenuBarGradualChange();
|
onMenuBarGradualChange();
|
||||||
onColumnsMenuBarGradualChange();
|
onColumnsMenuBarGradualChange();
|
||||||
setDispatchThemeConfig();
|
setDispatchThemeConfig();
|
||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||||
const onTopBarGradualChange = () => {
|
const onTopBarGradualChange = () => {
|
||||||
setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
|
setGraduaFun('.layout-navbars-breadcrumb-index', getThemeConfig.value.isTopBarColorGradual, getThemeConfig.value.topBar);
|
||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||||
const onMenuBarGradualChange = () => {
|
const onMenuBarGradualChange = () => {
|
||||||
setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
|
setGraduaFun('.layout-container .el-aside', getThemeConfig.value.isMenuBarColorGradual, getThemeConfig.value.menuBar);
|
||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||||
const onColumnsMenuBarGradualChange = () => {
|
const onColumnsMenuBarGradualChange = () => {
|
||||||
setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
|
setGraduaFun('.layout-container .layout-columns-aside', getThemeConfig.value.isColumnsMenuBarColorGradual, getThemeConfig.value.columnsMenuBar);
|
||||||
};
|
};
|
||||||
// 2、菜单 / 顶栏 --> 背景渐变函数
|
// 2、菜单 / 顶栏 --> 背景渐变函数
|
||||||
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
const setGraduaFun = (el: string, bool: boolean, color: string) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
let els = document.querySelector(el);
|
let els = document.querySelector(el);
|
||||||
if (!els) return false;
|
if (!els) return false;
|
||||||
document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
|
document.documentElement.style.setProperty('--el-menu-bg-color', document.documentElement.style.getPropertyValue('--next-bg-menuBar'));
|
||||||
if (bool) els.setAttribute('style', `background:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)}) !important;`);
|
if (bool) els.setAttribute('style', `background:linear-gradient(to bottom left , ${color}, ${getLightColor(color, 0.6)}) !important;`);
|
||||||
else els.setAttribute('style', ``);
|
else els.setAttribute('style', ``);
|
||||||
setLocalThemeConfig();
|
setLocalThemeConfig();
|
||||||
}, 200);
|
}, 200);
|
||||||
};
|
};
|
||||||
// 3、界面设置 --> 菜单水平折叠
|
// 2、分栏设置 ->
|
||||||
const onThemeConfigChange = () => {
|
const onColumnsMenuHoverPreloadChange = () => {
|
||||||
setDispatchThemeConfig();
|
setLocalThemeConfig();
|
||||||
};
|
};
|
||||||
// 3、界面设置 --> 固定 Header
|
// 3、界面设置 --> 菜单水平折叠
|
||||||
const onIsFixedHeaderChange = () => {
|
const onThemeConfigChange = () => {
|
||||||
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
|
setDispatchThemeConfig();
|
||||||
setLocalThemeConfig();
|
};
|
||||||
};
|
// 3、界面设置 --> 固定 Header
|
||||||
// 3、界面设置 --> 经典布局分割菜单
|
const onIsFixedHeaderChange = () => {
|
||||||
const onClassicSplitMenuChange = () => {
|
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value.isFixedHeader ? false : true;
|
||||||
getThemeConfig.value.isBreadcrumb = false;
|
setLocalThemeConfig();
|
||||||
setLocalThemeConfig();
|
};
|
||||||
proxy.mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
|
// 3、界面设置 --> 经典布局分割菜单
|
||||||
};
|
const onClassicSplitMenuChange = () => {
|
||||||
// 4、界面显示 --> 侧边栏 Logo
|
getThemeConfig.value.isBreadcrumb = false;
|
||||||
const onIsShowLogoChange = () => {
|
setLocalThemeConfig();
|
||||||
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
|
mittBus.emit('getBreadcrumbIndexSetFilterRoutes');
|
||||||
setLocalThemeConfig();
|
};
|
||||||
};
|
// 4、界面显示 --> 侧边栏 Logo
|
||||||
// 4、界面显示 --> 面包屑 Breadcrumb
|
const onIsShowLogoChange = () => {
|
||||||
const onIsBreadcrumbChange = () => {
|
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo ? false : true;
|
||||||
if (getThemeConfig.value.layout === 'classic') {
|
setLocalThemeConfig();
|
||||||
getThemeConfig.value.isClassicSplitMenu = false;
|
};
|
||||||
}
|
// 4、界面显示 --> 面包屑 Breadcrumb
|
||||||
setLocalThemeConfig();
|
const onIsBreadcrumbChange = () => {
|
||||||
};
|
if (getThemeConfig.value.layout === 'classic') {
|
||||||
// 4、界面显示 --> 开启 TagsView 拖拽
|
getThemeConfig.value.isClassicSplitMenu = false;
|
||||||
const onSortableTagsViewChange = () => {
|
}
|
||||||
proxy.mittBus.emit('openOrCloseSortable');
|
setLocalThemeConfig();
|
||||||
setLocalThemeConfig();
|
};
|
||||||
};
|
// 4、界面显示 --> 开启 TagsView 拖拽
|
||||||
// 4、界面显示 --> 开启 TagsView 共用
|
const onSortableTagsViewChange = () => {
|
||||||
const onShareTagsViewChange = () => {
|
mittBus.emit('openOrCloseSortable');
|
||||||
proxy.mittBus.emit('openShareTagsView');
|
setLocalThemeConfig();
|
||||||
setLocalThemeConfig();
|
};
|
||||||
};
|
// 4、界面显示 --> 开启 TagsView 共用
|
||||||
// 4、界面显示 --> 灰色模式/色弱模式
|
const onShareTagsViewChange = () => {
|
||||||
const onAddFilterChange = (attr: string) => {
|
mittBus.emit('openShareTagsView');
|
||||||
if (attr === 'grayscale') {
|
setLocalThemeConfig();
|
||||||
if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
|
};
|
||||||
} else {
|
// 4、界面显示 --> 灰色模式/色弱模式
|
||||||
if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
|
const onAddFilterChange = (attr: string) => {
|
||||||
}
|
if (attr === 'grayscale') {
|
||||||
const cssAttr =
|
if (getThemeConfig.value.isGrayscale) getThemeConfig.value.isInvert = false;
|
||||||
attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
|
} else {
|
||||||
const appEle: any = document.body;
|
if (getThemeConfig.value.isInvert) getThemeConfig.value.isGrayscale = false;
|
||||||
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
}
|
||||||
setLocalThemeConfig();
|
const cssAttr =
|
||||||
};
|
attr === 'grayscale' ? `grayscale(${getThemeConfig.value.isGrayscale ? 1 : 0})` : `invert(${getThemeConfig.value.isInvert ? '80%' : '0%'})`;
|
||||||
// 4、界面显示 --> 深色模式
|
const appEle = document.body;
|
||||||
const onAddDarkChange = () => {
|
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
||||||
const body = document.documentElement as HTMLElement;
|
setLocalThemeConfig();
|
||||||
if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
|
};
|
||||||
else body.setAttribute('data-theme', '');
|
// 4、界面显示 --> 深色模式
|
||||||
};
|
const onAddDarkChange = () => {
|
||||||
// 4、界面显示 --> 开启水印
|
const body = document.documentElement as HTMLElement;
|
||||||
const onWartermarkChange = () => {
|
if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
|
||||||
getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
|
else body.setAttribute('data-theme', '');
|
||||||
setLocalThemeConfig();
|
};
|
||||||
};
|
// 4、界面显示 --> 开启水印
|
||||||
// 4、界面显示 --> 水印文案
|
const onWartermarkChange = () => {
|
||||||
const onWartermarkTextInput = (val: any) => {
|
getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
|
||||||
getThemeConfig.value.wartermarkText = verifyAndSpace(val);
|
setLocalThemeConfig();
|
||||||
if (getThemeConfig.value.wartermarkText === '') return false;
|
};
|
||||||
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
|
// 4、界面显示 --> 水印文案
|
||||||
setLocalThemeConfig();
|
const onWartermarkTextInput = (val: string) => {
|
||||||
};
|
getThemeConfig.value.wartermarkText = verifyAndSpace(val);
|
||||||
// 5、布局切换
|
if (getThemeConfig.value.wartermarkText === '') return false;
|
||||||
const onSetLayout = (layout: string) => {
|
if (getThemeConfig.value.isWartermark) Watermark.set(getThemeConfig.value.wartermarkText);
|
||||||
Local.set('oldLayout', layout);
|
setLocalThemeConfig();
|
||||||
if (getThemeConfig.value.layout === layout) return false;
|
};
|
||||||
if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
|
// 5、布局切换
|
||||||
getThemeConfig.value.layout = layout;
|
const onSetLayout = (layout: string) => {
|
||||||
|
Local.set('oldLayout', layout);
|
||||||
|
if (getThemeConfig.value.layout === layout) return false;
|
||||||
|
if (layout === 'transverse') getThemeConfig.value.isCollapse = false;
|
||||||
|
getThemeConfig.value.layout = layout;
|
||||||
|
getThemeConfig.value.isDrawer = false;
|
||||||
|
initLayoutChangeFun();
|
||||||
|
};
|
||||||
|
// 设置布局切换函数
|
||||||
|
const initLayoutChangeFun = () => {
|
||||||
|
onBgColorPickerChange('menuBar');
|
||||||
|
onBgColorPickerChange('menuBarColor');
|
||||||
|
onBgColorPickerChange('menuBarActiveColor');
|
||||||
|
onBgColorPickerChange('topBar');
|
||||||
|
onBgColorPickerChange('topBarColor');
|
||||||
|
onBgColorPickerChange('columnsMenuBar');
|
||||||
|
onBgColorPickerChange('columnsMenuBarColor');
|
||||||
|
};
|
||||||
|
// 关闭弹窗时，初始化变量。变量用于处理 layoutScrollbarRef.value.update() 更新滚动条高度
|
||||||
|
const onDrawerClose = () => {
|
||||||
|
getThemeConfig.value.isFixedHeaderChange = false;
|
||||||
|
getThemeConfig.value.isShowLogoChange = false;
|
||||||
|
getThemeConfig.value.isDrawer = false;
|
||||||
|
setLocalThemeConfig();
|
||||||
|
};
|
||||||
|
// 布局配置弹窗打开
|
||||||
|
const openDrawer = () => {
|
||||||
|
getThemeConfig.value.isDrawer = true;
|
||||||
|
};
|
||||||
|
// 触发 store 布局配置更新
|
||||||
|
const setDispatchThemeConfig = () => {
|
||||||
|
setLocalThemeConfig();
|
||||||
|
setLocalThemeConfigStyle();
|
||||||
|
};
|
||||||
|
// 存储布局配置
|
||||||
|
const setLocalThemeConfig = () => {
|
||||||
|
Local.remove('themeConfig');
|
||||||
|
Local.set('themeConfig', getThemeConfig.value);
|
||||||
|
};
|
||||||
|
// 存储布局配置全局主题样式（html根标签）
|
||||||
|
const setLocalThemeConfigStyle = () => {
|
||||||
|
Local.set('themeConfigStyle', document.documentElement.style.cssText);
|
||||||
|
};
|
||||||
|
// 一键复制配置
|
||||||
|
const onCopyConfigClick = () => {
|
||||||
|
let copyThemeConfig = Local.get('themeConfig');
|
||||||
|
copyThemeConfig.isDrawer = false;
|
||||||
|
copyText(JSON.stringify(copyThemeConfig)).then(() => {
|
||||||
|
getThemeConfig.value.isDrawer = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 一键恢复默认
|
||||||
|
const onResetConfigClick = () => {
|
||||||
|
Local.clear();
|
||||||
|
window.location.reload();
|
||||||
|
// @ts-ignore
|
||||||
|
Local.set('version', __VERSION__);
|
||||||
|
};
|
||||||
|
// 初始化菜单样式等
|
||||||
|
const initSetStyle = () => {
|
||||||
|
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
||||||
|
onTopBarGradualChange();
|
||||||
|
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
||||||
|
onMenuBarGradualChange();
|
||||||
|
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
||||||
|
onColumnsMenuBarGradualChange();
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
|
||||||
|
if (!Local.get('frequency')) initLayoutChangeFun();
|
||||||
|
Local.set('frequency', 1);
|
||||||
|
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
|
||||||
|
mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => {
|
||||||
|
getThemeConfig.value.layout = res.layout;
|
||||||
getThemeConfig.value.isDrawer = false;
|
getThemeConfig.value.isDrawer = false;
|
||||||
initLayoutChangeFun();
|
initLayoutChangeFun();
|
||||||
};
|
state.isMobile = other.isMobile();
|
||||||
// 设置布局切换函数
|
|
||||||
const initLayoutChangeFun = () => {
|
|
||||||
onBgColorPickerChange('menuBar');
|
|
||||||
onBgColorPickerChange('menuBarColor');
|
|
||||||
onBgColorPickerChange('topBar');
|
|
||||||
onBgColorPickerChange('topBarColor');
|
|
||||||
onBgColorPickerChange('columnsMenuBar');
|
|
||||||
onBgColorPickerChange('columnsMenuBarColor');
|
|
||||||
};
|
|
||||||
// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
|
|
||||||
const onDrawerClose = () => {
|
|
||||||
getThemeConfig.value.isFixedHeaderChange = false;
|
|
||||||
getThemeConfig.value.isShowLogoChange = false;
|
|
||||||
getThemeConfig.value.isDrawer = false;
|
|
||||||
setLocalThemeConfig();
|
|
||||||
};
|
|
||||||
// 布局配置弹窗打开
|
|
||||||
const openDrawer = () => {
|
|
||||||
getThemeConfig.value.isDrawer = true;
|
|
||||||
};
|
|
||||||
// 触发 store 布局配置更新
|
|
||||||
const setDispatchThemeConfig = () => {
|
|
||||||
setLocalThemeConfig();
|
|
||||||
setLocalThemeConfigStyle();
|
|
||||||
};
|
|
||||||
// 存储布局配置
|
|
||||||
const setLocalThemeConfig = () => {
|
|
||||||
Local.remove('themeConfig');
|
|
||||||
Local.set('themeConfig', getThemeConfig.value);
|
|
||||||
};
|
|
||||||
// 存储布局配置全局主题样式（html根标签）
|
|
||||||
const setLocalThemeConfigStyle = () => {
|
|
||||||
Local.set('themeConfigStyle', document.documentElement.style.cssText);
|
|
||||||
};
|
|
||||||
// 一键复制配置
|
|
||||||
const onCopyConfigClick = () => {
|
|
||||||
let copyThemeConfig = Local.get('themeConfig');
|
|
||||||
copyThemeConfig.isDrawer = false;
|
|
||||||
copyText(JSON.stringify(copyThemeConfig)).then(() => {
|
|
||||||
getThemeConfig.value.isDrawer = false;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 一键恢复默认
|
|
||||||
const onResetConfigClick = () => {
|
|
||||||
Local.clear();
|
|
||||||
window.location.reload();
|
|
||||||
};
|
|
||||||
// 初始化菜单样式等
|
|
||||||
const initSetStyle = () => {
|
|
||||||
// 2、菜单 / 顶栏 --> 顶栏背景渐变
|
|
||||||
onTopBarGradualChange();
|
|
||||||
// 2、菜单 / 顶栏 --> 菜单背景渐变
|
|
||||||
onMenuBarGradualChange();
|
|
||||||
// 2、菜单 / 顶栏 --> 分栏菜单背景渐变
|
|
||||||
onColumnsMenuBarGradualChange();
|
|
||||||
};
|
|
||||||
onMounted(() => {
|
|
||||||
nextTick(() => {
|
|
||||||
// 判断当前布局是否不相同，不相同则初始化当前布局的样式，防止监听窗口大小改变时，布局配置logo、菜单背景等部分布局失效问题
|
|
||||||
if (!Local.get('frequency')) initLayoutChangeFun();
|
|
||||||
Local.set('frequency', 1);
|
|
||||||
// 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
|
|
||||||
proxy.mittBus.on('layoutMobileResize', (res: any) => {
|
|
||||||
getThemeConfig.value.layout = res.layout;
|
|
||||||
getThemeConfig.value.isDrawer = false;
|
|
||||||
initLayoutChangeFun();
|
|
||||||
state.isMobile = other.isMobile();
|
|
||||||
});
|
|
||||||
setTimeout(() => {
|
|
||||||
// 默认样式
|
|
||||||
onColorPickerChange();
|
|
||||||
// 灰色模式
|
|
||||||
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
|
|
||||||
// 色弱模式
|
|
||||||
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
|
|
||||||
// 深色模式
|
|
||||||
if (getThemeConfig.value.isIsDark) onAddDarkChange();
|
|
||||||
// 开启水印
|
|
||||||
onWartermarkChange();
|
|
||||||
// 语言国际化
|
|
||||||
if (Local.get('themeConfig')) proxy.$i18n.locale = Local.get('themeConfig').globalI18n;
|
|
||||||
// 初始化菜单样式等
|
|
||||||
initSetStyle();
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
onUnmounted(() => {
|
setTimeout(() => {
|
||||||
proxy.mittBus.off('layoutMobileResize', () => {});
|
// 默认样式
|
||||||
});
|
onColorPickerChange();
|
||||||
return {
|
// 灰色模式
|
||||||
openDrawer,
|
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
|
||||||
onColorPickerChange,
|
// 色弱模式
|
||||||
onBgColorPickerChange,
|
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
|
||||||
onTopBarGradualChange,
|
// 深色模式
|
||||||
onMenuBarGradualChange,
|
if (getThemeConfig.value.isIsDark) onAddDarkChange();
|
||||||
onColumnsMenuBarGradualChange,
|
// 开启水印
|
||||||
onThemeConfigChange,
|
onWartermarkChange();
|
||||||
onIsFixedHeaderChange,
|
// 语言国际化
|
||||||
onIsShowLogoChange,
|
if (Local.get('themeConfig')) locale.value = Local.get('themeConfig').globalI18n;
|
||||||
getThemeConfig,
|
// 初始化菜单样式等
|
||||||
onDrawerClose,
|
initSetStyle();
|
||||||
onAddFilterChange,
|
}, 100);
|
||||||
onAddDarkChange,
|
});
|
||||||
onWartermarkChange,
|
});
|
||||||
onWartermarkTextInput,
|
onUnmounted(() => {
|
||||||
onSetLayout,
|
mittBus.off('layoutMobileResize', () => {});
|
||||||
setLocalThemeConfig,
|
});
|
||||||
onClassicSplitMenuChange,
|
|
||||||
onIsBreadcrumbChange,
|
// 暴露变量
|
||||||
onSortableTagsViewChange,
|
defineExpose({
|
||||||
onShareTagsViewChange,
|
openDrawer,
|
||||||
onCopyConfigClick,
|
|
||||||
onResetConfigClick,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -6,21 +6,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
|
<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
|
||||||
<el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
|
<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
|
||||||
<el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
|
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
|
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
|
||||||
<div class="layout-navbars-breadcrumb-user-icon">
|
<div class="layout-navbars-breadcrumb-user-icon">
|
||||||
<i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>
|
<i
|
||||||
|
class="iconfont"
|
||||||
|
:class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
|
||||||
|
:title="$t('message.user.title1')"
|
||||||
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
|
<el-dropdown-item command="zh-cn" :disabled="state.disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>
|
||||||
<el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>
|
<el-dropdown-item command="en" :disabled="state.disabledI18n === 'en'">English</el-dropdown-item>
|
||||||
<el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
|
<el-dropdown-item command="zh-tw" :disabled="state.disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
@@ -30,7 +34,7 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
||||||
<i class="icon-xitongshezhi iconfont" :title="$t('message.user.title3')"></i>
|
<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="layout-navbars-breadcrumb-user-icon">
|
<div class="layout-navbars-breadcrumb-user-icon">
|
||||||
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
|
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
|
||||||
@@ -49,8 +53,8 @@
|
|||||||
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
|
<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
|
||||||
<i
|
<i
|
||||||
class="iconfont"
|
class="iconfont"
|
||||||
:title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
|
:title="state.isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
|
||||||
:class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
|
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
|
||||||
></i>
|
></i>
|
||||||
</div>
|
</div>
|
||||||
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
|
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
|
||||||
@@ -64,6 +68,10 @@
|
|||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
|
<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
|
||||||
<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
|
<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
@@ -72,8 +80,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutBreadcrumbUser">
|
||||||
import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent } from 'vue';
|
import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||||
import screenfull from 'screenfull';
|
import screenfull from 'screenfull';
|
||||||
@@ -82,169 +90,123 @@ import { storeToRefs } from 'pinia';
|
|||||||
import { useUserInfo } from '/@/stores/userInfo';
|
import { useUserInfo } from '/@/stores/userInfo';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import other from '/@/utils/other';
|
import other from '/@/utils/other';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
import { Session, Local } from '/@/utils/storage';
|
import { Session, Local } from '/@/utils/storage';
|
||||||
import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
|
|
||||||
import Search from '/@/layout/navBars/breadcrumb/search.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutBreadcrumbUser',
|
const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
|
||||||
components: { UserNews, Search },
|
const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
|
||||||
setup() {
|
|
||||||
const { t } = useI18n();
|
// 定义变量内容
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const { locale, t } = useI18n();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const stores = useUserInfo();
|
const stores = useUserInfo();
|
||||||
const storesThemeConfig = useThemeConfig();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const { userInfos } = storeToRefs(stores);
|
const { userInfos } = storeToRefs(stores);
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const searchRef = ref();
|
const searchRef = ref();
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
isScreenfull: false,
|
isScreenfull: false,
|
||||||
disabledI18n: 'zh-cn',
|
disabledI18n: 'zh-cn',
|
||||||
disabledSize: 'large',
|
disabledSize: 'large',
|
||||||
});
|
});
|
||||||
// 设置分割样式
|
|
||||||
const layoutUserFlexNum = computed(() => {
|
// 设置分割样式
|
||||||
let num: string | number = '';
|
const layoutUserFlexNum = computed(() => {
|
||||||
const { layout, isClassicSplitMenu } = themeConfig.value;
|
let num: string | number = '';
|
||||||
const layoutArr: string[] = ['defaults', 'columns'];
|
const { layout, isClassicSplitMenu } = themeConfig.value;
|
||||||
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
|
const layoutArr: string[] = ['defaults', 'columns'];
|
||||||
else num = '';
|
if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
|
||||||
return num;
|
else num = '';
|
||||||
});
|
return num;
|
||||||
// 全屏点击时
|
});
|
||||||
const onScreenfullClick = () => {
|
// 全屏点击时
|
||||||
if (!screenfull.isEnabled) {
|
const onScreenfullClick = () => {
|
||||||
ElMessage.warning('暂不不支持全屏');
|
if (!screenfull.isEnabled) {
|
||||||
return false;
|
ElMessage.warning('暂不不支持全屏');
|
||||||
}
|
return false;
|
||||||
screenfull.toggle();
|
}
|
||||||
screenfull.on('change', () => {
|
screenfull.toggle();
|
||||||
if (screenfull.isFullscreen) state.isScreenfull = true;
|
screenfull.on('change', () => {
|
||||||
else state.isScreenfull = false;
|
if (screenfull.isFullscreen) state.isScreenfull = true;
|
||||||
});
|
else state.isScreenfull = false;
|
||||||
};
|
});
|
||||||
// 布局配置 icon 点击时
|
};
|
||||||
const onLayoutSetingClick = () => {
|
// 布局配置 icon 点击时
|
||||||
proxy.mittBus.emit('openSetingsDrawer');
|
const onLayoutSetingClick = () => {
|
||||||
};
|
mittBus.emit('openSetingsDrawer');
|
||||||
// 下拉菜单点击时
|
};
|
||||||
const onHandleCommandClick = (path: string) => {
|
// 下拉菜单点击时
|
||||||
if (path === 'logOut') {
|
const onHandleCommandClick = (path: string) => {
|
||||||
ElMessageBox({
|
if (path === 'logOut') {
|
||||||
closeOnClickModal: false,
|
ElMessageBox({
|
||||||
closeOnPressEscape: false,
|
closeOnClickModal: false,
|
||||||
title: t('message.user.logOutTitle'),
|
closeOnPressEscape: false,
|
||||||
message: t('message.user.logOutMessage'),
|
title: t('message.user.logOutTitle'),
|
||||||
showCancelButton: true,
|
message: t('message.user.logOutMessage'),
|
||||||
confirmButtonText: t('message.user.logOutConfirm'),
|
showCancelButton: true,
|
||||||
cancelButtonText: t('message.user.logOutCancel'),
|
confirmButtonText: t('message.user.logOutConfirm'),
|
||||||
buttonSize: 'default',
|
cancelButtonText: t('message.user.logOutCancel'),
|
||||||
beforeClose: (action, instance, done) => {
|
buttonSize: 'default',
|
||||||
if (action === 'confirm') {
|
beforeClose: (action, instance, done) => {
|
||||||
instance.confirmButtonLoading = true;
|
if (action === 'confirm') {
|
||||||
instance.confirmButtonText = t('message.user.logOutExit');
|
instance.confirmButtonLoading = true;
|
||||||
setTimeout(() => {
|
instance.confirmButtonText = t('message.user.logOutExit');
|
||||||
done();
|
setTimeout(() => {
|
||||||
setTimeout(() => {
|
done();
|
||||||
instance.confirmButtonLoading = false;
|
setTimeout(() => {
|
||||||
}, 300);
|
instance.confirmButtonLoading = false;
|
||||||
}, 700);
|
}, 300);
|
||||||
} else {
|
}, 700);
|
||||||
done();
|
} else {
|
||||||
}
|
done();
|
||||||
},
|
}
|
||||||
})
|
},
|
||||||
.then(async () => {
|
})
|
||||||
// 清除缓存/token等
|
.then(async () => {
|
||||||
Session.clear();
|
// 清除缓存/token等
|
||||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
Session.clear();
|
||||||
window.location.reload();
|
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||||
})
|
window.location.reload();
|
||||||
.catch(() => {});
|
})
|
||||||
} else if (path === 'wareHouse') {
|
.catch(() => {});
|
||||||
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
} else if (path === 'wareHouse') {
|
||||||
} else {
|
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
||||||
router.push(path);
|
} else {
|
||||||
}
|
router.push(path);
|
||||||
};
|
}
|
||||||
// 菜单搜索点击
|
};
|
||||||
const onSearchClick = () => {
|
// 菜单搜索点击
|
||||||
searchRef.value.openSearch();
|
const onSearchClick = () => {
|
||||||
};
|
searchRef.value.openSearch();
|
||||||
// 组件大小改变
|
};
|
||||||
const onComponentSizeChange = (size: string) => {
|
// 组件大小改变
|
||||||
Local.remove('themeConfig');
|
const onComponentSizeChange = (size: string) => {
|
||||||
themeConfig.value.globalComponentSize = size;
|
Local.remove('themeConfig');
|
||||||
Local.set('themeConfig', themeConfig.value);
|
themeConfig.value.globalComponentSize = size;
|
||||||
initComponentSize();
|
Local.set('themeConfig', themeConfig.value);
|
||||||
window.location.reload();
|
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||||
};
|
window.location.reload();
|
||||||
// 语言切换
|
};
|
||||||
const onLanguageChange = (lang: string) => {
|
// 语言切换
|
||||||
Local.remove('themeConfig');
|
const onLanguageChange = (lang: string) => {
|
||||||
themeConfig.value.globalI18n = lang;
|
Local.remove('themeConfig');
|
||||||
Local.set('themeConfig', themeConfig.value);
|
themeConfig.value.globalI18n = lang;
|
||||||
proxy.$i18n.locale = lang;
|
Local.set('themeConfig', themeConfig.value);
|
||||||
initI18n();
|
locale.value = lang;
|
||||||
other.useTitle();
|
other.useTitle();
|
||||||
};
|
initI18nOrSize('globalI18n', 'disabledI18n');
|
||||||
// 设置 element plus 组件的国际化
|
};
|
||||||
const setI18nConfig = (locale: string) => {
|
// 初始化组件大小/i18n
|
||||||
proxy.$i18n = { messages: {} };
|
const initI18nOrSize = (value: string, attr: string) => {
|
||||||
proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
|
state[attr] = Local.get('themeConfig')[value];
|
||||||
};
|
};
|
||||||
// 初始化言语国际化
|
// 页面加载时
|
||||||
const initI18n = () => {
|
onMounted(() => {
|
||||||
switch (Local.get('themeConfig').globalI18n) {
|
if (Local.get('themeConfig')) {
|
||||||
case 'zh-cn':
|
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||||
state.disabledI18n = 'zh-cn';
|
initI18nOrSize('globalI18n', 'disabledI18n');
|
||||||
setI18nConfig('zh-cn');
|
}
|
||||||
break;
|
|
||||||
case 'en':
|
|
||||||
state.disabledI18n = 'en';
|
|
||||||
setI18nConfig('en');
|
|
||||||
break;
|
|
||||||
case 'zh-tw':
|
|
||||||
state.disabledI18n = 'zh-tw';
|
|
||||||
setI18nConfig('zh-tw');
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 初始化全局组件大小
|
|
||||||
const initComponentSize = () => {
|
|
||||||
switch (Local.get('themeConfig').globalComponentSize) {
|
|
||||||
case 'large':
|
|
||||||
state.disabledSize = 'large';
|
|
||||||
break;
|
|
||||||
case 'default':
|
|
||||||
state.disabledSize = 'default';
|
|
||||||
break;
|
|
||||||
case 'small':
|
|
||||||
state.disabledSize = 'small';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
if (Local.get('themeConfig')) {
|
|
||||||
initI18n();
|
|
||||||
initComponentSize();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
userInfos,
|
|
||||||
onLayoutSetingClick,
|
|
||||||
onHandleCommandClick,
|
|
||||||
onScreenfullClick,
|
|
||||||
onSearchClick,
|
|
||||||
onComponentSizeChange,
|
|
||||||
onLanguageChange,
|
|
||||||
searchRef,
|
|
||||||
layoutUserFlexNum,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -2,11 +2,11 @@
|
|||||||
<div class="layout-navbars-breadcrumb-user-news">
|
<div class="layout-navbars-breadcrumb-user-news">
|
||||||
<div class="head-box">
|
<div class="head-box">
|
||||||
<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
|
<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
|
||||||
<div class="head-box-btn" v-if="newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
|
<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-box">
|
<div class="content-box">
|
||||||
<template v-if="newsList.length > 0">
|
<template v-if="state.newsList.length > 0">
|
||||||
<div class="content-box-item" v-for="(v, k) in newsList" :key="k">
|
<div class="content-box-item" v-for="(v, k) in state.newsList" :key="k">
|
||||||
<div>{{ v.label }}</div>
|
<div>{{ v.label }}</div>
|
||||||
<div class="content-box-msg">
|
<div class="content-box-msg">
|
||||||
{{ v.value }}
|
{{ v.value }}
|
||||||
@@ -16,45 +16,37 @@
|
|||||||
</template>
|
</template>
|
||||||
<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
|
<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
|
||||||
</div>
|
</div>
|
||||||
<div class="foot-box" @click="onGoToGiteeClick" v-if="newsList.length > 0">{{ $t('message.user.newGo') }}</div>
|
<div class="foot-box" @click="onGoToGiteeClick" v-if="state.newsList.length > 0">{{ $t('message.user.newGo') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutBreadcrumbUserNews">
|
||||||
import { reactive, toRefs, defineComponent } from 'vue';
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutBreadcrumbUserNews',
|
const state = reactive({
|
||||||
setup() {
|
newsList: [
|
||||||
const state = reactive({
|
{
|
||||||
newsList: [
|
label: '关于版本发布的通知',
|
||||||
{
|
value: 'vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，正式发布时间：2021年02月28日！',
|
||||||
label: '关于版本发布的通知',
|
time: '2020-12-08',
|
||||||
value: 'vue-next-admin，基于 vue3 + CompositionAPI + typescript + vite + element plus，正式发布时间：2021年02月28日！',
|
},
|
||||||
time: '2020-12-08',
|
{
|
||||||
},
|
label: '关于学习交流的通知',
|
||||||
{
|
value: 'QQ群号码 665452019，欢迎小伙伴入群学习交流探讨！',
|
||||||
label: '关于学习交流的通知',
|
time: '2020-12-08',
|
||||||
value: 'QQ群号码 665452019，欢迎小伙伴入群学习交流探讨！',
|
},
|
||||||
time: '2020-12-08',
|
],
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
// 全部已读点击
|
|
||||||
const onAllReadClick = () => {
|
|
||||||
state.newsList = [];
|
|
||||||
};
|
|
||||||
// 前往通知中心点击
|
|
||||||
const onGoToGiteeClick = () => {
|
|
||||||
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
onAllReadClick,
|
|
||||||
onGoToGiteeClick,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 全部已读点击
|
||||||
|
const onAllReadClick = () => {
|
||||||
|
state.newsList = [];
|
||||||
|
};
|
||||||
|
// 前往通知中心点击
|
||||||
|
const onGoToGiteeClick = () => {
|
||||||
|
window.open('https://gitee.com/lyt-top/vue-next-admin');
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -5,28 +5,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutNavBars">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { defineAsyncComponent, computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import BreadcrumbIndex from '/@/layout/navBars/breadcrumb/index.vue';
|
|
||||||
import TagsView from '/@/layout/navBars/tagsView/tagsView.vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'layoutNavBars',
|
const BreadcrumbIndex = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/index.vue'));
|
||||||
components: { BreadcrumbIndex, TagsView },
|
const TagsView = defineAsyncComponent(() => import('/@/layout/navBars/tagsView/tagsView.vue'));
|
||||||
setup() {
|
|
||||||
const storesThemeConfig = useThemeConfig();
|
// 定义变量内容
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const storesThemeConfig = useThemeConfig();
|
||||||
// 是否显示 tagsView
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const setShowTagsView = computed(() => {
|
|
||||||
let { layout, isTagsview } = themeConfig.value;
|
// 是否显示 tagsView
|
||||||
return layout !== 'classic' && isTagsview;
|
const setShowTagsView = computed(() => {
|
||||||
});
|
let { layout, isTagsview } = themeConfig.value;
|
||||||
return {
|
return layout !== 'classic' && isTagsview;
|
||||||
setShowTagsView,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -7,10 +7,10 @@
|
|||||||
data-popper-placement="bottom"
|
data-popper-placement="bottom"
|
||||||
:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
|
:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
|
||||||
:key="Math.random()"
|
:key="Math.random()"
|
||||||
v-show="isShow"
|
v-show="state.isShow"
|
||||||
>
|
>
|
||||||
<ul class="el-dropdown-menu">
|
<ul class="el-dropdown-menu">
|
||||||
<template v-for="(v, k) in dropdownList">
|
<template v-for="(v, k) in state.dropdownList">
|
||||||
<li
|
<li
|
||||||
class="el-dropdown-menu__item"
|
class="el-dropdown-menu__item"
|
||||||
aria-disabled="false"
|
aria-disabled="false"
|
||||||
@@ -24,101 +24,101 @@
|
|||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="el-popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
|
<div class="el-popper__arrow" :style="{ left: `${state.arrowLeft}px` }"></div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutTagsViewContextmenu">
|
||||||
import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';
|
import { computed, reactive, onMounted, onUnmounted, watch } from 'vue';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'layoutTagsViewContextmenu',
|
const props = defineProps({
|
||||||
props: {
|
dropdown: {
|
||||||
dropdown: {
|
type: Object,
|
||||||
type: Object,
|
default: () => {
|
||||||
default: () => {
|
return {
|
||||||
return {
|
x: 0,
|
||||||
x: 0,
|
y: 0,
|
||||||
y: 0,
|
};
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
setup(props, { emit }) {
|
});
|
||||||
const state = reactive({
|
|
||||||
isShow: false,
|
// 定义子组件向父组件传值/事件
|
||||||
dropdownList: [
|
const emit = defineEmits(['currentContextmenuClick']);
|
||||||
{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
|
|
||||||
{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'ele-Close' },
|
// 定义变量内容
|
||||||
{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
|
const state = reactive({
|
||||||
{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
|
isShow: false,
|
||||||
{
|
dropdownList: [
|
||||||
contextMenuClickId: 4,
|
{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
|
||||||
txt: 'message.tagsView.fullscreen',
|
{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'ele-Close' },
|
||||||
affix: false,
|
{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
|
||||||
icon: 'iconfont icon-fullscreen',
|
{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
|
||||||
},
|
{
|
||||||
],
|
contextMenuClickId: 4,
|
||||||
item: {},
|
txt: 'message.tagsView.fullscreen',
|
||||||
arrowLeft: 10,
|
affix: false,
|
||||||
});
|
icon: 'iconfont icon-fullscreen',
|
||||||
// 父级传过来的坐标 x,y 值
|
},
|
||||||
const dropdowns = computed(() => {
|
],
|
||||||
// 117 为 `Dropdown 下拉菜单` 的宽度
|
item: {},
|
||||||
if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
|
arrowLeft: 10,
|
||||||
return {
|
});
|
||||||
x: document.documentElement.clientWidth - 117 - 5,
|
|
||||||
y: props.dropdown.y,
|
// 父级传过来的坐标 x,y 值
|
||||||
};
|
const dropdowns = computed(() => {
|
||||||
} else {
|
// 117 为 `Dropdown 下拉菜单` 的宽度
|
||||||
return props.dropdown;
|
if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
|
||||||
}
|
|
||||||
});
|
|
||||||
// 当前项菜单点击
|
|
||||||
const onCurrentContextmenuClick = (contextMenuClickId: number) => {
|
|
||||||
emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
|
|
||||||
};
|
|
||||||
// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
|
|
||||||
const openContextmenu = (item: any) => {
|
|
||||||
state.item = item;
|
|
||||||
item.meta.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
|
|
||||||
closeContextmenu();
|
|
||||||
setTimeout(() => {
|
|
||||||
state.isShow = true;
|
|
||||||
}, 10);
|
|
||||||
};
|
|
||||||
// 关闭右键菜单
|
|
||||||
const closeContextmenu = () => {
|
|
||||||
state.isShow = false;
|
|
||||||
};
|
|
||||||
// 监听页面监听进行右键菜单的关闭
|
|
||||||
onMounted(() => {
|
|
||||||
document.body.addEventListener('click', closeContextmenu);
|
|
||||||
});
|
|
||||||
// 页面卸载时，移除右键菜单监听事件
|
|
||||||
onUnmounted(() => {
|
|
||||||
document.body.removeEventListener('click', closeContextmenu);
|
|
||||||
});
|
|
||||||
// 监听下拉菜单位置
|
|
||||||
watch(
|
|
||||||
() => props.dropdown,
|
|
||||||
({ x }) => {
|
|
||||||
if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
|
|
||||||
else state.arrowLeft = 10;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
return {
|
||||||
dropdowns,
|
x: document.documentElement.clientWidth - 117 - 5,
|
||||||
openContextmenu,
|
y: props.dropdown.y,
|
||||||
closeContextmenu,
|
|
||||||
onCurrentContextmenuClick,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
};
|
||||||
|
} else {
|
||||||
|
return props.dropdown;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 当前项菜单点击
|
||||||
|
const onCurrentContextmenuClick = (contextMenuClickId: number) => {
|
||||||
|
emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
|
||||||
|
};
|
||||||
|
// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
|
||||||
|
const openContextmenu = (item: RouteItem) => {
|
||||||
|
state.item = item;
|
||||||
|
item.meta?.isAffix ? (state.dropdownList[1].affix = true) : (state.dropdownList[1].affix = false);
|
||||||
|
closeContextmenu();
|
||||||
|
setTimeout(() => {
|
||||||
|
state.isShow = true;
|
||||||
|
}, 10);
|
||||||
|
};
|
||||||
|
// 关闭右键菜单
|
||||||
|
const closeContextmenu = () => {
|
||||||
|
state.isShow = false;
|
||||||
|
};
|
||||||
|
// 监听页面监听进行右键菜单的关闭
|
||||||
|
onMounted(() => {
|
||||||
|
document.body.addEventListener('click', closeContextmenu);
|
||||||
|
});
|
||||||
|
// 页面卸载时，移除右键菜单监听事件
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.body.removeEventListener('click', closeContextmenu);
|
||||||
|
});
|
||||||
|
// 监听下拉菜单位置
|
||||||
|
watch(
|
||||||
|
() => props.dropdown,
|
||||||
|
({ x }) => {
|
||||||
|
if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
|
||||||
|
else state.arrowLeft = 10;
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 暴露变量
|
||||||
|
defineExpose({
|
||||||
|
openContextmenu,
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="el-menu-horizontal-warp">
|
<div class="el-menu-horizontal-warp">
|
||||||
<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
|
<el-scrollbar @wheel.native.prevent="onElMenuHorizontalScroll" ref="elMenuHorizontalScrollRef">
|
||||||
<el-menu router :default-active="defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
|
<el-menu router :default-active="state.defaultActive" :ellipsis="false" background-color="transparent" mode="horizontal">
|
||||||
<template v-for="val in menuLists">
|
<template v-for="val in menuLists">
|
||||||
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||||
<template #title>
|
<template #title>
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
{{ $t(val.meta.title) }}
|
{{ $t(val.meta.title) }}
|
||||||
</template>
|
</template>
|
||||||
<template #title v-else>
|
<template #title v-else>
|
||||||
<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">
|
<a class="w100" @click.prevent="onALinkClick(val)">
|
||||||
<SvgIcon :name="val.meta.icon" />
|
<SvgIcon :name="val.meta.icon" />
|
||||||
{{ $t(val.meta.title) }}
|
{{ $t(val.meta.title) }}
|
||||||
</a>
|
</a>
|
||||||
@@ -30,109 +30,111 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="navMenuHorizontal">
|
||||||
import { toRefs, reactive, computed, defineComponent, getCurrentInstance, onMounted, nextTick, onBeforeMount } from 'vue';
|
import { defineAsyncComponent, reactive, computed, onMounted, nextTick, onBeforeMount, ref } from 'vue';
|
||||||
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
|
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
import { useRoutesList } from '/@/stores/routesList';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import SubItem from '/@/layout/navMenu/subItem.vue';
|
import other from '/@/utils/other';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'navMenuHorizontal',
|
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
|
||||||
components: { SubItem },
|
|
||||||
props: {
|
// 定义父组件传过来的值
|
||||||
menuList: {
|
const props = defineProps({
|
||||||
type: Array,
|
// 菜单列表
|
||||||
default: () => [],
|
menuList: {
|
||||||
},
|
type: Array<RouteRecordRaw>,
|
||||||
|
default: () => [],
|
||||||
},
|
},
|
||||||
setup(props) {
|
});
|
||||||
const { proxy } = <any>getCurrentInstance();
|
|
||||||
const stores = useRoutesList();
|
// 定义变量内容
|
||||||
const storesThemeConfig = useThemeConfig();
|
const elMenuHorizontalScrollRef = ref();
|
||||||
const { routesList } = storeToRefs(stores);
|
const stores = useRoutesList();
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const storesThemeConfig = useThemeConfig();
|
||||||
const route = useRoute();
|
const { routesList } = storeToRefs(stores);
|
||||||
const state = reactive({
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
defaultActive: null,
|
const route = useRoute();
|
||||||
|
const state = reactive({
|
||||||
|
defaultActive: '' as string | undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取父级菜单数据
|
||||||
|
const menuLists = computed(() => {
|
||||||
|
return <RouteItems>props.menuList;
|
||||||
|
});
|
||||||
|
// 设置横向滚动条可以鼠标滚轮滚动
|
||||||
|
const onElMenuHorizontalScroll = (e: WheelEventType) => {
|
||||||
|
const eventDelta = e.wheelDelta || -e.deltaY * 40;
|
||||||
|
elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft + eventDelta / 4;
|
||||||
|
};
|
||||||
|
// 初始化数据，页面刷新时，滚动条滚动到对应位置
|
||||||
|
const initElMenuOffsetLeft = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
let els = <HTMLElement>document.querySelector('.el-menu.el-menu--horizontal li.is-active');
|
||||||
|
if (!els) return false;
|
||||||
|
elMenuHorizontalScrollRef.value.$refs.wrapRef.scrollLeft = els.offsetLeft;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 路由过滤递归函数
|
||||||
|
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
|
||||||
|
return arr
|
||||||
|
.filter((item: T) => !item.meta?.isHide)
|
||||||
|
.map((item: T) => {
|
||||||
|
item = Object.assign({}, item);
|
||||||
|
if (item.children) item.children = filterRoutesFun(item.children);
|
||||||
|
return item;
|
||||||
});
|
});
|
||||||
// 获取父级菜单数据
|
};
|
||||||
const menuLists = computed(() => {
|
// 传送当前子级数据到菜单中
|
||||||
return <any>props.menuList;
|
const setSendClassicChildren = (path: string) => {
|
||||||
});
|
const currentPathSplit = path.split('/');
|
||||||
// 设置横向滚动条可以鼠标滚轮滚动
|
let currentData: MittMenu = { children: [] };
|
||||||
const onElMenuHorizontalScroll = (e: any) => {
|
filterRoutesFun(routesList.value).map((v, k) => {
|
||||||
const eventDelta = e.wheelDelta || -e.deltaY * 40;
|
if (v.path === `/${currentPathSplit[1]}`) {
|
||||||
proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft = proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft + eventDelta / 4;
|
v['k'] = k;
|
||||||
};
|
currentData['item'] = { ...v };
|
||||||
// 初始化数据，页面刷新时，滚动条滚动到对应位置
|
currentData['children'] = [{ ...v }];
|
||||||
const initElMenuOffsetLeft = () => {
|
if (v.children) currentData['children'] = v.children;
|
||||||
nextTick(() => {
|
}
|
||||||
let els: any = document.querySelector('.el-menu.el-menu--horizontal li.is-active');
|
});
|
||||||
if (!els) return false;
|
return currentData;
|
||||||
proxy.$refs.elMenuHorizontalScrollRef.$refs.wrap$.scrollLeft = els.offsetLeft;
|
};
|
||||||
});
|
// 设置页面当前路由高亮
|
||||||
};
|
const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
|
||||||
// 路由过滤递归函数
|
const { path, meta } = currentRoute;
|
||||||
const filterRoutesFun = (arr: Array<string>) => {
|
if (themeConfig.value.layout === 'classic') {
|
||||||
return arr
|
state.defaultActive = `/${path?.split('/')[1]}`;
|
||||||
.filter((item: any) => !item.meta.isHide)
|
} else {
|
||||||
.map((item: any) => {
|
const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
|
||||||
item = Object.assign({}, item);
|
if (pathSplit.length >= 4 && meta?.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
|
||||||
if (item.children) item.children = filterRoutesFun(item.children);
|
else state.defaultActive = path;
|
||||||
return item;
|
}
|
||||||
});
|
};
|
||||||
};
|
// 打开外部链接
|
||||||
// 传送当前子级数据到菜单中
|
const onALinkClick = (val: RouteItem) => {
|
||||||
const setSendClassicChildren = (path: string) => {
|
other.handleOpenLink(val);
|
||||||
const currentPathSplit = path.split('/');
|
};
|
||||||
let currentData: any = {};
|
// 页面加载前
|
||||||
filterRoutesFun(routesList.value).map((v, k) => {
|
onBeforeMount(() => {
|
||||||
if (v.path === `/${currentPathSplit[1]}`) {
|
setCurrentRouterHighlight(route);
|
||||||
v['k'] = k;
|
});
|
||||||
currentData['item'] = [{ ...v }];
|
// 页面加载时
|
||||||
currentData['children'] = [{ ...v }];
|
onMounted(() => {
|
||||||
if (v.children) currentData['children'] = v.children;
|
initElMenuOffsetLeft();
|
||||||
}
|
});
|
||||||
});
|
// 路由更新时
|
||||||
return currentData;
|
onBeforeRouteUpdate((to) => {
|
||||||
};
|
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||||
// 设置页面当前路由高亮
|
setCurrentRouterHighlight(to);
|
||||||
const setCurrentRouterHighlight = (currentRoute: any) => {
|
// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
|
||||||
const { path, meta } = currentRoute;
|
let { layout, isClassicSplitMenu } = themeConfig.value;
|
||||||
if (themeConfig.value.layout === 'classic') {
|
if (layout === 'classic' && isClassicSplitMenu) {
|
||||||
(<any>state.defaultActive) = `/${path.split('/')[1]}`;
|
mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
|
||||||
} else {
|
}
|
||||||
const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
|
|
||||||
if (pathSplit.length >= 4 && meta.isHide) state.defaultActive = pathSplit.splice(0, 3).join('/');
|
|
||||||
else state.defaultActive = path;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 页面加载前
|
|
||||||
onBeforeMount(() => {
|
|
||||||
setCurrentRouterHighlight(route);
|
|
||||||
});
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initElMenuOffsetLeft();
|
|
||||||
});
|
|
||||||
// 路由更新时
|
|
||||||
onBeforeRouteUpdate((to) => {
|
|
||||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
|
||||||
setCurrentRouterHighlight(to);
|
|
||||||
// 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
|
|
||||||
let { layout, isClassicSplitMenu } = themeConfig.value;
|
|
||||||
if (layout === 'classic' && isClassicSplitMenu) {
|
|
||||||
proxy.mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
menuLists,
|
|
||||||
onElMenuHorizontalScroll,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<span>{{ $t(val.meta.title) }}</span>
|
<span>{{ $t(val.meta.title) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">
|
<a class="w100" @click.prevent="onALinkClick(val)">
|
||||||
<SvgIcon :name="val.meta.icon" />
|
<SvgIcon :name="val.meta.icon" />
|
||||||
{{ $t(val.meta.title) }}
|
{{ $t(val.meta.title) }}
|
||||||
</a>
|
</a>
|
||||||
@@ -24,25 +24,26 @@
|
|||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="navMenuSubItem">
|
||||||
import { computed, defineComponent } from 'vue';
|
import { computed } from 'vue';
|
||||||
|
import { RouteRecordRaw } from 'vue-router';
|
||||||
|
import other from '/@/utils/other';
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'navMenuSubItem',
|
const props = defineProps({
|
||||||
props: {
|
// 菜单列表
|
||||||
chil: {
|
chil: {
|
||||||
type: Array,
|
type: Array<RouteRecordRaw>,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
},
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
// 获取父级菜单数据
|
|
||||||
const chils = computed(() => {
|
|
||||||
return <any>props.chil;
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
chils,
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 获取父级菜单数据
|
||||||
|
const chils = computed(() => {
|
||||||
|
return <RouteItems>props.chil;
|
||||||
|
});
|
||||||
|
// 打开外部链接
|
||||||
|
const onALinkClick = (val: RouteItem) => {
|
||||||
|
other.handleOpenLink(val);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-menu
|
<el-menu
|
||||||
router
|
router
|
||||||
:default-active="defaultActive"
|
:default-active="state.defaultActive"
|
||||||
background-color="transparent"
|
background-color="transparent"
|
||||||
:collapse="isCollapse"
|
:collapse="state.isCollapse"
|
||||||
:unique-opened="getThemeConfig.isUniqueOpened"
|
:unique-opened="getThemeConfig.isUniqueOpened"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
>
|
>
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
<span>{{ $t(val.meta.title) }}</span>
|
<span>{{ $t(val.meta.title) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #title v-else>
|
<template #title v-else>
|
||||||
<a :href="val.meta.isLink" target="_blank" rel="opener" class="w100">{{ $t(val.meta.title) }}</a>
|
<a class="w100" @click.prevent="onALinkClick(val)">{{ $t(val.meta.title) }}</a>
|
||||||
</template>
|
</template>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
@@ -30,72 +30,73 @@
|
|||||||
</el-menu>
|
</el-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="navMenuVertical">
|
||||||
import { toRefs, reactive, computed, defineComponent, onMounted, watch } from 'vue';
|
import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
|
||||||
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
|
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import SubItem from '/@/layout/navMenu/subItem.vue';
|
import other from '/@/utils/other';
|
||||||
|
|
||||||
export default defineComponent({
|
// 引入组件
|
||||||
name: 'navMenuVertical',
|
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
|
||||||
components: { SubItem },
|
|
||||||
props: {
|
// 定义父组件传过来的值
|
||||||
menuList: {
|
const props = defineProps({
|
||||||
type: Array,
|
// 菜单列表
|
||||||
default: () => [],
|
menuList: {
|
||||||
},
|
type: Array<RouteRecordRaw>,
|
||||||
},
|
default: () => [],
|
||||||
setup(props) {
|
|
||||||
const storesThemeConfig = useThemeConfig();
|
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
const route = useRoute();
|
|
||||||
const state = reactive({
|
|
||||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
|
||||||
defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
|
|
||||||
isCollapse: false,
|
|
||||||
});
|
|
||||||
// 获取父级菜单数据
|
|
||||||
const menuLists = computed(() => {
|
|
||||||
return <any>props.menuList;
|
|
||||||
});
|
|
||||||
// 获取布局配置信息
|
|
||||||
const getThemeConfig = computed(() => {
|
|
||||||
return themeConfig.value;
|
|
||||||
});
|
|
||||||
// 菜单高亮（详情时，父级高亮）
|
|
||||||
const setParentHighlight = (currentRoute: any) => {
|
|
||||||
const { path, meta } = currentRoute;
|
|
||||||
const pathSplit = meta.isDynamic ? meta.isDynamicPath.split('/') : path.split('/');
|
|
||||||
if (pathSplit.length >= 4 && meta.isHide) return pathSplit.splice(0, 3).join('/');
|
|
||||||
else return path;
|
|
||||||
};
|
|
||||||
// 设置菜单的收起/展开
|
|
||||||
watch(
|
|
||||||
themeConfig.value,
|
|
||||||
() => {
|
|
||||||
document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
state.defaultActive = setParentHighlight(route);
|
|
||||||
});
|
|
||||||
// 路由更新时
|
|
||||||
onBeforeRouteUpdate((to) => {
|
|
||||||
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
|
||||||
state.defaultActive = setParentHighlight(to);
|
|
||||||
const clientWidth = document.body.clientWidth;
|
|
||||||
if (clientWidth < 1000) themeConfig.value.isCollapse = false;
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
menuLists,
|
|
||||||
getThemeConfig,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const storesThemeConfig = useThemeConfig();
|
||||||
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
|
const route = useRoute();
|
||||||
|
const state = reactive({
|
||||||
|
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||||
|
defaultActive: route.meta.isDynamic ? route.meta.isDynamicPath : route.path,
|
||||||
|
isCollapse: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取父级菜单数据
|
||||||
|
const menuLists = computed(() => {
|
||||||
|
return <RouteItems>props.menuList;
|
||||||
|
});
|
||||||
|
// 获取布局配置信息
|
||||||
|
const getThemeConfig = computed(() => {
|
||||||
|
return themeConfig.value;
|
||||||
|
});
|
||||||
|
// 菜单高亮（详情时，父级高亮）
|
||||||
|
const setParentHighlight = (currentRoute: RouteToFrom) => {
|
||||||
|
const { path, meta } = currentRoute;
|
||||||
|
const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/');
|
||||||
|
if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/');
|
||||||
|
else return path;
|
||||||
|
};
|
||||||
|
// 打开外部链接
|
||||||
|
const onALinkClick = (val: RouteItem) => {
|
||||||
|
other.handleOpenLink(val);
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
state.defaultActive = setParentHighlight(route);
|
||||||
|
});
|
||||||
|
// 路由更新时
|
||||||
|
onBeforeRouteUpdate((to) => {
|
||||||
|
// 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
|
||||||
|
state.defaultActive = setParentHighlight(to);
|
||||||
|
const clientWidth = document.body.clientWidth;
|
||||||
|
if (clientWidth < 1000) themeConfig.value.isCollapse = false;
|
||||||
|
});
|
||||||
|
// 设置菜单的收起/展开
|
||||||
|
watch(
|
||||||
|
themeConfig.value,
|
||||||
|
() => {
|
||||||
|
document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,66 +1,101 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-view-bg-white flex mt1" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
|
<div class="layout-padding layout-padding-unset layout-iframe">
|
||||||
<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" ref="iframeDom" v-show="!iframeLoading"></iframe>
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
|
<div class="w100" v-for="v in setIframeList" :key="v.path" v-loading="v.meta.loading" element-loading-background="white">
|
||||||
|
<transition-group :name="name" mode="out-in">
|
||||||
|
<iframe
|
||||||
|
:src="v.meta.isLink"
|
||||||
|
:key="v.path"
|
||||||
|
frameborder="0"
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
style="position: absolute"
|
||||||
|
:data-url="v.path"
|
||||||
|
v-show="getRoutePath === v.path"
|
||||||
|
ref="iframeRef"
|
||||||
|
/>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutIframeView">
|
||||||
import { defineComponent, reactive, toRefs, onMounted, nextTick, watch, computed } from 'vue';
|
import { computed, watch, ref, nextTick } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
|
||||||
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义父组件传过来的值
|
||||||
name: 'layoutIfameView',
|
const props = defineProps({
|
||||||
setup() {
|
// 刷新 iframe
|
||||||
const storesThemeConfig = useThemeConfig();
|
refreshKey: {
|
||||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
type: String,
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
default: () => '',
|
||||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
},
|
||||||
const route = useRoute();
|
// 过渡动画 name
|
||||||
const state = reactive({
|
name: {
|
||||||
iframeDom: null as HTMLIFrameElement | null,
|
type: String,
|
||||||
iframeLoading: true,
|
default: () => 'slide-right',
|
||||||
iframeUrl: '',
|
},
|
||||||
});
|
// iframe 列表
|
||||||
// 初始化页面加载 loading
|
list: {
|
||||||
const initIframeLoad = () => {
|
type: Array,
|
||||||
state.iframeUrl = <any>route.meta.isLink;
|
default: () => [],
|
||||||
nextTick(() => {
|
|
||||||
state.iframeLoading = true;
|
|
||||||
const iframe = state.iframeDom;
|
|
||||||
if (!iframe) return false;
|
|
||||||
iframe.onload = () => {
|
|
||||||
state.iframeLoading = false;
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 设置 iframe 的高度
|
|
||||||
const setIframeHeight = computed(() => {
|
|
||||||
let { isTagsview } = themeConfig.value;
|
|
||||||
if (isTagsViewCurrenFull.value) {
|
|
||||||
return `1px`;
|
|
||||||
} else {
|
|
||||||
if (isTagsview) return `86px`;
|
|
||||||
else return `51px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initIframeLoad();
|
|
||||||
});
|
|
||||||
// 监听路由变化，多个 iframe 时使用
|
|
||||||
watch(
|
|
||||||
() => route.path,
|
|
||||||
() => {
|
|
||||||
initIframeLoad();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
setIframeHeight,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const iframeRef = ref();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
// 处理 list 列表，当打开时，才进行加载
|
||||||
|
const setIframeList = computed(() => {
|
||||||
|
return (<RouteItems>props.list).filter((v: RouteItem) => v.meta?.isIframeOpen);
|
||||||
|
});
|
||||||
|
// 获取 iframe 当前路由 path
|
||||||
|
const getRoutePath = computed(() => {
|
||||||
|
return route.path;
|
||||||
|
});
|
||||||
|
// 关闭 iframe loading
|
||||||
|
const closeIframeLoading = (val: string, item: RouteItem) => {
|
||||||
|
nextTick(() => {
|
||||||
|
if (!iframeRef.value) return false;
|
||||||
|
iframeRef.value.forEach((v: HTMLElement) => {
|
||||||
|
if (v.dataset.url === val) {
|
||||||
|
v.onload = () => {
|
||||||
|
if (item.meta?.isIframeOpen && item.meta.loading) item.meta.loading = false;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 监听路由变化，初始化 iframe 数据，防止多个 iframe 时，切换不生效
|
||||||
|
watch(
|
||||||
|
() => route.fullPath,
|
||||||
|
(val) => {
|
||||||
|
const item: any = props.list.find((v: any) => v.path === val);
|
||||||
|
if (!item) return false;
|
||||||
|
if (!item.meta.isIframeOpen) item.meta.isIframeOpen = true;
|
||||||
|
closeIframeLoading(val, item);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
// 监听 iframe refreshKey 变化，用于 tagsview 右键菜单刷新
|
||||||
|
watch(
|
||||||
|
() => props.refreshKey,
|
||||||
|
() => {
|
||||||
|
const item: any = props.list.find((v: any) => v.path === route.path);
|
||||||
|
if (!item) return false;
|
||||||
|
if (item.meta.isIframeOpen) item.meta.isIframeOpen = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
item.meta.isIframeOpen = true;
|
||||||
|
item.meta.loading = true;
|
||||||
|
closeIframeLoading(route.fullPath, item);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,61 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${setLinkHeight}` }">
|
<div class="layout-padding layout-link-container">
|
||||||
<a :href="currentRouteMeta.isLink" target="_blank" rel="opener" class="flex-margin">
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
{{ $t(currentRouteMeta.title) }}：{{ currentRouteMeta.isLink }}
|
<div class="layout-link-warp">
|
||||||
</a>
|
<i class="layout-link-icon iconfont icon-xingqiu"></i>
|
||||||
|
<div class="layout-link-msg">页面 "{{ $t(state.title) }}" 已在新窗口中打开</div>
|
||||||
|
<el-button class="mt30" round size="default" @click="onGotoFullPage">
|
||||||
|
<i class="iconfont icon-lianjie"></i>
|
||||||
|
<span>立即前往体验</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutLinkView">
|
||||||
import { defineComponent, toRefs, reactive, computed, watch } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
import { useRoute, RouteMeta } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { verifyUrl } from '/@/utils/toolsValidate';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 定义变量内容
|
||||||
interface LinkViewState {
|
const route = useRoute();
|
||||||
currentRouteMeta: {
|
const state = reactive<LinkViewState>({
|
||||||
isLink: string;
|
title: '',
|
||||||
title: string;
|
isLink: '',
|
||||||
};
|
|
||||||
}
|
|
||||||
interface LinkViewRouteMeta extends RouteMeta {
|
|
||||||
isLink: string;
|
|
||||||
title: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'layoutLinkView',
|
|
||||||
setup() {
|
|
||||||
const storesThemeConfig = useThemeConfig();
|
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
||||||
const route = useRoute();
|
|
||||||
const state = reactive<LinkViewState>({
|
|
||||||
currentRouteMeta: {
|
|
||||||
isLink: '',
|
|
||||||
title: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 设置 link 的高度
|
|
||||||
const setLinkHeight = computed(() => {
|
|
||||||
let { isTagsview } = themeConfig.value;
|
|
||||||
if (isTagsview) return `115px`;
|
|
||||||
else return `80px`;
|
|
||||||
});
|
|
||||||
// 监听路由的变化，设置内容
|
|
||||||
watch(
|
|
||||||
() => route.path,
|
|
||||||
() => {
|
|
||||||
state.currentRouteMeta = <LinkViewRouteMeta>route.meta;
|
|
||||||
},
|
|
||||||
{
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
setLinkHeight,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 立即前往
|
||||||
|
const onGotoFullPage = () => {
|
||||||
|
const { origin, pathname } = window.location;
|
||||||
|
if (verifyUrl(<string>state.isLink)) window.open(state.isLink);
|
||||||
|
else window.open(`${origin}${pathname}#${state.isLink}`);
|
||||||
|
};
|
||||||
|
// 监听路由的变化，设置内容
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
state.title = <string>route.meta.title;
|
||||||
|
state.isLink = <string>route.meta.isLink;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.layout-link-container {
|
||||||
|
.layout-link-warp {
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
i.layout-link-icon {
|
||||||
|
position: relative;
|
||||||
|
font-size: 100px;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50px;
|
||||||
|
top: 0;
|
||||||
|
width: 15px;
|
||||||
|
height: 100px;
|
||||||
|
background: linear-gradient(
|
||||||
|
rgba(255, 255, 255, 0.01),
|
||||||
|
rgba(255, 255, 255, 0.01),
|
||||||
|
rgba(255, 255, 255, 0.01),
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
rgba(235, 255, 255, 0.5),
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
rgba(255, 255, 255, 0.05),
|
||||||
|
rgba(255, 255, 255, 0.01),
|
||||||
|
rgba(255, 255, 255, 0.01),
|
||||||
|
rgba(255, 255, 255, 0.01)
|
||||||
|
);
|
||||||
|
transform: rotate(-15deg);
|
||||||
|
animation: toRight 5s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.layout-link-msg {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--next-bg-topBarColor);
|
||||||
|
opacity: 0.7;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,88 +1,108 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="h100">
|
<div class="layout-parent">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition :name="setTransitionName" mode="out-in">
|
<transition :name="setTransitionName" mode="out-in">
|
||||||
<keep-alive :include="getKeepAliveNames">
|
<keep-alive :include="getKeepAliveNames">
|
||||||
<component :is="Component" :key="refreshRouterViewKey" class="w100" />
|
<component :is="Component" :key="state.refreshRouterViewKey" class="w100" v-show="!isIframePage" />
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
<transition :name="setTransitionName" mode="out-in">
|
||||||
|
<Iframes class="w100" v-show="isIframePage" :refreshKey="state.iframeRefreshKey" :name="setTransitionName" :list="state.iframeList" />
|
||||||
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts" name="layoutParentView">
|
||||||
import { computed, defineComponent, toRefs, reactive, getCurrentInstance, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue';
|
import { defineAsyncComponent, computed, reactive, onBeforeMount, onUnmounted, nextTick, watch, onMounted } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
|
import { useKeepALiveNames } from '/@/stores/keepAliveNames';
|
||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { Session } from '/@/utils/storage';
|
import { Session } from '/@/utils/storage';
|
||||||
|
import mittBus from '/@/utils/mitt';
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
// 引入组件
|
||||||
interface ParentViewState {
|
const Iframes = defineAsyncComponent(() => import('/@/layout/routerView/iframes.vue'));
|
||||||
refreshRouterViewKey: null | string;
|
|
||||||
keepAliveNameList: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
// 定义变量内容
|
||||||
name: 'layoutParentView',
|
const route = useRoute();
|
||||||
setup() {
|
const router = useRouter();
|
||||||
const { proxy } = <any>getCurrentInstance();
|
const storesKeepAliveNames = useKeepALiveNames();
|
||||||
const route = useRoute();
|
const storesThemeConfig = useThemeConfig();
|
||||||
const storesKeepAliveNames = useKeepALiveNames();
|
const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
|
||||||
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
const { keepAliveNames, cachedViews } = storeToRefs(storesKeepAliveNames);
|
const state = reactive<ParentViewState>({
|
||||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
refreshRouterViewKey: '', // 非 iframe tagsview 右键菜单刷新时
|
||||||
const state = reactive<ParentViewState>({
|
iframeRefreshKey: '', // iframe tagsview 右键菜单刷新时
|
||||||
refreshRouterViewKey: null,
|
keepAliveNameList: [],
|
||||||
keepAliveNameList: [],
|
iframeList: [],
|
||||||
});
|
|
||||||
// 设置主界面切换动画
|
|
||||||
const setTransitionName = computed(() => {
|
|
||||||
return themeConfig.value.animation;
|
|
||||||
});
|
|
||||||
// 获取组件缓存列表(name值)
|
|
||||||
const getKeepAliveNames = computed(() => {
|
|
||||||
return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
|
|
||||||
});
|
|
||||||
// 页面加载前，处理缓存，页面刷新时路由缓存处理
|
|
||||||
onBeforeMount(() => {
|
|
||||||
state.keepAliveNameList = keepAliveNames.value;
|
|
||||||
proxy.mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
|
|
||||||
state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
|
|
||||||
state.refreshRouterViewKey = null;
|
|
||||||
nextTick(() => {
|
|
||||||
state.refreshRouterViewKey = fullPath;
|
|
||||||
state.keepAliveNameList = keepAliveNames.value;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
|
|
||||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
|
|
||||||
nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (themeConfig.value.isCacheTagsView) cachedViews.value = Session.get('tagsViewList')?.map((item: any) => item.name);
|
|
||||||
}, 0);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
// 页面卸载时
|
|
||||||
onUnmounted(() => {
|
|
||||||
proxy.mittBus.off('onTagsViewRefreshRouterView', () => {});
|
|
||||||
});
|
|
||||||
// 监听路由变化，防止 tagsView 多标签时，切换动画消失
|
|
||||||
watch(
|
|
||||||
() => route.fullPath,
|
|
||||||
() => {
|
|
||||||
state.refreshRouterViewKey = decodeURI(route.fullPath);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
setTransitionName,
|
|
||||||
getKeepAliveNames,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 设置主界面切换动画
|
||||||
|
const setTransitionName = computed(() => {
|
||||||
|
return themeConfig.value.animation;
|
||||||
|
});
|
||||||
|
// 获取组件缓存列表(name值)
|
||||||
|
const getKeepAliveNames = computed(() => {
|
||||||
|
return themeConfig.value.isTagsview ? cachedViews.value : state.keepAliveNameList;
|
||||||
|
});
|
||||||
|
// 设置 iframe 显示/隐藏
|
||||||
|
const isIframePage = computed(() => {
|
||||||
|
return route.meta.isIframe;
|
||||||
|
});
|
||||||
|
// 获取 iframe 组件列表(未进行渲染)
|
||||||
|
const getIframeListRoutes = async () => {
|
||||||
|
router.getRoutes().forEach((v) => {
|
||||||
|
if (v.meta.isIframe) {
|
||||||
|
v.meta.isIframeOpen = false;
|
||||||
|
v.meta.loading = true;
|
||||||
|
state.iframeList.push({ ...v });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载前，处理缓存，页面刷新时路由缓存处理
|
||||||
|
onBeforeMount(() => {
|
||||||
|
state.keepAliveNameList = keepAliveNames.value;
|
||||||
|
mittBus.on('onTagsViewRefreshRouterView', (fullPath: string) => {
|
||||||
|
state.keepAliveNameList = keepAliveNames.value.filter((name: string) => route.name !== name);
|
||||||
|
state.refreshRouterViewKey = '';
|
||||||
|
state.iframeRefreshKey = '';
|
||||||
|
nextTick(() => {
|
||||||
|
state.refreshRouterViewKey = fullPath;
|
||||||
|
state.iframeRefreshKey = fullPath;
|
||||||
|
state.keepAliveNameList = keepAliveNames.value;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
getIframeListRoutes();
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I58U75
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I59RXK
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/pulls/40
|
||||||
|
nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (themeConfig.value.isCacheTagsView) {
|
||||||
|
let tagsViewArr: RouteItem[] = Session.get('tagsViewList') || [];
|
||||||
|
cachedViews.value = tagsViewArr.filter((item) => item.meta?.isKeepAlive).map((item) => item.name as string);
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 页面卸载时
|
||||||
|
onUnmounted(() => {
|
||||||
|
mittBus.off('onTagsViewRefreshRouterView', () => {});
|
||||||
|
});
|
||||||
|
// 监听路由变化，防止 tagsView 多标签时，切换动画消失
|
||||||
|
// https://toscode.gitee.com/lyt-top/vue-next-admin/pulls/38/files
|
||||||
|
watch(
|
||||||
|
() => route.fullPath,
|
||||||
|
() => {
|
||||||
|
state.refreshRouterViewKey = decodeURI(route.fullPath);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
151
web/src/layout/upgrade/index.vue
Normal file
151
web/src/layout/upgrade/index.vue
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
<template>
|
||||||
|
<div class="upgrade-dialog">
|
||||||
|
<el-dialog
|
||||||
|
v-model="state.isUpgrade"
|
||||||
|
width="300px"
|
||||||
|
destroy-on-close
|
||||||
|
:show-close="false"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false"
|
||||||
|
>
|
||||||
|
<div class="upgrade-title">
|
||||||
|
<div class="upgrade-title-warp">
|
||||||
|
<span class="upgrade-title-warp-txt">{{ $t('message.upgrade.title') }}</span>
|
||||||
|
<span class="upgrade-title-warp-version">v{{ state.version }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="upgrade-content">
|
||||||
|
{{ getThemeConfig.globalTitle }} {{ $t('message.upgrade.msg') }}
|
||||||
|
<div class="mt5">
|
||||||
|
<el-link type="primary" class="font12" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_black">
|
||||||
|
CHANGELOG.md
|
||||||
|
</el-link>
|
||||||
|
</div>
|
||||||
|
<div class="upgrade-content-desc mt5">{{ $t('message.upgrade.desc') }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="upgrade-btn">
|
||||||
|
<el-button round size="default" type="info" text @click="onCancel">{{ $t('message.upgrade.btnOne') }}</el-button>
|
||||||
|
<el-button type="primary" round size="default" @click="onUpgrade" :loading="state.isLoading">{{ state.btnTxt }}</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="layoutUpgrade">
|
||||||
|
import { reactive, computed, onMounted } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
|
import { Local } from '/@/utils/storage';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const { t } = useI18n();
|
||||||
|
const storesThemeConfig = useThemeConfig();
|
||||||
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||||
|
const state = reactive({
|
||||||
|
isUpgrade: false,
|
||||||
|
// @ts-ignore
|
||||||
|
version: __VERSION__,
|
||||||
|
isLoading: false,
|
||||||
|
btnTxt: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取布局配置信息
|
||||||
|
const getThemeConfig = computed(() => {
|
||||||
|
return themeConfig.value;
|
||||||
|
});
|
||||||
|
// 残忍拒绝
|
||||||
|
const onCancel = () => {
|
||||||
|
state.isUpgrade = false;
|
||||||
|
};
|
||||||
|
// 马上更新
|
||||||
|
const onUpgrade = () => {
|
||||||
|
state.isLoading = true;
|
||||||
|
state.btnTxt = t('message.upgrade.btnTwoLoading');
|
||||||
|
setTimeout(() => {
|
||||||
|
Local.clear();
|
||||||
|
window.location.reload();
|
||||||
|
Local.set('version', state.version);
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
// 延迟显示，防止刷新时界面显示太快
|
||||||
|
const delayShow = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
state.isUpgrade = true;
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
delayShow();
|
||||||
|
setTimeout(() => {
|
||||||
|
state.btnTxt = t('message.upgrade.btnTwo');
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.upgrade-dialog {
|
||||||
|
:deep(.el-dialog) {
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.el-dialog__header {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.upgrade-title {
|
||||||
|
text-align: center;
|
||||||
|
height: 130px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--el-color-primary-light-1);
|
||||||
|
width: 130%;
|
||||||
|
height: 130px;
|
||||||
|
border-bottom-left-radius: 100%;
|
||||||
|
border-bottom-right-radius: 100%;
|
||||||
|
}
|
||||||
|
.upgrade-title-warp {
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
.upgrade-title-warp-txt {
|
||||||
|
color: var(--next-color-white);
|
||||||
|
font-size: 22px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
.upgrade-title-warp-version {
|
||||||
|
color: var(--next-color-white);
|
||||||
|
background-color: var(--el-color-primary-light-4);
|
||||||
|
font-size: 12px;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
top: -2px;
|
||||||
|
right: -50px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upgrade-content {
|
||||||
|
padding: 20px;
|
||||||
|
line-height: 22px;
|
||||||
|
.upgrade-content-desc {
|
||||||
|
color: var(--el-color-info-light-5);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.upgrade-btn {
|
||||||
|
border-top: 1px solid var(--el-border-color-lighter, #ebeef5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 15px 20px;
|
||||||
|
.el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -16,7 +16,7 @@ import { NextLoading } from '/@/utils/loading';
|
|||||||
* @method NextLoading 界面 loading 动画开始执行
|
* @method NextLoading 界面 loading 动画开始执行
|
||||||
* @method useUserInfo(pinia).setUserInfos() 触发初始化用户信息 pinia
|
* @method useUserInfo(pinia).setUserInfos() 触发初始化用户信息 pinia
|
||||||
* @method setAddRoute 添加动态路由
|
* @method setAddRoute 添加动态路由
|
||||||
* @method setFilterMenuAndCacheTagsViewRoutes 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
* @method setFilterMenuAndCacheTagsViewRoutes 设置递归过滤有权限的路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
||||||
*/
|
*/
|
||||||
export async function initFrontEndControlRoutes() {
|
export async function initFrontEndControlRoutes() {
|
||||||
// 界面 loading 动画开始执行
|
// 界面 loading 动画开始执行
|
||||||
@@ -26,9 +26,12 @@ export async function initFrontEndControlRoutes() {
|
|||||||
// 触发初始化用户信息 pinia
|
// 触发初始化用户信息 pinia
|
||||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
|
||||||
await useUserInfo(pinia).setUserInfos();
|
await useUserInfo(pinia).setUserInfos();
|
||||||
|
// 无登录权限时，添加判断
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
|
||||||
|
if (useUserInfo().userInfos.roles.length <= 0) return Promise.resolve(true);
|
||||||
// 添加动态路由
|
// 添加动态路由
|
||||||
await setAddRoute();
|
await setAddRoute();
|
||||||
// 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
// 设置递归过滤有权限的路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
||||||
await setFilterMenuAndCacheTagsViewRoutes();
|
await setFilterMenuAndCacheTagsViewRoutes();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -64,6 +67,8 @@ export async function frontEndsResetRoute() {
|
|||||||
*/
|
*/
|
||||||
export function setFilterRouteEnd() {
|
export function setFilterRouteEnd() {
|
||||||
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
|
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
|
||||||
|
// notFoundAndNoPower 防止 404、401 不在 layout 布局中，不设置的话，404、401 界面将全屏显示
|
||||||
|
// 关联问题 No match found for location with path 'xxx'
|
||||||
filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower];
|
filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower];
|
||||||
return filterRouteEnd;
|
return filterRouteEnd;
|
||||||
}
|
}
|
||||||
@@ -106,7 +111,7 @@ export function setCacheTagsViewRoutes() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
* 设置递归过滤有权限的路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
|
||||||
* @description 用于左侧菜单、横向菜单的显示
|
* @description 用于左侧菜单、横向菜单的显示
|
||||||
* @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
|
* @description 用于 tagsView、菜单搜索中：未过滤隐藏的(isHide)
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { KeepAliveNamesState } from './interface';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 路由缓存列表
|
* 路由缓存列表
|
||||||
@@ -19,8 +18,7 @@ export const useKeepALiveNames = defineStore('keepALiveNames', {
|
|||||||
this.keepAliveNames = data;
|
this.keepAliveNames = data;
|
||||||
},
|
},
|
||||||
async addCachedView(view: any) {
|
async addCachedView(view: any) {
|
||||||
if (this.cachedViews.includes(view.name)) return;
|
if (view.meta.isKeepAlive) this.cachedViews?.push(view.name);
|
||||||
if (view.meta.isKeepAlive) this.cachedViews.push(view.name);
|
|
||||||
},
|
},
|
||||||
async delCachedView(view: any) {
|
async delCachedView(view: any) {
|
||||||
const index = this.cachedViews.indexOf(view.name);
|
const index = this.cachedViews.indexOf(view.name);
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { RequestOldRoutesState } from './interface';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 后端返回原始路由(未处理时)
|
* 后端返回原始路由(未处理时)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { RoutesListState } from './interface';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 路由列表
|
* 路由列表
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { TagsViewRoutesState } from './interface';
|
|
||||||
import { Session } from '/@/utils/storage';
|
import { Session } from '/@/utils/storage';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { ThemeConfigStates, ThemeConfigState } from './interface';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 布局配置
|
* 布局配置
|
||||||
@@ -10,7 +9,7 @@ import { ThemeConfigStates, ThemeConfigState } from './interface';
|
|||||||
* 2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果
|
* 2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果
|
||||||
*/
|
*/
|
||||||
export const useThemeConfig = defineStore('themeConfig', {
|
export const useThemeConfig = defineStore('themeConfig', {
|
||||||
state: (): ThemeConfigStates => ({
|
state: (): ThemeConfigState => ({
|
||||||
themeConfig: {
|
themeConfig: {
|
||||||
// 是否开启布局配置抽屉
|
// 是否开启布局配置抽屉
|
||||||
isDrawer: false,
|
isDrawer: false,
|
||||||
@@ -24,10 +23,7 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
isIsDark: false,
|
isIsDark: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 菜单 / 顶栏
|
* 顶栏设置
|
||||||
* 注意：v1.0.17 版本去除设置布局切换，重置主题样式（initSetLayoutChange），
|
|
||||||
* 切换布局需手动设置样式，设置的样式自动同步各布局，
|
|
||||||
* 代码位置：/@/layout/navBars/breadcrumb/setings.vue
|
|
||||||
*/
|
*/
|
||||||
// 默认顶栏导航背景颜色
|
// 默认顶栏导航背景颜色
|
||||||
topBar: '#ffffff',
|
topBar: '#ffffff',
|
||||||
@@ -35,18 +31,30 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
topBarColor: '#606266',
|
topBarColor: '#606266',
|
||||||
// 是否开启顶栏背景颜色渐变
|
// 是否开启顶栏背景颜色渐变
|
||||||
isTopBarColorGradual: false,
|
isTopBarColorGradual: false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 菜单设置
|
||||||
|
*/
|
||||||
// 默认菜单导航背景颜色
|
// 默认菜单导航背景颜色
|
||||||
menuBar: '#545c64',
|
menuBar: '#545c64',
|
||||||
// 默认菜单导航字体颜色
|
// 默认菜单导航字体颜色
|
||||||
menuBarColor: '#eaeaea',
|
menuBarColor: '#eaeaea',
|
||||||
|
// 默认菜单高亮背景色
|
||||||
|
menuBarActiveColor: 'rgba(0, 0, 0, 0.2)',
|
||||||
// 是否开启菜单背景颜色渐变
|
// 是否开启菜单背景颜色渐变
|
||||||
isMenuBarColorGradual: false,
|
isMenuBarColorGradual: false,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 分栏设置
|
||||||
|
*/
|
||||||
// 默认分栏菜单背景颜色
|
// 默认分栏菜单背景颜色
|
||||||
columnsMenuBar: '#545c64',
|
columnsMenuBar: '#545c64',
|
||||||
// 默认分栏菜单字体颜色
|
// 默认分栏菜单字体颜色
|
||||||
columnsMenuBarColor: '#e6e6e6',
|
columnsMenuBarColor: '#e6e6e6',
|
||||||
// 是否开启分栏菜单背景颜色渐变
|
// 是否开启分栏菜单背景颜色渐变
|
||||||
isColumnsMenuBarColorGradual: false,
|
isColumnsMenuBarColorGradual: false,
|
||||||
|
// 是否开启分栏菜单鼠标悬停预加载(预览菜单)
|
||||||
|
isColumnsMenuHoverPreload: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 界面设置
|
* 界面设置
|
||||||
@@ -54,7 +62,7 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
// 是否开启菜单水平折叠效果
|
// 是否开启菜单水平折叠效果
|
||||||
isCollapse: false,
|
isCollapse: false,
|
||||||
// 是否开启菜单手风琴效果
|
// 是否开启菜单手风琴效果
|
||||||
isUniqueOpened: false,
|
isUniqueOpened: true,
|
||||||
// 是否开启固定 Header
|
// 是否开启固定 Header
|
||||||
isFixedHeader: false,
|
isFixedHeader: false,
|
||||||
// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
|
// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
|
||||||
@@ -94,9 +102,9 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
// 是否开启色弱模式
|
// 是否开启色弱模式
|
||||||
isInvert: false,
|
isInvert: false,
|
||||||
// 是否开启水印
|
// 是否开启水印
|
||||||
isWartermark: false,
|
isWartermark: true,
|
||||||
// 水印文案
|
// 水印文案
|
||||||
wartermarkText: 'small@小柒',
|
wartermarkText: 'vue-next-admin',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 其它设置
|
* 其它设置
|
||||||
@@ -123,24 +131,26 @@ export const useThemeConfig = defineStore('themeConfig', {
|
|||||||
* 后端控制路由
|
* 后端控制路由
|
||||||
*/
|
*/
|
||||||
// 是否开启后端控制路由
|
// 是否开启后端控制路由
|
||||||
isRequestRoutes: true,
|
isRequestRoutes: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 全局网站标题 / 副标题
|
* 全局网站标题 / 副标题
|
||||||
*/
|
*/
|
||||||
// 网站主标题（菜单导航、浏览器当前网页标题）
|
// 网站主标题（菜单导航、浏览器当前网页标题）
|
||||||
globalTitle: 'dvadmin',
|
globalTitle: 'vue-next-admin',
|
||||||
// 网站副标题（登录页顶部文字）
|
// 网站副标题（登录页顶部文字）
|
||||||
globalViceTitle: '企业级后台管理系统',
|
globalViceTitle: 'vueNextAdmin',
|
||||||
|
// 网站副标题（登录页顶部文字）
|
||||||
|
globalViceTitleMsg: '专注、免费、开源、维护、解疑',
|
||||||
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
|
// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
|
||||||
globalI18n: 'zh-cn',
|
globalI18n: 'zh-cn',
|
||||||
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
|
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'large'
|
||||||
globalComponentSize: 'default',
|
globalComponentSize: 'large',
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
setThemeConfig(data: ThemeConfigState) {
|
setThemeConfig(data: ThemeConfigState) {
|
||||||
this.themeConfig = data;
|
this.themeConfig = data.themeConfig;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -46,6 +46,14 @@ body,
|
|||||||
.layout-container {
|
.layout-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
.layout-pd {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
.layout-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
.layout-aside {
|
.layout-aside {
|
||||||
background: var(--next-bg-menuBar);
|
background: var(--next-bg-menuBar);
|
||||||
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
|
box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
|
||||||
@@ -61,24 +69,63 @@ body,
|
|||||||
}
|
}
|
||||||
.layout-header {
|
.layout-header {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
|
height: auto !important;
|
||||||
}
|
}
|
||||||
.layout-main {
|
.layout-main {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--next-bg-main-color);
|
background-color: var(--next-bg-main-color);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// 内层 el-scrollbar样式，用于界面高度自适应（main.vue）
|
||||||
|
.layout-main-scroll {
|
||||||
|
@extend .layout-flex;
|
||||||
|
.layout-parent {
|
||||||
|
@extend .layout-flex;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 用于界面高度自适应
|
||||||
|
.layout-padding {
|
||||||
|
@extend .layout-pd;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
@extend .layout-flex;
|
||||||
|
&-auto {
|
||||||
|
height: inherit;
|
||||||
|
@extend .layout-flex;
|
||||||
|
}
|
||||||
|
&-view {
|
||||||
|
background: var(--el-color-white);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 用于界面高度自适应，主视图区 main 的内边距，用于 iframe
|
||||||
|
.layout-padding-unset {
|
||||||
|
padding: 0 !important;
|
||||||
|
&-view {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 用于设置 iframe loading 时的高度（loading 垂直居中显示）
|
||||||
|
.layout-iframe {
|
||||||
|
.el-loading-parent--relative {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
|
|
||||||
.layout-view-bg-white {
|
|
||||||
background: var(--el-color-white);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
|
||||||
}
|
|
||||||
.layout-el-aside-br-color {
|
.layout-el-aside-br-color {
|
||||||
border-right: 1px solid var(--el-border-color-light, #ebeef5);
|
border-right: 1px solid var(--el-border-color-light, #ebeef5);
|
||||||
}
|
}
|
||||||
@@ -122,10 +169,6 @@ body,
|
|||||||
z-index: 9999998;
|
z-index: 9999998;
|
||||||
animation: error-img 0.3s;
|
animation: error-img 0.3s;
|
||||||
}
|
}
|
||||||
.layout-scrollbar {
|
|
||||||
@extend .el-scrollbar;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
.layout-mian-height-50 {
|
.layout-mian-height-50 {
|
||||||
height: calc(100vh - 50px);
|
height: calc(100vh - 50px);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -92,3 +92,56 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 登录页动画
|
||||||
|
------------------------------- */
|
||||||
|
@keyframes loginLeft {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes loginTop {
|
||||||
|
0% {
|
||||||
|
top: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes loginRight {
|
||||||
|
0% {
|
||||||
|
right: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
right: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes loginBottom {
|
||||||
|
0% {
|
||||||
|
bottom: -100%;
|
||||||
|
}
|
||||||
|
50%,
|
||||||
|
100% {
|
||||||
|
bottom: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左右左 link.vue
|
||||||
|
------------------------------- */
|
||||||
|
@keyframes toRight {
|
||||||
|
0% {
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
--next-bg-topBarColor: var(--next-color-bar) !important;
|
--next-bg-topBarColor: var(--next-color-bar) !important;
|
||||||
--next-bg-menuBar: var(--next-color-disabled) !important;
|
--next-bg-menuBar: var(--next-color-disabled) !important;
|
||||||
--next-bg-menuBarColor: var(--next-color-bar) !important;
|
--next-bg-menuBarColor: var(--next-color-bar) !important;
|
||||||
|
--next-bg-menuBarActiveColor: var(--next-color-hover-rgba) !important;
|
||||||
--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
|
--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
|
||||||
--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
|
--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
|
||||||
--next-border-color-light: var(--next-border-black) !important;
|
--next-border-color-light: var(--next-border-black) !important;
|
||||||
@@ -58,6 +59,7 @@
|
|||||||
--el-fill-color-light: var(--next-color-hover-rgba) !important;
|
--el-fill-color-light: var(--next-color-hover-rgba) !important;
|
||||||
--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
|
--el-bg-color-overlay: var(--el-color-primary-light-9) !important;
|
||||||
--el-mask-color: rgb(42 42 42 / 80%);
|
--el-mask-color: rgb(42 42 42 / 80%);
|
||||||
|
--el-fill-color-lighter: var(--next-color-hover-rgba) !important;
|
||||||
|
|
||||||
// button
|
// button
|
||||||
.el-button {
|
.el-button {
|
||||||
@@ -167,6 +169,12 @@
|
|||||||
.el-pagination.is-background .el-pager li {
|
.el-pagination.is-background .el-pager li {
|
||||||
background-color: var(--next-bg-color);
|
background-color: var(--next-bg-color);
|
||||||
}
|
}
|
||||||
|
/*深色模式时分页高亮问题*/
|
||||||
|
.el-pagination.is-background .btn-next.is-active,
|
||||||
|
.el-pagination.is-background .btn-prev.is-active,
|
||||||
|
.el-pagination.is-background .el-pager li.is-active {
|
||||||
|
color: var(--next-color-white) !important;
|
||||||
|
}
|
||||||
|
|
||||||
// radio
|
// radio
|
||||||
.el-radio-button:not(.is-active) .el-radio-button__inner {
|
.el-radio-button:not(.is-active) .el-radio-button__inner {
|
||||||
@@ -233,4 +241,9 @@
|
|||||||
border-color: var(--el-border-color-lighter) !important;
|
border-color: var(--el-border-color-lighter) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// loading
|
||||||
|
.el-loading-mask {
|
||||||
|
background-color: var(--next-bg-main) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,13 +3,13 @@
|
|||||||
/* Button 按钮
|
/* Button 按钮
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
// 第三方字体图标大小
|
// 第三方字体图标大小
|
||||||
.el-button i.el-icon,
|
.el-button:not(.is-circle) i.el-icon,
|
||||||
.el-button i.iconfont,
|
.el-button i.iconfont,
|
||||||
.el-button i.fa,
|
.el-button i.fa,
|
||||||
.el-button--default i.iconfont,
|
.el-button--default i.iconfont,
|
||||||
.el-button--default i.fa {
|
.el-button--default i.fa {
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
//margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.el-button--small i.iconfont,
|
.el-button--small i.iconfont,
|
||||||
.el-button--small i.fa {
|
.el-button--small i.fa {
|
||||||
@@ -19,9 +19,6 @@
|
|||||||
|
|
||||||
/* Input 输入框、InputNumber 计数器
|
/* Input 输入框、InputNumber 计数器
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
.el-input {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
// 菜单搜索
|
// 菜单搜索
|
||||||
.el-autocomplete-suggestion__wrap {
|
.el-autocomplete-suggestion__wrap {
|
||||||
max-height: 280px !important;
|
max-height: 280px !important;
|
||||||
@@ -32,7 +29,7 @@
|
|||||||
.el-form {
|
.el-form {
|
||||||
// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
|
// 用于修改弹窗时表单内容间隔太大问题，如系统设置的新增菜单弹窗里的表单内容
|
||||||
.el-form-item:last-of-type {
|
.el-form-item:last-of-type {
|
||||||
//margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
// 修复行内表单最后一个 el-form-item 位置下移问题
|
// 修复行内表单最后一个 el-form-item 位置下移问题
|
||||||
&.el-form--inline {
|
&.el-form--inline {
|
||||||
@@ -44,6 +41,10 @@
|
|||||||
margin-bottom: 18px !important;
|
margin-bottom: 18px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I5K1PM
|
||||||
|
.el-form-item .el-form-item__label .el-icon {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Alert 警告
|
/* Alert 警告
|
||||||
@@ -67,7 +68,7 @@
|
|||||||
------------------------------- */
|
------------------------------- */
|
||||||
// 鼠标 hover 时颜色
|
// 鼠标 hover 时颜色
|
||||||
.el-menu-hover-bg-color {
|
.el-menu-hover-bg-color {
|
||||||
background-color: var(--next-color-menu-hover) !important;
|
background-color: var(--next-bg-menuBarActiveColor) !important;
|
||||||
}
|
}
|
||||||
// 默认样式修改
|
// 默认样式修改
|
||||||
.el-menu {
|
.el-menu {
|
||||||
@@ -107,6 +108,9 @@
|
|||||||
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
|
.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
|
||||||
@extend .el-menu-hover-bg-color;
|
@extend .el-menu-hover-bg-color;
|
||||||
}
|
}
|
||||||
|
.el-menu-item:hover {
|
||||||
|
@extend .el-menu-hover-bg-color;
|
||||||
|
}
|
||||||
.el-sub-menu.is-active.is-opened .el-sub-menu__title {
|
.el-sub-menu.is-active.is-opened .el-sub-menu__title {
|
||||||
background-color: unset !important;
|
background-color: unset !important;
|
||||||
}
|
}
|
||||||
@@ -259,17 +263,41 @@
|
|||||||
.el-scrollbar__bar {
|
.el-scrollbar__bar {
|
||||||
z-index: 4;
|
z-index: 4;
|
||||||
}
|
}
|
||||||
|
/*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
||||||
.el-scrollbar__wrap {
|
.el-scrollbar__wrap {
|
||||||
max-height: 100%; /*防止页面切换时，滚动条高度不变的问题（滚动条高度非滚动条滚动高度）*/
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
.el-select-dropdown .el-scrollbar__wrap {
|
.el-select-dropdown .el-scrollbar__wrap {
|
||||||
overflow-x: scroll !important;
|
overflow-x: scroll !important;
|
||||||
}
|
}
|
||||||
|
/*修复Select 选择器高度问题*/
|
||||||
.el-select-dropdown__wrap {
|
.el-select-dropdown__wrap {
|
||||||
max-height: 274px !important; /*修复Select 选择器高度问题*/
|
max-height: 274px !important;
|
||||||
}
|
}
|
||||||
|
/*修复Cascader 级联选择器高度问题*/
|
||||||
.el-cascader-menu__wrap.el-scrollbar__wrap {
|
.el-cascader-menu__wrap.el-scrollbar__wrap {
|
||||||
height: 204px !important; /*修复Cascader 级联选择器高度问题*/
|
height: 204px !important;
|
||||||
|
}
|
||||||
|
/*用于界面高度自适应（main.vue），区分 scrollbar__view，防止其它使用 scrollbar 的地方出现滚动条消失*/
|
||||||
|
.layout-container-view .el-scrollbar__view {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
/*防止分栏布局二级菜单很多时，滚动条消失问题*/
|
||||||
|
.layout-columns-warp .layout-aside .el-scrollbar__view {
|
||||||
|
height: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pagination 分页
|
||||||
|
------------------------------- */
|
||||||
|
.el-pagination__editor {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
/*深色模式时分页高亮问题*/
|
||||||
|
.el-pagination.is-background .btn-next.is-active,
|
||||||
|
.el-pagination.is-background .btn-prev.is-active,
|
||||||
|
.el-pagination.is-background .el-pager li.is-active {
|
||||||
|
background-color: var(--el-color-primary) !important;
|
||||||
|
color: var(--el-color-white) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Drawer 抽屉
|
/* Drawer 抽屉
|
||||||
|
|||||||
@@ -5,64 +5,25 @@
|
|||||||
.icon-selector-warp {
|
.icon-selector-warp {
|
||||||
height: 260px;
|
height: 260px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
.icon-selector-warp-title {
|
.icon-selector-warp-title {
|
||||||
|
position: absolute;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
padding: 0 15px;
|
left: 15px;
|
||||||
.icon-selector-warp-title-tab {
|
|
||||||
span {
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.span-active {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.icon-selector-warp-row {
|
.el-tabs__header {
|
||||||
height: 230px;
|
display: flex;
|
||||||
overflow: hidden;
|
justify-content: flex-end;
|
||||||
border-top: 1px solid var(--el-border-color);
|
padding: 0 15px;
|
||||||
.el-row {
|
border-bottom: 1px solid var(--el-border-color-light);
|
||||||
padding: 15px;
|
margin: 0 !important;
|
||||||
}
|
.el-tabs__nav-wrap {
|
||||||
.el-scrollbar__bar.is-horizontal {
|
&::after {
|
||||||
display: none;
|
height: 0 !important;
|
||||||
}
|
|
||||||
.icon-selector-warp-item {
|
|
||||||
display: flex;
|
|
||||||
border: 1px solid var(--el-border-color);
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
.icon-selector-warp-item-value {
|
|
||||||
i {
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--el-text-color-regular);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&:hover {
|
.el-tabs__item {
|
||||||
cursor: pointer;
|
padding: 0 5px !important;
|
||||||
background-color: var(--el-color-primary-light-9);
|
|
||||||
border: 1px solid var(--el-color-primary-light-5);
|
|
||||||
.icon-selector-warp-item-value {
|
|
||||||
i {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.icon-selector-active {
|
|
||||||
background-color: var(--el-color-primary-light-9);
|
|
||||||
border: 1px solid var(--el-color-primary-light-5);
|
|
||||||
.icon-selector-warp-item-value {
|
|
||||||
i {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,8 +2,6 @@
|
|||||||
@import 'common/transition.scss';
|
@import 'common/transition.scss';
|
||||||
@import './other.scss';
|
@import './other.scss';
|
||||||
@import './element.scss';
|
@import './element.scss';
|
||||||
@import './iconSelector.scss';
|
|
||||||
@import './media/media.scss';
|
@import './media/media.scss';
|
||||||
@import './waves.scss';
|
@import './waves.scss';
|
||||||
@import './dark.scss';
|
@import './dark.scss';
|
||||||
@import './fastCrud.scss';
|
|
||||||
|
|||||||
@@ -13,6 +13,19 @@
|
|||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
|
// 响应式表单时，登录页需要重新处理
|
||||||
display: unset !important;
|
display: unset !important;
|
||||||
}
|
}
|
||||||
|
// 表格演示中的表单筛选
|
||||||
|
.table-form-btn {
|
||||||
|
display: flex !important;
|
||||||
|
.el-form-item__label {
|
||||||
|
width: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 表格演示中的表单筛选最大高度，适配移动端
|
||||||
|
.table-search-container {
|
||||||
|
max-height: 160px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -52,4 +52,8 @@
|
|||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// pagination 分页中的工具栏
|
||||||
|
.table-footer-tool {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,32 +1,23 @@
|
|||||||
@import './index.scss';
|
@import './index.scss';
|
||||||
|
|
||||||
/* 页面宽度小于992px
|
/* 页面宽度小于1200px
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
@media screen and (max-width: $lg) {
|
@media screen and (max-width: $lg) and (min-width: $xs) {
|
||||||
.login-container {
|
.login-container {
|
||||||
.login-icon-group {
|
.login-left {
|
||||||
&::before {
|
.login-left-img {
|
||||||
content: '';
|
top: 90% !important;
|
||||||
height: 70% !important;
|
left: 12% !important;
|
||||||
transition: all 0.3s ease;
|
width: 30% !important;
|
||||||
}
|
height: 18% !important;
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
width: 100px !important;
|
|
||||||
height: 200px !important;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
.login-right {
|
||||||
}
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
/* 页面宽度小于992px
|
left: 50%;
|
||||||
------------------------------- */
|
transform: translate(-50%, -50%);
|
||||||
@media screen and (max-width: $md) {
|
}
|
||||||
.login-content {
|
|
||||||
right: unset !important;
|
|
||||||
left: 50% !important;
|
|
||||||
transform: translate(-50%, -50%) translate3d(0, 0, 0) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,19 +25,34 @@
|
|||||||
------------------------------- */
|
------------------------------- */
|
||||||
@media screen and (max-width: $xs) {
|
@media screen and (max-width: $xs) {
|
||||||
.login-container {
|
.login-container {
|
||||||
.login-icon-group {
|
.login-left {
|
||||||
display: none !important;
|
display: none;
|
||||||
}
|
}
|
||||||
.login-content {
|
.login-right {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100% !important;
|
.login-right-warp {
|
||||||
padding: 20px 0 !important;
|
width: 100% !important;
|
||||||
border-radius: 0 !important;
|
height: 100% !important;
|
||||||
box-shadow: unset !important;
|
border: none !important;
|
||||||
border: none !important;
|
.login-right-warp-mian {
|
||||||
}
|
.el-form-item {
|
||||||
.el-form-item {
|
display: flex !important;
|
||||||
display: flex !important;
|
}
|
||||||
|
.login-right-warp-main-title {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-right-warp-one {
|
||||||
|
&::after {
|
||||||
|
right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-right-warp-two {
|
||||||
|
&::before {
|
||||||
|
bottom: 1px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -55,9 +61,14 @@
|
|||||||
------------------------------- */
|
------------------------------- */
|
||||||
@media screen and (max-width: $us) {
|
@media screen and (max-width: $us) {
|
||||||
.login-container {
|
.login-container {
|
||||||
.login-content-title {
|
.login-right {
|
||||||
font-size: 18px !important;
|
.login-right-warp {
|
||||||
transition: all 0.3s ease;
|
.login-right-warp-mian {
|
||||||
|
.login-right-warp-main-title {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,9 +7,9 @@
|
|||||||
.el-pagination__jump {
|
.el-pagination__jump {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
// 默认居中对齐
|
||||||
|
.el-pagination,
|
||||||
// 默认居中对齐
|
.table-footer {
|
||||||
.el-pagination {
|
justify-content: center !important;
|
||||||
text-align: center !important;
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
/* wangeditor富文本编辑器
|
/* wangeditor 富文本编辑器
|
||||||
------------------------------- */
|
------------------------------- */
|
||||||
.editor-container {
|
.editor-container {
|
||||||
z-index: 9999;
|
z-index: 10; // 用于 wangeditor 点击全屏时
|
||||||
.w-e-toolbar {
|
.w-e-toolbar {
|
||||||
border: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
border: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
border-bottom: 1px solid var(--el-border-color-light, #ebeef5) !important;
|
||||||
|
|||||||
27
web/src/theme/tableTool.scss
Normal file
27
web/src/theme/tableTool.scss
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
.table-tool-popper {
|
||||||
|
padding: 0 !important;
|
||||||
|
.tool-box {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
height: 40px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.tool-sortable {
|
||||||
|
max-height: 303px;
|
||||||
|
.tool-sortable-item {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 12px;
|
||||||
|
&:hover {
|
||||||
|
background: var(--el-fill-color-lighter);
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
web/src/types/axios.d.ts
vendored
Normal file
13
web/src/types/axios.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
import * as axios from 'axios';
|
||||||
|
|
||||||
|
// 扩展 axios 数据返回类型，可自行扩展
|
||||||
|
declare module 'axios' {
|
||||||
|
export interface AxiosResponse<T = any> {
|
||||||
|
code: number;
|
||||||
|
data: T;
|
||||||
|
message: string;
|
||||||
|
type?: string;
|
||||||
|
[key: string]: T;
|
||||||
|
}
|
||||||
|
}
|
||||||
111
web/src/types/global.d.ts
vendored
Normal file
111
web/src/types/global.d.ts
vendored
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
// 申明外部 npm 插件模块
|
||||||
|
declare module 'vue-grid-layout';
|
||||||
|
declare module 'qrcodejs2-fixes';
|
||||||
|
declare module 'splitpanes';
|
||||||
|
declare module 'js-cookie';
|
||||||
|
declare module '@wangeditor/editor-for-vue';
|
||||||
|
declare module 'js-table2excel';
|
||||||
|
declare module 'qs';
|
||||||
|
|
||||||
|
// 声明一个模块，防止引入文件时报错
|
||||||
|
declare module '*.json';
|
||||||
|
declare module '*.png';
|
||||||
|
declare module '*.jpg';
|
||||||
|
declare module '*.scss';
|
||||||
|
declare module '*.ts';
|
||||||
|
declare module '*.js';
|
||||||
|
|
||||||
|
// 声明文件，*.vue 后缀的文件交给 vue 模块来处理
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue';
|
||||||
|
const component: DefineComponent<{}, {}, any>;
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 声明文件，定义全局变量
|
||||||
|
/* eslint-disable */
|
||||||
|
declare interface Window {
|
||||||
|
nextLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 声明路由当前项类型
|
||||||
|
declare type RouteItem<T = any> = {
|
||||||
|
path: string;
|
||||||
|
name?: string | symbol | undefined | null;
|
||||||
|
redirect?: string;
|
||||||
|
k?: T;
|
||||||
|
meta?: {
|
||||||
|
title?: string;
|
||||||
|
isLink?: string;
|
||||||
|
isHide?: boolean;
|
||||||
|
isKeepAlive?: boolean;
|
||||||
|
isAffix?: boolean;
|
||||||
|
isIframe?: boolean;
|
||||||
|
roles?: string[];
|
||||||
|
icon?: string;
|
||||||
|
isDynamic?: boolean;
|
||||||
|
isDynamicPath?: string;
|
||||||
|
isIframeOpen?: string;
|
||||||
|
loading?: boolean;
|
||||||
|
};
|
||||||
|
children: T[];
|
||||||
|
query?: { [key: string]: T };
|
||||||
|
params?: { [key: string]: T };
|
||||||
|
contextMenuClickId?: string | number;
|
||||||
|
commonUrl?: string;
|
||||||
|
isFnClick?: boolean;
|
||||||
|
url?: string;
|
||||||
|
transUrl?: string;
|
||||||
|
title?: string;
|
||||||
|
id?: string | number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 声明路由 to from
|
||||||
|
declare interface RouteToFrom<T = any> extends RouteItem {
|
||||||
|
path?: string;
|
||||||
|
children?: T[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 声明路由当前项类型集合
|
||||||
|
declare type RouteItems<T extends RouteItem = any> = T[];
|
||||||
|
|
||||||
|
// 声明 ref
|
||||||
|
declare type RefType<T = any> = T | null;
|
||||||
|
|
||||||
|
// 声明 HTMLElement
|
||||||
|
declare type HtmlType = HTMLElement | string | undefined | null;
|
||||||
|
|
||||||
|
// 申明 children 可选
|
||||||
|
declare type ChilType<T = any> = {
|
||||||
|
children?: T[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 申明 数组
|
||||||
|
declare type EmptyArrayType<T = any> = T[];
|
||||||
|
|
||||||
|
// 申明 对象
|
||||||
|
declare type EmptyObjectType<T = any> = {
|
||||||
|
[key: string]: T;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 申明 select option
|
||||||
|
declare type SelectOptionType = {
|
||||||
|
value: string | number;
|
||||||
|
label: string | number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 鼠标滚轮滚动类型
|
||||||
|
declare interface WheelEventType extends WheelEvent {
|
||||||
|
wheelDelta: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// table 数据格式公共类型
|
||||||
|
declare interface TableType<T = any> {
|
||||||
|
total: number;
|
||||||
|
loading: boolean;
|
||||||
|
param: {
|
||||||
|
pageNum: number;
|
||||||
|
pageSize: number;
|
||||||
|
[key: string]: T;
|
||||||
|
};
|
||||||
|
}
|
||||||
59
web/src/types/layout.d.ts
vendored
Normal file
59
web/src/types/layout.d.ts
vendored
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
// aside
|
||||||
|
declare type AsideState = {
|
||||||
|
menuList: RouteRecordRaw[];
|
||||||
|
clientWidth: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// columnsAside
|
||||||
|
declare type ColumnsAsideState<T = any> = {
|
||||||
|
columnsAsideList: T[];
|
||||||
|
liIndex: number;
|
||||||
|
liOldIndex: null | number;
|
||||||
|
liHoverIndex: null | number;
|
||||||
|
liOldPath: null | string;
|
||||||
|
difference: number;
|
||||||
|
routeSplit: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// navBars breadcrumb
|
||||||
|
declare type BreadcrumbState<T = any> = {
|
||||||
|
breadcrumbList: T[];
|
||||||
|
routeSplit: string[];
|
||||||
|
routeSplitFirst: string;
|
||||||
|
routeSplitIndex: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// navBars search
|
||||||
|
declare type SearchState<T = any> = {
|
||||||
|
isShowSearch: boolean;
|
||||||
|
menuQuery: string;
|
||||||
|
tagsViewList: T[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// navBars tagsView
|
||||||
|
declare type TagsViewState<T = any> = {
|
||||||
|
routeActive: string | T;
|
||||||
|
routePath: string | unknown;
|
||||||
|
dropdown: {
|
||||||
|
x: string | number;
|
||||||
|
y: string | number;
|
||||||
|
};
|
||||||
|
sortable: T;
|
||||||
|
tagsRefsIndex: number;
|
||||||
|
tagsViewList: T[];
|
||||||
|
tagsViewRoutesList: T[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// navBars parent
|
||||||
|
declare type ParentViewState<T = any> = {
|
||||||
|
refreshRouterViewKey: string;
|
||||||
|
iframeRefreshKey: string;
|
||||||
|
keepAliveNameList: string[];
|
||||||
|
iframeList: T[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// navBars link
|
||||||
|
declare type LinkViewState = {
|
||||||
|
title: string;
|
||||||
|
isLink: string;
|
||||||
|
};
|
||||||
38
web/src/types/mitt.d.ts
vendored
Normal file
38
web/src/types/mitt.d.ts
vendored
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/**
|
||||||
|
* mitt 事件类型定义
|
||||||
|
*
|
||||||
|
* @method openSetingsDrawer 打开布局设置弹窗
|
||||||
|
* @method restoreDefault 分栏布局，鼠标移入、移出数据显示
|
||||||
|
* @method setSendColumnsChildren 分栏布局，鼠标移入、移出菜单数据传入到 navMenu 下的菜单中
|
||||||
|
* @method setSendClassicChildren 经典布局，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
|
||||||
|
* @method getBreadcrumbIndexSetFilterRoutes 布局设置弹窗，开启切割菜单时，菜单数据传入到 navMenu 下的菜单中
|
||||||
|
* @method layoutMobileResize 浏览器窗口改变时，用于适配移动端界面显示
|
||||||
|
* @method openOrCloseSortable 布局设置弹窗，开启 TagsView 拖拽
|
||||||
|
* @method openShareTagsView 布局设置弹窗，开启 TagsView 共用
|
||||||
|
* @method onTagsViewRefreshRouterView tagsview 刷新界面
|
||||||
|
* @method onCurrentContextmenuClick tagsview 右键菜单每项点击时
|
||||||
|
*/
|
||||||
|
declare type MittType<T = any> = {
|
||||||
|
openSetingsDrawer?: string;
|
||||||
|
restoreDefault?: string;
|
||||||
|
setSendColumnsChildren: T;
|
||||||
|
setSendClassicChildren: T;
|
||||||
|
getBreadcrumbIndexSetFilterRoutes?: string;
|
||||||
|
layoutMobileResize: T;
|
||||||
|
openOrCloseSortable?: string;
|
||||||
|
openShareTagsView?: string;
|
||||||
|
onTagsViewRefreshRouterView?: T;
|
||||||
|
onCurrentContextmenuClick?: T;
|
||||||
|
};
|
||||||
|
|
||||||
|
// mitt 参数类型定义
|
||||||
|
declare type LayoutMobileResize = {
|
||||||
|
layout: string;
|
||||||
|
clientWidth: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
// mitt 参数菜单类型
|
||||||
|
declare type MittMenu = {
|
||||||
|
children: RouteRecordRaw[];
|
||||||
|
item?: RouteItem;
|
||||||
|
};
|
||||||
91
web/src/types/pinia.d.ts
vendored
Normal file
91
web/src/types/pinia.d.ts
vendored
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
/**
|
||||||
|
* pinia 类型定义
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 用户信息
|
||||||
|
declare interface UserInfosState<T = any> {
|
||||||
|
userInfos: {
|
||||||
|
authBtnList: string[];
|
||||||
|
photo: string;
|
||||||
|
roles: string[];
|
||||||
|
time: number;
|
||||||
|
userName: string;
|
||||||
|
[key: string]: T;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 路由缓存列表
|
||||||
|
declare interface KeepAliveNamesState {
|
||||||
|
keepAliveNames: string[];
|
||||||
|
cachedViews: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 后端返回原始路由(未处理时)
|
||||||
|
declare interface RequestOldRoutesState {
|
||||||
|
requestOldRoutes: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// TagsView 路由列表
|
||||||
|
declare interface TagsViewRoutesState<T = any> {
|
||||||
|
tagsViewRoutes: T[];
|
||||||
|
isTagsViewCurrenFull: Boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 路由列表
|
||||||
|
declare interface RoutesListState<T = any> {
|
||||||
|
routesList: T[];
|
||||||
|
isColumnsMenuHover: Boolean;
|
||||||
|
isColumnsNavHover: Boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 布局配置
|
||||||
|
declare interface ThemeConfigState {
|
||||||
|
themeConfig: {
|
||||||
|
isDrawer: boolean;
|
||||||
|
primary: string;
|
||||||
|
topBar: string;
|
||||||
|
topBarColor: string;
|
||||||
|
isTopBarColorGradual: boolean;
|
||||||
|
menuBar: string;
|
||||||
|
menuBarColor: string;
|
||||||
|
menuBarActiveColor: string;
|
||||||
|
isMenuBarColorGradual: boolean;
|
||||||
|
columnsMenuBar: string;
|
||||||
|
columnsMenuBarColor: string;
|
||||||
|
isColumnsMenuBarColorGradual: boolean;
|
||||||
|
isColumnsMenuHoverPreload: boolean;
|
||||||
|
isCollapse: boolean;
|
||||||
|
isUniqueOpened: boolean;
|
||||||
|
isFixedHeader: boolean;
|
||||||
|
isFixedHeaderChange: boolean;
|
||||||
|
isClassicSplitMenu: boolean;
|
||||||
|
isLockScreen: boolean;
|
||||||
|
lockScreenTime: number;
|
||||||
|
isShowLogo: boolean;
|
||||||
|
isShowLogoChange: boolean;
|
||||||
|
isBreadcrumb: boolean;
|
||||||
|
isTagsview: boolean;
|
||||||
|
isBreadcrumbIcon: boolean;
|
||||||
|
isTagsviewIcon: boolean;
|
||||||
|
isCacheTagsView: boolean;
|
||||||
|
isSortableTagsView: boolean;
|
||||||
|
isShareTagsView: boolean;
|
||||||
|
isFooter: boolean;
|
||||||
|
isGrayscale: boolean;
|
||||||
|
isInvert: boolean;
|
||||||
|
isIsDark: boolean;
|
||||||
|
isWartermark: boolean;
|
||||||
|
wartermarkText: string;
|
||||||
|
tagsStyle: string;
|
||||||
|
animation: string;
|
||||||
|
columnsAsideStyle: string;
|
||||||
|
columnsAsideLayout: string;
|
||||||
|
layout: string;
|
||||||
|
isRequestRoutes: boolean;
|
||||||
|
globalTitle: string;
|
||||||
|
globalViceTitle: string;
|
||||||
|
globalViceTitleMsg: string;
|
||||||
|
globalI18n: string;
|
||||||
|
globalComponentSize: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
329
web/src/types/views.d.ts
vendored
Normal file
329
web/src/types/views.d.ts
vendored
Normal file
@@ -0,0 +1,329 @@
|
|||||||
|
/**
|
||||||
|
* views personal
|
||||||
|
*/
|
||||||
|
type NewInfo = {
|
||||||
|
title: string;
|
||||||
|
date: string;
|
||||||
|
link: string;
|
||||||
|
};
|
||||||
|
type Recommend = {
|
||||||
|
title: string;
|
||||||
|
msg: string;
|
||||||
|
icon: string;
|
||||||
|
bg: string;
|
||||||
|
iconColor: string;
|
||||||
|
};
|
||||||
|
declare type PersonalState = {
|
||||||
|
newsInfoList: NewInfo[];
|
||||||
|
recommendList: Recommend[];
|
||||||
|
personalForm: {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
autograph: string;
|
||||||
|
occupation: string;
|
||||||
|
phone: string;
|
||||||
|
sex: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* views visualizing
|
||||||
|
*/
|
||||||
|
declare type Demo2State<T = any> = {
|
||||||
|
time: {
|
||||||
|
txt: string;
|
||||||
|
fun: number;
|
||||||
|
};
|
||||||
|
dropdownList: T[];
|
||||||
|
dropdownActive: string;
|
||||||
|
skyList: T[];
|
||||||
|
dBtnList: T[];
|
||||||
|
chartData4Index: number;
|
||||||
|
dBtnActive: number;
|
||||||
|
earth3DBtnList: T[];
|
||||||
|
chartData4List: T[];
|
||||||
|
myCharts: T[];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* views params
|
||||||
|
*/
|
||||||
|
declare type ParamsState = {
|
||||||
|
value: string;
|
||||||
|
tagsViewName: string;
|
||||||
|
tagsViewNameIsI18n: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* views system
|
||||||
|
*/
|
||||||
|
// role
|
||||||
|
declare interface RowRoleType {
|
||||||
|
roleName: string;
|
||||||
|
roleSign: string;
|
||||||
|
describe: string;
|
||||||
|
sort: number;
|
||||||
|
status: boolean;
|
||||||
|
createTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SysRoleTableType extends TableType {
|
||||||
|
data: RowRoleType[];
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface SysRoleState {
|
||||||
|
tableData: SysRoleTableType;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type TreeType = {
|
||||||
|
id: number;
|
||||||
|
label: string;
|
||||||
|
children?: TreeType[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// user
|
||||||
|
declare type RowUserType<T = any> = {
|
||||||
|
userName: string;
|
||||||
|
userNickname: string;
|
||||||
|
roleSign: string;
|
||||||
|
department: string[];
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
sex: string;
|
||||||
|
password: string;
|
||||||
|
overdueTime: T;
|
||||||
|
status: boolean;
|
||||||
|
describe: string;
|
||||||
|
createTime: T;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface SysUserTableType extends TableType {
|
||||||
|
data: RowUserType[];
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface SysUserState {
|
||||||
|
tableData: SysUserTableType;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type DeptTreeType = {
|
||||||
|
deptName: string;
|
||||||
|
createTime: string;
|
||||||
|
status: boolean;
|
||||||
|
sort: number;
|
||||||
|
describe: string;
|
||||||
|
id: number | string;
|
||||||
|
children?: DeptTreeType[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// dept
|
||||||
|
declare interface RowDeptType extends DeptTreeType {
|
||||||
|
deptLevel: string[];
|
||||||
|
person: string;
|
||||||
|
phone: string;
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SysDeptTableType extends TableType {
|
||||||
|
data: DeptTreeType[];
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface SysDeptState {
|
||||||
|
tableData: SysDeptTableType;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dic
|
||||||
|
type ListType = {
|
||||||
|
id: number;
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare interface RowDicType {
|
||||||
|
dicName: string;
|
||||||
|
fieldName: string;
|
||||||
|
describe: string;
|
||||||
|
status: boolean;
|
||||||
|
createTime: string;
|
||||||
|
list: ListType[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SysDicTableType extends TableType {
|
||||||
|
data: RowDicType[];
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface SysDicState {
|
||||||
|
tableData: SysDicTableType;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* views pages
|
||||||
|
*/
|
||||||
|
// filtering
|
||||||
|
declare type FilteringChilType = {
|
||||||
|
id: number | string;
|
||||||
|
label: string;
|
||||||
|
active: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type FilterListType = {
|
||||||
|
img: string;
|
||||||
|
title: string;
|
||||||
|
evaluate: string;
|
||||||
|
collection: string;
|
||||||
|
price: string;
|
||||||
|
monSales: string;
|
||||||
|
id: number | string;
|
||||||
|
loading?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type FilteringRowType = {
|
||||||
|
title: string;
|
||||||
|
isMore: boolean;
|
||||||
|
isShowMore: boolean;
|
||||||
|
id: number | string;
|
||||||
|
children: FilteringChilType[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// tableRules
|
||||||
|
declare type TableRulesHeaderType = {
|
||||||
|
prop: string;
|
||||||
|
width: string | number;
|
||||||
|
label: string;
|
||||||
|
isRequired?: boolean;
|
||||||
|
isTooltip?: boolean;
|
||||||
|
type: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type TableRulesState = {
|
||||||
|
tableData: {
|
||||||
|
data: EmptyObjectType[];
|
||||||
|
header: TableRulesHeaderType[];
|
||||||
|
option: SelectOptionType[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type TableRulesOneProps = {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
autograph: string;
|
||||||
|
occupation: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
// tree
|
||||||
|
declare type RowTreeType = {
|
||||||
|
id: number;
|
||||||
|
label: string;
|
||||||
|
label1: string;
|
||||||
|
label2: string;
|
||||||
|
isShow: boolean;
|
||||||
|
children?: RowTreeType[];
|
||||||
|
};
|
||||||
|
|
||||||
|
// workflow index
|
||||||
|
declare type NodeListState = {
|
||||||
|
id: string | number;
|
||||||
|
nodeId: string | undefined;
|
||||||
|
class: HTMLElement | string;
|
||||||
|
left: number | string;
|
||||||
|
top: number | string;
|
||||||
|
icon: string;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type LineListState = {
|
||||||
|
sourceId: string;
|
||||||
|
targetId: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type XyState = {
|
||||||
|
x: string | number;
|
||||||
|
y: string | number;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type WorkflowState<T = any> = {
|
||||||
|
leftNavList: T[];
|
||||||
|
dropdownNode: XyState;
|
||||||
|
dropdownLine: XyState;
|
||||||
|
isShow: boolean;
|
||||||
|
jsPlumb: T;
|
||||||
|
jsPlumbNodeIndex: null | number;
|
||||||
|
jsplumbDefaults: T;
|
||||||
|
jsplumbMakeSource: T;
|
||||||
|
jsplumbMakeTarget: T;
|
||||||
|
jsplumbConnect: T;
|
||||||
|
jsplumbData: {
|
||||||
|
nodeList: NodeListState[];
|
||||||
|
lineList: LineListState[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// workflow drawer
|
||||||
|
declare type WorkflowDrawerNodeState<T = any> = {
|
||||||
|
node: { [key: string]: T };
|
||||||
|
nodeRules: T;
|
||||||
|
form: T;
|
||||||
|
tabsActive: string;
|
||||||
|
loading: {
|
||||||
|
extend: boolean;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type WorkflowDrawerLabelType = {
|
||||||
|
type: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type WorkflowDrawerState<T = any> = {
|
||||||
|
isOpen: boolean;
|
||||||
|
nodeData: {
|
||||||
|
type: string;
|
||||||
|
};
|
||||||
|
jsplumbConn: T;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* views make
|
||||||
|
*/
|
||||||
|
// tableDemo
|
||||||
|
declare type TableDemoPageType = {
|
||||||
|
pageNum: number;
|
||||||
|
pageSize: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type TableHeaderType = {
|
||||||
|
key: string;
|
||||||
|
width: string;
|
||||||
|
title: string;
|
||||||
|
type: string | number;
|
||||||
|
colWidth: string;
|
||||||
|
width?: string | number;
|
||||||
|
height?: string | number;
|
||||||
|
isCheck: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type TableSearchType = {
|
||||||
|
label: string;
|
||||||
|
prop: string;
|
||||||
|
placeholder: string;
|
||||||
|
required: boolean;
|
||||||
|
type: string;
|
||||||
|
options?: SelectOptionType[];
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type TableDemoState = {
|
||||||
|
tableData: {
|
||||||
|
data: EmptyObjectType[];
|
||||||
|
header: TableHeaderType[];
|
||||||
|
config: {
|
||||||
|
total: number;
|
||||||
|
loading: boolean;
|
||||||
|
isBorder: boolean;
|
||||||
|
isSelection: boolean;
|
||||||
|
isSerialNo: boolean;
|
||||||
|
isOperate: boolean;
|
||||||
|
};
|
||||||
|
search: TableSearchType[];
|
||||||
|
param: EmptyObjectType;
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -23,7 +23,7 @@ export function judementSameArr(newArr: unknown[] | string[], oldArr: string[]):
|
|||||||
* @param b 要比较的对象二
|
* @param b 要比较的对象二
|
||||||
* @returns 相同返回 true，反之则反
|
* @returns 相同返回 true，反之则反
|
||||||
*/
|
*/
|
||||||
export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
|
export function isObjectValueEqual<T>(a: T, b: T): boolean {
|
||||||
if (!a || !b) return false;
|
if (!a || !b) return false;
|
||||||
let aProps = Object.getOwnPropertyNames(a);
|
let aProps = Object.getOwnPropertyNames(a);
|
||||||
let bProps = Object.getOwnPropertyNames(b);
|
let bProps = Object.getOwnPropertyNames(b);
|
||||||
@@ -48,19 +48,18 @@ export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]
|
|||||||
* @param attr 需要去重的键值（数组对象）
|
* @param attr 需要去重的键值（数组对象）
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
export function removeDuplicate(arr: any, attr?: string) {
|
export function removeDuplicate(arr: EmptyArrayType, attr?: string) {
|
||||||
if (!arr && !arr.length) {
|
if (!Object.keys(arr).length) {
|
||||||
return arr;
|
return arr;
|
||||||
} else {
|
} else {
|
||||||
if (attr) {
|
if (attr) {
|
||||||
const obj: any = {};
|
const obj: EmptyObjectType = {};
|
||||||
const newArr = arr.reduce((cur: any, item: any) => {
|
return arr.reduce((cur: EmptyArrayType[], item: EmptyArrayType) => {
|
||||||
obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
|
obj[item[attr]] ? '' : (obj[item[attr]] = true && item[attr] && cur.push(item));
|
||||||
return cur;
|
return cur;
|
||||||
}, []);
|
}, []);
|
||||||
return newArr;
|
|
||||||
} else {
|
} else {
|
||||||
return Array.from(new Set([...arr]));
|
return [...new Set(arr)];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,22 +7,23 @@ import { useI18n } from 'vue-i18n';
|
|||||||
export default function () {
|
export default function () {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { toClipboard } = useClipboard();
|
const { toClipboard } = useClipboard();
|
||||||
//百分比格式化
|
|
||||||
const percentFormat = (row: any, column: number, cellValue: any) => {
|
// 百分比格式化
|
||||||
|
const percentFormat = (row: EmptyArrayType, column: number, cellValue: string) => {
|
||||||
return cellValue ? `${cellValue}%` : '-';
|
return cellValue ? `${cellValue}%` : '-';
|
||||||
};
|
};
|
||||||
//列表日期时间格式化
|
// 列表日期时间格式化
|
||||||
const dateFormatYMD = (row: any, column: number, cellValue: any) => {
|
const dateFormatYMD = (row: EmptyArrayType, column: number, cellValue: string) => {
|
||||||
if (!cellValue) return '-';
|
if (!cellValue) return '-';
|
||||||
return formatDate(new Date(cellValue), 'YYYY-mm-dd');
|
return formatDate(new Date(cellValue), 'YYYY-mm-dd');
|
||||||
};
|
};
|
||||||
//列表日期时间格式化
|
// 列表日期时间格式化
|
||||||
const dateFormatYMDHMS = (row: any, column: number, cellValue: any) => {
|
const dateFormatYMDHMS = (row: EmptyArrayType, column: number, cellValue: string) => {
|
||||||
if (!cellValue) return '-';
|
if (!cellValue) return '-';
|
||||||
return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
|
return formatDate(new Date(cellValue), 'YYYY-mm-dd HH:MM:SS');
|
||||||
};
|
};
|
||||||
//列表日期时间格式化
|
// 列表日期时间格式化
|
||||||
const dateFormatHMS = (row: any, column: number, cellValue: any) => {
|
const dateFormatHMS = (row: EmptyArrayType, column: number, cellValue: string) => {
|
||||||
if (!cellValue) return '-';
|
if (!cellValue) return '-';
|
||||||
let time = 0;
|
let time = 0;
|
||||||
if (typeof row === 'number') time = row;
|
if (typeof row === 'number') time = row;
|
||||||
@@ -30,11 +31,11 @@ export default function () {
|
|||||||
return formatDate(new Date(time * 1000), 'HH:MM:SS');
|
return formatDate(new Date(time * 1000), 'HH:MM:SS');
|
||||||
};
|
};
|
||||||
// 小数格式化
|
// 小数格式化
|
||||||
const scaleFormat = (value: any = 0, scale: number = 4) => {
|
const scaleFormat = (value: string = '0', scale: number = 4) => {
|
||||||
return Number.parseFloat(value).toFixed(scale);
|
return Number.parseFloat(value).toFixed(scale);
|
||||||
};
|
};
|
||||||
// 小数格式化
|
// 小数格式化
|
||||||
const scale2Format = (value: any = 0) => {
|
const scale2Format = (value: string = '0') => {
|
||||||
return Number.parseFloat(value).toFixed(2);
|
return Number.parseFloat(value).toFixed(2);
|
||||||
};
|
};
|
||||||
// 点击复制文本
|
// 点击复制文本
|
||||||
|
|||||||
@@ -32,11 +32,13 @@ export const NextLoading = {
|
|||||||
window.nextLoading = true;
|
window.nextLoading = true;
|
||||||
},
|
},
|
||||||
// 移除 loading
|
// 移除 loading
|
||||||
done: () => {
|
done: (time: number = 0) => {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
window.nextLoading = false;
|
setTimeout(() => {
|
||||||
const el = <HTMLElement>document.querySelector('.loading-next');
|
window.nextLoading = false;
|
||||||
el?.parentNode?.removeChild(el);
|
const el = <HTMLElement>document.querySelector('.loading-next');
|
||||||
|
el?.parentNode?.removeChild(el);
|
||||||
|
}, time);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
8
web/src/utils/mitt.ts
Normal file
8
web/src/utils/mitt.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
// https://www.npmjs.com/package/mitt
|
||||||
|
import mitt, { Emitter } from 'mitt';
|
||||||
|
|
||||||
|
// 类型
|
||||||
|
const emitter: Emitter<MittType> = mitt<MittType>();
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
export default emitter;
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { nextTick } from 'vue';
|
import { nextTick, defineAsyncComponent } from 'vue';
|
||||||
import type { App } from 'vue';
|
import type { App } from 'vue';
|
||||||
import * as svg from '@element-plus/icons-vue';
|
import * as svg from '@element-plus/icons-vue';
|
||||||
import router from '/@/router/index';
|
import router from '/@/router/index';
|
||||||
@@ -7,7 +7,10 @@ import { storeToRefs } from 'pinia';
|
|||||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||||
import { i18n } from '/@/i18n/index';
|
import { i18n } from '/@/i18n/index';
|
||||||
import { Local } from '/@/utils/storage';
|
import { Local } from '/@/utils/storage';
|
||||||
import SvgIcon from '/@/components/svgIcon/index.vue';
|
import { verifyUrl } from '/@/utils/toolsValidate';
|
||||||
|
|
||||||
|
// 引入组件
|
||||||
|
const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 导出全局注册 element plus svg 图标
|
* 导出全局注册 element plus svg 图标
|
||||||
@@ -34,7 +37,7 @@ export function useTitle() {
|
|||||||
let globalTitle: string = themeConfig.value.globalTitle;
|
let globalTitle: string = themeConfig.value.globalTitle;
|
||||||
const { path, meta } = router.currentRoute.value;
|
const { path, meta } = router.currentRoute.value;
|
||||||
if (path === '/login') {
|
if (path === '/login') {
|
||||||
webTitle = <any>meta.title;
|
webTitle = <string>meta.title;
|
||||||
} else {
|
} else {
|
||||||
webTitle = setTagsViewNameI18n(router.currentRoute.value);
|
webTitle = setTagsViewNameI18n(router.currentRoute.value);
|
||||||
}
|
}
|
||||||
@@ -48,20 +51,20 @@ export function useTitle() {
|
|||||||
* @returns 返回当前 tagsViewName 名称
|
* @returns 返回当前 tagsViewName 名称
|
||||||
*/
|
*/
|
||||||
export function setTagsViewNameI18n(item: any) {
|
export function setTagsViewNameI18n(item: any) {
|
||||||
let tagsViewName: any = '';
|
let tagsViewName: string = '';
|
||||||
const { query, params, meta } = item;
|
const { query, params, meta } = item;
|
||||||
if (query?.tagsViewName || params?.tagsViewName) {
|
if (query?.tagsViewName || params?.tagsViewName) {
|
||||||
if (/\/zh-cn|en|zh-tw\//.test(query?.tagsViewName) || /\/(zh-cn|en|zh-tw)\//.test(params?.tagsViewName)) {
|
if (/\/zh-cn|en|zh-tw\//.test(query?.tagsViewName) || /\/zh-cn|en|zh-tw\//.test(params?.tagsViewName)) {
|
||||||
// 国际化
|
// 国际化
|
||||||
const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName));
|
const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName));
|
||||||
tagsViewName = urlTagsParams[i18n.global.locale];
|
tagsViewName = urlTagsParams[i18n.global.locale.value];
|
||||||
} else {
|
} else {
|
||||||
// 非国际化
|
// 非国际化
|
||||||
tagsViewName = query?.tagsViewName || params?.tagsViewName;
|
tagsViewName = query?.tagsViewName || params?.tagsViewName;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 非自定义 tagsView 名称
|
// 非自定义 tagsView 名称
|
||||||
tagsViewName = i18n.global.t(<any>meta.title);
|
tagsViewName = i18n.global.t(meta.title);
|
||||||
}
|
}
|
||||||
return tagsViewName;
|
return tagsViewName;
|
||||||
}
|
}
|
||||||
@@ -72,7 +75,7 @@ export function setTagsViewNameI18n(item: any) {
|
|||||||
* @param arr 列表数据
|
* @param arr 列表数据
|
||||||
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
|
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
|
||||||
*/
|
*/
|
||||||
export const lazyImg = (el: any, arr: any) => {
|
export const lazyImg = (el: string, arr: EmptyArrayType) => {
|
||||||
const io = new IntersectionObserver((res) => {
|
const io = new IntersectionObserver((res) => {
|
||||||
res.forEach((v: any) => {
|
res.forEach((v: any) => {
|
||||||
if (v.isIntersecting) {
|
if (v.isIntersecting) {
|
||||||
@@ -105,8 +108,8 @@ export const globalComponentSize = (): string => {
|
|||||||
* @param obj 源对象
|
* @param obj 源对象
|
||||||
* @returns 克隆后的对象
|
* @returns 克隆后的对象
|
||||||
*/
|
*/
|
||||||
export function deepClone(obj: any) {
|
export function deepClone(obj: EmptyObjectType) {
|
||||||
let newObj: any;
|
let newObj: EmptyObjectType;
|
||||||
try {
|
try {
|
||||||
newObj = obj.push ? [] : {};
|
newObj = obj.push ? [] : {};
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -143,7 +146,7 @@ export function isMobile() {
|
|||||||
* @param list 数组对象
|
* @param list 数组对象
|
||||||
* @returns 删除空值后的数组对象
|
* @returns 删除空值后的数组对象
|
||||||
*/
|
*/
|
||||||
export function handleEmpty(list: any) {
|
export function handleEmpty(list: EmptyArrayType) {
|
||||||
const arr = [];
|
const arr = [];
|
||||||
for (const i in list) {
|
for (const i in list) {
|
||||||
const d = [];
|
const d = [];
|
||||||
@@ -158,6 +161,17 @@ export function handleEmpty(list: any) {
|
|||||||
return arr;
|
return arr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 打开外部链接
|
||||||
|
* @param val 当前点击项菜单
|
||||||
|
*/
|
||||||
|
export function handleOpenLink(val: RouteItem) {
|
||||||
|
const { origin, pathname } = window.location;
|
||||||
|
router.push(val.path);
|
||||||
|
if (verifyUrl(<string>val.meta?.isLink)) window.open(val.meta?.isLink);
|
||||||
|
else window.open(`${origin}${pathname}#${val.meta?.isLink}`);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 统一批量导出
|
* 统一批量导出
|
||||||
* @method elSvg 导出全局注册 element plus svg 图标
|
* @method elSvg 导出全局注册 element plus svg 图标
|
||||||
@@ -168,6 +182,7 @@ export function handleEmpty(list: any) {
|
|||||||
* @method deepClone 对象深克隆
|
* @method deepClone 对象深克隆
|
||||||
* @method isMobile 判断是否是移动端
|
* @method isMobile 判断是否是移动端
|
||||||
* @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
|
* @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象
|
||||||
|
* @method handleOpenLink 打开外部链接
|
||||||
*/
|
*/
|
||||||
const other = {
|
const other = {
|
||||||
elSvg: (app: App) => {
|
elSvg: (app: App) => {
|
||||||
@@ -176,24 +191,27 @@ const other = {
|
|||||||
useTitle: () => {
|
useTitle: () => {
|
||||||
useTitle();
|
useTitle();
|
||||||
},
|
},
|
||||||
setTagsViewNameI18n(route: any) {
|
setTagsViewNameI18n(route: RouteToFrom) {
|
||||||
return setTagsViewNameI18n(route);
|
return setTagsViewNameI18n(route);
|
||||||
},
|
},
|
||||||
lazyImg: (el: any, arr: any) => {
|
lazyImg: (el: string, arr: EmptyArrayType) => {
|
||||||
lazyImg(el, arr);
|
lazyImg(el, arr);
|
||||||
},
|
},
|
||||||
globalComponentSize: () => {
|
globalComponentSize: () => {
|
||||||
return globalComponentSize();
|
return globalComponentSize();
|
||||||
},
|
},
|
||||||
deepClone: (obj: any) => {
|
deepClone: (obj: EmptyObjectType) => {
|
||||||
return deepClone(obj);
|
return deepClone(obj);
|
||||||
},
|
},
|
||||||
isMobile: () => {
|
isMobile: () => {
|
||||||
return isMobile();
|
return isMobile();
|
||||||
},
|
},
|
||||||
handleEmpty: (list: any) => {
|
handleEmpty: (list: EmptyArrayType) => {
|
||||||
return handleEmpty(list);
|
return handleEmpty(list);
|
||||||
},
|
},
|
||||||
|
handleOpenLink: (val: RouteItem) => {
|
||||||
|
handleOpenLink(val);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// 统一批量导出
|
// 统一批量导出
|
||||||
|
|||||||
@@ -1,20 +1,26 @@
|
|||||||
import axios from 'axios';
|
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||||
import { Session } from '/@/utils/storage';
|
import { Session } from '/@/utils/storage';
|
||||||
|
import qs from 'qs';
|
||||||
|
|
||||||
// 配置新建一个 axios 实例
|
// 配置新建一个 axios 实例
|
||||||
const service = axios.create({
|
const service: AxiosInstance = axios.create({
|
||||||
baseURL: import.meta.env.VITE_API_URL as any,
|
baseURL: import.meta.env.VITE_API_URL,
|
||||||
timeout: 50000,
|
timeout: 50000,
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
paramsSerializer: {
|
||||||
|
serialize(params) {
|
||||||
|
return qs.stringify(params, { allowDots: true });
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 添加请求拦截器
|
// 添加请求拦截器
|
||||||
service.interceptors.request.use(
|
service.interceptors.request.use(
|
||||||
(config) => {
|
(config: AxiosRequestConfig) => {
|
||||||
// 在发送请求之前做些什么 token
|
// 在发送请求之前做些什么 token
|
||||||
if (Session.get('token')) {
|
if (Session.get('token')) {
|
||||||
(<any>config.headers).common['Authorization'] = `${Session.get('token')}`;
|
config.headers!['Authorization'] = `${Session.get('token')}`;
|
||||||
}
|
}
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export const Local = {
|
|||||||
},
|
},
|
||||||
// 获取永久缓存
|
// 获取永久缓存
|
||||||
get(key: string) {
|
get(key: string) {
|
||||||
let json: any = window.localStorage.getItem(key);
|
let json = <string>window.localStorage.getItem(key);
|
||||||
return JSON.parse(json);
|
return JSON.parse(json);
|
||||||
},
|
},
|
||||||
// 移除永久缓存
|
// 移除永久缓存
|
||||||
@@ -43,7 +43,7 @@ export const Session = {
|
|||||||
// 获取临时缓存
|
// 获取临时缓存
|
||||||
get(key: string) {
|
get(key: string) {
|
||||||
if (key === 'token') return Cookies.get(key);
|
if (key === 'token') return Cookies.get(key);
|
||||||
let json: any = window.sessionStorage.getItem(key);
|
let json = <string>window.sessionStorage.getItem(key);
|
||||||
return JSON.parse(json);
|
return JSON.parse(json);
|
||||||
},
|
},
|
||||||
// 移除临时缓存
|
// 移除临时缓存
|
||||||
|
|||||||
@@ -1,59 +1,63 @@
|
|||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* hex颜色转rgb颜色
|
* 颜色转换函数
|
||||||
* @param str 颜色值字符串
|
* @method hexToRgb hex 颜色转 rgb 颜色
|
||||||
* @returns 返回处理后的颜色值
|
* @method rgbToHex rgb 颜色转 Hex 颜色
|
||||||
|
* @method getDarkColor 加深颜色值
|
||||||
|
* @method getLightColor 变浅颜色值
|
||||||
*/
|
*/
|
||||||
export function hexToRgb(str: any) {
|
export function useChangeColor() {
|
||||||
let hexs: any = '';
|
// str 颜色值字符串
|
||||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
const hexToRgb = (str: string): any => {
|
||||||
if (!reg.test(str)) return ElMessage.warning('输入错误的hex');
|
let hexs: any = '';
|
||||||
str = str.replace('#', '');
|
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||||
hexs = str.match(/../g);
|
if (!reg.test(str)) {
|
||||||
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
ElMessage.warning('输入错误的hex');
|
||||||
return hexs;
|
return '';
|
||||||
}
|
}
|
||||||
|
str = str.replace('#', '');
|
||||||
/**
|
hexs = str.match(/../g);
|
||||||
* rgb颜色转Hex颜色
|
for (let i = 0; i < 3; i++) hexs[i] = parseInt(hexs[i], 16);
|
||||||
* @param r 代表红色
|
return hexs;
|
||||||
* @param g 代表绿色
|
};
|
||||||
* @param b 代表蓝色
|
// r 代表红色 | g 代表绿色 | b 代表蓝色
|
||||||
* @returns 返回处理后的颜色值
|
const rgbToHex = (r: any, g: any, b: any): string => {
|
||||||
*/
|
let reg = /^\d{1,3}$/;
|
||||||
export function rgbToHex(r: any, g: any, b: any) {
|
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) {
|
||||||
let reg = /^\d{1,3}$/;
|
ElMessage.warning('输入错误的rgb颜色值');
|
||||||
if (!reg.test(r) || !reg.test(g) || !reg.test(b)) return ElMessage.warning('输入错误的rgb颜色值');
|
return '';
|
||||||
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
}
|
||||||
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
let hexs = [r.toString(16), g.toString(16), b.toString(16)];
|
||||||
return `#${hexs.join('')}`;
|
for (let i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = `0${hexs[i]}`;
|
||||||
}
|
return `#${hexs.join('')}`;
|
||||||
|
};
|
||||||
/**
|
// color 颜色值字符串 | level 变浅的程度，限0-1之间
|
||||||
* 加深颜色值
|
const getDarkColor = (color: string, level: number): string => {
|
||||||
* @param color 颜色值字符串
|
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||||
* @param level 加深的程度，限0-1之间
|
if (!reg.test(color)) {
|
||||||
* @returns 返回处理后的颜色值
|
ElMessage.warning('输入错误的hex颜色值');
|
||||||
*/
|
return '';
|
||||||
export function getDarkColor(color: string, level: number) {
|
}
|
||||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
let rgb = useChangeColor().hexToRgb(color);
|
||||||
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
|
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
|
||||||
let rgb = hexToRgb(color);
|
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor(rgb[i] * (1 - level));
|
};
|
||||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
// color 颜色值字符串 | level 加深的程度，限0-1之间
|
||||||
}
|
const getLightColor = (color: string, level: number): string => {
|
||||||
|
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
||||||
/**
|
if (!reg.test(color)) {
|
||||||
* 变浅颜色值
|
ElMessage.warning('输入错误的hex颜色值');
|
||||||
* @param color 颜色值字符串
|
return '';
|
||||||
* @param level 加深的程度，限0-1之间
|
}
|
||||||
* @returns 返回处理后的颜色值
|
let rgb = useChangeColor().hexToRgb(color);
|
||||||
*/
|
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
||||||
export function getLightColor(color: string, level: number) {
|
return useChangeColor().rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||||
let reg = /^\#?[0-9A-Fa-f]{6}$/;
|
};
|
||||||
if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值');
|
return {
|
||||||
let rgb = hexToRgb(color);
|
hexToRgb,
|
||||||
for (let i = 0; i < 3; i++) rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
|
rgbToHex,
|
||||||
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
getDarkColor,
|
||||||
|
getLightColor,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,16 +5,16 @@ const setWatermark = (str: string) => {
|
|||||||
const can = document.createElement('canvas');
|
const can = document.createElement('canvas');
|
||||||
can.width = 200;
|
can.width = 200;
|
||||||
can.height = 130;
|
can.height = 130;
|
||||||
const cans: any = can.getContext('2d');
|
const cans = <CanvasRenderingContext2D>can.getContext('2d');
|
||||||
cans.rotate((-20 * Math.PI) / 180);
|
cans.rotate((-20 * Math.PI) / 180);
|
||||||
cans.font = '12px Vedana';
|
cans.font = '12px Vedana';
|
||||||
cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
|
cans.fillStyle = 'rgba(200, 200, 200, 0.30)';
|
||||||
cans.textBaseline = 'Middle';
|
cans.textBaseline = 'middle';
|
||||||
cans.fillText(str, can.width / 10, can.height / 2);
|
cans.fillText(str, can.width / 10, can.height / 2);
|
||||||
const div = document.createElement('div');
|
const div = document.createElement('div');
|
||||||
div.id = id;
|
div.id = id;
|
||||||
div.style.pointerEvents = 'none';
|
div.style.pointerEvents = 'none';
|
||||||
div.style.top = '15px';
|
div.style.top = '0px';
|
||||||
div.style.left = '0px';
|
div.style.left = '0px';
|
||||||
div.style.position = 'fixed';
|
div.style.position = 'fixed';
|
||||||
div.style.zIndex = '10000000';
|
div.style.zIndex = '10000000';
|
||||||
|
|||||||
434
web/src/views/chart/chart.scss
Normal file
434
web/src/views/chart/chart.scss
Normal file
@@ -0,0 +1,434 @@
|
|||||||
|
.chart-scrollbar {
|
||||||
|
.chart-warp {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.chart-warp-bottom {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
.big-data-down-left,
|
||||||
|
.big-data-down-right {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.flex-warp-item {
|
||||||
|
padding: 0 7.5px 15px 15px;
|
||||||
|
width: 100%;
|
||||||
|
height: 33.33%;
|
||||||
|
.flex-warp-item-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--el-color-white);
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 15px;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
.flex-title {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.flex-title-small {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex-content {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.flex-content-overflow {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.big-data-down-left {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
.sky {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.sky-left {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.sky-center {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 10px;
|
||||||
|
font {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
.span {
|
||||||
|
background: #22bc76;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0 5px;
|
||||||
|
color: var(--el-color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sky-right {
|
||||||
|
span {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
font {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sky-dd {
|
||||||
|
.sky-dl {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
div {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
i {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tip {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sky-dl-first {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d-states {
|
||||||
|
display: flex;
|
||||||
|
.d-states-item {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
height: 33px;
|
||||||
|
width: 33px;
|
||||||
|
line-height: 33px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
flex-shrink: 1;
|
||||||
|
color: var(--el-color-white);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.i-bg1 {
|
||||||
|
background: #22bc76;
|
||||||
|
}
|
||||||
|
.i-bg2 {
|
||||||
|
background: #e2356d;
|
||||||
|
}
|
||||||
|
.i-bg3 {
|
||||||
|
background: #43bbef;
|
||||||
|
}
|
||||||
|
.d-states-flex {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 10px 0;
|
||||||
|
.d-states-item-label {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.d-states-item-value {
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 3px;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.d-btn {
|
||||||
|
margin-top: 5px;
|
||||||
|
.d-btn-item {
|
||||||
|
border: 1px solid var(--el-color-primary);
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 35px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
margin-top: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
.d-btn-item-left {
|
||||||
|
font-size: 20px;
|
||||||
|
border: 1px solid var(--el-color-primary);
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
border-radius: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.d-btn-item-center {
|
||||||
|
padding: 0 10px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.d-btn-item-eight {
|
||||||
|
text-align: right;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.big-data-down-center {
|
||||||
|
width: 40%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.big-data-down-center-one {
|
||||||
|
height: 66.67%;
|
||||||
|
padding: 0 7.5px 15px;
|
||||||
|
.big-data-down-center-one-content {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--el-color-white);
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.big-data-down-center-two {
|
||||||
|
padding: 0 7.5px 15px;
|
||||||
|
height: 33.33%;
|
||||||
|
.flex-warp-item-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--el-color-white);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
.flex-title {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.flex-title-small {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex-content {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
.flex-content-left {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 120px;
|
||||||
|
height: 100%;
|
||||||
|
.monitor-item {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.monitor-wave {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
position: relative;
|
||||||
|
background-color: var(--el-color-primary);
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
animation: roateOne 10s linear infinite;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
bottom: 10px;
|
||||||
|
border-radius: 60%;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
bottom: 8px;
|
||||||
|
opacity: 0.7;
|
||||||
|
border-radius: 37%;
|
||||||
|
}
|
||||||
|
.monitor-z-index {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes roateOne {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, 0) rotateZ(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -2%) rotateZ(180deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, 0%) rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.monitor-active {
|
||||||
|
background-color: #22bc76;
|
||||||
|
.monitor-z-index {
|
||||||
|
color: #22bc76;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex-content-right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.big-data-down-right {
|
||||||
|
.flex-warp-item {
|
||||||
|
padding: 0 15px 15px 7.5px;
|
||||||
|
.flex-title {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
.flex-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.task {
|
||||||
|
display: flex;
|
||||||
|
height: 45px;
|
||||||
|
.task-item {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--el-color-white);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.task-item-box {
|
||||||
|
position: relative;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: -2;
|
||||||
|
left: -50%;
|
||||||
|
top: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 50% 50%, 50% 50%;
|
||||||
|
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
|
||||||
|
background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
|
||||||
|
linear-gradient(#ffb980, #ffb980);
|
||||||
|
animation: rotate 2s linear infinite;
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
left: 1px;
|
||||||
|
top: 1px;
|
||||||
|
width: calc(100% - 2px);
|
||||||
|
height: calc(100% - 2px);
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.task-item-value {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.task-item-label {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task1 {
|
||||||
|
&::after {
|
||||||
|
background: #5492be;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task2 {
|
||||||
|
&::after {
|
||||||
|
background: #43a177;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task3 {
|
||||||
|
&::after {
|
||||||
|
background: #a76077;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.task-first-item {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
.task-first {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 15px;
|
||||||
|
.progress-item {
|
||||||
|
height: 33.33%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.progress-box {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 10px;
|
||||||
|
:deep(.el-progress__text) {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
font-size: 12px !important;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
:deep(.el-progress-bar__outer) {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-progress-bar) {
|
||||||
|
margin-right: -22px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
59
web/src/views/chart/chart.ts
Normal file
59
web/src/views/chart/chart.ts
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* sky 天气
|
||||||
|
* @returns 返回模拟数据
|
||||||
|
*/
|
||||||
|
export const skyList = [
|
||||||
|
{
|
||||||
|
v1: '时间',
|
||||||
|
v2: '天气',
|
||||||
|
v3: '温度',
|
||||||
|
v5: '降水',
|
||||||
|
v7: '风力',
|
||||||
|
type: 'title',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
v1: '今天',
|
||||||
|
v2: 'ele-Sunny',
|
||||||
|
v3: '20°/26°',
|
||||||
|
v5: '50%',
|
||||||
|
v7: '13m/s',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
v1: '明天',
|
||||||
|
v2: 'ele-Lightning',
|
||||||
|
v3: '20°/26°',
|
||||||
|
v5: '50%',
|
||||||
|
v7: '13m/s',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前设置状态
|
||||||
|
* @returns 返回模拟数据
|
||||||
|
*/
|
||||||
|
export const dBtnList = [
|
||||||
|
{
|
||||||
|
v2: '阳光玫瑰种植',
|
||||||
|
v3: '126天',
|
||||||
|
v4: '设备在线',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前设备监测
|
||||||
|
* @returns 返回模拟数据
|
||||||
|
*/
|
||||||
|
export const chartData4List = [
|
||||||
|
{
|
||||||
|
label: '温度',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '光照',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '湿度',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '风力',
|
||||||
|
},
|
||||||
|
];
|
||||||
101
web/src/views/chart/head.vue
Normal file
101
web/src/views/chart/head.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<template>
|
||||||
|
<div class="big-data-up mb15">
|
||||||
|
<div class="up-left">
|
||||||
|
<i class="el-icon-time mr5"></i>
|
||||||
|
<span>{{ state.time.txt }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="up-center">
|
||||||
|
<span>智慧农业系统平台</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="chartHead">
|
||||||
|
import { reactive, onBeforeMount, onUnmounted } from 'vue';
|
||||||
|
import { formatDate } from '/@/utils/formatTime';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const state = reactive({
|
||||||
|
time: {
|
||||||
|
txt: '',
|
||||||
|
fun: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化时间
|
||||||
|
const initTime = () => {
|
||||||
|
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||||
|
state.time.fun = window.setInterval(() => {
|
||||||
|
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
// 页面加载前
|
||||||
|
onBeforeMount(() => {
|
||||||
|
initTime();
|
||||||
|
});
|
||||||
|
// 页面卸载时
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.clearInterval(state.time.fun);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.big-data-up {
|
||||||
|
height: 55px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
.up-left {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.up-center {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
background-image: -webkit-linear-gradient(
|
||||||
|
left,
|
||||||
|
var(--el-color-primary),
|
||||||
|
var(--el-color-primary-light-3) 25%,
|
||||||
|
var(--el-color-primary) 50%,
|
||||||
|
var(--el-color-primary-light-3) 75%,
|
||||||
|
var(--el-color-primary)
|
||||||
|
);
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
background-size: 200% 100%;
|
||||||
|
-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||||
|
animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||||||
|
-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
|
||||||
|
position: relative;
|
||||||
|
@keyframes masked-animation {
|
||||||
|
0% {
|
||||||
|
background-position: 0 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
background-position: -100% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
width: 250px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border: 1px transparent solid;
|
||||||
|
border-image: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
477
web/src/views/chart/index.vue
Normal file
477
web/src/views/chart/index.vue
Normal file
@@ -0,0 +1,477 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-scrollbar layout-padding">
|
||||||
|
<div class="chart-warp layout-padding-auto layout-padding-view">
|
||||||
|
<div class="chart-warp-top">
|
||||||
|
<ChartHead />
|
||||||
|
</div>
|
||||||
|
<div class="chart-warp-bottom">
|
||||||
|
<!-- 左边 -->
|
||||||
|
<div class="big-data-down-left">
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">天气预报</div>
|
||||||
|
<div class="flex-content">
|
||||||
|
<div class="sky">
|
||||||
|
<SvgIcon name="ele-Sunny" class="sky-left" />
|
||||||
|
<div class="sky-center">
|
||||||
|
<div class="mb2">
|
||||||
|
<span>多云转晴</span>
|
||||||
|
<span>东南风</span>
|
||||||
|
<span class="span ml5">良</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sky-right">
|
||||||
|
<span>25</span>
|
||||||
|
<span>°C</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sky-dd">
|
||||||
|
<div class="sky-dl" v-for="(v, k) in state.skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
|
||||||
|
<div>{{ v.v1 }}</div>
|
||||||
|
<div v-if="v.type === 'title'">{{ v.v2 }}</div>
|
||||||
|
<div v-else>
|
||||||
|
<SvgIcon :name="v.v2" />
|
||||||
|
</div>
|
||||||
|
<div>{{ v.v3 }}</div>
|
||||||
|
<div class="tip">{{ v.v5 }}</div>
|
||||||
|
<div>{{ v.v7 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">当前设备状态</div>
|
||||||
|
<div class="flex-content flex-content-overflow">
|
||||||
|
<div class="d-states">
|
||||||
|
<div class="d-states-item">
|
||||||
|
<SvgIcon name="ele-Odometer" class="i-bg1" />
|
||||||
|
<div class="d-states-flex">
|
||||||
|
<div class="d-states-item-label">园区设备数</div>
|
||||||
|
<div class="d-states-item-value">99</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-states-item">
|
||||||
|
<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
|
||||||
|
<div class="d-states-flex">
|
||||||
|
<div class="d-states-item-label">预警设备数</div>
|
||||||
|
<div class="d-states-item-value">10</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-states-item">
|
||||||
|
<SvgIcon name="ele-VideoPlay" class="i-bg3" />
|
||||||
|
<div class="d-states-flex">
|
||||||
|
<div class="d-states-item-label">运行设备数</div>
|
||||||
|
<div class="d-states-item-value">20</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-btn">
|
||||||
|
<div class="d-btn-item" v-for="(v, k) in state.dBtnList" :key="k">
|
||||||
|
<i class="d-btn-item-left el-icon-money"></i>
|
||||||
|
<div class="d-btn-item-center">
|
||||||
|
<div>{{ v.v2 }}|{{ v.v3 }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-btn-item-eight">{{ v.v4 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">近30天预警总数</div>
|
||||||
|
<div class="flex-content">
|
||||||
|
<div style="height: 100%" ref="chartsWarningRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 中间 -->
|
||||||
|
<div class="big-data-down-center">
|
||||||
|
<div class="big-data-down-center-one">
|
||||||
|
<div class="big-data-down-center-one-content">
|
||||||
|
<div style="height: 100%" ref="chartsCenterOneRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="big-data-down-center-two">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">
|
||||||
|
<span>当前设备监测</span>
|
||||||
|
<span class="flex-title-small">单位：次</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-content">
|
||||||
|
<div class="flex-content-left">
|
||||||
|
<div class="monitor-item" v-for="(v, k) in state.chartData4List" :key="k">
|
||||||
|
<div class="monitor-wave">
|
||||||
|
<div class="monitor-z-index">
|
||||||
|
<div class="monitor-item-label">{{ v.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-content-right">
|
||||||
|
<div style="height: 100%" ref="chartsMonitorRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右边 -->
|
||||||
|
<div class="big-data-down-right">
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">
|
||||||
|
<span>近7天产品追溯扫码统计</span>
|
||||||
|
<span class="flex-title-small">单位：次</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-content">
|
||||||
|
<div style="height: 100%" ref="chartsSevenDaysRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">当前任务统计</div>
|
||||||
|
<div class="flex-content">
|
||||||
|
<div class="task">
|
||||||
|
<div class="task-item task-first-item">
|
||||||
|
<div class="task-item-value task-first">25</div>
|
||||||
|
<div class="task-item-label">待办任务</div>
|
||||||
|
</div>
|
||||||
|
<div class="task-item">
|
||||||
|
<div class="task-item-box task1">
|
||||||
|
<div class="task-item-value">12</div>
|
||||||
|
<div class="task-item-label">施肥</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task-item">
|
||||||
|
<div class="task-item-box task2">
|
||||||
|
<div class="task-item-value">3</div>
|
||||||
|
<div class="task-item-label">施药</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="task-item">
|
||||||
|
<div class="task-item-box task3">
|
||||||
|
<div class="task-item-value">5</div>
|
||||||
|
<div class="task-item-label">农事</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-item">
|
||||||
|
<span>施肥率</span>
|
||||||
|
<div class="progress-box">
|
||||||
|
<el-progress :percentage="70" color="#43bdf0"></el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-item">
|
||||||
|
<span>施药率</span>
|
||||||
|
<div class="progress-box">
|
||||||
|
<el-progress :percentage="36" color="#43bdf0"></el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-item">
|
||||||
|
<span>农事率</span>
|
||||||
|
<div class="progress-box">
|
||||||
|
<el-progress :percentage="91" color="#43bdf0"></el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<div class="flex-title">
|
||||||
|
<span>近7天投入品记录</span>
|
||||||
|
<span class="flex-title-small">单位：件</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-content">
|
||||||
|
<div style="height: 100%" ref="chartsInvestmentRef"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="chartIndex">
|
||||||
|
import { defineAsyncComponent, reactive, onMounted, watch, nextTick, onActivated, ref } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import 'echarts-wordcloud';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
||||||
|
import { skyList, dBtnList, chartData4List } from '/@/views/chart/chart';
|
||||||
|
|
||||||
|
// 引入组件
|
||||||
|
const ChartHead = defineAsyncComponent(() => import('/@/views/chart/head.vue'));
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const chartsCenterOneRef = ref();
|
||||||
|
const chartsSevenDaysRef = ref();
|
||||||
|
const chartsWarningRef = ref();
|
||||||
|
const chartsMonitorRef = ref();
|
||||||
|
const chartsInvestmentRef = ref();
|
||||||
|
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||||
|
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||||
|
const state = reactive({
|
||||||
|
skyList,
|
||||||
|
dBtnList,
|
||||||
|
chartData4List,
|
||||||
|
myCharts: [] as EmptyArrayType,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化中间图表1
|
||||||
|
const initChartsCenterOne = () => {
|
||||||
|
const myChart = echarts.init(chartsCenterOneRef.value);
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 15,
|
||||||
|
right: 15,
|
||||||
|
bottom: 20,
|
||||||
|
left: 30,
|
||||||
|
},
|
||||||
|
tooltip: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'wordCloud',
|
||||||
|
sizeRange: [12, 40],
|
||||||
|
rotationRange: [0, 0],
|
||||||
|
rotationStep: 45,
|
||||||
|
gridSize: Math.random() * 20 + 5,
|
||||||
|
shape: 'circle',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
textStyle: {
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
color: function () {
|
||||||
|
return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ name: 'vue-next-admin', value: 520 },
|
||||||
|
{ name: 'lyt', value: 520 },
|
||||||
|
{ name: 'next-admin', value: 500 },
|
||||||
|
{ name: '更名', value: 420 },
|
||||||
|
{ name: '智慧农业', value: 520 },
|
||||||
|
{ name: '男神', value: 2.64 },
|
||||||
|
{ name: '好身材', value: 4.03 },
|
||||||
|
{ name: '校草', value: 24.95 },
|
||||||
|
{ name: '酷', value: 4.04 },
|
||||||
|
{ name: '时尚', value: 5.27 },
|
||||||
|
{ name: '阳光活力', value: 5.8 },
|
||||||
|
{ name: '初恋', value: 3.09 },
|
||||||
|
{ name: '英俊潇洒', value: 24.71 },
|
||||||
|
{ name: '霸气', value: 6.33 },
|
||||||
|
{ name: '腼腆', value: 2.55 },
|
||||||
|
{ name: '蠢萌', value: 3.88 },
|
||||||
|
{ name: '青春', value: 8.04 },
|
||||||
|
{ name: '网红', value: 5.87 },
|
||||||
|
{ name: '萌', value: 6.97 },
|
||||||
|
{ name: '认真', value: 2.53 },
|
||||||
|
{ name: '古典', value: 2.49 },
|
||||||
|
{ name: '温柔', value: 3.91 },
|
||||||
|
{ name: '有个性', value: 3.25 },
|
||||||
|
{ name: '可爱', value: 9.93 },
|
||||||
|
{ name: '幽默诙谐', value: 3.65 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
state.myCharts.push(myChart);
|
||||||
|
};
|
||||||
|
// 初始化近7天产品追溯扫码统计
|
||||||
|
const initChartsSevenDays = () => {
|
||||||
|
const myChart = echarts.init(chartsSevenDaysRef.value);
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 15,
|
||||||
|
right: 15,
|
||||||
|
bottom: 20,
|
||||||
|
left: 30,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '邮件营销',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [12, 32, 11, 34, 90, 23, 21],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '联盟广告',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [22, 82, 91, 24, 90, 30, 30],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '视频广告',
|
||||||
|
type: 'line',
|
||||||
|
stack: '总量',
|
||||||
|
data: [50, 32, 18, 14, 90, 30, 50],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
state.myCharts.push(myChart);
|
||||||
|
};
|
||||||
|
// 初始化近30天预警总数
|
||||||
|
const initChartsWarning = () => {
|
||||||
|
const myChart = echarts.init(chartsWarningRef.value);
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 50,
|
||||||
|
right: 20,
|
||||||
|
bottom: 30,
|
||||||
|
left: 30,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '面积模式',
|
||||||
|
type: 'pie',
|
||||||
|
radius: [20, 50],
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 40, name: '监测设备预警' },
|
||||||
|
{ value: 38, name: '天气预警' },
|
||||||
|
{ value: 32, name: '任务预警' },
|
||||||
|
{ value: 30, name: '病虫害预警' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
state.myCharts.push(myChart);
|
||||||
|
};
|
||||||
|
// 初始化当前设备监测
|
||||||
|
const initChartsMonitor = () => {
|
||||||
|
const myChart = echarts.init(chartsMonitorRef.value);
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 15,
|
||||||
|
right: 15,
|
||||||
|
bottom: 20,
|
||||||
|
left: 30,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: '#289df5',
|
||||||
|
borderColor: '#289df5',
|
||||||
|
areaStyle: {
|
||||||
|
type: 'default',
|
||||||
|
opacity: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [20, 32, 31, 34, 12, 13, 20],
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
state.myCharts.push(myChart);
|
||||||
|
};
|
||||||
|
// 初始化近7天投入品记录
|
||||||
|
const initChartsInvestment = () => {
|
||||||
|
const myChart = echarts.init(chartsInvestmentRef.value);
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 15,
|
||||||
|
right: 15,
|
||||||
|
bottom: 20,
|
||||||
|
left: 30,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [10, 20, 15, 80, 70, 11, 30],
|
||||||
|
type: 'bar',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
state.myCharts.push(myChart);
|
||||||
|
};
|
||||||
|
// 批量设置 echarts resize
|
||||||
|
const initEchartsResizeFun = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
for (let i = 0; i < state.myCharts.length; i++) {
|
||||||
|
state.myCharts[i].resize();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 批量设置 echarts resize
|
||||||
|
const initEchartsResize = () => {
|
||||||
|
window.addEventListener('resize', initEchartsResizeFun);
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initChartsCenterOne();
|
||||||
|
initChartsSevenDays();
|
||||||
|
initChartsWarning();
|
||||||
|
initChartsMonitor();
|
||||||
|
initChartsInvestment();
|
||||||
|
initEchartsResize();
|
||||||
|
});
|
||||||
|
// 由于页面缓存原因，keep-alive
|
||||||
|
onActivated(() => {
|
||||||
|
initEchartsResizeFun();
|
||||||
|
});
|
||||||
|
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
|
||||||
|
watch(
|
||||||
|
() => isTagsViewCurrenFull.value,
|
||||||
|
() => {
|
||||||
|
initEchartsResizeFun();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import './chart.scss';
|
||||||
|
</style>
|
||||||
91
web/src/views/error/401.vue
Normal file
91
web/src/views/error/401.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error layout-padding">
|
||||||
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
|
<div class="error-flex">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-item">
|
||||||
|
<div class="left-item-animation left-item-num">401</div>
|
||||||
|
<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
|
||||||
|
<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
|
||||||
|
<div class="left-item-animation left-item-btn">
|
||||||
|
<el-button type="primary" size="default" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<img
|
||||||
|
src="https://img-blog.csdnimg.cn/3333f265772a4fa89287993500ecbf96.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="noPower">
|
||||||
|
import { Session } from '/@/utils/storage';
|
||||||
|
|
||||||
|
const onSetAuth = () => {
|
||||||
|
// https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
|
||||||
|
// 清除缓存/token等
|
||||||
|
Session.clear();
|
||||||
|
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.error {
|
||||||
|
height: 100%;
|
||||||
|
.error-flex {
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
height: 350px;
|
||||||
|
width: 900px;
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
.left-item {
|
||||||
|
.left-item-animation {
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: error-num;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
.left-item-num {
|
||||||
|
color: var(--el-color-info);
|
||||||
|
font-size: 55px;
|
||||||
|
}
|
||||||
|
.left-item-title {
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
margin: 15px 0 5px 0;
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
}
|
||||||
|
.left-item-msg {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
.left-item-btn {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: error-img;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
91
web/src/views/error/404.vue
Normal file
91
web/src/views/error/404.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error layout-padding">
|
||||||
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
|
<div class="error-flex">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-item">
|
||||||
|
<div class="left-item-animation left-item-num">404</div>
|
||||||
|
<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
|
||||||
|
<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
|
||||||
|
<div class="left-item-animation left-item-btn">
|
||||||
|
<el-button type="primary" size="default" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<img
|
||||||
|
src="https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="notFound">
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// 返回首页
|
||||||
|
const onGoHome = () => {
|
||||||
|
router.push('/');
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.error {
|
||||||
|
height: 100%;
|
||||||
|
.error-flex {
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
height: 350px;
|
||||||
|
width: 900px;
|
||||||
|
.left {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
.left-item {
|
||||||
|
.left-item-animation {
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: error-num;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
.left-item-num {
|
||||||
|
color: var(--el-color-info);
|
||||||
|
font-size: 55px;
|
||||||
|
}
|
||||||
|
.left-item-title {
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
margin: 15px 0 5px 0;
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
}
|
||||||
|
.left-item-msg {
|
||||||
|
color: var(--el-text-color-secondary);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
.left-item-btn {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: error-img;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
web/src/views/fun/clipboard/index.vue
Normal file
30
web/src/views/fun/clipboard/index.vue
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-pd">
|
||||||
|
<el-card shadow="hover" header="复制剪切演示">
|
||||||
|
<el-alert
|
||||||
|
title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
class="mb15"
|
||||||
|
></el-alert>
|
||||||
|
<el-input placeholder="请输入内容" v-model="state.copyVal">
|
||||||
|
<template #append>
|
||||||
|
<el-button @click="copyText(state.copyVal)">复制链接</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="state.shearVal" class="mt15"> </el-input>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funClipboard">
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
import commonFunction from '/@/utils/commonFunction';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const { copyText } = commonFunction();
|
||||||
|
const state = reactive({
|
||||||
|
copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
|
||||||
|
shearVal: '',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
152
web/src/views/fun/countup/index.vue
Normal file
152
web/src/views/fun/countup/index.vue
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-pd">
|
||||||
|
<el-card shadow="hover" header="数字滚动演示">
|
||||||
|
<el-alert
|
||||||
|
title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
class="mb15"
|
||||||
|
></el-alert>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :sm="6" class="mb15" v-for="(v, k) in state.topCardItemList" :key="k">
|
||||||
|
<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
|
||||||
|
<div class="countup-card-item-flex" ref="topCardItemRefs">
|
||||||
|
<div class="countup-card-item-title pb3">{{ v.title }}</div>
|
||||||
|
<div class="countup-card-item-title-num pb6"></div>
|
||||||
|
<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
|
||||||
|
<div class="countup-card-item-tip-num"></div>
|
||||||
|
</div>
|
||||||
|
<i :class="v.icon" :style="{ color: v.iconColor }"></i>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div class="flex-warp">
|
||||||
|
<div class="flex-warp-item">
|
||||||
|
<div class="flex-warp-item-box">
|
||||||
|
<el-button type="primary" size="default" @click="refreshCurrent">
|
||||||
|
<el-icon>
|
||||||
|
<ele-RefreshRight />
|
||||||
|
</el-icon>
|
||||||
|
重置/刷新数值
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funCountup">
|
||||||
|
import { reactive, onMounted, nextTick, ref } from 'vue';
|
||||||
|
import { CountUp } from 'countup.js';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const topCardItemRefs = ref<RefType[]>([]);
|
||||||
|
const state = reactive({
|
||||||
|
topCardItemList: [
|
||||||
|
{
|
||||||
|
title: '今日访问人数',
|
||||||
|
titleNum: '123',
|
||||||
|
tip: '在场人数',
|
||||||
|
tipNum: '911',
|
||||||
|
color: '--el-color-primary',
|
||||||
|
iconColor: '#ffcb47',
|
||||||
|
icon: 'iconfont icon-jinridaiban',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '实验室总数',
|
||||||
|
titleNum: '123',
|
||||||
|
tip: '使用中',
|
||||||
|
tipNum: '611',
|
||||||
|
color: '--el-color-success',
|
||||||
|
iconColor: '#70cf41',
|
||||||
|
icon: 'iconfont icon-AIshiyanshi',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '申请人数（月）',
|
||||||
|
titleNum: '123',
|
||||||
|
tip: '通过人数',
|
||||||
|
tipNum: '911',
|
||||||
|
color: '--el-color-warning',
|
||||||
|
iconColor: '#dfae64',
|
||||||
|
icon: 'iconfont icon-shenqingkaiban',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '销售情况',
|
||||||
|
titleNum: '123',
|
||||||
|
tip: '销售数',
|
||||||
|
tipNum: '911',
|
||||||
|
color: '--el-color-danger',
|
||||||
|
iconColor: '#e56565',
|
||||||
|
icon: 'iconfont icon-ditu',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 初始化数字滚动
|
||||||
|
const initNumCountUp = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
topCardItemRefs.value.forEach((v: HTMLDivElement) => {
|
||||||
|
new CountUp(v.querySelector('.countup-card-item-title-num') as HTMLDivElement, Math.random() * 10000).start();
|
||||||
|
new CountUp(v.querySelector('.countup-card-item-tip-num') as HTMLDivElement, Math.random() * 1000).start();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 重置/刷新数值
|
||||||
|
const refreshCurrent = () => {
|
||||||
|
initNumCountUp();
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initNumCountUp();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.countup-card-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 103px;
|
||||||
|
background: var(--el-text-color-secondary);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.countup-card-item-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:hover {
|
||||||
|
i {
|
||||||
|
right: 0px !important;
|
||||||
|
bottom: 0px !important;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
right: -10px;
|
||||||
|
bottom: -10px;
|
||||||
|
font-size: 70px;
|
||||||
|
transform: rotate(-30deg);
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
}
|
||||||
|
.countup-card-item-flex {
|
||||||
|
padding: 0 20px;
|
||||||
|
color: var(--el-color-white);
|
||||||
|
.countup-card-item-title,
|
||||||
|
.countup-card-item-tip {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.countup-card-item-title-num {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.countup-card-item-tip-num {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
56
web/src/views/fun/cropper/index.vue
Normal file
56
web/src/views/fun/cropper/index.vue
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="croppers-container layout-pd">
|
||||||
|
<el-card shadow="hover" header="cropper 图片裁剪">
|
||||||
|
<el-alert
|
||||||
|
title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
class="mb15"
|
||||||
|
></el-alert>
|
||||||
|
<div class="cropper-img-warp">
|
||||||
|
<div class="mb15 mt15">
|
||||||
|
<img class="cropper-img" :src="state.cropperImg" />
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" size="default" @click="onCropperDialogOpen">
|
||||||
|
<el-icon>
|
||||||
|
<ele-Crop />
|
||||||
|
</el-icon>
|
||||||
|
更换头像
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<CropperDialog ref="cropperDialogRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funCropper">
|
||||||
|
import { defineAsyncComponent, ref, reactive } from 'vue';
|
||||||
|
|
||||||
|
// 引入组件
|
||||||
|
const CropperDialog = defineAsyncComponent(() => import('/@/components/cropper/index.vue'));
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const cropperDialogRef = ref();
|
||||||
|
const state = reactive({
|
||||||
|
cropperImg: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 打开裁剪弹窗
|
||||||
|
const onCropperDialogOpen = () => {
|
||||||
|
cropperDialogRef.value.openDialog(state.cropperImg);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.croppers-container {
|
||||||
|
.cropper-img-warp {
|
||||||
|
text-align: center;
|
||||||
|
.cropper-img {
|
||||||
|
margin: auto;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
118
web/src/views/fun/echartsMap/index.vue
Normal file
118
web/src/views/fun/echartsMap/index.vue
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<template>
|
||||||
|
<div class="layout-padding">
|
||||||
|
<div class="layout-padding-auto layout-padding-view">
|
||||||
|
<div ref="echartsMapRef" style="height: 100%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funEchartsMap">
|
||||||
|
import { reactive, onMounted, ref } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import 'echarts/extension/bmap/bmap';
|
||||||
|
import { echartsMapList, echartsMapData } from './mock';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const echartsMapRef = ref<RefType>('');
|
||||||
|
const state = reactive({
|
||||||
|
echartsMap: '' as unknown,
|
||||||
|
echartsMapList,
|
||||||
|
echartsMapData,
|
||||||
|
});
|
||||||
|
|
||||||
|
// echartsMap 将坐标信息和对应物理量的值合在一起
|
||||||
|
const convertData = (data: EmptyObjectType[]) => {
|
||||||
|
let res = [];
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
let geoCoord = state.echartsMapData[data[i].name];
|
||||||
|
if (geoCoord) {
|
||||||
|
res.push({
|
||||||
|
name: data[i].name,
|
||||||
|
value: geoCoord.concat(data[i].value),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
};
|
||||||
|
// 初始化 echartsMap
|
||||||
|
const initEchartsMap = () => {
|
||||||
|
const myChart = echarts.init(echartsMapRef.value);
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
color: ['#9a60b4', '#ea7ccc'],
|
||||||
|
bmap: {
|
||||||
|
center: [104.114129, 37.550339],
|
||||||
|
zoom: 5,
|
||||||
|
roam: true,
|
||||||
|
mapStyle: {},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'pm2.5',
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'bmap',
|
||||||
|
data: convertData(state.echartsMapList),
|
||||||
|
symbolSize: function (val: any) {
|
||||||
|
return val[2] / 10;
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
formatter: '{b}',
|
||||||
|
position: 'right',
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Top 5',
|
||||||
|
type: 'effectScatter',
|
||||||
|
coordinateSystem: 'bmap',
|
||||||
|
data: convertData(
|
||||||
|
state.echartsMapList
|
||||||
|
.sort(function (a: any, b: any) {
|
||||||
|
return b.value - a.value;
|
||||||
|
})
|
||||||
|
.slice(0, 6)
|
||||||
|
),
|
||||||
|
symbolSize: function (val: any) {
|
||||||
|
return val[2] / 10;
|
||||||
|
},
|
||||||
|
encode: {
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
showEffectOn: 'render',
|
||||||
|
rippleEffect: {
|
||||||
|
brushType: 'stroke',
|
||||||
|
},
|
||||||
|
hoverAnimation: true,
|
||||||
|
label: {
|
||||||
|
formatter: '{b}',
|
||||||
|
position: 'right',
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: '#333',
|
||||||
|
},
|
||||||
|
zlevel: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initEchartsMap();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
387
web/src/views/fun/echartsMap/mock.ts
Normal file
387
web/src/views/fun/echartsMap/mock.ts
Normal file
@@ -0,0 +1,387 @@
|
|||||||
|
// 地图模拟数据
|
||||||
|
export const echartsMapList = [
|
||||||
|
{ name: '海门', value: 9 },
|
||||||
|
{ name: '鄂尔多斯', value: 12 },
|
||||||
|
{ name: '招远', value: 12 },
|
||||||
|
{ name: '舟山', value: 12 },
|
||||||
|
{ name: '齐齐哈尔', value: 14 },
|
||||||
|
{ name: '盐城', value: 15 },
|
||||||
|
{ name: '赤峰', value: 16 },
|
||||||
|
{ name: '青岛', value: 18 },
|
||||||
|
{ name: '乳山', value: 18 },
|
||||||
|
{ name: '金昌', value: 19 },
|
||||||
|
{ name: '泉州', value: 21 },
|
||||||
|
{ name: '莱西', value: 21 },
|
||||||
|
{ name: '日照', value: 21 },
|
||||||
|
{ name: '胶南', value: 22 },
|
||||||
|
{ name: '南通', value: 23 },
|
||||||
|
{ name: '拉萨', value: 24 },
|
||||||
|
{ name: '云浮', value: 24 },
|
||||||
|
{ name: '梅州', value: 25 },
|
||||||
|
{ name: '文登', value: 25 },
|
||||||
|
{ name: '上海', value: 25 },
|
||||||
|
{ name: '攀枝花', value: 25 },
|
||||||
|
{ name: '威海', value: 25 },
|
||||||
|
{ name: '承德', value: 25 },
|
||||||
|
{ name: '厦门', value: 26 },
|
||||||
|
{ name: '汕尾', value: 26 },
|
||||||
|
{ name: '潮州', value: 26 },
|
||||||
|
{ name: '丹东', value: 27 },
|
||||||
|
{ name: '太仓', value: 27 },
|
||||||
|
{ name: '曲靖', value: 27 },
|
||||||
|
{ name: '烟台', value: 28 },
|
||||||
|
{ name: '福州', value: 29 },
|
||||||
|
{ name: '瓦房店', value: 30 },
|
||||||
|
{ name: '即墨', value: 30 },
|
||||||
|
{ name: '抚顺', value: 31 },
|
||||||
|
{ name: '玉溪', value: 31 },
|
||||||
|
{ name: '张家口', value: 31 },
|
||||||
|
{ name: '阳泉', value: 31 },
|
||||||
|
{ name: '莱州', value: 32 },
|
||||||
|
{ name: '湖州', value: 32 },
|
||||||
|
{ name: '汕头', value: 32 },
|
||||||
|
{ name: '昆山', value: 33 },
|
||||||
|
{ name: '宁波', value: 33 },
|
||||||
|
{ name: '湛江', value: 33 },
|
||||||
|
{ name: '揭阳', value: 34 },
|
||||||
|
{ name: '荣成', value: 34 },
|
||||||
|
{ name: '连云港', value: 35 },
|
||||||
|
{ name: '葫芦岛', value: 35 },
|
||||||
|
{ name: '常熟', value: 36 },
|
||||||
|
{ name: '东莞', value: 36 },
|
||||||
|
{ name: '河源', value: 36 },
|
||||||
|
{ name: '淮安', value: 36 },
|
||||||
|
{ name: '泰州', value: 36 },
|
||||||
|
{ name: '南宁', value: 37 },
|
||||||
|
{ name: '营口', value: 37 },
|
||||||
|
{ name: '惠州', value: 37 },
|
||||||
|
{ name: '江阴', value: 37 },
|
||||||
|
{ name: '蓬莱', value: 37 },
|
||||||
|
{ name: '韶关', value: 38 },
|
||||||
|
{ name: '嘉峪关', value: 38 },
|
||||||
|
{ name: '广州', value: 38 },
|
||||||
|
{ name: '延安', value: 38 },
|
||||||
|
{ name: '太原', value: 39 },
|
||||||
|
{ name: '清远', value: 39 },
|
||||||
|
{ name: '中山', value: 39 },
|
||||||
|
{ name: '昆明', value: 39 },
|
||||||
|
{ name: '寿光', value: 40 },
|
||||||
|
{ name: '盘锦', value: 40 },
|
||||||
|
{ name: '长治', value: 41 },
|
||||||
|
{ name: '深圳', value: 360 },
|
||||||
|
{ name: '珠海', value: 42 },
|
||||||
|
{ name: '宿迁', value: 43 },
|
||||||
|
{ name: '咸阳', value: 43 },
|
||||||
|
{ name: '铜川', value: 44 },
|
||||||
|
{ name: '平度', value: 44 },
|
||||||
|
{ name: '佛山', value: 44 },
|
||||||
|
{ name: '海口', value: 44 },
|
||||||
|
{ name: '江门', value: 45 },
|
||||||
|
{ name: '章丘', value: 45 },
|
||||||
|
{ name: '肇庆', value: 46 },
|
||||||
|
{ name: '大连', value: 47 },
|
||||||
|
{ name: '临汾', value: 47 },
|
||||||
|
{ name: '吴江', value: 47 },
|
||||||
|
{ name: '石嘴山', value: 49 },
|
||||||
|
{ name: '沈阳', value: 50 },
|
||||||
|
{ name: '苏州', value: 50 },
|
||||||
|
{ name: '茂名', value: 50 },
|
||||||
|
{ name: '嘉兴', value: 51 },
|
||||||
|
{ name: '长春', value: 51 },
|
||||||
|
{ name: '胶州', value: 52 },
|
||||||
|
{ name: '银川', value: 52 },
|
||||||
|
{ name: '张家港', value: 52 },
|
||||||
|
{ name: '三门峡', value: 53 },
|
||||||
|
{ name: '锦州', value: 54 },
|
||||||
|
{ name: '南昌', value: 54 },
|
||||||
|
{ name: '柳州', value: 54 },
|
||||||
|
{ name: '三亚', value: 54 },
|
||||||
|
{ name: '自贡', value: 56 },
|
||||||
|
{ name: '吉林', value: 56 },
|
||||||
|
{ name: '阳江', value: 57 },
|
||||||
|
{ name: '泸州', value: 57 },
|
||||||
|
{ name: '西宁', value: 57 },
|
||||||
|
{ name: '宜宾', value: 58 },
|
||||||
|
{ name: '呼和浩特', value: 58 },
|
||||||
|
{ name: '成都', value: 58 },
|
||||||
|
{ name: '大同', value: 58 },
|
||||||
|
{ name: '镇江', value: 59 },
|
||||||
|
{ name: '桂林', value: 59 },
|
||||||
|
{ name: '张家界', value: 59 },
|
||||||
|
{ name: '宜兴', value: 59 },
|
||||||
|
{ name: '北海', value: 60 },
|
||||||
|
{ name: '西安', value: 61 },
|
||||||
|
{ name: '金坛', value: 62 },
|
||||||
|
{ name: '东营', value: 62 },
|
||||||
|
{ name: '牡丹江', value: 63 },
|
||||||
|
{ name: '遵义', value: 63 },
|
||||||
|
{ name: '绍兴', value: 63 },
|
||||||
|
{ name: '扬州', value: 64 },
|
||||||
|
{ name: '常州', value: 64 },
|
||||||
|
{ name: '潍坊', value: 65 },
|
||||||
|
{ name: '重庆', value: 66 },
|
||||||
|
{ name: '台州', value: 67 },
|
||||||
|
{ name: '南京', value: 67 },
|
||||||
|
{ name: '滨州', value: 70 },
|
||||||
|
{ name: '贵阳', value: 71 },
|
||||||
|
{ name: '无锡', value: 71 },
|
||||||
|
{ name: '本溪', value: 71 },
|
||||||
|
{ name: '克拉玛依', value: 72 },
|
||||||
|
{ name: '渭南', value: 72 },
|
||||||
|
{ name: '马鞍山', value: 72 },
|
||||||
|
{ name: '宝鸡', value: 72 },
|
||||||
|
{ name: '焦作', value: 75 },
|
||||||
|
{ name: '句容', value: 75 },
|
||||||
|
{ name: '北京', value: 79 },
|
||||||
|
{ name: '徐州', value: 79 },
|
||||||
|
{ name: '衡水', value: 80 },
|
||||||
|
{ name: '包头', value: 80 },
|
||||||
|
{ name: '绵阳', value: 80 },
|
||||||
|
{ name: '乌鲁木齐', value: 84 },
|
||||||
|
{ name: '枣庄', value: 84 },
|
||||||
|
{ name: '杭州', value: 84 },
|
||||||
|
{ name: '淄博', value: 85 },
|
||||||
|
{ name: '鞍山', value: 86 },
|
||||||
|
{ name: '溧阳', value: 86 },
|
||||||
|
{ name: '库尔勒', value: 86 },
|
||||||
|
{ name: '安阳', value: 90 },
|
||||||
|
{ name: '开封', value: 90 },
|
||||||
|
{ name: '济南', value: 92 },
|
||||||
|
{ name: '德阳', value: 93 },
|
||||||
|
{ name: '温州', value: 95 },
|
||||||
|
{ name: '九江', value: 96 },
|
||||||
|
{ name: '邯郸', value: 98 },
|
||||||
|
{ name: '临安', value: 99 },
|
||||||
|
{ name: '兰州', value: 99 },
|
||||||
|
{ name: '沧州', value: 100 },
|
||||||
|
{ name: '临沂', value: 103 },
|
||||||
|
{ name: '南充', value: 104 },
|
||||||
|
{ name: '天津', value: 105 },
|
||||||
|
{ name: '富阳', value: 106 },
|
||||||
|
{ name: '泰安', value: 112 },
|
||||||
|
{ name: '诸暨', value: 112 },
|
||||||
|
{ name: '郑州', value: 113 },
|
||||||
|
{ name: '哈尔滨', value: 114 },
|
||||||
|
{ name: '聊城', value: 116 },
|
||||||
|
{ name: '芜湖', value: 117 },
|
||||||
|
{ name: '唐山', value: 119 },
|
||||||
|
{ name: '平顶山', value: 119 },
|
||||||
|
{ name: '邢台', value: 119 },
|
||||||
|
{ name: '德州', value: 120 },
|
||||||
|
{ name: '济宁', value: 120 },
|
||||||
|
{ name: '荆州', value: 127 },
|
||||||
|
{ name: '宜昌', value: 130 },
|
||||||
|
{ name: '义乌', value: 132 },
|
||||||
|
{ name: '丽水', value: 133 },
|
||||||
|
{ name: '洛阳', value: 134 },
|
||||||
|
{ name: '秦皇岛', value: 136 },
|
||||||
|
{ name: '株洲', value: 143 },
|
||||||
|
{ name: '石家庄', value: 147 },
|
||||||
|
{ name: '莱芜', value: 148 },
|
||||||
|
{ name: '常德', value: 152 },
|
||||||
|
{ name: '保定', value: 153 },
|
||||||
|
{ name: '湘潭', value: 154 },
|
||||||
|
{ name: '金华', value: 157 },
|
||||||
|
{ name: '岳阳', value: 169 },
|
||||||
|
{ name: '长沙', value: 175 },
|
||||||
|
{ name: '衢州', value: 177 },
|
||||||
|
{ name: '廊坊', value: 93 },
|
||||||
|
{ name: '菏泽', value: 194 },
|
||||||
|
{ name: '合肥', value: 229 },
|
||||||
|
{ name: '武汉', value: 273 },
|
||||||
|
{ name: '大庆', value: 279 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 地图经纬度数据
|
||||||
|
export const echartsMapData = {
|
||||||
|
海门: [121.15, 31.89],
|
||||||
|
鄂尔多斯: [109.781327, 39.608266],
|
||||||
|
招远: [120.38, 37.35],
|
||||||
|
舟山: [122.207216, 29.985295],
|
||||||
|
齐齐哈尔: [123.97, 47.33],
|
||||||
|
盐城: [120.13, 33.38],
|
||||||
|
赤峰: [118.87, 42.28],
|
||||||
|
青岛: [120.33, 36.07],
|
||||||
|
乳山: [121.52, 36.89],
|
||||||
|
金昌: [102.188043, 38.520089],
|
||||||
|
泉州: [118.58, 24.93],
|
||||||
|
莱西: [120.53, 36.86],
|
||||||
|
日照: [119.46, 35.42],
|
||||||
|
胶南: [119.97, 35.88],
|
||||||
|
南通: [121.05, 32.08],
|
||||||
|
拉萨: [91.11, 29.97],
|
||||||
|
云浮: [112.02, 22.93],
|
||||||
|
梅州: [116.1, 24.55],
|
||||||
|
文登: [122.05, 37.2],
|
||||||
|
上海: [121.48, 31.22],
|
||||||
|
攀枝花: [101.718637, 26.582347],
|
||||||
|
威海: [122.1, 37.5],
|
||||||
|
承德: [117.93, 40.97],
|
||||||
|
厦门: [118.1, 24.46],
|
||||||
|
汕尾: [115.375279, 22.786211],
|
||||||
|
潮州: [116.63, 23.68],
|
||||||
|
丹东: [124.37, 40.13],
|
||||||
|
太仓: [121.1, 31.45],
|
||||||
|
曲靖: [103.79, 25.51],
|
||||||
|
烟台: [121.39, 37.52],
|
||||||
|
福州: [119.3, 26.08],
|
||||||
|
瓦房店: [121.979603, 39.627114],
|
||||||
|
即墨: [120.45, 36.38],
|
||||||
|
抚顺: [123.97, 41.97],
|
||||||
|
玉溪: [102.52, 24.35],
|
||||||
|
张家口: [114.87, 40.82],
|
||||||
|
阳泉: [113.57, 37.85],
|
||||||
|
莱州: [119.942327, 37.177017],
|
||||||
|
湖州: [120.1, 30.86],
|
||||||
|
汕头: [116.69, 23.39],
|
||||||
|
昆山: [120.95, 31.39],
|
||||||
|
宁波: [121.56, 29.86],
|
||||||
|
湛江: [110.359377, 21.270708],
|
||||||
|
揭阳: [116.35, 23.55],
|
||||||
|
荣成: [122.41, 37.16],
|
||||||
|
连云港: [119.16, 34.59],
|
||||||
|
葫芦岛: [120.836932, 40.711052],
|
||||||
|
常熟: [120.74, 31.64],
|
||||||
|
东莞: [113.75, 23.04],
|
||||||
|
河源: [114.68, 23.73],
|
||||||
|
淮安: [119.15, 33.5],
|
||||||
|
泰州: [119.9, 32.49],
|
||||||
|
南宁: [108.33, 22.84],
|
||||||
|
营口: [122.18, 40.65],
|
||||||
|
惠州: [114.4, 23.09],
|
||||||
|
江阴: [120.26, 31.91],
|
||||||
|
蓬莱: [120.75, 37.8],
|
||||||
|
韶关: [113.62, 24.84],
|
||||||
|
嘉峪关: [98.289152, 39.77313],
|
||||||
|
广州: [113.23, 23.16],
|
||||||
|
延安: [109.47, 36.6],
|
||||||
|
太原: [112.53, 37.87],
|
||||||
|
清远: [113.01, 23.7],
|
||||||
|
中山: [113.38, 22.52],
|
||||||
|
昆明: [102.73, 25.04],
|
||||||
|
寿光: [118.73, 36.86],
|
||||||
|
盘锦: [122.070714, 41.119997],
|
||||||
|
长治: [113.08, 36.18],
|
||||||
|
深圳: [114.07, 22.62],
|
||||||
|
珠海: [113.52, 22.3],
|
||||||
|
宿迁: [118.3, 33.96],
|
||||||
|
咸阳: [108.72, 34.36],
|
||||||
|
铜川: [109.11, 35.09],
|
||||||
|
平度: [119.97, 36.77],
|
||||||
|
佛山: [113.11, 23.05],
|
||||||
|
海口: [110.35, 20.02],
|
||||||
|
江门: [113.06, 22.61],
|
||||||
|
章丘: [117.53, 36.72],
|
||||||
|
肇庆: [112.44, 23.05],
|
||||||
|
大连: [121.62, 38.92],
|
||||||
|
临汾: [111.5, 36.08],
|
||||||
|
吴江: [120.63, 31.16],
|
||||||
|
石嘴山: [106.39, 39.04],
|
||||||
|
沈阳: [123.38, 41.8],
|
||||||
|
苏州: [120.62, 31.32],
|
||||||
|
茂名: [110.88, 21.68],
|
||||||
|
嘉兴: [120.76, 30.77],
|
||||||
|
长春: [125.35, 43.88],
|
||||||
|
胶州: [120.03336, 36.264622],
|
||||||
|
银川: [106.27, 38.47],
|
||||||
|
张家港: [120.555821, 31.875428],
|
||||||
|
三门峡: [111.19, 34.76],
|
||||||
|
锦州: [121.15, 41.13],
|
||||||
|
南昌: [115.89, 28.68],
|
||||||
|
柳州: [109.4, 24.33],
|
||||||
|
三亚: [109.511909, 18.252847],
|
||||||
|
自贡: [104.778442, 29.33903],
|
||||||
|
吉林: [126.57, 43.87],
|
||||||
|
阳江: [111.95, 21.85],
|
||||||
|
泸州: [105.39, 28.91],
|
||||||
|
西宁: [101.74, 36.56],
|
||||||
|
宜宾: [104.56, 29.77],
|
||||||
|
呼和浩特: [111.65, 40.82],
|
||||||
|
成都: [104.06, 30.67],
|
||||||
|
大同: [113.3, 40.12],
|
||||||
|
镇江: [119.44, 32.2],
|
||||||
|
桂林: [110.28, 25.29],
|
||||||
|
张家界: [110.479191, 29.117096],
|
||||||
|
宜兴: [119.82, 31.36],
|
||||||
|
北海: [109.12, 21.49],
|
||||||
|
西安: [108.95, 34.27],
|
||||||
|
金坛: [119.56, 31.74],
|
||||||
|
东营: [118.49, 37.46],
|
||||||
|
牡丹江: [129.58, 44.6],
|
||||||
|
遵义: [106.9, 27.7],
|
||||||
|
绍兴: [120.58, 30.01],
|
||||||
|
扬州: [119.42, 32.39],
|
||||||
|
常州: [119.95, 31.79],
|
||||||
|
潍坊: [119.1, 36.62],
|
||||||
|
重庆: [106.54, 29.59],
|
||||||
|
台州: [121.420757, 28.656386],
|
||||||
|
南京: [118.78, 32.04],
|
||||||
|
滨州: [118.03, 37.36],
|
||||||
|
贵阳: [106.71, 26.57],
|
||||||
|
无锡: [120.29, 31.59],
|
||||||
|
本溪: [123.73, 41.3],
|
||||||
|
克拉玛依: [84.77, 45.59],
|
||||||
|
渭南: [109.5, 34.52],
|
||||||
|
马鞍山: [118.48, 31.56],
|
||||||
|
宝鸡: [107.15, 34.38],
|
||||||
|
焦作: [113.21, 35.24],
|
||||||
|
句容: [119.16, 31.95],
|
||||||
|
北京: [116.46, 39.92],
|
||||||
|
徐州: [117.2, 34.26],
|
||||||
|
衡水: [115.72, 37.72],
|
||||||
|
包头: [110, 40.58],
|
||||||
|
绵阳: [104.73, 31.48],
|
||||||
|
乌鲁木齐: [87.68, 43.77],
|
||||||
|
枣庄: [117.57, 34.86],
|
||||||
|
杭州: [120.19, 30.26],
|
||||||
|
淄博: [118.05, 36.78],
|
||||||
|
鞍山: [122.85, 41.12],
|
||||||
|
溧阳: [119.48, 31.43],
|
||||||
|
库尔勒: [86.06, 41.68],
|
||||||
|
安阳: [114.35, 36.1],
|
||||||
|
开封: [114.35, 34.79],
|
||||||
|
济南: [117, 36.65],
|
||||||
|
德阳: [104.37, 31.13],
|
||||||
|
温州: [120.65, 28.01],
|
||||||
|
九江: [115.97, 29.71],
|
||||||
|
邯郸: [114.47, 36.6],
|
||||||
|
临安: [119.72, 30.23],
|
||||||
|
兰州: [103.73, 36.03],
|
||||||
|
沧州: [116.83, 38.33],
|
||||||
|
临沂: [118.35, 35.05],
|
||||||
|
南充: [106.110698, 30.837793],
|
||||||
|
天津: [117.2, 39.13],
|
||||||
|
富阳: [119.95, 30.07],
|
||||||
|
泰安: [117.13, 36.18],
|
||||||
|
诸暨: [120.23, 29.71],
|
||||||
|
郑州: [113.65, 34.76],
|
||||||
|
哈尔滨: [126.63, 45.75],
|
||||||
|
聊城: [115.97, 36.45],
|
||||||
|
芜湖: [118.38, 31.33],
|
||||||
|
唐山: [118.02, 39.63],
|
||||||
|
平顶山: [113.29, 33.75],
|
||||||
|
邢台: [114.48, 37.05],
|
||||||
|
德州: [116.29, 37.45],
|
||||||
|
济宁: [116.59, 35.38],
|
||||||
|
荆州: [112.239741, 30.335165],
|
||||||
|
宜昌: [111.3, 30.7],
|
||||||
|
义乌: [120.06, 29.32],
|
||||||
|
丽水: [119.92, 28.45],
|
||||||
|
洛阳: [112.44, 34.7],
|
||||||
|
秦皇岛: [119.57, 39.95],
|
||||||
|
株洲: [113.16, 27.83],
|
||||||
|
石家庄: [114.48, 38.03],
|
||||||
|
莱芜: [117.67, 36.19],
|
||||||
|
常德: [111.69, 29.05],
|
||||||
|
保定: [115.48, 38.85],
|
||||||
|
湘潭: [112.91, 27.87],
|
||||||
|
金华: [119.64, 29.12],
|
||||||
|
岳阳: [113.09, 29.37],
|
||||||
|
长沙: [113, 28.21],
|
||||||
|
衢州: [118.88, 28.97],
|
||||||
|
廊坊: [116.7, 39.53],
|
||||||
|
菏泽: [115.480656, 35.23375],
|
||||||
|
合肥: [117.27, 31.86],
|
||||||
|
武汉: [114.31, 30.52],
|
||||||
|
大庆: [125.03, 46.58],
|
||||||
|
};
|
||||||
55
web/src/views/fun/gridLayout/index.vue
Normal file
55
web/src/views/fun/gridLayout/index.vue
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="grid-layout-container layout-pd">
|
||||||
|
<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
|
||||||
|
<el-alert
|
||||||
|
title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
class="mb15"
|
||||||
|
></el-alert>
|
||||||
|
<grid-layout
|
||||||
|
v-model:layout="state.layouts"
|
||||||
|
:col-num="12"
|
||||||
|
:row-height="30"
|
||||||
|
:is-draggable="true"
|
||||||
|
:is-resizable="true"
|
||||||
|
:is-mirrored="false"
|
||||||
|
:vertical-compact="true"
|
||||||
|
:margin="[10, 10]"
|
||||||
|
:use-css-transforms="true"
|
||||||
|
>
|
||||||
|
<grid-item v-for="item in state.layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
|
||||||
|
<div class="w100 h100 flex">
|
||||||
|
<span class="flex-margin font14">{{ item.i }}</span>
|
||||||
|
</div>
|
||||||
|
</grid-item>
|
||||||
|
</grid-layout>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funGridLayout">
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const state = reactive({
|
||||||
|
layouts: [
|
||||||
|
{ x: 0, y: 0, w: 2, h: 2, i: '0' },
|
||||||
|
{ x: 2, y: 0, w: 2, h: 4, i: '1' },
|
||||||
|
{ x: 4, y: 0, w: 2, h: 5, i: '2' },
|
||||||
|
{ x: 6, y: 0, w: 2, h: 3, i: '3' },
|
||||||
|
{ x: 8, y: 0, w: 2, h: 3, i: '4' },
|
||||||
|
{ x: 10, y: 0, w: 2, h: 3, i: '5' },
|
||||||
|
{ x: 0, y: 5, w: 2, h: 5, i: '6' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.grid-layout-container {
|
||||||
|
.vue-grid-item {
|
||||||
|
background: var(--el-color-primary);
|
||||||
|
color: var(--el-color-white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
35
web/src/views/fun/printJs/index.vue
Normal file
35
web/src/views/fun/printJs/index.vue
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="printRef" class="layout-pd">
|
||||||
|
<el-card shadow="hover" header="打印演示">
|
||||||
|
<el-alert
|
||||||
|
title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
class="mb15"
|
||||||
|
></el-alert>
|
||||||
|
<el-button @click="onPrintJs" size="default" type="primary">
|
||||||
|
<SvgIcon name="iconfont icon-dayin" />
|
||||||
|
点击打印演示
|
||||||
|
</el-button>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funPrintJs">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import printJs from 'print-js';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const printRef = ref();
|
||||||
|
|
||||||
|
// 打印点击
|
||||||
|
const onPrintJs = () => {
|
||||||
|
printJs({
|
||||||
|
printable: printRef.value,
|
||||||
|
type: 'html',
|
||||||
|
css: ['//at.alicdn.com/t/c/font_2298093_rnp72ifj3ba.css', '//unpkg.com/element-plus/dist/index.css'],
|
||||||
|
scanStyles: false,
|
||||||
|
style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
69
web/src/views/fun/qrcode/index.vue
Normal file
69
web/src/views/fun/qrcode/index.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<div class="qrcode-container layout-pd">
|
||||||
|
<el-card shadow="hover" header="qrcodejs2 二维码生成">
|
||||||
|
<el-alert
|
||||||
|
title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
|
||||||
|
type="success"
|
||||||
|
:closable="false"
|
||||||
|
class="mb15"
|
||||||
|
></el-alert>
|
||||||
|
<div class="qrcode-img-warp">
|
||||||
|
<div class="mb30 mt30 qrcode-img">
|
||||||
|
<div class="qrcode" ref="qrcodeRef"></div>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" size="default" @click="onInitQrcode">
|
||||||
|
<el-icon>
|
||||||
|
<ele-Refresh />
|
||||||
|
</el-icon>
|
||||||
|
重新生成
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="funQrcode">
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import QRCode from 'qrcodejs2-fixes';
|
||||||
|
|
||||||
|
// 定义变量内容
|
||||||
|
const qrcodeRef = ref();
|
||||||
|
|
||||||
|
// 初始化生成二维码
|
||||||
|
const initQrcode = () => {
|
||||||
|
new QRCode(qrcodeRef.value, {
|
||||||
|
text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
|
||||||
|
width: 125,
|
||||||
|
height: 125,
|
||||||
|
colorDark: '#000000',
|
||||||
|
colorLight: '#ffffff',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 重新生成
|
||||||
|
const onInitQrcode = () => {
|
||||||
|
qrcodeRef.value.innerHTML = '';
|
||||||
|
initQrcode();
|
||||||
|
};
|
||||||
|
// 页面加载时
|
||||||
|
onMounted(() => {
|
||||||
|
initQrcode();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.qrcode-container {
|
||||||
|
.qrcode-img-warp {
|
||||||
|
text-align: center;
|
||||||
|
.qrcode-img {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 125px;
|
||||||
|
.qrcode {
|
||||||
|
margin: auto;
|
||||||
|
width: 125px;
|
||||||
|
height: 125px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user