Open WebUI怎么修改前端

Open WebUI作为基于Web的图形化交互界面，其前端修改涉及样式定制、功能扩展与结构调整。以下从基础操作到进阶实践，分步骤解析前端修改的核心方法。

一、环境准备与代码获取

修改前端需获取项目源码并配置开发环境。通过Git克隆官方仓库：

```bash

git clone https://github.com/open-webui/open-webui.git

cd open-webui

```

安装Node.js（建议LTS版本）后，执行`npm install`安装依赖库。若使用Docker部署，需确保容器内环境可访问项目文件，例如通过挂载卷实现代码同步：

```bash

docker run -d -p 3000:8080 -v $(pwd)/frontend:/app/frontend ghcr.io/open-webui/open-webui:main

```

二、样式修改的三种路径

1. 实时调试与CSS覆盖

浏览器开发者工具（F12）可快速定位元素样式。例如，修改聊天窗口背景色：

- 选中`.chat-container`类，在Styles面板调整`background`属性。

- 复制生成的CSS规则至`/frontend/static/css/custom.css`：

```css

.dark .chat-container {

background: linear-gradient(45deg, #1a1a1a, #2d2d2d);

border-radius: 12px;

}

```

使用`!important`可强制覆盖默认样式，但需谨慎避免冲突。

2. 主题系统配置

若项目支持主题变量，可在`/backend/core/settings.py`中定义：

```python

CUSTOM_THEME = {

'primary': '#3b82f6',

'font-family': '"HarmonyOS Sans", system-ui'

}

```

重启容器后生效，适用于全局样式统一管理。

3. 静态资源替换

图标、Logo等资源通常位于`/static/images`目录。替换步骤如下：

1. 备份原文件（如`favicon.ico`）。

2. 上传自定义图标，保持文件名一致。

3. 清除浏览器缓存或强制刷新（Ctrl+F5）。

三、功能扩展与代码修改

1. 前端逻辑调整

修改Svelte/React组件需定位源文件。例如，在`/src/routes/auth/+page.svelte`中添加自定义登录逻辑：

```javascript

const mySignIn = async () => {

const params = new URLSearchParams(window.location.search);

const token = params.get('token');

// 调用自定义API验证

};

```

需同步修改后端接口（如`/backend/routers/auths.py`）以处理新参数。

2. 插件开发与API调用

通过官方API文档扩展功能。例如，添加外部链接按钮：

```javascript

// 在组件中插入

访问资源

```

或开发完整插件，需遵循项目插件规范注册路由与事件。

四、构建与部署验证

1. 生产环境构建

执行`npm run build`生成优化后的静态文件，输出至`/dist`目录。Docker部署时需重新构建镜像：

```bash

docker build -t custom-openwebui .

docker run -d -p 8080:8080 custom-openwebui

```

2. 兼容性测试

- 跨浏览器测试：验证Chrome、Firefox等主流浏览器的显示效果。

- 响应式适配：检查移动端布局是否合理。

- 后端联动：确保修改后的前端能正确调用API。

五、版本管理与回滚策略

修改前备份原始文件，或通过Git分支管理：

```bash

git checkout -b feature/custom-ui

# 修改后提交

git commit -m "修改聊天窗口样式"

```

若升级主版本导致冲突，可通过`git merge`或重新应用自定义补丁解决。

通过上述方法，开发者可系统化地完成Open WebUI前端定制，平衡个性化需求与项目维护性。实际修改中需结合具体版本特性，参考官方文档调整细节。