CSS 样式覆盖
AIO Hub 提供强大的 CSS 样式覆盖 功能，允许你通过编写自定义 CSS 代码来深度定制应用界面。无论是个性化配色、调整布局间距，还是隐藏不常用的元素，都可以通过此功能实现。
快速开始
- 点击标题栏右侧的 ⚙️ 图标进入设置。
- 在设置左侧导航栏中点击「CSS 样式覆盖」选项卡。
编辑器使用
系统内置了一个双引擎代码编辑器（CodeMirror/Monaco），支持语法高亮和自动补全。
- 实时生效：编辑器具备 500ms 的防抖自动保存功能，修改后无需手动保存，稍等片刻即可在应用中看到效果。
- 状态指示：编辑器右上角会显示当前的保存状态（保存中... / 已保存）。
预设管理
为了方便用户，我们提供了预设管理系统：
| 状态 | 说明 |
|---|---|
| 内置预设 | 应用自带的 CSS 主题预设，由开发者维护。 |
| 用户自定义预设 | 你自己保存的 CSS 片段，方便在不同风格间切换。 |
| 纯自定义模式 | 不依赖任何预设，在编辑器中完全自由发挥。 |
操作流程：
- 在下拉菜单中选择一个预设。
- 进入预览模式：此时编辑器为只读，展示预设内容。
- 点击「应用选中的预设」：预设内容将正式写入你的自定义 CSS 配置并生效。
- 在编辑器中根据需要进行二次修改。
核心变量与类名
AIO Hub 基于现代 CSS 变量（CSS Variables）构建，你可以通过覆盖这些变量来快速改变整体风格。
主题变量
详情请参阅 主题外观系统，以下是常用变量：
css
:root {
/* 基础颜色 */
--primary-color: #409eff;
/* 界面质感（受外观设置影响） */
--card-opacity: 0.8;
--ui-blur: 10px;
/* 背景色（推荐覆盖这些变量而非直接改 background） */
--card-bg: rgba(255, 255, 255, var(--card-opacity));
--sidebar-bg: rgba(245, 247, 250, var(--card-opacity));
}
/* 深色模式覆盖 */
.dark {
--card-bg: rgba(30, 30, 30, var(--card-opacity));
}常用选择器
| 目标元素 | 类名 / 选择器 |
|---|---|
| 应用根容器 | #app |
| 自定义标题栏 | .title-bar |
| 侧边栏 | .main-sidebar |
| 内容主区域 | .main-content |
| 工具卡片 | .tool-card |
进阶技巧
1. 强制覆盖
如果你的样式没有生效，可能是因为 CSS 优先级不足。可以使用 !important，或者增加选择器的权重：
css
/* 增加权重示例 */
#app .main-sidebar {
width: 260px !important;
}2. 隐藏特定元素
如果你觉得某个按钮或面板碍眼，可以将其隐藏（例如隐藏标题栏的文字）：
css
/* 隐藏标题栏左侧的 "AIO Hub" 文字 */
.title-bar .brand-title {
display: none;
}3. 针对特定工具定制
每个工具通常都有唯一的 ID 或特定的类名，你可以利用这一点进行精准定制：
css
/* 仅修改聊天界面中的消息气泡圆角 */
.chat-message ::after {
border-radius: 16px;
}最佳实践
- 优先使用变量：修改
--primary-color比修改几十个按钮的background-color要高效得多。 - 利用审查元素：即使在正式构建版本中，你也可以通过
F12或右键点击选择“检查”（取决于系统 WebView 环境）来打开开发者工具，实时查找需要修改的类名。 - 备份你的 CSS：虽然系统会自动保存，但在进行大规模修改前，建议将代码复制到外部文档备份。
- 通透感维持：修改背景色时，建议使用
rgba()并配合var(--card-opacity)，以保持应用整体的毛玻璃通透感。
警告：错误的 CSS 代码可能会导致界面布局错乱。如果发生这种情况，请清空编辑器内容，应用将恢复默认样式。