Fixes bug add Project Docs

Feat/loading bar

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui-admin",
-  "version": "1.5",
+  "version": "1.5.0",
   "author": {
     "name": "Ahjung",
     "email": "735878602@qq.com",

src/App.vue

@@ -41,6 +41,9 @@
             primaryColor: designStore.appTheme,
             primaryColorHover: '#57a3f3',
           },
+          LoadingBar: {
+            colorLoading: designStore.appTheme,
+          },
         };
       });
 

src/components/Application/Application.vue

@@ -1,6 +1,5 @@
 <template>
   <n-loading-bar-provider>
-    <LoadingContent />
     <n-dialog-provider>
       <DialogContent />
       <n-notification-provider>
@@ -21,7 +20,6 @@
     NMessageProvider,
     NLoadingBarProvider,
   } from 'naive-ui';
-  import { LoadingContent } from '@/components/LoadingContent';
   import { MessageContent } from '@/components/MessageContent';
   import { DialogContent } from '@/components/DialogContent';
 
@@ -32,7 +30,6 @@
       NNotificationProvider,
       NMessageProvider,
       NLoadingBarProvider,
-      LoadingContent,
       MessageContent,
       DialogContent,
     },

src/layout/components/Header/ProjectSetting.vue

@@ -226,7 +226,7 @@
 
       function togNavTheme(theme) {
         settingStore.navTheme = theme;
-        if (settingStore.navMode === 'horizontal' && theme === 'light') {
+        if (settingStore.navMode === 'horizontal' && ['light'].includes(theme)) {
           settingStore.navTheme = 'dark';
         }
       }
@@ -237,11 +237,11 @@
 
       function togNavMode(mode) {
         settingStore.navMode = mode;
-        if (mode === 'horizontal') {
-          settingStore.setNavTheme('light');
-        } else {
-          settingStore.setNavTheme('dark');
-        }
+        // if (mode === 'header-dark') {
+        //   settingStore.setNavTheme('dark');
+        // } else {
+        //   settingStore.setNavTheme('light');
+        // }
       }
 
       return {

src/layout/components/Header/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="layout-header" :class="{ 'layout-header-light': !(navTheme == 'header-dark') }">
+  <div class="layout-header">
     <!--顶部菜单-->
     <div class="layout-header-left" v-if="navMode === 'horizontal'">
-      <AsideMenu v-model:collapsed="collapsed" mode="horizontal" class="n-menu-horizontal-light" />
+      <AsideMenu v-model:collapsed="collapsed" :inverted="getInverted" mode="horizontal" />
     </div>
     <!--左侧菜单-->
     <div class="layout-header-left" v-else>
@@ -131,6 +131,9 @@
       collapsed: {
         type: Boolean,
       },
+      inverted: {
+        type: Boolean,
+      },
     },
     setup(props) {
       const userStore = useUserStore();
@@ -153,6 +156,11 @@
         crumbsSetting: getCrumbsSetting,
       });
 
+      const getInverted = computed(() => {
+        const navTheme = unref(getNavTheme);
+        return ['light', 'header-dark'].includes(navTheme) ? props.inverted : !props.inverted;
+      });
+
       const getChangeStyle = computed(() => {
         const { collapsed } = props;
         const { minMenuWidth, menuWidth }: any = unref(getMenuSetting);
@@ -305,6 +313,7 @@
         reloadPage,
         drawerSetting,
         openSetting,
+        getInverted,
       };
     },
   });
@@ -342,6 +351,10 @@
       .n-breadcrumb {
         display: inline-block;
       }
+
+      &-menu {
+        color: var(--text-color);
+      }
     }
 
     &-right {

src/layout/components/TagsView/index.vue

@@ -557,6 +557,7 @@
             cursor: pointer;
             display: inline-block;
             position: relative;
+            flex: 0 0 auto;
 
             span {
               float: left;

src/layout/index.vue

@@ -19,8 +19,8 @@
     </NLayoutSider>
 
     <NLayout :inverted="inverted">
-      <NLayoutHeader :inverted="inverted" :position="fixedHeader">
-        <PageHeader v-model:collapsed="collapsed" />
+      <NLayoutHeader :inverted="getHeaderInverted" :position="fixedHeader">
+        <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
       </NLayoutHeader>
 
       <NLayoutContent
@@ -62,9 +62,9 @@
   import { MainView } from './components/Main';
   import { AsideMenu } from './components/Menu';
   import { PageHeader } from './components/Header';
-  import { PageFooter } from './components/Footer';
   import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
   import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+  import { useLoadingBar } from "naive-ui";
 
   export default defineComponent({
     name: 'Layout',
@@ -74,7 +74,6 @@
       PageHeader,
       AsideMenu,
       Logo,
-      PageFooter,
     },
     setup() {
       const { getDarkTheme } = useDesignSetting();
@@ -114,6 +113,11 @@
         return ['dark', 'header-dark'].includes(unref(getNavTheme));
       });
 
+      const getHeaderInverted = computed(() => {
+        const navTheme = unref(getNavTheme);
+        return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+      });
+
       const leftMenuWidth = computed(() => {
         const { minMenuWidth, menuWidth } = unref(getMenuSetting);
         return collapsed.value ? minMenuWidth : menuWidth;
@@ -135,6 +139,9 @@
 
       onMounted(() => {
         window.addEventListener('resize', watchWidth);
+        //挂载在 window 方便与在js中使用
+        window['$loading'] = useLoadingBar();
+        window['$loading'].finish();
       });
 
       return {
@@ -149,6 +156,7 @@
         navMode,
         getShowFooter,
         getDarkTheme,
+        getHeaderInverted,
       };
     },
   });

src/router/index.ts

@@ -3,7 +3,6 @@ import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import { ErrorPageRoute, RedirectRoute } from '@/router/base';
 import { PageEnum } from '@/enums/pageEnum';
 import { createRouterGuards } from './router-guards';
-import 'nprogress/css/nprogress.css'; // 进度条样式
 
 // @ts-ignore
 const modules = import.meta.globEager('./modules/**/*.ts');

src/router/modules/docs.ts

@@ -0,0 +1,19 @@
+import { RouteRecordRaw } from 'vue-router';
+import { Layout } from '@/router/constant';
+import { DocumentTextOutline } from '@vicons/ionicons5';
+import { renderIcon } from '@/utils/index';
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/external',
+    name: 'https://jekip.github.io/docs/',
+    component: Layout,
+    meta: {
+      title: '项目文档',
+      icon: renderIcon(DocumentTextOutline),
+      sort: 8,
+    },
+  },
+];
+
+export default routes;

src/router/router-guards.ts

@@ -12,8 +12,8 @@ const whitePathList = [LOGIN_PATH]; // no redirect whitelist
 export function createRouterGuards(router: Router) {
   const userStore = useUserStoreWidthOut();
   const asyncRouteStore = useAsyncRouteStoreWidthOut();
-  const Loading = window['$loading'] || null;
   router.beforeEach(async (to, from, next) => {
+    const Loading = window['$loading'] || null;
     Loading && Loading.start();
     if (from.path === LOGIN_PATH && to.name === 'errorPage') {
       next(PageEnum.BASE_HOME);
@@ -91,6 +91,7 @@ export function createRouterGuards(router: Router) {
       }
     }
     asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
+    const Loading = window['$loading'] || null;
     Loading && Loading.finish();
   });
 

src/store/modules/asyncRoute.ts

@@ -20,7 +20,7 @@ const DEFAULT_CONFIG: TreeHelperConfig = {
 
 const getConfig = (config: Partial<TreeHelperConfig>) => Object.assign({}, DEFAULT_CONFIG, config);
 
-interface AsyncRouteState {
+export interface IAsyncRouteState {
   menus: RouteRecordRaw[];
   routers: any[];
   addRouters: any[];
@@ -50,7 +50,7 @@ function filter<T = any>(
 
 export const useAsyncRouteStore = defineStore({
   id: 'app-async-route',
-  state: (): AsyncRouteState => ({
+  state: (): IAsyncRouteState => ({
     menus: [],
     routers: constantRouter,
     addRouters: [],

src/store/modules/user.ts

@@ -8,7 +8,7 @@ const Storage = createStorage({ storage: localStorage });
 import { getUserInfo, login } from '@/api/system/user';
 import { storage } from '@/utils/Storage';
 
-interface UserState {
+export interface IUserState {
   token: string;
   username: string;
   welcome: string;
@@ -19,7 +19,7 @@ interface UserState {
 
 export const useUserStore = defineStore({
   id: 'app-user',
-  state: (): UserState => ({
+  state: (): IUserState => ({
     token: Storage.get(ACCESS_TOKEN, ''),
     username: '',
     welcome: '',

src/store/types.ts

@@ -1,7 +1,7 @@
-import { IAsyncRouteState } from '@/store/modules/async-route';
-import { IUserState } from '@/store/modules/user/state';
+import { IAsyncRouteState } from '@/store/modules/asyncRoute';
+import { IUserState } from '@/store/modules/user';
 import { ILockscreenState } from '@/store/modules/lockscreen';
-import { ITabsViewState } from '@/store/modules/tabs-view';
+import { ITabsViewState } from '@/store/modules/tabsView';
 
 export interface IStore {
   asyncRoute: IAsyncRouteState;

src/styles/var.less

@@ -0,0 +1,4 @@
+@primaryColor: #2d8cf0;
+@primaryColorHover: #57a3f3;
+@header-height: 64px;
+@footer-height: 70px;

src/views/form/basicForm/index.vue

@@ -6,7 +6,7 @@
       </n-card>
     </div>
     <n-card :bordered="false" class="mt-4 proCard">
-      <n-grid cols="2 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
+      <n-grid cols="1 s:1 m:3 l:3 xl:3 2xl:3" responsive="screen">
         <n-grid-item offset="0 s:0 m:1 l:1 xl:1 2xl:1">
           <n-form
             :label-width="80"

yarn.lock

@@ -5123,11 +5123,6 @@ npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   dependencies:
     path-key "^3.0.0"
 
-nprogress@^1.0.0-1:
-  version "1.0.0-1"
-  resolved "https://registry.npmjs.org/nprogress/-/nprogress-1.0.0-1.tgz#dd4cce2b951f9359028facd6c51cc9c49ecfa1a2"
-  integrity sha512-Gr/Km0nIMbR7hOB0fjGx7nR0oRjTy9M61dXiQL5bfTBq0cQ+hNgt6gxE062j7Bxm+L/IjNVOr41iu2hrDeuedw==
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"