feat: 调整功能演示页面路由

src/locales/en-US/menus.ts

@@ -3,6 +3,8 @@ export default {
     ['500']: '500',
     ['404']: '404',
     ['home']: 'Home',
+    // 以下是 框架功能演示 页面的路由名称
+    ['featureDemo']: 'Feature Demo',
     ['routeDemo']: 'Route Demo',
     ['test']: 'Test',
     ['test.test1']: 'Test 1',

src/locales/en-US/pages.ts

@@ -17,8 +17,9 @@ export default {
         },
     },
 
-    home: {
-        title: 'Home',
+    // 以下是 框架功能演示 页面的翻译
+    featureDemo: {
+        title: 'Feature Demo',
         description: 'This is an example page using Ant Design and Tailwind CSS',
         features: {
             title: 'Key Features',

src/locales/fa-IR/menus.ts

@@ -3,6 +3,8 @@ export default {
     ['500']: '500',
     ['404']: '404',
     ['home']: 'صفحه اصلی',
+    // 以下是 框架功能演示 页面的路由名称
+    ['featureDemo']: 'نمایش ویژگی',
     ['routeDemo']: 'نمایش مسیر',
     ['test']: 'تست',
     ['test.test1']: 'تست 1',

src/locales/fa-IR/pages.ts

@@ -17,8 +17,9 @@ export default {
         },
     },
 
-    home: {
-        title: 'صفحه اصلی',
+    // 以下是 框架功能演示 页面的翻译
+    featureDemo: {
+        title: 'نمایش ویژگی',
         description: 'این یک صفحه نمونه با استفاده از Ant Design و Tailwind CSS است',
         features: {
             title: 'ویژگی‌های کلیدی',

src/pages/featureDemo/index.tsx

@@ -0,0 +1,520 @@
+import React, { useEffect, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import mdiAccount from '@iconify-icons/mdi/account';
+import mdiBell from '@iconify-icons/mdi/bell';
+import mdiHeart from '@iconify-icons/mdi/heart';
+import mdiHome from '@iconify-icons/mdi/home';
+import mdiLoading from '@iconify-icons/mdi/loading';
+import mdiSettings from '@iconify-icons/mdi/settings';
+import Button from 'antd/es/button';
+import Card from 'antd/es/card';
+import Space from 'antd/es/space';
+import Typography from 'antd/es/typography';
+import { useTranslation } from 'react-i18next';
+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';
+
+const { Title, Paragraph } = Typography;
+
+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>('');
+
+    useEffect(() => {
+        console.log('✅ home组件挂载：componentDidMount');
+        reportEvent('homePage_show');
+        return () => {
+            console.log('❌ home组件卸载：componentWillUnmount');
+            reportEvent('homePage_hide');
+        };
+    }, []);
+
+    // 创建加密存储工具实例
+    const encryptedLs = createLocalTools({
+        encryptKey: true,
+        encryptData: true,
+    });
+
+    // 创建明文存储工具实例
+    const plainLs = createLocalTools({
+        encryptKey: false,
+        encryptData: false,
+    });
+
+    // 演示加密存储 - 添加数据
+    const handleEncryptedStorageAdd = () => {
+        encryptedLs.setLocal('encryptedData', { name: '加密数据', timestamp: Date.now() });
+        setStorageStatus('加密数据添加成功');
+    };
+
+    // 演示加密存储 - 获取数据
+    const handleEncryptedStorageGet = () => {
+        const data = encryptedLs.getLocal<{ name: string; timestamp: number }>('encryptedData');
+        setStorageStatus(`获取加密数据: ${JSON.stringify(data)}`);
+    };
+
+    // 演示加密存储 - 删除数据
+    const handleEncryptedStorageRemove = () => {
+        encryptedLs.removeLocal('encryptedData');
+        setStorageStatus('加密数据删除成功');
+    };
+
+    // 演示明文存储 - 添加数据
+    const handlePlainStorageAdd = () => {
+        plainLs.setLocal('plainData', { name: '明文数据', timestamp: Date.now() });
+        setStorageStatus('明文数据添加成功');
+    };
+
+    // 演示明文存储 - 获取数据
+    const handlePlainStorageGet = () => {
+        const data = plainLs.getLocal<{ name: string; timestamp: number }>('plainData');
+        setStorageStatus(`获取明文数据: ${JSON.stringify(data)}`);
+    };
+
+    // 演示明文存储 - 删除数据
+    const handlePlainStorageRemove = () => {
+        plainLs.removeLocal('plainData');
+        setStorageStatus('明文数据删除成功');
+    };
+
+    // 演示清除所有数据
+    const handleStorageClear = () => {
+        encryptedLs.clearLocal();
+        plainLs.clearLocal();
+        setStorageStatus('所有数据清除成功');
+    };
+
+    // 演示网络请求
+    const handleLoginDemo = async () => {
+        setLoading(true);
+        try {
+            const result = await fetchLogin({
+                username: 'test',
+                password: '123456',
+                captchaId: 'test-captcha',
+                captchaCode: '1234',
+            });
+            setLoginStatus('登录成功');
+            console.log('登录结果:', result);
+        } catch (error) {
+            setLoginStatus('登录失败');
+            console.error('登录错误:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 演示路由跳转
+    const handleNavigation = (path: string) => {
+        navigate(path);
+    };
+
+    // 切换语言
+    const handleLanguageChange = (lang: string) => {
+        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-[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.featureDemo.title')}</h1>
+                <LanguageSwitch />
+            </div>
+
+            {/* 多语言演示卡片 */}
+            <Card className="mb-6">
+                <Title level={3}>多语言演示</Title>
+                <div className="space-y-4">
+                    <p className="text-gray-600">{t('pages.featureDemo.description')}</p>
+                    <Space>
+                        <Button onClick={() => handleLanguageChange('en-US')}>English</Button>
+                        <Button onClick={() => handleLanguageChange('fa-IR')}>فارسی</Button>
+                    </Space>
+                    <div className="space-y-2">
+                        <p className="text-gray-600">{t('pages.featureDemo.features.title')}</p>
+                        <ul className="list-disc list-inside space-y-1 text-gray-600">
+                            <li>{t('pages.featureDemo.features.antd')}</li>
+                            <li>{t('pages.featureDemo.features.tailwind')}</li>
+                            <li>{t('pages.featureDemo.features.i18n')}</li>
+                        </ul>
+                    </div>
+                </div>
+            </Card>
+
+            {/* Model 状态示例卡片 */}
+            <Card className="mb-6">
+                <Title level={3}>Model 状态示例</Title>
+                <div className="space-y-4">
+                    <Paragraph className="text-gray-600">
+                        这个页面可以访问到用户信息，并演示 Model 状态管理：
+                    </Paragraph>
+                    <Paragraph className="text-gray-600">姓名：{user.name}</Paragraph>
+                    <Paragraph className="text-gray-600">年龄：{user.age}</Paragraph>
+                    <Space wrap className="mt-4">
+                        <Button
+                            onClick={() => {
+                                const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
+                                const randomName = names[Math.floor(Math.random() * names.length)];
+                                user.updateName(randomName);
+                            }}
+                        >
+                            修改名字
+                        </Button>
+                        <Button
+                            onClick={() => {
+                                const randomAge = Math.floor(Math.random() * 50) + 18;
+                                user.updateAge(randomAge);
+                            }}
+                        >
+                            修改年龄
+                        </Button>
+                        <Button onClick={user.incrementAge}>年龄+1</Button>
+                    </Space>
+                </div>
+            </Card>
+
+            {/* 功能演示卡片 */}
+            <Card className="mb-6">
+                <Title level={3}>功能演示</Title>
+                <div className="space-y-4">
+                    <div>
+                        <Title level={4}>本地存储演示</Title>
+                        <div className="space-y-4">
+                            <div>
+                                <Title level={5}>加密存储</Title>
+                                <Space wrap>
+                                    <Button onClick={handleEncryptedStorageAdd}>
+                                        添加加密数据
+                                    </Button>
+                                    <Button onClick={handleEncryptedStorageGet}>
+                                        获取加密数据
+                                    </Button>
+                                    <Button onClick={handleEncryptedStorageRemove}>
+                                        删除加密数据
+                                    </Button>
+                                </Space>
+                            </div>
+                            <div>
+                                <Title level={5}>明文存储</Title>
+                                <Space wrap>
+                                    <Button onClick={handlePlainStorageAdd}>添加明文数据</Button>
+                                    <Button onClick={handlePlainStorageGet}>获取明文数据</Button>
+                                    <Button onClick={handlePlainStorageRemove}>删除明文数据</Button>
+                                </Space>
+                            </div>
+                            <div>
+                                <Button danger onClick={handleStorageClear}>
+                                    清除所有数据
+                                </Button>
+                            </div>
+                        </div>
+                        {storageStatus && <p className="mt-2 text-gray-600">{storageStatus}</p>}
+                    </div>
+
+                    <div>
+                        <Title level={4}>网络请求演示</Title>
+                        <Space>
+                            <Button type="primary" onClick={handleLoginDemo} loading={loading}>
+                                测试登录
+                            </Button>
+                            {loginStatus && <span className="text-gray-600">{loginStatus}</span>}
+                        </Space>
+                    </div>
+
+                    <div>
+                        <Title level={4}>路由跳转演示</Title>
+                        <Space>
+                            <Button onClick={() => handleNavigation('/route-demo')}>
+                                路由示例
+                            </Button>
+                        </Space>
+                    </div>
+                </div>
+            </Card>
+
+            {/* 图标演示卡片 */}
+            <Card className="mb-6">
+                <Title level={3}>图标演示</Title>
+                <div className="space-y-6">
+                    <div>
+                        <Title level={4}>离线图标</Title>
+                        <Space wrap>
+                            <Button icon={<Icon icon={mdiHome} />}>首页</Button>
+                            <Button icon={<Icon icon={mdiAccount} />}>用户</Button>
+                            <Button icon={<Icon icon={mdiSettings} />}>设置</Button>
+                            <Button icon={<Icon icon={mdiBell} />}>通知</Button>
+                            <Button icon={<Icon icon={mdiHeart} />}>收藏</Button>
+                        </Space>
+                    </div>
+
+                    <div>
+                        <Title level={4}>在线图标</Title>
+                        <Space wrap>
+                            <Button icon={<Icon icon="ri:home-line" />}>首页</Button>
+                            <Button icon={<Icon icon="ri:user-line" />}>用户</Button>
+                            <Button icon={<Icon icon="ri:settings-line" />}>设置</Button>
+                            <Button icon={<Icon icon="ri:notification-line" />}>通知</Button>
+                            <Button icon={<Icon icon="ri:heart-line" />}>收藏</Button>
+                        </Space>
+                    </div>
+
+                    <div>
+                        <Title level={4}>自定义图标</Title>
+                        <Space>
+                            <Icon
+                                icon={singleColorIcon}
+                                className="w-[40px] h-[40px] text-red-500"
+                            />
+                            <Icon icon={multiColorIcon} className="w-[40px] h-[40px]" />
+                        </Space>
+                    </div>
+
+                    <div>
+                        <Title level={4}>动画图标</Title>
+                        <Space>
+                            <Icon icon={mdiLoading} className="animate-spin" />
+                            <Icon icon={mdiHeart} className="animate-bounce" />
+                            <Icon icon={mdiBell} className="animate-pulse" />
+                        </Space>
+                    </div>
+                </div>
+            </Card>
+
+            {/* 样式演示卡片 */}
+            <Card className="mb-6">
+                <Title level={3}>样式演示</Title>
+                <div className="space-y-4">
+                    <div>
+                        <Title level={4}>Tailwind CSS 样式</Title>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                            <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
+                                响应式卡片 1
+                            </div>
+                            <div className="bg-green-500 text-white p-4 rounded-lg shadow-md">
+                                响应式卡片 2
+                            </div>
+                            <div className="bg-purple-500 text-white p-4 rounded-lg shadow-md">
+                                响应式卡片 3
+                            </div>
+                        </div>
+                    </div>
+
+                    <div>
+                        <Title level={4}>Ant Design 组件</Title>
+                        <Space wrap>
+                            <Button type="primary">主要按钮</Button>
+                            <Button>默认按钮</Button>
+                            <Button type="dashed">虚线按钮</Button>
+                            <Button type="link">链接按钮</Button>
+                        </Space>
+                    </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>
+    );
+};
+
+export default Home;

src/pages/home/index.tsx

@@ -1,500 +1,7 @@
-import React, { useEffect, useState } from 'react';
-
-import { Icon } from '@iconify/react';
-import mdiAccount from '@iconify-icons/mdi/account';
-import mdiBell from '@iconify-icons/mdi/bell';
-import mdiHeart from '@iconify-icons/mdi/heart';
-import mdiHome from '@iconify-icons/mdi/home';
-import mdiLoading from '@iconify-icons/mdi/loading';
-import mdiSettings from '@iconify-icons/mdi/settings';
-import Button from 'antd/es/button';
-import Card from 'antd/es/card';
-import Space from 'antd/es/space';
-import Typography from 'antd/es/typography';
-import { useTranslation } from 'react-i18next';
-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';
-
-const { Title } = Typography;
-
 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>('');
-
-    useEffect(() => {
-        console.log('✅ home组件挂载：componentDidMount');
-        reportEvent('homePage_show');
-        return () => {
-            console.log('❌ home组件卸载：componentWillUnmount');
-            reportEvent('homePage_hide');
-        };
-    }, []);
-
-    // 创建加密存储工具实例
-    const encryptedLs = createLocalTools({
-        encryptKey: true,
-        encryptData: true,
-    });
-
-    // 创建明文存储工具实例
-    const plainLs = createLocalTools({
-        encryptKey: false,
-        encryptData: false,
-    });
-
-    // 演示加密存储 - 添加数据
-    const handleEncryptedStorageAdd = () => {
-        encryptedLs.setLocal('encryptedData', { name: '加密数据', timestamp: Date.now() });
-        setStorageStatus('加密数据添加成功');
-    };
-
-    // 演示加密存储 - 获取数据
-    const handleEncryptedStorageGet = () => {
-        const data = encryptedLs.getLocal<{ name: string; timestamp: number }>('encryptedData');
-        setStorageStatus(`获取加密数据: ${JSON.stringify(data)}`);
-    };
-
-    // 演示加密存储 - 删除数据
-    const handleEncryptedStorageRemove = () => {
-        encryptedLs.removeLocal('encryptedData');
-        setStorageStatus('加密数据删除成功');
-    };
-
-    // 演示明文存储 - 添加数据
-    const handlePlainStorageAdd = () => {
-        plainLs.setLocal('plainData', { name: '明文数据', timestamp: Date.now() });
-        setStorageStatus('明文数据添加成功');
-    };
-
-    // 演示明文存储 - 获取数据
-    const handlePlainStorageGet = () => {
-        const data = plainLs.getLocal<{ name: string; timestamp: number }>('plainData');
-        setStorageStatus(`获取明文数据: ${JSON.stringify(data)}`);
-    };
-
-    // 演示明文存储 - 删除数据
-    const handlePlainStorageRemove = () => {
-        plainLs.removeLocal('plainData');
-        setStorageStatus('明文数据删除成功');
-    };
-
-    // 演示清除所有数据
-    const handleStorageClear = () => {
-        encryptedLs.clearLocal();
-        plainLs.clearLocal();
-        setStorageStatus('所有数据清除成功');
-    };
-
-    // 演示网络请求
-    const handleLoginDemo = async () => {
-        setLoading(true);
-        try {
-            const result = await fetchLogin({
-                username: 'test',
-                password: '123456',
-                captchaId: 'test-captcha',
-                captchaCode: '1234',
-            });
-            setLoginStatus('登录成功');
-            console.log('登录结果:', result);
-        } catch (error) {
-            setLoginStatus('登录失败');
-            console.error('登录错误:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    // 演示路由跳转
-    const handleNavigation = (path: string) => {
-        navigate(path);
-    };
-
-    // 切换语言
-    const handleLanguageChange = (lang: string) => {
-        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-[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 />
-            </div>
-
-            {/* 多语言演示卡片 */}
-            <Card className="mb-6">
-                <Title level={3}>多语言演示</Title>
-                <div className="space-y-4">
-                    <p className="text-gray-600">{t('pages.home.description')}</p>
-                    <Space>
-                        <Button onClick={() => handleLanguageChange('en-US')}>English</Button>
-                        <Button onClick={() => handleLanguageChange('fa-IR')}>فارسی</Button>
-                    </Space>
-                    <div className="space-y-2">
-                        <p className="text-gray-600">{t('pages.home.features.title')}</p>
-                        <ul className="list-disc list-inside space-y-1 text-gray-600">
-                            <li>{t('pages.home.features.antd')}</li>
-                            <li>{t('pages.home.features.tailwind')}</li>
-                            <li>{t('pages.home.features.i18n')}</li>
-                        </ul>
-                    </div>
-                </div>
-            </Card>
-
-            {/* 用户信息卡片 */}
-            <Card className="mb-6">
-                <Title level={3}>用户信息</Title>
-                <div className="space-y-4">
-                    <p className="text-gray-600">姓名：{user.name}</p>
-                    <p className="text-gray-600">年龄：{user.age}</p>
-                    <Space wrap>
-                        <Button onClick={() => user.updateName('张三')}>修改名字</Button>
-                        <Button onClick={() => user.updateAge(25)}>修改年龄</Button>
-                        <Button onClick={user.incrementAge}>年龄+1</Button>
-                    </Space>
-                </div>
-            </Card>
-
-            {/* 功能演示卡片 */}
-            <Card className="mb-6">
-                <Title level={3}>功能演示</Title>
-                <div className="space-y-4">
-                    <div>
-                        <Title level={4}>本地存储演示</Title>
-                        <div className="space-y-4">
-                            <div>
-                                <Title level={5}>加密存储</Title>
-                                <Space wrap>
-                                    <Button onClick={handleEncryptedStorageAdd}>
-                                        添加加密数据
-                                    </Button>
-                                    <Button onClick={handleEncryptedStorageGet}>
-                                        获取加密数据
-                                    </Button>
-                                    <Button onClick={handleEncryptedStorageRemove}>
-                                        删除加密数据
-                                    </Button>
-                                </Space>
-                            </div>
-                            <div>
-                                <Title level={5}>明文存储</Title>
-                                <Space wrap>
-                                    <Button onClick={handlePlainStorageAdd}>添加明文数据</Button>
-                                    <Button onClick={handlePlainStorageGet}>获取明文数据</Button>
-                                    <Button onClick={handlePlainStorageRemove}>删除明文数据</Button>
-                                </Space>
-                            </div>
-                            <div>
-                                <Button danger onClick={handleStorageClear}>
-                                    清除所有数据
-                                </Button>
-                            </div>
-                        </div>
-                        {storageStatus && <p className="mt-2 text-gray-600">{storageStatus}</p>}
-                    </div>
-
-                    <div>
-                        <Title level={4}>网络请求演示</Title>
-                        <Space>
-                            <Button type="primary" onClick={handleLoginDemo} loading={loading}>
-                                测试登录
-                            </Button>
-                            {loginStatus && <span className="text-gray-600">{loginStatus}</span>}
-                        </Space>
-                    </div>
-
-                    <div>
-                        <Title level={4}>路由跳转演示</Title>
-                        <Space>
-                            <Button onClick={() => handleNavigation('/route-demo')}>
-                                路由示例
-                            </Button>
-                        </Space>
-                    </div>
-                </div>
-            </Card>
-
-            {/* 图标演示卡片 */}
-            <Card className="mb-6">
-                <Title level={3}>图标演示</Title>
-                <div className="space-y-6">
-                    <div>
-                        <Title level={4}>离线图标</Title>
-                        <Space wrap>
-                            <Button icon={<Icon icon={mdiHome} />}>首页</Button>
-                            <Button icon={<Icon icon={mdiAccount} />}>用户</Button>
-                            <Button icon={<Icon icon={mdiSettings} />}>设置</Button>
-                            <Button icon={<Icon icon={mdiBell} />}>通知</Button>
-                            <Button icon={<Icon icon={mdiHeart} />}>收藏</Button>
-                        </Space>
-                    </div>
-
-                    <div>
-                        <Title level={4}>在线图标</Title>
-                        <Space wrap>
-                            <Button icon={<Icon icon="ri:home-line" />}>首页</Button>
-                            <Button icon={<Icon icon="ri:user-line" />}>用户</Button>
-                            <Button icon={<Icon icon="ri:settings-line" />}>设置</Button>
-                            <Button icon={<Icon icon="ri:notification-line" />}>通知</Button>
-                            <Button icon={<Icon icon="ri:heart-line" />}>收藏</Button>
-                        </Space>
-                    </div>
-
-                    <div>
-                        <Title level={4}>自定义图标</Title>
-                        <Space>
-                            <Icon
-                                icon={singleColorIcon}
-                                className="w-[40px] h-[40px] text-red-500"
-                            />
-                            <Icon icon={multiColorIcon} className="w-[40px] h-[40px]" />
-                        </Space>
-                    </div>
-
-                    <div>
-                        <Title level={4}>动画图标</Title>
-                        <Space>
-                            <Icon icon={mdiLoading} className="animate-spin" />
-                            <Icon icon={mdiHeart} className="animate-bounce" />
-                            <Icon icon={mdiBell} className="animate-pulse" />
-                        </Space>
-                    </div>
-                </div>
-            </Card>
-
-            {/* 样式演示卡片 */}
-            <Card className="mb-6">
-                <Title level={3}>样式演示</Title>
-                <div className="space-y-4">
-                    <div>
-                        <Title level={4}>Tailwind CSS 样式</Title>
-                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                            <div className="bg-blue-500 text-white p-4 rounded-lg shadow-md">
-                                响应式卡片 1
-                            </div>
-                            <div className="bg-green-500 text-white p-4 rounded-lg shadow-md">
-                                响应式卡片 2
-                            </div>
-                            <div className="bg-purple-500 text-white p-4 rounded-lg shadow-md">
-                                响应式卡片 3
-                            </div>
-                        </div>
-                    </div>
-
-                    <div>
-                        <Title level={4}>Ant Design 组件</Title>
-                        <Space wrap>
-                            <Button type="primary">主要按钮</Button>
-                            <Button>默认按钮</Button>
-                            <Button type="dashed">虚线按钮</Button>
-                            <Button type="link">链接按钮</Button>
-                        </Space>
-                    </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>
+            <h1>Home</h1>
         </div>
     );
 };

src/pages/routeDemo/index.tsx

@@ -4,7 +4,7 @@ import { Button, Card, Space, Typography } from 'antd';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { reportEvent } from '@/firebase';
-import { userModel } from '@/models/userModel';
+import { useSmartRouter } from '@/utils/routerUtils';
 
 const { Title, Paragraph } = Typography;
 
@@ -12,7 +12,7 @@ const RouteDemo: React.FC = () => {
     const navigate = useNavigate();
     const params = useParams();
     const [searchParams] = useSearchParams();
-    const user = userModel.useModel();
+    const smartNavigate = useSmartRouter();
 
     useEffect(() => {
         console.log('✅ routeDemo组件挂载：componentDidMount');
@@ -71,18 +71,47 @@ const RouteDemo: React.FC = () => {
                     </div>
 
                     <div>
-                        <Title level={4}>4. Model 状态示例</Title>
-                        <Paragraph className="text-gray-600">
-                            这个页面也能访问到用户信息：
-                        </Paragraph>
-                        <Paragraph className="text-gray-600">姓名：{user.name}</Paragraph>
-                        <Paragraph className="text-gray-600">年龄：{user.age}</Paragraph>
-                        <Space wrap className="mt-4">
-                            <Button onClick={() => user.updateName('李四')}>修改名字</Button>
-                            <Button onClick={() => user.updateAge(35)}>修改年龄</Button>
-                            <Button onClick={user.incrementAge}>年龄+1</Button>
+                        <Title level={4}>4. 重定向示例</Title>
+                        <Space direction="vertical" size="middle" className="w-full">
+                            <div>
+                                <Paragraph className="text-gray-600 mb-2">
+                                    使用 navigate 的 replace 选项（替换历史记录）：
+                                </Paragraph>
+                                <Space wrap>
+                                    <Button onClick={() => navigate('/home', { replace: true })}>
+                                        替换跳转到首页
+                                    </Button>
+                                    <Button onClick={() => navigate('/feature-demo', { replace: true })}>
+                                        替换跳转到功能演示
+                                    </Button>
+                                </Space>
+                            </div>
+                            <div>
+                                <Paragraph className="text-gray-600 mb-2">
+                                    使用 /to 路由进行重定向：
+                                </Paragraph>
+                                <Space wrap>
+                                    <Button onClick={() => navigate('/to?d=test')}>
+                                        跳转到 /to 重定向页面
+                                    </Button>
+                                </Space>
+                            </div>
+                            <div>
+                                <Paragraph className="text-gray-600 mb-2">
+                                    使用 useSmartRouter 保持查询参数：
+                                </Paragraph>
+                                <Space wrap>
+                                    <Button onClick={() => smartNavigate('/home', { from: 'routeDemo' })}>
+                                        智能跳转（保留当前查询参数）
+                                    </Button>
+                                    <Button onClick={() => smartNavigate('/feature-demo', { id: '123' })}>
+                                        智能跳转（添加新参数）
+                                    </Button>
+                                </Space>
+                            </div>
                         </Space>
                     </div>
+
                 </Space>
             </Card>
         </div>

src/router/routes.tsx

@@ -1,5 +1,7 @@
 import { Navigate } from 'react-router-dom';
 
+import type { AppRouteObject } from './types';
+
 import Layout from '@/layouts/BasicLayout';
 import Forbidden from '@/pages/error/403';
 import NotFound from '@/pages/error/404';
@@ -7,8 +9,7 @@ import ServerError from '@/pages/error/500';
 import Redirect from '@/pages/redirect';
 import Home from '@/pages/home';
 import RouteDemo from '@/pages/routeDemo';
-
-import { AppRouteObject } from './types';
+import FeatureDemo from '@/pages/featureDemo';
 
 const routes: AppRouteObject[] = [
     {
@@ -24,6 +25,11 @@ const routes: AppRouteObject[] = [
                 path: '/home',
                 element: <Home />,
             },
+            {
+                name: 'featureDemo',
+                path: '/feature-demo',
+                element: <FeatureDemo />,
+            },
             {
                 name: 'routeDemo',
                 path: '/route-demo/:id?',