style(theme): 更新网站主题色彩方案与字体配置
- 调整主色调从 #1C1C1C 至 #1A1A1A,优化视觉层次 - 更新背景色系为暖白色调 (#FAFAF7, #F5F4F0 等) - 配置中文字体栈,添加 serif 字体支持 - 优化文本颜色梯度,提升可读性 - 调整边框颜色,统一水墨风格 - 添加 Google Search Console 验证码配置项 - 新增桌面应用架构专家代理配置文件 - 重构 E2E 测试等待策略,提升稳定性 - 添加回归测试脚本,增强质量保障
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useCallback, useState } from 'react';
|
||||
|
||||
interface MouseGlowState {
|
||||
x: number;
|
||||
y: number;
|
||||
isHovered: boolean;
|
||||
}
|
||||
|
||||
interface UseMouseGlowOptions {
|
||||
/** Glow radius in pixels */
|
||||
radius?: number;
|
||||
/** Opacity multiplier (0-1) */
|
||||
opacity?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 水墨晕散鼠标跟随光晕 hook
|
||||
* 用于卡片 hover 时的水墨晕散效果
|
||||
*/
|
||||
export function useMouseGlow(options: UseMouseGlowOptions = {}) {
|
||||
const { radius = 400, opacity = 0.06 } = options;
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [glow, setGlow] = useState<MouseGlowState>({ x: 0, y: 0, isHovered: false });
|
||||
|
||||
const handleMouseMove = useCallback((e: React.MouseEvent) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
setGlow({
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top,
|
||||
isHovered: true,
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleMouseEnter = useCallback(() => {
|
||||
setGlow(prev => ({ ...prev, isHovered: true }));
|
||||
}, []);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setGlow(prev => ({ ...prev, isHovered: false }));
|
||||
}, []);
|
||||
|
||||
const glowStyle: React.CSSProperties = {
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
borderRadius: 'inherit',
|
||||
pointerEvents: 'none',
|
||||
transition: 'opacity 0.5s ease',
|
||||
opacity: glow.isHovered ? 1 : 0,
|
||||
background: `radial-gradient(${radius}px circle at ${glow.x}px ${glow.y}px, rgba(var(--color-primary-rgb), ${opacity}), transparent 40%)`,
|
||||
};
|
||||
|
||||
return {
|
||||
ref,
|
||||
glowStyle,
|
||||
handlers: {
|
||||
onMouseMove: handleMouseMove,
|
||||
onMouseEnter: handleMouseEnter,
|
||||
onMouseLeave: handleMouseLeave,
|
||||
},
|
||||
isHovered: glow.isHovered,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user