完成渲染评论列表

src/pages/Article/index.tsx

@@ -90,8 +90,8 @@ const Article: React.FC = () => {
         },
         {
             title: '发布时间',
-            dataIndex: 'createtime',
-            key: 'create_time',
+            dataIndex: 'createTime',
+            key: 'createTime',
             align: 'center',
             width: 200,
             render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),

src/pages/Comment/components/List/index.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { Table, Button, Pagination, Spin, message, Modal, Popconfirm } from 'antd';
-import { ColumnsType } from 'antd/es/table';
-import dayjs from 'dayjs';
-import { auditCommentDataAPI, delCommentDataAPI } from '@/api/Comment';
-
-interface ListProps {
-    data: Info;
-    getCommentList: (page?: Page) => void;
-}
-
-const List: React.FC<ListProps> = ({ data, getCommentList }) => {
-    const auditComment = async (id: number) => {
-        await auditCommentDataAPI(id);
-        getCommentList();
-        message.success('🎉 审核评论成功');
-    };
-
-    const delComment = async (id: number) => {
-        await delCommentDataAPI(id);
-        getCommentList();
-        message.success('🎉 删除评论成功');
-    };
-
-    const columns: ColumnsType<any> = [
-        {
-            title: 'ID',
-            dataIndex: 'id',
-            key: 'id',
-            width: 100,
-            fixed: 'left',
-        },
-        {
-            title: '名称',
-            dataIndex: 'name',
-            key: 'name',
-            width: 170,
-            fixed: 'left',
-        },
-        {
-            title: '邮箱',
-            dataIndex: 'email',
-            key: 'email',
-            width: 230,
-        },
-        {
-            title: '内容',
-            dataIndex: 'content',
-            key: 'content',
-            width: 270,
-        },
-        {
-            title: '网站',
-            dataIndex: 'url',
-            key: 'url',
-            width: 250,
-            render: (url: string) => url ? <a href={url} className="url">{url}</a> : '无网站',
-        },
-        {
-            title: '所属文章',
-            dataIndex: 'article',
-            key: 'article',
-            width: 300,
-        },
-        {
-            title: '评论时间',
-            dataIndex: 'date',
-            key: 'date',
-            width: 230,
-            render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
-        },
-        {
-            title: '操作',
-            key: 'action',
-            width: data.tab === 'audit' ? 120 : 80,
-            fixed: 'right',
-            align: 'center',
-            render: (_: any, record: any) => (
-                <>
-                    {data.tab === 'audit' && (
-                        <Button type="link" onClick={() => auditComment(record.id)}><b>通过</b></Button>
-                    )}
-
-                    <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delComment(record.id)}>
-                        <Button type="link" danger><b>删除</b></Button>
-                    </Popconfirm>
-
-                </>
-            ),
-        },
-    ];
-
-    return (
-        <div className="list">
-            <Spin spinning={data.loading} indicator={<svg />}>
-                <Table
-                    rowKey="id"
-                    dataSource={data.list}
-                    columns={columns}
-                    scroll={{ x: 'max-content' }}
-                    pagination={{
-                        position: ['bottomCenter'],
-                        pageSize: 8
-                    }}
-                />
-            </Spin>
-        </div>
-    );
-};
-
-export default List;

src/pages/Comment/index.tsx

@@ -1,55 +1,138 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Tabs, Spin, Card } from 'antd';
-import { TabsProps } from 'antd';
+import { useState, useEffect } from 'react';
+import { Tabs, Spin, Card, message, Table, Popconfirm, Button, Tag } from 'antd';
 import { getCommentListAPI } from '@/api/Comment';
-import List from './components/List';
-import Breadcrumb from '@/components/Breadcrumbs';
+import { auditCommentDataAPI, delCommentDataAPI } from '@/api/Comment';
+import dayjs from 'dayjs';
+import { ColumnsType } from 'antd/es/table';
+import { titleSty } from '@/styles/sty';
+import Title from '@/components/Title';
+import { Comment as ArticleComment } from '@/types/comment'
 
 const { TabPane } = Tabs;
 
-const CommentManager: React.FC = () => {
-    const [info, setInfo] = useState<Info>({
-        tab: 'list',
-        loading: false,
-        list: [],
-        paginate: { size: 0, page: 0, total: 0 }
-    });
+const Comment = () => {
+    const [loading, setLoading] = useState(false);
+    const [model, setModel] = useState(false);
+    const [comment, setComment] = useState<Comment>();
+    const [list, setList] = useState<Comment[]>([]);
 
-    const getCommentList = useCallback(async (page?: Page) => {
-        setInfo(prev => ({ ...prev, loading: true }));
+    // const loadingFn = async (callback: () => void) => {
+    //     setLoading(true)
+    //     await callback()
+    //     setLoading(false)
+    // }
 
-        const { data } = await getCommentListAPI(page);
+    const getCommentList = async () => {
+        const { data } = await getCommentListAPI();
+        setList(data as Comment[])
+        setLoading(false)
+    }
 
-        setInfo(prev => ({
-            list: data.result.filter(item => (prev.tab === 'list' ? item.audit === 1 : item.audit === 0)),
-            loading: false
-        }));
-    }, [info.tab]);
-
-    useEffect(() => {
-        getCommentList();
-    }, [getCommentList]);
-
-    const handleTabChange = (key: string) => {
-        setInfo(prev => ({ ...prev, tab: key }));
+    const auditCommentData = async (id: number) => {
+        setLoading(true)
+        await auditCommentDataAPI(id);
         getCommentList();
+        message.success('🎉 审核评论成功');
     };
 
-    const titleSty = "border-stroke dark:border-strokedark [&>.ant-card-head]:border-stroke [&>.ant-card-head]:dark:border-strokedark dark:bg-boxdark [&>.ant-card-body]:pt-2"
+    const delCommentData = async (id: number) => {
+        setLoading(true)
+        await delCommentDataAPI(id);
+        getCommentList();
+        message.success('🎉 删除评论成功');
+    };
+
+    useEffect(() => {
+        setLoading(true)
+        getCommentList();
+    }, []);
+
+    const columns: ColumnsType = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+            align: "center"
+        },
+        {
+            title: '状态',
+            dataIndex: 'auditStatus',
+            key: 'auditStatus',
+            fixed: 'left',
+            render: (status: number) => status ?
+                <Tag bordered={false} color="processing">通过</Tag>
+                : <Tag bordered={false} color="error">待审核</Tag>
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            fixed: 'left',
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            key: 'email',
+        },
+        {
+            title: '内容',
+            dataIndex: 'content',
+            key: 'content',
+        },
+        {
+            title: '网站',
+            dataIndex: 'url',
+            key: 'url',
+            render: (url: string) => url ? <a href={url} className="hover:text-primary">{url}</a> : '无网站',
+        },
+        {
+            title: '所属文章',
+            dataIndex: 'articleTitle',
+            key: 'articleTitle',
+        },
+        {
+            title: '评论时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            render: (date: string) => dayjs(date).format('YYYY-MM-DD HH:mm:ss'),
+        },
+        {
+            title: '操作',
+            key: 'action',
+            fixed: 'right',
+            align: 'center',
+            render: (text: string, record: ArticleComment) => (
+                <div className='flex space-x-2'>
+                    {!record.auditStatus && <Button type='primary' onClick={() => auditCommentData(1)}>审核</Button>}
+                    <Button>查看</Button>
+                    <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delCommentData(record.id)}>
+                        <Button type="primary" danger>删除</Button>
+                    </Popconfirm>
+                </div>
+            ),
+        },
+    ];
 
     return (
-        <Card title={<Breadcrumb pageName="评论管理" />} className={titleSty}>
-            <Tabs activeKey={info.tab} onChange={handleTabChange}>
-                <TabPane tab="评论列表" key="list">
-                    {info.loading ? <Spin /> : <List data={info} getCommentList={getCommentList} />}
-                </TabPane>
+        <>
+            <Title value='评论管理' />
 
-                <TabPane tab="待审核" key="audit">
-                    {info.loading ? <Spin /> : <List data={info} getCommentList={getCommentList} />}
-                </TabPane>
-            </Tabs>
-        </Card>
+            <Card className={`${titleSty} mt-2`}>
+                <Spin spinning={loading} indicator={<svg />}>
+                    <Table
+                        rowKey="id"
+                        dataSource={list}
+                        columns={columns}
+                        scroll={{ x: 'max-content' }}
+                        pagination={{
+                            position: ['bottomCenter'],
+                            pageSize: 8
+                        }}
+                    />
+                </Spin>
+            </Card>
+        </>
     );
 };
 
-export default CommentManager;
+export default Comment;

src/types/Comment.d.ts

@@ -1,14 +1,15 @@
 export interface Comment {
-    aid: number,
-    avatar: string,
-    content: string,
-    date: Date,
-    email: string,
     id: number,
     name: string,
-    rid: number,
+    avatar: string,
+    email: string,
     url: string,
-    audit: number
+    content: string,
+    articleId: number,
+    articleTitle: number,
+    commentId: number,
+    auditStatus: number
+    createTime: Date,
 }
 
 export interface Info {