refactor(@vben/layouts): remove @vben/widgets and migrate to @vben/layouts/src/widgets

2024-07-09 22:49:36 +08:00
parent d26a4ee022
commit 2731a1ec96
81 changed files with 62 additions and 182 deletions
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { computed } from 'vue';
+
+import { $t } from '@vben-core/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const props = defineProps<{ disabled?: boolean }>();
+
+const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
+const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
+const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
+const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
+const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
+
+const typeItems: SelectListItem[] = [
+  { label: $t('preferences.normal'), value: 'normal' },
+  { label: $t('preferences.breadcrumb.background'), value: 'background' },
+];
+
+const disableItem = computed(() => {
+  return !breadcrumbEnable.value || props.disabled;
+});
+</script>
+
+<template>
+  <SwitchItem v-model="breadcrumbEnable" :disabled="disabled">
+    {{ $t('preferences.breadcrumb.enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbHideOnlyOne" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb.hide-only-one') }}
+  </SwitchItem>
+  <SwitchItem v-model="breadcrumbShowIcon" :disabled="disableItem">
+    {{ $t('preferences.breadcrumb.icon') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="breadcrumbShowHome"
+    :disabled="disableItem || !breadcrumbShowIcon"
+  >
+    {{ $t('preferences.breadcrumb.home') }}
+  </SwitchItem>
+  <ToggleItem
+    v-model="breadcrumbStyleType"
+    :disabled="disableItem"
+    :items="typeItems"
+  >
+    {{ $t('preferences.breadcrumb.style') }}
+  </ToggleItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/content.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/content.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { type Component, computed } from 'vue';
+
+import { $t } from '@vben-core/locales';
+
+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('preferences.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>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/copyright.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/copyright.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { $t } from '@vben-core/locales';
+
+import InputItem from '../input-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const props = defineProps<{ disabled: boolean }>();
+
+const copyrightEnable = defineModel<boolean>('copyrightEnable');
+const copyrightDate = defineModel<string>('copyrightDate');
+const copyrightIcp = defineModel<string>('copyrightIcp');
+const copyrightIcpLink = defineModel<string>('copyrightIcpLink');
+const copyrightCompanyName = defineModel<string>('copyrightCompanyName');
+const copyrightCompanySiteLink = defineModel<string>(
+  'copyrightCompanySiteLink',
+);
+
+const itemDisabled = computed(() => props.disabled || !copyrightEnable.value);
+</script>
+
+<template>
+  <SwitchItem v-model="copyrightEnable" :disabled="disabled">
+    {{ $t('preferences.copyright.enable') }}
+  </SwitchItem>
+
+  <InputItem v-model="copyrightCompanyName" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.company-name') }}
+  </InputItem>
+  <InputItem v-model="copyrightCompanySiteLink" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.company-site-link') }}
+  </InputItem>
+  <InputItem v-model="copyrightDate" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.date') }}
+  </InputItem>
+
+  <InputItem v-model="copyrightIcp" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.icp') }}
+  </InputItem>
+  <InputItem v-model="copyrightIcpLink" :disabled="itemDisabled">
+    {{ $t('preferences.copyright.icp-link') }}
+  </InputItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/footer.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/footer.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben-core/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+const footerEnable = defineModel<boolean>('footerEnable');
+const footerFixed = defineModel<boolean>('footerFixed');
+</script>
+
+<template>
+  <SwitchItem v-model="footerEnable">
+    {{ $t('preferences.footer.visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="footerFixed" :disabled="!footerEnable">
+    {{ $t('preferences.footer.fixed') }}
+  </SwitchItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
+
+import { $t } from '@vben-core/locales';
+
+import SelectItem from '../select-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const headerEnable = defineModel<boolean>('headerEnable');
+const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
+
+const localeItems: SelectListItem[] = [
+  {
+    label: $t('preferences.header.mode-static'),
+    value: 'static',
+  },
+  {
+    label: $t('preferences.header.mode-fixed'),
+    value: 'fixed',
+  },
+  {
+    label: $t('preferences.header.mode-auto'),
+    value: 'auto',
+  },
+  {
+    label: $t('preferences.header.mode-auto-scroll'),
+    value: 'auto-scroll',
+  },
+];
+</script>
+
+<template>
+  <SwitchItem v-model="headerEnable" :disabled="disabled">
+    {{ $t('preferences.header.visible') }}
+  </SwitchItem>
+  <SelectItem
+    v-model="headerMode"
+    :disabled="!headerEnable"
+    :items="localeItems"
+  >
+    {{ $t('preferences.mode') }}
+  </SelectItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/interface-control.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/interface-control.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@vben-core/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('preferences.tabbar.enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="logoVisible">
+    {{ $t('preferences.logo-visible') }}
+  </SwitchItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import type { LayoutType } from '@vben/types';
+
+import { type Component, computed } from 'vue';
+
+import { MdiQuestionMarkCircleOutline } from '@vben-core/iconify';
+import { $t } from '@vben-core/locales';
+import { VbenTooltip } from '@vben-core/shadcn-ui';
+
+import {
+  FullContent,
+  HeaderNav,
+  MixedNav,
+  SidebarMixedNav,
+  SidebarNav,
+} from '../../icons';
+
+interface PresetItem {
+  name: string;
+  tip: string;
+  type: LayoutType;
+}
+
+defineOptions({
+  name: 'PreferenceLayout',
+});
+
+const modelValue = defineModel<LayoutType>({ default: 'sidebar-nav' });
+
+const components: Record<LayoutType, Component> = {
+  'full-content': FullContent,
+  'header-nav': HeaderNav,
+  'mixed-nav': MixedNav,
+  'sidebar-mixed-nav': SidebarMixedNav,
+  'sidebar-nav': SidebarNav,
+};
+
+const PRESET = computed((): PresetItem[] => [
+  {
+    name: $t('preferences.vertical'),
+    tip: $t('preferences.vertical-tip'),
+    type: 'sidebar-nav',
+  },
+  {
+    name: $t('preferences.two-column'),
+    tip: $t('preferences.two-column-tip'),
+    type: 'sidebar-mixed-nav',
+  },
+  {
+    name: $t('preferences.horizontal'),
+    tip: $t('preferences.vertical-tip'),
+    type: 'header-nav',
+  },
+  {
+    name: $t('preferences.mixed-menu'),
+    tip: $t('preferences.mixed-menu-tip'),
+    type: 'mixed-nav',
+  },
+  {
+    name: $t('preferences.full-content'),
+    tip: $t('preferences.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>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectListItem } from '@vben/types';
+
+import { $t } from '@vben-core/locales';
+
+import SwitchItem from '../switch-item.vue';
+import ToggleItem from '../toggle-item.vue';
+
+defineOptions({
+  name: 'PreferenceNavigationConfig',
+});
+
+defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
+
+const navigationStyleType = defineModel<string>('navigationStyleType');
+const navigationSplit = defineModel<boolean>('navigationSplit');
+const navigationAccordion = defineModel<boolean>('navigationAccordion');
+
+const stylesItems: SelectListItem[] = [
+  { label: $t('preferences.rounded'), value: 'rounded' },
+  { label: $t('preferences.plain'), value: 'plain' },
+];
+</script>
+
+<template>
+  <ToggleItem
+    v-model="navigationStyleType"
+    :disabled="disabled"
+    :items="stylesItems"
+  >
+    {{ $t('preferences.navigation-menu.style') }}
+  </ToggleItem>
+  <SwitchItem
+    v-model="navigationSplit"
+    :disabled="disabledNavigationSplit || disabled"
+  >
+    {{ $t('preferences.navigation-menu.split') }}
+    <template #tip>
+      {{ $t('preferences.navigation-menu.split-tip') }}
+    </template>
+  </SwitchItem>
+  <SwitchItem v-model="navigationAccordion" :disabled="disabled">
+    {{ $t('preferences.navigation-menu.accordion') }}
+  </SwitchItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/sidebar.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { $t } from '@vben-core/locales';
+
+import NumberFieldItem from '../number-field-item.vue';
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceBreadcrumbConfig',
+});
+
+defineProps<{ disabled: boolean }>();
+
+const sidebarEnable = defineModel<boolean>('sidebarEnable');
+const sidebarWidth = defineModel<number>('sidebarWidth');
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
+);
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+</script>
+
+<template>
+  <SwitchItem v-model="sidebarEnable" :disabled="disabled">
+    {{ $t('preferences.sidebar.visible') }}
+  </SwitchItem>
+  <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
+    {{ $t('preferences.sidebar.collapsed') }}
+  </SwitchItem>
+  <SwitchItem
+    v-model="sidebarCollapsedShowTitle"
+    :disabled="!sidebarEnable || disabled"
+  >
+    {{ $t('preferences.sidebar.collapsed-show-title') }}
+  </SwitchItem>
+  <NumberFieldItem
+    v-model="sidebarWidth"
+    :disabled="!sidebarEnable || disabled"
+    :max="320"
+    :min="160"
+    :step="10"
+  >
+    {{ $t('preferences.sidebar.width') }}
+  </NumberFieldItem>
+</template>
--- a/packages/business/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
+++ b/packages/business/layouts/src/widgets/preferences/blocks/layout/tabbar.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { $t } from '@vben-core/locales';
+
+import SwitchItem from '../switch-item.vue';
+
+defineOptions({
+  name: 'PreferenceTabsConfig',
+});
+
+defineProps<{ disabled?: boolean }>();
+
+const tabbarEnable = defineModel<boolean>('tabbarEnable');
+const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
+</script>
+
+<template>
+  <SwitchItem v-model="tabbarEnable" :disabled="disabled">
+    {{ $t('preferences.tabbar.enable') }}
+  </SwitchItem>
+  <SwitchItem v-model="tabbarShowIcon" :disabled="!tabbarEnable">
+    {{ $t('preferences.tabbar.icon') }}
+  </SwitchItem>
+</template>