feat(ui/ux): 优化用户体验和可访问性

- 字体加载优化: 添加 font-display: block 策略，创建 useFontLoading hook - 色彩对比度: 调整 text-muted 和 text-tertiary 颜色值确保 WCAG AA 合规 - 滚动进度条: 新增 ScrollProgress 组件，支持 reduced motion - 表单自动保存: 新增 useFormAutosave hook，防止用户数据丢失 - 返回顶部按钮: 新增 BackToTop 组件，提升长页面导航体验 - 图片懒加载: 优化 OptimizedImage 组件，添加 blur placeholder 和加载动画所有新组件均包含完整测试，1450+ 测试通过
2026-03-28 11:21:04 +08:00
parent ebaa7f3c50
commit a003f1192e
15 changed files with 1280 additions and 234 deletions
@@ -8,6 +8,8 @@ import { Analytics } from "@vercel/analytics/react";
 import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 import { ErrorBoundary } from "@/components/ui/error-boundary";
+import { ScrollProgress } from "@/components/ui/scroll-progress";
+import { BackToTop } from "@/components/ui/back-to-top";
 import { SessionProvider } from "@/providers/session-provider";
 import { initSentry } from "@/lib/sentry";

@@ -122,6 +124,14 @@ export default function RootLayout({
      <head>
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="apple-touch-icon" href="/favicon.svg" />
+        {/* 字体预加载优化 */}
+        <link
+          rel="preload"
+          href="/fonts/AoyagiReisho.ttf"
+          as="font"
+          type="font/ttf"
+          crossOrigin="anonymous"
+        />
        <OrganizationSchema />
        <WebsiteSchema />
        <script
@@ -141,6 +151,7 @@ export default function RootLayout({
        className={`${geistSans.variable} ${geistMono.variable} ${notoSansSC.variable} ${maShanZheng.variable} ${longCang.variable} font-sans antialiased`}
        style={{ fontFamily: "'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }}
      >
+        <ScrollProgress />
        <GoogleAnalytics />
        <WebVitals />
        <SessionProvider>
@@ -151,6 +162,7 @@ export default function RootLayout({
          </ThemeProvider>
        </SessionProvider>
        <MobileTabBar />
+        <BackToTop />
        <Analytics />
      </body>
    </html>