2024-05-19 21:20:42 +08:00
|
|
|
<script setup lang="ts">
|
2024-06-09 12:53:38 +08:00
|
|
|
import type {
|
|
|
|
ContentCompactType,
|
|
|
|
LayoutHeaderModeType,
|
|
|
|
LayoutType,
|
|
|
|
SupportedLanguagesType,
|
|
|
|
ThemeModeType,
|
|
|
|
} from '@vben/types';
|
|
|
|
import type {
|
|
|
|
BreadcrumbStyleType,
|
|
|
|
NavigationStyleType,
|
|
|
|
} from '@vben-core/preferences';
|
2024-05-19 21:20:42 +08:00
|
|
|
import type { SegmentedItem } from '@vben-core/shadcn-ui';
|
|
|
|
|
2024-06-08 19:49:06 +08:00
|
|
|
import { computed } from 'vue';
|
|
|
|
|
|
|
|
import { $t } from '@vben/locales';
|
2024-05-19 21:20:42 +08:00
|
|
|
import { IcRoundFolderCopy, IcRoundRestartAlt } from '@vben-core/iconify';
|
2024-06-01 23:15:29 +08:00
|
|
|
import {
|
|
|
|
preferences,
|
|
|
|
resetPreferences,
|
|
|
|
usePreferences,
|
|
|
|
} from '@vben-core/preferences';
|
2024-05-19 21:20:42 +08:00
|
|
|
import {
|
|
|
|
VbenButton,
|
|
|
|
VbenIconButton,
|
|
|
|
VbenSegmented,
|
|
|
|
VbenSheet,
|
|
|
|
toast,
|
|
|
|
} from '@vben-core/shadcn-ui';
|
|
|
|
|
|
|
|
import { useClipboard } from '@vueuse/core';
|
|
|
|
|
|
|
|
import {
|
|
|
|
Animation,
|
|
|
|
Block,
|
|
|
|
Breadcrumb,
|
|
|
|
ColorMode,
|
|
|
|
Content,
|
|
|
|
Footer,
|
|
|
|
General,
|
|
|
|
Header,
|
|
|
|
Layout,
|
|
|
|
Navigation,
|
|
|
|
Sidebar,
|
2024-06-09 12:53:38 +08:00
|
|
|
Tabbar,
|
2024-05-19 21:20:42 +08:00
|
|
|
Theme,
|
|
|
|
ThemeColor,
|
|
|
|
} from './blocks';
|
|
|
|
import Trigger from './trigger.vue';
|
2024-06-01 23:15:29 +08:00
|
|
|
import { useOpenPreferences } from './use-open-preferences';
|
2024-05-19 21:20:42 +08:00
|
|
|
|
|
|
|
withDefaults(defineProps<{ colorPrimaryPresets: string[] }>(), {
|
|
|
|
colorPrimaryPresets: () => [],
|
|
|
|
});
|
|
|
|
|
2024-06-09 12:53:38 +08:00
|
|
|
const appThemeMode = defineModel<ThemeModeType>('appThemeMode');
|
|
|
|
const appLocale = defineModel<SupportedLanguagesType>('appLocale');
|
|
|
|
const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
|
|
|
|
const appLayout = defineModel<LayoutType>('appLayout');
|
|
|
|
const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
|
|
|
|
const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
|
|
|
|
const appSemiDarkMenu = defineModel<boolean>('appSemiDarkMenu');
|
|
|
|
const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
|
|
|
|
|
|
|
|
const transitionProgress = defineModel<boolean>('transitionProgress');
|
|
|
|
const transitionName = defineModel<string>('transitionName');
|
|
|
|
const transitionEnable = defineModel<boolean>('transitionEnable');
|
|
|
|
|
|
|
|
const themeColorPrimary = defineModel<string>('themeColorPrimary');
|
|
|
|
|
|
|
|
const sidebarEnable = defineModel<boolean>('sidebarEnable');
|
|
|
|
const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
|
|
|
|
const sidebarCollapseShowTitle = defineModel<boolean>(
|
|
|
|
'sidebarCollapseShowTitle',
|
|
|
|
);
|
|
|
|
|
|
|
|
const headerEnable = defineModel<boolean>('headerEnable');
|
|
|
|
const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
|
|
|
|
|
|
|
|
const breadcrumbEnable = defineModel<boolean>('breadcrumbEnable');
|
|
|
|
const breadcrumbShowIcon = defineModel<boolean>('breadcrumbShowIcon');
|
|
|
|
const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
|
|
|
|
const breadcrumbStyleType = defineModel<BreadcrumbStyleType>(
|
|
|
|
'breadcrumbStyleType',
|
|
|
|
);
|
2024-05-19 21:20:42 +08:00
|
|
|
const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
|
2024-06-09 12:53:38 +08:00
|
|
|
|
|
|
|
const tabbarEnable = defineModel<boolean>('tabbarEnable');
|
|
|
|
const tabbarShowIcon = defineModel<boolean>('tabbarShowIcon');
|
|
|
|
|
|
|
|
const navigationStyleType = defineModel<NavigationStyleType>(
|
|
|
|
'navigationStyleType',
|
|
|
|
);
|
2024-05-22 22:38:01 +08:00
|
|
|
const navigationSplit = defineModel<boolean>('navigationSplit');
|
2024-05-22 22:56:26 +08:00
|
|
|
const navigationAccordion = defineModel<boolean>('navigationAccordion');
|
2024-06-09 12:53:38 +08:00
|
|
|
|
2024-05-19 21:20:42 +08:00
|
|
|
// const logoVisible = defineModel<boolean>('logoVisible');
|
2024-06-09 12:53:38 +08:00
|
|
|
|
|
|
|
const footerEnable = defineModel<boolean>('footerEnable');
|
2024-05-19 21:20:42 +08:00
|
|
|
const footerFixed = defineModel<boolean>('footerFixed');
|
|
|
|
|
2024-06-09 12:53:38 +08:00
|
|
|
const shortcutKeysEnable = defineModel<boolean>('shortcutKeysEnable');
|
|
|
|
|
2024-05-22 22:38:01 +08:00
|
|
|
const {
|
|
|
|
diffPreference,
|
|
|
|
isFullContent,
|
|
|
|
isHeaderNav,
|
|
|
|
isMixedNav,
|
|
|
|
isSideMixedNav,
|
|
|
|
isSideMode,
|
|
|
|
isSideNav,
|
2024-06-01 23:15:29 +08:00
|
|
|
} = usePreferences();
|
2024-05-19 21:20:42 +08:00
|
|
|
const { copy } = useClipboard();
|
|
|
|
|
|
|
|
const tabs = computed((): SegmentedItem[] => {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
label: $t('preference.appearance'),
|
|
|
|
value: 'appearance',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: $t('preference.layout'),
|
|
|
|
value: 'layout',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: $t('preference.general'),
|
|
|
|
value: 'general',
|
|
|
|
},
|
2024-05-25 20:02:21 +08:00
|
|
|
// {
|
|
|
|
// label: $t('preference.shortcut-key'),
|
|
|
|
// value: 'shortcutKey',
|
|
|
|
// },
|
2024-05-19 21:20:42 +08:00
|
|
|
];
|
|
|
|
});
|
|
|
|
|
|
|
|
const showBreadcrumbConfig = computed(() => {
|
|
|
|
return (
|
|
|
|
!isFullContent.value &&
|
|
|
|
!isMixedNav.value &&
|
|
|
|
!isHeaderNav.value &&
|
2024-06-01 23:15:29 +08:00
|
|
|
preferences.header.enable
|
2024-05-19 21:20:42 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2024-06-01 23:15:29 +08:00
|
|
|
const { openPreferences } = useOpenPreferences();
|
2024-05-19 21:20:42 +08:00
|
|
|
|
|
|
|
async function handleCopy() {
|
|
|
|
await copy(JSON.stringify(diffPreference.value, null, 2));
|
|
|
|
|
|
|
|
toast($t('preference.copy-success'));
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleReset() {
|
|
|
|
if (!diffPreference.value) {
|
|
|
|
return;
|
|
|
|
}
|
2024-06-01 23:15:29 +08:00
|
|
|
resetPreferences();
|
2024-05-19 21:20:42 +08:00
|
|
|
toast($t('preference.reset-success'));
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="z-100 fixed right-0 top-1/3">
|
|
|
|
<VbenSheet
|
2024-06-01 23:15:29 +08:00
|
|
|
v-model:open="openPreferences"
|
2024-05-19 21:20:42 +08:00
|
|
|
:description="$t('preference.preferences-subtitle')"
|
|
|
|
:title="$t('preference.preferences')"
|
|
|
|
>
|
|
|
|
<template #trigger>
|
2024-05-24 23:11:03 +08:00
|
|
|
<Trigger />
|
2024-05-19 21:20:42 +08:00
|
|
|
</template>
|
|
|
|
<template #extra>
|
|
|
|
<VbenIconButton
|
|
|
|
:disabled="!diffPreference"
|
|
|
|
:tooltip="$t('preference.reset-tip')"
|
2024-06-09 13:31:43 +08:00
|
|
|
class="relative"
|
2024-05-19 21:20:42 +08:00
|
|
|
>
|
|
|
|
<span
|
|
|
|
v-if="diffPreference"
|
|
|
|
class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
|
|
|
|
></span>
|
|
|
|
<IcRoundRestartAlt class="size-5" @click="handleReset" />
|
|
|
|
</VbenIconButton>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<div class="p-5 pt-4">
|
|
|
|
<VbenSegmented :tabs="tabs" default-value="appearance">
|
|
|
|
<template #appearance>
|
|
|
|
<Block :title="$t('preference.theme')">
|
2024-06-09 12:53:38 +08:00
|
|
|
<Theme
|
|
|
|
v-model="appThemeMode"
|
|
|
|
v-model:app-semi-dark-menu="appSemiDarkMenu"
|
|
|
|
/>
|
2024-05-19 21:20:42 +08:00
|
|
|
</Block>
|
|
|
|
<Block :title="$t('preference.theme-color')">
|
|
|
|
<ThemeColor
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model="themeColorPrimary"
|
2024-05-19 21:20:42 +08:00
|
|
|
:color-primary-presets="colorPrimaryPresets"
|
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
<Block :title="$t('preference.other')">
|
|
|
|
<ColorMode
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:app-color-gray-mode="appColorGrayMode"
|
|
|
|
v-model:app-color-weak-mode="appColorWeakMode"
|
2024-05-19 21:20:42 +08:00
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
</template>
|
|
|
|
<template #layout>
|
|
|
|
<Block :title="$t('preference.layout')">
|
2024-06-09 12:53:38 +08:00
|
|
|
<Layout v-model="appLayout" />
|
2024-05-19 21:20:42 +08:00
|
|
|
</Block>
|
|
|
|
<Block :title="$t('preference.content')">
|
2024-06-09 12:53:38 +08:00
|
|
|
<Content v-model="appContentCompact" />
|
2024-05-19 21:20:42 +08:00
|
|
|
</Block>
|
|
|
|
|
|
|
|
<Block :title="$t('preference.sidebar')">
|
|
|
|
<Sidebar
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:side-collapse-show-title="sidebarCollapseShowTitle"
|
2024-06-09 13:31:43 +08:00
|
|
|
v-model:sidebar-collapse="sidebarCollapse"
|
|
|
|
v-model:sidebar-enable="sidebarEnable"
|
2024-05-19 21:20:42 +08:00
|
|
|
:disabled="!isSideMode"
|
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
|
|
|
|
<Block :title="$t('preference.header')">
|
|
|
|
<Header
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:headerEnable="headerEnable"
|
2024-05-19 21:20:42 +08:00
|
|
|
v-model:headerMode="headerMode"
|
|
|
|
:disabled="isFullContent"
|
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
|
2024-05-22 22:38:01 +08:00
|
|
|
<Block :title="$t('preference.navigation-menu')">
|
|
|
|
<Navigation
|
2024-05-22 22:56:26 +08:00
|
|
|
v-model:navigation-accordion="navigationAccordion"
|
2024-06-09 13:31:43 +08:00
|
|
|
v-model:navigation-split="navigationSplit"
|
|
|
|
v-model:navigation-style-type="navigationStyleType"
|
2024-05-22 22:38:01 +08:00
|
|
|
:disabled="isFullContent"
|
|
|
|
:disabled-navigation-split="!isMixedNav"
|
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
|
2024-05-19 21:20:42 +08:00
|
|
|
<Block :title="$t('preference.breadcrumb')">
|
|
|
|
<Breadcrumb
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:breadcrumb-enable="breadcrumbEnable"
|
2024-06-09 13:31:43 +08:00
|
|
|
v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
|
|
|
|
v-model:breadcrumb-show-home="breadcrumbShowHome"
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:breadcrumb-show-icon="breadcrumbShowIcon"
|
|
|
|
v-model:breadcrumb-style-type="breadcrumbStyleType"
|
2024-05-22 22:38:01 +08:00
|
|
|
:disabled="
|
|
|
|
!showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
|
|
|
|
"
|
2024-05-19 21:20:42 +08:00
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
|
|
|
|
<Block :title="$t('preference.tabs')">
|
2024-06-09 12:53:38 +08:00
|
|
|
<Tabbar
|
|
|
|
v-model:tabbar-enable="tabbarEnable"
|
|
|
|
v-model:tabbar-show-icon="tabbarShowIcon"
|
2024-05-19 21:20:42 +08:00
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
<Block :title="$t('preference.footer')">
|
|
|
|
<Footer
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:footer-enable="footerEnable"
|
2024-05-19 21:20:42 +08:00
|
|
|
v-model:footer-fixed="footerFixed"
|
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
</template>
|
|
|
|
<template #general>
|
|
|
|
<Block :title="$t('preference.general')">
|
2024-05-22 22:03:41 +08:00
|
|
|
<General
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:app-dynamic-title="appDynamicTitle"
|
2024-06-09 13:31:43 +08:00
|
|
|
v-model:app-locale="appLocale"
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:shortcut-keys-enable="shortcutKeysEnable"
|
2024-05-25 20:02:21 +08:00
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
|
|
|
|
<Block :title="$t('preference.animation')">
|
|
|
|
<Animation
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:transition-enable="transitionEnable"
|
2024-06-09 13:31:43 +08:00
|
|
|
v-model:transition-name="transitionName"
|
|
|
|
v-model:transition-progress="transitionProgress"
|
2024-05-25 20:02:21 +08:00
|
|
|
/>
|
|
|
|
</Block>
|
|
|
|
</template>
|
2024-06-09 12:53:38 +08:00
|
|
|
<!-- <template #shortcutKey>
|
2024-05-25 20:02:21 +08:00
|
|
|
<Block :title="$t('preference.general')">
|
|
|
|
<General
|
|
|
|
v-model:locale="locale"
|
|
|
|
v-model:dynamic-title="dynamicTitle"
|
|
|
|
v-model:shortcut-keys="shortcutKeys"
|
2024-05-22 22:03:41 +08:00
|
|
|
/>
|
2024-05-19 21:20:42 +08:00
|
|
|
</Block>
|
|
|
|
|
|
|
|
<Block :title="$t('preference.animation')">
|
|
|
|
<Animation
|
|
|
|
v-model:page-progress="pageProgress"
|
|
|
|
v-model:page-transition="pageTransition"
|
2024-06-09 12:53:38 +08:00
|
|
|
v-model:transition-enable="transitionEnable"
|
2024-05-19 21:20:42 +08:00
|
|
|
/>
|
|
|
|
</Block>
|
2024-06-09 12:53:38 +08:00
|
|
|
</template> -->
|
2024-05-19 21:20:42 +08:00
|
|
|
</VbenSegmented>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<template #footer>
|
|
|
|
<VbenButton
|
2024-06-09 13:31:43 +08:00
|
|
|
:disabled="!diffPreference"
|
2024-05-19 21:20:42 +08:00
|
|
|
class="mx-6 w-full"
|
|
|
|
size="sm"
|
2024-06-09 13:31:43 +08:00
|
|
|
variant="default"
|
2024-05-19 21:20:42 +08:00
|
|
|
@click="handleCopy"
|
|
|
|
>
|
|
|
|
<IcRoundFolderCopy class="mr-2 size-3" />
|
|
|
|
{{ $t('preference.copy') }}
|
|
|
|
</VbenButton>
|
|
|
|
</template>
|
|
|
|
</VbenSheet>
|
|
|
|
</div>
|
|
|
|
</template>
|