From eec1d0758e3a77d8042cce1187b77cb39a183fe4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Sun, 23 Apr 2023 10:49:32 +0800
Subject: [PATCH] feat: add description component (#3792)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind feature
/area console
/milestone 2.5.0

#### What this PR does / why we need it:

为 Console 端添加 Description 组件。

#### Which issue(s) this PR fixes:

Fixes #3790

#### Special notes for your reviewer:

测试方式：

1. 检查主题管理、插件详情、认证方式详情页面的样式是否异常即可。

#### Does this PR introduce a user-facing change?


```release-note
为 Console 端添加 Description 组件。
```
---
 console/packages/components/src/components.ts |   1 +
 .../components/description/Description.vue    |  13 +
 .../description/DescriptionItem.vue           |  42 +++
 .../src/components/description/index.ts       |   2 +
 .../components/AttachmentDetailModal.vue      | 129 +++-----
 .../modules/interface/themes/ThemeDetail.vue  | 177 +++--------
 .../src/modules/system/actuator/Actuator.vue  | 219 +++++--------
 .../auth-providers/AuthProviderDetail.vue     | 124 +++-----
 .../modules/system/plugins/PluginDetail.vue   | 290 +++++++-----------
 .../src/modules/system/roles/RoleDetail.vue   | 135 ++------
 .../src/modules/system/users/UserDetail.vue   | 226 ++++++--------
 11 files changed, 514 insertions(+), 844 deletions(-)
 create mode 100644 console/packages/components/src/components/description/Description.vue
 create mode 100644 console/packages/components/src/components/description/DescriptionItem.vue
 create mode 100644 console/packages/components/src/components/description/index.ts

diff --git a/console/packages/components/src/components.ts b/console/packages/components/src/components.ts
index ea7292205..112e3eaef 100644
--- a/console/packages/components/src/components.ts
+++ b/console/packages/components/src/components.ts
@@ -19,3 +19,4 @@ export * from "./components/toast";
 export * from "./components/loading";
 export * from "./components/dropdown";
 export * from "./components/tooltip";
+export * from "./components/description";
diff --git a/console/packages/components/src/components/description/Description.vue b/console/packages/components/src/components/description/Description.vue
new file mode 100644
index 000000000..d139fbfae
--- /dev/null
+++ b/console/packages/components/src/components/description/Description.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup></script>
+
+<template>
+  <dl class="description-wrapper">
+    <slot />
+  </dl>
+</template>
+
+<style>
+.description-wrapper {
+  @apply divide-y divide-gray-100;
+}
+</style>
diff --git a/console/packages/components/src/components/description/DescriptionItem.vue b/console/packages/components/src/components/description/DescriptionItem.vue
new file mode 100644
index 000000000..9abce24e1
--- /dev/null
+++ b/console/packages/components/src/components/description/DescriptionItem.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    label: string;
+    content?: string;
+    verticalCenter?: boolean;
+  }>(),
+  {
+    content: undefined,
+    verticalCenter: false,
+  }
+);
+</script>
+
+<template>
+  <div
+    class="description-item-wrapper"
+    :class="{ 'items-center': verticalCenter }"
+  >
+    <dt class="description-item__label">{{ label }}</dt>
+    <dd class="description-item__content">
+      <slot v-if="$slots.default" />
+      <template v-else>
+        {{ content }}
+      </template>
+    </dd>
+  </div>
+</template>
+
+<style lang="scss">
+.description-item-wrapper {
+  @apply bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6;
+
+  .description-item__label {
+    @apply text-sm font-medium text-gray-900;
+  }
+
+  .description-item__content {
+    @apply mt-1 text-sm text-gray-900 sm:col-span-6 md:col-span-5 lg:col-span-3 sm:mt-0;
+  }
+}
+</style>
diff --git a/console/packages/components/src/components/description/index.ts b/console/packages/components/src/components/description/index.ts
new file mode 100644
index 000000000..cdd365ef4
--- /dev/null
+++ b/console/packages/components/src/components/description/index.ts
@@ -0,0 +1,2 @@
+export { default as VDescription } from "./Description.vue";
+export { default as VDescriptionItem } from "./DescriptionItem.vue";
diff --git a/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index 716dcc97f..9b84eaa1d 100644
--- a/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/console/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-import { VButton, VModal, VSpace } from "@halo-dev/components";
+import {
+  VButton,
+  VDescription,
+  VDescriptionItem,
+  VModal,
+  VSpace,
+} from "@halo-dev/components";
 import LazyImage from "@/components/image/LazyImage.vue";
 import type { Attachment } from "@halo-dev/api-client";
 import prettyBytes from "pretty-bytes";
@@ -79,6 +85,7 @@ const onVisibleChange = (visible: boolean) => {
     :mount-to-body="mountToBody"
     :layer-closable="true"
     height="calc(100vh - 20px)"
+    :body-class="['!p-0']"
     @update:visible="onVisibleChange"
   >
     <template #actions>
@@ -87,7 +94,7 @@ const onVisibleChange = (visible: boolean) => {
     <div class="overflow-hidden bg-white">
       <div
         v-if="onlyPreview && isImage(attachment?.spec.mediaType)"
-        class="flex justify-center"
+        class="flex justify-center p-4"
       >
         <img
           v-tooltip.bottom="
@@ -99,14 +106,11 @@ const onVisibleChange = (visible: boolean) => {
           @click="onlyPreview = !onlyPreview"
         />
       </div>
-      <dl v-else>
-        <div
-          class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-        >
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.preview") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+      <div v-else>
+        <VDescription>
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.preview')"
+          >
             <div
               v-if="isImage(attachment?.spec.mediaType)"
               @click="onlyPreview = !onlyPreview"
@@ -149,80 +153,47 @@ const onVisibleChange = (visible: boolean) => {
             <span v-else>
               {{ $t("core.attachment.detail_modal.preview.not_support") }}
             </span>
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.storage_policy") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ policy?.spec.displayName }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.group") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{
+          </VDescriptionItem>
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.storage_policy')"
+            :content="policy?.spec.displayName"
+          ></VDescriptionItem>
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.group')"
+            :content="
               getGroupName(attachment?.spec.groupName) ||
-              $t("core.attachment.common.text.ungrouped")
-            }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.display_name") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ attachment?.spec.displayName }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.media_type") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ attachment?.spec.mediaType }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.size") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ prettyBytes(attachment?.spec.size || 0) }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.owner") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ attachment?.spec.ownerName }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.creation_time") }}
-          </dt>
-          <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-            {{ formatDatetime(attachment?.metadata.creationTimestamp) }}
-          </dd>
-        </div>
-        <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-gray-900">
-            {{ $t("core.attachment.detail_modal.fields.permalink") }}
-          </dt>
-          <dd
-            class="mt-1 text-sm text-gray-900 hover:text-blue-600 sm:col-span-2 sm:mt-0"
+              $t('core.attachment.common.text.ungrouped')
+            "
+          />
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.display_name')"
+            :content="attachment?.spec.displayName"
+          />
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.media_type')"
+            :content="attachment?.spec.mediaType"
+          />
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.size')"
+            :content="prettyBytes(attachment?.spec.size || 0)"
+          />
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.owner')"
+            :content="attachment?.spec.ownerName"
+          />
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.creation_time')"
+            :content="formatDatetime(attachment?.metadata.creationTimestamp)"
+          />
+          <VDescriptionItem
+            :label="$t('core.attachment.detail_modal.fields.permalink')"
           >
             <a target="_blank" :href="attachment?.status?.permalink">
               {{ attachment?.status?.permalink }}
             </a>
-          </dd>
-        </div>
-      </dl>
+          </VDescriptionItem>
+        </VDescription>
+      </div>
     </div>
     <template #footer>
       <VSpace>
diff --git a/console/src/modules/interface/themes/ThemeDetail.vue b/console/src/modules/interface/themes/ThemeDetail.vue
index a675d691b..6c59ff6d4 100644
--- a/console/src/modules/interface/themes/ThemeDetail.vue
+++ b/console/src/modules/interface/themes/ThemeDetail.vue
@@ -17,6 +17,8 @@ import {
   VDropdown,
   VDropdownItem,
   VDropdownDivider,
+  VDescription,
+  VDescriptionItem,
 } from "@halo-dev/components";
 import ThemeUploadModal from "./components/ThemeUploadModal.vue";
 
@@ -126,141 +128,46 @@ const onUpgradeModalClose = () => {
         </div>
       </div>
       <div class="border-t border-gray-200">
-        <dl class="divide-y divide-gray-100">
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">ID</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              {{ selectedTheme?.metadata.name }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.author") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              {{ selectedTheme?.spec.author.name }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.website") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              <a
-                :href="selectedTheme?.spec.website"
-                class="hover:text-gray-600"
-                target="_blank"
-              >
-                {{ selectedTheme?.spec.website }}
-              </a>
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.repo") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              <a
-                :href="selectedTheme?.spec.repo"
-                class="hover:text-gray-600"
-                target="_blank"
-              >
-                {{ selectedTheme?.spec.repo }}
-              </a>
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.version") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              {{ selectedTheme?.spec.version }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.requires") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              {{ selectedTheme?.spec.requires }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.storage_location") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-              {{ selectedTheme?.status?.location }}
-            </dd>
-          </div>
-          <!-- TODO: add display required plugins support -->
-          <div
-            v-if="false"
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.theme.detail.fields.plugin_requires") }}
-            </dt>
-            <dd class="mt-1 text-sm sm:col-span-3 sm:mt-0">
-              <VAlert
-                description="当前有 1 个插件还未安装"
-                title="提示"
-              ></VAlert>
-              <ul class="mt-2 space-y-2">
-                <li>
-                  <div
-                    class="inline-flex w-96 cursor-pointer flex-col gap-y-3 rounded border p-5 hover:border-primary"
-                  >
-                    <RouterLink
-                      :to="{
-                        name: 'PluginDetail',
-                        params: { name: 'PluginLinks' },
-                      }"
-                      class="font-medium text-gray-900 hover:text-blue-400"
-                    >
-                      run.halo.plugins.links
-                    </RouterLink>
-                    <div class="text-xs">
-                      <VSpace>
-                        <VTag>{{ $t("core.common.status.installed") }}</VTag>
-                      </VSpace>
-                    </div>
-                  </div>
-                </li>
-                <li>
-                  <div
-                    class="inline-flex w-96 cursor-pointer flex-col gap-y-3 rounded border p-5 hover:border-primary"
-                  >
-                    <span class="font-medium hover:text-blue-400">
-                      run.halo.plugins.photos
-                    </span>
-                    <div class="text-xs">
-                      <VSpace>
-                        <VTag>
-                          {{ $t("core.common.status.not_installed") }}
-                        </VTag>
-                      </VSpace>
-                    </div>
-                  </div>
-                </li>
-              </ul>
-            </dd>
-          </div>
-        </dl>
+        <VDescription>
+          <VDescriptionItem
+            label="ID"
+            :content="selectedTheme?.metadata.name"
+          />
+          <VDescriptionItem
+            :label="$t('core.theme.detail.fields.author')"
+            :content="selectedTheme?.spec.author.name"
+          />
+          <VDescriptionItem :label="$t('core.theme.detail.fields.website')">
+            <a
+              :href="selectedTheme?.spec.website"
+              class="hover:text-gray-600"
+              target="_blank"
+            >
+              {{ selectedTheme?.spec.website }}
+            </a>
+          </VDescriptionItem>
+          <VDescriptionItem :label="$t('core.theme.detail.fields.repo')">
+            <a
+              :href="selectedTheme?.spec.repo"
+              class="hover:text-gray-600"
+              target="_blank"
+            >
+              {{ selectedTheme?.spec.repo }}
+            </a>
+          </VDescriptionItem>
+          <VDescriptionItem
+            :label="$t('core.theme.detail.fields.version')"
+            :content="selectedTheme?.spec.version"
+          />
+          <VDescriptionItem
+            :label="$t('core.theme.detail.fields.requires')"
+            :content="selectedTheme?.spec.requires"
+          />
+          <VDescriptionItem
+            :label="$t('core.theme.detail.fields.storage_location')"
+            :content="selectedTheme?.status?.location"
+          />
+        </VDescription>
       </div>
     </div>
   </Transition>
diff --git a/console/src/modules/system/actuator/Actuator.vue b/console/src/modules/system/actuator/Actuator.vue
index aaf9dfdb4..ce99d2a92 100644
--- a/console/src/modules/system/actuator/Actuator.vue
+++ b/console/src/modules/system/actuator/Actuator.vue
@@ -7,6 +7,8 @@ import {
   VCard,
   VButton,
   Toast,
+  VDescription,
+  VDescriptionItem,
 } from "@halo-dev/components";
 import { computed, onMounted, ref } from "vue";
 import type { Info, GlobalInfo, Startup } from "./types";
@@ -159,64 +161,39 @@ const handleDownloadLogfile = () => {
           </div>
         </div>
         <div class="border-t border-gray-200">
-          <dl class="divide-y divide-gray-100">
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.external_url") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <span v-if="globalInfo?.externalUrl">
-                  {{ globalInfo?.externalUrl }}
-                </span>
-                <span v-else>
-                  {{ $t("core.actuator.fields_values.external_url.not_setup") }}
-                </span>
-                <VAlert
-                  v-if="!isExternalUrlValid"
-                  class="mt-3"
-                  type="warning"
-                  :title="$t('core.common.text.warning')"
-                  :closable="false"
-                >
-                  <template #description>
-                    {{ $t("core.actuator.alert.external_url_invalid") }}
-                  </template>
-                </VAlert>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.start_time") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ formatDatetime(startup?.timeline.startTime) }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.timezone") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ globalInfo?.timeZone }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.locale") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ globalInfo?.locale }}
-              </dd>
-            </div>
-          </dl>
+          <VDescription>
+            <VDescriptionItem :label="$t('core.actuator.fields.external_url')">
+              <span v-if="globalInfo?.externalUrl">
+                {{ globalInfo?.externalUrl }}
+              </span>
+              <span v-else>
+                {{ $t("core.actuator.fields_values.external_url.not_setup") }}
+              </span>
+              <VAlert
+                v-if="!isExternalUrlValid"
+                class="mt-3"
+                type="warning"
+                :title="$t('core.common.text.warning')"
+                :closable="false"
+              >
+                <template #description>
+                  {{ $t("core.actuator.alert.external_url_invalid") }}
+                </template>
+              </VAlert>
+            </VDescriptionItem>
+            <VDescriptionItem
+              :label="$t('core.actuator.fields.start_time')"
+              :content="formatDatetime(startup?.timeline.startTime)"
+            />
+            <VDescriptionItem
+              :label="$t('core.actuator.fields.timezone')"
+              :content="globalInfo?.timeZone"
+            />
+            <VDescriptionItem
+              :label="$t('core.actuator.fields.locale')"
+              :content="globalInfo?.locale"
+            />
+          </VDescription>
         </div>
       </div>
     </VCard>
@@ -232,91 +209,55 @@ const handleDownloadLogfile = () => {
           </div>
         </div>
         <div class="border-t border-gray-200">
-          <dl class="divide-y divide-gray-100">
-            <div
+          <VDescription>
+            <VDescriptionItem
               v-if="info.build"
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+              :label="$t('core.actuator.fields.version')"
             >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.version") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <a
-                  :href="`https://github.com/halo-dev/halo/releases/tag/v${info.build.version}`"
-                  class="hover:text-gray-600"
-                  target="_blank"
-                >
-                  {{ info.build.version }}
-                </a>
-              </dd>
-            </div>
-            <div
+              <a
+                :href="`https://github.com/halo-dev/halo/releases/tag/v${info.build.version}`"
+                class="hover:text-gray-600"
+                target="_blank"
+              >
+                {{ info.build.version }}
+              </a>
+            </VDescriptionItem>
+            <VDescriptionItem
               v-if="info.build"
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+              :label="$t('core.actuator.fields.build_time')"
+              :content="formatDatetime(info.build.time)"
+            />
+            <VDescriptionItem v-if="info.git" label="Git Commit">
+              <a
+                :href="`https://github.com/halo-dev/halo/commit/${info.git.commit.id}`"
+                class="hover:text-gray-600"
+                target="_blank"
+              >
+                {{ info.git.commit.id }}
+              </a>
+            </VDescriptionItem>
+            <VDescriptionItem
+              label="Java"
+              :content="
+                [info.java.runtime.name, info.java.runtime.version].join(' / ')
+              "
+            />
+            <VDescriptionItem
+              :label="$t('core.actuator.fields.database')"
+              :content="[info.database.name, info.database.version].join(' / ')"
+            />
+            <VDescriptionItem :label="$t('core.actuator.fields.os')">
+              {{ info.os.name }} {{ info.os.version }} / {{ info.os.arch }}
+            </VDescriptionItem>
+            <VDescriptionItem
+              :label="$t('core.actuator.fields.log')"
+              vertical-center
             >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.build_time") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ formatDatetime(info.build.time) }}
-              </dd>
-            </div>
-            <div
-              v-if="info.git"
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">Git Commit</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <a
-                  :href="`https://github.com/halo-dev/halo/commit/${info.git.commit.id}`"
-                  class="hover:text-gray-600"
-                  target="_blank"
-                >
-                  {{ info.git.commit.id }}
-                </a>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">Java</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ info.java.runtime.name }} / {{ info.java.runtime.version }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.database") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ [info.database.name, info.database.version].join(" / ") }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.os") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ info.os.name }} {{ info.os.version }} / {{ info.os.arch }}
-              </dd>
-            </div>
-            <div
-              class="items-center bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.actuator.fields.log") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <VButton size="sm" @click="handleDownloadLogfile()">
-                  {{ $t("core.common.buttons.download") }}
-                </VButton>
-              </dd>
-            </div>
-          </dl>
+              <VButton size="sm" @click="handleDownloadLogfile()">
+                {{ $t("core.common.buttons.download") }}
+              </VButton>
+            </VDescriptionItem>
+          </VDescription>
         </div>
       </div>
     </VCard>
diff --git a/console/src/modules/system/auth-providers/AuthProviderDetail.vue b/console/src/modules/system/auth-providers/AuthProviderDetail.vue
index 829cdd57b..2c3f33ffe 100644
--- a/console/src/modules/system/auth-providers/AuthProviderDetail.vue
+++ b/console/src/modules/system/auth-providers/AuthProviderDetail.vue
@@ -9,6 +9,8 @@ import {
   VAvatar,
   VButton,
   VCard,
+  VDescription,
+  VDescriptionItem,
   VPageHeader,
   VTabbar,
 } from "@halo-dev/components";
@@ -167,82 +169,56 @@ const handleSaveConfigMap = async () => {
       </template>
       <div class="bg-white">
         <div v-if="activeTab === 'detail'">
-          <dl class="divide-y divide-gray-100">
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+          <VDescription>
+            <VDescriptionItem
+              :label="
+                $t('core.identity_authentication.detail.fields.display_name')
+              "
+              :content="authProvider?.spec.displayName"
+            />
+            <VDescriptionItem
+              :label="
+                $t('core.identity_authentication.detail.fields.description')
+              "
+              :content="authProvider?.spec.description"
+            />
+            <VDescriptionItem
+              :label="$t('core.identity_authentication.detail.fields.website')"
             >
-              <dt class="text-sm font-medium text-gray-900">
-                {{
-                  $t("core.identity_authentication.detail.fields.display_name")
-                }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-                {{ authProvider?.spec.displayName }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
+              <a
+                v-if="authProvider?.spec.website"
+                :href="authProvider?.spec.website"
+                target="_blank"
+              >
+                {{ authProvider.spec.website }}
+              </a>
+              <span v-else>
+                {{ $t("core.common.text.none") }}
+              </span>
+            </VDescriptionItem>
+            <VDescriptionItem
+              :label="
+                $t('core.identity_authentication.detail.fields.help_page')
+              "
             >
-              <dt class="text-sm font-medium text-gray-900">
-                {{
-                  $t("core.identity_authentication.detail.fields.description")
-                }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-                {{ authProvider?.spec.description }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.identity_authentication.detail.fields.website") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-                <a
-                  v-if="authProvider?.spec.website"
-                  :href="authProvider?.spec.website"
-                  target="_blank"
-                >
-                  {{ authProvider.spec.website }}
-                </a>
-                <span v-else>
-                  {{ $t("core.common.text.none") }}
-                </span>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.identity_authentication.detail.fields.help_page") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-                <a
-                  v-if="authProvider?.spec.helpPage"
-                  :href="authProvider?.spec.helpPage"
-                  target="_blank"
-                >
-                  {{ authProvider.spec.helpPage }}
-                </a>
-                <span v-else>{{ $t("core.common.text.none") }}</span>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{
-                  $t(
-                    "core.identity_authentication.detail.fields.authentication_url"
-                  )
-                }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-                {{ authProvider?.spec.authenticationUrl }}
-              </dd>
-            </div>
-          </dl>
+              <a
+                v-if="authProvider?.spec.helpPage"
+                :href="authProvider?.spec.helpPage"
+                target="_blank"
+              >
+                {{ authProvider.spec.helpPage }}
+              </a>
+              <span v-else>{{ $t("core.common.text.none") }}</span>
+            </VDescriptionItem>
+            <VDescriptionItem
+              :label="
+                $t(
+                  'core.identity_authentication.detail.fields.authentication_url'
+                )
+              "
+              :content="authProvider?.spec.authenticationUrl"
+            />
+          </VDescription>
         </div>
         <div v-if="activeTab === 'setting'" class="bg-white p-4">
           <div>
diff --git a/console/src/modules/system/plugins/PluginDetail.vue b/console/src/modules/system/plugins/PluginDetail.vue
index 75b788d30..7d003b2d9 100644
--- a/console/src/modules/system/plugins/PluginDetail.vue
+++ b/console/src/modules/system/plugins/PluginDetail.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { VSwitch, VTag } from "@halo-dev/components";
+import {
+  VDescription,
+  VDescriptionItem,
+  VSwitch,
+  VTag,
+} from "@halo-dev/components";
 import type { Ref } from "vue";
 import { computed, inject } from "vue";
 import { apiClient } from "@/utils/api-client";
@@ -83,183 +88,114 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
         </div>
       </div>
       <div class="border-t border-gray-200">
-        <dl class="divide-y divide-gray-100">
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.display_name") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              {{ plugin?.spec.displayName }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.description") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              {{ plugin?.spec.description }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.version") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              {{ plugin?.spec.version }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.requires") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              {{ plugin?.spec.requires }}
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.author") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              <a
-                v-if="plugin?.spec.author"
-                :href="plugin?.spec.author.website"
-                target="_blank"
-              >
-                {{ plugin?.spec.author.name }}
-              </a>
-              <span v-else>
-                {{ $t("core.common.text.none") }}
-              </span>
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.license") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              <ul
-                v-if="plugin?.spec.license && plugin?.spec.license.length"
-                class="list-inside"
-                :class="{ 'list-disc': plugin?.spec.license.length > 1 }"
-              >
-                <li
-                  v-for="(license, index) in plugin.spec.license"
-                  :key="index"
-                >
-                  <a v-if="license.url" :href="license.url" target="_blank">
-                    {{ license.name }}
-                  </a>
-                  <span>
-                    {{ license.name }}
-                  </span>
-                </li>
-              </ul>
-            </dd>
-          </div>
-          <!-- TODO add display extensions support -->
-          <div
-            v-if="false"
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">模型定义</dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              <span>
-                {{ $t("core.common.text.none") }}
-              </span>
-            </dd>
-          </div>
-          <div
-            :class="`${
-              pluginRoleTemplateGroups.length ? 'bg-gray-50' : 'bg-white'
-            }`"
-            class="px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.role_templates") }}
-            </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-5 sm:mt-0">
-              <dl
-                v-if="pluginRoleTemplateGroups.length"
-                class="divide-y divide-gray-100"
-              >
-                <div
-                  v-for="(group, groupIndex) in pluginRoleTemplateGroups"
-                  :key="groupIndex"
-                  class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-                >
-                  <dt class="text-sm font-medium text-gray-900">
-                    {{ group.module }}
-                  </dt>
-                  <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                    <ul class="space-y-2">
-                      <li v-for="(role, index) in group.roles" :key="index">
-                        <div
-                          class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
-                        >
-                          <div class="inline-flex flex-col gap-y-3">
-                            <span class="font-medium text-gray-900">
-                              {{
-                                role.metadata.annotations?.[
-                                  rbacAnnotations.DISPLAY_NAME
-                                ]
-                              }}
-                            </span>
-                            <span
-                              v-if="
-                                role.metadata.annotations?.[
-                                  rbacAnnotations.DEPENDENCIES
-                                ]
-                              "
-                              class="text-xs text-gray-400"
-                            >
-                              {{
-                                $t("core.role.common.text.dependent_on", {
-                                  roles: JSON.parse(
-                                    role.metadata.annotations?.[
-                                      rbacAnnotations.DEPENDENCIES
-                                    ]
-                                  ).join(", "),
-                                })
-                              }}
-                            </span>
-                          </div>
-                        </div>
-                      </li>
-                    </ul>
-                  </dd>
-                </div>
-              </dl>
-              <span v-else>
-                {{ $t("core.common.text.none") }}
-              </span>
-            </dd>
-          </div>
-          <div
-            class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
-          >
-            <dt class="text-sm font-medium text-gray-900">
-              {{ $t("core.plugin.detail.fields.last_starttime") }}
-            </dt>
-            <dd
-              class="mt-1 text-sm tabular-nums text-gray-900 sm:col-span-2 sm:mt-0"
+        <VDescription>
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.display_name')"
+            :content="plugin?.spec.displayName"
+          />
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.description')"
+            :content="plugin?.spec.description"
+          />
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.version')"
+            :content="plugin?.spec.version"
+          />
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.requires')"
+            :content="plugin?.spec.requires"
+          />
+          <VDescriptionItem :label="$t('core.plugin.detail.fields.author')">
+            <a
+              v-if="plugin?.spec.author"
+              :href="plugin?.spec.author.website"
+              target="_blank"
             >
-              {{ formatDatetime(plugin?.status?.lastStartTime) }}
-            </dd>
-          </div>
-        </dl>
+              {{ plugin?.spec.author.name }}
+            </a>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
+          <VDescriptionItem :label="$t('core.plugin.detail.fields.license')">
+            <ul
+              v-if="plugin?.spec.license && plugin?.spec.license.length"
+              class="list-inside"
+              :class="{ 'list-disc': plugin?.spec.license.length > 1 }"
+            >
+              <li v-for="(license, index) in plugin.spec.license" :key="index">
+                <a v-if="license.url" :href="license.url" target="_blank">
+                  {{ license.name }}
+                </a>
+                <span>
+                  {{ license.name }}
+                </span>
+              </li>
+            </ul>
+          </VDescriptionItem>
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.role_templates')"
+          >
+            <dl
+              v-if="pluginRoleTemplateGroups.length"
+              class="divide-y divide-gray-100"
+            >
+              <div
+                v-for="(group, groupIndex) in pluginRoleTemplateGroups"
+                :key="groupIndex"
+                class="rounded bg-gray-50 px-4 py-5 hover:bg-gray-100 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+              >
+                <dt class="text-sm font-medium text-gray-900">
+                  {{ group.module }}
+                </dt>
+                <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                  <ul class="space-y-2">
+                    <li v-for="(role, index) in group.roles" :key="index">
+                      <div
+                        class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-primary"
+                      >
+                        <div class="inline-flex flex-col gap-y-3">
+                          <span class="font-medium text-gray-900">
+                            {{
+                              role.metadata.annotations?.[
+                                rbacAnnotations.DISPLAY_NAME
+                              ]
+                            }}
+                          </span>
+                          <span
+                            v-if="
+                              role.metadata.annotations?.[
+                                rbacAnnotations.DEPENDENCIES
+                              ]
+                            "
+                            class="text-xs text-gray-400"
+                          >
+                            {{
+                              $t("core.role.common.text.dependent_on", {
+                                roles: JSON.parse(
+                                  role.metadata.annotations?.[
+                                    rbacAnnotations.DEPENDENCIES
+                                  ]
+                                ).join(", "),
+                              })
+                            }}
+                          </span>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </dd>
+              </div>
+            </dl>
+            <span v-else>
+              {{ $t("core.common.text.none") }}
+            </span>
+          </VDescriptionItem>
+          <VDescriptionItem
+            :label="$t('core.plugin.detail.fields.last_starttime')"
+            :content="formatDatetime(plugin?.status?.lastStartTime)"
+          />
+        </VDescription>
       </div>
     </div>
   </Transition>
diff --git a/console/src/modules/system/roles/RoleDetail.vue b/console/src/modules/system/roles/RoleDetail.vue
index a46c7d18d..a995cdedc 100644
--- a/console/src/modules/system/roles/RoleDetail.vue
+++ b/console/src/modules/system/roles/RoleDetail.vue
@@ -9,6 +9,8 @@ import {
   VTag,
   VAvatar,
   VAlert,
+  VDescription,
+  VDescriptionItem,
 } from "@halo-dev/components";
 import { useRoute } from "vue-router";
 import { computed, onMounted, ref, watch } from "vue";
@@ -19,7 +21,6 @@ import {
   useRoleForm,
   useRoleTemplateSelection,
 } from "@/modules/system/roles/composables/use-role";
-import { useUserFetch } from "@/modules/system/users/composables/use-user";
 import { SUPER_ROLE_NAME } from "@/constants/constants";
 import { useI18n } from "vue-i18n";
 import { formatDatetime } from "@/utils/date";
@@ -34,8 +35,6 @@ const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } =
 
 const { formState, saving, handleCreateOrUpdate } = useRoleForm();
 
-const { users } = useUserFetch({ fetchOnMounted: false });
-
 const isSystemReserved = computed(() => {
   return (
     formState.value.metadata.labels?.[roleLabels.SYSTEM_RESERVED] === "true"
@@ -130,114 +129,34 @@ onMounted(() => {
           </p>
         </div>
         <div class="border-t border-gray-200">
-          <dl class="divide-y divide-gray-100">
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+          <VDescription>
+            <VDescriptionItem
+              :label="$t('core.role.detail.fields.display_name')"
             >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.role.detail.fields.display_name") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              {{
+                formState.metadata?.annotations?.[
+                  rbacAnnotations.DISPLAY_NAME
+                ] || formState.metadata?.name
+              }}
+            </VDescriptionItem>
+            <VDescriptionItem
+              :label="$t('core.role.detail.fields.name')"
+              :content="formState.metadata?.name"
+            />
+            <VDescriptionItem :label="$t('core.role.detail.fields.type')">
+              <VTag>
                 {{
-                  formState.metadata?.annotations?.[
-                    rbacAnnotations.DISPLAY_NAME
-                  ] || formState.metadata?.name
+                  isSystemReserved
+                    ? t("core.role.common.text.system_reserved")
+                    : t("core.role.common.text.custom")
                 }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.role.detail.fields.name") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ formState.metadata?.name }}
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.role.detail.fields.type") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <VTag>
-                  {{
-                    isSystemReserved
-                      ? t("core.role.common.text.system_reserved")
-                      : t("core.role.common.text.custom")
-                  }}
-                </VTag>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                {{ $t("core.role.detail.fields.creation_time") }}
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ formatDatetime(formState.metadata.creationTimestamp) }}
-              </dd>
-            </div>
-            <!-- TODO: 支持通过当前角色查询用户 -->
-            <div
-              v-if="false"
-              class="bg-gray-50 px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">用户</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <div
-                  class="h-96 overflow-y-auto overflow-x-hidden rounded-sm bg-white shadow-sm transition-all hover:shadow"
-                >
-                  <ul class="divide-y divide-gray-100" role="list">
-                    <RouterLink
-                      v-for="(user, index) in users"
-                      :key="index"
-                      :to="{
-                        name: 'UserDetail',
-                        params: { name: user.metadata.name },
-                      }"
-                    >
-                      <li class="block cursor-pointer hover:bg-gray-50">
-                        <div class="flex items-center px-4 py-4">
-                          <div class="flex min-w-0 flex-1 items-center">
-                            <div class="flex flex-shrink-0 items-center">
-                              <VAvatar
-                                :alt="user.spec.displayName"
-                                :src="user.spec.avatar"
-                                size="md"
-                              />
-                            </div>
-                            <div
-                              class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4"
-                            >
-                              <div>
-                                <p
-                                  class="truncate text-sm font-medium text-gray-900"
-                                >
-                                  {{ user.spec.displayName }}
-                                </p>
-                                <p class="mt-2 flex items-center">
-                                  <span class="text-xs text-gray-500">
-                                    {{ user.metadata.name }}
-                                  </span>
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                          <div>
-                            <IconArrowRight />
-                          </div>
-                        </div>
-                      </li>
-                    </RouterLink>
-                  </ul>
-                </div>
-              </dd>
-            </div>
-          </dl>
+              </VTag>
+            </VDescriptionItem>
+            <VDescriptionItem
+              :label="$t('core.role.detail.fields.creation_time')"
+              :content="formatDatetime(formState.metadata.creationTimestamp)"
+            />
+          </VDescription>
         </div>
       </div>
 
diff --git a/console/src/modules/system/users/UserDetail.vue b/console/src/modules/system/users/UserDetail.vue
index 90f1a6b4e..45fc7d73d 100644
--- a/console/src/modules/system/users/UserDetail.vue
+++ b/console/src/modules/system/users/UserDetail.vue
@@ -1,5 +1,12 @@
 <script lang="ts" setup>
-import { Dialog, IconUserSettings, VButton, VTag } from "@halo-dev/components";
+import {
+  Dialog,
+  IconUserSettings,
+  VButton,
+  VDescription,
+  VDescriptionItem,
+  VTag,
+} from "@halo-dev/components";
 import type { ComputedRef, Ref } from "vue";
 import { inject, computed } from "vue";
 import { useRouter } from "vue-router";
@@ -64,144 +71,99 @@ const handleBindAuth = (authProvider: ListedAuthProvider) => {
 </script>
 <template>
   <div class="border-t border-gray-100">
-    <dl class="divide-y divide-gray-50">
-      <div
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
+    <VDescription>
+      <VDescriptionItem
+        :label="$t('core.user.detail.fields.display_name')"
+        :content="user?.user.spec.displayName"
+        class="!px-2"
+      />
+      <VDescriptionItem
+        :label="$t('core.user.detail.fields.username')"
+        :content="user?.user.metadata.name"
+        class="!px-2"
+      />
+      <VDescriptionItem
+        :label="$t('core.user.detail.fields.email')"
+        :content="user?.user.spec.email || $t('core.common.text.none')"
+        class="!px-2"
+      />
+      <VDescriptionItem
+        :label="$t('core.user.detail.fields.roles')"
+        class="!px-2"
       >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.display_name") }}
-        </dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-          {{ user?.user.spec?.displayName }}
-        </dd>
-      </div>
-      <div
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
-      >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.username") }}
-        </dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-          {{ user?.user.metadata?.name }}
-        </dd>
-      </div>
-      <div
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
-      >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.email") }}
-        </dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-          {{ user?.user.spec?.email || $t("core.common.text.none") }}
-        </dd>
-      </div>
-      <div
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
-      >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.roles") }}
-        </dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-          <VTag
-            v-for="(role, index) in user?.roles"
-            :key="index"
-            @click="
-              router.push({
-                name: 'RoleDetail',
-                params: { name: role.metadata.name },
-              })
-            "
-          >
-            <template #leftIcon>
-              <IconUserSettings />
-            </template>
-            {{
-              role.metadata.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
-              role.metadata.name
-            }}
-          </VTag>
-        </dd>
-      </div>
-      <div
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
-      >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.bio") }}
-        </dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-          {{ user?.user.spec?.bio || $t("core.common.text.none") }}
-        </dd>
-      </div>
-      <div
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
-      >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.creation_time") }}
-        </dt>
-        <dd
-          class="mt-1 text-sm tabular-nums text-gray-900 sm:col-span-3 sm:mt-0"
+        <VTag
+          v-for="(role, index) in user?.roles"
+          :key="index"
+          @click="
+            router.push({
+              name: 'RoleDetail',
+              params: { name: role.metadata.name },
+            })
+          "
         >
-          {{ formatDatetime(user?.user.metadata?.creationTimestamp) }}
-        </dd>
-      </div>
-      <!-- TODO: add display last login time support -->
-      <div
-        v-if="false"
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
-      >
-        <dt class="text-sm font-medium text-gray-900">最近登录时间</dt>
-        <dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
-          {{ user?.user.metadata?.creationTimestamp }}
-        </dd>
-      </div>
-      <div
+          <template #leftIcon>
+            <IconUserSettings />
+          </template>
+          {{
+            role.metadata.annotations?.[rbacAnnotations.DISPLAY_NAME] ||
+            role.metadata.name
+          }}
+        </VTag>
+      </VDescriptionItem>
+      <VDescriptionItem
+        :label="$t('core.user.detail.fields.bio')"
+        :content="user?.user.spec?.bio || $t('core.common.text.none')"
+        class="!px-2"
+      />
+      <VDescriptionItem
+        :label="$t('core.user.detail.fields.creation_time')"
+        :content="formatDatetime(user?.user.metadata?.creationTimestamp)"
+        class="!px-2"
+      />
+      <VDescriptionItem
         v-if="!isFetching && isCurrentUser && availableAuthProviders?.length"
-        class="bg-white px-2 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
+        :label="$t('core.user.detail.fields.identity_authentication')"
+        class="!px-2"
       >
-        <dt class="text-sm font-medium text-gray-900">
-          {{ $t("core.user.detail.fields.identity_authentication") }}
-        </dt>
-        <dd class="mt-1 text-sm sm:col-span-3 sm:mt-0">
-          <ul class="space-y-2">
-            <template v-for="(authProvider, index) in authProviders">
-              <li
-                v-if="authProvider.supportsBinding && authProvider.enabled"
-                :key="index"
+        <ul class="space-y-2">
+          <template v-for="(authProvider, index) in authProviders">
+            <li
+              v-if="authProvider.supportsBinding && authProvider.enabled"
+              :key="index"
+            >
+              <div
+                class="flex w-full cursor-pointer flex-wrap justify-between gap-y-3 rounded border p-5 hover:border-primary sm:w-1/2"
               >
-                <div
-                  class="flex w-full cursor-pointer flex-wrap justify-between gap-y-3 rounded border p-5 hover:border-primary sm:w-1/2"
-                >
-                  <div class="inline-flex items-center gap-3">
-                    <div>
-                      <img class="h-7 w-7 rounded" :src="authProvider.logo" />
-                    </div>
-                    <div class="text-sm font-medium text-gray-900">
-                      {{ authProvider.displayName }}
-                    </div>
+                <div class="inline-flex items-center gap-3">
+                  <div>
+                    <img class="h-7 w-7 rounded" :src="authProvider.logo" />
                   </div>
-                  <div class="inline-flex items-center">
-                    <VButton
-                      v-if="authProvider.isBound"
-                      size="sm"
-                      @click="handleUnbindAuth(authProvider)"
-                    >
-                      {{ $t("core.user.detail.operations.unbind.button") }}
-                    </VButton>
-                    <VButton
-                      v-else
-                      size="sm"
-                      type="secondary"
-                      @click="handleBindAuth(authProvider)"
-                    >
-                      {{ $t("core.user.detail.operations.bind.button") }}
-                    </VButton>
+                  <div class="text-sm font-medium text-gray-900">
+                    {{ authProvider.displayName }}
                   </div>
                 </div>
-              </li>
-            </template>
-          </ul>
-        </dd>
-      </div>
-    </dl>
+                <div class="inline-flex items-center">
+                  <VButton
+                    v-if="authProvider.isBound"
+                    size="sm"
+                    @click="handleUnbindAuth(authProvider)"
+                  >
+                    {{ $t("core.user.detail.operations.unbind.button") }}
+                  </VButton>
+                  <VButton
+                    v-else
+                    size="sm"
+                    type="secondary"
+                    @click="handleBindAuth(authProvider)"
+                  >
+                    {{ $t("core.user.detail.operations.bind.button") }}
+                  </VButton>
+                </div>
+              </div>
+            </li>
+          </template>
+        </ul>
+      </VDescriptionItem>
+    </VDescription>
   </div>
 </template>