From 5abf344572a5e0e2d587482cba7582326c180776 Mon Sep 17 00:00:00 2001
From: Grand-cocoa
 <1075576561@qq.com49111108+grand-cocoa@users.noreply.github.com>
Date: Fri, 7 Nov 2025 11:50:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(auth):=20=E5=AE=9E=E7=8E=B0=E5=9F=BA?=
 =?UTF-8?q?=E4=BA=8EPasskey=E7=9A=84=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加了对Web Credentials API的支持- 实现了Passkey注册与认证流程
- 引入了TDesign Button组件用于登录按钮
- 更新了页面加载及过渡动画逻辑- 添加了对不支持Passkey设备的降级处理
- 安装并配置了tdesign-icons-vue-next依赖库
---
 components.d.ts   |  1 +
 package-lock.json |  1 +
 package.json      |  1 +
 src/App.vue       | 65 ++++++++++++++++++++++++++++++++++++-----------
 4 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 0450e6c..814fd38 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -20,5 +20,6 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TAvatar: typeof import('tdesign-mobile-vue')['Avatar']
+    TButton: typeof import('tdesign-mobile-vue')['Button']
   }
 }
diff --git a/package-lock.json b/package-lock.json
index 6d0643b..d7a1b17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "pinia": "^3.0.3",
         "sass-loader": "^16.0.6",
         "scss": "^0.2.4",
+        "tdesign-icons-vue-next": "^0.4.1",
         "tdesign-mobile-vue": "^1.11.0",
         "vue": "^3.5.22",
         "vue-router": "^4.6.3"
diff --git a/package.json b/package.json
index 2731d3f..c60c5cb 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "pinia": "^3.0.3",
     "sass-loader": "^16.0.6",
     "scss": "^0.2.4",
+    "tdesign-icons-vue-next": "^0.4.1",
     "tdesign-mobile-vue": "^1.11.0",
     "vue": "^3.5.22",
     "vue-router": "^4.6.3"
diff --git a/src/App.vue b/src/App.vue
index df0ea8f..98e8239 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,22 +5,24 @@
       <span v-if="showTitle" class="title">你好，{{ name }}</span>
     </transition>
     <div class="login-info">
-      <transition name="slide-up">
-        <div v-if="!weCome">
+      <transition name="slide-up" mode="out-in">
+        <div v-if="!login">
+          <t-button :disabled="!passkey" @click="handleLogin">登录</t-button>
+        </div>
+        <div v-else-if="!weCome">
           <transition name="slide-up" mode="out-in">
-            <div v-if="!login">
+            <div v-if="login">
               <div class="loading" />
             </div>
-            <div v-else>你好，{{ name }}</div>
           </transition>
         </div>
       </transition>
     </div>
   </header>
-  <div class="header-placeholder"/>
+  <div class="header-placeholder" />
 
   <div id="operable-box">
-    <RouterView v-if="login" ref="routerView" #default="{ Component }">
+    <RouterView v-if="login" #default="{ Component }">
       <transition name="slide-up" mode="out-in">
         <component :is="Component" />
       </transition>
@@ -33,16 +35,49 @@ import { RouterView } from 'vue-router'
 import { ref, watch } from 'vue'
 import avatar from '@/assets/logo.svg'
 
-const login = ref(true)
-const weCome = ref(true)
-const hideLoading = ref(true)
-const showTitle = ref(true)
+const login = ref(false)
+const weCome = ref(false)
+const hideLoading = ref(false)
+const showTitle = ref(false)
+
+const passkey = ref(true)
 const name = ref('Amico')
-// mock login
-setTimeout(() => {
-  login.value = true
-}, 1000)
-const routerView = ref()
+
+if (!navigator.credentials) {
+  passkey.value = false
+}
+
+function handleLogin(){
+  navigator.credentials.create({
+    publicKey: {
+      challenge: new Uint8Array(32),
+      timeout: 60000,
+      rp: {
+        id: window.location.host,
+        name: "Animo"
+      },
+      user: {
+        id: new Uint8Array(32),
+        name: "Amico",
+        displayName: "Amico",
+      },
+      pubKeyCredParams: [{
+        alg: -7, type: "public-key"
+      },{
+        alg: -257, type: "public-key"
+      }],
+      excludeCredentials: [],
+      authenticatorSelection: {
+        authenticatorAttachment: "platform",
+        requireResidentKey: true,
+      }
+    },
+  }).then(resp => {
+    login.value = true
+  })
+}
+
+// 登录动画流程
 watch(login, (val) => {
   if (val) {
     setTimeout(() => {