feat(projects): 添加侧边菜单

src/layouts/common/GlobalContent/index.vue

@@ -1,14 +1,28 @@
 <template>
-  <router-view v-slot="{ Component }">
-    <transition name="fade-slide" mode="out-in" appear>
-      <component :is="Component" v-if="app.reloadFlag" />
-    </transition>
-  </router-view>
+  <div
+    :class="{ 'p-16px': showPadding }"
+    class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
+  >
+    <router-view v-slot="{ Component }">
+      <transition name="fade-slide" mode="out-in" appear>
+        <component :is="Component" v-if="app.reloadFlag" />
+      </transition>
+    </router-view>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { useAppStore } from '@/store';
 
+interface Props {
+  /** 显示padding */
+  showPadding?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showPadding: true
+});
+
 const app = useAppStore();
 </script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/FullScreen.vue

@@ -0,0 +1,14 @@
+<template>
+  <hover-container class="w-40px h-full" tooltip-content="全屏" @click="toggle">
+    <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-18px" />
+    <icon-gridicons-fullscreen v-else class="text-18px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { useFullscreen } from '@vueuse/core';
+import { HoverContainer } from '@/components';
+
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+<style scoped></style>

src/layouts/common/GlobalHeader/components/GithubSite.vue

@@ -0,0 +1,12 @@
+<template>
+  <hover-container tooltip-content="github" class="w-40px h-full">
+    <a href="https://github.com/honghuangdc/soybean-admin" target="_blank" class="flex-center">
+      <icon-mdi-github class="text-20px text-[#666]" />
+    </a>
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer } from '@/components';
+</script>
+<style scoped></style>

src/layouts/common/GlobalHeader/components/ThemeMode.vue

@@ -0,0 +1,14 @@
+<template>
+  <hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式">
+    <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="setDarkMode" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { HoverContainer, DarkModeSwitch } from '@/components';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { setDarkMode } = useThemeStore();
+</script>
+<style scoped></style>

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -0,0 +1,54 @@
+<template>
+  <n-dropdown :options="options" @select="handleDropdown">
+    <hover-container class="px-12px">
+      <img :src="avatar" class="w-32px h-32px" />
+      <span class="pl-8px text-16px font-medium">{{ auth.userInfo.userName }}</span>
+    </hover-container>
+  </n-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { NDropdown, useDialog } from 'naive-ui';
+import { HoverContainer } from '@/components';
+import { useAuthStore } from '@/store';
+import { iconifyRender } from '@/utils';
+import avatar from '@/assets/svg/common/avatar01.svg';
+
+type DropdownKey = 'user-center' | 'logout';
+
+const auth = useAuthStore();
+const dialog = useDialog();
+
+const options = [
+  {
+    label: '用户中心',
+    key: 'user-center',
+    icon: iconifyRender('carbon:user-avatar')
+  },
+  {
+    type: 'divider',
+    key: 'divider'
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: iconifyRender('carbon:logout')
+  }
+];
+
+function handleDropdown(optionKey: string) {
+  const key = optionKey as DropdownKey;
+  if (key === 'logout') {
+    dialog.info({
+      title: '提示',
+      content: '您确定要退出登录吗？',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        auth.resetAuthStore(true);
+      }
+    });
+  }
+}
+</script>
+<style scoped></style>

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

@@ -1,3 +1,7 @@
 import MenuCollapse from './MenuCollapse.vue';
+import GithubSite from './GithubSite.vue';
+import FullScreen from './FullScreen.vue';
+import ThemeMode from './ThemeMode.vue';
+import UserAvatar from './UserAvatar.vue';
 
-export { MenuCollapse };
+export { MenuCollapse, GithubSite, FullScreen, ThemeMode, UserAvatar };

src/layouts/common/GlobalHeader/index.vue

@@ -5,6 +5,17 @@
       <menu-collapse v-if="showMenuCollape" />
       <!-- <global-breadcrumb v-if="theme.header.crumb.visible" /> -->
     </div>
+    <div
+      v-else
+      class="flex-1-hidden flex-y-center h-full"
+      :style="{ justifyContent: theme.menu.horizontalPosition }"
+    ></div>
+    <div class="flex justify-end h-full">
+      <github-site />
+      <full-screen />
+      <theme-mode />
+      <user-avatar />
+    </div>
   </dark-mode-container>
 </template>
 
@@ -13,7 +24,7 @@ import { DarkModeContainer } from '@/components';
 import { useThemeStore } from '@/store';
 import type { GlobalHeaderProps } from '@/interface';
 import GlobalLogo from '../GlobalLogo/index.vue';
-import { MenuCollapse } from './components';
+import { MenuCollapse, GithubSite, FullScreen, ThemeMode, UserAvatar } from './components';
 
 interface Props {
   /** 显示logo */

src/layouts/common/GlobalSider/components/SiderMenu.vue

@@ -0,0 +1,69 @@
+<template>
+  <n-scrollbar>
+    <n-menu
+      :value="activeKey"
+      :collapsed="app.siderCollapse"
+      :collapsed-width="theme.sider.collapsedWidth"
+      :collapsed-icon-size="22"
+      :options="menus"
+      :expanded-keys="expandedKeys"
+      :indent="18"
+      @update:value="handleUpdateMenu"
+      @update:expanded-keys="handleUpdateExpandedKeys"
+    />
+  </n-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { NScrollbar, NMenu } from 'naive-ui';
+import type { MenuOption } from 'naive-ui';
+import { useAppStore, useThemeStore, useRouteStore } from '@/store';
+import { useRouterPush } from '@/composables';
+import type { GlobalMenuOption } from '@/interface';
+
+const route = useRoute();
+const app = useAppStore();
+const theme = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPush } = useRouterPush();
+
+const menus = computed(() => routeStore.menus as GlobalMenuOption[]);
+const activeKey = computed(() => route.name as string);
+const expandedKeys = ref<string[]>([]);
+
+function getExpendedKeys() {
+  const keys = menus.value.map(menu => getActiveKeysInMenus(menu)).flat();
+  return keys;
+}
+
+function getActiveKeysInMenus(menu: GlobalMenuOption) {
+  const keys: string[] = [];
+  if (activeKey.value.includes(menu.routeName)) {
+    keys.push(menu.routeName);
+  }
+  if (menu.children) {
+    keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat());
+  }
+  return keys;
+}
+
+function handleUpdateMenu(_key: string, item: MenuOption) {
+  const menuItem = item as GlobalMenuOption;
+  routerPush(menuItem.routePath);
+}
+
+function handleUpdateExpandedKeys(keys: string[]) {
+  expandedKeys.value = keys;
+}
+
+watch(
+  () => route.name,
+  () => {
+    expandedKeys.value = getExpendedKeys();
+  },
+  { immediate: true }
+);
+</script>
+<style scoped></style>

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

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

src/layouts/common/GlobalSider/index.vue

@@ -1,9 +1,18 @@
 <template>
-  <dark-mode-container class="global-sider flex-y-center h-full"></dark-mode-container>
+  <dark-mode-container class="global-sider flex-col-stretch h-full">
+    <global-logo :show-title="!app.siderCollapse" :style="{ height: theme.header.height + 'px' }" />
+    <sider-menu class="flex-1-hidden" />
+  </dark-mode-container>
 </template>
 
 <script setup lang="ts">
 import { DarkModeContainer } from '@/components';
+import { useAppStore, useThemeStore } from '@/store';
+import GlobalLogo from '../GlobalLogo/index.vue';
+import { SiderMenu } from './components';
+
+const app = useAppStore();
+const theme = useThemeStore();
 </script>
 <style scoped>
 .global-sider {

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

@@ -52,6 +52,9 @@
         @update:value="handleSetNumber($event, setMixSiderWidth)"
       />
     </setting-menu>
+    <setting-menu label="固定底部">
+      <n-switch :value="theme.footer.fixed" @update:value="setFooterIsFixed" />
+    </setting-menu>
   </n-space>
 </template>
 
@@ -68,7 +71,8 @@ const {
   setTabHeight,
   setSiderWidth,
   setMixSiderWidth,
-  setTabIsCache
+  setTabIsCache,
+  setFooterIsFixed
 } = useThemeStore();
 
 function handleSetNumber(value: number | null, callback: (value: number) => void) {