授权弹框

src/http/api.ts

@@ -1,6 +1,12 @@
 // 登录
 export const userLogin = `${import.meta.env.VITE_API_URL}/risk-control/user/login`
 
+// 企微登录
+export const qwGetQrCode = `${import.meta.env.VITE_API_URL}/risk-control/qw/getQrCode`
+export const qwCheckLogin = `${import.meta.env.VITE_API_URL}/risk-control/qw/checkLogin`
+export const qwCheckQRCode = `${import.meta.env.VITE_API_URL}/risk-control/qw/checkQRCode`
+export const qwQuiteQwLogin = `${import.meta.env.VITE_API_URL}/risk-control/qw/quiteQwLogin`
+
 /* 公众号管理 */
 export const wechatUserInfoPage = `${import.meta.env.VITE_API_URL}/risk-control/work/wechat/user/info/page`
 export const wechatChatRoomPage = `${import.meta.env.VITE_API_URL}/risk-control/work/wechat/chat/room/page`

src/views/account/list/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import http from '@src/http';
-import { Button, Table, Input, message, ConfigProvider } from "antd";
+import { Button, Table, Input, message, ConfigProvider, Modal, Image } from "antd";
 import zhCN from 'antd/locale/zh_CN';
 import { UserAddOutlined } from '@ant-design/icons'
 import ChatRoomConfig from '../dialog/config'
-import { wechatUserInfoPage } from '@src/http/api';
+import { wechatUserInfoPage, qwQuiteQwLogin, qwGetQrCode } from '@src/http/api';
 import type { TableProps, TablePaginationConfig } from 'antd';
 
 interface DataType {
@@ -39,6 +39,13 @@ interface WechatUserResponse {
   offset: number;
 }
 
+interface QrCodeData {
+  qrcode: string;
+  uuid: string;
+  ttl: number;
+  key: string;
+}
+
 const Gzh: React.FC = () => {
   const [loading, setLoading] = useState(false)
   const [tableData, setTableData] = useState<DataType[]>([])
@@ -54,6 +61,9 @@ const Gzh: React.FC = () => {
   const [searchPhone, setSearchPhone] = useState<string>('')
   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 columns: TableProps<DataType>['columns'] = [
     {
@@ -89,12 +99,12 @@ const Gzh: React.FC = () => {
     {
       title: '操作',
       key: 'action',
-      render: (_, Record) => (
+      render: (_, record) => (
         <>
-          {Record.loginStatus === 0 && <a>登录</a>}
-          {Record.loginStatus === 1 && <>
-            <a>登出</a>&emsp;
-            <a onClick={() => handleConfigClick(Record.uuid)}>配置</a>
+          {record.loginStatus === 0 && <a onClick={() => handleLogin(record.vid)}>登录</a>}
+          {record.loginStatus === 1 && <>
+            <a onClick={() => handleLogout(record.uuid)}>登出</a>&emsp;
+            <a onClick={() => handleConfigClick(record.uuid)}>配置</a>
           </>}
         </>
       ),
@@ -148,6 +158,69 @@ 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 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 handleQrModalClose = () => {
+    setQrModalVisible(false)
+    setQrCodeData(null)
+  }
+
+  const handleLogout = async (uuid: string) => {
+    try {
+      setLoading(true)
+      const res = await http.post(qwQuiteQwLogin, { uuid })
+      if (res.success) {
+        message.success('登出成功')
+        // 刷新列表
+        fetchUserList({
+          currentPage: pagination.current,
+          pageSize: pagination.pageSize,
+          phone: searchPhone
+        })
+      } else {
+        message.error(res.msg || '登出失败')
+      }
+    } catch {
+      message.error('登出失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
   useEffect(() => {
     fetchUserList({
       currentPage: pagination.current,
@@ -177,7 +250,7 @@ const Gzh: React.FC = () => {
           <Button type="primary" onClick={handleSearch}>搜索</Button>
         </div>
         <div>
-          <Button type="primary" className={"mr-[10px]"}><UserAddOutlined />添加账号</Button>
+          <Button type="primary" className={"mr-[10px]"} onClick={handleAddAccount}><UserAddOutlined />添加账号</Button>
         </div>
       </div>
       <ConfigProvider locale={zhCN}>
@@ -203,6 +276,27 @@ const Gzh: React.FC = () => {
         onClose={handleConfigClose} 
         uuid={currentUuid} 
       />
+
+      <Modal
+        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>
     </>
   )
 }