From c71d34153c9d880e31df5cf023a7adf50c92e729 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 23 Nov 2022 12:57:31 +0800
Subject: [PATCH] perf: set maximum width for entity-field to prevent text
 overflow (halo-dev/console#700)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/milestone 2.0

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

为 `VEntityField` 组件设置最大宽度，防止内容过多导致 UI 异常。

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

Fixes https://github.com/halo-dev/halo/issues/2468

#### Screenshots:

<img width="534" alt="image" src="https://user-images.githubusercontent.com/21301288/203077107-55cbb951-5ea4-4699-8368-023c60ae9054.png">

#### Special notes for your reviewer:

/cc @halo-dev/sig-halo-console

测试方式：

1. Console 需要 `pnpm build:packages`
2. 新增任意资源，设置超长的内容，检查列表的样式是否异常。

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

```release-note
为 `VEntityField` 组件设置最大宽度，防止内容过多导致 UI 异常。
```
---
 .../src/components/entity/Entity.vue          |  4 +--
 .../src/components/entity/EntityField.vue     | 30 ++++++++++++++-----
 .../comments/components/CommentListItem.vue   |  2 +-
 src/modules/contents/pages/SinglePageList.vue | 26 +++++++++-------
 4 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/components/entity/Entity.vue b/packages/components/src/components/entity/Entity.vue
index 866053976..b1cf3418c 100644
--- a/packages/components/src/components/entity/Entity.vue
+++ b/packages/components/src/components/entity/Entity.vue
@@ -59,7 +59,7 @@ const classes = computed(() => {
 </template>
 <style lang="scss">
 .entity-wrapper {
-  @apply relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50;
+  @apply relative block cursor-pointer px-4 py-3 transition-all hover:bg-gray-50 w-full;
 
   &.entity-selected {
     @apply bg-gray-100;
@@ -70,7 +70,7 @@ const classes = computed(() => {
   }
 
   .entity-body {
-    @apply relative flex flex-row items-center;
+    @apply relative flex flex-row items-center w-full;
   }
 
   .entity-checkbox {
diff --git a/packages/components/src/components/entity/EntityField.vue b/packages/components/src/components/entity/EntityField.vue
index a597ecd4e..b6c48c28f 100644
--- a/packages/components/src/components/entity/EntityField.vue
+++ b/packages/components/src/components/entity/EntityField.vue
@@ -1,33 +1,45 @@
 <script lang="ts" setup>
+import { computed, mergeProps } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title?: string;
     description?: string;
     route?: RouteLocationRaw;
+    width?: string | number;
   }>(),
   {
     title: undefined,
     description: undefined,
     route: undefined,
+    width: undefined,
   }
 );
 
 const emit = defineEmits<{
   (event: "click"): void;
 }>();
+
+const wrapperStyles = computed(() => {
+  if (props.width) {
+    return {
+      width: typeof props.width === "string" ? props.width : `${props.width}px`,
+    };
+  }
+  return {};
+});
 </script>
 
 <template>
-  <div class="entity-field-wrapper">
+  <div class="entity-field-wrapper" :style="wrapperStyles">
     <div v-if="title || $slots.title" class="entity-field-title-body">
       <slot name="title">
         <div class="entity-field-title" @click="emit('click')">
-          <RouterLink v-if="route" :to="route">
+          <RouterLink v-if="route" :to="route" :title="title">
             {{ title }}
           </RouterLink>
-          <span v-else>
+          <span v-else :title="title">
             {{ title }}
           </span>
         </div>
@@ -39,7 +51,11 @@ const emit = defineEmits<{
       class="entity-field-description-body"
     >
       <slot name="description">
-        <span v-if="description" class="entity-field-description">
+        <span
+          v-if="description"
+          class="entity-field-description"
+          :title="description"
+        >
           {{ description }}
         </span>
       </slot>
@@ -49,10 +65,10 @@ const emit = defineEmits<{
 
 <style lang="scss">
 .entity-field-wrapper {
-  @apply inline-flex flex-col gap-1;
+  @apply inline-flex flex-col gap-1 max-w-xs;
 
   .entity-field-title-body {
-    @apply inline-flex flex-col items-center sm:flex-row;
+    @apply inline-flex items-center flex-row;
 
     .entity-field-title {
       @apply mr-0 truncate text-sm font-medium text-gray-900 sm:mr-2;
diff --git a/src/modules/contents/comments/components/CommentListItem.vue b/src/modules/contents/comments/components/CommentListItem.vue
index 47bf56f6a..bcf09fb62 100644
--- a/src/modules/contents/comments/components/CommentListItem.vue
+++ b/src/modules/contents/comments/components/CommentListItem.vue
@@ -300,7 +300,7 @@ const subjectRefResult = computed(() => {
       <VEntityField>
         <template #description>
           <div class="flex flex-col gap-2">
-            <div class="w-1/2 text-sm text-gray-900">
+            <div class="text-sm text-gray-900">
               {{ comment?.comment?.spec.content }}
             </div>
             <div class="flex items-center gap-3 text-xs">
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 1f753518a..307c70bfe 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -648,17 +648,21 @@ function handleSortItemChange(sortItem?: SortItem) {
                 </RouterLink>
               </template>
               <template #description>
-                <VSpace>
-                  <span class="text-xs text-gray-500">
-                    {{ singlePage.page.status?.permalink }}
-                  </span>
-                  <span class="text-xs text-gray-500">
-                    访问量 {{ singlePage.stats.visit || 0 }}
-                  </span>
-                  <span class="text-xs text-gray-500">
-                    评论 {{ singlePage.stats.totalComment || 0 }}
-                  </span>
-                </VSpace>
+                <div class="flex w-full flex-col gap-1">
+                  <VSpace class="w-full">
+                    <span class="text-xs text-gray-500">
+                      访问量 {{ singlePage.stats.visit || 0 }}
+                    </span>
+                    <span class="text-xs text-gray-500">
+                      评论 {{ singlePage.stats.totalComment || 0 }}
+                    </span>
+                  </VSpace>
+                  <VSpace class="w-full">
+                    <span class="truncate text-xs text-gray-500">
+                      {{ singlePage.page.status?.permalink }}
+                    </span>
+                  </VSpace>
+                </div>
               </template>
             </VEntityField>
           </template>