From f3d9220569b482bc3b462405d41ea1f279b4fbb8 Mon Sep 17 00:00:00 2001
From: shiyu <im@shiyu.dev>
Date: Fri, 26 Sep 2025 19:04:30 +0800
Subject: [PATCH] feat: add WeChat modal component and integrate it into
 SideNav and LoginPage

---
 web/src/components/WeChatModal.tsx | 26 ++++++++++++++++++++++++++
 web/src/layout/SideNav.tsx         | 19 ++-----------------
 web/src/pages/LoginPage.tsx        |  5 ++++-
 3 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 web/src/components/WeChatModal.tsx

diff --git a/web/src/components/WeChatModal.tsx b/web/src/components/WeChatModal.tsx
new file mode 100644
index 0000000..b49a75f
--- /dev/null
+++ b/web/src/components/WeChatModal.tsx
@@ -0,0 +1,26 @@
+import { Modal, theme } from 'antd';
+import { useI18n } from '../i18n';
+
+export interface WeChatModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function WeChatModal({ open, onClose }: WeChatModalProps) {
+  const { token } = theme.useToken();
+  const { t } = useI18n();
+
+  return (
+    <Modal open={open} onCancel={onClose} title={t('Join Community')} footer={null} width={320}>
+      <div style={{ textAlign: 'center', padding: '12px 0' }}>
+        <img src="https://foxel.cc/image/wechat.png" width={200} alt="wechat" />
+        <div style={{ marginTop: 12, color: token.colorTextSecondary }}>
+          {t('Scan to join WeChat group')}
+        </div>
+        <div style={{ marginTop: 8, fontSize: 12, color: token.colorTextTertiary }}>
+          {t('If QR expires, add drizzle2001 to join')}
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/web/src/layout/SideNav.tsx b/web/src/layout/SideNav.tsx
index 5789083..8750f39 100644
--- a/web/src/layout/SideNav.tsx
+++ b/web/src/layout/SideNav.tsx
@@ -18,6 +18,7 @@ import ReactMarkdown from 'react-markdown';
 import { useTheme } from '../contexts/ThemeContext';
 import { useI18n } from '../i18n';
 import { useAppWindows } from '../contexts/AppWindowsContext';
+import WeChatModal from '../components/WeChatModal';
 const { Sider } = Layout;
 
 export interface SideNavProps {
@@ -260,23 +261,7 @@ const SideNav = memo(function SideNav({ collapsed, activeKey, onChange, onToggle
 
         </div>
       </Sider>
-      <Modal
-        open={isModalOpen}
-        onCancel={() => setIsModalOpen(false)}
-        title={t('Join Community')}
-        footer={null}
-        width={320}
-      >
-        <div style={{ textAlign: 'center', padding: '12px 0' }}>
-          <img src="https://foxel.cc/image/wechat.png" width={200} alt="wechat" />
-          <div style={{ marginTop: 12, color: token.colorTextSecondary }}>
-            {t('Scan to join WeChat group')}
-          </div>
-          <div style={{ marginTop: 8, fontSize: 12, color: token.colorTextTertiary }}>
-            {t('If QR expires, add drizzle2001 to join')}
-          </div>
-        </div>
-      </Modal>
+      <WeChatModal open={isModalOpen} onClose={() => setIsModalOpen(false)} />
       <Modal
         open={isVersionModalOpen}
         onCancel={() => setIsVersionModalOpen(false)}
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 8eee02a..ba7f19b 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -6,6 +6,7 @@ import { useSystemStatus } from '../contexts/SystemContext';
 import { useNavigate } from 'react-router';
 import { useI18n } from '../i18n';
 import LanguageSwitcher from '../components/LanguageSwitcher';
+import WeChatModal from '../components/WeChatModal';
 
 const { Title, Text } = Typography;
 
@@ -16,6 +17,7 @@ export default function LoginPage() {
   const [password, setPassword] = useState('');
   const [err, setErr] = useState('');
   const [loading, setLoading] = useState(false);
+  const [wechatModalOpen, setWechatModalOpen] = useState(false);
   const navigate = useNavigate();
   const { t } = useI18n();
 
@@ -167,11 +169,12 @@ export default function LoginPage() {
               <Text type="secondary">{t('Join our community:')}</Text>
               <Button type="text" icon={<GithubOutlined />} href="https://github.com/DrizzleTime/Foxel" target="_blank">GitHub</Button>
               <Button type="text" icon={<SendOutlined />} href="https://t.me/+thDsBfyqJxZkNTU1" target="_blank">Telegram</Button>
-              <Button type="text" icon={<WechatOutlined />}>微信</Button>
+              <Button type="text" icon={<WechatOutlined />} onClick={() => setWechatModalOpen(true)}>微信</Button>
             </div>
           </div>
         </div>
       </div>
+      <WeChatModal open={wechatModalOpen} onClose={() => setWechatModalOpen(false)} />
     </div>
   );
 }