通用设置

通用设置 Tab 由 GeneralConfig 组件实现,当前集中在"外观设置"一个分区,提供主题切换与字体大小调节。所有设置项都通过 settingsStore 与后端 SQLite 同步。

外观设置

GeneralConfig 位于 src/components/settings/GeneralConfig.tsx,包含两个设置行:

主题切换

在深色/浅色两种外观之间切换。下拉框使用项目公共组件 Select,选项来自:

const themeOptions = [
  { value: "dark",  label: "深色" },
  { value: "light", label: "浅色" },
];

切换后立即调用 settingsApi.settingsSet("theme", v) 写入后端,并通过 updateSettings({ theme }) 同步 store,触发根元素 data-theme 属性变化。

字体大小

通过 Slider 组件在 12px 到 20px 之间调整,步长 1。默认值为后端存储的 fontSize 字段,启动时由 settingsGetAll() 拉取并解析为整数。

<Slider
  min={12}
  max={20}
  value={settings.fontSize}
  onChange={(v) => handleChange("fontSize", String(v))}
  className="w-40"
/>

初始化流程

GeneralConfig 在 useEffect 中调用一次 settingsApi.settingsGetAll(),只回填 theme / defaultModel / fontSize 三个字段。其它设置页(端点、TFS)的加载由各自的 Tab 组件承担。

设置行通用组件

GeneralConfig.tsx 同时导出了两个私有布局组件,被同文件内复用:

• SectionHeader — 标题 + 描述,底部带分隔线
• SettingRow — 左文右控件的卡片行,悬浮时边框高亮为 --accent

相关文档

• 设置概览
• 关于页