feat(components): add bottom drawer for notification permission guide

Introduce a bottom drawer in the notification permission control
component to provide a step-by-step guide for users (specifically
on iOS/Safari) to enable push notifications when the browser does
not support direct requests.

Key changes:
- Added a 'Drawer' component with 'placement="bottom"' to display
  instructions for adding the site to the home screen.
- Updated the permission control panel to use the same bottom
  placement for consistency.
- Refactored the notification control to toggle the drawer state
  upon interaction.

This improves the user experience by explicitly showing how to
enable features that are restricted in PWA-like environments.

src/components/NotificationPermissionContorl.tsx

@@ -1,6 +1,6 @@
-import { Button, Flex, Form, Switch, Typography } from "antd";
+import { Button, Drawer, Flex, Form, Switch, Typography } from "antd";
 import { useNotificationControl } from "../hooks/useNotificationControl";
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 
 const NotificationPermissionControl = () => {
   const {
@@ -10,36 +10,58 @@ const NotificationPermissionControl = () => {
     handleDisableNotificationClick,
     handleEnableNotificationClick,
   } = useNotificationControl();
+  const [open, setOpen] = useState(false);
   const showEnableNotification = useCallback(() => {
-
+    setOpen(true);
   }, []);
   return (
-    <Form.Item
+    <>
-      label={'启用通知'}
+      <Form.Item label={'启用通知'}>
-      tooltip={'分享 - 添加至桌面/主屏幕后，可接收通知'}
+        {isSupported ? (
-    >
+          <Switch
-      {isSupported ? (
+            loading={loading}
-        <Switch
+            disabled={!isSupported}
-          loading={loading}
+            value={isNotificationEnable}
-          disabled={!isSupported}
+            onChange={checked => {
-          value={isNotificationEnable}
+              if (checked) {
-          onChange={checked => {
+                handleEnableNotificationClick();
-            if (checked) {
+              } else {
-              handleEnableNotificationClick();
+                handleDisableNotificationClick();
-            } else {
+              }
-              handleDisableNotificationClick();
+            }}
-            }
+          />
-          }}
+        ) : (
-        />
+          <Flex align="center" justify="center" wrap>
-      ) : (
+            <Typography.Text type='secondary'>
-        <Flex align="center" justify="center" wrap>
+              当前模式不支持通知功
-          <Typography.Text type='secondary'>
+            </Typography.Text>
-            当前模式不支持通知功
+            <Button type="link" onClick={showEnableNotification}>查看开启方法</Button>
-          </Typography.Text>
+          </Flex>
-          <Button type="link" onClick={showEnableNotification}>查看开启方法</Button>
+        )}
-        </Flex>
+      </Form.Item>
-      )}
+      <Drawer
-    </Form.Item>
+        placement="bottom"
+        open={open}
+        onClose={() => setOpen(false)}
+        title={'帮助'}
+      >
+        <Typography.Title level={4}>
+          1. 使用系统默认浏览器打开本网站
+        </Typography.Title>
+        <Typography.Text>
+          iOS 设备使用 Safari 浏览器
+        </Typography.Text>
+        <Typography.Title level={4}>
+          2. 点击分享
+        </Typography.Title>
+        <Typography.Title level={4}>
+          3. 点击添加到主屏幕
+        </Typography.Title>
+        <Typography.Title level={4}>
+          4. 从主屏幕的应用中打开网站进行设置
+        </Typography.Title>
+      </Drawer>
+    </>
   );
 };
 

src/components/PermissionControlPanel.tsx

@@ -10,6 +10,7 @@ const PermissionControlPanel = () => {
       <Button block icon={<NotificationOutlined />} onClick={() => setOpen(true)}>权限设置</Button>
       <Drawer
         open={open}
+        placement="bottom"
         title={'权限设置'}
         onClose={() => setOpen(false)}
       >