From 4ca0a092817535799d64532802d984e2f489abdd Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 19 Jun 2025 16:03:00 +0800
Subject: [PATCH] refactor: adjust max width of post title field (#7564)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

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

before:

<img width="552" alt="image" src="https://github.com/user-attachments/assets/679a0b38-e215-4fb8-bee6-737504e03a7f" />

after:

<img width="696" alt="image" src="https://github.com/user-attachments/assets/7106c351-97ab-4a3c-978d-cfd9f8c20392" />

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

Fixes #7561

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

```release-note
调整 Console 文章列表的标题区域最大宽度
```
---
 .../contents/pages/DeletedSinglePageList.vue  |  5 ++++-
 .../components/entity-fields/TitleField.vue   |  1 +
 .../contents/posts/DeletedPostList.vue        |  2 +-
 .../components/entity-fields/TitleField.vue   |  1 +
 .../src/components/entity/EntityField.vue     | 21 ++++++++++++-------
 .../posts/components/PostListItem.vue         |  1 +
 6 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 21b4f14d0..813283596 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -321,7 +321,10 @@ watch(
                   </div>
                 </template>
               </VEntityField>
-              <VEntityField :title="singlePage.page.spec.title">
+              <VEntityField
+                :title="singlePage.page.spec.title"
+                max-width="30rem"
+              >
                 <template #description>
                   <VSpace>
                     <span class="text-xs text-gray-500">
diff --git a/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue b/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue
index c5e71e43b..534f0107a 100644
--- a/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue
+++ b/ui/console-src/modules/contents/pages/components/entity-fields/TitleField.vue
@@ -32,6 +32,7 @@ const externalUrl = computed(() => {
       name: 'SinglePageEditor',
       query: { name: singlePage.page.metadata.name },
     }"
+    max-width="30rem"
   >
     <template #extra>
       <VSpace>
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index b1f6c4cbe..00c91f4a4 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -330,7 +330,7 @@ watch(
                   </div>
                 </template>
               </VEntityField>
-              <VEntityField :title="post.post.spec.title">
+              <VEntityField :title="post.post.spec.title" max-width="30rem">
                 <template #description>
                   <div class="flex flex-col gap-1.5">
                     <VSpace class="flex-wrap !gap-y-1">
diff --git a/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue b/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue
index a38e1d65d..90d3a1ac4 100644
--- a/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/TitleField.vue
@@ -33,6 +33,7 @@ const externalUrl = computed(() => {
       name: 'PostEditor',
       query: { name: post.post.metadata.name },
     }"
+    max-width="30rem"
   >
     <template #extra>
       <VSpace>
diff --git a/ui/packages/components/src/components/entity/EntityField.vue b/ui/packages/components/src/components/entity/EntityField.vue
index 99ad07a9a..36b85f24d 100644
--- a/ui/packages/components/src/components/entity/EntityField.vue
+++ b/ui/packages/components/src/components/entity/EntityField.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, type CSSProperties } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
 const props = withDefaults(
@@ -8,12 +8,14 @@ const props = withDefaults(
     description?: string;
     route?: RouteLocationRaw;
     width?: string | number;
+    maxWidth?: string | number;
   }>(),
   {
     title: undefined,
     description: undefined,
     route: undefined,
     width: undefined,
+    maxWidth: undefined,
   }
 );
 
@@ -22,16 +24,19 @@ const emit = defineEmits<{
 }>();
 
 const wrapperStyles = computed(() => {
+  const styles: CSSProperties = {};
   if (props.width) {
-    const width =
-      typeof props.width === "string" ? props.width : `${props.width}px`;
-    return {
-      width,
-      maxWidth: width,
-    };
+    styles.width = getWidthStyleValue(props.width);
   }
-  return {};
+  if (props.maxWidth) {
+    styles.maxWidth = getWidthStyleValue(props.maxWidth);
+  }
+  return styles;
 });
+
+function getWidthStyleValue(value: string | number) {
+  return typeof value === "string" ? value : `${value}px`;
+}
 </script>
 
 <template>
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index 76d9e4222..769cf4ccd 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -138,6 +138,7 @@ function handleDelete() {
           name: 'PostEditor',
           query: { name: post.post.metadata.name },
         }"
+        max-width="30rem"
       >
         <template #extra>
           <VSpace class="mt-1 sm:mt-0">