组件库
开发者参考
本页面描述了 FFFFinance 中使用的可复用界面组件。它主要对开发者和贡献者有用。如果你正在寻找应用使用帮助，请参阅面板文档。
FFFFinance 在整个应用中使用一套一致的界面构建模块。每个按钮、输入框和搜索框都遵循相同的设计规则，无论你在哪个面板中，体验都是统一的。
按钮
按钮有四种样式和三种大小。
样式
| 样式 | 使用场景 |
|---|---|
| 主要 | 主要操作，如"保存"、"连接"、"同步" |
| 次要 | 不太突出的标准操作 |
| 幽灵 | 工具栏和标题中的微妙操作 |
| 危险 | 破坏性操作，如"删除"或"断开连接" |
所有按钮响应你当前的主题——颜色、边框和悬停效果自动适应。
大小
| 大小 | 使用场景 |
|---|---|
| 小 | 紧凑工具栏、行内操作 |
| 中 | 应用中大多数按钮 |
| 大 | 突出的独立操作 |
按钮可以在标签旁包含图标，或者仅图标（方形）用于工具栏操作。仅图标按钮始终有屏幕阅读器标签以确保无障碍性。
加载状态
当按钮触发需要时间的操作（如同步数据）时，它会显示加载动画并临时禁用，以防止意外双击。
文本输入框
输入框用于在整个应用中输入文本、数字、日期和 API 密钥。
功能
| 功能 | 描述 |
|---|---|
| 标签 | 字段上方的可选标签文本 |
| 图标 | 字段内的可选图标（左侧或右侧） |
| 错误状态 | 验证失败时的红色边框 |
| 禁用状态 | 灰色显示且不可交互 |
输入框适应你的主题，并使用与应用其余部分相同的字体。
搜索
搜索输入是一个预配置的带放大镜图标的文本输入框。它出现在交易、日志等需要过滤内容的面板中。
功能
- 放大镜图标自动匹配输入框大小
- 清除按钮用于重置搜索
- 提供小、中、大三种大小
一致的设计
所有组件共享这些特质：
- 主题感知 —— 颜色适应你选择的任何主题
- 键盘可访问 —— 使用键盘导航时有可见的聚焦环
- 一致的大小 —— 所有组件类型提供小、中、大选项
- 响应式 —— 在任何大小的面板中都能良好运作