You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

353 lines
12 KiB

import { computed, defineComponent, unref } from 'vue'
import { Divider } from 'ant-design-vue'
import { InputNumberItem, SelectItem, SettingFooter, SwitchItem, ThemeColorPicker, TypePicker } from './components'
import { baseHandler } from './handler'
import {
HandlerEnum,
contentModeOptions,
getMenuTriggerOptions,
menuTypeList,
mixSidebarTriggerOptions,
routerTransitionOptions,
topMenuAlignOptions,
} from './enum'
import { BasicDrawer } from '@/components/Drawer'
import { AppDarkModeToggle } from '@/components/Application'
import { MenuTypeEnum, TriggerEnum } from '@/enums/menuEnum'
import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting'
import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'
import { useI18n } from '@/hooks/web/useI18n'
import { APP_PRESET_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '@/settings/designSetting'
const { t } = useI18n()
export default defineComponent({
name: 'SettingDrawer',
setup(_, { attrs }) {
const {
getContentMode,
getShowFooter,
getShowBreadCrumb,
getShowBreadCrumbIcon,
getShowLogo,
getFullContent,
getColorWeak,
getGrayMode,
getLockTime,
getShowDarkModeToggle,
getThemeColor,
} = useRootSetting()
const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } = useTransitionSetting()
const {
getIsHorizontal,
getShowMenu,
getMenuType,
getTrigger,
getCollapsedShowTitle,
getMenuFixed,
getCollapsed,
getCanDrag,
getTopMenuAlign,
getAccordion,
getMenuWidth,
getMenuBgColor,
getIsTopMenu,
getSplit,
getIsMixSidebar,
getCloseMixSidebarOnChange,
getMixSideTrigger,
getMixSideFixed,
} = useMenuSetting()
const { getShowHeader, getFixed: getHeaderFixed, getHeaderBgColor, getShowSearch } = useHeaderSetting()
const { getShowMultipleTab, getShowMultipleTabIcon, getShowQuick, getShowRedo, getShowFold, getAutoCollapse } = useMultipleTabSetting()
const getShowMenuRef = computed(() => {
return unref(getShowMenu) && !unref(getIsHorizontal)
})
function renderSidebar() {
return (
<>
<TypePicker
menuTypeList={menuTypeList}
handler={(item: (typeof menuTypeList)[0]) => {
baseHandler(HandlerEnum.CHANGE_LAYOUT, {
mode: item.mode,
type: item.type,
split: unref(getIsHorizontal) ? false : undefined,
})
}}
def={unref(getMenuType)}
/>
</>
)
}
function renderHeaderTheme() {
return <ThemeColorPicker colorList={HEADER_PRESET_BG_COLOR_LIST} def={unref(getHeaderBgColor)} event={HandlerEnum.HEADER_THEME} />
}
function renderSiderTheme() {
return <ThemeColorPicker colorList={SIDE_BAR_BG_COLOR_LIST} def={unref(getMenuBgColor)} event={HandlerEnum.MENU_THEME} />
}
function renderMainTheme() {
return <ThemeColorPicker colorList={APP_PRESET_COLOR_LIST} def={unref(getThemeColor)} event={HandlerEnum.CHANGE_THEME_COLOR} />
}
/**
* @description:
*/
function renderFeatures() {
let triggerDef = unref(getTrigger)
const triggerOptions = getMenuTriggerOptions(unref(getSplit))
const some = triggerOptions.some(item => item.value === triggerDef)
if (!some)
triggerDef = TriggerEnum.FOOTER
return (
<>
<SwitchItem
title={t('layout.setting.splitMenu')}
event={HandlerEnum.MENU_SPLIT}
def={unref(getSplit)}
disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
/>
<SwitchItem
title={t('layout.setting.mixSidebarFixed')}
event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
def={unref(getMixSideFixed)}
disabled={!unref(getIsMixSidebar)}
/>
<SwitchItem
title={t('layout.setting.closeMixSidebarOnChange')}
event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
def={unref(getCloseMixSidebarOnChange)}
disabled={!unref(getIsMixSidebar)}
/>
<SwitchItem
title={t('layout.setting.menuCollapse')}
event={HandlerEnum.MENU_COLLAPSED}
def={unref(getCollapsed)}
disabled={!unref(getShowMenuRef)}
/>
<SwitchItem
title={t('layout.setting.menuDrag')}
event={HandlerEnum.MENU_HAS_DRAG}
def={unref(getCanDrag)}
disabled={!unref(getShowMenuRef)}
/>
<SwitchItem
title={t('layout.setting.menuSearch')}
event={HandlerEnum.HEADER_SEARCH}
def={unref(getShowSearch)}
disabled={!unref(getShowHeader)}
/>
<SwitchItem
title={t('layout.setting.menuAccordion')}
event={HandlerEnum.MENU_ACCORDION}
def={unref(getAccordion)}
disabled={!unref(getShowMenuRef)}
/>
<SwitchItem
title={t('layout.setting.collapseMenuDisplayName')}
event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
def={unref(getCollapsedShowTitle)}
disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
/>
<SwitchItem
title={t('layout.setting.fixedHeader')}
event={HandlerEnum.HEADER_FIXED}
def={unref(getHeaderFixed)}
disabled={!unref(getShowHeader)}
/>
<SwitchItem
title={t('layout.setting.fixedSideBar')}
event={HandlerEnum.MENU_FIXED}
def={unref(getMenuFixed)}
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
/>
<SwitchItem
title={t('layout.setting.autoCollapseTabsInFold')}
event={HandlerEnum.TABS_AUTO_COLLAPSE}
def={unref(getAutoCollapse)}
disabled={!unref(getShowMultipleTab)}
/>
<SelectItem
title={t('layout.setting.mixSidebarTrigger')}
event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
def={unref(getMixSideTrigger)}
options={mixSidebarTriggerOptions}
disabled={!unref(getIsMixSidebar)}
/>
<SelectItem
title={t('layout.setting.topMenuLayout')}
event={HandlerEnum.MENU_TOP_ALIGN}
def={unref(getTopMenuAlign)}
options={topMenuAlignOptions}
disabled={!unref(getShowHeader) || unref(getSplit) || (!unref(getIsTopMenu) && !unref(getSplit)) || unref(getIsMixSidebar)}
/>
<SelectItem
title={t('layout.setting.menuCollapseButton')}
event={HandlerEnum.MENU_TRIGGER}
def={triggerDef}
options={triggerOptions}
disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
/>
<SelectItem
title={t('layout.setting.contentMode')}
event={HandlerEnum.CONTENT_MODE}
def={unref(getContentMode)}
options={contentModeOptions}
/>
<InputNumberItem
title={t('layout.setting.autoScreenLock')}
min={0}
event={HandlerEnum.LOCK_TIME}
defaultValue={unref(getLockTime)}
formatter={(value: string) => {
return Number.parseInt(value) === 0 ? `0(${t('layout.setting.notAutoScreenLock')})` : `${value}${t('layout.setting.minute')}`
}}
/>
<InputNumberItem
title={t('layout.setting.expandedMenuWidth')}
max={600}
min={100}
step={10}
event={HandlerEnum.MENU_WIDTH}
disabled={!unref(getShowMenuRef)}
defaultValue={unref(getMenuWidth)}
formatter={(value: string) => `${Number.parseInt(value)}px`}
/>
</>
)
}
function renderContent() {
return (
<>
<SwitchItem
title={t('layout.setting.breadcrumb')}
event={HandlerEnum.SHOW_BREADCRUMB}
def={unref(getShowBreadCrumb)}
disabled={!unref(getShowHeader)}
/>
<SwitchItem
title={t('layout.setting.breadcrumbIcon')}
event={HandlerEnum.SHOW_BREADCRUMB_ICON}
def={unref(getShowBreadCrumbIcon)}
disabled={!unref(getShowHeader)}
/>
<SwitchItem title={t('layout.setting.tabs')} event={HandlerEnum.TABS_SHOW} def={unref(getShowMultipleTab)} />
<SwitchItem
title={t('layout.setting.tabsIcon')}
event={HandlerEnum.TABS_SHOW_ICON}
def={unref(getShowMultipleTabIcon)}
disabled={!unref(getShowMultipleTab)}
/>
<SwitchItem
title={t('layout.setting.tabsRedoBtn')}
event={HandlerEnum.TABS_SHOW_REDO}
def={unref(getShowRedo)}
disabled={!unref(getShowMultipleTab)}
/>
<SwitchItem
title={t('layout.setting.tabsQuickBtn')}
event={HandlerEnum.TABS_SHOW_QUICK}
def={unref(getShowQuick)}
disabled={!unref(getShowMultipleTab)}
/>
<SwitchItem
title={t('layout.setting.tabsFoldBtn')}
event={HandlerEnum.TABS_SHOW_FOLD}
def={unref(getShowFold)}
disabled={!unref(getShowMultipleTab)}
/>
<SwitchItem
title={t('layout.setting.sidebar')}
event={HandlerEnum.MENU_SHOW_SIDEBAR}
def={unref(getShowMenu)}
disabled={unref(getIsHorizontal)}
/>
<SwitchItem title={t('layout.setting.header')} event={HandlerEnum.HEADER_SHOW} def={unref(getShowHeader)} />
<SwitchItem title="Logo" event={HandlerEnum.SHOW_LOGO} def={unref(getShowLogo)} disabled={unref(getIsMixSidebar)} />
<SwitchItem title={t('layout.setting.footer')} event={HandlerEnum.SHOW_FOOTER} def={unref(getShowFooter)} />
<SwitchItem title={t('layout.setting.fullContent')} event={HandlerEnum.FULL_CONTENT} def={unref(getFullContent)} />
<SwitchItem title={t('layout.setting.grayMode')} event={HandlerEnum.GRAY_MODE} def={unref(getGrayMode)} />
<SwitchItem title={t('layout.setting.colorWeak')} event={HandlerEnum.COLOR_WEAK} def={unref(getColorWeak)} />
</>
)
}
function renderTransition() {
return (
<>
<SwitchItem title={t('layout.setting.progress')} event={HandlerEnum.OPEN_PROGRESS} def={unref(getOpenNProgress)} />
<SwitchItem title={t('layout.setting.switchLoading')} event={HandlerEnum.OPEN_PAGE_LOADING} def={unref(getOpenPageLoading)} />
<SwitchItem
title={t('layout.setting.switchAnimation')}
event={HandlerEnum.OPEN_ROUTE_TRANSITION}
def={unref(getEnableTransition)}
/>
<SelectItem
title={t('layout.setting.animationType')}
event={HandlerEnum.ROUTER_TRANSITION}
def={unref(getBasicTransition)}
options={routerTransitionOptions}
disabled={!unref(getEnableTransition)}
/>
</>
)
}
return () => (
<BasicDrawer {...attrs} title={t('layout.setting.drawerTitle')} width={330} class="setting-drawer">
{unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
{unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
<Divider>{() => t('layout.setting.navMode')}</Divider>
{renderSidebar()}
<Divider>{() => t('layout.setting.sysTheme')}</Divider>
{renderMainTheme()}
<Divider>{() => t('layout.setting.headerTheme')}</Divider>
{renderHeaderTheme()}
<Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
{renderSiderTheme()}
<Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
{renderFeatures()}
<Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
{renderContent()}
<Divider>{() => t('layout.setting.animation')}</Divider>
{renderTransition()}
<Divider />
<SettingFooter />
</BasicDrawer>
)
},
})