From 6ed4a16291f2de7dde58e31cc8b66d7ea527ff3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com>
Date: Thu, 18 Aug 2022 21:49:12 +0800
Subject: [PATCH] =?UTF-8?q?style(components):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BA=86=E4=B8=80=E4=BA=9B=E5=92=8C=E5=B8=83=E5=B1=80=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E7=9A=84=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hook/useAppRouter.ts                       | 2 +-
 src/layouts/BasicLayout/index.vue              | 2 ++
 src/layouts/components/common/HeaderButton.vue | 2 +-
 src/layouts/components/header/Reload.vue       | 9 ++++++++-
 src/layouts/components/index.ts                | 4 ++++
 src/layouts/components/sider/Logo.vue          | 7 ++-----
 src/layouts/components/tab/TabBar.vue          | 7 +++++++
 src/router/guard/permission.ts                 | 2 +-
 src/router/index.ts                            | 2 +-
 unocss.config.ts                               | 2 +-
 10 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/layouts/components/tab/TabBar.vue

diff --git a/src/hook/useAppRouter.ts b/src/hook/useAppRouter.ts
index bd091de..8d6a23e 100644
--- a/src/hook/useAppRouter.ts
+++ b/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) {
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index db0ab28..ef83306 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/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();
diff --git a/src/layouts/components/common/HeaderButton.vue b/src/layouts/components/common/HeaderButton.vue
index b9aa89b..f6a45ec 100644
--- a/src/layouts/components/common/HeaderButton.vue
+++ b/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>
diff --git a/src/layouts/components/header/Reload.vue b/src/layouts/components/header/Reload.vue
index 4867832..cb7db60 100644
--- a/src/layouts/components/header/Reload.vue
+++ b/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>
 
diff --git a/src/layouts/components/index.ts b/src/layouts/components/index.ts
index c9ae183..aac579c 100644
--- a/src/layouts/components/index.ts
+++ b/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,
 };
diff --git a/src/layouts/components/sider/Logo.vue b/src/layouts/components/sider/Logo.vue
index 38b8c7a..525f81b 100644
--- a/src/layouts/components/sider/Logo.vue
+++ b/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>
diff --git a/src/layouts/components/tab/TabBar.vue b/src/layouts/components/tab/TabBar.vue
new file mode 100644
index 0000000..f166cb5
--- /dev/null
+++ b/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>
diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index 90c9003..c8d8346 100644
--- a/src/router/guard/permission.ts
+++ b/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
diff --git a/src/router/index.ts b/src/router/index.ts
index 9637e42..73d9ac2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -8,7 +8,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'root',
-    redirect: '/test/test1',
+    redirect: 'appRoot',
     component: BasicLayout,
     children: [...constantRoutes],
   },
diff --git a/unocss.config.ts b/unocss.config.ts
index a366645..0adac56 100644
--- a/unocss.config.ts
+++ b/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',