Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ChenSun1
vue-vben-admin
提交
f69aaeab
V
vue-vben-admin
项目概览
ChenSun1
/
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,发现更多精彩内容 >>
提交
f69aaeab
编写于
12月 22, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: fix layout style
上级
bd7b53f1
变更
14
隐藏空白更改
内联
并排
Showing
14 changed file
with
123 addition
and
10 deletion
+123
-10
src/components/Application/src/AppLogo.vue
src/components/Application/src/AppLogo.vue
+11
-1
src/components/Menu/src/BasicMenu.vue
src/components/Menu/src/BasicMenu.vue
+6
-2
src/components/Menu/src/index.less
src/components/Menu/src/index.less
+71
-0
src/components/Menu/src/props.ts
src/components/Menu/src/props.ts
+1
-1
src/hooks/setting/useMenuSetting.ts
src/hooks/setting/useMenuSetting.ts
+5
-1
src/layouts/default/index.vue
src/layouts/default/index.vue
+5
-1
src/layouts/default/menu/index.tsx
src/layouts/default/menu/index.tsx
+3
-0
src/layouts/default/setting/SettingDrawer.tsx
src/layouts/default/setting/SettingDrawer.tsx
+7
-0
src/layouts/default/setting/handler.ts
src/layouts/default/setting/handler.ts
+5
-1
src/layouts/default/sider/MixSider.vue
src/layouts/default/sider/MixSider.vue
+4
-3
src/locales/lang/en/layout/setting.ts
src/locales/lang/en/layout/setting.ts
+1
-0
src/locales/lang/zh_CN/layout/setting.ts
src/locales/lang/zh_CN/layout/setting.ts
+1
-0
src/settings/projectSetting.ts
src/settings/projectSetting.ts
+2
-0
src/types/config.d.ts
src/types/config.d.ts
+1
-0
未找到文件。
src/components/Application/src/AppLogo.vue
浏览文件 @
f69aaeab
...
...
@@ -3,7 +3,11 @@
* @Description: logo component
-->
<
template
>
<div
class=
"anticon"
:class=
"[prefixCls, theme]"
@
click=
"handleGoHome"
>
<div
class=
"anticon"
:class=
"[prefixCls, theme,
{ 'collapsed-show-title': getCollapsedShowTitle }]"
@click="handleGoHome"
>
<img
src=
"/@/assets/images/logo.png"
/>
<div
class=
"ml-2 ellipsis"
:class=
"[`$
{prefixCls}__title`]" v-show="showTitle">
{{
title
}}
...
...
@@ -35,6 +39,7 @@
},
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'
app-logo
'
);
const
{
getCollapsedShowTitle
}
=
useMenuSetting
();
const
{
title
}
=
useGlobSetting
();
...
...
@@ -48,6 +53,7 @@
handleGoHome
,
title
,
prefixCls
,
getCollapsedShowTitle
,
};
},
});
...
...
@@ -67,6 +73,10 @@
border-bottom: 1px solid @border-color-base;
}
&.collapsed-show-title {
padding-left: 20px;
}
&.light &__title {
color: @primary-color;
}
...
...
src/components/Menu/src/BasicMenu.vue
浏览文件 @
f69aaeab
...
...
@@ -17,7 +17,7 @@
:item=
"item"
:theme=
"theme"
:level=
"1"
:showTitle=
"
!getCollapsed
"
:showTitle=
"
showTitle
"
:isHorizontal=
"isHorizontal"
/>
</
template
>
...
...
@@ -95,12 +95,16 @@
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
;
...
...
@@ -164,7 +168,7 @@
getMenuClass
,
handleOpenChange
,
getOpenKeys
,
getCollapsed
,
showTitle
,
...
toRefs
(
menuState
),
};
},
...
...
src/components/Menu/src/index.less
浏览文件 @
f69aaeab
...
...
@@ -48,6 +48,63 @@
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;
justify-content: center !important;
&.ant-menu-item {
display: flex;
align-items: center;
height: 60px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
line-height: 60px !important;
> span {
margin-top: 10px;
}
}
}
& > 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
...
...
@@ -62,6 +119,7 @@
.@{basic-menu-content-prefix-cls}-wrapper {
width: 100%;
margin-top: 4px;
&__icon {
vertical-align: text-top;
...
...
@@ -181,7 +239,20 @@
&.ant-menu-inline-collapsed {
.ant-menu-submenu-selected,
.ant-menu-item-selected {
position: relative;
font-weight: 500;
color: @white;
background: @sider-dark-darken-bg-color !important;
&::before {
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: @primary-color;
content: '';
}
}
}
}
...
...
src/components/Menu/src/props.ts
浏览文件 @
f69aaeab
...
...
@@ -9,7 +9,7 @@ export const basicProps = {
type
:
Array
as
PropType
<
Menu
[]
>
,
default
:
()
=>
[],
},
collapsedShowTitle
:
propTypes
.
bool
,
// 最好是4 倍数
inlineIndent
:
propTypes
.
number
.
def
(
20
),
// 菜单组件的mode属性
...
...
src/hooks/setting/useMenuSetting.ts
浏览文件 @
f69aaeab
...
...
@@ -45,6 +45,8 @@ const getIsSidebarType = computed(() => unref(getMenuType) === MenuTypeEnum.SIDE
const
getIsTopMenu
=
computed
(()
=>
unref
(
getMenuType
)
===
MenuTypeEnum
.
TOP_MENU
);
const
getCollapsedShowTitle
=
computed
(()
=>
unref
(
getMenuSetting
).
collapsedShowTitle
);
const
getShowTopMenu
=
computed
(()
=>
{
return
unref
(
getMenuMode
)
===
MenuModeEnum
.
HORIZONTAL
||
unref
(
getSplit
);
});
...
...
@@ -74,7 +76,8 @@ const getRealWidth = computed(() => {
});
const
getMiniWidthNumber
=
computed
(()
=>
{
return
SIDE_BAR_MINI_WIDTH
;
const
{
collapsedShowTitle
}
=
unref
(
getMenuSetting
);
return
collapsedShowTitle
?
SIDE_BAR_SHOW_TIT_MINI_WIDTH
:
SIDE_BAR_MINI_WIDTH
;
});
const
getCalcContentWidth
=
computed
(()
=>
{
...
...
@@ -128,6 +131,7 @@ export function useMenuSetting() {
getSplit
,
getMenuTheme
,
getCanDrag
,
getCollapsedShowTitle
,
getIsHorizontal
,
getIsSidebarType
,
getAccordion
,
...
...
src/layouts/default/index.vue
浏览文件 @
f69aaeab
...
...
@@ -2,7 +2,11 @@
<Layout
:class=
"prefixCls"
>
<LayoutFeatures
/>
<LayoutHeader
fixed
v-if=
"getShowFullHeaderRef"
/>
<Layout
class=
"ant-layout-has-sider"
>
<Layout
:class=
"
{
'ant-layout-has-sider': getIsMixSidebar,
}"
>
<LayoutSideBar
v-if=
"getShowSidebar || getIsMobile"
/>
<Layout
:class=
"`$
{prefixCls}__main`">
<LayoutMultipleHeader
/>
...
...
src/layouts/default/menu/index.tsx
浏览文件 @
f69aaeab
...
...
@@ -45,6 +45,7 @@ export default defineComponent({
getMenuType
,
getMenuTheme
,
getCollapsed
,
getCollapsedShowTitle
,
getAccordion
,
getIsHorizontal
,
getIsSidebarType
,
...
...
@@ -130,6 +131,8 @@ export default defineComponent({
beforeClickFn
=
{
beforeMenuClickFn
}
isHorizontal
=
{
props
.
isHorizontal
}
type
=
{
unref
(
getMenuType
)
}
collapsedShowTitle
=
{
unref
(
getCollapsedShowTitle
)
}
showLogo
=
{
unref
(
getIsShowLogo
)
}
mode
=
{
unref
(
getComputedMenuMode
)
}
theme
=
{
unref
(
getComputedMenuTheme
)
}
items
=
{
unref
(
menusRef
)
}
...
...
src/layouts/default/setting/SettingDrawer.tsx
浏览文件 @
f69aaeab
...
...
@@ -61,6 +61,7 @@ export default defineComponent({
getShowMenu
,
getMenuType
,
getTrigger
,
getCollapsedShowTitle
,
getMenuFixed
,
getCollapsed
,
getCanDrag
,
...
...
@@ -176,6 +177,12 @@ export default defineComponent({
def
=
{
unref
(
getCollapsed
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
unref
(
getIsMixSidebar
)
}
/>
<
SwitchItem
title
=
{
t
(
'
layout.setting.collapseMenuDisplayName
'
)
}
event
=
{
HandlerEnum
.
MENU_COLLAPSED_SHOW_TITLE
}
def
=
{
unref
(
getCollapsedShowTitle
)
}
disabled
=
{
!
unref
(
getShowMenuRef
)
||
!
unref
(
getCollapsed
)
}
/>
<
SwitchItem
title
=
{
t
(
'
layout.setting.fixedHeader
'
)
}
...
...
src/layouts/default/setting/handler.ts
浏览文件 @
f69aaeab
...
...
@@ -51,12 +51,16 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
case
HandlerEnum
.
MENU_SHOW_SIDEBAR
:
return
{
menuSetting
:
{
show
:
value
}
};
case
HandlerEnum
.
MENU_COLLAPSED_SHOW_TITLE
:
return
{
menuSetting
:
{
collapsedShowTitle
:
value
}
};
case
HandlerEnum
.
MENU_THEME
:
updateSidebarBgColor
(
value
);
return
{
menuSetting
:
{
bgColor
:
value
}
};
case
HandlerEnum
.
MENU_SPLIT
:
return
{
menuSetting
:
{
split
:
value
}
};
return
{
menuSetting
:
{
split
:
value
,
collapsedShowTitle
:
true
}
};
case
HandlerEnum
.
MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE
:
return
{
menuSetting
:
{
closeMixSidebarOnChange
:
value
}
};
...
...
src/layouts/default/sider/MixSider.vue
浏览文件 @
f69aaeab
...
...
@@ -267,15 +267,16 @@
}
}
}
@border-color: @sider-dark-lighten-1-bg-color;
&.dark {
&.open {
.@{prefix-cls}-logo {
border-bottom: 1px solid
rgb(114 114 114)
;
border-bottom: 1px solid
@border-color
;
}
> .scroll-container {
border-right: 1px solid
rgb(114 114 114)
;
border-right: 1px solid
@border-color
;
}
}
.@{prefix-cls}-menu-list {
...
...
@@ -284,7 +285,7 @@
&__title {
color: @white;
border-bottom: none;
border-bottom: 1px solid
rgb(114 114 114)
;
border-bottom: 1px solid
@border-color
;
}
}
}
...
...
src/locales/lang/en/layout/setting.ts
浏览文件 @
f69aaeab
...
...
@@ -45,6 +45,7 @@ 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/zh_CN/layout/setting.ts
浏览文件 @
f69aaeab
...
...
@@ -44,6 +44,7 @@ export default {
menuSearch
:
'
菜单搜索
'
,
menuAccordion
:
'
侧边菜单手风琴模式
'
,
menuCollapse
:
'
折叠菜单
'
,
collapseMenuDisplayName
:
'
折叠菜单显示名称
'
,
topMenuLayout
:
'
顶部菜单布局
'
,
menuCollapseButton
:
'
菜单折叠按钮
'
,
contentMode
:
'
内容区域宽度
'
,
...
...
src/settings/projectSetting.ts
浏览文件 @
f69aaeab
...
...
@@ -81,6 +81,8 @@ 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
:
true
,
...
...
src/types/config.d.ts
浏览文件 @
f69aaeab
...
...
@@ -19,6 +19,7 @@ export interface MenuSetting {
trigger
:
TriggerEnum
;
accordion
:
boolean
;
closeMixSidebarOnChange
:
boolean
;
collapsedShowTitle
:
boolean
;
}
export
interface
MultiTabsSetting
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录