fix(buttons): 修复 RippleButton 文字显示问题并解决 ESLint 错误

修复了 RippleButton 组件因 CVA 默认样式与自定义 className 冲突导致的文字不可见问题。
同时修复了项目中的 TypeScript 类型错误和 ESLint 规范问题。

主要修改：
1. 按钮显示修复：为使用红色文字的按钮添加 variant=outline，
   为使用白色背景的按钮添加 variant=secondary
2. TypeScript 类型修复：修复 subtle-dots.tsx 中的类型定义错误，
   删除不必要的 jest-dom.d.ts 文件
3. ESLint 规范修复：修复 React Hooks 使用规范问题，
   将 useRef+forceUpdate 反模式改为 useState，
   使用 eslint-disable 注释处理合理的 setState in effect 场景
4. 测试增强：添加按钮显示验证脚本和全面的页面按钮检查脚本

src/components/sections/about-section.tsx

@@ -35,7 +35,7 @@ export function AboutSection() {
           {/* 标题 */}
           <div className="text-center mb-12">
             <h2 id="about-heading" className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
-              关于 <span className="tracking-tight font-brand text-[#C41E3A]" style={{ fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
+              关于 <span className="tracking-tight text-[#C41E3A]" style={{ fontFamily: "var(--font-aoyagi-reisho), 'Aoyagi Reisho', 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif", fontWeight: 'normal', WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', textRendering: 'optimizeLegibility' }}>{COMPANY_INFO.shortName}</span>
             </h2>
             <p className="text-lg text-[#5C5C5C] mb-8">
               {COMPANY_INFO.slogan}