公众号管理

src/views/cooperationAccount/gzh/index.tsx

@@ -1,76 +1,123 @@
-import { Button, Table, Modal } from "antd";
+import { Button, Table, Image, Modal } from "antd";
 import type { TableProps } from 'antd';
 import { useState } from "react";
 
 interface DataType {
-  key: string;
+  id: number;
   name: string;
-  age: number;
-  address: string;
+  ghId: string;
+  contentType: string;
+  createTimestamp: number;
 }
 
-const columns: TableProps<DataType>['columns'] = [
-  {
-    title: '账号名称',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: '账号id',
-    dataIndex: 'id',
-    key: 'id',
-  },
-  {
-    title: '内容类别',
-    dataIndex: 'qrcode',
-    key: 'qrcode',
-  },
-	{
-		title: '新增时间',
-		dataIndex: 'status',
-		key: 'status',
-	},
-  {
-    title: '操作',
-  }
-]
+const AccountDialog = ({ title, isOpen, handleOk, handleCancel }) => {
+  return (
+    <Modal
+      width="400px"
+      title={title}
+      open={isOpen}
+      cancelText="取消"
+      okText="确定"
+      onOk={handleOk}
+      onCancel={handleCancel}>
+      <div className={"p-[20px] text-[#333] text-center"}>
+        <Image
+          width={140}
+          preview={false}
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+        <div className={"mt-[10px]"}>
+          <p className={"text-[16px]"}>请用微信扫码授权</p>
+          <p className={"text-[12px]"}>二维码将在1小时内失效</p>
+        </div>
+      </div>
+      <div className={"flex mb-[20px]"}>
+        <div className={"w-[100px]"}>公众号名称</div>
+        <div className={"flex-1"}>a</div>
+      </div>
+      <div className={"flex mb-[20px]"}>
+        <div className={"w-[100px]"}>公众号ID</div>
+        <div className={"flex-1"}>a</div>
+      </div>
+      <div className={"flex mb-[20px]"}>
+        <div className={"w-[100px]"}>内容类别</div>
+        <div className={"flex-1"}>a</div>
+      </div>
+    </Modal>
+  )
+}
 
-const data: DataType[] = [
-]
+const Gzh: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [title, setTitle]	=	useState('');
 
-export default function Gzh() {
-	const [isModalOpen, setIsModalOpen] = useState(false);
-	const [modalTitle, setModalTitle] = useState('');
+  const columns: TableProps<DataType>['columns'] = [
+    {
+      title: '账号名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '账号id',
+      dataIndex: 'ghId',
+      key: 'ghId',
+    },
+    {
+      title: '内容类别',
+      dataIndex: 'contentType',
+      key: 'contentType',
+    },
+    {
+      title: '新增时间',
+      dataIndex: 'createTimestamp',
+      key: 'createTimestamp',
+      render: (timestamp) => {
+        return new Date(timestamp).toLocaleString();
+      }
+    },
+    {
+      key: 'action',
+      render: () => (
+        <>
+          <Button type="link" onClick={modifyAccount}>编辑</Button>
+          <Button type="link" danger>删除</Button>
+        </>
+      ),
+    }
+  ]
 
-	const newAccount = () => {
-    setIsModalOpen(true);
-		setModalTitle('新建账号');
-  };
+  const data: DataType[] = [
+    {id: 1, name: '账号1', ghId: 'gh_1234567890', contentType: '图文', createTimestamp: 1744184445467},
+  ]
 
-	// const modifyAccount = () => {
-  //   setIsModalOpen(true);
-  //   setModalTitle('修改账号');
-  // };
+  const addAccount = () => {
+    setTitle('新建公众号');
+    setIsOpen(true);
+  }
+
+  const modifyAccount = () => {
+    setTitle('编辑公众号');
+    setIsOpen(true);
+  }
 
   const handleOk = () => {
-    setIsModalOpen(false);
-  };
+    setIsOpen(false);
+  }
 
   const handleCancel = () => {
-    setIsModalOpen(false);
-  };
+    setIsOpen(false);
+  }
 
   return (
     <>
       <div className={"flex mb-[10px]"}>
-				<div className={"flex-1 leading-[32px]"}>公众号管理</div>
-				<Button type="primary" onClick={newAccount}>+ 新建账号</Button>
-			</div>
-			<Table columns={columns} dataSource={data} />
-
-			<Modal title={modalTitle} cancelText="取消" okText="确定" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
-				
-			</Modal>
+        <div className={"flex-1 leading-[32px]"}>公众号管理</div>
+        <Button type="primary" onClick={addAccount}>+ 新建账号</Button>
+      </div>
+      <Table columns={columns} dataSource={data} rowKey="id" pagination={{position: ['bottomRight']}} />
+      <AccountDialog title={title} isOpen={isOpen} handleOk={handleOk} handleCancel={handleCancel}></AccountDialog>
     </>
   )
 }
+
+export default Gzh;