张翔
415a103a24
- 调整主色调从 #1C1C1C 至 #1A1A1A，优化视觉层次 - 更新背景色系为暖白色调 (#FAFAF7, #F5F4F0 等) - 配置中文字体栈，添加 serif 字体支持 - 优化文本颜色梯度，提升可读性 - 调整边框颜色，统一水墨风格 - 添加 Google Search Console 验证码配置项 - 新增桌面应用架构专家代理配置文件 - 重构 E2E 测试等待策略，提升稳定性 - 添加回归测试脚本，增强质量保障
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
interface InkWashBackgroundProps {
|
|
/** Background variant */
|
|
variant?: 'hero' | 'section' | 'subtle';
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* 水墨晕散背景组件
|
|
* 用于 Hero 和各大 section 的水墨晕散效果
|
|
*/
|
|
export function InkWashBackground({ variant = 'section', className }: InkWashBackgroundProps) {
|
|
|
|
if (variant === 'hero') {
|
|
return (
|
|
<div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
|
|
{/* 主墨晕 */}
|
|
<div
|
|
className="absolute top-[10%] left-[15%] w-[600px] h-[600px] rounded-full"
|
|
style={{
|
|
background: 'radial-gradient(circle, rgba(var(--color-primary-rgb), 0.04) 0%, transparent 60%)',
|
|
}}
|
|
/>
|
|
{/* 品牌红点缀 */}
|
|
<div
|
|
className="absolute bottom-[20%] right-[10%] w-[400px] h-[400px] rounded-full"
|
|
style={{
|
|
background: 'radial-gradient(circle, rgba(var(--color-brand-primary-rgb), 0.025) 0%, transparent 55%)',
|
|
}}
|
|
/>
|
|
{/* 宣纸纹理 */}
|
|
<div className="absolute inset-0 bg-paper-texture opacity-50" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (variant === 'subtle') {
|
|
return (
|
|
<div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
|
|
<div className="absolute inset-0 bg-paper-texture opacity-30" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Default: section
|
|
return (
|
|
<div className={`absolute inset-0 overflow-hidden pointer-events-none ${className ?? ''}`} aria-hidden="true">
|
|
<div
|
|
className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px]"
|
|
style={{
|
|
background: 'radial-gradient(ellipse at 50% 0%, rgba(var(--color-primary-rgb), 0.025) 0%, transparent 65%)',
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-paper-texture opacity-30" />
|
|
</div>
|
|
);
|
|
}
|