弹出框

src/http/api.ts

@@ -3,3 +3,4 @@ export const userLogin = `${import.meta.env.VITE_API_URL}/risk-control/user/logi
 
 /* 公众号管理 */
 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/dialog/config.tsx

@@ -0,0 +1,176 @@
+import React, { useEffect, useState } from "react";
+import http from '@src/http';
+import { Button, Table, Input, message, ConfigProvider, Drawer, Switch } from "antd";
+import zhCN from 'antd/locale/zh_CN';
+import { SearchOutlined } from '@ant-design/icons';
+import { wechatChatRoomPage } from '@src/http/api';
+import type { TableProps, TablePaginationConfig } from 'antd';
+
+interface ChatRoomDataType {
+  uuid: string;
+  roomId: string;
+  roomName: string;
+  autoRemoveUserSwitch: number;
+}
+
+interface PaginationParams {
+  currentPage: number;
+  pageSize: number;
+  uuid?: string;
+  chatRoomName?: string;
+}
+
+interface ChatRoomResponse {
+  currentPage: number;
+  totalSize: number;
+  pageSize: number;
+  objs: ChatRoomDataType[];
+  totalPage: number;
+  nextPage: number;
+  prePage: number;
+  curPageFirstRecNum: number;
+  curPageLastRecNum: number;
+  offset: number;
+}
+
+interface ChatRoomConfigProps {
+  visible: boolean;
+  onClose: () => void;
+  uuid: string;
+}
+
+const ChatRoomConfig: React.FC<ChatRoomConfigProps> = ({ visible, onClose, uuid }) => {
+  const [loading, setLoading] = useState(false);
+  const [tableData, setTableData] = useState<ChatRoomDataType[]>([]);
+  const [pagination, setPagination] = useState<{
+    current: number;
+    pageSize: number;
+    total: number;
+  }>({
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+  const [searchRoomName, setSearchRoomName] = useState<string>('');
+
+  const columns: TableProps<ChatRoomDataType>['columns'] = [
+    {
+      title: '群名称',
+      dataIndex: 'roomName',
+      key: 'roomName',
+    },
+    {
+      title: '自动踢群',
+      dataIndex: 'autoRemoveUserSwitch',
+      key: 'autoRemoveUserSwitch',
+      render: (value, record) => (
+        <Switch 
+          checked={value === 1} 
+          onChange={(checked) => handleSwitchChange(checked, record)}
+        />
+      ),
+    },
+		{
+      title: '异常用户',
+    },
+  ];
+
+  const fetchChatRoomList = async (params: PaginationParams) => {
+    try {
+      setLoading(true);
+      const res = await http.get<ChatRoomResponse>(wechatChatRoomPage, { params });
+      if (res.success) {
+        setTableData(res.data.objs || []);
+        setPagination({
+          current: res.data.currentPage,
+          pageSize: res.data.pageSize,
+          total: res.data.totalSize
+        });
+      } else {
+        message.error(res.msg || '获取群聊列表失败');
+      }
+    } catch {
+      message.error('获取群聊列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTableChange = (pagination: TablePaginationConfig) => {
+    fetchChatRoomList({
+      currentPage: pagination.current as number,
+      pageSize: pagination.pageSize as number,
+      uuid,
+      chatRoomName: searchRoomName
+    });
+  };
+
+  const handleSearch = () => {
+    setPagination(prev => ({ ...prev, current: 1 }));
+    fetchChatRoomList({
+      currentPage: 1,
+      pageSize: pagination.pageSize,
+      uuid,
+      chatRoomName: searchRoomName
+    });
+  };
+
+  const handleSwitchChange = (checked: boolean, record: ChatRoomDataType) => {
+    // 这里可以添加修改开关状态的接口调用
+    message.success(`${record.roomName} 自动踢人开关已${checked ? '开启' : '关闭'}`);
+  };
+
+  useEffect(() => {
+    if (visible && uuid) {
+      fetchChatRoomList({
+        currentPage: pagination.current,
+        pageSize: pagination.pageSize,
+        uuid
+      });
+    }
+  }, [visible, uuid]);
+
+  return (
+    <Drawer
+      title="群聊配置"
+      placement="right"
+      onClose={onClose}
+      open={visible}
+      width="90%"
+      destroyOnClose
+    >
+      <div className={"flex mb-[10px]"}>
+        <div className={"flex-1 flex gap-[10px]"}>
+          <Input
+            className={"!w-[200px]"}
+            allowClear
+            placeholder="请输入群聊名称"
+            value={searchRoomName}
+            onChange={(e) => setSearchRoomName(e.target.value)}
+            onPressEnter={handleSearch}
+          />
+          <Button type="primary" onClick={handleSearch}><SearchOutlined />搜索</Button>
+        </div>
+      </div>
+      <ConfigProvider locale={zhCN}>
+        <Table 
+          columns={columns}
+          dataSource={tableData}
+          rowKey="roomId"
+          loading={loading}
+          pagination={{
+            current: pagination.current,
+            pageSize: pagination.pageSize,
+            total: pagination.total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条记录`
+          }}
+          onChange={handleTableChange}
+        />
+      </ConfigProvider>
+    </Drawer>
+  );
+};
+
+export default ChatRoomConfig;

src/views/account/list/index.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import http from '@src/http';
 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 } from '@src/http/api';
 import type { TableProps, TablePaginationConfig } from 'antd';
 
@@ -39,9 +40,9 @@ interface WechatUserResponse {
 }
 
 const Gzh: React.FC = () => {
-  const [loading, setLoading] = React.useState(false)
-  const [tableData, setTableData] = React.useState<DataType[]>([])
-  const [pagination, setPagination] = React.useState<{
+  const [loading, setLoading] = useState(false)
+  const [tableData, setTableData] = useState<DataType[]>([])
+  const [pagination, setPagination] = useState<{
     current: number;
     pageSize: number;
     total: number;
@@ -50,7 +51,9 @@ const Gzh: React.FC = () => {
     pageSize: 10,
     total: 0,
   })
-  const [searchPhone, setSearchPhone] = React.useState<string>('')
+  const [searchPhone, setSearchPhone] = useState<string>('')
+  const [configVisible, setConfigVisible] = useState(false)
+  const [currentUuid, setCurrentUuid] = useState('')
 
   const columns: TableProps<DataType>['columns'] = [
     {
@@ -89,7 +92,10 @@ const Gzh: React.FC = () => {
       render: (_, Record) => (
         <>
           {Record.loginStatus === 0 && <a>登录</a>}
-          {Record.loginStatus === 1 && <><a>登出</a>&emsp;<a>配置</a></>}
+          {Record.loginStatus === 1 && <>
+            <a>登出</a>&emsp;
+            <a onClick={() => handleConfigClick(Record.uuid)}>配置</a>
+          </>}
         </>
       ),
     }
@@ -133,6 +139,15 @@ const Gzh: React.FC = () => {
     })
   }
 
+  const handleConfigClick = (uuid: string) => {
+    setCurrentUuid(uuid)
+    setConfigVisible(true)
+  }
+
+  const handleConfigClose = () => {
+    setConfigVisible(false)
+  }
+
   useEffect(() => {
     fetchUserList({
       currentPage: pagination.current,
@@ -182,6 +197,12 @@ const Gzh: React.FC = () => {
           onChange={handleTableChange}
         />
       </ConfigProvider>
+
+      <ChatRoomConfig 
+        visible={configVisible} 
+        onClose={handleConfigClose} 
+        uuid={currentUuid} 
+      />
     </>
   )
 }