(incubator-answer) branch dev updated: style: Improve the display of personal page when there is no information

[robin0716]

This is an automated email from the ASF dual-hosted git repository.

robin0716 pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/dev by this push:
     new 057f66cf style: Improve the display of personal page when there is no 
information
057f66cf is described below

commit 057f66cf318eb06826e44eff56e2018758549421
Author: sy-records <5...@qq52o.cn>
AuthorDate: Thu Oct 10 09:40:35 2024 +0800

    style: Improve the display of personal page when there is no information
---
 i18n/en_US.yaml                                    |  1 +
 i18n/zh_CN.yaml                                    |  1 +
 .../Users/Personal/components/Overview/index.tsx   | 41 ++++++++++++----------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
index bf8f3813..e5f23fe2 100644
--- a/i18n/en_US.yaml
+++ b/i18n/en_US.yaml
@@ -1585,6 +1585,7 @@ ui:
     top_questions: Top Questions
     stats: Stats
     list_empty: No posts found.<br />Perhaps you'd like to select a different 
tab?
+    content_empty: No posts found.
     accepted: Accepted
     answered: answered
     asked: asked
diff --git a/i18n/zh_CN.yaml b/i18n/zh_CN.yaml
index ca69257d..1f51ffd0 100644
--- a/i18n/zh_CN.yaml
+++ b/i18n/zh_CN.yaml
@@ -1559,6 +1559,7 @@ ui:
     top_questions: 高分问题
     stats: 状态
     list_empty: 没有找到相关的内容。<br />试试看其他选项卡？
+    content_empty: 没有找到相关的内容。
     accepted: 已采纳
     answered: 回答于
     asked: 提问于
diff --git a/ui/src/pages/Users/Personal/components/Overview/index.tsx 
b/ui/src/pages/Users/Personal/components/Overview/index.tsx
index 6b247b0c..7f937f68 100644
--- a/ui/src/pages/Users/Personal/components/Overview/index.tsx
+++ b/ui/src/pages/Users/Personal/components/Overview/index.tsx
@@ -49,31 +49,34 @@ const Index: FC<Props> = ({ visible, introduction, data, 
username }) => {
           dangerouslySetInnerHTML={{ __html: introduction }}
         />
       ) : (
-        <div className="text-center py-5 mb-5">{t('about_me_empty')}</div>
+        <div className="mb-5">{t('about_me_empty')}</div>
       )}
 
-      <Row className="mb-4">
-        <Col sm={12} md={6} className="mb-4">
-          {data?.answer?.length > 0 && (
-            <>
-              <h5 className="mb-3">{t('top_answers')}</h5>
-              <TopList data={data?.answer} type="answer" />
-            </>
+      <Row
+        className={
+          data?.answer?.length > 0 || data?.question?.length > 0 ? 'mb-4' : ''
+        }>
+        <Col sm={12} md={6}>
+          <h5 className="mb-3">{t('top_answers')}</h5>
+          {data?.answer?.length > 0 ? (
+            <TopList data={data?.answer} type="answer" />
+          ) : (
+            <div className="mb-5">{t('content_empty')}</div>
           )}
         </Col>
         <Col sm={12} md={6}>
-          {data?.question?.length > 0 && (
-            <>
-              <h5 className="mb-3">{t('top_questions')}</h5>
-              <TopList data={data?.question} type="question" />
-            </>
+          <h5 className="mb-3">{t('top_questions')}</h5>
+          {data?.question?.length > 0 ? (
+            <TopList data={data?.question} type="question" />
+          ) : (
+            <div className="mb-5">{t('content_empty')}</div>
           )}
         </Col>
       </Row>
 
-      {Number(recentBadges?.count) > 0 && (
-        <div className="mb-5">
-          <h5 className="mb-3">{t('recent_badges')}</h5>
+      <div className="mb-5">
+        <h5 className="mb-3">{t('recent_badges')}</h5>
+        {Number(recentBadges?.count) > 0 ? (
           <div className="d-flex flex-wrap" style={{ margin: '-12px' }}>
             {recentBadges?.list?.map((item) => {
               return (
@@ -85,8 +88,10 @@ const Index: FC<Props> = ({ visible, introduction, data, 
username }) => {
               );
             })}
           </div>
-        </div>
-      )}
+        ) : (
+          <div className="mb-5">{t('content_empty')}</div>
+        )}
+      </div>
     </div>
   );
 };