style(components): 优化了一些和布局相关的组件样式

src/hook/useAppRouter.ts

@@ -27,7 +27,7 @@ export function useAppRouter(isSetup = true) {
 
   /* 跳转根页方法 */
   function toRoot() {
-    routerPush({ name: 'root' });
+    routerPush({ name: 'appRoot' });
   }
   /* 跳转至登录页 */
   function toLogin(redirectUrl?: string) {

src/layouts/BasicLayout/index.vue

@@ -21,6 +21,7 @@
           <UserCenter />
         </div>
       </n-layout-header>
+      <n-layout-header bordered class="h-40px"><TabBar /></n-layout-header>
       <div class="p-16px">
         <n-layout-content>
           <router-view v-slot="{ Component }">
@@ -52,6 +53,7 @@ import {
   UserCenter,
   Search,
   Reload,
+  TabBar,
 } from '../components';
 
 const appStore = useAppStore();

src/layouts/components/common/HeaderButton.vue

@@ -1,7 +1,7 @@
 <template>
   <n-space
     align="center"
-    class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer transition duration-300"
+    class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer transition duration-300 dark:bg-hex-f90"
   >
     <slot />
   </n-space>

src/layouts/components/header/Reload.vue

@@ -2,7 +2,7 @@
   <n-tooltip placement="bottom" trigger="hover">
     <template #trigger>
       <HeaderButton @click="handleReload">
-        <i-icon-park-outline-refresh class="text-18px" />
+        <i-icon-park-outline-refresh class="text-18px" :class="{ 'animate-spin': loading }" />
       </HeaderButton>
     </template>
     <span>刷新页面</span>
@@ -12,10 +12,17 @@
 <script setup lang="ts">
 import HeaderButton from '../common/HeaderButton.vue';
 import { useAppStore } from '@/store';
+import { ref } from 'vue';
 const appStore = useAppStore();
 
+const loading = ref(false);
+
 const handleReload = () => {
+  loading.value = true;
   appStore.reloadPage();
+  setTimeout(() => {
+    loading.value = false;
+  }, 800);
 };
 </script>
 

src/layouts/components/index.ts

@@ -14,6 +14,9 @@ import UserCenter from './header/UserCenter.vue';
 import Search from './header/Search.vue';
 import Reload from './header/Reload.vue';
 
+/* 标签栏组件  */
+import TabBar from './tab/TabBar.vue';
+
 export {
   Breadcrumb,
   CollapaseButton,
@@ -27,4 +30,5 @@ export {
   UserCenter,
   Search,
   Reload,
+  TabBar,
 };

src/layouts/components/sider/Logo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-60px text-2xl flex-center overflow-hidden cursor-pointer" @click="pushHome">
+  <div class="h-60px text-2xl flex-center overflow-hidden cursor-pointer" @click="toRoot()">
     <SvgIcon name="logo" :size="28" />
     <span v-show="!appStore.collapsed" class="mx-4">{{ appStore.title }}</span>
   </div>
@@ -9,10 +9,7 @@
 import { useAppStore } from '@/store';
 import { useAppRouter } from '@/hook';
 const appStore = useAppStore();
-const { routerPush } = useAppRouter();
-const pushHome = () => {
-  routerPush('/');
-};
+const { toRoot } = useAppRouter();
 </script>
 
 <style scoped></style>

src/layouts/components/tab/TabBar.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="bg-#333 wh-full"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

src/router/guard/permission.ts

@@ -27,7 +27,7 @@ export async function createPermissionGuard(
     // 有登录但是没有路由，初始化路由、侧边菜单等
     await routeStore.initAuthRoute();
     // 动态路由加载完回到根路由
-    next({ name: 'root' });
+    next({ name: 'appRoot' });
     return false;
   }
   // 权限路由已经加载，仍然未找到，重定向到not-found

src/router/index.ts

@@ -8,7 +8,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'root',
-    redirect: '/test/test1',
+    redirect: 'appRoot',
     component: BasicLayout,
     children: [...constantRoutes],
   },

unocss.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'; // https://github.com/unocss/unocss
 export default defineConfig({
-  presets: [presetUno(), presetAttributify(), presetIcons()],
+  presets: [presetUno({ dark: 'class' }), presetAttributify(), presetIcons()],
   shortcuts: {
     'wh-full': 'w-full h-full',
     'flex-center': 'flex justify-center items-center',