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

本文完毕

回到目录

相关推荐
emojiwoo8 分钟前
前端视觉交互设计全解析:从悬停高亮到多维交互体系(含代码 + 图表)
前端·交互
xxy.c11 分钟前
嵌入式解谜日志—多路I/O复用
linux·运维·c语言·开发语言·前端
yuehua_zhang41 分钟前
uni app 的app端 写入运行日志到指定文件夹。
前端·javascript·uni-app
IT_陈寒1 小时前
SpringBoot 3.x实战:5种高并发场景下的性能优化秘籍,让你的应用快如闪电!
前端·人工智能·后端
麦文豪(victor)1 小时前
自动化流水线
前端
JarvanMo3 小时前
Flutter. FractionallySizedBox
前端
知识分享小能手3 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评3 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组4 小时前
React 组件基础与事件处理
前端·javascript·react.js
漂流瓶jz9 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript