|
|
@@ -16,8 +16,10 @@ import { useNavigate } from 'react-router-dom';
|
|
|
|
|
|
import multiColorIcon from '@/assets/iconify/multi-color/logo.svg';
|
|
|
import singleColorIcon from '@/assets/iconify/single-color/home.svg';
|
|
|
+import infoIcon from '@/assets/iconify/single-color/info.svg';
|
|
|
import LanguageSwitch from '@/components/LanguageSwitch';
|
|
|
import { reportEvent } from '@/firebase';
|
|
|
+import { dialogModel } from '@/models/dialogModel';
|
|
|
import { userModel } from '@/models/userModel';
|
|
|
import { fetchLogin } from '@/services/login';
|
|
|
import { createLocalTools } from '@/utils/localUtils';
|
|
|
@@ -28,6 +30,7 @@ const Home: React.FC = () => {
|
|
|
const { t, i18n } = useTranslation();
|
|
|
const navigate = useNavigate();
|
|
|
const user = userModel.useModel();
|
|
|
+ const { openDialog, closeDialog } = dialogModel.useModel();
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
const [loginStatus, setLoginStatus] = useState<string>('');
|
|
|
const [storageStatus, setStorageStatus] = useState<string>('');
|
|
|
@@ -126,8 +129,158 @@ const Home: React.FC = () => {
|
|
|
i18n.changeLanguage(lang);
|
|
|
};
|
|
|
|
|
|
+ // 对话框演示 - 单个按钮
|
|
|
+ const handleOpenSingleButtonDialog = () => {
|
|
|
+ openDialog({
|
|
|
+ icon: infoIcon,
|
|
|
+ title: 'Payment Failure',
|
|
|
+ content: 'Oops! Your transaction failed due to some errors, please try again.',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'OK',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 对话框演示 - 两个按钮
|
|
|
+ const handleOpenTwoButtonDialog = () => {
|
|
|
+ openDialog({
|
|
|
+ icon: infoIcon,
|
|
|
+ title: 'Payment verification',
|
|
|
+ content:
|
|
|
+ 'Orders are being verified, if there is no response for a long time, please contact customer service if you have any questions!',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'Cancel',
|
|
|
+ variant: 'secondary',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Contact us',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 对话框演示 - 无图标
|
|
|
+ const handleOpenNoIconDialog = () => {
|
|
|
+ openDialog({
|
|
|
+ title: 'Simple Dialog',
|
|
|
+ content: 'This is a dialog without an icon.',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'Close',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 对话框演示 - 自定义内容
|
|
|
+ const handleOpenCustomContentDialog = () => {
|
|
|
+ openDialog({
|
|
|
+ icon: infoIcon,
|
|
|
+ title: (
|
|
|
+ <span>
|
|
|
+ Custom <strong>Title</strong>
|
|
|
+ </span>
|
|
|
+ ),
|
|
|
+ content: (
|
|
|
+ <div>
|
|
|
+ <p>This dialog has custom ReactNode content.</p>
|
|
|
+ <ul className="list-disc list-inside mt-2">
|
|
|
+ <li>Feature 1</li>
|
|
|
+ <li>Feature 2</li>
|
|
|
+ <li>Feature 3</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'Got it',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 对话框演示 - 禁止点击遮罩层关闭
|
|
|
+ const handleOpenNonClosableDialog = () => {
|
|
|
+ openDialog({
|
|
|
+ icon: infoIcon,
|
|
|
+ title: 'Important Notice',
|
|
|
+ content: 'This dialog cannot be closed by clicking the mask. You must click the button to close it.',
|
|
|
+ maskClosable: false,
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'I Understand',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ // 对话框演示 - 嵌套对话框
|
|
|
+ const handleOpenNestedDialog = () => {
|
|
|
+ openDialog({
|
|
|
+ icon: infoIcon,
|
|
|
+ title: 'First Dialog',
|
|
|
+ content: 'This is the first dialog. Click the button below to open a nested dialog.',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'Open Nested Dialog',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ openDialog({
|
|
|
+ icon: infoIcon,
|
|
|
+ title: 'Nested Dialog',
|
|
|
+ content: 'This is a nested dialog opened from the first dialog. Notice how the z-index is automatically managed.',
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ label: 'Close Nested',
|
|
|
+ variant: 'secondary',
|
|
|
+ onClick: (_event, nestedId) => {
|
|
|
+ closeDialog(nestedId);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Close All',
|
|
|
+ onClick: (_event, nestedId) => {
|
|
|
+ closeDialog(nestedId);
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: 'Close First',
|
|
|
+ variant: 'secondary',
|
|
|
+ onClick: (_event, id) => {
|
|
|
+ closeDialog(id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
return (
|
|
|
- <div className="max-w-4xl mx-auto p-4">
|
|
|
+ <div className="max-w-[1000px] mx-auto p-4">
|
|
|
<div className="flex justify-between items-center mb-6">
|
|
|
<h1 className="text-3xl font-bold text-gray-900">{t('pages.home.title')}</h1>
|
|
|
<LanguageSwitch />
|
|
|
@@ -304,6 +457,44 @@ const Home: React.FC = () => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</Card>
|
|
|
+
|
|
|
+ {/* 对话框演示卡片 */}
|
|
|
+ <Card className="mb-6">
|
|
|
+ <Title level={3}>对话框演示</Title>
|
|
|
+ <div className="space-y-4">
|
|
|
+ <div>
|
|
|
+ <Title level={4}>Dialog 组件示例</Title>
|
|
|
+ <Space wrap>
|
|
|
+ <Button type="primary" onClick={handleOpenSingleButtonDialog}>
|
|
|
+ 单个按钮对话框
|
|
|
+ </Button>
|
|
|
+ <Button type="primary" onClick={handleOpenTwoButtonDialog}>
|
|
|
+ 两个按钮对话框
|
|
|
+ </Button>
|
|
|
+ <Button onClick={handleOpenNoIconDialog}>无图标对话框</Button>
|
|
|
+ <Button onClick={handleOpenCustomContentDialog}>
|
|
|
+ 自定义内容对话框
|
|
|
+ </Button>
|
|
|
+ <Button onClick={handleOpenNonClosableDialog}>
|
|
|
+ 禁止遮罩关闭对话框
|
|
|
+ </Button>
|
|
|
+ <Button onClick={handleOpenNestedDialog}>嵌套对话框</Button>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <Title level={5}>使用说明</Title>
|
|
|
+ <ul className="list-disc list-inside space-y-1 text-gray-600">
|
|
|
+ <li>通过 dialogModel.openDialog() 打开对话框</li>
|
|
|
+ <li>openDialog 返回对话框 id，可用于后续关闭</li>
|
|
|
+ <li>按钮的 onClick 接收 (event, dialogId) 两个参数</li>
|
|
|
+ <li>默认情况下，点击遮罩层可以关闭对话框</li>
|
|
|
+ <li>设置 maskClosable: false 可禁止点击遮罩层关闭</li>
|
|
|
+ <li>支持嵌套对话框，z-index 自动管理</li>
|
|
|
+ <li>支持图标、标题、内容的自定义</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
BaiLuoYan
