leadal-auth 0.0.2 → 0.0.3

package/src/components/face-register/components/FacePicture.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="face-picture" v-loading="loading">
-    <img :src="src" width="100%" height="100%" />
-    <div class="delete-batn" @click="handleDelete">
-      <i class="el-icon-delete" style="size: 20px"></i>
-    </div>
-  </div>
-</template>
-
-<script>
-import { deleteFaceApi } from "@/api/face";
-
-export default {
-  props: {
-    row: Object,
-  },
-  data() {
-    return {
-      src: null,
-      loading: false,
-    };
-  },
-  mounted() {
-    this.loadFaceImage();
-  },
-  methods: {
-    handleDelete() {
-      // this.$emit("delete");
-      this.handleClearFaceInfo();
-    },
-    loadFaceImage() {
-      if (!this.row?.userId) {
-        console.warn("用户ID不存在，无法加载人脸信息");
-        return;
-      }
-      this.src = `/plugin/face/photo?userId=${this.row?.userId}`;
-    },
-    handleClearFaceInfo() {
-      this.$confirm("确定要清除人脸信息吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.loading = true;
-          deleteFaceApi({ userId: this.row?.userId }).then(() => {
-            this.$emit("clear-face");
-            this.$message.success("人脸信息已清除");
-          }).finally(() => {
-            this.loading = false;
-          });
-        })
-        .catch(() => {});
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.face-picture {
-  position: relative;
-  width: 240px;
-  height: 240px;
-  background: #ffffff;
-  border: 1px dashed #bfbfbf;
-  border-radius: 10px;
-}
-
-.delete-batn {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 24px;
-  background: #e5e5e7;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 0 0 0 4px;
-}
-.delete-batn :hover {
-  background: #e5e5e7;
-}
-</style>

package/src/components/face-register/components/UploadPicture.vue

@@ -1,336 +0,0 @@
-<template>
-  <div class="upload-picture">
-    <!-- 上传区域 -->
-    <el-upload
-      v-if="uploadedImages.length < maxImages"
-      class="avatar-uploader"
-      action=""
-      :auto-upload="false"
-      :show-file-list="false"
-      :on-change="handleFileSelect"
-      :before-upload="beforeAvatarUpload"
-      :multiple="false"
-      :disabled="uploading"
-    >
-      <div
-        class="upload-area flex-center align-center"
-        :class="{ uploading: uploading }"
-      >
-        <div class="upload-content">
-          <i
-            v-if="!uploading"
-            class="el-icon-plus"
-            style="font-size: 52px; color: #bfbfbf"
-          ></i>
-          <i
-            v-else
-            class="el-icon-loading"
-            style="font-size: 52px; color: #409eff"
-          ></i>
-          <div v-if="uploading" class="upload-text">正在上传中...</div>
-        </div>
-      </div>
-    </el-upload>
-
-    <!-- 达到最大上传数量提示 -->
-    <div v-else class="max-limit-tip flex-center align-center">
-      <div class="tip-content">
-        <i class="el-icon-warning" style="font-size: 32px; color: #f56c6c"></i>
-        <div class="tip-text">最多只能上传 {{ maxImages }} 张图片</div>
-      </div>
-    </div>
-    <div class="flex-center mt-12" style="width: 240px">
-      <el-button @click="h_back">返回</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-import { addFaceApi } from "@/api/face";
-
-export default {
-  name: "UploadPicture",
-  emits: ["images-change", "upload-success", "upload-error"],
-  props: {
-    row: Object,
-  },
-  data() {
-    return {
-      uploadedImages: [], // 存储已上传的图片
-      maxImages: 3, // 最大上传数量
-      uploading: false, // 上传状态
-    };
-  },
-  methods: {
-    h_back() {
-      this.$emit("back");
-    },
-    async handleFileSelect(file) {
-      // 当用户选择文件时触发
-      if (!file.raw) return;
-
-      // 验证文件
-      if (!this.validateFile(file.raw)) {
-        return;
-      }
-
-      const imageUrl = URL.createObjectURL(file.raw);
-
-      try {
-        // 调用后端接口上传图片
-        await this.uploadImageToServer(file.raw);
-
-        // 添加到已上传图片列表
-        this.uploadedImages.push({
-          url: imageUrl,
-          file: file.raw,
-          name: file.name,
-          size: file.size,
-        });
-
-        // 发射事件给父组件
-        this.$emit("images-change", this.uploadedImages);
-        this.$emit("upload-success", file.raw);
-
-        this.$message.success("图片上传成功!");
-      } catch (error) {
-        console.error("图片上传失败:", error);
-
-        // 释放内存中的URL
-        URL.revokeObjectURL(imageUrl);
-
-        // 发射错误事件
-        this.$emit("upload-error", error);
-
-        this.$message.error("图片上传失败，请重试!");
-      }
-    },
-
-    // 验证文件的方法
-    validateFile(file) {
-      // 检查是否正在上传
-      if (this.uploading) {
-        this.$message.warning("正在上传中，请稍候...");
-        return false;
-      }
-
-      // 检查文件格式
-      const isValidFormat =
-        file.type === "image/jpeg" ||
-        file.type === "image/jpg" ||
-        file.type === "image/png";
-
-      // 检查文件大小 (2MB)
-      const isLt2M = file.size / 1024 / 1024 < 2;
-
-      // 检查数量限制
-      const isUnderLimit = this.uploadedImages.length < this.maxImages;
-
-      // 验证用户信息
-      if (!this.row?.userId || !this.row?.row?.name) {
-        this.$message.error("用户信息不完整，无法上传图片!");
-        return false;
-      }
-
-      if (!isValidFormat) {
-        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
-        return false;
-      }
-
-      if (!isLt2M) {
-        this.$message.error("上传图片大小不能超过 2MB!");
-        return false;
-      }
-
-      if (!isUnderLimit) {
-        this.$message.error(`最多只能上传 ${this.maxImages} 张图片!`);
-        return false;
-      }
-
-      return true;
-    },
-
-    // 上传图片到服务器
-    async uploadImageToServer(file) {
-      this.uploading = true;
-
-      try {
-        // 创建FormData对象
-        const formData = new FormData();
-        formData.append("file", file);
-        formData.append("userId", this.row?.userId);
-        formData.append("userName", this.row?.row?.name);
-
-        // 调用API接口
-        const response = await addFaceApi(formData);
-        // this.$emit("upload-success", response);
-        return response;
-      } catch (error) {
-        console.error("服务器上传失败:", error);
-        throw error;
-      } finally {
-        this.uploading = false;
-      }
-    },
-
-    beforeAvatarUpload() {
-      // 阻止自动上传，我们在 handleFileSelect 中手动处理文件选择和上传
-      return false;
-    },
-
-    removeImage(index) {
-      // 释放内存中的 URL
-      URL.revokeObjectURL(this.uploadedImages[index].url);
-
-      // 从列表中移除
-      this.uploadedImages.splice(index, 1);
-
-      // 发射事件给父组件
-      this.$emit("images-change", this.uploadedImages);
-
-      this.$message.success("图片删除成功!");
-    },
-
-    // 获取已上传的图片列表 (供父组件调用)
-    getUploadedImages() {
-      return this.uploadedImages;
-    },
-
-    // 清空所有图片 (供父组件调用)
-    clearAllImages() {
-      // 释放所有 URL
-      this.uploadedImages.forEach((image) => {
-        URL.revokeObjectURL(image.url);
-      });
-
-      this.uploadedImages = [];
-      this.$emit("images-change", this.uploadedImages);
-    },
-  },
-
-  beforeUnmount() {
-    // 组件销毁时释放所有 URL
-    this.uploadedImages.forEach((image) => {
-      URL.revokeObjectURL(image.url);
-    });
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.upload-picture {
-  width: 100%;
-  max-width: 600px;
-  min-height: 240px;
-
-  .uploaded-images {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-bottom: 16px;
-
-    .image-item {
-      position: relative;
-      width: 180px;
-      height: 180px;
-      border-radius: 10px;
-      overflow: hidden;
-      border: 1px solid #e6e6e6;
-
-      img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .image-actions {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        background: rgba(0, 0, 0, 0.6);
-        border-radius: 50%;
-        width: 28px;
-        height: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: background-color 0.3s;
-
-        &:hover {
-          background: rgba(245, 108, 108, 0.8);
-        }
-
-        i {
-          color: white;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  .avatar-uploader {
-    .upload-area {
-      width: 240px;
-      height: 240px;
-      background: #ffffff;
-      border: 1px dashed #bfbfbf;
-      border-radius: 10px;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      &:hover:not(.uploading) {
-        border-color: #409eff;
-      }
-
-      &.uploading {
-        border-color: #409eff;
-        background: #f0f9ff;
-        cursor: not-allowed;
-      }
-
-      .upload-content {
-        text-align: center;
-
-        .upload-text {
-          margin-top: 12px;
-          font-size: 14px;
-          color: #409eff;
-          font-weight: 500;
-        }
-      }
-    }
-  }
-
-  .max-limit-tip {
-    width: 240px;
-    height: 240px;
-    background: #f5f5f5;
-    border: 1px dashed #e6e6e6;
-    border-radius: 10px;
-
-    .tip-content {
-      text-align: center;
-
-      .tip-text {
-        margin-top: 12px;
-        font-size: 14px;
-        color: #f56c6c;
-      }
-    }
-  }
-}
-
-// Element UI 覆盖样式
-::v-deep .el-upload {
-  display: block;
-}
-
-::v-deep .el-upload-dragger {
-  width: 100%;
-  height: 100%;
-  border: none;
-  border-radius: 10px;
-  background: transparent;
-}
-</style>

package/src/components/face-register/index.vue

@@ -1,242 +0,0 @@
-<template>
-  <!-- 正常功能区域 -->
-  <div class="flex-start">
-    <FacePicture
-      v-if="chooseType === 'face-info'"
-      class="mr-12"
-      :row="row"
-      @clear-face="handleClearFace"
-    />
-    <ChooseCameraOrPicture
-      v-if="!uploading && chooseType === ''"
-      @choose="handleChoose"
-    />
-    <UploadPicture
-      v-if="chooseType === 'picture'"
-      :row="row"
-      @back="handleBack"
-      @upload-success="handleUploadSuccess"
-    />
-    <FaceDetected
-      v-if="chooseType === 'camera' && !uploading"
-      @back="handleBack"
-      @detection-complete="handleDetectionComplete"
-    />
-
-    <!-- 上传中状态 -->
-    <div v-if="uploading" class="uploading-container">
-      <div class="uploading-content">
-        <i class="el-icon-loading" style="font-size: 48px; color: #409eff"></i>
-        <div class="uploading-text">正在上传人脸信息...</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { existFaceApi, addFaceApi } from "@/api/face";
-import ChooseCameraOrPicture from "./components/ChooseCameraOrPicture.vue";
-import UploadPicture from "./components/UploadPicture.vue";
-import FaceDetected from "./components/FaceDetected.vue";
-import FacePicture from "./components/FacePicture.vue";
-
-export default {
-  name: "FaceRegister",
-  props: {
-    row: Object,
-  },
-  components: {
-    ChooseCameraOrPicture,
-    UploadPicture,
-    FaceDetected,
-    FacePicture,
-  },
-  data() {
-    const userId = this.row?.userId;
-    return {
-      userId,
-      chooseType: "loading",
-      uploading: false, // 上传状态
-      userIdMissing: false, // 用户ID缺失状态
-    };
-  },
-  created() {
-    this.checkFaceInfo();
-  },
-  methods: {
-    checkFaceInfo() {
-      existFaceApi({ userId: this.userId }).then((res) => {
-        this.chooseType = res.data ? "face-info" : "";
-      });
-    },
-    handleBack() {
-      this.chooseType = "";
-    },
-    handleClose() {
-      //   this.$router.back();
-    },
-    handleChoose(type) {
-      if (type === "camera") {
-        this.chooseType = "camera";
-      } else {
-        this.chooseType = "picture";
-      }
-    },
-    handleClearFace() {
-      this.checkFaceInfo();
-    },
-
-    handleRefresh() {
-      // 刷新页面
-      window.location.reload();
-    },
-    handleUploadSuccess() {
-      this.checkFaceInfo();
-    },
-    async handleDetectionComplete(data) {
-
-      // 检查用户ID是否存在
-      if (!this.userId) {
-        this.$message.error("用户信息不完整，无法进行人脸注册");
-        return;
-      }
-
-      // 检查是否有捕获的图片
-      if (!data.capturedImages || data.capturedImages.length === 0) {
-        this.$message.error("未检测到人脸图片");
-        return;
-      }
-
-      try {
-        this.uploading = true;
-        this.chooseType = "";
-
-        // 获取第一张捕获的图片
-        const capturedImage = data.capturedImages[0];
-        const base64Data = capturedImage.dataUrl;
-
-        // 将 base64 转换为 File 对象
-        const file = this.base64ToFile(base64Data, "face-detected.jpg");
-        // 创建 FormData
-        const formData = new FormData();
-        formData.append("file", file);
-        formData.append("userId", this.userId);
-        formData.append("userName", this.row?.row?.name || "");
-
-        // 调用上传接口
-        await addFaceApi(formData);
-
-        this.$message.success("人脸注册成功!");
-        this.checkFaceInfo();
-      } catch (error) {
-        console.error("人脸上传失败:", error);
-        this.chooseType = "";
-      } finally {
-        this.uploading = false;
-      }
-    },
-
-    // 将 base64 转换为 File 对象
-    base64ToFile(base64String, fileName) {
-      // 提取 base64 数据部分
-      const arr = base64String.split(",");
-      const mime = arr[0].match(/:(.*?);/)[1];
-      const bstr = atob(arr[1]);
-      let n = bstr.length;
-      const u8arr = new Uint8Array(n);
-
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-
-      return new File([u8arr], fileName, { type: mime });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #eee;
-}
-.title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #333;
-}
-.close-icon {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-.dialog-content {
-  padding: 20px;
-}
-
-.uploading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 360px;
-  height: 360px;
-  background: #f0f9ff;
-  border-radius: 12px;
-  border: 2px dashed #409eff;
-}
-
-.uploading-content {
-  text-align: center;
-
-  .uploading-text {
-    margin-top: 16px;
-    font-size: 16px;
-    color: #409eff;
-    font-weight: 500;
-  }
-
-  i {
-    animation: rotate 2s linear infinite;
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.error-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 360px;
-  height: 360px;
-  background: #fef0f0;
-  border-radius: 12px;
-  border: 2px dashed #f56c6c;
-}
-
-.error-content {
-  text-align: center;
-
-  .error-text {
-    margin-top: 16px;
-    font-size: 18px;
-    color: #f56c6c;
-    font-weight: 600;
-  }
-
-  .error-desc {
-    margin-top: 8px;
-    font-size: 14px;
-    color: #999;
-  }
-}
-</style>