style(login): 精简登录页宣传区并放大输入框图标间距
ci / 质量门禁 (push) Canceled after 0s

背景:
- 登录页左栏四张比例缩略图在真实页面中观感偏廉价;
- 输入框前缀图标与占位文字间距仅 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 截图核对,无溢出、图标与文字间距正常。
This commit is contained in:
Stev_Wang committed 2026-11-03 07:46:47 +08:00
1 parent f11d6759fb
commit 340a8ed176
3 files changed
+19 -103

No files matched your search

+2 -27
View File
@@ -1,11 +1,6 @@
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { import { LOGIN_CAPABILITIES, type LoginCapability } from './login-content';
LOGIN_CAPABILITIES,
LOGIN_MATERIAL_SAMPLES,
type LoginCapability,
type LoginMaterialSample,
} from './login-content';
function LoginBrand(): ReactNode { function LoginBrand(): ReactNode {
return ( 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 { export function LoginBrandPanel(): ReactNode {
return ( return (
<aside className="lx-login__aside" aria-label="灵犀产品介绍"> <aside className="lx-login__aside" aria-label="灵犀产品介绍">
@@ -69,12 +50,6 @@ export function LoginBrandPanel(): ReactNode {
<CapabilityItem key={capability.key} capability={capability} /> <CapabilityItem key={capability.key} capability={capability} />
))} ))}
</ul> </ul>
<div className="lx-login__samples" aria-label="可交付素材规格示例">
{LOGIN_MATERIAL_SAMPLES.map((sample) => (
<MaterialSample key={sample.key} sample={sample} />
))}
</div>
</div> </div>
<p className="lx-login__aside-foot">灵犀 · 素材生产平台 · v2.4.0</p> <p className="lx-login__aside-foot">灵犀 · 素材生产平台 · v2.4.0</p>
-15
View File
@@ -31,18 +31,3 @@ export const LOGIN_CAPABILITIES: readonly LoginCapability[] = [
icon: IconCheck, 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 },
];
+17 -61
View File
@@ -161,67 +161,6 @@
color: var(--lx-color-text-tertiary); 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 { .lx-login__aside-foot {
font-size: 11px; font-size: 11px;
color: var(--lx-color-text-tertiary); color: var(--lx-color-text-tertiary);
@@ -282,6 +221,23 @@
color: var(--lx-color-text-tertiary); 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 { .lx-login__card form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;