feat: 添加simple、normal、full 等layout布局

src/components/common/LayoutSetting.vue

@@ -0,0 +1,106 @@
+<!--------------------------------
+ - @Author: Ronnie Zhang
+ - @LastEditor: Ronnie Zhang
+ - @LastEditTime: 2023/12/16 18:49:53
+ - @Email: zclzone@outlook.com
+ - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
+ --------------------------------->
+
+<template>
+  <div>
+    <n-tooltip trigger="hover" placement="left">
+      <template #trigger>
+        <i class="i-fe:settings cursor-pointer text-32 color-primary" @click="modalRef.open()" />
+      </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>
+
+<script setup>
+import { MeModal } from '@/components'
+import { useAppStore } from '@/store'
+import { useModal } from '@/composables'
+
+const appStore = useAppStore()
+const [modalRef] = useModal()
+</script>