72 lines
2.5 KiB
TypeScript
72 lines
2.5 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, Form, Grid, Input, Row, Upload } from 'antd';
|
|
import dynamic from 'next/dynamic';
|
|
import { useRouter } from 'next/navigation'
|
|
|
|
import { useState } from 'react';
|
|
const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
|
|
export default function Page() {
|
|
const router = useRouter()
|
|
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>>
|
|
<Row gutter={24}>
|
|
|
|
<Col span={12}>
|
|
<Form.Item label="标题" name={"title"} >
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label="副标题" name={"description"}>
|
|
<Input />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item label="链接" name={"link"}>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item label="封面" name={"cover"}>
|
|
<ImageUpload
|
|
accept="image/*"
|
|
width={80}
|
|
height={80}
|
|
></ImageUpload>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
|
|
|
|
<Form.Item label="内容" name={"content"}>
|
|
<MDEditor extraCommands={[
|
|
{
|
|
name: 'image',
|
|
icon: <span>1</span>, // 可以使用图标库的图标
|
|
execute: () => {
|
|
|
|
}, // 点击时调用插入图片的函数
|
|
},
|
|
]} />
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
</Card>
|
|
</>
|
|
} |