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,14 +10,13 @@ const NotificationPermissionControl = () => {
     handleDisableNotificationClick,
     handleEnableNotificationClick,
   } = useNotificationControl();
+  const [open, setOpen] = useState(false);
   const showEnableNotification = useCallback(() => {
-
+    setOpen(true);
   }, []);
   return (
-    <Form.Item
-      label={'启用通知'}
-      tooltip={'分享 - 添加至桌面/主屏幕后，可接收通知'}
-    >
+    <>
+      <Form.Item label={'启用通知'}>
         {isSupported ? (
           <Switch
             loading={loading}
@@ -40,6 +39,29 @@ const NotificationPermissionControl = () => {
           </Flex>
         )}
       </Form.Item>
+      <Drawer
+        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)}
       >