Merge branch 'template' into release

# Conflicts:
#	package.json

README.md

@@ -17,7 +17,8 @@ Me-admin template是一个免费开源的中后台模板,基于vue3、vite3、 p
  - **Mock 数据** 内置mock数据方案便于测试
  - **组件自动引入** 自动按需引入components下的组件定义，可以自定义引入模式和模板，真正的按需引入
  - **便捷的类型自动生成** 自动生成ts type 最大程度减少工作量
-
+ - **友好的request封装** 基于vue-request+axios的request api封装和vue3响应式语法糖深度耦合。
+
 ## 预览
 - 完整版国外访问：[https://meadmin-cn.github.io/meadmin-template](https://meadmin-cn.github.io/meadmin-template)
 - 完整版国内访问：[https://meadmin-cn.gitee.io/meadmin-template](https://meadmin-cn.gitee.io/meadmin-template)

TEMPLATE-CHANGELOG.md

@@ -1,5 +1,22 @@
 
 
+## [1.1.6](https://github.com/meadmin-cn/meadmin-template/compare/template-1.1.4...template-1.1.6) (2022-12-20)
+
+
+### 重构[refactor]
+
+* loginApi直接返回axios规避vue-request非setup警告 ([eb036b6](https://github.com/meadmin-cn/meadmin-template/commit/eb036b6488f42afca9c150e42f298e448416a723))
+
+
+### Bug 修复[fix]
+
+* 修复热更新后偶现页面loading无法关闭的bug ([8a9e731](https://github.com/meadmin-cn/meadmin-template/commit/8a9e731ad8c0708f7e7fe53270ad50503c531a8c))
+
+
+### 文档更改[docs]
+
+* 特性介绍添加 ([67fd3c4](https://github.com/meadmin-cn/meadmin-template/commit/67fd3c40b0df4693378a138582da8206192f47ec))
+
 ## [1.1.4](https://github.com/meadmin-cn/meadmin-template/compare/template-1.1.3...template-1.1.4) (2022-12-19)
 
 

src/api/user.ts

@@ -14,12 +14,16 @@ export class LoginParams {
 export interface LoginResult {
   token: string;
 }
-export function loginApi() {
-  return request<LoginResult, [LoginParams]>((params) => ({
-    url: Api.LOGIN,
-    method: 'post',
-    data: params,
-  }));
+export function loginApi<T extends boolean = true>(returnAxios: T = true as T) {
+  return request<LoginResult, [LoginParams], T>(
+    (params) => ({
+      url: Api.LOGIN,
+      method: 'post',
+      data: params,
+    }),
+    {},
+    returnAxios,
+  );
 }
 
 // 获取用户详细信息

src/layout/index.vue

@@ -10,7 +10,7 @@
       <el-main class="right-main">
         <el-scrollbar view-class="me-right-main-view">
           <layout-header v-if="!themeConfig.fixedHeader"></layout-header>
-          <div v-loading="globalStore.layoutLoading" class="me-main" v-bind="globalStore.layoutLoadingOptions">
+          <div class="me-main" id="me-main">
             <layout-page :transition="{ name: 'fade-transform', mode: 'out-in' }"></layout-page>
           </div>
         </el-scrollbar>

src/store/modules/global.ts

@@ -27,21 +27,7 @@ export default defineStore('global', {
         };
       }),
       isMobile,
-      loadingOptions: undefined as undefined | LoadingOptions,
       layoutLoaded: false,
     };
   },
-  getters: {
-    layoutLoading: (state) => Boolean(state.loadingOptions),
-    layoutLoadingOptions() {
-      if (!this.loadingOptions) {
-        return {};
-      }
-      const options = {} as { [key in keyof LoadingOptions as `element-loading-${key}`]: LoadingOptions[key] };
-      forOwn(this.loadingOptions, function (value, key) {
-        options[('element-loading-' + key) as keyof typeof options] = value as any;
-      });
-      return options;
-    },
-  },
 });

src/store/modules/user.ts

@@ -60,7 +60,7 @@ export default defineStore({
     // 登录
     login: async function (params: LoginParams) {
       mitter.emit(event.BEFORE_LOGIN);
-      const res = await loginApi().runAsync(params);
+      const res = await loginApi()(params);
       await this.init(res.token);
       mitter.emit(event.AFTER_LOGIN);
     },

src/utils/loading.ts

@@ -1,13 +1,12 @@
-import { useGlobalStore } from '@/store';
 import { LoadingOptions } from 'element-plus';
 import { throttle } from 'lodash-es';
-let loadingInstance: ReturnType<typeof ElLoading.service>;
+const loadingInstance: Record<string, ReturnType<typeof ElLoading.service>> = {};
 class Loading {
   constructor(private execLoading: (options?: LoadingOptions) => void, private execClose: () => void) {
     this.execLoading = execLoading;
     this.execClose = execClose;
   }
-  private number = 0;
+  public number = 0;
   public loading(options?: LoadingOptions, number = 1) {
     this.number += number;
     this.execLoading(options);
@@ -26,23 +25,26 @@ class Loading {
     if (this.number > 0) {
       this.number -= Math.min(this.number, number);
       this.throttleClose();
+    } else {
+      this.forceClose();
     }
   }
   public forceClose() {
     this.number = 0;
-    loadingInstance.close();
+    this.execClose();
     this.throttleClose.cancel();
   }
 }
 
 export const loadingObject = {
   global: new Loading(
-    (options?: LoadingOptions) => (loadingInstance = ElLoading.service(options)),
-    () => loadingInstance.close(),
+    (options?: LoadingOptions) => (loadingInstance.global = ElLoading.service(options)),
+    () => loadingInstance.global?.close(),
   ),
   layout: new Loading(
-    (options?: LoadingOptions) => (useGlobalStore().loadingOptions = options ? reactive(options) : {}),
-    () => (useGlobalStore().loadingOptions = undefined),
+    (options?: LoadingOptions) =>
+      (loadingInstance.layout = ElLoading.service(Object.assign({ target: '#me-main' }, options))),
+    () => loadingInstance.layout?.close(),
   ),
 };