需先剥离原子组件内联样式，再修复flex/grid断裂、统一用gap控制间距、校准垂直居中、动态传入响应式size，并通过扩展position属性安全调整图标位置。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
当你用原子化组件（Atoms）生成初始页面代码后，发现布局错位、间距异常或响应失效，需要快速定位并手动调整HTML结构与CSS样式关系，而不是推倒重写整个组件树。
确认原子组件是否已解耦样式
打开浏览器开发者工具，选中一个按钮或输入框，查看其计算样式。如果看到大量内联 style 属性（如 style="padding: 12px; background: #0066cc;"），说明该原子组件仍含内联样式，【必须先剥离所有内联样式，否则后续任何CSS覆盖都可能失效】。
在源码中搜索该组件的 JSX/TSX 文件，定位到类似 style={{ padding: '12px', background: '#0066cc' }} 的写法，全部删掉，改用 className 引入预设类名（如 className="btn btn--primary btn--medium"）。
修复因原子嵌套导致的Flex/Grid断裂
方法一：检查父容器 display 属性是否被意外覆盖
在浏览器中右键审查错位区域的最外层 div，看 computed 样式中 display 是否为 flex 或 grid。如果不是，说明某处 CSS 重置了它——常见于第三方 UI 库的全局重置规则或未加命名空间的 .container { display: block } 声明。
方法二：强制继承父级布局行为
给原子组件外层包裹一层带明确 display 值的 div，例如：<div class="flex items-center gap-2">
<button>提交</button><icon name="close"></icon>
</div>。
这比修改原子组件内部更安全，避免污染原子职责边界。
调整原子间距与对齐方式
第一步：禁用所有 margin 类，统一用 gap 控制间距
将原本分散在 Button、Input、Icon 上的 m-1、mr-2 等类全部删除，改为在外层容器上添加 gap-3 或 gap-x-4。
第二步：校准垂直居中行为
若文字与图标在行内混排时基线不齐，不要给 Icon 加 vertical-align: middle——这是过时写法。改用 flex 容器 + align-items-center，并确保 Icon 组件本身返回的是 inline-flex 或设置了 height/line-height 一致的 SVG 封装。
第三步：处理响应式断点下的原子尺寸突变
检查原子组件的 size prop 是否被硬编码为 "medium"，导致在手机屏下仍渲染大尺寸按钮。应在调用处根据屏幕宽度动态传入：<button size="{isMobile" :>确定</button>。
替换原子内部 DOM 结构以适配新布局需求
直接修改原子组件的 return JSX 是高风险操作，但有时必须为之。例如，设计稿要求按钮内图标在文字左侧，而当前原子只支持右侧图标。
进入 components/atoms/Button/Button.jsx，找到 icon 插槽位置。原结构可能是：{children}{icon && <span classname="icon">{icon}</span>}。
将其改为条件判断：{icon && position === 'left' && <span classname="icon">{icon}</span>}{children}{icon && position === 'right' && <span classname="icon">{icon}</span>}。
然后在组件 props 中新增 position: 'left' | 'right' = 'right' 默认值，并在使用时显式传入 position="left"。
