refactor(layouts): SwitchItem改为传入callback

vbenjs · Nov 17, 2023 · 7938a84 · 7938a84
1 parent 03b8e1d
commit 7938a84
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 109 deletions.
diff --git a/packages/layouts/src/components/setting/components/Content.vue b/packages/layouts/src/components/setting/components/Content.vue
@@ -8,6 +8,11 @@ import {
   useHeaderSetting,
   useMultipleTabSetting,
 } from '@vben/hooks'
+
+import { context } from '../../../../bridge'
+const { useAppConfig } = context
+const { baseHandler } = useAppConfig()
+
 const { t } = useI18n()
 
 const {
@@ -26,80 +31,86 @@ const { getShowHeader } = useHeaderSetting()
 
 const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } =
   useMultipleTabSetting()
+
+const eventHandler = (evt: HandlerSettingEnum, val: boolean) => {
+  baseHandler(evt, val)
+}
 </script>
 <template>
   <VbenSpace vertical>
     <SwitchItem
       :title="t('layout.setting.breadcrumb')"
-      :def="getShowBreadCrumb"
-      :event="HandlerSettingEnum.SHOW_BREADCRUMB"
+      :value="getShowBreadCrumb"
+      :callback="(v) => eventHandler(HandlerSettingEnum.SHOW_BREADCRUMB, v)"
       :disabled="!getShowHeader"
     />
     <SwitchItem
       :title="t('layout.setting.breadcrumbIcon')"
-      :def="getShowBreadCrumbIcon"
-      :event="HandlerSettingEnum.SHOW_BREADCRUMB_ICON"
+      :value="getShowBreadCrumbIcon"
+      :callback="
+        (v) => eventHandler(HandlerSettingEnum.SHOW_BREADCRUMB_ICON, v)
+      "
       :disabled="!getShowBreadCrumb"
     />
     <SwitchItem
       :title="t('layout.setting.tabs')"
-      :def="getShowMultipleTab"
-      :event="HandlerSettingEnum.TABS_SHOW"
+      :value="getShowMultipleTab"
+      :callback="(v) => eventHandler(HandlerSettingEnum.TABS_SHOW, v)"
     />
     <SwitchItem
       :title="t('layout.setting.tabsRedoBtn')"
-      :def="getShowRedo"
-      :event="HandlerSettingEnum.TABS_SHOW_REDO"
+      :value="getShowRedo"
+      :callback="(v) => eventHandler(HandlerSettingEnum.TABS_SHOW_REDO, v)"
       :disabled="!getShowMultipleTab"
     />
     <SwitchItem
       :title="t('layout.setting.tabsQuickBtn')"
-      :def="getShowQuick"
-      :event="HandlerSettingEnum.TABS_SHOW_QUICK"
+      :value="getShowQuick"
+      :callback="(v) => eventHandler(HandlerSettingEnum.TABS_SHOW_QUICK, v)"
       :disabled="!getShowMultipleTab"
     />
     <SwitchItem
       :title="t('layout.setting.tabsFoldBtn')"
-      :def="getShowFold"
-      :event="HandlerSettingEnum.TABS_SHOW_FOLD"
+      :value="getShowFold"
+      :callback="(v) => eventHandler(HandlerSettingEnum.TABS_SHOW_FOLD, v)"
       :disabled="!getShowMultipleTab"
     />
     <SwitchItem
       :title="t('layout.setting.sidebar')"
       :def="getShowMenu"
-      :event="HandlerSettingEnum.MENU_SHOW_SIDEBAR"
+      :callback="(v) => eventHandler(HandlerSettingEnum.MENU_SHOW_SIDEBAR, v)"
       :disabled="getIsHorizontal"
     />
     <SwitchItem
       :title="t('layout.setting.header')"
-      :def="getShowHeader"
-      :event="HandlerSettingEnum.HEADER_SHOW"
+      :value="getShowHeader"
+      :callback="(v) => eventHandler(HandlerSettingEnum.HEADER_SHOW, v)"
     />
     <SwitchItem
       title="Logo"
-      :def="getShowLogo"
-      :event="HandlerSettingEnum.SHOW_LOGO"
+      :value="getShowLogo"
+      :callback="(v) => eventHandler(HandlerSettingEnum.SHOW_LOGO, v)"
       :disabled="getIsMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.footer')"
-      :def="getShowFooter"
-      :event="HandlerSettingEnum.SHOW_FOOTER"
+      :value="getShowFooter"
+      :callback="(v) => eventHandler(HandlerSettingEnum.SHOW_FOOTER, v)"
     />
     <SwitchItem
       :title="t('layout.setting.fullContent')"
-      :def="getFullContent"
-      :event="HandlerSettingEnum.FULL_CONTENT"
+      :value="getFullContent"
+      :callback="(v) => eventHandler(HandlerSettingEnum.FULL_CONTENT, v)"
     />
     <SwitchItem
       :title="t('layout.setting.grayMode')"
-      :def="getGrayMode"
-      :event="HandlerSettingEnum.GRAY_MODE"
+      :value="getGrayMode"
+      :callback="(v) => eventHandler(HandlerSettingEnum.GRAY_MODE, v)"
     />
     <SwitchItem
       :title="t('layout.setting.colorWeak')"
-      :def="getColorWeak"
-      :event="HandlerSettingEnum.COLOR_WEAK"
+      :value="getColorWeak"
+      :callback="(v) => eventHandler(HandlerSettingEnum.COLOR_WEAK, v)"
     />
   </VbenSpace>
 </template>
diff --git a/packages/layouts/src/components/setting/components/Features.vue b/packages/layouts/src/components/setting/components/Features.vue
@@ -19,7 +19,8 @@ import { useI18n } from '@vben/locale'
 
 const { t } = useI18n()
 
-const { useMenuSetting, useHeaderSetting, useRootSetting } = context
+const { useMenuSetting, useHeaderSetting, useRootSetting, useAppConfig } =
+  context
 
 const { getContentMode, getLockTime } = useRootSetting()
 
@@ -59,73 +60,85 @@ const some = triggerOptions.some((item) => item.value === unref(getTrigger))
 if (!some) {
   setMenuSetting({ trigger: TriggerEnum.FOOTER })
 }
+
+const { baseHandler } = useAppConfig()
+const eventHandler = (evt: HandlerSettingEnum, val: boolean) => {
+  baseHandler(evt, val)
+}
 </script>
 <template>
   <VbenSpace vertical>
     <SwitchItem
       :title="t('layout.setting.splitMenu')"
-      :def="getSplit"
-      :event="HandlerSettingEnum.MENU_SPLIT"
+      :value="getSplit"
+      :callback="(v) => eventHandler(HandlerSettingEnum.MENU_SPLIT, v)"
       :disabled="!getShowMenuRef || getMenuType !== NavBarModeEnum.MIX"
     />
     <SwitchItem
       :title="t('layout.setting.mixSidebarFixed')"
-      :def="getMixSideFixed"
-      :event="HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR"
+      :value="getMixSideFixed"
+      :callback="
+        (v) => eventHandler(HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR, v)
+      "
       :disabled="!getIsMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.closeMixSidebarOnChange')"
-      :def="getCloseMixSidebarOnChange"
-      :event="HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE"
+      :value="getCloseMixSidebarOnChange"
+      :callback="
+        (v) =>
+          eventHandler(HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE, v)
+      "
       :disabled="!getIsMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.menuCollapse')"
-      :def="getCollapsed"
-      :event="HandlerSettingEnum.MENU_COLLAPSED"
+      :value="getCollapsed"
+      :callback="(v) => eventHandler(HandlerSettingEnum.MENU_COLLAPSED, v)"
       :disabled="!getShowMenuRef"
     />
     <SwitchItem
       :title="t('layout.setting.menuDrag')"
-      :def="getCanDrag"
-      :event="HandlerSettingEnum.MENU_HAS_DRAG"
+      :value="getCanDrag"
+      :callback="(v) => eventHandler(HandlerSettingEnum.MENU_HAS_DRAG, v)"
       :disabled="!getShowMenuRef"
     />
     <SwitchItem
       :title="t('layout.setting.menuSearch')"
-      :def="getShowSearch"
-      :event="HandlerSettingEnum.HEADER_SEARCH"
+      :value="getShowSearch"
+      :callback="(v) => eventHandler(HandlerSettingEnum.HEADER_SEARCH, v)"
       :disabled="!getShowHeader"
     />
     <SwitchItem
       :title="t('layout.setting.menuAccordion')"
-      :def="getAccordion"
-      :event="HandlerSettingEnum.MENU_ACCORDION"
+      :value="getAccordion"
+      :callback="(v) => eventHandler(HandlerSettingEnum.MENU_ACCORDION, v)"
       :disabled="!getShowMenuRef"
     />
     <SwitchItem
       :title="t('layout.setting.collapseMenuDisplayName')"
-      :def="getCollapsedShowTitle"
-      :event="HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE"
+      :value="getCollapsedShowTitle"
+      :callback="
+        (v) => eventHandler(HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE, v)
+      "
       :disabled="!getShowMenuRef || !getCollapsed || getIsMixSidebar"
     />
     <SwitchItem
       :title="t('layout.setting.fixedHeader')"
-      :def="getHeaderFixed"
-      :event="HandlerSettingEnum.HEADER_FIXED"
+      :value="getHeaderFixed"
+      :callback="(v) => eventHandler(HandlerSettingEnum.HEADER_FIXED, v)"
       :disabled="!getShowHeader"
     />
     <SwitchItem
       :title="t('layout.setting.fixedSideBar')"
-      :def="getMenuFixed"
-      :event="HandlerSettingEnum.MENU_FIXED"
+      :value="getMenuFixed"
+      :callback="(v) => eventHandler(HandlerSettingEnum.MENU_FIXED, v)"
       :disabled="!getShowMenuRef || getIsMixSidebar"
     />
     <SelectItem
       :title="t('layout.setting.mixSidebarTrigger')"
       :options="mixSidebarTriggerOptions"
-      :def="getMixSideTrigger"
+      :value="getMixSideTrigger"
       :event="HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR"
       :disabled="!getIsMixSidebar"
     />

diff --git a/packages/layouts/src/components/setting/components/SwitchItem.vue b/packages/layouts/src/components/setting/components/SwitchItem.vue
@@ -1,32 +1,32 @@
 <script lang="ts" setup name="SwitchItem">
 import { PropType } from 'vue'
-import { HandlerSettingEnum } from '@vben/constants'
-import { context } from '../../../../bridge'
-const { useAppConfig } = context
-const { baseHandler } = useAppConfig()
 
 const props = defineProps({
   title: { type: String, default: '' },
-  def: {
+  value: {
     type: Boolean as PropType<boolean>,
   },
-  event: {
-    type: Number as PropType<HandlerSettingEnum>,
+  callback: {
+    type: Function as PropType<(val: boolean) => void>,
     required: true,
   },
   disabled: {
     type: Boolean,
   },
 })
-const onChange = (value: any) => {
-  baseHandler(props.event, value)
+const onChange = (value: boolean) => {
+  props.callback(value)
 }
 </script>
 <template>
   <div class="switch-item">
     <VbenSpace justify="space-between" align="center">
       <span>{{ title }}</span>
-      <VbenSwitch :value="def" :disabled="disabled" @update:value="onChange">
+      <VbenSwitch
+        :value="props.value"
+        :disabled="disabled"
+        @update:value="onChange"
+      >
         <template #checked-icon>
           <VbenIconify icon="ant-design:check-outlined" color="#18A058" />
         </template>

diff --git a/packages/layouts/src/components/setting/components/ThemeEditor.vue b/packages/layouts/src/components/setting/components/ThemeEditor.vue
@@ -1,23 +1,19 @@
 <script lang="ts" setup>
 import {
   APP_PRESET_COLOR_LIST,
-  HandlerSettingEnum,
   HEADER_PRESET_BG_COLOR_LIST,
-  SIDE_BAR_BG_COLOR_LIST,
   ThemeChangeEnum,
 } from '@vben/constants'
 import { useI18n } from '@vben/locale'
 import { useAppTheme } from '@vben/hooks'
 import { context } from '../../../../bridge'
 import ThemeColorPicker from './ThemeColorPicker.vue'
 import SwitchItem from '#/components/setting/components/SwitchItem.vue'
-import ThemeSwitch from '#/components/setting/components/ThemeSwitch.vue'
 
 const { t } = useI18n()
 
-const { useMenuSetting, useHeaderSetting } = context
+const { useHeaderSetting } = context
 
-const { getMenuBgColor } = useMenuSetting()
 const { getHeaderBgColor } = useHeaderSetting()
 
 const {
@@ -66,7 +62,7 @@ const {
         :colorList="HEADER_PRESET_BG_COLOR_LIST"
       />
     </VbenSpace>
-    <ThemeSwitch
+    <SwitchItem
       :title="t('layout.setting.sidebarDark')"
       :value="isSidebarDark"
       :callback="toggleSidebarTheme"

diff --git a/packages/layouts/src/components/setting/components/ThemeSwitch.vue b/packages/layouts/src/components/setting/components/ThemeSwitch.vue