hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-22 09:16:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 useChannel hook 用于基于 iframe 通信管理布局显示
- 实现 MessageChannel 工具类，用于父页面与 iframe 之间的安全跨域通信
- 更新 header-wrapper 组件，根据通道通信状态条件性渲染
- 在多个组件中集成消息通道功能
- 添加通过 postMessage API 控制布局的支持
- 改进 iframe 与父应用程序的集成
This commit is contained in:
Huangzhe
2025-05-07 16:42:28 +08:00
parent f2137d3104
commit f083b64dbd
13 changed files with 577 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/app-sidebar/index.tsx
View File

@@ -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'}
`}
>

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

@@ -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,7 +266,7 @@ 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'/>
{t('common.apiBasedExtension.link')}

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

@@ -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
name: string
form_schema?: CodeBasedExtensionItem['form_schema']
key: string;
name: string;
form_schema?: CodeBasedExtensionItem['form_schema'];
}
type ModerationSettingModalProps = {
data: ModerationConfig
onCancel: () => void
onSave: (moderationConfig: ModerationConfig) => void
data: ModerationConfig;
onCancel: () => 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 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 openaiProvider = modelProviders?.data.find(
item => item.provider === 'langgenius/openai/openai',
)
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 isOpenAIProviderConfigured = customOpenaiProvidersCanUse || systemOpenaiProviderCanUse
const customOpenaiProvidersCanUse
= 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 !== '')
prev.push(next.slice(0, 100))
if (next === '' && prev[prev.length - 1] !== '')
prev.push(next)
if (next !== '') prev.push(next.slice(0, 100))
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')
params.keywords = config?.keywords
if (type === '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) {
notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.condition') })
if (
!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') {
notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
if (
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') {
notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
if (
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
isShow
onClose={noop}
className='!mt-14 !w-[600px] !max-w-none !p-6'
>
<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>
<Modal isShow onClose={noop} className="!mt-14 !w-[600px] !max-w-none !p-6">
<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='py-2'>
<div className='text-sm font-medium leading-9 text-text-primary'>
<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="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'>
{
providers.map(provider => (
<div className="grid grid-cols-3 gap-2.5">
{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 && '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',
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
&& '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',
)}></div>
localeData.type === provider.key
&& 'border-[5px] border-components-radio-border-checked',
)}
></div>
{provider.name}
</div>
))
}
))}
</div>
{
!isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
<div className='mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2'>
<InfoCircle className='mr-1 h-4 w-4 text-[#F79009]' />
<div className='flex items-center text-xs font-medium text-gray-700'>
{!isLoading
&& !isOpenAIProviderConfigured
&& localeData.type === 'openai_moderation' && (
<div className="mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2">
<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'
onClick={handleOpenSettingsModal}
className="cursor-pointer text-primary-600"
onClick={() => showLayout && handleOpenSettingsModal}
>
&nbsp;{t('common.settings.provider')}&nbsp;
</span>
{t('appDebug.feature.moderation.modal.openaiNotConfig.after')}
</div>
</div>
)
}
)}
</div>
{
localeData.type === 'keywords' && (
<div className='py-2'>
<div className='mb-1 text-sm font-medium text-text-primary'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
<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'>
{localeData.type === 'keywords' && (
<div className="py-2">
<div className="mb-1 text-sm font-medium text-text-primary">
{t('appDebug.feature.moderation.modal.provider.keywords')}
</div>
<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'
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>
)
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')
|| ''
}
/>
<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' && (
<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>
(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>
)}
{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'
className='group flex items-center text-xs text-text-tertiary hover:text-primary-600'
target="_blank"
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: '' }}
onConfigChange={config => handleDataContentChange('inputs_config', config)}
info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
config={
localeData.config?.inputs_config || {
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: '' }}
onConfigChange={config => handleDataContentChange('outputs_config', config)}
info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
config={
localeData.config?.outputs_config || {
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='flex items-center justify-end'>
<Button
onClick={onCancel}
className='mr-2'
>
<div className="mb-8 mt-1 text-xs font-medium text-text-tertiary">
{t('appDebug.feature.moderation.modal.content.condition')}
</div>
<div className="flex items-center justify-end">
<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>

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

@@ -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,7 +106,7 @@ 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'/>
{t('common.apiBasedExtension.link')}

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

@@ -2,24 +2,20 @@ import type { FC } from 'react'
import { useState } from 'react'
import useSWR from 'swr'
import { useTranslation } from 'react-i18next'
import {
RiAddLine,
RiArrowDownSLine,
} from '@remixicon/react'
import { RiAddLine, RiArrowDownSLine } from '@remixicon/react'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import {
ArrowUpRight,
} from '@/app/components/base/icons/src/vender/line/arrows'
import { 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
onChange: (value: string) => void
value: string;
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 {
setShowAccountSettingModal,
setShowApiBasedExtensionModal,
} = useModalContext()
const { setShowAccountSettingModal, 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'>
{
currentItem
? (
<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='text-sm text-text-primary'>{currentItem.name}</div>
<div className='flex items-center'>
<div className='mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary'>
<PortalToFollowElemTrigger
onClick={() => setOpen(v => !v)}
className="w-full"
>
{currentItem ? (
<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="text-sm text-text-primary">{currentItem.name}</div>
<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]'>
<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='flex items-center justify-between px-3 pb-1 pt-2'>
<div className='text-xs font-medium text-text-tertiary'>
<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="p-1">
<div className="flex items-center justify-between px-3 pb-1 pt-2">
<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'>
{
data?.map(item => (
<div className="max-h-[250px] overflow-y-auto">
{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-xs text-text-tertiary'>{item.api_endpoint}</div>
</div>
))
}
<div className="text-sm text-text-primary">{item.name}</div>
<div className="text-xs text-text-tertiary">
{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>

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

@@ -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' })
}}>

8
web/app/components/header/header-wrapper.tsx
View File

@@ -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'))
// console.log('showHeader: ', showHeader)
// 通过 channel 获取 layout 数据内容
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' : '',
)}

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

@@ -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>
list: Plugin[]
searchText: string
tags: string[]
toolContentClassName?: string
disableMaxWidth?: boolean
wrapElemRef: React.RefObject<HTMLElement>;
list: Plugin[];
searchText: string;
tags: string[];
toolContentClassName?: string;
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'
className='flex items-center text-text-accent-light-mode-only'
target="_blank"
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
key={index}
payload={item}
onAction={noop}
/>
<Item 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'
className='system-sm-medium flex h-4 shrink-0 items-center text-text-accent-light-mode-only'
target="_blank"
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>

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

@@ -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[]
onFormChange: (form: DefaultValueForm) => void
forms: DefaultValueForm[];
onFormChange: (form: DefaultValueForm) => void;
}
const DefaultValue = ({
forms,
onFormChange,
}: DefaultValueProps) => {
const DefaultValue = ({ 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='body-xs-regular mb-2 text-text-tertiary'>
<div className="px-4 pt-2">
<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'
target='_blank'
className='text-text-accent'
href="https://docs.dify.ai/guides/workflow/error-handling"
target="_blank"
className={`text-text-accent ${showLayout ? '' : 'hidden'}`}
>
{t('workflow.common.learnMore')}
</a>
</div>
<div className='space-y-1'>
{
forms.map((form, index) => {
<div className="space-y-1">
{forms.map((form, index) => {
return (
<div
key={index}
className='py-1'
>
<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 key={index} className="py-1">
<div className="mb-1 flex items-center">
<div className="system-sm-medium mr-1 text-text-primary">
{form.key}
</div>
{
(form.type === VarType.string || form.type === VarType.number) && (
<div className="system-xs-regular text-text-tertiary">
{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>
)

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

@@ -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='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'>
<RiMindMap className='h-5 w-5 text-text-tertiary' />
<div className="px-4 pt-2">
<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">
<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'
target='_blank'
className='text-text-accent'
href="https://docs.dify.ai/guides/workflow/error-handling"
target="_blank"
className={`text-text-accent ${showLayout ? '' : 'hidden'}`}
>
{t('workflow.common.learnMore')}
</a>

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

@@ -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 = ({
nodeType,
}: HelpLinkProps) => {
const HelpLink = ({ nodeType }: HelpLinkProps) => {
const { t } = useTranslation()
const link = useNodeHelpLink(nodeType)
// 通过 channel 获取 layout 数据内容
const showLayout = useGetLayoutByChannel()
if (!link)
return null
if (!link) return null
return (
<TooltipPlus
popupContent={t('common.userProfile.helpCenter')}
>
<TooltipPlus popupContent={t('common.userProfile.helpCenter')}>
<a
href={link}
target='_blank'
className='mr-1 flex h-6 w-6 items-center justify-center'
target="_blank"
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>
)
}

41
web/hooks/use-channel.ts Normal file
View File

@@ -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
}

10
web/utils/message-channel.ts
View File

@@ -9,12 +9,10 @@ export function activeMessageChannel() {
// 检查是否在 iframe 中
const isInIframe = window !== window.parent
if (!isInIframe) return
if (!isInIframe) {
console.log('不在 iframe 中，无需激活消息通道')
return
}
// 检测是否已经存在 MessageChannel
if (window.port as MessagePort) 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({