用户菜单与个人资料(中文译文)
原始 DeepWiki 页面:https://deepwiki.com/open-webui/open-webui/8.5-user-menu-and-profile
翻译时间:2026-06-09T16:09:46.108Z
翻译模型:deepseek-chat
原文字符数:10791
项目:Open WebUI (open-webui)
---
用户菜单与个人资料
相关源文件
以下文件为本 Wiki 页面的生成提供了上下文:
backend/open_webui/migrations/versions/d4e5f6a7b8c9_add_automation_tables.pybackend/open_webui/models/automations.pybackend/open_webui/routers/automations.pybackend/open_webui/utils/automations.pysrc/lib/apis/auths/index.tssrc/lib/apis/automations/index.tssrc/lib/components/AutomationModal.sveltesrc/lib/components/automations/AutomationEditor.sveltesrc/lib/components/automations/AutomationMenu.sveltesrc/lib/components/chat/Settings/Account.sveltesrc/lib/components/chat/Settings/Audio.sveltesrc/lib/components/layout/Sidebar/UserMenu.sveltesrc/lib/components/workspace/Models/TerminalSelector.sveltesrc/routes/(app)/automations/+page.svelte/automations/+page.svelte)- [src/routes/(app)/automations/[id]/+page.svelte](src/routes/(app)/automations/[id]/+page.svelte)
src/routes/auth/+page.svelte
本文档记录了用户菜单与个人资料系统,该系统提供用户信息展示、状态管理、账户相关功能以及集成的自动化调度。用户菜单位于侧边栏底部,是核心导航入口,也是访问个人设置、资料定制和管理工具的通道。
---
概述
用户菜单系统由前端展示组件和后端数据持久化 API 组成,负责管理用户身份、在线状态(status)和会话生命周期。
| 组件 | 文件路径 | 用途 |
|---|---|---|
UserMenu.svelte | src/lib/components/layout/Sidebar/UserMenu.svelte | 侧边栏中的主要下拉菜单。 |
Account.svelte | src/lib/components/chat/Settings/Account.svelte | 设置弹窗中的个人资料管理标签页。 |
UserStatusModal.svelte | src/lib/components/layout/Sidebar/UserStatusModal.svelte | 用于设置自定义状态表情和消息的弹窗。 |
UserProfileImage.svelte | src/lib/components/chat/Settings/Account/UserProfileImage.svelte | 处理个人资料图片上传和 Gravatar 集成。 |
AutomationEditor.svelte | src/lib/components/automations/AutomationEditor.svelte | 管理用户特定定时任务的界面。 |
来源:src/lib/components/layout/Sidebar/UserMenu.svelte:1-40、src/lib/components/chat/Settings/Account.svelte:1-20、src/lib/components/automations/AutomationEditor.svelte:1-35
---
组件架构
用户菜单使用 bits-ui 实现可访问的下拉行为,并与全局 Svelte store 集成以实现响应式状态更新。
用户菜单与个人资料数据流
graph TD
subgraph "前端 Store 空间"
UserStore["$user Store (user)"]
ConfigStore["$config Store (config)"]
SettingsStore["$settings Store (settings)"]
end
subgraph "UI 组件"
Sidebar["Sidebar.svelte"]
UserMenu["UserMenu.svelte"]
AccountTab["Account.svelte"]
StatusModal["UserStatusModal.svelte"]
AutoPage["automations/+page.svelte"]
end
subgraph "API 层 (src/lib/apis)"
AuthAPI["auths/index.ts"]
UserAPI["users/index.ts"]
AutoAPI["automations/index.ts"]
UtilsAPI["utils/index.ts"]
end
Sidebar -->|触发| UserMenu
UserMenu -->|调用 userSignOut()| AuthAPI
UserMenu -->|打开| StatusModal
AccountTab -->|调用 updateUserProfile()| AuthAPI
AccountTab -->|调用 createAPIKey(), getAPIKey()| AuthAPI
AccountTab -->|调用 getSessionUser()| AuthAPI
AccountTab -->|调用 saveSettings()| SettingsStore
StatusModal -->|调用 updateUserStatus()| UserAPI
AutoPage -->|调用 getAutomationItems()| AutoAPI
UserMenu -->|调用 getUsage()| UtilsAPI
AuthAPI -->|更新| UserStore
UserAPI -->|更新| UserStore
AutoAPI -->|返回| AutoPage
UtilsAPI -->|提供用量数据| UserMenu
SettingsStore -->|持久化 UI 设置| UserMenu
来源:src/lib/components/layout/Sidebar/UserMenu.svelte:93-100、src/lib/components/chat/Settings/Account.svelte:44-81、src/lib/apis/auths/index.ts:85-111、src/routes/(app)/automations/+page.svelte:65-86
---
个人资料管理
用户可通过设置弹窗中的账户标签页管理个人资料信息,包括更新姓名、个人简介、头像以及 API 密钥等账户安全功能。
个人资料更新流程
用户在 Account.svelte 中修改资料时,submitHandler 负责协调更新过程:
- 头像生成:如果姓名发生变更且不存在自定义头像,则通过
generateInitialsImage生成新的首字母头像src/lib/components/chat/Settings/Account.svelte:45-49。 - API 请求:调用
updateUserProfile发送更新后的数据(姓名、个人简介、性别、出生日期)src/lib/components/chat/Settings/Account.svelte:60-68。 - 会话刷新:通过
getSessionUser获取最新会话数据,同步本地$userstoresrc/lib/components/chat/Settings/Account.svelte:72-77。
API 密钥与 Webhook
账户标签页还管理技术集成相关功能:
- API 密钥:拥有适当权限(管理员或特定功能标志)的用户可通过
createAPIKey和getAPIKey创建和获取 API 密钥src/lib/components/chat/Settings/Account.svelte:83-90。 - Webhook:用户可配置
webhook_url用于通知,该配置持久化存储在$settingsstore 中src/lib/components/chat/Settings/Account.svelte:51-58。
来源:src/lib/components/chat/Settings/Account.svelte:44-81、src/lib/components/chat/Settings/Account.svelte:111-122
---
用户状态系统
状态系统允许用户使用表情符号和文本消息广播当前状态。
状态逻辑与组件
graph LR
subgraph "状态展示 (UserMenu.svelte)"
Indicator["在线/离开指示点 (user.is_active)"]
EmojiDisp["表情组件 (user.status_emoji)"]
MsgDisp["消息提示 (user.status_message)"]
end
subgraph "状态修改"
ClearBtn["清除状态按钮"]
UpdateBtn["更新状态弹窗"]
end
ClearBtn -->|调用 updateUserStatus('', '')| BackendUserAPI["/api/users/{id}/status"]
UpdateBtn -->|调用 updateUserStatus(emoji, message)| BackendUserAPI
BackendUserAPI -->|更新数据库与会话| UserStore["$user Store"]
UserMenu 会突出显示状态信息。如果已设置状态,则显示表情和消息,并提供"清除状态"选项,该选项通过传入空字符串调用 updateUserStatus src/lib/components/layout/Sidebar/UserMenu.svelte:197-208。如果未设置状态,则提供"更新你的状态"按钮 src/lib/components/layout/Sidebar/UserMenu.svelte:218-228。
来源:src/lib/components/layout/Sidebar/UserMenu.svelte:144-214、src/lib/apis/users/index.ts:40
---
用户自动化
自动化系统允许用户调度重复任务,可通过侧边栏访问,并通过专用界面进行管理。
调度器与执行
后端使用 automations.py 中的 scheduler_worker_loop 处理基于时间的执行 backend/open_webui/utils/automations.py:162-171。它通过 Automations.claim_due 轮询数据库中到期的自动化任务 backend/open_webui/utils/automations.py:179,并通过 execute_automation 执行它们 backend/open_webui/utils/automations.py:183。
自动化配置
用户使用 iCalendar RRULE 字符串配置任务。系统支持:
- 验证:
validate_rrule确保调度有效且包含未来运行时间backend/open_webui/utils/automations.py:80-95。 - 限制:管理员可设置
AUTOMATION_MAX_COUNT和AUTOMATION_MIN_INTERVAL以防止系统滥用backend/open_webui/routers/automations.py:75-95。
来源:backend/open_webui/utils/automations.py:162-199、backend/open_webui/routers/automations.py:69-97、src/lib/apis/automations/index.ts:15-50
---
菜单导航与项目
UserMenu 根据用户角色和系统配置动态渲染菜单项。
菜单项配置
| 项目 | 逻辑/条件 | 图标 |
|---|---|---|
| 设置 | 始终可见;打开 SettingsModal。 | Settings |
| 已归档聊天 | 始终可见;触发 showArchivedChats store。 | ArchiveBox |
| Playground | 当 role === 'admin' 时可见。 | Code |
| 管理面板 | 当 role === 'admin' 时可见。 | UserGroup |
| 退出登录 | 始终可见;调用 userSignOut()。 | SignOut |
固定菜单项
UserMenu 支持固定菜单项,存储在 $settings.pinnedMenuItems 中。togglePin 函数更新此设置并通过 updateUserSettings 持久化 src/lib/components/layout/Sidebar/UserMenu.svelte:69-78。默认项目包括 'notes' 和 'workspace' src/lib/components/layout/Sidebar/UserMenu.svelte:61。
来源:src/lib/components/layout/Sidebar/UserMenu.svelte:61-78、src/lib/components/layout/Sidebar/UserMenu.svelte:124-163
---
退出登录与会话终止
退出登录流程确保本地状态和服务器端会话均被失效。
sequenceDiagram
participant U as 用户
participant M as UserMenu.svelte
participant API as lib/apis/auths/index.ts
participant S as Svelte Stores
participant L as LocalStorage
U->>M: 点击"退出登录"
M->>API: userSignOut()
API-->>M: { status: true }
M->>S: user.set(null)
M->>L: removeItem('token')
M->>U: goto('/auth')
UserMenu.svelte 中的处理程序执行以下清理操作:
- 调用后端
/auths/signout端点src/lib/apis/auths/index.ts:327-336。 - 清除
$userstore。 - 从
localStorage中移除 JWT。 - 将用户重定向到
/auth页面。
来源:src/lib/components/layout/Sidebar/UserMenu.svelte:8-18、src/lib/apis/auths/index.ts:327-336