fix: style issue of post widget when post title is too long (#4416)

<!--  Thanks for sending a pull request!  Here are some tips for you:
1. 如果这是你的第一次,请阅读我们的贡献指南:<https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>。
1. If this is your first time, please read our contributor guidelines: <https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>.
2. 请根据你解决问题的类型为 Pull Request 添加合适的标签。
2. Please label this pull request according to what type of issue you are addressing, especially if this is a release targeted pull request.
3. 请确保你已经添加并运行了适当的测试。
3. Ensure you have added or ran the appropriate tests for your PR.
-->

#### What type of PR is this?
/kind bug
/area console
<!--
添加其中一个类别:
Add one of the following kinds:

/kind bug
/kind cleanup
/kind documentation
/kind feature
/kind improvement

适当添加其中一个或多个类别(可选):
Optionally add one or more of the following kinds if applicable:

/kind api-change
/kind deprecation
/kind failing-test
/kind flake
/kind regression
-->

#### What this PR does / why we need it:
文章标题过长时,面板“最近文章”会存在日期显示不完整
#### Which issue(s) this PR fixes:

<!--
PR 合并时自动关闭 issue。
Automatically closes linked issue when PR is merged.

用法:`Fixes #<issue 号>`,或者 `Fixes (粘贴 issue 完整链接)`
Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`.
-->
Fixes https://github.com/halo-dev/halo/issues/4304

#### Special notes for your reviewer:
目前我的解决方案是将Entity加上一个flex-wrap,这样可以保证日期显示完整,但是这可能导致上下文章的布局结构不统一。不知是否可以采纳。
![image](https://github.com/halo-dev/halo/assets/110895612/45218eaf-7d7c-46ba-80ad-2d646e5b16dd)

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

<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更,在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新(Break Change),
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
用户在仪表板页面为`最近文章`设置的宽度不够时,可以显示创建日期
```
pull/4482/head
Hilary Liu 2023-08-25 22:36:12 +08:00 committed by GitHub
parent 637071b260
commit 81cafb14bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 9 deletions

View File

@ -102,6 +102,7 @@ core:
title: Recent Posts
visits: "{visits} Visits"
comments: "{comments} Comments"
publishTime: "Publish Time {publishTime}"
quicklink:
title: Quick Link
actions:

View File

@ -102,6 +102,7 @@ core:
title: 最近文章
visits: "访问量 {visits}"
comments: "评论 {comments}"
publishTime: "发布日期 {publishTime}"
quicklink:
title: 快捷访问
actions:

View File

@ -102,6 +102,7 @@ core:
title: 最近文章
visits: "訪問量 {visits}"
comments: "留言 {comments}"
publishTime: "發佈日期 {publishTime}"
quicklink:
title: 快捷訪問
actions:

View File

@ -70,6 +70,18 @@ const { data } = useQuery<ListedPost[]>({
)
}}
</span>
<span class="truncate text-xs tabular-nums text-gray-500">
{{
$t(
"core.dashboard.widgets.presets.recent_published.publishTime",
{
publishTime: formatDatetime(
post.post.spec.publishTime
),
}
)
}}
</span>
</VSpace>
</template>
<template #extra>
@ -85,15 +97,6 @@ const { data } = useQuery<ListedPost[]>({
</template>
</VEntityField>
</template>
<template #end>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(post.post.spec.publishTime) }}
</span>
</template>
</VEntityField>
</template>
</VEntity>
</li>
</ul>