feat: 加上请求示例，修复进度条bug

mock/apiDemo/example.ts

@@ -0,0 +1,31 @@
+import { success, fail } from '../helper';
+
+export default [
+  {
+    url: '/api/list', //
+    method: 'get',
+    response: (req: { body: { username: any }; query: { page?: number; size?: number } }) => {
+      const query = req.query;
+      if (!query.page || !query.size) {
+        return fail('page和size必填');
+      }
+      if (query.page < 1) {
+        return fail('page必须大于0');
+      }
+      if (query.size < 1) {
+        return fail('size必须大于0');
+      }
+      const list = [] as string[];
+      for (let i = 0; i < query.size; i++) {
+        list.push(`item-${query.page}-${i}`);
+      }
+      return success(
+        {
+          total: 30,
+          list,
+        },
+        '登录成功',
+      );
+    },
+  },
+];

plugin/vueSetupExtend.ts

@@ -21,12 +21,14 @@ function getLangImport(content: string) {
     if (useI18nParams) {
       useI18nParams = useI18nParams.replace(/(\s*$)/g, '');
     }
+
     if (useI18nParams.endsWith(']')) {
       const arr = xregexp.matchRecursive(useI18nParams, '\\[', '\\]', 'g', {
         escapeChar: '\\',
         valueNames: [null, null, 'value', null],
       });
       const res = arr[arr.length - 1];
+
       if (res && /,\s*$/.test(useI18nParams.slice(0, res.start - 1))) {
         return '[' + res.value + ']';
       }
@@ -66,7 +68,7 @@ function getComponent(sfc: SFCDescriptor) {
 }
 
 export function supportScript(code: string, options: ExtendOptions) {
-  const str = () => new MagicString(code);
+  const str = new MagicString(code);
   const { descriptor } = parse(code);
   if (!descriptor.script && descriptor.scriptSetup) {
     const attrs = { ...descriptor.scriptSetup.attrs };
@@ -97,9 +99,8 @@ export function supportScript(code: string, options: ExtendOptions) {
         scriptStr += `"${k}":"${attrs[k]}",`;
       }
     }
-
     if (scriptStr) {
-      str().appendLeft(
+      str.appendLeft(
         0,
         `<script ${lang ? `lang="${lang}"` : ''}>
   import { defineComponent } from 'vue';
@@ -108,8 +109,8 @@ export function supportScript(code: string, options: ExtendOptions) {
       );
     }
     return {
-      map: str().generateMap(),
-      code: str().toString(),
+      map: str.generateMap(),
+      code: str.toString(),
     };
   } else {
     return null;

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <el-config-provider :locale="settingStore.elLocale" :size="settingStore.themeConfig.size">
     <router-view v-slot="{ Component }">
-      <me-component :is="Component"></me-component>
+      <me-component :is="Component" done-progress></me-component>
     </router-view>
   </el-config-provider>
 </template>

src/api/example.ts

@@ -0,0 +1,30 @@
+import request from '@/utils/request';
+
+const enum Api {
+  LIST = '/api/list',
+  INFO = '/api/list/info/',
+}
+
+//列表接口
+export interface ListParams {
+  page: number;
+  size: number;
+}
+export interface ListResult {
+  total: number;
+  list: string[];
+}
+export function listApi() {
+  return request<ListResult, [ListParams]>((params) => ({
+    url: Api.LIST,
+    method: 'get',
+    params,
+  }));
+}
+
+export function infoApi() {
+  return request<string, [number]>((id) => ({
+    url: Api.INFO + id,
+    method: 'get',
+  }));
+}

src/api/user.ts

@@ -1,9 +1,9 @@
 import request from '@/utils/request';
 
-const api = {
-  login: '/api/user/login',
-  userInfo: '/api/user/info',
-};
+const enum Api {
+  LOGIN = '/api/user/login',
+  USER_INFO = '/api/user/info',
+}
 
 // 登录
 export class LoginParams {
@@ -15,7 +15,7 @@ export interface LoginResult {
 }
 export function loginApi() {
   return request<LoginResult, [LoginParams]>((params) => ({
-    url: api.login,
+    url: Api.LOGIN,
     method: 'post',
     data: params,
   }));
@@ -32,7 +32,7 @@ export interface UserInfoResult {
 export function userInfoApi<T extends true | undefined>(returnAxios?: T) {
   return request<UserInfoResult, [], T>(
     () => ({
-      url: api.userInfo,
+      url: Api.USER_INFO,
       method: 'get',
     }),
     { noLoading: true },

src/components/meComponent.vue

@@ -8,12 +8,11 @@
 import { PropType, Ref } from 'vue';
 import { MeKeepAliveProps } from './meKeepAlive';
 import { useLoadMessages } from '@/locales/i18n';
-import nProgress from 'nprogress';
+import { done } from '@/utils/nProgress';
 import { localeConfig } from '@/config';
 const props = defineProps({
   is: {
     type: [String, Object],
-    required: true,
   },
   keepAlive: Object as PropType<MeKeepAliveProps>,
   componentKey: [Number, String, Symbol],
@@ -33,7 +32,7 @@ watch(
       key.value = props.componentKey;
       attrs.value = current?.proxy?.$attrs;
       if (props.doneProgress) {
-        nProgress.done();
+        done();
       }
     }
   },

src/enums/pageEnum.ts

@@ -2,5 +2,5 @@ export const enum PageEnum {
   // basic login path
   LOGIN = '/login',
   // basic home path
-  HOME = '/dashboard',
+  HOME = '/index',
 }

src/layout/components/page.vue

@@ -1,11 +1,8 @@
-hu
 <template>
-  <div class="main">
-    <router-view v-slot="{ Component, route }">
-      <me-component :is="Component" :keep-alive="keepAliveProps" :component-key="route.fullPath" done-progress>
-      </me-component>
-    </router-view>
-  </div>
+  <router-view v-slot="{ Component, route }">
+    <me-component :is="Component" :keep-alive="keepAliveProps" :component-key="route.fullPath" done-progress>
+    </me-component>
+  </router-view>
 </template>
 
 <script setup lang="ts" name="layoutPage">
@@ -24,8 +21,3 @@ watch(route, () => {
   }
 });
 </script>
-<style lang="scss" scoped>
-.main {
-  padding: 1rem;
-}
-</style>

src/layout/index.vue

@@ -10,7 +10,9 @@
       <el-main class="right-main">
         <el-scrollbar>
           <layout-header v-show="!themeConfig.fixedHeader"></layout-header>
-          <layout-page></layout-page>
+          <div class="main">
+            <layout-page></layout-page>
+          </div>
         </el-scrollbar>
       </el-main>
     </el-container>
@@ -57,6 +59,9 @@ const globalStore = useGlobalStore();
   }
 }
 
+.main {
+  padding: 1rem;
+}
 :global(.me-sidebar-drawer .el-drawer__body) {
   padding: 0;
 }

src/router/guard/index.ts

@@ -2,7 +2,7 @@ import type { NavigationFailure, Router } from 'vue-router';
 import { PageEnum } from '@/enums/pageEnum';
 import { useUserStore } from '@/store';
 import { event, mitter } from '@/event';
-import nProgress from 'nprogress';
+import { start } from '@/utils/nProgress';
 // Don't change the order of creation
 export function setupRouterGuard(router: Router) {
   createPermissionGuard(router);
@@ -18,7 +18,7 @@ function createPermissionGuard(router: Router) {
   const userStore = useUserStore();
   router.beforeEach(async (to) => {
     if (to.path !== PageEnum.LOGIN && !userStore.token) {
-      await router.replace(PageEnum.LOGIN);
+      await router.replace({ path: PageEnum.LOGIN, query: { redirect: to.fullPath } });
       return false;
     } else if (to.path === PageEnum.LOGIN && userStore.token) {
       await router.replace(PageEnum.HOME);
@@ -29,8 +29,8 @@ function createPermissionGuard(router: Router) {
 
 // 处理页面加载进度条
 function createProgressGuard(router: Router) {
-  router.beforeEach(async () => {
-    nProgress.start();
+  router.beforeEach(async (to) => {
+    start(to.matched.length);
     return true;
   });
 }

src/router/routes/example/3-request.ts

@@ -0,0 +1,8 @@
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: 'request',
+    component: async () => await import('@/views/example/request.vue'),
+    meta: { title: '请求示例' },
+  },
+];

src/router/routes/example/4-link.ts

@@ -0,0 +1,8 @@
+import { RouteRecordRaw } from 'vue-router';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: 'https://github.com/meadmin-cn/meadmin-template',
+    component: async () => await import('@/views/404.vue'),
+    meta: { title: '外链', isLink: true },
+  },
+];

src/router/routes/example/5-multilevel.ts

@@ -0,0 +1,13 @@
+import { RouteRecordRaw, RouterView } from 'vue-router';
+import LayoutPage from '@/layout/components/page.vue';
+import { concatObjectValue } from '@/utils/helper';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: 'multilevel',
+    component: LayoutPage,
+    meta: { title: '多级菜单' },
+    children: concatObjectValue<RouteRecordRaw>(
+      import.meta.glob('./multilevel/*.ts', { eager: true, import: 'routes' }),
+    ),
+  },
+];

src/router/routes/example/multilevel/1.ts

@@ -0,0 +1,33 @@
+import { RouteRecordRaw, RouterView } from 'vue-router';
+import LayoutPage from '@/layout/components/page.vue';
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '1',
+    component: LayoutPage,
+    meta: { title: '多级菜单1' },
+    children: [
+      {
+        path: '1-1',
+        component: LayoutPage,
+        meta: { title: '多级菜单1-1', alwaysShow: true },
+        children: [
+          {
+            path: '1-1-1',
+            component: () => import('@/views/dashboard/index.vue'),
+            meta: { title: '多级菜单1-1-1' },
+          },
+          {
+            path: '/test/componentLang',
+            component: async () => await import('@/views/example/componentLang/index.vue'),
+            meta: { title: '组件语言包' },
+          },
+        ],
+      },
+      {
+        path: '1-2',
+        component: () => import('@/views/dashboard/index.vue'),
+        meta: { title: '多级菜单1-2' },
+      },
+    ],
+  },
+];

src/store/modules/user.ts

@@ -73,7 +73,6 @@ export default defineStore({
       this.token = '';
       await router.replace({
         path: PageEnum.LOGIN,
-        query: { redirect: window.location.href },
       });
       window.location.reload();
     },

src/utils/nProgress.ts

@@ -0,0 +1,26 @@
+import nProgress from 'nprogress';
+let number = 0;
+export const done = (n = 1) => {
+  number -= n;
+  if (number <= 0) {
+    nProgress.done();
+    number = 0;
+  } else {
+    nProgress.set(number / (number + n));
+  }
+};
+
+export const start = (n = 1) => {
+  if (number <= 0) {
+    nProgress.start();
+    number = n;
+  } else {
+    number += n;
+  }
+};
+
+export const set = (n: number) => {
+  if (number > 0) {
+    nProgress.set(n);
+  }
+};

src/utils/request.ts

@@ -79,15 +79,15 @@ function request<R, P extends unknown[] = [], T = true>(
       !options?.noLoading && loading();
       const { data: res } = await service(await axiosConfig(...args));
       if (!res || res.code === undefined) {
-        throw Error('格式错误');
+        throw Error('返回值解析失败');
       }
       // 401：认证失败
       if (res.code === '401') {
         await useUserStore().logOut();
         return res;
       }
       if (res.code !== '200') {
-        throw res.msg;
+        throw Error(res.msg);
       }
 
       !options?.noLoading && closeLoading();