ThriveX-Admin/src/pages/Draft/index.tsx

import { useState, useEffect } from 'react';
import { Table, Button, Tag, notification, Card, Popconfirm, Form } from 'antd';
import { titleSty } from '@/styles/sty'
import Title from '@/components/Title';
import { Link } from 'react-router-dom';

import { delArticleDataAPI, getArticleListAPI } from '@/api/Article';
import type { Tag as ArticleTag } from '@/types/app/tag';
import type { Cate } from '@/types/app/cate';
import type { Article } from '@/types/app/article';

import { useWebStore } from '@/stores';

export default () => {
    const web = useWebStore(state => state.web)

    const [current, setCurrent] = useState<number>(1);
    const [loading, setLoading] = useState<boolean>(false);
    const [articleList, setArticleList] = useState<Article[]>([]);

    const [form] = Form.useForm();

    const getArticleList = async () => {
        setLoading(true);
        const { data } = await getArticleListAPI({ query: { isDraft: 1 } });
        setArticleList(data as Article[]);
        setLoading(false);
    };

    useEffect(() => {
        getArticleList()
    }, []);

    const delArticleData = async (id: number) => {
        setLoading(true);

        await delArticleDataAPI(id);
        await getArticleList();
        form.resetFields()
        setCurrent(1)
        notification.success({ message: '🎉 删除文章成功' })

        setLoading(false);
    };

    // 标签颜色
    const colors = ['', '#2db7f5', '#87d068', '#f50', '#108ee9'];

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            width: 100,
        },
        {
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            align: 'center',
            width: 300,
            render: (text: string, record: Article) => <a href={`${web.url}/article/${record.id}`} target='_blank' className='hover:text-primary line-clamp-1'>{text}</a>,
        },
        {
            title: '摘要',
            dataIndex: 'description',
            key: 'description',
            align: 'center',
            width: 350,
            render: (text: string) => <div className='line-clamp-2'>{text ? text : '该文章暂未设置文章摘要'}</div>,
        },
        {
            title: '分类',
            dataIndex: 'cateList',
            key: 'cateList',
            align: 'center',
            render: (cates: Cate[]) => cates.map((item, index) => <Tag key={item.id} color={colors[index]}>{item.name}</Tag>)
        },
        {
            title: '标签',
            dataIndex: 'tagList',
            key: 'tagList',
            align: 'center',
            render: (tags: ArticleTag[]) => tags.map((item, index) => <Tag key={item.id} color={colors[index]}>{item.name}</Tag>)
        },
        {
            title: '操作',
            key: 'action',
            fixed: 'right',
            align: 'center',
            render: (text: string, record: Article) => (
                <div className='flex justify-center space-x-2'>
                    <Link to={`/create?id=${record.id}&draft=true`}>
                        <Button>编辑</Button>
                    </Link>

                    <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delArticleData(record.id!)}>
                        <Button type="primary" danger>删除</Button>
                    </Popconfirm>
                </div>
            ),
        },
    ];

    return (
        <>
            <Title value="草稿箱" />

            <Card className={`${titleSty} mt-2 min-h-[calc(100vh-180px)]`}>
                <Table
                    rowKey="id"
                    dataSource={articleList}
                    columns={columns as any}
                    loading={loading}
                    scroll={{ x: 'max-content' }}
                    pagination={{
                        position: ['bottomCenter'],
                        current,
                        defaultPageSize: 8,
                        onChange(current) {
                            setCurrent(current)
                        }
                    }}
                />
            </Card>
        </>
    );
};