diff --git a/src/components/entity/Entity.vue b/src/components/entity/Entity.vue
new file mode 100644
index 00000000..483d54f6
--- /dev/null
+++ b/src/components/entity/Entity.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { IconMore, VSpace } from "@halo-dev/components";
+withDefaults(
+  defineProps<{
+    isSelected?: boolean;
+  }>(),
+  {
+    isSelected: false,
+  }
+);
+</script>
+
+<template>
+  <div
+    :class="{
+      'bg-gray-100': isSelected,
+    }"
+    class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+  >
+    <div
+      v-show="isSelected"
+      class="absolute inset-y-0 left-0 w-0.5 bg-primary"
+    ></div>
+    <slot name="prepend" />
+    <div class="relative flex flex-row items-center">
+      <div v-if="$slots.checkbox" class="mr-4 hidden items-center sm:flex">
+        <slot name="checkbox" />
+      </div>
+      <div class="flex flex-1 items-center gap-4">
+        <slot name="start" />
+      </div>
+      <div
+        class="flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+      >
+        <slot name="end" />
+      </div>
+      <div v-if="$slots.menuItems" class="ml-4 inline-flex items-center">
+        <FloatingDropdown>
+          <div
+            class="cursor-pointer rounded p-1 transition-all hover:text-blue-600 group-hover:bg-gray-100"
+          >
+            <IconMore />
+          </div>
+          <template #popper>
+            <div class="w-48 p-2">
+              <VSpace class="w-full" direction="column">
+                <slot name="menuItems"></slot>
+              </VSpace>
+            </div>
+          </template>
+        </FloatingDropdown>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/entity/EntityField.vue b/src/components/entity/EntityField.vue
new file mode 100644
index 00000000..9fb40fc7
--- /dev/null
+++ b/src/components/entity/EntityField.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { RouteLocationRaw } from "vue-router";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    route?: RouteLocationRaw;
+  }>(),
+  {
+    title: undefined,
+    description: undefined,
+    route: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  (event: "click"): void;
+}>();
+</script>
+
+<template>
+  <div class="inline-flex flex-col gap-1">
+    <div
+      v-if="title || $slots.title"
+      class="inline-flex flex-col items-center sm:flex-row"
+    >
+      <slot name="title">
+        <div
+          class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
+          @click="emit('click')"
+        >
+          <RouterLink v-if="route" :to="route">
+            {{ title }}
+          </RouterLink>
+          <span v-else>
+            {{ title }}
+          </span>
+        </div>
+        <slot name="extra" />
+      </slot>
+    </div>
+    <div
+      v-if="description || $slots.description"
+      class="inline-flex items-center"
+    >
+      <slot name="description">
+        <span v-if="description" class="text-xs text-gray-500">
+          {{ description }}
+        </span>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 3eafb259..30317bc4 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -7,7 +7,6 @@ import {
   IconDatabase2Line,
   IconGrid,
   IconList,
-  IconSettings,
   IconUpload,
   VButton,
   VCard,
@@ -36,6 +35,8 @@ import cloneDeep from "lodash.clonedeep";
 import { isImage } from "@/utils/image";
 import { useRouteQuery } from "@vueuse/router";
 import { useFetchAttachmentGroup } from "./composables/use-attachment-group";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 const policyVisible = ref(false);
 const uploadVisible = ref(false);
@@ -555,47 +556,35 @@ onMounted(() => {
               role="list"
             >
               <li v-for="(attachment, index) in attachments.items" :key="index">
-                <div
-                  :class="{
-                    'bg-gray-100': isChecked(attachment),
-                  }"
-                  class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-                >
-                  <div
-                    v-show="isChecked(attachment)"
-                    class="absolute inset-y-0 left-0 w-0.5 bg-primary"
-                  ></div>
-                  <div class="relative flex flex-row items-center">
-                    <div class="mr-4 hidden items-center sm:flex">
-                      <input
-                        :checked="selectedAttachments.has(attachment)"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                        @click="handleSelect(attachment)"
-                      />
-                    </div>
-                    <div class="mr-4">
-                      <div
-                        class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm"
-                      >
-                        <AttachmentFileTypeIcon
-                          :display-ext="false"
-                          :file-name="attachment.spec.displayName"
-                          :width="8"
-                          :height="8"
-                        />
-                      </div>
-                    </div>
-                    <div class="flex-1">
-                      <div class="flex flex-col sm:flex-row">
-                        <span
-                          class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                          @click="handleClickItem(attachment)"
+                <Entity :is-selected="isChecked(attachment)">
+                  <template #checkbox>
+                    <input
+                      :checked="selectedAttachments.has(attachment)"
+                      class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                      type="checkbox"
+                      @click="handleSelect(attachment)"
+                    />
+                  </template>
+                  <template #start>
+                    <EntityField>
+                      <template #description>
+                        <div
+                          class="h-10 w-10 rounded border bg-white p-1 hover:shadow-sm"
                         >
-                          {{ attachment.spec.displayName }}
-                        </span>
-                      </div>
-                      <div class="mt-1 flex">
+                          <AttachmentFileTypeIcon
+                            :display-ext="false"
+                            :file-name="attachment.spec.displayName"
+                            :width="8"
+                            :height="8"
+                          />
+                        </div>
+                      </template>
+                    </EntityField>
+                    <EntityField
+                      :title="attachment.spec.displayName"
+                      @click="handleClickItem(attachment)"
+                    >
+                      <template #description>
                         <VSpace>
                           <span class="text-xs text-gray-500">
                             {{ attachment.spec.mediaType }}
@@ -604,54 +593,50 @@ onMounted(() => {
                             {{ prettyBytes(attachment.spec.size || 0) }}
                           </span>
                         </VSpace>
-                      </div>
-                    </div>
-                    <div class="flex">
-                      <div
-                        class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                      >
-                        <span class="text-sm text-gray-500">
-                          {{ getPolicyName(attachment.spec.policyRef?.name) }}
-                        </span>
+                      </template>
+                    </EntityField>
+                  </template>
+                  <template #end>
+                    <EntityField
+                      :description="
+                        getPolicyName(attachment.spec.policyRef?.name)
+                      "
+                    />
+                    <EntityField>
+                      <template #description>
                         <RouterLink
                           :to="{
                             name: 'UserDetail',
                             params: { name: attachment.spec.uploadedBy?.name },
                           }"
+                          class="text-xs text-gray-500"
                         >
-                          <span class="text-sm text-gray-500">
-                            {{ attachment.spec.uploadedBy?.name }}
-                          </span>
+                          {{ attachment.spec.uploadedBy?.name }}
                         </RouterLink>
-                        <FloatingTooltip
-                          v-if="attachment.metadata.deletionTimestamp"
-                          class="hidden items-center sm:flex"
+                      </template>
+                    </EntityField>
+                    <EntityField v-if="attachment.metadata.deletionTimestamp">
+                      <template #description>
+                        <div
+                          v-tooltip="`删除中`"
+                          class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
                         >
-                          <div
-                            class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
-                          >
-                            <span
-                              class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-                            ></span>
-                          </div>
-                          <template #popper> 删除中</template>
-                        </FloatingTooltip>
-                        <time class="text-sm text-gray-500">
-                          {{
-                            formatDatetime(
-                              attachment.metadata.creationTimestamp
-                            )
-                          }}
-                        </time>
-                        <span class="cursor-pointer">
-                          <IconSettings
-                            @click.stop="handleClickItem(attachment)"
-                          />
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+                          <span
+                            class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                          ></span>
+                        </div>
+                      </template>
+                    </EntityField>
+                    <EntityField
+                      :description="
+                        formatDatetime(attachment.metadata.creationTimestamp)
+                      "
+                    />
+                  </template>
+                  <template #menuItems>
+                    <VButton v-close-popper block type="danger"> 删除 </VButton>
+                  </template>
+                </Entity>
               </li>
             </ul>
           </div>
diff --git a/src/modules/contents/pages/FunctionalPageList.vue b/src/modules/contents/pages/FunctionalPageList.vue
index 39a8b152..7fe9bfc4 100644
--- a/src/modules/contents/pages/FunctionalPageList.vue
+++ b/src/modules/contents/pages/FunctionalPageList.vue
@@ -3,6 +3,8 @@ import { ref } from "vue";
 import { VEmpty, VSpace, VButton, IconAddCircle } from "@halo-dev/components";
 import type { PagesPublicState } from "@halo-dev/admin-shared";
 import { useExtensionPointsState } from "@/composables/usePlugins";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 const pagesPublicState = ref<PagesPublicState>({
   functionalPages: [],
@@ -38,27 +40,15 @@ useExtensionPointsState("PAGES", pagesPublicState);
       :key="index"
       v-permission="page.permissions"
     >
-      <div
-        class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-      >
-        <div class="relative flex flex-row items-center">
-          <div class="flex-1">
-            <div class="flex">
-              <RouterLink
-                :to="page.path"
-                class="truncate text-sm font-medium text-gray-900"
-              >
-                {{ page.name }}
-              </RouterLink>
-            </div>
-            <div class="mt-1 flex">
-              <span class="text-xs text-gray-500">
-                {{ page.url }}
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
+      <Entity>
+        <template #start>
+          <EntityField
+            :title="page.name"
+            :route="page.path"
+            :description="page.url"
+          ></EntityField>
+        </template>
+      </Entity>
     </li>
   </ul>
 </template>
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 56e3f675..fc40001a 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -3,7 +3,6 @@ import {
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconSettings,
   IconEye,
   IconEyeOff,
   IconTeam,
@@ -30,6 +29,8 @@ import { apiClient } from "@halo-dev/admin-shared";
 import { formatDatetime } from "@/utils/date";
 import { RouterLink } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
+import Entity from "../../../components/entity/Entity.vue";
+import EntityField from "../../../components/entity/EntityField.vue";
 
 enum SinglePagePhase {
   DRAFT = "未发布",
@@ -332,68 +333,47 @@ const handleSelectUser = (user?: User) => {
       role="list"
     >
       <li v-for="(singlePage, index) in singlePages.items" :key="index">
-        <div
-          :class="{
-            'bg-gray-100': checkAll,
-          }"
-          class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-        >
-          <div
-            v-show="checkAll"
-            class="absolute inset-y-0 left-0 w-0.5 bg-primary"
-          ></div>
-          <div class="relative flex flex-row items-center">
-            <div class="mr-4 hidden items-center sm:flex">
-              <input
-                v-model="checkAll"
-                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                type="checkbox"
-              />
-            </div>
-            <div class="flex-1">
-              <div class="flex flex-row items-center">
+        <Entity :is-selected="checkAll">
+          <template #checkbox>
+            <input
+              v-model="checkAll"
+              class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+              type="checkbox"
+            />
+          </template>
+          <template #start>
+            <EntityField
+              :title="singlePage.page.spec.title"
+              :description="singlePage.page.status?.permalink"
+              :route="{
+                name: 'SinglePageEditor',
+                query: { name: singlePage.page.metadata.name },
+              }"
+            >
+              <template #extra>
                 <RouterLink
+                  v-if="singlePage.page.status?.inProgress"
+                  v-tooltip="`当前有内容已保存，但还未发布。`"
                   :to="{
                     name: 'SinglePageEditor',
                     query: { name: singlePage.page.metadata.name },
                   }"
+                  class="flex items-center"
                 >
-                  <span class="truncate text-sm font-medium text-gray-900">
-                    {{ singlePage.page.spec.title }}
-                  </span>
-                </RouterLink>
-                <FloatingTooltip
-                  v-if="singlePage.page.status?.inProgress"
-                  class="hidden items-center sm:flex"
-                >
-                  <RouterLink
-                    :to="{
-                      name: 'SinglePageEditor',
-                      query: { name: singlePage.page.metadata.name },
-                    }"
-                    class="flex items-center"
+                  <div
+                    class="inline-flex h-1.5 w-1.5 rounded-full bg-orange-600"
                   >
-                    <div
-                      class="inline-flex h-1.5 w-1.5 rounded-full bg-orange-600"
-                    >
-                      <span
-                        class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-orange-600"
-                      ></span>
-                    </div>
-                  </RouterLink>
-                  <template #popper> 当前有内容已保存，但还未发布。 </template>
-                </FloatingTooltip>
-              </div>
-              <div class="mt-1 flex">
-                <span class="text-xs text-gray-500">
-                  {{ singlePage.page.status?.permalink }}
-                </span>
-              </div>
-            </div>
-            <div class="flex">
-              <div
-                class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-              >
+                    <span
+                      class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-orange-600"
+                    ></span>
+                  </div>
+                </RouterLink>
+              </template>
+            </EntityField>
+          </template>
+          <template #end>
+            <EntityField>
+              <template #description>
                 <RouterLink
                   v-for="(
                     contributor, contributorIndex
@@ -413,64 +393,53 @@ const handleSelectUser = (user?: User) => {
                     circle
                   ></VAvatar>
                 </RouterLink>
-                <span class="text-sm text-gray-500">
-                  {{ finalStatus(singlePage.page) }}
-                </span>
-                <span>
-                  <IconEye
-                    v-if="singlePage.page.spec.visible === 'PUBLIC'"
-                    v-tooltip="`公开访问`"
-                    class="cursor-pointer text-sm transition-all hover:text-blue-600"
-                  />
-                  <IconEyeOff
-                    v-if="singlePage.page.spec.visible === 'PRIVATE'"
-                    v-tooltip="`私有访问`"
-                    class="cursor-pointer text-sm transition-all hover:text-blue-600"
-                  />
-                  <IconTeam
-                    v-if="singlePage.page.spec.visible === 'INTERNAL'"
-                    v-tooltip="`内部成员可访问`"
-                    class="cursor-pointer text-sm transition-all hover:text-blue-600"
-                  />
-                </span>
-                <time class="text-sm text-gray-500">
-                  {{
-                    formatDatetime(singlePage.page.metadata.creationTimestamp)
-                  }}
-                </time>
-                <span>
-                  <FloatingDropdown>
-                    <IconSettings
-                      class="cursor-pointer transition-all hover:text-blue-600"
-                    />
-                    <template #popper>
-                      <div class="w-48 p-2">
-                        <VSpace class="w-full" direction="column">
-                          <VButton
-                            v-close-popper
-                            block
-                            type="secondary"
-                            @click="handleOpenSettingModal(singlePage.page)"
-                          >
-                            设置
-                          </VButton>
-                          <VButton
-                            v-close-popper
-                            block
-                            type="danger"
-                            @click="handleDelete(singlePage.page)"
-                          >
-                            删除
-                          </VButton>
-                        </VSpace>
-                      </div>
-                    </template>
-                  </FloatingDropdown>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+              </template>
+            </EntityField>
+            <EntityField :description="finalStatus(singlePage.page)" />
+            <EntityField>
+              <template #description>
+                <IconEye
+                  v-if="singlePage.page.spec.visible === 'PUBLIC'"
+                  v-tooltip="`公开访问`"
+                  class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                />
+                <IconEyeOff
+                  v-if="singlePage.page.spec.visible === 'PRIVATE'"
+                  v-tooltip="`私有访问`"
+                  class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                />
+                <IconTeam
+                  v-if="singlePage.page.spec.visible === 'INTERNAL'"
+                  v-tooltip="`内部成员可访问`"
+                  class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                />
+              </template>
+            </EntityField>
+            <EntityField
+              :description="
+                formatDatetime(singlePage.page.metadata.creationTimestamp)
+              "
+            />
+          </template>
+          <template #menuItems>
+            <VButton
+              v-close-popper
+              block
+              type="secondary"
+              @click="handleOpenSettingModal(singlePage.page)"
+            >
+              设置
+            </VButton>
+            <VButton
+              v-close-popper
+              block
+              type="danger"
+              @click="handleDelete(singlePage.page)"
+            >
+              删除
+            </VButton>
+          </template>
+        </Entity>
       </li>
     </ul>
 
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index daa24466..03cb69bf 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -7,7 +7,6 @@ import {
   IconBookRead,
   IconEye,
   IconEyeOff,
-  IconSettings,
   IconTeam,
   IconCloseCircle,
   useDialog,
@@ -21,6 +20,8 @@ import {
 } from "@halo-dev/components";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
 import PostSettingModal from "./components/PostSettingModal.vue";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 import PostTag from "../posts/tags/components/PostTag.vue";
 import { onMounted, ref, watch, watchEffect } from "vue";
 import type {
@@ -738,64 +739,43 @@ function handleContributorFilterItemChange(user?: User) {
         role="list"
       >
         <li v-for="(post, index) in posts.items" :key="index">
-          <div
-            :class="{
-              'bg-gray-100': checkSelection(post.post),
-            }"
-            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-          >
-            <div
-              v-show="checkSelection(post.post)"
-              class="absolute inset-y-0 left-0 w-0.5 bg-primary"
-            ></div>
-            <div class="relative flex flex-row items-center">
-              <div class="mr-4 hidden items-center sm:flex">
-                <input
-                  v-model="selectedPostNames"
-                  :value="post.post.metadata.name"
-                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                  name="post-checkbox"
-                  type="checkbox"
-                />
-              </div>
-              <div class="flex-1">
-                <div class="flex flex-col items-center sm:flex-row">
-                  <RouterLink
-                    :to="{
-                      name: 'PostEditor',
-                      query: { name: post.post.metadata.name },
-                    }"
-                  >
-                    <span
-                      class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                    >
-                      {{ post.post.spec.title }}
-                    </span>
-                  </RouterLink>
+          <Entity :is-selected="checkSelection(post.post)">
+            <template #checkbox>
+              <input
+                v-model="selectedPostNames"
+                :value="post.post.metadata.name"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                name="post-checkbox"
+                type="checkbox"
+              />
+            </template>
+            <template #start>
+              <EntityField
+                :title="post.post.spec.title"
+                :route="{
+                  name: 'PostEditor',
+                  query: { name: post.post.metadata.name },
+                }"
+              >
+                <template #extra>
                   <VSpace class="mt-1 sm:mt-0">
-                    <FloatingTooltip
+                    <RouterLink
                       v-if="post.post.status?.inProgress"
-                      class="hidden items-center sm:flex"
+                      v-tooltip="`当前有内容已保存，但还未发布。`"
+                      :to="{
+                        name: 'PostEditor',
+                        query: { name: post.post.metadata.name },
+                      }"
+                      class="flex items-center"
                     >
-                      <RouterLink
-                        :to="{
-                          name: 'PostEditor',
-                          query: { name: post.post.metadata.name },
-                        }"
-                        class="flex items-center"
+                      <div
+                        class="inline-flex h-1.5 w-1.5 rounded-full bg-orange-600"
                       >
-                        <div
-                          class="inline-flex h-1.5 w-1.5 rounded-full bg-orange-600"
-                        >
-                          <span
-                            class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-orange-600"
-                          ></span>
-                        </div>
-                      </RouterLink>
-                      <template #popper>
-                        当前有内容已保存，但还未发布。
-                      </template>
-                    </FloatingTooltip>
+                        <span
+                          class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-orange-600"
+                        ></span>
+                      </div>
+                    </RouterLink>
                     <PostTag
                       v-for="(tag, tagIndex) in post.tags"
                       :key="tagIndex"
@@ -803,8 +783,8 @@ function handleContributorFilterItemChange(user?: User) {
                       route
                     ></PostTag>
                   </VSpace>
-                </div>
-                <div class="mt-1 flex">
+                </template>
+                <template #description>
                   <VSpace>
                     <p
                       v-if="post.categories.length"
@@ -821,12 +801,12 @@ function handleContributorFilterItemChange(user?: User) {
                     <span class="text-xs text-gray-500">访问量 0</span>
                     <span class="text-xs text-gray-500"> 评论 0 </span>
                   </VSpace>
-                </div>
-              </div>
-              <div class="flex">
-                <div
-                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                >
+                </template>
+              </EntityField>
+            </template>
+            <template #end>
+              <EntityField>
+                <template #description>
                   <RouterLink
                     v-for="(contributor, contributorIndex) in post.contributors"
                     :key="contributorIndex"
@@ -844,62 +824,53 @@ function handleContributorFilterItemChange(user?: User) {
                       circle
                     ></VAvatar>
                   </RouterLink>
-                  <span class="text-sm text-gray-500">
-                    {{ finalStatus(post.post) }}
-                  </span>
-                  <span>
-                    <IconEye
-                      v-if="post.post.spec.visible === 'PUBLIC'"
-                      v-tooltip="`公开访问`"
-                      class="cursor-pointer text-sm transition-all hover:text-blue-600"
-                    />
-                    <IconEyeOff
-                      v-if="post.post.spec.visible === 'PRIVATE'"
-                      v-tooltip="`私有访问`"
-                      class="cursor-pointer text-sm transition-all hover:text-blue-600"
-                    />
-                    <IconTeam
-                      v-if="post.post.spec.visible === 'INTERNAL'"
-                      v-tooltip="`内部成员可访问`"
-                      class="cursor-pointer text-sm transition-all hover:text-blue-600"
-                    />
-                  </span>
-                  <time class="text-sm text-gray-500">
-                    {{ formatDatetime(post.post.metadata.creationTimestamp) }}
-                  </time>
-                  <span>
-                    <FloatingDropdown>
-                      <IconSettings
-                        class="cursor-pointer transition-all hover:text-blue-600"
-                      />
-                      <template #popper>
-                        <div class="w-48 p-2">
-                          <VSpace class="w-full" direction="column">
-                            <VButton
-                              v-close-popper
-                              block
-                              type="secondary"
-                              @click="handleOpenSettingModal(post.post)"
-                            >
-                              设置
-                            </VButton>
-                            <VButton
-                              v-close-popper
-                              block
-                              type="danger"
-                              @click="handleDelete(post.post)"
-                            >
-                              删除
-                            </VButton>
-                          </VSpace>
-                        </div>
-                      </template>
-                    </FloatingDropdown>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+                </template>
+              </EntityField>
+              <EntityField :description="finalStatus(post.post)"></EntityField>
+              <EntityField>
+                <template #description>
+                  <IconEye
+                    v-if="post.post.spec.visible === 'PUBLIC'"
+                    v-tooltip="`公开访问`"
+                    class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                  />
+                  <IconEyeOff
+                    v-if="post.post.spec.visible === 'PRIVATE'"
+                    v-tooltip="`私有访问`"
+                    class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                  />
+                  <IconTeam
+                    v-if="post.post.spec.visible === 'INTERNAL'"
+                    v-tooltip="`内部成员可访问`"
+                    class="cursor-pointer text-sm transition-all hover:text-blue-600"
+                  />
+                </template>
+              </EntityField>
+              <EntityField
+                :description="
+                  formatDatetime(post.post.metadata.creationTimestamp)
+                "
+              />
+            </template>
+            <template #menuItems>
+              <VButton
+                v-close-popper
+                block
+                type="secondary"
+                @click="handleOpenSettingModal(post.post)"
+              >
+                设置
+              </VButton>
+              <VButton
+                v-close-popper
+                block
+                type="danger"
+                @click="handleDelete(post.post)"
+              >
+                删除
+              </VButton>
+            </template>
+          </Entity>
         </li>
       </ul>
 
diff --git a/src/modules/contents/posts/categories/components/CategoryListItem.vue b/src/modules/contents/posts/categories/components/CategoryListItem.vue
index 31aa1349..002db8cc 100644
--- a/src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { IconList, IconSettings, VButton, VSpace } from "@halo-dev/components";
+import { IconList, VButton } from "@halo-dev/components";
 import Draggable from "vuedraggable";
 import type { CategoryTree } from "../utils";
 import { ref } from "vue";
 import { formatDatetime } from "@/utils/date";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 withDefaults(
   defineProps<{
@@ -49,86 +51,59 @@ function onDelete(category: CategoryTree) {
   >
     <template #item="{ element: category }">
       <li>
-        <div
-          class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-        >
-          <div
-            class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
-          >
-            <IconList class="h-3.5 w-3.5" />
-          </div>
-          <div class="relative flex flex-row items-center">
-            <div class="flex-1">
-              <div class="flex flex-col sm:flex-row">
-                <span
-                  class="mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2"
-                >
-                  {{ category.spec.displayName }}
-                </span>
-                <VSpace class="mt-1 sm:mt-0"></VSpace>
-              </div>
-              <div class="mt-1 flex">
-                <span class="text-xs text-gray-500">
-                  {{ category.status.permalink }}
-                </span>
-              </div>
+        <Entity>
+          <template #prepend>
+            <div
+              class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
+            >
+              <IconList class="h-3.5 w-3.5" />
             </div>
-            <div class="flex">
-              <div
-                class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-              >
-                <FloatingTooltip
-                  v-if="category.metadata.deletionTimestamp"
-                  class="mr-4 hidden items-center sm:flex"
-                >
-                  <div class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600">
-                    <span
-                      class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-                    ></span>
-                  </div>
-                  <template #popper> 删除中</template>
-                </FloatingTooltip>
+          </template>
+          <template #start>
+            <EntityField
+              :title="category.spec.displayName"
+              :description="category.status.permalink"
+            />
+          </template>
+          <template #end>
+            <EntityField v-if="category.metadata.deletionTimestamp">
+              <template #description>
                 <div
-                  class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                  v-tooltip="`删除中`"
+                  class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
                 >
-                  {{ category.status?.posts?.length || 0 }} 篇文章
+                  <span
+                    class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                  ></span>
                 </div>
-                <time class="text-sm text-gray-500">
-                  {{ formatDatetime(category.metadata.creationTimestamp) }}
-                </time>
-                <span class="self-center">
-                  <FloatingDropdown>
-                    <IconSettings
-                      class="cursor-pointer transition-all hover:text-blue-600"
-                    />
-                    <template #popper>
-                      <div class="w-48 p-2">
-                        <VSpace class="w-full" direction="column">
-                          <VButton
-                            v-close-popper
-                            block
-                            type="secondary"
-                            @click="onOpenEditingModal(category)"
-                          >
-                            修改
-                          </VButton>
-                          <VButton
-                            v-close-popper
-                            block
-                            type="danger"
-                            @click="onDelete(category)"
-                          >
-                            删除
-                          </VButton>
-                        </VSpace>
-                      </div>
-                    </template>
-                  </FloatingDropdown>
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
+              </template>
+            </EntityField>
+            <EntityField
+              :description="`${category.status?.posts?.length || 0} 篇文章`"
+            />
+            <EntityField
+              :description="formatDatetime(category.metadata.creationTimestamp)"
+            />
+          </template>
+          <template #menuItems>
+            <VButton
+              v-close-popper
+              block
+              type="secondary"
+              @click="onOpenEditingModal(category)"
+            >
+              修改
+            </VButton>
+            <VButton
+              v-close-popper
+              block
+              type="danger"
+              @click="onDelete(category)"
+            >
+              删除
+            </VButton>
+          </template>
+        </Entity>
         <CategoryListItem
           :categories="category.spec.children"
           class="pl-10 transition-all duration-300"
diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index 00ba3012..b43ae1b3 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -8,7 +8,6 @@ import {
   IconBookRead,
   IconGrid,
   IconList,
-  IconSettings,
   VButton,
   VCard,
   VEmpty,
@@ -17,6 +16,8 @@ import {
 } from "@halo-dev/components";
 import TagEditingModal from "./components/TagEditingModal.vue";
 import PostTag from "./components/PostTag.vue";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 // types
 import type { Tag } from "@halo-dev/api-client";
@@ -173,85 +174,55 @@ onMounted(async () => {
           role="list"
         >
           <li v-for="(tag, index) in tags" :key="index">
-            <div
-              :class="{
-                'bg-gray-100': selectedTag?.metadata.name === tag.metadata.name,
-              }"
-              class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
+            <Entity
+              :is-selected="selectedTag?.metadata.name === tag.metadata.name"
             >
-              <div
-                v-show="selectedTag?.metadata.name === tag.metadata.name"
-                class="absolute inset-y-0 left-0 w-0.5 bg-primary"
-              ></div>
-              <div class="relative flex flex-row items-center">
-                <div class="flex-1">
-                  <div class="flex flex-col sm:flex-row">
+              <template #start>
+                <EntityField :description="tag.status?.permalink">
+                  <template #title>
                     <PostTag :tag="tag" />
-                  </div>
-                  <div class="mt-1 flex">
-                    <span class="text-xs text-gray-500">
-                      {{ tag.status?.permalink }}
-                    </span>
-                  </div>
-                </div>
-                <div class="flex">
-                  <div
-                    class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                  >
-                    <FloatingTooltip
-                      v-if="tag.metadata.deletionTimestamp"
-                      class="mr-4 hidden items-center sm:flex"
-                    >
-                      <div
-                        class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
-                      >
-                        <span
-                          class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-                        ></span>
-                      </div>
-                      <template #popper> 删除中</template>
-                    </FloatingTooltip>
+                  </template>
+                </EntityField>
+              </template>
+              <template #end>
+                <EntityField v-if="tag.metadata.deletionTimestamp">
+                  <template #description>
                     <div
-                      class="cursor-pointer text-sm text-gray-500 hover:text-gray-900"
+                      v-tooltip="`删除中`"
+                      class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
                     >
-                      {{ tag.status?.posts?.length || 0 }} 篇文章
+                      <span
+                        class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                      ></span>
                     </div>
-                    <time class="text-sm text-gray-500">
-                      {{ formatDatetime(tag.metadata.creationTimestamp) }}
-                    </time>
-                    <span class="self-center">
-                      <FloatingDropdown>
-                        <IconSettings
-                          class="cursor-pointer transition-all hover:text-blue-600"
-                        />
-                        <template #popper>
-                          <div class="w-48 p-2">
-                            <VSpace class="w-full" direction="column">
-                              <VButton
-                                v-close-popper
-                                block
-                                type="secondary"
-                                @click="handleOpenEditingModal(tag)"
-                              >
-                                修改
-                              </VButton>
-                              <VButton
-                                v-close-popper
-                                block
-                                type="danger"
-                                @click="handleDelete(tag)"
-                              >
-                                删除
-                              </VButton>
-                            </VSpace>
-                          </div>
-                        </template>
-                      </FloatingDropdown>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+                  </template>
+                </EntityField>
+                <EntityField
+                  :description="`${tag.status?.posts?.length || 0} 篇文章`"
+                />
+                <EntityField
+                  :description="formatDatetime(tag.metadata.creationTimestamp)"
+                />
+              </template>
+              <template #menuItems>
+                <VButton
+                  v-close-popper
+                  block
+                  type="secondary"
+                  @click="handleOpenEditingModal(tag)"
+                >
+                  修改
+                </VButton>
+                <VButton
+                  v-close-popper
+                  block
+                  type="danger"
+                  @click="handleDelete(tag)"
+                >
+                  删除
+                </VButton>
+              </template>
+            </Entity>
           </li>
         </ul>
 
diff --git a/src/modules/interface/menus/components/MenuItemListItem.vue b/src/modules/interface/menus/components/MenuItemListItem.vue
index bd25ec4f..017bf423 100644
--- a/src/modules/interface/menus/components/MenuItemListItem.vue
+++ b/src/modules/interface/menus/components/MenuItemListItem.vue
@@ -1,14 +1,10 @@
 <script lang="ts" setup>
-import {
-  IconList,
-  IconSettings,
-  VButton,
-  VSpace,
-  VTag,
-} from "@halo-dev/components";
+import { IconList, VButton, VTag } from "@halo-dev/components";
 import Draggable from "vuedraggable";
 import { ref } from "vue";
 import type { MenuTreeItem } from "@/modules/interface/menus/utils";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 withDefaults(
   defineProps<{
@@ -70,80 +66,59 @@ function getMenuItemRefDisplayName(menuItem: MenuTreeItem) {
   >
     <template #item="{ element: menuItem }">
       <li>
-        <div
-          class="group relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-        >
-          <div
-            class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
-          >
-            <IconList class="h-3.5 w-3.5" />
-          </div>
-          <div class="relative flex flex-row items-center">
-            <div class="flex-1">
-              <div class="flex flex-row items-center gap-2">
-                <span class="truncate text-sm font-medium text-gray-900">
-                  {{ menuItem.status.displayName }}
-                </span>
+        <Entity>
+          <template #prepend>
+            <div
+              class="drag-element absolute inset-y-0 left-0 hidden w-3.5 cursor-move items-center bg-gray-100 transition-all hover:bg-gray-200 group-hover:flex"
+            >
+              <IconList class="h-3.5 w-3.5" />
+            </div>
+          </template>
+          <template #start>
+            <EntityField
+              :title="menuItem.status.displayName"
+              :description="menuItem.status.href"
+            >
+              <template #extra>
                 <VTag v-if="getMenuItemRefDisplayName(menuItem)">
                   {{ getMenuItemRefDisplayName(menuItem) }}
                 </VTag>
-              </div>
-
-              <div class="mt-1 flex">
-                <VSpace align="start" direction="column" spacing="xs">
-                  <a
-                    :href="menuItem.status.href"
-                    class="text-xs text-gray-500 hover:text-gray-900"
-                    target="_blank"
-                  >
-                    {{ menuItem.status.href }}
-                  </a>
-                </VSpace>
-              </div>
-            </div>
-            <FloatingTooltip
-              v-if="menuItem.metadata.deletionTimestamp"
-              class="mr-4 hidden items-center sm:flex"
+              </template>
+            </EntityField>
+          </template>
+          <template #end>
+            <EntityField v-if="menuItem.metadata.deletionTimestamp">
+              <template #description>
+                <div
+                  v-tooltip="`删除中`"
+                  class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
+                >
+                  <span
+                    class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                  ></span>
+                </div>
+              </template>
+            </EntityField>
+          </template>
+          <template #menuItems>
+            <VButton
+              v-close-popper
+              block
+              type="secondary"
+              @click="onOpenEditingModal(menuItem)"
             >
-              <div class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600">
-                <span
-                  class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-                ></span>
-              </div>
-              <template #popper> 删除中</template>
-            </FloatingTooltip>
-            <div class="self-center">
-              <FloatingDropdown>
-                <IconSettings
-                  class="cursor-pointer transition-all hover:text-blue-600"
-                />
-                <template #popper>
-                  <div class="w-48 p-2">
-                    <VSpace class="w-full" direction="column">
-                      <VButton
-                        v-close-popper
-                        block
-                        type="secondary"
-                        @click="onOpenEditingModal(menuItem)"
-                      >
-                        修改
-                      </VButton>
-                      <VButton
-                        v-close-popper
-                        block
-                        type="danger"
-                        @click="onDelete(menuItem)"
-                      >
-                        删除
-                      </VButton>
-                    </VSpace>
-                  </div>
-                </template>
-              </FloatingDropdown>
-            </div>
-          </div>
-        </div>
-
+              修改
+            </VButton>
+            <VButton
+              v-close-popper
+              block
+              type="danger"
+              @click="onDelete(menuItem)"
+            >
+              删除
+            </VButton>
+          </template>
+        </Entity>
         <MenuItemListItem
           :menu-tree-items="menuItem.spec.children"
           class="pl-10 transition-all duration-300"
diff --git a/src/modules/interface/menus/components/MenuList.vue b/src/modules/interface/menus/components/MenuList.vue
index 28e909d7..0ec3f64a 100644
--- a/src/modules/interface/menus/components/MenuList.vue
+++ b/src/modules/interface/menus/components/MenuList.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import {
-  IconSettings,
   useDialog,
   VButton,
   VCard,
@@ -12,6 +11,8 @@ import { defineExpose, onMounted, ref } from "vue";
 import type { Menu } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
 import { useRouteQuery } from "@vueuse/router";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -137,71 +138,56 @@ defineExpose({
         </VSpace>
       </template>
     </VEmpty>
-    <div class="divide-y divide-gray-100 bg-white">
-      <div
+    <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
+      <li
         v-for="(menu, index) in menus"
         :key="index"
-        :class="{
-          'bg-gray-50': selectedMenu?.metadata.name === menu.metadata.name,
-        }"
-        class="relative flex items-center p-4"
         @click="handleSelect(menu)"
       >
-        <div
-          v-if="selectedMenu?.metadata.name === menu.metadata.name"
-          class="absolute inset-y-0 left-0 w-0.5 bg-primary"
-        ></div>
-        <span class="flex flex-1 cursor-pointer flex-col gap-y-1">
-          <span class="block text-sm font-medium">
-            {{ menu.spec?.displayName }}
-          </span>
-          <span class="block text-xs text-gray-400">
-            {{ menu.spec.menuItems?.length || 0 }}
-            个菜单项
-          </span>
-        </span>
-        <FloatingTooltip
-          v-if="menu.metadata.deletionTimestamp"
-          class="mr-4 hidden items-center sm:flex"
+        <Entity
+          :is-selected="selectedMenu?.metadata.name === menu.metadata.name"
         >
-          <div class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600">
-            <span
-              class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-            ></span>
-          </div>
-          <template #popper> 删除中</template>
-        </FloatingTooltip>
-        <div class="self-center">
-          <FloatingDropdown>
-            <IconSettings
-              class="cursor-pointer transition-all hover:text-blue-600"
-            />
-            <template #popper>
-              <div class="w-48 p-2">
-                <VSpace class="w-full" direction="column">
-                  <VButton
-                    v-close-popper
-                    block
-                    type="secondary"
-                    @click="handleOpenEditingModal(menu)"
-                  >
-                    修改
-                  </VButton>
-                  <VButton
-                    v-close-popper
-                    block
-                    type="danger"
-                    @click="handleDeleteMenu(menu)"
-                  >
-                    删除
-                  </VButton>
-                </VSpace>
-              </div>
-            </template>
-          </FloatingDropdown>
-        </div>
-      </div>
-    </div>
+          <template #start>
+            <EntityField
+              :title="menu.spec?.displayName"
+              :description="`${menu.spec.menuItems?.length || 0} 个菜单项`"
+            ></EntityField>
+          </template>
+          <template #end>
+            <EntityField v-if="menu.metadata.deletionTimestamp">
+              <template #description>
+                <div
+                  v-tooltip="`删除中`"
+                  class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
+                >
+                  <span
+                    class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                  ></span>
+                </div>
+              </template>
+            </EntityField>
+          </template>
+          <template #menuItems>
+            <VButton
+              v-close-popper
+              block
+              type="secondary"
+              @click="handleOpenEditingModal(menu)"
+            >
+              修改
+            </VButton>
+            <VButton
+              v-close-popper
+              block
+              type="danger"
+              @click="handleDeleteMenu(menu)"
+            >
+              删除
+            </VButton>
+          </template>
+        </Entity>
+      </li>
+    </ul>
     <template #footer>
       <VButton block type="secondary" @click="handleOpenEditingModal(null)">
         新增
diff --git a/src/modules/system/plugins/components/PluginListItem.vue b/src/modules/system/plugins/components/PluginListItem.vue
index 6b67b542..2710468f 100644
--- a/src/modules/system/plugins/components/PluginListItem.vue
+++ b/src/modules/system/plugins/components/PluginListItem.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
-import {
-  IconSettings,
-  VButton,
-  VSpace,
-  VSwitch,
-  VTag,
-} from "@halo-dev/components";
+import { VButton, VSpace, VSwitch, VTag } from "@halo-dev/components";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 import { toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
 import type { Plugin } from "@halo-dev/api-client";
@@ -25,17 +21,10 @@ const { plugin } = toRefs(props);
 const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
 </script>
 <template>
-  <div
-    class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-  >
-    <div class="relative flex flex-row items-center">
-      <div v-if="plugin?.spec.logo" class="mr-4">
-        <RouterLink
-          :to="{
-            name: 'PluginDetail',
-            params: { name: plugin?.metadata.name },
-          }"
-        >
+  <Entity>
+    <template #start>
+      <EntityField>
+        <template #description>
           <div class="h-12 w-12 rounded border bg-white p-1 hover:shadow-sm">
             <img
               :alt="plugin?.metadata.name"
@@ -43,55 +32,40 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
               class="h-full w-full"
             />
           </div>
-        </RouterLink>
-      </div>
-      <div class="flex-1">
-        <div class="flex flex-row items-center">
-          <RouterLink
-            :to="{
-              name: 'PluginDetail',
-              params: { name: plugin?.metadata.name },
-            }"
-          >
-            <span class="mr-2 truncate text-sm font-medium text-gray-900">
-              {{ plugin?.spec.displayName }}
-            </span>
-          </RouterLink>
+        </template>
+      </EntityField>
+      <EntityField
+        :title="plugin?.spec.displayName"
+        :description="plugin?.spec.description"
+        :route="{
+          name: 'PluginDetail',
+          params: { name: plugin?.metadata.name },
+        }"
+      >
+        <template #extra>
           <VSpace>
             <VTag>
               {{ isStarted ? "已启用" : "未启用" }}
             </VTag>
           </VSpace>
-        </div>
-        <div class="mt-2 flex">
-          <VSpace align="start" direction="column" spacing="xs">
-            <span class="text-xs text-gray-500">
-              {{ plugin?.spec.description }}
-            </span>
-            <span class="text-xs text-gray-500 sm:hidden">
-              @{{ plugin?.spec.author }} {{ plugin?.spec.version }}
-            </span>
-          </VSpace>
-        </div>
-      </div>
-      <div class="flex">
-        <div
-          class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-        >
-          <FloatingTooltip
-            v-if="plugin?.status?.phase === 'FAILED'"
-            class="hidden items-center sm:flex"
+        </template>
+      </EntityField>
+    </template>
+    <template #end>
+      <EntityField v-if="plugin?.status?.phase === 'FAILED'">
+        <template #description>
+          <div
+            v-tooltip="`${plugin?.status?.reason}:${plugin?.status?.message}`"
+            class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
           >
-            <div class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600">
-              <span
-                class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-              ></span>
-            </div>
-            <template #popper>
-              {{ plugin?.status?.reason }}:
-              {{ plugin?.status?.message }}
-            </template>
-          </FloatingTooltip>
+            <span
+              class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+            ></span>
+          </div>
+        </template>
+      </EntityField>
+      <EntityField>
+        <template #description>
           <a
             :href="plugin?.spec.homepage"
             class="hidden text-sm text-gray-500 hover:text-gray-900 sm:block"
@@ -99,12 +73,15 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
           >
             @{{ plugin?.spec.author }}
           </a>
-          <span class="hidden text-sm text-gray-500 sm:block">
-            {{ plugin?.spec.version }}
-          </span>
-          <time class="hidden text-sm text-gray-500 sm:block">
-            {{ formatDatetime(plugin?.metadata.creationTimestamp) }}
-          </time>
+        </template>
+      </EntityField>
+      <EntityField :description="plugin?.spec.version" />
+      <EntityField
+        v-if="plugin?.metadata.creationTimestamp"
+        :description="formatDatetime(plugin?.metadata.creationTimestamp)"
+      />
+      <EntityField>
+        <template #description>
           <div
             v-permission="['system:plugins:manage']"
             class="flex items-center"
@@ -114,27 +91,13 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
               @click="changeStatus"
             />
           </div>
-          <span v-permission="['system:plugins:manage']" class="cursor-pointer">
-            <FloatingDropdown>
-              <IconSettings />
-              <template #popper>
-                <div class="w-48 p-2">
-                  <VSpace class="w-full" direction="column">
-                    <VButton
-                      v-close-popper
-                      block
-                      type="danger"
-                      @click="uninstall"
-                    >
-                      卸载
-                    </VButton>
-                  </VSpace>
-                </div>
-              </template>
-            </FloatingDropdown>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+        </template>
+      </EntityField>
+    </template>
+    <template #menuItems>
+      <VButton v-close-popper block type="danger" @click="uninstall">
+        卸载
+      </VButton>
+    </template>
+  </Entity>
 </template>
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index 70a51718..29bd86b5 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -7,7 +7,6 @@ import type { Role } from "@halo-dev/api-client";
 import {
   IconAddCircle,
   IconArrowDown,
-  IconSettings,
   IconShieldUser,
   useDialog,
   VButton,
@@ -18,6 +17,8 @@ import {
   VTag,
 } from "@halo-dev/components";
 import RoleEditingModal from "./components/RoleEditingModal.vue";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 // constants
 import { rbacAnnotations } from "@/constants/annotations";
@@ -199,114 +200,75 @@ const handleDelete = async (role: Role) => {
       </template>
       <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li v-for="(role, index) in roles" :key="index">
-          <div
-            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-          >
-            <div class="relative flex flex-row items-center">
-              <div class="flex-1">
-                <div class="flex flex-row items-center">
-                  <RouterLink
-                    :to="{
-                      name: 'RoleDetail',
-                      params: {
-                        name: role.metadata.name,
-                      },
-                    }"
-                  >
-                    <span
-                      class="mr-2 truncate text-sm font-medium text-gray-900"
-                    >
-                      {{
-                        role.metadata.annotations?.[
-                          rbacAnnotations.DISPLAY_NAME
-                        ] || role.metadata.name
-                      }}
-                    </span>
-                  </RouterLink>
-                </div>
-                <div class="mt-2 flex">
-                  <span class="text-xs text-gray-500">
-                    包含
-                    {{
+          <Entity>
+            <template #start>
+              <EntityField
+                :title="
+                  role.metadata.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
+                  role.metadata.name
+                "
+                :description="`包含
+                    ${
                       JSON.parse(
                         role.metadata.annotations?.[
                           rbacAnnotations.DEPENDENCIES
-                        ] || "[]"
+                        ] || '[]'
                       ).length
-                    }}
-                    个权限
-                  </span>
-                </div>
-              </div>
-              <div class="flex">
-                <div
-                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                >
-                  <FloatingTooltip
-                    v-if="role.metadata.deletionTimestamp"
-                    class="hidden items-center sm:flex"
+                    }
+                    个权限`"
+                :route="{
+                  name: 'RoleDetail',
+                  params: {
+                    name: role.metadata.name,
+                  },
+                }"
+              ></EntityField>
+            </template>
+            <template #end>
+              <EntityField v-if="role.metadata.deletionTimestamp">
+                <template #description>
+                  <div
+                    v-tooltip="`删除中`"
+                    class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
                   >
-                    <div
-                      class="inline-flex h-1.5 w-1.5 rounded-full bg-red-600"
-                    >
-                      <span
-                        class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
-                      ></span>
-                    </div>
-                    <template #popper> 删除中</template>
-                  </FloatingTooltip>
-
-                  <a
-                    class="hidden text-sm text-gray-500 hover:text-gray-900 sm:block"
-                    target="_blank"
-                  >
-                    0 个用户
-                  </a>
+                    <span
+                      class="inline-block h-1.5 w-1.5 animate-ping rounded-full bg-red-600"
+                    ></span>
+                  </div>
+                </template>
+              </EntityField>
+              <EntityField description="0 个用户" />
+              <EntityField>
+                <template #description>
                   <VTag> 系统保留</VTag>
-                  <time class="text-sm text-gray-500">
-                    {{ formatDatetime(role.metadata.creationTimestamp) }}
-                  </time>
-                  <span
-                    v-permission="['system:roles:manage']"
-                    class="cursor-pointer"
-                  >
-                    <FloatingDropdown>
-                      <IconSettings />
-                      <template #popper>
-                        <div class="w-48 p-2">
-                          <VSpace class="w-full" direction="column">
-                            <VButton
-                              v-close-popper
-                              block
-                              type="secondary"
-                              @click="handleOpenEditingModal(role)"
-                            >
-                              编辑
-                            </VButton>
-                            <VButton
-                              v-close-popper
-                              block
-                              type="danger"
-                              @click="handleDelete(role)"
-                            >
-                              删除
-                            </VButton>
-                            <VButton
-                              v-close-popper
-                              block
-                              @click="handleCloneRole(role)"
-                            >
-                              基于此角色创建
-                            </VButton>
-                          </VSpace>
-                        </div>
-                      </template>
-                    </FloatingDropdown>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+                </template>
+              </EntityField>
+              <EntityField
+                :description="formatDatetime(role.metadata.creationTimestamp)"
+              />
+            </template>
+            <template #menuItems>
+              <VButton
+                v-close-popper
+                block
+                type="secondary"
+                @click="handleOpenEditingModal(role)"
+              >
+                编辑
+              </VButton>
+              <VButton
+                v-close-popper
+                block
+                type="danger"
+                @click="handleDelete(role)"
+              >
+                删除
+              </VButton>
+              <VButton v-close-popper block @click="handleCloneRole(role)">
+                基于此角色创建
+              </VButton>
+            </template>
+          </Entity>
         </li>
       </ul>
 
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index e9d8a929..69a849e5 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -2,7 +2,6 @@
 import {
   IconAddCircle,
   IconArrowDown,
-  IconSettings,
   IconUserFollow,
   IconUserSettings,
   VButton,
@@ -21,6 +20,8 @@ import type { User, UserList } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
 import { useRouteQuery } from "@vueuse/router";
+import Entity from "@/components/entity/Entity.vue";
+import EntityField from "@/components/entity/EntityField.vue";
 
 const checkAll = ref(false);
 const editingModal = ref<boolean>(false);
@@ -275,104 +276,70 @@ onMounted(() => {
       </template>
       <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li v-for="(user, index) in users.items" :key="index">
-          <div
-            :class="{
-              'bg-gray-100': checkAll,
-            }"
-            class="relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50"
-          >
-            <div
-              v-show="checkAll"
-              class="absolute inset-y-0 left-0 w-0.5 bg-primary"
-            ></div>
-            <div class="relative flex flex-row items-center">
-              <div class="mr-4 hidden items-center sm:flex">
-                <input
-                  v-model="checkAll"
-                  v-permission="['system:users:manage']"
-                  class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                  type="checkbox"
-                />
-              </div>
-              <div v-if="user.spec.avatar" class="mr-4 flex items-center">
-                <VAvatar
-                  :alt="user.spec.displayName"
-                  :src="user.spec.avatar"
-                  size="md"
-                ></VAvatar>
-              </div>
-              <div class="flex-1">
-                <div class="flex flex-row items-center">
-                  <span
-                    class="mr-2 truncate text-sm font-medium text-gray-900"
-                    @click="
-                      $router.push({
-                        name: 'UserDetail',
-                        params: { name: user.metadata.name },
-                      })
-                    "
-                  >
-                    {{ user.spec.displayName }}
-                  </span>
-                  <VTag class="sm:hidden">{{ user.metadata.name }}</VTag>
-                </div>
-                <div class="mt-1 flex">
-                  <VSpace align="start" direction="column" spacing="xs">
-                    <span class="text-xs text-gray-500">
-                      {{ user.metadata.name }}
-                    </span>
-                  </VSpace>
-                </div>
-              </div>
-              <div class="flex">
-                <div
-                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
-                >
+          <Entity :is-selected="checkAll">
+            <template #checkbox>
+              <input
+                v-model="checkAll"
+                v-permission="['system:users:manage']"
+                class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                type="checkbox"
+              />
+            </template>
+            <template #start>
+              <EntityField>
+                <template #description>
+                  <VAvatar
+                    :alt="user.spec.displayName"
+                    :src="user.spec.avatar"
+                    size="md"
+                  ></VAvatar>
+                </template>
+              </EntityField>
+              <EntityField
+                :title="user.spec.displayName"
+                :description="user.metadata.name"
+                :route="{
+                  name: 'UserDetail',
+                  params: { name: user.metadata.name },
+                }"
+              />
+            </template>
+            <template #end>
+              <EntityField>
+                <template #description>
                   <div
                     v-for="(role, roleIndex) in getRoles(user)"
                     :key="roleIndex"
-                    class="hidden items-center sm:flex"
+                    class="flex items-center"
                   >
                     <VTag>
                       {{ role }}
                     </VTag>
                   </div>
-                  <time class="text-sm text-gray-500">
-                    {{ formatDatetime(user.metadata.creationTimestamp) }}
-                  </time>
-                  <span
-                    v-permission="['system:users:manage']"
-                    class="cursor-pointer"
-                  >
-                    <FloatingDropdown>
-                      <IconSettings />
-                      <template #popper>
-                        <div class="w-48 p-2">
-                          <VSpace class="w-full" direction="column">
-                            <VButton
-                              v-close-popper
-                              block
-                              type="secondary"
-                              @click="handleOpenCreateModal(user)"
-                            >
-                              修改资料
-                            </VButton>
-                            <VButton
-                              v-close-popper
-                              block
-                              @click="handleOpenPasswordChangeModal(user)"
-                            >
-                              修改密码
-                            </VButton>
-                          </VSpace>
-                        </div>
-                      </template>
-                    </FloatingDropdown>
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+                </template>
+              </EntityField>
+              <EntityField
+                :description="formatDatetime(user.metadata.creationTimestamp)"
+              />
+            </template>
+            <template #menuItems>
+              <VButton
+                v-close-popper
+                block
+                type="secondary"
+                @click="handleOpenCreateModal(user)"
+              >
+                修改资料
+              </VButton>
+              <VButton
+                v-close-popper
+                block
+                @click="handleOpenPasswordChangeModal(user)"
+              >
+                修改密码
+              </VButton>
+            </template>
+          </Entity>
         </li>
       </ul>