feat(projects): 主题配置抽屉：迁移暗黑模式、布局模式、添加颜色选择面板

src/interface/theme.ts

@@ -1,4 +1,4 @@
-import { EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
+import { EnumThemeLayoutMode, EnumThemeTabMode, EnumThemeHorizontalMenuPosition, EnumThemeAnimateMode } from '@/enum';
 import type { ThemeLayoutMode, ThemeTabMode, ThemeHorizontalMenuPosition, ThemeAnimateMode } from './enum';
 
 /** 主题相关类型 */
@@ -37,6 +37,12 @@ interface ThemeLayout {
   minWidth: number;
   /** 布局模式 */
   mode: ThemeLayoutMode;
+  /** 布局模式列表 */
+  modeList: ThemeLayoutModeList[];
+}
+interface ThemeLayoutModeList {
+  value: ThemeLayoutMode;
+  label: EnumThemeLayoutMode;
 }
 
 /** 其他主题颜色 */

src/layouts/common/SettingDrawer/components/DarkMode/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <n-divider title-placement="center">深色主题</n-divider>
+  <div class="flex-center">
+    <n-switch :value="theme.darkMode" @update:value="theme.setDarkMode">
+      <template #checked>
+        <icon-mdi-white-balance-sunny class="text-14px text-primary" />
+      </template>
+      <template #unchecked>
+        <icon-mdi-moon-waning-crescent class="text-14px text-primary" />
+      </template>
+    </n-switch>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NDivider, NSwitch } from 'naive-ui';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+</script>
+<style scoped>
+:deep(.n-switch__rail) {
+  background-color: #000e1c !important;
+}
+</style>

src/layouts/common/SettingDrawer/components/LayoutMode/components/LayoutCheckbox.vue

@@ -0,0 +1,73 @@
+<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-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
+          <div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
+          <div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
+        </div>
+      </template>
+      <span>{{ label }}</span>
+    </n-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NTooltip } from 'naive-ui';
+import type { FollowerPlacement } from 'vueuc';
+import { EnumThemeLayoutMode } from '@/enum';
+import type { ThemeLayoutMode } from '@/interface';
+
+interface Props {
+  /** 布局模式 */
+  mode: ThemeLayoutMode;
+  /** 布局模式文本 */
+  label: EnumThemeLayoutMode;
+  /** 选中状态 */
+  checked: boolean;
+}
+
+const props = defineProps<Props>();
+
+type LayoutConfig = {
+  [key in ThemeLayoutMode]: {
+    placement: FollowerPlacement;
+    menuClass: string;
+    mainClass: string;
+  };
+};
+
+const layoutConfig: LayoutConfig = {
+  vertical: {
+    placement: 'bottom-start',
+    menuClass: 'w-1/3 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  'vertical-mix': {
+    placement: 'bottom',
+    menuClass: 'w-1/4 h-full',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  horizontal: {
+    placement: 'bottom',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-full h-3/4'
+  },
+  'horizontal-mix': {
+    placement: 'bottom-end',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  }
+};
+
+const activeConfig = computed(() => layoutConfig[props.mode]);
+</script>
+<style scoped>
+.layout-checkbox__shadow {
+  box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.18);
+}
+</style>

src/layouts/common/SettingDrawer/components/LayoutMode/components/index.ts

@@ -0,0 +1,3 @@
+import LayoutCheckbox from './LayoutCheckbox.vue';
+
+export { LayoutCheckbox };

src/layouts/common/SettingDrawer/components/LayoutMode/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <n-divider title-placement="center">布局模式</n-divider>
+  <n-space justify="space-between">
+    <layout-checkbox
+      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)"
+    />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { NDivider, NSpace } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { LayoutCheckbox } from './components';
+
+const theme = useThemeStore();
+</script>
+<style scoped></style>

src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorCheckbox.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="flex-center w-20px h-20px rounded-2px shadow cursor-pointer" :style="{ backgroundColor: color }">
+    <icon-ic-outline-check v-if="checked" :class="[iconClass, isWhite ? 'text-gray-700' : 'text-white']" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+interface Props {
+  /** 颜色 */
+  color: string;
+  /** 是否选中 */
+  checked: boolean;
+  /** 图标的class */
+  iconClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconClass: 'text-14px'
+});
+
+const whiteColors = ['#ffffff', '#fff', 'rgb(255,255,255)'];
+const isWhite = computed(() => whiteColors.includes(props.color));
+</script>
+<style scoped></style>

src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/ColorModal.vue

@@ -0,0 +1,49 @@
+<template>
+  <n-modal :show="visible" preset="card" class="w-640px h-480px" @close="handleClose">
+    <div class="flex-x-center">
+      <n-gradient-text type="primary" :size="24">中国传统颜色</n-gradient-text>
+    </div>
+    <n-tabs>
+      <n-tab-pane v-for="item in traditionColors" :key="item.label" :name="item.label" :tab="item.label">
+        <n-grid :cols="8" :x-gap="16" :y-gap="8">
+          <n-grid-item v-for="i in item.data" :key="i.label">
+            <color-checkbox
+              class="!w-full !h-36px !rounded-4px"
+              :color="i.color"
+              :checked="i.color === theme.themeColor"
+              icon-class="text-20px"
+              @click="theme.setThemeColor(i.color)"
+            />
+            <p class="text-center">{{ i.label }}</p>
+          </n-grid-item>
+        </n-grid>
+      </n-tab-pane>
+    </n-tabs>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { NModal, NGradientText, NTabs, NTabPane, NGrid, NGridItem } from 'naive-ui';
+import { traditionColors } from '@/settings';
+import { useThemeStore } from '@/store';
+import ColorCheckbox from './ColorCheckbox.vue';
+
+interface Props {
+  visible: boolean;
+}
+
+interface Emits {
+  (e: 'close'): void;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+
+function handleClose() {
+  emit('close');
+}
+</script>
+<style scoped></style>

src/layouts/common/SettingDrawer/components/ThemeColorSelect/components/index.ts

@@ -0,0 +1,4 @@
+import ColorCheckbox from './ColorCheckbox.vue';
+import ColorModal from './ColorModal.vue';
+
+export { ColorCheckbox, ColorModal };

src/layouts/common/SettingDrawer/components/ThemeColorSelect/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <n-divider title-placement="center">系统主题</n-divider>
+  <n-grid :cols="8" :x-gap="8" :y-gap="12">
+    <n-grid-item v-for="color in theme.themeColorList" :key="color" class="flex-x-center">
+      <color-checkbox :color="color" :checked="color === theme.themeColor" @click="theme.setThemeColor(color)" />
+    </n-grid-item>
+  </n-grid>
+  <n-button :block="true" :type="otherColorBtnType" class="mt-12px" @click="openModal">更多颜色</n-button>
+  <color-modal :visible="visible" @close="closeModal" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { NDivider, NGrid, NGridItem, NButton } from 'naive-ui';
+import { useThemeStore } from '@/store';
+import { useBoolean } from '@/hooks';
+import { ColorCheckbox, ColorModal } from './components';
+
+const theme = useThemeStore();
+
+const { bool: visible, setTrue: openModal, setFalse: closeModal } = useBoolean();
+
+const isInOther = computed(() => !theme.themeColorList.includes(theme.themeColor));
+const otherColorBtnType = computed(() => (isInOther.value ? 'primary' : 'default'));
+</script>
+<style scoped></style>

src/layouts/common/SettingDrawer/components/index.ts

@@ -1,3 +1,6 @@
 import DrawerButton from './DrawerButton/index.vue';
+import DarkMode from './DarkMode/index.vue';
+import LayoutMode from './LayoutMode/index.vue';
+import ThemeColorSelect from './ThemeColorSelect/index.vue';
 
-export { DrawerButton };
+export { DarkMode, DrawerButton, LayoutMode, ThemeColorSelect };

src/layouts/common/SettingDrawer/index.vue

@@ -1,14 +1,18 @@
 <template>
   <n-drawer :show="app.settingDrawerVisible" display-directive="show" :width="330" @mask-click="app.closeSettingDrawer">
-    <n-drawer-content title="主题配置" :native-scrollbar="false"></n-drawer-content>
+    <n-drawer-content title="主题配置" :native-scrollbar="false">
+      <dark-mode />
+      <layout-mode />
+      <theme-color-select />
+    </n-drawer-content>
   </n-drawer>
   <drawer-button />
 </template>
 
 <script setup lang="ts">
 import { NDrawer, NDrawerContent } from 'naive-ui';
 import { useAppStore } from '@/store';
-import { DrawerButton } from './components';
+import { DrawerButton, DarkMode, LayoutMode, ThemeColorSelect } from './components';
 
 const app = useAppStore();
 </script>

src/layouts/index.ts

@@ -1,5 +1,4 @@
-import Layout from './Layout/index.vue';
 import BasicLayout from './BasicLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
 
-export { Layout, BasicLayout, BlankLayout };
+export { BasicLayout, BlankLayout };