12.3 · 设置界面（Settings UI）

多模型对话工作台与知识应用入口 · 本章是 Open WebUI DeepWiki 中文译文的独立章节页，保留原始链接、源码锚点、模块标签和章节层级。

项目Open WebUI 章节12.3 状态全文译文模块工具、记忆与模型调用、系统架构、接口与服务契约、界面与交互

项目要点页2.5 参考项目项目章节目录Open WebUI DeepWiki 原始章节Settings UI 上一章12.2 下一章12.4

源码线索

backend/open_webui/routers/audio.py
backend/open_webui/routers/images.py
backend/open_webui/utils/files.py
src/lib/components/admin/Settings/Audio.svelte
src/lib/components/admin/Settings/Connections.svelte
src/lib/components/admin/Settings/General.svelte
src/lib/components/admin/Settings/Images.svelte
src/lib/components/admin/Settings/Interface.svelte
src/lib/components/admin/Settings/Models.svelte
src/lib/components/admin/Settings/Pipelines.svelte

模块标签

工具、记忆与模型调用
系统架构
接口与服务契约
界面与交互
检索、召回与知识系统

中文译文

设置界面（中文译文）

原始 DeepWiki 页面：https://deepwiki.com/open-webui/open-webui/12.3-settings-ui

翻译时间：2026-06-09T16:11:05.071Z

翻译模型：deepseek-chat

原文字符数：16570

项目：Open WebUI (open-webui)

---

设置界面

目的与范围

本文档描述设置界面系统，该系统提供了一个全面的模态窗口界面，用于管理用户偏好和应用配置。设置界面主要由 SettingsModal 组件实现，包含多个基于类别的标签页、搜索功能、基于角色的可见性控制以及功能开关集成。

关于后端配置系统的信息，请参阅 12.2 PersistentConfig 系统。关于应用初始化和布局的详细信息，请参阅 12.1 应用生命周期与布局。

---

组件架构

设置界面以模态对话框的形式呈现，包含一个多标签页界面，每个设置类别对应一个标签页。每个类别都实现为独立的 Svelte 组件。

设置界面组件层级

标题：设置界面组件结构

graph TB
    LayoutComponent["+layout.svelte (app)<br/>应用布局"]
    SettingsModal["SettingsModal.svelte<br/>主设置组件"]
    ModalBase["Modal.svelte<br/>基础模态窗口封装"]

    GeneralTab["General.svelte<br/>系统参数"]
    InterfaceTab["Interface.svelte<br/>界面定制"]
    ConnectionsTab["Connections.svelte<br/>直接连接"]
    IntegrationsTab["Integrations.svelte<br/>外部工具服务器"]
    PersonalizationTab["Personalization.svelte<br/>记忆与个人资料"]
    AudioTab["Audio.svelte<br/>语音设置"]
    DataControlsTab["DataControls.svelte<br/>聊天管理"]
    AccountTab["Account.svelte<br/>用户资料"]
    AboutTab["About.svelte<br/>版本信息"]

    StoresLayer["Svelte 存储<br/>config, user, settings, models"]

    LayoutComponent -->|"bind:show={$showSettings}"| SettingsModal
    SettingsModal --> ModalBase
    SettingsModal --> GeneralTab
    SettingsModal --> InterfaceTab
    SettingsModal --> ConnectionsTab
    SettingsModal --> IntegrationsTab
    SettingsModal --> PersonalizationTab
    SettingsModal --> AudioTab
    SettingsModal --> DataControlsTab
    SettingsModal --> AccountTab
    SettingsModal --> AboutTab

    SettingsModal <-->|"响应式订阅"| StoresLayer
    GeneralTab <--> StoresLayer
    InterfaceTab <--> StoresLayer
    PersonalizationTab <--> StoresLayer
    AudioTab <--> StoresLayer
    AccountTab <--> StoresLayer

来源： src/lib/components/chat/SettingsModal.svelte:1-30、src/routes/(app)/+layout.svelte:45

主要组件结构如下：

组件	路径	用途
`SettingsModal.svelte`	`src/lib/components/chat/SettingsModal.svelte`	带标签页管理的根设置组件
`Modal.svelte`	`src/lib/components/common/Modal.svelte`	提供遮罩层和焦点陷阱的基础模态窗口封装
`General.svelte`	`src/lib/components/chat/Settings/General.svelte`	系统参数和语言设置
`Interface.svelte`	`src/lib/components/chat/Settings/Interface.svelte`	界面定制选项
`Connections.svelte`	`src/lib/components/chat/Settings/Connections.svelte`	直接 API 连接管理
`Integrations.svelte`	`src/lib/components/chat/Settings/Integrations.svelte`	外部工具服务器配置
`Personalization.svelte`	`src/lib/components/chat/Settings/Personalization.svelte`	记忆与个性化功能
`Audio.svelte`	`src/lib/components/chat/Settings/Audio.svelte`	语音转文字和文字转语音设置
`DataControls.svelte`	`src/lib/components/chat/Settings/DataControls.svelte`	聊天数据导入/导出/归档
`Account.svelte`	`src/lib/components/chat/Settings/Account.svelte`	用户资料和身份验证
`About.svelte`	`src/lib/components/chat/Settings/About.svelte`	版本信息和链接

来源： src/lib/components/chat/SettingsModal.svelte:9-20

---

标签页系统与搜索功能

标签页定义与关键词

每个设置标签页都定义了 ID、标题以及一个广泛的可搜索关键词列表。这使得用户能够通过自然语言搜索快速找到设置项。

标题：设置标签页映射

graph LR
    TabDefinition["allSettings 数组<br/>SettingsTab[]"]

    GeneralDef["id: 'general'<br/>关键词: 'theme', 'languages', 'systemprompt'"]
    InterfaceDef["id: 'interface'<br/>关键词: 'chatui', 'autotitle', 'websearch'"]
    ConnectionsDef["id: 'connections'<br/>关键词: 'addconnection', 'managedirectconnections'"]
    ToolsDef["id: 'tools'<br/>关键词: 'integrations', 'managetools', 'terminal'"]
    PersonalizationDef["id: 'personalization'<br/>关键词: 'memories', 'profile', 'userpreferences'"]
    AudioDef["id: 'audio'<br/>关键词: 'stt', 'tts', 'audiooutput'"]

    TabDefinition --> GeneralDef
    TabDefinition --> InterfaceDef
    TabDefinition --> ConnectionsDef
    TabDefinition --> ToolsDef
    TabDefinition --> PersonalizationDef
    TabDefinition --> AudioDef

来源： src/lib/components/chat/SettingsModal.svelte:48-265

allSettings 数组使用以下结构定义每个标签页：

interface SettingsTab {
    id: string;
    title: string;
    keywords: string[];
}

来源： src/lib/components/chat/SettingsModal.svelte:47-51

搜索实现

搜索功能实现了对所有标签页定义的防抖关键词匹配：

标题：设置搜索逻辑

sequenceDiagram
    participant User
    participant SearchInput["搜索输入框"]
    participant Debouncer["searchDebounceHandler()"]
    participant Filter["setFilteredSettings()"]
    participant Display["标签页显示列表"]

    User->>SearchInput: 输入搜索词
    SearchInput->>Debouncer: on:input 事件
    Debouncer->>Debouncer: 清除之前的超时
    Debouncer->>Debouncer: 设置 100ms 超时
    Note over Debouncer: 等待 100ms
    Debouncer->>Filter: 执行过滤
    Filter->>Filter: 匹配标签页标题
    Filter->>Filter: 匹配关键词
    Filter->>Display: 更新 filteredSettings
    Display->>User: 仅显示匹配的标签页

来源： src/lib/components/chat/SettingsModal.svelte:505-529

搜索实现：

使用 100ms 防抖超时以减少不必要的过滤 src/lib/components/chat/SettingsModal.svelte:521-528。
对标签页标题和关键词执行不区分大小写的匹配 src/lib/components/chat/SettingsModal.svelte:508-512。
如果当前标签页被过滤掉，则自动选择第一个匹配的标签页 src/lib/components/chat/SettingsModal.svelte:516-518。

---

功能开关与基于角色的可见性

标签页的可见性通过 config 存储中的功能开关和 user 存储中的用户角色/权限动态控制。

标签页可见性逻辑

标题：标签页可见性流程

flowchart TD
    TabRequest["用户打开设置"]
    GetAvailable["getAvailableSettings()"]
    CheckTab["检查标签页 ID"]

    CheckConnections{"id === 'connections'"}
    CheckTools{"id === 'tools'"}
    CheckInterface{"id === 'interface'"}
    CheckPersonalization{"id === 'personalization'"}
    DefaultAllow["默认：允许"]

    ConfigCheck1{"$config.features<br/>.enable_direct_connections"}
    ConfigCheck2{"$user.role === 'admin'<br/>或<br/>$user.permissions.features<br/>.direct_tool_servers"}
    ConfigCheck3{"$user.role === 'admin'<br/>或<br/>$user.permissions.settings<br/>.interface ?? true"}
    ConfigCheck4{"$config.features<br/>.enable_memories<br/>且<br/>权限检查"}

    ShowTab["添加到 availableSettings"]
    HideTab["跳过标签页"]

    TabRequest --> GetAvailable
    GetAvailable --> CheckTab
    CheckTab --> CheckConnections
    CheckTab --> CheckTools
    CheckTab --> CheckInterface
    CheckTab --> CheckPersonalization
    CheckTab --> DefaultAllow

    CheckConnections -->|是| ConfigCheck1
    CheckTools -->|是| ConfigCheck2
    CheckInterface -->|是| ConfigCheck3
    CheckPersonalization -->|是| ConfigCheck4

    ConfigCheck1 -->|True| ShowTab
    ConfigCheck1 -->|False| HideTab
    ConfigCheck2 -->|True| ShowTab
    ConfigCheck2 -->|False| HideTab
    ConfigCheck3 -->|True| ShowTab
    ConfigCheck3 -->|False| HideTab
    ConfigCheck4 -->|True| ShowTab
    ConfigCheck4 -->|False| HideTab
    DefaultAllow --> ShowTab

来源： src/lib/components/chat/SettingsModal.svelte:477-503

各标签页的可见性规则

标签页 ID	可见性条件
`general`	始终可见
`interface`	如果满足以下条件则可见：`$user.role === 'admin'` 或 `$user?.permissions?.settings?.interface ?? true`
`connections`	如果满足以下条件则可见：`$config?.features?.enable_direct_connections`
`tools`	如果满足以下条件则可见：`$user.role === 'admin'` 或 `$user?.permissions?.features?.direct_tool_servers`
`personalization`	如果满足以下条件则可见：`$config?.features?.enable_memories` 且（`$user.role === 'admin'` 或 `$user?.permissions?.features?.memories ?? true`）
`audio`	始终可见
`data_controls`	始终可见
`account`	始终可见
`about`	始终可见

来源： src/lib/components/chat/SettingsModal.svelte:478-502

---

设置保存机制

设置保存流程将用户偏好与本地存储和后端持久化集成在一起：

保存设置的数据流

标题：设置保存数据流

sequenceDiagram
    participant CategoryTab["设置类别标签页<br/>（例如 General.svelte）"]
    participant SaveHandler["saveSettings(updated)"]
    participant SettingsStore["$settings 存储"]
    participant ModelsAPI["getModels() API"]
    participant BackendAPI["updateUserSettings()<br/>后端 API"]
    participant ModelsStore["$models 存储"]

    CategoryTab->>SaveHandler: 用户点击保存/触发变更
    SaveHandler->>SettingsStore: settings.set({...$settings, ...updated})
    SaveHandler->>ModelsAPI: 获取更新后的模型
    ModelsAPI-->>SaveHandler: 返回模型数组
    SaveHandler->>ModelsStore: models.set(updatedModels)
    SaveHandler->>BackendAPI: POST /users/user/settings
    Note over BackendAPI: updateUserSettings()
    BackendAPI-->>SaveHandler: 成功响应
    SaveHandler->>CategoryTab: 触发回调/提示

来源： src/lib/components/chat/SettingsModal.svelte:531-543、src/lib/components/chat/Settings/General.svelte:70-108

SettingsModal.svelte 中的 saveSettings 函数执行以下操作：

合并设置：将现有设置与更新内容合并 src/lib/components/chat/SettingsModal.svelte:533。
更新本地存储：将更改应用到 settings Svelte 存储 src/lib/components/chat/SettingsModal.svelte:533。
刷新模型：通过 getModels 获取更新后的模型列表 src/lib/components/chat/SettingsModal.svelte:534。
持久化到后端：通过 updateUserSettings 将设置发送到后端 API src/lib/components/chat/SettingsModal.svelte:535。

const saveSettings = async (updated) => {
    await settings.set({ ...$settings, ...updated });
    await models.set(await getModels());
    await updateUserSettings(localStorage.token, { ui: $settings });
};

来源： src/lib/components/chat/SettingsModal.svelte:531-536

---

设置类别组件

通用设置（`General.svelte`）

该组件管理核心系统参数，包括：

主题：支持 dark、light 和 oled-dark src/lib/components/chat/Settings/General.svelte:17-18。themeChangeHandler 函数更新 theme 存储，并将所选主题应用到 document.documentElement 的 class 列表，同时更新 meta 主题颜色 src/lib/components/chat/Settings/General.svelte:190-194。
语言：通过 getLanguages() 动态加载 src/lib/i18n:4。
高级参数：集成 AdvancedParams.svelte 组件，用于处理细粒度的模型参数，如 temperature、seed、top_k 和 num_ctx src/lib/components/chat/Settings/General.svelte:42-68。

界面设置（`接口.svelte`）

控制聊天界面的视觉和行为方面：

界面定制：titleAutoGenerate、autoFollowUps、chatBubble 和 widescreenMode 的开关 src/lib/components/chat/Settings/Interface.svelte:27-32。
文本缩放：使用 setTextScale 调整全局文本大小 src/lib/components/chat/Settings/Interface.svelte:189-197。
图片压缩：管理上传图片的压缩设置 src/lib/components/chat/Settings/Interface.svelte:79-85。

账户设置（`账号.svelte`）

处理用户资料和安全：

资料管理：通过 updateUserProfile 更新 name、profile_image_url 和 bio src/lib/components/chat/Settings/Account.svelte:60-68。
API 密钥：允许用户在启用的情况下创建和检索用于外部访问的 API 密钥 src/lib/components/chat/Settings/Account.svelte:83-90。

来源： src/lib/components/chat/Settings/General.svelte:1-195、src/lib/components/chat/Settings/Interface.svelte:1-245、src/lib/components/chat/Settings/Account.svelte:1-124

---

存储依赖

设置界面依赖于 $lib/stores/index.ts 中定义的一组集中式 Svelte 存储。

存储	代码实体	用途
`settings`	`export const settings: Writable<Settings>`	存储当前用户的界面偏好和模型参数 `src/lib/stores/index.ts:83`
`config`	`export const config: Writable<Config>`	存储后端功能开关和系统配置 `src/lib/stores/index.ts:18`
`user`	`export const user: Writable<SessionUser>`	存储当前已认证用户的资料和角色 `src/lib/stores/index.ts:19`
`models`	`export const models: Writable<Model[]>`	存储从后端获取的可用 AI 模型列表 `src/lib/stores/index.ts:68`

来源： src/lib/stores/index.ts:10-115

存储更新流程

应用启动时，布局组件（src/routes/(app)/+layout.svelte）通过调用后端 API 初始化这些存储：

调用 getUserSettings() 以填充 settings 存储 src/routes/(app)/+layout.svelte:89-105。
调用 getModels() 以填充 models 存储 src/routes/(app)/+layout.svelte:112-119。

来源： src/routes/(app)/+layout.svelte:88-120