组件
Component
前端工程也叫：组件化、UI 组件、控件
一句话：把页面拆成可独立编写、可重复使用的小块，每块自带结构、样式和逻辑，像搭积木一样拼成页面。
详细解释
组件就像乐高积木：导航栏、商品卡片、按钮都可以是一块积木，写好一次，到处复用。在 React 里，组件通常是一个返回 JSX 的函数，文件名像 ProductCard.tsx；在 Vue 里是 .vue 文件。组件通过 Props 接收外部数据，通过 状态 记住自己内部的变化。
注意区分三层：组件是你项目里的积木；组件库是别人做好的一整盒积木（如 Ant Design、shadcn/ui）；框架是拼积木的规则和底板（如 React、Vue）。
拆得好的组件职责单一，改一处不影响别处。一个页面文件超过几百行时，通常就该让 AI 帮你拆组件了。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
src/pages/Home.tsx 已经 600 多行了，请按页面区块拆成几个组件：顶部横幅、商品列表、商品卡片、页脚，放到 src/components 下，数据通过 Props 传入。页面效果和功能保持不变，先列出拆分方案再动手。