feat(iframe): 实现 iframe 通信的消息通道功能

- 新增 useChannel hook 用于基于 iframe 通信管理布局显示
- 实现 MessageChannel 工具类，用于父页面与 iframe 之间的安全跨域通信
- 更新 header-wrapper 组件，根据通道通信状态条件性渲染
- 在多个组件中集成消息通道功能
- 添加通过 postMessage API 控制布局的支持
- 改进 iframe 与父应用程序的集成

web/app/components/app-sidebar/index.tsx

@@ -10,6 +10,7 @@ import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import cn from '@/utils/classnames'
 import { useSearchParams } from 'next/navigation'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
@@ -56,6 +57,9 @@ const AppDetailNav = ({
     }
   }, [appSidebarExpand, setAppSiderbarExpand])
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   const searchParams = useSearchParams()
 
   // 从 router 查询参数，若有 sidebar选项,按照参数设置，没有的话，默认是展示内容
@@ -68,7 +72,7 @@ const AppDetailNav = ({
   return (
     <div
       className={`
-        flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all
+        ${showLayout ? 'flex' : 'hidden'} shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all
         ${expand ? 'w-[216px]' : 'w-14'}
       `}
     >

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -20,6 +20,7 @@ import type {
 import { useToastContext } from '@/app/components/base/toast'
 import AppIcon from '@/app/components/base/app-icon'
 import { noop } from 'lodash-es'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 const systemTypes = ['api']
 type ExternalDataToolModalProps = {
@@ -137,27 +138,42 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
 
   const handleSave = () => {
     if (!localeData.type) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: t('appDebug.feature.tools.modal.toolType.title') }) })
+      notify({
+        type: 'error',
+        message: t('appDebug.errorMessage.valueOfVarRequired', { key: t('appDebug.feature.tools.modal.toolType.title') }),
+      })
       return
     }
 
     if (!localeData.label) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: t('appDebug.feature.tools.modal.name.title') }) })
+      notify({
+        type: 'error',
+        message: t('appDebug.errorMessage.valueOfVarRequired', { key: t('appDebug.feature.tools.modal.name.title') }),
+      })
       return
     }
 
     if (!localeData.variable) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: t('appDebug.feature.tools.modal.variableName.title') }) })
+      notify({
+        type: 'error',
+        message: t('appDebug.errorMessage.valueOfVarRequired', { key: t('appDebug.feature.tools.modal.variableName.title') }),
+      })
       return
     }
 
     if (localeData.variable && !/[a-zA-Z_][a-zA-Z0-9_]{0,29}/g.test(localeData.variable)) {
-      notify({ type: 'error', message: t('appDebug.varKeyError.notValid', { key: t('appDebug.feature.tools.modal.variableName.title') }) })
+      notify({
+        type: 'error',
+        message: t('appDebug.varKeyError.notValid', { key: t('appDebug.feature.tools.modal.variableName.title') }),
+      })
       return
     }
 
     if (localeData.type === 'api' && !localeData.config?.api_based_extension_id) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }) })
+      notify({
+        type: 'error',
+        message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }),
+      })
       return
     }
 
@@ -183,6 +199,9 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
 
   const action = data.type ? t('common.operation.edit') : t('common.operation.add')
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
     <Modal
       isShow
@@ -219,7 +238,9 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
             placeholder={t('appDebug.feature.tools.modal.name.placeholder') || ''}
           />
           <AppIcon size='large'
-            onClick={() => { setShowEmojiPicker(true) }}
+            onClick={() => {
+              setShowEmojiPicker(true)
+            }}
             className='!h-9 !w-9 cursor-pointer rounded-lg border-[0.5px] border-black/5 '
             icon={localeData.icon}
             background={localeData.icon_background}
@@ -245,9 +266,9 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
               <a
                 href={t('common.apiBasedExtension.linkUrl') || '/'}
                 target='_blank' rel='noopener noreferrer'
-                className='group flex items-center text-xs font-normal text-gray-500 hover:text-primary-600'
+                className={`group ${showLayout ? 'flex' : 'hidden'} items-center text-xs font-normal text-gray-500 hover:text-primary-600`}
               >
-                <BookOpen01 className='mr-1 h-3 w-3 text-gray-500 group-hover:text-primary-600' />
+                <BookOpen01 className='mr-1 h-3 w-3 text-gray-500 group-hover:text-primary-600'/>
                 {t('common.apiBasedExtension.link')}
               </a>
             </div>

web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx

@@ -25,19 +25,20 @@ import { useModalContext } from '@/context/modal-context'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import cn from '@/utils/classnames'
 import { noop } from 'lodash-es'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 const systemTypes = ['openai_moderation', 'keywords', 'api']
 
 type Provider = {
-  key: string
+  key: string;
-  name: string
+  name: string;
-  form_schema?: CodeBasedExtensionItem['form_schema']
+  form_schema?: CodeBasedExtensionItem['form_schema'];
 }
 
 type ModerationSettingModalProps = {
-  data: ModerationConfig
+  data: ModerationConfig;
-  onCancel: () => void
+  onCancel: () => void;
-  onSave: (moderationConfig: ModerationConfig) => void
+  onSave: (moderationConfig: ModerationConfig) => void;
 }
 
 const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
@@ -48,7 +49,11 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
   const { t } = useTranslation()
   const { notify } = useToastContext()
   const { locale } = useContext(I18n)
-  const { data: modelProviders, isLoading, mutate } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
+  const {
+    data: modelProviders,
+    isLoading,
+    mutate,
+  } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
   const [localeData, setLocaleData] = useState<ModerationConfig>(data)
   const { setShowAccountSettingModal } = useModalContext()
   const handleOpenSettingsModal = () => {
@@ -63,12 +68,24 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     '/code-based-extension?module=moderation',
     fetchCodeBasedExtensionList,
   )
-  const openaiProvider = modelProviders?.data.find(item => item.provider === 'langgenius/openai/openai')
+  const openaiProvider = modelProviders?.data.find(
-  const systemOpenaiProviderEnabled = openaiProvider?.system_configuration.enabled
+    item => item.provider === 'langgenius/openai/openai',
-  const systemOpenaiProviderQuota = systemOpenaiProviderEnabled ? openaiProvider?.system_configuration.quota_configurations.find(item => item.quota_type === openaiProvider.system_configuration.current_quota_type) : undefined
+  )
+  const systemOpenaiProviderEnabled
+    = openaiProvider?.system_configuration.enabled
+  const systemOpenaiProviderQuota = systemOpenaiProviderEnabled
+    ? openaiProvider?.system_configuration.quota_configurations.find(
+      item =>
+        item.quota_type
+          === openaiProvider.system_configuration.current_quota_type,
+    )
+    : undefined
   const systemOpenaiProviderCanUse = systemOpenaiProviderQuota?.is_valid
-  const customOpenaiProvidersCanUse = openaiProvider?.custom_configuration.status === CustomConfigurationStatusEnum.active
+  const customOpenaiProvidersCanUse
-  const isOpenAIProviderConfigured = customOpenaiProvidersCanUse || systemOpenaiProviderCanUse
+    = openaiProvider?.custom_configuration.status
+    === CustomConfigurationStatusEnum.active
+  const isOpenAIProviderConfigured
+    = customOpenaiProvidersCanUse || systemOpenaiProviderCanUse
   const providers: Provider[] = [
     {
       key: 'openai_moderation',
@@ -82,26 +99,32 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
       key: 'api',
       name: t('common.apiBasedExtension.selector.title'),
     },
-    ...(
+    ...(codeBasedExtensionList
-      codeBasedExtensionList
       ? codeBasedExtensionList.data.map((item) => {
         return {
           key: item.name,
-            name: locale === 'zh-Hans' ? item.label['zh-Hans'] : item.label['en-US'],
+          name:
+              locale === 'zh-Hans'
+                ? item.label['zh-Hans']
+                : item.label['en-US'],
           form_schema: item.form_schema,
         }
       })
-        : []
+      : []),
-    ),
   ]
 
-  const currentProvider = providers.find(provider => provider.key === localeData.type)
+  const currentProvider = providers.find(
+    provider => provider.key === localeData.type,
+  )
 
   const handleDataTypeChange = (type: string) => {
     let config: undefined | Record<string, any>
     const currProvider = providers.find(provider => provider.key === type)
 
-    if (systemTypes.findIndex(t => t === type) < 0 && currProvider?.form_schema) {
+    if (
+      systemTypes.findIndex(t => t === type) < 0
+      && currProvider?.form_schema
+    ) {
       config = currProvider?.form_schema.reduce((prev, next) => {
         prev[next.variable] = next.default
         return prev
@@ -118,10 +141,8 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     const value = e.target.value
 
     const arr = value.split('\n').reduce((prev: string[], next: string) => {
-      if (next !== '')
+      if (next !== '') prev.push(next.slice(0, 100))
-        prev.push(next.slice(0, 100))
+      if (next === '' && prev[prev.length - 1] !== '') prev.push(next)
-      if (next === '' && prev[prev.length - 1] !== '')
-        prev.push(next)
 
       return prev
     }, [])
@@ -135,7 +156,10 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     })
   }
 
-  const handleDataContentChange = (contentType: string, contentConfig: ModerationContentConfig) => {
+  const handleDataContentChange = (
+    contentType: string,
+    contentConfig: ModerationContentConfig,
+  ) => {
     setLocaleData({
       ...localeData,
       config: {
@@ -170,13 +194,15 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     const { inputs_config, outputs_config } = config!
     const params: Record<string, string | undefined> = {}
 
-    if (type === 'keywords')
+    if (type === 'keywords') params.keywords = config?.keywords
-      params.keywords = config?.keywords
 
     if (type === 'api')
       params.api_based_extension_id = config?.api_based_extension_id
 
-    if (systemTypes.findIndex(t => t === type) < 0 && currentProvider?.form_schema) {
+    if (
+      systemTypes.findIndex(t => t === type) < 0
+      && currentProvider?.form_schema
+    ) {
       currentProvider.form_schema.forEach((form) => {
         params[form.variable] = config?.[form.variable]
       })
@@ -197,178 +223,269 @@ const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
     if (localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured)
       return
 
-    if (!localeData.config?.inputs_config?.enabled && !localeData.config?.outputs_config?.enabled) {
+    if (
-      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.condition') })
+      !localeData.config?.inputs_config?.enabled
+      && !localeData.config?.outputs_config?.enabled
+    ) {
+      notify({
+        type: 'error',
+        message: t('appDebug.feature.moderation.modal.content.condition'),
+      })
       return
     }
 
     if (localeData.type === 'keywords' && !localeData.config.keywords) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'keywords' : '关键词' }) })
-      return
-    }
-
-    if (localeData.type === 'api' && !localeData.config.api_based_extension_id) {
-      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }) })
-      return
-    }
-
-    if (systemTypes.findIndex(t => t === localeData.type) < 0 && currentProvider?.form_schema) {
-      for (let i = 0; i < currentProvider.form_schema.length; i++) {
-        if (!localeData.config?.[currentProvider.form_schema[i].variable] && currentProvider.form_schema[i].required) {
       notify({
         type: 'error',
-            message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }),
+        message: t('appDebug.errorMessage.valueOfVarRequired', {
+          key: locale !== LanguagesSupported[1] ? 'keywords' : '关键词',
+        }),
+      })
+      return
+    }
+
+    if (
+      localeData.type === 'api'
+      && !localeData.config.api_based_extension_id
+    ) {
+      notify({
+        type: 'error',
+        message: t('appDebug.errorMessage.valueOfVarRequired', {
+          key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展',
+        }),
+      })
+      return
+    }
+
+    if (
+      systemTypes.findIndex(t => t === localeData.type) < 0
+      && currentProvider?.form_schema
+    ) {
+      for (let i = 0; i < currentProvider.form_schema.length; i++) {
+        if (
+          !localeData.config?.[currentProvider.form_schema[i].variable]
+          && currentProvider.form_schema[i].required
+        ) {
+          notify({
+            type: 'error',
+            message: t('appDebug.errorMessage.valueOfVarRequired', {
+              key:
+                locale !== LanguagesSupported[1]
+                  ? currentProvider.form_schema[i].label['en-US']
+                  : currentProvider.form_schema[i].label['zh-Hans'],
+            }),
           })
           return
         }
       }
     }
 
-    if (localeData.config.inputs_config?.enabled && !localeData.config.inputs_config.preset_response && localeData.type !== 'api') {
+    if (
-      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
+      localeData.config.inputs_config?.enabled
+      && !localeData.config.inputs_config.preset_response
+      && localeData.type !== 'api'
+    ) {
+      notify({
+        type: 'error',
+        message: t('appDebug.feature.moderation.modal.content.errorMessage'),
+      })
       return
     }
 
-    if (localeData.config.outputs_config?.enabled && !localeData.config.outputs_config.preset_response && localeData.type !== 'api') {
+    if (
-      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
+      localeData.config.outputs_config?.enabled
+      && !localeData.config.outputs_config.preset_response
+      && localeData.type !== 'api'
+    ) {
+      notify({
+        type: 'error',
+        message: t('appDebug.feature.moderation.modal.content.errorMessage'),
+      })
       return
     }
 
     onSave(formatData(localeData))
   }
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
-    <Modal
+    <Modal isShow onClose={noop} className="!mt-14 !w-[600px] !max-w-none !p-6">
-      isShow
+      <div className="flex items-center justify-between">
-      onClose={noop}
+        <div className="title-2xl-semi-bold text-text-primary">
-      className='!mt-14 !w-[600px] !max-w-none !p-6'
+          {t('appDebug.feature.moderation.modal.title')}
-    >
-      <div className='flex items-center justify-between'>
-        <div className='title-2xl-semi-bold text-text-primary'>{t('appDebug.feature.moderation.modal.title')}</div>
-        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
         </div>
-      <div className='py-2'>
+        <div className="cursor-pointer p-1" onClick={onCancel}>
-        <div className='text-sm font-medium leading-9 text-text-primary'>
+          <RiCloseLine className="h-4 w-4 text-text-tertiary" />
+        </div>
+      </div>
+      <div className="py-2">
+        <div className="text-sm font-medium leading-9 text-text-primary">
           {t('appDebug.feature.moderation.modal.provider.title')}
         </div>
-        <div className='grid grid-cols-3 gap-2.5'>
+        <div className="grid grid-cols-3 gap-2.5">
-          {
+          {providers.map(provider => (
-            providers.map(provider => (
             <div
               key={provider.key}
               className={cn(
                 'system-sm-regular flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
-                  localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                localeData.type !== provider.key
-                  localeData.type === provider.key && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+                  && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
-                  localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
+                localeData.type === provider.key
+                  && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+                localeData.type === 'openai_moderation'
+                  && provider.key === 'openai_moderation'
+                  && !isOpenAIProviderConfigured
+                  && 'text-text-disabled',
               )}
               onClick={() => handleDataTypeChange(provider.key)}
             >
-                <div className={cn(
+              <div
+                className={cn(
                   'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
-                  localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
+                  localeData.type === provider.key
-                )}></div>
+                    && 'border-[5px] border-components-radio-border-checked',
+                )}
+              ></div>
               {provider.name}
             </div>
-            ))
+          ))}
-          }
         </div>
-        {
+        {!isLoading
-          !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
+          && !isOpenAIProviderConfigured
-            <div className='mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2'>
+          && localeData.type === 'openai_moderation' && (
-              <InfoCircle className='mr-1 h-4 w-4 text-[#F79009]' />
+          <div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
-              <div className='flex items-center text-xs font-medium text-gray-700'>
+            <InfoCircle className="mr-1 h-4 w-4 text-[#F79009]" />
+            <div className="flex items-center text-xs font-medium text-gray-700">
               {t('appDebug.feature.moderation.modal.openaiNotConfig.before')}
               <span
-                  className='cursor-pointer text-primary-600'
+                className="cursor-pointer text-primary-600"
-                  onClick={handleOpenSettingsModal}
+                onClick={() => showLayout && handleOpenSettingsModal}
               >
                   &nbsp;{t('common.settings.provider')}&nbsp;
               </span>
               {t('appDebug.feature.moderation.modal.openaiNotConfig.after')}
             </div>
           </div>
-          )
+        )}
-        }
       </div>
-      {
+      {localeData.type === 'keywords' && (
-        localeData.type === 'keywords' && (
+        <div className="py-2">
-          <div className='py-2'>
+          <div className="mb-1 text-sm font-medium text-text-primary">
-            <div className='mb-1 text-sm font-medium text-text-primary'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
+            {t('appDebug.feature.moderation.modal.provider.keywords')}
-            <div className='mb-2 text-xs text-text-tertiary'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
+          </div>
-            <div className='relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2'>
+          <div className="mb-2 text-xs text-text-tertiary">
+            {t('appDebug.feature.moderation.modal.keywords.tip')}
+          </div>
+          <div className="relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2">
             <textarea
               value={localeData.config?.keywords || ''}
               onChange={handleDataKeywordsChange}
-                className='block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none'
+              className="block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none"
-                placeholder={t('appDebug.feature.moderation.modal.keywords.placeholder') || ''}
+              placeholder={
-              />
+                t('appDebug.feature.moderation.modal.keywords.placeholder')
-              <div className='absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary'>
+                || ''
-                <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-text-tertiary'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
-              </div>
-            </div>
-          </div>
-        )
               }
+            />
+            <div className="absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary">
+              <span>
                 {
-        localeData.type === 'api' && (
+                  (localeData.config?.keywords || '')
-          <div className='py-2'>
+                    .split('\n')
-            <div className='flex h-9 items-center justify-between'>
+                    .filter(Boolean).length
-              <div className='text-sm font-medium text-text-primary'>{t('common.apiBasedExtension.selector.title')}</div>
+                }
+              </span>
+              /
+              <span className="text-text-tertiary">
+                100 {t('appDebug.feature.moderation.modal.keywords.line')}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+      {localeData.type === 'api' && (
+        <div className="py-2">
+          <div className="flex h-9 items-center justify-between">
+            <div className="text-sm font-medium text-text-primary">
+              {t('common.apiBasedExtension.selector.title')}
+            </div>
             <a
               href={t('common.apiBasedExtension.linkUrl') || '/'}
-                target='_blank' rel='noopener noreferrer'
+              target="_blank"
-                className='group flex items-center text-xs text-text-tertiary hover:text-primary-600'
+              rel="noopener noreferrer"
+              className={`group ${showLayout ? 'flex' : 'hidden'} items-center text-xs text-text-tertiary hover:text-primary-600`}
             >
-                <BookOpen01 className='mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600' />
+              <BookOpen01 className="mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600" />
               {t('common.apiBasedExtension.link')}
             </a>
+            )
           </div>
           <ApiBasedExtensionSelector
             value={localeData.config?.api_based_extension_id || ''}
             onChange={handleDataApiBasedChange}
           />
         </div>
-        )
+      )}
-      }
+      {systemTypes.findIndex(t => t === localeData.type) < 0
-      {
+        && currentProvider?.form_schema && (
-        systemTypes.findIndex(t => t === localeData.type) < 0
-        && currentProvider?.form_schema
-        && (
         <FormGeneration
           forms={currentProvider?.form_schema}
           value={localeData.config}
           onChange={handleDataExtraChange}
         />
-        )
+      )}
-      }
+      <Divider bgStyle="gradient" className="my-3 h-px" />
-      <Divider bgStyle='gradient' className='my-3 h-px' />
       <ModerationContent
         title={t('appDebug.feature.moderation.modal.content.input') || ''}
-        config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
+        config={
-        onConfigChange={config => handleDataContentChange('inputs_config', config)}
+          localeData.config?.inputs_config || {
-        info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
+            enabled: false,
+            preset_response: '',
+          }
+        }
+        onConfigChange={config =>
+          handleDataContentChange('inputs_config', config)
+        }
+        info={
+          (localeData.type === 'api'
+            && t('appDebug.feature.moderation.modal.content.fromApi'))
+          || ''
+        }
         showPreset={!(localeData.type === 'api')}
       />
       <ModerationContent
         title={t('appDebug.feature.moderation.modal.content.output') || ''}
-        config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }}
+        config={
-        onConfigChange={config => handleDataContentChange('outputs_config', config)}
+          localeData.config?.outputs_config || {
-        info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
+            enabled: false,
+            preset_response: '',
+          }
+        }
+        onConfigChange={config =>
+          handleDataContentChange('outputs_config', config)
+        }
+        info={
+          (localeData.type === 'api'
+            && t('appDebug.feature.moderation.modal.content.fromApi'))
+          || ''
+        }
         showPreset={!(localeData.type === 'api')}
       />
-      <div className='mb-8 mt-1 text-xs font-medium text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
+      <div className="mb-8 mt-1 text-xs font-medium text-text-tertiary">
-      <div className='flex items-center justify-end'>
+        {t('appDebug.feature.moderation.modal.content.condition')}
-        <Button
+      </div>
-          onClick={onCancel}
+      <div className="flex items-center justify-end">
-          className='mr-2'
+        <Button onClick={onCancel} className="mr-2">
-        >
           {t('common.operation.cancel')}
         </Button>
         <Button
-          variant='primary'
+          variant="primary"
           onClick={handleSave}
-          disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
+          disabled={
+            localeData.type === 'openai_moderation'
+            && !isOpenAIProviderConfigured
+          }
         >
           {t('common.operation.save')}
         </Button>

web/app/components/header/account-setting/api-based-extension-page/modal.tsx

@@ -11,6 +11,7 @@ import {
 } from '@/service/common'
 import { useToastContext } from '@/app/components/base/toast'
 import { noop } from 'lodash-es'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 export type ApiBasedExtensionData = {
   name?: string
@@ -72,6 +73,9 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
     }
   }
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
     <Modal
       isShow
@@ -102,9 +106,9 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
           <a
             href={t('common.apiBasedExtension.linkUrl') || '/'}
             target='_blank' rel='noopener noreferrer'
-            className='group flex items-center text-xs font-normal text-text-accent'
+            className={`group ${showLayout ? 'flex' : 'hidden'} items-center text-xs font-normal text-text-accent`}
           >
-            <BookOpen01 className='mr-1 h-3 w-3' />
+            <BookOpen01 className='mr-1 h-3 w-3'/>
             {t('common.apiBasedExtension.link')}
           </a>
         </div>

web/app/components/header/account-setting/api-based-extension-page/selector.tsx

@@ -2,24 +2,20 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import {
+import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
-  RiAddLine,
-  RiArrowDownSLine,
-} from '@remixicon/react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import {
+import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
-  ArrowUpRight,
-} from '@/app/components/base/icons/src/vender/line/arrows'
 import { useModalContext } from '@/context/modal-context'
 import { fetchApiBasedExtensionList } from '@/service/common'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type ApiBasedExtensionSelectorProps = {
-  value: string
+  value: string;
-  onChange: (value: string) => void
+  onChange: (value: string) => void;
 }
 
 const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
@@ -28,10 +24,8 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
-  const {
+  const { setShowAccountSettingModal, setShowApiBasedExtensionModal }
-    setShowAccountSettingModal,
+    = useModalContext()
-    setShowApiBasedExtensionModal,
-  } = useModalContext()
   const { data, mutate } = useSWR(
     '/api-based-extension',
     fetchApiBasedExtensionList,
@@ -43,78 +37,93 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
 
   const currentItem = data?.find(item => item.id === value)
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
     <PortalToFollowElem
       open={open}
       onOpenChange={setOpen}
-      placement='bottom-start'
+      placement="bottom-start"
       offset={4}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} className='w-full'>
+      <PortalToFollowElemTrigger
-        {
+        onClick={() => setOpen(v => !v)}
-          currentItem
+        className="w-full"
-            ? (
+      >
-              <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5'>
+        {currentItem ? (
-                <div className='text-sm text-text-primary'>{currentItem.name}</div>
+          <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5">
-                <div className='flex items-center'>
+            <div className="text-sm text-text-primary">{currentItem.name}</div>
-                  <div className='mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary'>
+            <div className="flex items-center">
+              <div className="mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary">
                 {currentItem.api_endpoint}
               </div>
-                  <RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
+              <RiArrowDownSLine
+                className={`h-4 w-4 text-text-secondary ${
+                  !open && 'opacity-60'
+                }`}
+              />
             </div>
           </div>
-            )
+        ) : (
-            : (
+          <div className="flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5 text-sm text-text-quaternary">
-              <div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5 text-sm text-text-quaternary'>
             {t('common.apiBasedExtension.selector.placeholder')}
-                <RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
+            <RiArrowDownSLine
+              className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`}
+            />
           </div>
-            )
+        )}
-        }
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[102] w-[calc(100%-32px)] max-w-[576px]'>
+      <PortalToFollowElemContent className="z-[102] w-[calc(100%-32px)] max-w-[576px]">
-        <div className='z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
+        <div className="z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg">
-          <div className='p-1'>
+          <div className="p-1">
-            <div className='flex items-center justify-between px-3 pb-1 pt-2'>
+            <div className="flex items-center justify-between px-3 pb-1 pt-2">
-              <div className='text-xs font-medium text-text-tertiary'>
+              <div className="text-xs font-medium text-text-tertiary">
                 {t('common.apiBasedExtension.selector.title')}
               </div>
               <div
-                className='flex cursor-pointer items-center text-xs text-text-accent'
+                className={`${
+                  showLayout ? 'flex' : 'hidden'
+                } cursor-pointer items-center text-xs text-text-accent`}
                 onClick={() => {
                   setOpen(false)
-                  setShowAccountSettingModal({ payload: 'api-based-extension' })
+                  setShowAccountSettingModal({
+                    payload: 'api-based-extension',
+                  })
                 }}
               >
                 {t('common.apiBasedExtension.selector.manage')}
-                <ArrowUpRight className='ml-0.5 h-3 w-3' />
+                <ArrowUpRight className="ml-0.5 h-3 w-3" />
               </div>
             </div>
-            <div className='max-h-[250px] overflow-y-auto'>
+            <div className="max-h-[250px] overflow-y-auto">
-              {
+              {data?.map(item => (
-                data?.map(item => (
                 <div
                   key={item.id}
-                    className='w-full cursor-pointer rounded-md px-3 py-1.5 text-left hover:stroke-state-base-hover'
+                  className="w-full cursor-pointer rounded-md px-3 py-1.5 text-left hover:stroke-state-base-hover"
                   onClick={() => handleSelect(item.id!)}
                 >
-                    <div className='text-sm text-text-primary'>{item.name}</div>
+                  <div className="text-sm text-text-primary">{item.name}</div>
-                    <div className='text-xs text-text-tertiary'>{item.api_endpoint}</div>
+                  <div className="text-xs text-text-tertiary">
-                  </div>
+                    {item.api_endpoint}
-                ))
-              }
                   </div>
                 </div>
-          <div className='h-[1px] bg-divider-regular' />
+              ))}
-          <div className='p-1'>
+            </div>
+          </div>
+          <div className="h-[1px] bg-divider-regular" />
+          <div className="p-1">
             <div
-              className='flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent'
+              className="flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent"
               onClick={() => {
                 setOpen(false)
-                setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })
+                setShowApiBasedExtensionModal({
+                  payload: {},
+                  onSaveCallback: () => mutate(),
+                })
               }}
             >
-              <RiAddLine className='mr-2 h-4 w-4' />
+              <RiAddLine className="mr-2 h-4 w-4" />
               {t('common.operation.add')}
             </div>
           </div>

web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx

@@ -16,6 +16,7 @@ import PopupItem from './popup-item'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { useModalContext } from '@/context/modal-context'
 import { supportFunctionCall } from '@/utils/tool-call'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type PopupProps = {
   defaultModel?: DefaultModel
@@ -59,6 +60,9 @@ const Popup: FC<PopupProps> = ({
     }).filter(model => model.models.length > 0)
   }, [language, modelList, scopeFeatures, searchText])
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
     <div className='max-h-[480px] w-[320px] overflow-y-auto rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
       <div className='sticky top-0 z-10 bg-components-panel-bg pb-1 pl-3 pr-2 pt-3'>
@@ -107,7 +111,7 @@ const Popup: FC<PopupProps> = ({
           )
         }
       </div>
-      <div className='sticky bottom-0 flex cursor-pointer items-center rounded-b-lg border-t border-divider-subtle bg-components-panel-bg px-4 py-2 text-text-accent-light-mode-only' onClick={() => {
+      <div className={`sticky bottom-0 ${showLayout ? 'flex' : 'hidden'} cursor-pointer items-center rounded-b-lg border-t border-divider-subtle bg-components-panel-bg px-4 py-2 text-text-accent-light-mode-only`} onClick={() => {
         onHide()
         setShowAccountSettingModal({ payload: 'provider' })
       }}>

web/app/components/header/header-wrapper.tsx

@@ -2,6 +2,7 @@
 import { usePathname, useSearchParams } from 'next/navigation'
 import s from './index.module.css'
 import classNames from '@/utils/classnames'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type HeaderWrapperProps = {
   children: React.ReactNode
@@ -18,12 +19,13 @@ const HeaderWrapper = ({
   const headerParam = searchParams.get('header')
   const showHeader = !headerParam || headerParam === '1'
 
-  // console.log('headerParam: ', headerParam, !headerParam, (headerParam === '1'))
+  // 通过 channel 获取 layout 数据内容
-  // console.log('showHeader: ', showHeader)
+  const showLayout = useGetLayoutByChannel()
+
   if (!showHeader) return null
   return (
     <div className={classNames(
-      'sticky top-0 left-0 right-0 z-30 flex flex-col grow-0 shrink-0 basis-auto min-h-[56px]',
+      `sticky top-0 left-0 right-0 z-30 ${showLayout ? 'flex' : 'hidden'} flex-col grow-0 shrink-0 basis-auto min-h-[56px]`,
       s.header,
       isBordered ? 'border-b border-divider-regular' : '',
     )}

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -8,20 +8,19 @@ import cn from '@/utils/classnames'
 import Link from 'next/link'
 import { marketplaceUrlPrefix } from '@/config'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
-// import { RiArrowRightUpLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type Props = {
-  wrapElemRef: React.RefObject<HTMLElement>
+  wrapElemRef: React.RefObject<HTMLElement>;
-  list: Plugin[]
+  list: Plugin[];
-  searchText: string
+  searchText: string;
-  tags: string[]
+  tags: string[];
-  toolContentClassName?: string
+  toolContentClassName?: string;
-  disableMaxWidth?: boolean
+  disableMaxWidth?: boolean;
 }
 
-const List = (
+const List = ({
-  {
   ref,
   wrapElemRef,
   searchText,
@@ -29,12 +28,13 @@ const List = (
   list,
   toolContentClassName,
   disableMaxWidth = false,
-  },
+}) => {
-) => {
   const { t } = useTranslation()
   const hasFilter = !searchText
   const hasRes = list.length > 0
-  const urlWithSearchText = `${marketplaceUrlPrefix}/?q=${searchText}&tags=${tags.join(',')}`
+  const urlWithSearchText = `${marketplaceUrlPrefix}/?q=${searchText}&tags=${tags.join(
+    ',',
+  )}`
   const nextToStickyELemRef = useRef<HTMLDivElement>(null)
 
   const { handleScroll, scrollPosition } = useStickyScroll({
@@ -63,21 +63,29 @@ const List = (
 
   const handleHeadClick = () => {
     if (scrollPosition === ScrollPosition.belowTheWrap) {
-      nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      nextToStickyELemRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
       return
     }
     window.open(urlWithSearchText, '_blank')
   }
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   if (hasFilter) {
     return (
       <Link
-        className='system-sm-medium sticky bottom-0 z-10 flex h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg'
+        className={`system-sm-medium sticky bottom-0 z-10 ${
+          showLayout ? 'flex' : 'hidden'
+        } h-8 cursor-pointer items-center rounded-b-lg border-[0.5px] border-t border-components-panel-border bg-components-panel-bg-blur px-4 py-1 text-text-accent-light-mode-only shadow-lg`}
         href={`${marketplaceUrlPrefix}/`}
-        target='_blank'
+        target="_blank"
       >
         <span>{t('plugin.findMoreInMarketplace')}</span>
-        <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
+        <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />
       </Link>
     )
   }
@@ -88,37 +96,40 @@ const List = (
     <>
       {hasRes && (
         <div
-          className={cn('system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary', stickyClassName, !disableMaxWidth && maxWidthClassName)}
+          className={cn(
+            'system-sm-medium sticky z-10 flex h-8 cursor-pointer justify-between px-4 py-1 text-text-primary',
+            stickyClassName,
+            !disableMaxWidth && maxWidthClassName,
+          )}
           onClick={handleHeadClick}
         >
           <span>{t('plugin.fromMarketplace')}</span>
           <Link
             href={urlWithSearchText}
-            target='_blank'
+            target="_blank"
-            className='flex items-center text-text-accent-light-mode-only'
+            className="flex items-center text-text-accent-light-mode-only"
             onClick={e => e.stopPropagation()}
           >
             <span>{t('plugin.searchInMarketplace')}</span>
-            <RiArrowRightUpLine className='ml-0.5 h-3 w-3' />
+            <RiArrowRightUpLine className="ml-0.5 h-3 w-3" />
           </Link>
         </div>
       )}
-      <div className={cn('p-1', !disableMaxWidth && maxWidthClassName)} ref={nextToStickyELemRef}>
+      <div
+        className={cn('p-1', !disableMaxWidth && maxWidthClassName)}
+        ref={nextToStickyELemRef}
+      >
         {list.map((item, index) => (
-          <Item
+          <Item key={index} payload={item} onAction={noop} />
-            key={index}
-            payload={item}
-            onAction={noop}
-          />
         ))}
-        <div className='mb-3 mt-2 flex items-center justify-center space-x-2'>
+        <div className="mb-3 mt-2 flex items-center justify-center space-x-2">
           <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
           <Link
             href={urlWithSearchText}
-            target='_blank'
+            target="_blank"
-            className='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
+            className="system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only"
           >
-            <RiSearchLine className='mr-0.5 h-3 w-3' />
+            <RiSearchLine className="mr-0.5 h-3 w-3" />
             <span>{t('plugin.searchInMarketplace')}</span>
           </Link>
           <div className="h-[2px] w-[90px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>

web/app/components/workflow/nodes/_base/components/error-handle/default-value.tsx

@@ -5,82 +5,93 @@ import Input from '@/app/components/base/input'
 import { VarType } from '@/app/components/workflow/types'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type DefaultValueProps = {
-  forms: DefaultValueForm[]
+  forms: DefaultValueForm[];
-  onFormChange: (form: DefaultValueForm) => void
+  onFormChange: (form: DefaultValueForm) => void;
 }
-const DefaultValue = ({
+const DefaultValue = ({ forms, onFormChange }: DefaultValueProps) => {
-  forms,
-  onFormChange,
-}: DefaultValueProps) => {
   const { t } = useTranslation()
-  const getFormChangeHandler = useCallback(({ key, type }: DefaultValueForm) => {
+  const getFormChangeHandler = useCallback(
+    ({ key, type }: DefaultValueForm) => {
       return (payload: any) => {
         let value
         if (type === VarType.string || type === VarType.number)
           value = payload.target.value
 
-      if (type === VarType.array || type === VarType.arrayNumber || type === VarType.arrayString || type === VarType.arrayObject || type === VarType.arrayFile || type === VarType.object)
+        if (
+          type === VarType.array
+          || type === VarType.arrayNumber
+          || type === VarType.arrayString
+          || type === VarType.arrayObject
+          || type === VarType.arrayFile
+          || type === VarType.object
+        )
           value = payload
 
         onFormChange({ key, type, value })
       }
-  }, [onFormChange])
+    },
+    [onFormChange],
+  )
+
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
 
   return (
-    <div className='px-4 pt-2'>
+    <div className="px-4 pt-2">
-      <div className='body-xs-regular mb-2 text-text-tertiary'>
+      <div className="body-xs-regular mb-2 text-text-tertiary">
         {t('workflow.nodes.common.errorHandle.defaultValue.desc')}
         &nbsp;
         <a
-          href='https://docs.dify.ai/guides/workflow/error-handling'
+          href="https://docs.dify.ai/guides/workflow/error-handling"
-          target='_blank'
+          target="_blank"
-          className='text-text-accent'
+          className={`text-text-accent ${showLayout ? '' : 'hidden'}`}
         >
           {t('workflow.common.learnMore')}
         </a>
       </div>
-      <div className='space-y-1'>
+      <div className="space-y-1">
-        {
+        {forms.map((form, index) => {
-          forms.map((form, index) => {
           return (
-              <div
+            <div key={index} className="py-1">
-                key={index}
+              <div className="mb-1 flex items-center">
-                className='py-1'
+                <div className="system-sm-medium mr-1 text-text-primary">
-              >
+                  {form.key}
-                <div className='mb-1 flex items-center'>
-                  <div className='system-sm-medium mr-1 text-text-primary'>{form.key}</div>
-                  <div className='system-xs-regular text-text-tertiary'>{form.type}</div>
                 </div>
-                {
+                <div className="system-xs-regular text-text-tertiary">
-                  (form.type === VarType.string || form.type === VarType.number) && (
+                  {form.type}
+                </div>
+              </div>
+              {(form.type === VarType.string
+                || form.type === VarType.number) && (
                 <Input
                   type={form.type}
                   value={form.value || (form.type === VarType.string ? '' : 0)}
-                      onChange={getFormChangeHandler({ key: form.key, type: form.type })}
+                  onChange={getFormChangeHandler({
+                    key: form.key,
+                    type: form.type,
+                  })}
                 />
-                  )
+              )}
-                }
+              {(form.type === VarType.array
-                {
-                  (
-                    form.type === VarType.array
                 || form.type === VarType.arrayNumber
                 || form.type === VarType.arrayString
                 || form.type === VarType.arrayObject
-                    || form.type === VarType.object
+                || form.type === VarType.object) && (
-                  ) && (
                 <CodeEditor
                   language={CodeLanguage.json}
                   value={form.value}
-                      onChange={getFormChangeHandler({ key: form.key, type: form.type })}
+                  onChange={getFormChangeHandler({
+                    key: form.key,
+                    type: form.type,
+                  })}
                 />
-                  )
+              )}
-                }
             </div>
           )
-          })
+        })}
-        }
       </div>
     </div>
   )

web/app/components/workflow/nodes/_base/components/error-handle/fail-branch-card.tsx

@@ -1,25 +1,29 @@
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 import { RiMindMap } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
 const FailBranchCard = () => {
   const { t } = useTranslation()
 
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
+
   return (
-    <div className='px-4 pt-2'>
+    <div className="px-4 pt-2">
-      <div className='rounded-[10px] bg-workflow-process-bg p-4'>
+      <div className="rounded-[10px] bg-workflow-process-bg p-4">
-        <div className='mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] bg-components-card-bg shadow-lg'>
+        <div className="mb-2 flex h-8 w-8 items-center justify-center rounded-[10px] border-[0.5px] bg-components-card-bg shadow-lg">
-          <RiMindMap className='h-5 w-5 text-text-tertiary' />
+          <RiMindMap className="h-5 w-5 text-text-tertiary" />
         </div>
-        <div className='system-sm-medium mb-1 text-text-secondary'>
+        <div className="system-sm-medium mb-1 text-text-secondary">
           {t('workflow.nodes.common.errorHandle.failBranch.customize')}
         </div>
-        <div className='system-xs-regular text-text-tertiary'>
+        <div className="system-xs-regular text-text-tertiary">
           {t('workflow.nodes.common.errorHandle.failBranch.customizeTip')}
           &nbsp;
           <a
-            href='https://docs.dify.ai/guides/workflow/error-handling'
+            href="https://docs.dify.ai/guides/workflow/error-handling"
-            target='_blank'
+            target="_blank"
-            className='text-text-accent'
+            className={`text-text-accent ${showLayout ? '' : 'hidden'}`}
           >
             {t('workflow.common.learnMore')}
           </a>

web/app/components/workflow/nodes/_base/components/help-link.tsx

@@ -3,32 +3,32 @@ import { useTranslation } from 'react-i18next'
 import { useNodeHelpLink } from '../hooks/use-node-help-link'
 import TooltipPlus from '@/app/components/base/tooltip'
 import type { BlockEnum } from '@/app/components/workflow/types'
+import { RiBookOpenLine } from '@remixicon/react'
+import { useGetLayoutByChannel } from '@/hooks/use-channel'
 
 type HelpLinkProps = {
-  nodeType: BlockEnum
+  nodeType: BlockEnum;
 }
-const HelpLink = ({
+const HelpLink = ({ nodeType }: HelpLinkProps) => {
-  nodeType,
-}: HelpLinkProps) => {
   const { t } = useTranslation()
   const link = useNodeHelpLink(nodeType)
+  // 通过 channel 获取 layout 数据内容
+  const showLayout = useGetLayoutByChannel()
 
-  if (!link)
+  if (!link) return null
-    return null
 
   return (
-    <TooltipPlus
+    <TooltipPlus popupContent={t('common.userProfile.helpCenter')}>
-      popupContent={t('common.userProfile.helpCenter')}
-    >
       <a
         href={link}
-        target='_blank'
+        target="_blank"
-        className='mr-1 flex h-6 w-6 items-center justify-center'
+        className={`mr-1 flex h-6 w-6 items-center justify-center ${
+          showLayout ? '' : 'hidden'
+        }`}
       >
-        {/* <RiBookOpenLine className='h-4 w-4 text-gray-500' /> */}
+        <RiBookOpenLine className="h-4 w-4 text-gray-500" />
       </a>
     </TooltipPlus>
-
   )
 }
 

web/hooks/use-channel.ts

@@ -0,0 +1,41 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+// enum channelType {
+//   layout = 'layout',
+// }
+
+// export function useChannel(type: channelType) {
+//   switch (type) {
+//     case 'layout':
+//       return useGetLayoutByChannel();
+//   }
+// }
+
+export function useGetLayoutByChannel(message = 'layout 信息') {
+  const [showLayout, setShowLayout] = useState(true)
+
+  // 与父节点通信， 若有通信内容，获取父页面的传递内容
+  // 由父节点控制页面展示内容， 默认展示
+  useEffect(() => {
+    const msg = {
+      type: 'layout',
+      message,
+    }
+
+    // 后续通过 channel 持久化，优化显示速度
+    const win = window as any
+    if (win.port) {
+      win.port.postMessage(msg)
+      win.port.onmessage = (event: MessageEvent) => {
+        // console.log(`${msg.message}: ${event.data}`)
+        setShowLayout(event.data)
+      }
+    }
+    else {
+      // console.warn('window.port 不存在，无法发送消息')
+    }
+  }, [showLayout, message])
+
+  return showLayout
+}

web/utils/message-channel.ts

@@ -9,12 +9,10 @@ export function activeMessageChannel() {
 
   // 检查是否在 iframe 中
   const isInIframe = window !== window.parent
+  if (!isInIframe) return
 
-  if (!isInIframe) {
+  //   检测是否已经存在 MessageChannel
-    console.log('不在 iframe 中，无需激活消息通道')
+  if (window.port as MessagePort) return
-    return
-  }
-
   // console.log('在 iframe 中，准备接收消息通道')
 
   // 监听来自父窗口的消息
@@ -39,7 +37,7 @@ export function activeMessageChannel() {
         (window as any).port = port
 
         // 向父窗口发送确认消息
-        window.parent.postMessage('port-received', '*')
+        // window.parent.postMessage('port-received', '*')
 
         // 通过端口发送就绪消息
         port.postMessage({