kdletters
7411b9a435
新增 PlatformReportDialog 公共可复制报告弹窗组件 将 PlatformErrorDialog 与 PlatformTaskCompletionDialog 改为薄包装 同步更新 PlatformUiKit 收口文档与团队决策记录
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import { useEffect, useMemo } from 'react';
|
||
|
||
import { CopyFeedbackButton } from './CopyFeedbackButton';
|
||
import { PlatformInfoBlock } from './PlatformInfoBlock';
|
||
import { UnifiedModal } from './UnifiedModal';
|
||
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 = 'platform-theme platform-theme--light !items-center',
|
||
panelClassName = 'platform-remap-surface 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 (
|
||
<UnifiedModal
|
||
open={open}
|
||
title={title}
|
||
onClose={onClose}
|
||
size="sm"
|
||
overlayClassName={overlayClassName}
|
||
panelClassName={panelClassName}
|
||
bodyClassName="space-y-3 px-4 py-4 sm:px-5 sm:py-5"
|
||
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}
|
||
</UnifiedModal>
|
||
);
|
||
}
|