refactor: adjust max width of post title field (#7564)

#### 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 文章列表的标题区域最大宽度
```

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">

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>

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">

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>

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 =
+    styles.width = getWidthStyleValue(props.width);
-      typeof props.width === "string" ? props.width : `${props.width}px`;
-    return {
-      width,
-      maxWidth: 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>

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">