Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ChenSun1
vue-vben-admin
提交
66acb21e
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,体验更适合开发者的 AI 搜索 >>
提交
66acb21e
编写于
10月 21, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf: perf menu mini style
上级
8b3a4d37
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
84 addition
and
27 deletion
+84
-27
src/components/Menu/src/BasicMenu.tsx
src/components/Menu/src/BasicMenu.tsx
+10
-8
src/components/Menu/src/index.less
src/components/Menu/src/index.less
+28
-11
src/components/Menu/src/props.ts
src/components/Menu/src/props.ts
+1
-1
src/enums/appEnum.ts
src/enums/appEnum.ts
+3
-0
src/hooks/core/useSetting.ts
src/hooks/core/useSetting.ts
+7
-0
src/layouts/default/LayoutSideBar.tsx
src/layouts/default/LayoutSideBar.tsx
+14
-5
src/layouts/default/index.less
src/layouts/default/index.less
+14
-0
src/store/modules/permission.ts
src/store/modules/permission.ts
+2
-1
src/utils/log.ts
src/utils/log.ts
+4
-0
vite.config.ts
vite.config.ts
+1
-1
未找到文件。
src/components/Menu/src/BasicMenu.tsx
浏览文件 @
66acb21e
...
...
@@ -145,6 +145,15 @@ export default defineComponent({
resetKeys
();
}
}
const
showTitle
=
computed
(()
=>
{
if
(
!
props
.
isAppMenu
)
return
true
;
if
(
!
props
.
collapsedShowTitle
)
{
return
!
menuStore
.
getCollapsedState
;
}
return
true
;
});
// render menu item
function
renderMenuItem
(
menuList
?:
MenuType
[],
index
=
1
)
{
if
(
!
menuList
)
{
...
...
@@ -153,13 +162,6 @@ export default defineComponent({
const
{
appendClass
}
=
props
;
const
levelCls
=
`basic-menu-item__level
${
index
}
${
menuState
.
theme
}
`
;
const
showTitle
=
computed
(()
=>
{
if
(
!
props
.
isAppMenu
)
return
true
;
if
(
!
props
.
collapsedShowTitle
)
{
return
!
menuStore
.
getCollapsedState
;
}
return
true
;
});
return
menuList
.
map
((
menu
)
=>
{
if
(
!
menu
)
{
return
null
;
...
...
@@ -249,7 +251,7 @@ export default defineComponent({
return
mode
===
MenuModeEnum
.
HORIZONTAL
?
(
renderMenu
()
)
:
(
<
section
class
=
{
`basic-menu-wrap`
}
>
<
section
class
=
{
[
`basic-menu-wrap`
,
!
unref
(
showTitle
)
&&
'
hide-title
'
]
}
>
{
getSlot
(
slots
,
'
header
'
)
}
<
SearchInput
class
=
{
!
props
.
search
?
'
hidden
'
:
''
}
...
...
src/components/Menu/src/index.less
浏览文件 @
66acb21e
@import (reference) '../../../design/index.less';
.active-style() {
color: @white;
background: linear-gradient(
118deg,
rgba(@primary-color, 0.7),
rgba(@primary-color, 1)
) !important;
border-radius: 2px;
box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7);
}
.active-menu-style() {
.ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
background: linear-gradient(
118deg,
rgba(@primary-color, 0.7),
rgba(@primary-color, 1)
) !important;
border-radius: 2px;
box-shadow: 0 0 4px 1px rgba(@primary-color, 0.7);
.active-style();
}
}
.basic-menu {
width: 100%;
&.collapsed-show-title.ant-menu-inline-collapsed {
.basic-menu-item__level1 {
padding: 2px 0;
}
& > li > .ant-menu-submenu-title {
display: flex;
margin-top: 12px;
font-size: 12px;
flex-direction: column;
line-height: 24px;
}
& > li[role='menuitem']:not(.ant-menu-submenu) {
...
...
@@ -106,7 +118,7 @@
.ant-menu-submenu-open,
.ant-menu-item-selected,
.ant-menu-submenu-selected {
color: @
primary-color
;
color: @
white !important
;
border-bottom: 3px solid @primary-color;
}
...
...
@@ -115,7 +127,7 @@
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
color: @
primary-color
;
color: @
white !important
;
border-bottom: 3px solid @primary-color;
}
...
...
@@ -194,12 +206,12 @@
}
.basic-menu-item__level1 {
margin-bottom: 0;
> .ant-menu-sub > li {
background-color: @sub-menu-item-dark-bg-color;
}
margin-bottom: 0;
&.top-active-menu {
color: @white;
background: @top-menu-active-bg-color;
...
...
@@ -236,6 +248,11 @@
}
&.ant-menu-inline-collapsed {
.ant-menu-submenu-selected,
.ant-menu-item-selected {
.active-style();
}
.ant-menu-item-selected {
background: unset !important;
box-shadow: none;
...
...
src/components/Menu/src/props.ts
浏览文件 @
66acb21e
...
...
@@ -31,7 +31,7 @@ export const basicProps = {
},
// 菜单组件的mode属性
mode
:
{
type
:
String
as
PropType
<
string
>
,
type
:
String
as
PropType
<
MenuModeEnum
>
,
default
:
MenuModeEnum
.
INLINE
,
},
type
:
{
...
...
src/enums/appEnum.ts
浏览文件 @
66acb21e
export
const
SIDE_BAR_MINI_WIDTH
=
58
;
export
const
SIDE_BAR_SHOW_TIT_MINI_WIDTH
=
80
;
export
enum
ContentEnum
{
// auto width
FULL
=
'
full
'
,
...
...
src/hooks/core/useSetting.ts
浏览文件 @
66acb21e
...
...
@@ -4,6 +4,9 @@ import getProjectSetting from '/@/settings/projectSetting';
import
{
getGlobEnvConfig
,
isDevMode
}
from
'
/@/utils/env
'
;
import
{
getShortName
}
from
'
../../../build/getShortName
'
;
import
{
warn
}
from
'
/@/utils/log
'
;
const
reg
=
/
[
a-zA-Z
\_]
*/
;
const
ENV_NAME
=
getShortName
(
import
.
meta
.
env
);
const
ENV
=
((
isDevMode
()
...
...
@@ -16,6 +19,10 @@ const {
VITE_GLOB_API_URL_PREFIX
,
}
=
ENV
;
if
(
!
reg
.
test
(
VITE_GLOB_APP_SHORT_NAME
))
{
warn
(
`VITE_GLOB_APP_SHORT_NAME 变量只能是字符/下划线,请在环境变量中修改并重新运行。`
);
}
export
const
useSetting
=
():
SettingWrap
=>
{
// Take global configuration
const
glob
:
Readonly
<
GlobConfig
>
=
{
...
...
src/layouts/default/LayoutSideBar.tsx
浏览文件 @
66acb21e
...
...
@@ -10,8 +10,10 @@ import darkImg from '/@/assets/images/sidebar/dark.png';
import
lightImg
from
'
/@/assets/images/sidebar/light.png
'
;
import
{
appStore
}
from
'
/@/store/modules/app
'
;
import
{
MenuModeEnum
,
MenuSplitTyeEnum
,
MenuThemeEnum
}
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
'
,
setup
()
{
...
...
@@ -25,6 +27,13 @@ export default defineComponent({
return
appStore
.
getProjectConfig
;
});
const
getMiniWidth
=
computed
(()
=>
{
const
{
menuSetting
:
{
collapsedShowTitle
},
}
=
unref
(
getProjectConfigRef
);
return
collapsedShowTitle
?
SIDE_BAR_SHOW_TIT_MINI_WIDTH
:
SIDE_BAR_MINI_WIDTH
;
});
// 根据展开状态设置背景图片
const
getStyle
=
computed
(():
any
=>
{
// const collapse = unref(collapseRef);
...
...
@@ -62,7 +71,7 @@ export default defineComponent({
innerE
=
innerE
||
window
.
event
;
// let tarnameb = innerE.target || innerE.srcElement;
const
maxT
=
600
;
const
minT
=
80
;
const
minT
=
unref
(
getMiniWidth
)
;
iT
<
0
&&
(
iT
=
0
);
iT
>
maxT
&&
(
iT
=
maxT
);
iT
<
minT
&&
(
iT
=
minT
);
...
...
@@ -80,13 +89,13 @@ export default defineComponent({
const
width
=
parseInt
(
wrap
.
style
.
width
);
menuStore
.
commitDragStartState
(
false
);
if
(
!
menuStore
.
getCollapsedState
)
{
if
(
width
>
10
0
)
{
if
(
width
>
unref
(
getMiniWidth
)
+
2
0
)
{
setMenuWidth
(
width
);
}
else
{
menuStore
.
commitCollapsedState
(
true
);
}
}
else
{
if
(
width
>
80
)
{
if
(
width
>
unref
(
getMiniWidth
)
)
{
setMenuWidth
(
width
);
menuStore
.
commitCollapsedState
(
false
);
}
...
...
@@ -135,13 +144,13 @@ export default defineComponent({
const
getDragBarStyle
=
computed
(()
=>
{
if
(
menuStore
.
getCollapsedState
)
{
return
{
left
:
'
80px
'
};
return
{
left
:
`
${
unref
(
getMiniWidth
)}
px`
};
}
return
{};
});
const
getCollapsedWidth
=
computed
(()
=>
{
return
unref
(
brokenRef
)
?
0
:
80
;
return
unref
(
brokenRef
)
?
0
:
unref
(
getMiniWidth
)
;
});
function
renderDragLine
()
{
...
...
src/layouts/default/index.less
浏览文件 @
66acb21e
...
...
@@ -422,3 +422,17 @@
height: 30px;
line-height: 30px;
}
.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 > .ant-menu-submenu-title {
padding-right: 20px !important;
padding-left: 20px !important;
}
}
src/store/modules/permission.ts
浏览文件 @
66acb21e
...
...
@@ -19,7 +19,8 @@ import { genRouteModule, transformObjToRoute } from '/@/utils/helper/routeHelper
import
{
transformRouteToMenu
}
from
'
/@/utils/helper/menuHelper
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
import
{
warn
}
from
'
vue
'
;
import
{
warn
}
from
'
/@/utils/log
'
;
const
{
createMessage
}
=
useMessage
();
const
NAME
=
'
permission
'
;
hotModuleUnregisterModule
(
NAME
);
...
...
src/utils/log.ts
0 → 100644
浏览文件 @
66acb21e
const
projectName
=
import
.
meta
.
env
.
VITE_GLOB_APP_TITLE
;
export
function
warn
(
message
:
string
)
{
console
.
warn
(
`[
${
projectName
}
warn]:
${
message
}
`
);
}
vite.config.ts
浏览文件 @
66acb21e
...
...
@@ -80,7 +80,7 @@ const viteConfig: UserConfig = {
* boolean | 'terser' | 'esbuild'
* @default 'terser'
*/
minify
:
'
terser
'
,
minify
:
isDevFn
()
?
'
esbuild
'
:
'
terser
'
,
/**
* 基本公共路径
* @default '/'
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录