@ -2,7 +2,13 @@ import { defineComponent, computed, unref, ref } from 'vue';
import { BasicDrawer } from '/@/components/Drawer/index' ;
import { BasicDrawer } from '/@/components/Drawer/index' ;
import { Divider , Switch , Tooltip , InputNumber , Select } from 'ant-design-vue' ;
import { Divider , Switch , Tooltip , InputNumber , Select } from 'ant-design-vue' ;
import Button from '/@/components/Button/index.vue' ;
import Button from '/@/components/Button/index.vue' ;
import { MenuModeEnum , MenuTypeEnum , MenuThemeEnum , TopMenuAlignEnum } from '/@/enums/menuEnum' ;
import {
MenuModeEnum ,
MenuTypeEnum ,
MenuThemeEnum ,
TopMenuAlignEnum ,
TriggerEnum ,
} from '/@/enums/menuEnum' ;
import { ContentEnum , RouterTransitionEnum } from '/@/enums/appEnum' ;
import { ContentEnum , RouterTransitionEnum } from '/@/enums/appEnum' ;
import { CopyOutlined , RedoOutlined , CheckOutlined } from '@ant-design/icons-vue' ;
import { CopyOutlined , RedoOutlined , CheckOutlined } from '@ant-design/icons-vue' ;
import { appStore } from '/@/store/modules/app' ;
import { appStore } from '/@/store/modules/app' ;
@ -23,41 +29,49 @@ const themeOptions = [
{
{
value : MenuThemeEnum.LIGHT ,
value : MenuThemeEnum.LIGHT ,
label : '亮色' ,
label : '亮色' ,
key : MenuThemeEnum.LIGHT ,
} ,
} ,
{
{
value : MenuThemeEnum.DARK ,
value : MenuThemeEnum.DARK ,
label : '暗色' ,
label : '暗色' ,
key : MenuThemeEnum.DARK ,
} ,
} ,
] ;
] ;
const contentModeOptions = [
const contentModeOptions = [
{
{
value : ContentEnum.FULL ,
value : ContentEnum.FULL ,
label : '流式' ,
label : '流式' ,
key : ContentEnum.FULL ,
} ,
} ,
{
{
value : ContentEnum.FIXED ,
value : ContentEnum.FIXED ,
label : '定宽' ,
label : '定宽' ,
key : ContentEnum.FIXED ,
} ,
} ,
] ;
] ;
const topMenuAlignOptions = [
const topMenuAlignOptions = [
{
{
value : TopMenuAlignEnum.CENTER ,
value : TopMenuAlignEnum.CENTER ,
label : '居中' ,
label : '居中' ,
key : TopMenuAlignEnum.CENTER ,
} ,
} ,
{
{
value : TopMenuAlignEnum.START ,
value : TopMenuAlignEnum.START ,
label : '居左' ,
label : '居左' ,
key : TopMenuAlignEnum.START ,
} ,
} ,
{
{
value : TopMenuAlignEnum.END ,
value : TopMenuAlignEnum.END ,
label : '居右' ,
label : '居右' ,
key : TopMenuAlignEnum.END ,
} ,
] ;
const menuTriggerOptions = [
{
value : TriggerEnum.NONE ,
label : '不显示' ,
} ,
{
value : TriggerEnum.FOOTER ,
label : '底部' ,
} ,
{
value : TriggerEnum.HEADER ,
label : '顶部' ,
} ,
} ,
] ;
] ;
@ -181,7 +195,7 @@ export default defineComponent({
baseHandler ( 'splitMenu' , e ) ;
baseHandler ( 'splitMenu' , e ) ;
} ,
} ,
def : split ,
def : split ,
disabled : ! unref ( getShowMenuRef ) ,
disabled : ! unref ( getShowMenuRef ) || type !== MenuTypeEnum . MIX ,
} ) ,
} ) ,
renderSelectItem ( '顶栏主题' , {
renderSelectItem ( '顶栏主题' , {
handler : ( e ) = > {
handler : ( e ) = > {
@ -215,6 +229,7 @@ export default defineComponent({
menuWidth ,
menuWidth ,
topMenuAlign ,
topMenuAlign ,
collapsedShowTitle ,
collapsedShowTitle ,
trigger ,
} = { } ,
} = { } ,
} = appStore . getProjectConfig ;
} = appStore . getProjectConfig ;
return [
return [
@ -262,6 +277,13 @@ export default defineComponent({
options : topMenuAlignOptions ,
options : topMenuAlignOptions ,
disabled : ! unref ( getShowHeaderRef ) ,
disabled : ! unref ( getShowHeaderRef ) ,
} ) ,
} ) ,
renderSelectItem ( '菜单折叠按钮' , {
handler : ( e ) = > {
baseHandler ( 'menuTrigger' , e ) ;
} ,
def : trigger ,
options : menuTriggerOptions ,
} ) ,
renderSelectItem ( '内容区域宽度' , {
renderSelectItem ( '内容区域宽度' , {
handler : ( e ) = > {
handler : ( e ) = > {
baseHandler ( 'contentMode' , e ) ;
baseHandler ( 'contentMode' , e ) ;
@ -298,7 +320,7 @@ export default defineComponent({
disabled = { ! unref ( getShowMenuRef ) }
disabled = { ! unref ( getShowMenuRef ) }
defaultValue = { menuWidth }
defaultValue = { menuWidth }
formatter = { ( value : string ) = > ` ${ parseInt ( value ) } px ` }
formatter = { ( value : string ) = > ` ${ parseInt ( value ) } px ` }
onChange = { ( e ) = > {
onChange = { ( e : any ) = > {
baseHandler ( 'menuWidth' , e ) ;
baseHandler ( 'menuWidth' , e ) ;
} }
} }
/ >
/ >
@ -424,13 +446,21 @@ export default defineComponent({
if ( event === 'layout' ) {
if ( event === 'layout' ) {
const { mode , type , split } = value ;
const { mode , type , split } = value ;
const splitOpt = split === undefined ? { split } : { } ;
const splitOpt = split === undefined ? { split } : { } ;
let headerSetting = { } ;
if ( type === MenuTypeEnum . TOP_MENU ) {
headerSetting = {
theme : MenuThemeEnum.DARK ,
} ;
}
config = {
config = {
menuSetting : {
menuSetting : {
mode ,
mode ,
type ,
type ,
collapsed : false ,
collapsed : false ,
show : true ,
. . . splitOpt ,
. . . splitOpt ,
} ,
} ,
headerSetting ,
} ;
} ;
}
}
if ( event === 'hasDrag' ) {
if ( event === 'hasDrag' ) {
@ -440,6 +470,13 @@ export default defineComponent({
} ,
} ,
} ;
} ;
}
}
if ( event === 'menuTrigger' ) {
config = {
menuSetting : {
trigger : value ,
} ,
} ;
}
if ( event === 'openPageLoading' ) {
if ( event === 'openPageLoading' ) {
config = {
config = {
openPageLoading : value ,
openPageLoading : value ,
@ -647,7 +684,7 @@ export default defineComponent({
< Switch
< Switch
{ . . . opt }
{ . . . opt }
disabled = { disabled }
disabled = { disabled }
onChange = { ( e ) = > {
onChange = { ( e : any ) = > {
handler && handler ( e ) ;
handler && handler ( e ) ;
} }
} }
checkedChildren = "开"
checkedChildren = "开"