核心修改內容

1. 隱藏導航欄「探索」功能（圖標 + 文字按鈕）；
2. 將默認 Dify Logo 替換為自定義 FDAI Logo（PNG 格式）。

（一）隱藏「探索」功能完整過程

1. 定位目標組件

探索功能對應的組件文件路徑：web/app/components/header/explore-nav/index.tsx（組件名：ExploreNav），該組件被嵌套在 Header 組件中渲染，無需修改佈局文件 app/(commonlayout)/layout.tsx。

2. 首次嘗試：僅刪除圖標（未徹底隱藏）

• 操作：刪除組件內圖標渲染代碼 { activated ? <RiPlanetFill /> : <RiPlanetLine /> }，並移除對應圖標導入；
• 結果：僅圖標消失，「探索」文字按鈕仍存在，未達到徹底隱藏需求。

3. 二次嘗試：返回 null 報錯

• 操作：將 ExploreNav 組件的返回值改為 return null，註釋原有 Link 渲染代碼；
• 結果：頁面報 Uncaught SyntaxError（註釋代碼時殘留未閉合的引號 / 括號，導致語法不完整）、ChunkLoadError（編譯緩存異常），服務無法正常加載。

4. 最終方案：返回空片段（無語法錯誤）

• 操作：直接替換 ExploreNav 組件代碼，保留必要變量定義，返回 <></> 空片段，同時清理圖標、Link 等無用導入；
• 核心修改後代碼： tsx

'use client'
import { useTranslation } from 'react-i18next'
import { useSelectedLayoutSegment } from 'next/navigation'
import classNames from '@/utils/classnames'

type ExploreNavProps = { className?: string }

const ExploreNav = ({ className }: ExploreNavProps) => {
  const { t } = useTranslation()
  const selectedSegment = useSelectedLayoutSegment()
  const activated = selectedSegment === 'explore'
  return <></> // 空片段不渲染任何內容
}

export default ExploreNav

• 結果：「探索」功能（圖標 + 文字）徹底隱藏，無語法錯誤。

（二）替換 Logo 完整過程

1. 準備工作：存放自定義 Logo

• 操作：將自定義 FDAI Logo（PNG 格式）放入項目靜態資源目錄 public/logo/，文件命名為 FDAI.png；
• 路徑説明：public 是 Next.js 默認靜態資源目錄，public/logo/FDAI.png 可通過 /logo/FDAI.png 直接訪問。

2. 定位 Logo 組件

Logo 對應的組件文件路徑：web/app/components/header/logo/index.tsx（組件名：DifyLogo）。

3. 修改組件配置（核心步驟）

• 操作 1：更新 Logo 路徑映射，替換為自定義 PNG 路徑；
• 操作 2：保留原尺寸配置（適配 48x22 比例），修改 alt 文本為 FDAI logo；
• 核心修改後代碼： tsx

'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', // 無白色版則複用同一文件
}

// 保留原尺寸（適配 48x22 比例）
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 = 'default',
  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' // 更新 Logo 描述
    />
  )
}

export default DifyLogo

4. 解決編譯報錯（後續處理）

• 問題：修改後頁面報語法錯誤和緩存加載失敗；
• 操作：停止前端服務 → 刪除 web/.next 編譯緩存目錄 → 重新啓動服務（npm run dev）；
• 結果：Logo 成功替換，無報錯。

二、修改過程中遇到的問題及解決方案

（一）隱藏「探索」功能相關問題

1. 僅刪除圖標後，「探索」文字按鈕仍存在

• 根本原因：只移除了圖標渲染代碼，未隱藏整個 ExploreNav 組件；
• 解決方案：讓 ExploreNav 組件返回 <></> 空片段，不渲染任何內容，徹底隱藏組件。

2. 返回 null 後報 Uncaught SyntaxError

• 根本原因：註釋原有代碼時殘留未閉合的引號、括號，導致代碼語法不完整；
• 解決方案：直接替換為無多餘註釋的完整代碼，返回空片段而非 null，同時清理圖標、Link 等無用導入，避免語法殘留。

3. 報 ChunkLoadError: Loading chunk app/layout failed

• 根本原因：組件語法錯誤導致 Next.js 編譯緩存異常，加載緩存文件失敗；
• 解決方案：停止前端服務，手動刪除 web/.next 緩存目錄，重新啓動服務，清除異常緩存。

（二）替換 Logo 相關問題

1. Logo 未顯示，報資源加載失敗

• 根本原因：要麼 PNG 文件路徑與代碼配置不一致，要麼文件名大小寫不匹配（如 fdai.png 與 FDAI.png 區分大小寫）；
• 解決方案：確認 public/logo/FDAI.png 文件存在，且代碼中 logoPathMap 配置的路徑與文件名完全一致（含大小寫）。

2. Logo 顯示拉伸 / 變形

• 根本原因：自定義 PNG 尺寸比例與原組件配置（適配 48x22 比例）不匹配；
• 解決方案：調整 logoSizeMap 中的 w-xxx h-xxx 數值，保持寬高比與自定義 PNG 一致（例如 medium: 'w-14 h-[24px]'）。

3. 修改後仍顯示原 Dify Logo

• 根本原因：Next.js 開發模式熱重載未生效，殘留舊 Logo 緩存；
• 解決方案：手動刷新瀏覽器頁面，或重啓前端服務，強制加載新配置。

4. 報 preloaded with link preload was not used within a few seconds 警告

• 根本原因：靜態資源預加載配置與實際使用不匹配，屬於瀏覽器資源加載警告，非功能錯誤；
• 解決方案：無需額外處理，不影響 Logo 顯示和功能使用；若需消除警告，可檢查 layout.tsx 中預加載標籤的屬性配置。

（三）通用編譯 / 運行問題

1. MouseEvent.mozInputSource is deprecated 警告

• 根本原因：瀏覽器 API 兼容問題，Next.js 依賴的底層庫使用了過時 API；
• 解決方案：無需處理，不影響功能正常運行；後續可通過升級 Next.js 版本修復該兼容警告。

2. 編譯後服務啓動緩慢或卡頓

• 根本原因：修改組件後未清理緩存，導致編譯產物冗餘；
• 解決方案：定期清理 web/.next 緩存目錄，重啓服務時避免殘留舊編譯文件。