From 42bd20ae66e595e944ab36fe8001d88c4bd8de6f Mon Sep 17 00:00:00 2001
From: Coffee-crocodile <1147347984@qq.com>
Date: Wed, 10 Aug 2022 17:56:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E5=A2=9E=E5=8A=A0=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80loading=E3=80=81=E4=BF=AE=E6=94=B9=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                         |  2 +-
 src/App.vue                       | 18 ++++++--
 src/layouts/BasicLayout/index.vue | 76 ++++++++++++-------------------
 src/views/test/test3.vue          |  5 +-
 4 files changed, 46 insertions(+), 55 deletions(-)

diff --git a/README.md b/README.md
index 15e8dd6..3b15a57 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 ## Demo
 
-- [示例网页](https://ench-admin.vercel.app/)
+- [Ench-Admin](https://ench-admin.vercel.app/)
 
 ## 代码仓库
 
diff --git a/src/App.vue b/src/App.vue
index 471ae80..02e711a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,9 @@
 // import { darkTheme } from 'naive-ui';
 import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
 import json from './theme.json';
-
+// import { useLoadingBar } from 'naive-ui';
+// const loadingBar = useLoadingBar();
+// loadingBar.start();
 const locale = zhCN;
 const dateLocale = dateZhCN;
 
@@ -10,9 +12,17 @@ const themeOverrides: GlobalThemeOverrides = {} || json;
 </script>
 
 <template>
-  <n-config-provider wh-full :theme="null" :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides">
-    <router-view />
-  </n-config-provider>
+  <n-loading-bar-provider>
+    <n-config-provider
+      wh-full
+      :theme="null"
+      :locale="locale"
+      :date-locale="dateLocale"
+      :theme-overrides="themeOverrides"
+    >
+      <router-view />
+    </n-config-provider>
+  </n-loading-bar-provider>
 </template>
 
 <style scoped></style>
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 1ad67b8..ba1d203 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -2,15 +2,25 @@
   <n-layout has-sider wh-full>
     <n-layout-sider
       bordered
-      :collapsed="collapsed"
       show-trigger
-      collapse-mode="width"
+      :collapsed="collapsed"
       :collapsed-width="64"
+      collapse-mode="width"
       @collapse="collapsed = true"
       @expand="collapsed = false"
     >
-      <n-menu :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
+      <div h-60px text-4xl flex-center>Logo</div>
+      <n-menu
+        :value="activeKey"
+        :collapsed="collapsed"
+        :collapsed-width="64"
+        :collapsed-icon-size="24"
+        :indent="20"
+        :options="menuOptions"
+        @update:value="handleClickMenu"
+      />
     </n-layout-sider>
+
     <n-layout h-full bg-hex-f3f4f6 :native-scrollbar="false">
       <n-layout-header bordered text-2xl h-60px flex-y-center>layout-page</n-layout-header>
       <div p-16px>
@@ -26,68 +36,38 @@
 <script lang="ts" setup>
 import type { MenuOption } from 'naive-ui';
 import { h, ref } from 'vue';
-import { RouterLink } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { Icon } from '@iconify/vue';
 
+const router = useRouter();
 const collapsed = ref(false);
+
 function renderIcon(icon: string) {
   return () => h(Icon, { icon });
 }
+const activeKey = ref('');
+const handleClickMenu = (key: string, item: MenuOption) => {
+  router.push(key);
+};
 const menuOptions: MenuOption[] = [
   {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            path: '/test1',
-          },
-        },
-        { default: () => 'test1' },
-      ),
-    key: 'test1',
+    label: 'test1',
+    key: '/test1',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            path: '/test2',
-          },
-        },
-        { default: () => 'test2' },
-      ),
-    key: 'test2',
+    label: 'test2',
+    key: '/test2',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            path: '/test3',
-          },
-        },
-        { default: () => 'test3' },
-      ),
-    key: 'test3',
+    label: 'test3',
+    key: '/test3',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            path: '/login',
-          },
-        },
-        { default: () => '登录页' },
-      ),
-    key: '登录页',
+    label: '登录页',
+    key: '/login',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
diff --git a/src/views/test/test3.vue b/src/views/test/test3.vue
index 4144cd4..699c5d8 100644
--- a/src/views/test/test3.vue
+++ b/src/views/test/test3.vue
@@ -1,10 +1,11 @@
 <template>
   <div text-center c-red>I prove that you have made the jump test3.</div>
+  <n-button strong secondary type="success" @click="loadingBar.start()">loading-bar</n-button>
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import { useLoadingBar } from 'naive-ui';
+const loadingBar = useLoadingBar();
 </script>
 
 <style scoped></style>