refactor：基于 lint 处理排版

apps/web-antd/src/components/dict-tag/dict-tag.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @芋艿：貌似不用 src 目录
 import { computed } from 'vue';
 
 import { Tag } from 'ant-design-vue';

apps/web-antd/src/components/dict-tag/index.ts

@@ -1,3 +1 @@
-import DictTag from './dict-tag.vue'
-
-export { DictTag }
+export { default as DictTag } from './dict-tag.vue';

apps/web-antd/src/components/doc-alert/doc-alert.vue

@@ -23,12 +23,7 @@ const goToUrl = () => {
 </script>
 
 <template>
-  <Alert
-    v-if="isDocAlertEnable()"
-    type="info"
-    show-icon
-    class="mb-2 rounded"
-  >
+  <Alert v-if="isDocAlertEnable()" type="info" show-icon class="mb-2 rounded">
     <template #message>
       <Typography.Link @click="goToUrl">
         【{{ title }}】文档地址：{{ url }}

apps/web-antd/src/components/doc-alert/index.ts

@@ -1,3 +1 @@
-import DocAlert from './doc-alert.vue'
-
-export { DocAlert }
+export { default as DocAlert } from './doc-alert.vue';

apps/web-antd/src/components/iframe/iframe.vue

@@ -1,35 +1,38 @@
 <script setup lang="ts">
-// TODO @芋艿：貌似不用 src 目录
-import { onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue';
 
 interface IFrameProps {
-  /**
-   * iframe 的源地址
-   */
-  src: string
+  /** iframe 的源地址 */
+  src: string;
 }
 
-const props = defineProps<IFrameProps>()
+const props = defineProps<IFrameProps>();
 
-const loading = ref(true)
-const height = ref('')
-const frameRef = ref<HTMLElement | null>(null)
+const loading = ref(true);
+const height = ref('');
+const frameRef = ref<HTMLElement | null>(null);
 
 function init() {
-  height.value = `${document.documentElement.clientHeight - 94.5}px`
-  loading.value = false
+  height.value = `${document.documentElement.clientHeight - 94.5}px`;
+  loading.value = false;
 }
 
 onMounted(() => {
   setTimeout(() => {
-    init()
-  }, 300)
-})
+    init();
+  }, 300);
+});
 // TODO @芋艿：优化：未来使用 vben 自带的内链实现
 </script>
 
 <template>
   <div v-loading="loading" :style="`height:${height}`">
-    <iframe ref="frameRef" :src="props.src" style="width: 100%; height: 100%" frameborder="no" scrolling="auto" />
+    <iframe
+      ref="frameRef"
+      :src="props.src"
+      style="width: 100%; height: 100%"
+      frameborder="no"
+      scrolling="auto"
+    ></iframe>
   </div>
 </template>

apps/web-antd/src/components/iframe/index.ts

@@ -1,3 +1 @@
-import IFrame from './iframe.vue'
-
-export { IFrame }
+export { default as IFrame } from './iframe.vue';

apps/web-antd/src/components/tinymce/editor.vue

@@ -1,11 +1,8 @@
 <script lang="ts" setup>
-import type { Editor as EditorType } from 'tinymce/tinymce';
 import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
-type InitOptions = IPropTypes['init'];
-import type { PropType } from 'vue';
+import type { Editor as EditorType } from 'tinymce/tinymce';
 
-import Editor from '@tinymce/tinymce-vue';
-import ImgUpload from './img-upload.vue';
+import type { PropType } from 'vue';
 
 import {
   computed,
@@ -21,12 +18,21 @@ import {
 } from 'vue';
 
 import { preferences, usePreferences } from '@vben/preferences';
+import { buildShortUUID, isNumber } from '@vben/utils';
+
+import Editor from '@tinymce/tinymce-vue';
 
-import { isNumber, buildShortUUID } from '@vben/utils';
-import { bindHandlers } from './helper';
-import { plugins as defaultPlugins, toolbar as defaultToolbar } from './tinymce';
 import { useUpload } from '#/components/upload/use-upload';
 
+import { bindHandlers } from './helper';
+import ImgUpload from './img-upload.vue';
+import {
+  plugins as defaultPlugins,
+  toolbar as defaultToolbar,
+} from './tinymce';
+
+type InitOptions = IPropTypes['init'];
+
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
@@ -300,8 +306,8 @@ function handleError(name: string) {
   if (!editor) {
     return;
   }
-  const content = editor?.getContent()?? '';
-  const val = content?.replace(getUploadingImgName(name), '')?? '';
+  const content = editor?.getContent() ?? '';
+  const val = content?.replace(getUploadingImgName(name), '') ?? '';
   setValue(editor, val);
 }
 </script>
@@ -349,4 +355,4 @@ function handleError(name: string) {
 :deep(.tox-promotion) {
   display: none !important;
 }
-</style>
+</style>

apps/web-antd/src/components/tinymce/img-upload.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
 
-import { Upload, Button } from 'ant-design-vue';
+import { computed, ref } from 'vue';
 
 import { $t } from '@vben/locales';
-import { computed, ref } from 'vue';
+
+import { Button, Upload } from 'ant-design-vue';
+
 import { useUpload } from '#/components/upload/use-upload';
 
 defineOptions({ name: 'TinymceImageUpload' });
@@ -14,7 +16,8 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  fullscreen: { // 图片上传，是否放到全屏的位置
+  fullscreen: {
+    // 图片上传，是否放到全屏的位置
     default: false,
     type: Boolean,
   },
@@ -45,7 +48,7 @@ async function customRequest(info: UploadRequestOption<any>) {
   try {
     const url = await httpRequest(file);
     emit('done', name, url);
-  } catch (e) {
+  } catch {
     emit('error', name);
   } finally {
     uploading.value = false;

apps/web-antd/src/components/upload/file-upload.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
 import type { UploadFile, UploadProps } from 'ant-design-vue';
 import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import type { AxiosProgressEvent } from '#/api/infra/file';
+
 import type { AxiosResponse } from '@vben/request';
 
-import { CloudUpload } from '@vben/icons';
-import { message, Upload, Button } from 'ant-design-vue';
+import type { AxiosProgressEvent } from '#/api/infra/file';
 
-import { $t } from '@vben/locales';
 import { ref, toRefs, watch } from 'vue';
+
+import { CloudUpload } from '@vben/icons';
+import { $t } from '@vben/locales';
 import { isFunction, isObject, isString } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
 import { checkFileType } from './helper';
 import { UploadResultStatus } from './typing';
 import { useUpload, useUploadType } from './use-upload';
@@ -36,7 +40,7 @@ const props = withDefaults(
     resultField?: string;
     // 是否显示下面的描述
     showDescription?: boolean;
-    value?: string[] | string;
+    value?: string | string[];
   }>(),
   {
     value: () => [],

apps/web-antd/src/components/upload/helper.ts

@@ -3,7 +3,7 @@ export function checkFileType(file: File, accepts: string[]) {
     return true;
   }
   const newTypes = accepts.join('|');
-  const reg = new RegExp('\\.(' + newTypes + ')$', 'i');
+  const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
   return reg.test(file.name);
 }
 
@@ -12,6 +12,9 @@ export function checkFileType(file: File, accepts: string[]) {
  */
 export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 
-export function checkImgType(file: File, accepts: string[] = defaultImageAccepts) {
+export function checkImgType(
+  file: File,
+  accepts: string[] = defaultImageAccepts,
+) {
   return checkFileType(file, accepts);
-}
+}

apps/web-antd/src/components/upload/image-upload.vue

@@ -1,15 +1,19 @@
 <script lang="ts" setup>
 import type { UploadFile, UploadProps } from 'ant-design-vue';
 import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import type { AxiosProgressEvent } from '#/api/infra/file';
+
 import type { AxiosResponse } from '@vben/request';
 
-import { CloudUpload } from '@vben/icons';
-import { message, Upload, Modal } from 'ant-design-vue';
+import type { AxiosProgressEvent } from '#/api/infra/file';
 
-import { $t } from '@vben/locales';
 import { ref, toRefs, watch } from 'vue';
+
+import { CloudUpload } from '@vben/icons';
+import { $t } from '@vben/locales';
 import { isFunction, isObject, isString } from '@vben/utils';
+
+import { message, Modal, Upload } from 'ant-design-vue';
+
 import { checkImgType, defaultImageAccepts } from './helper';
 import { UploadResultStatus } from './typing';
 import { useUpload, useUploadType } from './use-upload';
@@ -37,7 +41,7 @@ const props = withDefaults(
     resultField?: string;
     // 是否显示下面的描述
     showDescription?: boolean;
-    value?: string[] | string;
+    value?: string | string[];
   }>(),
   {
     value: () => [],
@@ -231,7 +235,10 @@ function getValue() {
       @preview="handlePreview"
       @remove="handleRemove"
     >
-      <div v-if="fileList && fileList.length < maxNumber" class="flex flex-col items-center justify-center">
+      <div
+        v-if="fileList && fileList.length < maxNumber"
+        class="flex flex-col items-center justify-center"
+      >
         <CloudUpload />
         <div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
       </div>
@@ -241,7 +248,7 @@ function getValue() {
       class="mt-2 flex flex-wrap items-center text-[14px]"
     >
       请上传不超过
-      <div class="mx-1 font-bold text-primary">{{ maxSize }}MB</div>
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
       的
       <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
       格式文件

apps/web-antd/src/components/upload/use-upload.ts

@@ -113,6 +113,7 @@ export const useUpload = () => {
         });
     } else {
       // 模式二：后端上传
+      // TODO @芋艿：这里有爆红
       return uploadFile({ file }, onUploadProgress);
     }
   };
@@ -168,4 +169,4 @@ async function generateFileName(file: File) {
   // 拼接后缀
   const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
   return `${sha256}${ext}`;
-}
+}