前端组件设计规范

组件设计原则

在 TransCircle 博客项目中，我们遵循以下组件设计原则：

1. 语义化 HTML

所有交互元素必须使用正确的 HTML 标签：

• 按钮使用 <button>，不用 <div> 模拟
• 链接使用 <a>，不用 JavaScript 跳转
• 导航使用 <nav>，文章使用 <article>

2. 无障碍访问

每个交互组件都必须支持：

• 键盘导航：Tab、Enter、Escape、方向键
• 屏幕阅读器：aria-label、role 属性
• 焦点管理：清晰的焦点指示器

:focus-visible {
  outline: 2px solid var(--primary-pink);
  outline-offset: 2px;
}

3. 响应式设计

移动优先策略，断点设计：

断点	目标设备	关键变化
768px	手机	内容全宽，按钮垂直堆叠
1024px	平板	主内容 padding 减小
1200px	平板/小笔记本	汉堡菜单出现
1280px	大屏笔记本	导航栏 padding 减小

主题切换组件

主题切换是一个 radiogroup 组件，支持三种模式：

<div class="theme-toggle" role="radiogroup" aria-label="主题切换">
  <button role="radio" aria-checked="true" data-theme="light">
    <!-- Sun icon -->
  </button>
  <button role="radio" aria-checked="false" data-theme="dark">
    <!-- Moon icon -->
  </button>
  <button role="radio" aria-checked="false" data-theme="contrast">
    <!-- Contrast icon -->
  </button>
</div>

减少动画支持

尊重用户的 prefers-reduced-motion 设置：

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

总结

通过以上规范，我们确保 TransCircle 博客对所有用户都是可访问和友好的。