feat(projects): finish theme settings

soybeanjs · Nov 15, 2023 · 92b4c18 · 92b4c18
1 parent c735fd3
commit 92b4c18
Show file tree

Hide file tree

Showing 19 changed files with 409 additions and 72 deletions.
diff --git a/src/constants/app.ts b/src/constants/app.ts
@@ -25,24 +25,28 @@ export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, App.I18n.I1
 
 export const themeLayoutModeOptions = transformRecordToOption(themeLayoutModeRecord);
 
-export const themeScrollModeRecord: Record<UnionKey.ThemeScrollMode, string> = {
-  wrapper: '外层滚动',
-  content: '主体滚动'
+export const themeScrollModeRecord: Record<UnionKey.ThemeScrollMode, App.I18n.I18nKey> = {
+  wrapper: 'theme.scrollMode.wrapper',
+  content: 'theme.scrollMode.content'
 };
 
 export const themeScrollModeOptions = transformRecordToOption(themeScrollModeRecord);
 
-export const themeTabModeRecord: Record<UnionKey.ThemeTabMode, string> = {
-  chrome: '谷歌风格',
-  button: '按钮风格'
+export const themeTabModeRecord: Record<UnionKey.ThemeTabMode, App.I18n.I18nKey> = {
+  chrome: 'theme.tab.mode.chrome',
+  button: 'theme.tab.mode.button'
 };
 
 export const themeTabModeOptions = transformRecordToOption(themeTabModeRecord);
 
-export const themeHorizontalMenuPositionRecord: Record<UnionKey.ThemeHorizontalMenuPosition, string> = {
-  'flex-start': '居左',
-  center: '居中',
-  'flex-end': '居右'
+export const themePageAnimationModeRecord: Record<UnionKey.ThemePageAnimateMode, App.I18n.I18nKey> = {
+  'fade-slide': 'theme.page.mode.fade-slide',
+  fade: 'theme.page.mode.fade',
+  'fade-bottom': 'theme.page.mode.fade-bottom',
+  'fade-scale': 'theme.page.mode.fade-scale',
+  'zoom-fade': 'theme.page.mode.zoom-fade',
+  'zoom-out': 'theme.page.mode.zoom-out',
+  none: 'theme.page.mode.none'
 };
 
-export const themeHorizontalMenuPositionOptions = transformRecordToOption(themeHorizontalMenuPositionRecord);
+export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);
diff --git a/src/layouts/base-layout/index.vue b/src/layouts/base-layout/index.vue
@@ -99,6 +99,7 @@ setupMixMenuContext();
     :header-height="themeStore.header.height"
     :tab-visible="themeStore.tab.visible"
     :tab-height="themeStore.tab.height"
+    :content-class="appStore.contentXScrollable ? 'overflow-x-hidden' : ''"
     :sider-visible="siderVisible"
     :sider-width="siderWidth"
     :sider-collapsed-width="siderCollapsedWidth"

diff --git a/src/layouts/modules/global-breadcrumb/index.vue b/src/layouts/modules/global-breadcrumb/index.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { RouteKey } from '@elegant-router/types';
+import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 
 defineOptions({
   name: 'GlobalBreadcrumb'
 });
 
+const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKey } = useRouterPush();
 
@@ -16,10 +18,10 @@ function handleClickMenu(key: RouteKey) {
 </script>
 
 <template>
-  <ABreadcrumb>
+  <ABreadcrumb v-if="themeStore.header.breadcrumb.visible">
     <ABreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
       <div class="i-flex-y-center align-middle">
-        <component :is="item.icon" class="mr-4px text-icon" />
+        <component :is="item.icon" v-if="themeStore.header.breadcrumb.showIcon" class="mr-4px text-icon" />
         {{ item.label }}
       </div>
       <template v-if="item.children?.length" #overlay>

diff --git a/src/layouts/modules/global-content/index.vue b/src/layouts/modules/global-content/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 
 defineOptions({
@@ -18,15 +19,17 @@ withDefaults(defineProps<Props>(), {
 });
 
 const appStore = useAppStore();
+const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 </script>
 
 <template>
   <RouterView v-slot="{ Component, route }">
     <Transition
-      enter-active-class="animate-fade-in animate-duration-750"
-      leave-active-class="animate-fade-out animate-duration-750"
+      :name="themeStore.page.animateMode"
       mode="out-in"
+      @before-leave="appStore.setContentXScrollable(true)"
+      @after-enter="appStore.setContentXScrollable(false)"
     >
       <KeepAlive :include="routeStore.cacheRoutes">
         <component

diff --git a/src/layouts/modules/global-tab/index.vue b/src/layouts/modules/global-tab/index.vue
@@ -25,8 +25,6 @@ const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrap
 const bsScroll = ref<InstanceType<typeof BetterScroll>>();
 const tabRef = ref<HTMLElement>();
 
-const isChromeMode = true;
-
 const TAB_DATA_ID = 'data-tab-id';
 
 type TabNamedNodeMap = NamedNodeMap & {
@@ -116,7 +114,11 @@ init();
   <DarkModeContainer class="flex-y-center wh-full px-16px shadow-tab">
     <div ref="bsWrapper" class="flex-1-hidden h-full">
       <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }">
-        <div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
+        <div
+          ref="tabRef"
+          class="flex h-full pr-18px"
+          :class="[themeStore.tab.mode === 'chrome' ? 'items-end' : 'items-center gap-12px']"
+        >
           <ContextMenu
             v-for="tab in tabStore.tabs"
             :key="tab.id"
@@ -125,6 +127,7 @@ init();
           >
             <PageTab
               :[TAB_DATA_ID]="tab.id"
+              :mode="themeStore.tab.mode"
               :dark-mode="themeStore.darkMode"
               :active="tab.id === tabStore.activeTabId"
               :active-color="themeStore.themeColor"

diff --git a/src/layouts/modules/theme-drawer/index.vue b/src/layouts/modules/theme-drawer/index.vue
@@ -26,7 +26,7 @@ const appStore = useAppStore();
       <ButtonIcon icon="ant-design:close-outlined" class="h-28px" @click="appStore.closeThemeDrawer" />
     </template>
     <SimpleScrollbar>
-      <div class="py-12px px-24px">
+      <div class="pt-8px pb-24px px-24px">
         <DarkMode />
         <LayoutMode />
         <ThemeColor />

diff --git a/src/layouts/modules/theme-drawer/modules/dark-mode.vue b/src/layouts/modules/theme-drawer/modules/dark-mode.vue
@@ -36,6 +36,8 @@ const options = computed(() => getSegmentOptions());
 function handleSegmentChange(value: string | number) {
   themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
 }
+
+const showSiderInverted = computed(() => themeStore.layout.mode.includes('vertical'));
 </script>
 
 <template>
@@ -48,10 +50,29 @@ function handleSegmentChange(value: string | number) {
         </template>
       </ASegmented>
     </div>
-    <SettingItem :label="$t('theme.sider.inverted')">
-      <ASwitch v-model:checked="themeStore.sider.inverted" :disabled="themeStore.darkMode" />
-    </SettingItem>
+    <Transition name="sider-inverted">
+      <SettingItem v-if="showSiderInverted" :label="$t('theme.sider.inverted')">
+        <ASwitch v-model:checked="themeStore.sider.inverted" :disabled="themeStore.darkMode" />
+      </SettingItem>
+    </Transition>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.sider-inverted-enter-active {
+  height: 22px;
+  transition: all 0.3s ease-in-out;
+}
+
+.sider-inverted-leave-active {
+  height: 22px;
+  transition: all 0.3s ease-in-out;
+}
+
+.sider-inverted-enter-from,
+.sider-inverted-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+  height: 0;
+}
+</style>
diff --git a/src/layouts/modules/theme-drawer/modules/page-fun.vue b/src/layouts/modules/theme-drawer/modules/page-fun.vue
@@ -1,13 +1,116 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { $t } from '@/locales';
+import { useThemeStore } from '@/store/modules/theme';
+import { themeScrollModeOptions, themePageAnimationModeOptions, themeTabModeOptions } from '@/constants/app';
+import SettingItem from '../components/setting-item.vue';
 
 defineOptions({
   name: 'PageFun'
 });
+
+const themeStore = useThemeStore();
+
+const layoutMode = computed(() => themeStore.layout.mode);
+
+const isMixLayoutMode = computed(() => layoutMode.value.includes('mix'));
+
+const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wrapper');
 </script>
 
 <template>
-  <ADivider>{{ $t('theme.pageFun.title') }}</ADivider>
+  <ADivider>{{ $t('theme.pageFunTitle') }}</ADivider>
+  <TransitionGroup tag="div" name="setting-list" class="flex-vertical-stretch gap-12px">
+    <SettingItem key="1" :label="$t('theme.scrollMode.title')">
+      <ASelect v-model:value="themeStore.layout.scrollMode" class="w-120px">
+        <ASelectOption v-for="option in themeScrollModeOptions" :key="option.value" :value="option.value">
+          {{ $t(option.label) }}
+        </ASelectOption>
+      </ASelect>
+    </SettingItem>
+    <SettingItem key="2" :label="$t('theme.page.animate')">
+      <ASwitch v-model:checked="themeStore.page.animate" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.page.animate" key="3" :label="$t('theme.page.mode.title')">
+      <ASelect v-model:value="themeStore.page.animateMode" class="w-120px">
+        <ASelectOption v-for="option in themePageAnimationModeOptions" :key="option.value" :value="option.value">
+          {{ $t(option.label) }}
+        </ASelectOption>
+      </ASelect>
+    </SettingItem>
+    <SettingItem v-if="isWrapperScrollMode" key="4" :label="$t('theme.fixedHeaderAndTab')">
+      <ASwitch v-model:checked="themeStore.fixedHeaderAndTab" />
+    </SettingItem>
+    <SettingItem key="5" :label="$t('theme.header.height')">
+      <AInputNumber v-model:value="themeStore.header.height" class="w-120px" />
+    </SettingItem>
+    <SettingItem key="6" :label="$t('theme.header.breadcrumb.visible')">
+      <ASwitch v-model:checked="themeStore.header.breadcrumb.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.header.breadcrumb.visible" key="7" :label="$t('theme.header.breadcrumb.showIcon')">
+      <ASwitch v-model:checked="themeStore.header.breadcrumb.showIcon" />
+    </SettingItem>
+    <SettingItem key="8" :label="$t('theme.tab.visible')">
+      <ASwitch v-model:checked="themeStore.tab.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.tab.visible" key="9" :label="$t('theme.tab.height')">
+      <AInputNumber v-model:value="themeStore.tab.height" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.tab.visible" key="10" :label="$t('theme.tab.mode.title')">
+      <ASelect v-model:value="themeStore.tab.mode" class="w-120px">
+        <ASelectOption v-for="option in themeTabModeOptions" :key="option.value" :value="option.value">
+          {{ $t(option.label) }}
+        </ASelectOption>
+      </ASelect>
+    </SettingItem>
+    <SettingItem v-if="layoutMode === 'vertical'" key="12" :label="$t('theme.sider.width')">
+      <AInputNumber v-model:value="themeStore.sider.width" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="layoutMode === 'vertical'" key="13" :label="$t('theme.sider.collapsedWidth')">
+      <AInputNumber v-model:value="themeStore.sider.collapsedWidth" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="isMixLayoutMode" key="14" :label="$t('theme.sider.mixWidth')">
+      <AInputNumber v-model:value="themeStore.sider.mixWidth" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="isMixLayoutMode" key="15" :label="$t('theme.sider.mixCollapsedWidth')">
+      <AInputNumber v-model:value="themeStore.sider.mixCollapsedWidth" class="w-120px" />
+    </SettingItem>
+    <SettingItem v-if="layoutMode === 'vertical-mix'" key="16" :label="$t('theme.sider.mixChildMenuWidth')">
+      <AInputNumber v-model:value="themeStore.sider.mixChildMenuWidth" class="w-120px" />
+    </SettingItem>
+    <SettingItem key="17" :label="$t('theme.footer.visible')">
+      <ASwitch v-model:checked="themeStore.footer.visible" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.footer.visible && isWrapperScrollMode" key="18" :label="$t('theme.footer.fixed')">
+      <ASwitch v-model:checked="themeStore.footer.fixed" />
+    </SettingItem>
+    <SettingItem v-if="themeStore.footer.visible" key="19" :label="$t('theme.footer.height')">
+      <AInputNumber v-model:value="themeStore.footer.height" class="w-120px" />
+    </SettingItem>
+    <SettingItem
+      v-if="themeStore.footer.visible && layoutMode === 'horizontal-mix'"
+      key="20"
+      :label="$t('theme.footer.right')"
+    >
+      <ASwitch v-model:checked="themeStore.footer.right" />
+    </SettingItem>
+  </TransitionGroup>
 </template>
 
-<style scoped></style>
+<style scoped>
+.setting-list-move,
+.setting-list-enter-active,
+.setting-list-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.setting-list-enter-from,
+.setting-list-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.setting-list-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
@@ -22,7 +22,6 @@ const local: App.I18n.Schema = {
     logoutConfirm: 'Are you sure you want to log out?'
   },
   theme: {
-    themeDrawerTitle: 'Theme Configuration',
     themeSchema: {
       title: 'Theme Schema',
       light: 'Light',
@@ -36,9 +35,6 @@ const local: App.I18n.Schema = {
       'vertical-mix': 'Vertical Mix Menu Mode',
       'horizontal-mix': 'Horizontal Mix menu Mode'
     },
-    sider: {
-      inverted: 'Dark Sider'
-    },
     themeColor: {
       title: 'Theme Color',
       primary: 'Primary',
@@ -48,9 +44,57 @@ const local: App.I18n.Schema = {
       error: 'Error',
       followPrimary: 'Follow Primary'
     },
-    pageFun: {
-      title: 'Page Function'
-    }
+    scrollMode: {
+      title: 'Scroll Mode',
+      wrapper: 'Wrapper',
+      content: 'Content'
+    },
+    page: {
+      animate: 'Page Animate',
+      mode: {
+        title: 'Page Animate Mode',
+        fade: 'Fade',
+        'fade-slide': 'Slide',
+        'fade-bottom': 'Fade Zoom',
+        'fade-scale': 'Fade Scale',
+        'zoom-fade': 'Zoom Fade',
+        'zoom-out': 'Zoom Out',
+        none: 'None'
+      }
+    },
+    fixedHeaderAndTab: 'Fixed Header And Tab',
+    header: {
+      height: 'Header Height',
+      breadcrumb: {
+        visible: 'Breadcrumb Visible',
+        showIcon: 'Breadcrumb Icon Visible'
+      }
+    },
+    tab: {
+      visible: 'Tab Visible',
+      height: 'Tab Height',
+      mode: {
+        title: 'Tab Mode',
+        chrome: 'Chrome',
+        button: 'Button'
+      }
+    },
+    sider: {
+      inverted: 'Dark Sider',
+      width: 'Sider Width',
+      collapsedWidth: 'Sider Collapsed Width',
+      mixWidth: 'Mix Sider Width',
+      mixCollapsedWidth: 'Mix Sider Collapse Width',
+      mixChildMenuWidth: 'Mix Child Menu Width'
+    },
+    footer: {
+      visible: 'Footer Visible',
+      fixed: 'Fixed Footer',
+      height: 'Footer Height',
+      right: 'Right Footer'
+    },
+    themeDrawerTitle: 'Theme Configuration',
+    pageFunTitle: 'Page Function'
   },
   route: {
     login: 'Login',