leadal-auth 0.0.2 → 0.0.3

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

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

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