TUI

核心目标

Tui UI 致力于提供一套既 灵活高定制 又 开发友好 的组件库，让开发者在满足复杂业务场景的同时，也能享受高度解耦和一致性体验。

我们的设计理念围绕以下五大核心原则：

Props 与样式定制

每个组件都支持通过 style 和 class完全自定义样式。组件内部基于 --ts-xxx CSS 变量定义局部主题，并在渲染时自动将用户的样式与默认主题合并。

• 支持局部 --ts-xxx 样式变量覆盖
• 支持全局主题变量与局部主题融合
• 明确样式优先级： props.style/class > 局部主题 > 全局主题 > 默认样式
• 提供 color 、bg 、hoverBg 等

组件库尺寸设计规范

统一组件大小（Size）命名与样式配置，有助于增强组件一致性、降低开发维护成本、提升产品视觉统一性。

• 组件库设计以 fontSize: 14px 为基础，使用 box-sizing: border-box
• 组件 size 命名统一为： small / medium / large / （可选） x-large
• 提供例如: closeable、disabled 等统一的prop规则来控制组件的工

事件与回调

所有事件均遵循 最小职责原则 ，只返回必要信息，避免耦合业务逻辑。

• change 事件默认返回唯一标识（如 path 或 key）
• 一维数据返回简单数据值，便于快速使用
• 二维 / 树形数据仅返回标识，由业务方自行处理数据

方法设计

组件提供职责清晰的方法，确保功能单一、易于理解。

• 如 TsMenu.expandByPath() 仅控制子项展开/折叠，不进行选中或跳转
• 方法命名直观明确，与组件行为高度一致
• 所有方法均提供类型提示与文档说明

主题系统

Tui UI 内置 light 与 dark 两种基础主题，并支持 完全自定义主题 与 局部主题 。

• 使用 CSS 变量实现动态主题切换
• 允许通过 themeContext 或 props 注入自定义主题
• 局部主题可作用于任意组件区域
• 支持响应式主题更新

插槽与拓展

所有组件尽可能提供插槽，使开发者在不修改内部逻辑的前提下，自由拓展内容。

• 支持前缀 / 后缀插槽
• 支持节点自定义渲染
• 插槽参数返回完整数据与状态信息
• 最大化定制能力，兼容多样化业务需求

设计规范建议