refactor: refacotr preference

packages/business/common-ui/src/preferences/blocks/layout/breadcrumb.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const breadcrumbVisible = defineModel<boolean>('breadcrumbVisible');
+const breadcrumbIcon = defineModel<boolean>('breadcrumbIcon');
+const breadcrumbStyle = defineModel<string>('breadcrumbStyle');
+const breadcrumbHome = defineModel<boolean>('breadcrumbHome');
+const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
+
+const typeItems: SelectListItem[] = [
+  { label: $t('preference.normal'), value: 'normal' },
+  { label: $t('preference.breadcrumb-background'), value: 'background' },
+];
+</script>
+
+<template>
+  <SwitchItem v-model="breadcrumbVisible" :disabled="disabled">
+    {{ $t('preference.breadcrumb-enable') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="breadcrumbHideOnlyOne"
+    :disabled="!breadcrumbVisible || disabled"
+  >
+    {{ $t('preference.breadcrumb-hide-only-one') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="breadcrumbHome"
+    :disabled="!breadcrumbVisible || disabled"
+  >
+    {{ $t('preference.breadcrumb-home') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="breadcrumbIcon"
+    :disabled="!breadcrumbVisible || disabled"
+  >
+    {{ $t('preference.breadcrumb-icon') }}
+  </SwitchItem>
+  <ToggleItem
+    v-model="breadcrumbStyle"
+    :items="typeItems"
+    :disabled="!breadcrumbVisible || disabled"
+  >
+    {{ $t('preference.breadcrumb-style') }}
+  </ToggleItem>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/content.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+import { type Component, computed } from 'vue';
+
+import { ContentCompact, ContentWide } from '../../icons';
+
+defineOptions({
+  name: 'PreferenceLayoutContent',
+});
+
+const modelValue = defineModel<string>({ default: 'wide' });
+
+const components: Record<string, Component> = {
+  compact: ContentCompact,
+  wide: ContentWide,
+};
+
+const PRESET = computed(() => [
+  {
+    name: $t('preference.wide'),
+    type: 'wide',
+  },
+  {
+    name: '定宽',
+    type: 'compact',
+  },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div class="text-muted-foreground mt-2 text-center text-xs">
+          {{ theme.name }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/footer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const footerVisible = defineModel<boolean>('footerVisible');
+const footerFixed = defineModel<boolean>('footerFixed');
+</script>
+
+<template>
+  <SwitchItem v-model="footerVisible">
+    {{ $t('preference.footer-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="footerFixed" :disabled="!footerVisible">
+    {{ $t('preference.footer-fixed') }}
+  </SwitchItem>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/header.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const headerVisible = defineModel<boolean>('headerVisible');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+
+const localeItems: SelectListItem[] = [
+  {
+    label: $t('preference.header-mode-static'),
+    value: 'static',
+  },
+  {
+    label: $t('preference.header-mode-fixed'),
+    value: 'fixed',
+  },
+  {
+    label: $t('preference.header-mode-auto'),
+    value: 'auto',
+  },
+  {
+    label: $t('preference.header-mode-auto-scroll'),
+    value: 'auto-scroll',
+  },
+];
+</script>
+
+<template>
+  <SwitchItem v-model="headerVisible" :disabled="disabled">
+    {{ $t('preference.header-visible') }}
+  </SwitchItem>
+  <SelectItem
+    v-model="headerMode"
+    :items="localeItems"
+    :disabled="!headerVisible"
+  >
+    {{ $t('preference.mode') }}
+  </SelectItem>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/interface-control.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceInterfaceControl',
+});
+
+const tabsVisible = defineModel<boolean>('tabsVisible');
+const logoVisible = defineModel<boolean>('logoVisible');
+</script>
+
+<template>
+  <SwitchItem v-model="tabsVisible">
+    {{ $t('preference.tabs-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="logoVisible">
+    {{ $t('preference.logo-visible') }}
+  </SwitchItem>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/layout.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { LayoutType } from '@vben/types';
+
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import { $t } from '@vben/locales';
+import { type Component, computed } from 'vue';
+
+import {
+  FullContent,
+  HeaderNav,
+  MixedNav,
+  SideMixedNav,
+  SideNav,
+} from '../../icons';
+
+interface PresetItem {
+  name: string;
+  tip: string;
+  type: LayoutType;
+}
+
+defineOptions({
+  name: 'PreferenceLayout',
+});
+
+const modelValue = defineModel<LayoutType>({ default: 'side-nav' });
+
+const components: Record<LayoutType, Component> = {
+  'full-content': FullContent,
+  'header-nav': HeaderNav,
+  'mixed-nav': MixedNav,
+  'side-mixed-nav': SideMixedNav,
+  'side-nav': SideNav,
+};
+
+const PRESET = computed((): PresetItem[] => [
+  {
+    name: $t('preference.vertical'),
+    tip: $t('preference.vertical-tip'),
+    type: 'side-nav',
+  },
+  {
+    name: $t('preference.two-column'),
+    tip: $t('preference.two-column-tip'),
+    type: 'side-mixed-nav',
+  },
+  {
+    name: $t('preference.horizontal'),
+    tip: $t('preference.vertical-tip'),
+    type: 'header-nav',
+  },
+  {
+    name: $t('preference.mixed-menu'),
+    tip: $t('preference.mixed-menu-tip'),
+    type: 'mixed-nav',
+  },
+  {
+    name: $t('preference.full-content'),
+    tip: $t('preference.full-content-tip'),
+    type: 'full-content',
+  },
+]);
+
+function activeClass(theme: string): string[] {
+  return theme === modelValue.value ? ['outline-box-active'] : [];
+}
+</script>
+
+<template>
+  <div class="flex w-full flex-wrap gap-5">
+    <template v-for="theme in PRESET" :key="theme.name">
+      <div
+        class="flex w-[100px] cursor-pointer flex-col"
+        @click="modelValue = theme.type"
+      >
+        <div :class="activeClass(theme.type)" class="outline-box flex-center">
+          <component :is="components[theme.type]" />
+        </div>
+        <div
+          class="text-muted-foreground flex-center hover:text-foreground mt-2 text-center text-xs"
+        >
+          {{ theme.name }}
+          <VbenTooltip v-if="theme.tip" side="bottom">
+            <template #trigger>
+              <MdiQuestionMarkCircleOutline class="ml-1 cursor-help" />
+            </template>
+            {{ theme.tip }}
+          </VbenTooltip>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/navigation.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceNavigationConfig',
+});
+
+defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
+
+const navigationStyle = defineModel<string>('navigationStyle');
+const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
+
+const stylesItems: SelectListItem[] = [
+  { label: $t('preference.rounded'), value: 'rounded' },
+  { label: $t('preference.plain'), value: 'plain' },
+];
+</script>
+
+<template>
+  <ToggleItem
+    v-model="navigationStyle"
+    :items="stylesItems"
+    :disabled="disabled"
+  >
+    {{ $t('preference.navigation-style') }}
+  </ToggleItem>
+  <SwitchItem
+    v-model="navigationSplit"
+    :disabled="disabledNavigationSplit || disabled"
+  >
+    {{ $t('preference.navigation-split') }}
+    <template #tip>
+      {{ $t('preference.navigation-split-tip') }}
+    </template>
+  </SwitchItem>
+  <SwitchItem v-model="navigationAccordion" :disabled="disabled">
+    {{ $t('preference.navigation-accordion') }}
+  </SwitchItem>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const sideVisible = defineModel<boolean>('sideVisible');
+const sideCollapseShowTitle = defineModel<boolean>('sideCollapseShowTitle');
+const sideCollapse = defineModel<boolean>('sideCollapse');
+</script>
+
+<template>
+  <SwitchItem v-model="sideVisible" :disabled="disabled">
+    {{ $t('preference.side-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="sideCollapse" :disabled="!sideVisible || disabled">
+    {{ $t('preference.collapse') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sideCollapseShowTitle"
+    :disabled="!sideVisible || disabled"
+  >
+    {{ $t('preference.collapse-show-title') }}
+  </SwitchItem>
+</template>

packages/business/common-ui/src/preferences/blocks/layout/tabs.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { $t } from '@vben/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTabsConfig',
+});
+
+defineProps<{ disabled?: boolean }>();
+
+const tabsVisible = defineModel<boolean>('tabsVisible');
+const tabsIcon = defineModel<boolean>('tabsIcon');
+</script>
+
+<template>
+  <SwitchItem v-model="tabsVisible" :disabled="disabled">
+    {{ $t('preference.tabs-visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabsIcon" :disabled="!tabsVisible">
+    {{ $t('preference.tabs-icon') }}
+  </SwitchItem>
+  <!-- <SwitchItem v-model="sideCollapseShowTitle" :disabled="!tabsVisible">
+    {{ $t('preference.collapse-show-title') }}
+  </SwitchItem> -->
+</template>