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

回到目录

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

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

gif01

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

参考 【部署】win10的wsl环境下启动dify的web前端服务

启动调试模式

$ pnpm rev

图01

2. 修改dataset.ts

增加一行

helloWorld: 'HELLO WORLD',

图02

3. 修改Container.tsx

增加下面两段代码

python 复制代码
# 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会自动加载页面。不得不说,成熟的前端框架,修改代码确实很方便。

本文完毕

回到目录

相关推荐
超人不会飛32 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦35 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想37 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z1 小时前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户3802258598241 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴1 小时前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干1 小时前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗1 小时前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder1 小时前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder1 小时前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github