【技巧】dify前端源代码修改第一弹-增加tab页_dify 前端修改

回到目录

【技巧】dify前端源代码修改第一弹-增加tab页

尝试修改dify的前端源代码，在知识库增加一个tab页\"HELLO WORLD\"，完成后的效果如下
[gif01]

1. 前端代码进入调试模式

参考 【部署】win10的wsl环境下启动dify的web前端服务
启动调试模式
$ pnpm dev
[图01]

2. 修改dataset.ts

增加一行
helloWorld: ‘HELLO WORLD’,
[图02]

3. 修改Container.tsx

增加下面两段代码

# Container.tsx。。。 const options = useMemo(() => { return [ { value: \'dataset\', text: t(\'dataset.datasets\') }, ...(currentWorkspace.role === \'dataset_operator\' ? [] : [{ value: \'api\', text: t(\'dataset.datasetsApi\') }]), { value: \'helloworld\', text: t(\'dataset.helloWorld\') }, <-- 增加这一行 ] }, [currentWorkspace.role, t])。。。 {/* 新增 HelloWorld Tab 的内容 */} {activeTab === \'helloworld\' && ( <div className=\"flex flex-col items-center justify-center flex-1 w-full p-6 bg-background-body\"> <div className=\"max-w-lg p-8 bg-white rounded-lg shadow-md text-center\">  <h1 className=\"text-3xl font-bold mb-4\">Hello, World!</h1>  <p className=\"text-gray-700\">This is the new tab content.</p> </div> </d。。。

[图03]

代码修改后，pnpm会自动加载页面。不得不说，成熟的前端框架，修改代码确实很方便。

本文完毕

回到目录