fix(auth): 快捷登录 - 保留顶部切换并优化底部入口

admin/src/views/account/login.vue

@@ -19,14 +19,6 @@
                     </div>
 
                     <template v-else>
-                        <el-button
-                            v-if="iamEnabled"
-                            class="mb-6"
-                            size="large"
-                            @click="handleIamLogin"
-                        >
-                            统一账号快捷登录
-                        </el-button>
                         <!-- 登录方式切换标签 -->
                         <div v-if="wxWorkEnabled" class="flex justify-center mb-6">
                             <el-radio-group v-model="loginMode" size="large">
@@ -86,6 +78,20 @@
                                 请使用企业微信扫描二维码登录
                             </div>
                         </template>
+
+                        <section v-if="iamEnabled" class="iam-login-alternative" aria-label="其他登录方式">
+                            <div class="iam-login-divider" aria-hidden="true">其他登录方式</div>
+                            <el-button class="iam-login-entry" size="large" @click="handleIamLogin">
+                                <span class="iam-login-entry__content">
+                                    <icon name="local-icon-anquan" size="22" />
+                                    <span>统一账号快捷登录</span>
+                                </span>
+                                <span class="iam-login-entry__arrow" aria-hidden="true">
+                                    <icon name="el-icon-ArrowRight" size="16" />
+                                </span>
+                            </el-button>
+                            <p class="iam-login-hint">使用统一身份平台账号登录</p>
+                        </section>
                     </template>
                 </div>
             </div>
@@ -359,6 +365,82 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+.iam-login-alternative {
+    margin-top: 28px;
+}
+
+.iam-login-divider {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-bottom: 18px;
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+    line-height: 20px;
+
+    &::before,
+    &::after {
+        content: '';
+        flex: 1;
+        height: 1px;
+        background: var(--el-border-color-light);
+    }
+}
+
+.iam-login-entry.el-button {
+    --el-button-bg-color: var(--el-color-primary-light-9);
+    --el-button-text-color: var(--el-color-primary);
+    --el-button-border-color: var(--el-color-primary-light-5);
+    --el-button-hover-bg-color: var(--el-color-primary-light-8);
+    --el-button-hover-text-color: var(--el-color-primary);
+    --el-button-hover-border-color: var(--el-color-primary);
+    --el-button-active-bg-color: var(--el-color-primary-light-8);
+    --el-button-active-border-color: var(--el-color-primary);
+    position: relative;
+    width: 100%;
+    min-height: 48px;
+    height: auto;
+    margin: 0;
+    padding: 12px 34px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    transition: background-color 150ms ease, border-color 150ms ease;
+
+    &:focus-visible {
+        outline: 2px solid var(--el-color-primary);
+        outline-offset: 3px;
+    }
+}
+
+.iam-login-entry__content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.iam-login-entry__arrow {
+    position: absolute;
+    right: 14px;
+    display: inline-flex;
+    align-items: center;
+}
+
+.iam-login-hint {
+    margin: 14px 0 0;
+    text-align: center;
+    color: var(--el-text-color-secondary);
+    font-size: 12px;
+    line-height: 20px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .iam-login-entry.el-button {
+        transition: none;
+    }
+}
+
 .login {
     background-image: url('./images/login_bg.png');
     @apply min-h-screen bg-no-repeat bg-center bg-cover;