CI Bot
8f446eef08
CI/CD Pipeline / Validate Code Quality And Tests (push) Has been cancelled
CI/CD Pipeline / Frontend Lint (push) Has been cancelled
Deploy / Deploy Staging (push) Has been cancelled
Deploy / Build Production Runtime Images (push) Has been cancelled
Deploy / Deploy Production (push) Has been cancelled
Deploy / Production Browser E2E (push) Has been cancelled
封装 10 个 V21 设计系统基础组件，统一使用 CSS 变量： - Button: 6 种变体 (primary/secondary/ghost/text/danger/link) + 3 种尺寸 - Input: 支持 error 状态，含 Search/TextArea/Password 子组件 - Select: V21 圆角下拉样式 - Modal: 含 confirm/info/success/error/warning 快捷方法 - Table: V21 表格样式 - Card: 支持悬浮动效变体 - Tag/Badge: 5 种语义变体 (primary/success/warning/error/info) - Tooltip/Popover: V21 气泡样式 - Form: 支持 compact 紧凑模式 - Pagination: V21 分页样式 所有组件使用 CSS 变量（无硬编码值），支持暗色/亮色主题切换， 响应式布局适配移动端。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
/**
|
|
* V21 Modal 对话框
|
|
* 封装 Ant Design Modal，应用 V21 设计系统样式
|
|
*/
|
|
import React from "react";
|
|
import { Modal as AntModal } from "antd";
|
|
import type { ModalProps as AntModalProps } from "antd";
|
|
import type { ModalFuncProps } from "antd/es/modal";
|
|
import classNames from "classnames";
|
|
import "./ui.css";
|
|
|
|
export interface ModalProps extends AntModalProps {
|
|
/** 使用 V21 样式 */
|
|
v21?: boolean;
|
|
}
|
|
|
|
interface ModalComponent extends React.FC<ModalProps> {
|
|
confirm: (config: ModalFuncProps) => ReturnType<typeof AntModal.confirm>;
|
|
info: (config: ModalFuncProps) => ReturnType<typeof AntModal.info>;
|
|
success: (config: ModalFuncProps) => ReturnType<typeof AntModal.success>;
|
|
error: (config: ModalFuncProps) => ReturnType<typeof AntModal.error>;
|
|
warning: (config: ModalFuncProps) => ReturnType<typeof AntModal.warning>;
|
|
}
|
|
|
|
const Modal: ModalComponent = ({
|
|
className,
|
|
v21 = true,
|
|
children,
|
|
...rest
|
|
}) => {
|
|
const v21Class = classNames(v21 && "xx-modal", className);
|
|
return (
|
|
<AntModal className={v21Class} {...rest}>
|
|
{children}
|
|
</AntModal>
|
|
);
|
|
};
|
|
|
|
/** 确认对话框快捷方法 */
|
|
Modal.confirm = (config: ModalFuncProps) => {
|
|
return AntModal.confirm({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
});
|
|
};
|
|
|
|
Modal.info = (config: ModalFuncProps) => {
|
|
return AntModal.info({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
});
|
|
};
|
|
|
|
Modal.success = (config: ModalFuncProps) => {
|
|
return AntModal.success({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
});
|
|
};
|
|
|
|
Modal.error = (config: ModalFuncProps) => {
|
|
return AntModal.error({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
});
|
|
};
|
|
|
|
Modal.warning = (config: ModalFuncProps) => {
|
|
return AntModal.warning({
|
|
...config,
|
|
className: classNames("xx-modal-confirm", config.className),
|
|
});
|
|
};
|
|
|
|
export default Modal;
|