From 340a8ed176753c25176012e341dd47cc7a096e0d Mon Sep 17 00:00:00 2001
From: Stev_Wang <304865932@qq.com>
Date: Tue, 3 Nov 2026 07:46:47 +0800
Subject: [PATCH] =?UTF-8?q?style(login):=20=E7=B2=BE=E7=AE=80=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E5=AE=A3=E4=BC=A0=E5=8C=BA=E5=B9=B6=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E8=BE=93=E5=85=A5=E6=A1=86=E5=9B=BE=E6=A0=87=E9=97=B4?=
 =?UTF-8?q?=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

背景：
- 登录页左栏四张比例缩略图在真实页面中观感偏廉价；
- 输入框前缀图标与占位文字间距仅 8px，视觉上偏挤。

改动：
- 左栏移除 9:16 / 1:1 / 16:9 / 4:3 素材缩略及相关数据与样式，保留品牌、定位与三条能力；
- 登录卡片输入框前缀图标改为左 10px / 右 14px，后缀图标左 12px / 右 8px，图标与提示文字拉开距离；
- 清理 login-content 与 pages.css 中不再使用的素材墙代码。

影响面：
- 仅登录页视觉，不影响登录逻辑、接口与权限。

回滚方式：
- 回滚本提交即恢复原素材墙与输入框间距。

验证证据：
- pnpm --filter @lingxi/web lint / typecheck / test 通过（15 files / 55 tests）；
- pnpm --filter @lingxi/web build 通过；
- 1440×900 与 1280×900 截图核对，无溢出、图标与文字间距正常。
---
 apps/web/src/pages/login/LoginBrandPanel.tsx | 29 +-------
 apps/web/src/pages/login/login-content.ts    | 15 ----
 apps/web/src/styles/pages.css                | 78 +++++---------------
 3 files changed, 19 insertions(+), 103 deletions(-)

diff --git a/apps/web/src/pages/login/LoginBrandPanel.tsx b/apps/web/src/pages/login/LoginBrandPanel.tsx
index 1d819a3..174d1e7 100644
--- a/apps/web/src/pages/login/LoginBrandPanel.tsx
+++ b/apps/web/src/pages/login/LoginBrandPanel.tsx
@@ -1,11 +1,6 @@
 import type { ReactNode } from 'react';
 
-import {
-  LOGIN_CAPABILITIES,
-  LOGIN_MATERIAL_SAMPLES,
-  type LoginCapability,
-  type LoginMaterialSample,
-} from './login-content';
+import { LOGIN_CAPABILITIES, type LoginCapability } from './login-content';
 
 function LoginBrand(): ReactNode {
   return (
@@ -34,21 +29,7 @@ function CapabilityItem({ capability }: { capability: LoginCapability }): ReactN
   );
 }
 
-function MaterialSample({ sample }: { sample: LoginMaterialSample }): ReactNode {
-  return (
-    <figure className="lx-login__sample">
-      <span
-        className={`lx-login__sample-thumb lx-login__sample-thumb--${String(sample.tone)}`}
-        aria-hidden="true"
-      >
-        <span className="lx-login__sample-ratio">{sample.ratio}</span>
-      </span>
-      <figcaption className="lx-login__sample-label">{sample.label}</figcaption>
-    </figure>
-  );
-}
-
-/** 左栏：品牌 + 一句定位 + 三条能力 + CSS 素材墙（与方案 B 原型一致，不引图片） */
+/** 左栏：品牌 + 一句定位 + 三条能力（不引入图片资源） */
 export function LoginBrandPanel(): ReactNode {
   return (
     <aside className="lx-login__aside" aria-label="灵犀产品介绍">
@@ -69,12 +50,6 @@ export function LoginBrandPanel(): ReactNode {
             <CapabilityItem key={capability.key} capability={capability} />
           ))}
         </ul>
-
-        <div className="lx-login__samples" aria-label="可交付素材规格示例">
-          {LOGIN_MATERIAL_SAMPLES.map((sample) => (
-            <MaterialSample key={sample.key} sample={sample} />
-          ))}
-        </div>
       </div>
 
       <p className="lx-login__aside-foot">灵犀 · 素材生产平台 · v2.4.0</p>
diff --git a/apps/web/src/pages/login/login-content.ts b/apps/web/src/pages/login/login-content.ts
index a8473b2..a173e03 100644
--- a/apps/web/src/pages/login/login-content.ts
+++ b/apps/web/src/pages/login/login-content.ts
@@ -31,18 +31,3 @@ export const LOGIN_CAPABILITIES: readonly LoginCapability[] = [
     icon: IconCheck,
   },
 ];
-
-/** 素材墙：用 CSS 渐变模拟同一支片子的四种规格，不引图片资源 */
-export interface LoginMaterialSample {
-  key: string;
-  ratio: string;
-  label: string;
-  tone: number;
-}
-
-export const LOGIN_MATERIAL_SAMPLES: readonly LoginMaterialSample[] = [
-  { key: 'vertical', ratio: '9:16', label: '竖版主图', tone: 1 },
-  { key: 'square', ratio: '1:1', label: '方形主图', tone: 2 },
-  { key: 'wide', ratio: '16:9', label: '横版封面', tone: 3 },
-  { key: 'classic', ratio: '4:3', label: '经典比例', tone: 4 },
-];
diff --git a/apps/web/src/styles/pages.css b/apps/web/src/styles/pages.css
index d82df6b..addae14 100644
--- a/apps/web/src/styles/pages.css
+++ b/apps/web/src/styles/pages.css
@@ -161,67 +161,6 @@
   color: var(--lx-color-text-tertiary);
 }
 
-/* 素材墙：同一支片子的四种规格，用 CSS 渐变示意 */
-.lx-login__samples {
-  display: flex;
-  align-items: flex-end;
-  gap: 10px;
-  margin-top: 24px;
-}
-
-.lx-login__sample {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin: 0;
-}
-
-.lx-login__sample-thumb {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-start;
-  padding: 6px;
-  border: 1px solid var(--lx-color-border);
-  border-radius: var(--lx-radius-sm);
-  background:
-    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 46%),
-    linear-gradient(150deg, #fde8c8, #f7c98b 55%, #eeb26a);
-}
-
-.lx-login__sample-thumb--1 {
-  width: 50px;
-  aspect-ratio: 9 / 16;
-}
-
-.lx-login__sample-thumb--2 {
-  width: 52px;
-  aspect-ratio: 1 / 1;
-}
-
-.lx-login__sample-thumb--3 {
-  width: 88px;
-  aspect-ratio: 16 / 9;
-}
-
-.lx-login__sample-thumb--4 {
-  width: 66px;
-  aspect-ratio: 4 / 3;
-}
-
-.lx-login__sample-ratio {
-  border-radius: 3px;
-  background: rgba(31, 35, 41, 0.55);
-  color: var(--lx-color-text-inverse);
-  font-size: 10px;
-  line-height: 14px;
-  padding: 0 4px;
-}
-
-.lx-login__sample-label {
-  font-size: 10px;
-  color: var(--lx-color-text-tertiary);
-}
-
 .lx-login__aside-foot {
   font-size: 11px;
   color: var(--lx-color-text-tertiary);
@@ -282,6 +221,23 @@
   color: var(--lx-color-text-tertiary);
 }
 
+/* 登录卡片：输入框内图标与占位文字之间留出呼吸感 */
+.lx-login__card .semi-input-prefix {
+  margin: 0 14px 0 10px;
+}
+
+.lx-login__card .semi-input-prefix-icon {
+  margin: 0;
+}
+
+.lx-login__card .semi-input-suffix {
+  margin: 0 8px 0 12px;
+}
+
+.lx-login__card .semi-input-suffix-icon {
+  margin: 0;
+}
+
 .lx-login__card form {
   display: flex;
   flex-direction: column;