diff --git a/frontend/components/Articles/Item.vue b/frontend/components/Articles/Item.vue
index 68e3a9b..c06aed4 100644
--- a/frontend/components/Articles/Item.vue
+++ b/frontend/components/Articles/Item.vue
@@ -1,36 +1,49 @@
 <script setup lang="ts">
-const props = defineProps({
-  name: String,
-  duration: String,
-  title: String,
-  summary: String,
-  tags: {
-    type: Array,
-    default: (): string[] => [],
-  },
-  topicHeat: {
-    type: Array,
-    default: (): number[] => [0, 0, 0],
-  },
-  postID: String,
-  cover: String,
-})
-const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
-  const value = item as number
-  return value > 10000 ? `${(value / 10000).toFixed(1)}w` : value
-})
+interface IAuthor {
+  name: string
+}
+interface ITagItem {
+  tag: string
+}
+interface IArticleItem {
+  id: string
+  title: string
+  viewed: number
+  liked: number
+  commented: number
+  summary: string
+  cover: string
+  createdAt: string
+  authorId: IAuthor
+  tagIds: { data: ITagItem[] }
+}
+const {
+  id,
+  authorId,
+  createdAt,
+  title,
+  summary,
+  viewed,
+  liked,
+  commented,
+  cover,
+  tagIds,
+} = defineProps<IArticleItem>()
+const format = (num: number) => {
+  return num > 10000 ? `${(num / 10000).toFixed(1)}w` : num
+}
 </script>
 
 <template>
   <li class="flex justify-between items-center py-4 transition-all bg-white hover:bg-[#FAFAFA] b-b b-grey all-cursor-pointer">
-    <NuxtLink class="flex-1 pl-5 truncate" :to="`/${name}`">
+    <NuxtLink class="flex-1 pl-5 truncate" :to="`/article/${id}`">
       <div class="flex items-center pr-4 text-[13px]">
-        <span class="text-[#4E5968] px-3 border-r-1 pl-0">{{ name }}</span>
-        <span class="text-[#86909c] px-3 border-r-1">{{ duration }}</span>
+        <span class="text-[#4E5968] px-3 border-r-1 pl-0">{{ authorId.name }}</span>
+        <span class="text-[#86909c] px-3 border-r-1">{{ formatTime(createdAt) }}</span>
         <div class="flex px-3">
-          <div v-for="(tag, index) in tags" :key="index" class="items-center flex">
-            <span class="px-0 text-[#86909c]">{{ tag }}</span>
-            <div v-if="index !== tags.length - 1" class="i-carbon-circle-solid px-2 text-[0.15rem]" />
+          <div v-for="(item, index) of tagIds.data" :key="item.tag" class="items-center flex">
+            <span class="px-0 text-[#86909c]">{{ item.tag }}</span>
+            <div v-if="index !== tagIds.data.length - 1" class="i-carbon-circle-solid px-2 text-[0.15rem]" />
           </div>
         </div>
       </div>
@@ -45,20 +58,21 @@ const enteredtopicHeat: (string | number)[] = props.topicHeat.map((item) => {
       <div class="flex all-flex all-items-center all-text-[#4e5969] all-text-[13px]">
         <div>
           <div class="i-carbon-view" />
-          <span class="pl-2">{{ enteredtopicHeat[0] ? enteredtopicHeat[0] : '观看' }}</span>
+          <span class="pl-2">{{ viewed ? format(viewed) : '观看' }}</span>
         </div>
         <div class="mx-7">
           <div class="i-carbon-thumbs-up" />
-          <span class="pl-2">{{ enteredtopicHeat[1] ? enteredtopicHeat[1] : '点赞' }}</span>
+          <span class="pl-2">{{ liked[1] ? format(liked) : '点赞' }}</span>
         </div>
         <div>
           <div class="i-carbon-chat" />
-          <span class="pl-2">{{ enteredtopicHeat[2] ? enteredtopicHeat[2] : '评论' }}</span>
+          <span class="pl-2">{{ commented[2] ? format(commented) : '评论' }}</span>
         </div>
       </div>
     </NuxtLink>
     <div class="px-4">
       <nuxt-img
+        v-if="cover"
         :src="cover"
         :alt="summary"
         width="120"
diff --git a/frontend/components/Articles/index.vue b/frontend/components/Articles/index.vue
index 0a543e3..45079f5 100644
--- a/frontend/components/Articles/index.vue
+++ b/frontend/components/Articles/index.vue
@@ -33,9 +33,10 @@ onUnmounted(() => {
     <ArticlesNavigation />
     <ul v-if="!isLoading">
       <ArticlesItem
-        v-for="item in artlistData" :key="item.id" :name="item.name" :duration="item.duration"
-        :title="item.title" :summary="item.summary" :tags="item.tagIds" :topic-heat="item.topicHeat"
-        :cover="item.cover"
+        v-for="item in artlistData" :id="item.id" :key="item.id" :author-id="item.authorId"
+        :created-at="item.createdAt" :title="item.title" :summary="item.summary"
+        :viewed="item.viewed" :liked="item.liked" :commented="item.commented" :cover="item.cover"
+        :tag-ids="item.tagIds"
       />
     </ul>
     <ArticlesSkeleton v-else />
diff --git a/frontend/composables/useFetchPostData.ts b/frontend/composables/useFetchPostData.ts
index 33607ea..a1b1cbe 100644
--- a/frontend/composables/useFetchPostData.ts
+++ b/frontend/composables/useFetchPostData.ts
@@ -1,7 +1,5 @@
-import type { Ref } from 'vue'
-import type { LocationQueryValue } from 'vue-router'
-import type { IArticleItem, IPanel } from '~~/types/IPanel'
-function formatTime(createdAt: string) {
+import type { IArticleItem } from '~~/types/IArticleItem'
+export function formatTime(createdAt: string): string {
   const created = new Date(createdAt)
   const now = new Date()
   const duration = (now.getTime() - created.getTime()) / 1000 / 60
@@ -18,25 +16,7 @@ function formatTime(createdAt: string) {
     ans = `${(duration / 60 / 24 / 30 / 365).toFixed(0)}年前`
   return ans
 }
-function formatArtlist(artlistData: Ref<IArticleItem[]>): IPanel[] {
-  return artlistData.value.map((item: IArticleItem) => {
-    const tagIds: string[] = []
-    item.tagIds.data.forEach((sub) => {
-      tagIds.push(sub.tag)
-    })
-    return {
-      id: item.id,
-      title: item.title,
-      topicHeat: [item.viewed, item.liked, item.commented],
-      summary: item.summary,
-      cover: item.cover,
-      duration: formatTime(item.createdAt),
-      tagIds,
-      name: item.authorId.name,
-    }
-  })
-}
-export const useArtlist = (data: IPanel[]) => useState('artlist', () => [...data] as IPanel[])
+export const useArtlist = (data: IArticleItem[]) => useState('artlist', () => [...data] as IArticleItem[])
 export const useArtlistPath = (path?: string | undefined) => useState('artlistPath', () => {
   if (path === undefined)
     return ''
@@ -44,11 +24,11 @@ export const useArtlistPath = (path?: string | undefined) => useState('artlistPa
 })
 export default async (
   type?: string,
-  sort: LocationQueryValue | LocationQueryValue[] | string = 'recommended',
+  sort: any = 'recommended',
   pagenum = 1,
-): Promise<IPanel[]> => {
+): Promise<IArticleItem[]> => {
   type = type || '/'
   const { data } = await useFetch(`/api/articles/list?sort=${sort}&type=${type.replace('/', '')}&pageNum=${pagenum}`)
   // 数据内容
-  return formatArtlist(data)
+  return data.value
 }
diff --git a/frontend/types/IPanel.ts b/frontend/types/IArticleItem.ts
similarity index 65%
rename from frontend/types/IPanel.ts
rename to frontend/types/IArticleItem.ts
index a88ac4c..76b3848 100644
--- a/frontend/types/IPanel.ts
+++ b/frontend/types/IArticleItem.ts
@@ -18,17 +18,6 @@ interface IArticleItem {
   authorId: IAuthor
   tagIds: { data: ITagItem[] }
 }
-interface IPanel {
-  id: string
-  title: string
-  topicHeat: number[]
-  summary: string
-  cover: string
-  duration: string
-  tagIds: string[]
-  name: string
-}
 export {
   IArticleItem,
-  IPanel,
 }