style(login): 去除冗余卡片堆叠，大幅提升品牌Logo与名称视觉分量，极致简约留白

admin/src/pages/login/banner.tsx

@@ -7,120 +7,24 @@ import styles from './style/index.module.less';
 export default function LoginBanner() {
   const t = useLocale(locale);
 
-  const capabilityCards = [
-    {
-      key: 'global',
-      title: t['login.banner.card1.title'],
-      metric: t['login.banner.card1.metric'],
-      desc: t['login.banner.card1.desc'],
-      icon: (
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <circle cx="12" cy="12" r="10" />
-          <line x1="2" y1="12" x2="22" y2="12" />
-          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
-        </svg>
-      ),
-    },
-    {
-      key: 'radar',
-      title: t['login.banner.card2.title'],
-      metric: t['login.banner.card2.metric'],
-      desc: t['login.banner.card2.desc'],
-      icon: (
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <circle cx="12" cy="12" r="2" />
-          <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" />
-        </svg>
-      ),
-    },
-    {
-      key: 'shield',
-      title: t['login.banner.card3.title'],
-      metric: t['login.banner.card3.metric'],
-      desc: t['login.banner.card3.desc'],
-      icon: (
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-        </svg>
-      ),
-    },
-  ];
-
   return (
     <div className={styles['banner-board']}>
-      {/* 顶部品牌 */}
+      <div className={styles['brand-hero']}>
-      <div className={styles['brand-identity']}>
+        <div className={styles['brand-logo-wrap']}>
-        <div className={styles['logo-badge']}>
+          <Logo className={styles['brand-logo-svg']} />
-          <Logo className={styles['logo-svg']} />
         </div>
-        <span className={styles['brand-name']}>OmniCard</span>
+        <div className={styles['brand-name-wrap']}>
-        <span className={styles['brand-tag']}>AI</span>
+          <span className={styles['brand-main-name']}>OmniCard</span>
-      </div>
+          <span className={styles['brand-tag-badge']}>AI</span>
-
-      {/* 中部标语 */}
-      <div className={styles['banner-header']}>
-        <div className={styles['banner-badge']}>
-          <span className={styles['banner-badge-dot']} />
-          {t['login.banner.badge']}
         </div>
-        <h1 className={styles['banner-headline']}>
+        <p className={styles['brand-tagline']}>
           {t['login.banner.mainTitle']}
-        </h1>
-        <p className={styles['banner-description']}>
-          {t['login.banner.mainSubTitle']}
         </p>
       </div>
 
-      {/* 核心价值微卡片 */}
-      <div className={styles['banner-cards']}>
-        {capabilityCards.map((card) => (
-          <div key={card.key} className={styles['banner-metric-card']}>
-            <div className={styles['banner-metric-header']}>
-              <div className={styles['banner-metric-icon']}>{card.icon}</div>
-              <span className={styles['banner-metric-number']}>
-                {card.metric}
-              </span>
-            </div>
-            <div className={styles['banner-metric-title']}>{card.title}</div>
-            <div className={styles['banner-metric-desc']}>{card.desc}</div>
-          </div>
-        ))}
-      </div>
-
-      {/* 底部信任说明 */}
       <div className={styles['banner-footer-note']}>
         <div className={styles['banner-quote-line']} />
-        <span>OmniCard Global Digital Identity Architecture · Multi-tenant Cloud</span>
+        <span>Global Digital Identity Platform · Multi-tenant Cloud</span>
       </div>
     </div>
   );

admin/src/pages/login/style/index.module.less

@@ -28,14 +28,14 @@
   .mobile-brand {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
 
     .logo-badge {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 28px;
+      width: 32px;
-      height: 28px;
+      height: 32px;
 
       .logo-svg {
         width: 100%;
@@ -44,14 +44,14 @@
     }
 
     .brand-name {
-      font-size: 16px;
+      font-size: 18px;
       font-weight: 700;
       letter-spacing: -0.02em;
       color: var(--omni-color-text, #101828);
     }
 
     .brand-tag {
-      font-size: 10px;
+      font-size: 11px;
       font-weight: 600;
       line-height: 1;
       padding: 2px 6px;
@@ -110,21 +110,21 @@
   height: 100%;
 }
 
-// 左侧品牌展板
+// 左侧品牌展板 (沉稳深空色，超大品牌Logo与纯粹留白)
 .banner {
   width: 520px;
-  min-width: 500px;
+  min-width: 480px;
   height: 100%;
   background: #0b0d10;
   border-right: 1px solid #1e293b;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   position: relative;
-  overflow-y: auto;
+  overflow: hidden;
-  padding: 48px;
+  padding: 72px 64px 48px;
 
-  // 瑞士精密微网格线 (微弱低调，无大面积霓虹渐变)
+  // 瑞士精密微弱网格底纹 (克制高级)
   &::before {
     content: '';
     position: absolute;
@@ -132,55 +132,67 @@
     background-image: 
       linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
       linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-    background-size: 36px 36px;
+    background-size: 40px 40px;
     pointer-events: none;
   }
 
   &-inner {
     position: relative;
     z-index: 2;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
   }
 
   &-board {
+    height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+  }
+
+  // 大号品牌主视觉
+  .brand-hero {
+    margin-top: auto;
+    margin-bottom: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
     gap: 24px;
   }
 
-  // 品牌标识
+  .brand-logo-wrap {
-  .brand-identity {
+    width: 72px;
+    height: 72px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    justify-content: center;
 
-    .logo-badge {
+    .brand-logo-svg {
-      display: flex;
+      width: 100%;
-      align-items: center;
+      height: 100%;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-
-      .logo-svg {
-        width: 100%;
-        height: 100%;
-      }
     }
+  }
 
-    .brand-name {
+  .brand-name-wrap {
-      font-size: 20px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+
+    .brand-main-name {
+      font-size: 44px;
       font-weight: 700;
-      letter-spacing: -0.02em;
+      letter-spacing: -0.03em;
-      color: #f2f4f7;
+      color: #f8fafc;
+      line-height: 1.1;
     }
 
-    .brand-tag {
+    .brand-tag-badge {
-      font-size: 11px;
+      font-size: 14px;
-      font-weight: 600;
+      font-weight: 700;
       line-height: 1;
-      padding: 3px 6px;
+      padding: 4px 8px;
       border-radius: 6px;
       background: rgba(11, 92, 255, 0.2);
       border: 1px solid rgba(11, 92, 255, 0.4);
@@ -189,115 +201,23 @@
     }
   }
 
-  &-header {
+  .brand-tagline {
-    display: flex;
+    margin: 4px 0 0;
-    flex-direction: column;
+    font-size: 16px;
-    gap: 10px;
-  }
-
-  &-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    width: fit-content;
-    padding: 4px 10px;
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 9999px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    color: #94a3b8;
-    text-transform: uppercase;
-
-    &-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: var(--omni-color-success, #12b76a);
-      box-shadow: 0 0 6px rgba(18, 183, 106, 0.6);
-    }
-  }
-
-  &-headline {
-    margin: 0;
-    font-size: 26px;
-    font-weight: 600;
-    line-height: 1.3;
-    letter-spacing: -0.02em;
-    color: #f8fafc;
-  }
-
-  &-description {
-    margin: 0;
-    font-size: 13px;
     line-height: 1.6;
     color: #94a3b8;
-  }
+    max-width: 380px;
-
-  &-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  &-metric-card {
-    background: #12151a;
-    border: 1px solid #262b33;
-    border-radius: 12px;
-    padding: 14px 18px;
-    transition: transform 150ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 150ms ease;
-
-    &:hover {
-      border-color: #334155;
-      transform: translateY(-1px);
-    }
-  }
-
-  &-metric-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 4px;
-  }
-
-  &-metric-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #4d8dff;
-  }
-
-  &-metric-number {
-    font-size: 15px;
-    font-weight: 700;
-    color: #f8fafc;
-    letter-spacing: -0.01em;
-  }
-
-  &-metric-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: #e2e8f0;
-    margin-bottom: 2px;
-  }
-
-  &-metric-desc {
-    font-size: 12px;
-    line-height: 1.4;
-    color: #64748b;
   }
 
   &-footer-note {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
-    font-size: 11px;
+    font-size: 12px;
     color: #64748b;
-    margin-top: 4px;
 
     .banner-quote-line {
-      width: 20px;
+      width: 24px;
       height: 1px;
       background: #334155;
     }

admin/tests/login-page-ui.test.ts

@@ -10,7 +10,7 @@ function read(rel: string): string {
   return fs.readFileSync(path.join(adminRoot, rel), 'utf8');
 }
 
-test('1. 登录表单样式必须大气宽适并符合设计规范', () => {
+test('1. 登录表单样式必须大气宽适并放大品牌Logo', () => {
   const style = read('src/pages/login/style/index.module.less');
   
   // 必须扩展表单宽度至 400px 以上，杜绝 320px 局促感
@@ -25,11 +25,23 @@ test('1. 登录表单样式必须大气宽适并符合设计规范', () => {
     '交互元素必须包含 44px 触控尺寸'
   );
 
+  // 品牌Logo尺寸必须显著加大（例如 56px 以上）
+  assert.ok(
+    /width:\s*(56|60|64|72|80)px/.test(style),
+    '品牌Logo尺寸必须显著加大更显大气'
+  );
+
+  // 品牌字号必须显著加大（例如 32px 以上）
+  assert.ok(
+    /font-size:\s*(32|36|40|44|48)px/.test(style),
+    '品牌名称字号必须放大'
+  );
+
   // 严禁纯黑 #000
   assert.ok(!style.includes('#000;'), '严禁使用纯黑 #000');
 });
 
-test('2. 彻底去除模板化 AI 味与外部廉价插画', () => {
+test('2. 彻底去除多余卡片堆叠与模板化 AI 味', () => {
   const banner = read('src/pages/login/banner.tsx');
   
   // 彻底移除 byteimg 外部模板插画
@@ -38,10 +50,14 @@ test('2. 彻底去除模板化 AI 味与外部廉价插画', () => {
     '严禁使用 Arco 外部模板图纸插画'
   );
 
-  // 必须包含 OmniCard 全球商务品牌核心能力（全球覆盖、访客雷达、安全合规）
+  // 去除多余的指标卡片堆叠（画蛇添足），聚焦大品牌展示
+  assert.ok(!banner.includes('banner-cards'), '去除多余的卡片堆叠，保持极致简约');
+  assert.ok(!banner.includes('banner-metric-card'), '去除指标微卡片');
+
+  // 必须包含 OmniCard 品牌主张
   assert.ok(
-    banner.includes('Global') || banner.includes('global') || banner.includes('Radar') || banner.includes('radar'),
+    banner.includes('OmniCard'),
-    '左侧品牌看板必须包含全球商业与访客雷达相关能力陈列'
+    '左侧品牌看板必须聚焦 OmniCard 核心品牌'
   );
 
   // 严禁 emoji 作为图标