Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
2b95be80
提交
2b95be80
authored
11月 11, 2020
作者:
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix cssVar hmr error
上级
7692ffb9
全部展开
隐藏空白字符变更
内嵌
并排
正在显示
5 个修改的文件
包含
48 行增加
和
53 行删除
+48
-53
index.less
src/components/Menu/src/index.less
+3
-8
useCssVar.ts
src/hooks/web/useCssVar.ts
+35
-29
projectSetting.ts
src/settings/projectSetting.ts
+1
-1
index.ts
src/setup/theme/index.ts
+9
-15
yarn.lock
yarn.lock
+0
-0
没有找到文件。
src/components/Menu/src/index.less
浏览文件 @
2b95be80
...
@@ -50,8 +50,11 @@
...
@@ -50,8 +50,11 @@
}
}
// collapsed show title end
// collapsed show title end
.ant-menu-item,
.ant-menu-submenu-title {
.ant-menu-submenu-title {
> .basic-menu__name {
> .basic-menu__name {
width: 100%;
.basic-menu__tag {
.basic-menu__tag {
float: right;
float: right;
margin-top: @app-menu-item-height / 2;
margin-top: @app-menu-item-height / 2;
...
@@ -62,14 +65,6 @@
...
@@ -62,14 +65,6 @@
.ant-menu-item {
.ant-menu-item {
transition: unset;
transition: unset;
> .basic-menu__name {
.basic-menu__tag {
float: right;
margin-top: @app-menu-item-height / 2;
transform: translate(0%, -50%);
}
}
}
}
&__tag {
&__tag {
...
...
src/hooks/web/useCssVar.ts
浏览文件 @
2b95be80
import
{
ref
,
Ref
,
isRef
,
watch
}
from
'@vue/runtime-dom'
// import { ref, Ref, isRef, watch } from '@vue/runtime-dom';
export
default
function
useCssVar
(
// TODO 打开注释会造成热更新失效,待排查
prop
:
string
,
// export default function useCssVar(prop: string, refEl?: Ref<HTMLElement | null>) {
refEl
?:
Ref
<
HTMLElement
|
null
>
// const refVar = ref('');
)
{
// let el: HTMLElement = document.documentElement;
const
refVar
=
ref
(
''
)
let
el
:
HTMLElement
=
document
.
documentElement
if
(
isRef
(
refEl
))
{
//
if (isRef(refEl)) {
watch
(
//
watch(
refEl
,
//
refEl,
()
=>
{
//
() => {
if
(
refEl
.
value
)
{
//
if (refEl.value) {
el
=
refEl
.
value
as
HTMLElement
// el = refEl.value as HTMLElement;
refVar
.
value
=
getComputedStyle
(
el
).
getPropertyValue
(
prop
)
// refVar.value = getComputedStyle(el).getPropertyValue(prop);
}
//
}
},
//
},
{
immediate
:
true
}
//
{ immediate: true }
)
// );
}
else
{
//
} else {
refVar
.
value
=
getComputedStyle
(
el
).
getPropertyValue
(
prop
)
// refVar.value = getComputedStyle(el).getPropertyValue(prop);
}
//
}
watch
(
//
watch(
refVar
,
//
refVar,
val
=>
{
// (val)
=> {
el
&&
el
.
style
.
setProperty
(
prop
,
val
)
// el && el.style.setProperty(prop, val);
},
//
},
{
immediate
:
true
}
//
{ immediate: true }
)
// );
return
refVar
// return refVar;
// }
export
function
getCssVar
(
prop
:
string
,
dom
=
document
.
documentElement
)
{
return
getComputedStyle
(
dom
).
getPropertyValue
(
prop
);
}
export
function
setCssVar
(
prop
:
string
,
val
:
any
,
dom
=
document
.
documentElement
)
{
dom
.
style
.
setProperty
(
prop
,
val
);
}
}
src/settings/projectSetting.ts
浏览文件 @
2b95be80
...
@@ -68,7 +68,7 @@ const setting: ProjectConfig = {
...
@@ -68,7 +68,7 @@ const setting: ProjectConfig = {
// 是否显示搜索框
// 是否显示搜索框
showSearch
:
true
,
showSearch
:
true
,
// 菜单宽度
// 菜单宽度
menuWidth
:
2
0
0
,
menuWidth
:
2
1
0
,
// 菜单模式
// 菜单模式
mode
:
MenuModeEnum
.
INLINE
,
mode
:
MenuModeEnum
.
INLINE
,
// 菜单类型
// 菜单类型
...
...
src/setup/theme/index.ts
浏览文件 @
2b95be80
import
useCssVar
from
'/@/hooks/web/useCssVar'
;
import
{
setCssVar
}
from
'/@/hooks/web/useCssVar'
;
import
{
isHexColor
,
colorIsDark
,
lighten
,
darken
}
from
'/@/utils/color'
;
import
{
isHexColor
,
colorIsDark
,
lighten
,
darken
}
from
'/@/utils/color'
;
import
{
appStore
}
from
'/@/store/modules/app'
;
import
{
appStore
}
from
'/@/store/modules/app'
;
import
{
MenuThemeEnum
}
from
'/@/enums/menuEnum'
;
import
{
MenuThemeEnum
}
from
'/@/enums/menuEnum'
;
...
@@ -29,15 +29,13 @@ export const updateGrayMode = (gray: boolean) => {
...
@@ -29,15 +29,13 @@ export const updateGrayMode = (gray: boolean) => {
export
function
updateHeaderBgColor
(
color
:
string
)
{
export
function
updateHeaderBgColor
(
color
:
string
)
{
if
(
!
isHexColor
(
color
))
return
;
if
(
!
isHexColor
(
color
))
return
;
const
bgColorRef
=
useCssVar
(
HEADER_BG_COLOR_VAR
);
const
bgHoverColorRef
=
useCssVar
(
HEADER_BG_HOVER_COLOR_VAR
);
const
topMenuActiveBgColorRef
=
useCssVar
(
HEADER_MENU_ACTIVE_BG_COLOR_VAR
);
// bg color
// bg color
bgColorRef
.
value
=
color
;
setCssVar
(
HEADER_BG_COLOR_VAR
,
color
);
// hover color
// hover color
const
hoverColor
=
lighten
(
color
,
6
);
const
hoverColor
=
lighten
(
color
,
6
);
bgHoverColorRef
.
value
=
hoverColor
;
setCssVar
(
HEADER_BG_HOVER_COLOR_VAR
,
hoverColor
)
;
topMenuActiveBgColorRef
.
value
=
hoverColor
;
setCssVar
(
HEADER_MENU_ACTIVE_BG_COLOR_VAR
,
hoverColor
)
;
const
isDark
=
colorIsDark
(
color
);
const
isDark
=
colorIsDark
(
color
);
...
@@ -51,15 +49,11 @@ export function updateHeaderBgColor(color: string) {
...
@@ -51,15 +49,11 @@ export function updateHeaderBgColor(color: string) {
export
function
updateSidebarBgColor
(
color
:
string
)
{
export
function
updateSidebarBgColor
(
color
:
string
)
{
if
(
!
isHexColor
(
color
))
return
;
if
(
!
isHexColor
(
color
))
return
;
const
siderBgColor
=
useCssVar
(
SIDER_DARK_BG_COLOR
);
setCssVar
(
SIDER_DARK_BG_COLOR
,
color
);
const
darkenBgColor
=
useCssVar
(
SIDER_DARK_DARKEN_BG_COLOR
);
setCssVar
(
SIDER_DARK_DARKEN_BG_COLOR
,
darken
(
color
,
6
)
);
const
lighten1Color
=
useCssVar
(
SIDER_LIGHTEN_1_BG_COLOR
);
setCssVar
(
SIDER_LIGHTEN_1_BG_COLOR
,
lighten
(
color
,
4
)
);
const
lighten2Color
=
useCssVar
(
SIDER_LIGHTEN_2_BG_COLOR
);
setCssVar
(
SIDER_LIGHTEN_2_BG_COLOR
,
lighten
(
color
,
8
)
);
siderBgColor
.
value
=
color
;
darkenBgColor
.
value
=
darken
(
color
,
6
);
lighten1Color
.
value
=
lighten
(
color
,
4
);
lighten2Color
.
value
=
lighten
(
color
,
8
);
// only #ffffff is light
// only #ffffff is light
const
isLight
=
[
'#fff'
,
'#ffffff'
].
includes
(
color
.
toLowerCase
());
const
isLight
=
[
'#fff'
,
'#ffffff'
].
includes
(
color
.
toLowerCase
());
...
...
yarn.lock
浏览文件 @
2b95be80
差异被折叠。
点击展开。
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论