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

小声读源码

已于 2025-06-10 17:47:23 修改

阅读量964

点赞数 13

分类专栏： Dify 文章标签：前端 dify pnpm next.js

于 2025-06-10 00:15:00 首次发布

本文链接：https://blog.csdn.net/u010593516/article/details/148538357

版权

Dify 专栏收录该内容

36 篇文章

订阅专栏

回到目录

【技巧】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
。。。