feat(PassKey):提供了操作passkey的方法

src/App.vue

@@ -13,6 +13,7 @@ const activeNav = ref('profile');
 var bearer = localStorage.getItem('bearer');
 const loginClientUrl = 'https://www.cloudy233.top/UniAuth';
 const loginServerUrl = 'https://www.cloudy233.top:6699';
+localStorage.setItem('loginClientUrl', loginClientUrl);
 localStorage.setItem('loginServerUrl', loginServerUrl);
 
 onMounted(() => {

src/components/PassKey.vue

@@ -1,16 +1,103 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const passkeyList = ref([]);
+
+onMounted(() => {
+  // 获取passkey列表
+  GetPasskeyList();
+})
+
+function GetPasskeyList() {
+  const loginServerUrl = localStorage.getItem('loginServerUrl');
+  fetch(loginServerUrl + '/passkeylist', {
+    headers: {
+      Authorization: `Bearer ${window.localStorage.getItem('bearer')}`
+    }
+  }).then(res => {
+    res.json().then(
+      (data) => {
+        data.forEach(element => {
+          passkeyList.value.push(element);
+        });
+      }
+    )
+  })
+}
+
+function CreatePasskey() {
+  window.open(
+    `${localStorage.getItem('loginClientUrl')}?passkey`,
+    '统一身份认证',
+    'height=700,width=1000,top=300,left=200,toolbar=no,menubar=no, scrollbars=no,resizable=no,location=no, status=no'
+  )
+}
+
+function ChangePasskeyName(id, name) {
+  const loginServerUrl = localStorage.getItem('loginServerUrl');
+  const formData = new FormData();
+  formData.append('id', id);
+  formData.append('name', name);
+  
+  fetch(loginServerUrl + '/changepasskeyname', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${window.localStorage.getItem('bearer')}`
+    },
+    body: formData
+  }).then(res => {
+    location.reload();
+  })
+}
+
+function DeletePasskey(id) {
+  const loginServerUrl = localStorage.getItem('loginServerUrl');
+  const formData = new FormData();
+  formData.append('id', id);
+
+  // 弹出确认框
+  if (!confirm('确认删除该通行密钥吗？')) {
+    return;
+  }
+
+  fetch(loginServerUrl + '/deletepasskey', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${window.localStorage.getItem('bearer')}`
+    },
+    body: formData
+  }).then(res => {
+    // 引导用户删除本地密钥
+    alert('请自行前往通行密钥的提供程序删除本地密钥。')
+    location.reload();
+  })
+}
+</script>
+
 <template>
   <div class="passkey-page">
     <div class="page-header">
       <h1 class="page-title">通行密钥</h1>
       <p class="page-subtitle">管理您的无密码登录方式</p>
     </div>
+
+    <button @click="CreatePasskey()">创建通行密钥</button>
     
     <div class="card">
       <div class="card-body">
-        <div class="empty-state">
+        <div class="empty-state" v-if="passkeyList.length === 0">
           <div class="empty-icon">🔑</div>
-          <h3 class="empty-title">暂不支持通行密钥</h3>
-          <p class="empty-desc">该功能正在开发中，敬请期待。届时您将可以使用生物识别或安全密钥进行无密码登录。</p>
+          <h3 class="empty-title">您还没有创建通行密钥</h3>
+          <!-- <p class="empty-desc">该功能正在开发中，敬请期待。届时您将可以使用生物识别或安全密钥进行无密码登录。</p> -->
+        </div>
+        <div v-else>
+          <li :key="item" v-for="item in passkeyList">
+            <span>{{ item.name }}</span>
+            <span>{{ item.id }}</span>
+            <span>{{ item.createdAt }}</span>
+            <button>修改名称</button>
+            <button @click="DeletePasskey(item.id)">删除</button>
+          </li>
         </div>
       </div>
     </div>