chore: 优化oidc登录

packages/ui/certd-client/src/views/framework/oauth/oauth-footer.vue

@@ -1,24 +1,25 @@
 <template>
-  <div class="oauth-footer">
+  <div class="oauth-footer relative">
+    <div class="oauth-title">
+      <div class="oauth-title-text">其他方式登录</div>
+    </div>
     <div v-for="item in oauthList" :key="item.type">
-      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.type)">
-        <el-icon :icon="item.icon" />
-        <span>{{ item.name }}</span>
+      <div class="oauth-icon-button pointer" @click="goOauthLogin(item.name)">
+        <div><fs-icon :icon="item.icon" class="text-blue-600 text-40" /></div>
+        <div>{{ item.title }}</div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import * as api from "./api";
 
-const oauthList = ref([
-  {
-    name: "OIDC",
-    type: "oidc",
-    icon: "ion:oidc",
-  },
-]);
+const oauthList = ref([]);
+
+onMounted(async () => {
+  oauthList.value = await api.GetOauthProviders();
+});
 
 async function goOauthLogin(type: string) {
   //获取第三方登录URL
@@ -29,17 +30,56 @@ async function goOauthLogin(type: string) {
 </script>
 <style lang="less">
 .oauth-footer {
+  width: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 16px;
+
+  .oauth-title {
+    width: 100%;
+    font-size: 14px;
+    font-weight: 500;
+    color: #8c8c8c;
+    position: relative;
+    .oauth-title-text {
+      position: relative;
+      z-index: 1;
+      text-align: center;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 36%;
+        height: 0.5px;
+        background-color: #8c8c8c;
+      }
+      &::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 36%;
+        height: 0.5px;
+        background-color: #8c8c8c;
+      }
+    }
+  }
+
   .oauth-icon-button {
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 8px;
-    padding: 8px 16px;
+    padding: 8px 8px;
     border-radius: 100px;
+    .fs-icon {
+      font-size: 36px;
+      color: #006be6 !important;
+    }
   }
 }
 </style>