组件

本文档介绍了 SaaS Starter 项目的组件开发指南和最佳实践。

AI 辅助修改

你可以在 Cursor 编辑器直接对话添加或修改组件。

示例 prompt：


在项目中添加使用步骤组件

手动添加

添加文件

按照组件类型在对应文件夹下添加组件文件。

项目的组件按照功能和用途组织在以下目录中:


src/components/
├── layout/         # 布局相关组件
│   ├── layout.tsx           # 主布局组件
│   ├── header.tsx          # 页头组件
│   ├── footer.tsx          # 页脚组件
│   └── section-layout.tsx  # 区块布局组件
├── sections/       # 页面区块组件
│   ├── hero.tsx            # 主横幅组件
│   ├── features.tsx        # 功能特性组件
│   ├── content-section.tsx # 内容区块组件
│   ├── cta-section.tsx     # 号召组件
│   ├── testimonials.tsx    # 用户评价组件
│   └── faq.tsx            # FAQ组件
└── ui/            # 基础 UI 组件
    ├── button.tsx          # 按钮组件
    ├── badge.tsx           # 徽章组件
    ├── stats-section.tsx   # 数据统计组件
    └── features-grid.tsx   # 功能网格组件

最佳实践

1. 组件复用

优先使用现有组件,避免重复开发
通过 props 扩展组件功能
使用组合模式构建复杂界面

2. 类型安全

为所有组件定义 TypeScript 接口
使用严格的类型检查
导出必要的类型定义

3. 样式指南

使用 Tailwind CSS 工具类
遵循响应式设计原则
保持一致的间距和颜色系统

4. 性能优化

使用 Next.js 的图片优化
实现组件懒加载
避免不必要的重渲染

5. 国际化

使用 dict 属性传递翻译文本
支持 RTL 布局
保持文本可配置