用途:该技能聚焦原子设计方法中的“有机体”层级,指导把分子与原子组合成界面中相对复杂、独立且可复用的区块,例如页头、页脚、商品卡片、侧边栏、面包屑、评论区、登录与注册表单、数据表格、仪表盘、时间线和画廊等。
主要能力:资料将有机体描述为由分子和原子构成、可独立存在于页面、常与具体业务上下文相关、可能管理较多内部状态、并可在不同模板与页面间复用的 UI 组件。资料按导航、内容、表单、数据展示四类列举了常见有机体,并给出 Header、Footer、ProductCard 三个 React + TypeScript 实现示例,包含 props 接口、状态(如移动端菜单、用户菜单)、无障碍属性(aria-label、aria-expanded、aria-haspopup)以及配套 CSS Module 样式。
使用方式:示例以 React 函数组件形式编写,从原子(Icon、Button、Avatar、Badge、Typography)和分子(NavItem、SearchForm)导入并组合,通过 props 传入 logo、导航项、用户、回调等数据,样式使用 CSS Module 与 CSS 变量。资料未提供安装命令或独立运行步骤。
适用场景:需要按原子设计体系搭建可复用页面区块的前端项目,尤其是含导航、商品展示、表单与数据展示的界面。
限制:资料仅覆盖有机体概念与部分示例,未说明具体框架版本、依赖安装、测试方式、收费或平台支持情况,这些信息暂未提供。