feat: update main chat and system chat UI
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import { CloseOutlined, MinusOutlined } from '@ant-design/icons';
|
||||
import { Button, Modal } from 'antd';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
import './FullscreenPreviewModal.css';
|
||||
|
||||
type FullscreenPreviewModalProps = {
|
||||
@@ -8,8 +8,17 @@ type FullscreenPreviewModalProps = {
|
||||
title?: ReactNode;
|
||||
meta?: ReactNode;
|
||||
actions?: ReactNode;
|
||||
hideHeader?: boolean;
|
||||
className?: string;
|
||||
contentClassName?: string;
|
||||
fillContent?: boolean;
|
||||
modalStyle?: CSSProperties;
|
||||
shellStyle?: CSSProperties;
|
||||
zIndex?: number;
|
||||
getContainer?: HTMLElement | (() => HTMLElement) | false;
|
||||
maskClosable?: boolean;
|
||||
minimizeLabel?: string;
|
||||
onMinimize?: (() => void) | null;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
};
|
||||
@@ -19,8 +28,17 @@ export function FullscreenPreviewModal({
|
||||
title,
|
||||
meta,
|
||||
actions,
|
||||
hideHeader = false,
|
||||
className,
|
||||
contentClassName,
|
||||
fillContent = false,
|
||||
modalStyle,
|
||||
shellStyle,
|
||||
zIndex = 1400,
|
||||
getContainer,
|
||||
maskClosable = true,
|
||||
minimizeLabel = '최소화',
|
||||
onMinimize,
|
||||
onClose,
|
||||
children,
|
||||
}: FullscreenPreviewModalProps) {
|
||||
@@ -30,27 +48,53 @@ export function FullscreenPreviewModal({
|
||||
footer={null}
|
||||
title={null}
|
||||
width="100vw"
|
||||
style={modalStyle}
|
||||
zIndex={zIndex}
|
||||
getContainer={getContainer}
|
||||
maskClosable={maskClosable}
|
||||
onCancel={onClose}
|
||||
className={['fullscreen-preview-modal', className ?? ''].filter(Boolean).join(' ')}
|
||||
>
|
||||
<div className="fullscreen-preview-modal__shell">
|
||||
<div className="fullscreen-preview-modal__header">
|
||||
<div className="fullscreen-preview-modal__title-group">
|
||||
{title ? <div className="fullscreen-preview-modal__title">{title}</div> : null}
|
||||
{meta ? <div className="fullscreen-preview-modal__meta">{meta}</div> : null}
|
||||
</div>
|
||||
<div className="fullscreen-preview-modal__actions">
|
||||
{actions}
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button"
|
||||
aria-label="닫기"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="fullscreen-preview-modal__shell" style={shellStyle}>
|
||||
{hideHeader ? null : (
|
||||
<div className="fullscreen-preview-modal__header">
|
||||
<div className="fullscreen-preview-modal__title-group">
|
||||
{title ? <div className="fullscreen-preview-modal__title">{title}</div> : null}
|
||||
{meta ? <div className="fullscreen-preview-modal__meta">{meta}</div> : null}
|
||||
</div>
|
||||
<div className="fullscreen-preview-modal__actions">
|
||||
{actions}
|
||||
{onMinimize ? (
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button fullscreen-preview-modal__minimize-button"
|
||||
aria-label={minimizeLabel}
|
||||
onClick={onMinimize}
|
||||
>
|
||||
<MinusOutlined aria-hidden="true" />
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
type="text"
|
||||
className="fullscreen-preview-modal__icon-button fullscreen-preview-modal__close-button"
|
||||
aria-label="닫기"
|
||||
icon={<CloseOutlined />}
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={[
|
||||
'fullscreen-preview-modal__content',
|
||||
fillContent ? 'fullscreen-preview-modal__content--fill' : '',
|
||||
contentClassName ?? '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
<div className={['fullscreen-preview-modal__content', contentClassName ?? ''].filter(Boolean).join(' ')}>{children}</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user