feat: add WeChat modal component and integrate it into SideNav and LoginPage

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>
+  );
+}

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
+      <WeChatModal open={isModalOpen} onClose={() => setIsModalOpen(false)} />
-        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>
       <Modal
         open={isVersionModalOpen}
         onCancel={() => setIsVersionModalOpen(false)}

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>
   );
 }