k88936
e6b3199490
之前遇到几次弹窗的样式不生效,bug 现在在画布agent的删除对话弹窗又出现了, 这个pr把类似的修改集中到最下层的UnifiedModal,适用于所有的modal, 一些特殊的modal有特殊处理. 画布agent的删除对话弹窗  --------- Co-authored-by: 段舒康 <kdletters@qq.com> Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/122 Reviewed-by: 段舒康 <kdletters@qq.com> Co-authored-by: 王德宇 <kvtodev@outlook.com> Co-committed-by: 王德宇 <kvtodev@outlook.com>
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import { useEffect, useMemo } from 'react';
|
||
|
||
import { CopyFeedbackButton } from './CopyFeedbackButton';
|
||
import { PlatformInfoBlock } from './PlatformInfoBlock';
|
||
import { PlatformUtilityInfoModal } from './PlatformUtilityInfoModal';
|
||
import { useCopyFeedback } from './useCopyFeedback';
|
||
|
||
export type PlatformReportDialogField = {
|
||
label: string;
|
||
value: string;
|
||
multiline?: boolean;
|
||
};
|
||
|
||
type PlatformReportDialogProps = {
|
||
open: boolean;
|
||
title: string;
|
||
onClose: () => void;
|
||
copyIdleLabel: string;
|
||
fields: readonly PlatformReportDialogField[];
|
||
overlayClassName?: string;
|
||
panelClassName?: string;
|
||
};
|
||
|
||
function buildPlatformReportText(fields: readonly PlatformReportDialogField[]) {
|
||
return fields.map((field) => `${field.label}：${field.value}`).join('\n');
|
||
}
|
||
|
||
export function PlatformReportDialog({
|
||
open,
|
||
title,
|
||
onClose,
|
||
copyIdleLabel,
|
||
fields,
|
||
overlayClassName,
|
||
panelClassName = 'rounded-[1.5rem]',
|
||
}: PlatformReportDialogProps) {
|
||
const { copyState, copyText, resetCopyState } = useCopyFeedback();
|
||
const reportText = useMemo(() => buildPlatformReportText(fields), [fields]);
|
||
|
||
useEffect(() => {
|
||
resetCopyState();
|
||
}, [open, reportText, resetCopyState]);
|
||
|
||
const copyReport = () => {
|
||
if (!reportText) {
|
||
return;
|
||
}
|
||
|
||
void copyText(reportText);
|
||
};
|
||
|
||
return (
|
||
<PlatformUtilityInfoModal
|
||
open={open}
|
||
title={title}
|
||
onClose={onClose}
|
||
// 报告中的二维码 / 扫码区固定使用浅色背景，保证对比度和识别率。
|
||
platformTheme="light"
|
||
overlayClassName={overlayClassName}
|
||
panelClassName={panelClassName}
|
||
bodyClassName="space-y-3"
|
||
footerClassName="justify-end px-4 py-4 sm:px-5"
|
||
footer={
|
||
<CopyFeedbackButton
|
||
state={copyState}
|
||
onClick={copyReport}
|
||
disabled={!reportText}
|
||
idleLabel={copyIdleLabel}
|
||
actionSurface="platform"
|
||
actionFullWidth
|
||
className="sm:w-auto"
|
||
/>
|
||
}
|
||
>
|
||
{open
|
||
? fields.map((field) => (
|
||
<PlatformInfoBlock
|
||
key={`${field.label}-${field.value}`}
|
||
label={field.label}
|
||
multiline={field.multiline}
|
||
>
|
||
{field.value}
|
||
</PlatformInfoBlock>
|
||
))
|
||
: null}
|
||
</PlatformUtilityInfoModal>
|
||
);
|
||
}
|