完成评论页面基本布局

src/App.tsx

@@ -7,6 +7,7 @@ import ECommerce from './pages/Dashboard/ECommerce';
 import Create from './pages/Create';
 import Cate from './pages/Cate';
 import Article from './pages/Article';
+import Comment from './pages/Comment';
 import Login from './pages/Login';
 import DefaultLayout from './layout/DefaultLayout';
 
@@ -96,6 +97,16 @@ function App() {
                 </>
               }
             />
+
+            <Route
+              path="/comment"
+              element={
+                <>
+                  <PageTitle title="Thrive - 评论管理" />
+                  <Comment />
+                </>
+              }
+            />
           </Routes>
         </DefaultLayout>
       )}

src/components/Sidebar/index.tsx

@@ -191,13 +191,13 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                           
                           <li>
                             <NavLink
-                              to="/forms/form-layout"
+                              to="/comment"
                               className={({ isActive }) =>
                                 'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +
                                 (isActive && '!text-white')
                               }
                             >
-                              Form Layout
+                              评论管理
                             </NavLink>
                           </li>
                         </ul>

src/pages/Article/index.tsx

@@ -1,12 +1,11 @@
-// ArticleManagement.tsx
 import React, { useState, useEffect } from 'react';
 import { Table, Tag, Button, notification, Card, Popconfirm } from 'antd';
 import { delArticleDataAPI, getArticleListAPI } from '@/api/Article';
 import dayjs from 'dayjs';
-import { Article } from '@/types/article';
+import type { Article } from '@/types/article';
 import Breadcrumb from '@/components/Breadcrumbs'
 
-const ArticleManagement: React.FC = () => {
+const Article: React.FC = () => {
     const [loading, setLoading] = useState<boolean>(false);
     const [articleList, setArticleList] = useState<Article[]>([]);
 
@@ -42,6 +41,7 @@ const ArticleManagement: React.FC = () => {
             dataIndex: 'id',
             key: 'id',
             align: 'center',
+            width: 100,
         },
         {
             title: '标题',
@@ -63,7 +63,6 @@ const ArticleManagement: React.FC = () => {
             dataIndex: 'cate',
             key: 'cate',
             align: 'center',
-            // render: (cate: { name: string }[]) => <span>{cate[0].name}</span>,
             render: () => <span>测试分类</span>,
         },
         {
@@ -130,7 +129,7 @@ const ArticleManagement: React.FC = () => {
                 dataSource={articleList}
                 columns={columns as any}
                 loading={loading}
-                scroll={{ x: '1850px' }}
+                scroll={{ x: 'max-content' }}
                 pagination={{
                     position: ['bottomCenter'],
                     pageSize: 8
@@ -140,4 +139,4 @@ const ArticleManagement: React.FC = () => {
     );
 };
 
-export default ArticleManagement;
+export default Article;

src/pages/Cate/index.tsx

@@ -124,7 +124,7 @@ const CateManager: React.FC = () => {
     }, [cate, model]);
 
     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]:pt-2'>
             <div className='mt-2 mb-4 text-center'>
                 <Button type="primary" onClick={() => setModel(true)}>新增一级分类</Button>
             </div>

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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,53 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Tabs, Spin, Card } from 'antd';
+import { TabsProps } from 'antd';
+import { getCommentListAPI } from '@/api/Comment';
+import List from './components/List';
+import Breadcrumb from '@/components/Breadcrumbs';
+
+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 getCommentList = useCallback(async (page?: Page) => {
+        setInfo(prev => ({ ...prev, loading: true }));
+
+        const { data } = await getCommentListAPI(page);
+
+        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 }));
+        getCommentList();
+    };
+
+    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'>
+            <Tabs activeKey={info.tab} onChange={handleTabChange}>
+                <TabPane tab="评论列表" key="list">
+                    {info.loading ? <Spin /> : <List data={info} getCommentList={getCommentList} />}
+                </TabPane>
+
+                <TabPane tab="待审核" key="audit">
+                    {info.loading ? <Spin /> : <List data={info} getCommentList={getCommentList} />}
+                </TabPane>
+            </Tabs>
+        </Card>
+    );
+};
+
+export default CommentManager;