feat(ui/ux): 优化用户体验和可访问性
- 字体加载优化: 添加 font-display: block 策略,创建 useFontLoading hook - 色彩对比度: 调整 text-muted 和 text-tertiary 颜色值确保 WCAG AA 合规 - 滚动进度条: 新增 ScrollProgress 组件,支持 reduced motion - 表单自动保存: 新增 useFormAutosave hook,防止用户数据丢失 - 返回顶部按钮: 新增 BackToTop 组件,提升长页面导航体验 - 图片懒加载: 优化 OptimizedImage 组件,添加 blur placeholder 和加载动画 所有新组件均包含完整测试,1450+ 测试通过
This commit is contained in:
+12
-3
@@ -5,11 +5,20 @@
|
||||
src: url('/fonts/AoyagiReisho.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-display: block;
|
||||
font-stretch: normal;
|
||||
unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+F900-FAFF, U+2F800-2FA1F;
|
||||
}
|
||||
|
||||
/* 字体加载优化 - 防止 FOUT */
|
||||
.font-loading {
|
||||
font-family: 'STKaiti', 'KaiTi', serif;
|
||||
}
|
||||
|
||||
.font-loaded {
|
||||
font-family: 'Aoyagi Reisho', 'STKaiti', 'KaiTi', serif;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
@@ -39,8 +48,8 @@
|
||||
/* 文字色系 - 墨色层次 */
|
||||
--color-text-primary: #1C1C1C;
|
||||
--color-text-secondary: #3D3D3D;
|
||||
--color-text-tertiary: #4A4A4A;
|
||||
--color-text-muted: #6B6B6B;
|
||||
--color-text-tertiary: #404040; /* 从 #4A4A4A 调整,提升对比度 */
|
||||
--color-text-muted: #595959; /* 从 #6B6B6B 调整,确保 WCAG AA 合规 */
|
||||
|
||||
/* 边框色系 */
|
||||
--color-border-primary: #E5E5E5;
|
||||
|
||||
Reference in New Issue
Block a user