yg-yygl 0.0.1

package/dist/views/login/components/login-form.vue

@@ -0,0 +1,666 @@
+<script setup lang="ts">
+import type { FormItemConfig } from '@udp/component-ui';
+
+import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Form } from '@udp/component-ui';
+import { VBEN_DOC_URL } from '@udp/constants';
+import { useWatermark } from '@udp/hooks';
+
+import { useMask } from '@udp/mask';
+
+import { Iphone, Lock, User, ArrowLeft } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+import { checkCaptchaRes, listByMobileWithTenant, login } from '../../../api/login';
+import { listByKey } from '../../../api/sys-config';
+import { listAllTenant } from '../../../api/tenant';
+import { useAuthStore } from '../../../store';
+import { encryptPassword } from '../../../utils';
+
+import SecurityCode from './security-code.vue';
+
+// 记住密码的存储key
+const REMEMBER_KEY = 'udp_remember_login';
+
+// 从父组件获取布局配置和模板信息
+const props = defineProps<{
+  currentLayout: string;
+  templateInfo?: any; // 接收模板信息
+  portalConfig?: any; // 接收门户配置（含租户模式状态）
+}>();
+
+const emit = defineEmits(['getConfig']);
+
+const { destroyWatermark } = useWatermark();
+
+const { maskPhone } = useMask();
+
+const securityCodeRdf = ref();
+
+const router = useRouter();
+
+const loading = ref(false);
+const captcha = ref(false);
+// 表单引用
+const loginFormRef = ref();
+
+const authStore = useAuthStore();
+
+const tenantOptions = reactive<{ label: string; value: number }[]>([]);
+
+// 当前租户模式状态：从 props 或 localStorage 读取
+const currentTenantStatus = ref(
+  props.portalConfig?.tenantStatus || localStorage.getItem('tenantStatus') || '1',
+);
+
+// props.portalConfig 变化时同步更新租户模式状态
+watch(
+  () => props.portalConfig?.tenantStatus,
+  (val) => {
+    if (val !== undefined && val !== null) {
+      currentTenantStatus.value = val;
+      localStorage.setItem('tenantStatus', val);
+    }
+  },
+);
+
+// 是否显示租户选择器：租户模式关闭时隐藏
+const showTenantSelect = computed(() => currentTenantStatus.value !== '0');
+
+const loginForm = ref({
+   tenantId: null,
+  loginCode: '',
+  password: '',
+});
+
+// 记住密码
+const rememberPassword = ref(false);
+
+// 当前激活的登录模式
+const activeTab = ref<string>('account');
+
+// 手机号登录相关状态
+const mobileLoginForm = ref({
+  mobile: '',
+});
+const mobileLoginStep = ref<'input' | 'login'>('input'); // 手机号登录步骤
+const accountList = ref<any[]>([]); // 关联账号列表
+const selectedAccount = ref<any>(null); // 选中的账号
+const mobilePassword = ref(''); // 手机号登录密码
+const mobilePasswordRef = ref(); // 密码输入框引用
+const mobileLoginFormRef = ref(); // 手机号登录表单引用
+const mobileInputFormRef = ref(); // 手机号输入表单引用
+
+// 手机号输入表单验证规则
+const mobileInputRules = {
+  mobile: [
+    { required: true, message: '请输入手机号', trigger: 'blur' },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '请输入正确的手机号',
+      trigger: 'blur',
+    },
+  ],
+};
+
+// 手机号登录表单验证规则
+const mobileLoginRules = {
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+  ],
+};
+
+const captchaConfig = (tenantId?: string) => {
+  listByKey({
+    configType: 'login',
+    configKey: 'captchaType',
+    configStatus: '1',
+    tenantId: tenantId || null,
+  }).then((res) => {
+    captcha.value = res !== null && res.length > 0;
+  });
+};
+
+// Tab 切换
+const handleTabChange = (tab: string) => {
+  activeTab.value = tab;
+  // 切换 tab 时重置手机号登录状态
+  if (tab === 'account') {
+    resetMobileLogin();
+  }
+};
+
+// 重置手机号登录状态
+const resetMobileLogin = () => {
+  mobileLoginForm.value.mobile = '';
+  mobileLoginStep.value = 'input';
+  accountList.value = [];
+  selectedAccount.value = null;
+  mobilePassword.value = '';
+  mobileInputFormRef.value?.clearValidate();
+  mobileLoginFormRef.value?.clearValidate();
+};
+
+// 手机号登录 - 查询关联账号
+const handleQueryAccounts = async () => {
+  // 表单验证
+  const valid = await mobileInputFormRef.value?.validate().catch(() => false);
+  if (!valid) {
+    return;
+  }
+
+  try {
+    loading.value = true;
+    const res = await listByMobileWithTenant({ mobile: mobileLoginForm.value.mobile });
+    if (res && res.length > 0) {
+      accountList.value = res;
+      // 默认选中第一个状态正常的账号
+      selectedAccount.value = res.find((acc: any) => acc.status === 1) || res[0];
+      mobileLoginStep.value = 'login';
+      // 自动聚焦密码输入框
+      await nextTick();
+      mobilePasswordRef.value?.focus();
+
+      captchaConfig(selectedAccount.value.tenantId);
+      emit('getConfig', selectedAccount.value.tenantId);
+    } else {
+      ElMessage.warning('该手机号未关联任何账号');
+    }
+  } catch (error) {
+    console.error('查询账号失败', error);
+    ElMessage.error('查询账号失败，请重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 切换账号
+const handleSwitchAccount = (account: any) => {
+  if (account.status !== 1) {
+    ElMessage.warning('该账号已被禁用');
+    return;
+  }
+  selectedAccount.value = account;
+  mobilePassword.value = '';
+  mobileLoginFormRef.value?.clearValidate();
+  mobilePasswordRef.value?.focus();
+  captchaConfig(account.tenantId);
+  emit('getConfig', account.tenantId);
+};
+
+// 手机号登录 - 最终登录
+const handleMobileLogin = async () => {
+  // 表单验证
+  const valid = await mobileLoginFormRef.value?.validate().catch(() => false);
+  if (!valid) {
+    return;
+  }
+
+  // 验证码校验
+  if (captcha.value) {
+    const data = {
+      captchaId: biyiCaptchaKey.value,
+      captchaCode: inputCode.value,
+    };
+    try {
+      if (inputCode.value === null || inputCode.value === '') {
+        ElMessage.error('请输入验证码');
+        securityCodeRdf.value?.init();
+        return;
+      }
+      const res = await checkCaptchaRes(data);
+      if (res === -2) {
+        ElMessage.error('验证码已失效，请重新输入新的验证码！');
+        securityCodeRdf.value?.init();
+        return;
+      }
+      if (res === -1) {
+        ElMessage.error('验证码错误！');
+        securityCodeRdf.value?.init();
+        return;
+      }
+    } catch {
+      ElMessage.error('验证码验证失败，请重试！');
+      securityCodeRdf.value?.init();
+      return;
+    }
+  }
+
+  try {
+    loading.value = true;
+    const loginParams = {
+      loginCode: selectedAccount.value.loginCode,
+      password: encryptPassword(mobilePassword.value),
+      tenantId: selectedAccount.value.tenantId,
+    };
+    const res = await login(loginParams);
+    const tokenValue = res?.tokenValue;
+    console.warn('手机号登录成功', tokenValue);
+    authStore.authLogin(res);
+  } catch (error: any) {
+    console.error('登录失败', error);
+    if (error?.code === -1009 || error?.code === -1011) {
+      router.push({
+        path: '/auth/update-password',
+        query: {
+          loginCode: selectedAccount.value.loginCode,
+        },
+      });
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+const tenantList = () => {
+  listAllTenant({ status: 1 }).then((res) => {
+    tenantOptions.length = 0; // 先清空，防止重复累加
+    res.forEach((item: { id: any; tenantName: any }) => {
+      tenantOptions.push({ value: item.id, label: item.tenantName });
+    });
+  });
+};
+
+const inputCode = ref('');
+const biyiCaptchaKey = ref('');
+
+// 定义表单配置项
+const formItems = computed<FormItemConfig[]>(() => {
+  const items: FormItemConfig[] = [];
+
+  // 租户选择器：仅在开启租户模式时显示
+  if (showTenantSelect.value) {
+    items.push({
+      prop: 'tenantId',
+      label: '',
+      type: 'select-v2',
+      required: true,
+      placeholder: '请选择租户',
+      rules: [{ required: true, message: '请选择租户', trigger: 'change' }],
+      options: tenantOptions,
+      props: {
+        filterable: true,
+        prefix: 'mdi:home-variant-outline',
+        onChange: (value: string) => {
+          captchaConfig(value);
+          emit('getConfig', value);
+        },
+      },
+    });
+  }
+
+  items.push(
+    {
+      prop: 'loginCode',
+      label: '',
+      type: 'input',
+      required: true,
+      trim: true,
+      placeholder: '请输入登录账号',
+      rules: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
+      props: { prefixIcon: User },
+    },
+    {
+      prop: 'password',
+      label: '',
+      type: 'password',
+      required: true,
+      trim: true,
+      placeholder: '请输入密码',
+      props: {
+        prefixIcon: Lock,
+        onKeyup: (e: KeyboardEvent) => {
+          if (e.key === 'Enter') handleLogin();
+        },
+      },
+      rules: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+    },
+    {
+      prop: 'captcha',
+      label: '',
+      slot: 'captcha',
+      hidden: !captcha.value,
+    },
+    {
+      prop: 'remember',
+      label: '',
+      slot: 'remember',
+    },
+  );
+
+  return items;
+});
+
+// 提交按钮加载状态
+const submitLoading = computed(() => loading.value || authStore.loginLoading);
+
+const handleLogin = async () => {
+  // 先验证表单
+  if (!loginFormRef.value) return;
+  if (captcha.value) {
+    // 验证码校验
+    const data = {
+      captchaId: biyiCaptchaKey.value,
+      captchaCode: inputCode.value,
+    };
+    try {
+      if (inputCode.value === null || inputCode.value === '') {
+        ElMessage.error('请输入验证码');
+        securityCodeRdf.value?.init();
+        return;
+      }
+      const res = await checkCaptchaRes(data);
+      if (res === -2) {
+        ElMessage.error('验证码已失效，请重新输入新的验证码！');
+        securityCodeRdf.value?.init();
+        return;
+      }
+      if (res === -1) {
+        ElMessage.error('验证码错误！');
+        securityCodeRdf.value?.init();
+        return;
+      }
+    } catch {
+      ElMessage.error('验证码验证失败，请重试！');
+      securityCodeRdf.value?.init();
+      return;
+    }
+  }
+  try {
+    // 使用自定义Form组件的validate方法
+    const valid = await loginFormRef.value.validate();
+
+    if (!valid) {
+      ElMessage.warning('请填写完整的登录信息');
+      return;
+    }
+
+    // 表单验证通过后执行登录
+    loading.value = true;
+
+    // 加密密码
+    const loginParams = {
+      // tenantId: loginForm.value.tenantId,
+      loginCode: loginForm.value.loginCode,
+      password: encryptPassword(loginForm.value.password),
+      tenantId: loginForm.value.tenantId,
+    };
+    console.log(loginForm.value, 7777);
+    const res = await login(loginParams);
+
+    // 只提取tokenValue字段
+    const tokenValue = res?.tokenValue;
+    console.warn('登录成功', tokenValue);
+
+    // 处理记住密码
+    if (rememberPassword.value) {
+      // 保存到 localStorage
+      localStorage.setItem(REMEMBER_KEY, JSON.stringify({
+        tenantId: loginForm.value.tenantId,
+        loginCode: loginForm.value.loginCode,
+        password: loginForm.value.password,
+      }));
+    } else {
+      // 清除保存的信息
+      localStorage.removeItem(REMEMBER_KEY);
+    }
+
+    authStore.authLogin(res);
+  } catch (error: any) {
+    console.error('表单验证失败', error);
+    if (error?.code === -1009 || error?.code === -1011) {
+      router.push({
+        path: '/auth/update-password',
+        query: {
+          loginCode: loginForm.value.loginCode,
+        },
+      });
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 读取记住的密码
+const loadRememberedLogin = () => {
+  try {
+    const remembered = localStorage.getItem(REMEMBER_KEY);
+    if (remembered) {
+      const data = JSON.parse(remembered);
+      loginForm.value.tenantId = data.tenantId || null;
+      loginForm.value.loginCode = data.loginCode || '';
+      loginForm.value.password = data.password || '';
+      rememberPassword.value = true;
+    }
+  } catch (e) {
+    console.error('读取记住的登录信息失败', e);
+  }
+};
+
+onBeforeMount(() => {
+  // 每次进入登录页都触发父组件刷新配置，确保 tenantStatus 为最新值
+  emit('getConfig');
+});
+
+onMounted(() => {
+  captchaConfig();
+  // 仅开启租户模式时才请求租户列表
+  if (showTenantSelect.value) {
+    tenantList();
+  }
+  destroyWatermark();
+  // 读取记住的登录信息
+  loadRememberedLogin();
+});
+
+// 打开帮助文档
+const openHelpDoc = () => {
+  window.open(VBEN_DOC_URL, '_blank', 'noopener,noreferrer');
+};
+</script>
+
+<template>
+  <div
+    class="z-10000 flex h-full w-full flex-col justify-center"
+    :class="{
+      'items-center': currentLayout === 'center',
+      'items-start': currentLayout !== 'center',
+    }"
+  >
+    <!--  选择账号时的返回按钮  -->
+    <el-link
+      v-if="activeTab === 'mobile' && mobileLoginStep === 'login'"
+      class="mb-[18px]"
+      :icon="ArrowLeft"
+      type="info"
+      underline="never"
+      @click="resetMobileLogin"
+    > 返回</el-link>
+   <!-- 登录欢迎信息，使用传入的prop -->
+    <div class="text-foreground text-center mb-[30px] w-full truncate text-2xl font-medium">
+      {{ '账号密码登录' }}
+    </div>
+    <!-- Tab 切换（当有多种登录模式时显示） -->
+    <el-tabs
+      v-if="mobileLoginStep !== 'login'"
+      v-model="activeTab"
+      class="mb-5 w-full"
+      @tab-change="handleTabChange"
+    >
+      <el-tab-pane label="账号登录" name="account" />
+      <el-tab-pane label="手机号登录" name="mobile" />
+    </el-tabs>
+
+    <!-- 账号登录表单 -->
+    <div v-show="activeTab === 'account'" class="w-full">
+      <Form
+        ref="loginFormRef"
+        v-model="loginForm"
+        :items="formItems"
+        :show-actions="true"
+        :show-reset-button="false"
+        size="large"
+        submit-button-text="登录"
+        :submit-loading="submitLoading"
+        class="login-form w-full"
+        @submit="handleLogin"
+      >
+        <template #captcha>
+          <SecurityCode
+            v-model:value="inputCode"
+            v-model:biyi-captcha-key="biyiCaptchaKey"
+            type="digital"
+            width="100%"
+            ref="securityCodeRdf"
+          />
+        </template>
+        <template #remember>
+          <el-checkbox v-model="rememberPassword" label="记住密码" />
+        </template>
+      </Form>
+    </div>
+
+    <!-- 手机号登录流程 -->
+    <div v-show="activeTab === 'mobile'" class="w-full">
+      <!-- 步骤1: 输入手机号 -->
+      <div v-if="mobileLoginStep === 'input'">
+        <el-form
+          ref="mobileInputFormRef"
+          :model="mobileLoginForm"
+          :rules="mobileInputRules"
+          class="login-form"
+        >
+          <el-form-item prop="mobile">
+            <el-input
+              v-model="mobileLoginForm.mobile"
+              size="large"
+              placeholder="请输入手机号"
+              :prefix-icon="Iphone"
+              maxlength="11"
+              clearable
+              @keyup.enter="handleQueryAccounts"
+            />
+          </el-form-item>
+        </el-form>
+        <el-button
+          type="primary"
+          size="large"
+          :loading="loading"
+          class="w-full"
+          style="height: 45px"
+          @click="handleQueryAccounts"
+        >
+          查询账号
+        </el-button>
+      </div>
+
+      <!-- 步骤2: 账号登录（账号选择 + 密码输入） -->
+      <div v-if="mobileLoginStep === 'login'">
+
+        <!-- 账号选择器 -->
+        <div class="max-h-[270px] overflow-y-auto mb-6 rounded-lg bg-white flex flex-col gap-4 py-1">
+          <div
+            v-for="account in accountList"
+            :key="account.id"
+            class="p-4 border border-[#A7C6F9] cursor-pointer transition-colors duration-200 hover:bg-[var(--el-color-primary-light-9)] rounded-xl"
+            :class="{
+              'opacity-50 cursor-not-allowed hover:bg-transparent': account.status !== 1,
+              'bg-[#EDF4FE] hover:bg-[#EDF4FE]': selectedAccount.id === account.id
+            }"
+            @click="handleSwitchAccount(account)"
+          >
+            <div class="text-base font-medium text-[#1A1A1A] mb-1 leading-[22px]">
+              {{ account.nickname || account.loginCode }}
+            </div>
+            <div class="text-xs text-[#999999]">
+              {{ account.tenantName }}
+              <el-divider direction="vertical" />
+              账号：{{ account.loginCode }}
+            </div>
+          </div>
+        </div>
+
+        <el-form
+          ref="mobileLoginFormRef"
+          :model="{ password: mobilePassword }"
+          :rules="mobileLoginRules"
+          class="login-form"
+        >
+          <el-form-item prop="password">
+            <el-input
+              v-model="mobilePassword"
+              ref="mobilePasswordRef"
+              type="password"
+              size="large"
+              placeholder="请输入密码"
+              :prefix-icon="Lock"
+              show-password
+              clearable
+              @keyup.enter="handleMobileLogin"
+            />
+          </el-form-item>
+
+          <!-- 验证码 -->
+          <el-form-item v-if="captcha">
+            <SecurityCode
+              v-model:value="inputCode"
+              v-model:biyi-captcha-key="biyiCaptchaKey"
+              type="digital"
+              width="100%"
+              ref="securityCodeRdf"
+            />
+          </el-form-item>
+        </el-form>
+
+        <el-button
+          type="primary"
+          size="large"
+          :loading="loading"
+          class="w-full"
+          @click="handleMobileLogin"
+        >
+          登录
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* 自定义登录表单样式 */
+.login-form :deep(.form-actions) {
+  .el-button--large {
+    --el-button-size: 45px;
+  }
+}
+
+.login-form :deep(.form-actions .el-button) {
+  width: 100% !important;
+}
+
+/* 确保表单项没有标签占用空间 */
+.login-form :deep(.el-form-item) {
+  .el-input--large {
+    --el-input-height: 45px;
+  }
+  .el-select {
+    width: 100%;
+  }
+  .el-select--large .el-input__wrapper {
+    height: 45px;
+  }
+  margin-bottom: 26px;
+}
+
+.login-form :deep(.el-form-item__label) {
+  padding: 0 !important;
+}
+
+/* 隐藏必填星号 */
+.login-form :deep(.el-form-item.is-required .el-form-item__label:before) {
+  content: '' !important;
+  display: none !important;
+}
+</style>

package/dist/views/login/components/login-form.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    currentLayout: string;
+    templateInfo?: any;
+    portalConfig?: any;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/views/login/components/security-code.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    width: string;
+    type: string;
+    value: string;
+    biyiCaptchaKey: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    init: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;