完成文章列表布局

src/pages/Article/index.tsx

@@ -1,6 +1,6 @@
 // ArticleManagement.tsx
 import React, { useState, useEffect } from 'react';
-import { Table, Tag, Button, notification, Pagination, Card, Popconfirm } from 'antd';
+import { Table, Tag, Button, notification, Card, Popconfirm } from 'antd';
 import { delArticleDataAPI, getArticleListAPI } from '@/api/Article';
 import dayjs from 'dayjs';
 import { Article } from '@/types/article';
@@ -8,14 +8,14 @@ import Breadcrumb from '@/components/Breadcrumbs'
 
 const ArticleManagement: React.FC = () => {
     const [loading, setLoading] = useState<boolean>(false);
-    const [paginate, setPaginate] = useState<Paginate<Article[]>>();
+    const [articleList, setArticleList] = useState<Article[]>([]);
 
-    const getArticleList = async (pagination?: { page: number; size: number }) => {
+    const getArticleList = async () => {
         setLoading(true);
-        const result = await getArticleListAPI(pagination);
-        console.log(result,888);
 
-        // setPaginate(data as Paginate<Article[]>);
+        const { data } = await getArticleListAPI();
+        setArticleList(data as Article[]);
+
         setLoading(false);
     };
 
@@ -27,58 +27,61 @@ const ArticleManagement: React.FC = () => {
         setLoading(true);
 
         await delArticleDataAPI(id);
-        notification.success({
-            message: '成功',
-            description: '🎉 删除文章成功',
-        });
-        getArticleList({ page: paginate?.page!, size: paginate?.size! });
+        notification.success({ message: '🎉 删除文章成功' })
+        getArticleList();
 
         setLoading(false);
     };
 
-    const colors = ['info', '', 'success', 'danger', 'warning'];
+    // 标签颜色
+    const colors = ['', '#2db7f5', '#87d068', '#f50', '#108ee9'];
 
     const columns = [
         {
             title: 'ID',
             dataIndex: 'id',
             key: 'id',
-            align: 'center' as const,
+            align: 'center',
         },
         {
             title: '标题',
             dataIndex: 'title',
             key: 'title',
-            align: 'center' as const,
+            align: 'center',
+            width: 250,
         },
         {
             title: '摘要',
             dataIndex: 'description',
             key: 'description',
-            align: 'center' as const,
+            align: 'center',
+            width: 400,
             render: (text: string) => (text ? text : '该文章暂未设置文章摘要'),
         },
         {
             title: '分类',
             dataIndex: 'cate',
             key: 'cate',
-            align: 'center' as const,
-            render: (cate: { name: string }[]) => <span>{cate[0].name}</span>,
+            align: 'center',
+            // render: (cate: { name: string }[]) => <span>{cate[0].name}</span>,
+            render: () => <span>测试分类</span>,
         },
         {
             title: '标签',
             dataIndex: 'tag',
             key: 'tag',
-            align: 'center' as const,
+            align: 'center',
             render: (tag: string) => (
                 <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
-                    {tag
-                        ? tag.split(',').map((item, index) => (
-                            <Tag key={item} color={colors[index] as any}>
-                                {item}
-                            </Tag>
-                        ))
-                        : <Tag color="info">暂无标签</Tag>}
+                    {
+                        tag
+                            ? tag.split(',').map((item, index) => (
+                                <Tag key={item} color={colors[index] as any}>
+                                    {item}
+                                </Tag>
+                            ))
+                            : <Tag color="">暂无标签</Tag>
+                    }
                 </div>
             ),
         },
@@ -86,60 +89,52 @@ const ArticleManagement: React.FC = () => {
             title: '浏览量',
             dataIndex: 'view',
             key: 'view',
-            align: 'center' as const,
+            align: 'center',
         },
         {
             title: '评论数量',
             dataIndex: 'comment',
             key: 'comment',
-            align: 'center' as const,
+            align: 'center',
+            render: () => <span>99+</span>,
         },
         {
             title: '发布时间',
             dataIndex: 'createtime',
             key: 'create_time',
-            align: 'center' as const,
+            align: 'center',
+            width: 200,
             render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
         },
         {
             title: '操作',
             key: 'action',
-            fixed: 'right' as const,
-            align: 'center' as const,
+            fixed: 'right',
+            align: 'center',
             render: (text: string, record: Article) => (
-                <div>
-                    <Button type="primary" onClick={() => window.location.href = `/create?id=${record.id}`}>修改</Button>
+                <div className='flex space-x-2'>
+                    <Button onClick={() => window.location.href = `/create?id=${record.id}`}>修改</Button>
 
-                    {/* <Button
-                        type="dashed"
-                        style={{ marginLeft: 0 }}
-                        onClick={() => delArticleData(record.id!)}
-                    >
-                        删除
-                    </Button> */}
-
-                    (
-                    <Popconfirm title="警告" description="你确定要删除吗" onConfirm={() => delArticleData(record.id!)}>
-                        <Button type="dashed" style={{ marginLeft: 0 }} >删除</Button>
+                    <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delArticleData(record.id!)}>
+                        <Button type="primary" danger>删除</Button>
                     </Popconfirm>
-                    )
                 </div>
             ),
         },
     ];
 
-    useEffect(() => {
-        getArticleList({ page: 1, size: 5 })
-    }, [])
-
     return (
-        <Card title={<Breadcrumb pageName="文章管理" />} className='border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:pt-2'>
+        <Card title={<Breadcrumb pageName="文章管理" />} className='border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:!p-0'>
             <Table
-                dataSource={paginate?.result}
-                columns={columns}
-                loading={loading}
                 rowKey="id"
-                pagination={false}
+                dataSource={articleList}
+                columns={columns as any}
+                loading={loading}
+                scroll={{ x: '1850px' }}
+                pagination={{
+                    position: ['bottomCenter'],
+                    pageSize: 8
+                }}
             />
         </Card>
     );

src/pages/Cate/index.tsx

@@ -88,7 +88,7 @@ const CateManager: React.FC = () => {
                 {
                     key: '3',
                     label: (
-                        <Popconfirm title="警告" description="你确定要删除吗" onConfirm={() => delCateData(item.id!)}>
+                        <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delCateData(item.id!)}>
                             <span>删除</span>
                         </Popconfirm>
                     ),