diff --git a/src/App.tsx b/src/App.tsx index e5108cb..36d1400 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import Create from './pages/Create'; import Cate from './pages/Cate'; import Article from './pages/Article'; import Comment from './pages/Comment'; +import Tag from './pages/Tag'; import Web from './pages/Web'; import Swiper from './pages/Swiper'; import Setup from './pages/Setup'; @@ -101,6 +102,16 @@ function App() { } /> + + + + + } + /> + { +
  • + + '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') + } + > + 标签管理 + +
    • +
  • { +const CatePage = () => { const [loading, setLoading] = useState(false); - const [model, setModel] = useState(false); + const [isModelOpen, setIsModelOpen] = useState(false); const [cate, setCate] = useState({} as Cate); const [list, setList] = useState([]); const [isMethod, setIsMethod] = useState<'create' | 'edit'>('create'); - + const [form] = Form.useForm(); + const getCateList = async () => { const { data } = await getCateListAPI(); setList(data as Cate[]); @@ -21,14 +22,18 @@ const CatePage: React.FC = () => { const addCateData = (id: number) => { setIsMethod("create") - setModel(true); + setIsModelOpen(true); + console.log(cate, 333); + + form.resetFields(); + setCate({ ...cate, level: id }); }; const editCateData = async (id: number) => { setIsMethod("edit") setLoading(true); - setModel(true); + setIsModelOpen(true); const { data } = await getCateDataAPI(id); setCate(data); form.setFieldsValue(data); @@ -42,8 +47,6 @@ const CatePage: React.FC = () => { getCateList(); }; - const [form] = Form.useForm(); - const submit = async () => { form.validateFields().then(async (values: Cate) => { if (isMethod === "edit") { @@ -58,7 +61,7 @@ const CatePage: React.FC = () => { form.resetFields(); setCate({} as Cate); - setModel(false); + setIsModelOpen(false); getCateList(); setIsMethod("create") }) @@ -66,7 +69,7 @@ const CatePage: React.FC = () => { const closeModel = () => { setIsMethod("create") - setModel(false); + setIsModelOpen(false); form.resetFields(); setCate({} as Cate); }; @@ -98,11 +101,9 @@ const CatePage: React.FC = () => {

    {item.name}

    -
    - - - -
    + + +
    ), key: item.id, @@ -122,14 +123,14 @@ const CatePage: React.FC = () => { .ant-card-body]:!p-2 [&>.ant-card-body]:!pb-6 mt-2`}>
    - +
    - +
    diff --git a/src/pages/Tag/index.tsx b/src/pages/Tag/index.tsx new file mode 100644 index 0000000..1eb11d1 --- /dev/null +++ b/src/pages/Tag/index.tsx @@ -0,0 +1,120 @@ +import React, { useState, useEffect } from 'react'; +import { Form, Input, Button, Table, notification, Card, message, Popconfirm } from 'antd'; +import { TagOutlined, SettingOutlined } from '@ant-design/icons'; +import { addTagDataAPI, delTagDataAPI, editTagDataAPI, getTagListAPI } from '@/api/Tag'; +import Title from '@/components/Title'; + +interface Tag { + id?: number; + name: string; +} + +const TagManagement: React.FC = () => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const [tag, setTag] = useState({ name: '' }); + const [title, setTitle] = useState('新增标签'); + const [list, setList] = useState([]); + + // 获取标签列表 + const getTagList = async () => { + const { data } = await getTagListAPI() + setList(data as Tag[]); + setLoading(false) + } + + useEffect(() => { + setLoading(true) + getTagList() + }, []); + + const delTagData = async (id: number) => { + setLoading(true); + await delTagDataAPI(id); + message.success('🎉 删除标签成功'); + getTagList() + }; + + const editTagData = (data: Tag) => { + setLoading(true); + setTag(data); + setTitle('编辑标签'); + }; + + const submit = () => { + form.validateFields().then(async (values) => { + const fn = (message: string) => { + form.resetFields(); + + notification.success({ + message: '成功', + description: message, + }); + getTagList() + }; + + if (tag.id) { + await editTagDataAPI(tag); + setTitle('新增标签'); + fn('🎉 编辑标签成功'); + } else { + await addTagDataAPI(values); + fn('🎉 新增标签成功'); + } + }) + }; + + return ( + <> + + + <Card className="mt-2"> + <div className="w-8/12 flex justify-between px-8 mx-auto"> + <div className="flex flex-col w-[40%]"> + <h2 className="text-xl pb-4 text-center">{title}</h2> + + <Form form={form} size="large" layout="vertical" initialValues={tag}> + <Form.Item + label="标签名称" + name="name" + rules={[{ required: true, message: '标签不能为空' }]} + > + <Input placeholder="大前端" /> + </Form.Item> + + <Form.Item> + <Button type="primary" size="large" onClick={submit} className="w-full">{title}</Button> + </Form.Item> + </Form> + </div> + + <div className="flex flex-col w-[50%]"> + <h2 className="text-xl pb-4 text-center">标签列表</h2> + + <Table dataSource={list} rowKey="id"> + <Table.Column title="ID" dataIndex="id" /> + <Table.Column title="名称" dataIndex="name" align="center" /> + <Table.Column + title="操作" + align="center" + render={(text, record: Tag) => ( + <> + <div className='flex justify-center space-x-4'> + <Button size="small" onClick={() => editTagData(record)}>编辑</Button> + + <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delTagData(record.id!)}> + <Button size="small" type="primary" danger>删除</Button> + </Popconfirm> + </div> + </> + )} + /> + </Table> + </div> + </div> + </Card> + </> + ); +}; + +export default TagManagement;