feat(projects): add ThemeDrawer

.vscode/settings.json

@@ -19,6 +19,7 @@
     "Laba",
     "localforage",
     "LOCALSTORAGE",
+    "majesticons",
     "MEDZ",
     "nocheck",
     "nprogress",

src/layouts/base-layout/index.vue

@@ -6,6 +6,7 @@ import GlobalSider from '../modules/global-sider/index.vue';
 import GlobalTab from '../modules/global-tab/index.vue';
 import GlobalContent from '../modules/global-content/index.vue';
 import GlobalFooter from '../modules/global-footer/index.vue';
+import ThemeDrawer from '../modules/theme-drawer/index.vue';
 
 defineOptions({
   name: 'BaseLayout'
@@ -26,6 +27,7 @@ const app = useAppStore();
       <GlobalSider />
     </template>
     <GlobalContent />
+    <ThemeDrawer />
     <template #footer>
       <GlobalFooter />
     </template>

src/layouts/modules/global-header/components/theme-button.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+
+defineOptions({
+  name: 'ThemeButton'
+});
+
+const app = useAppStore();
+</script>
+
+<template>
+  <AButton type="text" class="h-full text-icon" @click="app.openThemeDrawer">
+    <icon-majesticons:color-swatch-line />
+  </AButton>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/index.vue

@@ -3,6 +3,7 @@ import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 // import GlobalLogo from '../../components/global-logo.vue';
+import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
 
 const app = useAppStore();
@@ -27,6 +28,7 @@ defineOptions({
         :is-dark="themeStore.darkMode"
         @switch="themeStore.toggleColorScheme"
       />
+      <ThemeButton />
       <UserAvatar />
     </div>
   </DarkModeContainer>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useAppStore } from '@/store/modules/app';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'ThemeDrawer'
+});
+
+const app = useAppStore();
+</script>
+
+<template>
+  <ADrawer
+    :open="app.themeDrawerVisible"
+    :title="$t('themeDrawer.title')"
+    :closable="false"
+    @close="app.closeThemeDrawer"
+  ></ADrawer>
+</template>
+
+<style scoped></style>

src/locales/lang/en.ts

@@ -21,6 +21,9 @@ const local: App.I18n.Schema = {
     logout: 'Logout',
     logoutConfirm: 'Are you sure you want to log out?'
   },
+  themeDrawer: {
+    title: 'Theme Configuration'
+  },
   route: {
     login: 'Login',
     403: 'No Permission',

src/locales/lang/zh-CN.ts

@@ -21,6 +21,9 @@ const local: App.I18n.Schema = {
     logout: '退出登录',
     logoutConfirm: '确认退出登录吗？'
   },
+  themeDrawer: {
+    title: '主题配置'
+  },
   route: {
     login: '登录',
     403: '无权限',

src/store/modules/app/index.ts

@@ -6,6 +6,7 @@ import { setLocale } from '@/locales';
 import { localStg } from '@/utils/storage';
 
 export const useAppStore = defineStore(SetupStoreId.App, () => {
+  const { bool: themeDrawerVisible, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean();
   const { bool: reloadFlag, setBool: setReloadFlag } = useBoolean(true);
   const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
   const { bool: siderCollapse, toggle: toggleSiderCollapse } = useBoolean();
@@ -48,6 +49,9 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
   }
 
   return {
+    themeDrawerVisible,
+    openThemeDrawer,
+    closeThemeDrawer,
     reloadFlag,
     reloadPage,
     fullContent,

src/typings/app.d.ts

@@ -200,6 +200,9 @@ declare namespace App {
         logout: string;
         logoutConfirm: string;
       };
+      themeDrawer: {
+        title: string;
+      };
       route: Record<I18nRouteKey, string>;
       page: {
         login: {

src/typings/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -30,6 +31,7 @@ declare module 'vue' {
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
+    'IconMajesticons:colorSwatchLine': typeof import('~icons/majesticons/color-swatch-line')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
     MenuToggler: typeof import('./../components/common/menu-toggler.vue')['default']

src/views/multi-menu/first_child/index.vue

@@ -1,7 +1,7 @@
+<script setup lang="ts"></script>
+
 <template>
-  <div>demo-a-child1</div>
+  <LookForward />
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>

src/views/multi-menu/second_child_home/index.vue

@@ -1,7 +1,7 @@
+<script setup lang="ts"></script>
+
 <template>
-  <div>demo-a-child1</div>
+  <LookForward />
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>