feat 修改页面白屏

xiaoyi

3 天以前 a59f15c41afa6ddf106c4bf9c163d9e322d314cc

feat 修改页面白屏

 src/layouts/auth.vue

@@ -1,23 +1,18 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

import { AuthPageLayout } from '@vben/layouts';
import { preferences } from '@vben/preferences';

import { $t } from '#/locales';

declare const __APP_LOGO__: string;

const appName = computed(() => preferences.copyright.companyName);
const logo = computed(() => __APP_LOGO__ || preferences.logo.source);
const logoDark = computed(() => preferences.logo.sourceDark);
const route = useRoute();
const isLogin = computed(() => route.name === 'Login');
</script>

<template>
  <RouterView v-if="isLogin" />
  <AuthPageLayout
    :app-name="appName"
    :logo="logo"
    :logo-dark="logoDark"
    v-else
    :page-description="$t('authentication.pageDesc')"
    :page-title="$t('authentication.pageTitle')"
  >

 src/views/_core/authentication/login.vue

@@ -1,128 +1,124 @@
<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';

import type { AuthApi } from '#/api/core/auth';

import { computed, onMounted, ref } from 'vue';
import { computed, ref } from 'vue';

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

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

defineOptions({ name: 'Login' });

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 {
    // 获取租户列表
    tenantList.value = await getTenantSimpleList();
  } 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);
  }
}

/** 组件挂载时获取租户信息 */
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'),
    //   dependencies: {
    //     triggerFields: ['tenantId'],
    //     if: tenantEnable,
    //     trigger(values) {
    //       accessStore.setTenantId(values.tenantId ? Number(values.tenantId) : null);
    //     },
    //   },
    // },
const formSchema = computed((): VbenFormSchema[] => [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
    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),
    rules: z.string().min(1, { message: $t('authentication.usernameTip') }).default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.passwordTip'),
      },
    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),
    rules: z.string().min(1, { message: $t('authentication.passwordTip') }).default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
    },
  ];
});
]);
</script>

<template>
  <div>
  <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"
@@ -131,13 +127,22 @@
      :show-qrcode-login="false"
      :show-third-party-login="false"
      :show-register="false"
      :show-forget-password="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"
@@ -145,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>