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

本文完毕

回到目录

相关推荐
fcm198 小时前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
今晚务必早点睡8 小时前
前端缓存好还是后端缓存好?缓存方案实例直接用
前端·后端·缓存
IT_陈寒8 小时前
Vue3性能优化:5个被低估的Composition API技巧让我打包体积减少了40% 🚀
前端·人工智能·后端
x007xyz8 小时前
🚀🚀🚀前端的无限可能-纯Web实现的字幕视频工具 FlyCut Caption
前端·openai·音视频开发
前端Hardy8 小时前
HTML&CSS: 在线电子签名工具
前端·javascript·canvas
前端Hardy8 小时前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css
毕设十刻9 小时前
基于vue的考研信息系统6kv17(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
望获linux9 小时前
论文解读:利用中断隔离技术的 Linux 亚微秒响应性能优化
java·linux·运维·前端·arm开发·数据库·性能优化
brzhang9 小时前
ChatGPT Pulse来了:AI 每天替你做研究,这事儿你该高兴还是该小心?
前端·后端·架构
泉城老铁9 小时前
springboot+vue 文件下载,实现大文件的分片压缩和下载,避免内存溢出
前端·spring boot·后端