diff --git a/ui/autoMate/src/renderer/src/components/ContentItem/index.tsx b/ui/autoMate/src/renderer/src/components/ContentItem/index.tsx
new file mode 100644
index 0000000..ef7659d
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/components/ContentItem/index.tsx
@@ -0,0 +1,33 @@
+import { Delete } from '@icon-park/react';
+import dayjs from 'dayjs';
+import { useContextMenu } from 'mantine-contextmenu';
+import { NavLink, useSubmit } from 'react-router-dom'
+
+interface Props {
+    content: ContentType
+}
+export const ContentItem = ({content}: Props) => {
+const submit = useSubmit()
+const { showContextMenu } = useContextMenu();
+  return (
+    <NavLink 
+        key={content.id} 
+        to={`/config/category/contentList/${content.category_id}/content/${content.id}`}
+        className="flex justify-between items-center"
+        onContextMenu={showContextMenu([
+        {
+            key: 'remove',
+            icon: <Delete theme="outline" size="18" strokeWidth={3} />,
+            title: '删除动作',
+            onClick: () => {
+            submit({id: content.id}, {method: 'DELETE'})
+            },
+        }
+        ],
+        {className: 'contextMenu'})}
+        > 
+        <div className="truncate">{content.title}</div>
+        <div className="text-[10px] opacity-80 ">{dayjs(content.created_at).format("YY/MM/DD")}</div>
+    </NavLink>
+  )
+}
diff --git a/ui/autoMate/src/renderer/src/components/ContentSearch/index.tsx b/ui/autoMate/src/renderer/src/components/ContentSearch/index.tsx
new file mode 100644
index 0000000..50d3ad3
--- /dev/null
+++ b/ui/autoMate/src/renderer/src/components/ContentSearch/index.tsx
@@ -0,0 +1,30 @@
+import { Add } from "@icon-park/react"
+import { Form, useSubmit } from "react-router-dom"
+
+export const ContentSearch = () => {
+  const submit = useSubmit()
+  return (
+    <Form>
+    <div className="border-b px-3 flex justify-between items-center">
+    <input 
+        name="searchWord"
+        type="text" 
+        placeholder="搜索..." 
+        className="outline-none text-sm font-bold py-2 w-full"
+        onChange={(e) => {
+            submit(e.target.form)
+        }}
+    />
+    <Add
+        theme="outline"
+        size="18"
+        fill="#000000"
+        strokeWidth={2}
+        onClick={()=>{
+            submit({action: 'add'}, {method: 'post'})
+        }}
+    />
+    </div>
+    </Form>
+  )
+}
diff --git a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
index 40a1d94..e8c49ce 100644
--- a/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
+++ b/ui/autoMate/src/renderer/src/pages/ContentList/index.tsx
@@ -1,58 +1,17 @@
-import { Form, NavLink, Outlet, useLoaderData, useSubmit} from "react-router-dom"
+import {Outlet, useLoaderData} from "react-router-dom"
 import "./contentList.scss"
-import dayjs from "dayjs"
-import { Add, Delete } from "@icon-park/react"
-import { useContextMenu } from 'mantine-contextmenu';
+import { ContentSearch } from "@renderer/components/ContentSearch";
+import { ContentItem } from "@renderer/components/ContentItem";
 
 
 export const ContentList = () => {
     const contentList = useLoaderData() as ContentType[]
-    const submit = useSubmit()
-    const { showContextMenu } = useContextMenu();
+
     return (<main className="contentList-page">
         <div className="list">
-            <Form>
-            <div className="border-b px-3 flex justify-between items-center">
-            <input 
-                name="searchWord"
-                type="text" 
-                placeholder="搜索..." 
-                className="outline-none text-sm font-bold py-2 w-full"
-                onChange={(e) => {
-                    submit(e.target.form)
-                }}
-            />
-            <Add
-                theme="outline"
-                size="18"
-                fill="#000000"
-                strokeWidth={2}
-                onClick={()=>{
-                    submit({action: 'add'}, {method: 'post'})
-                }}
-            />
-            </div>
-            </Form>
+           <ContentSearch/>
             {contentList.map(content => (
-                <NavLink 
-                   key={content.id} 
-                   to={`/config/category/contentList/${content.category_id}/content/${content.id}`}
-                   className="flex justify-between items-center"
-                   onContextMenu={showContextMenu([
-                    {
-                      key: 'remove',
-                      icon: <Delete theme="outline" size="18" strokeWidth={3} />,
-                      title: '删除动作',
-                      onClick: () => {
-                        submit({id: content.id}, {method: 'DELETE'})
-                      },
-                    }
-                  ],
-                  {className: 'contextMenu'})}
-                   > 
-                   <div className="truncate">{content.title}</div>
-                   <div className="text-[10px] opacity-80 ">{dayjs(content.created_at).format("YY/MM/DD")}</div>
-                   </NavLink>
+                <ContentItem key={content.id} content={content}/>
             ))}
         </div>
         <div className="content">