Dify Web 前端二次开发：隐藏探索功能与自定义 Logo

二、替换 Logo 完整过程

1. 准备静态资源

将自定义的 FDAI Logo（PNG 格式）放入项目静态目录 public/logo/，命名为 FDAI.png。Next.js 会自动挂载 public 目录，访问路径即为 /logo/FDAI.png。

2. 定位并修改组件

Logo 组件位于 web/app/components/header/logo/index.tsx。我们需要更新路径映射并调整样式配置。

核心修改点包括：

• 更新 logoPathMap，将 default 和 monochromeWhite 指向新图片路径。
• 保持原有尺寸配置逻辑，适配 48x22 比例，同时更新 alt 文本。

修改后的代码示例：

'use client';
import type { FC } from 'react';
import classNames from '@/utils/classnames';
import useTheme from '@/hooks/use-theme';
import { basePath } from '@/utils/var';

export type LogoStyle = 'default' | 'monochromeWhite';
export type LogoSize = 'large' | 'medium' | 'small';

// 替换为自定义 Logo 路径
export const logoPathMap: Record<LogoStyle, string> = {
  default: '/logo/FDAI.png',
  monochromeWhite: '/logo/FDAI.png',
};

// 保留原尺寸配置
export const logoSizeMap: Record<LogoSize, string> = {
  large: 'w-16 h-7',
  medium: 'w-12 h-[22px]',
  small: 'w-9 h-4',
};

type DifyLogoProps = {
  style?: LogoStyle;
  size?: LogoSize;
  className?: string;
};

const DifyLogo: FC<DifyLogoProps> = ({ style, size = 'medium', className }) => {
  const { theme } = useTheme();
  const themedStyle = (theme === 'dark' && style === 'default') ? 'monochromeWhite' : style;

  return (
    <img
      src={`${basePath}${logoPathMap[themedStyle]}`}
      className={classNames('block object-contain', logoSizeMap[size], className)}
      alt="FDAI logo"
    />
  );
};

export default DifyLogo;

3. 清理缓存

修改完成后若仍报错或显示旧图，通常是 Next.js 热重载未生效。请执行以下操作：

1. 停止前端服务。
2. 删除 web/.next 编译缓存目录。
3. 重新启动服务 (npm run dev)。

三、常见坑点与排查思路

在实际开发中，可能会遇到以下问题，建议按顺序排查：

1. 语法错误与 ChunkLoadError

   • 原因：注释代码时残留未闭合符号，或组件返回 null 导致结构异常。
   • 解决：确保代码块完整闭合，优先使用 <></> 空片段代替 null，并清理无用导入。

2. Logo 加载失败或变形

   • 原因：文件名大小写不匹配（如 fdai.png vs FDAI.png），或宽高比不符合 CSS 配置。
   • 解决：确认 public 目录下文件存在且名称一致；检查 logoSizeMap 中的 Tailwind 类名是否适配新图片比例。

3. 浏览器警告信息

   • 例如 MouseEvent.mozInputSource is deprecated 或 preloaded with link preload was not used。
   • 说明：多为底层库兼容性或资源预加载策略提示，不影响功能运行，可忽略或升级依赖版本。

4. 服务启动缓慢

   • 原因：缓存冗余导致编译产物堆积。
   • 解决：定期清理 .next 目录，重启服务时确保无旧进程占用端口。

完成上述步骤后，即可实现干净的界面定制，既保留了 Dify 的核心功能，又满足了品牌个性化需求。