Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
ed41e508
提交
ed41e508
authored
12月 13, 2020
作者:
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf(setting-drawer): perf setting-drawer
上级
0362ab26
全部展开
隐藏空白字符变更
内嵌
并排
正在显示
16 个修改的文件
包含
592 行增加
和
151 行删除
+592
-151
html.ts
build/vite/plugin/html.ts
+32
-0
index.ts
build/vite/plugin/index.ts
+18
-72
mock.ts
build/vite/plugin/mock.ts
+16
-0
pwa.ts
build/vite/plugin/pwa.ts
+31
-0
BasicMenu.tsx
src/components/Menu/src/BasicMenu.tsx
+1
-1
useI18n.ts
src/hooks/web/useI18n.ts
+2
-2
SettingDrawer.tsx
src/layouts/default/setting/SettingDrawer.tsx
+0
-0
InputNumberItem.vue
src/layouts/default/setting/components/InputNumberItem.vue
+58
-0
SelectItem.vue
src/layouts/default/setting/components/SelectItem.vue
+77
-0
SettingFooter.vue
src/layouts/default/setting/components/SettingFooter.vue
+86
-0
SwitchItem.vue
src/layouts/default/setting/components/SwitchItem.vue
+68
-0
ThemePicker.vue
src/layouts/default/setting/components/ThemePicker.vue
+90
-0
TypePicker.vue
src/layouts/default/setting/components/TypePicker.vue
+98
-0
index.ts
src/layouts/default/setting/components/index.ts
+8
-0
index.less
src/layouts/default/setting/index.less
+0
-73
index.vue
src/layouts/default/setting/index.vue
+7
-3
没有找到文件。
build/vite/plugin/html.ts
0 → 100644
浏览文件 @
ed41e508
import
type
{
Plugin
}
from
'vite'
;
import
ViteHtmlPlugin
from
'vite-plugin-html'
;
import
{
isProdFn
,
isSiteMode
,
ViteEnv
}
from
'../../utils'
;
import
{
hmScript
}
from
'../hm'
;
// @ts-ignore
import
pkg
from
'../../../package.json'
;
import
{
GLOB_CONFIG_FILE_NAME
}
from
'../../constant'
;
export
function
setupHtmlPlugin
(
plugins
:
Plugin
[],
env
:
ViteEnv
)
{
const
{
VITE_GLOB_APP_TITLE
,
VITE_PUBLIC_PATH
}
=
env
;
const
htmlPlugin
=
ViteHtmlPlugin
({
// html title
title
:
VITE_GLOB_APP_TITLE
,
minify
:
isProdFn
(),
options
:
{
// Package and insert additional configuration files
injectConfig
:
isProdFn
()
?
`<script src='
${
VITE_PUBLIC_PATH
||
'./'
}${
GLOB_CONFIG_FILE_NAME
}
?v=
${
pkg
.
version
}
-
${
new
Date
().
getTime
()}
'></script>`
:
''
,
// Insert Baidu statistics code
hmScript
:
isSiteMode
()
?
hmScript
:
''
,
title
:
VITE_GLOB_APP_TITLE
,
},
});
plugins
.
push
(
htmlPlugin
);
return
plugins
;
}
build/vite/plugin/index.ts
浏览文件 @
ed41e508
import
type
{
Plugin
as
VitePlugin
}
from
'vite'
;
import
type
{
Plugin
as
rollupPlugin
}
from
'rollup'
;
import
{
createMockServer
}
from
'vite-plugin-mock'
;
import
{
VitePWA
}
from
'vite-plugin-pwa'
;
import
ViteHtmlPlugin
from
'vite-plugin-html'
;
import
PurgeIcons
from
'vite-plugin-purge-icons'
;
import
visualizer
from
'rollup-plugin-visualizer'
;
import
gzipPlugin
from
'./gzip/index'
;
import
{
hmScript
}
from
'../hm'
;
// @ts-ignore
import
pkg
from
'../../../package.json'
;
import
{
isDevFn
,
isProdFn
,
isSiteMode
,
ViteEnv
,
isReportMode
,
isBuildGzip
}
from
'../../utils'
;
import
{
GLOB_CONFIG_FILE_NAME
}
from
'../../constant'
;
import
{
isProdFn
,
isSiteMode
,
ViteEnv
,
isReportMode
,
isBuildGzip
}
from
'../../utils'
;
import
{
setupHtmlPlugin
}
from
'./html'
;
import
{
setupPwaPlugin
}
from
'./pwa'
;
import
{
setupMockPlugin
}
from
'./mock'
;
// gen vite plugins
export
function
createVitePlugins
(
viteEnv
:
ViteEnv
)
{
const
{
VITE_USE_MOCK
,
VITE_GLOB_APP_TITLE
,
VITE_PUBLIC_PATH
,
VITE_USE_PWA
}
=
viteEnv
;
const
vitePlugins
:
VitePlugin
[]
=
[];
// vite-plugin-html
vitePlugins
.
push
(
ViteHtmlPlugin
({
// html title
title
:
VITE_GLOB_APP_TITLE
,
minify
:
isProdFn
(),
options
:
{
// Package and insert additional configuration files
injectConfig
:
isProdFn
()
?
`<script src='
${
VITE_PUBLIC_PATH
||
'./'
}${
GLOB_CONFIG_FILE_NAME
}
?v=
${
pkg
.
version
}
-
${
new
Date
().
getTime
()}
'></script>`
:
''
,
// Insert Baidu statistics code
hmScript
:
isSiteMode
()
?
hmScript
:
''
,
title
:
VITE_GLOB_APP_TITLE
,
},
})
);
setupHtmlPlugin
(
vitePlugins
,
viteEnv
);
// vite-plugin-pwa
setupPwaPlugin
(
vitePlugins
,
viteEnv
);
// vite-plugin-mock
setupMockPlugin
(
vitePlugins
,
viteEnv
);
// vite-plugin-purge-icons
vitePlugins
.
push
(
PurgeIcons
());
if
(
isProdFn
()
&&
VITE_USE_PWA
)
{
vitePlugins
.
push
(
VitePWA
({
manifest
:
{
name
:
'Vben Admin'
,
short_name
:
'vben_admin'
,
icons
:
[
{
src
:
'./resource/img/pwa-192x192.png'
,
sizes
:
'192x192'
,
type
:
'image/png'
,
},
{
src
:
'./resource/img/pwa-512x512.png'
,
sizes
:
'512x512'
,
type
:
'image/png'
,
},
],
},
})
);
}
// vite-plugin-mock
if
(
isDevFn
()
&&
VITE_USE_MOCK
)
{
// open mock
vitePlugins
.
push
(
createMockServer
({
ignore
:
/^
\_
/
,
mockPath
:
'mock'
,
showTime
:
true
,
})
);
}
return
vitePlugins
;
}
...
...
@@ -86,17 +34,15 @@ export function createVitePlugins(viteEnv: ViteEnv) {
export
function
createRollupPlugin
()
{
const
rollupPlugins
:
rollupPlugin
[]
=
[];
if
(
isProdFn
())
{
if
(
isReportMode
())
{
// rollup-plugin-visualizer
rollupPlugins
.
push
(
visualizer
({
filename
:
'./build/.cache/stats.html'
,
open
:
true
})
as
Plugin
);
}
if
(
isBuildGzip
()
||
isSiteMode
())
{
// rollup-plugin-gizp
rollupPlugins
.
push
(
gzipPlugin
());
}
if
(
!
isProdFn
()
&&
isReportMode
())
{
// rollup-plugin-visualizer
rollupPlugins
.
push
(
visualizer
({
filename
:
'./build/.cache/stats.html'
,
open
:
true
})
as
Plugin
);
}
if
(
!
isProdFn
()
&&
(
isBuildGzip
()
||
isSiteMode
()))
{
// rollup-plugin-gizp
rollupPlugins
.
push
(
gzipPlugin
());
}
return
rollupPlugins
;
}
build/vite/plugin/mock.ts
0 → 100644
浏览文件 @
ed41e508
import
{
createMockServer
}
from
'vite-plugin-mock'
;
import
type
{
Plugin
}
from
'vite'
;
import
{
isDevFn
,
ViteEnv
}
from
'../../utils'
;
export
function
setupMockPlugin
(
plugins
:
Plugin
[],
env
:
ViteEnv
)
{
const
{
VITE_USE_MOCK
}
=
env
;
const
mockPlugin
=
createMockServer
({
ignore
:
/^
\_
/
,
mockPath
:
'mock'
,
showTime
:
true
,
});
if
(
isDevFn
()
&&
VITE_USE_MOCK
)
{
plugins
.
push
(
mockPlugin
);
}
return
plugins
;
}
build/vite/plugin/pwa.ts
0 → 100644
浏览文件 @
ed41e508
import
{
VitePWA
}
from
'vite-plugin-pwa'
;
import
type
{
Plugin
}
from
'vite'
;
import
{
isProdFn
,
ViteEnv
}
from
'../../utils'
;
export
function
setupPwaPlugin
(
plugins
:
Plugin
[],
env
:
ViteEnv
)
{
const
{
VITE_USE_PWA
}
=
env
;
const
pwaPlugin
=
VitePWA
({
manifest
:
{
name
:
'Vben Admin'
,
short_name
:
'vben_admin'
,
icons
:
[
{
src
:
'./resource/img/pwa-192x192.png'
,
sizes
:
'192x192'
,
type
:
'image/png'
,
},
{
src
:
'./resource/img/pwa-512x512.png'
,
sizes
:
'512x512'
,
type
:
'image/png'
,
},
],
},
});
if
(
isProdFn
()
&&
VITE_USE_PWA
)
{
plugins
.
push
(
pwaPlugin
);
}
return
plugins
;
}
src/components/Menu/src/BasicMenu.tsx
浏览文件 @
ed41e508
...
...
@@ -103,7 +103,7 @@ export default defineComponent({
const
isHorizontal
=
unref
(
getIsHorizontal
)
||
getSplit
.
value
;
return
{
height
:
isHorizontal
?
`calc(100%)`
:
`calc(100% -
${
props
.
showLogo
?
'48px'
:
'0px'
}
)`
,
height
:
isHorizontal
?
'100%'
:
`calc(100% -
${
props
.
showLogo
?
'48px'
:
'0px'
}
)`
,
overflowY
:
isHorizontal
?
'hidden'
:
'auto'
,
};
}
...
...
src/hooks/web/useI18n.ts
浏览文件 @
ed41e508
...
...
@@ -25,9 +25,9 @@ export function useI18n(namespace?: string) {
return
{
...
methods
,
t
:
(
key
:
string
,
...
arg
:
Par
ameters
<
typeof
t
>
)
=>
{
t
:
(
key
:
string
,
...
arg
:
Par
tial
<
Parameters
<
typeof
t
>
>
)
=>
{
if
(
!
key
)
return
''
;
return
t
(
getKey
(
key
),
...
arg
);
return
t
(
getKey
(
key
),
...
(
arg
as
Parameters
<
typeof
t
>
)
);
},
};
}
...
...
src/layouts/default/setting/SettingDrawer.tsx
浏览文件 @
ed41e508
差异被折叠。
点击展开。
src/layouts/default/setting/components/InputNumberItem.vue
0 → 100644
浏览文件 @
ed41e508
<
template
>
<div
:class=
"prefixCls"
>
<span>
{{
title
}}
</span>
<InputNumber
v-bind=
"$attrs"
size=
"small"
:class=
"`$
{prefixCls}-input-number`"
@change="handleChange"
/>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
}
from
'vue'
;
import
{
InputNumber
}
from
'ant-design-vue'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
baseHandler
}
from
'../handler'
;
import
{
HandlerEnum
}
from
'../enum'
;
export
default
defineComponent
({
name
:
'InputNumberItem'
,
components
:
{
InputNumber
},
props
:
{
event
:
{
type
:
Number
as
PropType
<
HandlerEnum
>
,
default
:
()
=>
{},
},
title
:
{
type
:
String
,
},
},
setup
(
props
)
{
const
{
prefixCls
}
=
useDesign
(
'setting-input-number-item'
);
function
handleChange
(
e
:
ChangeEvent
)
{
props
.
event
&&
baseHandler
(
props
.
event
,
e
);
}
return
{
prefixCls
,
handleChange
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
@import
(
reference
)
'../../../../design/index.less'
;
@prefix-cls
:
~
'@{namespace}-setting-input-number-item'
;
.@
{
prefix-cls
}
{
display
:
flex
;
justify-content
:
space-between
;
margin
:
16px
0
;
&-input-number
{
width
:
126px
;
}
}
</
style
>
src/layouts/default/setting/components/SelectItem.vue
0 → 100644
浏览文件 @
ed41e508
<
template
>
<div
:class=
"prefixCls"
>
<span>
{{
title
}}
</span>
<Select
v-bind=
"getBindValue"
:class=
"`$
{prefixCls}-select`"
@change="handleChange"
:disabled="disabled"
size="small"
:options="options"
/>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
,
computed
}
from
'vue'
;
import
{
Select
}
from
'ant-design-vue'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
baseHandler
}
from
'../handler'
;
import
{
HandlerEnum
}
from
'../enum'
;
export
default
defineComponent
({
name
:
'SelectItem'
,
components
:
{
Select
},
props
:
{
event
:
{
type
:
Number
as
PropType
<
HandlerEnum
>
,
default
:
()
=>
{},
},
disabled
:
{
type
:
Boolean
,
},
title
:
{
type
:
String
,
},
def
:
{
type
:
[
String
,
Number
]
as
PropType
<
string
|
number
>
,
},
initValue
:
{
type
:
[
String
,
Number
]
as
PropType
<
string
|
number
>
,
},
options
:
{
type
:
Array
as
PropType
<
LabelValueOptions
>
,
default
:
[],
},
},
setup
(
props
)
{
const
{
prefixCls
}
=
useDesign
(
'setting-select-item'
);
const
getBindValue
=
computed
(()
=>
{
return
props
.
def
?
{
value
:
props
.
def
,
defaultValue
:
props
.
initValue
||
props
.
def
}
:
{};
});
function
handleChange
(
e
:
ChangeEvent
)
{
props
.
event
&&
baseHandler
(
props
.
event
,
e
);
}
return
{
prefixCls
,
handleChange
,
getBindValue
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
@import
(
reference
)
'../../../../design/index.less'
;
@prefix-cls
:
~
'@{namespace}-setting-select-item'
;
.@
{
prefix-cls
}
{
display
:
flex
;
justify-content
:
space-between
;
margin
:
16px
0
;
&-select
{
width
:
126px
;
}
}
</
style
>
src/layouts/default/setting/components/SettingFooter.vue
0 → 100644
浏览文件 @
ed41e508
<
template
>
<div
:class=
"prefixCls"
>
<a-button
type=
"primary"
block
@
click=
"handleCopy"
>
<CopyOutlined
class=
"mr-2"
/>
{{
t
(
'layout.setting.copyBtn'
)
}}
</a-button>
<a-button
color=
"warning"
block
@
click=
"handleResetSetting"
class=
"my-3"
>
<RedoOutlined
class=
"mr-2"
/>
{{
t
(
'layout.setting.resetBtn'
)
}}
</a-button>
<a-button
color=
"error"
block
@
click=
"handleClearAndRedo"
>
<RedoOutlined
class=
"mr-2"
/>
{{
t
(
'layout.setting.clearBtn'
)
}}
</a-button>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
unref
}
from
'vue'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
useI18n
}
from
'/@/hooks/web/useI18n'
;
import
{
CopyOutlined
,
RedoOutlined
}
from
'@ant-design/icons-vue'
;
import
{
appStore
}
from
'/@/store/modules/app'
;
import
defaultSetting
from
'/@/settings/projectSetting'
;
import
{
useMessage
}
from
'/@/hooks/web/useMessage'
;
import
{
useCopyToClipboard
}
from
'/@/hooks/web/useCopyToClipboard'
;
import
{
useRootSetting
}
from
'/@/hooks/setting/useRootSetting'
;
import
{
updateColorWeak
,
updateGrayMode
}
from
'/@/setup/theme'
;
export
default
defineComponent
({
name
:
'SettingFooter'
,
components
:
{
CopyOutlined
,
RedoOutlined
},
setup
()
{
const
{
getRootSetting
}
=
useRootSetting
();
const
{
prefixCls
}
=
useDesign
(
'setting-footer'
);
const
{
t
}
=
useI18n
();
const
{
createSuccessModal
,
createMessage
}
=
useMessage
();
function
handleCopy
()
{
const
{
isSuccessRef
}
=
useCopyToClipboard
(
JSON
.
stringify
(
unref
(
getRootSetting
),
null
,
2
));
unref
(
isSuccessRef
)
&&
createSuccessModal
({
title
:
t
(
'layout.setting.operatingTitle'
),
content
:
t
(
'layout.setting.operatingContent'
),
});
}
function
handleResetSetting
()
{
try
{
appStore
.
commitProjectConfigState
(
defaultSetting
);
const
{
colorWeak
,
grayMode
}
=
defaultSetting
;
// updateTheme(themeColor);
updateColorWeak
(
colorWeak
);
updateGrayMode
(
grayMode
);
createMessage
.
success
(
t
(
'layout.setting.resetSuccess'
));
}
catch
(
error
)
{
createMessage
.
error
(
error
);
}
}
function
handleClearAndRedo
()
{
localStorage
.
clear
();
appStore
.
resumeAllState
();
location
.
reload
();
}
return
{
prefixCls
,
t
,
handleCopy
,
handleResetSetting
,
handleClearAndRedo
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
@import
(
reference
)
'../../../../design/index.less'
;
@prefix-cls
:
~
'@{namespace}-setting-footer'
;
.@
{
prefix-cls
}
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
}
</
style
>
src/layouts/default/setting/components/SwitchItem.vue
0 → 100644
浏览文件 @
ed41e508
<
template
>
<div
:class=
"prefixCls"
>
<span>
{{
title
}}
</span>
<Switch
v-bind=
"getBindValue"
@
change=
"handleChange"
:disabled=
"disabled"
:checkedChildren=
"t('layout.setting.on')"
:unCheckedChildren=
"t('layout.setting.off')"
/>
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
,
computed
}
from
'vue'
;
import
{
Switch
}
from
'ant-design-vue'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
useI18n
}
from
'/@/hooks/web/useI18n'
;
import
{
baseHandler
}
from
'../handler'
;
import
{
HandlerEnum
}
from
'../enum'
;
export
default
defineComponent
({
name
:
'SwitchItem'
,
components
:
{
Switch
},
props
:
{
event
:
{
type
:
Number
as
PropType
<
HandlerEnum
>
,
default
:
()
=>
{},
},
disabled
:
{
type
:
Boolean
,
},
title
:
{
type
:
String
,
},
def
:
{
type
:
Boolean
,
},
},
setup
(
props
)
{
const
{
prefixCls
}
=
useDesign
(
'setting-switch-item'
);
const
{
t
}
=
useI18n
();
const
getBindValue
=
computed
(()
=>
{
return
props
.
def
?
{
checked
:
props
.
def
}
:
{};
});
function
handleChange
(
e
:
ChangeEvent
)
{
props
.
event
&&
baseHandler
(
props
.
event
,
e
);
}
return
{
prefixCls
,
t
,
handleChange
,
getBindValue
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
@import
(
reference
)
'../../../../design/index.less'
;
@prefix-cls
:
~
'@{namespace}-setting-switch-item'
;
.@
{
prefix-cls
}
{
display
:
flex
;
justify-content
:
space-between
;
margin
:
16px
0
;
}
</
style
>
src/layouts/default/setting/components/ThemePicker.vue
0 → 100644
浏览文件 @
ed41e508
<
template
>
<div
:class=
"prefixCls"
>
<template
v-for=
"color in colorList || []"
:key=
"color"
>
<span
@
click=
"handleClick(color)"
:class=
"[
`$
{prefixCls}__item`,
{
[`${prefixCls}__item--active`]: def === color,
},
]"
:style="{ background: color }"
>
<CheckOutlined
/>
</span>
</
template
>
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
}
from
'vue'
;
import
{
CheckOutlined
}
from
'@ant-design/icons-vue'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
baseHandler
}
from
'../handler'
;
import
{
HandlerEnum
}
from
'../enum'
;
export
default
defineComponent
({
name
:
'ThemePicker'
,
components
:
{
CheckOutlined
},
props
:
{
colorList
:
{
type
:
Array
as
PropType
<
string
[]
>
,
defualt
:
[],
},
event
:
{
type
:
Number
as
PropType
<
HandlerEnum
>
,
default
:
()
=>
{},
},
def
:
{
type
:
String
,
},
},
setup
(
props
)
{
const
{
prefixCls
}
=
useDesign
(
'setting-theme-picker'
);
function
handleClick
(
color
:
string
)
{
props
.
event
&&
baseHandler
(
props
.
event
,
color
);
}
return
{
prefixCls
,
handleClick
,
};
},
});
</
script
>
<
style
lang=
"less"
>
@import
(
reference
)
'../../../../design/index.less'
;
@prefix-cls
:
~
'@{namespace}-setting-theme-picker'
;
.@
{
prefix-cls
}
{
display
:
flex
;
flex-wrap
:
wrap
;
margin
:
16px
0
;
justify-content
:
space-around
;
&__item
{
width
:
20px
;
height
:
20px
;
cursor
:
pointer
;
border
:
1px
solid
#ddd
;
border-radius
:
2px
;
svg
{
display
:
none
;
}
&
--active
{
border
:
1px
solid
lighten
(
@
primary-color
,
10%
);
svg
{
display
:
inline-block
;
margin
:
0
0
3px
3px
;
font-size
:
12px
;
fill
:
@
white
!important
;
}
}
}
}
</
style
>
src/layouts/default/setting/components/TypePicker.vue
0 → 100644
浏览文件 @
ed41e508
<
template
>
<div
:class=
"prefixCls"
>
<template
v-for=
"item in menuTypeList || []"
:key=
"item.title"
>
<Tooltip
:title=
"item.title"
placement=
"bottom"
>
<div
@
click=
"handler(item)"
:class=
"[
`$
{prefixCls}__item`,
{
[`${prefixCls}__item--active`]: def === item.type,
},
]"
>
<img
:src=
"item.src"
/>
</div>
</Tooltip>
</
template
>
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
}
from
'vue'
;
import
{
Tooltip
}
from
'ant-design-vue'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
menuTypeList
}
from
'../enum'
;
export
default
defineComponent
({
name
:
'MenuTypePicker'
,
components
:
{
Tooltip
},
props
:
{
menuTypeList
:
{
type
:
Array
as
PropType
<
typeof
menuTypeList
>
,
defualt
:
[],
},
handler
:
{
type
:
Function
as
PropType
<
Fn
>
,
default
:
()
=>
{},
},
def
:
{
type
:
String
,
},
},
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'setting-menu-type-picker'
);
return
{
prefixCls
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
@import
(
reference
)
'../../../../design/index.less'
;
@prefix-cls
:
~
'@{namespace}-setting-menu-type-picker'
;
.@
{
prefix-cls
}
{
display
:
flex
;
&__item
{
position
:
relative
;
width
:
70px
;
height
:
50px
;
margin
:
0
20px
20px
0
;
cursor
:
pointer
;
border-radius
:
6px
;
&::after
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
width
:
0
;
height
:
0
;
content
:
''
;
opacity
:
0
;
transition
:
all
0.3s
;
}
&
:hover
,
&
--active
{
&::after
{
top
:
-8px
;
left
:
-4px
;
width
:
80px
;
height
:
64px
;
border
:
2px
solid
@
primary-color
;
border-radius
:
6px
;
opacity
:
1
;
}
}
}
img
{
width
:
100%
;
height
:
100%
;
cursor
:
pointer
;
}
}
</
style
>
src/layouts/default/setting/components/index.ts
0 → 100644
浏览文件 @
ed41e508
import
{
createAsyncComponent
}
from
'/@/utils/factory/createAsyncComponent'
;
export
const
TypePicker
=
createAsyncComponent
(()
=>
import
(
'./TypePicker.vue'
));
export
const
ThemePicker
=
createAsyncComponent
(()
=>
import
(
'./ThemePicker.vue'
));
export
const
SettingFooter
=
createAsyncComponent
(()
=>
import
(
'./SettingFooter.vue'
));
export
const
SwitchItem
=
createAsyncComponent
(()
=>
import
(
'./SwitchItem.vue'
));
export
const
SelectItem
=
createAsyncComponent
(()
=>
import
(
'./SelectItem.vue'
));
export
const
InputNumberItem
=
createAsyncComponent
(()
=>
import
(
'./InputNumberItem.vue'
));
src/layouts/default/setting/index.less
deleted
100644 → 0
浏览文件 @
0362ab26
.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;
justify-content: space-around;
> span {
width: 20px;
height: 20px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 2px;
svg {
display: none;
}
&.active {
border: 1px solid lighten(@primary-color, 10%);
svg {
display: inline-block;
margin: 0 0 3px 3px;
font-size: 12px;
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
浏览文件 @
ed41e508
<
template
>
<div
@
click=
"openDrawer"
class=
"setting-button
"
>
<div
@
click=
"openDrawer"
:class=
"prefixCls
"
>
<SettingOutlined
/>
<SettingDrawer
@
register=
"register"
/>
</div>
...
...
@@ -10,13 +10,17 @@
import
SettingDrawer
from
'./SettingDrawer'
;
import
{
useDrawer
}
from
'/@/components/Drawer'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
export
default
defineComponent
({
name
:
'SettingBtn'
,
components
:
{
SettingOutlined
,
SettingDrawer
},
setup
()
{
const
[
register
,
{
openDrawer
}]
=
useDrawer
();
const
{
prefixCls
}
=
useDesign
(
'setting-button'
);
return
{
prefixCls
,
register
,
openDrawer
,
};
...
...
@@ -25,9 +29,9 @@
</
script
>
<
style
lang=
"less"
>
@import
(
reference
)
'../../../design/index.less'
;
@
import
'./index.less
'
;
@
prefix-cls
:
~
'@{namespace}-setting-button
'
;
.
setting-button
{
.
@
{
prefix-cls
}
{
position
:
absolute
;
top
:
45%
;
right
:
0
;
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论