ce6aa207e9
- 将所有图片路径从绝对路径改为使用 process.env.PUBLIC_URL - 修复 HomePage.tsx 中所有图片引用 - 修复 CoursePage.tsx 中所有图片引用 - 确保图片在 GitHub Pages 上正确加载 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1.3 KiB
1.3 KiB
代码风格与约定
TypeScript风格
- 使用TypeScript严格模式
- 接口和类型定义使用PascalCase
- 变量和函数使用camelCase
- 常量使用UPPER_SNAKE_CASE
React约定
- 组件使用PascalCase命名
- Props接口以Props结尾 (如: HomePageProps)
- 使用函数式组件和Hooks
- 导出组件使用export default
文件命名
- 组件文件: PascalCase.tsx (如: HomePage.tsx)
- 工具文件: camelCase.ts
- 样式文件: kebab-case.css
CSS/Tailwind约定
- 优先使用Tailwind CSS类
- 自定义CSS使用CSS变量
- 颜色变量遵循命名模式: --bg-, --surf-, --accent-*
- 响应式设计: mobile-first
项目特定约定
- 课程相关页面放在 pages/course/ 目录
- 图片资源放在 src/assets/images/
- 组件props解构使用
- 动画使用Framer Motion库
导入顺序
- React相关导入
- 第三方库导入
- 本地组件导入
- 类型导入
- 样式导入
组件结构
import React from 'react';
import { motion } from 'framer-motion';
interface ComponentProps {
// props定义
}
const Component: React.FC<ComponentProps> = ({ prop1, prop2 }) => {
// hooks
// 事件处理函数
// 渲染逻辑
return (
<motion.div>
{/* JSX */}
</motion.div>
);
};
export default Component;