diff --git a/src/components/postsPanel/postsPanel.module.css b/src/components/postsPanel/postsPanel.module.css
new file mode 100644
index 0000000..dc10683
--- /dev/null
+++ b/src/components/postsPanel/postsPanel.module.css
@@ -0,0 +1,38 @@
+.panel{
+    background-color: var(--card-bg);
+    height:100%;
+    width:100%;
+}
+
+.header{
+    border-bottom:1px solid var(--border-color);
+    box-shadow: 1px;
+    height:10%;
+    width:100%;
+    display:flex;
+    justify-content: space-between;
+}
+
+.header .title{
+    font:bold ;
+    color:var(--text-color);
+    
+}
+
+.header .more{
+    font:bold ;
+    color:var(--text-color);
+}
+
+.content .item{
+    display:flex;
+    justify-content:space-between;
+
+}
+.content .item .text{
+    width:70%;
+    overflow-x:hidden;
+    color:var(--text-color);
+}
+
+
diff --git a/src/components/postsPanel/postsPanel.tsx b/src/components/postsPanel/postsPanel.tsx
new file mode 100644
index 0000000..e4f87c0
--- /dev/null
+++ b/src/components/postsPanel/postsPanel.tsx
@@ -0,0 +1,40 @@
+import { useApi } from '@/hooks/request';
+import React, { useCallback } from  'react';
+import request from '@/utils/request'
+import style from './postsPanel.module.css'
+
+
+interface panelProps{
+    name:string,
+    url:string,
+    limit:number
+}
+
+const PostsPanel:React.FC<panelProps> = (props) => {
+    const fenchData = useCallback(() => request.get(props.url), [props.url])
+    const {data} = useApi(fenchData, true);
+
+
+
+    return (
+        <div className={style.panel}>
+            <div className={style.header}>
+                <span className={style.title}>{props.name}</span>
+                <span className={style.more}>更多</span>
+            </div>
+            <div className={style.content}>
+                {data && data.length > 0 ?
+                data?.map((item: { title: string; date: string }, index: number) => (
+                    <div key={index} className={style.item}>
+                        <span className={style.text}>{item.title}</span>
+                        <span>{item.date}</span>
+                    </div>
+                ))  :(
+                    <div>未查询到相关记录</div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default PostsPanel;
\ No newline at end of file