调整路径

2024-08-06 21:02:06 +08:00
parent 9b8a93a893
commit d395a4d1c2
11 changed files with 217 additions and 45 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,9 @@ import PageTitle from './components/PageTitle';
 import ECommerce from './pages/Dashboard/ECommerce';
 import Create from './pages/Create';
 import Cate from './pages/Cate';
-import DefaultLayout from './layout/DefaultLayout';
+import Article from './pages/Article';
 import Login from './pages/Login';
+import DefaultLayout from './layout/DefaultLayout';

 import useAuthRedirect from '@/hooks/useAuthRedirect';

@@ -85,6 +86,16 @@ function App() {
                </>
              }
            />
+
+            <Route
+              path="/article"
+              element={
+                <>
+                  <PageTitle title="Thrive - 文章管理" />
+                  <Article />
+                </>
+              }
+            />
          </Routes>
        </DefaultLayout>
      )}
--- a/src/api/Article.ts
+++ b/src/api/Article.ts
@@ -17,10 +17,11 @@ export const editArticleDataAPI = (data: Article) =>
 export const getArticleDataAPI = (id?: number) => Request<Article>("GET", `/article/${id}`)

 // 获取文章列表
-export const getArticleListAPI = (page?: Page) => {
-  if (page) {
-    return Request<Paginate<Article[]>>("GET", `/article?page=${page.page}&size=${page.size}`);
+export const getArticleListAPI = (pagination?: Page) => {
+  if (pagination) {
+    const { page, size } = pagination
+    return Request<Paginate<Article[]>>("GET", `/article?page=${page}&size=${size}`);
  } else {
-    return Request<Article[]>("GET", `/article`);
+    return Request<Article[]>("GET", `/article/all`);
  }
 };
--- a/src/api/Cate.ts
+++ b/src/api/Cate.ts
@@ -14,10 +14,11 @@ export const editCateDataAPI = (data: Cate) => Request<Cate>("PATCH", "/cate", d
 export const getCateDataAPI = (id?: number) => Request<Cate>("GET", `/cate/${id}`)

 // 获取分类列表
-export const getCateListAPI = (page?: Page) => {
-    if (page) {
-        return Request<Paginate<Cate[]>>("GET", `/cate?page=${page.page}&size=${page.size}`);
+export const getCateListAPI = (pagination?: Page) => {
+    if (pagination) {
+        const { page, size } = pagination
+        return Request<Paginate<Cate[]>>("GET", `/cate?page=${page}&size=${size}`);
    } else {
-        return Request<Cate[]>("GET", `/cate`);
+        return Request<Cate[]>("GET", `/cate/all`);
    }
 };
--- a/src/api/Comment.ts
+++ b/src/api/Comment.ts
@@ -16,10 +16,11 @@ export const editCommentDataAPI = (data: Comment) => Request<Comment>("PATCH", "
 export const getCommentDataAPI = (id?: number) => Request<Paginate<Comment>>("GET", `/comment/${id}`)

 // 获取评论列表
-export const getCommentListAPI = (page?: Page) => {
-    if (page) {
-        return Request<Paginate<Comment[]>>("GET", `/comment?page=${page.page}&size=${page.size}`);
+export const getCommentListAPI = (pagination?: Page) => {
+    if (pagination) {
+        const { page, size } = pagination
+        return Request<Paginate<Comment[]>>("GET", `/comment?page=${page}&size=${size}`);
    } else {
-        return Request<Comment[]>("GET", `/comment`);
+        return Request<Comment[]>("GET", `/comment/all`);
    }
 };
--- a/src/api/File.ts
+++ b/src/api/File.ts
@@ -10,9 +10,10 @@ export const editFileDataAPI = (data: File) => Request<File>("PATCH", "/file", d
 export const getFileDataAPI = (id?: number) => Request<Paginate<File>>("GET", `/file/${id}`)

 // 获取文件列表
-export const getFileListAPI = (page?: Page) => {
-    if (page) {
-        return Request<File[]>("GET", `/file?page=${page.page}&size=${page.size}`);
+export const getFileListAPI = (pagination?: Page) => {
+    if (pagination) {
+        const { page, size } = pagination
+        return Request<File[]>("GET", `/file?page=${page}&size=${size}`);
    } else {
        return Request<File[]>("GET", `/file`);
    }
--- a/src/api/Link.ts
+++ b/src/api/Link.ts
@@ -14,10 +14,11 @@ export const editLinkDataAPI = (data: Link) => Request<Link>("PATCH", "/link", d
 export const getLinkDataAPI = (id?: number) => Request<Link>("GET", `/link/${id}`)

 // 获取网站列表
-export const getLinkListAPI = (page?: Page) => {
-    if (page) {
-        return Request<Paginate<Link[]>>("GET", `/link?page=${page.page}&size=${page.size}`);
+export const getLinkListAPI = (pagination?: Page) => {
+    if (pagination) {
+        const { page, size } = pagination
+        return Request<Paginate<Link[]>>("GET", `/link?page=${page}&size=${size}`);
    } else {
-        return Request<Link[]>("GET", `/link`);
+        return Request<Link[]>("GET", `/link/all`);
    }
 };
--- a/src/api/Swiper.ts
+++ b/src/api/Swiper.ts
@@ -14,10 +14,11 @@ export const editSwiperDataAPI = (data: Swiper) => Request<Swiper>("PATCH", "/sw
 export const getSwiperDataAPI = (id?: number) => Request<Swiper>("GET", `/swiper/${id}`)

 // 获取轮播图列表
-export const getSwiperListAPI = (page?: Page) => {
-    if (page) {
-        return Request<Paginate<Swiper[]>>("GET", `/swiper?page=${page.page}&size=${page.size}`);
+export const getSwiperListAPI = (pagination?: Page) => {
+    if (pagination) {
+        const { page, size } = pagination
+        return Request<Paginate<Swiper[]>>("GET", `/swiper?page=${page}&size=${size}`);
    } else {
-        return Request<Swiper[]>("GET", `/swiper`);
+        return Request<Swiper[]>("GET", `/swiper/all`);
    }
 };
--- a/src/api/Tag.ts
+++ b/src/api/Tag.ts
@@ -14,10 +14,11 @@ export const editTagDataAPI = (data: Tag) => Request<Tag>("PATCH", "/tag", data)
 export const getTagDataAPI = (id?: number) => Request<Tag>("GET", `/tag/${id}`)

 // 获取标签列表
-export const getTagListAPI = (page?: Page) => {
-    if (page) {
-        return Request<Paginate<Tag[]>>("GET", `/tag?page=${page.page}&size=${page.size}`);
+export const getTagListAPI = (pagination?: Page) => {
+    if (pagination) {
+        const { page, size } = pagination
+        return Request<Paginate<Tag[]>>("GET", `/tag?page=${page}&size=${size}`);
    } else {
-        return Request<Tag[]>("GET", `/tag`);
+        return Request<Tag[]>("GET", `/tag/all`);
    }
 };
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -179,15 +179,16 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                        <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
                          <li>
                            <NavLink
-                              to="/forms/form-elements"
+                              to="/article"
                              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 Elements
+                              文章管理
                            </NavLink>
                          </li>
+                          
                          <li>
                            <NavLink
                              to="/forms/form-layout"
--- a/src/pages/Article/index.tsx
+++ b/src/pages/Article/index.tsx
@@ -0,0 +1,148 @@
+// ArticleManagement.tsx
+import React, { useState, useEffect } from 'react';
+import { Table, Tag, Button, notification, Pagination, Card, Popconfirm } from 'antd';
+import { delArticleDataAPI, getArticleListAPI } from '@/api/Article';
+import dayjs from 'dayjs';
+import { Article } from '@/types/article';
+import Breadcrumb from '@/components/Breadcrumbs'
+
+const ArticleManagement: React.FC = () => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [paginate, setPaginate] = useState<Paginate<Article[]>>();
+
+    const getArticleList = async (pagination?: { page: number; size: number }) => {
+        setLoading(true);
+        const result = await getArticleListAPI(pagination);
+        console.log(result,888);
+
+        // setPaginate(data as Paginate<Article[]>);
+        setLoading(false);
+    };
+
+    useEffect(() => {
+        getArticleList();
+    }, []);
+
+    const delArticleData = async (id: number) => {
+        setLoading(true);
+
+        await delArticleDataAPI(id);
+        notification.success({
+            message: '成功',
+            description: '🎉 删除文章成功',
+        });
+        getArticleList({ page: paginate?.page!, size: paginate?.size! });
+
+        setLoading(false);
+    };
+
+    const colors = ['info', '', 'success', 'danger', 'warning'];
+
+    const columns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            key: 'id',
+            align: 'center' as const,
+        },
+        {
+            title: '标题',
+            dataIndex: 'title',
+            key: 'title',
+            align: 'center' as const,
+        },
+        {
+            title: '摘要',
+            dataIndex: 'description',
+            key: 'description',
+            align: 'center' as const,
+            render: (text: string) => (text ? text : '该文章暂未设置文章摘要'),
+        },
+        {
+            title: '分类',
+            dataIndex: 'cate',
+            key: 'cate',
+            align: 'center' as const,
+            render: (cate: { name: string }[]) => <span>{cate[0].name}</span>,
+        },
+        {
+            title: '标签',
+            dataIndex: 'tag',
+            key: 'tag',
+            align: 'center' as const,
+            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>}
+                </div>
+            ),
+        },
+        {
+            title: '浏览量',
+            dataIndex: 'view',
+            key: 'view',
+            align: 'center' as const,
+        },
+        {
+            title: '评论数量',
+            dataIndex: 'comment',
+            key: 'comment',
+            align: 'center' as const,
+        },
+        {
+            title: '发布时间',
+            dataIndex: 'createtime',
+            key: 'create_time',
+            align: 'center' as const,
+            render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
+        },
+        {
+            title: '操作',
+            key: 'action',
+            fixed: 'right' as const,
+            align: 'center' as const,
+            render: (text: string, record: Article) => (
+                <div>
+                    <Button type="primary" 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>
+                    )
+                </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'>
+            <Table
+                dataSource={paginate?.result}
+                columns={columns}
+                loading={loading}
+                rowKey="id"
+                pagination={false}
+            />
+        </Card>
+    );
+};
+
+export default ArticleManagement;
--- a/src/pages/Cate/index.tsx
+++ b/src/pages/Cate/index.tsx
@@ -1,9 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Form, Input, Button, Tree, Modal, notification, Spin, Dropdown, Card, MenuProps } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate';
-import Breadcrumb from '@/components/Breadcrumbs';
 import { Cate } from '@/types/cate';
+import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate';
+
+import Breadcrumb from '@/components/Breadcrumbs';
+import { DownOutlined } from '@ant-design/icons';
+import { MdOutlineKeyboardArrowDown, MdOutlineKeyboardArrowUp } from "react-icons/md";
+import { Form, Input, Button, Tree, Modal, notification, Spin, Dropdown, Card, MenuProps, Popconfirm } from 'antd';
+
 import "./index.scss"

 const CateManager: React.FC = () => {
@@ -59,15 +62,13 @@ const CateManager: React.FC = () => {
            });
    };

-    const delCateData = (id: number) => {
-        // whetherToDelete(async () => {
-        //     await delCateDataAPI(id);
-        //     notification.success({ message: '🎉 删除分类成功' });
-        //     getCateList();
-        // }, '分类');
+    const delCateData = async (id: number) => {
+        await delCateDataAPI(id);
+        notification.success({ message: '🎉 删除分类成功' });
+        getCateList();
    };

-    const close = () => {
+    const closeModel = () => {
        setModel(false);
        formRef.current.resetFields();
    };
@@ -86,7 +87,11 @@ const CateManager: React.FC = () => {
                },
                {
                    key: '3',
-                    label: <span onClick={() => delCateData(item.id!)}>删除</span>,
+                    label: (
+                        <Popconfirm title="警告" description="你确定要删除吗" onConfirm={() => delCateData(item.id!)}>
+                            <span>删除</span>
+                        </Popconfirm>
+                    ),
                },
            ];

@@ -128,7 +133,7 @@ const CateManager: React.FC = () => {
                <Tree defaultExpandAll treeData={treeData(list)} />
            </Spin>

-            <Modal title="新增分类导航" open={model} onCancel={close} footer={null}>
+            <Modal title="新增分类导航" open={model} onCancel={closeModel} footer={null}>
                <Form ref={formRef} layout="vertical" initialValues={cate} size='large' className='mt-6'>
                    <Form.Item label="名称" name="name" rules={[{ required: true, message: '分类名称不能为空' }, { min: 1, max: 10, message: '分类名称限制为 1 ~ 10 个字符' }]}>
                        <Input placeholder="大前端" />
@@ -147,7 +152,7 @@ const CateManager: React.FC = () => {
                    </Form.Item>

                    <Form.Item className='!mb-0 flex justify-end'>
-                        <Button onClick={close}>取消</Button>
+                        <Button onClick={closeModel}>取消</Button>
                        <Button type="primary" onClick={submit} className='ml-2'>确定</Button>
                    </Form.Item>
                </Form>