refactor: 多租户适配调整

.env.development

@@ -6,8 +6,8 @@ VITE_APP_TITLE=vue3-element-admin
 VITE_APP_BASE_API=/dev-api
 
 # 接口地址
-VITE_APP_API_URL=https://api.youlai.tech # 线上
+# VITE_APP_API_URL=https://api.youlai.tech # 线上
-# VITE_APP_API_URL=http://localhost:8989    # 本地
+VITE_APP_API_URL=http://localhost:8000    # 本地
 
 # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
 VITE_APP_WS_ENDPOINT=

src/api/auth-api.ts

@@ -4,18 +4,16 @@ const AUTH_BASE_URL = "/api/v1/auth";
 
 const AuthAPI = {
   /** 登录接口*/
-  login(data: LoginFormData) {
+  login(data: LoginRequest) {
-    const formData = new FormData();
-    formData.append("username", data.username);
-    formData.append("password", data.password);
-    formData.append("captchaKey", data.captchaKey);
-    formData.append("captchaCode", data.captchaCode);
     return request<any, LoginResult>({
       url: `${AUTH_BASE_URL}/login`,
       method: "post",
-      data: formData,
+      data: {
-      headers: {
+        username: data.username,
-        "Content-Type": "multipart/form-data",
+        password: data.password,
+        captchaId: data.captchaId,
+        captchaCode: data.captchaCode,
+        tenantId: data.tenantId,
       },
     });
   },
@@ -51,18 +49,20 @@ const AuthAPI = {
 
 export default AuthAPI;
 
-/** 登录表单数据 */
+/** 登录请求参数 */
-export interface LoginFormData {
+export interface LoginRequest {
   /** 用户名 */
   username: string;
   /** 密码 */
   password: string;
-  /** 验证码缓存key */
+  /** 验证码缓存ID */
-  captchaKey: string;
+  captchaId?: string;
   /** 验证码 */
-  captchaCode: string;
+  captchaCode?: string;
-  /** 记住我 */
+  /** 记住我（前端使用，不发送到后端） */
-  rememberMe: boolean;
+  rememberMe?: boolean;
+  /** 租户ID（可选，多租户模式下用于指定租户） */
+  tenantId?: number;
 }
 
 /** 登录响应 */
@@ -79,8 +79,8 @@ export interface LoginResult {
 
 /** 验证码信息 */
 export interface CaptchaInfo {
-  /** 验证码缓存key */
+  /** 验证码缓存ID */
-  captchaKey: string;
+  captchaId: string;
   /** 验证码图片Base64字符串 */
   captchaBase64: string;
 }

src/api/system/tenant-api.ts

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
 
-const TENANT_BASE_URL = "/api/v1/tenant";
+const TENANT_BASE_URL = "/api/v1/tenants";
 
 /**
  * 租户信息
@@ -37,7 +37,7 @@ const TenantAPI = {
    */
   getTenantList() {
     return request<any, TenantInfo[]>({
-      url: `${TENANT_BASE_URL}/list`,
+      url: `${TENANT_BASE_URL}`,
       method: "get",
     });
   },
@@ -59,7 +59,7 @@ const TenantAPI = {
    */
   switchTenant(tenantId: number) {
     return request<any, TenantInfo>({
-      url: `${TENANT_BASE_URL}/switch/${tenantId}`,
+      url: `${TENANT_BASE_URL}/${tenantId}/switch`,
       method: "post",
     });
   },

src/components/TenantSelect/index.vue

@@ -35,7 +35,17 @@ const tenantStore = useTenantStoreHook();
 
 // 当前租户名称
 const currentTenantName = computed(() => {
-  return tenantStore.currentTenant?.name || "未选择租户";
+  if (tenantStore.currentTenant?.name) {
+    return tenantStore.currentTenant.name;
+  }
+  // 如果当前租户信息不存在，尝试从租户列表中查找
+  if (tenantStore.currentTenantId) {
+    const tenant = tenantStore.tenantList.find((t) => t.id === tenantStore.currentTenantId);
+    if (tenant) {
+      return tenant.name;
+    }
+  }
+  return "未选择租户";
 });
 
 // 当前租户ID
@@ -74,30 +84,35 @@ onMounted(() => {
 .tenant-select {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  height: 100%;
+  padding: 0 8px;
   cursor: pointer;
+  border-radius: 4px;
   transition: all 0.3s;
 
   &__icon {
     margin-right: 6px;
     font-size: 18px;
-    color: var(--el-text-color-regular);
+    color: inherit;
+    transition: color 0.3s;
   }
 
   &__name {
-    max-width: 120px;
+    max-width: 100px;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: 14px;
-    color: var(--el-text-color-regular);
+    color: inherit;
     white-space: nowrap;
+    transition: color 0.3s;
   }
 
   &__arrow {
     margin-left: 6px;
     font-size: 12px;
-    color: var(--el-text-color-secondary);
+    color: inherit;
-    transition: transform 0.3s;
+    opacity: 0.7;
+    transition: all 0.3s;
   }
 
   &:hover {
@@ -107,6 +122,11 @@ onMounted(() => {
     .tenant-select__name {
       color: var(--el-color-primary);
     }
+
+    .tenant-select__arrow {
+      color: var(--el-color-primary);
+      opacity: 1;
+    }
   }
 }
 

src/enums/api/code-enum.ts

@@ -20,4 +20,9 @@ export const enum ApiCodeEnum {
    * 刷新令牌无效或过期
    */
   REFRESH_TOKEN_INVALID = "A0231",
+
+  /**
+   * 需要选择租户
+   */
+  CHOOSE_TENANT = "A0250",
 }

src/layouts/components/NavBar/components/NavbarActions.vue

@@ -100,9 +100,19 @@ const router = useRouter();
 // 是否为桌面设备
 const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
 
-// 是否显示租户选择（如果用户有多个租户或已选择租户）
+// 是否显示租户选择（如果用户有多个租户，则显示租户选择器）
+// 最小侵入：只有在多租户模式下（租户列表长度 > 1）才显示
 const showTenantSelect = computed(() => {
-  return tenantStore.tenantList.length > 0 || tenantStore.currentTenantId !== null;
+  // 如果租户列表为空，不显示
+  if (tenantStore.tenantList.length === 0) {
+    return false;
+  }
+  // 如果只有一个租户，也不显示（单租户模式，用户无感知）
+  if (tenantStore.tenantList.length === 1) {
+    return false;
+  }
+  // 多个租户时才显示
+  return true;
 });
 
 /**
@@ -257,6 +267,16 @@ function handleSettingsClick() {
   .user-profile__name {
     color: rgba(255, 255, 255, 0.85);
   }
+
+  // 租户选择器在白色文字模式下的样式
+  :deep(.tenant-select) {
+    color: rgba(255, 255, 255, 0.85);
+
+    &:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
 }
 
 // 深色文字样式（用于浅色背景：明亮主题下的左侧布局）
@@ -278,6 +298,16 @@ function handleSettingsClick() {
   .user-profile__name {
     color: var(--el-text-color-regular) !important;
   }
+
+  // 租户选择器在深色文字模式下的样式
+  :deep(.tenant-select) {
+    color: var(--el-text-color-regular) !important;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+      background: rgba(0, 0, 0, 0.04);
+    }
+  }
 }
 
 // 确保下拉菜单中的图标不受影响

src/plugins/permission.ts

@@ -2,6 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
 import NProgress from "@/utils/nprogress";
 import router from "@/router";
 import { usePermissionStore, useUserStore } from "@/store";
+import { useTenantStoreHook } from "@/store/modules/tenant-store";
 
 export function setupPermission() {
   const whiteList = ["/login"];
@@ -38,6 +39,12 @@ export function setupPermission() {
           await userStore.getUserInfo();
         }
 
+        // 登录成功后，尝试获取租户列表和当前租户信息（如果启用多租户）
+        // 最小侵入：如果接口失败，不影响正常流程（可能是单租户模式）
+        const tenantStore = useTenantStoreHook();
+        // 由 tenantStore 内部自行判断前端多租户开关（VITE_APP_TENANT_ENABLED）
+        await tenantStore.prepareTenantContextAfterLogin();
+
         const dynamicRoutes = await permissionStore.generateRoutes();
         dynamicRoutes.forEach((route: RouteRecordRaw) => {
           router.addRoute(route);

src/store/modules/tenant-store.ts

@@ -1,6 +1,9 @@
 import { store } from "@/store";
 import TenantAPI, { type TenantInfo } from "@/api/system/tenant-api";
 
+// 前端多租户开关；默认开启，若后端未启用多租户可在 .env 设置 VITE_APP_TENANT_ENABLED=false
+const TENANT_ENABLED = import.meta.env.VITE_APP_TENANT_ENABLED !== "false";
+
 const TENANT_ID_KEY = "current_tenant_id";
 const TENANT_INFO_KEY = "current_tenant_info";
 
@@ -52,6 +55,39 @@ export const useTenantStore = defineStore("tenant", () => {
     });
   }
 
+  /**
+   * 登录后初始化租户：获取列表并尽量确定当前租户
+   * - 忽略错误，以便单租户模式不受影响
+   */
+  // 登录后准备租户上下文：先取租户列表，再用后端返回的当前租户；若单租户则自动选中
+  async function prepareTenantContextAfterLogin() {
+    if (!TENANT_ENABLED) {
+      return;
+    }
+
+    try {
+      await fetchTenantList();
+
+      if (tenantList.value.length > 0 && !currentTenantId.value) {
+        try {
+          const currentTenantInfo = await TenantAPI.getCurrentTenant();
+          if (currentTenantInfo) {
+            setCurrentTenant(currentTenantInfo);
+          } else if (tenantList.value.length === 1) {
+            setCurrentTenant(tenantList.value[0]);
+          }
+        } catch (error) {
+          if (tenantList.value.length === 1) {
+            setCurrentTenant(tenantList.value[0]);
+          }
+          console.debug("获取当前租户信息失败（可能是单租户模式）:", error);
+        }
+      }
+    } catch (error) {
+      console.debug("获取租户列表失败（可能是单租户模式）:", error);
+    }
+  }
+
   /**
    * 设置当前租户
    *
@@ -120,6 +156,7 @@ export const useTenantStore = defineStore("tenant", () => {
     currentTenantId,
     currentTenant,
     tenantList,
+    prepareTenantContextAfterLogin,
     fetchTenantList,
     setCurrentTenant,
     switchTenant,

src/store/modules/user-store.ts

@@ -1,6 +1,6 @@
 import { store } from "@/store";
 
-import AuthAPI, { type LoginFormData } from "@/api/auth-api";
+import AuthAPI, { type LoginRequest } from "@/api/auth-api";
 import UserAPI, { type UserInfo } from "@/api/system/user-api";
 
 import { AuthStorage } from "@/utils/auth";
@@ -18,16 +18,16 @@ export const useUserStore = defineStore("user", () => {
   /**
    * 登录
    *
-   * @param {LoginFormData}
+   * @param {LoginRequest}
    * @returns
    */
-  function login(LoginFormData: LoginFormData) {
+  function login(loginRequest: LoginRequest) {
     return new Promise<void>((resolve, reject) => {
-      AuthAPI.login(LoginFormData)
+      AuthAPI.login(loginRequest)
         .then((data) => {
           const { accessToken, refreshToken } = data;
           // 保存记住我状态和token
-          rememberMe.value = LoginFormData.rememberMe;
+          rememberMe.value = loginRequest.rememberMe ?? false;
           AuthStorage.setTokens(accessToken, refreshToken, rememberMe.value);
           resolve();
         })

src/utils/request.ts

@@ -34,6 +34,7 @@ httpRequest.interceptors.request.use(
     }
 
     // 添加租户ID到请求头（如果存在）
+    // 注意：只有在登录成功后，tenantStore 才会初始化，所以这里需要 try-catch
     try {
       const tenantStore = useTenantStoreHook();
       const tenantId = tenantStore.currentTenantId;
@@ -41,8 +42,8 @@ httpRequest.interceptors.request.use(
         config.headers["tenant-id"] = String(tenantId);
       }
     } catch (error) {
-      // 如果租户 store 未初始化，忽略错误
+      // 如果租户 store 未初始化（如登录前），忽略错误
-      console.debug("Tenant store not available:", error);
+      // 这是正常的，因为多租户功能是可选的，未启用时不会初始化 tenantStore
     }
 
     return config;
@@ -70,6 +71,15 @@ httpRequest.interceptors.response.use(
       return data;
     }
 
+    // 特殊处理：需要选择租户（不显示错误提示，返回特殊对象供业务层处理）
+    if (code === ApiCodeEnum.CHOOSE_TENANT) {
+      return Promise.reject({
+        code: ApiCodeEnum.CHOOSE_TENANT,
+        data,
+        msg,
+      });
+    }
+
     // 业务错误
     ElMessage.error(msg || "系统出错");
     return Promise.reject(new Error(msg || "Business Error"));

src/views/login/components/Login.vue

@@ -87,7 +87,34 @@
     </div>
 
     <!-- 租户选择对话框 -->
-    <TenantSelectDialog v-model="tenantDialogVisible" @confirm="handleTenantSelected" />
+    <el-dialog
+      v-model="tenantDialogVisible"
+      title="选择登录租户"
+      width="500px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <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>
+      </div>
+      <template #footer>
+        <el-button @click="tenantDialogVisible = false">取消</el-button>
+        <el-button type="primary" :disabled="!selectedTenantId" @click="handleTenantSelected">
+          继续
+        </el-button>
+      </template>
+    </el-dialog>
 
     <!-- 第三方登录 -->
     <div class="third-party-login">
@@ -115,13 +142,12 @@
 </template>
 <script setup lang="ts">
 import type { FormInstance } from "element-plus";
-import AuthAPI, { type LoginFormData } from "@/api/auth-api";
+import AuthAPI, { type LoginRequest } from "@/api/auth-api";
 import router from "@/router";
 import { useUserStore } from "@/store";
-import { useTenantStoreHook } from "@/store/modules/tenant-store";
 import CommonWrapper from "@/components/CommonWrapper/index.vue";
 import { AuthStorage } from "@/utils/auth";
-import TenantSelectDialog from "@/components/TenantSelectDialog/index.vue";
+import { ApiCodeEnum } from "@/enums/api/code-enum";
 
 const { t } = useI18n();
 const userStore = useUserStore();
@@ -139,12 +165,12 @@ const captchaBase64 = ref();
 const rememberMe = AuthStorage.getRememberMe();
 // 租户选择对话框
 const tenantDialogVisible = ref(false);
-const tenantStore = useTenantStoreHook();
+const selectedTenantId = ref<number | null>(null);
 
-const loginFormData = ref<LoginFormData>({
+const loginFormData = ref<LoginRequest>({
   username: "admin",
   password: "123456",
-  captchaKey: "",
+  captchaId: "",
   captchaCode: "",
   rememberMe,
 });
@@ -186,12 +212,15 @@ function getCaptcha() {
   codeLoading.value = true;
   AuthAPI.getCaptcha()
     .then((data) => {
-      loginFormData.value.captchaKey = data.captchaKey;
+      loginFormData.value.captchaId = data.captchaId;
       captchaBase64.value = data.captchaBase64;
     })
     .finally(() => (codeLoading.value = false));
 }
 
+// 待选择的租户列表
+const pendingTenants = ref<Array<{ id: number; name: string }>>([]);
+
 /**
  * 登录提交
  */
@@ -204,34 +233,25 @@ async function handleLoginSubmit() {
     loading.value = true;
 
     // 2. 执行登录
-    await userStore.login(loginFormData.value);
-
-    // 3. 登录成功后，检查是否需要选择租户
     try {
-      await tenantStore.fetchTenantList();
+      await userStore.login(loginFormData.value);
-      const tenantList = tenantStore.tenantList;
+      // 登录成功，跳转到目标页面
-
+      const redirectPath = (route.query.redirect as string) || "/";
-      // 如果用户有多个租户，且没有当前租户，显示租户选择对话框
+      await router.push(decodeURIComponent(redirectPath));
-      if (tenantList.length > 1 && !tenantStore.currentTenantId) {
+    } catch (error: any) {
+      // 检查是否是 choose_tenant 响应
+      if (error?.code === ApiCodeEnum.CHOOSE_TENANT && error?.data?.tenants) {
+        // 需要选择租户
+        pendingTenants.value = error.data.tenants;
         tenantDialogVisible.value = true;
         return; // 等待用户选择租户
       }
-
+      // 其他错误，刷新验证码并显示错误
-      // 如果只有一个租户，自动设置
+      getCaptcha();
-      if (tenantList.length === 1 && !tenantStore.currentTenantId) {
+      throw error;
-        await tenantStore.switchTenant(tenantList[0].id);
-      }
-    } catch (error) {
-      // 如果获取租户列表失败，不影响登录流程（可能是单租户模式）
-      console.warn("获取租户列表失败（可能是单租户模式）:", error);
     }
-
-    // 4. 跳转到目标页面
-    const redirectPath = (route.query.redirect as string) || "/";
-    await router.push(decodeURIComponent(redirectPath));
   } catch (error) {
     // 统一错误处理
-    getCaptcha(); // 刷新验证码
     console.error("登录失败:", error);
   } finally {
     loading.value = false;
@@ -242,8 +262,27 @@ async function handleLoginSubmit() {
  * 租户选择确认后的处理
  */
 async function handleTenantSelected() {
-  const redirectPath = (route.query.redirect as string) || "/";
+  if (!selectedTenantId.value) {
-  await router.push(decodeURIComponent(redirectPath));
+    ElMessage.warning("请选择租户");
+    return;
+  }
+
+  try {
+    loading.value = true;
+    // 使用选中的租户ID重新登录（将 tenantId 设置到表单数据中）
+    const loginData = { ...loginFormData.value, tenantId: selectedTenantId.value };
+    await userStore.login(loginData);
+    // 登录成功，关闭对话框并跳转
+    tenantDialogVisible.value = false;
+    const redirectPath = (route.query.redirect as string) || "/";
+    await router.push(decodeURIComponent(redirectPath));
+  } catch (error) {
+    // 登录失败，刷新验证码
+    getCaptcha();
+    console.error("登录失败:", error);
+  } finally {
+    loading.value = false;
+  }
 }
 
 // 检查输入大小写
@@ -293,4 +332,42 @@ function toOtherForm(type: "register" | "resetPwd") {
     }
   }
 }
+
+.tenant-select-content {
+  padding: 20px 0;
+
+  .tenant-select-tip {
+    margin: 0 0 20px;
+    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/components/Register.vue

@@ -98,7 +98,7 @@
 import type { FormInstance } from "element-plus";
 import { Lock } from "@element-plus/icons-vue";
 import { useI18n } from "vue-i18n";
-import AuthAPI, { type LoginFormData } from "@/api/auth-api";
+import AuthAPI, { type LoginRequest } from "@/api/auth-api";
 
 const { t } = useI18n();
 
@@ -113,7 +113,7 @@ const isCapsLock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
 const isRead = ref(false);
 
-interface Model extends LoginFormData {
+interface Model extends LoginRequest {
   confirmPassword: string;
 }
 
@@ -121,7 +121,7 @@ const model = ref<Model>({
   username: "admin",
   password: "123456",
   confirmPassword: "",
-  captchaKey: "",
+  captchaId: "",
   captchaCode: "",
   rememberMe: false,
 });
@@ -182,7 +182,7 @@ function getCaptcha() {
   codeLoading.value = true;
   AuthAPI.getCaptcha()
     .then((data) => {
-      model.value.captchaKey = data.captchaKey;
+      model.value.captchaId = data.captchaId;
       captchaBase64.value = data.captchaBase64;
     })
     .finally(() => (codeLoading.value = false));