feat: 项目结构重构优化

2025-12-26 12:35:37 +08:00
parent 65ad4fe59f
commit aa374dd2ba
164 changed files with 11305 additions and 3103 deletions
--- a/src/components/Upload/FileUpload.vue
+++ b/src/components/Upload/FileUpload.vue
@@ -53,11 +53,12 @@ import {
  UploadRequestOptions,
 } from "element-plus";

-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI from "@/api/file";
+import type { FileInfo } from "@/types/api";

 const props = defineProps({
  /**
-   * 请求携带的额外参数
+   * 请求携带的额外参<EFBFBD>?
   */
  data: {
    type: Object,
@@ -121,7 +122,7 @@ const modelValue = defineModel("modelValue", {

 const fileList = ref([] as UploadFile[]);

-// 监听 modelValue 转换用于显示的 fileList
+// 监听 modelValue 转换用于显示<EFBFBD>?fileList
 watch(
  modelValue,
  (value) => {
@@ -141,7 +142,7 @@ watch(
 );

 /**
- * 上传前校验
+ * 上传前校<EFBFBD>?
 */
 function handleBeforeUpload(file: UploadRawFile) {
  // 限制文件大小
@@ -185,7 +186,7 @@ function handleUpload(options: UploadRequestOptions) {
 * 上传文件超出限制
 */
 function handleExceed() {
-  ElMessage.warning(`最多只能上传${props.limit}个文件`);
+  ElMessage.warning("最多只能上传 " + props.limit + " 个文件");
 }

 /**
@@ -193,7 +194,7 @@ function handleExceed() {
 */
 const handleSuccess = (response: any, uploadFile: UploadFile, files: UploadFiles) => {
  ElMessage.success("上传成功");
-  //只有当状态为success或者fail，代表文件上传全部完成了，失败也算完成
+  //只有当状态为success或者fail，代表文件上传全部完成了，失败也算完<EFBFBD>?
  if (
    files.every((file: UploadFile) => {
      return file.status === "success" || file.status === "fail";
@@ -202,7 +203,7 @@ const handleSuccess = (response: any, uploadFile: UploadFile, files: UploadFiles
    const fileInfos = [] as FileInfo[];
    files.map((file: UploadFile) => {
      if (file.status === "success") {
-        //只取携带response的才是刚上传的
+        //只取携带response的才是刚上传<EFBFBD>?
        const res = file.response as FileInfo;
        if (res) {
          fileInfos.push({ name: res.name, url: res.url } as FileInfo);
@@ -250,7 +251,7 @@ function handleDownload(file: UploadUserFile) {

 /** 获取一个不重复的id */
 function getUid(): number {
-  // 时间戳左移13位（相当于乘以8192） + 4位随机数
+  // 时间戳左<EFBFBD>?3位（相当于乘<EFBFBD>?192<EFBFBD>?+ 4位随机数
  return (Date.now() << 13) | Math.floor(Math.random() * 8192);
 }
 </script>
--- a/src/components/Upload/MultiImageUpload.vue
+++ b/src/components/Upload/MultiImageUpload.vue
@@ -40,7 +40,8 @@
 </template>
 <script setup lang="ts">
 import { UploadRawFile, UploadRequestOptions, UploadUserFile } from "element-plus";
-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI from "@/api/file";
+import type { FileInfo } from "@/types/api";

 const props = defineProps({
  /**
@@ -67,7 +68,7 @@ const props = defineProps({
    default: 10,
  },
  /**
-   * 单个文件的最大允许大小
+   * 单个文件的最大允许大<EFBFBD>?
   */
  maxFileSize: {
    type: Number,
@@ -78,12 +79,12 @@ const props = defineProps({
   */
  accept: {
    type: String,
-    default: "image/*", //  默认支持所有图片格式 ，如果需要指定格式，格式如下：'.png,.jpg,.jpeg,.gif,.bmp'
+    default: "image/*", // 默认支持所有图片格式，如果需要指定格式，格式如下：.png,.jpg,.jpeg,.gif,.bmp
  },
 });

 const previewVisible = ref(false); // 是否显示预览
-const previewImageIndex = ref(0); // 预览图片的索引
+const previewImageIndex = ref(0); // 预览图片的索<EFBFBD>?

 const modelValue = defineModel("modelValue", {
  type: [Array] as PropType<string[]>,
@@ -107,28 +108,28 @@ function handleRemove(imageUrl: string) {
 }

 /**
- * 上传前校验
+ * 上传前校<EFBFBD>?
 */
 function handleBeforeUpload(file: UploadRawFile) {
-  // 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
+  // 校验文件类型：虽<EFBFBD>?accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符<EFBFBD>?accept 的规<EFBFBD>?
  const acceptTypes = props.accept.split(",").map((type) => type.trim());

  // 检查文件格式是否符合 accept
  const isValidType = acceptTypes.some((type) => {
    if (type === "image/*") {
-      // 如果是 image/*，检查 MIME 类型是否以 "image/" 开头
+      // 如果<EFBFBD>?image/*，检<EFBFBD>?MIME 类型是否<EFBFBD>?"image/" 开<EFBFBD>?
      return file.type.startsWith("image/");
    } else if (type.startsWith(".")) {
      // 如果是扩展名 (.png, .jpg)，检查文件名是否以指定扩展名结尾
      return file.name.toLowerCase().endsWith(type);
    } else {
-      // 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹配
+      // 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹<EFBFBD>?
      return file.type === type;
    }
  });

  if (!isValidType) {
-    ElMessage.warning(`上传文件的格式不正确，仅支持：${props.accept}`);
+    ElMessage.warning("上传文件的格式不正确，仅支持 " + props.accept);
    return false;
  }

@@ -169,7 +170,7 @@ function handleUpload(options: UploadRequestOptions) {
 * 上传文件超出限制
 */
 function handleExceed() {
-  ElMessage.warning("最多只能上传" + props.limit + "张图片");
+  ElMessage.warning("最多只能上传 " + props.limit + " 张图片");
 }

 /**
--- a/src/components/Upload/SingleImageUpload.vue
+++ b/src/components/Upload/SingleImageUpload.vue
@@ -33,11 +33,12 @@

 <script setup lang="ts">
 import { UploadRawFile, UploadRequestOptions } from "element-plus";
-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI from "@/api/file";
+import type { FileInfo } from "@/types/api";

 const props = defineProps({
  /**
-   * 请求携带的额外参数
+   * 请求携带的额外参<EFBFBD>?
   */
  data: {
    type: Object,
@@ -53,7 +54,7 @@ const props = defineProps({
    default: "file",
  },
  /**
-   * 最大文件大小（单位：M）
+   * 最大文件大小（单位：M<EFBFBD>?
   */
  maxFileSize: {
    type: Number,
@@ -61,7 +62,7 @@ const props = defineProps({
  },

  /**
-   * 上传图片格式，默认支持所有图片(image/*)，指定格式示例：'.png,.jpg,.jpeg,.gif,.bmp'
+   * 上传图片格式，默认支持所有图<EFBFBD>?image/*)，指定格式示例：'.png,.jpg,.jpeg,.gif,.bmp'
   */
  accept: {
    type: String,
@@ -69,7 +70,7 @@ const props = defineProps({
  },

  /**
-   * 自定义样式，用于设置组件的宽度和高度等其他样式
+   * 自定义样式，用于设置组件的宽度和高度等其他样<EFBFBD>?
   */
  style: {
    type: Object,
@@ -91,25 +92,25 @@ const modelValue = defineModel("modelValue", {
 * 限制用户上传文件的格式和大小
 */
 function handleBeforeUpload(file: UploadRawFile) {
-  // 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
+  // 校验文件类型：虽<EFBFBD>?accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符<EFBFBD>?accept 的规<EFBFBD>?
  const acceptTypes = props.accept.split(",").map((type) => type.trim());

-  // 检查文件格式是否符合 accept
+  // 检查文件格式是否符<EFBFBD>?accept
  const isValidType = acceptTypes.some((type) => {
    if (type === "image/*") {
-      // 如果是 image/*，检查 MIME 类型是否以 "image/" 开头
+      // 如果<EFBFBD>?image/*，检<EFBFBD>?MIME 类型是否<EFBFBD>?"image/" 开<EFBFBD>?
      return file.type.startsWith("image/");
    } else if (type.startsWith(".")) {
      // 如果是扩展名 (.png, .jpg)，检查文件名是否以指定扩展名结尾
      return file.name.toLowerCase().endsWith(type);
    } else {
-      // 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹配
+      // 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹<EFBFBD>?
      return file.type === type;
    }
  });

  if (!isValidType) {
-    ElMessage.warning(`上传文件的格式不正确，仅支持：${props.accept}`);
+    ElMessage.warning("上传文件的格式不正确，仅支持 " + props.accept);
    return false;
  }