leadal-auth 0.0.1

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

@@ -0,0 +1,85 @@
+<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

@@ -0,0 +1,336 @@
+<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

@@ -0,0 +1,242 @@
+<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>