mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-09-17 17:26:38 +08:00
95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { PopoverPlacement } from 'naive-ui';
|
|
import { themeLayoutModeRecord } from '@/constants/app';
|
|
import { $t } from '@/locales';
|
|
|
|
defineOptions({
|
|
name: 'LayoutModeCard'
|
|
});
|
|
|
|
interface Props {
|
|
/** Layout mode */
|
|
mode: UnionKey.ThemeLayoutMode;
|
|
/** Disabled */
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
interface Emits {
|
|
/** Layout mode change */
|
|
(e: 'update:mode', mode: UnionKey.ThemeLayoutMode): void;
|
|
}
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
type LayoutConfig = Record<
|
|
UnionKey.ThemeLayoutMode,
|
|
{
|
|
placement: PopoverPlacement;
|
|
headerClass: string;
|
|
menuClass: string;
|
|
mainClass: string;
|
|
}
|
|
>;
|
|
|
|
const layoutConfig: LayoutConfig = {
|
|
vertical: {
|
|
placement: 'bottom',
|
|
headerClass: '',
|
|
menuClass: 'w-1/3 h-full',
|
|
mainClass: 'w-2/3 h-3/4'
|
|
},
|
|
'vertical-mix': {
|
|
placement: 'bottom',
|
|
headerClass: '',
|
|
menuClass: 'w-1/4 h-full',
|
|
mainClass: 'w-2/3 h-3/4'
|
|
},
|
|
horizontal: {
|
|
placement: 'bottom',
|
|
headerClass: '',
|
|
menuClass: 'w-full h-1/4',
|
|
mainClass: 'w-full h-3/4'
|
|
},
|
|
'horizontal-mix': {
|
|
placement: 'bottom',
|
|
headerClass: '',
|
|
menuClass: 'w-full h-1/4',
|
|
mainClass: 'w-2/3 h-3/4'
|
|
}
|
|
};
|
|
|
|
function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
|
|
if (props.disabled) return;
|
|
|
|
emit('update:mode', mode);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex-center flex-wrap gap-x-32px gap-y-16px">
|
|
<div
|
|
v-for="(item, key) in layoutConfig"
|
|
:key="key"
|
|
class="flex border-2px rounded-6px cursor-pointer hover:border-primary"
|
|
:class="[mode === key ? 'border-primary' : 'border-transparent']"
|
|
@click="handleChangeMode(key)"
|
|
>
|
|
<NTooltip :placement="item.placement">
|
|
<template #trigger>
|
|
<div
|
|
class="gap-6px w-96px h-64px p-6px rd-4px shadow dark:shadow-coolGray-5"
|
|
:class="[key.includes('vertical') ? 'flex' : 'flex-vertical']"
|
|
>
|
|
<slot :name="key"></slot>
|
|
</div>
|
|
</template>
|
|
{{ $t(themeLayoutModeRecord[key]) }}
|
|
</NTooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|