@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/components/Upload/Files.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="upload-files-box">
+    <el-upload
+      action="#"
+      :class="['upload-files', selfDisabled ? 'disabled' : '']"
+      :multiple="true"
+      :disabled="selfDisabled"
+      :show-file-list="false"
+      :limit="limit"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :on-exceed="handleExceed"
+      :accept="fileType.join(',')"
+    >
+      <el-button type="primary" :disabled="selfDisabled">上传文件</el-button>
+    </el-upload>
+
+    <div v-if="_fileList.length" class="file-list">
+      <div v-for="file in _fileList" :key="`${file.name}-${file.url}`" class="file-card">
+        <div class="file-card__main">
+          <el-icon class="file-card__icon"><Document /></el-icon>
+          <div class="file-card__meta">
+            <div class="file-card__name">{{ file.name || "未命名文件" }}</div>
+            <div class="file-card__url">{{ file.url }}</div>
+          </div>
+        </div>
+        <div class="file-card__action">
+          <el-button link type="primary" :icon="Download" @click.stop="handleDownload(file)">下载</el-button>
+          <el-button v-if="!selfDisabled" link type="danger" :icon="Delete" @click.stop="handleRemove(file)">删除</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadFiles">
+import { computed, inject, ref, watch } from "vue";
+import { Delete, Document, Download } from "@element-plus/icons-vue";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+import type { UploadProps, UploadRequestOptions, UploadUserFile } from "element-plus";
+import { defFileService } from "../../api/base/file";
+import type { FileInfo } from "../../rpc/base/v1/file";
+
+/** 多文件上传组件属性。 */
+interface UploadFilesProps {
+  fileList: UploadUserFile[];
+  api?: (file: File) => Promise<FileInfo>;
+  disabled?: boolean;
+  limit?: number;
+  fileSize?: number;
+  fileType?: string[];
+  uploadType?: string;
+}
+
+const props = withDefaults(defineProps<UploadFilesProps>(), {
+  fileList: () => [],
+  disabled: false,
+  limit: 5,
+  fileSize: 20,
+  fileType: () => [],
+  uploadType: "file"
+});
+
+const emit = defineEmits<{
+  "update:fileList": [value: UploadUserFile[]];
+}>();
+
+const formContext = inject(formContextKey, void 0);
+const formItemContext = inject(formItemContextKey, void 0);
+const _fileList = ref<UploadUserFile[]>(props.fileList);
+/** Element Plus 上传错误回调要求的错误对象类型。 */
+type UploadRequestError = Parameters<NonNullable<UploadRequestOptions["onError"]>>[0];
+
+/** 兼容 Element Plus 上传组件要求的错误对象结构。 */
+function buildUploadError(error: unknown): UploadRequestError {
+  const uploadError = error instanceof Error ? error : new Error("文件上传失败");
+  return Object.assign(uploadError, {
+    status: 500,
+    method: "POST",
+    url: "#"
+  }) as UploadRequestError;
+}
+
+watch(
+  () => props.fileList,
+  value => {
+    _fileList.value = value;
+  }
+);
+
+/** 计算当前组件是否禁用。 */
+const selfDisabled = computed(() => {
+  return props.disabled || formContext?.disabled;
+});
+
+/** 上传前校验文件大小和格式。 */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+  const fileSizeValid = rawFile.size / 1024 / 1024 < props.fileSize;
+  const fileTypeValid = !props.fileType.length || props.fileType.includes(rawFile.type);
+
+  if (!fileTypeValid) {
+    ElNotification({
+      title: "温馨提示",
+      message: "上传文件不符合所需的格式！",
+      type: "warning"
+    });
+  }
+
+  if (!fileSizeValid) {
+    ElNotification({
+      title: "温馨提示",
+      message: `上传文件大小不能超过 ${props.fileSize}M！`,
+      type: "warning"
+    });
+  }
+
+  return fileSizeValid && fileTypeValid;
+};
+
+/** 执行多文件自定义上传。 */
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  try {
+    const api = props.api ?? (file => defFileService.UploadFile(file, props.uploadType));
+    const data = await api(options.file);
+    options.onSuccess(data);
+  } catch (error) {
+    options.onError(buildUploadError(error));
+  }
+};
+
+/** 同步新增文件到列表。 */
+const uploadSuccess = (response: FileInfo | undefined) => {
+  if (!response) return;
+  _fileList.value = [
+    ..._fileList.value,
+    {
+      name: response.name,
+      url: response.url
+    }
+  ];
+  emit("update:fileList", _fileList.value);
+  formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+  ElNotification({
+    title: "温馨提示",
+    message: "文件上传成功！",
+    type: "success"
+  });
+};
+
+/** 处理文件上传失败提示。 */
+const uploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "文件上传失败，请您重新上传！",
+    type: "error"
+  });
+};
+
+/** 超出上传数量限制时给出提示。 */
+function handleExceed() {
+  ElNotification({
+    title: "温馨提示",
+    message: `当前最多只能上传 ${props.limit} 个文件，请移除后上传！`,
+    type: "warning"
+  });
+}
+
+/** 删除指定文件。 */
+function handleRemove(file: UploadUserFile) {
+  _fileList.value = _fileList.value.filter(item => item.url !== file.url || item.name !== file.name);
+  emit("update:fileList", _fileList.value);
+  formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+}
+
+/** 下载指定文件。 */
+async function handleDownload(file: UploadUserFile) {
+  if (!file.url) return;
+  await defFileService.DownloadFile(file.url, file.name ?? "download");
+}
+</script>
+
+<style scoped lang="scss">
+.upload-files-box {
+  width: 100%;
+}
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+}
+.file-card {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 14px;
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+}
+.file-card__main {
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  min-width: 0;
+}
+.file-card__icon {
+  margin-top: 2px;
+  font-size: 18px;
+  color: var(--el-color-primary);
+}
+.file-card__meta {
+  min-width: 0;
+}
+.file-card__name {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+}
+.file-card__url {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+.file-card__action {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+}
+</style>

package/dist/package/src/components/Upload/Img.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="upload-box">
+    <el-upload
+      :id="uuid"
+      action="#"
+      :class="['upload', self_disabled ? 'disabled' : '', drag ? 'no-border' : '']"
+      :multiple="false"
+      :disabled="self_disabled"
+      :show-file-list="false"
+      :http-request="handleHttpUpload"
+      :before-upload="beforeUpload"
+      :on-success="uploadSuccess"
+      :on-error="uploadError"
+      :drag="drag"
+      :accept="fileType.join(',')"
+    >
+      <template v-if="imageUrl">
+        <img :src="imageUrl" class="upload-image" />
+        <div class="upload-handle" @click.stop>
+          <div v-if="!self_disabled" class="handle-icon" @click="editImg">
+            <el-icon><Edit /></el-icon>
+            <span>编辑</span>
+          </div>
+          <div class="handle-icon" @click="imgViewVisible = true">
+            <el-icon><ZoomIn /></el-icon>
+            <span>查看</span>
+          </div>
+          <div v-if="!self_disabled" class="handle-icon" @click="deleteImg">
+            <el-icon><Delete /></el-icon>
+            <span>删除</span>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="upload-empty">
+          <slot name="empty">
+            <el-icon><Plus /></el-icon>
+            <!-- <span>请上传图片</span> -->
+          </slot>
+        </div>
+      </template>
+    </el-upload>
+    <div class="el-upload__tip">
+      <slot name="tip"></slot>
+    </div>
+    <el-image-viewer v-if="imgViewVisible" :url-list="[imageUrl]" @close="imgViewVisible = false" />
+  </div>
+</template>
+
+<script setup lang="ts" name="UploadImg">
+import { ref, computed, inject } from "vue";
+import { generateUUID } from "../../utils";
+import { defFileService } from "../../api/base/file";
+import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
+import type { UploadProps, UploadRequestOptions } from "element-plus";
+import type { FileInfo } from "../../rpc/base/v1/file";
+
+/** 单图上传组件属性。 */
+interface UploadFileProps {
+  imageUrl: string; // 图片地址 ==> 必传
+  api?: (file: File) => Promise<FileInfo>; // 上传图片的 api 方法，默认使用当前文件服务 ==> 非必传
+  uploadType?: string; // 上传文件业务类型 ==> 非必传（默认为 image）
+  drag?: boolean; // 是否支持拖拽上传 ==> 非必传（默认为 true）
+  disabled?: boolean; // 是否禁用上传组件 ==> 非必传（默认为 false）
+  fileSize?: number; // 图片大小限制 ==> 非必传（默认为 5M）
+  fileType?: File.ImageMimeType[]; // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
+  height?: string; // 组件高度 ==> 非必传（默认为 150px）
+  width?: string; // 组件宽度 ==> 非必传（默认为 150px）
+  borderRadius?: string; // 组件边框圆角 ==> 非必传（默认为 8px）
+}
+
+// 接受父组件参数
+const props = withDefaults(defineProps<UploadFileProps>(), {
+  imageUrl: "",
+  uploadType: "image",
+  drag: true,
+  disabled: false,
+  fileSize: 5,
+  fileType: () => ["image/jpeg", "image/png", "image/gif"],
+  height: "150px",
+  width: "150px",
+  borderRadius: "8px"
+});
+
+// 生成组件唯一id
+const uuid = ref("id-" + generateUUID());
+
+// 查看图片
+const imgViewVisible = ref(false);
+// 获取 el-form 组件上下文
+const formContext = inject(formContextKey, void 0);
+// 获取 el-form-item 组件上下文
+const formItemContext = inject(formItemContextKey, void 0);
+// 判断是否禁用上传和删除
+const self_disabled = computed(() => {
+  return props.disabled || formContext?.disabled;
+});
+
+/**
+ * @description 图片上传
+ * @param options upload 所有配置项
+ * */
+const emit = defineEmits<{
+  "update:imageUrl": [value: string];
+}>();
+/** 执行单图自定义上传并同步图片地址。 */
+const handleHttpUpload = async (options: UploadRequestOptions) => {
+  try {
+    // 优先使用页面显式传入的业务上传类型，避免不同业务图片都落到同一个 image 分类。
+    const api = props.api ?? (file => defFileService.UploadFile(file, props.uploadType));
+    const data = await api(options.file);
+    emit("update:imageUrl", data.url);
+    // 调用 el-form 内部的校验方法（可自动校验）
+    formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+  } catch (error) {
+    options.onError(error as any);
+  }
+};
+
+/**
+ * @description 删除图片
+ * */
+const deleteImg = () => {
+  emit("update:imageUrl", "");
+};
+
+/**
+ * @description 编辑图片
+ * */
+const editImg = () => {
+  const dom = document.querySelector(`#${uuid.value} .el-upload__input`);
+  dom && dom.dispatchEvent(new MouseEvent("click"));
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * */
+const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
+  const imgSize = rawFile.size / 1024 / 1024 < props.fileSize;
+  const imgType = props.fileType.includes(rawFile.type as File.ImageMimeType);
+  if (!imgType)
+    ElNotification({
+      title: "温馨提示",
+      message: "上传图片不符合所需的格式！",
+      type: "warning"
+    });
+  if (!imgSize)
+    setTimeout(() => {
+      ElNotification({
+        title: "温馨提示",
+        message: `上传图片大小不能超过 ${props.fileSize}M！`,
+        type: "warning"
+      });
+    }, 0);
+  return imgType && imgSize;
+};
+
+/**
+ * @description 图片上传成功
+ * */
+const uploadSuccess = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "图片上传成功！",
+    type: "success"
+  });
+};
+
+/**
+ * @description 图片上传错误
+ * */
+const uploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "图片上传失败，请您重新上传！",
+    type: "error"
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.is-error {
+  .upload {
+    :deep(.el-upload),
+    :deep(.el-upload-dragger) {
+      border: 1px dashed var(--el-color-danger) !important;
+      &:hover {
+        border-color: var(--el-color-primary) !important;
+      }
+    }
+  }
+}
+:deep(.disabled) {
+  .el-upload,
+  .el-upload-dragger {
+    cursor: not-allowed !important;
+    background: var(--el-disabled-bg-color);
+    border: 1px dashed var(--el-border-color-darker) !important;
+    &:hover {
+      border: 1px dashed var(--el-border-color-darker) !important;
+    }
+  }
+}
+.upload-box {
+  .no-border {
+    :deep(.el-upload) {
+      border: none !important;
+    }
+  }
+  :deep(.upload) {
+    .el-upload {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: v-bind(width);
+      height: v-bind(height);
+      overflow: hidden;
+      border: 1px dashed var(--el-border-color-darker);
+      border-radius: v-bind(borderRadius);
+      transition: var(--el-transition-duration-fast);
+      &:hover {
+        border-color: var(--el-color-primary);
+        .upload-handle {
+          opacity: 1;
+        }
+      }
+      .el-upload-dragger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        overflow: hidden;
+        background-color: transparent;
+        border: 1px dashed var(--el-border-color-darker);
+        border-radius: v-bind(borderRadius);
+        &:hover {
+          border: 1px dashed var(--el-color-primary);
+        }
+      }
+      .el-upload-dragger.is-dragover {
+        background-color: var(--el-color-primary-light-9);
+        border: 2px dashed var(--el-color-primary) !important;
+      }
+      .upload-image {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .upload-empty {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        line-height: 30px;
+        color: var(--el-color-info);
+        .el-icon {
+          font-size: 28px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+      .upload-handle {
+        position: absolute;
+        top: 0;
+        right: 0;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        background: rgb(0 0 0 / 60%);
+        opacity: 0;
+        transition: var(--el-transition-duration-fast);
+        .handle-icon {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 0 6%;
+          color: aliceblue;
+          .el-icon {
+            margin-bottom: 40%;
+            font-size: 130%;
+            line-height: 130%;
+          }
+          span {
+            font-size: 85%;
+            line-height: 85%;
+          }
+        }
+      }
+    }
+  }
+  .el-upload__tip {
+    line-height: 18px;
+    text-align: center;
+  }
+}
+</style>