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>

src/components/common/ThemeSetting.vue

@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <n-popover trigger="click">
-      <template #trigger>
-        <i class="i-me-theme cursor-pointer text-40" />
-      </template>
-      <div class="h-600 w-260">
-        <h3 class="font-normal">主题设置</h3>
-
-        <n-divider>布局</n-divider>
-        <ul class="h-32 flex items-center justify-between">
-          <li
-            v-for="(item, index) in layouts"
-            :key="index"
-            class="cursor-pointer opacity-70"
-            @click="appStore.setLayout(item.value)"
-          >
-            {{ item.desc }}
-          </li>
-        </ul>
-
-        <n-divider>主题色</n-divider>
-      </div>
-    </n-popover>
-  </div>
-</template>
-
-<script setup>
-import { useAppStore } from '@/store'
-
-const appStore = useAppStore()
-const layouts = [
-  { value: 'simple', desc: '简约' },
-  { value: 'normal', desc: '通用' },
-  { value: 'full', desc: '全面' },
-  { value: 'empty', desc: '空白' },
-]
-</script>

src/components/common/index.js

@@ -2,4 +2,4 @@ export { default as AppCard } from './AppCard.vue'
 export { default as TheFooter } from './TheFooter.vue'
 export { default as AppPage } from './AppPage.vue'
 export { default as CommonPage } from './CommonPage.vue'
-export { default as ThemeSetting } from './ThemeSetting.vue'
+export { default as LayoutSetting } from './LayoutSetting.vue'

src/components/me/modal/index.vue

@@ -1,7 +1,7 @@
 <!--------------------------------
  - @Author: Ronnie Zhang
  - @LastEditor: Ronnie Zhang
- - @LastEditTime: 2023/12/12 09:03:22
+ - @LastEditTime: 2023/12/16 18:50:02
  - @Email: zclzone@outlook.com
  - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  --------------------------------->
@@ -9,7 +9,7 @@
 <template>
   <n-modal
     v-model:show="show"
-    :style="{ width: modalOptions.width, ...modalOptions.style }"
+    :style="{ width: modalOptions.width, ...modalOptions.modalStyle }"
     :preset="undefined"
     size="huge"
     :bordered="false"
@@ -78,7 +78,7 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  style: {
+  modalStyle: {
     type: Object,
     default: () => {},
   },
@@ -104,6 +104,7 @@ const modalOptions = ref({})
 function open(options = {}) {
   // 将props和options合并赋值给modalOptions
   modalOptions.value = { ...props, ...options }
+
   // 将show的值设置为true
   show.value = true
 }