perf: improve layout of comment list item (#3563)

#### What type of PR is this?

/kind improvement
/area console

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

优化评论管理列表项的布局，将被评论页面放置在评论内容上方，看起来更加直观。

before:

<img width="1399" alt="image" src="https://user-images.githubusercontent.com/21301288/226825923-6d2fec5b-c2d9-4d32-8502-255afac7d0ca.png">

after:

<img width="1396" alt="image" src="https://user-images.githubusercontent.com/21301288/226825785-db6e8696-4e99-43c2-b7a9-3e8b1edb09d9.png">

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

Fixes <https://github.com/halo-dev/halo/issues/3377>

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

```release-note
优化 Console 端评论管理列表项的布局
```

console/src/locales/zh-CN.yaml

@@ -408,7 +408,7 @@ core:
         pending_review: 待审核
     subject_refs:
       post: 文章
-      page: 单页
+      page: 页面
       unknown: 未知
     reply_modal:
       title: 回复

console/src/modules/contents/comments/components/CommentListItem.vue

@@ -12,6 +12,7 @@ import {
   IconExternalLinkLine,
   VLoading,
   Toast,
+  VTag,
 } from "@halo-dev/components";
 import ReplyCreationModal from "./ReplyCreationModal.vue";
 import type {
@@ -296,9 +297,26 @@ const subjectRefResult = computed(() => {
         :title="comment?.owner?.displayName"
         :description="comment?.owner?.email"
       ></VEntityField>
-      <VEntityField width="60%">
+      <VEntityField width="100%">
         <template #description>
           <div class="flex flex-col gap-2">
+            <div class="mb-1 flex items-center gap-2">
+              <VTag>{{ subjectRefResult.label }}</VTag>
+              <RouterLink
+                :to="subjectRefResult.route || $route"
+                class="truncate text-sm font-medium text-gray-900 hover:text-gray-600"
+              >
+                {{ subjectRefResult.title }}
+              </RouterLink>
+              <a
+                v-if="subjectRefResult.externalUrl"
+                :href="subjectRefResult.externalUrl"
+                target="_blank"
+                class="hidden text-gray-600 hover:text-gray-900 group-hover:block"
+              >
+                <IconExternalLinkLine class="h-3.5 w-3.5" />
+              </a>
+            </div>
             <div class="break-all text-sm text-gray-900">
               {{ comment?.comment?.spec.content }}
             </div>
@@ -331,22 +349,6 @@ const subjectRefResult = computed(() => {
       </VEntityField>
     </template>
     <template #end>
-      <VEntityField
-        :title="subjectRefResult.title"
-        :description="subjectRefResult.label"
-        :route="subjectRefResult.route"
-      >
-        <template #extra>
-          <a
-            v-if="subjectRefResult.externalUrl"
-            :href="subjectRefResult.externalUrl"
-            target="_blank"
-            class="text-gray-600 hover:text-gray-900"
-          >
-            <IconExternalLinkLine class="h-3.5 w-3.5" />
-          </a>
-        </template>
-      </VEntityField>
       <VEntityField v-if="!comment?.comment.spec.approved">
         <template #description>
           <VStatusDot state="success">