99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<script setup lang="ts">
|
||
// import { MeModal } from '@/components'
|
||
const [modalRef] = useModal()
|
||
</script>
|
||
|
||
<template>
|
||
123
|
||
<div>
|
||
<n-tooltip trigger="hover" placement="left">
|
||
<template #trigger>
|
||
<IconSettings size="32" @click="modalRef.open()" filled class="cursor-pointer text-32 color-primary" />
|
||
</template>
|
||
布局设置
|
||
</n-tooltip>
|
||
<MeModal
|
||
ref="modalRef"
|
||
title="布局设置"
|
||
:show-footer="false"
|
||
width="600px"
|
||
:modal-style="{ opacity: 0.85 }"
|
||
>
|
||
<n-space justify="space-between">
|
||
<div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('simple')">
|
||
<div class="flex">
|
||
<n-skeleton :width="20" :height="60" />
|
||
<div class="ml-4">
|
||
<n-skeleton :width="80" :height="60" />
|
||
</div>
|
||
</div>
|
||
<n-button
|
||
class="mt-12"
|
||
size="small"
|
||
:type="appStore.layout === 'simple' ? 'primary' : ''"
|
||
ghost
|
||
>
|
||
简约
|
||
</n-button>
|
||
</div>
|
||
<div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('normal')">
|
||
<div class="flex">
|
||
<n-skeleton :width="20" :height="60" />
|
||
<div class="ml-4">
|
||
<n-skeleton :width="80" :height="10" />
|
||
<n-skeleton class="mt-4" :width="80" :height="46" />
|
||
</div>
|
||
</div>
|
||
<n-button
|
||
class="mt-12"
|
||
size="small"
|
||
:type="appStore.layout === 'normal' ? 'primary' : ''"
|
||
ghost
|
||
>
|
||
通用
|
||
</n-button>
|
||
</div>
|
||
|
||
<div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('full')">
|
||
<div class="flex">
|
||
<n-skeleton :width="20" :height="60" />
|
||
<div class="ml-4">
|
||
<n-skeleton :width="80" :height="6" />
|
||
<n-skeleton class="mt-4" :width="80" :height="4" />
|
||
<n-skeleton class="mt-4" :width="80" :height="42" />
|
||
</div>
|
||
</div>
|
||
<n-button
|
||
class="mt-12"
|
||
size="small"
|
||
:type="appStore.layout === 'full' ? 'primary' : ''"
|
||
ghost
|
||
>
|
||
全面
|
||
</n-button>
|
||
</div>
|
||
<div class="flex-col cursor-pointer justify-center" @click="appStore.setLayout('empty')">
|
||
<div class="flex">
|
||
<n-skeleton :width="104" :height="60" />
|
||
</div>
|
||
<n-button
|
||
class="mt-12"
|
||
size="small"
|
||
:type="appStore.layout === 'empty' ? 'primary' : ''"
|
||
ghost
|
||
>
|
||
空白
|
||
</n-button>
|
||
</div>
|
||
</n-space>
|
||
<p class="mt-16 opacity-50">
|
||
注: 此设置仅对未设置layout或者设置成跟随系统的页面有效，菜单设置的layout优先级最高
|
||
</p>
|
||
</MeModal>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|