弹层

src/views/account/dialog/qrcode.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import http from '@src/http';
+import { Modal, Image, message } from "antd";
+import { qwGetQrCode } from '@src/http/api';
+
+interface QrCodeData {
+  qrcode: string;
+  uuid: string;
+  ttl: number;
+  key: string;
+}
+
+interface QrCodeModalProps {
+  visible: boolean;
+  onClose: () => void;
+  title: string;
+  vid?: string; // 可选参数，用于登录时传入
+  onSuccess?: (data: QrCodeData) => void; // 可选回调，用于处理成功获取二维码后的操作
+}
+
+const QrCodeModal: React.FC<QrCodeModalProps> = ({ 
+  visible, 
+  onClose, 
+  title, 
+  vid,
+  onSuccess 
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [qrCodeData, setQrCodeData] = useState<QrCodeData | null>(null);
+
+  // 获取二维码
+  const fetchQrCode = async () => {
+    try {
+      setLoading(true);
+      // 根据是否有 vid 参数决定是添加账号还是登录
+      const res = await http.post<QrCodeData>(qwGetQrCode, { vid });
+
+      if (res.success) {
+        setQrCodeData(res.data);
+        // 如果有成功回调，则调用
+        if (onSuccess) {
+          onSuccess(res.data);
+        }
+      } else {
+        message.error(res.msg || '获取二维码失败');
+      }
+    } catch {
+      message.error('获取二维码失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 当弹窗显示时获取二维码
+  React.useEffect(() => {
+    if (visible) {
+      fetchQrCode();
+    } else {
+      // 关闭弹窗时清空数据
+      setQrCodeData(null);
+    }
+  }, [visible, vid]);
+
+  // 处理弹窗关闭
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Modal
+      title={title}
+      open={visible}
+      onCancel={handleClose}
+      footer={null}
+      destroyOnClose
+    >
+      {qrCodeData && (
+        <div className="flex flex-col items-center">
+          <Image
+            src={qrCodeData.qrcode}
+            alt="二维码"
+            width={200}
+            preview={false}
+            loading={loading ? 'lazy' : undefined}
+          />
+          <p className="mt-4 text-center">请使用企业微信扫描二维码</p>
+          <p className="text-center text-gray-500">二维码有效期 {qrCodeData.ttl} 秒</p>
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default QrCodeModal;

src/views/account/list/index.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from "react";
 import http from '@src/http';
-import { Button, Table, Input, message, ConfigProvider, Modal, Image } from "antd";
+import { Button, Table, Input, message, ConfigProvider } from "antd";
 import zhCN from 'antd/locale/zh_CN';
 import { UserAddOutlined } from '@ant-design/icons'
 import ChatRoomConfig from '../dialog/config'
-import { wechatUserInfoPage, qwQuiteQwLogin, qwGetQrCode } from '@src/http/api';
+import QrCodeModal from '../dialog/qrcode'
+import { wechatUserInfoPage, qwQuiteQwLogin } from '@src/http/api';
 import type { TableProps, TablePaginationConfig } from 'antd';
 
 interface DataType {
@@ -62,8 +63,8 @@ const Gzh: React.FC = () => {
   const [configVisible, setConfigVisible] = useState(false)
   const [currentUuid, setCurrentUuid] = useState('')
   const [qrModalVisible, setQrModalVisible] = useState(false)
-  const [qrCodeData, setQrCodeData] = useState<QrCodeData | null>(null)
   const [qrModalTitle, setQrModalTitle] = useState('')
+  const [currentVid, setCurrentVid] = useState<string | undefined>(undefined)
 
   const columns: TableProps<DataType>['columns'] = [
     {
@@ -158,45 +159,20 @@ const Gzh: React.FC = () => {
     setConfigVisible(false)
   }
 
-  const handleAddAccount = async () => {
-    try {
-      setLoading(true)
-      const res = await http.post<QrCodeData>(qwGetQrCode)
-      if (res.success) {
-        setQrCodeData(res.data)
-        setQrModalTitle('添加账号')
-        setQrModalVisible(true)
-      } else {
-        message.error(res.msg || '获取二维码失败')
-      }
-    } catch {
-      message.error('获取二维码失败')
-    } finally {
-      setLoading(false)
-    }
+  const handleAddAccount = () => {
+    setQrModalTitle('添加账号')
+    setCurrentVid('') // 添加账号不需要 vid
+    setQrModalVisible(true)
   }
 
-  const handleLogin = async (vid: string) => {
-    try {
-      setLoading(true)
-      const res = await http.post<QrCodeData>(qwGetQrCode, { vid })
-      if (res.success) {
-        setQrCodeData(res.data)
-        setQrModalTitle('账号登录')
-        setQrModalVisible(true)
-      } else {
-        message.error(res.msg || '获取二维码失败')
-      }
-    } catch {
-      message.error('获取二维码失败')
-    } finally {
-      setLoading(false)
-    }
+  const handleLogin = (vid: string) => {
+    setQrModalTitle('账号登录')
+    setCurrentVid(vid) // 设置当前 vid
+    setQrModalVisible(true)
   }
 
   const handleQrModalClose = () => {
     setQrModalVisible(false)
-    setQrCodeData(null)
   }
 
   const handleLogout = async (uuid: string) => {
@@ -277,26 +253,16 @@ const Gzh: React.FC = () => {
         uuid={currentUuid} 
       />
 
-      <Modal
+      <QrCodeModal
+        visible={qrModalVisible}
+        onClose={handleQrModalClose}
         title={qrModalTitle}
-        open={qrModalVisible}
-        onCancel={handleQrModalClose}
-        footer={null}
-        destroyOnClose
-      >
-        {qrCodeData && (
-          <div className="flex flex-col items-center">
-            <Image
-              src={qrCodeData.qrcode}
-              alt="二维码"
-              width={200}
-              preview={false}
-            />
-            <p className="mt-4 text-center">请使用企业微信扫描二维码</p>
-            <p className="text-center text-gray-500">二维码有效期 {qrCodeData.ttl} 秒</p>
-          </div>
-        )}
-      </Modal>
+        vid={currentVid}
+        onSuccess={(data) => {
+          // 获取二维码成功后的回调，可以在这里处理后续逻辑
+          console.log('获取二维码成功:', data);
+        }}
+      />
     </>
   )
 }