From 89559e2e83cd5d93ecffb188ea94b75c19feec93 Mon Sep 17 00:00:00 2001
From: ovo <ovo@ovo.com>
Date: Thu, 5 Dec 2024 22:39:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B3=A8=E5=86=8C=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/LoginView.vue    | 187 ++++++++++++++++++++++++++++++++++++-
 src/views/RegisterView.vue |  45 +++++++--
 2 files changed, 220 insertions(+), 12 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 87307df..ac1e52e 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -119,6 +119,39 @@
                 </el-form-item>
               </el-form>
             </el-tab-pane>
+
+            <el-tab-pane label="刷脸登录" name="face">
+              <div class="face-login">
+                <div class="camera-container">
+                  <video 
+                    ref="videoRef"
+                    class="camera-view"
+                    :class="{ 'scanning': isScanning }"
+                    autoplay
+                    muted
+                  ></video>
+                  <div class="scan-overlay">
+                    <div class="scan-line"></div>
+                  </div>
+                  <div class="face-guide">
+                    <el-icon :size="60"><Avatar /></el-icon>
+                  </div>
+                </div>
+                <div class="camera-controls">
+                  <el-button 
+                    type="primary" 
+                    :loading="isScanning"
+                    @click="startFaceLogin"
+                  >
+                    {{ isScanning ? '识别中...' : '开始识别' }}
+                  </el-button>
+                </div>
+                <div class="face-tips">
+                  <p>请确保光线充足，正对摄像头</p>
+                  <p>保持面部在框内，眨眨眼</p>
+                </div>
+              </div>
+            </el-tab-pane>
           </el-tabs>
         </template>
 
@@ -150,10 +183,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, Lock, Phone, Message, Key } from '@element-plus/icons-vue'
+import { User, Lock, Phone, Message, Key, Avatar } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 
 const router = useRouter()
@@ -302,6 +335,69 @@ const handleLogin = async () => {
 const forgotPassword = () => {
   router.push('/forgot-password')
 }
+
+const videoRef = ref<HTMLVideoElement>()
+const isScanning = ref(false)
+let stream: MediaStream | null = null
+
+// 初始化摄像头
+const initCamera = async () => {
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: 'user' }
+    })
+    if (videoRef.value) {
+      videoRef.value.srcObject = stream
+    }
+  } catch (error) {
+    ElMessage.error('无法访问摄像头，请检查权限设置')
+  }
+}
+
+// 关闭摄像头
+const closeCamera = () => {
+  if (stream) {
+    stream.getTracks().forEach(track => track.stop())
+    stream = null
+  }
+}
+
+// 开始人脸识别
+const startFaceLogin = async () => {
+  if (!stream) {
+    await initCamera()
+    return
+  }
+  
+  isScanning.value = true
+  try {
+    // TODO: 调用人脸识别API
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    
+    // 模拟登录成功
+    ElMessage.success('人脸识别成功')
+    localStorage.setItem('token', 'dummy-token')
+    router.push(route.query.redirect as string || '/')
+  } catch (error) {
+    ElMessage.error('人脸识别失败，请重试')
+  } finally {
+    isScanning.value = false
+  }
+}
+
+// 监听标签页切换
+watch(activeTab, (newTab) => {
+  if (newTab === 'face') {
+    initCamera()
+  } else {
+    closeCamera()
+  }
+})
+
+// 组件卸载时关闭摄像头
+onUnmounted(() => {
+  closeCamera()
+})
 </script>
 
 <style scoped>
@@ -571,4 +667,91 @@ const forgotPassword = () => {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
 }
+
+/* 人脸识别相关样式 */
+.face-login {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.camera-container {
+  width: 320px;
+  height: 240px;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #000;
+}
+
+.camera-view {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.camera-view.scanning {
+  animation: scanning 2s ease-in-out infinite;
+}
+
+.scan-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid #409EFF;
+  border-radius: 12px;
+}
+
+.scan-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #409EFF, transparent);
+  animation: scan 2s linear infinite;
+}
+
+.face-guide {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.camera-controls {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.face-tips {
+  text-align: center;
+  color: #909399;
+  font-size: 14px;
+}
+
+.face-tips p {
+  margin: 5px 0;
+}
+
+@keyframes scan {
+  0% {
+    top: 0;
+  }
+  100% {
+    top: 100%;
+  }
+}
+
+@keyframes scanning {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue
index 763ed3f..35e9d64 100644
--- a/src/views/RegisterView.vue
+++ b/src/views/RegisterView.vue
@@ -480,23 +480,27 @@ const sendEmailCode = () => {
   margin-bottom: 15px;
 }
 
-.verify-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #409EFF;
-  font-size: 16px;
-  font-weight: 500;
+.verify-section .el-form-item {
   margin-bottom: 20px;
 }
 
-.verify-title .el-icon {
-  font-size: 20px;
+.verify-section .el-form-item__label {
+  height: 20px;
+  line-height: 20px;
+  margin-bottom: 6px;
+  color: #606266;
+  font-size: 14px;
+}
+
+.verify-section .el-form-item__content {
+  width: 100%;
 }
 
 .verify-code-input {
   display: flex;
   gap: 10px;
+  align-items: flex-start;
+  width: 100%;
 }
 
 .verify-code-input .el-input {
@@ -506,6 +510,27 @@ const sendEmailCode = () => {
 .verify-code-input .el-button {
   width: 120px;
   height: 50px;
+  margin-top: 0;
+  flex-shrink: 0;
+}
+
+.verify-section .el-form-item:not(:first-child) .el-input {
+  width: calc(100% - 130px);
+  margin-left: 130px;
+}
+
+.verify-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #409EFF;
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 16px;
+}
+
+.verify-title .el-icon {
+  font-size: 20px;
 }
 
 /* 优化输入框样式 */
@@ -584,7 +609,7 @@ const sendEmailCode = () => {
     flex-direction: column;
   }
   
-  .verify-section .verify-code-input + .el-form-item .el-input {
+  .verify-section .el-form-item:not(:first-child) .el-input {
     width: 100%;
     margin-left: 0;
   }