项目文字排版样式统一指南

为什么要统一文字排版样式？

在前端开发中，保持一致的文字排版样式对于提升用户体验和维护品牌一致性非常重要。统一的排版样式可以：

1. 提升用户体验：一致的视觉风格让用户更容易阅读和理解内容
2. 提高开发效率：使用预定义的组件可以减少重复工作
3. 便于维护：当需要调整样式时，只需修改组件定义即可全局生效
4. 保持品牌一致性：确保所有页面都遵循相同的设计规范

项目中的Typography组件

我们参考了 shadcn/ui Typography 组件的设计，创建了一套适用于我们项目的Typography组件。

支持的组件类型

1. TypographyH1 - 一级标题
2. TypographyH2 - 二级标题
3. TypographyH3 - 三级标题
4. TypographyH4 - 四级标题
5. TypographyP - 段落文本
6. TypographyBlockquote - 引用块
7. TypographyTable - 表格

组件使用示例

import { 
  TypographyH1, 
  TypographyH2, 
  TypographyH3, 
  TypographyP, 
  TypographyBlockquote 
} from "@/components/typography";

export default function Example() {
  return (
    <div>
      <TypographyH1>主标题</TypographyH1>
      <TypographyH2>二级标题</TypographyH2>
      <TypographyH3>三级标题</TypographyH3>
      <TypographyP>
        这是一个段落文本。我们使用统一的排版样式来确保所有内容的一致性。
      </TypographyP>
      <TypographyBlockquote>
        这是一个引用块，用于突出显示重要信息。
      </TypographyBlockquote>
    </div>
  );
}

在MDX中使用Typography组件

我们的MDX渲染系统已经配置为自动使用Typography组件，这意味着在MDX文件中书写的标题和段落会自动应用对应的样式。

例如，以下MDX内容：

# 主标题

## 二级标题

这是一个段落文本。

> 这是一个引用块

会自动渲染为对应的Typography组件。

自定义样式

所有Typography组件都支持传入自定义的className来覆盖默认样式：

<TypographyH1 className="text-red-500">
  红色主标题
</TypographyH1>

最佳实践

1. 优先使用Typography组件：在需要显示标题或段落时，优先使用对应的Typography组件
2. 保持一致性：避免直接使用Tailwind类来定义标题样式，应统一使用Typography组件
3. 合理使用自定义样式：只有在特殊情况下才使用自定义className覆盖默认样式
4. 响应式设计：Typography组件已经内置了响应式设计，无需额外处理

总结

通过使用统一的Typography组件，我们可以确保项目中所有文字内容都具有一致的视觉风格。这不仅提升了用户体验，也简化了开发和维护工作。

如果你在使用过程中遇到任何问题，或者有新的需求，请随时提出。