feat 修改页面白屏

xiaoyi

5 天以前 a59f15c41afa6ddf106c4bf9c163d9e322d314cc

 src/views/_core/authentication/login.vue

@@ -1,186 +1,148 @@
<script lang="ts" setup>
import type { VbenFormSchema } from '../../../packages/effects/common-ui/src';

import type { VbenFormSchema } from '@vben/common-ui';
import type { AuthApi } from '#/api/core/auth';

import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { computed, ref } from 'vue';

import { AuthenticationLogin, Verification, z } from '../../../packages/effects/common-ui/src';
import { isCaptchaEnable, isTenantEnable } from '../../../packages/effects/hooks/src';
import { $t } from '../../../packages/locales/src';
import { useAccessStore } from '../../../packages/stores/src';
import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
import { isCaptchaEnable } from '@vben/hooks';
import { $t } from '@vben/locales';

import {
  checkCaptcha,
  getCaptcha,
  getTenantByWebsite,
  getTenantSimpleList,
  socialAuthRedirect,
} from '#/api/core/auth';
import { checkCaptcha, getCaptcha } from '#/api/core/auth';
import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });

const { query } = useRoute();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
const captchaEnable = isCaptchaEnable();

const loginRef = ref();
const verifyRef = ref();
const captchaType = 'blockPuzzle';

const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'

/** 获取租户列表，并默认选中 */
const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
async function fetchTenantList() {
  if (!tenantEnable) {
    return;
  }
  try {
    // 获取租户列表、域名对应租户
    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
    tenantList.value = await getTenantSimpleList();

    // 选中租户：域名 > store 中的租户 > 首个租户
    let tenantId: null | number = null;
    const websiteTenant = await websiteTenantPromise;
    if (websiteTenant?.id) {
      tenantId = websiteTenant.id;
    }
    // 如果没有从域名获取到租户，尝试从 store 中获取
    if (!tenantId && accessStore.tenantId) {
      tenantId = accessStore.tenantId;
    }
    // 如果还是没有租户，使用列表中的第一个
    if (!tenantId && tenantList.value?.[0]?.id) {
      tenantId = tenantList.value[0].id;
    }

    // 设置选中的租户编号
    accessStore.setTenantId(tenantId);
    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
  } catch (error) {
    console.error('获取租户列表失败:', error);
  }
}

/** 处理登录 */
async function handleLogin(values: any) {
  // 如果开启验证码，则先验证验证码
async function handleLogin(values: AuthApi.LoginParams) {
  if (captchaEnable) {
    verifyRef.value.show();
    verifyRef.value?.show();
    return;
  }
  // 无验证码，直接登录
  await authStore.authLogin('username', values);
}

/** 验证码通过，执行登录 */
async function handleVerifySuccess({ captchaVerification }: any) {
async function handleVerifySuccess({ captchaVerification }: { captchaVerification: string }) {
  try {
    await authStore.authLogin('username', {
      ...(await loginRef.value.getFormApi().getValues()),
      captchaVerification,
    });
  } catch (error) {
    console.error('Error in handleLogin:', error);
    console.error('验证码登录失败:', error);
  }
}

/** 处理第三方登录 */
const redirect = query?.redirect;
async function handleThirdLogin(type: number) {
  if (type <= 0) {
    return;
  }
  try {
    // 计算 redirectUri
    // tricky: type、redirect 需要先 encode 一次，否则钉钉回调会丢失。配合 social-login.vue#getUrlValue() 使用
    const redirectUri = `${
      location.origin
    }/auth/social-login?${encodeURIComponent(
      `type=${type}&redirect=${redirect || '/'}`,
    )}`;

    // 进行跳转
    window.location.href = await socialAuthRedirect(type, redirectUri);
  } catch (error) {
    console.error('第三方登录处理失败:', error);
  }
}

/** 组件挂载时获取租户信息 */
onMounted(() => {
  fetchTenantList();
});

const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenSelect',
      componentProps: {
        options: tenantList.value.map((item) => ({
          label: item.name,
          value: item.id.toString(),
        })),
        placeholder: $t('authentication.tenantTip'),
      },
      fieldName: 'tenantId',
      label: $t('authentication.tenant'),
      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
      dependencies: {
        triggerFields: ['tenantId'],
        if: tenantEnable,
        trigger(values) {
          if (values.tenantId) {
            accessStore.setTenantId(Number(values.tenantId));
          }
        },
      },
    },
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.usernameTip') })
        .default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.passwordTip'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.passwordTip') })
        .default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
    },
  ];
});
const formSchema = computed((): VbenFormSchema[] => [
  {
    component: 'VbenInput',
    componentProps: { placeholder: $t('authentication.usernameTip') },
    fieldName: 'username',
    label: $t('authentication.username'),
    rules: z.string().min(1, { message: $t('authentication.usernameTip') }).default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
  },
  {
    component: 'VbenInputPassword',
    componentProps: { placeholder: $t('authentication.passwordTip') },
    fieldName: 'password',
    label: $t('authentication.password'),
    rules: z.string().min(1, { message: $t('authentication.passwordTip') }).default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
  },
]);
</script>

<template>
  <div>
    <AuthenticationLogin
      ref="loginRef"
      :form-schema="formSchema"
      :loading="authStore.loginLoading"
      @submit="handleLogin"
      @third-login="handleThirdLogin"
    />
  <main class="mes-login-page">
    <section class="industrial-hero" aria-label="新疆新高电力科技有限公司">
      <div class="hero-grid" aria-hidden="true" />
      <div class="hero-glow hero-glow-one" aria-hidden="true" />
      <div class="hero-glow hero-glow-two" aria-hidden="true" />

      <header class="company-bar">
        <div class="company-brand">
          <img class="company-logo" src="/logos/xgdl.svg" alt="新高电力" width="48" height="48" />
          <div class="company-name">
            <strong>新高电力</strong>
            <span>新疆新高电力科技有限公司</span>
          </div>
        </div>
        <div class="system-mark"><span class="status-dot" /> INDUSTRIAL DIGITAL PLATFORM</div>
      </header>

      <div class="hero-content">
        <div class="hero-kicker"><span>MES · MANUFACTURING EXECUTION SYSTEM</span><i /></div>
        <h1>新高智造<br /><em>运营中心</em></h1>
        <p class="hero-subtitle">智能制造数字化管理平台</p>

        <div class="capability-list" aria-label="平台能力">
          <div class="capability-item"><span class="capability-index">01</span><span>生产数字化</span><b>PRODUCTION</b></div>
          <div class="capability-item"><span class="capability-index">02</span><span>设备智能化</span><b>EQUIPMENT</b></div>
          <div class="capability-item"><span class="capability-index">03</span><span>质量可追溯</span><b>QUALITY</b></div>
          <div class="capability-item"><span class="capability-index">04</span><span>数据智能决策</span><b>DECISION</b></div>
        </div>
      </div>

      <div class="factory-visual" aria-hidden="true">
        <div class="visual-label label-top">SMART FACTORY / XG POWER <span>01</span></div>
        <svg class="factory-svg" viewBox="0 0 920 330" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
          <path d="M0 286H920" stroke="rgba(190,218,238,.18)" />
          <path d="M0 302H920" stroke="rgba(190,218,238,.1)" />
          <path d="M82 284V178L196 112L310 178V284" fill="rgba(19,66,103,.64)" stroke="rgba(143,187,218,.48)" stroke-width="2" />
          <path d="M82 178H310M196 112V284" stroke="rgba(143,187,218,.38)" stroke-width="2" />
          <path d="M132 284V210H174V284M218 284V210H260V284" stroke="rgba(116,173,216,.46)" stroke-width="2" />
          <path d="M349 284V156L428 117L507 156V284" fill="rgba(17,60,96,.7)" stroke="rgba(143,187,218,.43)" stroke-width="2" />
          <path d="M349 156H507M428 117V284M384 284V214H414V284M445 284V214H475V284" stroke="rgba(143,187,218,.36)" stroke-width="2" />
          <path d="M563 284V190H718V284" fill="rgba(12,52,86,.72)" stroke="rgba(143,187,218,.4)" stroke-width="2" />
          <path d="M563 190L602 166H718L680 190" fill="rgba(34,88,128,.55)" stroke="rgba(143,187,218,.4)" stroke-width="2" />
          <rect x="593" y="211" width="46" height="73" fill="rgba(10,36,61,.62)" stroke="rgba(82,164,231,.7)" />
          <rect x="650" y="211" width="46" height="73" fill="rgba(10,36,61,.62)" stroke="rgba(82,164,231,.7)" />
          <path d="M616 217V277M673 217V277M600 234H632M657 234H689M600 250H632M657 250H689" stroke="rgba(112,196,255,.55)" stroke-width="2" />
          <path d="M776 284L823 90L870 284M800 190H846M793 221H853M786 253H860M805 162H841M813 130H833" stroke="rgba(142,191,224,.5)" stroke-width="2" />
          <path d="M823 90L790 65M823 90L856 65M790 65H856M720 122C756 94 786 78 823 78C860 78 879 94 920 122" stroke="rgba(83,173,236,.62)" stroke-width="2" />
          <path d="M18 244C140 213 233 251 326 224C443 190 532 218 638 181C750 142 810 169 920 130" stroke="#3C9EE8" stroke-width="2" stroke-dasharray="4 8" />
          <circle cx="638" cy="181" r="5" fill="#78C7FF" /><circle cx="823" cy="78" r="5" fill="#78C7FF" />
          <path d="M196 86V34M428 91V31M603 142V82" stroke="rgba(129,192,232,.28)" stroke-dasharray="3 5" />
        </svg>
        <div class="data-widget widget-left"><span>LINE STATUS</span><strong>ALL SYSTEMS NORMAL</strong><i /></div>
        <div class="data-widget widget-right"><span>REAL-TIME OUTPUT</span><strong>98.6%</strong><em>+2.4%</em></div>
      </div>

      <footer class="hero-footer"><span>系统版本 v3.2.0</span><span>运行区域 · 新疆生产建设兵团</span><span>© 2026 新高电力科技</span></footer>
    </section>

    <section class="login-side" aria-label="登录新高智造运营中心">
      <div class="login-side-inner">
        <div class="login-card">
          <div class="login-card-top"><span class="card-kicker">AUTHORIZED ACCESS</span><span class="lock-mark">SECURE</span></div>
          <AuthenticationLogin
            ref="loginRef"
            :form-schema="formSchema"
            :loading="authStore.loginLoading"
            :show-code-login="false"
            :show-qrcode-login="false"
            :show-third-party-login="false"
            :show-register="false"
            :show-forget-password="true"
            :show-doc-link="false"
            :show-remember-me="true"
            sub-title="统一连接生产、设备与质量数据"
            title="欢迎登录"
            @submit="handleLogin"
          />
          <div class="login-card-footer"><span>新高智造运营中心</span><span>企业内部系统</span></div>
        </div>
        <p class="security-caption"><span class="status-dot blue" /> 系统运行稳定 · 数据传输已加密</p>
      </div>
    </section>

    <Verification
      ref="verifyRef"
      v-if="captchaEnable"
      ref="verifyRef"
      :captcha-type="captchaType"
      :check-captcha-api="checkCaptcha"
      :get-captcha-api="getCaptcha"
@@ -188,5 +150,73 @@
      mode="pop"
      @on-success="handleVerifySuccess"
    />
  </div>
  </main>
</template>

<style scoped>
.mes-login-page {
  --deep-blue: #061b33;
  --panel-blue: #0a2948;
  --tech-blue: #1677ff;
  --line-blue: rgb(151 201 235 / 24%);
  --text-blue: #dbeaf6;
  --ink: #12263d;
  --muted: #6d7b8c;
  --surface: #f5f7fa;
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(420px, 42%);
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface);
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.industrial-hero { position: relative; display: flex; min-height: 100dvh; flex-direction: column; padding: clamp(30px, 4vw, 64px) clamp(34px, 5.2vw, 100px) 26px; overflow: hidden; color: var(--text-blue); background: var(--deep-blue); isolation: isolate; }
.industrial-hero::before { position: absolute; inset: 0; z-index: -3; background: linear-gradient(125deg, rgb(6 27 51 / 100%) 0%, rgb(8 42 73 / 96%) 58%, rgb(5 24 45 / 98%) 100%); content: ''; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .32; background-image: linear-gradient(rgb(150 206 241 / 9%) 1px, transparent 1px), linear-gradient(90deg, rgb(150 206 241 / 9%) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, transparent 2%, black 24%, black 82%, transparent); }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-glow-one { right: 12%; bottom: 17%; width: 410px; height: 410px; background: radial-gradient(circle, rgb(23 119 255 / 22%), transparent 70%); }
.hero-glow-two { left: 13%; top: 20%; width: 270px; height: 270px; background: radial-gradient(circle, rgb(56 145 220 / 15%), transparent 70%); }
.company-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.company-brand { display: flex; align-items: center; gap: 14px; }
.company-logo { flex: none; border-radius: 10px; }
.company-name { display: flex; flex-direction: column; gap: 5px; }
.company-name strong { color: #fff; font-size: 18px; font-weight: 650; letter-spacing: .08em; }
.company-name span { color: rgb(210 229 245 / 65%); font-size: 11px; letter-spacing: .06em; }
.system-mark, .hero-kicker, .visual-label, .data-widget, .hero-footer, .card-kicker, .lock-mark { font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; }
.system-mark { display: flex; align-items: center; gap: 9px; padding-top: 7px; color: rgb(201 225 244 / 58%); font-size: 9px; letter-spacing: .14em; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #65c18c; box-shadow: 0 0 0 4px rgb(101 193 140 / 13%); }
.hero-content { position: relative; z-index: 1; margin: auto 0 5vh; }
.hero-kicker { display: flex; align-items: center; gap: 12px; color: rgb(183 215 237 / 64%); font-size: 10px; letter-spacing: .15em; }
.hero-kicker i { display: block; width: 42px; height: 1px; background: var(--tech-blue); }
.hero-content h1 { margin: 22px 0 12px; color: #fff; font-size: clamp(46px, 5.2vw, 82px); font-weight: 600; line-height: 1.08; letter-spacing: -.065em; }
.hero-content h1 em { color: #8ecbff; font-style: normal; }
.hero-subtitle { margin: 0; color: rgb(216 233 247 / 80%); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .12em; }
.capability-list { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); max-width: 660px; margin-top: 42px; border-top: 1px solid var(--line-blue); }
.capability-item { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 7px 10px; padding: 15px 16px 0 0; border-right: 1px solid var(--line-blue); color: #e5f1fb; font-size: 14px; }
.capability-item:not(:first-child) { padding-left: 16px; }
.capability-item:last-child { border-right: 0; }
.capability-index { color: #63aef2; font-family: "IBM Plex Mono", monospace; font-size: 10px; }
.capability-item b { grid-column: 2; color: rgb(184 213 235 / 48%); font-family: "IBM Plex Mono", monospace; font-size: 8px; font-weight: 400; letter-spacing: .08em; }
.factory-visual { position: absolute; right: 2%; bottom: 64px; left: 2%; z-index: 0; opacity: .9; pointer-events: none; }
.factory-svg { display: block; width: 100%; height: auto; }
.visual-label { display: flex; justify-content: space-between; padding: 0 7% 6px; color: rgb(161 201 229 / 48%); font-size: 8px; letter-spacing: .12em; }
.visual-label span { color: #64b2ee; }
.data-widget { position: absolute; bottom: 48px; display: flex; flex-direction: column; gap: 5px; min-width: 142px; padding: 9px 11px; border: 1px solid rgb(128 188 229 / 27%); color: rgb(193 223 242 / 60%); background: rgb(6 28 50 / 74%); font-size: 8px; letter-spacing: .08em; }
.data-widget strong { color: #e4f2fd; font-size: 10px; font-weight: 500; }
.data-widget i { position: absolute; right: 10px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: #65c18c; }
.data-widget em { color: #70b9f5; font-size: 9px; font-style: normal; }
.widget-left { left: 8%; }.widget-right { right: 9%; }
.hero-footer { display: flex; justify-content: space-between; gap: 18px; margin-top: auto; color: rgb(182 211 232 / 47%); font-size: 8px; letter-spacing: .08em; }
.login-side { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 52px clamp(30px, 6vw, 110px); background: var(--surface); }
.login-side-inner { width: min(100%, 430px); }
.login-card { padding: clamp(30px, 3.4vw, 48px); border: 1px solid rgb(6 27 51 / 8%); border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgb(6 27 51 / 10%), 0 4px 14px rgb(6 27 51 / 5%); }
.login-card-top, .login-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-kicker, .lock-mark { color: #9aa8b7; font-size: 9px; letter-spacing: .1em; }.lock-mark { color: #5c9a76; }
.login-card :deep(.mb-7) { margin-bottom: 34px; }.login-card :deep(h2) { margin-top: 26px; color: var(--ink); font-size: 34px; font-weight: 650; letter-spacing: -.06em; }.login-card :deep(.text-muted-foreground) { display: block; margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }.login-card :deep(.grid) { gap: 17px; }.login-card :deep(label) { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }.login-card :deep([data-slot='checkbox'] + label) { margin-left: 8px; color: #51657a; font-size: 13px; font-weight: 500; line-height: 16px; }.login-card :deep(input) { min-height: 52px; border: 1px solid #d9e0e8; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }.login-card :deep(input::placeholder) { color: #9aa7b6; }.login-card :deep(input:hover), .login-card :deep(input:focus) { border-color: var(--tech-blue); box-shadow: 0 0 0 4px rgb(22 119 255 / 10%); transform: translateY(-1px); }.login-card :deep([data-slot='input-group']) { border: 1px solid #d9e0e8; border-radius: 10px; background: #fff; }.login-card :deep([data-slot='input-group']:focus-within) { border-color: var(--tech-blue); box-shadow: 0 0 0 4px rgb(22 119 255 / 10%); }.login-card :deep([data-slot='input-group'] input) { border: 0; box-shadow: none; transform: none; }.login-card :deep(button:not([data-slot='checkbox'])) { min-height: 52px; border-radius: 10px; font-family: inherit; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }.login-card :deep(button[type='submit']) { margin-top: 10px; color: #fff; background: var(--tech-blue); font-size: 14px; font-weight: 650; letter-spacing: .05em; }.login-card :deep(button[type='submit']:hover) { background: #0f65db; box-shadow: 0 12px 24px rgb(22 119 255 / 22%); transform: translateY(-2px); }.login-card :deep(button[type='submit']:active) { transform: translateY(0) scale(.985); }.login-card :deep([data-slot='checkbox']) { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 1px solid #c2ccd6; border-radius: 4px; color: #fff; background: transparent; box-shadow: none; cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }.login-card :deep([data-slot='checkbox']:hover) { border-color: var(--tech-blue); }.login-card :deep([data-slot='checkbox'][data-state='checked']) { border-color: var(--tech-blue); background: var(--tech-blue); }.login-card :deep([data-slot='checkbox']:focus-visible) { box-shadow: 0 0 0 3px rgb(22 119 255 / 22%); outline: none; }.login-card-footer { margin-top: 30px; padding-top: 16px; border-top: 1px solid #e8edf2; color: #9aa7b6; font-size: 10px; }.security-caption { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 0; color: #8a98a8; font-size: 11px; }
@media (max-width: 1050px) { .mes-login-page { grid-template-columns: minmax(0, 55%) minmax(400px, 45%); }.industrial-hero { padding-inline: 42px; }.capability-item { font-size: 12px; }.capability-item b { font-size: 7px; } }
@media (max-width: 760px) { .mes-login-page { display: block; }.industrial-hero { min-height: 430px; padding: 28px 24px 22px; }.hero-content { margin: 66px 0 0; }.hero-content h1 { margin-top: 16px; font-size: 48px; }.capability-list { margin-top: 28px; }.capability-item { padding-top: 11px; font-size: 11px; }.capability-item:not(:first-child) { padding-left: 10px; }.capability-item b, .system-mark, .data-widget { display: none; }.factory-visual { bottom: 24px; opacity: .65; }.hero-footer { position: relative; z-index: 2; margin-top: auto; font-size: 7px; }.hero-footer span:nth-child(2) { display: none; }.login-side { padding: 38px 22px 48px; }.login-card { padding: 30px 24px; } }
@media (max-width: 400px) { .industrial-hero { min-height: 390px; padding-inline: 20px; }.company-logo { width: 40px; height: 40px; }.company-name strong { font-size: 16px; }.company-name span { font-size: 9px; }.hero-content h1 { font-size: 41px; }.capability-list { grid-template-columns: repeat(2, 1fr); gap: 10px 0; border-bottom: 1px solid var(--line-blue); padding-bottom: 10px; }.capability-item:nth-child(2) { border-right: 0; }.capability-item:nth-child(3) { padding-left: 0; }.login-side { padding-inline: 18px; } }
@media (prefers-reduced-motion: reduce) { .login-card :deep(input), .login-card :deep(button) { transition: none; } }
</style>