From c700b1305c1b8c7bc09efefff1622f612dfe1c5b Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Tue, 12 Nov 2024 09:47:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E9=9B=86=E7=BE=A4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=E6=89=B9=E9=87=8F=E7=A6=81=E7=94=A8?=
 =?UTF-8?q?/=E5=90=AF=E7=94=A8=E3=80=81=E5=88=A0=E9=99=A4=E9=9B=86?=
 =?UTF-8?q?=E7=BE=A4=20#7753?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/services/model/es/es.ts          |  6 +++++-
 dbm-ui/frontend/src/services/model/hdfs/hdfs.ts      |  6 +++++-
 dbm-ui/frontend/src/services/model/mysql/tendbha.ts  |  6 +++++-
 .../frontend/src/services/model/mysql/tendbsingle.ts |  6 +++++-
 .../elastic-search/list/components/list/Index.vue    | 10 ++++++++--
 .../db-manage/hdfs/list/components/list/Index.vue    | 10 ++++++++--
 .../instance-list/components/render-list/Index.vue   |  7 ++++++-
 .../replica-set-list/components/list/Index.vue       | 12 ++++++------
 .../shared-cluster-list/components/list/Index.vue    | 10 ++++++----
 .../mysql/ha-cluster-list/components/List.vue        | 11 +++++++----
 .../views/db-manage/mysql/partition-manage/Index.vue |  9 ++++++---
 .../mysql/single-cluster-list/components/List.vue    | 11 +++++++----
 .../components/detail/components/node-list/Index.vue | 11 ++++++++++-
 .../db-manage/pulsar/list/components/list/Index.vue  | 11 ++++++++++-
 .../sqlserver/ha-cluster-list/components/List.vue    |  9 ++++++---
 .../sqlserver/single-cluster/components/List.vue     |  9 ++++++---
 .../tendb-cluster/list/components/list/Index.vue     |  9 +++++++--
 .../tendb-cluster/partition-manage/Index.vue         |  9 ++++++---
 18 files changed, 119 insertions(+), 43 deletions(-)

diff --git a/dbm-ui/frontend/src/services/model/es/es.ts b/dbm-ui/frontend/src/services/model/es/es.ts
index bcfbe0ed05..921baad7ee 100644
--- a/dbm-ui/frontend/src/services/model/es/es.ts
+++ b/dbm-ui/frontend/src/services/model/es/es.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -233,6 +233,10 @@ export default class Es {
     }));
   }
 
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
+
   initOperations(payload = [] as Es['operations']) {
     if (!Array.isArray(payload)) {
       return [];
diff --git a/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts b/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
index 14fade02a5..a6b4761b95 100644
--- a/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
+++ b/dbm-ui/frontend/src/services/model/hdfs/hdfs.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -238,4 +238,8 @@ export default class Hdfs {
   get isStarting() {
     return Boolean(this.operations.find((item) => item.ticket_type === Hdfs.HDFS_ENABLE));
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
index ac6e5a98c8..260afa7763 100644
--- a/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbha.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -232,4 +232,8 @@ export default class Tendbha {
       ticketId: item.ticket_id,
     }));
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
diff --git a/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts b/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
index 2063d12292..787b08e7f0 100644
--- a/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
+++ b/dbm-ui/frontend/src/services/model/mysql/tendbsingle.ts
@@ -14,7 +14,7 @@ import { uniq } from 'lodash';
 
 import type { ClusterListEntry, ClusterListNode, ClusterListOperation } from '@services/types';
 
-import { utcDisplayTime } from '@utils';
+import { isRecentDays, utcDisplayTime } from '@utils';
 
 import { t } from '@locales/index';
 
@@ -210,4 +210,8 @@ export default class Tendbsingle {
       ticketId: item.ticket_id,
     }));
   }
+
+  get isNew() {
+    return isRecentDays(this.create_at, 24);
+  }
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
index 6f280a8bdd..268f48963a 100644
--- a/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/elastic-search/list/components/list/Index.vue
@@ -366,8 +366,14 @@
                   )
                 }
                 {
-                  isRecentDays(data.create_at, 24 * 3)
-                  && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
                 }
                 {data.domain && (
                   <RenderCellCopy copyItems={
diff --git a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
index 6f14099527..880bffb2a5 100644
--- a/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/hdfs/list/components/list/Index.vue
@@ -379,8 +379,14 @@
                     )
                   }
                   {
-                    isRecentDays(data.create_at, 24 * 3)
-                    && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" />
+                    data.isNew && (
+                      <bk-tag
+                        theme="success"
+                        size="small"
+                        class="ml-4">
+                        NEW
+                      </bk-tag>
+                    )
                   }
                   {data.domain && (
                     <RenderCellCopy copyItems={
diff --git a/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue
index 0aa715ab9c..5bbd94ed8f 100644
--- a/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/influxdb/instance-list/components/render-list/Index.vue
@@ -346,7 +346,12 @@
                   }
                   {
                     data.isNew && (
-                      <span class="glob-new-tag cluster-tag" data-text="NEW" />
+                      <bk-tag
+                        theme="success"
+                        size="small"
+                        class="ml-4">
+                        NEW
+                      </bk-tag>
                     )
                   }
                   <db-icon
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
index eeb1b874bf..b1b6408020 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/replica-set-list/components/list/Index.vue
@@ -136,7 +136,6 @@
 
   import RenderClusterStatus from '@components/cluster-status/Index.vue';
   import DbTable from '@components/db-table/index.vue';
-  import MiniTag from '@components/mini-tag/index.vue';
   import RenderTextEllipsisOneLine from '@components/text-ellipsis-one-line/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
@@ -425,11 +424,12 @@
               <>
                 {
                   data.isNew && (
-                    <MiniTag
-                      content='NEW'
-                      class="new-tag"
-                      theme='success'>
-                    </MiniTag>
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 {
diff --git a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
index 528f427df0..00573bd319 100644
--- a/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mongodb/shared-cluster-list/components/list/Index.vue
@@ -136,7 +136,6 @@
 
   import RenderClusterStatus from '@components/cluster-status/Index.vue';
   import DbTable from '@components/db-table/index.vue';
-  import MiniTag from '@components/mini-tag/index.vue';
   import RenderTextEllipsisOneLine from '@components/text-ellipsis-one-line/index.vue';
   import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
 
@@ -380,9 +379,12 @@
               <>
                 {
                   data.isNew && (
-                  <MiniTag
-                    content='NEW'
-                    theme='success' />
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
index 0a31573d32..fd1e60d4cb 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/ha-cluster-list/components/List.vue
@@ -414,10 +414,13 @@
                   )
                 }
                 {
-                  isRecentDays(data.create_at, 24 * 3) && (
-                    <span
-                      class="glob-new-tag cluster-tag ml-4"
-                      data-text="NEW" />
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 <RenderCellCopy copyItems={
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
index b7fe34c0d3..ddaec27260 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/partition-manage/Index.vue
@@ -129,9 +129,12 @@
           <span>{data.id}</span>
           {
             data.isNew && (
-              <span
-                class="glob-new-tag cluster-tag ml-4"
-                data-text="NEW" />
+              <bk-tag
+                theme="success"
+                size="small"
+                class="ml-4">
+                NEW
+              </bk-tag>
             )
           }
           {
diff --git a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
index 034adb4a2d..c4dcadce7a 100644
--- a/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/mysql/single-cluster-list/components/List.vue
@@ -378,10 +378,13 @@
                   )
                 }
                 {
-                  isRecentDays(data.create_at, 24 * 3) && (
-                    <span
-                      class="glob-new-tag cluster-tag ml-4"
-                      data-text="NEW" />
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 <RenderCellCopy copyItems={
diff --git a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/detail/components/node-list/Index.vue b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/detail/components/node-list/Index.vue
index d7a3f711b6..29f290925d 100644
--- a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/detail/components/node-list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/detail/components/node-list/Index.vue
@@ -374,7 +374,16 @@
       render: ({ data }: {data: PulsarNodeModel}) => (
         <>
           <span>{data.ip}</span>
-          { data.isNew && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" /> }
+          {
+            data.isNew && (
+              <bk-tag
+                theme="success"
+                size="small"
+                class="ml-4">
+                NEW
+              </bk-tag>
+            )
+          }
         </>
       ),
     },
diff --git a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
index 56ffdb2bb0..3684c962fc 100644
--- a/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/pulsar/list/components/list/Index.vue
@@ -295,7 +295,16 @@
                     </bk-tag>
                   )
                 }
-                { data.isNew && <span class="glob-new-tag cluster-tag ml-4" data-text="NEW" /> }
+                {
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
+                  )
+                }
                 {data.domain && (
                   <RenderCellCopy copyItems={
                     [
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
index 01c7840bdf..5c690c1fdd 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/ha-cluster-list/components/List.vue
@@ -398,9 +398,12 @@
                 }/>
                 {
                   data.isNew && (
-                    <span
-                      class="glob-new-tag cluster-tag ml-4"
-                      data-text="NEW"/>
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 <span v-db-console="sqlserver.haClusterList.modifyEntryConfiguration">
diff --git a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
index f0c79a461c..f86a4a9551 100644
--- a/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
+++ b/dbm-ui/frontend/src/views/db-manage/sqlserver/single-cluster/components/List.vue
@@ -384,9 +384,12 @@
                 } />
                 {
                   data.isNew && (
-                    <span
-                      class="glob-new-tag cluster-tag ml-4"
-                      data-text="NEW" />
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 <span v-db-console="sqlserver.singleClusterList.modifyEntryConfiguration">
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
index 4857c1be5c..ddb690a2ef 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/list/components/list/Index.vue
@@ -436,8 +436,13 @@
                  )
                 }
                 {
-                  !data.isNew && (
-                    <span class="glob-new-tag cluster-tag" data-text="NEW" />
+                  data.isNew && (
+                    <bk-tag
+                      theme="success"
+                      size="small"
+                      class="ml-4">
+                      NEW
+                    </bk-tag>
                   )
                 }
                 {data.master_domain && (
diff --git a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
index 8bdd158461..75f053c1ee 100644
--- a/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/tendb-cluster/partition-manage/Index.vue
@@ -129,9 +129,12 @@
           <span>{data.id}</span>
           {
             data.isNew && (
-              <span
-                class="glob-new-tag cluster-tag ml-4"
-                data-text="NEW" />
+              <bk-tag
+                theme="success"
+                size="small"
+                class="ml-4">
+                NEW
+              </bk-tag>
             )
           }
           {