feat(projects): new layout,tab and add update theme settings

src/layouts/common/setting-drawer/components/layout-mode/components/index.ts

@@ -1,3 +1,4 @@
 import LayoutCheckbox from './layout-checkbox.vue';
+import LayoutCard from './layout-card.vue';
 
-export { LayoutCheckbox };
+export { LayoutCheckbox, LayoutCard };

src/layouts/common/setting-drawer/components/layout-mode/components/layout-card.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="border-2px rounded-6px cursor-pointer hover:border-primary"
+    :class="[checked ? 'border-primary' : 'border-transparent']"
+  >
+    <n-tooltip :placement="activeConfig.placement" trigger="hover">
+      <template #trigger>
+        <div
+          class="layout-card__shadow gap-6px w-96px h-64px p-6px rd-4px"
+          :class="[mode.includes('vertical') ? 'flex' : 'flex-col']"
+        >
+          <slot></slot>
+        </div>
+      </template>
+      <span>{{ label }}</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PopoverPlacement } from 'naive-ui';
+
+defineOptions({ name: 'LayoutCard' });
+
+interface Props {
+  /** 布局模式 */
+  mode: UnionKey.ThemeLayoutMode;
+  /** 布局模式文本 */
+  label: string;
+  /** 选中状态 */
+  checked: boolean;
+}
+
+const props = defineProps<Props>();
+
+type LayoutConfig = Record<
+  UnionKey.ThemeLayoutMode,
+  {
+    placement: PopoverPlacement;
+    headerClass: string;
+    menuClass: string;
+    mainClass: string;
+  }
+>;
+
+const layoutConfig: LayoutConfig = {
+  vertical: {
+    placement: 'bottom-start',
+    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-end',
+    headerClass: '',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  }
+};
+
+const activeConfig = computed(() => layoutConfig[props.mode]);
+</script>
+
+<style scoped>
+.layout-card__shadow {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>

src/layouts/common/setting-drawer/components/layout-mode/index.vue

@@ -1,24 +1,57 @@
 <template>
   <n-divider title-placement="center">布局模式</n-divider>
-  <n-space justify="space-between">
-    <layout-checkbox
+  <n-space justify="space-around" :wrap="true" :size="24" class="px-12px">
+    <layout-card
       v-for="item in theme.layout.modeList"
       :key="item.value"
       :mode="item.value"
       :label="item.label"
       :checked="item.value === theme.layout.mode"
       @click="theme.setLayoutMode(item.value)"
-    />
+    >
+      <template v-if="item.value === 'vertical'">
+        <div class="w-18px h-full bg-primary:50 rd-4px"></div>
+        <div class="flex-1 flex-col gap-6px">
+          <div class="h-16px bg-primary rd-4px"></div>
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+      <template v-if="item.value === 'vertical-mix'">
+        <div class="w-8px h-full bg-primary:50 rd-4px"></div>
+        <div class="w-16px h-full bg-primary:50 rd-4px"></div>
+        <div class="flex-1 flex-col gap-6px">
+          <div class="h-16px bg-primary rd-4px"></div>
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+      <template v-if="item.value === 'horizontal'">
+        <div class="h-16px bg-primary rd-4px"></div>
+        <div class="flex-1 flex gap-6px">
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+      <template v-if="item.value === 'horizontal-mix'">
+        <div class="h-16px bg-primary rd-4px"></div>
+        <div class="flex-1 flex gap-6px">
+          <div class="w-18px bg-primary:50 rd-4px"></div>
+          <div class="flex-1 bg-primary:25 rd-4px"></div>
+        </div>
+      </template>
+    </layout-card>
   </n-space>
 </template>
 
 <script setup lang="ts">
 import { useThemeStore } from '@/store';
-import { LayoutCheckbox } from './components';
+import { LayoutCard } from './components';
 
 defineOptions({ name: 'LayoutMode' });
 
 const theme = useThemeStore();
 </script>
 
-<style scoped></style>
+<style scoped>
+.layout-card__shadow {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>