feat(components): 增加全局loading、修改侧边栏样式

README.md

@@ -7,7 +7,7 @@
 
 ## Demo
 
-- [示例网页](https://ench-admin.vercel.app/)
+- [Ench-Admin](https://ench-admin.vercel.app/)
 
 ## 代码仓库
 

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">
+  <n-loading-bar-provider>
-    <router-view />
+    <n-config-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>

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: () =>
+    label: 'test1',
-      h(
+    key: '/test1',
-        RouterLink,
-        {
-          to: {
-            path: '/test1',
-          },
-        },
-        { default: () => 'test1' },
-      ),
-    key: 'test1',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
-    label: () =>
+    label: 'test2',
-      h(
+    key: '/test2',
-        RouterLink,
-        {
-          to: {
-            path: '/test2',
-          },
-        },
-        { default: () => 'test2' },
-      ),
-    key: 'test2',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
-    label: () =>
+    label: 'test3',
-      h(
+    key: '/test3',
-        RouterLink,
-        {
-          to: {
-            path: '/test3',
-          },
-        },
-        { default: () => 'test3' },
-      ),
-    key: 'test3',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {
-    label: () =>
+    label: '登录页',
-      h(
+    key: '/login',
-        RouterLink,
-        {
-          to: {
-            path: '/login',
-          },
-        },
-        { default: () => '登录页' },
-      ),
-    key: '登录页',
     icon: renderIcon('icon-park-outline:alarm'),
   },
   {

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';
+import { useLoadingBar } from 'naive-ui';
-const router = useRouter();
+const loadingBar = useLoadingBar();
 </script>
 
 <style scoped></style>