From 95655068b3887c6ec3901e8a87aa13e4c6aacb8b Mon Sep 17 00:00:00 2001
From: kyuuseiryuu <kyuuseiryuu@gmail.com>
Date: Wed, 25 Mar 2026 00:54:10 +0900
Subject: [PATCH] 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.
---
 .../NotificationPermissionContorl.tsx         | 80 ++++++++++++-------
 src/components/PermissionControlPanel.tsx     |  1 +
 2 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/components/NotificationPermissionContorl.tsx b/src/components/NotificationPermissionContorl.tsx
index 6bea30b..4c6b936 100644
--- a/src/components/NotificationPermissionContorl.tsx
+++ b/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={'启用通知'}
-      tooltip={'分享 - 添加至桌面/主屏幕后，可接收通知'}
-    >
-      {isSupported ? (
-        <Switch
-          loading={loading}
-          disabled={!isSupported}
-          value={isNotificationEnable}
-          onChange={checked => {
-            if (checked) {
-              handleEnableNotificationClick();
-            } else {
-              handleDisableNotificationClick();
-            }
-          }}
-        />
-      ) : (
-        <Flex align="center" justify="center" wrap>
-          <Typography.Text type='secondary'>
-            当前模式不支持通知功
-          </Typography.Text>
-          <Button type="link" onClick={showEnableNotification}>查看开启方法</Button>
-        </Flex>
-      )}
-    </Form.Item>
+    <>
+      <Form.Item label={'启用通知'}>
+        {isSupported ? (
+          <Switch
+            loading={loading}
+            disabled={!isSupported}
+            value={isNotificationEnable}
+            onChange={checked => {
+              if (checked) {
+                handleEnableNotificationClick();
+              } else {
+                handleDisableNotificationClick();
+              }
+            }}
+          />
+        ) : (
+          <Flex align="center" justify="center" wrap>
+            <Typography.Text type='secondary'>
+              当前模式不支持通知功
+            </Typography.Text>
+            <Button type="link" onClick={showEnableNotification}>查看开启方法</Button>
+          </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>
+    </>
   );
 };
 
diff --git a/src/components/PermissionControlPanel.tsx b/src/components/PermissionControlPanel.tsx
index 2b6d66f..fb50d0d 100644
--- a/src/components/PermissionControlPanel.tsx
+++ b/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)}
       >