功能：完成说说管理

src/components/RouteList/index.tsx

@@ -4,6 +4,7 @@ import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
 
 import Home from '@/pages/Dashboard';
 import Create from '@/pages/Create';
+import CreateRecord from '@/pages/CreateRecord';
 import Cate from '@/pages/Cate';
 import Article from '@/pages/Article';
 import Comment from '@/pages/Comment';
@@ -42,6 +43,7 @@ export default () => {
     const routesAll = [
         { path: "/", title: "仪表盘", component: <Home /> },
         { path: "/create", title: "发挥灵感", component: <Create /> },
+        { path: "/create_record", title: "闪念", component: <CreateRecord /> },
         { path: "/draft", title: "草稿箱", component: <Draft /> },
         { path: "/recycle", title: "回收站", component: <Decycle /> },
         { path: "/cate", title: "分类管理", component: <Cate /> },

src/components/Sidebar/index.tsx

@@ -5,7 +5,6 @@ import SidebarLinkGroup from './SidebarLinkGroup';
 import { BiEditAlt, BiFolderOpen, BiHomeSmile, BiSliderAlt, BiShieldQuarter, BiCategoryAlt, BiBug } from "react-icons/bi";
 import { LiaRssSolid } from "react-icons/lia";
 import { TbBrandAirtable } from "react-icons/tb";
-import { RiDraftLine } from "react-icons/ri";
 
 import { useUserStore } from '@/stores';
 import { getRouteListAPI } from '@/api/Role'

src/pages/CreateRecord/index.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+import { Button, Card, Image, message } from "antd"
+import TextArea from "antd/es/input/TextArea"
+
+import { addRecordDataAPI, editRecordDataAPI, getRecordDataAPI } from '@/api/Record'
+
+import FileUpload from "@/components/FileUpload";
+import Title from "@/components/Title"
+import { titleSty } from "@/styles/sty"
+
+import { BiLogoTelegram } from "react-icons/bi";
+import { LuImagePlus } from "react-icons/lu";
+import { RiDeleteBinLine } from "react-icons/ri";
+
+export default () => {
+    const [params] = useSearchParams()
+    const id = +params.get('id')!
+    const navigate = useNavigate()
+
+    const [content, setContent] = useState("")
+    /**
+     * imageLiat 你想干嘛
+     */
+    const [imageList, setImageList] = useState<string[]>([])
+
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+    // 删除图片
+    const handleDelImage = (data: string) => {
+        setImageList(imageList.filter(item => item != data))
+    }
+
+    const onSubmit = async () => {
+        const data = {
+            content,
+            images: JSON.stringify(imageList),
+            createTime: new Date().getTime().toString()
+        }
+
+        if (!content.trim().length) {
+            message.error("请输入内容")
+            return
+        }
+
+        if (id) {
+            await editRecordDataAPI({ id, ...data })
+        } else {
+            await addRecordDataAPI(data)
+        }
+
+        navigate("/record")
+    }
+
+    const getRecordData = async () => {
+        const { data } = await getRecordDataAPI(id)
+        console.log(data, 222);
+        setContent(data.content)
+        setImageList(JSON.parse(data.images as string))
+    }
+
+    // 回显数据
+    useEffect(() => {
+        // 有Id就回显指定的数据
+        if (id) getRecordData()
+    }, [id])
+
+    return (
+        <>
+            <Title value="闪念" />
+
+            <Card className={`${titleSty} min-h-[calc(100vh-250px)]`}>
+                <div className="relative flex w-[800px] mx-auto mt-[50px]">
+                    <TextArea
+                        rows={10}
+                        maxLength={500}
+                        placeholder="记录此刻！"
+                        value={content}
+                        onChange={(e) => setContent(e.target.value)}
+                        className="w-[800px] p-4 border-2 border-[#eee] text-base rounded-md" />
+
+                    {imageList.length
+                        ? (
+                            <div className="absolute bottom-4 left-4 flex space-x-2">
+                                {
+                                    imageList.map((item, index) => (
+                                        <div key={index} className="group overflow-hidden relative">
+                                            <div className="absolute top-0 -right-6 group-hover:right-0 z-10 bg-slate-600 rounded-full cursor-pointer p-1" onClick={() => handleDelImage(item)}>
+                                                <RiDeleteBinLine className="text-white" />
+                                            </div>
+
+                                            <Image
+                                                key={index}
+                                                src={item}
+                                                width={100}
+                                                height={100}
+                                                preview={false}
+                                                className='absolute top-0 left-0 rounded-lg'
+                                            />
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        )
+                        : <LuImagePlus className="absolute bottom-4 left-4 text-4xl text-slate-700 hover:text-primary cursor-pointer" onClick={() => setIsModalOpen(true)} />}
+
+                    <Button type="primary" size="large" icon={<BiLogoTelegram className="text-xl" />} className="absolute bottom-4 right-4" onClick={onSubmit} />
+                </div>
+            </Card>
+
+            <FileUpload
+                dir="record"
+                open={isModalOpen}
+                onSuccess={(url: string[]) => setImageList(url)}
+                onCancel={() => setIsModalOpen(false)}
+            />
+        </>
+    )
+}

src/pages/Record/index.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, DatePicker } from 'antd';
+import { Table, Button, Image, notification, Card, Popconfirm, Form, Input, DatePicker } from 'antd';
 import { titleSty } from '@/styles/sty'
 import Title from '@/components/Title';
 import { Link } from 'react-router-dom';
@@ -67,7 +67,19 @@ const RecordPage = () => {
       key: 'images',
       align: 'center',
       width: 250,
-      render: (text: string) => <Tag>{text}</Tag>,
+      render: (text: string) => {
+        const list: string[] = JSON.parse(text || '[]')
+
+        return (
+          <div className='flex space-x-2'>
+            {
+              list.map((item, index) => (
+                <Image key={index} src={item} width={70} height={70} className='rounded-lg' />
+              ))
+            }
+          </div>
+        )
+      },
     },
     {
       title: '发布时间',

src/types/app/record.d.ts

@@ -1,5 +1,5 @@
 export interface Record {
-    id: number,
+    id?: number,
     content: string,
     images: string | string[],
     createTime?: string | Dayjs;