Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一臭打代码的 aka 潘先生です
vue-vben-admin
提交
2f12556d
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,发现更多精彩内容 >>
提交
2f12556d
编写于
10月 19, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix the top menu adaptive failure
上级
5737e478
变更
7
显示空白变更内容
内联
并排
Showing
7 changed file
with
70 addition
and
22 deletion
+70
-22
src/App.vue
src/App.vue
+1
-0
src/components/Menu/src/BasicMenu.tsx
src/components/Menu/src/BasicMenu.tsx
+2
-1
src/components/Menu/src/useOpenKeys.ts
src/components/Menu/src/useOpenKeys.ts
+19
-13
src/components/Modal/src/BasicModal.tsx
src/components/Modal/src/BasicModal.tsx
+5
-1
src/hooks/event/useWindowSize.ts
src/hooks/event/useWindowSize.ts
+6
-1
src/layouts/default/LayoutHeader.tsx
src/layouts/default/LayoutHeader.tsx
+34
-3
src/layouts/default/index.less
src/layouts/default/index.less
+3
-3
未找到文件。
src/App.vue
浏览文件 @
2f12556d
...
...
@@ -18,6 +18,7 @@
import
{
useSetting
}
from
'
/@/hooks/core/useSetting
'
;
moment
.
locale
(
'
zh-cn
'
);
export
default
defineComponent
({
name
:
'
App
'
,
components
:
{
ConfigProvider
},
...
...
src/components/Menu/src/BasicMenu.tsx
浏览文件 @
2f12556d
...
...
@@ -45,7 +45,8 @@ export default defineComponent({
menuState
,
toRef
(
props
,
'
items
'
),
toRef
(
props
,
'
flatItems
'
),
toRef
(
props
,
'
isAppMenu
'
)
toRef
(
props
,
'
isAppMenu
'
),
toRef
(
props
,
'
mode
'
)
);
const
getOpenKeys
=
computed
(()
=>
{
...
...
src/components/Menu/src/useOpenKeys.ts
浏览文件 @
2f12556d
import
{
MenuModeEnum
}
from
'
/@/enums/menuEnum
'
;
import
type
{
Menu
as
MenuType
}
from
'
/@/router/types
'
;
import
type
{
MenuState
}
from
'
./types
'
;
import
type
{
Ref
}
from
'
vue
'
;
...
...
@@ -10,7 +11,8 @@ export function useOpenKeys(
menuState
:
MenuState
,
menus
:
Ref
<
MenuType
[]
>
,
flatMenusRef
:
Ref
<
MenuType
[]
>
,
isAppMenu
:
Ref
<
boolean
>
isAppMenu
:
Ref
<
boolean
>
,
mode
:
Ref
<
MenuModeEnum
>
)
{
/**
* @description:设置展开
...
...
@@ -28,6 +30,9 @@ export function useOpenKeys(
}
function
handleOpenChange
(
openKeys
:
string
[])
{
if
(
unref
(
mode
)
===
MenuModeEnum
.
HORIZONTAL
)
{
menuState
.
openKeys
=
openKeys
;
}
else
{
const
rootSubMenuKeys
:
string
[]
=
[];
for
(
const
{
children
,
path
}
of
unref
(
menus
))
{
if
(
children
&&
children
.
length
>
0
)
{
...
...
@@ -45,5 +50,6 @@ export function useOpenKeys(
menuState
.
collapsedOpenKeys
=
openKeys
;
}
}
}
return
{
setOpenKeys
,
resetKeys
,
handleOpenChange
};
}
src/components/Modal/src/BasicModal.tsx
浏览文件 @
2f12556d
...
...
@@ -217,7 +217,11 @@ export default defineComponent({
const
uuid
=
buildUUID
();
emit
(
'
register
'
,
modalMethods
,
uuid
);
return
()
=>
(
<
Modal
onCancel
=
{
handleCancel
}
{
...{
...
attrs
,
...
props
,
...
unref
(
getProps
)
}
}
>
<
Modal
onCancel
=
{
handleCancel
}
{
...{
...
attrs
,
...
props
,
...
unref
(
getProps
)
}
}
getContainer
=
{
()
=>
document
.
querySelector
(
'
.default-layout__main
'
)
}
>
{
{
...
extendSlots
(
slots
,
[
'
default
'
]),
default
:
()
=>
renderContent
(),
...
...
src/hooks/event/useWindowSize.ts
浏览文件 @
2f12556d
...
...
@@ -4,6 +4,7 @@ import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper';
import
{
ref
}
from
'
vue
'
;
import
{
useDebounce
}
from
'
/@/hooks/core/useDebounce
'
;
import
{
CancelFn
}
from
'
../core/types
'
;
interface
WindowSizeOptions
{
once
?:
boolean
;
...
...
@@ -11,7 +12,7 @@ interface WindowSizeOptions {
listenerOptions
?:
AddEventListenerOptions
|
boolean
;
}
export
function
useWindowSizeFn
<
T
>
(
fn
:
Fn
<
T
>
,
wait
=
150
,
options
?:
WindowSizeOptions
):
void
{
export
function
useWindowSizeFn
<
T
>
(
fn
:
Fn
<
T
>
,
wait
=
150
,
options
?:
WindowSizeOptions
):
CancelFn
{
let
handler
=
()
=>
{
fn
();
};
...
...
@@ -19,6 +20,9 @@ export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOp
handler
=
handleSize
;
tryOnMounted
(()
=>
{
if
(
options
&&
options
.
immediate
)
{
handler
();
}
window
.
addEventListener
(
'
resize
'
,
handler
);
});
...
...
@@ -26,6 +30,7 @@ export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOp
window
.
removeEventListener
(
'
resize
'
,
handler
);
cancel
();
});
return
cancel
;
}
export
const
useWindowSize
=
(
wait
=
150
,
options
?:
WindowSizeOptions
)
=>
{
...
...
src/layouts/default/LayoutHeader.tsx
浏览文件 @
2f12556d
import
{
defineComponent
,
unref
,
computed
}
from
'
vue
'
;
import
{
defineComponent
,
unref
,
computed
,
ref
}
from
'
vue
'
;
import
{
Layout
,
Tooltip
,
Badge
}
from
'
ant-design-vue
'
;
import
Logo
from
'
/@/layouts/Logo.vue
'
;
import
UserDropdown
from
'
./UserDropdown
'
;
...
...
@@ -21,17 +21,44 @@ import LockAction from './actions/LockActionItem';
import
{
useModal
}
from
'
/@/components/Modal/index
'
;
import
{
errorStore
}
from
'
/@/store/modules/error
'
;
import
{
useGo
}
from
'
/@/hooks/web/usePage
'
;
import
{
useWindowSizeFn
}
from
'
/@/hooks/event/useWindowSize
'
;
export
default
defineComponent
({
name
:
'
DefaultLayoutHeader
'
,
setup
()
{
const
widthRef
=
ref
(
200
);
const
{
refreshPage
}
=
useTabs
();
const
[
register
,
{
openModal
}]
=
useModal
();
const
{
toggleFullscreen
,
isFullscreenRef
}
=
useFullscreen
();
const
go
=
useGo
();
const
getProjectConfigRef
=
computed
(()
=>
{
return
appStore
.
getProjectConfig
;
});
const
showTopMenu
=
computed
(()
=>
{
const
getProjectConfig
=
unref
(
getProjectConfigRef
);
const
{
menuSetting
:
{
mode
,
split
:
splitMenu
},
}
=
getProjectConfig
;
return
mode
===
MenuModeEnum
.
HORIZONTAL
||
splitMenu
;
});
let
logoEl
:
Element
|
null
;
useWindowSizeFn
(
()
=>
{
if
(
!
unref
(
showTopMenu
))
return
;
let
width
=
0
;
if
(
!
logoEl
)
{
logoEl
=
document
.
querySelector
(
'
.layout-header__logo
'
);
}
if
(
logoEl
)
{
width
+=
logoEl
.
clientWidth
;
}
widthRef
.
value
=
width
+
60
;
},
200
,
{
immediate
:
true
}
);
function
goToGithub
()
{
window
.
open
(
GITHUB_URL
,
'
__blank
'
);
...
...
@@ -64,6 +91,7 @@ export default defineComponent({
}
=
getProjectConfig
;
const
isSidebarType
=
menuType
===
MenuTypeEnum
.
SIDEBAR
;
const
width
=
unref
(
widthRef
);
return
(
<
Layout
.
Header
class
=
{
[
'
layout-header
'
,
'
flex p-0 px-4
'
,
unref
(
headerClass
)]
}
>
{
()
=>
(
...
...
@@ -74,8 +102,11 @@ export default defineComponent({
{
mode
!==
MenuModeEnum
.
HORIZONTAL
&&
showBreadCrumb
&&
!
splitMenu
&&
(
<
LayoutBreadcrumb
/>
)
}
{
(
mode
===
MenuModeEnum
.
HORIZONTAL
||
splitMenu
)
&&
(
<
div
class
=
{
[
`layout-header__menu `
,
`justify-
${
topMenuAlign
}
`
]
}
>
{
unref
(
showTopMenu
)
&&
(
<
div
class
=
{
[
`layout-header__menu `
,
`justify-
${
topMenuAlign
}
`
]
}
style
=
{
{
width
:
`calc(100% -
${
unref
(
width
)}
px)`
}
}
>
<
LayoutMenu
theme
=
{
headerTheme
}
splitType
=
{
splitMenu
?
MenuSplitTyeEnum
.
TOP
:
MenuSplitTyeEnum
.
NONE
}
...
...
src/layouts/default/index.less
浏览文件 @
2f12556d
...
...
@@ -206,7 +206,7 @@
&__content {
flex-grow: 1;
display: flex;
justify-content: center;
//
justify-content: center;
align-items: center;
}
...
...
@@ -346,11 +346,11 @@
}
&__menu {
display: flex;
//
display: flex;
margin-left: 20px;
overflow: hidden;
align-items: center;
flex-grow: 1;
//
flex-grow: 1;
}
&__user-dropdown {
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录