Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dr.Disrespect
vue-vben-admin
提交
e6db0d39
V
vue-vben-admin
项目概览
Dr.Disrespect
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
e6db0d39
编写于
12月 21, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(layout): add mix sidebar mode
上级
2e79c9f3
变更
64
展开全部
隐藏空白更改
内联
并排
Showing
64 changed file
with
1523 addition
and
1090 deletion
+1523
-1090
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+5
-0
package.json
package.json
+14
-14
src/assets/images/layout/menu-mix.svg
src/assets/images/layout/menu-mix.svg
+0
-39
src/assets/images/layout/menu-sidebar.svg
src/assets/images/layout/menu-sidebar.svg
+0
-39
src/assets/images/layout/menu-top.svg
src/assets/images/layout/menu-top.svg
+0
-39
src/components/Application/src/AppLogo.vue
src/components/Application/src/AppLogo.vue
+4
-15
src/components/Application/src/search/AppSearchModal.vue
src/components/Application/src/search/AppSearchModal.vue
+2
-0
src/components/ClickOutSide/src/index.vue
src/components/ClickOutSide/src/index.vue
+6
-1
src/components/Markdown/src/index.vue
src/components/Markdown/src/index.vue
+1
-1
src/components/Menu/index.ts
src/components/Menu/index.ts
+4
-0
src/components/Menu/src/BasicMenu.vue
src/components/Menu/src/BasicMenu.vue
+2
-6
src/components/Menu/src/components/MenuItemTag.vue
src/components/Menu/src/components/MenuItemTag.vue
+1
-0
src/components/Menu/src/index.less
src/components/Menu/src/index.less
+47
-78
src/components/Menu/src/props.ts
src/components/Menu/src/props.ts
+0
-3
src/components/Tinymce/src/Editor.vue
src/components/Tinymce/src/Editor.vue
+1
-1
src/design/var/index.less
src/design/var/index.less
+2
-0
src/directives/clickOutside.ts
src/directives/clickOutside.ts
+84
-0
src/enums/menuEnum.ts
src/enums/menuEnum.ts
+2
-0
src/hooks/setting/useHeaderSetting.ts
src/hooks/setting/useHeaderSetting.ts
+9
-3
src/hooks/setting/useMenuSetting.ts
src/hooks/setting/useMenuSetting.ts
+11
-5
src/hooks/web/useApexCharts.ts
src/hooks/web/useApexCharts.ts
+1
-1
src/hooks/web/useI18n.ts
src/hooks/web/useI18n.ts
+1
-1
src/layouts/default/header/components/Breadcrumb.vue
src/layouts/default/header/components/Breadcrumb.vue
+2
-2
src/layouts/default/header/index.vue
src/layouts/default/header/index.vue
+5
-1
src/layouts/default/index.vue
src/layouts/default/index.vue
+3
-2
src/layouts/default/menu/index.tsx
src/layouts/default/menu/index.tsx
+0
-3
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/SettingDrawer.tsx
+23
-12
src/layouts/default/setting/components/TypePicker.vue
src/layouts/default/setting/components/TypePicker.vue
+104
-18
src/layouts/default/setting/enum.ts
src/layouts/default/setting/enum.ts
+6
-6
src/layouts/default/setting/handler.ts
src/layouts/default/setting/handler.ts
+2
-3
src/layouts/default/sider/LayoutSider.vue
src/layouts/default/sider/LayoutSider.vue
+51
-1
src/layouts/default/sider/MixSider.vue
src/layouts/default/sider/MixSider.vue
+408
-0
src/layouts/default/sider/index.less
src/layouts/default/sider/index.less
+0
-51
src/layouts/default/sider/index.vue
src/layouts/default/sider/index.vue
+5
-3
src/layouts/default/sider/useLayoutSider.ts
src/layouts/default/sider/useLayoutSider.ts
+30
-16
src/layouts/page/useCache.ts
src/layouts/page/useCache.ts
+4
-1
src/locales/lang/en/layout/setting.ts
src/locales/lang/en/layout/setting.ts
+3
-2
src/locales/lang/en/routes/demo/comp.ts
src/locales/lang/en/routes/demo/comp.ts
+6
-0
src/locales/lang/en/routes/demo/level.ts
src/locales/lang/en/routes/demo/level.ts
+1
-1
src/locales/lang/en/routes/demo/tree.ts
src/locales/lang/en/routes/demo/tree.ts
+0
-7
src/locales/lang/zh_CN/layout/setting.ts
src/locales/lang/zh_CN/layout/setting.ts
+3
-2
src/locales/lang/zh_CN/routes/demo/charts.ts
src/locales/lang/zh_CN/routes/demo/charts.ts
+1
-1
src/locales/lang/zh_CN/routes/demo/comp.ts
src/locales/lang/zh_CN/routes/demo/comp.ts
+5
-0
src/locales/lang/zh_CN/routes/demo/level.ts
src/locales/lang/zh_CN/routes/demo/level.ts
+1
-1
src/locales/lang/zh_CN/routes/demo/tree.ts
src/locales/lang/zh_CN/routes/demo/tree.ts
+0
-7
src/router/menus/modules/demo/comp.ts
src/router/menus/modules/demo/comp.ts
+143
-0
src/router/menus/modules/demo/editor.ts
src/router/menus/modules/demo/editor.ts
+0
-31
src/router/menus/modules/demo/feat.ts
src/router/menus/modules/demo/feat.ts
+22
-0
src/router/menus/modules/demo/form.ts
src/router/menus/modules/demo/form.ts
+0
-42
src/router/menus/modules/demo/table.ts
src/router/menus/modules/demo/table.ts
+0
-73
src/router/menus/modules/demo/tree.ts
src/router/menus/modules/demo/tree.ts
+0
-25
src/router/routes/modules/demo/comp.ts
src/router/routes/modules/demo/comp.ts
+285
-1
src/router/routes/modules/demo/editor.ts
src/router/routes/modules/demo/editor.ts
+0
-54
src/router/routes/modules/demo/excel.ts
src/router/routes/modules/demo/excel.ts
+0
-52
src/router/routes/modules/demo/feat.ts
src/router/routes/modules/demo/feat.ts
+46
-1
src/router/routes/modules/demo/form.ts
src/router/routes/modules/demo/form.ts
+0
-74
src/router/routes/modules/demo/table.ts
src/router/routes/modules/demo/table.ts
+0
-140
src/router/routes/modules/demo/tree.ts
src/router/routes/modules/demo/tree.ts
+0
-43
src/settings/colorSetting.ts
src/settings/colorSetting.ts
+2
-0
src/settings/projectSetting.ts
src/settings/projectSetting.ts
+3
-3
src/store/modules/tab.ts
src/store/modules/tab.ts
+3
-2
src/types/config.d.ts
src/types/config.d.ts
+2
-1
src/utils/factory/createAsyncComponent.tsx
src/utils/factory/createAsyncComponent.tsx
+2
-0
yarn.lock
yarn.lock
+155
-162
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
e6db0d39
...
...
@@ -3,6 +3,11 @@
### ✨ Features
-
新增
`v-ripple`
水波纹指令
-
新增左侧菜单混合模式
### ✨ Refactor
-
移除折叠显示菜单名配置
### 🐛 Bug Fixes
...
...
package.json
浏览文件 @
e6db0d39
...
...
@@ -21,23 +21,23 @@
"reinstall"
:
"rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap"
},
"dependencies"
:
{
"
@iconify/iconify
"
:
"
^2.0.0-rc.
2
"
,
"
@vueuse/core
"
:
"
^4.0.0
-rc.9
"
,
"
@iconify/iconify
"
:
"
^2.0.0-rc.
4
"
,
"
@vueuse/core
"
:
"
^4.0.0
"
,
"
ant-design-vue
"
:
"
^2.0.0-rc.5
"
,
"
apexcharts
"
:
"
^3.2
2.3
"
,
"
apexcharts
"
:
"
^3.2
3.0
"
,
"
axios
"
:
"
^0.21.0
"
,
"
crypto-es
"
:
"
^1.2.6
"
,
"
echarts
"
:
"
^4.9.0
"
,
"
lodash-es
"
:
"
^4.17.
15
"
,
"
lodash-es
"
:
"
^4.17.
20
"
,
"
mockjs
"
:
"
^1.1.0
"
,
"
moment
"
:
"
^2.29.1
"
,
"
nprogress
"
:
"
^0.2.0
"
,
"
path-to-regexp
"
:
"
^6.2.0
"
,
"
qrcode
"
:
"
^1.4.4
"
,
"
sortablejs
"
:
"
^1.12.0
"
,
"
vditor
"
:
"
^3.7.
2
"
,
"
vditor
"
:
"
^3.7.
3
"
,
"
vue
"
:
"
^3.0.4
"
,
"
vue-i18n
"
:
"
^9.0.0-beta.13
"
,
"
vue-i18n
"
:
"
9.0.0-beta.14
"
,
"
vue-router
"
:
"
^4.0.1
"
,
"
vue-types
"
:
"
^3.0.1
"
,
"
vuex
"
:
"
^4.0.0-rc.2
"
,
...
...
@@ -48,7 +48,7 @@
"devDependencies"
:
{
"
@commitlint/cli
"
:
"
^11.0.0
"
,
"
@commitlint/config-conventional
"
:
"
^11.0.0
"
,
"
@iconify/json
"
:
"
^1.1.27
2
"
,
"
@iconify/json
"
:
"
^1.1.27
5
"
,
"
@ls-lint/ls-lint
"
:
"
^1.9.2
"
,
"
@purge-icons/generated
"
:
"
^0.4.1
"
,
"
@types/echarts
"
:
"
^4.9.3
"
,
...
...
@@ -61,10 +61,10 @@
"
@types/qrcode
"
:
"
^1.3.5
"
,
"
@types/rollup-plugin-visualizer
"
:
"
^2.6.0
"
,
"
@types/sortablejs
"
:
"
^1.10.6
"
,
"
@types/yargs
"
:
"
^15.0.1
1
"
,
"
@types/yargs
"
:
"
^15.0.1
2
"
,
"
@types/zxcvbn
"
:
"
^4.4.0
"
,
"
@typescript-eslint/eslint-plugin
"
:
"
^4.1
0
.0
"
,
"
@typescript-eslint/parser
"
:
"
^4.1
0
.0
"
,
"
@typescript-eslint/eslint-plugin
"
:
"
^4.1
1
.0
"
,
"
@typescript-eslint/parser
"
:
"
^4.1
1
.0
"
,
"
@vue/compiler-sfc
"
:
"
^3.0.4
"
,
"
@vuedx/typecheck
"
:
"
^0.2.4-0
"
,
"
@vuedx/typescript-plugin-vue
"
:
"
^0.2.4-0
"
,
...
...
@@ -75,16 +75,16 @@
"
cross-env
"
:
"
^7.0.3
"
,
"
dot-prop
"
:
"
^6.0.1
"
,
"
dotenv
"
:
"
^8.2.0
"
,
"
eslint
"
:
"
^7.1
5
.0
"
,
"
eslint-config-prettier
"
:
"
^7.
0
.0
"
,
"
eslint
"
:
"
^7.1
6
.0
"
,
"
eslint-config-prettier
"
:
"
^7.
1
.0
"
,
"
eslint-plugin-prettier
"
:
"
^3.3.0
"
,
"
eslint-plugin-vue
"
:
"
^7.
2
.0
"
,
"
eslint-plugin-vue
"
:
"
^7.
3
.0
"
,
"
esno
"
:
"
^0.3.0
"
,
"
fs-extra
"
:
"
^9.0.1
"
,
"
globrex
"
:
"
^0.1.2
"
,
"
husky
"
:
"
^4.3.6
"
,
"
koa-static
"
:
"
^5.0.0
"
,
"
less
"
:
"
^
3.13
.0
"
,
"
less
"
:
"
^
4.0
.0
"
,
"
lint-staged
"
:
"
^10.5.3
"
,
"
portfinder
"
:
"
^1.0.28
"
,
"
postcss-import
"
:
"
^12.0.1
"
,
...
...
src/assets/images/layout/menu-mix.svg
已删除
100644 → 0
浏览文件 @
2e79c9f3
<?xml version="1.0" encoding="UTF-8"?>
<svg
width=
"52px"
height=
"45px"
viewBox=
"0 0 52 45"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
>
<defs>
<filter
x=
"-9.4%"
y=
"-6.2%"
width=
"118.8%"
height=
"122.5%"
filterUnits=
"objectBoundingBox"
id=
"filter-1"
>
<feOffset
dx=
"0"
dy=
"1"
in=
"SourceAlpha"
result=
"shadowOffsetOuter1"
></feOffset>
<feGaussianBlur
stdDeviation=
"1"
in=
"shadowOffsetOuter1"
result=
"shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values=
"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
type=
"matrix"
in=
"shadowBlurOuter1"
result=
"shadowMatrixOuter1"
></feColorMatrix>
<feMerge>
<feMergeNode
in=
"shadowMatrixOuter1"
></feMergeNode>
<feMergeNode
in=
"SourceGraphic"
></feMergeNode>
</feMerge>
</filter>
<rect
id=
"path-2"
x=
"0"
y=
"0"
width=
"48"
height=
"40"
rx=
"4"
></rect>
<filter
x=
"-4.2%"
y=
"-2.5%"
width=
"108.3%"
height=
"110.0%"
filterUnits=
"objectBoundingBox"
id=
"filter-4"
>
<feOffset
dx=
"0"
dy=
"1"
in=
"SourceAlpha"
result=
"shadowOffsetOuter1"
></feOffset>
<feGaussianBlur
stdDeviation=
"0.5"
in=
"shadowOffsetOuter1"
result=
"shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values=
"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
type=
"matrix"
in=
"shadowBlurOuter1"
></feColorMatrix>
</filter>
</defs>
<g
id=
"配置面板"
width=
"48"
height=
"40"
stroke=
"none"
stroke-width=
"1"
fill=
"none"
fill-rule=
"evenodd"
>
<g
id=
"setting-copy-2"
width=
"48"
height=
"40"
transform=
"translate(-1190.000000, -136.000000)"
>
<g
id=
"Group-8"
width=
"48"
height=
"40"
transform=
"translate(1167.000000, 0.000000)"
>
<g
id=
"Group-5-Copy-5"
filter=
"url(#filter-1)"
transform=
"translate(25.000000, 137.000000)"
>
<mask
id=
"mask-3"
fill=
"white"
>
<use
xlink:href=
"#path-2"
></use>
</mask>
<g
id=
"Rectangle-18"
>
<use
fill=
"black"
fill-opacity=
"1"
filter=
"url(#filter-4)"
xlink:href=
"#path-2"
></use>
<use
fill=
"#F0F2F5"
fill-rule=
"evenodd"
xlink:href=
"#path-2"
></use>
</g>
<rect
id=
"Rectangle-18"
fill=
"#fff"
mask=
"url(#mask-3)"
x=
"0"
y=
"0"
width=
"16"
height=
"40"
></rect>
<rect
id=
"Rectangle-11"
fill=
"#303648"
mask=
"url(#mask-3)"
x=
"0"
y=
"0"
width=
"48"
height=
"10"
></rect>
</g>
</g>
</g>
</g>
</svg>
src/assets/images/layout/menu-sidebar.svg
已删除
100644 → 0
浏览文件 @
2e79c9f3
<?xml version="1.0" encoding="UTF-8"?>
<svg
width=
"52px"
height=
"45px"
viewBox=
"0 0 52 45"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
>
<defs>
<filter
x=
"-9.4%"
y=
"-6.2%"
width=
"118.8%"
height=
"122.5%"
filterUnits=
"objectBoundingBox"
id=
"filter-1"
>
<feOffset
dx=
"0"
dy=
"1"
in=
"SourceAlpha"
result=
"shadowOffsetOuter1"
></feOffset>
<feGaussianBlur
stdDeviation=
"1"
in=
"shadowOffsetOuter1"
result=
"shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values=
"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
type=
"matrix"
in=
"shadowBlurOuter1"
result=
"shadowMatrixOuter1"
></feColorMatrix>
<feMerge>
<feMergeNode
in=
"shadowMatrixOuter1"
></feMergeNode>
<feMergeNode
in=
"SourceGraphic"
></feMergeNode>
</feMerge>
</filter>
<rect
id=
"path-2"
x=
"0"
y=
"0"
width=
"48"
height=
"40"
rx=
"4"
></rect>
<filter
x=
"-4.2%"
y=
"-2.5%"
width=
"108.3%"
height=
"110.0%"
filterUnits=
"objectBoundingBox"
id=
"filter-4"
>
<feOffset
dx=
"0"
dy=
"1"
in=
"SourceAlpha"
result=
"shadowOffsetOuter1"
></feOffset>
<feGaussianBlur
stdDeviation=
"0.5"
in=
"shadowOffsetOuter1"
result=
"shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values=
"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
type=
"matrix"
in=
"shadowBlurOuter1"
></feColorMatrix>
</filter>
</defs>
<g
width=
"48"
height=
"40"
stroke=
"none"
stroke-width=
"1"
fill=
"none"
fill-rule=
"evenodd"
>
<g
id=
"setting-copy-2"
width=
"48"
height=
"40"
transform=
"translate(-1190.000000, -136.000000)"
>
<g
id=
"Group-8"
width=
"48"
height=
"40"
transform=
"translate(1167.000000, 0.000000)"
>
<g
id=
"Group-5-Copy-5"
filter=
"url(#filter-1)"
transform=
"translate(25.000000, 137.000000)"
>
<mask
id=
"mask-3"
fill=
"white"
>
<use
xlink:href=
"#path-2"
></use>
</mask>
<g
id=
"Rectangle-18"
>
<use
fill=
"black"
fill-opacity=
"1"
filter=
"url(#filter-4)"
xlink:href=
"#path-2"
></use>
<use
fill=
"#F0F2F5"
fill-rule=
"evenodd"
xlink:href=
"#path-2"
></use>
</g>
<rect
id=
"Rectangle-11"
fill=
"#FFFFFF"
mask=
"url(#mask-3)"
x=
"0"
y=
"0"
width=
"48"
height=
"10"
></rect>
<rect
id=
"Rectangle-18"
fill=
"#303648"
mask=
"url(#mask-3)"
x=
"0"
y=
"0"
width=
"16"
height=
"40"
></rect>
</g>
</g>
</g>
</g>
</svg>
src/assets/images/layout/menu-top.svg
已删除
100644 → 0
浏览文件 @
2e79c9f3
<?xml version="1.0" encoding="UTF-8"?>
<svg
width=
"52px"
height=
"45px"
viewBox=
"0 0 52 45"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xmlns:xlink=
"http://www.w3.org/1999/xlink"
>
<defs>
<filter
x=
"-9.4%"
y=
"-6.2%"
width=
"118.8%"
height=
"122.5%"
filterUnits=
"objectBoundingBox"
id=
"filter-1"
>
<feOffset
dx=
"0"
dy=
"1"
in=
"SourceAlpha"
result=
"shadowOffsetOuter1"
></feOffset>
<feGaussianBlur
stdDeviation=
"1"
in=
"shadowOffsetOuter1"
result=
"shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values=
"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
type=
"matrix"
in=
"shadowBlurOuter1"
result=
"shadowMatrixOuter1"
></feColorMatrix>
<feMerge>
<feMergeNode
in=
"shadowMatrixOuter1"
></feMergeNode>
<feMergeNode
in=
"SourceGraphic"
></feMergeNode>
</feMerge>
</filter>
<rect
id=
"path-2"
x=
"0"
y=
"0"
width=
"48"
height=
"40"
rx=
"4"
></rect>
<filter
x=
"-4.2%"
y=
"-2.5%"
width=
"108.3%"
height=
"110.0%"
filterUnits=
"objectBoundingBox"
id=
"filter-4"
>
<feOffset
dx=
"0"
dy=
"1"
in=
"SourceAlpha"
result=
"shadowOffsetOuter1"
></feOffset>
<feGaussianBlur
stdDeviation=
"0.5"
in=
"shadowOffsetOuter1"
result=
"shadowBlurOuter1"
></feGaussianBlur>
<feColorMatrix
values=
"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
type=
"matrix"
in=
"shadowBlurOuter1"
></feColorMatrix>
</filter>
</defs>
<g
stroke=
"none"
stroke-width=
"1"
fill=
"none"
fill-rule=
"evenodd"
>
<g
id=
"setting-copy-2"
transform=
"translate(-1254.000000, -337.000000)"
>
<g
id=
"Group-8"
transform=
"translate(1167.000000, 0.000000)"
>
<g
id=
"Group-5"
filter=
"url(#filter-1)"
transform=
"translate(89.000000, 338.000000)"
>
<mask
id=
"mask-3"
fill=
"white"
>
<use
xlink:href=
"#path-2"
></use>
</mask>
<g
id=
"Rectangle-18"
>
<use
fill=
"black"
fill-opacity=
"1"
filter=
"url(#filter-4)"
xlink:href=
"#path-2"
></use>
<use
fill=
"#F0F2F5"
fill-rule=
"evenodd"
xlink:href=
"#path-2"
></use>
</g>
<rect
id=
"Rectangle-11"
fill=
"#303648"
mask=
"url(#mask-3)"
x=
"0"
y=
"0"
width=
"48"
height=
"10"
></rect>
</g>
</g>
</g>
</g>
</svg>
src/components/Application/src/AppLogo.vue
浏览文件 @
e6db0d39
...
...
@@ -3,14 +3,10 @@
* @Description: logo component
-->
<
template
>
<div
class=
"anticon"
:class=
"[prefixCls, theme,
{ 'collapsed-show-title': getCollapsedShowTitle }]"
@click="handleGoHome"
>
<div
class=
"anticon"
:class=
"[prefixCls, theme]"
@
click=
"handleGoHome"
>
<img
src=
"/@/assets/images/logo.png"
/>
<div
class=
"ml-2 ellipsis"
:class=
"[`$
{prefixCls}__title`]" v-show="showTitle">
{{
globSetting
.
title
}}
{{
title
}}
</div>
</div>
</
template
>
...
...
@@ -40,9 +36,7 @@
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'
app-logo
'
);
const
{
getCollapsedShowTitle
}
=
useMenuSetting
();
const
globSetting
=
useGlobSetting
();
const
{
title
}
=
useGlobSetting
();
const
go
=
useGo
();
...
...
@@ -52,8 +46,7 @@
return
{
handleGoHome
,
globSetting
,
getCollapsedShowTitle
,
title
,
prefixCls
,
};
},
...
...
@@ -70,10 +63,6 @@
cursor: pointer;
transition: all 0.2s ease;
&.collapsed-show-title {
padding-left: 20px;
}
&.light {
border-bottom: 1px solid @border-color-base;
}
...
...
src/components/Application/src/search/AppSearchModal.vue
浏览文件 @
e6db0d39
...
...
@@ -65,10 +65,12 @@
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
ClickOutSide
}
from
'
/@/components/ClickOutSide
'
;
import
{
useAppInject
}
from
'
/@/hooks/web/useAppInject
'
;
export
default
defineComponent
({
name
:
'
AppSearchModal
'
,
components
:
{
SearchOutlined
,
ClickOutSide
,
AppSearchFooter
},
emits
:
[
'
close
'
],
props
:
{
visible
:
Boolean
,
},
...
...
src/components/ClickOutSide/src/index.vue
浏览文件 @
e6db0d39
...
...
@@ -3,12 +3,13 @@
</
template
>
<
script
lang=
"ts"
>
import
type
{
Ref
}
from
'
vue
'
;
import
{
defineComponent
,
ref
}
from
'
vue
'
;
import
{
defineComponent
,
ref
,
onMounted
}
from
'
vue
'
;
import
{
useClickOutside
}
from
'
/@/hooks/web/useClickOutside
'
;
export
default
defineComponent
({
name
:
'
ClickOutSide
'
,
emits
:
[
'
mounted
'
,
'
clickOutside
'
],
setup
(
_
,
{
emit
})
{
const
wrap
=
ref
<
ElRef
>
(
null
);
...
...
@@ -16,6 +17,10 @@
emit
(
'
clickOutside
'
);
});
onMounted
(()
=>
{
emit
(
'
mounted
'
);
});
return
{
wrap
};
},
});
...
...
src/components/Markdown/src/index.vue
浏览文件 @
e6db0d39
...
...
@@ -57,7 +57,7 @@
onUnmounted
(()
=>
{
const
vditorInstance
=
unref
(
vditorRef
);
if
(
!
vditorInstance
)
return
;
vditorInstance
.
destroy
();
vditorInstance
?.
destroy
?.
();
});
return
{
...
...
src/components/Menu/index.ts
浏览文件 @
e6db0d39
...
...
@@ -6,4 +6,8 @@ export const BasicMenu = createAsyncComponent(() => import('./src/BasicMenu.vue'
loading
:
false
,
});
export
const
MenuTag
=
createAsyncComponent
(()
=>
import
(
'
./src/components/MenuItemTag.vue
'
),
{
loading
:
false
,
});
withInstall
(
BasicMenu
);
src/components/Menu/src/BasicMenu.vue
浏览文件 @
e6db0d39
...
...
@@ -17,7 +17,7 @@
:item=
"item"
:theme=
"theme"
:level=
"1"
:showTitle=
"
showTitle
"
:showTitle=
"
!getCollapsed
"
:isHorizontal=
"isHorizontal"
/>
</
template
>
...
...
@@ -95,16 +95,12 @@
prefixCls
,
`justify-
${
align
}
`
,
{
[
`
${
prefixCls
}
--hide-title`
]:
!
unref
(
showTitle
),
[
`
${
prefixCls
}
--collapsed-show-title`
]:
props
.
collapsedShowTitle
,
[
`
${
prefixCls
}
__second`
]:
!
props
.
isHorizontal
&&
unref
(
getSplit
),
[
`
${
prefixCls
}
__sidebar-hor`
]:
unref
(
getIsTopMenu
),
},
];
});
const
showTitle
=
computed
(()
=>
props
.
collapsedShowTitle
&&
unref
(
getCollapsed
));
const
getInlineCollapseOptions
=
computed
(()
=>
{
const
isInline
=
props
.
mode
===
MenuModeEnum
.
INLINE
;
...
...
@@ -168,7 +164,7 @@
getMenuClass
,
handleOpenChange
,
getOpenKeys
,
showTitle
,
getCollapsed
,
...
toRefs
(
menuState
),
};
},
...
...
src/components/Menu/src/components/MenuItemTag.vue
浏览文件 @
e6db0d39
...
...
@@ -15,6 +15,7 @@
const
getShowTag
=
computed
(()
=>
{
const
{
item
,
showTitle
,
isHorizontal
}
=
props
;
if
(
!
item
||
showTitle
||
isHorizontal
)
return
false
;
const
{
tag
}
=
item
;
...
...
src/components/Menu/src/index.less
浏览文件 @
e6db0d39
...
...
@@ -48,47 +48,16 @@
opacity: 1 !important;
}
&--hide-title {
&.ant-menu-inline-collapsed > .ant-menu-item,
&.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
&.ant-menu-inline-collapsed
> .ant-menu-item-group
> .ant-menu-item-group-list
> .ant-menu-submenu
> .ant-menu-submenu-title,
&.ant-menu-inline-collapsed .ant-menu-submenu-title {
padding-right: 16px !important;
padding-left: 16px !important;
}
}
&--collapsed-show-title.ant-menu-inline-collapsed {
.@{basic-menu-prefix-cls}-item__level1 {
padding: 2px 0;
}
& > li[role='menuitem']:not(.ant-menu-submenu),
& > li > .ant-menu-submenu-title {
display: flex;
margin-top: 10px;
font-size: 12px;
flex-direction: column;
align-items: center;
line-height: 24px;
}
& > li > .ant-menu-submenu-title {
line-height: 24px;
}
.@{basic-menu-content-prefix-cls}-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.@{basic-menu-content-prefix-cls}--show-title {
line-height: 30px;
}
}
&.ant-menu-inline-collapsed > .ant-menu-item,
&.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
&.ant-menu-inline-collapsed
> .ant-menu-item-group
> .ant-menu-item-group-list
> .ant-menu-submenu
> .ant-menu-submenu-title,
&.ant-menu-inline-collapsed .ant-menu-submenu-title {
padding-right: 16px !important;
padding-left: 16px !important;
}
.@{basic-menu-content-prefix-cls}-wrapper {
...
...
@@ -252,43 +221,6 @@
}
}
.@{basic-menu-tag-prefix-cls} {
position: absolute;
top: calc(50% - 8px);
right: 30px;
display: inline-block;
padding: 2px 4px;
margin-right: 4px;
font-size: 12px;
line-height: 14px;
color: #fff;
border-radius: 2px;
&--dot {
top: calc(50% - 4px);
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
&--primary {
background: @primary-color;
}
&--error {
background: @error-color;
}
&--success {
background: @success-color;
}
&--warn {
background: @warning-color;
}
}
.ant-menu-submenu,
.ant-menu-submenu-inline {
transition: unset;
...
...
@@ -322,3 +254,40 @@
}
}
}
.@{basic-menu-tag-prefix-cls} {
position: absolute;
top: calc(50% - 8px);
right: 30px;
display: inline-block;
padding: 2px 4px;
margin-right: 4px;
font-size: 12px;
line-height: 14px;
color: #fff;
border-radius: 2px;
&--dot {
top: calc(50% - 4px);
width: 6px;
height: 6px;
padding: 0;
border-radius: 50%;
}
&--primary {
background: @primary-color;
}
&--error {
background: @error-color;
}
&--success {
background: @success-color;
}
&--warn {
background: @warning-color;
}
}
src/components/Menu/src/props.ts
浏览文件 @
e6db0d39
...
...
@@ -10,8 +10,6 @@ export const basicProps = {
default
:
()
=>
[],
},
collapsedShowTitle
:
propTypes
.
bool
,
// 最好是4 倍数
inlineIndent
:
propTypes
.
number
.
def
(
20
),
// 菜单组件的mode属性
...
...
@@ -19,7 +17,6 @@ export const basicProps = {
type
:
String
as
PropType
<
MenuModeEnum
>
,
default
:
MenuModeEnum
.
INLINE
,
},
showLogo
:
propTypes
.
bool
,
type
:
{
type
:
String
as
PropType
<
MenuTypeEnum
>
,
default
:
MenuTypeEnum
.
MIX
,
...
...
src/components/Tinymce/src/Editor.vue
浏览文件 @
e6db0d39
...
...
@@ -107,7 +107,7 @@
function
destory
()
{
if
(
getTinymce
()
!==
null
)
{
getTinymce
()
.
remove
(
unref
(
editorRef
));
getTinymce
()
?.
remove
?.
(
unref
(
editorRef
));
}
}
...
...
src/design/var/index.less
浏览文件 @
e6db0d39
...
...
@@ -26,6 +26,8 @@
@layout-sider-fixed-z-index: 510;
@layout-mix-sider-fixed-z-index: 550;
@preview-comp-z-index: 1000;
@page-footer-z-index: 99;
...
...
src/directives/clickOutside.ts
0 → 100644
浏览文件 @
e6db0d39
import
{
on
}
from
'
/@/utils/domUtils
'
;
import
{
isServer
}
from
'
/@/utils/is
'
;
import
type
{
ComponentPublicInstance
,
DirectiveBinding
,
ObjectDirective
}
from
'
vue
'
;
type
DocumentHandler
=
<
T
extends
MouseEvent
>
(
mouseup
:
T
,
mousedown
:
T
)
=>
void
;
type
FlushList
=
Map
<
HTMLElement
,
{
documentHandler
:
DocumentHandler
;
bindingFn
:
(...
args
:
unknown
[])
=>
unknown
;
}
>
;
const
nodeList
:
FlushList
=
new
Map
();
let
startClick
:
MouseEvent
;
if
(
!
isServer
)
{
on
(
document
,
'
mousedown
'
,
(
e
:
MouseEvent
)
=>
(
startClick
=
e
));
on
(
document
,
'
mouseup
'
,
(
e
:
MouseEvent
)
=>
{
for
(
const
{
documentHandler
}
of
nodeList
.
values
())
{
documentHandler
(
e
,
startClick
);
}
});
}
function
createDocumentHandler
(
el
:
HTMLElement
,
binding
:
DirectiveBinding
):
DocumentHandler
{
let
excludes
:
HTMLElement
[]
=
[];
if
(
Array
.
isArray
(
binding
.
arg
))
{
excludes
=
binding
.
arg
;
}
else
{
// due to current implementation on binding type is wrong the type casting is necessary here
excludes
.
push
((
binding
.
arg
as
unknown
)
as
HTMLElement
);
}
return
function
(
mouseup
,
mousedown
)
{
const
popperRef
=
(
binding
.
instance
as
ComponentPublicInstance
<
{
popperRef
:
Nullable
<
HTMLElement
>
;
}
>
).
popperRef
;
const
mouseUpTarget
=
mouseup
.
target
as
Node
;
const
mouseDownTarget
=
mousedown
.
target
as
Node
;
const
isBound
=
!
binding
||
!
binding
.
instance
;
const
isTargetExists
=
!
mouseUpTarget
||
!
mouseDownTarget
;
const
isContainedByEl
=
el
.
contains
(
mouseUpTarget
)
||
el
.
contains
(
mouseDownTarget
);
const
isSelf
=
el
===
mouseUpTarget
;
const
isTargetExcluded
=
(
excludes
.
length
&&
excludes
.
some
((
item
)
=>
item
?.
contains
(
mouseUpTarget
)))
||
(
excludes
.
length
&&
excludes
.
includes
(
mouseDownTarget
as
HTMLElement
));
const
isContainedByPopper
=
popperRef
&&
(
popperRef
.
contains
(
mouseUpTarget
)
||
popperRef
.
contains
(
mouseDownTarget
));
if
(
isBound
||
isTargetExists
||
isContainedByEl
||
isSelf
||
isTargetExcluded
||
isContainedByPopper
)
{
return
;
}
binding
.
value
();
};
}
const
ClickOutside
:
ObjectDirective
=
{
beforeMount
(
el
,
binding
)
{
nodeList
.
set
(
el
,
{
documentHandler
:
createDocumentHandler
(
el
,
binding
),
bindingFn
:
binding
.
value
,
});
},
updated
(
el
,
binding
)
{
nodeList
.
set
(
el
,
{
documentHandler
:
createDocumentHandler
(
el
,
binding
),
bindingFn
:
binding
.
value
,
});
},
unmounted
(
el
)
{
nodeList
.
delete
(
el
);
},
};
export
default
ClickOutside
;
src/enums/menuEnum.ts
浏览文件 @
e6db0d39
...
...
@@ -4,6 +4,8 @@
export
enum
MenuTypeEnum
{
// left menu
SIDEBAR
=
'
sidebar
'
,
MIX_SIDEBAR
=
'
mix-sidebar
'
,
// mixin menu
MIX
=
'
mix
'
,
// top menu
...
...
src/hooks/setting/useHeaderSetting.ts
浏览文件 @
e6db0d39
...
...
@@ -16,6 +16,7 @@ const {
getSplit
,
getShowHeaderTrigger
,
getIsSidebarType
,
getIsMixSidebar
,
getIsTopMenu
,
}
=
useMenuSetting
();
const
{
getShowBreadCrumb
,
getShowLogo
}
=
useRootSetting
();
...
...
@@ -27,13 +28,18 @@ const getShowFullHeaderRef = computed(() => {
!
unref
(
getFullContent
)
&&
unref
(
getShowMixHeaderRef
)
&&
unref
(
getShowHeader
)
&&
!
unref
(
getIsTopMenu
)
!
unref
(
getIsTopMenu
)
&&
!
unref
(
getIsMixSidebar
)
);
});
const
getShowInsetHeaderRef
=
computed
(()
=>
{
const
need
=
!
unref
(
getFullContent
)
&&
unref
(
getShowHeader
);
return
(
need
&&
!
unref
(
getShowMixHeaderRef
))
||
(
need
&&
unref
(
getIsTopMenu
));
return
(
(
need
&&
!
unref
(
getShowMixHeaderRef
))
||
(
need
&&
unref
(
getIsTopMenu
))
||
(
need
&&
unref
(
getIsMixSidebar
))
);
});
// Get header configuration
...
...
@@ -66,7 +72,7 @@ const getShowBread = computed(() => {
});
const
getShowHeaderLogo
=
computed
(()
=>
{
return
unref
(
getShowLogo
)
&&
!
unref
(
getIsSidebarType
);
return
unref
(
getShowLogo
)
&&
!
unref
(
getIsSidebarType
)
&&
!
unref
(
getIsMixSidebar
)
;
});
const
getShowContent
=
computed
(()
=>
{
...
...
src/hooks/setting/useMenuSetting.ts
浏览文件 @
e6db0d39
...
...
@@ -37,10 +37,10 @@ const getCanDrag = computed(() => unref(getMenuSetting).canDrag);
const
getAccordion
=
computed
(()
=>
unref
(
getMenuSetting
).
accordion
);
const
getCollapsedShowTitle
=
computed
(()
=>
unref
(
getMenuSetting
).
collapsedShowTitle
);
const
getTopMenuAlign
=
computed
(()
=>
unref
(
getMenuSetting
).
topMenuAlign
);
const
getCloseMixSidebarOnChange
=
computed
(()
=>
unref
(
getMenuSetting
).
closeMixSidebarOnChange
);
const
getIsSidebarType
=
computed
(()
=>
unref
(
getMenuType
)
===
MenuTypeEnum
.
SIDEBAR
);
const
getIsTopMenu
=
computed
(()
=>
unref
(
getMenuType
)
===
MenuTypeEnum
.
TOP_MENU
);
...
...
@@ -61,6 +61,10 @@ const getIsHorizontal = computed(() => {
return
unref
(
getMenuMode
)
===
MenuModeEnum
.
HORIZONTAL
;
});
const
getIsMixSidebar
=
computed
(()
=>
{
return
unref
(
getMenuType
)
===
MenuTypeEnum
.
MIX_SIDEBAR
;
});
const
getIsMixMode
=
computed
(()
=>
{
return
unref
(
getMenuMode
)
===
MenuModeEnum
.
INLINE
&&
unref
(
getMenuType
)
===
MenuTypeEnum
.
MIX
;
});
...
...
@@ -70,14 +74,15 @@ const getRealWidth = computed(() => {
});
const
getMiniWidthNumber
=
computed
(()
=>
{
const
{
collapsedShowTitle
}
=
unref
(
getMenuSetting
);
return
collapsedShowTitle
?
SIDE_BAR_SHOW_TIT_MINI_WIDTH
:
SIDE_BAR_MINI_WIDTH
;
return
SIDE_BAR_MINI_WIDTH
;
});
const
getCalcContentWidth
=
computed
(()
=>
{
const
width
=
unref
(
getIsTopMenu
)
||
!
unref
(
getShowMenu
)
||
(
unref
(
getSplit
)
&&
unref
(
getMenuHidden
))
?
0
:
unref
(
getIsMixSidebar
)
?
SIDE_BAR_SHOW_TIT_MINI_WIDTH
:
unref
(
getRealWidth
);
return
`calc(100% -
${
unref
(
width
)}
px)`
;
...
...
@@ -124,7 +129,6 @@ export function useMenuSetting() {
getMenuTheme
,
getCanDrag
,
getIsHorizontal
,
getCollapsedShowTitle
,
getIsSidebarType
,
getAccordion
,
getShowTopMenu
,
...
...
@@ -135,5 +139,7 @@ export function useMenuSetting() {
getMenuBgColor
,
getShowSidebar
,
getIsMixMode
,
getIsMixSidebar
,
getCloseMixSidebarOnChange
,
};
}
src/hooks/web/useApexCharts.ts
浏览文件 @
e6db0d39
...
...
@@ -51,7 +51,7 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
tryOnUnmounted
(()
=>
{
if
(
!
chartInstance
)
return
;
chartInstance
.
destroy
();
chartInstance
?.
destroy
?.
();
chartInstance
=
null
;
});
...
...
src/hooks/web/useI18n.ts
浏览文件 @
e6db0d39
...
...
@@ -36,5 +36,5 @@ export function useI18n(namespace?: string) {
// Mainly to configure the vscode i18nn ally plugin. This function is only used for routing and menus. Please use useI18n for other places
// 为什么要编写此函数?
// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI
s
18n
// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI18n
export
const
t
=
(
key
:
string
)
=>
key
;
src/layouts/default/header/components/Breadcrumb.vue
浏览文件 @
e6db0d39
...
...
@@ -48,7 +48,7 @@
if
(
currentRoute
.
value
.
name
===
REDIRECT_NAME
)
{
return
;
}
const
matched
=
currentRoute
.
value
.
matched
;
const
matched
=
currentRoute
.
value
?
.
matched
;
if
(
!
matched
||
matched
.
length
===
0
)
return
;
let
breadcrumbList
=
filter
(
toRaw
(
matched
),
(
item
)
=>
{
...
...
@@ -102,7 +102,7 @@
color: @breadcrumb-item-normal-color;
a {
color:
@text-color-base
;
color:
rgba(0, 0, 0, 0.65)
;
&:hover {
color: @primary-color;
...
...
src/layouts/default/header/index.vue
浏览文件 @
e6db0d39
...
...
@@ -10,7 +10,9 @@
:style="getLogoWidth"
/>
<LayoutTrigger
v-if=
"(getShowContent && getShowHeaderTrigger && !getSplit) || getIsMobile"
v-if=
"
(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile
"
:theme=
"getHeaderTheme"
:sider=
"false"
/>
...
...
@@ -110,6 +112,7 @@
getSplit
,
getIsMixMode
,
getMenuWidth
,
getIsMixSidebar
,
}
=
useMenuSetting
();
const
{
getShowLocale
}
=
useLocaleSetting
();
const
{
getUseErrorHandle
}
=
useRootSetting
();
...
...
@@ -173,6 +176,7 @@
getUseLockPage
,
getUseErrorHandle
,
getLogoWidth
,
getIsMixSidebar
,
};
},
});
...
...
src/layouts/default/index.vue
浏览文件 @
e6db0d39
...
...
@@ -2,7 +2,7 @@
<Layout
:class=
"prefixCls"
>
<LayoutFeatures
/>
<LayoutHeader
fixed
v-if=
"getShowFullHeaderRef"
/>
<Layout>
<Layout
class=
"ant-layout-has-sider"
>
<LayoutSideBar
v-if=
"getShowSidebar || getIsMobile"
/>
<Layout
:class=
"`$
{prefixCls}__main`">
<LayoutMultipleHeader
/>
...
...
@@ -53,13 +53,14 @@
const
{
getShowFullHeaderRef
}
=
useHeaderSetting
();
const
{
getShowSidebar
}
=
useMenuSetting
();
const
{
getShowSidebar
,
getIsMixSidebar
}
=
useMenuSetting
();
return
{
getShowFullHeaderRef
,
getShowSidebar
,
prefixCls
,
getIsMobile
,
getIsMixSidebar
,
};
},
});
...
...
src/layouts/default/menu/index.tsx
浏览文件 @
e6db0d39
...
...
@@ -43,7 +43,6 @@ export default defineComponent({
const
{
getMenuMode
,
getMenuType
,
getCollapsedShowTitle
,
getMenuTheme
,
getCollapsed
,
getAccordion
,
...
...
@@ -132,12 +131,10 @@ export default defineComponent({
isHorizontal
=
{
props
.
isHorizontal
}
type
=
{
unref
(
getMenuType
)
}
mode
=
{
unref
(
getComputedMenuMode
)
}
collapsedShowTitle
=
{
unref
(
getCollapsedShowTitle
)
}
theme
=
{
unref
(
getComputedMenuTheme
)
}
items
=
{
unref
(
menusRef
)
}
accordion
=
{
unref
(
getAccordion
)
}
onMenuClick
=
{
handleMenuClick
}
showLogo
=
{
unref
(
getIsShowLogo
)
}
/>
);
}
...
...
src/layouts/default/setting/SettingDrawer.tsx
浏览文件 @
e6db0d39
...
...
@@ -61,7 +61,6 @@ export default defineComponent({
getShowMenu
,
getMenuType
,
getTrigger
,
getCollapsedShowTitle
,
getMenuFixed
,
getCollapsed
,
getCanDrag
,
...
...
@@ -71,6 +70,8 @@ export default defineComponent({
getMenuBgColor
,
getIsTopMenu
,
getSplit
,
getIsMixSidebar
,
getCloseMixSidebarOnChange
,
}
=
useMenuSetting
();
const
{
...
...
@@ -106,6 +107,13 @@ export default defineComponent({
def
=
{
unref
(
getSplit
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
unref
(
getMenuType
)
!==
MenuTypeEnum
.
MIX
}
/>
<
SwitchItem
title
=
{
t
(
'
layout.setting.closeMixSidebarOnChange
'
)
}
event
=
{
HandlerEnum
.
MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE
}
def
=
{
unref
(
getCloseMixSidebarOnChange
)
}
disabled
=
{
!
unref
(
getIsMixSidebar
)
}
/>
</>
);
}
...
...
@@ -166,14 +174,9 @@ export default defineComponent({
title
=
{
t
(
'
layout.setting.menuCollapse
'
)
}
event
=
{
HandlerEnum
.
MENU_COLLAPSED
}
def
=
{
unref
(
getCollapsed
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
}
/>
<
SwitchItem
title
=
{
t
(
'
layout.setting.collapseMenuDisplayName
'
)
}
event
=
{
HandlerEnum
.
MENU_COLLAPSED_SHOW_TITLE
}
def
=
{
unref
(
getCollapsedShowTitle
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
!
unref
(
getCollapsed
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
unref
(
getIsMixSidebar
)
}
/>
<
SwitchItem
title
=
{
t
(
'
layout.setting.fixedHeader
'
)
}
event
=
{
HandlerEnum
.
HEADER_FIXED
}
...
...
@@ -184,7 +187,7 @@ export default defineComponent({
title
=
{
t
(
'
layout.setting.fixedSideBar
'
)
}
event
=
{
HandlerEnum
.
MENU_FIXED
}
def
=
{
unref
(
getMenuFixed
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
unref
(
getIsMixSidebar
)
}
/>
<
SelectItem
title
=
{
t
(
'
layout.setting.topMenuLayout
'
)
}
...
...
@@ -192,7 +195,10 @@ export default defineComponent({
def
=
{
unref
(
getTopMenuAlign
)
}
options
=
{
topMenuAlignOptions
}
disabled
=
{
!
unref
(
getShowHeader
)
||
unref
(
getSplit
)
||
(
!
unref
(
getIsTopMenu
)
&&
!
unref
(
getSplit
))
!
unref
(
getShowHeader
)
||
unref
(
getSplit
)
||
(
!
unref
(
getIsTopMenu
)
&&
!
unref
(
getSplit
))
||
unref
(
getIsMixSidebar
)
}
/>
<
SelectItem
...
...
@@ -200,7 +206,7 @@ export default defineComponent({
event
=
{
HandlerEnum
.
MENU_TRIGGER
}
def
=
{
triggerDef
}
options
=
{
triggerOptions
}
disabled
=
{
!
unref
(
getShowMenuRef
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
unref
(
getIsMixSidebar
)
}
/>
<
SelectItem
title
=
{
t
(
'
layout.setting.contentMode
'
)
}
...
...
@@ -282,7 +288,12 @@ export default defineComponent({
event
=
{
HandlerEnum
.
HEADER_SHOW
}
def
=
{
unref
(
getShowHeader
)
}
/>
<
SwitchItem
title
=
"Logo"
event
=
{
HandlerEnum
.
SHOW_LOGO
}
def
=
{
unref
(
getShowLogo
)
}
/>
<
SwitchItem
title
=
"Logo"
event
=
{
HandlerEnum
.
SHOW_LOGO
}
def
=
{
unref
(
getShowLogo
)
}
disabled
=
{
unref
(
getIsMixSidebar
)
}
/>
<
SwitchItem
title
=
{
t
(
'
layout.setting.footer
'
)
}
event
=
{
HandlerEnum
.
SHOW_FOOTER
}
...
...
src/layouts/default/setting/components/TypePicker.vue
浏览文件 @
e6db0d39
...
...
@@ -6,12 +6,13 @@
@
click=
"handler(item)"
:class=
"[
`$
{prefixCls}__item`,
`${prefixCls}__item--${item.type}`,
{
[`${prefixCls}__item--active`]: def === item.type,
},
]"
>
<
img
:src=
"item.src
"
/>
<
div
class=
"mix-sidebar
"
/>
</div>
</Tooltip>
</
template
>
...
...
@@ -58,33 +59,118 @@
&__item {
position: relative;
width: 70px;
height: 50px;
margin: 0 20px 20px 0;
width: 56px;
height: 48px;
margin-right: 16px;
overflow: hidden;
cursor: pointer;
border-radius: 6px;
background-color: #f0f2f5;
border-radius: 4px;
box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.18);
&::before,
&::after {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
content: '';
opacity: 0;
transition: all 0.3s;
}
&--sidebar {
&::before {
top: 0;
left: 0;
z-index: 1;
width: 33%;
height: 100%;
background-color: #273352;
border-radius: 4px 0 0 4px;
}
&::after {
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #fff;
}
}
&--mix {
&::before {
top: 0;
left: 0;
width: 33%;
height: 100%;
background-color: #fff;
border-radius: 4px 0 0 4px;
}
&::after {
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 25%;
background-color: #273352;
}
}
&--top-menu {
&::after {
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #273352;
}
}
&--mix-sidebar {
&::before {
top: 0;
left: 0;
z-index: 1;
width: 25%;
height: 100%;
background-color: #273352;
border-radius: 4px 0 0 4px;
}
&::after {
top: 0;
left: 0;
width: 100%;
height: 25%;
background-color: #fff;
}
.mix-sidebar {
position: absolute;
left: 25%;
width: 15%;
height: 100%;
background-color: #fff;
}
}
// &::after {
// position: absolute;
// top: 50%;
// left: 50%;
// width: 0;
// height: 0;
// content: '';
// opacity: 0;
// transition: all 0.3s;
// }
&:hover,
&--active {
padding: 12px;
border: 2px solid @primary-color;
&::before,
&::after {
top: -8px;
left: -4px;
width: 80px;
height: 64px;
border: 2px solid @primary-color;
border-radius: 6px;
opacity: 1;
border-radius: 0;
}
}
}
...
...
src/layouts/default/setting/enum.ts
浏览文件 @
e6db0d39
import
{
ContentEnum
,
RouterTransitionEnum
}
from
'
/@/enums/appEnum
'
;
import
{
MenuModeEnum
,
MenuTypeEnum
,
TopMenuAlignEnum
,
TriggerEnum
}
from
'
/@/enums/menuEnum
'
;
import
mixImg
from
'
/@/assets/images/layout/menu-mix.svg
'
;
import
sidebarImg
from
'
/@/assets/images/layout/menu-sidebar.svg
'
;
import
menuTopImg
from
'
/@/assets/images/layout/menu-top.svg
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
const
{
t
}
=
useI18n
();
...
...
@@ -22,6 +19,7 @@ export enum HandlerEnum {
MENU_THEME
,
MENU_SPLIT
,
MENU_FIXED
,
MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE
,
// header
HEADER_SHOW
,
...
...
@@ -116,19 +114,21 @@ export const menuTypeList = [
title
:
t
(
'
layout.setting.menuTypeSidebar
'
),
mode
:
MenuModeEnum
.
INLINE
,
type
:
MenuTypeEnum
.
SIDEBAR
,
src
:
sidebarImg
,
},
{
title
:
t
(
'
layout.setting.menuTypeMix
'
),
mode
:
MenuModeEnum
.
INLINE
,
type
:
MenuTypeEnum
.
MIX
,
src
:
mixImg
,
},
{
title
:
t
(
'
layout.setting.menuTypeTopMenu
'
),
mode
:
MenuModeEnum
.
HORIZONTAL
,
type
:
MenuTypeEnum
.
TOP_MENU
,
src
:
menuTopImg
,
},
{
title
:
t
(
'
layout.setting.menuTypeMixSidebar
'
),
mode
:
MenuModeEnum
.
INLINE
,
type
:
MenuTypeEnum
.
MIX_SIDEBAR
,
},
];
src/layouts/default/setting/handler.ts
浏览文件 @
e6db0d39
...
...
@@ -48,9 +48,6 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case
HandlerEnum
.
MENU_WIDTH
:
return
{
menuSetting
:
{
menuWidth
:
value
}
};
case
HandlerEnum
.
MENU_COLLAPSED_SHOW_TITLE
:
return
{
menuSetting
:
{
collapsedShowTitle
:
value
}
};
case
HandlerEnum
.
MENU_SHOW_SIDEBAR
:
return
{
menuSetting
:
{
show
:
value
}
};
...
...
@@ -60,6 +57,8 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case
HandlerEnum
.
MENU_SPLIT
:
return
{
menuSetting
:
{
split
:
value
}
};
case
HandlerEnum
.
MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE
:
return
{
menuSetting
:
{
closeMixSidebarOnChange
:
value
}
};
case
HandlerEnum
.
MENU_FIXED
:
return
{
menuSetting
:
{
fixed
:
value
}
};
...
...
src/layouts/default/sider/LayoutSider.vue
浏览文件 @
e6db0d39
...
...
@@ -128,5 +128,55 @@
});
</
script
>
<
style
lang=
"less"
>
@import './index.less';
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-layout-sideBar';
.@{prefix-cls} {
z-index: @layout-sider-fixed-z-index;
&--fixed {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
&--mix {
top: @header-height;
height: calc(100% - @header-height);
}
&.ant-layout-sider-dark {
background: @sider-dark-bg-color;
.ant-layout-sider-trigger {
color: darken(@white, 25%);
background: @trigger-dark-bg-color;
&:hover {
color: @white;
background: @trigger-dark-hover-bg-color;
}
}
}
&:not(.ant-layout-sider-dark) {
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
.ant-layout-sider-trigger {
color: @text-color-base;
border-top: 1px solid @border-color-light;
}
}
.ant-layout-sider-zero-width-trigger {
top: 40%;
z-index: 10;
}
& .ant-layout-sider-trigger {
height: 36px;
line-height: 36px;
}
}
</
style
>
src/layouts/default/sider/MixSider.vue
0 → 100644
浏览文件 @
e6db0d39
<
template
>
<div
:class=
"`$
{prefixCls}-dom`" />
<div
v-click-outside=
"handleClickOutside"
:class=
"[
prefixCls,
getMenuTheme,
{
open: openMenu,
},
]"
>
<AppLogo
:showTitle=
"false"
:class=
"`$
{prefixCls}-logo`" />
<ScrollContainer>
<ul
:class=
"`$
{prefixCls}-module`">
<li
:class=
"[
`$
{prefixCls}-module__item `,
{
[`${prefixCls}-module__item--active`]: item.path === activePath,
},
]"
v-for="item in menuModules"
:key="item.path"
@click="hanldeModuleClick(item.path)"
>
<MenuTag
:item=
"item"
:showTitle=
"false"
:isHorizontal=
"false"
/>
<g-icon
:class=
"`$
{prefixCls}-module__icon`"
:size="22"
:icon="item.meta
&&
item.meta.icon"
/>
<p
:class=
"`$
{prefixCls}-module__name`">
{{
t
(
item
.
name
)
}}
</p>
</li>
</ul>
</ScrollContainer>
<div
:class=
"`$
{prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
<div
:class=
"[
`$
{prefixCls}-menu-list__title`,
{
show: openMenu,
},
]"
>
<span
class=
"text"
>
{{
title
}}
</span>
</div>
<ScrollContainer
:class=
"`$
{prefixCls}-menu-list__content`">
<BasicMenu
:isHorizontal=
"false"
mode=
"inline"
:items=
"chilrenMenus"
:theme=
"getMenuTheme"
@
menuClick=
"handleMenuClick"
/>
</ScrollContainer>
<div
v-show=
"getShowDragBar && openMenu"
:class=
"`$
{prefixCls}-drag-bar`"
ref="dragBarRef"
>
</div>
</div>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
onMounted
,
ref
,
computed
,
CSSProperties
,
unref
}
from
'
vue
'
;
import
type
{
Menu
}
from
'
/@/router/types
'
;
import
type
{
RouteLocationNormalized
}
from
'
vue-router
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
getShallowMenus
,
getChildrenMenus
,
getCurrentParentPath
}
from
'
/@/router/menus
'
;
import
{
useI18n
}
from
'
/@/hooks/web/useI18n
'
;
import
{
ScrollContainer
}
from
'
/@/components/Container
'
;
import
{
AppLogo
}
from
'
/@/components/Application
'
;
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
import
{
BasicMenu
,
MenuTag
}
from
'
/@/components/Menu
'
;
import
{
listenerLastChangeTab
}
from
'
/@/logics/mitt/tabChange
'
;
import
{
useMenuSetting
}
from
'
/@/hooks/setting/useMenuSetting
'
;
import
{
useDragLine
}
from
'
./useLayoutSider
'
;
import
clickOutside
from
'
/@/directives/clickOutside
'
;
import
{
useGlobSetting
}
from
'
/@/hooks/setting
'
;
export
default
defineComponent
({
name
:
'
LayoutMixSider
'
,
components
:
{
ScrollContainer
,
AppLogo
,
BasicMenu
,
MenuTag
,
},
directives
:
{
clickOutside
,
},
setup
()
{
let
menuModules
=
ref
<
Menu
[]
>
([]);
const
activePath
=
ref
(
''
);
const
chilrenMenus
=
ref
<
Menu
[]
>
([]);
const
openMenu
=
ref
(
false
);
const
dragBarRef
=
ref
<
ElRef
>
(
null
);
const
sideRef
=
ref
<
ElRef
>
(
null
);
const
currentRoute
=
ref
<
Nullable
<
RouteLocationNormalized
>>
(
null
);
const
{
prefixCls
}
=
useDesign
(
'
layout-mix-sider
'
);
const
go
=
useGo
();
const
{
t
}
=
useI18n
();
const
{
getMenuWidth
,
getCanDrag
,
getCloseMixSidebarOnChange
,
getMenuTheme
,
getMixSidebarTheme
,
}
=
useMenuSetting
();
const
{
title
}
=
useGlobSetting
();
useDragLine
(
sideRef
,
dragBarRef
,
true
);
const
getMenuStyle
=
computed
(
():
CSSProperties
=>
{
return
{
width
:
unref
(
openMenu
)
?
`
${
unref
(
getMenuWidth
)}
px`
:
0
,
};
}
);
const
getShowDragBar
=
computed
(()
=>
unref
(
getCanDrag
));
onMounted
(
async
()
=>
{
menuModules
.
value
=
await
getShallowMenus
();
});
listenerLastChangeTab
((
route
)
=>
{
currentRoute
.
value
=
route
;
setActive
();
if
(
unref
(
getCloseMixSidebarOnChange
))
{
openMenu
.
value
=
false
;
}
});
async
function
hanldeModuleClick
(
path
:
string
)
{
const
children
=
await
getChildrenMenus
(
path
);
if
(
unref
(
activePath
)
===
path
)
{
openMenu
.
value
=
!
unref
(
openMenu
);
if
(
!
unref
(
openMenu
))
{
setActive
();
}
}
else
{
openMenu
.
value
=
true
;
activePath
.
value
=
path
;
}
if
(
!
children
||
children
.
length
===
0
)
{
go
(
path
);
chilrenMenus
.
value
=
[];
openMenu
.
value
=
false
;
return
;
}
chilrenMenus
.
value
=
children
;
}
async
function
setActive
()
{
const
path
=
currentRoute
.
value
?.
path
;
if
(
!
path
)
return
;
const
parentPath
=
await
getCurrentParentPath
(
path
);
activePath
.
value
=
parentPath
;
// hanldeModuleClick(parentPath);
}
function
handleMenuClick
(
path
:
string
)
{
go
(
path
);
}
function
handleClickOutside
()
{
openMenu
.
value
=
false
;
setActive
();
}
return
{
t
,
prefixCls
,
menuModules
,
hanldeModuleClick
,
activePath
,
chilrenMenus
,
getShowDragBar
,
handleMenuClick
,
getMenuStyle
,
handleClickOutside
,
sideRef
,
dragBarRef
,
title
,
openMenu
,
getMenuTheme
,
getMixSidebarTheme
,
};
},
});
</
script
>
<
style
lang=
"less"
>
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-layout-mix-sider';
@tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';
@width: 80px;
.@{prefix-cls} {
position: fixed;
top: 0;
left: 0;
z-index: @layout-mix-sider-fixed-z-index;
width: @width;
height: 100%;
max-width: @width;
min-width: @width;
overflow: hidden;
background: @sider-dark-bg-color;
transition: all 0.2s ease 0s;
flex: 0 0 @width;
.@{tag-prefix-cls} {
position: absolute;
top: 6px;
right: 2px;
}
&-dom {
width: @width;
height: 100%;
max-width: @width;
min-width: @width;
overflow: hidden;
transition: all 0.2s ease 0s;
flex: 0 0 @width;
}
&-logo {
display: flex;
height: @header-height;
padding-left: 0 !important;
justify-content: center;
img {
width: @logo-width;
height: @logo-width;
}
}
&.light {
.@{prefix-cls}-logo {
border-bottom: 1px solid rgb(238, 238, 238);
}
&.open {
> .scroll-container {
border-right: 1px solid rgb(238, 238, 238);
}
}
.@{prefix-cls}-module {
&__item {
font-weight: normal;
color: rgba(0, 0, 0, 0.65);
&--active {
color: @primary-color;
background: unset;
}
}
}
}
&.dark {
&.open {
.@{prefix-cls}-logo {
border-bottom: 1px solid rgb(114 114 114);
}
> .scroll-container {
border-right: 1px solid rgb(114 114 114);
}
}
.@{prefix-cls}-menu-list {
background: @sider-dark-bg-color;
&__title {
color: @white;
border-bottom: none;
border-bottom: 1px solid rgb(114 114 114);
}
}
}
&-module {
position: relative;
height: calc(100% - @header-height) !important;
padding-top: 1px;
&__item {
position: relative;
padding: 12px 0;
color: rgba(255, 255, 255, 0.65);
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: @white;
}
// &:hover,
&--active {
font-weight: 700;
color: @white;
background: @sider-dark-darken-bg-color;
&::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: @primary-color;
content: '';
}
}
}
&__icon {
margin-bottom: 8px;
font-size: 24px;
}
&__name {
margin-bottom: 0;
font-size: 12px;
}
}
&-menu-list {
position: fixed;
top: 0;
left: 80px;
width: 0;
width: 200px;
height: calc(100%);
background: #fff;
transition: width 0.2s;
.@{tag-prefix-cls} {
position: absolute;
top: 10px;
right: 30px;
}
&__title {
display: flex;
height: @header-height;
margin-left: -6px;
font-size: 18px;
color: @primary-color;
border-bottom: 1px solid rgb(238, 238, 238);
opacity: 0;
transition: unset;
// justify-content: center;
align-items: center;
justify-content: start;
&.show {
opacity: 1;
transition: all 0.5s ease;
}
}
&__content {
height: calc(100% - @header-height) !important;
.scrollbar__wrap {
height: 100%;
overflow-x: hidden;
}
.scrollbar__bar.is-horizontal {
display: none;
}
.ant-menu {
height: 100%;
}
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
border-right: 1px solid transparent;
}
}
}
&-drag-bar {
position: absolute;
top: 0;
right: -3px;
width: 3px;
height: 100%;
cursor: ew-resize;
background: #f8f8f9;
border-top: none;
border-bottom: none;
box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
}
}
</
style
>
src/layouts/default/sider/index.less
已删除
100644 → 0
浏览文件 @
2e79c9f3
@import (reference) '../../../design/index.less';
@prefix-cls: ~'@{namespace}-layout-sideBar';
.@{prefix-cls} {
z-index: @layout-sider-fixed-z-index;
&--fixed {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
&--mix {
top: @header-height;
height: calc(100% - @header-height);
}
&.ant-layout-sider-dark {
background: @sider-dark-bg-color;
.ant-layout-sider-trigger {
color: darken(@white, 25%);
background: @trigger-dark-bg-color;
&:hover {
color: @white;
background: @trigger-dark-hover-bg-color;
}
}
}
&:not(.ant-layout-sider-dark) {
// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
.ant-layout-sider-trigger {
color: @text-color-base;
border-top: 1px solid @border-color-light;
}
}
.ant-layout-sider-zero-width-trigger {
top: 40%;
z-index: 10;
}
& .ant-layout-sider-trigger {
height: 36px;
line-height: 36px;
}
}
src/layouts/default/sider/index.vue
浏览文件 @
e6db0d39
...
...
@@ -10,6 +10,7 @@
>
<Sider
/>
</Drawer>
<MixSider
v-else-if=
"getIsMixSidebar"
/>
<Sider
v-else
/>
</
template
>
<
script
lang=
"ts"
>
...
...
@@ -17,16 +18,17 @@
import
Sider
from
'
./LayoutSider.vue
'
;
import
{
Drawer
}
from
'
ant-design-vue
'
;
import
MixSider
from
'
./MixSider.vue
'
;
import
{
useAppInject
}
from
'
/@/hooks/web/useAppInject
'
;
import
{
useMenuSetting
}
from
'
/@/hooks/setting/useMenuSetting
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
export
default
defineComponent
({
name
:
'
SiderWrapper
'
,
components
:
{
Sider
,
Drawer
},
components
:
{
Sider
,
Drawer
,
MixSider
},
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'
layout-sider-wrapper
'
);
const
{
getIsMobile
}
=
useAppInject
();
const
{
setMenuSetting
,
getCollapsed
,
getMenuWidth
}
=
useMenuSetting
();
const
{
setMenuSetting
,
getCollapsed
,
getMenuWidth
,
getIsMixSidebar
}
=
useMenuSetting
();
function
handleClose
()
{
setMenuSetting
({
...
...
@@ -34,7 +36,7 @@
});
}
return
{
prefixCls
,
getIsMobile
,
getCollapsed
,
handleClose
,
getMenuWidth
};
return
{
prefixCls
,
getIsMobile
,
getCollapsed
,
handleClose
,
getMenuWidth
,
getIsMixSidebar
};
},
});
</
script
>
...
...
src/layouts/default/sider/useLayoutSider.ts
浏览文件 @
e6db0d39
...
...
@@ -71,21 +71,30 @@ export function useTrigger(getIsMobile: Ref<boolean>) {
* @param siderRef
* @param dragBarRef
*/
export
function
useDragLine
(
siderRef
:
Ref
<
any
>
,
dragBarRef
:
Ref
<
any
>
)
{
export
function
useDragLine
(
siderRef
:
Ref
<
any
>
,
dragBarRef
:
Ref
<
any
>
,
mix
=
false
)
{
const
{
getMiniWidthNumber
,
getCollapsed
,
setMenuSetting
}
=
useMenuSetting
();
onMounted
(()
=>
{
nextTick
(()
=>
{
const
[
exec
]
=
useDebounce
(
changeWrapWidth
,
2
0
);
const
[
exec
]
=
useDebounce
(
changeWrapWidth
,
8
0
);
exec
();
});
});
function
getEl
(
elRef
:
Ref
<
ElRef
|
ComponentRef
>
):
any
{
const
el
=
unref
(
elRef
);
if
(
!
el
)
return
null
;
if
(
Reflect
.
has
(
el
,
'
$el
'
))
{
return
(
unref
(
elRef
)
as
ComponentRef
)?.
$el
;
}
return
unref
(
elRef
);
}
function
handleMouseMove
(
ele
:
HTMLElement
,
wrap
:
HTMLElement
,
clientX
:
number
)
{
document
.
onmousemove
=
function
(
innerE
)
{
let
iT
=
(
ele
as
any
).
left
+
(
innerE
.
clientX
-
clientX
);
innerE
=
innerE
||
window
.
event
;
const
maxT
=
6
00
;
const
maxT
=
8
00
;
const
minT
=
unref
(
getMiniWidthNumber
);
iT
<
0
&&
(
iT
=
0
);
iT
>
maxT
&&
(
iT
=
maxT
);
...
...
@@ -97,31 +106,36 @@ export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
// Drag and drop in the menu area-release the mouse
function
removeMouseup
(
ele
:
any
)
{
const
wrap
=
unref
(
siderRef
).
$el
;
const
wrap
=
getEl
(
siderRef
)
;
document
.
onmouseup
=
function
()
{
document
.
onmousemove
=
null
;
document
.
onmouseup
=
null
;
wrap
.
style
.
transition
=
'
width 0.2s
'
;
const
width
=
parseInt
(
wrap
.
style
.
width
);
const
miniWidth
=
unref
(
getMiniWidthNumber
);
if
(
!
unref
(
getCollapsed
))
{
width
>
miniWidth
+
20
?
setMenuSetting
({
menuWidth
:
width
})
:
setMenuSetting
({
collapsed
:
true
});
if
(
!
mix
)
{
const
miniWidth
=
unref
(
getMiniWidthNumber
);
if
(
!
unref
(
getCollapsed
))
{
width
>
miniWidth
+
20
?
setMenuSetting
({
menuWidth
:
width
})
:
setMenuSetting
({
collapsed
:
true
});
}
else
{
width
>
miniWidth
&&
setMenuSetting
({
collapsed
:
false
,
menuWidth
:
width
});
}
}
else
{
width
>
miniWidth
&&
setMenuSetting
({
collapsed
:
false
,
menuWidth
:
width
});
setMenuSetting
({
menuWidth
:
width
});
}
ele
.
releaseCapture
?.();
};
}
function
changeWrapWidth
()
{
const
ele
=
unref
(
dragBarRef
)?.
$el
;
if
(
!
ele
)
{
return
;
}
const
side
=
unref
(
siderRef
);
const
wrap
=
(
side
||
{}).
$el
;
const
ele
=
getEl
(
dragBarRef
);
if
(
!
ele
)
return
;
const
wrap
=
getEl
(
siderRef
);
if
(
!
wrap
)
return
;
ele
.
onmousedown
=
(
e
:
any
)
=>
{
wrap
.
style
.
transition
=
'
unset
'
;
const
clientX
=
e
?.
clientX
;
...
...
src/layouts/page/useCache.ts
浏览文件 @
e6db0d39
...
...
@@ -15,7 +15,10 @@ export function useCache(isPage: boolean) {
if
(
routeName
&&
!
[
ParentLayoutName
].
includes
(
routeName
))
{
name
.
value
=
routeName
;
}
else
{
const
matched
=
currentRoute
.
value
.
matched
;
const
matched
=
currentRoute
.
value
?.
matched
;
if
(
!
matched
)
{
return
;
}
const
len
=
matched
.
length
;
if
(
len
<
2
)
return
;
name
.
value
=
matched
[
len
-
2
].
name
as
string
;
...
...
src/locales/lang/en/layout/setting.ts
浏览文件 @
e6db0d39
...
...
@@ -12,7 +12,8 @@ export default {
menuTriggerTop
:
'
Top
'
,
// menu type
menuTypeSidebar
:
'
Left menu mode
'
,
menuTypeMix
:
'
Mixed mode
'
,
menuTypeMixSidebar
:
'
Left menu mixed mode
'
,
menuTypeMix
:
'
Top Menu Mix mode
'
,
menuTypeTopMenu
:
'
Top menu mode
'
,
on
:
'
On
'
,
...
...
@@ -35,6 +36,7 @@ export default {
interfaceDisplay
:
'
Interface display
'
,
animation
:
'
Animation
'
,
splitMenu
:
'
Split menu
'
,
closeMixSidebarOnChange
:
'
Switch page to close menu
'
,
headerTheme
:
'
Header theme
'
,
sidebarTheme
:
'
Menu theme
'
,
...
...
@@ -43,7 +45,6 @@ export default {
menuSearch
:
'
Menu search
'
,
menuAccordion
:
'
Sidebar accordion
'
,
menuCollapse
:
'
Collapse menu
'
,
collapseMenuDisplayName
:
'
Collapse menu display name
'
,
topMenuLayout
:
'
Top menu layout
'
,
menuCollapseButton
:
'
Menu collapse button
'
,
contentMode
:
'
Content area width
'
,
...
...
src/locales/lang/en/routes/demo/comp.ts
浏览文件 @
e6db0d39
...
...
@@ -9,6 +9,12 @@ export default {
scrollAction
:
'
Scroll Function
'
,
virtualScroll
:
'
Virtual Scroll
'
,
tree
:
'
Tree
'
,
treeBasic
:
'
Basic
'
,
editTree
:
'
Right-click
'
,
actionTree
:
'
Function operation
'
,
modal
:
'
Modal
'
,
drawer
:
'
Drawer
'
,
desc
:
'
Desc
'
,
...
...
src/locales/lang/en/routes/demo/level.ts
浏览文件 @
e6db0d39
export
default
{
level
:
'
Multi
menu cache
'
,
level
:
'
Multi
Menu
'
,
};
src/locales/lang/en/routes/demo/tree.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
export
default
{
tree
:
'
Tree
'
,
basic
:
'
Basic
'
,
editTree
:
'
Right-click
'
,
actionTree
:
'
Function operation
'
,
};
src/locales/lang/zh_CN/layout/setting.ts
浏览文件 @
e6db0d39
...
...
@@ -12,7 +12,8 @@ export default {
menuTriggerTop
:
'
顶部
'
,
// menu type
menuTypeSidebar
:
'
左侧菜单模式
'
,
menuTypeMix
:
'
混合模式
'
,
menuTypeMixSidebar
:
'
左侧菜单混合模式
'
,
menuTypeMix
:
'
顶部菜单混合模式
'
,
menuTypeTopMenu
:
'
顶部菜单模式
'
,
on
:
'
开
'
,
...
...
@@ -34,6 +35,7 @@ export default {
interfaceDisplay
:
'
界面显示
'
,
animation
:
'
动画
'
,
splitMenu
:
'
分割菜单
'
,
closeMixSidebarOnChange
:
'
切换页面关闭菜单
'
,
headerTheme
:
'
顶栏主题
'
,
sidebarTheme
:
'
菜单主题
'
,
...
...
@@ -42,7 +44,6 @@ export default {
menuSearch
:
'
菜单搜索
'
,
menuAccordion
:
'
侧边菜单手风琴模式
'
,
menuCollapse
:
'
折叠菜单
'
,
collapseMenuDisplayName
:
'
折叠菜单显示名称
'
,
topMenuLayout
:
'
顶部菜单布局
'
,
menuCollapseButton
:
'
菜单折叠按钮
'
,
contentMode
:
'
内容区域宽度
'
,
...
...
src/locales/lang/zh_CN/routes/demo/charts.ts
浏览文件 @
e6db0d39
export
default
{
charts
:
'
图表
库
'
,
charts
:
'
图表
'
,
map
:
'
地图
'
,
line
:
'
折线图
'
,
pie
:
'
饼图
'
,
...
...
src/locales/lang/zh_CN/routes/demo/comp.ts
浏览文件 @
e6db0d39
...
...
@@ -9,6 +9,11 @@ export default {
scrollAction
:
'
滚动函数
'
,
virtualScroll
:
'
虚拟滚动
'
,
tree
:
'
Tree
'
,
treeBasic
:
'
基础树
'
,
editTree
:
'
右键示例
'
,
actionTree
:
'
函数操作示例
'
,
modal
:
'
弹窗扩展
'
,
drawer
:
'
抽屉扩展
'
,
desc
:
'
详情组件
'
,
...
...
src/locales/lang/zh_CN/routes/demo/level.ts
浏览文件 @
e6db0d39
export
default
{
level
:
'
多级菜单
缓存
'
,
level
:
'
多级菜单
'
,
};
src/locales/lang/zh_CN/routes/demo/tree.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
export
default
{
tree
:
'
Tree
'
,
basic
:
'
基础树
'
,
editTree
:
'
右键示例
'
,
actionTree
:
'
函数操作示例
'
,
};
src/router/menus/modules/demo/comp.ts
浏览文件 @
e6db0d39
...
...
@@ -14,6 +14,107 @@ const menu: MenuModule = {
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.comp.basic
'
),
},
{
path
:
'
form
'
,
name
:
t
(
'
routes.demo.form.form
'
),
children
:
[
{
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.form.basic
'
),
},
{
path
:
'
useForm
'
,
name
:
t
(
'
routes.demo.form.useForm
'
),
},
{
path
:
'
refForm
'
,
name
:
t
(
'
routes.demo.form.refForm
'
),
},
{
path
:
'
advancedForm
'
,
name
:
t
(
'
routes.demo.form.advancedForm
'
),
},
{
path
:
'
ruleForm
'
,
name
:
t
(
'
routes.demo.form.ruleForm
'
),
},
{
path
:
'
dynamicForm
'
,
name
:
t
(
'
routes.demo.form.dynamicForm
'
),
},
{
path
:
'
customerForm
'
,
name
:
t
(
'
routes.demo.form.customerForm
'
),
},
],
},
{
path
:
'
table
'
,
name
:
t
(
'
routes.demo.table.table
'
),
children
:
[
{
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.table.basic
'
),
},
{
path
:
'
treeTable
'
,
name
:
t
(
'
routes.demo.table.treeTable
'
),
},
{
path
:
'
fetchTable
'
,
name
:
t
(
'
routes.demo.table.fetchTable
'
),
},
{
path
:
'
fixedColumn
'
,
name
:
t
(
'
routes.demo.table.fixedColumn
'
),
},
{
path
:
'
customerCell
'
,
name
:
t
(
'
routes.demo.table.customerCell
'
),
},
{
path
:
'
formTable
'
,
name
:
t
(
'
routes.demo.table.formTable
'
),
},
{
path
:
'
useTable
'
,
name
:
t
(
'
routes.demo.table.useTable
'
),
},
{
path
:
'
refTable
'
,
name
:
t
(
'
routes.demo.table.refTable
'
),
},
{
path
:
'
multipleHeader
'
,
name
:
t
(
'
routes.demo.table.multipleHeader
'
),
},
{
path
:
'
mergeHeader
'
,
name
:
t
(
'
routes.demo.table.mergeHeader
'
),
},
{
path
:
'
expandTable
'
,
name
:
t
(
'
routes.demo.table.expandTable
'
),
},
{
path
:
'
fixedHeight
'
,
name
:
t
(
'
routes.demo.table.fixedHeight
'
),
},
{
path
:
'
footerTable
'
,
name
:
t
(
'
routes.demo.table.footerTable
'
),
},
{
path
:
'
editCellTable
'
,
name
:
t
(
'
routes.demo.table.editCellTable
'
),
},
{
path
:
'
editRowTable
'
,
name
:
t
(
'
routes.demo.table.editRowTable
'
),
},
],
},
{
path
:
'
countTo
'
,
name
:
t
(
'
routes.demo.comp.countTo
'
),
...
...
@@ -54,6 +155,48 @@ const menu: MenuModule = {
content
:
'
new
'
,
},
},
{
path
:
'
tree
'
,
name
:
t
(
'
routes.demo.comp.tree
'
),
children
:
[
{
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.comp.treeBasic
'
),
},
{
path
:
'
editTree
'
,
name
:
t
(
'
routes.demo.comp.editTree
'
),
},
{
path
:
'
actionTree
'
,
name
:
t
(
'
routes.demo.comp.actionTree
'
),
},
],
},
{
name
:
t
(
'
routes.demo.editor.editor
'
),
path
:
'
editor
'
,
children
:
[
{
path
:
'
markdown
'
,
name
:
t
(
'
routes.demo.editor.markdown
'
),
},
{
path
:
'
tinymce
'
,
name
:
t
(
'
routes.demo.editor.tinymce
'
),
children
:
[
{
path
:
'
index
'
,
name
:
t
(
'
routes.demo.editor.tinymceBasic
'
),
},
{
path
:
'
editor
'
,
name
:
t
(
'
routes.demo.editor.tinymceForm
'
),
},
],
},
],
},
{
path
:
'
scroll
'
,
name
:
t
(
'
routes.demo.comp.scroll
'
),
...
...
src/router/menus/modules/demo/editor.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
MenuModule
}
from
'
/@/router/types.d
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
menu
:
MenuModule
=
{
orderNo
:
500
,
menu
:
{
name
:
t
(
'
routes.demo.editor.editor
'
),
path
:
'
/editor
'
,
children
:
[
{
path
:
'
markdown
'
,
name
:
t
(
'
routes.demo.editor.markdown
'
),
},
{
path
:
'
tinymce
'
,
name
:
t
(
'
routes.demo.editor.tinymce
'
),
children
:
[
{
path
:
'
index
'
,
name
:
t
(
'
routes.demo.editor.tinymceBasic
'
),
},
{
path
:
'
editor
'
,
name
:
t
(
'
routes.demo.editor.tinymceForm
'
),
},
],
},
],
},
};
export
default
menu
;
src/router/menus/modules/demo/feat.ts
浏览文件 @
e6db0d39
...
...
@@ -62,6 +62,28 @@ const menu: MenuModule = {
path
:
'
error-log
'
,
name
:
t
(
'
routes.demo.feat.errorLog
'
),
},
{
name
:
t
(
'
routes.demo.excel.excel
'
),
path
:
'
excel
'
,
children
:
[
{
path
:
'
customExport
'
,
name
:
t
(
'
routes.demo.excel.customExport
'
),
},
{
path
:
'
jsonExport
'
,
name
:
t
(
'
routes.demo.excel.jsonExport
'
),
},
{
path
:
'
arrayExport
'
,
name
:
t
(
'
routes.demo.excel.arrayExport
'
),
},
{
path
:
'
importExcel
'
,
name
:
t
(
'
routes.demo.excel.importExcel
'
),
},
],
},
{
path
:
'
testTab
'
,
name
:
t
(
'
routes.demo.feat.tab
'
),
...
...
src/router/menus/modules/demo/form.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
MenuModule
}
from
'
/@/router/types.d
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
menu
:
MenuModule
=
{
orderNo
:
40
,
menu
:
{
path
:
'
/form
'
,
name
:
t
(
'
routes.demo.form.form
'
),
children
:
[
{
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.form.basic
'
),
},
{
path
:
'
useForm
'
,
name
:
t
(
'
routes.demo.form.useForm
'
),
},
{
path
:
'
refForm
'
,
name
:
t
(
'
routes.demo.form.refForm
'
),
},
{
path
:
'
advancedForm
'
,
name
:
t
(
'
routes.demo.form.advancedForm
'
),
},
{
path
:
'
ruleForm
'
,
name
:
t
(
'
routes.demo.form.ruleForm
'
),
},
{
path
:
'
dynamicForm
'
,
name
:
t
(
'
routes.demo.form.dynamicForm
'
),
},
{
path
:
'
customerForm
'
,
name
:
t
(
'
routes.demo.form.customerForm
'
),
},
],
},
};
export
default
menu
;
src/router/menus/modules/demo/table.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
MenuModule
}
from
'
/@/router/types.d
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
menu
:
MenuModule
=
{
orderNo
:
30
,
menu
:
{
path
:
'
/table
'
,
name
:
t
(
'
routes.demo.table.table
'
),
children
:
[
{
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.table.basic
'
),
},
{
path
:
'
treeTable
'
,
name
:
t
(
'
routes.demo.table.treeTable
'
),
},
{
path
:
'
fetchTable
'
,
name
:
t
(
'
routes.demo.table.fetchTable
'
),
},
{
path
:
'
fixedColumn
'
,
name
:
t
(
'
routes.demo.table.fixedColumn
'
),
},
{
path
:
'
customerCell
'
,
name
:
t
(
'
routes.demo.table.customerCell
'
),
},
{
path
:
'
formTable
'
,
name
:
t
(
'
routes.demo.table.formTable
'
),
},
{
path
:
'
useTable
'
,
name
:
t
(
'
routes.demo.table.useTable
'
),
},
{
path
:
'
refTable
'
,
name
:
t
(
'
routes.demo.table.refTable
'
),
},
{
path
:
'
multipleHeader
'
,
name
:
t
(
'
routes.demo.table.multipleHeader
'
),
},
{
path
:
'
mergeHeader
'
,
name
:
t
(
'
routes.demo.table.mergeHeader
'
),
},
{
path
:
'
expandTable
'
,
name
:
t
(
'
routes.demo.table.expandTable
'
),
},
{
path
:
'
fixedHeight
'
,
name
:
t
(
'
routes.demo.table.fixedHeight
'
),
},
{
path
:
'
footerTable
'
,
name
:
t
(
'
routes.demo.table.footerTable
'
),
},
{
path
:
'
editCellTable
'
,
name
:
t
(
'
routes.demo.table.editCellTable
'
),
},
{
path
:
'
editRowTable
'
,
name
:
t
(
'
routes.demo.table.editRowTable
'
),
},
],
},
};
export
default
menu
;
src/router/menus/modules/demo/tree.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
MenuModule
}
from
'
/@/router/types.d
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
menu
:
MenuModule
=
{
orderNo
:
50
,
menu
:
{
path
:
'
/tree
'
,
name
:
t
(
'
routes.demo.tree.tree
'
),
children
:
[
{
path
:
'
basic
'
,
name
:
t
(
'
routes.demo.tree.basic
'
),
},
{
path
:
'
editTree
'
,
name
:
t
(
'
routes.demo.tree.editTree
'
),
},
{
path
:
'
actionTree
'
,
name
:
t
(
'
routes.demo.tree.actionTree
'
),
},
],
},
};
export
default
menu
;
src/router/routes/modules/demo/comp.ts
浏览文件 @
e6db0d39
...
...
@@ -22,6 +22,208 @@ const comp: AppRouteModule = {
title
:
t
(
'
routes.demo.comp.basic
'
),
},
},
{
path
:
'
form
'
,
name
:
'
FormDemo
'
,
redirect
:
'
/comp/form/basic
'
,
component
:
getParentLayout
(
'
FormDemo
'
),
meta
:
{
// icon: 'mdi:form-select',
title
:
t
(
'
routes.demo.form.form
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
FormBasicDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.basic
'
),
},
},
{
path
:
'
useForm
'
,
name
:
'
UseFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/UseForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.useForm
'
),
},
},
{
path
:
'
refForm
'
,
name
:
'
RefFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/RefForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.refForm
'
),
},
},
{
path
:
'
advancedForm
'
,
name
:
'
AdvancedFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/AdvancedForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.advancedForm
'
),
},
},
{
path
:
'
ruleForm
'
,
name
:
'
RuleFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/RuleForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.ruleForm
'
),
},
},
{
path
:
'
dynamicForm
'
,
name
:
'
DynamicFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/DynamicForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.dynamicForm
'
),
},
},
{
path
:
'
customerForm
'
,
name
:
'
CustomerFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/CustomerForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.customerForm
'
),
},
},
],
},
{
path
:
'
table
'
,
name
:
'
TableDemo
'
,
redirect
:
'
/comp/table/basic
'
,
component
:
getParentLayout
(
'
TableDemo
'
),
meta
:
{
// icon: 'carbon:table-split',
title
:
t
(
'
routes.demo.table.table
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
TableBasicDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/Basic.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.basic
'
),
},
},
{
path
:
'
treeTable
'
,
name
:
'
TreeTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/TreeTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.treeTable
'
),
},
},
{
path
:
'
fetchTable
'
,
name
:
'
FetchTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FetchTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.fetchTable
'
),
},
},
{
path
:
'
fixedColumn
'
,
name
:
'
FixedColumnDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FixedColumn.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.fixedColumn
'
),
},
},
{
path
:
'
customerCell
'
,
name
:
'
CustomerCellDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/CustomerCell.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.customerCell
'
),
},
},
{
path
:
'
formTable
'
,
name
:
'
FormTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FormTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.formTable
'
),
},
},
{
path
:
'
useTable
'
,
name
:
'
UseTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/UseTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.useTable
'
),
},
},
{
path
:
'
refTable
'
,
name
:
'
RefTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/RefTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.refTable
'
),
},
},
{
path
:
'
multipleHeader
'
,
name
:
'
MultipleHeaderDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/MultipleHeader.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.multipleHeader
'
),
},
},
{
path
:
'
mergeHeader
'
,
name
:
'
MergeHeaderDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/MergeHeader.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.mergeHeader
'
),
},
},
{
path
:
'
expandTable
'
,
name
:
'
ExpandTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/ExpandTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.expandTable
'
),
},
},
{
path
:
'
fixedHeight
'
,
name
:
'
FixedHeightDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FixedHeight.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.fixedHeight
'
),
},
},
{
path
:
'
footerTable
'
,
name
:
'
FooterTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FooterTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.footerTable
'
),
},
},
{
path
:
'
editCellTable
'
,
name
:
'
EditCellTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/EditCellTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.editCellTable
'
),
},
},
{
path
:
'
editRowTable
'
,
name
:
'
EditRowTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/EditRowTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.editRowTable
'
),
},
},
],
},
{
path
:
'
transition
'
,
name
:
'
transitionDemo
'
,
...
...
@@ -38,7 +240,89 @@ const comp: AppRouteModule = {
title
:
t
(
'
routes.demo.comp.countTo
'
),
},
},
{
path
:
'
tree
'
,
name
:
'
TreeDemo
'
,
redirect
:
'
/comp/tree/basic
'
,
component
:
getParentLayout
(
'
TreeDemo
'
),
meta
:
{
// icon: 'clarity:tree-view-line',
title
:
t
(
'
routes.demo.comp.tree
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
BasicTreeDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/tree/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.comp.treeBasic
'
),
},
},
{
path
:
'
editTree
'
,
name
:
'
EditTreeDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/tree/EditTree.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.comp.editTree
'
),
},
},
{
path
:
'
actionTree
'
,
name
:
'
ActionTreeDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/tree/ActionTree.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.comp.actionTree
'
),
},
},
],
},
{
path
:
'
editor
'
,
name
:
'
EditorDemo
'
,
redirect
:
'
/comp/editor/markdown
'
,
component
:
getParentLayout
(
'
EditorDemo
'
),
meta
:
{
// icon: 'carbon:table-split',
title
:
t
(
'
routes.demo.editor.editor
'
),
},
children
:
[
{
path
:
'
markdown
'
,
name
:
'
MarkdownDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/editor/Markdown.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.editor.markdown
'
),
},
},
{
path
:
'
tinymce
'
,
component
:
getParentLayout
(
'
TinymceDemo
'
),
name
:
'
TinymceDemo
'
,
meta
:
{
title
:
t
(
'
routes.demo.editor.tinymce
'
),
},
redirect
:
'
/comp/editor/tinymce/index
'
,
children
:
[
{
path
:
'
index
'
,
name
:
'
TinymceBasicDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/editor/tinymce/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.editor.tinymceBasic
'
),
},
},
{
path
:
'
editor
'
,
name
:
'
TinymceFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/editor/tinymce/Editor.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.editor.tinymceForm
'
),
},
},
],
},
],
},
{
path
:
'
scroll
'
,
name
:
'
ScrollDemo
'
,
...
...
src/router/routes/modules/demo/editor.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
AppRouteModule
}
from
'
/@/router/types
'
;
import
{
getParentLayout
,
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
editor
:
AppRouteModule
=
{
path
:
'
/editor
'
,
name
:
'
Editor
'
,
component
:
LAYOUT
,
redirect
:
'
/editor/markdown
'
,
meta
:
{
icon
:
'
carbon:table-split
'
,
title
:
t
(
'
routes.demo.editor.editor
'
),
},
children
:
[
{
path
:
'
markdown
'
,
name
:
'
MarkdownDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/editor/Markdown.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.editor.markdown
'
),
},
},
{
path
:
'
tinymce
'
,
component
:
getParentLayout
(
'
TinymceDemo
'
),
name
:
'
TinymceDemo
'
,
meta
:
{
title
:
t
(
'
routes.demo.editor.tinymce
'
),
},
redirect
:
'
/editor/tinymce/index
'
,
children
:
[
{
path
:
'
index
'
,
name
:
'
TinymceBasicDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/editor/tinymce/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.editor.tinymceBasic
'
),
},
},
{
path
:
'
editor
'
,
name
:
'
TinymceFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/editor/tinymce/Editor.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.editor.tinymceForm
'
),
},
},
],
},
],
};
export
default
editor
;
src/router/routes/modules/demo/excel.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
AppRouteModule
}
from
'
/@/router/types
'
;
import
{
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
excel
:
AppRouteModule
=
{
path
:
'
/excel
'
,
name
:
'
Excel
'
,
component
:
LAYOUT
,
redirect
:
'
/excel/customExport
'
,
meta
:
{
icon
:
'
mdi:microsoft-excel
'
,
title
:
t
(
'
routes.demo.excel.excel
'
),
},
children
:
[
{
path
:
'
customExport
'
,
name
:
'
CustomExport
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/CustomExport.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.customExport
'
),
},
},
{
path
:
'
jsonExport
'
,
name
:
'
JsonExport
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/JsonExport.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.jsonExport
'
),
},
},
{
path
:
'
arrayExport
'
,
name
:
'
ArrayExport
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/ArrayExport.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.arrayExport
'
),
},
},
{
path
:
'
importExcel
'
,
name
:
'
ImportExcel
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/ImportExcel.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.importExcel
'
),
},
},
],
};
export
default
excel
;
src/router/routes/modules/demo/feat.ts
浏览文件 @
e6db0d39
import
type
{
AppRouteModule
}
from
'
/@/router/types
'
;
import
{
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
getParentLayout
,
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
feat
:
AppRouteModule
=
{
...
...
@@ -110,6 +110,51 @@ const feat: AppRouteModule = {
title
:
t
(
'
routes.demo.feat.errorLog
'
),
},
},
{
path
:
'
excel
'
,
name
:
'
Excel
'
,
redirect
:
'
/feat/excel/customExport
'
,
component
:
getParentLayout
(
'
Excel
'
),
meta
:
{
// icon: 'mdi:microsoft-excel',
title
:
t
(
'
routes.demo.excel.excel
'
),
},
children
:
[
{
path
:
'
customExport
'
,
name
:
'
CustomExport
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/CustomExport.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.customExport
'
),
},
},
{
path
:
'
jsonExport
'
,
name
:
'
JsonExport
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/JsonExport.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.jsonExport
'
),
},
},
{
path
:
'
arrayExport
'
,
name
:
'
ArrayExport
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/ArrayExport.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.arrayExport
'
),
},
},
{
path
:
'
importExcel
'
,
name
:
'
ImportExcel
'
,
component
:
()
=>
import
(
'
/@/views/demo/excel/ImportExcel.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.excel.importExcel
'
),
},
},
],
},
{
path
:
'
testTab/:id
'
,
name
:
'
TestTab
'
,
...
...
src/router/routes/modules/demo/form.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
AppRouteModule
}
from
'
/@/router/types
'
;
import
{
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
form
:
AppRouteModule
=
{
path
:
'
/form
'
,
name
:
'
FormDemo
'
,
component
:
LAYOUT
,
redirect
:
'
/form/basic
'
,
meta
:
{
icon
:
'
mdi:form-select
'
,
title
:
t
(
'
routes.demo.form.form
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
FormBasicDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.basic
'
),
},
},
{
path
:
'
useForm
'
,
name
:
'
UseFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/UseForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.useForm
'
),
},
},
{
path
:
'
refForm
'
,
name
:
'
RefFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/RefForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.refForm
'
),
},
},
{
path
:
'
advancedForm
'
,
name
:
'
AdvancedFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/AdvancedForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.advancedForm
'
),
},
},
{
path
:
'
ruleForm
'
,
name
:
'
RuleFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/RuleForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.ruleForm
'
),
},
},
{
path
:
'
dynamicForm
'
,
name
:
'
DynamicFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/DynamicForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.dynamicForm
'
),
},
},
{
path
:
'
customerForm
'
,
name
:
'
CustomerFormDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/form/CustomerForm.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.form.customerForm
'
),
},
},
],
};
export
default
form
;
src/router/routes/modules/demo/table.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
AppRouteModule
}
from
'
/@/router/types
'
;
import
{
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
table
:
AppRouteModule
=
{
path
:
'
/table
'
,
name
:
'
TableDemo
'
,
component
:
LAYOUT
,
redirect
:
'
/table/basic
'
,
meta
:
{
icon
:
'
carbon:table-split
'
,
title
:
t
(
'
routes.demo.table.table
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
TableBasicDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/Basic.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.basic
'
),
},
},
{
path
:
'
treeTable
'
,
name
:
'
TreeTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/TreeTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.treeTable
'
),
},
},
{
path
:
'
fetchTable
'
,
name
:
'
FetchTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FetchTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.fetchTable
'
),
},
},
{
path
:
'
fixedColumn
'
,
name
:
'
FixedColumnDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FixedColumn.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.fixedColumn
'
),
},
},
{
path
:
'
customerCell
'
,
name
:
'
CustomerCellDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/CustomerCell.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.customerCell
'
),
},
},
{
path
:
'
formTable
'
,
name
:
'
FormTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FormTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.formTable
'
),
},
},
{
path
:
'
useTable
'
,
name
:
'
UseTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/UseTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.useTable
'
),
},
},
{
path
:
'
refTable
'
,
name
:
'
RefTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/RefTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.refTable
'
),
},
},
{
path
:
'
multipleHeader
'
,
name
:
'
MultipleHeaderDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/MultipleHeader.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.multipleHeader
'
),
},
},
{
path
:
'
mergeHeader
'
,
name
:
'
MergeHeaderDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/MergeHeader.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.mergeHeader
'
),
},
},
{
path
:
'
expandTable
'
,
name
:
'
ExpandTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/ExpandTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.expandTable
'
),
},
},
{
path
:
'
fixedHeight
'
,
name
:
'
FixedHeightDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FixedHeight.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.fixedHeight
'
),
},
},
{
path
:
'
footerTable
'
,
name
:
'
FooterTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/FooterTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.footerTable
'
),
},
},
{
path
:
'
editCellTable
'
,
name
:
'
EditCellTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/EditCellTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.editCellTable
'
),
},
},
{
path
:
'
editRowTable
'
,
name
:
'
EditRowTableDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/table/EditRowTable.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.table.editRowTable
'
),
},
},
],
};
export
default
table
;
src/router/routes/modules/demo/tree.ts
已删除
100644 → 0
浏览文件 @
2e79c9f3
import
type
{
AppRouteModule
}
from
'
/@/router/types
'
;
import
{
LAYOUT
}
from
'
/@/router/constant
'
;
import
{
t
}
from
'
/@/hooks/web/useI18n
'
;
const
tree
:
AppRouteModule
=
{
path
:
'
/tree
'
,
name
:
'
TreeDemo
'
,
component
:
LAYOUT
,
redirect
:
'
/tree/basic
'
,
meta
:
{
icon
:
'
clarity:tree-view-line
'
,
title
:
t
(
'
routes.demo.tree.tree
'
),
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
BasicTreeDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/tree/index.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.tree.basic
'
),
},
},
{
path
:
'
editTree
'
,
name
:
'
EditTreeDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/tree/EditTree.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.tree.editTree
'
),
},
},
{
path
:
'
actionTree
'
,
name
:
'
ActionTreeDemo
'
,
component
:
()
=>
import
(
'
/@/views/demo/tree/ActionTree.vue
'
),
meta
:
{
title
:
t
(
'
routes.demo.tree.actionTree
'
),
},
},
],
};
export
default
tree
;
src/settings/colorSetting.ts
浏览文件 @
e6db0d39
...
...
@@ -11,6 +11,7 @@ export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
'
#24292e
'
,
'
#394664
'
,
'
#001529
'
,
'
#383f45
'
,
];
// sider preset color
...
...
@@ -24,4 +25,5 @@ export const SIDE_BAR_BG_COLOR_LIST: string[] = [
'
#001628
'
,
'
#28333E
'
,
'
#344058
'
,
'
#383f45
'
,
];
src/settings/projectSetting.ts
浏览文件 @
e6db0d39
...
...
@@ -81,11 +81,9 @@ const setting: ProjectConfig = {
fixed
:
true
,
// Menu collapse
collapsed
:
false
,
// Whether to display the menu name when folding the menu
collapsedShowTitle
:
false
,
// Whether it can be dragged
// Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
canDrag
:
fals
e
,
canDrag
:
tru
e
,
// Whether to show no dom
show
:
true
,
// Whether to show dom
...
...
@@ -106,6 +104,8 @@ const setting: ProjectConfig = {
trigger
:
TriggerEnum
.
HEADER
,
// Turn on accordion mode, only show a menu
accordion
:
true
,
// Switch page to close menu
closeMixSidebarOnChange
:
false
,
},
// Multi-label
...
...
src/store/modules/tab.ts
浏览文件 @
e6db0d39
...
...
@@ -88,8 +88,9 @@ class Tab extends VuexModule {
if
(
item
.
meta
?.
affix
)
{
const
name
=
item
.
name
as
string
;
pageCacheSet
.
add
(
name
);
}
else
if
(
item
.
matched
&&
needCache
)
{
const
matched
=
item
.
matched
;
}
else
if
(
item
?.
matched
&&
needCache
)
{
const
matched
=
item
?.
matched
;
if
(
!
matched
)
return
;
const
len
=
matched
.
length
;
if
(
len
<
2
)
return
;
...
...
src/types/config.d.ts
浏览文件 @
e6db0d39
...
...
@@ -7,7 +7,6 @@ export interface MenuSetting {
bgColor
:
string
;
fixed
:
boolean
;
collapsed
:
boolean
;
collapsedShowTitle
:
boolean
;
canDrag
:
boolean
;
show
:
boolean
;
hidden
:
boolean
;
...
...
@@ -19,6 +18,7 @@ export interface MenuSetting {
topMenuAlign
:
'
start
'
|
'
center
'
|
'
end
'
;
trigger
:
TriggerEnum
;
accordion
:
boolean
;
closeMixSidebarOnChange
:
boolean
;
}
export
interface
MultiTabsSetting
{
...
...
@@ -109,6 +109,7 @@ export interface ProjectConfig {
// pageLayout是否开启keep-alive
openKeepAlive
:
boolean
;
//
// 锁屏时间
lockTime
:
number
;
// 显示面包屑
...
...
src/utils/factory/createAsyncComponent.tsx
浏览文件 @
e6db0d39
...
...
@@ -34,7 +34,9 @@ export function createAsyncComponent(loader: Fn, options: Options = {}) {
loadingComponent
:
loading
?
<
Spin
spinning
=
{
true
}
size
=
{
size
}
/>
:
undefined
,
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
// TODO
timeout
,
// errorComponent
// Defining if component is suspensible. Default: true.
// suspensible: false,
delay
,
...
...
yarn.lock
浏览文件 @
e6db0d39
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录