CodeBuddy样式组件是基于React+Tailwind CSS的轻量级封装，强调复用、可配置与易维护；结构需逻辑/样式/导出三分离，通过props驱动样式，支持主题定制、组合嵌套，并强制JSDoc与类型定义。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
CodeBuddy 的样式组件不是独立的 UI 框架，而是基于 React + Tailwind CSS 的轻量级封装模式，核心目标是复用、可配置、易维护。它不强制约定目录结构或 API 形式，但有一套被团队广泛采纳的编写规范——下面直接说清楚怎么写一个合格的样式组件。
组件结构要清晰：逻辑、样式、导出三分离
每个样式组件应是一个独立文件（如 Button.tsx），内部结构推荐按顺序组织：
- 顶部导入（React、hooks、工具函数）
- 类型定义（Props 接口，含必要字段和可选字段，默认值用 Partial 或解构默认）
- 主组件函数（纯渲染，不包含副作用逻辑）
- 样式类名集中管理（用 clsx 或模板字符串拼接，避免内联 style）
- 默认导出组件，可选导出类型或常量（如 buttonVariants）
示例片段：
const Button = ({ size = 'md', variant = 'primary', className, ...props }: ButtonProps) => {const baseClasses = 'inline-flex items-center justify-center font-medium rounded focus:outline-none transition-colors';
const sizeClasses = { sm: 'px-2 py-1 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' };
const variantClasses = { primary: 'bg-blue-600 hover:bg-blue-700 text-white', ghost: 'bg-transparent hover:bg-gray-100 text-gray-800' };
return ;
};
支持主题与定制：用 props 控制，不用全局 CSS 变量硬编码
CodeBuddy 强调“通过属性驱动样式”，而不是依赖主题上下文或 CSS 自定义属性注入。这意味着：
- 颜色、尺寸、圆角等视觉变量都应映射为组件的 props（如 color、radius）
- 若需适配深色模式，优先用 data-theme 属性配合 Tailwind 的 dark: 前缀，而非 JS 切换 class
- 不建议在组件内读取 useTheme() —— 这会增加耦合，也违背“样式组件应无状态”的原则
比如支持暗色模式的 Badge：
提供组合能力：用子组件或 render props 实现灵活嵌套
复杂样式组件（如 Card、Dropdown、Form）需支持结构扩展。推荐两种方式：
- 用命名子组件：如 Card.Header、Card.Body，内部通过 React.Children.map 匹配并包裹
- 用 render prop 或 slot 属性：如 Dialog trigger={} children={内容}
关键点：子组件本身不带样式，只负责语义包装；所有样式仍由父组件统一控制，确保视觉一致性。
文档与类型即契约：每个组件必须附带 JSDoc + 类型定义
CodeBuddy 的样式组件被当作“接口”使用，因此文档不是可选项：
- 每个 props 字段都要有 JSDoc 注释，说明用途、可选值、默认值
- 复杂行为（如 “点击后禁用 500ms”）必须写进注释，不能只靠代码暗示
- 导出的类型（如 ButtonProps）要单独声明，方便其他模块 import 使用
不写文档的组件，在 CodeBuddy 项目中会被 CI 拒绝合并。
