feat(ui): 江苏商贸品牌视觉与首页/登录页改版

liu

2026-09-29 982c97ab82f3beb1b4febcf014562eda34b9fc05

 src/views/_core/authentication/login.vue

@@ -1,24 +1,29 @@
<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 { 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, VbenButton, Verification, z } from '@vben/common-ui';
import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
import { SvgWeChatIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { useAccessStore } from '@vben/stores';

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

defineOptions({ name: 'Login' });

// vite.config.ts 注入的公司 Logo 路径
declare const __APP_LOGO__: string;

const authStore = useAuthStore();
const accessStore = useAccessStore();
@@ -29,6 +34,12 @@
const verifyRef = ref();

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

/** 应用标题（登录页品牌文字） */
const appTitle = import.meta.env.VITE_APP_TITLE || '江苏商贸';

/** 品牌徽标：复用 vite 注入的公司 Logo，缺省回落到内置图标 */
const brandLogo = __APP_LOGO__ || '/logos/JSSM.svg';

/** 获取租户列表 */
const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
@@ -72,27 +83,39 @@
  fetchTenantList();
});

// ========== 企业微信登录 ==========

/** 企业微信的社交类型，对应后端 SocialTypeEnum.WECHAT_ENTERPRISE */
const WXCP_SOCIAL_TYPE = 30;

const wxcpLoading = ref(false);

/**
 * 企业微信扫码登录
 *
 * 流程：取授权地址 -> 整页跳转到企业微信扫码页 -> 扫码后企业微信带 code/state
 * 回跳到 social-login 页面 -> 该页面调用 /system/auth/social-login 换取令牌
 */
async function handleWxcpLogin() {
  try {
    wxcpLoading.value = true;
    // 注意：type 需要先 encode 一次，配合 social-login 页面的 getUrlValue() 使用；
    // 否则企业微信回跳后 type 参数会被吞掉，导致无法识别社交类型
    const redirectUri = `${location.origin}/auth/social-login?${encodeURIComponent(
      `type=${WXCP_SOCIAL_TYPE}`,
    )}`;
    window.location.href = await socialAuthRedirect(
      WXCP_SOCIAL_TYPE,
      redirectUri,
    );
  } catch (error) {
    console.error('企业微信登录失败:', error);
    wxcpLoading.value = false;
  }
}

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);
    //     },
    //   },
    // },
    {
      component: 'VbenInput',
      componentProps: {
@@ -122,7 +145,14 @@
</script>

<template>
  <div>
  <div class="academic-login-wrapper">
    <!-- 顶部品牌标识：徽标 + 平台名 + 金色分隔线 -->
    <div class="academic-login-header">
      <img :alt="appTitle" :src="brandLogo" class="academic-brand-logo" />
      <h2 class="academic-brand-name">{{ appTitle }}</h2>
      <div class="academic-decoration-line"></div>
    </div>

    <AuthenticationLogin
      ref="loginRef"
      :form-schema="formSchema"
@@ -133,8 +163,39 @@
      :show-register="false"
      :show-forget-password="false"
      :show-doc-link="false"
      class="academic-login-form"
      @submit="handleLogin"
    />
    >
      <!-- 自定义标题：覆盖欢迎语 -->
      <template #title>
        <div class="academic-title-area">
          <h3 class="academic-title">账号登录</h3>
          <p class="academic-subtitle">{{ $t('authentication.loginSubtitle') }}</p>
        </div>
      </template>

      <!-- 第三方登录 -->
      <template #third-party-login>
        <div class="academic-third-party">
          <div class="academic-divider">
            <span class="academic-divider-line"></span>
            <span class="academic-divider-text">其他登录方式</span>
            <span class="academic-divider-line"></span>
          </div>
          <VbenButton
            class="academic-wxcp-btn"
            variant="outline"
            :loading="wxcpLoading"
            @click="handleWxcpLogin"
          >
            <SvgWeChatIcon class="mr-2 size-4" />
            企业微信登录
          </VbenButton>
        </div>
      </template>
    </AuthenticationLogin>

    <!-- 验证码（滑块拼图），captchaEnable 时启用 -->
    <Verification
      ref="verifyRef"
      v-if="captchaEnable"
@@ -147,3 +208,203 @@
    />
  </div>
</template>

<style scoped>
/* ========== 学术科研风格登录页样式 ========== */
.academic-login-wrapper {
  @apply relative flex flex-col w-full;
  min-height: 460px;
}

/* ---- 顶部品牌标识 ---- */
.academic-login-header {
  @apply flex flex-col items-center mb-8;
}

.academic-brand-logo {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  filter: drop-shadow(0 3px 10px rgba(15, 36, 64, 0.14));
}

.academic-brand-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 5px;
  /* 末字右侧会多出一份字距，用等量缩进抵消，视觉才真正居中 */
  text-indent: 5px;
  color: #0f2440;
  margin: 0 0 14px;
}

.academic-decoration-line {
  position: relative;
  width: 58px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #d4af37 32%,
    #d4af37 68%,
    transparent
  );
  border-radius: 2px;
}

/* 金线中央的菱形点缀 */
.academic-decoration-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: #d4af37;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- 自定义标题 ---- */
.academic-title-area {
  @apply text-left mb-6;
}

.academic-title {
  font-size: 26px;
  font-weight: 600;
  color: #0f2440;
  letter-spacing: 2px;
  margin: 0 0 8px 0;
  line-height: 1.35;
}

.academic-subtitle {
  font-size: 13.5px;
  color: #8a94a6;
  margin: 0;
  letter-spacing: 0.3px;
}

/* ---- 覆盖默认标题 ---- */
:deep(.academic-login-form .mb-7) {
  display: none;
}

/* ---- 输入框：暖白底 + 金色聚焦 ---- */
:deep(.academic-login-form .vben-input) {
  border-radius: 8px;
  border-color: #e6e2d8;
  background: #fdfcfa;
  transition: all 0.25s ease;
  height: 48px;
}

:deep(.academic-login-form .vben-input:hover) {
  border-color: #c9b77a;
}

:deep(.academic-login-form .vben-input:focus-within) {
  border-color: #d4af37;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.13);
}

/* ---- 登录按钮：藏青渐变 + 金色描边与文字 ---- */
:deep(.academic-login-form .w-full > button),
:deep(.academic-login-form button[aria-label="login"]) {
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1e4571, #0f2440) !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 6px;
  text-indent: 6px;
  box-shadow: 0 6px 18px rgba(15, 36, 64, 0.22);
  transition: all 0.3s ease;
  color: #f5e7c0 !important;
}

/* 悬停只加深描边与投影，不做位移，保持克制 */
:deep(.academic-login-form .w-full > button:hover),
:deep(.academic-login-form button[aria-label="login"]:hover) {
  box-shadow:
    0 8px 22px rgba(15, 36, 64, 0.26),
    0 0 0 1px rgba(212, 175, 55, 0.6);
}

:deep(.academic-login-form .w-full > button:active),
:deep(.academic-login-form button[aria-label="login"]:active) {
  box-shadow: 0 3px 12px rgba(15, 36, 64, 0.24);
}

/* ---- 记住账号 / 忘记密码 ---- */
:deep(.academic-login-form .vben-link) {
  color: #b8901f;
  font-weight: 500;
  transition: color 0.2s;
}

:deep(.academic-login-form .vben-link:hover) {
  color: #8a6a12;
}

/* ---- 第三方登录 ---- */
.academic-third-party {
  @apply mt-5;
}

.academic-divider {
  @apply flex items-center gap-3 mb-4;
}

.academic-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.academic-divider-text {
  @apply text-xs;
  color: #94a3b8;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.academic-wxcp-btn {
  @apply w-full rounded-lg;
  height: 44px;
  border-color: #e6e2d8;
  color: #44546a;
  font-weight: 500;
  transition: all 0.3s;
}

.academic-wxcp-btn:hover {
  border-color: #d4af37;
  color: #0f2440;
  background: rgba(212, 175, 55, 0.06);
}

/* ---- 暗色适配 ---- */
:root.dark .academic-title {
  color: #f0ead8;
}

:root.dark .academic-brand-name {
  color: #f0ead8;
}

:root.dark .academic-subtitle {
  color: #8a94a6;
}

:root.dark .academic-decoration-line {
  background: linear-gradient(90deg, #8bb4f0, #4a7ad4);
}

:root.dark .academic-footer-text {
  color: #64748b;
}
</style>