组件 Component
同一套资料卡会在不同页面重复出现，样式和信息需要保持一致。
前端与交互约 10 分钟 · 从真实需求理解
1为什么一块界面可以反复使用？
个人中心复用
阿阿宁设计师
评论区复用
阿阿宁设计师
两个页面共享同一份 ProfileCard 定义。
2组件 Component和网页结构 HTML，什么时候不能互换？
3组件 Component由哪些真实部分组成？
个人中心已同步
阿林澄设计师
评论区已同步
阿林澄设计师
两个实例一起更新，页面其他内容保持不变。
看 ProfileCard 这个具体案例的真实界面：每个标注都对应一个页面部件，不用图片坐标猜位置。
- 结构预览保持只读；这里重点看 Component 的对象与标签、输入、动作和反馈如何组成当前界面。
- 资料卡本体只做静态结构展示，编号和说明行负责定位对应部件。
4以 ProfileCard 为例，Component 有哪些组件级变体？
Compact紧凑资料卡
阿宁设计师
Detailed完整资料卡
阿宁设计师aning@example.com
Editable可编辑资料卡
阿宁设计师
三张卡都保留 ProfileCard 边界，只改变信息密度或局部编辑能力。
5经典场景里，ProfileCard 如何只更新自己？
ProfileCard阿宁设计师
可编辑先在资料卡内编辑昵称，再保存这次局部更新。
用户编辑资料卡内的昵称并点击保存；处理中反馈和最终结果都留在这张 ProfileCard，页面其他区域不变。
6什么时候值得把 ProfileCard 抽成 Component？
个人中心
阿宁设计师
评论区
阿宁设计师
订单详情页
订单说明
当同一套结构和局部交互会在多个页面重复出现时抽成 Component；只出现一次、没有独立状态的说明留在页面里。
7怎样把组件 Component需求交给 Agent？
请使用共享 Component 组件实现一个以 ProfileCard 为例的可复用资料卡：Component 把输入、展示和局部反馈组合成一个有边界的界面单元；保留真实值、处理中反馈和最终结果，失败时保留可重试入口。不要用 iframe、手写控件外观或硬编码颜色。
8不用背，看看你能不能判断
1 / 3
组件 Component最主要解决什么问题？
请选择一个最符合题意的答案
社区延伸
看别人真实遇到过什么
社区帖子还没有关联到这个词条。