ai-bot/app/admin/(default)/dashboard/article/detail/AddOrEdit.tsx

167 lines
5.8 KiB
TypeScript

"use client"
import { ArticleType } from '@/app/_lib/data/article';
import ImageUpload from '@/app/_ui/ImageUpload';
import { faArrowLeft, faRibbon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { BackTop, Button, Card, Col, DatePicker, Form, Grid, Input, InputNumber, message, Row, Select, Space, Upload } from 'antd';
import dynamic from 'next/dynamic';
import { useParams, useRouter } from 'next/navigation'
import { useState } from 'react';
// const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
import { MdEditor } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';
import '@ant-design/v5-patch-for-react-19';
import { mRequest } from '@/app/_lib/request';
import dayjs from 'dayjs';
export default function AddOrEdit({ editData }: { editData?: ArticleType | null }) {
const router = useRouter()
console.log(editData);
return <>
<div className='w-full bg-white p-2 flex gap-x-1 items-center rounded shadow'>
<div className='flex gap-x-1 items-center text-[#666] hover:text-[#333] cursor-pointer '
onClick={() => {
router?.back()
}}
>
<FontAwesomeIcon icon={faArrowLeft}></FontAwesomeIcon>
</div>
</div>
<Card title="新增文章" className='mt-2'>
<Form<ArticleType>
onFinish={async (res) => {
if (editData) {
await mRequest("PUT", "/api/article", {
...res,
_id: editData._id
})
} else {
await mRequest("POST", "/api/article", {
...res,
addTime: dayjs().unix()
})
}
router?.push("/admin/dashboard/article")
message.success("操作成功")
}}
initialValues={editData ? {
...editData,
addTime: dayjs(editData.addTime * 1000)
} : {
priority: 0,
addTime: dayjs()
}}
>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="标题" name={"title"} rules={[{ required: true, message: '请输入标题' }]}>
<Input />
</Form.Item>
<Form.Item label="介绍" name={"description"}
rules={[
{
required: true,
message: '请输入副标题'
}
]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="链接" name={"link"}
rules={[
{
required: true,
message: '请输入链接'
}
]}
>
<Input />
</Form.Item>
<Form.Item label="封面" name={"cover"}
rules={[
{
required: true,
message: '请输入封面'
}
]}
>
<ImageUpload
accept="image/*"
width={80}
height={80}
hiddenCover
></ImageUpload>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item label="关联网址"
name="linkId"
rules={[
{
required: true,
message: '请输入副标题'
}
]}>
<Select showSearch>
</Select>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item label="修改时间" name={"addTime"}>
<DatePicker showTime />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="优先级" name={"priority"}>
<InputNumber></InputNumber>
</Form.Item>
</Col>
</Row>
<Form.Item label="内容" name={"content"} rules={[
{
required: true,
message: '请输入内容'
}
]}>
{/* <MDEditor className='my-markdown ' /> */}
<MdEditor />
</Form.Item>
<Form.Item className="flex justify-end">
<Space>
<Button type="primary" htmlType="submit">
</Button>
</Space>
</Form.Item>
</Form>
</Card>
</>
}