From 24b37a959204be5a81ddda72e9c3c9b82827240c Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 25 Nov 2024 16:34:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E6=95=B0=E5=80=BC=E7=9A=84=E4=BD=8D=E7=BD=AE=E5=A4=AA=E8=BF=9C?=
 =?UTF-8?q?=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/Header.vue          | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/core/core-frontend/src/layout/components/Header.vue b/core/core-frontend/src/layout/components/Header.vue
index 6dae89860c..5746ad8fb4 100644
--- a/core/core-frontend/src/layout/components/Header.vue
+++ b/core/core-frontend/src/layout/components/Header.vue
@@ -120,7 +120,7 @@ const copilotConfirm = () => {
   wsCache.set('DE-COPILOT-TIPS-CHECK', 'CHECKED')
   showOverlayCopilot.value = false
 }
-const badgeCount = ref(0)
+const badgeCount = ref('0')
 
 onMounted(() => {
   initShowSystem()
@@ -129,7 +129,7 @@ onMounted(() => {
   initCopilotBase()
 
   msgCountApi().then(res => {
-    badgeCount.value = res?.data || 0
+    badgeCount.value = (res?.data > 99 ? '99+' : res?.data) || '0'
   })
 })
 </script>
@@ -190,10 +190,14 @@ onMounted(() => {
       <ToolboxCfg v-if="showToolbox" />
       <TopDoc v-if="appearanceStore.getShowDoc" />
       <el-tooltip effect="dark" :content="$t('v_query.msg_center')" placement="bottom">
-        <el-badge :hidden="badgeCount === 0" :value="badgeCount" class="item">
+        <el-badge
+          style="margin-right: 10px"
+          :hidden="[0, '0'].includes(badgeCount)"
+          :value="badgeCount"
+          class="ed-badge_custom"
+        >
           <el-icon
             class="preview-download_icon"
-            style="margin-right: 10px"
             :class="navigateBg === 'light' && 'is-light-setting'"
           >
             <Icon name="dv-preview-download"
@@ -219,6 +223,16 @@ onMounted(() => {
 </template>
 
 <style lang="less" scoped>
+:deep(.ed-badge_custom) {
+  --ed-badge-size: 14px;
+  .ed-badge__content {
+    right: 0;
+    padding: 3px;
+    border: none;
+    font-size: 8px;
+    transform: translateX(20%) translateY(-30%);
+  }
+}
 .preview-download_icon {
   padding: 5px;
   height: 28px;