Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一臭打代码的 aka 潘先生です
vue-vben-admin
提交
43929174
V
vue-vben-admin
项目概览
一臭打代码的 aka 潘先生です
/
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,发现更多精彩内容 >>
提交
43929174
编写于
11月 10, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: layout code adjustment
上级
4ff6b73c
变更
22
隐藏空白更改
内联
并排
Showing
22 changed file
with
387 addition
and
421 deletion
+387
-421
src/layouts/default/LayoutContent.tsx
src/layouts/default/LayoutContent.tsx
+18
-6
src/layouts/default/LayoutSideBar.tsx
src/layouts/default/LayoutSideBar.tsx
+11
-9
src/layouts/default/header/LayoutBreadcrumb.tsx
src/layouts/default/header/LayoutBreadcrumb.tsx
+0
-0
src/layouts/default/header/LayoutHeader.tsx
src/layouts/default/header/LayoutHeader.tsx
+7
-5
src/layouts/default/header/LockActionItem.less
src/layouts/default/header/LockActionItem.less
+0
-0
src/layouts/default/header/LockActionItem.tsx
src/layouts/default/header/LockActionItem.tsx
+0
-0
src/layouts/default/header/UserDropdown.tsx
src/layouts/default/header/UserDropdown.tsx
+1
-2
src/layouts/default/header/index.less
src/layouts/default/header/index.less
+214
-0
src/layouts/default/header/notice/NoticeActionItem.vue
src/layouts/default/header/notice/NoticeActionItem.vue
+0
-0
src/layouts/default/header/notice/NoticeList.vue
src/layouts/default/header/notice/NoticeList.vue
+0
-0
src/layouts/default/header/notice/data.ts
src/layouts/default/header/notice/data.ts
+0
-0
src/layouts/default/index.less
src/layouts/default/index.less
+0
-331
src/layouts/default/index.tsx
src/layouts/default/index.tsx
+10
-22
src/layouts/default/menu/LayoutMenu.tsx
src/layouts/default/menu/LayoutMenu.tsx
+2
-4
src/layouts/default/menu/index.less
src/layouts/default/menu/index.less
+25
-0
src/layouts/default/multitabs/TabContent.tsx
src/layouts/default/multitabs/TabContent.tsx
+4
-2
src/layouts/default/multitabs/index.less
src/layouts/default/multitabs/index.less
+8
-1
src/layouts/default/multitabs/index.tsx
src/layouts/default/multitabs/index.tsx
+1
-26
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/SettingDrawer.tsx
+8
-8
src/layouts/default/setting/index.less
src/layouts/default/setting/index.less
+72
-0
src/layouts/default/setting/index.vue
src/layouts/default/setting/index.vue
+2
-1
src/layouts/logo/index.vue
src/layouts/logo/index.vue
+4
-4
未找到文件。
src/layouts/default/LayoutContent.tsx
浏览文件 @
43929174
import
{
defineComponent
}
from
'
vue
'
;
import
{
computed
,
defineComponent
,
unref
}
from
'
vue
'
;
import
{
Layout
}
from
'
ant-design-vue
'
;
import
{
FullLoading
}
from
'
/@/components/Loading/index
'
;
import
{
RouterView
}
from
'
vue-router
'
;
import
{
ContentEnum
}
from
'
/@/enums/appEnum
'
;
...
...
@@ -7,14 +9,24 @@ import { appStore } from '/@/store/modules/app';
export
default
defineComponent
({
name
:
'
DefaultLayoutContent
'
,
setup
()
{
const
getProjectConfigRef
=
computed
(()
=>
{
return
appStore
.
getProjectConfig
;
});
return
()
=>
{
const
{
getProjectConfig
}
=
appStore
;
const
{
contentMode
}
=
getProjectConfig
;
const
{
contentMode
,
openPageLoading
}
=
unref
(
getProjectConfigRef
);
const
{
getPageLoading
}
=
appStore
;
const
wrapClass
=
contentMode
===
ContentEnum
.
FULL
?
'
full
'
:
'
fixed
'
;
return
(
<
Layout
.
Content
class
=
{
`layout-content
${
wrapClass
}
`
}
>
{
()
=>
<
RouterView
/>
}
</
Layout
.
Content
>
<
div
class
=
{
[
`default-layout__main`
]
}
>
{
openPageLoading
&&
(
<
FullLoading
class
=
{
[
`default-layout__loading`
,
!
getPageLoading
&&
'
hidden
'
]
}
/>
)
}
<
Layout
.
Content
class
=
{
`layout-content
${
wrapClass
}
`
}
>
{
()
=>
<
RouterView
/>
}
</
Layout
.
Content
>
</
div
>
);
};
},
...
...
src/layouts/default/LayoutSideBar.tsx
浏览文件 @
43929174
...
...
@@ -2,13 +2,15 @@ import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue'
import
{
Layout
}
from
'
ant-design-vue
'
;
import
LayoutTrigger
from
'
./LayoutTrigger
'
;
import
{
menuStore
}
from
'
/@/store/modules/m
enu
'
;
import
LayoutMenu
from
'
/@/layouts/default/menu/LayoutM
enu
'
;
import
{
menuStore
}
from
'
/@/store/modules/menu
'
;
import
{
appStore
}
from
'
/@/store/modules/app
'
;
import
{
MenuModeEnum
,
MenuSplitTyeEnum
,
TriggerEnum
}
from
'
/@/enums/menuEnum
'
;
import
{
SIDE_BAR_MINI_WIDTH
,
SIDE_BAR_SHOW_TIT_MINI_WIDTH
}
from
'
/@/enums/appEnum
'
;
import
{
useDebounce
}
from
'
/@/hooks/core/useDebounce
'
;
import
LayoutMenu
from
'
./LayoutMenu
'
;
export
default
defineComponent
({
name
:
'
DefaultLayoutSideBar
'
,
...
...
@@ -111,13 +113,6 @@ export default defineComponent({
brokenRef
.
value
=
broken
;
}
onMounted
(()
=>
{
nextTick
(()
=>
{
const
[
exec
]
=
useDebounce
(
changeWrapWidth
,
20
);
exec
();
});
});
const
getDragBarStyle
=
computed
(()
=>
{
if
(
menuStore
.
getCollapsedState
)
{
return
{
left
:
`
${
unref
(
getMiniWidth
)}
px`
};
...
...
@@ -136,6 +131,13 @@ export default defineComponent({
return
trigger
!==
TriggerEnum
.
NONE
&&
trigger
===
TriggerEnum
.
FOOTER
;
});
onMounted
(()
=>
{
nextTick
(()
=>
{
const
[
exec
]
=
useDebounce
(
changeWrapWidth
,
20
);
exec
();
});
});
function
handleSiderClick
(
e
:
ChangeEvent
)
{
if
(
!
e
||
!
e
.
target
||
e
.
target
.
className
!==
'
basic-menu__content
'
)
return
;
...
...
src/layouts/default/LayoutBreadcrumb.tsx
→
src/layouts/default/
header/
LayoutBreadcrumb.tsx
浏览文件 @
43929174
文件已移动
src/layouts/default/LayoutHeader.tsx
→
src/layouts/default/
header/
LayoutHeader.tsx
浏览文件 @
43929174
import
{
defineComponent
,
unref
,
computed
,
ref
}
from
'
vue
'
;
import
{
Layout
,
Tooltip
,
Badge
}
from
'
ant-design-vue
'
;
import
Logo
from
'
/@/layouts/
Logo
.vue
'
;
import
Logo
from
'
/@/layouts/
logo/index
.vue
'
;
import
UserDropdown
from
'
./UserDropdown
'
;
import
LayoutMenu
from
'
.
/LayoutMenu
'
;
import
LayoutMenu
from
'
/@/layouts/default/menu
/LayoutMenu
'
;
import
LayoutBreadcrumb
from
'
./LayoutBreadcrumb
'
;
import
LockAction
from
'
./
actions/
LockActionItem
'
;
import
LayoutTrigger
from
'
./LayoutTrigger
'
;
import
NoticeAction
from
'
./
actions/
notice/NoticeActionItem.vue
'
;
import
LockAction
from
'
./LockActionItem
'
;
import
LayoutTrigger
from
'
.
.
/LayoutTrigger
'
;
import
NoticeAction
from
'
./notice/NoticeActionItem.vue
'
;
import
{
RedoOutlined
,
FullscreenExitOutlined
,
...
...
@@ -28,6 +28,8 @@ import { errorStore } from '/@/store/modules/error';
import
{
MenuModeEnum
,
MenuSplitTyeEnum
,
MenuTypeEnum
,
TriggerEnum
}
from
'
/@/enums/menuEnum
'
;
import
{
GITHUB_URL
}
from
'
/@/settings/siteSetting
'
;
import
'
./index.less
'
;
export
default
defineComponent
({
name
:
'
DefaultLayoutHeader
'
,
setup
()
{
...
...
src/layouts/default/
actions
/LockActionItem.less
→
src/layouts/default/
header
/LockActionItem.less
浏览文件 @
43929174
文件已移动
src/layouts/default/
actions
/LockActionItem.tsx
→
src/layouts/default/
header
/LockActionItem.tsx
浏览文件 @
43929174
文件已移动
src/layouts/default/UserDropdown.tsx
→
src/layouts/default/
header/
UserDropdown.tsx
浏览文件 @
43929174
...
...
@@ -39,8 +39,7 @@ export default defineComponent({
function
handleMenuClick
(
e
:
any
)
{
if
(
e
.
key
===
'
loginOut
'
)
{
handleLoginOut
();
}
if
(
e
.
key
===
'
doc
'
)
{
}
else
if
(
e
.
key
===
'
doc
'
)
{
openDoc
();
}
}
...
...
src/layouts/default/header/index.less
0 → 100644
浏览文件 @
43929174
@import (reference) '../../../design/index.less';
.layout-header {
display: flex;
height: @header-height;
padding: 0 20px 0 0;
line-height: @header-height;
color: @white;
background: @white;
align-items: center;
justify-content: space-between;
&__left {
display: flex;
flex-grow: 1;
align-items: center;
.layout-trigger {
padding: 4px 10px 0 16px;
cursor: pointer;
.anticon {
font-size: 17px;
}
&.light {
&:hover {
background: @header-light-bg-hover-color;
}
svg {
fill: #000;
}
}
&.dark {
&:hover {
background: @header-dark-bg-hover-color;
}
}
}
.layout-breadcrumb {
padding: 0 8px;
}
}
&__content {
display: flex;
flex-grow: 1;
align-items: center;
}
&__header--light {
background: @white;
border-bottom: 1px solid @header-light-bottom-border-color;
.layout-header__menu {
height: calc(@header-height - 1px);
.ant-menu-submenu {
height: @header-height;
line-height: @header-height;
}
}
.layout-header__logo {
height: @header-height;
color: @text-color-base;
img {
width: @logo-width;
height: @logo-width;
margin-right: 6px;
}
&:hover {
background: @header-light-bg-hover-color;
}
}
.layout-header__action {
&-item {
&:hover {
background: @header-light-bg-hover-color;
}
}
&-icon {
color: @text-color-base;
}
}
.layout-header__user-dropdown {
&:hover {
background: @header-light-bg-hover-color;
}
}
.user-dropdown {
&__name {
color: @text-color-base;
}
&__desc {
color: @header-light-desc-color;
}
}
}
&__header--dark {
background: @header-dark-bg-color;
.layout-header__action {
&-item {
&:hover {
background: @header-dark-bg-hover-color;
}
}
}
.layout-header__logo {
height: @header-height;
img {
width: @logo-width;
height: @logo-width;
margin-right: 10px;
}
&:hover {
background: @header-dark-bg-hover-color;
}
}
.layout-header__user-dropdown {
&:hover {
background: @header-dark-bg-hover-color;
}
}
.breadcrumb {
&__item:last-child .breadcrumb__inner,
&__item:last-child &__inner a,
&__item:last-child &__inner a:hover,
&__item:last-child &__inner:hover {
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
cursor: text;
}
&__inner,
&__separator {
color: @white;
}
}
}
&__logo {
padding: 0 10px;
}
&__bread {
display: none;
flex: 1;
}
&__action {
display: flex;
align-items: center;
&-item {
display: flex;
height: @header-height;
padding: 0 2px;
font-size: 1.2em;
cursor: pointer;
align-items: center;
}
&-icon {
padding: 0 8px;
}
}
&__menu {
margin-left: 20px;
overflow: hidden;
align-items: center;
}
&__user-dropdown {
height: @header-height;
padding: 0 0 0 10px;
}
.user-dropdown {
display: flex;
padding-right: 10px;
font-size: 12px;
cursor: pointer;
align-items: center;
img {
width: 26px;
height: 26px;
margin-right: 12px;
}
&__header {
border-radius: 50%;
}
}
}
src/layouts/default/
actions
/notice/NoticeActionItem.vue
→
src/layouts/default/
header
/notice/NoticeActionItem.vue
浏览文件 @
43929174
文件已移动
src/layouts/default/
actions
/notice/NoticeList.vue
→
src/layouts/default/
header
/notice/NoticeList.vue
浏览文件 @
43929174
文件已移动
src/layouts/default/
actions
/notice/data.ts
→
src/layouts/default/
header
/notice/data.ts
浏览文件 @
43929174
文件已移动
src/layouts/default/index.less
浏览文件 @
43929174
...
...
@@ -30,7 +30,6 @@
.layout-content {
position: relative;
// height: 100%;
&.fixed {
width: 1200px;
...
...
@@ -38,30 +37,6 @@
}
}
.layout-menu {
&__logo {
height: @header-height;
padding: 10px 4px 10px 10px;
img {
width: @logo-width;
height: @logo-width;
}
&.light {
.logo-title {
color: @text-color-base;
}
}
&.dark {
.logo-title {
color: @white;
}
}
}
}
.layout-sidebar {
background-size: 100% 100%;
...
...
@@ -99,312 +74,6 @@
}
}
}
&__tabs {
z-index: 10;
height: @multiple-height;
padding: 0;
line-height: @multiple-height;
background: @border-color-shallow-light;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
}
.setting-drawer {
.ant-drawer-body {
padding-top: 0;
background: @white;
}
&__footer {
display: flex;
flex-direction: column;
align-items: center;
}
&__cell-item {
display: flex;
justify-content: space-between;
margin: 16px 0;
}
&__theme-item {
display: flex;
flex-wrap: wrap;
margin: 16px 0;
span {
display: inline-block;
width: 20px;
height: 20px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
svg {
display: none;
}
&.active {
svg {
display: inline-block;
margin-left: 4px;
font-size: 0.8em;
fill: @white;
}
}
}
}
&__siderbar {
display: flex;
> div {
position: relative;
.check-icon {
position: absolute;
top: 40%;
left: 40%;
display: none;
color: @primary-color;
&.active {
display: inline-block;
}
}
}
img {
margin-right: 10px;
cursor: pointer;
}
}
}
.ant-layout-header:not(.default-layout__tabs) {
height: @header-height;
line-height: @header-height;
}
.ant-layout-header.default-layout__tabs {
height: @multiple-height + 2;
line-height: @multiple-height + 2;
background: @white;
}
.layout-header {
display: flex;
height: @header-height;
padding: 0 20px 0 0;
color: @white;
background: @white;
align-items: center;
justify-content: space-between;
&__content {
flex-grow: 1;
display: flex;
// justify-content: center;
align-items: center;
}
&__header--light {
background: @white;
border-bottom: 1px solid @header-light-bottom-border-color;
.layout-header__menu {
height: calc(@header-height - 1px);
.ant-menu-submenu {
height: @header-height;
line-height: @header-height;
}
}
.layout-header__logo {
height: @header-height;
color: @text-color-base;
img {
width: @logo-width;
height: @logo-width;
margin-right: 6px;
}
&:hover {
background: @header-light-bg-hover-color;
}
}
.layout-header__action {
&-item {
&:hover {
background: @header-light-bg-hover-color;
}
}
&-icon {
color: @text-color-base;
}
}
.layout-header__user-dropdown {
&:hover {
background: @header-light-bg-hover-color;
}
}
.user-dropdown {
&__name {
color: @text-color-base;
}
&__desc {
color: @header-light-desc-color;
}
}
}
&__header--dark {
background: @header-dark-bg-color;
.layout-header__action {
&-item {
&:hover {
background: @header-dark-bg-hover-color;
}
}
}
.layout-header__logo {
height: @header-height;
img {
width: @logo-width;
height: @logo-width;
margin-right: 10px;
}
&:hover {
background: @header-dark-bg-hover-color;
}
}
.layout-header__user-dropdown {
&:hover {
background: @header-dark-bg-hover-color;
}
}
.breadcrumb {
&__item:last-child .breadcrumb__inner,
&__item:last-child &__inner a,
&__item:last-child &__inner a:hover,
&__item:last-child &__inner:hover {
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
cursor: text;
}
&__inner,
&__separator {
color: @white;
}
}
}
&__logo {
padding: 0 10px;
}
&__bread {
flex: 1;
display: none;
}
&__action {
display: flex;
align-items: center;
&-item {
display: flex;
align-items: center;
height: @header-height;
padding: 0 2px;
font-size: 1.2em;
cursor: pointer;
}
&-icon {
padding: 0 8px;
}
}
&__menu {
margin-left: 20px;
overflow: hidden;
align-items: center;
}
&__user-dropdown {
height: @header-height;
padding: 0 0 0 10px;
}
}
.user-dropdown {
display: flex;
padding-right: 10px;
font-size: 12px;
cursor: pointer;
align-items: center;
img {
width: 26px;
height: 26px;
margin-right: 12px;
}
&__header {
border-radius: 50%;
}
}
.layout-header__left {
flex-grow: 1;
display: flex;
align-items: center;
.layout-trigger {
padding: 4px 10px 0 16px;
cursor: pointer;
.anticon {
font-size: 17px;
}
&.light {
&:hover {
background: @header-light-bg-hover-color;
}
svg {
fill: #000;
}
}
&.dark {
&:hover {
background: @header-dark-bg-hover-color;
}
}
}
.layout-breadcrumb {
padding: 0 8px;
}
}
.ant-layout-sider-trigger {
...
...
src/layouts/default/index.tsx
浏览文件 @
43929174
import
{
defineComponent
,
unref
,
computed
}
from
'
vue
'
;
import
{
Layout
,
BackTop
}
from
'
ant-design-vue
'
;
import
LayoutHeader
from
'
./LayoutHeader
'
;
import
LayoutHeader
from
'
./
header/
LayoutHeader
'
;
import
{
appStore
}
from
'
/@/store/modules/app
'
;
import
LayoutContent
from
'
./LayoutContent
'
;
import
LayoutSideBar
from
'
./LayoutSideBar
'
;
import
SettingBtn
from
'
./setting/index.vue
'
;
import
MultipleTabs
from
'
./multitabs/index
'
;
import
{
FullLoading
}
from
'
/@/components/Loading/index
'
;
import
{
MenuModeEnum
,
MenuTypeEnum
}
from
'
/@/enums/menuEnum
'
;
import
{
useFullContent
}
from
'
/@/hooks/web/useFullContent
'
;
...
...
@@ -63,9 +62,8 @@ export default defineComponent({
}
return
()
=>
{
const
{
get
PageLoading
,
get
LockInfo
}
=
appStore
;
const
{
getLockInfo
}
=
appStore
;
const
{
openPageLoading
,
useOpenBackTop
,
showSettingButton
,
multiTabsSetting
:
{
show
:
showTabs
},
...
...
@@ -84,14 +82,17 @@ export default defineComponent({
<
Layout
class
=
"default-layout relative"
>
{
()
=>
(
<>
{
/* lock page */
}
{
isLock
&&
<
LockPage
/>
}
{
/* back top */
}
{
useOpenBackTop
&&
<
BackTop
target
=
{
getTarget
}
/>
}
{
/* open setting drawer */
}
{
showSettingButton
&&
<
SettingBtn
/>
}
{
!
unref
(
getFullContent
)
&&
unref
(
isShowMixHeaderRef
)
&&
unref
(
showHeaderRef
)
&&
(
<
LayoutHeader
/>
)
}
{
showSettingButton
&&
<
SettingBtn
/>
}
<
Layout
>
{
()
=>
(
<>
...
...
@@ -103,22 +104,9 @@ export default defineComponent({
!
unref
(
isShowMixHeaderRef
)
&&
unref
(
showHeaderRef
)
&&
<
LayoutHeader
/>
}
{
showTabs
&&
!
unref
(
getFullContent
)
&&
(
<
Layout
.
Header
class
=
{
`default-layout__tabs`
}
>
{
()
=>
<
MultipleTabs
/>
}
</
Layout
.
Header
>
)
}
{
useOpenBackTop
&&
<
BackTop
target
=
{
getTarget
}
/>
}
<
div
class
=
{
[
`default-layout__main`
,
fixedHeaderCls
]
}
>
{
openPageLoading
&&
(
<
FullLoading
class
=
{
[
`default-layout__loading`
,
!
getPageLoading
&&
'
hidden
'
]
}
/>
)
}
<
LayoutContent
/>
</
div
>
{
showTabs
&&
!
unref
(
getFullContent
)
&&
<
MultipleTabs
/>
}
<
LayoutContent
class
=
{
fixedHeaderCls
}
/>
</>
)
}
</
Layout
>
...
...
src/layouts/default/LayoutMenu.tsx
→
src/layouts/default/
menu/
LayoutMenu.tsx
浏览文件 @
43929174
...
...
@@ -3,7 +3,7 @@ import type { Menu } from '/@/router/types';
import
{
computed
,
defineComponent
,
unref
,
ref
,
onMounted
,
watch
}
from
'
vue
'
;
import
{
BasicMenu
}
from
'
/@/components/Menu/index
'
;
import
Logo
from
'
/@/layouts/
Logo
.vue
'
;
import
Logo
from
'
/@/layouts/
logo/index
.vue
'
;
import
{
MenuModeEnum
,
MenuSplitTyeEnum
,
MenuTypeEnum
}
from
'
/@/enums/menuEnum
'
;
...
...
@@ -22,10 +22,8 @@ import {
import
{
useRouter
}
from
'
vue-router
'
;
import
{
useThrottle
}
from
'
/@/hooks/core/useThrottle
'
;
import
{
permissionStore
}
from
'
/@/store/modules/permission
'
;
// import { useTabs } from '/@/hooks/web/useTabs';
// import { PageEnum } from '/@/enums/pageEnum';
// import
import
'
./index.less
'
;
export
default
defineComponent
({
name
:
'
DefaultLayoutMenu
'
,
props
:
{
...
...
src/layouts/default/menu/index.less
0 → 100644
浏览文件 @
43929174
@import (reference) '../../../design/index.less';
.layout-menu {
&__logo {
height: @header-height;
padding: 10px 4px 10px 10px;
img {
width: @logo-width;
height: @logo-width;
}
&.light {
.logo-title {
color: @text-color-base;
}
}
&.dark {
.logo-title {
color: @white;
}
}
}
}
src/layouts/default/multitabs/TabContent.tsx
浏览文件 @
43929174
import
{
TabItem
,
tabStore
}
from
'
/@/store/modules/tab
'
;
import
{
defineComponent
,
unref
,
computed
}
from
'
vue
'
;
import
type
{
PropType
}
from
'
vue
'
;
import
{
TabItem
,
tabStore
}
from
'
/@/store/modules/tab
'
;
import
{
getScaleAction
,
TabContentProps
}
from
'
./tab.data
'
;
import
{
defineComponent
,
unref
,
computed
}
from
'
vue
'
;
import
{
Dropdown
}
from
'
/@/components/Dropdown/index
'
;
import
Icon
from
'
/@/components/Icon/index
'
;
import
{
RightOutlined
}
from
'
@ant-design/icons-vue
'
;
...
...
src/layouts/default/multitabs/index.less
浏览文件 @
43929174
@import (reference) '../../../design/index.less';
.multiple-tabs {
z-index: 10;
height: @multiple-height+2;
padding: 0 0 2px 0;
line-height: @multiple-height+2;
background: @white;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
.ant-tabs-small {
height: @multiple-height;
}
...
...
@@ -63,8 +70,8 @@
}
svg {
fill: @white;
width: 0.7em;
fill: @white;
}
}
}
...
...
src/layouts/default/multitabs/index.tsx
浏览文件 @
43929174
...
...
@@ -34,20 +34,7 @@ export default defineComponent({
let
isAddAffix
=
false
;
const
go
=
useGo
();
const
{
currentRoute
}
=
useRouter
();
const
{
// addTab,
activeKeyRef
,
}
=
useTabs
();
// onMounted(() => {
// const route = unref(currentRoute);
// addTab(unref(currentRoute).path as PageEnum, false, {
// query: route.query,
// params: route.params,
// });
// });
// 当前激活tab
// const activeKeyRef = ref<string>('');
const
{
activeKeyRef
}
=
useTabs
();
// 当前tab列表
const
getTabsState
=
computed
(()
=>
{
...
...
@@ -67,21 +54,9 @@ export default defineComponent({
if
(
activeKeyRef
.
value
!==
(
fullPath
||
rPath
))
{
activeKeyRef
.
value
=
fullPath
||
rPath
;
}
// 监听路由的话虽然可以,但是路由切换的时间会造成卡顿现象?
// 使用useTab的addTab的话,当用户手动调转,需要自行调用addTab
tabStore
.
commitAddTab
((
unref
(
currentRoute
)
as
unknown
)
as
AppRouteRecordRaw
);
// const { affix } = currentRoute.value.meta || {};
// if (affix) return;
// const hasInTab = tabStore.getTabsState.some(
// (item) => item.fullPath === currentRoute.value.fullPath
// );
// if (!hasInTab) {
// tabStore.commitAddTab((unref(currentRoute) as unknown) as AppRouteRecordRaw);
// }
},
{
// flush: 'post',
immediate
:
true
,
}
);
...
...
src/layouts/default/setting/SettingDrawer.tsx
浏览文件 @
43929174
...
...
@@ -226,7 +226,13 @@ export default defineComponent({
def
:
collapsedShowTitle
,
disabled
:
!
unref
(
getShowMenuRef
)
||
!
collapsed
,
}),
renderSwitchItem
(
'
固定header
'
,
{
handler
:
(
e
)
=>
{
baseHandler
(
HandlerEnum
.
HEADER_FIXED
,
e
);
},
def
:
fixed
,
disabled
:
!
unref
(
getShowHeaderRef
),
}),
renderSelectItem
(
'
顶部菜单布局
'
,
{
handler
:
(
e
)
=>
{
baseHandler
(
HandlerEnum
.
MENU_TOP_ALIGN
,
e
);
...
...
@@ -242,13 +248,7 @@ export default defineComponent({
def
:
trigger
,
options
:
menuTriggerOptions
,
}),
renderSwitchItem
(
'
固定header
'
,
{
handler
:
(
e
)
=>
{
baseHandler
(
HandlerEnum
.
HEADER_FIXED
,
e
);
},
def
:
fixed
,
disabled
:
!
unref
(
getShowHeaderRef
),
}),
renderSelectItem
(
'
内容区域宽度
'
,
{
handler
:
(
e
)
=>
{
baseHandler
(
HandlerEnum
.
CONTENT_MODE
,
e
);
...
...
src/layouts/default/setting/index.less
0 → 100644
浏览文件 @
43929174
.setting-drawer {
.ant-drawer-body {
padding-top: 0;
background: @white;
}
&__footer {
display: flex;
flex-direction: column;
align-items: center;
}
&__cell-item {
display: flex;
justify-content: space-between;
margin: 16px 0;
}
&__theme-item {
display: flex;
flex-wrap: wrap;
margin: 16px 0;
span {
display: inline-block;
width: 20px;
height: 20px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
svg {
display: none;
}
&.active {
svg {
display: inline-block;
margin-left: 4px;
font-size: 0.8em;
fill: @white;
}
}
}
}
&__siderbar {
display: flex;
> div {
position: relative;
.check-icon {
position: absolute;
top: 40%;
left: 40%;
display: none;
color: @primary-color;
&.active {
display: inline-block;
}
}
}
img {
margin-right: 10px;
cursor: pointer;
}
}
}
src/layouts/default/setting/index.vue
浏览文件 @
43929174
...
...
@@ -23,8 +23,9 @@
},
});
</
script
>
<
style
lang=
"less"
scoped
>
<
style
lang=
"less"
>
@import (reference) '../../../design/index.less';
@import './index.less';
.setting-button {
position: absolute;
...
...
src/layouts/
Logo
.vue
→
src/layouts/
logo/index
.vue
浏览文件 @
43929174
...
...
@@ -12,10 +12,10 @@
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
import
{
PageEnum
}
from
'
/@/enums/pageEnum
'
;
import
{
MenuTypeEnum
}
from
'
..
/enums/menuEnum
'
;
import
{
MenuTypeEnum
}
from
'
/@
/enums/menuEnum
'
;
import
{
menuStore
}
from
'
..
/store/modules/menu
'
;
import
{
appStore
}
from
'
..
/store/modules/app
'
;
import
{
menuStore
}
from
'
/@
/store/modules/menu
'
;
import
{
appStore
}
from
'
/@
/store/modules/app
'
;
export
default
defineComponent
({
name
:
'
Logo
'
,
...
...
@@ -72,7 +72,7 @@
});
</
script
>
<
style
lang=
"less"
scoped
>
@import (reference) '../design/index.less';
@import (reference) '../
../
design/index.less';
.app-logo {
display: flex;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录