fix: Modal 组件默认居中 + 4 个弹窗统一使用 Modal 封装 #1325
@@ -22,10 +22,10 @@ interface ModalComponent extends React.FC<ModalProps> {
|
||||
warning: (config: ModalFuncProps) => ReturnType<typeof AntModal.warning>
|
||||
}
|
||||
|
||||
const Modal: ModalComponent = ({ className, v21 = true, children, ...rest }) => {
|
||||
const Modal: ModalComponent = ({ className, v21 = true, centered = true, children, ...rest }) => {
|
||||
const v21Class = classNames(v21 && "xx-modal", className)
|
||||
return (
|
||||
<AntModal className={v21Class} {...rest}>
|
||||
<AntModal className={v21Class} centered={centered} {...rest}>
|
||||
{children}
|
||||
</AntModal>
|
||||
)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from "react"
|
||||
import { Modal as AntModal, Select as AntSelect } from "antd"
|
||||
import { Select as AntSelect } from "antd"
|
||||
import Modal from "@/components/ui/Modal"
|
||||
import { CATEGORY_OPTIONS } from "@/pages/assets/constants"
|
||||
|
||||
/* ============================================================
|
||||
@@ -24,7 +25,7 @@ const BatchClassifyModal: React.FC<BatchClassifyModalProps> = ({
|
||||
onCategoryChange,
|
||||
confirmLoading,
|
||||
}) => (
|
||||
<AntModal
|
||||
<Modal
|
||||
title={`批量改分类(${selectedCount} 个素材)`}
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
@@ -43,7 +44,7 @@ const BatchClassifyModal: React.FC<BatchClassifyModalProps> = ({
|
||||
options={CATEGORY_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
</AntModal>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
export default BatchClassifyModal
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react"
|
||||
import { Modal as AntModal } from "antd"
|
||||
import Modal from "@/components/ui/Modal"
|
||||
import type { AssetItem } from "@/pages/assets/types"
|
||||
|
||||
/* ============================================================
|
||||
@@ -12,7 +12,7 @@ export interface PlayModalProps {
|
||||
}
|
||||
|
||||
const PlayModal: React.FC<PlayModalProps> = ({ open, asset, onClose }) => (
|
||||
<AntModal
|
||||
<Modal
|
||||
title={asset?.name ?? "播放"}
|
||||
open={open}
|
||||
onCancel={onClose}
|
||||
@@ -28,7 +28,7 @@ const PlayModal: React.FC<PlayModalProps> = ({ open, asset, onClose }) => (
|
||||
<p className="xx-asset-empty-fallback-id">素材 ID: {asset?.id}</p>
|
||||
</div>
|
||||
)}
|
||||
</AntModal>
|
||||
</Modal>
|
||||
)
|
||||
|
||||
export default PlayModal
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react"
|
||||
import { Modal as AntModal } from "antd"
|
||||
import Modal from "@/components/ui/Modal"
|
||||
import { CopyOutlined, CheckOutlined } from "@ant-design/icons"
|
||||
import { Button, Input } from "@/components/ui"
|
||||
import { AI_KEYWORD_MAX_LENGTH } from "../../constants/titleLibrary"
|
||||
@@ -28,7 +28,7 @@ export const AIGenerateModal: React.FC<AIGenerateModalProps> = ({
|
||||
onAdopt,
|
||||
}) => {
|
||||
return (
|
||||
<AntModal
|
||||
<Modal
|
||||
title="AI 生成标题"
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
@@ -116,6 +116,6 @@ export const AIGenerateModal: React.FC<AIGenerateModalProps> = ({
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AntModal>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from "react"
|
||||
import { Modal as AntModal } from "antd"
|
||||
import Modal from "@/components/ui/Modal"
|
||||
import { Input, Select } from "@/components/ui"
|
||||
import type { TitleType } from "../../types/titleLibrary"
|
||||
import { TITLE_MAX_LENGTH } from "../../constants/titleLibrary"
|
||||
@@ -30,7 +30,7 @@ export const CreateTitleModal: React.FC<CreateTitleModalProps> = ({
|
||||
onSubmit,
|
||||
}) => {
|
||||
return (
|
||||
<AntModal
|
||||
<Modal
|
||||
title="新建标题"
|
||||
open={open}
|
||||
onCancel={onCancel}
|
||||
@@ -84,6 +84,6 @@ export const CreateTitleModal: React.FC<CreateTitleModalProps> = ({
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</AntModal>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user