feat(projects): 新增BasicLayout布局

src/layouts/Layout/components/BasicLayout.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col h-full">
+    <header
+      :class="{ 'fixed-lt': topFixed }"
+      :style="{ height: headerHeight + 'px', paddingLeft: headerPaddingLeft }"
+      class="z-1001 flex-shrink-0 w-full bg-white border-b border-gray-200 transition-all duration-300 ease-in-out"
+    >
+      <slot name="header">
+        <h3>Header</h3>
+      </slot>
+    </header>
+    <div
+      :class="{ fixed: topFixed }"
+      :style="{ top: headerHeight + 'px', height: tabHeight + 'px', paddingLeft: siderWidth }"
+      class="left-0 z-999 flex-shrink-0 w-full bg-white border-b border-gray-200 transition-all duration-300 ease-in-out"
+    >
+      <slot name="tab">
+        <div>Tab</div>
+      </slot>
+    </div>
+    <aside
+      :style="{ width: siderWidth, paddingTop: siderPaddingTop }"
+      :class="[isVertical ? 'z-1002' : 'z-1000']"
+      class="fixed-lt h-full transition-all duration-300 ease-in-out bg-white border-r border-gray-200"
+    >
+      <slot name="sider">
+        <n-space :vertical="true" align="center" class="pt-24px">
+          <n-button type="primary" @click="toggle">折叠</n-button>
+          <div>
+            <span class="pr-12px">固定头部和标签</span>
+            <n-switch v-model:value="fixed" />
+          </div>
+          <div>
+            <span class="pr-12px">vertical布局</span>
+            <n-switch v-model:value="isVertical" />
+          </div>
+        </n-space>
+      </slot>
+    </aside>
+    <main
+      class="flex-1 transition-all duration-300 ease-in-out"
+      :style="{ paddingLeft: siderWidth, paddingTop: mainPaddingTop }"
+    >
+      <slot></slot>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { NSpace, NButton, NSwitch } from 'naive-ui';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 头部高度 */
+  headerHeight?: number;
+  /** 标签页高度 */
+  tabHeight?: number;
+  /** 固定头部和标签 */
+  fixdTop?: boolean;
+  /** 侧边栏高度 */
+  siderWidth?: number;
+  /** 侧边栏折叠状态的高度 */
+  siderCollapsedWidth?: number;
+  /** 侧边栏折叠状态 */
+  siderCollapse?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  headerHeight: 56,
+  tabHeight: 44,
+  fixdTop: true,
+  topZIndex: 1000,
+  siderWidth: 200,
+  siderZIndex: 1001,
+  siderCollapsedWidth: 64,
+  siderCollapse: false
+});
+
+const { bool: collapse, toggle } = useBoolean();
+
+const fixed = ref(true);
+const isVertical = ref(true);
+
+const topFixed = computed(() => fixed.value || !isVertical.value);
+
+const siderWidth = computed(() => `${collapse.value ? props.siderCollapsedWidth : props.siderWidth}px`);
+const headerPaddingLeft = computed(() => (isVertical.value ? siderWidth.value : '0px'));
+const siderPaddingTop = computed(() => (isVertical.value ? '0px' : `${props.headerHeight}px`));
+const mainPaddingTop = computed(() => `${fixed.value ? props.headerHeight + props.tabHeight : 0}px`);
+</script>
+<style scoped></style>

src/layouts/Layout/components/index.ts

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

src/layouts/Layout/index.vue

@@ -1,16 +1,11 @@
 <template>
-  <div class="h-full">
-    <router-view v-slot="{ Component }">
-      <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" v-if="app.reloadFlag" />
-      </transition>
-    </router-view>
-  </div>
+  <basic-layout>
+    <global-content />
+  </basic-layout>
 </template>
 
 <script setup lang="ts">
-import { useAppStore } from '@/store';
-
-const app = useAppStore();
+import { GlobalContent } from '../common';
+import { BasicLayout } from './components';
 </script>
 <style scoped></style>

src/layouts/common/GlobalContent/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <transition name="fade-slide" mode="out-in" appear>
+      <component :is="Component" v-if="app.reloadFlag" />
+    </transition>
+  </router-view>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store';
+
+const app = useAppStore();
+</script>
+<style scoped></style>

src/layouts/common/index.ts

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

src/router/guard/index.ts

@@ -6,7 +6,7 @@ import { handlePagePermission } from './permission';
  * 路由守卫函数
  * @param router - 路由实例
  */
-export function createRouterGuide(router: Router) {
+export function createRouterGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
     // 开始 loadingBar
     window.$loadingBar?.start();

src/router/index.ts

@@ -2,7 +2,7 @@ import type { App } from 'vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import { transformAuthRoutesToVueRoutes } from '@/utils';
 import { constantRoutes } from './routes';
-import { createRouterGuide } from './guard';
+import { createRouterGuard } from './guard';
 
 export const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,7 +12,7 @@ export const router = createRouter({
 
 export async function setupRouter(app: App) {
   app.use(router);
-  createRouterGuide(router);
+  createRouterGuard(router);
   await router.isReady();
 }
 

src/styles/css/global.css

@@ -1,4 +1,3 @@
-@import './scrollbar.css';
 @import './transition.css';
 
 html, body, #app {

src/styles/css/scrollbar.css

@@ -1,7 +1,7 @@
 /*---滚动条默认显示样式--*/
 ::-webkit-scrollbar-thumb {
   background-color: #d9d9d9;
-  border-radius: 8px;
+  border-radius: 4px;
 }
 /*---鼠标点击滚动条显示样式--*/
 ::-webkit-scrollbar-thumb:hover {
@@ -10,9 +10,10 @@
 }
 /*---滚动条大小--*/
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 10px;
+  width: 5px;
+  height: 5px;
 }
+
 /*---滚动框背景样式--*/
 ::-webkit-scrollbar-track-piece {
   background-color: rgba(0, 0, 0, 0);