refactor(projects): 代码优化

ISSUES CLOSED: \

src/composables/layout.ts

@@ -1,13 +1,13 @@
 import { computed } from 'vue';
 import { useAppStore, useThemeStore } from '@/store';
 
+type LayoutMode = 'vertical' | 'horizontal';
 type LayoutHeaderProps = Record<EnumType.ThemeLayoutMode, GlobalHeaderProps>;
 
 export function useBasicLayout() {
   const app = useAppStore();
   const theme = useThemeStore();
 
-  type LayoutMode = 'vertical' | 'horizontal';
   const mode = computed(() => {
     const vertical: LayoutMode = 'vertical';
     const horizontal: LayoutMode = 'horizontal';

src/enum/business.ts

@@ -3,7 +3,6 @@ export enum EnumUserRole {
   super = '超级管理员',
   admin = '管理员',
   user = '普通用户'
-  // custom = '自定义角色'
 }
 
 /** 登录模块 */

src/enum/common.ts

@@ -31,5 +31,6 @@ export enum EnumDataType {
   date = '[object Date]',
   regexp = '[object RegExp]',
   set = '[object Set]',
-  map = '[object Map]'
+  map = '[object Map]',
+  file = '[object File]'
 }

src/hooks/business/useImageVerify.ts

@@ -52,6 +52,7 @@ function draw(dom: HTMLCanvasElement, width: number, height: number) {
 
   ctx.fillStyle = randomColor(180, 230);
   ctx.fillRect(0, 0, width, height);
+
   for (let i = 0; i < 4; i += 1) {
     const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
     imgCode += text;
@@ -81,5 +82,6 @@ function draw(dom: HTMLCanvasElement, width: number, height: number) {
     ctx.fillStyle = randomColor(150, 200);
     ctx.fill();
   }
+
   return imgCode;
 }

src/hooks/business/useSmsCode.ts

@@ -7,6 +7,7 @@ import useCountDown from './useCountDown';
 export default function useSmsCode() {
   const { loading, startLoading, endLoading } = useLoading();
   const { counts, start, isCounting } = useCountDown(60);
+
   const initLabel = '获取验证码';
   const countingLabel = (second: number) => `${second}秒后重新获取`;
   const label = computed(() => {
@@ -40,6 +41,7 @@ export default function useSmsCode() {
   async function getSmsCode(phone: string) {
     const valid = isPhoneValid(phone);
     if (!valid || loading.value) return;
+
     startLoading();
     const { data } = await fetchSmsCode(phone);
     if (data) {

src/hooks/common/useReload.ts

@@ -13,10 +13,13 @@ export default function useReload() {
   async function handleReload(duration = 0) {
     setFalse();
     await nextTick();
+
+    if (duration > 0) {
       setTimeout(() => {
         setTrue();
       }, duration);
     }
+  }
 
   return {
     reloadFlag,

src/utils/common/typeof.ts

@@ -33,3 +33,6 @@ export function isSet(data: unknown) {
 export function isMap(data: unknown) {
   return Object.prototype.toString.call(data) === EnumDataType.map;
 }
+export function isFile(data: unknown) {
+  return Object.prototype.toString.call(data) === EnumDataType.file;
+}

src/utils/service/transform.ts

@@ -1,7 +1,7 @@
 import qs from 'qs';
 import FormData from 'form-data';
 import { EnumContentType } from '@/enum';
-import { isArray } from '../common';
+import { isArray, isFile } from '../common';
 
 /**
  * 请求数据的转换
@@ -17,20 +17,35 @@ export async function transformRequestData(requestData: any, contentType?: strin
   }
   // form-data类型转换
   if (contentType === EnumContentType.formData) {
-    const key = Object.keys(requestData)[0];
+    data = await handleFormData(requestData);
-    const file = requestData.data[key];
-    data = await transformFile(file, key);
   }
+
   return data;
 }
 
+async function handleFormData(data: Record<string, any>) {
+  const formData = new FormData();
+  const entries = Object.entries(data);
+
+  entries.forEach(async ([key, value]) => {
+    const isFileType = isFile(value) || (isArray(value) && value.length && isFile(value[0]));
+
+    if (isFileType) {
+      await transformFile(formData, key, value);
+    } else {
+      formData.append(key, value);
+    }
+  });
+
+  return formData;
+}
+
 /**
  * 接口为上传文件的类型时数据转换
- * @param file - 单文件或多文件
  * @param key - 文件的属性名
+ * @param file - 单文件或多文件
  */
-async function transformFile(file: File[] | File, key: string) {
+async function transformFile(formData: FormData, key: string, file: File[] | File) {
-  const formData = new FormData();
   if (isArray(file)) {
     // 多文件
     await Promise.all(
@@ -43,5 +58,4 @@ async function transformFile(file: File[] | File, key: string) {
     // 单文件
     await formData.append(key, file);
   }
-  return formData;
 }

src/views/exception/403/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="403" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../../system-view/components';
-</script>
 
 <style scoped></style>

src/views/exception/404/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="404" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../../system-view/components';
-</script>
 
 <style scoped></style>

src/views/exception/500/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="500" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../../system-view/components';
-</script>
 
 <style scoped></style>

src/views/system-view/components/index.ts

@@ -1,3 +0,0 @@
-import ExceptionBase from './ExceptionBase.vue';
-
-export { ExceptionBase };

src/views/system-view/no-permission/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="403" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../components';
-</script>
 
 <style scoped></style>

src/views/system-view/not-found-page/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="404" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../components';
-</script>
 
 <style scoped></style>

src/views/system-view/not-found/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="404" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../components';
-</script>
 
 <style scoped></style>

src/views/system-view/service-error/index.vue

@@ -2,8 +2,6 @@
   <exception-base type="500" />
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-import { ExceptionBase } from '../components';
-</script>
 
 <style scoped></style>