feat(projects): support theme preset function.

src/layouts/modules/theme-drawer/index.vue

@@ -6,6 +6,7 @@ import AppearanceSettings from './modules/appearance/index.vue';
 import LayoutSettings from './modules/layout/index.vue';
 import GeneralSettings from './modules/general/index.vue';
 import ConfigOperation from './modules/config-operation.vue';
+import PresetSettings from './modules/preset/index.vue';
 
 defineOptions({
   name: 'ThemeDrawer'
@@ -33,6 +34,7 @@ const drawerWidth = computed(() => {
         <NTab name="appearance" :tab="$t('theme.tabs.appearance')"></NTab>
         <NTab name="layout" :tab="$t('theme.tabs.layout')"></NTab>
         <NTab name="general" :tab="$t('theme.tabs.general')"></NTab>
+        <NTab name="preset" :tab="$t('theme.tabs.preset')"></NTab>
       </NTabs>
 
       <div class="min-h-400px">
@@ -40,6 +42,7 @@ const drawerWidth = computed(() => {
           <AppearanceSettings v-if="activeTab === 'appearance'" />
           <LayoutSettings v-else-if="activeTab === 'layout'" />
           <GeneralSettings v-else-if="activeTab === 'general'" />
+          <PresetSettings v-else-if="activeTab === 'preset'" />
         </KeepAlive>
       </div>
 

src/layouts/modules/theme-drawer/modules/preset/index.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import ThemePreset from './modules/theme-preset.vue';
+
+defineOptions({
+  name: 'PresetSettings'
+});
+</script>
+
+<template>
+  <div class="flex-col-stretch gap-16px">
+    <ThemePreset />
+  </div>
+</template>
+
+<style scoped></style>

src/layouts/modules/theme-drawer/modules/preset/modules/theme-preset.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useThemeStore } from '@/store/modules/theme';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'ThemePreset'
+});
+
+type ThemePreset = Pick<
+  App.Theme.ThemeSetting,
+  | 'themeScheme'
+  | 'grayscale'
+  | 'colourWeakness'
+  | 'recommendColor'
+  | 'themeColor'
+  | 'otherColor'
+  | 'isInfoFollowPrimary'
+  | 'resetCacheStrategy'
+  | 'layout'
+  | 'page'
+  | 'header'
+  | 'tab'
+  | 'fixedHeaderAndTab'
+  | 'sider'
+  | 'footer'
+  | 'watermark'
+  | 'tokens'
+> & {
+  name: string;
+  desc: string;
+  i18nkey?: string;
+  version: string;
+};
+
+const presetModules = import.meta.glob('@/theme/preset/*.json', { eager: true, import: 'default' });
+
+const themeStore = useThemeStore();
+
+// Extract preset data
+const presets = computed(() =>
+  Object.entries(presetModules)
+    .map(([path, presetData]) => {
+      const fileName = path.split('/').pop()?.replace('.json', '') || '';
+      return {
+        id: fileName,
+        ...(presetData as ThemePreset)
+      };
+    })
+    .sort((a, b) => {
+      if (a.name === 'default') return -1;
+      if (b.name === 'default') return 1;
+      return a.name.localeCompare(b.name);
+    })
+);
+
+const getPresetName = (preset: ThemePreset): string => {
+  if (!preset.i18nkey) return preset.name;
+  try {
+    const key = `${preset.i18nkey}.name` as App.I18n.I18nKey;
+    const translated = $t(key);
+    return translated !== key ? translated : preset.name;
+  } catch {
+    return preset.name;
+  }
+};
+
+const getPresetDesc = (preset: ThemePreset): string => {
+  if (!preset.i18nkey) return preset.desc;
+  try {
+    const key = `${preset.i18nkey}.desc` as App.I18n.I18nKey;
+    const translated = $t(key);
+    return translated !== key ? translated : preset.desc;
+  } catch {
+    return preset.desc;
+  }
+};
+
+const applyPreset = ({ themeScheme, grayscale, colourWeakness, layout, watermark, ...rest }: ThemePreset): void => {
+  themeStore.setThemeScheme(themeScheme);
+  themeStore.setGrayscale(grayscale);
+  themeStore.setColourWeakness(colourWeakness);
+  themeStore.setThemeLayout(layout.mode);
+  themeStore.setWatermarkEnableUserName(watermark.enableUserName);
+  themeStore.setWatermarkEnableTime(watermark.enableTime);
+
+  Object.assign(themeStore, {
+    ...rest,
+    layout: { ...themeStore.layout, scrollMode: layout.scrollMode },
+    page: { ...rest.page },
+    header: { ...rest.header },
+    tab: { ...rest.tab },
+    sider: { ...rest.sider },
+    footer: { ...rest.footer },
+    watermark: { ...watermark },
+    tokens: { ...rest.tokens }
+  });
+
+  window.$message?.success($t('theme.appearance.preset.applySuccess'));
+};
+</script>
+
+<template>
+  <NDivider>{{ $t('theme.appearance.preset.title') }}</NDivider>
+
+  <div class="flex flex-col gap-3">
+    <div
+      v-for="preset in presets"
+      :key="preset.id"
+      class="border border-primary/10 rounded-lg border-solid bg-white/5 p-3 backdrop-blur-10 transition-all duration-300 hover:(shadow-md -translate-y-0.5)"
+    >
+      <div class="mb-2 flex items-center justify-between">
+        <div class="min-w-0 w-full flex flex-1 items-center justify-between gap-2">
+          <h5 class="m-0 truncate text-sm text-primary font-600">
+            {{ getPresetName(preset) }}
+          </h5>
+          <NBadge :value="`v${preset.version}`" type="info" size="small" class="flex-shrink-0 opacity-80" />
+        </div>
+        <NButton type="primary" size="tiny" ghost round class="ml-2 flex-shrink-0" @click="applyPreset(preset)">
+          {{ $t('theme.appearance.preset.apply') }}
+        </NButton>
+      </div>
+
+      <p class="line-clamp-2 mb-3 text-xs text-gray-500 leading-4">{{ getPresetDesc(preset) }}</p>
+
+      <div class="flex items-center justify-between">
+        <div class="flex gap-1">
+          <div
+            v-for="(color, key) in { primary: preset.themeColor, ...preset.otherColor }"
+            :key="key"
+            class="h-3 w-3 cursor-pointer border border-white/30 rounded-full transition-transform hover:scale-110"
+            :style="{ backgroundColor: color }"
+            :class="{ 'ring-1 ring-primary/50': key === 'primary' }"
+            :title="key"
+          />
+        </div>
+        <div class="flex items-center gap-1">
+          <div class="text-lg">
+            {{ preset.themeScheme === 'dark' ? '🌙' : '☀️' }}
+          </div>
+          <div class="text-lg">
+            {{ preset.grayscale ? '🎨' : '' }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>