From 81cafb14bb5ced3598b5be842f86b53192a4e1e1 Mon Sep 17 00:00:00 2001
From: Hilary Liu <2788370451@qq.com>
Date: Fri, 25 Aug 2023 22:36:12 +0800
Subject: [PATCH] fix: style issue of post widget when post title is too long
 (#4416)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--  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
用户在仪表板页面为`最近文章`设置的宽度不够时，可以显示创建日期
```
---
 console/src/locales/en.yaml                   |  1 +
 console/src/locales/zh-CN.yaml                |  1 +
 console/src/locales/zh-TW.yaml                |  1 +
 .../posts/widgets/RecentPublishedWidget.vue   | 21 +++++++++++--------
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/console/src/locales/en.yaml b/console/src/locales/en.yaml
index bd7fa9bc4..604a72c96 100644
--- a/console/src/locales/en.yaml
+++ b/console/src/locales/en.yaml
@@ -102,6 +102,7 @@ core:
           title: Recent Posts
           visits: "{visits} Visits"
           comments: "{comments} Comments"
+          publishTime: "Publish Time {publishTime}"
         quicklink:
           title: Quick Link
           actions:
diff --git a/console/src/locales/zh-CN.yaml b/console/src/locales/zh-CN.yaml
index 21abecdad..eaf09547b 100644
--- a/console/src/locales/zh-CN.yaml
+++ b/console/src/locales/zh-CN.yaml
@@ -102,6 +102,7 @@ core:
           title: 最近文章
           visits: "访问量 {visits}"
           comments: "评论 {comments}"
+          publishTime: "发布日期 {publishTime}"
         quicklink:
           title: 快捷访问
           actions:
diff --git a/console/src/locales/zh-TW.yaml b/console/src/locales/zh-TW.yaml
index 6b7477519..0562b4fbf 100644
--- a/console/src/locales/zh-TW.yaml
+++ b/console/src/locales/zh-TW.yaml
@@ -102,6 +102,7 @@ core:
           title: 最近文章
           visits: "訪問量 {visits}"
           comments: "留言 {comments}"
+          publishTime: "發佈日期 {publishTime}"
         quicklink:
           title: 快捷訪問
           actions:
diff --git a/console/src/modules/contents/posts/widgets/RecentPublishedWidget.vue b/console/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
index 9aa7932a9..5b0eefd17 100644
--- a/console/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
+++ b/console/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
@@ -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>