leadal-auth 0.0.1

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

@@ -0,0 +1,543 @@
+<template>
+  <div class="face-detection">
+    <div style="margin-bottom: 32px; margin-top: 12px; text-align: center">
+      人脸识别中，请进入识别范围内
+    </div>
+    <div class="face-detection-container flex-center align-center">
+      <!-- 摄像头预览区域 -->
+      <div class="camera-container" :class="{ detecting: isDetecting }">
+        <video
+          ref="video"
+          :width="videoWidth"
+          :height="videoHeight"
+          autoplay
+          muted
+          playsinline
+          @loadedmetadata="onVideoLoaded"
+          style="border-radius: 50%; object-fit: cover"
+        ></video>
+
+        <!-- 人脸检测框 -->
+        <canvas
+          ref="overlay"
+          :width="videoWidth"
+          :height="videoHeight"
+          class="overlay-canvas"
+        ></canvas>
+
+        <!-- 检测结果预览 -->
+        <div v-if="capturedImages.length > 0" class="results">
+          <div class="captured-image-container">
+            <img
+              :src="capturedImages[0].dataUrl"
+              :width="videoWidth"
+              :height="videoHeight"
+              alt="检测到的人脸"
+              class="captured-face-image"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex-center mt-12 w100">
+      <el-button @click="h_back">返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as faceapi from "face-api.js";
+
+export default {
+  name: "FaceDetection",
+
+  emits: ["face-detected", "face-lost", "error", "detection-complete"],
+
+  props: {
+    videoWidth: {
+      type: Number,
+      default: 240,
+    },
+    videoHeight: {
+      type: Number,
+      default: 240,
+    },
+    minConfidence: {
+      type: Number,
+      default: 0.5,
+    },
+    captureInterval: {
+      type: Number,
+      default: 2000, // 2秒检测一次
+    },
+    maxCaptures: {
+      type: Number,
+      default: 1, // 只保存1张图片
+    },
+    modelPath: {
+      type: String,
+      default: "/models", // face-api.js模型文件路径
+    },
+  },
+
+  data() {
+    return {
+      loading: false,
+      modelsLoaded: false,
+      cameraStarted: false,
+      cameraReady: false,
+      isDetecting: false,
+      stream: null,
+      detectionInterval: null,
+      capturedImages: [],
+      lastCaptureTime: 0,
+    };
+  },
+
+  async mounted() {
+    console.log("mounted______");
+
+    await this.loadModels();
+    // 自动开始检测流程
+    await this.autoStartDetection();
+  },
+
+  beforeDestroy() {
+    console.log("结束，清理摄像头");
+
+    this.cleanup();
+  },
+
+  methods: {
+    h_back() {
+      this.$emit("back");
+    },
+    async loadModels() {
+      try {
+        this.loading = true;
+
+        // 加载face-api.js模型
+        await Promise.all([
+          faceapi.nets.tinyFaceDetector.loadFromUri(this.modelPath),
+          faceapi.nets.faceLandmark68Net.loadFromUri(this.modelPath),
+          faceapi.nets.faceRecognitionNet.loadFromUri(this.modelPath),
+        ]);
+
+        this.modelsLoaded = true;
+        console.log("人脸检测模型加载完成");
+      } catch (error) {
+        // console.error("模型加载失败:", error);
+        this.$emit("error", { type: "model-load-error", error });
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async autoStartDetection() {
+      if (!this.modelsLoaded) return;
+
+      try {
+        await this.startCamera();
+        // 等待摄像头准备好后自动开始检测
+        setTimeout(() => {
+          if (this.cameraReady) {
+            this.startDetection();
+          }
+        }, 1000);
+      } catch (error) {
+        console.error("自动开始检测失败:", error);
+      }
+    },
+
+    async startCamera() {
+      try {
+        this.stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            width: this.videoWidth,
+            height: this.videoHeight,
+            facingMode: "user",
+          },
+        });
+
+        this.$refs.video.srcObject = this.stream;
+        this.cameraStarted = true;
+      } catch (error) {
+        console.error("摄像头启动失败:", error);
+        this.$emit("error", { type: "camera-error", error });
+      }
+    },
+
+    onVideoLoaded() {
+      this.cameraReady = true;
+      console.log("摄像头准备就绪");
+
+      // 如果模型已加载且还未开始检测，则自动开始检测
+      if (this.modelsLoaded && !this.isDetecting) {
+        setTimeout(() => {
+          this.startDetection();
+        }, 500);
+      }
+    },
+
+    stopCamera() {
+      this.stopDetection();
+
+      if (this.stream) {
+        this.stream.getTracks().forEach((track) => track.stop());
+        this.stream = null;
+      }
+
+      this.cameraStarted = false;
+      this.cameraReady = false;
+    },
+
+    startDetection() {
+      if (!this.modelsLoaded || !this.cameraReady) return;
+
+      this.isDetecting = true;
+      this.detectionInterval = setInterval(() => {
+        this.detectFaces();
+      }, 100); // 每100ms检测一次
+    },
+
+    stopDetection() {
+      this.isDetecting = false;
+      if (this.detectionInterval) {
+        clearInterval(this.detectionInterval);
+        this.detectionInterval = null;
+      }
+
+      // 清空检测框
+      const canvas = this.$refs.overlay;
+      const ctx = canvas.getContext("2d");
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+    },
+
+    toggleDetection() {
+      if (this.isDetecting) {
+        this.stopDetection();
+      } else {
+        this.startDetection();
+      }
+    },
+
+    async detectFaces() {
+      const video = this.$refs.video;
+      const canvas = this.$refs.overlay;
+
+      if (!video || !canvas) return;
+
+      try {
+        const detections = await faceapi
+          .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
+          .withFaceLandmarks()
+          .withFaceDescriptors();
+
+        // 清空之前的检测框
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        if (detections.length > 0) {
+          // 绘制检测框
+          detections.forEach((detection) => {
+            const { x, y, width, height } = detection.detection.box;
+
+            ctx.strokeStyle = "#00ff00";
+            ctx.lineWidth = 2;
+            ctx.strokeRect(x, y, width, height);
+
+            // 显示置信度
+            ctx.fillStyle = "#00ff00";
+            ctx.font = "16px Arial";
+            ctx.fillText(
+              `${(detection.detection.score * 100).toFixed(1)}%`,
+              x,
+              y - 10
+            );
+          });
+
+          // 检查是否需要捕获图片
+          const now = Date.now();
+          if (now - this.lastCaptureTime > this.captureInterval) {
+            this.captureHighConfidenceFaces(detections);
+            this.lastCaptureTime = now;
+          }
+
+          this.$emit("face-detected", detections);
+
+          // 检测到人脸后停止检测并关闭摄像头
+          this.onFaceDetectedComplete(detections);
+        } else {
+          this.$emit("face-lost");
+        }
+      } catch (error) {
+        console.error("人脸检测失败:", error);
+        this.$emit("error", { type: "detection-error", error });
+      }
+    },
+
+    captureHighConfidenceFaces(detections) {
+      const video = this.$refs.video;
+
+      detections.forEach((detection) => {
+        if (detection.detection.score >= this.minConfidence) {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+
+          const { x, y, width, height } = detection.detection.box;
+
+          // 扩展捕获区域以包含头发
+          const expandRatio = 1; // 向上扩展30%的高度
+          const sideExpandRatio = 1; // 左右各扩展15%的宽度
+          const bottomExpandRatio = 1; // 向下扩展10%的高度
+
+          // 计算扩展后的区域
+          const expandedHeight = height * (1 + expandRatio + bottomExpandRatio);
+          const expandedWidth = width * (1 + sideExpandRatio * 2);
+          const expandedX = Math.max(0, x - width * sideExpandRatio);
+          const expandedY = Math.max(0, y - height * expandRatio);
+
+          // 确保不超出视频边界
+          const videoWidth = video.videoWidth || this.videoWidth;
+          const videoHeight = video.videoHeight || this.videoHeight;
+
+          const finalX = Math.max(0, expandedX);
+          const finalY = Math.max(0, expandedY);
+          const finalWidth = Math.min(expandedWidth, videoWidth - finalX);
+          const finalHeight = Math.min(expandedHeight, videoHeight - finalY);
+
+          // 设置画布大小
+          canvas.width = finalWidth;
+          canvas.height = finalHeight;
+
+          // 绘制扩展后的人脸区域
+          ctx.drawImage(
+            video,
+            finalX,
+            finalY,
+            finalWidth,
+            finalHeight,
+            0,
+            0,
+            finalWidth,
+            finalHeight
+          );
+
+          // 转换为base64
+          const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+
+          // 保存图片
+          this.capturedImages.unshift({
+            dataUrl,
+            confidence: detection.detection.score,
+            timestamp: Date.now(),
+            box: detection.detection.box,
+            expandedBox: {
+              x: finalX,
+              y: finalY,
+              width: finalWidth,
+              height: finalHeight,
+            },
+          });
+
+          // 限制保存数量
+          if (this.capturedImages.length > this.maxCaptures) {
+            this.capturedImages = this.capturedImages.slice(
+              0,
+              this.maxCaptures
+            );
+          }
+
+          console.log("捕获到高置信度人脸:", detection.detection.score);
+        }
+      });
+    },
+
+    async copyToClipboard(dataUrl) {
+      try {
+        await navigator.clipboard.writeText(dataUrl);
+        // 这里可以添加成功提示
+        console.log("Base64已复制到剪贴板");
+      } catch (error) {
+        console.error("复制失败:", error);
+      }
+    },
+
+    onFaceDetectedComplete(detections) {
+      // 检测到人脸后的处理逻辑
+      console.log("检测到人脸，正在停止检测...");
+
+      // 停止检测和摄像头
+      this.stopDetection();
+      this.stopCamera();
+
+      // 可以在这里添加其他后续处理
+      this.$emit("detection-complete", {
+        detections,
+        capturedImages: this.capturedImages,
+      });
+    },
+
+    cleanup() {
+      this.stopCamera();
+      this.capturedImages = [];
+    },
+
+    /**
+     * 重新开始认证流程
+     * 用于认证失败后重新进行人脸检测
+     */
+    async restartAuthentication() {
+      try {
+        console.log("开始重新认证...");
+
+        // 清理之前的状态
+        this.cleanup();
+
+        // 重置状态
+        this.capturedImages = [];
+        this.lastCaptureTime = 0;
+
+        // 如果模型未加载，先加载模型
+        if (!this.modelsLoaded) {
+          await this.loadModels();
+        }
+
+        // 重新开始检测流程
+        await this.autoStartDetection();
+
+        console.log("重新认证流程已启动");
+
+        // 发射重新认证开始事件
+        this.$emit("restart-authentication");
+      } catch (error) {
+        console.error("重新认证启动失败:", error);
+        this.$emit("error", { type: "restart-error", error });
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.face-detection {
+  width: 500px;
+  height: 480px;
+  border-radius: 8px;
+  border: 1px solid #e5e5e7;
+}
+
+.face-detection-container {
+  margin: 0 auto;
+  width: 360px;
+  height: 360px;
+  background: #fff;
+  border-radius: 12px;
+  background: url("@/assets/img-camera.png") no-repeat center center;
+  background-size: 100% 100%;
+}
+
+.camera-container {
+  position: relative;
+  display: inline-block;
+  border: 2px solid #ddd;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #000;
+  width: 240px;
+  height: 240px;
+}
+
+.camera-container.detecting {
+  border-color: #00ff00;
+  box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
+}
+
+.overlay-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border-radius: 50%;
+}
+
+.status-overlay {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #333;
+  border-top: 2px solid #fff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.pulse {
+  width: 12px;
+  height: 12px;
+  background: #00ff00;
+  border-radius: 50%;
+  animation: pulse 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.results {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.captured-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.captured-face-image {
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+@media (max-width: 768px) {
+  .face-detection-container {
+    padding: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,171 @@
+<template>
+  <div class="face-info">
+    <div v-if="src" class="image-container">
+      <img
+        :src="src"
+        @error="handleImageError"
+        @load="handleImageLoad"
+        alt="用户人脸信息"
+      />
+    </div>
+    <div v-else-if="loading" class="loading-container">
+      <i class="el-icon-loading" style="font-size: 48px; color: #409eff"></i>
+      <div>加载中...</div>
+    </div>
+    <div v-else class="no-image-container">
+      <i class="el-icon-picture" style="font-size: 48px; color: #ccc"></i>
+      <div>暂无人脸信息</div>
+    </div>
+    <el-button
+      type="primary"
+      style="margin-top: 48px; height: 42px; font-size: 16px"
+      :disabled="!src"
+      @click="handleClearFaceInfo"
+      round
+    >
+      清除人脸信息
+    </el-button>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { deleteFaceApi } from "@/api/face";
+export default {
+  name: "FaceInfo",
+
+  emits: ["clear-face"],
+
+  data() {
+    return {
+      src: null,
+      loading: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters(["userId"]),
+  },
+
+  mounted() {
+    this.loadFaceImage();
+  },
+
+  methods: {
+    loadFaceImage() {
+      if (!this.userId) {
+        console.warn("用户ID不存在，无法加载人脸信息");
+        return;
+      }
+
+      this.loading = true;
+      this.src = `/plugin/face/photo?userId=${this.userId}`;
+    },
+
+    handleImageLoad() {
+      this.loading = false;
+      console.log("人脸图片加载成功");
+    },
+
+    handleImageError() {
+      this.loading = false;
+      this.src = null;
+      console.warn("人脸图片加载失败");
+    },
+
+    handleClearFaceInfo() {
+      this.$confirm("确定要清除人脸信息吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteFaceApi({ userId: this.userId }).then(() => {
+            this.$emit("clear-face");
+            this.$message.success("人脸信息已清除");
+          });
+        })
+        .catch(() => {});
+    },
+
+    // 刷新人脸图片 (供父组件调用)
+    refresh() {
+      this.loadFaceImage();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.face-info {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+
+  .image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 200px;
+      height: 240px;
+      border: 1px solid #1346ee;
+      border-radius: 10px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transition: transform 0.3s ease;
+      object-fit: cover;
+
+      &:hover {
+        transform: scale(1.02);
+      }
+    }
+  }
+
+  .loading-container,
+  .no-image-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 240px;
+    height: 240px;
+    background: #fff;
+    border-radius: 10px;
+    border: 2px dashed #e6e6e6;
+    text-align: center;
+
+    div {
+      margin-top: 16px;
+      font-size: 14px;
+      color: #666;
+    }
+  }
+
+  .loading-container {
+    border-color: #409eff;
+    background: #f0f9ff;
+
+    div {
+      color: #409eff;
+    }
+
+    i {
+      animation: rotate 2s linear infinite;
+    }
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>