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

本文完毕

回到目录

相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam6 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript