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 ( <> { baseHandler(HandlerEnum.CHANGE_LAYOUT, { mode: item.mode, type: item.type, split: unref(getIsHorizontal) ? false : undefined, }) }} def={unref(getMenuType)} /> ) } function renderHeaderTheme() { return } function renderSiderTheme() { return } function renderMainTheme() { return } /** * @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 ( <> { return Number.parseInt(value) === 0 ? `0(${t('layout.setting.notAutoScreenLock')})` : `${value}${t('layout.setting.minute')}` }} /> `${Number.parseInt(value)}px`} /> ) } function renderContent() { return ( <> ) } function renderTransition() { return ( <> ) } return () => ( {unref(getShowDarkModeToggle) && {() => t('layout.setting.darkMode')}} {unref(getShowDarkModeToggle) && } {() => t('layout.setting.navMode')} {renderSidebar()} {() => t('layout.setting.sysTheme')} {renderMainTheme()} {() => t('layout.setting.headerTheme')} {renderHeaderTheme()} {() => t('layout.setting.sidebarTheme')} {renderSiderTheme()} {() => t('layout.setting.interfaceFunction')} {renderFeatures()} {() => t('layout.setting.interfaceDisplay')} {renderContent()} {() => t('layout.setting.animation')} {renderTransition()} ) }, })