feat: 新增租户切换组件和css目录优化

src/views/login/components/Login.vue

@@ -97,16 +97,7 @@
     >
       <div class="tenant-select-content">
         <p class="tenant-select-tip">检测到你的账号属于多个租户，请选择登录租户：</p>
-        <el-radio-group v-model="selectedTenantId" class="tenant-radio-group">
-          <el-radio
-            v-for="tenant in pendingTenants"
-            :key="tenant.id"
-            :label="tenant.id"
-            class="tenant-radio"
-          >
-            {{ tenant.name }}
-          </el-radio>
-        </el-radio-group>
+        <TenantSwitcher @change="(id: number) => (selectedTenantId = id)" />
       </div>
       <template #footer>
         <el-button @click="tenantDialogVisible = false">取消</el-button>
@@ -146,12 +137,15 @@ import AuthAPI from "@/api/auth";
 import type { LoginRequest } from "@/types/api";
 import router from "@/router";
 import { useUserStore } from "@/store";
+import { useTenantStoreHook } from "@/store/modules/tenant-store";
 import CommonWrapper from "@/components/CommonWrapper/index.vue";
+import TenantSwitcher from "@/components/TenantSwitcher/index.vue";
 import { AuthStorage } from "@/utils/auth";
 import { ApiCodeEnum } from "@/enums";
 
 const { t } = useI18n();
 const userStore = useUserStore();
+const tenantStore = useTenantStoreHook();
 const route = useRoute();
 
 onMounted(() => getCaptcha());
@@ -219,9 +213,6 @@ function getCaptcha() {
     .finally(() => (codeLoading.value = false));
 }
 
-// 待选择的租户列表
-const pendingTenants = ref<Array<{ id: number; name: string }>>([]);
-
 /**
  * 登录提交
  */
@@ -243,7 +234,8 @@ async function handleLoginSubmit() {
       // 检查是否是 choose_tenant 响应
       if (error?.code === ApiCodeEnum.CHOOSE_TENANT && error?.data?.tenants) {
         // 需要选择租户
-        pendingTenants.value = error.data.tenants;
+        tenantStore.setTenantList(error.data.tenants);
+        selectedTenantId.value = error.data.tenants[0]?.id || null;
         tenantDialogVisible.value = true;
         return; // 等待用户选择租户
       }
@@ -304,12 +296,12 @@ function toOtherForm(type: "register" | "resetPwd") {
 .auth-panel-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .auth-panel-form__title {
-  margin: 0 0 0.75rem;
-  font-size: 1.25rem;
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
   font-weight: 600;
 }
 
@@ -317,7 +309,7 @@ function toOtherForm(type: "register" | "resetPwd") {
   .divider-container {
     display: flex;
     align-items: center;
-    margin: 24px 0;
+    margin: 16px 0;
 
     .divider-line {
       flex: 1;
@@ -342,33 +334,5 @@ function toOtherForm(type: "register" | "resetPwd") {
     font-size: 14px;
     color: var(--el-text-color-regular);
   }
-
-  .tenant-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    width: 100%;
-
-    .tenant-radio {
-      display: flex;
-      align-items: center;
-      padding: 12px 16px;
-      border: 1px solid var(--el-border-color);
-      border-radius: 8px;
-      transition: all 0.3s;
-
-      &:hover {
-        background-color: var(--el-color-primary-light-9);
-        border-color: var(--el-color-primary);
-      }
-
-      :deep(.el-radio__input.is-checked) {
-        + .el-radio__label {
-          font-weight: 500;
-          color: var(--el-color-primary);
-        }
-      }
-    }
-  }
 }
 </style>

src/views/login/index.vue

@@ -123,9 +123,7 @@ onBeforeUnmount(() => {
   height: 100%;
   padding: clamp(1rem, 3vw, 2rem);
   overflow: hidden;
-  background:
-    radial-gradient(circle at 20% 20%, rgba(64, 128, 255, 0.18), transparent 55%),
-    radial-gradient(circle at 80% 80%, rgba(22, 93, 255, 0.16), transparent 50%);
+  background-color: #f5f7ff;
 
   &::before {
     position: fixed;
@@ -201,13 +199,11 @@ onBeforeUnmount(() => {
   flex-direction: column;
   justify-content: center;
   padding: clamp(1.5rem, 3vw, 3rem);
-  color: rgba(20, 40, 80, 0.95);
-  text-shadow: 0 4px 16px rgba(15, 60, 110, 0.12);
+  color: var(--el-text-color-primary);
   animation: featureFade 0.8s ease-out;
 
   @media (prefers-color-scheme: dark) {
     color: rgba(236, 242, 255, 0.92);
-    text-shadow: none;
   }
 }
 
@@ -272,7 +268,7 @@ onBeforeUnmount(() => {
   margin-bottom: 1.5rem;
   font-size: 1rem;
   line-height: 1.7;
-  color: rgba(35, 40, 65, 0.85);
+  color: var(--el-text-color-regular);
 
   @media (prefers-color-scheme: dark) {
     color: rgba(220, 230, 255, 0.75);
@@ -292,8 +288,8 @@ onBeforeUnmount(() => {
     align-items: flex-start;
     padding: 0.75rem 1rem;
     font-weight: 500;
-    color: rgba(32, 37, 60, 0.9);
-    background: rgba(255, 255, 255, 0.55);
+    color: var(--el-text-color-primary);
+    background: rgba(255, 255, 255, 0.9);
     border: 1px solid rgba(64, 128, 255, 0.08);
     border-radius: 12px;
     backdrop-filter: blur(6px);
@@ -321,11 +317,12 @@ onBeforeUnmount(() => {
 .auth-panel {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
+  align-self: center;
   justify-content: flex-start;
   justify-self: end;
-  width: min(520px, 100%);
-  padding: clamp(2rem, 3vw, 2.75rem);
+  width: min(420px, 100%);
+  padding: clamp(1.5rem, 3vw, 2rem);
   margin-inline: auto;
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(22, 93, 255, 0.1);
@@ -359,11 +356,11 @@ onBeforeUnmount(() => {
 
 .auth-panel__brand {
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 1.25rem;
-  margin-bottom: 1.5rem;
+  padding-bottom: 0.875rem;
+  margin-bottom: 1rem;
   border-bottom: 1px solid rgba(22, 93, 255, 0.06);
 
   @media (prefers-color-scheme: dark) {
@@ -449,7 +446,7 @@ onBeforeUnmount(() => {
   margin-inline: auto;
 
   :deep(.el-form-item) {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1rem;
   }
 
   :deep(.el-input__wrapper) {
@@ -472,8 +469,8 @@ onBeforeUnmount(() => {
 }
 
 .auth-panel__footer {
-  padding-top: 1.25rem;
-  margin-top: 0.25rem;
+  padding-top: 0.875rem;
+  margin-top: 0.125rem;
   font-size: 0.875rem;
   text-align: center;
   border-top: 1px solid rgba(22, 93, 255, 0.06);