From a08069c88241607ab49070efda699c5cf6fdd03f Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 19:50:37 +0800
Subject: [PATCH 01/44] fix(table): set table-body-sort-bg per design spec

Per design-system-table.md token baseline, sorted body cells use
rgb(var(--fc-fill-5-rgb) / 0.1), not the header bg (fill-2-5).
---
 scripts/generate_antd_dark_less.js | 4 ++--
 scripts/generate_antd_gold_less.js | 4 ++--
 vite.config.ts                     | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/scripts/generate_antd_dark_less.js b/scripts/generate_antd_dark_less.js
index 26bff30cd..f518af9fe 100644
--- a/scripts/generate_antd_dark_less.js
+++ b/scripts/generate_antd_dark_less.js
@@ -50,10 +50,10 @@ function saveLess(filePath, filename, callback) {
         'table-header-bg': 'var(--fc-fill-2-5)',
         'table-header-color': 'var(--fc-text-3)',
         'table-header-sort-bg': 'var(--fc-fill-2-5)',
-        'table-body-sort-bg': 'var(--fc-fill-2-5)',
+        'table-body-sort-bg': 'rgb(var(--fc-fill-5-rgb) / 0.1)',
         'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
         'table-selected-row-color': 'inherit',
-        // Keep Less color functions compile-safe; runtime CSS vars are patched in theme/default.less.
+        // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
         'table-selected-row-bg': 'rgba(228, 228, 231, 0.15)',
         'table-body-selected-sort-bg': '@table-selected-row-bg',
         'table-selected-row-hover-bg': 'rgba(228, 228, 231, 0.25)',
diff --git a/scripts/generate_antd_gold_less.js b/scripts/generate_antd_gold_less.js
index 79b1ddd66..66bf1c303 100644
--- a/scripts/generate_antd_gold_less.js
+++ b/scripts/generate_antd_gold_less.js
@@ -52,10 +52,10 @@ function saveLess(filePath, filename, callback) {
         'table-header-bg': 'var(--fc-fill-2-5)',
         'table-header-color': 'var(--fc-text-3)',
         'table-header-sort-bg': 'var(--fc-fill-2-5)',
-        'table-body-sort-bg': 'var(--fc-fill-2-5)',
+        'table-body-sort-bg': 'rgb(var(--fc-fill-5-rgb) / 0.1)',
         'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
         'table-selected-row-color': 'inherit',
-        // Keep Less color functions compile-safe; runtime CSS vars are patched in theme/default.less.
+        // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
         'table-selected-row-bg': 'rgba(228, 228, 231, 0.15)',
         'table-body-selected-sort-bg': '@table-selected-row-bg',
         'table-selected-row-hover-bg': 'rgba(228, 228, 231, 0.25)',
diff --git a/vite.config.ts b/vite.config.ts
index 8fd6c8d6d..8f7552660 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -148,10 +148,10 @@ export default defineConfig(({ mode }) => {
             'table-header-bg': 'var(--fc-fill-2-5)',
             'table-header-color': 'var(--fc-text-3)',
             'table-header-sort-bg': 'var(--fc-fill-2-5)',
-            'table-body-sort-bg': 'var(--fc-fill-2-5)',
+            'table-body-sort-bg': 'rgb(var(--fc-fill-5-rgb) / 0.1)',
             'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
             'table-selected-row-color': 'inherit',
-            // Keep Less color functions compile-safe; runtime CSS vars are patched in theme/default.less.
+            // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
             'table-selected-row-bg': 'rgba(228, 228, 231, 0.15)',
             'table-body-selected-sort-bg': '@table-selected-row-bg',
             'table-selected-row-hover-bg': 'rgba(228, 228, 231, 0.25)',

From 5ff8a6d15645b2b571ba765f23b2c41106f50370 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 19:53:29 +0800
Subject: [PATCH 02/44] =?UTF-8?q?fix(table):=20force=20header=20nowrap=20p?=
 =?UTF-8?q?er=20design=20rule=20=C2=A75?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Short headers (≤4 chars) must not wrap; wide tables use horizontal
scroll instead of squeezing the header.
---
 src/theme/default.less | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/theme/default.less b/src/theme/default.less
index 58997d58a..2d9d8806d 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -85,6 +85,10 @@ mark {
     border-bottom-color: var(--fc-border-color);
   }
 
+  .ant-table-thead > tr > th {
+    white-space: nowrap;
+  }
+
   .ant-table.ant-table-bordered {
     > .ant-table-title,
     > .ant-table-footer,

From ee0c0cc71e7cd8c01ed5325f43175871a7464a52 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 19:57:13 +0800
Subject: [PATCH 03/44] fix(table): default pageSize 15 on alert-mutes /
 alert-subscribes / job-tpls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §8: default pageSize is 15 across all tables.

- alert-mutes (shield): drop defaultPageSize 30 override; inherit DEFAULT_PAGESIZE.
- alert-subscribes (ListNG): drop defaultPageSize 30 override; inherit DEFAULT_PAGESIZE.
- job-tpls: add 15 to pageSizeOptions so it is selectable.
---
 src/pages/taskTpl/index.tsx            | 2 +-
 src/pages/warning/shield/index.tsx     | 2 +-
 src/pages/warning/subscribe/ListNG.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index d9cef3eae..fc74e0b78 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -264,7 +264,7 @@ const index = (_props: any) => {
                 {
                   ...tableProps.pagination,
                   showSizeChanger: true,
-                  pageSizeOptions: ['10', '50', '100', '500', '1000'],
+                  pageSizeOptions: ['10', '15', '50', '100', '500', '1000'],
                   showTotal: (total) => {
                     return i18n.language == 'en' ? `Total ${total} items` : `共 ${total} 条`;
                   },
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 51422fb29..771a5c63a 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -307,7 +307,7 @@ const Shield: React.FC = () => {
       },
     ],
   );
-  const pagination = usePagination({ pageSizeLocalstorageKey: 'alert-mutes-table-pagesize', defaultPageSize: 30, pageSizeOptions: ['30', '50', '100', '300'] });
+  const pagination = usePagination({ pageSizeLocalstorageKey: 'alert-mutes-table-pagesize' });
 
   useEffect(() => {
     getList();
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 212228712..0bc79b00f 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -345,7 +345,7 @@ const Subscribe = (props: Props) => {
           },
         ],
   );
-  const pagination = usePagination({ pageSizeLocalstorageKey: 'alert-subscribes-table-pagesize', defaultPageSize: 30, pageSizeOptions: ['30', '50', '100', '300'] });
+  const pagination = usePagination({ pageSizeLocalstorageKey: 'alert-subscribes-table-pagesize' });
 
   const filterData = () => {
     const res = _.filter(data, (item: subscribeItem) => {

From 1d3dedc3d19d537c5083448cdd402b91ed24bbbb Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 19:59:54 +0800
Subject: [PATCH 04/44] fix(alert-subscribes): combine name + business group
 into Column1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §17.3 PRD scope:
- Column1Title: 订阅名称
- Column1Content: 业务组

Drop the standalone business_group column; show group as a sub-line under
the subscribe name using the double-row identifier pattern (design-system §5).
---
 src/pages/warning/subscribe/ListNG.tsx | 35 +++++++++++---------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 0bc79b00f..fd8ada69b 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -63,35 +63,30 @@ const Subscribe = (props: Props) => {
   const [notificationRules, setNotificationRules] = useState<NotificationRuleItem[]>();
 
   const columns: ColumnsType = _.concat(
-    hideBusinessGroupColumn
-      ? []
-      : ([
-          {
-            title: t('common:business_group'),
-            dataIndex: 'group_id',
-            render: (id) => {
-              return _.find(busiGroups, { id })?.name;
-            },
-          },
-        ] as any),
     [
       {
         title: t('note'),
         dataIndex: 'note',
         render: (data, record: any) => {
+          const groupName = _.find(busiGroups, { id: record.group_id })?.name;
           return (
-            <Link
-              to={{
-                pathname: `/alert-subscribes/edit/${record.id}`,
-                state: record,
-              }}
-              target={linkTarget}
-            >
-              {data}
-            </Link>
+            <div className='flex flex-col gap-0.5'>
+              <Link
+                to={{
+                  pathname: `/alert-subscribes/edit/${record.id}`,
+                  state: record,
+                }}
+                target={linkTarget}
+              >
+                {data}
+              </Link>
+              {!hideBusinessGroupColumn && groupName && <span className='text-soft text-xs'>{groupName}</span>}
+            </div>
           );
         },
       },
+    ] as any,
+    [
       {
         title: t('common:datasource.id'),
         dataIndex: 'datasource_ids',

From f06da5e52097779e6fd3f1f71bc72d72fe828432 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 20:01:20 +0800
Subject: [PATCH 05/44] fix(alert-mutes): collapse name + datasource type +
 business group into Column1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §17.3:
- Column1Title: 规则标题
- Column1Content: 数据源类型 + 业务组

Drop the standalone business_group and cate columns; surface them as a
sub-line beneath the rule title.
---
 src/pages/warning/shield/index.tsx | 52 +++++++++++++-----------------
 1 file changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 771a5c63a..1e58e0c73 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -53,46 +53,38 @@ const Shield: React.FC = () => {
   const [currentShieldData, setCurrentShieldData] = useState<Array<shieldItem>>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [datasourceIds, setDatasourceIds] = useState<number[]>();
+  const showBusinessGroup = !(businessGroup.isLeaf && gids !== '-2');
   const columns: ColumnsType = _.concat(
-    businessGroup.isLeaf && gids !== '-2'
-      ? []
-      : ([
-          {
-            title: t('common:business_group'),
-            dataIndex: 'group_id',
-            render: (id) => {
-              return _.find(busiGroups, { id })?.name;
-            },
-          },
-        ] as any),
     [
       {
         title: t('note'),
         dataIndex: 'note',
         render: (data, record: any) => {
-          return (
-            <Link
-              to={{
-                pathname: `/alert-mutes/edit/${record.id}`,
-                search: `?bgid=${record.group_id}`,
-              }}
-            >
-              {data}
-            </Link>
-          );
-        },
-      },
-      {
-        title: t('common:datasource.type'),
-        dataIndex: 'cate',
-        render: (val) => {
-          let logoSrc = _.find(allCates, { value: val })?.logo;
-          if (val === 'host') {
+          const groupName = _.find(busiGroups, { id: record.group_id })?.name;
+          let logoSrc = _.find(allCates, { value: record.cate })?.logo;
+          if (record.cate === 'host') {
             logoSrc = '/image/logos/host.png';
           }
-          return <img alt={val} src={logoSrc} height={20} />;
+          return (
+            <div className='flex flex-col gap-0.5'>
+              <Link
+                to={{
+                  pathname: `/alert-mutes/edit/${record.id}`,
+                  search: `?bgid=${record.group_id}`,
+                }}
+              >
+                {data}
+              </Link>
+              <span className='text-soft text-xs inline-flex items-center gap-1'>
+                {logoSrc && <img alt={record.cate} src={logoSrc} height={14} />}
+                {showBusinessGroup && groupName && <span>{groupName}</span>}
+              </span>
+            </div>
+          );
         },
       },
+    ] as any,
+    [
       {
         title: t('common:datasource.id'),
         dataIndex: 'datasource_ids',

From 53afed2d82e2bf8821c231e9330b6968c876f054 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 20:02:01 +0800
Subject: [PATCH 06/44] fix(job-tpls): collapse title + ID + business group
 into Column1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §17.3:
- Column1Title: 标题
- Column1Content: ID + 业务组
---
 src/pages/taskTpl/index.tsx | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index fc74e0b78..f90739591 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -106,31 +106,27 @@ const index = (_props: any) => {
     }
   }
 
+  const showBusinessGroup = !(businessGroup.isLeaf && gids !== '-2');
   const columns: ColumnProps<Tpl>[] = _.concat(
-    businessGroup.isLeaf && gids !== '-2'
-      ? []
-      : ([
-          {
-            title: t('common:business_group'),
-            dataIndex: 'group_id',
-            width: 100,
-            render: (id) => {
-              return _.find(busiGroups, { id })?.name;
-            },
-          },
-        ] as any),
     [
-      {
-        title: 'ID',
-        dataIndex: 'id',
-      },
       {
         title: t('tpl.title'),
         dataIndex: 'title',
         render: (text, record) => {
-          return <Link to={{ pathname: `/job-tpls/${record.id}/detail` }}>{text}</Link>;
+          const groupName = _.find(busiGroups, { id: record.group_id })?.name;
+          return (
+            <div className='flex flex-col gap-0.5'>
+              <Link to={{ pathname: `/job-tpls/${record.id}/detail` }}>{text}</Link>
+              <span className='text-soft text-xs inline-flex items-center gap-2'>
+                <span>ID: {record.id}</span>
+                {showBusinessGroup && groupName && <span>{groupName}</span>}
+              </span>
+            </div>
+          );
         },
       },
+    ] as any,
+    [
       {
         title: t('tpl.tags'),
         dataIndex: 'tags',

From efa0f94044cebf16ed292e6aa6938f7118cf2497 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 20:02:56 +0800
Subject: [PATCH 07/44] fix(job-tasks): collapse title + ID + business group
 into Column1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §17.3:
- Column1Title: 标题
- Column1Content: ID + 业务组
---
 src/pages/task/index.tsx | 33 ++++++++++++++-------------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index fb93eed8e..5219017e1 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -74,33 +74,28 @@ const index = (_props: any) => {
     refreshDeps: [gids, query, mine, days, refreshFlag],
     defaultPageSize: pagination.pageSize,
   });
+  const showBusinessGroup = !(businessGroup.isLeaf && gids !== '-2');
   const columns: ColumnProps<DataItem>[] = _.concat(
-    businessGroup.isLeaf && gids !== '-2'
-      ? []
-      : ([
-          {
-            title: t('common:business_group'),
-            dataIndex: 'group_id',
-            width: 100,
-            render: (id) => {
-              return _.find(busiGroups, { id })?.name;
-            },
-          },
-        ] as any),
     [
-      {
-        title: 'ID',
-        dataIndex: 'id',
-        width: 100,
-      },
       {
         title: t('task.title'),
         dataIndex: 'title',
-        width: 200,
+        width: 240,
         render: (text, record) => {
-          return <Link to={{ pathname: `/job-tasks/${record.id}/result` }}>{text}</Link>;
+          const groupName = _.find(busiGroups, { id: record.group_id })?.name;
+          return (
+            <div className='flex flex-col gap-0.5'>
+              <Link to={{ pathname: `/job-tasks/${record.id}/result` }}>{text}</Link>
+              <span className='text-soft text-xs inline-flex items-center gap-2'>
+                <span>ID: {record.id}</span>
+                {showBusinessGroup && groupName && <span>{groupName}</span>}
+              </span>
+            </div>
+          );
         },
       },
+    ] as any,
+    [
       {
         title: t('table.operations'),
         width: 150,

From 3d661d86a03d04a3f7495ec29198c154d12a2102 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 20:03:48 +0800
Subject: [PATCH 08/44] fix(users): collapse identity columns into Column1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §17.3:
- Column1Title: 用户名
- Column1Content: 显示名 + 邮箱 + 手机号

Username keeps sorter; secondary identifiers shown beneath as text-soft.
---
 src/pages/user/users.tsx | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 47b1815e1..222e60270 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -53,22 +53,16 @@ const Resource: React.FC = () => {
       title: t('account:profile.username'),
       dataIndex: 'username',
       ellipsis: true,
-    },
-    {
-      title: t('account:profile.nickname'),
-      dataIndex: 'nickname',
-      ellipsis: true,
-      render: (text: string, record) => record.nickname || '-',
-    },
-    {
-      title: t('account:profile.email'),
-      dataIndex: 'email',
-      render: (text: string, record) => record.email || '-',
-    },
-    {
-      title: t('account:profile.phone'),
-      dataIndex: 'phone',
-      render: (text: string, record) => record.phone || '-',
+      sorter: true,
+      render: (text: string, record) => {
+        const secondary = _.compact([record.nickname, record.email, record.phone]);
+        return (
+          <div className='flex flex-col gap-0.5'>
+            <span>{text}</span>
+            {secondary.length > 0 && <span className='text-soft text-xs'>{secondary.join(' · ')}</span>}
+          </div>
+        );
+      },
     },
   ];
   const userColumns: ColumnsType<User> = [

From f5b951ba0a420a80075515ed9dfaf766111544aa Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Tue, 12 May 2026 20:05:08 +0800
Subject: [PATCH 09/44] fix(alert-rules): collapse name + cate + business group
 + severity into Column2
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per design-system-table.md §17.3:
- Column1: 状态 (kept as-is)
- Column2Title: 名称
- Column2Content: 类型 (logo) + 业务组 + 级别
- Column3: 数据源

Drop standalone cate, group_id, severities columns; embed them under name.
Trim defaultColumnsConfigs accordingly.
---
 src/pages/alertRules/List/ListNG.tsx   | 97 ++++++++------------------
 src/pages/alertRules/List/constants.ts | 14 +---
 2 files changed, 33 insertions(+), 78 deletions(-)

diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index c4c3e6408..6a3fb4e92 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -110,27 +110,41 @@ export default function AlertRules(props: Props) {
         },
       },
     ],
-    hideBusinessGroupColumn
-      ? []
-      : ([
-          {
-            title: t('common:business_group'),
-            dataIndex: 'group_id',
-            render: (id) => {
-              return _.find(busiGroups, { id })?.name;
-            },
-          },
-        ] as any),
     [
       {
-        title: t('table.cate'),
-        dataIndex: 'cate',
-        render: (val) => {
-          let logoSrc = _.find(allCates, { value: val })?.logo;
-          if (val === 'host') {
+        title: t('table.name'),
+        dataIndex: 'name',
+        sorter: (a, b) => {
+          return localeCompare(a.name, b.name);
+        },
+        render: (data, record) => {
+          let logoSrc = _.find(allCates, { value: record.cate })?.logo;
+          if (record.cate === 'host') {
             logoSrc = '/image/logos/host.png';
           }
-          return <img alt={val} src={logoSrc} height={20} />;
+          const groupName = !hideBusinessGroupColumn ? _.find(busiGroups, { id: record.group_id })?.name : undefined;
+          return (
+            <div className='flex flex-col gap-0.5'>
+              <Link
+                className='table-text'
+                to={{
+                  pathname: `/alert-rules/edit/${record.id}`,
+                }}
+                target={linkTarget}
+              >
+                {data}
+              </Link>
+              <span className='text-soft text-xs inline-flex items-center gap-2'>
+                {logoSrc && <img alt={record.cate} src={logoSrc} height={14} />}
+                {groupName && <span>{groupName}</span>}
+                {_.map(record.severities, (severity) => (
+                  <Tag key={severity} color={priorityColor[severity - 1]} style={{ marginRight: 0 }}>
+                    S{severity}
+                  </Tag>
+                ))}
+              </span>
+            </div>
+          );
         },
       },
       {
@@ -153,55 +167,6 @@ export default function AlertRules(props: Props) {
           );
         },
       },
-      {
-        title: t('table.name'),
-        dataIndex: 'name',
-        sorter: (a, b) => {
-          return localeCompare(a.name, b.name);
-        },
-        render: (data, record) => {
-          return (
-            <Link
-              className='table-text'
-              to={{
-                pathname: `/alert-rules/edit/${record.id}`,
-              }}
-              target={linkTarget}
-            >
-              {data}
-            </Link>
-          );
-        },
-      },
-      {
-        title: t('table.severity'),
-        dataIndex: 'severities',
-        render: (data) => {
-          return (
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: 4,
-              }}
-            >
-              {_.map(data, (severity) => {
-                return (
-                  <Tag
-                    key={severity}
-                    color={priorityColor[severity - 1]}
-                    style={{
-                      marginRight: 0,
-                    }}
-                  >
-                    S{severity}
-                  </Tag>
-                );
-              })}
-            </div>
-          );
-        },
-      },
       {
         title: t('table.append_tags'),
         dataIndex: 'append_tags',
diff --git a/src/pages/alertRules/List/constants.ts b/src/pages/alertRules/List/constants.ts
index dac1b27d8..38ad22f79 100644
--- a/src/pages/alertRules/List/constants.ts
+++ b/src/pages/alertRules/List/constants.ts
@@ -24,24 +24,14 @@ export const defaultColumnsConfigs = [
     i18nKey: 'table.status',
     visible: true,
   },
-  {
-    name: 'cate',
-    i18nKey: 'table.cate',
-    visible: true,
-  },
-  {
-    name: 'datasource_ids',
-    i18nKey: 'table.datasource_ids',
-    visible: false,
-  },
   {
     name: 'name',
     i18nKey: 'table.name',
     visible: true,
   },
   {
-    name: 'severities',
-    i18nKey: 'table.severity',
+    name: 'datasource_ids',
+    i18nKey: 'table.datasource_ids',
     visible: false,
   },
   {

From 69be9a3f34f59b4b38ad6524eb4cd40ef29e6776 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 10:11:28 +0800
Subject: [PATCH 10/44] fix(table): consolidate row actions into overflow menus

---
 src/pages/alertRules/List/ListNG.tsx | 87 +++++++++++++------------
 src/pages/task/index.tsx             | 25 +++++---
 src/pages/taskTpl/index.tsx          | 66 ++++++++++++-------
 src/pages/warning/shield/index.tsx   | 96 +++++++++++++++-------------
 src/theme/default.less               | 24 +++++++
 5 files changed, 180 insertions(+), 118 deletions(-)

diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 6a3fb4e92..a61a49e18 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from 'react';
-import { Space, Select, Input, Button, Table, Tooltip, Tag, Modal, Switch, message } from 'antd';
+import { Space, Select, Input, Button, Table, Tooltip, Tag, Modal, Switch, message, Dropdown, Menu } from 'antd';
 import { ColumnType } from 'antd/lib/table';
-import { EyeOutlined, SearchOutlined, InfoCircleOutlined, WarningFilled, CheckCircleFilled } from '@ant-design/icons';
+import { EyeOutlined, SearchOutlined, InfoCircleOutlined, WarningFilled, CheckCircleFilled, MoreOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useDebounceFn } from 'ahooks';
 import _ from 'lodash';
@@ -313,48 +313,55 @@ export default function AlertRules(props: Props) {
           {
             title: t('common:table.operations'),
             fixed: 'right',
+            width: 80,
             render: (record: any) => {
               const anomalyEnabled = _.get(record, ['rule_config', 'anomaly_trigger', 'enable']);
               return (
-                <Space>
-                  <Link
-                    className='table-operator-area-normal'
-                    to={{
-                      pathname: `/alert-rules/edit/${record.id}?mode=clone`,
-                    }}
-                    target='_blank'
-                  >
-                    {t('common:btn.clone')}
-                  </Link>
-                  <Button
-                    size='small'
-                    type='link'
-                    danger
-                    style={{
-                      padding: 0,
-                    }}
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('common:confirm.delete'),
-                        onOk: () => {
-                          deleteStrategy([record.id], record.group_id).then(() => {
-                            message.success(t('common:success.delete'));
-                            fetchData();
-                          });
-                        },
+                <Dropdown
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <Link
+                          to={{
+                            pathname: `/alert-rules/edit/${record.id}?mode=clone`,
+                          }}
+                          target='_blank'
+                        >
+                          {t('common:btn.clone')}
+                        </Link>
+                      </Menu.Item>
+                      {record.cate === 'prometheus' && anomalyEnabled === true && (
+                        <Menu.Item>
+                          <Link to={{ pathname: `/alert-rules/brain/${record.id}` }}>{t('brain_result_btn')}</Link>
+                        </Menu.Item>
+                      )}
+                      <Menu.Item>
+                        <Button
+                          type='link'
+                          danger
+                          className='p-0 h-auto'
+                          onClick={() => {
+                            Modal.confirm({
+                              title: t('common:confirm.delete'),
+                              onOk: () => {
+                                deleteStrategy([record.id], record.group_id).then(() => {
+                                  message.success(t('common:success.delete'));
+                                  fetchData();
+                                });
+                              },
 
-                        onCancel() {},
-                      });
-                    }}
-                  >
-                    {t('common:btn.delete')}
-                  </Button>
-                  {record.cate === 'prometheus' && anomalyEnabled === true && (
-                    <div>
-                      <Link to={{ pathname: `/alert-rules/brain/${record.id}` }}>{t('brain_result_btn')}</Link>
-                    </div>
-                  )}
-                </Space>
+                              onCancel() {},
+                            });
+                          }}
+                        >
+                          {t('common:btn.delete')}
+                        </Button>
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <Button type='text' icon={<MoreOutlined />} />
+                </Dropdown>
               );
             },
           },
diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index 5219017e1..ddb44454c 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -16,8 +16,8 @@
  */
 import React, { useContext, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { Table, Divider, Checkbox, Row, Col, Input, Select, Button, Space } from 'antd';
-import { SearchOutlined, CodeOutlined } from '@ant-design/icons';
+import { Table, Checkbox, Row, Col, Input, Select, Button, Space, Dropdown, Menu } from 'antd';
+import { SearchOutlined, CodeOutlined, MoreOutlined } from '@ant-design/icons';
 import { ColumnProps } from 'antd/lib/table';
 import _ from 'lodash';
 import moment from 'moment';
@@ -98,14 +98,23 @@ const index = (_props: any) => {
     [
       {
         title: t('table.operations'),
-        width: 150,
+        width: 80,
         render: (_text, record) => {
           return (
-            <span>
-              <Link to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>{t('task.clone')}</Link>
-              <Divider type='vertical' />
-              <Link to={{ pathname: `/job-tasks/${record.id}/detail` }}>{t('task.meta')}</Link>
-            </span>
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <Link to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>{t('task.clone')}</Link>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Link to={{ pathname: `/job-tasks/${record.id}/detail` }}>{t('task.meta')}</Link>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <Button type='text' icon={<MoreOutlined />} />
+            </Dropdown>
           );
         },
       },
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index f90739591..b6124d2cf 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -16,8 +16,8 @@
  */
 import React, { useState, useContext } from 'react';
 import { Link } from 'react-router-dom';
-import { Table, Divider, Popconfirm, Tag, Row, Col, Input, Button, Dropdown, Menu, message, Space } from 'antd';
-import { DownOutlined, SearchOutlined, CodeOutlined } from '@ant-design/icons';
+import { Table, Modal, Tag, Row, Col, Input, Button, Dropdown, Menu, message, Space } from 'antd';
+import { DownOutlined, SearchOutlined, CodeOutlined, MoreOutlined } from '@ant-design/icons';
 import { ColumnProps } from 'antd/lib/table';
 import _ from 'lodash';
 import moment from 'moment';
@@ -153,30 +153,48 @@ const index = (_props: any) => {
       },
       {
         title: t('table.operations'),
-        width: 220,
+        width: 80,
         render: (_text, record) => {
           return (
-            <span>
-              <Link to={{ pathname: `/job-tpls/add/task`, search: `tpl=${record.id}` }}>{t('task.create')}</Link>
-              <Divider type='vertical' />
-              <Link to={{ pathname: `/job-tpls/${record.id}/modify` }}>{t('common:btn.edit')}</Link>
-              <Divider type='vertical' />
-              <Link to={{ pathname: `/job-tpls/${record.id}/clone` }}>{t('common:btn.clone')}</Link>
-              <Divider type='vertical' />
-              <Popconfirm
-                title={<div style={{ width: 100 }}>{t('common:confirm.delete')}</div>}
-                onConfirm={() => {
-                  request(`${api.tasktpl(record.group_id)}/${record.id}`, {
-                    method: 'DELETE',
-                  }).then(() => {
-                    message.success(t('msg.delete.success'));
-                    refresh();
-                  });
-                }}
-              >
-                <a style={{ color: 'red' }}>{t('common:btn.delete')}</a>
-              </Popconfirm>
-            </span>
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <Link to={{ pathname: `/job-tpls/add/task`, search: `tpl=${record.id}` }}>{t('task.create')}</Link>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Link to={{ pathname: `/job-tpls/${record.id}/modify` }}>{t('common:btn.edit')}</Link>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Link to={{ pathname: `/job-tpls/${record.id}/clone` }}>{t('common:btn.clone')}</Link>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      danger
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        Modal.confirm({
+                          title: t('common:confirm.delete'),
+                          onOk: () => {
+                            return request(`${api.tasktpl(record.group_id)}/${record.id}`, {
+                              method: 'DELETE',
+                            }).then(() => {
+                              message.success(t('msg.delete.success'));
+                              refresh();
+                            });
+                          },
+                        });
+                      }}
+                    >
+                      {t('common:btn.delete')}
+                    </Button>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <Button type='text' icon={<MoreOutlined />} />
+            </Dropdown>
           );
         },
       },
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 1e58e0c73..77184285e 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -15,9 +15,9 @@
  *
  */
 import React, { useState, useEffect, useContext } from 'react';
-import { Button, Input, Table, Tooltip, message, Modal, Switch, Space, Tag } from 'antd';
+import { Button, Input, Table, Tooltip, message, Modal, Switch, Space, Tag, Dropdown, Menu } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { CloseCircleOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
+import { CloseCircleOutlined, ExclamationCircleOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -246,54 +246,58 @@ const Shield: React.FC = () => {
         title: t('common:table.operations'),
         dataIndex: 'operation',
         fixed: 'right',
+        width: 80,
         render: (text: undefined, record: shieldItem) => {
           return (
-            <>
-              <div className='table-operator-area'>
-                <div
-                  className='table-operator-area-normal'
-                  style={{
-                    cursor: 'pointer',
-                    display: 'inline-block',
-                  }}
-                  onClick={() => {
-                    history.push({
-                      pathname: `/alert-mutes/edit/${record.id}`,
-                      search: `?mode=clone&bgid=${record.group_id}`,
-                    });
-                  }}
-                >
-                  {t('common:btn.clone')}
-                </div>
-                <div
-                  className='table-operator-area-warning'
-                  style={{
-                    cursor: 'pointer',
-                    display: 'inline-block',
-                  }}
-                  onClick={() => {
-                    confirm({
-                      title: t('common:confirm.delete'),
-                      icon: <ExclamationCircleOutlined />,
-                      onOk: () => {
-                        deleteShields({ ids: [record.id] }, record.group_id).then((res) => {
-                          refreshList();
-                          if (res.err) {
-                            message.success(res.err);
-                          } else {
-                            message.success(t('common:success.delete'));
-                          }
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        history.push({
+                          pathname: `/alert-mutes/edit/${record.id}`,
+                          search: `?mode=clone&bgid=${record.group_id}`,
                         });
-                      },
+                      }}
+                    >
+                      {t('common:btn.clone')}
+                    </Button>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      danger
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        confirm({
+                          title: t('common:confirm.delete'),
+                          icon: <ExclamationCircleOutlined />,
+                          onOk: () => {
+                            deleteShields({ ids: [record.id] }, record.group_id).then((res) => {
+                              refreshList();
+                              if (res.err) {
+                                message.success(res.err);
+                              } else {
+                                message.success(t('common:success.delete'));
+                              }
+                            });
+                          },
 
-                      onCancel() {},
-                    });
-                  }}
-                >
-                  {t('common:btn.delete')}
-                </div>
-              </div>
-            </>
+                          onCancel() {},
+                        });
+                      }}
+                    >
+                      {t('common:btn.delete')}
+                    </Button>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <Button type='text' icon={<MoreOutlined />} />
+            </Dropdown>
           );
         },
       },
diff --git a/src/theme/default.less b/src/theme/default.less
index 2d9d8806d..2ea00c615 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -78,6 +78,30 @@ mark {
     background: var(--fc-fill-2-5);
   }
 
+  .ant-table-thead > tr > th {
+    .ant-table-column-sorter,
+    .ant-table-filter-trigger {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
+    }
+
+    &:hover {
+      .ant-table-column-sorter,
+      .ant-table-filter-trigger {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    .ant-table-column-sorter:has(.ant-table-column-sorter-up.active),
+    .ant-table-column-sorter:has(.ant-table-column-sorter-down.active),
+    .ant-table-filter-trigger.active {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
   .ant-table-thead > tr > th,
   .ant-table-tbody > tr > td,
   .ant-table tfoot > tr > th,

From 44bce4163679ad2d7ec99fbc5bfd4332ea621c97 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 10:28:25 +0800
Subject: [PATCH 11/44] fix(table): use overflow menus on route list pages

---
 .../embeddedProduct/pages/List/index.tsx      |  76 ++++++----
 src/pages/eventPipeline/pages/List/index.tsx  | 111 ++++++++------
 src/pages/log/IndexPatterns/index.tsx         | 139 ++++++++++--------
 .../notificationChannels/pages/List/index.tsx |  71 ++++-----
 .../pages/ListNG/index.tsx                    |  73 ++++-----
 src/pages/notificationRules/pages/List.tsx    |  80 +++++-----
 src/pages/recordingRules/PageTable.tsx        |  72 +++++----
 src/pages/variableConfigs/index.tsx           | 131 +++++++++--------
 8 files changed, 416 insertions(+), 337 deletions(-)

diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index 3209308b5..d70bff592 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
 import moment from 'moment';
-import { Space, Table, Button, Modal, Tag, message, Switch } from 'antd';
+import { Space, Table, Button, Modal, Tag, message, Switch, Dropdown, Menu } from 'antd';
 import { ColumnType } from 'antd/lib/table';
-import { MenuOutlined } from '@ant-design/icons';
+import { MenuOutlined, MoreOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@@ -132,38 +132,50 @@ export default function Index() {
       {
         title: t('common:table.operations'),
         dataIndex: 'operator',
-        width: 120,
+        width: 80,
         render: (_val, record: EmbeddedProductResponse) => {
           return (
-            <Space>
-              <a
-                onClick={(e) => {
-                  e.preventDefault();
-                  setCurrentRecord(record);
-                  setModalVisible(true);
-                }}
-              >
-                {t('common:btn.edit')}
-              </a>
-              <a
-                className='table-operator-area-warning'
-                onClick={(e) => {
-                  e.preventDefault();
-                  Modal.confirm({
-                    title: t('common:confirm.delete'),
-                    onOk: () => {
-                      return deleteEmbeddedProducts(String(record.id)).then(() => {
-                        message.success(t('common:success.delete'));
-                        fetchData();
-                        eventBus.emit(EVENT_KEYS.EMBEDDED_PRODUCT_UPDATED);
-                      });
-                    },
-                  });
-                }}
-              >
-                {t('common:btn.delete')}
-              </a>
-            </Space>
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        setCurrentRecord(record);
+                        setModalVisible(true);
+                      }}
+                    >
+                      {t('common:btn.edit')}
+                    </Button>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      danger
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        Modal.confirm({
+                          title: t('common:confirm.delete'),
+                          onOk: () => {
+                            return deleteEmbeddedProducts(String(record.id)).then(() => {
+                              message.success(t('common:success.delete'));
+                              fetchData();
+                              eventBus.emit(EVENT_KEYS.EMBEDDED_PRODUCT_UPDATED);
+                            });
+                          },
+                        });
+                      }}
+                    >
+                      {t('common:btn.delete')}
+                    </Button>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <Button type='text' icon={<MoreOutlined />} />
+            </Dropdown>
           );
         },
       },
diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index 9b8bfad13..221b519a1 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Space, Table, Button, Tag, Input, Modal, Drawer, Select } from 'antd';
-import { SearchOutlined } from '@ant-design/icons';
+import { Space, Table, Button, Tag, Input, Modal, Drawer, Select, Dropdown, Menu } from 'antd';
+import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
@@ -227,54 +227,69 @@ export default function List() {
           },
           {
             title: t('common:table.operations'),
-            width: 200,
+            width: 80,
             render: (item: Item) => {
               return (
-                <Space>
-                  <a
-                    onClick={() => {
-                      setEventPipelineDrawerState({
-                        visible: true,
-                        action: 'clone',
-                        data: _.omit(item, 'id'),
-                      });
-                    }}
-                  >
-                    {t('common:btn.clone')}
-                  </a>
-                  <a
-                    onClick={() => {
-                      setEventPipelineDrawerState({
-                        visible: true,
-                        action: 'edit',
-                        id: item.id,
-                      });
-                    }}
-                  >
-                    {t('common:btn.edit')}
-                  </a>
-                  <Button
-                    type='link'
-                    size='small'
-                    style={{
-                      padding: 0,
-                    }}
-                    danger
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('common:confirm.delete'),
-                        onOk: () => {
-                          deleteItems([item.id]).then(() => {
-                            featchData();
-                          });
-                        },
-                      });
-                    }}
-                  >
-                    {t('common:btn.delete')}
-                  </Button>
-                  <Link to={`/event-pipelines-executions?pipeline_id=${item.id}`}>{t('executions.title')}</Link>
-                </Space>
+                <Dropdown
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <Button
+                          type='link'
+                          className='p-0 h-auto'
+                          onClick={() => {
+                            setEventPipelineDrawerState({
+                              visible: true,
+                              action: 'clone',
+                              data: _.omit(item, 'id'),
+                            });
+                          }}
+                        >
+                          {t('common:btn.clone')}
+                        </Button>
+                      </Menu.Item>
+                      <Menu.Item>
+                        <Button
+                          type='link'
+                          className='p-0 h-auto'
+                          onClick={() => {
+                            setEventPipelineDrawerState({
+                              visible: true,
+                              action: 'edit',
+                              id: item.id,
+                            });
+                          }}
+                        >
+                          {t('common:btn.edit')}
+                        </Button>
+                      </Menu.Item>
+                      <Menu.Item>
+                        <Button
+                          type='link'
+                          danger
+                          className='p-0 h-auto'
+                          onClick={() => {
+                            Modal.confirm({
+                              title: t('common:confirm.delete'),
+                              onOk: () => {
+                                deleteItems([item.id]).then(() => {
+                                  featchData();
+                                });
+                              },
+                            });
+                          }}
+                        >
+                          {t('common:btn.delete')}
+                        </Button>
+                      </Menu.Item>
+                      <Menu.Item>
+                        <Link to={`/event-pipelines-executions?pipeline_id=${item.id}`}>{t('executions.title')}</Link>
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <Button type='text' icon={<MoreOutlined />} />
+                </Dropdown>
               );
             },
           },
diff --git a/src/pages/log/IndexPatterns/index.tsx b/src/pages/log/IndexPatterns/index.tsx
index 4b4491e06..cb3ad13e6 100644
--- a/src/pages/log/IndexPatterns/index.tsx
+++ b/src/pages/log/IndexPatterns/index.tsx
@@ -15,7 +15,7 @@
  *
  */
 import React, { useState, useEffect, useContext } from 'react';
-import { Button, Input, Popconfirm, Space, Table, Tag, message } from 'antd';
+import { Button, Input, Modal, Dropdown, Menu, Table, Tag, message } from 'antd';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -27,7 +27,7 @@ import { getESIndexPatterns, deleteESIndexPattern, putESIndexPattern } from './s
 import FormModal from './FormModal';
 import { IndexPattern } from './types';
 import './locale';
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
 import EditField from './EditField';
 import { useQuery } from '@/utils';
 
@@ -142,66 +142,87 @@ export default function Servers() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 160,
+                    width: 80,
                     render: (record) => {
                       return (
-                        <Space>
-                          <a
-                            onClick={() => {
-                              if (record) {
-                                EditField({
-                                  id: record.id,
-                                  datasourceList,
-                                  onOk(values, name) {
-                                    console.log('values', values);
-                                    const newFieldConfig = {
-                                      ...values,
-                                      version: 2,
-                                    };
-                                    putESIndexPattern(record.id, {
-                                      ..._.omit(record, ['fieldConfig', 'id']),
-                                      fields_format: JSON.stringify(newFieldConfig),
-                                      name,
-                                    }).then(() => {
-                                      fetchData();
-                                      message.success(t('common:success.save'));
+                        <Dropdown
+                          overlay={
+                            <Menu>
+                              <Menu.Item>
+                                <Button
+                                  type='link'
+                                  className='p-0 h-auto'
+                                  onClick={() => {
+                                    if (record) {
+                                      EditField({
+                                        id: record.id,
+                                        datasourceList,
+                                        onOk(values, name) {
+                                          console.log('values', values);
+                                          const newFieldConfig = {
+                                            ...values,
+                                            version: 2,
+                                          };
+                                          putESIndexPattern(record.id, {
+                                            ..._.omit(record, ['fieldConfig', 'id']),
+                                            fields_format: JSON.stringify(newFieldConfig),
+                                            name,
+                                          }).then(() => {
+                                            fetchData();
+                                            message.success(t('common:success.save'));
+                                          });
+                                        },
+                                      });
+                                    }
+                                  }}
+                                >
+                                  {t('common:btn.config')}
+                                </Button>
+                              </Menu.Item>
+                              <Menu.Item>
+                                <Button
+                                  type='link'
+                                  className='p-0 h-auto'
+                                  onClick={() => {
+                                    FormModal({
+                                      mode: 'edit',
+                                      initialValues: record,
+                                      indexPatterns: data,
+                                      datasourceList: groupedDatasourceList.elasticsearch,
+                                      onOk: () => {
+                                        fetchData();
+                                      },
                                     });
-                                  },
-                                });
-                              }
-                            }}
-                          >
-                            {t('common:btn.config')}
-                          </a>
-                          <a
-                            onClick={() => {
-                              FormModal({
-                                mode: 'edit',
-                                initialValues: record,
-                                indexPatterns: data,
-                                datasourceList: groupedDatasourceList.elasticsearch,
-                                onOk: () => {
-                                  fetchData();
-                                },
-                              });
-                            }}
-                          >
-                            {t('common:btn.edit')}
-                          </a>
-                          <Popconfirm
-                            title={t('common:confirm.delete')}
-                            onConfirm={() => {
-                              deleteESIndexPattern(record.id).then(() => {
-                                message.success(t('common:success.delete'));
-                                fetchData();
-                              });
-                            }}
-                          >
-                            <Button type='link' style={{ padding: 0 }} danger>
-                              {t('common:btn.delete')}
-                            </Button>
-                          </Popconfirm>
-                        </Space>
+                                  }}
+                                >
+                                  {t('common:btn.edit')}
+                                </Button>
+                              </Menu.Item>
+                              <Menu.Item>
+                                <Button
+                                  type='link'
+                                  danger
+                                  className='p-0 h-auto'
+                                  onClick={() => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.delete'),
+                                      onOk: () => {
+                                        deleteESIndexPattern(record.id).then(() => {
+                                          message.success(t('common:success.delete'));
+                                          fetchData();
+                                        });
+                                      },
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.delete')}
+                                </Button>
+                              </Menu.Item>
+                            </Menu>
+                          }
+                        >
+                          <Button type='text' icon={<MoreOutlined />} />
+                        </Dropdown>
                       );
                     },
                   },
diff --git a/src/pages/notificationChannels/pages/List/index.tsx b/src/pages/notificationChannels/pages/List/index.tsx
index a3bfb3041..ef22a5485 100644
--- a/src/pages/notificationChannels/pages/List/index.tsx
+++ b/src/pages/notificationChannels/pages/List/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Space, Button, Switch, Modal, Input, message } from 'antd';
-import { NotificationOutlined, SearchOutlined } from '@ant-design/icons';
+import { Table, Space, Button, Switch, Modal, Input, message, Dropdown, Menu } from 'antd';
+import { NotificationOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import moment from 'moment';
@@ -181,41 +181,42 @@ export default function List() {
             },
             {
               title: t('common:table.operations'),
-              width: 100,
+              width: 80,
               render: (record) => {
                 return (
-                  <Space>
-                    <Link
-                      className='table-operator-area-normal'
-                      to={{
-                        pathname: `/${NS}/edit/${record.id}?mode=clone`,
-                      }}
-                      target='_blank'
-                    >
-                      {t('common:btn.clone')}
-                    </Link>
-                    <Button
-                      size='small'
-                      type='link'
-                      danger
-                      style={{
-                        padding: 0,
-                      }}
-                      onClick={() => {
-                        Modal.confirm({
-                          title: t('common:confirm.delete'),
-                          onOk: () => {
-                            deleteItems([record.id]).then(() => {
-                              message.success(t('common:success.delete'));
-                              fetchData();
-                            });
-                          },
-                        });
-                      }}
-                    >
-                      {t('common:btn.delete')}
-                    </Button>
-                  </Space>
+                  <Dropdown
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <Link to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                            {t('common:btn.clone')}
+                          </Link>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <Button
+                            type='link'
+                            danger
+                            className='p-0 h-auto'
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteItems([record.id]).then(() => {
+                                    message.success(t('common:success.delete'));
+                                    fetchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </Button>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <Button type='text' icon={<MoreOutlined />} />
+                  </Dropdown>
                 );
               },
             },
diff --git a/src/pages/notificationChannels/pages/ListNG/index.tsx b/src/pages/notificationChannels/pages/ListNG/index.tsx
index a3fdaac19..b7fa19c26 100644
--- a/src/pages/notificationChannels/pages/ListNG/index.tsx
+++ b/src/pages/notificationChannels/pages/ListNG/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
-import { Input, Select, Space, Table, Button, Modal, Switch, message, Tooltip } from 'antd';
-import { NotificationOutlined, PlusOutlined, CopyOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Input, Select, Space, Table, Button, Modal, Switch, message, Tooltip, Dropdown, Menu } from 'antd';
+import { NotificationOutlined, PlusOutlined, MoreOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { map, upperCase, includes, filter } from 'lodash';
 import { Link } from 'react-router-dom';
@@ -277,40 +277,45 @@ export default function index() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 80,
                     render: (record) => {
                       return (
-                        <Space size={2}>
-                          <Link
-                            className='table-operator-area-normal'
-                            to={{
-                              pathname: `/${NS}/edit/${record.id}?mode=clone`,
-                            }}
-                            target='_blank'
-                          >
-                            <Button size='small' type='text' className='p-0' icon={<CopyOutlined />} />
-                          </Link>
-                          <Tooltip title={record.enable === true ? t('delete_disable_first') : undefined}>
-                            <Button
-                              size='small'
-                              type='text'
-                              className='p-0'
-                              icon={<DeleteOutlined />}
-                              disabled={record.enable === true}
-                              onClick={() => {
-                                Modal.confirm({
-                                  title: t('common:confirm.delete'),
-                                  onOk: () => {
-                                    deleteItems([record.id]).then(() => {
-                                      message.success(t('common:success.delete'));
-                                      run();
-                                    });
-                                  },
-                                });
-                              }}
-                            />
-                          </Tooltip>
-                        </Space>
+                        <Dropdown
+                          overlay={
+                            <Menu>
+                              <Menu.Item>
+                                <Link to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                                  {t('common:btn.clone')}
+                                </Link>
+                              </Menu.Item>
+                              <Menu.Item>
+                                <Tooltip title={record.enable === true ? t('delete_disable_first') : undefined}>
+                                  <Button
+                                    type='link'
+                                    danger
+                                    className='p-0 h-auto'
+                                    disabled={record.enable === true}
+                                    onClick={() => {
+                                      Modal.confirm({
+                                        title: t('common:confirm.delete'),
+                                        onOk: () => {
+                                          deleteItems([record.id]).then(() => {
+                                            message.success(t('common:success.delete'));
+                                            run();
+                                          });
+                                        },
+                                      });
+                                    }}
+                                  >
+                                    {t('common:btn.delete')}
+                                  </Button>
+                                </Tooltip>
+                              </Menu.Item>
+                            </Menu>
+                          }
+                        >
+                          <Button type='text' icon={<MoreOutlined />} />
+                        </Dropdown>
                       );
                     },
                   },
diff --git a/src/pages/notificationRules/pages/List.tsx b/src/pages/notificationRules/pages/List.tsx
index 6ca4dc405..539000365 100644
--- a/src/pages/notificationRules/pages/List.tsx
+++ b/src/pages/notificationRules/pages/List.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Space, Button, Switch, Modal, Input, Tag, Tooltip } from 'antd';
-import { NotificationOutlined, SearchOutlined } from '@ant-design/icons';
+import { Table, Space, Button, Switch, Modal, Input, Tag, Tooltip, Dropdown, Menu } from 'antd';
+import { NotificationOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import moment from 'moment';
@@ -190,48 +190,44 @@ export default function List() {
             },
             {
               title: t('common:table.operations'),
-              width: 160,
+              width: 80,
               render: (record) => {
                 return (
-                  <Space>
-                    <Link
-                      className='table-operator-area-normal'
-                      to={{
-                        pathname: `/${NS}/edit/${record.id}`,
-                      }}
-                    >
-                      {t('common:btn.edit')}
-                    </Link>
-                    <Link
-                      className='table-operator-area-normal'
-                      to={{
-                        pathname: `/${NS}/edit/${record.id}?mode=clone`,
-                      }}
-                      target='_blank'
-                    >
-                      {t('common:btn.clone')}
-                    </Link>
-                    <Button
-                      size='small'
-                      type='link'
-                      danger
-                      style={{
-                        padding: 0,
-                      }}
-                      onClick={() => {
-                        Modal.confirm({
-                          title: t('common:confirm.delete'),
-                          onOk: () => {
-                            deleteItems([record.id]).then(() => {
-                              fetchData();
-                            });
-                          },
-                        });
-                      }}
-                    >
-                      {t('common:btn.delete')}
-                    </Button>
-                  </Space>
+                  <Dropdown
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <Link to={{ pathname: `/${NS}/edit/${record.id}` }}>{t('common:btn.edit')}</Link>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <Link to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                            {t('common:btn.clone')}
+                          </Link>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <Button
+                            type='link'
+                            danger
+                            className='p-0 h-auto'
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteItems([record.id]).then(() => {
+                                    fetchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </Button>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <Button type='text' icon={<MoreOutlined />} />
+                  </Dropdown>
                 );
               },
             },
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index ee22cbde9..348e292ac 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState, useMemo, useContext } from 'react';
-import { Button, Modal, message, Dropdown, Table, Switch, Select, Space, Tag } from 'antd';
+import { Button, Modal, message, Dropdown, Table, Switch, Select, Space, Tag, Menu } from 'antd';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { ColumnType } from 'antd/lib/table';
 import moment from 'moment';
 import _ from 'lodash';
 import RefreshIcon from '@/components/RefreshIcon';
-import { DownOutlined } from '@ant-design/icons';
+import { DownOutlined, MoreOutlined } from '@ant-design/icons';
 import { getBusiGroupsRecordingRules, updateRecordingRules } from '@/services/recording';
 import SearchInput from '@/components/BaseSearchInput';
 import { strategyItem, strategyStatus } from '@/store/warningInterface';
@@ -206,36 +206,50 @@ const PageTable: React.FC<Props> = ({ gids }) => {
       {
         title: t('common:table.operations'),
         dataIndex: 'operator',
+        width: 80,
         render: (data, record) => {
           return (
-            <div className='table-operator-area'>
-              <div
-                className='table-operator-area-normal'
-                onClick={() => {
-                  handleClickEdit(record.id, true);
-                }}
-              >
-                {t('common:btn.clone')}
-              </div>
-              <div
-                className='table-operator-area-warning'
-                onClick={() => {
-                  confirm({
-                    title: t('common:confirm.delete'),
-                    onOk: () => {
-                      deleteRecordingRule([record.id], record.group_id).then(() => {
-                        message.success(t('common:success.delete'));
-                        refreshList();
-                      });
-                    },
+            <Dropdown
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        handleClickEdit(record.id, true);
+                      }}
+                    >
+                      {t('common:btn.clone')}
+                    </Button>
+                  </Menu.Item>
+                  <Menu.Item>
+                    <Button
+                      type='link'
+                      danger
+                      className='p-0 h-auto'
+                      onClick={() => {
+                        confirm({
+                          title: t('common:confirm.delete'),
+                          onOk: () => {
+                            deleteRecordingRule([record.id], record.group_id).then(() => {
+                              message.success(t('common:success.delete'));
+                              refreshList();
+                            });
+                          },
 
-                    onCancel() {},
-                  });
-                }}
-              >
-                {t('common:btn.delete')}
-              </div>
-            </div>
+                          onCancel() {},
+                        });
+                      }}
+                    >
+                      {t('common:btn.delete')}
+                    </Button>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <Button type='text' icon={<MoreOutlined />} />
+            </Dropdown>
           );
         },
       },
diff --git a/src/pages/variableConfigs/index.tsx b/src/pages/variableConfigs/index.tsx
index 1c98fe853..a9d5ae667 100644
--- a/src/pages/variableConfigs/index.tsx
+++ b/src/pages/variableConfigs/index.tsx
@@ -17,8 +17,8 @@
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Button, Input, Table, Space, message, Popconfirm } from 'antd';
-import { SettingOutlined } from '@ant-design/icons';
+import { Button, Input, Table, Space, message, Modal, Dropdown, Menu } from 'antd';
+import { SettingOutlined, MoreOutlined } from '@ant-design/icons';
 import PageLayout from '@/components/pageLayout';
 import DocumentDrawer from '@/components/DocumentDrawer';
 import { getVariableConfigs, VariableConfig, postVariableConfigs, deleteVariableConfigs, putVariableConfigs, getRSAConfig, RASConfig } from './services';
@@ -110,64 +110,79 @@ export default function index() {
             },
             {
               title: t('common:table.operations'),
-              width: 140,
+              width: 80,
               render: (record) => {
                 return (
-                  <Space>
-                    <Button
-                      size='small'
-                      type='link'
-                      style={{ padding: 0 }}
-                      onClick={() => {
-                        FormModal({
-                          title: t('common:btn.clone'),
-                          rsaConfig,
-                          data: record,
-                          onOk: (values) => {
-                            return postVariableConfigs(values).then(() => {
-                              fetchData();
-                              message.success(t('common:success.clone'));
-                            });
-                          },
-                        });
-                      }}
-                    >
-                      {t('common:btn.clone')}
-                    </Button>
-                    <Button
-                      size='small'
-                      type='link'
-                      style={{ padding: 0 }}
-                      onClick={() => {
-                        FormModal({
-                          title: t('common:btn.edit'),
-                          rsaConfig,
-                          data: record,
-                          onOk: (values) => {
-                            return putVariableConfigs(record.id, values).then(() => {
-                              fetchData();
-                              message.success(t('common:success.edit'));
-                            });
-                          },
-                        });
-                      }}
-                    >
-                      {t('common:btn.edit')}
-                    </Button>
-                    <Popconfirm
-                      title={t('common:confirm.delete')}
-                      onConfirm={() => {
-                        deleteVariableConfigs(record.id).then(() => {
-                          message.success(t('common:success.delete'));
-                          fetchData();
-                        });
-                      }}
-                    >
-                      <Button size='small' type='link' danger style={{ padding: 0 }}>
-                        {t('common:btn.delete')}
-                      </Button>
-                    </Popconfirm>
-                  </Space>
+                  <Dropdown
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <Button
+                            type='link'
+                            className='p-0 h-auto'
+                            onClick={() => {
+                              FormModal({
+                                title: t('common:btn.clone'),
+                                rsaConfig,
+                                data: record,
+                                onOk: (values) => {
+                                  return postVariableConfigs(values).then(() => {
+                                    fetchData();
+                                    message.success(t('common:success.clone'));
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.clone')}
+                          </Button>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <Button
+                            type='link'
+                            className='p-0 h-auto'
+                            onClick={() => {
+                              FormModal({
+                                title: t('common:btn.edit'),
+                                rsaConfig,
+                                data: record,
+                                onOk: (values) => {
+                                  return putVariableConfigs(record.id, values).then(() => {
+                                    fetchData();
+                                    message.success(t('common:success.edit'));
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.edit')}
+                          </Button>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <Button
+                            type='link'
+                            danger
+                            className='p-0 h-auto'
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteVariableConfigs(record.id).then(() => {
+                                    message.success(t('common:success.delete'));
+                                    fetchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </Button>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <Button type='text' icon={<MoreOutlined />} />
+                  </Dropdown>
                 );
               },
             },

From 412fdac9cd801fb73088db67ed262bfc88dbd10c Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 14:31:59 +0800
Subject: [PATCH 12/44] fix(table): collapse remaining menu route actions

---
 src/pages/aiConfig/agents/pages/List.tsx      | 85 +++++++++++--------
 src/pages/aiConfig/llmConfigs/pages/List.tsx  | 66 ++++++++------
 src/pages/aiConfig/mcpServers/pages/List.tsx  | 66 ++++++++------
 .../aiConfig/skills/pages/ResourcesTable.tsx  | 75 +++++++++-------
 src/pages/user/business.tsx                   | 67 +++++++++------
 src/pages/user/groups.tsx                     | 58 +++++++------
 6 files changed, 246 insertions(+), 171 deletions(-)

diff --git a/src/pages/aiConfig/agents/pages/List.tsx b/src/pages/aiConfig/agents/pages/List.tsx
index a170f675e..961a83d9a 100644
--- a/src/pages/aiConfig/agents/pages/List.tsx
+++ b/src/pages/aiConfig/agents/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, Switch, Table, Tooltip, Modal, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Menu, Space, Switch, Table, Tooltip, Modal, message } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 
 import PageLayout from '@/components/pageLayout';
@@ -97,43 +97,56 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 80,
                     render: (record) => {
                       return (
-                        <Space size={2}>
-                          <Button
-                            size='small'
-                            type='text'
-                            className='p-0'
-                            icon={<EditOutlined />}
-                            onClick={() => {
-                              setEditDrawerState({
-                                visible: true,
-                                id: record.id,
-                              });
-                            }}
-                          />
-                          <Tooltip title={record.enable === true ? t('cannot_delete_when_enabled') : undefined}>
-                            <Button
-                              size='small'
-                              type='text'
-                              className='p-0'
-                              icon={<DeleteOutlined />}
-                              disabled={record.enable === true}
-                              onClick={() => {
-                                Modal.confirm({
-                                  title: t('common:confirm.delete'),
-                                  onOk: () => {
-                                    deleteItem(record.id).then(() => {
-                                      message.success(t('common:success.delete'));
-                                      run();
+                        <Dropdown
+                          overlay={
+                            <Menu>
+                              <Menu.Item>
+                                <Button
+                                  type='link'
+                                  className='p-0 h-auto'
+                                  icon={<EditOutlined />}
+                                  onClick={() => {
+                                    setEditDrawerState({
+                                      visible: true,
+                                      id: record.id,
                                     });
-                                  },
-                                });
-                              }}
-                            />
-                          </Tooltip>
-                        </Space>
+                                  }}
+                                >
+                                  {t('common:btn.edit')}
+                                </Button>
+                              </Menu.Item>
+                              <Menu.Item>
+                                <Tooltip title={record.enable === true ? t('cannot_delete_when_enabled') : undefined}>
+                                  <Button
+                                    type='link'
+                                    className='p-0 h-auto'
+                                    icon={<DeleteOutlined />}
+                                    danger
+                                    disabled={record.enable === true}
+                                    onClick={() => {
+                                      Modal.confirm({
+                                        title: t('common:confirm.delete'),
+                                        onOk: () => {
+                                          deleteItem(record.id).then(() => {
+                                            message.success(t('common:success.delete'));
+                                            run();
+                                          });
+                                        },
+                                      });
+                                    }}
+                                  >
+                                    {t('common:btn.delete')}
+                                  </Button>
+                                </Tooltip>
+                              </Menu.Item>
+                            </Menu>
+                          }
+                        >
+                          <Button type='text' icon={<MoreOutlined />} />
+                        </Dropdown>
                       );
                     },
                   },
diff --git a/src/pages/aiConfig/llmConfigs/pages/List.tsx b/src/pages/aiConfig/llmConfigs/pages/List.tsx
index d047311fe..cba99b268 100644
--- a/src/pages/aiConfig/llmConfigs/pages/List.tsx
+++ b/src/pages/aiConfig/llmConfigs/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, Switch, Table, Tooltip, Modal, Tag, Alert, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Menu, Space, Switch, Table, Tooltip, Modal, Tag, Alert, message } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 
 import PageLayout from '@/components/pageLayout';
@@ -89,31 +89,45 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 80,
                     render: (record) => (
-                      <Space size={2}>
-                        <Button size='small' type='text' className='p-0' icon={<EditOutlined />} onClick={() => setEditDrawerState({ visible: true, id: record.id })} />
-                        <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
-                          <Button
-                            size='small'
-                            type='text'
-                            className='p-0'
-                            icon={<DeleteOutlined />}
-                            disabled={record.enabled === true}
-                            onClick={() => {
-                              Modal.confirm({
-                                title: t('common:confirm.delete'),
-                                onOk: () => {
-                                  deleteItem(record.id).then(() => {
-                                    message.success(t('common:success.delete'));
-                                    run();
-                                  });
-                                },
-                              });
-                            }}
-                          />
-                        </Tooltip>
-                      </Space>
+                      <Dropdown
+                        overlay={
+                          <Menu>
+                            <Menu.Item>
+                              <Button type='link' className='p-0 h-auto' icon={<EditOutlined />} onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
+                                {t('common:btn.edit')}
+                              </Button>
+                            </Menu.Item>
+                            <Menu.Item>
+                              <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
+                                <Button
+                                  type='link'
+                                  className='p-0 h-auto'
+                                  icon={<DeleteOutlined />}
+                                  danger
+                                  disabled={record.enabled === true}
+                                  onClick={() => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.delete'),
+                                      onOk: () => {
+                                        deleteItem(record.id).then(() => {
+                                          message.success(t('common:success.delete'));
+                                          run();
+                                        });
+                                      },
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.delete')}
+                                </Button>
+                              </Tooltip>
+                            </Menu.Item>
+                          </Menu>
+                        }
+                      >
+                        <Button type='text' icon={<MoreOutlined />} />
+                      </Dropdown>
                     ),
                   },
                 ]}
diff --git a/src/pages/aiConfig/mcpServers/pages/List.tsx b/src/pages/aiConfig/mcpServers/pages/List.tsx
index 53510d34d..eb0848966 100644
--- a/src/pages/aiConfig/mcpServers/pages/List.tsx
+++ b/src/pages/aiConfig/mcpServers/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Space, Switch, Table, Tooltip, Modal, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Menu, Space, Switch, Table, Tooltip, Modal, message } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 
 import PageLayout from '@/components/pageLayout';
@@ -74,31 +74,45 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 80,
                     render: (record) => (
-                      <Space size={2}>
-                        <Button size='small' type='text' className='p-0' icon={<EditOutlined />} onClick={() => setEditDrawerState({ visible: true, id: record.id })} />
-                        <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
-                          <Button
-                            size='small'
-                            type='text'
-                            className='p-0'
-                            icon={<DeleteOutlined />}
-                            disabled={record.enabled === true}
-                            onClick={() => {
-                              Modal.confirm({
-                                title: t('common:confirm.delete'),
-                                onOk: () => {
-                                  deleteItem(record.id).then(() => {
-                                    message.success(t('common:success.delete'));
-                                    run();
-                                  });
-                                },
-                              });
-                            }}
-                          />
-                        </Tooltip>
-                      </Space>
+                      <Dropdown
+                        overlay={
+                          <Menu>
+                            <Menu.Item>
+                              <Button type='link' className='p-0 h-auto' icon={<EditOutlined />} onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
+                                {t('common:btn.edit')}
+                              </Button>
+                            </Menu.Item>
+                            <Menu.Item>
+                              <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
+                                <Button
+                                  type='link'
+                                  className='p-0 h-auto'
+                                  icon={<DeleteOutlined />}
+                                  danger
+                                  disabled={record.enabled === true}
+                                  onClick={() => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.delete'),
+                                      onOk: () => {
+                                        deleteItem(record.id).then(() => {
+                                          message.success(t('common:success.delete'));
+                                          run();
+                                        });
+                                      },
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.delete')}
+                                </Button>
+                              </Tooltip>
+                            </Menu.Item>
+                          </Menu>
+                        }
+                      >
+                        <Button type='text' icon={<MoreOutlined />} />
+                      </Dropdown>
                     ),
                   },
                 ]}
diff --git a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
index 03b476c83..15b32b302 100644
--- a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
+++ b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import { useRequest } from 'ahooks';
-import { Table, Space, Button, Upload, Modal, message, Popover, Input } from 'antd';
-import { EyeOutlined, DeleteOutlined, UploadOutlined, SearchOutlined } from '@ant-design/icons';
+import { Table, Space, Button, Upload, Modal, message, Popover, Input, Dropdown, Menu } from 'antd';
+import { EyeOutlined, DeleteOutlined, UploadOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
 import { NS } from '../constants';
@@ -145,37 +145,50 @@ export default function ResourcesTable(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 80,
             render: (record) => {
               return (
-                <Space size={2}>
-                  <Button
-                    size='small'
-                    type='text'
-                    className='p-0'
-                    icon={<EyeOutlined />}
-                    onClick={() => {
-                      setResourceState({ visible: true, id: record.id, name: record.name });
-                    }}
-                  />
-                  <Button
-                    size='small'
-                    type='text'
-                    className='p-0'
-                    icon={<DeleteOutlined />}
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('common:confirm.delete'),
-                        onOk: () => {
-                          deleteFile(record.id).then(() => {
-                            message.success(t('common:success.delete'));
-                            run();
-                          });
-                        },
-                      });
-                    }}
-                  />
-                </Space>
+                <Dropdown
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <Button
+                          type='link'
+                          className='p-0 h-auto'
+                          icon={<EyeOutlined />}
+                          onClick={() => {
+                            setResourceState({ visible: true, id: record.id, name: record.name });
+                          }}
+                        >
+                          {t('common:btn.view')}
+                        </Button>
+                      </Menu.Item>
+                      <Menu.Item>
+                        <Button
+                          type='link'
+                          className='p-0 h-auto'
+                          icon={<DeleteOutlined />}
+                          danger
+                          onClick={() => {
+                            Modal.confirm({
+                              title: t('common:confirm.delete'),
+                              onOk: () => {
+                                deleteFile(record.id).then(() => {
+                                  message.success(t('common:success.delete'));
+                                  run();
+                                });
+                              },
+                            });
+                          }}
+                        >
+                          {t('common:btn.delete')}
+                        </Button>
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <Button type='text' icon={<MoreOutlined />} />
+                </Dropdown>
               );
             },
           },
diff --git a/src/pages/user/business.tsx b/src/pages/user/business.tsx
index c41161a62..72a20ad8c 100644
--- a/src/pages/user/business.tsx
+++ b/src/pages/user/business.tsx
@@ -19,8 +19,8 @@ import moment from 'moment';
 import _ from 'lodash';
 import classNames from 'classnames';
 import PageLayout, { HelpLink } from '@/components/pageLayout';
-import { Button, Table, Input, message, Row, Col, Modal, Space } from 'antd';
-import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { Button, Table, Input, message, Row, Col, Modal, Space, Dropdown, Menu } from 'antd';
+import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined, MoreOutlined } from '@ant-design/icons';
 import UserInfoModal from './component/createModal';
 import { deleteBusinessTeamMember, getBusinessTeamList, getBusinessTeamInfo, deleteBusinessTeam } from '@/services/manage';
 import { Team, ActionType } from '@/store/manageInterface';
@@ -69,35 +69,46 @@ const Resource: React.FC = () => {
     },
     {
       title: t('common:table.operations'),
-      width: '100px',
+      width: 80,
       render: (text: string, record) => (
-        <Button
-          type='link'
-          danger={memberList.length > 1}
-          disabled={memberList.length <= 1}
-          onClick={() => {
-            if (memberList.length <= 1) return;
+        <Dropdown
+          overlay={
+            <Menu>
+              <Menu.Item>
+                <Button
+                  type='link'
+                  className='p-0 h-auto'
+                  danger={memberList.length > 1}
+                  disabled={memberList.length <= 1}
+                  onClick={() => {
+                    if (memberList.length <= 1) return;
 
-            const params = [
-              {
-                user_group_id: record['user_group'].id,
-                busi_group_id: teamId,
-              },
-            ];
-            confirm({
-              title: t('common:confirm.delete'),
-              onOk: () => {
-                deleteBusinessTeamMember(teamId, params).then(() => {
-                  message.success(t('common:success.delete'));
-                  getTeamList();
-                });
-              },
-              onCancel: () => {},
-            });
-          }}
+                    const params = [
+                      {
+                        user_group_id: record['user_group'].id,
+                        busi_group_id: teamId,
+                      },
+                    ];
+                    confirm({
+                      title: t('common:confirm.delete'),
+                      onOk: () => {
+                        deleteBusinessTeamMember(teamId, params).then(() => {
+                          message.success(t('common:success.delete'));
+                          getTeamList();
+                        });
+                      },
+                      onCancel: () => {},
+                    });
+                  }}
+                >
+                  {t('common:btn.delete')}
+                </Button>
+              </Menu.Item>
+            </Menu>
+          }
         >
-          {t('common:btn.delete')}
-        </Button>
+          <Button type='text' icon={<MoreOutlined />} />
+        </Dropdown>
       ),
     },
   ];
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index 86ee61915..688cb504b 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -20,8 +20,8 @@ import _ from 'lodash';
 import { useLocation } from 'react-router-dom';
 import queryString from 'query-string';
 import PageLayout, { HelpLink } from '@/components/pageLayout';
-import { Button, Table, Input, message, List, Row, Col, Modal, Space, Tag } from 'antd';
-import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined, PlusSquareOutlined } from '@ant-design/icons';
+import { Button, Table, Input, message, List, Row, Col, Modal, Space, Tag, Dropdown, Menu } from 'antd';
+import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined, PlusSquareOutlined, MoreOutlined } from '@ant-design/icons';
 import UserInfoModal from './component/createModal';
 import { getTeamInfoList, getTeamInfo, deleteTeam, deleteMember } from '@/services/manage';
 import { User, Team, UserType, ActionType, TeamInfo } from '@/store/manageInterface';
@@ -113,30 +113,40 @@ const Resource: React.FC = () => {
     ...userColumn,
     {
       title: t('common:table.operations'),
-      width: '100px',
+      width: 80,
       render: (text: string, record) => (
-        <Button
-          type='link'
-          className='p-0'
-          danger
-          onClick={() => {
-            let params = {
-              ids: [record.id],
-            };
-            confirm({
-              title: t('common:confirm.delete'),
-              onOk: () => {
-                deleteMember(teamId, params).then((_) => {
-                  message.success(t('common:success.delete'));
-                  handleClose('updateMember');
-                });
-              },
-              onCancel: () => {},
-            });
-          }}
+        <Dropdown
+          overlay={
+            <Menu>
+              <Menu.Item>
+                <Button
+                  type='link'
+                  className='p-0 h-auto'
+                  danger
+                  onClick={() => {
+                    let params = {
+                      ids: [record.id],
+                    };
+                    confirm({
+                      title: t('common:confirm.delete'),
+                      onOk: () => {
+                        deleteMember(teamId, params).then((_) => {
+                          message.success(t('common:success.delete'));
+                          handleClose('updateMember');
+                        });
+                      },
+                      onCancel: () => {},
+                    });
+                  }}
+                >
+                  {t('common:btn.delete')}
+                </Button>
+              </Menu.Item>
+            </Menu>
+          }
         >
-          {t('common:btn.delete')}
-        </Button>
+          <Button type='text' icon={<MoreOutlined />} />
+        </Dropdown>
       ),
     },
   ];

From ad19f991f1da5b3ca235792d99e6075f8946835a Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:28 +0800
Subject: [PATCH 13/44] feat(table): add shared action dropdown

---
 src/components/TableActionDropdown/index.tsx | 77 +++++++++++++++++++
 src/theme/default.less                       | 78 ++++++++++++++++++++
 2 files changed, 155 insertions(+)
 create mode 100644 src/components/TableActionDropdown/index.tsx

diff --git a/src/components/TableActionDropdown/index.tsx b/src/components/TableActionDropdown/index.tsx
new file mode 100644
index 000000000..2e371d180
--- /dev/null
+++ b/src/components/TableActionDropdown/index.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Button } from 'antd';
+import type { ButtonProps } from 'antd/lib/button';
+import {
+  CheckCircle,
+  Copy,
+  ExternalLink,
+  Eye,
+  Link as LinkIcon,
+  MoreVertical,
+  Network,
+  Pencil,
+  Play,
+  Search,
+  Settings,
+  ShieldCheck,
+  Sparkles,
+  Trash2,
+} from 'lucide-react';
+import classNames from 'classnames';
+import { Link, LinkProps } from 'react-router-dom';
+
+const tableActionIconMap = {
+  default: CheckCircle,
+  edit: Pencil,
+  view: Eye,
+  settings: Settings,
+  access: Network,
+  permission: ShieldCheck,
+  copy: Copy,
+  delete: Trash2,
+  run: Play,
+  search: Search,
+  open: ExternalLink,
+  link: LinkIcon,
+  ai: Sparkles,
+};
+
+export type TableActionIconName = keyof typeof tableActionIconMap;
+
+export function TableActionIcon({ name }: { name: TableActionIconName }) {
+  const Icon = tableActionIconMap[name];
+  return <Icon className='fc-table-action-menu-icon' />;
+}
+
+interface TableActionButtonProps extends Omit<ButtonProps, 'icon'> {
+  actionIcon?: TableActionIconName;
+  icon?: React.ReactNode;
+}
+
+export function TableActionButton({ actionIcon, icon, className, type = 'link', ...rest }: TableActionButtonProps) {
+  return (
+    <Button
+      type={type}
+      className={classNames('fc-table-action-menu-button', className)}
+      icon={icon || (actionIcon ? <TableActionIcon name={actionIcon} /> : undefined)}
+      {...rest}
+    />
+  );
+}
+
+interface TableActionLinkProps extends LinkProps {
+  actionIcon?: TableActionIconName;
+}
+
+export function TableActionLink({ actionIcon, className, children, ...rest }: TableActionLinkProps) {
+  return (
+    <Link className={classNames('fc-table-action-menu-link', className)} {...rest}>
+      {actionIcon && <TableActionIcon name={actionIcon} />}
+      <span>{children}</span>
+    </Link>
+  );
+}
+
+export function TableActionTrigger() {
+  return <Button type='text' icon={<MoreVertical size={16} />} />;
+}
diff --git a/src/theme/default.less b/src/theme/default.less
index 2ea00c615..19c1c84a2 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -162,6 +162,84 @@ mark {
   }
 }
 
+.fc-table-action-dropdown {
+  .ant-dropdown-menu {
+    min-width: 112px;
+    padding: 8px 0;
+    border-radius: 8px;
+  }
+
+  .ant-dropdown-menu-item {
+    padding: 0;
+    line-height: normal;
+  }
+
+  .ant-dropdown-menu-item-divider {
+    margin: 4px 0;
+    background-color: var(--fc-border-color);
+  }
+
+  .fc-table-action-menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 32px;
+    padding: 0 16px;
+    color: var(--fc-text-3);
+    font-size: 12px;
+    font-weight: 500;
+    text-align: left;
+  }
+
+  .fc-table-action-menu-link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 32px;
+    padding: 0 16px;
+    color: var(--fc-text-3);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 32px;
+  }
+
+  .fc-table-action-menu-icon {
+    display: inline-flex;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    margin-right: 12px;
+    font-size: 16px;
+    line-height: 1;
+    stroke-width: 2;
+  }
+
+  .fc-table-action-menu-button:hover,
+  .fc-table-action-menu-button:focus,
+  .fc-table-action-menu-link:hover,
+  .fc-table-action-menu-link:focus {
+    color: var(--fc-text-2);
+  }
+
+  .fc-table-action-menu-button.ant-btn-dangerous {
+    color: var(--fc-fill-error);
+  }
+
+  .fc-table-action-menu-button.ant-btn-dangerous:hover,
+  .fc-table-action-menu-button.ant-btn-dangerous:focus {
+    color: color-mix(in srgb, var(--fc-fill-error) 82%, #000);
+  }
+
+  .fc-table-action-menu-button[disabled],
+  .fc-table-action-menu-button[disabled]:hover,
+  .fc-table-action-menu-button.ant-btn-dangerous[disabled],
+  .fc-table-action-menu-button.ant-btn-dangerous[disabled]:hover {
+    color: var(--fc-text-4);
+  }
+}
+
 /* antd */
 
 .affix-bottom-shadow {

From 194da2922db385c6ddabe6675f934510fa63e3b0 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:35 +0800
Subject: [PATCH 14/44] fix(table): align ai config actions

---
 src/pages/aiConfig/agents/pages/List.tsx      | 25 +++++++++----------
 src/pages/aiConfig/llmConfigs/pages/List.tsx  | 21 ++++++++--------
 src/pages/aiConfig/mcpServers/pages/List.tsx  | 21 ++++++++--------
 .../aiConfig/skills/pages/ResourcesTable.tsx  | 25 +++++++++----------
 4 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/pages/aiConfig/agents/pages/List.tsx b/src/pages/aiConfig/agents/pages/List.tsx
index 961a83d9a..63a5887fc 100644
--- a/src/pages/aiConfig/agents/pages/List.tsx
+++ b/src/pages/aiConfig/agents/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Menu, Space, Switch, Table, Tooltip, Modal, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 
 import PageLayout from '@/components/pageLayout';
@@ -11,6 +11,7 @@ import { NS } from '../constants';
 import { getList, deleteItem, putItem } from '../services';
 import AddDrawer from './AddDrawer';
 import EditDrawer from './EditDrawer';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -97,17 +98,16 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 80,
+                    width: 64,
                     render: (record) => {
                       return (
                         <Dropdown
+                          overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
                               <Menu.Item>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
-                                  icon={<EditOutlined />}
+                                <TableActionButton
+                                  actionIcon='edit'
                                   onClick={() => {
                                     setEditDrawerState({
                                       visible: true,
@@ -116,14 +116,13 @@ export default function List() {
                                   }}
                                 >
                                   {t('common:btn.edit')}
-                                </Button>
+                                </TableActionButton>
                               </Menu.Item>
+                              <Menu.Divider />
                               <Menu.Item>
                                 <Tooltip title={record.enable === true ? t('cannot_delete_when_enabled') : undefined}>
-                                  <Button
-                                    type='link'
-                                    className='p-0 h-auto'
-                                    icon={<DeleteOutlined />}
+                                  <TableActionButton
+                                    actionIcon='delete'
                                     danger
                                     disabled={record.enable === true}
                                     onClick={() => {
@@ -139,13 +138,13 @@ export default function List() {
                                     }}
                                   >
                                     {t('common:btn.delete')}
-                                  </Button>
+                                  </TableActionButton>
                                 </Tooltip>
                               </Menu.Item>
                             </Menu>
                           }
                         >
-                          <Button type='text' icon={<MoreOutlined />} />
+                          <TableActionTrigger />
                         </Dropdown>
                       );
                     },
diff --git a/src/pages/aiConfig/llmConfigs/pages/List.tsx b/src/pages/aiConfig/llmConfigs/pages/List.tsx
index cba99b268..91ce9ed5d 100644
--- a/src/pages/aiConfig/llmConfigs/pages/List.tsx
+++ b/src/pages/aiConfig/llmConfigs/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Menu, Space, Switch, Table, Tooltip, Modal, Tag, Alert, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 
 import PageLayout from '@/components/pageLayout';
@@ -11,6 +11,7 @@ import { NS } from '../constants';
 import { getList, deleteItem, putItem } from '../services';
 import AddDrawer from './AddDrawer';
 import EditDrawer from './EditDrawer';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -89,22 +90,22 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 80,
+                    width: 64,
                     render: (record) => (
                       <Dropdown
+                        overlayClassName='fc-table-action-dropdown'
                         overlay={
                           <Menu>
                             <Menu.Item>
-                              <Button type='link' className='p-0 h-auto' icon={<EditOutlined />} onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
+                              <TableActionButton actionIcon='edit' onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
                                 {t('common:btn.edit')}
-                              </Button>
+                              </TableActionButton>
                             </Menu.Item>
+                            <Menu.Divider />
                             <Menu.Item>
                               <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
-                                  icon={<DeleteOutlined />}
+                                <TableActionButton
+                                  actionIcon='delete'
                                   danger
                                   disabled={record.enabled === true}
                                   onClick={() => {
@@ -120,13 +121,13 @@ export default function List() {
                                   }}
                                 >
                                   {t('common:btn.delete')}
-                                </Button>
+                                </TableActionButton>
                               </Tooltip>
                             </Menu.Item>
                           </Menu>
                         }
                       >
-                        <Button type='text' icon={<MoreOutlined />} />
+                        <TableActionTrigger />
                       </Dropdown>
                     ),
                   },
diff --git a/src/pages/aiConfig/mcpServers/pages/List.tsx b/src/pages/aiConfig/mcpServers/pages/List.tsx
index eb0848966..aaabece00 100644
--- a/src/pages/aiConfig/mcpServers/pages/List.tsx
+++ b/src/pages/aiConfig/mcpServers/pages/List.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Menu, Space, Switch, Table, Tooltip, Modal, message } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
 
 import PageLayout from '@/components/pageLayout';
@@ -11,6 +11,7 @@ import { NS } from '../constants';
 import { getList, deleteItem, putItem } from '../services';
 import AddDrawer from './AddDrawer';
 import EditDrawer from './EditDrawer';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -74,22 +75,22 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 80,
+                    width: 64,
                     render: (record) => (
                       <Dropdown
+                        overlayClassName='fc-table-action-dropdown'
                         overlay={
                           <Menu>
                             <Menu.Item>
-                              <Button type='link' className='p-0 h-auto' icon={<EditOutlined />} onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
+                              <TableActionButton actionIcon='edit' onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
                                 {t('common:btn.edit')}
-                              </Button>
+                              </TableActionButton>
                             </Menu.Item>
+                            <Menu.Divider />
                             <Menu.Item>
                               <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
-                                  icon={<DeleteOutlined />}
+                                <TableActionButton
+                                  actionIcon='delete'
                                   danger
                                   disabled={record.enabled === true}
                                   onClick={() => {
@@ -105,13 +106,13 @@ export default function List() {
                                   }}
                                 >
                                   {t('common:btn.delete')}
-                                </Button>
+                                </TableActionButton>
                               </Tooltip>
                             </Menu.Item>
                           </Menu>
                         }
                       >
-                        <Button type='text' icon={<MoreOutlined />} />
+                        <TableActionTrigger />
                       </Dropdown>
                     ),
                   },
diff --git a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
index 15b32b302..f6e53b499 100644
--- a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
+++ b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
@@ -1,12 +1,13 @@
 import React, { useMemo, useState } from 'react';
 import { useRequest } from 'ahooks';
 import { Table, Space, Button, Upload, Modal, message, Popover, Input, Dropdown, Menu } from 'antd';
-import { EyeOutlined, DeleteOutlined, UploadOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { UploadOutlined, SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 
 import { NS } from '../constants';
 import { getItem, uploadFile, deleteFile } from '../services';
 import ResourceModal from './ResourceModal';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 interface Props {
   id: number;
@@ -145,29 +146,27 @@ export default function ResourcesTable(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 80,
+            width: 64,
             render: (record) => {
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <Button
-                          type='link'
-                          className='p-0 h-auto'
-                          icon={<EyeOutlined />}
+                        <TableActionButton
+                          actionIcon='view'
                           onClick={() => {
                             setResourceState({ visible: true, id: record.id, name: record.name });
                           }}
                         >
                           {t('common:btn.view')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
+                      <Menu.Divider />
                       <Menu.Item>
-                        <Button
-                          type='link'
-                          className='p-0 h-auto'
-                          icon={<DeleteOutlined />}
+                        <TableActionButton
+                          actionIcon='delete'
                           danger
                           onClick={() => {
                             Modal.confirm({
@@ -182,12 +181,12 @@ export default function ResourcesTable(props: Props) {
                           }}
                         >
                           {t('common:btn.delete')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                     </Menu>
                   }
                 >
-                  <Button type='text' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },

From 0555ce2bd2cb1d33d0c1c09188613d0cacc4beab Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:38 +0800
Subject: [PATCH 15/44] fix(table): align notification actions

---
 src/pages/eventPipeline/pages/List/index.tsx  | 39 ++++++++++---------
 .../notificationChannels/pages/List/index.tsx | 20 +++++-----
 .../pages/ListNG/index.tsx                    | 20 +++++-----
 src/pages/notificationRules/pages/List.tsx    | 24 +++++++-----
 4 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index 221b519a1..46e2f9a37 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Space, Table, Button, Tag, Input, Modal, Drawer, Select, Dropdown, Menu } from 'antd';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
-import { Link } from 'react-router-dom';
 
 import usePagination from '@/components/usePagination';
 
@@ -13,6 +12,7 @@ import { Item, getList, deleteItems } from '../../services';
 import Add from '../Add';
 import Edit from '../Edit';
 import MoreOperations from './MoreOperations';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -227,16 +227,16 @@ export default function List() {
           },
           {
             title: t('common:table.operations'),
-            width: 80,
+            width: 64,
             render: (item: Item) => {
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <Button
-                          type='link'
-                          className='p-0 h-auto'
+                        <TableActionButton
+                          actionIcon='copy'
                           onClick={() => {
                             setEventPipelineDrawerState({
                               visible: true,
@@ -246,12 +246,11 @@ export default function List() {
                           }}
                         >
                           {t('common:btn.clone')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                       <Menu.Item>
-                        <Button
-                          type='link'
-                          className='p-0 h-auto'
+                        <TableActionButton
+                          actionIcon='edit'
                           onClick={() => {
                             setEventPipelineDrawerState({
                               visible: true,
@@ -261,13 +260,18 @@ export default function List() {
                           }}
                         >
                           {t('common:btn.edit')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                       <Menu.Item>
-                        <Button
-                          type='link'
+                        <TableActionLink actionIcon='open' to={`/event-pipelines-executions?pipeline_id=${item.id}`}>
+                          {t('executions.title')}
+                        </TableActionLink>
+                      </Menu.Item>
+                      <Menu.Divider />
+                      <Menu.Item>
+                        <TableActionButton
+                          actionIcon='delete'
                           danger
-                          className='p-0 h-auto'
                           onClick={() => {
                             Modal.confirm({
                               title: t('common:confirm.delete'),
@@ -280,15 +284,12 @@ export default function List() {
                           }}
                         >
                           {t('common:btn.delete')}
-                        </Button>
-                      </Menu.Item>
-                      <Menu.Item>
-                        <Link to={`/event-pipelines-executions?pipeline_id=${item.id}`}>{t('executions.title')}</Link>
+                        </TableActionButton>
                       </Menu.Item>
                     </Menu>
                   }
                 >
-                  <Button type='text' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },
diff --git a/src/pages/notificationChannels/pages/List/index.tsx b/src/pages/notificationChannels/pages/List/index.tsx
index ef22a5485..97797a2fb 100644
--- a/src/pages/notificationChannels/pages/List/index.tsx
+++ b/src/pages/notificationChannels/pages/List/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Table, Space, Button, Switch, Modal, Input, message, Dropdown, Menu } from 'antd';
-import { NotificationOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { NotificationOutlined, SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import moment from 'moment';
@@ -13,6 +13,7 @@ import { Import, Export } from '@/components/ExportImport';
 import { getItems, putItem, deleteItems, postItems } from '../../services';
 import { NS } from '../../constants';
 import { ChannelItem } from '../../types';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -181,22 +182,23 @@ export default function List() {
             },
             {
               title: t('common:table.operations'),
-              width: 80,
+              width: 64,
               render: (record) => {
                 return (
                   <Dropdown
+                    overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
                         <Menu.Item>
-                          <Link to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                          <TableActionLink actionIcon='copy' to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
                             {t('common:btn.clone')}
-                          </Link>
+                          </TableActionLink>
                         </Menu.Item>
+                        <Menu.Divider />
                         <Menu.Item>
-                          <Button
-                            type='link'
+                          <TableActionButton
+                            actionIcon='delete'
                             danger
-                            className='p-0 h-auto'
                             onClick={() => {
                               Modal.confirm({
                                 title: t('common:confirm.delete'),
@@ -210,12 +212,12 @@ export default function List() {
                             }}
                           >
                             {t('common:btn.delete')}
-                          </Button>
+                          </TableActionButton>
                         </Menu.Item>
                       </Menu>
                     }
                   >
-                    <Button type='text' icon={<MoreOutlined />} />
+                    <TableActionTrigger />
                   </Dropdown>
                 );
               },
diff --git a/src/pages/notificationChannels/pages/ListNG/index.tsx b/src/pages/notificationChannels/pages/ListNG/index.tsx
index b7fa19c26..ce53d76bf 100644
--- a/src/pages/notificationChannels/pages/ListNG/index.tsx
+++ b/src/pages/notificationChannels/pages/ListNG/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Input, Select, Space, Table, Button, Modal, Switch, message, Tooltip, Dropdown, Menu } from 'antd';
-import { NotificationOutlined, PlusOutlined, MoreOutlined } from '@ant-design/icons';
+import { NotificationOutlined, PlusOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { map, upperCase, includes, filter } from 'lodash';
 import { Link } from 'react-router-dom';
@@ -14,6 +14,7 @@ import { Import, Export } from '@/components/ExportImport';
 import { NS, NOTIFICATION_CHANNEL_TYPES } from '../../constants';
 import { getItems, putItem, deleteItems, postItems } from '../../services';
 import { ChannelItem } from '../../types';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function index() {
   const { t } = useTranslation(NS);
@@ -277,23 +278,24 @@ export default function index() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 80,
+                    width: 64,
                     render: (record) => {
                       return (
                         <Dropdown
+                          overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
                               <Menu.Item>
-                                <Link to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                                <TableActionLink actionIcon='copy' to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
                                   {t('common:btn.clone')}
-                                </Link>
+                                </TableActionLink>
                               </Menu.Item>
+                              <Menu.Divider />
                               <Menu.Item>
                                 <Tooltip title={record.enable === true ? t('delete_disable_first') : undefined}>
-                                  <Button
-                                    type='link'
+                                  <TableActionButton
+                                    actionIcon='delete'
                                     danger
-                                    className='p-0 h-auto'
                                     disabled={record.enable === true}
                                     onClick={() => {
                                       Modal.confirm({
@@ -308,13 +310,13 @@ export default function index() {
                                     }}
                                   >
                                     {t('common:btn.delete')}
-                                  </Button>
+                                  </TableActionButton>
                                 </Tooltip>
                               </Menu.Item>
                             </Menu>
                           }
                         >
-                          <Button type='text' icon={<MoreOutlined />} />
+                          <TableActionTrigger />
                         </Dropdown>
                       );
                     },
diff --git a/src/pages/notificationRules/pages/List.tsx b/src/pages/notificationRules/pages/List.tsx
index 539000365..effc4130b 100644
--- a/src/pages/notificationRules/pages/List.tsx
+++ b/src/pages/notificationRules/pages/List.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import { Table, Space, Button, Switch, Modal, Input, Tag, Tooltip, Dropdown, Menu } from 'antd';
-import { NotificationOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { NotificationOutlined, SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import moment from 'moment';
@@ -15,6 +15,7 @@ import usePagination from '@/components/usePagination';
 import { getItems, putItem, deleteItems } from '../services';
 import { NS, CN, TABLE_PAGINATION_CACHE_KEY } from '../constants';
 import { RuleItem } from '../types';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -190,25 +191,28 @@ export default function List() {
             },
             {
               title: t('common:table.operations'),
-              width: 80,
+              width: 64,
               render: (record) => {
                 return (
                   <Dropdown
+                    overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
                         <Menu.Item>
-                          <Link to={{ pathname: `/${NS}/edit/${record.id}` }}>{t('common:btn.edit')}</Link>
+                          <TableActionLink actionIcon='edit' to={{ pathname: `/${NS}/edit/${record.id}` }}>
+                            {t('common:btn.edit')}
+                          </TableActionLink>
                         </Menu.Item>
                         <Menu.Item>
-                          <Link to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                          <TableActionLink actionIcon='copy' to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
                             {t('common:btn.clone')}
-                          </Link>
+                          </TableActionLink>
                         </Menu.Item>
+                        <Menu.Divider />
                         <Menu.Item>
-                          <Button
-                            type='link'
+                          <TableActionButton
+                            actionIcon='delete'
                             danger
-                            className='p-0 h-auto'
                             onClick={() => {
                               Modal.confirm({
                                 title: t('common:confirm.delete'),
@@ -221,12 +225,12 @@ export default function List() {
                             }}
                           >
                             {t('common:btn.delete')}
-                          </Button>
+                          </TableActionButton>
                         </Menu.Item>
                       </Menu>
                     }
                   >
-                    <Button type='text' icon={<MoreOutlined />} />
+                    <TableActionTrigger />
                   </Dropdown>
                 );
               },

From e44a95f4ee5138a89d015a74cabf2d3a5edc45ad Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:43 +0800
Subject: [PATCH 16/44] fix(table): align alert event actions

---
 .../alertCurEvent/pages/List/AlertTable.tsx   | 29 ++++-----
 src/pages/alertRules/List/ListNG.tsx          | 25 ++++----
 src/pages/event/Table.tsx                     | 24 ++++----
 src/pages/event/card.tsx                      | 24 ++++----
 src/pages/historyEvents/ListNG/index.tsx      | 60 +++++++++----------
 src/pages/warning/shield/index.tsx            | 23 +++----
 src/pages/warning/subscribe/ListNG.tsx        | 25 ++++----
 7 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/src/pages/alertCurEvent/pages/List/AlertTable.tsx b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
index 51e7b1617..36b6877b9 100644
--- a/src/pages/alertCurEvent/pages/List/AlertTable.tsx
+++ b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tag, Button, Table, Dropdown, Menu, Space } from 'antd';
-import { MoreOutlined } from '@ant-design/icons';
 import { useHistory } from 'react-router-dom';
 import moment from 'moment';
 import _ from 'lodash';
@@ -20,6 +19,7 @@ import deleteAlertEventsModal from '../../utils/deleteAlertEventsModal';
 import { NS, SEVERITY_COLORS, EVENTS_TABLE_PAGESIZE_CACHE_KEY } from '../../constants';
 import { FilterType } from '../../types';
 import EventDetailDrawer from './EventDetailDrawer';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 // @ts-ignore
 import AckBtn from 'plus:/parcels/Event/Acknowledge/AckBtn';
@@ -186,14 +186,12 @@ export default function AlertTable(props: IProps) {
     {
       title: t('common:table.operations'),
       fixed: 'right' as const,
+      width: 64,
       render(record) {
         return (
-          <div
-            style={{
-              minWidth: getTextWidth(t('common:table.operations')),
-            }}
-          >
+          <div>
             <Dropdown
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   {IS_PLUS && (
@@ -208,10 +206,8 @@ export default function AlertTable(props: IProps) {
                   )}
                   {!_.includes(['firemap', 'northstar'], record?.rule_prod) && (
                     <Menu.Item>
-                      <Button
-                        style={{ padding: 0 }}
-                        size='small'
-                        type='link'
+                      <TableActionButton
+                        actionIcon='permission'
                         onClick={() => {
                           history.push({
                             pathname: '/alert-mutes/add',
@@ -226,15 +222,14 @@ export default function AlertTable(props: IProps) {
                         }}
                       >
                         {t('shield')}
-                      </Button>
+                      </TableActionButton>
                     </Menu.Item>
                   )}
+                  <Menu.Divider />
                   <Menu.Item>
-                    <Button
-                      style={{ padding: 0 }}
-                      size='small'
-                      type='link'
+                    <TableActionButton
                       danger
+                      actionIcon='delete'
                       onClick={() =>
                         deleteAlertEventsModal(
                           [record.id],
@@ -247,12 +242,12 @@ export default function AlertTable(props: IProps) {
                       }
                     >
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 </Menu>
               }
             >
-              <Button type='link' icon={<MoreOutlined />} />
+              <TableActionTrigger />
             </Dropdown>
           </div>
         );
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index a61a49e18..e308f267a 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { Space, Select, Input, Button, Table, Tooltip, Tag, Modal, Switch, message, Dropdown, Menu } from 'antd';
 import { ColumnType } from 'antd/lib/table';
-import { EyeOutlined, SearchOutlined, InfoCircleOutlined, WarningFilled, CheckCircleFilled, MoreOutlined } from '@ant-design/icons';
+import { EyeOutlined, SearchOutlined, InfoCircleOutlined, WarningFilled, CheckCircleFilled } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useDebounceFn } from 'ahooks';
 import _ from 'lodash';
@@ -13,6 +13,7 @@ import { priorityColor } from '@/utils/constant';
 import { updateAlertRules, deleteStrategy } from '@/services/warning';
 import { allCates } from '@/components/AdvancedWrap/utils';
 import RefreshIcon from '@/components/RefreshIcon';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 import DatasourceSelect from '@/components/DatasourceSelect/DatasourceSelect';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
@@ -313,33 +314,37 @@ export default function AlertRules(props: Props) {
           {
             title: t('common:table.operations'),
             fixed: 'right',
-            width: 80,
+            width: 64,
             render: (record: any) => {
               const anomalyEnabled = _.get(record, ['rule_config', 'anomaly_trigger', 'enable']);
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <Link
+                        <TableActionLink
+                          actionIcon='copy'
                           to={{
                             pathname: `/alert-rules/edit/${record.id}?mode=clone`,
                           }}
                           target='_blank'
                         >
                           {t('common:btn.clone')}
-                        </Link>
+                        </TableActionLink>
                       </Menu.Item>
                       {record.cate === 'prometheus' && anomalyEnabled === true && (
                         <Menu.Item>
-                          <Link to={{ pathname: `/alert-rules/brain/${record.id}` }}>{t('brain_result_btn')}</Link>
+                          <TableActionLink actionIcon='ai' to={{ pathname: `/alert-rules/brain/${record.id}` }}>
+                            {t('brain_result_btn')}
+                          </TableActionLink>
                         </Menu.Item>
                       )}
+                      <Menu.Divider />
                       <Menu.Item>
-                        <Button
-                          type='link'
+                        <TableActionButton
+                          actionIcon='delete'
                           danger
-                          className='p-0 h-auto'
                           onClick={() => {
                             Modal.confirm({
                               title: t('common:confirm.delete'),
@@ -355,12 +360,12 @@ export default function AlertRules(props: Props) {
                           }}
                         >
                           {t('common:btn.delete')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                     </Menu>
                   }
                 >
-                  <Button type='text' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },
diff --git a/src/pages/event/Table.tsx b/src/pages/event/Table.tsx
index 79771335e..1ff155328 100644
--- a/src/pages/event/Table.tsx
+++ b/src/pages/event/Table.tsx
@@ -17,7 +17,6 @@
 import React, { useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tag, Button, Table, Tooltip, Dropdown, Menu } from 'antd';
-import { MoreOutlined } from '@ant-design/icons';
 import { useHistory, Link } from 'react-router-dom';
 import moment from 'moment';
 import _ from 'lodash';
@@ -28,6 +27,7 @@ import { parseRange } from '@/components/TimeRangePicker';
 import { getEvents } from './services';
 import { deleteAlertEventsModal } from './index';
 import { SeverityColor } from './index';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 // @ts-ignore
 import AckBtn from 'plus:/parcels/Event/Acknowledge/AckBtn';
@@ -130,10 +130,11 @@ export default function TableCpt(props: IProps) {
     {
       title: t('common:table.operations'),
       dataIndex: 'operate',
-      width: 80,
+      width: 64,
       render(value, record) {
         return (
           <Dropdown
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 <Menu.Item>
@@ -146,10 +147,8 @@ export default function TableCpt(props: IProps) {
                 </Menu.Item>
                 {!_.includes(['firemap', 'northstar'], record?.rule_prod) && (
                   <Menu.Item>
-                    <Button
-                      style={{ padding: 0 }}
-                      size='small'
-                      type='link'
+                    <TableActionButton
+                      actionIcon='permission'
                       onClick={() => {
                         history.push({
                           pathname: '/alert-mutes/add',
@@ -164,15 +163,14 @@ export default function TableCpt(props: IProps) {
                       }}
                     >
                       {t('shield')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
+                <Menu.Divider />
                 <Menu.Item>
-                  <Button
-                    style={{ padding: 0 }}
-                    size='small'
-                    type='link'
+                  <TableActionButton
                     danger
+                    actionIcon='delete'
                     onClick={() =>
                       deleteAlertEventsModal(
                         [record.id],
@@ -185,12 +183,12 @@ export default function TableCpt(props: IProps) {
                     }
                   >
                     {t('common:btn.delete')}
-                  </Button>
+                  </TableActionButton>
                 </Menu.Item>
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },
diff --git a/src/pages/event/card.tsx b/src/pages/event/card.tsx
index 057d426fe..5d25dac8e 100644
--- a/src/pages/event/card.tsx
+++ b/src/pages/event/card.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState, useLayoutEffect, useRef, useImperativeHandle, useContext } from 'react';
 import { Button, Row, Col, Drawer, Tag, Table, Dropdown, Menu, Tooltip } from 'antd';
-import { MoreOutlined } from '@ant-design/icons';
 import { useHistory, Link } from 'react-router-dom';
 import { ReactNode } from 'react-markdown/lib/react-markdown';
 import _, { throttle } from 'lodash';
@@ -14,6 +13,7 @@ import { parseRange } from '@/components/TimeRangePicker';
 import { SeverityColor, deleteAlertEventsModal } from './index';
 import CardLeft from './cardLeft';
 import './index.less';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 // @ts-ignore
 import BatchAckBtn from 'plus:/parcels/Event/Acknowledge/BatchAckBtn';
@@ -171,10 +171,11 @@ function Card(props: Props, ref) {
     {
       title: t('common:table.operations'),
       dataIndex: 'operate',
-      width: 80,
+      width: 64,
       render(value, record) {
         return (
           <Dropdown
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 <Menu.Item>
@@ -187,10 +188,8 @@ function Card(props: Props, ref) {
                 </Menu.Item>
                 {!_.includes(['firemap', 'northstar'], record?.rule_prod) && (
                   <Menu.Item>
-                    <Button
-                      style={{ padding: 0 }}
-                      size='small'
-                      type='link'
+                    <TableActionButton
+                      actionIcon='permission'
                       onClick={() => {
                         history.push({
                           pathname: '/alert-mutes/add',
@@ -205,15 +204,14 @@ function Card(props: Props, ref) {
                       }}
                     >
                       {t('shield')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
+                <Menu.Divider />
                 <Menu.Item>
-                  <Button
-                    style={{ padding: 0 }}
-                    size='small'
-                    type='link'
+                  <TableActionButton
                     danger
+                    actionIcon='delete'
                     onClick={() =>
                       deleteAlertEventsModal(
                         [record.id],
@@ -226,12 +224,12 @@ function Card(props: Props, ref) {
                     }
                   >
                     {t('common:btn.delete')}
-                  </Button>
+                  </TableActionButton>
                 </Menu.Item>
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },
diff --git a/src/pages/historyEvents/ListNG/index.tsx b/src/pages/historyEvents/ListNG/index.tsx
index fba35297d..430b0c2df 100644
--- a/src/pages/historyEvents/ListNG/index.tsx
+++ b/src/pages/historyEvents/ListNG/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import moment from 'moment';
 import _ from 'lodash';
@@ -21,6 +21,7 @@ import EventDetailDrawer from '@/pages/alertCurEvent/pages/List/EventDetailDrawe
 import usePagination from '@/components/usePagination';
 import { getEventById } from '@/pages/alertCurEvent/services';
 import deleteAlertEventsModal from '@/pages/alertCurEvent/utils/deleteAlertEventsModal';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 import exportEvents, { downloadFile } from '../exportEvents';
 import { SeverityColor } from '../../event';
@@ -184,14 +185,12 @@ const Event = (props: Props) => {
       {
         title: t('common:table.operations'),
         fixed: 'right' as const,
+        width: 64,
         render(record) {
           return (
-            <div
-              style={{
-                minWidth: getTextWidth(t('common:table.operations')),
-              }}
-            >
+            <div>
               <Dropdown
+                overlayClassName='fc-table-action-dropdown'
                 overlay={
                   <Menu>
                     {IS_PLUS && (
@@ -206,10 +205,8 @@ const Event = (props: Props) => {
                     )}
                     {!_.includes(['firemap', 'northstar'], record?.rule_prod) && (
                       <Menu.Item>
-                        <Button
-                          style={{ padding: 0 }}
-                          size='small'
-                          type='link'
+                        <TableActionButton
+                          actionIcon='permission'
                           onClick={() => {
                             history.push({
                               pathname: '/alert-mutes/add',
@@ -224,34 +221,35 @@ const Event = (props: Props) => {
                           }}
                         >
                           {t('shield')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                     )}
                     {!hideDeleteEventButton && (
-                      <Menu.Item>
-                        <Button
-                          style={{ padding: 0 }}
-                          size='small'
-                          type='link'
-                          danger
-                          onClick={() =>
-                            deleteAlertEventsModal(
-                              [record.id],
-                              () => {
-                                setRefreshFlag(_.uniqueId('refresh_'));
-                              },
-                              t,
-                            )
-                          }
-                        >
-                          {t('common:btn.delete')}
-                        </Button>
-                      </Menu.Item>
+                      <>
+                        <Menu.Divider />
+                        <Menu.Item>
+                          <TableActionButton
+                            danger
+                            actionIcon='delete'
+                            onClick={() =>
+                              deleteAlertEventsModal(
+                                [record.id],
+                                () => {
+                                  setRefreshFlag(_.uniqueId('refresh_'));
+                                },
+                                t,
+                              )
+                            }
+                          >
+                            {t('common:btn.delete')}
+                          </TableActionButton>
+                        </Menu.Item>
+                      </>
                     )}
                   </Menu>
                 }
               >
-                <Button type='link' icon={<MoreOutlined />} />
+                <TableActionTrigger />
               </Dropdown>
             </div>
           );
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 77184285e..aef279259 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -17,11 +17,12 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Button, Input, Table, Tooltip, message, Modal, Switch, Space, Tag, Dropdown, Menu } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { CloseCircleOutlined, ExclamationCircleOutlined, SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { CloseCircleOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useHistory, Link } from 'react-router-dom';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 import Tags from '@/components/Tags';
 import PageLayout from '@/components/pageLayout';
@@ -246,16 +247,16 @@ const Shield: React.FC = () => {
         title: t('common:table.operations'),
         dataIndex: 'operation',
         fixed: 'right',
-        width: 80,
+        width: 64,
         render: (text: undefined, record: shieldItem) => {
           return (
             <Dropdown
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   <Menu.Item>
-                    <Button
-                      type='link'
-                      className='p-0 h-auto'
+                    <TableActionButton
+                      actionIcon='copy'
                       onClick={() => {
                         history.push({
                           pathname: `/alert-mutes/edit/${record.id}`,
@@ -264,13 +265,13 @@ const Shield: React.FC = () => {
                       }}
                     >
                       {t('common:btn.clone')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
+                  <Menu.Divider />
                   <Menu.Item>
-                    <Button
-                      type='link'
+                    <TableActionButton
+                      actionIcon='delete'
                       danger
-                      className='p-0 h-auto'
                       onClick={() => {
                         confirm({
                           title: t('common:confirm.delete'),
@@ -291,12 +292,12 @@ const Shield: React.FC = () => {
                       }}
                     >
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 </Menu>
               }
             >
-              <Button type='text' icon={<MoreOutlined />} />
+              <TableActionTrigger />
             </Dropdown>
           );
         },
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index fd8ada69b..d56ae8c12 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
 import { Button, Input, Table, message, Modal, Space, Switch, Tag, Dropdown, Menu, Tooltip } from 'antd';
-import { ExclamationCircleOutlined, SearchOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -22,6 +22,7 @@ import { getItems as getNotificationRules, RuleItem as NotificationRuleItem } fr
 import { defaultColumnsConfigs, LOCAL_STORAGE_KEY } from './constants';
 import './locale';
 import './index.less';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export { default as Add } from './add';
 export { default as Edit } from './edit';
@@ -279,35 +280,39 @@ const Subscribe = (props: Props) => {
             title: t('common:table.operations'),
             dataIndex: 'operation',
             fixed: 'right',
+            width: 64,
             render: (text: string, record: subscribeItem) => {
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <Link
+                        <TableActionLink
+                          actionIcon='edit'
                           to={{
                             pathname: `/alert-subscribes/edit/${record.id}`,
                           }}
                         >
                           {t('common:btn.edit')}
-                        </Link>
+                        </TableActionLink>
                       </Menu.Item>
                       <Menu.Item>
-                        <Link
+                        <TableActionLink
+                          actionIcon='copy'
                           to={{
                             pathname: `/alert-subscribes/edit/${record.id}`,
                             search: 'mode=clone',
                           }}
                         >
                           {t('common:btn.clone')}
-                        </Link>
+                        </TableActionLink>
                       </Menu.Item>
+                      <Menu.Divider />
                       <Menu.Item>
-                        <Button
+                        <TableActionButton
                           danger
-                          type='link'
-                          className='p-0 h-auto'
+                          actionIcon='delete'
                           onClick={async () => {
                             confirm({
                               title: t('common:confirm.delete'),
@@ -328,12 +333,12 @@ const Subscribe = (props: Props) => {
                           }}
                         >
                           {t('common:btn.delete')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                     </Menu>
                   }
                 >
-                  <Button type='link' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },

From 2fc3e1fe56212f028b4c052499ff7e5a6c4a65c7 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:47 +0800
Subject: [PATCH 17/44] fix(table): align builtin component actions

---
 .../builtInComponents/AlertRules/index.tsx    | 65 ++++++++++---------
 .../builtInComponents/CollectTpls/index.tsx   | 60 +++++++++--------
 .../builtInComponents/Dashboards/index.tsx    | 63 ++++++++++--------
 src/pages/builtInComponents/Metrics/index.tsx | 37 ++++++-----
 src/pages/metricsBuiltin/List.tsx             | 64 ++++++++++--------
 5 files changed, 161 insertions(+), 128 deletions(-)

diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index c2fb266a1..e91b22954 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useRef, useContext, useEffect } from 'react';
 import _ from 'lodash';
 import { Table, Space, Button, Input, Select, Dropdown, Menu, Modal, Tag, message } from 'antd';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useDebounceEffect } from 'ahooks';
@@ -10,6 +10,7 @@ import Export from '@/pages/dashboard/List/Export';
 import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { CommonStateContext } from '@/App';
 import { HelpLink } from '@/components/pageLayout';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { RuleType } from './types';
 import Import from './Import';
 import { getPayloads, deletePayloads, getCates } from '../services';
@@ -245,14 +246,16 @@ export default function index(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
             render: (record) => {
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             Import({
                               data: formatBeautifyJson(record.content),
@@ -264,10 +267,11 @@ export default function index(props: Props) {
                           }}
                         >
                           {t('import_to_buisGroup')}
-                        </a>
+                        </TableActionButton>
                       </Menu.Item>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             Export({
                               data: formatBeautifyJson(record.content, 'array'),
@@ -275,12 +279,13 @@ export default function index(props: Props) {
                           }}
                         >
                           {t('common:btn.export')}
-                        </a>
+                        </TableActionButton>
                       </Menu.Item>
                       {record.updated_by !== 'system' && (
                         <AuthorizationWrapper allowedPerms={['/components/put']}>
                           <Menu.Item>
-                            <a
+                            <TableActionButton
+                              actionIcon='edit'
                               onClick={() => {
                                 PayloadFormModal({
                                   darkMode,
@@ -297,38 +302,40 @@ export default function index(props: Props) {
                               }}
                             >
                               {t('common:btn.edit')}
-                            </a>
+                            </TableActionButton>
                           </Menu.Item>
                         </AuthorizationWrapper>
                       )}
                       {record.updated_by !== 'system' && (
                         <AuthorizationWrapper allowedPerms={['/components/del']}>
-                          <Menu.Item>
-                            <Button
-                              type='link'
-                              danger
-                              className='p-0 h-auto'
-                              onClick={() => {
-                                Modal.confirm({
-                                  title: t('common:confirm.delete'),
-                                  onOk() {
-                                    deletePayloads([record.id]).then(() => {
-                                      fetchData();
-                                      fetchCates();
-                                    });
-                                  },
-                                });
-                              }}
-                            >
-                              {t('common:btn.delete')}
-                            </Button>
-                          </Menu.Item>
+                          <>
+                            <Menu.Divider />
+                            <Menu.Item>
+                              <TableActionButton
+                                danger
+                                actionIcon='delete'
+                                onClick={() => {
+                                  Modal.confirm({
+                                    title: t('common:confirm.delete'),
+                                    onOk() {
+                                      deletePayloads([record.id]).then(() => {
+                                        fetchData();
+                                        fetchCates();
+                                      });
+                                    },
+                                  });
+                                }}
+                              >
+                                {t('common:btn.delete')}
+                              </TableActionButton>
+                            </Menu.Item>
+                          </>
                         </AuthorizationWrapper>
                       )}
                     </Menu>
                   }
                 >
-                  <Button type='link' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },
diff --git a/src/pages/builtInComponents/CollectTpls/index.tsx b/src/pages/builtInComponents/CollectTpls/index.tsx
index 39f3d8792..ee14a533d 100644
--- a/src/pages/builtInComponents/CollectTpls/index.tsx
+++ b/src/pages/builtInComponents/CollectTpls/index.tsx
@@ -1,13 +1,14 @@
 import React, { useState, useRef, useContext, useEffect } from 'react';
 import _ from 'lodash';
 import { Table, Space, Button, Input, Dropdown, Menu, Modal, Tag } from 'antd';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useDebounceEffect } from 'ahooks';
 import { CommonStateContext } from '@/App';
 import usePagination from '@/components/usePagination';
 import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { HelpLink } from '@/components/pageLayout';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { getPayloads, deletePayloads, getCates } from '../services';
 import { TypeEnum, Payload } from '../types';
 import PayloadFormModal from '../components/PayloadFormModal';
@@ -153,14 +154,16 @@ export default function index(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
             render: (record) => {
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             GroupSelectModal({
                               busiGroups,
@@ -171,11 +174,12 @@ export default function index(props: Props) {
                           }}
                         >
                           {t('collect_create')}
-                        </a>
+                        </TableActionButton>
                       </Menu.Item>
                       <AuthorizationWrapper allowedPerms={['/components/put']}>
                         <Menu.Item>
-                          <a
+                          <TableActionButton
+                            actionIcon='edit'
                             onClick={() => {
                               PayloadFormModal({
                                 darkMode,
@@ -194,37 +198,39 @@ export default function index(props: Props) {
                             }}
                           >
                             {t('common:btn.edit')}
-                          </a>
+                          </TableActionButton>
                         </Menu.Item>
                       </AuthorizationWrapper>
                       {record.updated_by !== 'system' && (
                         <AuthorizationWrapper allowedPerms={['/components/del']}>
-                          <Menu.Item>
-                            <Button
-                              type='link'
-                              danger
-                              className='p-0 h-auto'
-                              onClick={() => {
-                                Modal.confirm({
-                                  title: t('common:confirm.delete'),
-                                  onOk() {
-                                    deletePayloads([record.id]).then(() => {
-                                      fetchData();
-                                      fetchCates();
-                                    });
-                                  },
-                                });
-                              }}
-                            >
-                              {t('common:btn.delete')}
-                            </Button>
-                          </Menu.Item>
+                          <>
+                            <Menu.Divider />
+                            <Menu.Item>
+                              <TableActionButton
+                                danger
+                                actionIcon='delete'
+                                onClick={() => {
+                                  Modal.confirm({
+                                    title: t('common:confirm.delete'),
+                                    onOk() {
+                                      deletePayloads([record.id]).then(() => {
+                                        fetchData();
+                                        fetchCates();
+                                      });
+                                    },
+                                  });
+                                }}
+                              >
+                                {t('common:btn.delete')}
+                              </TableActionButton>
+                            </Menu.Item>
+                          </>
                         </AuthorizationWrapper>
                       )}
                     </Menu>
                   }
                 >
-                  <Button type='link' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index d618a90e7..fc9136519 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -2,7 +2,7 @@ import React, { useState, useRef, useContext } from 'react';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
 import { Table, Space, Button, Input, Dropdown, Menu, Modal, Tag, message } from 'antd';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useDebounceEffect } from 'ahooks';
 import { CommonStateContext } from '@/App';
@@ -10,6 +10,7 @@ import usePagination from '@/components/usePagination';
 import Export from '@/pages/dashboard/List/Export';
 import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { HelpLink } from '@/components/pageLayout';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { getPayloads, deletePayloads } from '../services';
 import { TypeEnum, Payload } from '../types';
 import PayloadFormModal from '../components/PayloadFormModal';
@@ -205,14 +206,16 @@ export default function index(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
             render: (record) => {
               return (
                 <Dropdown
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             Import({
                               data: formatBeautifyJson(record.content),
@@ -221,10 +224,11 @@ export default function index(props: Props) {
                           }}
                         >
                           {t('import_to_buisGroup')}
-                        </a>
+                        </TableActionButton>
                       </Menu.Item>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             Export({
                               data: formatBeautifyJson(record.content, 'array'),
@@ -232,12 +236,13 @@ export default function index(props: Props) {
                           }}
                         >
                           {t('common:btn.export')}
-                        </a>
+                        </TableActionButton>
                       </Menu.Item>
                       {record.updated_by !== 'system' && (
                         <AuthorizationWrapper allowedPerms={['/components/put']}>
                           <Menu.Item>
-                            <a
+                            <TableActionButton
+                              actionIcon='edit'
                               onClick={() => {
                                 PayloadFormModal({
                                   darkMode,
@@ -252,37 +257,39 @@ export default function index(props: Props) {
                               }}
                             >
                               {t('common:btn.edit')}
-                            </a>
+                            </TableActionButton>
                           </Menu.Item>
                         </AuthorizationWrapper>
                       )}
                       {record.updated_by !== 'system' && (
                         <AuthorizationWrapper allowedPerms={['/components/del']}>
-                          <Menu.Item>
-                            <Button
-                              type='link'
-                              danger
-                              className='p-0 h-auto'
-                              onClick={() => {
-                                Modal.confirm({
-                                  title: t('common:confirm.delete'),
-                                  onOk() {
-                                    deletePayloads([record.id]).then(() => {
-                                      fetchData();
-                                    });
-                                  },
-                                });
-                              }}
-                            >
-                              {t('common:btn.delete')}
-                            </Button>
-                          </Menu.Item>
+                          <>
+                            <Menu.Divider />
+                            <Menu.Item>
+                              <TableActionButton
+                                danger
+                                actionIcon='delete'
+                                onClick={() => {
+                                  Modal.confirm({
+                                    title: t('common:confirm.delete'),
+                                    onOk() {
+                                      deletePayloads([record.id]).then(() => {
+                                        fetchData();
+                                      });
+                                    },
+                                  });
+                                }}
+                              >
+                                {t('common:btn.delete')}
+                              </TableActionButton>
+                            </Menu.Item>
+                          </>
                         </AuthorizationWrapper>
                       )}
                     </Menu>
                   }
                 >
-                  <Button type='link' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },
diff --git a/src/pages/builtInComponents/Metrics/index.tsx b/src/pages/builtInComponents/Metrics/index.tsx
index 0e297ebcc..416eb8d63 100644
--- a/src/pages/builtInComponents/Metrics/index.tsx
+++ b/src/pages/builtInComponents/Metrics/index.tsx
@@ -19,7 +19,7 @@ import _ from 'lodash';
 import { useAntdTable, useDebounceFn } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import { Space, Table, Button, Input, Dropdown, Select, message, Modal, Tooltip, Menu, Tag } from 'antd';
-import { DownOutlined, SearchOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons';
+import { DownOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
 import { ColumnType } from 'antd/lib/table';
 import usePagination from '@/components/usePagination';
 import RefreshIcon from '@/components/RefreshIcon';
@@ -33,6 +33,7 @@ import FormModal from './components/FormModal';
 import Export from '@/pages/metricsBuiltin/components/Export';
 import Import from '@/pages/metricsBuiltin/components/Import';
 import { HelpLink } from '@/components/pageLayout';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 interface Props {
   component: string;
@@ -142,9 +143,11 @@ export default function index(props: Props) {
     {
       title: t('common:table.operations'),
       dataIndex: 'operator',
+      width: 64,
       render: (data, record: any) => {
         return (
           <Dropdown
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 {actionAuth.add && (
@@ -159,10 +162,10 @@ export default function index(props: Props) {
                         setRefreshFlag(_.uniqueId('refreshFlag_'));
                       }}
                     >
-                      <a>{t('common:btn.clone')}</a>
-                    </FormModal>
-                  </Menu.Item>
-                )}
+                    <TableActionButton actionIcon='copy'>{t('common:btn.clone')}</TableActionButton>
+                  </FormModal>
+                </Menu.Item>
+              )}
                 {actionAuth.edit && record.updated_by !== 'system' && (
                   <Menu.Item>
                     <FormModal
@@ -175,16 +178,17 @@ export default function index(props: Props) {
                         setRefreshFlag(_.uniqueId('refreshFlag_'));
                       }}
                     >
-                      <a>{t('common:btn.edit')}</a>
-                    </FormModal>
-                  </Menu.Item>
-                )}
-                {actionAuth.delete && record.updated_by !== 'system' && (
+                    <TableActionButton actionIcon='edit'>{t('common:btn.edit')}</TableActionButton>
+                  </FormModal>
+                </Menu.Item>
+              )}
+              {actionAuth.delete && record.updated_by !== 'system' && (
+                <>
+                  <Menu.Divider />
                   <Menu.Item>
-                    <Button
+                    <TableActionButton
                       danger
-                      type='link'
-                      className='p-0 h-auto'
+                      actionIcon='delete'
                       onClick={() => {
                         Modal.confirm({
                           title: t('common:confirm.delete'),
@@ -198,13 +202,14 @@ export default function index(props: Props) {
                       }}
                     >
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
-                )}
+                </>
+              )}
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index c33ecfa87..1f6ba7e62 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -19,7 +19,7 @@ import _ from 'lodash';
 import { useAntdTable, useDebounceFn } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import { Space, Table, Button, Input, Dropdown, Select, message, Modal, Tooltip, Menu, Tag } from 'antd';
-import { SettingOutlined, DownOutlined, SearchOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons';
+import { SettingOutlined, DownOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
 import { ColumnType } from 'antd/lib/table';
 
 import { CommonStateContext } from '@/App';
@@ -33,6 +33,7 @@ import { getMenuPerm } from '@/services/common';
 import Collapse from '@/pages/monitor/object/metricViews/components/Collapse';
 import { getComponents, Component } from '@/pages/builtInComponents/services';
 import { getDefaultDatasourceValue } from '@/utils';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 import { getMetrics, Record, Filter, getTypes, getCollectors, deleteMetrics, buildLabelFilterAndExpression } from './services';
 import { defaultColumnsConfigs, LOCAL_STORAGE_KEY } from './constants';
@@ -269,14 +270,17 @@ export default function index() {
     {
       title: t('common:table.operations'),
       dataIndex: 'operator',
+      width: 64,
       render: (data, record: any) => {
         return (
           <Dropdown
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 {actionAuth.add && (
                   <Menu.Item>
-                    <a
+                    <TableActionButton
+                      actionIcon='copy'
                       onClick={() => {
                         setFormDrawerData({
                           open: true,
@@ -287,12 +291,13 @@ export default function index() {
                       }}
                     >
                       {t('common:btn.clone')}
-                    </a>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
                 {actionAuth.edit && record.updated_by !== 'system' && (
                   <Menu.Item>
-                    <a
+                    <TableActionButton
+                      actionIcon='edit'
                       onClick={() => {
                         setFormDrawerData({
                           open: true,
@@ -303,34 +308,37 @@ export default function index() {
                       }}
                     >
                       {t('common:btn.edit')}
-                    </a>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
                 {actionAuth.delete && record.updated_by !== 'system' && (
-                  <Menu.Item>
-                    <Button
-                      danger
-                      type='link'
-                      className='p-0 h-auto'
-                      onClick={() => {
-                        Modal.confirm({
-                          title: t('common:confirm.delete'),
-                          onOk() {
-                            deleteMetrics([record.id]).then(() => {
-                              message.success(t('common:success.delete'));
-                              setRefreshFlag(_.uniqueId('refreshFlag_'));
-                            });
-                          },
-                        });
-                      }}
-                    >
-                      {t('common:btn.delete')}
-                    </Button>
-                  </Menu.Item>
+                  <>
+                    <Menu.Divider />
+                    <Menu.Item>
+                      <TableActionButton
+                        danger
+                        actionIcon='delete'
+                        onClick={() => {
+                          Modal.confirm({
+                            title: t('common:confirm.delete'),
+                            onOk() {
+                              deleteMetrics([record.id]).then(() => {
+                                message.success(t('common:success.delete'));
+                                setRefreshFlag(_.uniqueId('refreshFlag_'));
+                              });
+                            },
+                          });
+                        }}
+                      >
+                        {t('common:btn.delete')}
+                      </TableActionButton>
+                    </Menu.Item>
+                  </>
                 )}
                 {record.expression_type === 'metric_name' && (
                   <Menu.Item>
-                    <a
+                    <TableActionButton
+                      actionIcon='search'
                       onClick={() => {
                         setNewMetricExplorerDrawerState((prev) => {
                           return {
@@ -342,13 +350,13 @@ export default function index() {
                       }}
                     >
                       {t('laset_over_time')}
-                    </a>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },

From 77a79865cab3a08037720323d79fc166b293718f Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:51 +0800
Subject: [PATCH 18/44] fix(table): align data route actions

---
 src/pages/dashboard/List/index.tsx            |  70 ++++++------
 .../components/TableSource/index.tsx          | 104 +++++++++---------
 .../embeddedProduct/pages/List/index.tsx      |  23 ++--
 src/pages/log/IndexPatterns/index.tsx         |  30 ++---
 src/pages/recordingRules/PageTable.tsx        |  23 ++--
 src/pages/variableConfigs/index.tsx           |  30 ++---
 6 files changed, 144 insertions(+), 136 deletions(-)

diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index d5356ea54..c85f39006 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -20,7 +20,7 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { Table, Tag, Modal, Space, Button, Dropdown, Menu, message, Tooltip } from 'antd';
-import { FundViewOutlined, EditOutlined, ShareAltOutlined, MoreOutlined } from '@ant-design/icons';
+import { FundViewOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -33,6 +33,7 @@ import { getBusiGroupsDashboards, getBusiGroupsPublicDashboards, cloneDashboard,
 import PageLayout from '@/components/pageLayout';
 import { CommonStateContext } from '@/App';
 import BusinessGroupSideBarWithAll, { getDefaultGidsInDashboard } from '@/components/BusinessGroup/BusinessGroupSideBarWithAll';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import usePagination from '@/components/usePagination';
 import { getDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { getBusiGroups } from '@/components/BusinessGroup';
@@ -313,16 +314,17 @@ export default function index() {
                   },
                   {
                     title: t('common:table.operations'),
+                    width: 64,
                     render: (text: string, record: DashboardType) => {
                       return (
                         <Dropdown
+                          overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
                               {gids !== '-1' && (
                                 <Menu.Item>
-                                  <Button
-                                    type='link'
-                                    className='p-0 h-auto'
+                                  <TableActionButton
+                                    actionIcon='edit'
                                     onClick={() => {
                                       FormModal({
                                         action: 'edit',
@@ -335,14 +337,13 @@ export default function index() {
                                     }}
                                   >
                                     {t('common:btn.edit')}
-                                  </Button>
+                                  </TableActionButton>
                                 </Menu.Item>
                               )}
                               {gids && gids !== '-1' && (
                                 <Menu.Item>
-                                  <Button
-                                    type='link'
-                                    className='p-0 h-auto'
+                                  <TableActionButton
+                                    actionIcon='copy'
                                     onClick={async () => {
                                       Modal.confirm({
                                         title: t('common:confirm.clone'),
@@ -357,13 +358,12 @@ export default function index() {
                                     }}
                                   >
                                     {t('common:btn.clone')}
-                                  </Button>
+                                  </TableActionButton>
                                 </Menu.Item>
                               )}
                               <Menu.Item>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
+                                <TableActionButton
+                                  actionIcon='open'
                                   onClick={async () => {
                                     const exportData = await getDashboard(record.id);
                                     Export({
@@ -372,35 +372,37 @@ export default function index() {
                                   }}
                                 >
                                   {t('common:btn.export')}
-                                </Button>
+                                </TableActionButton>
                               </Menu.Item>
                               {gids !== '-1' && (
-                                <Menu.Item>
-                                  <Button
-                                    danger
-                                    type='link'
-                                    className='p-0 h-auto'
-                                    onClick={async () => {
-                                      Modal.confirm({
-                                        title: t('common:confirm.delete'),
-                                        onOk: async () => {
-                                          await removeDashboards([record.id]);
-                                          message.success(t('common:success.delete'));
-                                          setRefreshKey(_.uniqueId('refreshKey_'));
-                                        },
+                                <>
+                                  <Menu.Divider />
+                                  <Menu.Item>
+                                    <TableActionButton
+                                      danger
+                                      actionIcon='delete'
+                                      onClick={async () => {
+                                        Modal.confirm({
+                                          title: t('common:confirm.delete'),
+                                          onOk: async () => {
+                                            await removeDashboards([record.id]);
+                                            message.success(t('common:success.delete'));
+                                            setRefreshKey(_.uniqueId('refreshKey_'));
+                                          },
 
-                                        onCancel() {},
-                                      });
-                                    }}
-                                  >
-                                    {t('common:btn.delete')}
-                                  </Button>
-                                </Menu.Item>
+                                          onCancel() {},
+                                        });
+                                      }}
+                                    >
+                                      {t('common:btn.delete')}
+                                    </TableActionButton>
+                                  </Menu.Item>
+                                </>
                               )}
                             </Menu>
                           }
                         >
-                          <Button type='link' icon={<MoreOutlined />} />
+                          <TableActionTrigger />
                         </Dropdown>
                       );
                     },
diff --git a/src/pages/datasource/components/TableSource/index.tsx b/src/pages/datasource/components/TableSource/index.tsx
index 67920d589..e95f3d2d8 100644
--- a/src/pages/datasource/components/TableSource/index.tsx
+++ b/src/pages/datasource/components/TableSource/index.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { message, Table, Modal, Button, Space, Popconfirm, Tooltip, Dropdown, Menu } from 'antd';
 import { ColumnProps } from 'antd/es/table';
-import { CheckCircleFilled, MinusCircleFilled, WarningOutlined, MoreOutlined } from '@ant-design/icons';
+import { CheckCircleFilled, MinusCircleFilled, WarningOutlined } from '@ant-design/icons';
 import { CommonStateContext } from '@/App';
 import usePagination from '@/components/usePagination';
 import { allCates } from '@/components/AdvancedWrap/utils';
@@ -11,6 +11,7 @@ import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
 
 import Rename from '../Rename';
 import { deleteDataSourceById, getDataSourceList, updateDataSourceStatus, getServerClusters } from '../../services';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 // @ts-ignore
 import { autoDatasourcetype, AuthList, AutoDatasourcetypeValue } from 'plus:/components/DataSourceAuth/auth';
 // @ts-ignore
@@ -191,61 +192,64 @@ const TableSource = (props: IPropsType) => {
 
     {
       title: t('common:table.operations'),
-      width: 100,
+      width: 64,
       render: (record) => {
         return (
-          <Space>
-            <Popconfirm
-              placement='topLeft'
-              title={record.status === 'enabled' ? t('confirm.disable') : t('confirm.enable')}
-              onConfirm={() => {
-                updateDataSourceStatus({
-                  id: record.id,
-                  status: record.status === 'enabled' ? 'disabled' : 'enabled',
-                }).then(() => {
-                  message.success(record.status === 'enabled' ? t('success.disable') : t('success.enable'));
-                  setRefresh((oldVal) => !oldVal);
-                });
-              }}
-            >
-              <a>{record.status === 'enabled' ? t('disable') : t('enable')}</a>
-            </Popconfirm>
-
-            {record.status === 'disabled' && (
-              <Button
-                type='link'
-                size='small'
-                danger
-                onClick={() => {
-                  Modal.confirm({
-                    title: t('common:confirm.delete'),
-                    onOk() {
-                      deleteDataSourceById(record.id).then(() => {
-                        message.success(t('common:success.delete'));
+          <Dropdown
+            overlayClassName='fc-table-action-dropdown'
+            overlay={
+              <Menu>
+                <Menu.Item>
+                  <Popconfirm
+                    placement='topLeft'
+                    title={record.status === 'enabled' ? t('confirm.disable') : t('confirm.enable')}
+                    onConfirm={() => {
+                      updateDataSourceStatus({
+                        id: record.id,
+                        status: record.status === 'enabled' ? 'disabled' : 'enabled',
+                      }).then(() => {
+                        message.success(record.status === 'enabled' ? t('success.disable') : t('success.enable'));
                         setRefresh((oldVal) => !oldVal);
                       });
-                    },
-                  });
-                }}
-              >
-                {t('common:btn.delete')}
-              </Button>
-            )}
-
-            {record.plugin_type === 'cloudwatch' && (
-              <Dropdown
-                overlay={
-                  <Menu>
+                    }}
+                  >
+                    <TableActionButton actionIcon='settings'>{record.status === 'enabled' ? t('disable') : t('enable')}</TableActionButton>
+                  </Popconfirm>
+                </Menu.Item>
+                {record.plugin_type === 'cloudwatch' && (
+                  <Menu.Item>
+                    <LabelMappingCloudwatchButton ds_id={record.id} ds_cate='cloudwatch' />
+                  </Menu.Item>
+                )}
+                {record.status === 'disabled' && (
+                  <>
+                    <Menu.Divider />
                     <Menu.Item>
-                      <LabelMappingCloudwatchButton ds_id={record.id} ds_cate='cloudwatch' />
+                      <TableActionButton
+                        danger
+                        actionIcon='delete'
+                        onClick={() => {
+                          Modal.confirm({
+                            title: t('common:confirm.delete'),
+                            onOk() {
+                              deleteDataSourceById(record.id).then(() => {
+                                message.success(t('common:success.delete'));
+                                setRefresh((oldVal) => !oldVal);
+                              });
+                            },
+                          });
+                        }}
+                      >
+                        {t('common:btn.delete')}
+                      </TableActionButton>
                     </Menu.Item>
-                  </Menu>
-                }
-              >
-                <Button type='link' icon={<MoreOutlined />} />
-              </Dropdown>
-            )}
-          </Space>
+                  </>
+                )}
+              </Menu>
+            }
+          >
+            <TableActionTrigger />
+          </Dropdown>
         );
       },
     },
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index d70bff592..1a8373c6e 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -3,7 +3,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { Space, Table, Button, Modal, Tag, message, Switch, Dropdown, Menu } from 'antd';
 import { ColumnType } from 'antd/lib/table';
-import { MenuOutlined, MoreOutlined } from '@ant-design/icons';
+import { MenuOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@@ -12,6 +12,7 @@ import { arrayMoveImmutable } from 'array-move';
 import { getTeamInfoList } from '@/services/manage';
 import PageLayout from '@/components/pageLayout';
 import { eventBus, EVENT_KEYS } from '@/pages/embeddedProduct/eventBus';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 import { NS, DETAIL_PATH } from '../../constants';
 import { EmbeddedProductParams, EmbeddedProductResponse } from '../../types';
@@ -132,29 +133,29 @@ export default function Index() {
       {
         title: t('common:table.operations'),
         dataIndex: 'operator',
-        width: 80,
+        width: 64,
         render: (_val, record: EmbeddedProductResponse) => {
           return (
             <Dropdown
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   <Menu.Item>
-                    <Button
-                      type='link'
-                      className='p-0 h-auto'
+                    <TableActionButton
+                      actionIcon='edit'
                       onClick={() => {
                         setCurrentRecord(record);
                         setModalVisible(true);
                       }}
                     >
                       {t('common:btn.edit')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
+                  <Menu.Divider />
                   <Menu.Item>
-                    <Button
-                      type='link'
+                    <TableActionButton
+                      actionIcon='delete'
                       danger
-                      className='p-0 h-auto'
                       onClick={() => {
                         Modal.confirm({
                           title: t('common:confirm.delete'),
@@ -169,12 +170,12 @@ export default function Index() {
                       }}
                     >
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 </Menu>
               }
             >
-              <Button type='text' icon={<MoreOutlined />} />
+              <TableActionTrigger />
             </Dropdown>
           );
         },
diff --git a/src/pages/log/IndexPatterns/index.tsx b/src/pages/log/IndexPatterns/index.tsx
index cb3ad13e6..797bac249 100644
--- a/src/pages/log/IndexPatterns/index.tsx
+++ b/src/pages/log/IndexPatterns/index.tsx
@@ -27,9 +27,10 @@ import { getESIndexPatterns, deleteESIndexPattern, putESIndexPattern } from './s
 import FormModal from './FormModal';
 import { IndexPattern } from './types';
 import './locale';
-import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@ant-design/icons';
 import EditField from './EditField';
 import { useQuery } from '@/utils';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
 export default function Servers() {
   const { t } = useTranslation('es-index-patterns');
@@ -142,16 +143,16 @@ export default function Servers() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 80,
+                    width: 64,
                     render: (record) => {
                       return (
                         <Dropdown
+                          overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
                               <Menu.Item>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
+                                <TableActionButton
+                                  actionIcon='settings'
                                   onClick={() => {
                                     if (record) {
                                       EditField({
@@ -177,12 +178,11 @@ export default function Servers() {
                                   }}
                                 >
                                   {t('common:btn.config')}
-                                </Button>
+                                </TableActionButton>
                               </Menu.Item>
                               <Menu.Item>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
+                                <TableActionButton
+                                  actionIcon='edit'
                                   onClick={() => {
                                     FormModal({
                                       mode: 'edit',
@@ -196,13 +196,13 @@ export default function Servers() {
                                   }}
                                 >
                                   {t('common:btn.edit')}
-                                </Button>
+                                </TableActionButton>
                               </Menu.Item>
+                              <Menu.Divider />
                               <Menu.Item>
-                                <Button
-                                  type='link'
+                                <TableActionButton
+                                  actionIcon='delete'
                                   danger
-                                  className='p-0 h-auto'
                                   onClick={() => {
                                     Modal.confirm({
                                       title: t('common:confirm.delete'),
@@ -216,12 +216,12 @@ export default function Servers() {
                                   }}
                                 >
                                   {t('common:btn.delete')}
-                                </Button>
+                                </TableActionButton>
                               </Menu.Item>
                             </Menu>
                           }
                         >
-                          <Button type='text' icon={<MoreOutlined />} />
+                          <TableActionTrigger />
                         </Dropdown>
                       );
                     },
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index 348e292ac..118004ce4 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -6,13 +6,14 @@ import { ColumnType } from 'antd/lib/table';
 import moment from 'moment';
 import _ from 'lodash';
 import RefreshIcon from '@/components/RefreshIcon';
-import { DownOutlined, MoreOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import { getBusiGroupsRecordingRules, updateRecordingRules } from '@/services/recording';
 import SearchInput from '@/components/BaseSearchInput';
 import { strategyItem, strategyStatus } from '@/store/warningInterface';
 import { deleteRecordingRule } from '@/services/recording';
 import { CommonStateContext } from '@/App';
 import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import EditModal from './components/editModal';
 import Import from './components/Import';
 import Export from './components/Export';
@@ -206,28 +207,28 @@ const PageTable: React.FC<Props> = ({ gids }) => {
       {
         title: t('common:table.operations'),
         dataIndex: 'operator',
-        width: 80,
+        width: 64,
         render: (data, record) => {
           return (
             <Dropdown
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   <Menu.Item>
-                    <Button
-                      type='link'
-                      className='p-0 h-auto'
+                    <TableActionButton
+                      actionIcon='copy'
                       onClick={() => {
                         handleClickEdit(record.id, true);
                       }}
                     >
                       {t('common:btn.clone')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
+                  <Menu.Divider />
                   <Menu.Item>
-                    <Button
-                      type='link'
+                    <TableActionButton
+                      actionIcon='delete'
                       danger
-                      className='p-0 h-auto'
                       onClick={() => {
                         confirm({
                           title: t('common:confirm.delete'),
@@ -243,12 +244,12 @@ const PageTable: React.FC<Props> = ({ gids }) => {
                       }}
                     >
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 </Menu>
               }
             >
-              <Button type='text' icon={<MoreOutlined />} />
+              <TableActionTrigger />
             </Dropdown>
           );
         },
diff --git a/src/pages/variableConfigs/index.tsx b/src/pages/variableConfigs/index.tsx
index a9d5ae667..d8dd638f2 100644
--- a/src/pages/variableConfigs/index.tsx
+++ b/src/pages/variableConfigs/index.tsx
@@ -18,11 +18,12 @@ import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { Button, Input, Table, Space, message, Modal, Dropdown, Menu } from 'antd';
-import { SettingOutlined, MoreOutlined } from '@ant-design/icons';
+import { SettingOutlined } from '@ant-design/icons';
 import PageLayout from '@/components/pageLayout';
 import DocumentDrawer from '@/components/DocumentDrawer';
 import { getVariableConfigs, VariableConfig, postVariableConfigs, deleteVariableConfigs, putVariableConfigs, getRSAConfig, RASConfig } from './services';
 import FormModal from './FormModal';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import './locale';
 
 export default function index() {
@@ -110,16 +111,16 @@ export default function index() {
             },
             {
               title: t('common:table.operations'),
-              width: 80,
+              width: 64,
               render: (record) => {
                 return (
                   <Dropdown
+                    overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
                         <Menu.Item>
-                          <Button
-                            type='link'
-                            className='p-0 h-auto'
+                          <TableActionButton
+                            actionIcon='copy'
                             onClick={() => {
                               FormModal({
                                 title: t('common:btn.clone'),
@@ -135,12 +136,11 @@ export default function index() {
                             }}
                           >
                             {t('common:btn.clone')}
-                          </Button>
+                          </TableActionButton>
                         </Menu.Item>
                         <Menu.Item>
-                          <Button
-                            type='link'
-                            className='p-0 h-auto'
+                          <TableActionButton
+                            actionIcon='edit'
                             onClick={() => {
                               FormModal({
                                 title: t('common:btn.edit'),
@@ -156,13 +156,13 @@ export default function index() {
                             }}
                           >
                             {t('common:btn.edit')}
-                          </Button>
+                          </TableActionButton>
                         </Menu.Item>
+                        <Menu.Divider />
                         <Menu.Item>
-                          <Button
-                            type='link'
+                          <TableActionButton
+                            actionIcon='delete'
                             danger
-                            className='p-0 h-auto'
                             onClick={() => {
                               Modal.confirm({
                                 title: t('common:confirm.delete'),
@@ -176,12 +176,12 @@ export default function index() {
                             }}
                           >
                             {t('common:btn.delete')}
-                          </Button>
+                          </TableActionButton>
                         </Menu.Item>
                       </Menu>
                     }
                   >
-                    <Button type='text' icon={<MoreOutlined />} />
+                    <TableActionTrigger />
                   </Dropdown>
                 );
               },

From d39465fe4797c2fbc7cf126110e09669b1873414 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 15:31:54 +0800
Subject: [PATCH 19/44] fix(table): align task and user actions

---
 src/pages/task/index.tsx    | 16 +++++++++++-----
 src/pages/taskTpl/index.tsx | 28 ++++++++++++++++++----------
 src/pages/user/business.tsx | 15 ++++++++-------
 src/pages/user/groups.tsx   | 15 ++++++++-------
 src/pages/user/users.tsx    | 21 ++++++++++++---------
 5 files changed, 57 insertions(+), 38 deletions(-)

diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index ddb44454c..5535f8d31 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -17,12 +17,13 @@
 import React, { useContext, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { Table, Checkbox, Row, Col, Input, Select, Button, Space, Dropdown, Menu } from 'antd';
-import { SearchOutlined, CodeOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined, CodeOutlined } from '@ant-design/icons';
 import { ColumnProps } from 'antd/lib/table';
 import _ from 'lodash';
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
 import { useAntdTable } from 'ahooks';
+import { TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 import request from '@/utils/request';
 import { RequestMethod } from '@/store/common';
@@ -98,22 +99,27 @@ const index = (_props: any) => {
     [
       {
         title: t('table.operations'),
-        width: 80,
+        width: 64,
         render: (_text, record) => {
           return (
             <Dropdown
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   <Menu.Item>
-                    <Link to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>{t('task.clone')}</Link>
+                    <TableActionLink actionIcon='copy' to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>
+                      {t('task.clone')}
+                    </TableActionLink>
                   </Menu.Item>
                   <Menu.Item>
-                    <Link to={{ pathname: `/job-tasks/${record.id}/detail` }}>{t('task.meta')}</Link>
+                    <TableActionLink actionIcon='view' to={{ pathname: `/job-tasks/${record.id}/detail` }}>
+                      {t('task.meta')}
+                    </TableActionLink>
                   </Menu.Item>
                 </Menu>
               }
             >
-              <Button type='text' icon={<MoreOutlined />} />
+              <TableActionTrigger />
             </Dropdown>
           );
         },
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index b6124d2cf..cd7169921 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -17,12 +17,13 @@
 import React, { useState, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { Table, Modal, Tag, Row, Col, Input, Button, Dropdown, Menu, message, Space } from 'antd';
-import { DownOutlined, SearchOutlined, CodeOutlined, MoreOutlined } from '@ant-design/icons';
+import { DownOutlined, SearchOutlined, CodeOutlined } from '@ant-design/icons';
 import { ColumnProps } from 'antd/lib/table';
 import _ from 'lodash';
 import moment from 'moment';
 import { useAntdTable } from 'ahooks';
 import { useTranslation } from 'react-i18next';
+import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 
 import request from '@/utils/request';
 import { RequestMethod } from '@/store/common';
@@ -153,26 +154,33 @@ const index = (_props: any) => {
       },
       {
         title: t('table.operations'),
-        width: 80,
+        width: 64,
         render: (_text, record) => {
           return (
             <Dropdown
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   <Menu.Item>
-                    <Link to={{ pathname: `/job-tpls/add/task`, search: `tpl=${record.id}` }}>{t('task.create')}</Link>
+                    <TableActionLink actionIcon='run' to={{ pathname: `/job-tpls/add/task`, search: `tpl=${record.id}` }}>
+                      {t('task.create')}
+                    </TableActionLink>
                   </Menu.Item>
                   <Menu.Item>
-                    <Link to={{ pathname: `/job-tpls/${record.id}/modify` }}>{t('common:btn.edit')}</Link>
+                    <TableActionLink actionIcon='edit' to={{ pathname: `/job-tpls/${record.id}/modify` }}>
+                      {t('common:btn.edit')}
+                    </TableActionLink>
                   </Menu.Item>
                   <Menu.Item>
-                    <Link to={{ pathname: `/job-tpls/${record.id}/clone` }}>{t('common:btn.clone')}</Link>
+                    <TableActionLink actionIcon='copy' to={{ pathname: `/job-tpls/${record.id}/clone` }}>
+                      {t('common:btn.clone')}
+                    </TableActionLink>
                   </Menu.Item>
+                  <Menu.Divider />
                   <Menu.Item>
-                    <Button
-                      type='link'
+                    <TableActionButton
+                      actionIcon='delete'
                       danger
-                      className='p-0 h-auto'
                       onClick={() => {
                         Modal.confirm({
                           title: t('common:confirm.delete'),
@@ -188,12 +196,12 @@ const index = (_props: any) => {
                       }}
                     >
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 </Menu>
               }
             >
-              <Button type='text' icon={<MoreOutlined />} />
+              <TableActionTrigger />
             </Dropdown>
           );
         },
diff --git a/src/pages/user/business.tsx b/src/pages/user/business.tsx
index 72a20ad8c..ffcc0fedb 100644
--- a/src/pages/user/business.tsx
+++ b/src/pages/user/business.tsx
@@ -20,12 +20,13 @@ import _ from 'lodash';
 import classNames from 'classnames';
 import PageLayout, { HelpLink } from '@/components/pageLayout';
 import { Button, Table, Input, message, Row, Col, Modal, Space, Dropdown, Menu } from 'antd';
-import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined, MoreOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import UserInfoModal from './component/createModal';
 import { deleteBusinessTeamMember, getBusinessTeamList, getBusinessTeamInfo, deleteBusinessTeam } from '@/services/manage';
 import { Team, ActionType } from '@/store/manageInterface';
 import { CommonStateContext } from '@/App';
 import { ColumnsType } from 'antd/lib/table';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@/utils';
 import { listToTree, getCollapsedKeys, getLocaleExpandedKeys, setLocaleExpandedKeys, getDefaultBusiness } from '@/components/BusinessGroup';
@@ -69,15 +70,15 @@ const Resource: React.FC = () => {
     },
     {
       title: t('common:table.operations'),
-      width: 80,
+      width: 64,
       render: (text: string, record) => (
         <Dropdown
+          overlayClassName='fc-table-action-dropdown'
           overlay={
             <Menu>
               <Menu.Item>
-                <Button
-                  type='link'
-                  className='p-0 h-auto'
+                <TableActionButton
+                  actionIcon='delete'
                   danger={memberList.length > 1}
                   disabled={memberList.length <= 1}
                   onClick={() => {
@@ -102,12 +103,12 @@ const Resource: React.FC = () => {
                   }}
                 >
                   {t('common:btn.delete')}
-                </Button>
+                </TableActionButton>
               </Menu.Item>
             </Menu>
           }
         >
-          <Button type='text' icon={<MoreOutlined />} />
+          <TableActionTrigger />
         </Dropdown>
       ),
     },
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index 688cb504b..9b948b24f 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -21,11 +21,12 @@ import { useLocation } from 'react-router-dom';
 import queryString from 'query-string';
 import PageLayout, { HelpLink } from '@/components/pageLayout';
 import { Button, Table, Input, message, List, Row, Col, Modal, Space, Tag, Dropdown, Menu } from 'antd';
-import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined, PlusSquareOutlined, MoreOutlined } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, SearchOutlined, UserOutlined, InfoCircleOutlined, PlusSquareOutlined } from '@ant-design/icons';
 import UserInfoModal from './component/createModal';
 import { getTeamInfoList, getTeamInfo, deleteTeam, deleteMember } from '@/services/manage';
 import { User, Team, UserType, ActionType, TeamInfo } from '@/store/manageInterface';
 import { ColumnsType } from 'antd/lib/table';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { useTranslation } from 'react-i18next';
 import { listToTree } from '@/components/BusinessGroup';
 import { CommonStateContext } from '@/App';
@@ -113,15 +114,15 @@ const Resource: React.FC = () => {
     ...userColumn,
     {
       title: t('common:table.operations'),
-      width: 80,
+      width: 64,
       render: (text: string, record) => (
         <Dropdown
+          overlayClassName='fc-table-action-dropdown'
           overlay={
             <Menu>
               <Menu.Item>
-                <Button
-                  type='link'
-                  className='p-0 h-auto'
+                <TableActionButton
+                  actionIcon='delete'
                   danger
                   onClick={() => {
                     let params = {
@@ -140,12 +141,12 @@ const Resource: React.FC = () => {
                   }}
                 >
                   {t('common:btn.delete')}
-                </Button>
+                </TableActionButton>
               </Menu.Item>
             </Menu>
           }
         >
-          <Button type='text' icon={<MoreOutlined />} />
+          <TableActionTrigger />
         </Dropdown>
       ),
     },
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 222e60270..e266aab75 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -18,11 +18,12 @@ import React, { useState, useContext } from 'react';
 import moment from 'moment';
 import _ from 'lodash';
 import { Button, Input, message, Row, Modal, Table, Space, Dropdown, Menu } from 'antd';
-import { SearchOutlined, UserOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons';
+import { SearchOutlined, UserOutlined, EyeOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
 import { useTranslation } from 'react-i18next';
 import { useAntdTable } from 'ahooks';
 import PageLayout, { HelpLink } from '@/components/pageLayout';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import UserInfoModal from './component/createModal';
 import { getUserInfoList, deleteUser } from '@/services/manage';
 import { User, UserType, ActionType } from '@/store/manageInterface';
@@ -127,26 +128,28 @@ const Resource: React.FC = () => {
     },
     {
       title: t('common:table.operations'),
-      width: i18n.language === 'en_US' || i18n.language === 'ru_RU' ? 80 : 40,
+      width: 64,
       render: (text: string, record) => {
         return (
           <Dropdown
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 {_.includes(perms, '/users/put') && (
                   <Menu.Item onClick={() => handleClick(ActionType.EditUser, record.id)}>
-                    <Button className='p-0 h-auto' type='link'>
+                    <TableActionButton actionIcon='edit'>
                       {t('common:btn.edit')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
                 {_.includes(perms, '/users/put') && (
                   <Menu.Item onClick={() => handleClick(ActionType.Reset, record.id)}>
-                    <Button className='p-0 h-auto' type='link'>
+                    <TableActionButton actionIcon='settings'>
                       {t('account:password.reset')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
+                {_.includes(perms, '/users/del') && <Menu.Divider />}
                 {_.includes(perms, '/users/del') && (
                   <Menu.Item
                     onClick={() => {
@@ -162,15 +165,15 @@ const Resource: React.FC = () => {
                       });
                     }}
                   >
-                    <Button danger type='link' className='p-0 h-auto'>
+                    <TableActionButton actionIcon='delete' danger>
                       {t('common:btn.delete')}
-                    </Button>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },

From e5b4a5bee6cb9e76a4a1da50e0c112b219c18209 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 13 May 2026 17:32:30 +0800
Subject: [PATCH 20/44] fix(table): forward action dropdown trigger events

---
 src/components/TableActionDropdown/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TableActionDropdown/index.tsx b/src/components/TableActionDropdown/index.tsx
index 2e371d180..a0c269dcc 100644
--- a/src/components/TableActionDropdown/index.tsx
+++ b/src/components/TableActionDropdown/index.tsx
@@ -72,6 +72,6 @@ export function TableActionLink({ actionIcon, className, children, ...rest }: Ta
   );
 }
 
-export function TableActionTrigger() {
-  return <Button type='text' icon={<MoreVertical size={16} />} />;
-}
+export const TableActionTrigger = React.forwardRef<HTMLElement, ButtonProps>(function TableActionTrigger({ type = 'text', icon, ...rest }, ref) {
+  return <Button ref={ref as any} type={type} icon={icon || <MoreVertical size={16} />} {...rest} />;
+});

From 439d4f1a5218f5792d663628d2cb09253e482400 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Fri, 15 May 2026 16:25:21 +0800
Subject: [PATCH 21/44] refactor(table): compact primary list metadata columns

---
 src/pages/alertRules/List/ListNG.tsx | 11 ++--
 src/pages/targets/List.tsx           | 90 ++++++++++------------------
 src/pages/user/constants.ts          | 15 -----
 src/pages/warning/shield/index.tsx   | 11 ++--
 4 files changed, 47 insertions(+), 80 deletions(-)

diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 818cbab1f..fba97d4a9 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -11,7 +11,7 @@ import moment from 'moment';
 import { CommonStateContext } from '@/App';
 import { priorityColor } from '@/utils/constant';
 import { updateAlertRules, deleteStrategy } from '@/services/warning';
-import { allCates } from '@/components/AdvancedWrap/utils';
+import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
 import RefreshIcon from '@/components/RefreshIcon';
 import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
 import DatasourceSelect from '@/components/DatasourceSelect/DatasourceSelect';
@@ -55,7 +55,7 @@ interface Props {
 }
 
 export default function AlertRules(props: Props) {
-  const { t } = useTranslation('alertRules');
+  const { t, i18n } = useTranslation('alertRules');
   const { busiGroups, datasourceList } = useContext(CommonStateContext);
   const { hideBusinessGroupColumn, showRowSelection, readonly, headerExtra, data, loading, setRefreshFlag, linkTarget } = props;
   let defaultFilter = {} as Filter;
@@ -126,7 +126,9 @@ export default function AlertRules(props: Props) {
           return localeCompare(a.name, b.name);
         },
         render: (data, record) => {
-          let logoSrc = _.find(allCates, { value: record.cate })?.logo;
+          const cate = _.find(allCates, { value: record.cate });
+          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
+          let logoSrc = cate?.logo;
           if (record.cate === 'host') {
             logoSrc = '/image/logos/host.png';
           }
@@ -142,8 +144,9 @@ export default function AlertRules(props: Props) {
               >
                 {data}
               </Link>
-              <span className='text-soft text-xs inline-flex items-center gap-2'>
+              <span className='text-soft text-xs inline-flex items-center gap-2 flex-wrap'>
                 {logoSrc && <img alt={record.cate} src={logoSrc} height={14} />}
+                {cateLabel && <span>{cateLabel}</span>}
                 {groupName && <span>{groupName}</span>}
                 {_.map(record.severities, (severity) => (
                   <Tag key={severity} color={priorityColor[severity - 1]} style={{ marginRight: 0 }}>
diff --git a/src/pages/targets/List.tsx b/src/pages/targets/List.tsx
index 19c6745ed..a75af19e7 100644
--- a/src/pages/targets/List.tsx
+++ b/src/pages/targets/List.tsx
@@ -46,8 +46,9 @@ export interface ITargetProps {
   id: number;
   cluster: string;
   group_id: number;
-  group_objs: object[] | null;
+  group_objs: { name: string }[] | null;
   ident: string;
+  host_ip?: string;
   note: string;
   tags: string[];
   beat_time: number;
@@ -96,7 +97,7 @@ export default function List(props: IProps) {
     {
       title: (
         <Space>
-          {t('common:table.ident')}
+          {t('host_ip')}
           <Dropdown
             trigger={['click']}
             overlay={
@@ -148,28 +149,36 @@ export default function List(props: IProps) {
       ),
       dataIndex: 'ident',
       className: 'n9e-hosts-table-column-ident',
-      render: (text) => {
+      render: (text, record: ITargetProps) => {
+        const groupNames = _.map(record.group_objs, 'name');
         return (
-          <div
-            style={{
-              width: '100%',
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              gap: 8,
-            }}
-          >
-            <TargetMetaDrawer ident={text} />
-            {import.meta.env['VITE_IS_PRO'] && (
-              <Tooltip title='查看关联采集配置'>
-                <ApartmentOutlined
-                  onClick={() => {
-                    setCollectsDrawerVisible(true);
-                    setCollectsDrawerIdent(text);
-                  }}
-                />
-              </Tooltip>
-            )}
+          <div className='flex flex-col gap-0.5'>
+            <div
+              style={{
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                gap: 8,
+              }}
+            >
+              <TargetMetaDrawer ident={text} targetNode={record.host_ip || text} />
+              {import.meta.env['VITE_IS_PRO'] && (
+                <Tooltip title='查看关联采集配置'>
+                  <ApartmentOutlined
+                    onClick={() => {
+                      setCollectsDrawerVisible(true);
+                      setCollectsDrawerIdent(text);
+                    }}
+                  />
+                </Tooltip>
+              )}
+            </div>
+            <span className='text-soft text-xs inline-flex items-center gap-2 flex-wrap'>
+              {record.host_ip && record.host_ip !== text && <span>{text}</span>}
+              {!_.isEmpty(groupNames) ? <span>{groupNames.join(' / ')}</span> : <span>{t('common:not_grouped')}</span>}
+              {record.note && <span>{record.note}</span>}
+            </span>
           </div>
         );
       },
@@ -178,13 +187,7 @@ export default function List(props: IProps) {
 
   _.forEach(columnsConfigs, (item) => {
     if (!item.visible) return;
-    if (item.name === 'host_ip') {
-      columns.push({
-        title: t('host_ip'),
-        dataIndex: 'host_ip',
-        className: 'n9e-hosts-table-column-ip',
-      });
-    }
+    if (item.name === 'host_ip' || item.name === 'group_obj') return;
     if (item.name === 'host_tags') {
       columns.push({
         title: (
@@ -273,33 +276,6 @@ export default function List(props: IProps) {
         },
       });
     }
-    if (item.name === 'group_obj') {
-      columns.push({
-        title: t('group_obj'),
-        dataIndex: 'group_objs',
-        className: 'n9e-hosts-table-column-tags',
-        ellipsis: {
-          showTitle: false,
-        },
-        render(tagArr) {
-          if (_.isEmpty(tagArr)) return t('common:not_grouped');
-          const content =
-            tagArr &&
-            tagArr.map((item) => (
-              <Tag color='purple' key={item.name}>
-                {item.name}
-              </Tag>
-            ));
-          return (
-            tagArr && (
-              <Tooltip title={content} placement='topLeft' getPopupContainer={() => document.body}>
-                {content}
-              </Tooltip>
-            )
-          );
-        },
-      });
-    }
     if (item.name === 'mem_util') {
       columns.push({
         title: t('mem_util'),
diff --git a/src/pages/user/constants.ts b/src/pages/user/constants.ts
index a5ecc63a7..1426f0667 100644
--- a/src/pages/user/constants.ts
+++ b/src/pages/user/constants.ts
@@ -24,21 +24,6 @@ export const defaultColumnsConfigs = [
     i18nKey: 'account:profile.username',
     visible: true,
   },
-  {
-    name: 'nickname',
-    i18nKey: 'account:profile.nickname',
-    visible: true,
-  },
-  {
-    name: 'email',
-    i18nKey: 'account:profile.email',
-    visible: false,
-  },
-  {
-    name: 'phone',
-    i18nKey: 'account:profile.phone',
-    visible: false,
-  },
   {
     name: 'roles',
     i18nKey: 'account:profile.role',
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 4ab58ffd7..5fc59077d 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -33,7 +33,7 @@ import RefreshIcon from '@/components/RefreshIcon';
 import { DatasourceSelect } from '@/components/DatasourceSelect';
 import { CommonStateContext } from '@/App';
 import usePagination from '@/components/usePagination';
-import { allCates } from '@/components/AdvancedWrap/utils';
+import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
 import DeleteMutesModal from './components/DeleteMutesModal';
 
 import './locale';
@@ -53,7 +53,7 @@ interface Filter {
 const FILTER_SESSION_STORAGE_KEY = 'alert-mutes-filter';
 
 const Shield: React.FC = () => {
-  const { t } = useTranslation('alertMutes');
+  const { t, i18n } = useTranslation('alertMutes');
   const history = useHistory();
   const { datasourceList, groupedDatasourceList, businessGroup, busiGroups } = useContext(CommonStateContext);
   const [gids, setGids] = useState<string | undefined>(getDefaultGids(N9E_GIDS_LOCALKEY, businessGroup));
@@ -81,7 +81,9 @@ const Shield: React.FC = () => {
         dataIndex: 'note',
         render: (data, record: any) => {
           const groupName = _.find(busiGroups, { id: record.group_id })?.name;
-          let logoSrc = _.find(allCates, { value: record.cate })?.logo;
+          const cate = _.find(allCates, { value: record.cate });
+          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
+          let logoSrc = cate?.logo;
           if (record.cate === 'host') {
             logoSrc = '/image/logos/host.png';
           }
@@ -95,8 +97,9 @@ const Shield: React.FC = () => {
               >
                 {data}
               </Link>
-              <span className='text-soft text-xs inline-flex items-center gap-1'>
+              <span className='text-soft text-xs inline-flex items-center gap-2 flex-wrap'>
                 {logoSrc && <img alt={record.cate} src={logoSrc} height={14} />}
+                {cateLabel && <span>{cateLabel}</span>}
                 {showBusinessGroup && groupName && <span>{groupName}</span>}
               </span>
             </div>

From d29310ea58b89e0d23566fbcbb433a20f90ba1cc Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Sun, 17 May 2026 22:54:08 +0800
Subject: [PATCH 22/44] feat(table): refine users list primary column

---
 src/pages/user/users.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index e266aab75..76c45c7b4 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -53,14 +53,14 @@ const Resource: React.FC = () => {
     {
       title: t('account:profile.username'),
       dataIndex: 'username',
+      width: 260,
       ellipsis: true,
       sorter: true,
       render: (text: string, record) => {
-        const secondary = _.compact([record.nickname, record.email, record.phone]);
         return (
           <div className='flex flex-col gap-0.5'>
-            <span>{text}</span>
-            {secondary.length > 0 && <span className='text-soft text-xs'>{secondary.join(' · ')}</span>}
+            <span>{record.nickname || text}</span>
+            <span className='text-soft text-xs'>{text}</span>
           </div>
         );
       },

From 920cd99dff0da741f03cdbf134f23c1b4557c3b5 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 08:27:34 +0800
Subject: [PATCH 23/44] feat(table): refine sorter interaction

---
 src/App.less | 46 +++++++++++++++++++++++++++++++++++-----------
 src/main.tsx |  4 ++++
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/App.less b/src/App.less
index 11813ab0b..58a7c369f 100644
--- a/src/App.less
+++ b/src/App.less
@@ -381,23 +381,47 @@ input::placeholder {
   }
 }
 
-// antd表格排序icon特殊处理
-.ant-table-column-has-sorters .ant-table-column-sorter-inner {
+// 2026-05 table 设计规范：排序 icon 替换为线性箭头，hover 横向并排 ↑↓，已排序只显示当前方向
+.ant-table-column-sorter {
+  .ant-table-column-sorter-inner {
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+  }
+
   .ant-table-column-sorter-up,
   .ant-table-column-sorter-down {
-    transition: all 0.2s;
+    width: 12px;
+    height: 12px;
+    background-color: currentColor;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+
+    svg {
+      display: none;
+    }
   }
 
-  &:has(.ant-table-column-sorter-up.active) {
-    .ant-table-column-sorter-down {
-      opacity: 0;
-    }
+  .ant-table-column-sorter-up {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z'/%3E%3C/svg%3E");
   }
 
-  &:has(.ant-table-column-sorter-down.active) {
-    .ant-table-column-sorter-up {
-      opacity: 0;
-    }
+  .ant-table-column-sorter-down {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z'/%3E%3C/svg%3E");
+  }
+}
+
+// 已排序时，非活跃方向的箭头隐藏不占空间
+.ant-table-column-has-sorters .ant-table-column-sorter-inner {
+  &:has(.ant-table-column-sorter-up.active) .ant-table-column-sorter-down,
+  &:has(.ant-table-column-sorter-down.active) .ant-table-column-sorter-up {
+    display: none;
   }
 }
 
diff --git a/src/main.tsx b/src/main.tsx
index e58aff816..4f871bd73 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -16,6 +16,7 @@
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Table } from 'antd';
 import { i18nInit } from './i18n'; // loaded and initialized first
 import App from './App';
 import { I18nextProvider } from 'react-i18next';
@@ -24,6 +25,9 @@ import { initTheme } from './utils/darkMode';
 // 在页面渲染前初始化主题，避免样式闪烁
 initTheme();
 
+// 2026-05 table 设计规范：点击循环改为 降序 → 升序 → 取消
+Table.defaultProps = { ...Table.defaultProps, sortDirections: ['descend', 'ascend'] };
+
 ReactDOM.render(
   <I18nextProvider i18n={i18nInit}>
     <App />

From 19343138cbdad7e2e433bcbbb1732a2a7da3735e Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 08:27:43 +0800
Subject: [PATCH 24/44] feat(table): unify route table tags

---
 src/components/TableTags/index.tsx            | 126 +++++++++++
 src/components/TableTags/style.less           |  50 +++++
 src/components/Tags/index.tsx                 |  76 -------
 src/pages/alertRules/List/ListNG.tsx          |  82 ++-----
 .../builtInComponents/AlertRules/index.tsx    |  35 +--
 .../builtInComponents/Dashboards/index.tsx    |  35 +--
 src/pages/dashboard/List/index.tsx            |  45 ++--
 .../embeddedProduct/pages/List/index.tsx      |   6 +-
 src/pages/eventPipeline/pages/List/index.tsx  |   5 +-
 src/pages/hosts/pages/List/List.tsx           |  16 +-
 src/pages/hosts/pages/List/Tags.tsx           | 211 ------------------
 src/pages/metricsBuiltin/List.tsx             |   7 +-
 src/pages/recordingRules/PageTable.tsx        |  12 +-
 src/pages/targets/List.tsx                    |  37 ++-
 src/pages/taskTpl/index.tsx                   |   7 +-
 src/pages/user/component/Tags/index.tsx       |  49 ----
 src/pages/user/groups.tsx                     |   5 +-
 src/pages/user/users.tsx                      |  39 ++--
 src/pages/warning/shield/index.tsx            |   6 +-
 src/pages/warning/subscribe/ListNG.tsx        |  39 ++--
 20 files changed, 306 insertions(+), 582 deletions(-)
 create mode 100644 src/components/TableTags/index.tsx
 create mode 100644 src/components/TableTags/style.less
 delete mode 100644 src/components/Tags/index.tsx
 delete mode 100644 src/pages/hosts/pages/List/Tags.tsx
 delete mode 100644 src/pages/user/component/Tags/index.tsx

diff --git a/src/components/TableTags/index.tsx b/src/components/TableTags/index.tsx
new file mode 100644
index 000000000..e18d733e8
--- /dev/null
+++ b/src/components/TableTags/index.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import { Popover, Tooltip } from 'antd';
+import { Link } from 'react-router-dom';
+import type { LinkProps } from 'react-router-dom';
+import _ from 'lodash';
+
+import './style.less';
+
+export interface TableTagItem {
+  key?: React.Key;
+  label: React.ReactNode;
+  tooltip?: React.ReactNode;
+  to?: LinkProps['to'];
+  onClick?: () => void;
+}
+
+interface Props<T = any> {
+  data?: T[];
+  maxVisible?: number;
+  maxTagWidth?: number | string;
+  emptyText?: React.ReactNode;
+  getKey?: (item: T, index: number) => React.Key;
+  getLabel?: (item: T, index: number) => React.ReactNode;
+  getTooltip?: (item: T, index: number) => React.ReactNode;
+  getLinkTo?: (item: T, index: number) => LinkProps['to'] | undefined;
+  linkTarget?: string;
+  onTagClick?: (item: T, index: number) => void;
+}
+
+function getDefaultLabel(item: any) {
+  if (_.isObject(item) && 'label' in item) {
+    return item.label;
+  }
+  return item;
+}
+
+function getDefaultKey(item: any, index: number): React.Key {
+  if (_.isObject(item) && 'key' in item && item.key !== undefined) {
+    return item.key as React.Key;
+  }
+  return `${getDefaultLabel(item)}-${index}`;
+}
+
+function isEmptyLabel(label: React.ReactNode) {
+  return label === undefined || label === null || label === '';
+}
+
+export default function TableTags<T = any>(props: Props<T>) {
+  const { data, maxVisible = 2, maxTagWidth = 160, emptyText = '-', getKey, getLabel, getTooltip, getLinkTo, linkTarget, onTagClick } = props;
+  const items = _.filter(data || [], (item, index) => !isEmptyLabel(getLabel ? getLabel(item, index) : getDefaultLabel(item)));
+
+  if (_.isEmpty(items)) {
+    return <>{emptyText}</>;
+  }
+
+  const getItemLabel = (item: T, index: number) => (getLabel ? getLabel(item, index) : getDefaultLabel(item));
+  const getItemTooltip = (item: T, index: number) => {
+    if (getTooltip) return getTooltip(item, index);
+    if (_.isObject(item) && 'tooltip' in (item as any)) return (item as any).tooltip;
+    return getItemLabel(item, index);
+  };
+  const getItemLinkTo = (item: T, index: number) => {
+    if (getLinkTo) return getLinkTo(item, index);
+    if (_.isObject(item) && 'to' in (item as any)) return (item as any).to;
+    return undefined;
+  };
+
+  const renderTag = (item: T, index: number, inPopover = false) => {
+    const label = getItemLabel(item, index);
+    const tooltip = getItemTooltip(item, index);
+    const linkTo = getItemLinkTo(item, index);
+    const clickable = !!linkTo || !!onTagClick || (_.isObject(item) && 'onClick' in (item as any));
+    const style: React.CSSProperties = {
+      maxWidth: inPopover ? 320 : maxTagWidth,
+    };
+    const tag = (
+      <span
+        className={`fc-table-tag${clickable ? ' fc-table-tag-clickable' : ''}`}
+        style={style}
+        onClick={(e) => {
+          e.stopPropagation();
+          if (_.isObject(item) && 'onClick' in (item as any)) {
+            (item as any).onClick?.();
+          }
+          onTagClick?.(item, index);
+        }}
+      >
+        {label}
+      </span>
+    );
+
+    const content = linkTo ? (
+      <Link to={linkTo} target={linkTarget} onClick={(e) => e.stopPropagation()}>
+        {tag}
+      </Link>
+    ) : (
+      tag
+    );
+
+    return (
+      <Tooltip key={String(getKey ? getKey(item, index) : getDefaultKey(item, index))} title={tooltip}>
+        {content}
+      </Tooltip>
+    );
+  };
+
+  const visibleItems = items.slice(0, maxVisible);
+  const overflowItems = items.slice(maxVisible);
+
+  return (
+    <div className='fc-table-tags'>
+      {visibleItems.map((item, index) => renderTag(item, index))}
+      {overflowItems.length > 0 && (
+        <Popover
+          placement='topLeft'
+          overlayClassName='fc-table-tags-popover'
+          content={<div className='fc-table-tags-popover-content'>{items.map((item, index) => renderTag(item, index, true))}</div>}
+        >
+          <span className='fc-table-tag fc-table-tag-overflow' onClick={(e) => e.stopPropagation()}>
+            +{overflowItems.length}
+          </span>
+        </Popover>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/TableTags/style.less b/src/components/TableTags/style.less
new file mode 100644
index 000000000..34626a750
--- /dev/null
+++ b/src/components/TableTags/style.less
@@ -0,0 +1,50 @@
+.fc-table-tags {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.fc-table-tag {
+  display: inline-block;
+  height: 22px;
+  max-width: 160px;
+  padding: 0 8px;
+  overflow: hidden;
+  color: var(--fc-text-2);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  background: var(--fc-fill-2-5);
+  border: 1px solid var(--fc-border-color);
+  border-radius: 4px;
+  cursor: default;
+}
+
+.fc-table-tag-overflow {
+  color: var(--fc-text-3);
+  cursor: pointer;
+  background: var(--fc-fill-3);
+}
+
+.fc-table-tag-clickable {
+  cursor: pointer;
+}
+
+.fc-table-tag-clickable:hover,
+.fc-table-tag-overflow:hover {
+  color: var(--fc-text-1);
+  background: var(--fc-fill-3);
+  border-color: var(--fc-border-color-hover, var(--fc-border-color));
+}
+
+.fc-table-tags-popover-content {
+  display: flex;
+  max-width: 360px;
+  flex-wrap: wrap;
+  gap: 6px;
+}
diff --git a/src/components/Tags/index.tsx b/src/components/Tags/index.tsx
deleted file mode 100644
index 1e312f53f..000000000
--- a/src/components/Tags/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { Tag, Tooltip } from 'antd';
-import { getTextWidth } from '@/pages/dashboard/Renderer/Renderer/Hexbin/utils';
-
-interface Props {
-  width: number;
-  data: string[];
-}
-
-export default function index(props: Props) {
-  const { width, data } = props;
-  const displayData = _.slice(data, 0, 2);
-  return (
-    <Tooltip title={_.join(data, ', ')}>
-      <div>
-        {_.map(displayData, (item, index) => {
-          const textWidth = getTextWidth(item);
-          if (textWidth < width) {
-            return (
-              <div key={index}>
-                <Tag color='purple'>{item}</Tag>
-              </div>
-            );
-          }
-          return (
-            <div key={index}>
-              <Tag color='purple'>
-                <div
-                  style={{
-                    maxWidth: width,
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  <span
-                    style={{
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      verticalAlign: 'middle',
-                      display: 'inline-block',
-                      width: 'calc(50% + 1.2em)',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {item}
-                  </span>
-                  <span
-                    style={{
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      verticalAlign: 'middle',
-                      display: 'inline-flex',
-                      width: 'calc(50% - 1.2em)',
-                      justifyContent: ' flex-end',
-                    }}
-                  >
-                    {item}
-                  </span>
-                </div>
-              </Tag>
-            </div>
-          );
-        })}
-        {data.length > 2 && (
-          <div
-            style={{
-              lineHeight: 1,
-            }}
-          >
-            ...
-          </div>
-        )}
-      </div>
-    </Tooltip>
-  );
-}
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index fba97d4a9..9d04eea6f 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -17,7 +17,7 @@ import { TableActionButton, TableActionLink, TableActionTrigger } from '@/compon
 import DatasourceSelect from '@/components/DatasourceSelect/DatasourceSelect';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
-import Tags from '@/components/Tags';
+import TableTags from '@/components/TableTags';
 import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
 import { getItems as getNotificationRules, RuleItem as NotificationRuleItem } from '@/pages/notificationRules/services';
 import { NS as notificationRulesNS } from '@/pages/notificationRules/constants';
@@ -164,8 +164,8 @@ export default function AlertRules(props: Props) {
         render(value) {
           if (!value) return '';
           return (
-            <Tags
-              width={70}
+            <TableTags
+              maxTagWidth={120}
               data={_.compact(
                 _.map(value, (item) => {
                   if (item === 0) return '$all';
@@ -182,55 +182,14 @@ export default function AlertRules(props: Props) {
         title: t('table.append_tags'),
         dataIndex: 'append_tags',
         render(value) {
-          return (
-            <div className='flex flex-wrap gap-[4px] max-w-[400px]'>
-              {_.map(value, (item) => {
-                return (
-                  <Tooltip key={item} title={item}>
-                    <Tag color='purple' style={{ maxWidth: '100%', marginRight: 0 }}>
-                      <div
-                        style={{
-                          maxWidth: 'max-content',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                        }}
-                      >
-                        {item}
-                      </div>
-                    </Tag>
-                  </Tooltip>
-                );
-              })}
-            </div>
-          );
+          return <TableTags data={value} maxVisible={2} maxTagWidth={180} />;
         },
       },
       {
         title: t('table.notify_groups_obj'),
         dataIndex: 'notify_groups_obj',
         render: (data) => {
-          return (
-            <div className='flex flex-wrap gap-[4px] max-w-[400px]'>
-              {_.map(data, (user) => {
-                const val = user.nickname || user.username || user.name;
-                return (
-                  <Tooltip key={val} title={val}>
-                    <Tag style={{ maxWidth: '100%', marginRight: 0 }}>
-                      <div
-                        style={{
-                          maxWidth: 'max-content',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                        }}
-                      >
-                        {val}
-                      </div>
-                    </Tag>
-                  </Tooltip>
-                );
-              })}
-            </div>
-          );
+          return <TableTags data={_.map(data, (user) => user.nickname || user.username || user.name)} maxVisible={2} maxTagWidth={160} />;
         },
       },
       {
@@ -238,28 +197,15 @@ export default function AlertRules(props: Props) {
         dataIndex: 'notify_rule_ids',
         render: (data) => {
           return (
-            <div className='flex flex-wrap gap-[4px] max-w-[400px]'>
-              {_.map(data, (id) => {
-                const val = _.find(notificationRules, { id })?.name || id;
-                return (
-                  <Link to={`/${notificationRulesNS}/edit/${id}`} key={val} target='_blank'>
-                    <Tooltip title={val}>
-                      <Tag style={{ maxWidth: '100%', marginRight: 0 }}>
-                        <div
-                          style={{
-                            maxWidth: 'max-content',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                          }}
-                        >
-                          {val}
-                        </div>
-                      </Tag>
-                    </Tooltip>
-                  </Link>
-                );
-              })}
-            </div>
+            <TableTags
+              data={data}
+              maxVisible={2}
+              maxTagWidth={160}
+              getKey={(id) => id}
+              getLabel={(id) => _.find(notificationRules, { id })?.name || id}
+              getLinkTo={(id) => `/${notificationRulesNS}/edit/${id}`}
+              linkTarget='_blank'
+            />
           );
         },
       },
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index e91b22954..a78b77b8d 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -11,6 +11,7 @@ import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { CommonStateContext } from '@/App';
 import { HelpLink } from '@/components/pageLayout';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 import { RuleType } from './types';
 import Import from './Import';
 import { getPayloads, deletePayloads, getCates } from '../services';
@@ -206,29 +207,17 @@ export default function index(props: Props) {
             render: (val) => {
               const tags = _.compact(_.split(val, ' '));
               return (
-                <Space size={0}>
-                  {_.map(tags, (tag, idx) => {
-                    return (
-                      <Tag
-                        key={idx}
-                        color='purple'
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => {
-                          const queryItem = _.compact(_.split(filter.query, ' '));
-                          if (_.includes(queryItem, tag)) return;
-                          setFilter((filter) => {
-                            return {
-                              ...filter,
-                              query: filter.query ? filter.query + ' ' + tag : tag,
-                            };
-                          });
-                        }}
-                      >
-                        {tag}
-                      </Tag>
-                    );
-                  })}
-                </Space>
+                <TableTags
+                  data={tags}
+                  onTagClick={(tag) => {
+                    const queryItem = _.compact(_.split(filter.query, ' '));
+                    if (_.includes(queryItem, tag)) return;
+                    setFilter((filter) => ({
+                      ...filter,
+                      query: filter.query ? filter.query + ' ' + tag : tag,
+                    }));
+                  }}
+                />
               );
             },
           },
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index fc9136519..9587e808e 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -11,6 +11,7 @@ import Export from '@/pages/dashboard/List/Export';
 import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { HelpLink } from '@/components/pageLayout';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 import { getPayloads, deletePayloads } from '../services';
 import { TypeEnum, Payload } from '../types';
 import PayloadFormModal from '../components/PayloadFormModal';
@@ -161,29 +162,17 @@ export default function index(props: Props) {
             render: (val) => {
               const tags = _.compact(_.split(val, ' '));
               return (
-                <Space size={0}>
-                  {_.map(tags, (tag, idx) => {
-                    return (
-                      <Tag
-                        key={idx}
-                        color='purple'
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => {
-                          const queryItem = _.compact(_.split(filter.query, ' '));
-                          if (_.includes(queryItem, tag)) return;
-                          setFilter((filter) => {
-                            return {
-                              ...filter,
-                              query: filter.query ? filter.query + ' ' + tag : tag,
-                            };
-                          });
-                        }}
-                      >
-                        {tag}
-                      </Tag>
-                    );
-                  })}
-                </Space>
+                <TableTags
+                  data={tags}
+                  onTagClick={(tag) => {
+                    const queryItem = _.compact(_.split(filter.query, ' '));
+                    if (_.includes(queryItem, tag)) return;
+                    setFilter((filter) => ({
+                      ...filter,
+                      query: filter.query ? filter.query + ' ' + tag : tag,
+                    }));
+                  }}
+                />
               );
             },
           },
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index 394c6cf25..e4fc02ba5 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -34,6 +34,7 @@ import PageLayout from '@/components/pageLayout';
 import { CommonStateContext } from '@/App';
 import BusinessGroupSideBarWithAll, { getDefaultGidsInDashboard } from '@/components/BusinessGroup/BusinessGroupSideBarWithAll';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 import usePagination from '@/components/usePagination';
 import { getDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { getBusiGroups } from '@/components/BusinessGroup';
@@ -181,33 +182,23 @@ export default function index() {
                     dataIndex: 'tags',
                     className: 'tags-column',
                     render: (text: string) => (
-                      <>
-                        {_.map(_.split(text, ' '), (tag, index) => {
-                          return tag ? (
-                            <Tag
-                              color='purple'
-                              key={index}
-                              style={{
-                                cursor: 'pointer',
-                              }}
-                              onClick={() => {
-                                const queryItem = searchVal.length > 0 ? searchVal.split(' ') : [];
-                                if (queryItem.includes(tag)) return;
-                                setsearchVal((searchVal) => {
-                                  if (searchVal) {
-                                    sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, searchVal + ' ' + tag);
-                                    return searchVal + ' ' + tag;
-                                  }
-                                  sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, tag);
-                                  return tag;
-                                });
-                              }}
-                            >
-                              {tag}
-                            </Tag>
-                          ) : null;
-                        })}
-                      </>
+                      <TableTags
+                        data={_.compact(_.split(text, ' '))}
+                        maxVisible={2}
+                        maxTagWidth={160}
+                        onTagClick={(tag) => {
+                          const queryItem = searchVal.length > 0 ? searchVal.split(' ') : [];
+                          if (queryItem.includes(tag)) return;
+                          setsearchVal((searchVal) => {
+                            if (searchVal) {
+                              sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, searchVal + ' ' + tag);
+                              return searchVal + ' ' + tag;
+                            }
+                            sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, tag);
+                            return tag;
+                          });
+                        }}
+                      />
                     ),
                   },
                   {
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index 1a8373c6e..44ddf6acd 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -13,6 +13,7 @@ import { getTeamInfoList } from '@/services/manage';
 import PageLayout from '@/components/pageLayout';
 import { eventBus, EVENT_KEYS } from '@/pages/embeddedProduct/eventBus';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 
 import { NS, DETAIL_PATH } from '../../constants';
 import { EmbeddedProductParams, EmbeddedProductResponse } from '../../types';
@@ -71,10 +72,7 @@ export default function Index() {
         title: t('team_ids'),
         dataIndex: 'team_ids',
         render: (val) => {
-          return _.map(val, (item) => {
-            const name = _.find(userGroups, { id: item })?.name;
-            return <Tag key={item}>{name || item}</Tag>;
-          });
+          return <TableTags data={val} maxVisible={2} maxTagWidth={160} getKey={(item) => item} getLabel={(item) => _.find(userGroups, { id: item })?.name || item} />;
         },
       },
       {
diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index 46e2f9a37..710894092 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -13,6 +13,7 @@ import Add from '../Add';
 import Edit from '../Edit';
 import MoreOperations from './MoreOperations';
 import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -209,9 +210,7 @@ export default function List() {
             title: t('teams'),
             dataIndex: 'team_names',
             render: (val) => {
-              return _.map(val, (item) => {
-                return <Tag key={item}>{item}</Tag>;
-              });
+              return <TableTags data={val} maxVisible={2} maxTagWidth={160} />;
             },
           },
           {
diff --git a/src/pages/hosts/pages/List/List.tsx b/src/pages/hosts/pages/List/List.tsx
index 56bb3683a..55c808d3a 100644
--- a/src/pages/hosts/pages/List/List.tsx
+++ b/src/pages/hosts/pages/List/List.tsx
@@ -31,7 +31,7 @@ import { NS } from '../../constants';
 import { Item, OperateType } from '../../types';
 import { getList } from '../../services';
 import VersionIcon from './VersionIcon';
-import Tags from './Tags';
+import TableTags from '@/components/TableTags';
 import { formatBeatTimeDisplay } from './formatBeatTimeDisplay';
 
 const downtimeOptions = [1, 2, 3, 5, 10, 30];
@@ -524,10 +524,10 @@ export default function List(props: Props) {
                 }
                 return (
                   <div className='w-[200px]' style={{ minWidth }}>
-                    <Tags
-                      type='outline'
+                    <TableTags
                       data={tags}
-                      fontColor={record.target_up === 0 ? 'text-soft' : 'text-title'}
+                      maxVisible={2}
+                      maxTagWidth={120}
                       onTagClick={(tag) => {
                         if (!_.includes(params.query, tag)) {
                           const val = params.query ? `${params.query.trim()} ${tag}` : tag;
@@ -557,10 +557,10 @@ export default function List(props: Props) {
                 }
                 return (
                   <div className='w-[200px]' style={{ minWidth }}>
-                    <Tags
-                      type='outline'
+                    <TableTags
                       data={tags}
-                      fontColor={record.target_up === 0 ? 'text-soft' : 'text-title'}
+                      maxVisible={2}
+                      maxTagWidth={120}
                       onTagClick={(tag) => {
                         if (!_.includes(params.query, tag)) {
                           const val = params.query ? `${params.query.trim()} ${tag}` : tag;
@@ -584,7 +584,7 @@ export default function List(props: Props) {
                 }
                 return (
                   <div className='w-[200px]' style={{ minWidth }}>
-                    <Tags type='fill' data={groupNames} fontColor={record.target_up === 0 ? 'text-soft' : undefined} />
+                    <TableTags data={groupNames} maxVisible={2} maxTagWidth={120} />
                   </div>
                 );
               },
diff --git a/src/pages/hosts/pages/List/Tags.tsx b/src/pages/hosts/pages/List/Tags.tsx
deleted file mode 100644
index 6a6f11ea0..000000000
--- a/src/pages/hosts/pages/List/Tags.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, { useRef, useState, useLayoutEffect } from 'react';
-import { Button, Popover } from 'antd';
-import { CopyOutlined } from '@ant-design/icons';
-import { Trans } from 'react-i18next';
-
-import { copy2ClipBoard } from '@/utils';
-
-import { NS } from '../../constants';
-
-interface Props {
-  type: 'outline' | 'fill';
-  bgColor?: string; // 背景颜色，仅在 type 为 'fill' 时生效
-  fontColor?: string; // 字体颜色，仅在 type 为 'fill' 时生效
-  data: string[];
-  onTagClick?: (tag: string) => void;
-}
-
-const GAP = 2;
-
-/**
- * 核心布局算法：根据实际测量的 tag 宽度计算可见数量
- */
-function calcLayout(tagWidths: number[], overflowTagWidth: number, containerWidth: number): { visibleCount: number; overflowCount: number } {
-  if (!tagWidths.length || containerWidth <= 0) {
-    return { visibleCount: tagWidths.length, overflowCount: 0 };
-  }
-
-  const widths = tagWidths.map((w) => Math.min(w, containerWidth));
-
-  // ── 第一行 ──
-  let row1End = -1;
-  let rem = containerWidth;
-  for (let i = 0; i < widths.length; i++) {
-    const needed = i === 0 ? widths[i] : GAP + widths[i];
-    if (rem >= needed) {
-      rem -= needed;
-      row1End = i;
-    } else {
-      break;
-    }
-  }
-
-  if (row1End === widths.length - 1) {
-    return { visibleCount: widths.length, overflowCount: 0 };
-  }
-
-  // ── 第二行 ──
-  const r2start = row1End + 1;
-  rem = containerWidth;
-  let r2count = 0;
-
-  for (let i = r2start; i < widths.length; i++) {
-    const isFirst = i === r2start;
-    const needed = isFirst ? widths[i] : GAP + widths[i];
-    const isLast = i === widths.length - 1;
-
-    if (isLast) {
-      if (rem >= needed) r2count++;
-      break;
-    }
-
-    // 非最后一个：放置当前 tag 后，还需在第二行留出 overflow tag 的空间
-    if (rem >= needed + GAP + overflowTagWidth) {
-      rem -= needed;
-      r2count++;
-    } else {
-      break;
-    }
-  }
-
-  const visibleCount = r2start + r2count;
-  return { visibleCount, overflowCount: widths.length - visibleCount };
-}
-
-export default function Tags(props: Props) {
-  const { type = 'outline', data, onTagClick } = props;
-  const bgColor = props.bgColor || 'var(--fc-violet-3)';
-  const fontColor = props.fontColor || 'var(--fc-violet-11)';
-  const containerRef = useRef<HTMLDivElement>(null);
-  const tagMeasureRefs = useRef<(HTMLSpanElement | null)[]>([]);
-  const overflowMeasureRef = useRef<HTMLSpanElement | null>(null);
-  const [layout, setLayout] = useState({ visibleCount: data.length, overflowCount: 0 });
-
-  // fill 模式下通过 inline style 设置动态颜色（Tailwind 不支持动态值）
-  const fillStyle: React.CSSProperties | undefined =
-    type === 'fill'
-      ? {
-          backgroundColor: bgColor,
-          backgroundClip: 'padding-box',
-          borderColor: bgColor,
-          color: fontColor,
-        }
-      : undefined;
-
-  // tag 的 Tailwind 基础类（测量层和渲染层共用）
-  // p-[6px] border border-[var(--fc-border-color)] rounded-2xl leading-none whitespace-nowrap box-border
-  const tagBaseClass = `inline-block px-[6px] py-[4px] border ${type === 'fill' ? '' : 'border-[var(--fc-border-color)]'} rounded-2xl leading-none whitespace-nowrap box-border ${
-    onTagClick ? 'cursor-pointer' : ''
-  }`;
-
-  // 可见层额外加溢出省略
-  const visibleTagClass = `${tagBaseClass} overflow-hidden text-ellipsis max-w-full shrink-0`;
-
-  useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-
-    const compute = () => {
-      const containerWidth = el.getBoundingClientRect().width;
-      if (containerWidth <= 0) return;
-
-      const tagWidths = tagMeasureRefs.current.slice(0, data.length).map((span) => (span ? Math.ceil(span.getBoundingClientRect().width) : containerWidth));
-      const overflowTagWidth = overflowMeasureRef.current ? Math.ceil(overflowMeasureRef.current.getBoundingClientRect().width) : 40;
-
-      setLayout(calcLayout(tagWidths, overflowTagWidth, containerWidth));
-    };
-
-    const ro = new ResizeObserver(compute);
-    ro.observe(el);
-    compute();
-
-    return () => ro.disconnect();
-  }, [data]);
-
-  const { visibleCount, overflowCount } = layout;
-
-  return (
-    <div ref={containerRef} className='relative'>
-      {/* 隐藏测量层：绝对定位不占空间，用于获取各 tag 的真实渲染宽度 */}
-      <div aria-hidden className='absolute top-0 left-0 invisible pointer-events-none flex'>
-        {data.map((tag, i) => (
-          <span
-            key={i}
-            ref={(el) => {
-              tagMeasureRefs.current[i] = el;
-            }}
-            className={tagBaseClass}
-          >
-            {tag}
-          </span>
-        ))}
-        {/* 用最大计数值预估 overflow tag 宽度上限 */}
-        <span ref={overflowMeasureRef} className={tagBaseClass}>
-          +{data.length}
-        </span>
-      </div>
-
-      {/* 可见布局层 */}
-      <div className='flex flex-wrap gap-0.5 content-start'>
-        {data.slice(0, visibleCount).map((tag, i) => (
-          <span
-            key={i}
-            className={visibleTagClass}
-            style={fillStyle}
-            title={tag}
-            onClick={(e) => {
-              e.stopPropagation();
-              onTagClick?.(tag);
-            }}
-          >
-            {tag}
-          </span>
-        ))}
-        {overflowCount > 0 && (
-          <Popover
-            title={
-              <div className='flex justify-between items-center'>
-                <Trans ns={NS} i18nKey='tags_popover_title' values={{ count: data.length }} />
-                <Button
-                  type='text'
-                  icon={<CopyOutlined />}
-                  onClick={() => {
-                    copy2ClipBoard(data.join('\n'));
-                  }}
-                />
-              </div>
-            }
-            content={
-              <div>
-                {data.map((tag, i) => (
-                  <div key={i} className='mb-1'>
-                    <div
-                      className={tagBaseClass}
-                      style={fillStyle}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onTagClick?.(tag);
-                      }}
-                    >
-                      {tag}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            }
-          >
-            <span
-              className={`${tagBaseClass} shrink-0`}
-              style={fillStyle}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              +{overflowCount}
-            </span>
-          </Popover>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index 1f6ba7e62..a24659ec2 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -26,6 +26,7 @@ import { CommonStateContext } from '@/App';
 import Markdown from '@/components/Markdown';
 import PageLayout from '@/components/pageLayout';
 import usePagination from '@/components/usePagination';
+import TableTags from '@/components/TableTags';
 import RefreshIcon from '@/components/RefreshIcon';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { getUnitLabel, buildUnitOptions } from '@/pages/dashboard/Components/UnitPicker/utils';
@@ -232,11 +233,7 @@ export default function index() {
       dataIndex: 'extra_fields',
       render: (val) => {
         return (
-          <Space wrap size={[0, 2]}>
-            {_.map(val, (item) => {
-              return <Tag key={item.name}>{`${item.name}: ${item.value}`}</Tag>;
-            })}
-          </Space>
+          <TableTags data={_.map(val, (item) => `${item.name}: ${item.value}`)} maxVisible={2} maxTagWidth={180} />
         );
       },
     },
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index 7e21297c1..5fcad23e0 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -14,6 +14,7 @@ import { deleteRecordingRule } from '@/services/recording';
 import { CommonStateContext } from '@/App';
 import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 import EditModal from './components/editModal';
 import Import from './components/Import';
 import Export from './components/Export';
@@ -177,16 +178,7 @@ const PageTable: React.FC<Props> = ({ gids }) => {
         dataIndex: 'append_tags',
         render: (data) => {
           const array = data || [];
-          return (
-            (array.length &&
-              array.map((tag: string, index: number) => {
-                return (
-                  <Tag color='purple' key={index}>
-                    {tag}
-                  </Tag>
-                );
-              })) || <div></div>
-          );
+          return <TableTags data={array} maxVisible={2} maxTagWidth={160} emptyText={<div />} />;
         },
       },
       {
diff --git a/src/pages/targets/List.tsx b/src/pages/targets/List.tsx
index a75af19e7..04ba5e7da 100644
--- a/src/pages/targets/List.tsx
+++ b/src/pages/targets/List.tsx
@@ -20,6 +20,7 @@ import TargetMetaDrawer from './TargetMetaDrawer';
 import Explorer from './components/Explorer';
 import EditBusinessGroups from './components/EditBusinessGroups';
 import HostsSelect from './components/HostsSelect';
+import TableTags from '@/components/TableTags';
 
 // @ts-ignore
 import CollectsDrawer from 'plus:/pages/collects/CollectsDrawer';
@@ -204,30 +205,20 @@ export default function List(props: IProps) {
           showTitle: false,
         },
         render(tagArr) {
-          const content =
-            tagArr &&
-            tagArr.map((item) => (
-              <Tag
-                color='purple'
-                key={item}
-                onClick={(e) => {
-                  if (!tableQueryContent.includes(item)) {
-                    isAddTagToQueryInput.current = true;
-                    const val = tableQueryContent ? `${tableQueryContent.trim()} ${item}` : item;
-                    setTableQueryContent(val);
-                    setSearchVal(val);
-                  }
-                }}
-              >
-                {item}
-              </Tag>
-            ));
           return (
-            tagArr && (
-              <Tooltip title={content} placement='topLeft' getPopupContainer={() => document.body} overlayClassName='mon-manage-table-tooltip'>
-                {content}
-              </Tooltip>
-            )
+            <TableTags
+              data={tagArr}
+              maxVisible={2}
+              maxTagWidth={120}
+              onTagClick={(item) => {
+                if (!tableQueryContent.includes(item)) {
+                  isAddTagToQueryInput.current = true;
+                  const val = tableQueryContent ? `${tableQueryContent.trim()} ${item}` : item;
+                  setTableQueryContent(val);
+                  setSearchVal(val);
+                }
+              }}
+            />
           );
         },
       });
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index 54283ea66..5ba8a4af2 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -24,6 +24,7 @@ import moment from 'moment';
 import { useAntdTable } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
+import TableTags from '@/components/TableTags';
 
 import request from '@/utils/request';
 import { RequestMethod } from '@/store/common';
@@ -138,11 +139,7 @@ const index = (_props: any) => {
         title: t('tpl.tags'),
         dataIndex: 'tags',
         render: (text) => {
-          return _.map(text, (item) => (
-            <Tag color='purple' key={item} onClick={() => handleTagClick(item)}>
-              {item}
-            </Tag>
-          ));
+          return <TableTags data={text} maxVisible={2} maxTagWidth={160} onTagClick={handleTagClick} />;
         },
       },
       {
diff --git a/src/pages/user/component/Tags/index.tsx b/src/pages/user/component/Tags/index.tsx
deleted file mode 100644
index f916d686c..000000000
--- a/src/pages/user/component/Tags/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import _ from 'lodash';
-import { Tag, Tooltip } from 'antd';
-import { Link } from 'react-router-dom';
-
-interface Props {
-  data: { id: number; name: string }[];
-  tagLinkTo: (item) => {
-    pathname: string;
-    search: string;
-  };
-}
-
-export default function index(props: Props) {
-  const { data, tagLinkTo } = props;
-  const displayData = _.slice(data, 0, 3);
-  return (
-    <Tooltip title={_.join(_.map(data, 'name'), ', ')}>
-      <div>
-        {_.map(displayData, (item) => {
-          return (
-            <Link key={item.id} to={tagLinkTo(item)}>
-              <Tag color='purple' style={{ maxWidth: '100%', marginRight: 8 }}>
-                <div
-                  style={{
-                    maxWidth: 'max-content',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}
-                >
-                  {item.name}
-                </div>
-              </Tag>
-            </Link>
-          );
-        })}
-        {data.length > 2 && (
-          <div
-            style={{
-              lineHeight: 1,
-            }}
-          >
-            ...
-          </div>
-        )}
-      </div>
-    </Tooltip>
-  );
-}
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index 9b948b24f..fe2c7cd63 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -31,6 +31,7 @@ import { useTranslation } from 'react-i18next';
 import { listToTree } from '@/components/BusinessGroup';
 import { CommonStateContext } from '@/App';
 import Tree from '@/components/BusinessGroup/components/Tree';
+import TableTags from '@/components/TableTags';
 import './index.less';
 import './locale';
 import usePagination from '@/components/usePagination';
@@ -103,9 +104,7 @@ const Resource: React.FC = () => {
       dataIndex: 'busi_groups',
       render: (text: string, record) => {
         if (_.isEmpty(record.busi_groups)) return '-';
-        return _.map(record.busi_groups, (item) => {
-          return <Tag key={item.id}>{item.name}</Tag>;
-        });
+        return <TableTags data={record.busi_groups || []} maxVisible={2} maxTagWidth={140} getKey={(item) => item.id} getLabel={(item) => item.name} />;
       },
     },
   ];
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 76c45c7b4..a7fa08f07 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -32,7 +32,7 @@ import usePagination from '@/components/usePagination';
 import TimeRangePicker, { IRawTimeRange, parseRange } from '@/components/TimeRangePicker';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { defaultColumnsConfigs, LOCAL_STORAGE_KEY } from './constants';
-import Tags from './component/Tags';
+import TableTags from '@/components/TableTags';
 import './index.less';
 import './locale';
 
@@ -71,21 +71,25 @@ const Resource: React.FC = () => {
     {
       title: t('account:profile.role'),
       dataIndex: 'roles',
+      width: 120,
       render: (text: []) => text.join(', '),
     },
     {
       title: t('user.busi_groups'),
       dataIndex: 'busi_groups',
+      width: 160,
       render: (value) => {
         return (
-          <Tags
+          <TableTags
             data={value}
-            tagLinkTo={(item) => {
-              return {
-                pathname: '/busi-groups',
-                search: `?id=${item.id}`,
-              };
-            }}
+            maxVisible={1}
+            maxTagWidth={110}
+            getKey={(item) => item.id}
+            getLabel={(item) => item.name}
+            getLinkTo={(item) => ({
+              pathname: '/busi-groups',
+              search: `?id=${item.id}`,
+            })}
           />
         );
       },
@@ -93,16 +97,19 @@ const Resource: React.FC = () => {
     {
       title: t('user.user_groups'),
       dataIndex: 'user_groups',
+      width: 160,
       render: (value) => {
         return (
-          <Tags
+          <TableTags
             data={value}
-            tagLinkTo={(item) => {
-              return {
-                pathname: '/user-groups',
-                search: `?id=${item.id}`,
-              };
-            }}
+            maxVisible={1}
+            maxTagWidth={110}
+            getKey={(item) => item.id}
+            getLabel={(item) => item.name}
+            getLinkTo={(item) => ({
+              pathname: '/user-groups',
+              search: `?id=${item.id}`,
+            })}
           />
         );
       },
@@ -110,6 +117,7 @@ const Resource: React.FC = () => {
     {
       title: t('common:table.create_at'),
       dataIndex: 'create_at',
+      width: 170,
       render: (text) => {
         return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
       },
@@ -118,6 +126,7 @@ const Resource: React.FC = () => {
     {
       title: t('user.last_active_time'),
       dataIndex: 'last_active_time',
+      width: 170,
       render: (text) => {
         if (!text) {
           return '-';
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 5fc59077d..a2ec84134 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -24,7 +24,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, Link } from 'react-router-dom';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
-import Tags from '@/components/Tags';
+import TableTags from '@/components/TableTags';
 import PageLayout from '@/components/pageLayout';
 import { getBusiGroupsAlertMutes, deleteShields, updateShields } from '@/services/shield';
 import { shieldItem, strategyStatus } from '@/store/warningInterface';
@@ -114,8 +114,8 @@ const Shield: React.FC = () => {
         render(value, record: any) {
           if (!value) return '-';
           return (
-            <Tags
-              width={70}
+            <TableTags
+              maxTagWidth={120}
               data={_.compact(
                 _.map(value, (item) => {
                   if (item === 0) return '$all';
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 45ecb2202..4f9b0c3bf 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -13,7 +13,7 @@ import { CommonStateContext } from '@/App';
 import { priorityColor } from '@/utils/constant';
 import { DatasourceSelect } from '@/components/DatasourceSelect';
 import { strategyStatus } from '@/store/warningInterface';
-import Tags from '@/components/Tags';
+import TableTags from '@/components/TableTags';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
 import { NS as notificationRulesNS } from '@/pages/notificationRules/constants';
@@ -96,8 +96,8 @@ const Subscribe = (props: Props) => {
         render(value) {
           if (!value) return '-';
           return (
-            <Tags
-              width={70}
+            <TableTags
+              maxTagWidth={120}
               data={_.compact(
                 _.map(value, (item) => {
                   if (item === 0) return '$all';
@@ -182,7 +182,7 @@ const Subscribe = (props: Props) => {
         title: t('user_groups'),
         dataIndex: 'user_groups',
         render: (data) => {
-          return <Tags width={110} data={_.map(data, 'name')} />;
+          return <TableTags data={_.map(data, 'name')} maxVisible={2} maxTagWidth={140} />;
         },
       },
       {
@@ -190,28 +190,15 @@ const Subscribe = (props: Props) => {
         dataIndex: 'notify_rule_ids',
         render: (data) => {
           return (
-            <div className='flex flex-wrap gap-[4px] max-w-[400px]'>
-              {_.map(data, (id) => {
-                const val = _.find(notificationRules, { id })?.name || id;
-                return (
-                  <Link to={`/${notificationRulesNS}/edit/${id}`} key={val} target='_blank'>
-                    <Tooltip title={val}>
-                      <Tag style={{ maxWidth: '100%', marginRight: 0 }}>
-                        <div
-                          style={{
-                            maxWidth: 'max-content',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                          }}
-                        >
-                          {val}
-                        </div>
-                      </Tag>
-                    </Tooltip>
-                  </Link>
-                );
-              })}
-            </div>
+            <TableTags
+              data={data}
+              maxVisible={2}
+              maxTagWidth={160}
+              getKey={(id) => id}
+              getLabel={(id) => _.find(notificationRules, { id })?.name || id}
+              getLinkTo={(id) => `/${notificationRulesNS}/edit/${id}`}
+              linkTarget='_blank'
+            />
           );
         },
       },

From 0871dc47975011b61912356cf5093487d0d98897 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 09:17:01 +0800
Subject: [PATCH 25/44] style(table): align sorted column body bg with header

Sorted column TD was using antd default #fafafa while sorted TH
inherited a different bg, making the column look split. Apply the
same fc-fill-5 token to both so the whole column reads as one band.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/theme/default.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/theme/default.less b/src/theme/default.less
index 19c1c84a2..847670cac 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -113,6 +113,11 @@ mark {
     white-space: nowrap;
   }
 
+  .ant-table-thead > tr > th.ant-table-column-sort,
+  .ant-table-tbody > tr > td.ant-table-column-sort {
+    background: rgb(var(--fc-fill-5-rgb) / 0.4);
+  }
+
   .ant-table.ant-table-bordered {
     > .ant-table-title,
     > .ant-table-footer,

From 1d4e465d0b298386484226634f2b174d59f63468 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 10:26:06 +0800
Subject: [PATCH 26/44] fix(table): keep fixed cells opaque

---
 src/theme/default.less | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/theme/default.less b/src/theme/default.less
index 847670cac..25bcffa32 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -70,7 +70,14 @@ mark {
 
   .ant-table-tbody .ant-table-cell-fix-left,
   .ant-table-tbody .ant-table-cell-fix-right {
-    background: inherit;
+    background: var(--fc-fill-2);
+  }
+
+  .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
+  .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right,
+  .ant-table-tbody > tr > td.ant-table-cell-fix-left.ant-table-cell-row-hover,
+  .ant-table-tbody > tr > td.ant-table-cell-fix-right.ant-table-cell-row-hover {
+    background: rgb(var(--fc-fill-5-rgb) / 0.2);
   }
 
   .ant-table-thead > tr > th.ant-table-cell-fix-left,

From fab7e0a06324842af8edeec8bde2c438f6391c02 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 10:26:14 +0800
Subject: [PATCH 27/44] feat(table): fix route table action columns

---
 src/pages/aiConfig/agents/pages/List.tsx              | 3 +++
 src/pages/aiConfig/llmConfigs/pages/List.tsx          | 3 +++
 src/pages/aiConfig/mcpServers/pages/List.tsx          | 3 +++
 src/pages/aiConfig/skills/pages/ResourcesTable.tsx    | 3 +++
 src/pages/builtInComponents/AlertRules/index.tsx      | 3 +++
 src/pages/builtInComponents/CollectTpls/index.tsx     | 3 +++
 src/pages/builtInComponents/Dashboards/index.tsx      | 3 +++
 src/pages/builtInComponents/Metrics/index.tsx         | 3 +++
 src/pages/dashboard/List/index.tsx                    | 3 +++
 src/pages/datasource/components/TableSource/index.tsx | 3 +++
 src/pages/embeddedProduct/pages/List/index.tsx        | 3 +++
 src/pages/event/Table.tsx                             | 3 +++
 src/pages/event/card.tsx                              | 3 +++
 src/pages/eventPipeline/pages/List/index.tsx          | 3 +++
 src/pages/log/IndexPatterns/index.tsx                 | 3 +++
 src/pages/metricsBuiltin/List.tsx                     | 3 +++
 src/pages/notificationChannels/pages/List/index.tsx   | 3 +++
 src/pages/notificationChannels/pages/ListNG/index.tsx | 4 +++-
 src/pages/notificationRules/pages/List.tsx            | 3 +++
 src/pages/recordingRules/PageTable.tsx                | 3 +++
 src/pages/task/index.tsx                              | 3 +++
 src/pages/taskTpl/index.tsx                           | 3 +++
 src/pages/user/business.tsx                           | 3 +++
 src/pages/user/groups.tsx                             | 4 +++-
 src/pages/user/users.tsx                              | 3 +++
 src/pages/variableConfigs/index.tsx                   | 3 +++
 26 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/pages/aiConfig/agents/pages/List.tsx b/src/pages/aiConfig/agents/pages/List.tsx
index 63a5887fc..92b8fb14d 100644
--- a/src/pages/aiConfig/agents/pages/List.tsx
+++ b/src/pages/aiConfig/agents/pages/List.tsx
@@ -58,6 +58,7 @@ export default function List() {
                 pagination={pagination}
                 loading={loading}
                 dataSource={data}
+                scroll={{ x: 'max-content' }}
                 columns={[
                   {
                     dataIndex: 'name',
@@ -99,9 +100,11 @@ export default function List() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
+      fixed: 'right' as const,
                     render: (record) => {
                       return (
                         <Dropdown
+                          trigger={['hover', 'click']}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/aiConfig/llmConfigs/pages/List.tsx b/src/pages/aiConfig/llmConfigs/pages/List.tsx
index 91ce9ed5d..f564aeaa7 100644
--- a/src/pages/aiConfig/llmConfigs/pages/List.tsx
+++ b/src/pages/aiConfig/llmConfigs/pages/List.tsx
@@ -41,6 +41,7 @@ export default function List() {
                 pagination={pagination}
                 loading={loading}
                 dataSource={data}
+                scroll={{ x: 'max-content' }}
                 columns={[
                   {
                     dataIndex: 'id',
@@ -91,8 +92,10 @@ export default function List() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
+      fixed: 'right' as const,
                     render: (record) => (
                       <Dropdown
+                        trigger={['hover', 'click']}
                         overlayClassName='fc-table-action-dropdown'
                         overlay={
                           <Menu>
diff --git a/src/pages/aiConfig/mcpServers/pages/List.tsx b/src/pages/aiConfig/mcpServers/pages/List.tsx
index aaabece00..ff30d1a60 100644
--- a/src/pages/aiConfig/mcpServers/pages/List.tsx
+++ b/src/pages/aiConfig/mcpServers/pages/List.tsx
@@ -41,6 +41,7 @@ export default function List() {
                 pagination={pagination}
                 loading={loading}
                 dataSource={data}
+                scroll={{ x: 'max-content' }}
                 columns={[
                   {
                     dataIndex: 'name',
@@ -76,8 +77,10 @@ export default function List() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
+      fixed: 'right' as const,
                     render: (record) => (
                       <Dropdown
+                        trigger={['hover', 'click']}
                         overlayClassName='fc-table-action-dropdown'
                         overlay={
                           <Menu>
diff --git a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
index f6e53b499..5d638b3a4 100644
--- a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
+++ b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
@@ -147,9 +147,11 @@ export default function ResourcesTable(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
+      fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
@@ -194,6 +196,7 @@ export default function ResourcesTable(props: Props) {
         ]}
         pagination={false}
         scroll={{
+          x: 'max-content',
           y: 400,
         }}
       />
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index a78b77b8d..ea182ad7b 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -236,9 +236,11 @@ export default function index(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
+      fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
@@ -330,6 +332,7 @@ export default function index(props: Props) {
             },
           },
         ]}
+        scroll={{ x: 'max-content' }}
         pagination={pagination}
       />
     </>
diff --git a/src/pages/builtInComponents/CollectTpls/index.tsx b/src/pages/builtInComponents/CollectTpls/index.tsx
index ee14a533d..d2abd1df3 100644
--- a/src/pages/builtInComponents/CollectTpls/index.tsx
+++ b/src/pages/builtInComponents/CollectTpls/index.tsx
@@ -155,9 +155,11 @@ export default function index(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
+      fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
@@ -236,6 +238,7 @@ export default function index(props: Props) {
             },
           },
         ]}
+        scroll={{ x: 'max-content' }}
         pagination={pagination}
       />
     </>
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index 9587e808e..82f752c84 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -196,9 +196,11 @@ export default function index(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
+      fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
@@ -284,6 +286,7 @@ export default function index(props: Props) {
             },
           },
         ]}
+        scroll={{ x: 'max-content' }}
         pagination={pagination}
       />
     </>
diff --git a/src/pages/builtInComponents/Metrics/index.tsx b/src/pages/builtInComponents/Metrics/index.tsx
index 0c8d4c243..53f481ce1 100644
--- a/src/pages/builtInComponents/Metrics/index.tsx
+++ b/src/pages/builtInComponents/Metrics/index.tsx
@@ -144,9 +144,11 @@ export default function index(props: Props) {
       title: t('common:table.operations'),
       dataIndex: 'operator',
       width: 64,
+      fixed: 'right' as const,
       render: (data, record: any) => {
         return (
           <Dropdown
+            trigger={['hover', 'click']}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -423,6 +425,7 @@ export default function index(props: Props) {
         rowKey='id'
         {...tableProps}
         columns={ajustColumns(columns, columnsConfigs)}
+        scroll={{ x: 'max-content' }}
         pagination={{
           ...pagination,
           ...tableProps.pagination,
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index e4fc02ba5..5748e9aec 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -306,9 +306,11 @@ export default function index() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
+      fixed: 'right' as const,
                     render: (text: string, record: DashboardType) => {
                       return (
                         <Dropdown
+                          trigger={['hover', 'click']}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
@@ -404,6 +406,7 @@ export default function index() {
             )}
             rowKey='id'
             size='small'
+            scroll={{ x: 'max-content' }}
             rowSelection={{
               selectedRowKeys: selectRowKeys,
               onChange: (selectedRowKeys: number[]) => {
diff --git a/src/pages/datasource/components/TableSource/index.tsx b/src/pages/datasource/components/TableSource/index.tsx
index e95f3d2d8..030d5d514 100644
--- a/src/pages/datasource/components/TableSource/index.tsx
+++ b/src/pages/datasource/components/TableSource/index.tsx
@@ -193,9 +193,11 @@ const TableSource = (props: IPropsType) => {
     {
       title: t('common:table.operations'),
       width: 64,
+      fixed: 'right' as const,
       render: (record) => {
         return (
           <Dropdown
+            trigger={['hover', 'click']}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -284,6 +286,7 @@ const TableSource = (props: IPropsType) => {
         size='small'
         className='settings-data-source-list'
         rowKey='id'
+        scroll={{ x: 'max-content' }}
         dataSource={_.filter(tableData, (item) => {
           if (searchVal) {
             return _.includes(item.name, searchVal);
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index 44ddf6acd..941e80255 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -132,9 +132,11 @@ export default function Index() {
         title: t('common:table.operations'),
         dataIndex: 'operator',
         width: 64,
+      fixed: 'right' as const,
         render: (_val, record: EmbeddedProductResponse) => {
           return (
             <Dropdown
+              trigger={['hover', 'click']}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
@@ -237,6 +239,7 @@ export default function Index() {
           pagination={false}
           dataSource={data}
           columns={columns}
+          scroll={{ x: 'max-content' }}
           onRow={(record) => {
             return {
               onDoubleClick: () => {
diff --git a/src/pages/event/Table.tsx b/src/pages/event/Table.tsx
index 1ff155328..9392ba94e 100644
--- a/src/pages/event/Table.tsx
+++ b/src/pages/event/Table.tsx
@@ -131,9 +131,11 @@ export default function TableCpt(props: IProps) {
       title: t('common:table.operations'),
       dataIndex: 'operate',
       width: 64,
+      fixed: 'right' as const,
       render(value, record) {
         return (
           <Dropdown
+            trigger={['hover', 'click']}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -242,6 +244,7 @@ export default function TableCpt(props: IProps) {
           rowKey={(record) => record.id}
           columns={columns}
           {...tableProps}
+          scroll={{ x: 'max-content' }}
           rowClassName={(record: { severity: number; is_recovered: number }) => {
             return SeverityColor[record.is_recovered ? 3 : record.severity - 1] + '-left-border';
           }}
diff --git a/src/pages/event/card.tsx b/src/pages/event/card.tsx
index 5d25dac8e..c17b6a210 100644
--- a/src/pages/event/card.tsx
+++ b/src/pages/event/card.tsx
@@ -172,9 +172,11 @@ function Card(props: Props, ref) {
       title: t('common:table.operations'),
       dataIndex: 'operate',
       width: 64,
+      fixed: 'right' as const,
       render(value, record) {
         return (
           <Dropdown
+            trigger={['hover', 'click']}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -339,6 +341,7 @@ function Card(props: Props, ref) {
           }}
           dataSource={drawerList}
           columns={columns}
+          scroll={{ x: 'max-content' }}
           pagination={{
             defaultPageSize: 30,
             showSizeChanger: true,
diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index 710894092..e3333a3e0 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -157,6 +157,7 @@ export default function List() {
       <Table
         size='small'
         rowKey='id'
+        scroll={{ x: 'max-content' }}
         columns={[
           {
             title: t('common:table.name'),
@@ -227,9 +228,11 @@ export default function List() {
           {
             title: t('common:table.operations'),
             width: 64,
+      fixed: 'right' as const,
             render: (item: Item) => {
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/log/IndexPatterns/index.tsx b/src/pages/log/IndexPatterns/index.tsx
index 797bac249..b0dafdc10 100644
--- a/src/pages/log/IndexPatterns/index.tsx
+++ b/src/pages/log/IndexPatterns/index.tsx
@@ -116,6 +116,7 @@ export default function Servers() {
                 tableLayout='fixed'
                 loading={loading}
                 dataSource={_.filter(data, (item) => _.includes(_.toLower(item.name), _.toLower(search)))}
+                scroll={{ x: 'max-content' }}
                 pagination={false}
                 columns={[
                   {
@@ -144,9 +145,11 @@ export default function Servers() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
+      fixed: 'right' as const,
                     render: (record) => {
                       return (
                         <Dropdown
+                          trigger={['hover', 'click']}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index a24659ec2..413785e5c 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -268,9 +268,11 @@ export default function index() {
       title: t('common:table.operations'),
       dataIndex: 'operator',
       width: 64,
+      fixed: 'right' as const,
       render: (data, record: any) => {
         return (
           <Dropdown
+            trigger={['hover', 'click']}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -624,6 +626,7 @@ export default function index() {
               rowKey='id'
               {...tableProps}
               columns={ajustColumns(columns, columnsConfigs)}
+              scroll={{ x: 'max-content' }}
               pagination={{
                 ...pagination,
                 ...tableProps.pagination,
diff --git a/src/pages/notificationChannels/pages/List/index.tsx b/src/pages/notificationChannels/pages/List/index.tsx
index 97797a2fb..7096c9425 100644
--- a/src/pages/notificationChannels/pages/List/index.tsx
+++ b/src/pages/notificationChannels/pages/List/index.tsx
@@ -183,9 +183,11 @@ export default function List() {
             {
               title: t('common:table.operations'),
               width: 64,
+      fixed: 'right' as const,
               render: (record) => {
                 return (
                   <Dropdown
+                    trigger={['hover', 'click']}
                     overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
@@ -223,6 +225,7 @@ export default function List() {
               },
             },
           ]}
+          scroll={{ x: 'max-content' }}
           rowSelection={{
             selectedRowKeys: _.map(selectedRows, 'id'),
             onChange: (_selectedRowKeys, selectedRows: ChannelItem[]) => {
diff --git a/src/pages/notificationChannels/pages/ListNG/index.tsx b/src/pages/notificationChannels/pages/ListNG/index.tsx
index 36b4765c2..f21506313 100644
--- a/src/pages/notificationChannels/pages/ListNG/index.tsx
+++ b/src/pages/notificationChannels/pages/ListNG/index.tsx
@@ -296,9 +296,11 @@ export default function index() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
+                    fixed: 'right' as const,
                     render: (record) => {
                       return (
                         <Dropdown
+                          trigger={['hover', 'click']}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
@@ -346,7 +348,7 @@ export default function index() {
                   },
                 }}
                 pagination={pagination}
-                scroll={{ y: 'calc(100% - 42px)' }}
+                scroll={{ x: 'max-content', y: 'calc(100% - 42px)' }}
               />
             </div>
           </div>
diff --git a/src/pages/notificationRules/pages/List.tsx b/src/pages/notificationRules/pages/List.tsx
index 299831a1c..9778a5275 100644
--- a/src/pages/notificationRules/pages/List.tsx
+++ b/src/pages/notificationRules/pages/List.tsx
@@ -205,9 +205,11 @@ export default function List() {
             {
               title: t('common:table.operations'),
               width: 64,
+      fixed: 'right' as const,
               render: (record) => {
                 return (
                   <Dropdown
+                    trigger={['hover', 'click']}
                     overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
@@ -249,6 +251,7 @@ export default function List() {
               },
             },
           ]}
+          scroll={{ x: 'max-content' }}
           pagination={pagination}
         />
       </div>
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index 5fcad23e0..afac18925 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -217,9 +217,11 @@ const PageTable: React.FC<Props> = ({ gids }) => {
         title: t('common:table.operations'),
         dataIndex: 'operator',
         width: 64,
+      fixed: 'right' as const,
         render: (data, record) => {
           return (
             <Dropdown
+              trigger={['hover', 'click']}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
@@ -434,6 +436,7 @@ const PageTable: React.FC<Props> = ({ gids }) => {
         className='mt-2'
         size='small'
         rowKey='id'
+        scroll={{ x: 'max-content' }}
         pagination={{
           total: currentStrategyData.length,
           showQuickJumper: true,
diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index 254278a33..de95139f1 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -144,9 +144,11 @@ const index = (_props: any) => {
       {
         title: t('table.operations'),
         width: 64,
+      fixed: 'right' as const,
         render: (_text, record) => {
           return (
             <Dropdown
+              trigger={['hover', 'click']}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
@@ -251,6 +253,7 @@ const index = (_props: any) => {
               rowKey='id'
               columns={columns as any}
               {...(tableProps as any)}
+              scroll={{ x: 'max-content' }}
               pagination={{
                 ...pagination,
                 ...tableProps.pagination,
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index 5ba8a4af2..39dea013c 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -158,9 +158,11 @@ const index = (_props: any) => {
       {
         title: t('table.operations'),
         width: 64,
+      fixed: 'right' as const,
         render: (_text, record) => {
           return (
             <Dropdown
+              trigger={['hover', 'click']}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
@@ -279,6 +281,7 @@ const index = (_props: any) => {
               rowKey='id'
               columns={columns}
               {...(tableProps as any)}
+              scroll={{ x: 'max-content' }}
               rowSelection={{
                 selectedRowKeys: selectedIds,
                 onChange: (selectedRowKeys) => {
diff --git a/src/pages/user/business.tsx b/src/pages/user/business.tsx
index ffcc0fedb..eb8deeff3 100644
--- a/src/pages/user/business.tsx
+++ b/src/pages/user/business.tsx
@@ -71,8 +71,10 @@ const Resource: React.FC = () => {
     {
       title: t('common:table.operations'),
       width: 64,
+      fixed: 'right' as const,
       render: (text: string, record) => (
         <Dropdown
+          trigger={['hover', 'click']}
           overlayClassName='fc-table-action-dropdown'
           overlay={
             <Menu>
@@ -337,6 +339,7 @@ const Resource: React.FC = () => {
                 rowKey='id'
                 columns={teamMemberColumns}
                 dataSource={memberList && memberList.length > 0 ? memberList.filter((item) => item.user_group && item.user_group.name.indexOf(searchMemberValue) !== -1) : []}
+                scroll={{ x: 'max-content' }}
                 loading={memberLoading}
                 pagination={pagination}
               />
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index fe2c7cd63..56a20a4fa 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -114,8 +114,10 @@ const Resource: React.FC = () => {
     {
       title: t('common:table.operations'),
       width: 64,
+      fixed: 'right' as const,
       render: (text: string, record) => (
         <Dropdown
+          trigger={['hover', 'click']}
           overlayClassName='fc-table-action-dropdown'
           overlay={
             <Menu>
@@ -406,7 +408,7 @@ const Resource: React.FC = () => {
                 </Button>
               </Row>
 
-              <Table className='mt-2' size='small' rowKey='id' columns={teamMemberColumns} dataSource={memberList} loading={memberLoading} pagination={pagination} />
+              <Table className='mt-2' size='small' rowKey='id' columns={teamMemberColumns} dataSource={memberList} loading={memberLoading} pagination={pagination} scroll={{ x: 'max-content' }} />
             </div>
           ) : (
             <div className='blank-busi-holder'>
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index a7fa08f07..4c8f72328 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -138,9 +138,11 @@ const Resource: React.FC = () => {
     {
       title: t('common:table.operations'),
       width: 64,
+      fixed: 'right' as const,
       render: (text: string, record) => {
         return (
           <Dropdown
+            trigger={['hover', 'click']}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -306,6 +308,7 @@ const Resource: React.FC = () => {
           rowKey='id'
           columns={ajustColumns(userColumns, columnsConfigs)}
           {...tableProps}
+          scroll={{ x: 'max-content' }}
           pagination={{
             ...tableProps.pagination,
             ...pagination,
diff --git a/src/pages/variableConfigs/index.tsx b/src/pages/variableConfigs/index.tsx
index d8dd638f2..f3ddfa4b4 100644
--- a/src/pages/variableConfigs/index.tsx
+++ b/src/pages/variableConfigs/index.tsx
@@ -89,6 +89,7 @@ export default function index() {
           className='mt-2'
           rowKey='id'
           size='small'
+          scroll={{ x: 'max-content' }}
           columns={[
             {
               dataIndex: 'ckey',
@@ -112,9 +113,11 @@ export default function index() {
             {
               title: t('common:table.operations'),
               width: 64,
+      fixed: 'right' as const,
               render: (record) => {
                 return (
                   <Dropdown
+                    trigger={['hover', 'click']}
                     overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>

From 617fcfe1afb10edc804b10ae31e2b1276d967676 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 12:16:15 +0800
Subject: [PATCH 28/44] fix(table): remove measure-row collapse and tune
 fixed-column edge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove `visibility: collapse` on the rc-table measure row — Chrome
treats it as collapsing layout, so MeasureCell reports offsetWidth=0
when there is no data. Combined with the recent fixed-right + scroll
x:max-content rollout, empty-state tables had the first column absorb
all available width. Inline `height:0; fontSize:0` on the tr already
hides the row, so the rule was redundant anyway.

Also flip the ping-right shadow gradient so the darker edge sits next
to the fixed column instead of away from it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/theme/default.less | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/theme/default.less b/src/theme/default.less
index 25bcffa32..dca6cc390 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -64,25 +64,33 @@ mark {
     overflow: hidden;
   }
 
-  tr.ant-table-measure-row {
-    visibility: collapse;
-  }
-
   .ant-table-tbody .ant-table-cell-fix-left,
   .ant-table-tbody .ant-table-cell-fix-right {
     background: var(--fc-fill-2);
+    z-index: 6;
   }
 
   .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
   .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right,
   .ant-table-tbody > tr > td.ant-table-cell-fix-left.ant-table-cell-row-hover,
   .ant-table-tbody > tr > td.ant-table-cell-fix-right.ant-table-cell-row-hover {
-    background: rgb(var(--fc-fill-5-rgb) / 0.2);
+    background: var(--fc-fill-2-5);
+    z-index: 7;
   }
 
   .ant-table-thead > tr > th.ant-table-cell-fix-left,
   .ant-table-thead > tr > th.ant-table-cell-fix-right {
     background: var(--fc-fill-2-5);
+    z-index: 8;
+  }
+
+  .ant-table-ping-right .ant-table-cell-fix-right-first::after {
+    left: 0;
+    right: auto;
+    width: 16px;
+    background: linear-gradient(to right, transparent, var(--fc-boxshadow-base-color));
+    box-shadow: none;
+    pointer-events: none;
   }
 
   .ant-table-thead > tr > th {

From 73b5a4c3edd203540c3c0a8a0788d22130fdfd17 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 14:40:28 +0800
Subject: [PATCH 29/44] fix(table): stabilize task table layouts

---
 src/pages/task/index.tsx    | 28 ++++++++++++++--------------
 src/pages/taskTpl/index.tsx | 13 ++++++++-----
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index de95139f1..ced1012d3 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -141,10 +141,23 @@ const index = (_props: any) => {
       },
     ] as any,
     [
+      {
+        title: t('task.creator'),
+        dataIndex: 'create_by',
+        width: 100,
+      },
+      {
+        title: t('task.created'),
+        dataIndex: 'create_at',
+        width: 160,
+        render: (text) => {
+          return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
+        },
+      },
       {
         title: t('table.operations'),
         width: 64,
-      fixed: 'right' as const,
+        fixed: 'right' as const,
         render: (_text, record) => {
           return (
             <Dropdown
@@ -170,19 +183,6 @@ const index = (_props: any) => {
           );
         },
       },
-      {
-        title: t('task.creator'),
-        dataIndex: 'create_by',
-        width: 100,
-      },
-      {
-        title: t('task.created'),
-        dataIndex: 'create_at',
-        width: 160,
-        render: (text) => {
-          return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
-        },
-      },
     ],
   );
 
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index 39dea013c..ce6b299ff 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -41,6 +41,7 @@ import UnBindTags from './unBindTags';
 
 const N9E_GIDS_LOCALKEY = 'N9E_TASK_TPL_NODE_ID';
 const SEARCH_SESSION_KEY = 'taskTpl_query';
+const TASK_TPL_TABLE_SCROLL_X = 1052;
 
 function getTableData(options: any, gids: string | undefined, query: string) {
   if (gids) {
@@ -120,6 +121,7 @@ const index = (_props: any) => {
       {
         title: t('tpl.title'),
         dataIndex: 'title',
+        width: 360,
         render: (text, record) => {
           const groupName = _.find(busiGroups, { id: record.group_id })?.name;
           return (
@@ -138,6 +140,7 @@ const index = (_props: any) => {
       {
         title: t('tpl.tags'),
         dataIndex: 'tags',
+        width: 280,
         render: (text) => {
           return <TableTags data={text} maxVisible={2} maxTagWidth={160} onTagClick={handleTagClick} />;
         },
@@ -145,12 +148,12 @@ const index = (_props: any) => {
       {
         title: t('tpl.creator'),
         dataIndex: 'create_by',
-        width: 100,
+        width: 120,
       },
       {
         title: t('tpl.last_updated'),
         dataIndex: 'update_at',
-        width: 160,
+        width: 180,
         render: (text) => {
           return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
         },
@@ -158,7 +161,7 @@ const index = (_props: any) => {
       {
         title: t('table.operations'),
         width: 64,
-      fixed: 'right' as const,
+        fixed: 'right' as const,
         render: (_text, record) => {
           return (
             <Dropdown
@@ -223,7 +226,7 @@ const index = (_props: any) => {
       <div style={{ display: 'flex' }}>
         <BusinessGroupSideBarWithAll gids={gids} setGids={setGids} localeKey={N9E_GIDS_LOCALKEY} allOptionLabel={t('common:tpl.allOptionLabel')} />
         {gids ? (
-          <div className='fc-border rounded-lg p-4' style={{ flex: 1 }}>
+          <div className='fc-border rounded-lg p-4' style={{ flex: 1, minWidth: 0 }}>
             <Row>
               <Col span={14} className='mb-2'>
                 <SearchInput
@@ -281,7 +284,7 @@ const index = (_props: any) => {
               rowKey='id'
               columns={columns}
               {...(tableProps as any)}
-              scroll={{ x: 'max-content' }}
+              scroll={{ x: TASK_TPL_TABLE_SCROLL_X }}
               rowSelection={{
                 selectedRowKeys: selectedIds,
                 onChange: (selectedRowKeys) => {

From 552d2b4035cf9c494ab74fcd2d17d1d5b3f6060b Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 15:27:29 +0800
Subject: [PATCH 30/44] fix(table): refine dropdown interactions and sorter
 style

---
 .../alertCurEvent/pages/List/AlertTable.tsx   |  3 +-
 src/pages/alertRules/List/ListNG.tsx          |  1 +
 src/pages/historyEvents/ListNG/index.tsx      |  1 +
 src/pages/warning/shield/index.tsx            |  1 +
 src/pages/warning/subscribe/ListNG.tsx        |  1 +
 src/theme/default.less                        | 46 +++++++++++++++++++
 6 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/pages/alertCurEvent/pages/List/AlertTable.tsx b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
index 36b6877b9..a99629eb7 100644
--- a/src/pages/alertCurEvent/pages/List/AlertTable.tsx
+++ b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
@@ -191,6 +191,7 @@ export default function AlertTable(props: IProps) {
         return (
           <div>
             <Dropdown
+              trigger={['hover', 'click']}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
@@ -225,7 +226,7 @@ export default function AlertTable(props: IProps) {
                       </TableActionButton>
                     </Menu.Item>
                   )}
-                  <Menu.Divider />
+                  {(IS_PLUS || !_.includes(['firemap', 'northstar'], record?.rule_prod)) && <Menu.Divider />}
                   <Menu.Item>
                     <TableActionButton
                       danger
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 9d04eea6f..495e64989 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -275,6 +275,7 @@ export default function AlertRules(props: Props) {
               const anomalyEnabled = _.get(record, ['rule_config', 'anomaly_trigger', 'enable']);
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/historyEvents/ListNG/index.tsx b/src/pages/historyEvents/ListNG/index.tsx
index 430b0c2df..2068b0377 100644
--- a/src/pages/historyEvents/ListNG/index.tsx
+++ b/src/pages/historyEvents/ListNG/index.tsx
@@ -190,6 +190,7 @@ const Event = (props: Props) => {
           return (
             <div>
               <Dropdown
+                trigger={['hover', 'click']}
                 overlayClassName='fc-table-action-dropdown'
                 overlay={
                   <Menu>
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index a2ec84134..a6868de44 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -273,6 +273,7 @@ const Shield: React.FC = () => {
         render: (text: undefined, record: shieldItem) => {
           return (
             <Dropdown
+              trigger={['hover', 'click']}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 4f9b0c3bf..a8249b5ad 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -273,6 +273,7 @@ const Subscribe = (props: Props) => {
             render: (text: string, record: subscribeItem) => {
               return (
                 <Dropdown
+                  trigger={['hover', 'click']}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/theme/default.less b/src/theme/default.less
index dca6cc390..668b3e28c 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -125,6 +125,8 @@ mark {
   }
 
   .ant-table-thead > tr > th {
+    background: var(--fc-fill-2-5);
+    color: var(--fc-text-3);
     white-space: nowrap;
   }
 
@@ -260,6 +262,50 @@ mark {
   }
 }
 
+// 2026-05 table 设计规范：排序 icon 替换为线性箭头，hover 横向并排 ↑↓，已排序只显示当前方向
+.ant-table-column-sorter {
+  .ant-table-column-sorter-inner {
+    flex-direction: row;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .ant-table-column-sorter-up,
+  .ant-table-column-sorter-down {
+    width: 12px;
+    height: 12px;
+    background-color: currentColor;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+
+    svg {
+      display: none;
+    }
+  }
+
+  .ant-table-column-sorter-up {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z'/%3E%3C/svg%3E");
+  }
+
+  .ant-table-column-sorter-down {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896'%3E%3Cpath d='M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861a31.96 31.96 0 0048.3 0L868 478.5c4.5-5.2.8-13.2-6-13.2z'/%3E%3C/svg%3E");
+  }
+}
+
+// 已排序时，非活跃方向的箭头隐藏不占空间
+.ant-table-column-has-sorters .ant-table-column-sorter-inner {
+  &:has(.ant-table-column-sorter-up.active) .ant-table-column-sorter-down,
+  &:has(.ant-table-column-sorter-down.active) .ant-table-column-sorter-up {
+    display: none;
+  }
+}
+
 /* antd */
 
 .affix-bottom-shadow {

From 46c05424e000c1f04cebeed0530faed0f778ac18 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 15:33:38 +0800
Subject: [PATCH 31/44] fix(table): align sorter icon with title

---
 src/App.less           | 18 ++++++++++++++++++
 src/theme/default.less | 16 ++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/App.less b/src/App.less
index 58a7c369f..8eba4dc16 100644
--- a/src/App.less
+++ b/src/App.less
@@ -381,6 +381,24 @@ input::placeholder {
   }
 }
 
+.ant-table-thead > tr > th {
+  .ant-table-column-sorters {
+    justify-content: flex-start;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .ant-table-column-title {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .ant-table-column-sorter {
+    flex: none;
+    margin-left: 0;
+  }
+}
+
 // 2026-05 table 设计规范：排序 icon 替换为线性箭头，hover 横向并排 ↑↓，已排序只显示当前方向
 .ant-table-column-sorter {
   .ant-table-column-sorter-inner {
diff --git a/src/theme/default.less b/src/theme/default.less
index 668b3e28c..a458ec7df 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -94,6 +94,22 @@ mark {
   }
 
   .ant-table-thead > tr > th {
+    .ant-table-column-sorters {
+      justify-content: flex-start;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .ant-table-column-title {
+      flex: 0 1 auto;
+      min-width: 0;
+    }
+
+    .ant-table-column-sorter {
+      flex: none;
+      margin-left: 0;
+    }
+
     .ant-table-column-sorter,
     .ant-table-filter-trigger {
       opacity: 0;

From 8142e2ed3cd24e3142704b1bb315ed5e8eae346f Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 16:25:43 +0800
Subject: [PATCH 32/44] fix(table): use fill-2-5 for sorted column bg

---
 scripts/generate_antd_dark_less.js | 6 +++---
 scripts/generate_antd_gold_less.js | 6 +++---
 src/theme/antd.dark.less           | 4 ++--
 src/theme/antd.light-gold.less     | 4 ++--
 src/theme/default.less             | 2 +-
 vite.config.ts                     | 6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/scripts/generate_antd_dark_less.js b/scripts/generate_antd_dark_less.js
index f518af9fe..3819ca790 100644
--- a/scripts/generate_antd_dark_less.js
+++ b/scripts/generate_antd_dark_less.js
@@ -50,7 +50,7 @@ function saveLess(filePath, filename, callback) {
         'table-header-bg': 'var(--fc-fill-2-5)',
         'table-header-color': 'var(--fc-text-3)',
         'table-header-sort-bg': 'var(--fc-fill-2-5)',
-        'table-body-sort-bg': 'rgb(var(--fc-fill-5-rgb) / 0.1)',
+        'table-body-sort-bg': 'var(--fc-fill-2-5)',
         'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
         'table-selected-row-color': 'inherit',
         // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
@@ -73,8 +73,8 @@ function saveLess(filePath, filename, callback) {
         'table-font-size-md': '14px',
         'table-font-size-sm': '@table-font-size',
         'table-header-cell-split-color': 'var(--fc-border-color)',
-        'table-header-sort-active-bg': 'rgb(var(--fc-fill-5-rgb) / 0.4)',
-        'table-fixed-header-sort-active-bg': 'var(--fc-fill-3)',
+        'table-header-sort-active-bg': 'var(--fc-fill-2-5)',
+        'table-fixed-header-sort-active-bg': 'var(--fc-fill-2-5)',
         'border-radius-base': '8px',
         'border-radius-sm': '4px',
         'checkbox-border-radius': '2px',
diff --git a/scripts/generate_antd_gold_less.js b/scripts/generate_antd_gold_less.js
index 66bf1c303..e237c5205 100644
--- a/scripts/generate_antd_gold_less.js
+++ b/scripts/generate_antd_gold_less.js
@@ -52,7 +52,7 @@ function saveLess(filePath, filename, callback) {
         'table-header-bg': 'var(--fc-fill-2-5)',
         'table-header-color': 'var(--fc-text-3)',
         'table-header-sort-bg': 'var(--fc-fill-2-5)',
-        'table-body-sort-bg': 'rgb(var(--fc-fill-5-rgb) / 0.1)',
+        'table-body-sort-bg': 'var(--fc-fill-2-5)',
         'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
         'table-selected-row-color': 'inherit',
         // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
@@ -75,8 +75,8 @@ function saveLess(filePath, filename, callback) {
         'table-font-size-md': '14px',
         'table-font-size-sm': '@table-font-size',
         'table-header-cell-split-color': 'var(--fc-border-color)',
-        'table-header-sort-active-bg': 'rgb(var(--fc-fill-5-rgb) / 0.4)',
-        'table-fixed-header-sort-active-bg': 'var(--fc-fill-3)',
+        'table-header-sort-active-bg': 'var(--fc-fill-2-5)',
+        'table-fixed-header-sort-active-bg': 'var(--fc-fill-2-5)',
         'border-radius-base': '8px',
         'border-radius-sm': '4px',
         'checkbox-border-radius': '2px',
diff --git a/src/theme/antd.dark.less b/src/theme/antd.dark.less
index bf02e5fa2..2545474f1 100644
--- a/src/theme/antd.dark.less
+++ b/src/theme/antd.dark.less
@@ -22002,7 +22002,7 @@ div.ant-table-summary {
   transition: all 0.3s;
 }
 .ant-table-thead th.ant-table-column-has-sorters:hover {
-  background: rgb(var(--fc-fill-5-rgb) / 0.4);
+  background: var(--fc-fill-2-5);
 }
 .ant-table-thead th.ant-table-column-has-sorters:hover::before {
   background-color: transparent !important;
@@ -22012,7 +22012,7 @@ div.ant-table-summary {
 }
 .ant-table-thead th.ant-table-column-has-sorters.ant-table-cell-fix-left:hover,
 .ant-table-thead th.ant-table-column-has-sorters.ant-table-cell-fix-right:hover {
-  background: var(--fc-fill-3);
+  background: var(--fc-fill-2-5);
 }
 .ant-table-thead th.ant-table-column-sort {
   background: var(--fc-fill-2-5);
diff --git a/src/theme/antd.light-gold.less b/src/theme/antd.light-gold.less
index d8ca8b7f5..da71623bd 100644
--- a/src/theme/antd.light-gold.less
+++ b/src/theme/antd.light-gold.less
@@ -21997,7 +21997,7 @@ div.ant-table-summary {
   transition: all 0.3s;
 }
 .ant-table-thead th.ant-table-column-has-sorters:hover {
-  background: rgb(var(--fc-fill-5-rgb) / 0.4);
+  background: var(--fc-fill-2-5);
 }
 .ant-table-thead th.ant-table-column-has-sorters:hover::before {
   background-color: transparent !important;
@@ -22007,7 +22007,7 @@ div.ant-table-summary {
 }
 .ant-table-thead th.ant-table-column-has-sorters.ant-table-cell-fix-left:hover,
 .ant-table-thead th.ant-table-column-has-sorters.ant-table-cell-fix-right:hover {
-  background: var(--fc-fill-3);
+  background: var(--fc-fill-2-5);
 }
 .ant-table-thead th.ant-table-column-sort {
   background: var(--fc-fill-2-5);
diff --git a/src/theme/default.less b/src/theme/default.less
index a458ec7df..27fb3fa45 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -148,7 +148,7 @@ mark {
 
   .ant-table-thead > tr > th.ant-table-column-sort,
   .ant-table-tbody > tr > td.ant-table-column-sort {
-    background: rgb(var(--fc-fill-5-rgb) / 0.4);
+    background: var(--fc-fill-2-5);
   }
 
   .ant-table.ant-table-bordered {
diff --git a/vite.config.ts b/vite.config.ts
index 8f7552660..e0d04a38e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -148,7 +148,7 @@ export default defineConfig(({ mode }) => {
             'table-header-bg': 'var(--fc-fill-2-5)',
             'table-header-color': 'var(--fc-text-3)',
             'table-header-sort-bg': 'var(--fc-fill-2-5)',
-            'table-body-sort-bg': 'rgb(var(--fc-fill-5-rgb) / 0.1)',
+            'table-body-sort-bg': 'var(--fc-fill-2-5)',
             'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
             'table-selected-row-color': 'inherit',
             // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
@@ -171,8 +171,8 @@ export default defineConfig(({ mode }) => {
             'table-font-size-md': '14px',
             'table-font-size-sm': '@table-font-size',
             'table-header-cell-split-color': 'var(--fc-border-color)',
-            'table-header-sort-active-bg': 'rgb(var(--fc-fill-5-rgb) / 0.4)',
-            'table-fixed-header-sort-active-bg': 'var(--fc-fill-3)',
+            'table-header-sort-active-bg': 'var(--fc-fill-2-5)',
+            'table-fixed-header-sort-active-bg': 'var(--fc-fill-2-5)',
             'border-radius-base': '8px',
             'border-radius-sm': '4px',
             'checkbox-border-radius': '2px',

From dad392ddafba45b26080dd1d5a7b301bd0e9fee7 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 20:15:52 +0800
Subject: [PATCH 33/44] fix(table): remove sorted column color override

---
 scripts/generate_antd_dark_less.js | 2 +-
 scripts/generate_antd_gold_less.js | 2 +-
 src/theme/antd.dark.less           | 2 +-
 src/theme/antd.light-blue.less     | 4 ++--
 src/theme/antd.light-gold.less     | 2 +-
 src/theme/default.less             | 5 -----
 vite.config.ts                     | 2 +-
 7 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/scripts/generate_antd_dark_less.js b/scripts/generate_antd_dark_less.js
index 3819ca790..4f63c5627 100644
--- a/scripts/generate_antd_dark_less.js
+++ b/scripts/generate_antd_dark_less.js
@@ -50,7 +50,7 @@ function saveLess(filePath, filename, callback) {
         'table-header-bg': 'var(--fc-fill-2-5)',
         'table-header-color': 'var(--fc-text-3)',
         'table-header-sort-bg': 'var(--fc-fill-2-5)',
-        'table-body-sort-bg': 'var(--fc-fill-2-5)',
+        'table-body-sort-bg': 'var(--fc-fill-2)',
         'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
         'table-selected-row-color': 'inherit',
         // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
diff --git a/scripts/generate_antd_gold_less.js b/scripts/generate_antd_gold_less.js
index e237c5205..b3c88f02e 100644
--- a/scripts/generate_antd_gold_less.js
+++ b/scripts/generate_antd_gold_less.js
@@ -52,7 +52,7 @@ function saveLess(filePath, filename, callback) {
         'table-header-bg': 'var(--fc-fill-2-5)',
         'table-header-color': 'var(--fc-text-3)',
         'table-header-sort-bg': 'var(--fc-fill-2-5)',
-        'table-body-sort-bg': 'var(--fc-fill-2-5)',
+        'table-body-sort-bg': 'var(--fc-fill-2)',
         'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
         'table-selected-row-color': 'inherit',
         // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.
diff --git a/src/theme/antd.dark.less b/src/theme/antd.dark.less
index 2545474f1..aa5222d5c 100644
--- a/src/theme/antd.dark.less
+++ b/src/theme/antd.dark.less
@@ -22021,7 +22021,7 @@ div.ant-table-summary {
   background-color: transparent !important;
 }
 td.ant-table-column-sort {
-  background: var(--fc-fill-2-5);
+  background: var(--fc-fill-2);
 }
 .ant-table-column-title {
   position: relative;
diff --git a/src/theme/antd.light-blue.less b/src/theme/antd.light-blue.less
index 7de19d88a..75d088f67 100644
--- a/src/theme/antd.light-blue.less
+++ b/src/theme/antd.light-blue.less
@@ -22010,13 +22010,13 @@ div.ant-table-summary {
   background: #f5f5f5;
 }
 .ant-table-thead th.ant-table-column-sort {
-  background: #EEF6FE;
+  background: var(--fc-fill-2-5);
 }
 .ant-table-thead th.ant-table-column-sort::before {
   background-color: transparent !important;
 }
 td.ant-table-column-sort {
-  background: #fafafa;
+  background: var(--fc-fill-2);
 }
 .ant-table-column-title {
   position: relative;
diff --git a/src/theme/antd.light-gold.less b/src/theme/antd.light-gold.less
index da71623bd..980eb6073 100644
--- a/src/theme/antd.light-gold.less
+++ b/src/theme/antd.light-gold.less
@@ -22016,7 +22016,7 @@ div.ant-table-summary {
   background-color: transparent !important;
 }
 td.ant-table-column-sort {
-  background: var(--fc-fill-2-5);
+  background: var(--fc-fill-2);
 }
 .ant-table-column-title {
   position: relative;
diff --git a/src/theme/default.less b/src/theme/default.less
index 27fb3fa45..823c802f2 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -146,11 +146,6 @@ mark {
     white-space: nowrap;
   }
 
-  .ant-table-thead > tr > th.ant-table-column-sort,
-  .ant-table-tbody > tr > td.ant-table-column-sort {
-    background: var(--fc-fill-2-5);
-  }
-
   .ant-table.ant-table-bordered {
     > .ant-table-title,
     > .ant-table-footer,
diff --git a/vite.config.ts b/vite.config.ts
index e0d04a38e..38e8797a6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -148,7 +148,7 @@ export default defineConfig(({ mode }) => {
             'table-header-bg': 'var(--fc-fill-2-5)',
             'table-header-color': 'var(--fc-text-3)',
             'table-header-sort-bg': 'var(--fc-fill-2-5)',
-            'table-body-sort-bg': 'var(--fc-fill-2-5)',
+            'table-body-sort-bg': 'var(--fc-fill-2)',
             'table-row-hover-bg': 'rgb(var(--fc-fill-5-rgb) / 0.2)',
             'table-selected-row-color': 'inherit',
             // AntD calls color functions on selected/border tokens; patch runtime CSS vars in theme/default.less.

From f74a5cc0bc5c0b31399500eabd6f898631e6008c Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Mon, 18 May 2026 20:16:00 +0800
Subject: [PATCH 34/44] feat(alerts): add event tag collapse toggle

---
 .../alertCurEvent/pages/List/AlertTable.tsx   | 17 +++--
 src/pages/alertCurEvent/pages/List/index.tsx  | 20 +++++-
 src/pages/alertCurEvent/style.less            | 71 ++++++++++++++++++-
 3 files changed, 99 insertions(+), 9 deletions(-)

diff --git a/src/pages/alertCurEvent/pages/List/AlertTable.tsx b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
index a99629eb7..9e87b9b6f 100644
--- a/src/pages/alertCurEvent/pages/List/AlertTable.tsx
+++ b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tag, Button, Table, Dropdown, Menu, Space } from 'antd';
+import { Tag, Table, Dropdown, Menu, Space } from 'antd';
 import { useHistory } from 'react-router-dom';
 import moment from 'moment';
 import _ from 'lodash';
@@ -32,6 +32,7 @@ interface IProps {
   selectedRowKeys: number[];
   setSelectedRowKeys: (selectedRowKeys: number[]) => void;
   setRefreshFlag: (refreshFlag: string) => void;
+  eventColumnExpanded: boolean;
 }
 
 function formatDuration(ms: number) {
@@ -58,7 +59,7 @@ function formatDuration(ms: number) {
 }
 
 export default function AlertTable(props: IProps) {
-  const { filter, setFilter, selectedRowKeys, setSelectedRowKeys, params, setRefreshFlag } = props;
+  const { filter, setFilter, selectedRowKeys, setSelectedRowKeys, params, setRefreshFlag, eventColumnExpanded } = props;
   const history = useHistory();
   const { t } = useTranslation(NS);
   const { datasourceList } = useContext(CommonStateContext);
@@ -75,10 +76,13 @@ export default function AlertTable(props: IProps) {
       render(title, record) {
         const currentDatasourceCate = _.find(allCates, { value: record.cate });
         const currentDatasource = _.find(datasourceList, { id: record.datasource_id });
+        const tags = record.tags || [];
+        const visibleTags = eventColumnExpanded ? tags : tags.slice(0, 3);
+        const hiddenTagsCount = eventColumnExpanded ? 0 : Math.max(tags.length - visibleTags.length, 0);
 
         return (
-          <div className='max-w-[60vw]'>
-            <div className='mb-2'>
+          <div className='alert-event-content max-w-[60vw]'>
+            <div className='alert-event-title mb-2'>
               <Space>
                 {currentDatasourceCate && currentDatasource ? (
                   <Space>
@@ -106,8 +110,8 @@ export default function AlertTable(props: IProps) {
                 </a>
               </Space>
             </div>
-            <div>
-              {_.map(record.tags, (item) => {
+            <div className={`alert-event-tags ${eventColumnExpanded ? 'is-expanded' : 'is-collapsed'}`}>
+              {_.map(visibleTags, (item) => {
                 return (
                   <Tag
                     key={item}
@@ -130,6 +134,7 @@ export default function AlertTable(props: IProps) {
                   </Tag>
                 );
               })}
+              {hiddenTagsCount > 0 && <Tag className='alert-event-more-tag'>+{hiddenTagsCount}</Tag>}
             </div>
           </div>
         );
diff --git a/src/pages/alertCurEvent/pages/List/index.tsx b/src/pages/alertCurEvent/pages/List/index.tsx
index 3cc49d98c..f273c5626 100644
--- a/src/pages/alertCurEvent/pages/List/index.tsx
+++ b/src/pages/alertCurEvent/pages/List/index.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useState, useMemo, useEffect, useRef, useCallback } from 'react';
-import { Input, Checkbox, Collapse, Segmented, Button, Space, Row, Col } from 'antd';
+import { Input, Checkbox, Collapse, Segmented, Button, Space, Tooltip } from 'antd';
 import { AlertOutlined, SearchOutlined } from '@ant-design/icons';
+import { ListChevronsDownUp, ListChevronsUpDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import queryString from 'query-string';
@@ -109,6 +110,7 @@ const AlertCurEvent: React.FC = () => {
   );
   const [refreshFlag, setRefreshFlag] = useState<string>(_.uniqueId('refresh_'));
   const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
+  const [eventColumnExpanded, setEventColumnExpanded] = useState(false);
   const params = getRequestParamsByFilter(filter);
 
   type RuleCardsRequestParams = {
@@ -323,7 +325,20 @@ const AlertCurEvent: React.FC = () => {
                     }}
                   >
                     <div className='p-2'>
-                      <AggrRuleDropdown cardList={cardList} filter={filter} setFilter={setFilterPatch} reloadRuleCards={reloadRuleCards} />
+                      <div className='alert-event-summary-toolbar'>
+                        <AggrRuleDropdown cardList={cardList} filter={filter} setFilter={setFilterPatch} reloadRuleCards={reloadRuleCards} />
+                        <Tooltip title={eventColumnExpanded ? t('common:btn.collapse') : t('common:btn.expand')}>
+                          <Button
+                            type='text'
+                            size='small'
+                            className='alert-event-expand-btn'
+                            icon={eventColumnExpanded ? <ListChevronsDownUp size={14} /> : <ListChevronsUpDown size={14} />}
+                            onClick={() => {
+                              setEventColumnExpanded(!eventColumnExpanded);
+                            }}
+                          />
+                        </Tooltip>
+                      </div>
                       <AlertCard filter={filter} setFilter={setFilterPatch} cardList={cardList} />
                     </div>
                   </div>
@@ -381,6 +396,7 @@ const AlertCurEvent: React.FC = () => {
                       setSelectedRowKeys={setSelectedRowKeys}
                       params={params}
                       setRefreshFlag={setRefreshFlag}
+                      eventColumnExpanded={eventColumnExpanded}
                     />
                   </div>
                 </div>
diff --git a/src/pages/alertCurEvent/style.less b/src/pages/alertCurEvent/style.less
index c8bfcfaa4..c059a69cd 100644
--- a/src/pages/alertCurEvent/style.less
+++ b/src/pages/alertCurEvent/style.less
@@ -108,6 +108,75 @@
     text-overflow: unset !important;
   }
 
+  .alert-event-summary-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+
+    > :first-child {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  .alert-event-expand-btn {
+    flex: none;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+
+    .ant-btn-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  .alert-event-content {
+    min-width: 0;
+  }
+
+  .alert-event-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .alert-event-tags {
+    display: flex;
+    gap: 4px;
+
+    &.is-expanded {
+      flex-wrap: wrap;
+    }
+
+    &.is-collapsed {
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    .ant-tag {
+      display: inline-flex;
+      align-items: center;
+      max-width: 240px;
+      margin-right: 0;
+      margin-bottom: 0;
+
+      > div {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .alert-event-more-tag {
+      flex: none;
+      color: var(--fc-text-3);
+      background: var(--fc-fill-2-5);
+    }
+  }
+
   .ant-table table {
     border-collapse: collapse !important;
 
@@ -123,4 +192,4 @@
       border-left: 10px solid #23252b !important;
     }
   }
-}
\ No newline at end of file
+}

From 5de23be58a80702c654545b368783ca2dad83152 Mon Sep 17 00:00:00 2001
From: Fiona <baiyang.feng@outlook.com>
Date: Wed, 20 May 2026 10:12:07 +0800
Subject: [PATCH 35/44] fix(table): apply acceptance feedback on 0517

---
 src/pages/alertRules/List/ListNG.tsx          |  3 +-
 .../builtInComponents/Dashboards/index.tsx    |  5 ++--
 src/pages/dashboard/List/index.tsx            |  5 ++--
 .../embeddedProduct/pages/List/index.tsx      | 14 +++------
 .../pages/ListNG/index.tsx                    |  3 +-
 src/pages/recordingRules/PageTable.tsx        | 29 +++++++++----------
 src/pages/warning/subscribe/ListNG.tsx        | 27 ++++++++---------
 7 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 495e64989..c20fd5969 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -275,7 +275,8 @@ export default function AlertRules(props: Props) {
               const anomalyEnabled = _.get(record, ['rule_config', 'anomaly_trigger', 'enable']);
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  placement='bottomRight'
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index 82f752c84..3d2f61c32 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -196,11 +196,12 @@ export default function index(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
-      fixed: 'right' as const,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  placement='bottomRight'
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index 5748e9aec..3c43b8db4 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -306,11 +306,12 @@ export default function index() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
-      fixed: 'right' as const,
+                    fixed: 'right' as const,
                     render: (text: string, record: DashboardType) => {
                       return (
                         <Dropdown
-                          trigger={['hover', 'click']}
+                          trigger={['click']}
+                          placement='bottomRight'
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index 941e80255..e7358539d 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -17,14 +17,7 @@ import TableTags from '@/components/TableTags';
 
 import { NS, DETAIL_PATH } from '../../constants';
 import { EmbeddedProductParams, EmbeddedProductResponse } from '../../types';
-import {
-  getEmbeddedProducts,
-  addEmbeddedProducts,
-  updateEmbeddedProducts,
-  putEmbeddedProductsWeights,
-  deleteEmbeddedProducts,
-  putEmbeddedProductHide,
-} from '../../services';
+import { getEmbeddedProducts, addEmbeddedProducts, updateEmbeddedProducts, putEmbeddedProductsWeights, deleteEmbeddedProducts, putEmbeddedProductHide } from '../../services';
 import EmbeddedProductModal from '../../components/EmbeddedProductModal';
 
 import './style.less';
@@ -132,11 +125,12 @@ export default function Index() {
         title: t('common:table.operations'),
         dataIndex: 'operator',
         width: 64,
-      fixed: 'right' as const,
+        fixed: 'right' as const,
         render: (_val, record: EmbeddedProductResponse) => {
           return (
             <Dropdown
-              trigger={['hover', 'click']}
+              trigger={['click']}
+              placement='bottomRight'
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/notificationChannels/pages/ListNG/index.tsx b/src/pages/notificationChannels/pages/ListNG/index.tsx
index f21506313..a389e110c 100644
--- a/src/pages/notificationChannels/pages/ListNG/index.tsx
+++ b/src/pages/notificationChannels/pages/ListNG/index.tsx
@@ -300,7 +300,8 @@ export default function index() {
                     render: (record) => {
                       return (
                         <Dropdown
-                          trigger={['hover', 'click']}
+                          trigger={['click']}
+                          placement='bottomRight'
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index afac18925..85cf12135 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -133,20 +133,16 @@ const PageTable: React.FC<Props> = ({ gids }) => {
         title: t('common:datasource.name'),
         dataIndex: 'datasource_ids',
         render: (data) => {
-          return _.map(
-            _.filter(data, (item) => {
-              return _.find(groupedDatasourceList.prometheus, { id: item });
-            }),
-            (item) => {
-              if (item === 0) {
-                return (
-                  <Tag color='purple' key={item}>
-                    $all
-                  </Tag>
-                );
-              }
-              return <Tag key={item}>{_.find(groupedDatasourceList.prometheus, { id: item })?.name!}</Tag>;
-            },
+          return (
+            <TableTags
+              data={_.map(
+                _.filter(data, (item) => item === 0 || _.find(groupedDatasourceList.prometheus, { id: item })),
+                (item) => {
+                  if (item === 0) return '$all';
+                  return _.find(groupedDatasourceList.prometheus, { id: item })?.name!;
+                },
+              )}
+            />
           );
         },
       },
@@ -217,11 +213,12 @@ const PageTable: React.FC<Props> = ({ gids }) => {
         title: t('common:table.operations'),
         dataIndex: 'operator',
         width: 64,
-      fixed: 'right' as const,
+        fixed: 'right' as const,
         render: (data, record) => {
           return (
             <Dropdown
-              trigger={['hover', 'click']}
+              trigger={['click']}
+              placement='bottomRight'
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index a8249b5ad..1d26644f3 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -153,13 +153,11 @@ const Subscribe = (props: Props) => {
         render: (text: any) => {
           if (!text) return '-';
           return (
-            <>
-              {text
-                ? text.map((tag, index) => {
-                    return tag ? <div key={index}>{`${tag.func} ${_.includes(['in', 'not in'], tag.func) ? tag.value.split(' ').join(', ') : tag.value}`}</div> : null;
-                  })
-                : ''}
-            </>
+            <TableTags
+              data={_.compact(_.map(text, (tag) => (tag ? `${tag.func} ${_.includes(['in', 'not in'], tag.func) ? tag.value.split(' ').join(', ') : tag.value}` : '')))}
+              maxVisible={2}
+              maxTagWidth={160}
+            />
           );
         },
       },
@@ -168,13 +166,11 @@ const Subscribe = (props: Props) => {
         dataIndex: 'tags',
         render: (text: any) => {
           return (
-            <>
-              {text
-                ? text.map((tag, index) => {
-                    return tag ? <div key={index}>{`${tag.key} ${tag.func} ${_.includes(['in', 'not in'], tag.func) ? tag.value.split(' ').join(', ') : tag.value}`}</div> : null;
-                  })
-                : ''}
-            </>
+            <TableTags
+              data={_.compact(_.map(text, (tag) => (tag ? `${tag.key} ${tag.func} ${_.includes(['in', 'not in'], tag.func) ? tag.value.split(' ').join(', ') : tag.value}` : '')))}
+              maxVisible={2}
+              maxTagWidth={180}
+            />
           );
         },
       },
@@ -273,7 +269,8 @@ const Subscribe = (props: Props) => {
             render: (text: string, record: subscribeItem) => {
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  placement='bottomRight'
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>

From 0691219ebe64c190915fc51384e9161060aaeda0 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 16:47:14 +0800
Subject: [PATCH 36/44] feat(table): normalize table action dropdown alignment
 and trigger

Standardize all table action column Dropdowns to use `click`-only
trigger and explicit `align` prop for consistent positioning.
Includes minor formatting fixes (indentation, JSX simplification).
---
 src/pages/aiConfig/agents/pages/List.tsx      |  5 +-
 src/pages/aiConfig/llmConfigs/pages/List.tsx  |  5 +-
 src/pages/aiConfig/mcpServers/pages/List.tsx  |  5 +-
 .../aiConfig/skills/pages/ResourcesTable.tsx  |  5 +-
 .../alertCurEvent/pages/List/AlertTable.tsx   |  3 +-
 src/pages/alertRules/List/ListNG.tsx          |  2 +-
 .../builtInComponents/AlertRules/index.tsx    |  5 +-
 .../builtInComponents/CollectTpls/index.tsx   |  5 +-
 .../builtInComponents/Dashboards/index.tsx    |  2 +-
 src/pages/builtInComponents/Metrics/index.tsx | 65 ++++++++++---------
 src/pages/dashboard/List/index.tsx            |  2 +-
 .../components/TableSource/index.tsx          |  3 +-
 .../embeddedProduct/pages/List/index.tsx      |  2 +-
 src/pages/event/Table.tsx                     |  3 +-
 src/pages/event/card.tsx                      |  3 +-
 src/pages/eventPipeline/pages/List/index.tsx  |  5 +-
 src/pages/historyEvents/ListNG/index.tsx      |  3 +-
 src/pages/log/IndexPatterns/index.tsx         |  5 +-
 src/pages/metricsBuiltin/List.tsx             |  7 +-
 .../notificationChannels/pages/List/index.tsx |  5 +-
 .../pages/ListNG/index.tsx                    |  2 +-
 src/pages/notificationRules/pages/List.tsx    |  5 +-
 src/pages/recordingRules/PageTable.tsx        |  2 +-
 src/pages/task/index.tsx                      |  3 +-
 src/pages/taskTpl/index.tsx                   |  3 +-
 src/pages/user/business.tsx                   |  3 +-
 src/pages/user/groups.tsx                     | 14 +++-
 src/pages/user/users.tsx                      | 11 ++--
 src/pages/variableConfigs/index.tsx           |  5 +-
 src/pages/warning/shield/index.tsx            |  3 +-
 src/pages/warning/subscribe/ListNG.tsx        |  2 +-
 31 files changed, 110 insertions(+), 83 deletions(-)

diff --git a/src/pages/aiConfig/agents/pages/List.tsx b/src/pages/aiConfig/agents/pages/List.tsx
index 92b8fb14d..3cfd0a9a5 100644
--- a/src/pages/aiConfig/agents/pages/List.tsx
+++ b/src/pages/aiConfig/agents/pages/List.tsx
@@ -100,11 +100,12 @@ export default function List() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
-      fixed: 'right' as const,
+                    fixed: 'right' as const,
                     render: (record) => {
                       return (
                         <Dropdown
-                          trigger={['hover', 'click']}
+                          trigger={['click']}
+                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/aiConfig/llmConfigs/pages/List.tsx b/src/pages/aiConfig/llmConfigs/pages/List.tsx
index f564aeaa7..f531119bc 100644
--- a/src/pages/aiConfig/llmConfigs/pages/List.tsx
+++ b/src/pages/aiConfig/llmConfigs/pages/List.tsx
@@ -92,10 +92,11 @@ export default function List() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
-      fixed: 'right' as const,
+                    fixed: 'right' as const,
                     render: (record) => (
                       <Dropdown
-                        trigger={['hover', 'click']}
+                        trigger={['click']}
+                        align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                         overlayClassName='fc-table-action-dropdown'
                         overlay={
                           <Menu>
diff --git a/src/pages/aiConfig/mcpServers/pages/List.tsx b/src/pages/aiConfig/mcpServers/pages/List.tsx
index ff30d1a60..a69ab481e 100644
--- a/src/pages/aiConfig/mcpServers/pages/List.tsx
+++ b/src/pages/aiConfig/mcpServers/pages/List.tsx
@@ -77,10 +77,11 @@ export default function List() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
-      fixed: 'right' as const,
+                    fixed: 'right' as const,
                     render: (record) => (
                       <Dropdown
-                        trigger={['hover', 'click']}
+                        trigger={['click']}
+                        align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                         overlayClassName='fc-table-action-dropdown'
                         overlay={
                           <Menu>
diff --git a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
index 5d638b3a4..1ad50659b 100644
--- a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
+++ b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
@@ -147,11 +147,12 @@ export default function ResourcesTable(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
-      fixed: 'right' as const,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/alertCurEvent/pages/List/AlertTable.tsx b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
index 9e87b9b6f..f8031153a 100644
--- a/src/pages/alertCurEvent/pages/List/AlertTable.tsx
+++ b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
@@ -196,7 +196,8 @@ export default function AlertTable(props: IProps) {
         return (
           <div>
             <Dropdown
-              trigger={['hover', 'click']}
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index c20fd5969..0ca46da42 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -276,7 +276,7 @@ export default function AlertRules(props: Props) {
               return (
                 <Dropdown
                   trigger={['click']}
-                  placement='bottomRight'
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index ea182ad7b..3c21298e5 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -236,11 +236,12 @@ export default function index(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
-      fixed: 'right' as const,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/builtInComponents/CollectTpls/index.tsx b/src/pages/builtInComponents/CollectTpls/index.tsx
index d2abd1df3..42691c29e 100644
--- a/src/pages/builtInComponents/CollectTpls/index.tsx
+++ b/src/pages/builtInComponents/CollectTpls/index.tsx
@@ -155,11 +155,12 @@ export default function index(props: Props) {
           {
             title: t('common:table.operations'),
             width: 64,
-      fixed: 'right' as const,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index 3d2f61c32..708554cb4 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -201,7 +201,7 @@ export default function index(props: Props) {
               return (
                 <Dropdown
                   trigger={['click']}
-                  placement='bottomRight'
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/builtInComponents/Metrics/index.tsx b/src/pages/builtInComponents/Metrics/index.tsx
index 53f481ce1..aa1389e66 100644
--- a/src/pages/builtInComponents/Metrics/index.tsx
+++ b/src/pages/builtInComponents/Metrics/index.tsx
@@ -148,7 +148,8 @@ export default function index(props: Props) {
       render: (data, record: any) => {
         return (
           <Dropdown
-            trigger={['hover', 'click']}
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
@@ -164,10 +165,10 @@ export default function index(props: Props) {
                         setRefreshFlag(_.uniqueId('refreshFlag_'));
                       }}
                     >
-                    <TableActionButton actionIcon='copy'>{t('common:btn.clone')}</TableActionButton>
-                  </FormModal>
-                </Menu.Item>
-              )}
+                      <TableActionButton actionIcon='copy'>{t('common:btn.clone')}</TableActionButton>
+                    </FormModal>
+                  </Menu.Item>
+                )}
                 {actionAuth.edit && record.updated_by !== 'system' && (
                   <Menu.Item>
                     <FormModal
@@ -180,34 +181,34 @@ export default function index(props: Props) {
                         setRefreshFlag(_.uniqueId('refreshFlag_'));
                       }}
                     >
-                    <TableActionButton actionIcon='edit'>{t('common:btn.edit')}</TableActionButton>
-                  </FormModal>
-                </Menu.Item>
-              )}
-              {actionAuth.delete && record.updated_by !== 'system' && (
-                <>
-                  <Menu.Divider />
-                  <Menu.Item>
-                    <TableActionButton
-                      danger
-                      actionIcon='delete'
-                      onClick={() => {
-                        Modal.confirm({
-                          title: t('common:confirm.delete'),
-                          onOk() {
-                            deleteMetrics([record.id]).then(() => {
-                              message.success(t('common:success.delete'));
-                              setRefreshFlag(_.uniqueId('refreshFlag_'));
-                            });
-                          },
-                        });
-                      }}
-                    >
-                      {t('common:btn.delete')}
-                    </TableActionButton>
+                      <TableActionButton actionIcon='edit'>{t('common:btn.edit')}</TableActionButton>
+                    </FormModal>
                   </Menu.Item>
-                </>
-              )}
+                )}
+                {actionAuth.delete && record.updated_by !== 'system' && (
+                  <>
+                    <Menu.Divider />
+                    <Menu.Item>
+                      <TableActionButton
+                        danger
+                        actionIcon='delete'
+                        onClick={() => {
+                          Modal.confirm({
+                            title: t('common:confirm.delete'),
+                            onOk() {
+                              deleteMetrics([record.id]).then(() => {
+                                message.success(t('common:success.delete'));
+                                setRefreshFlag(_.uniqueId('refreshFlag_'));
+                              });
+                            },
+                          });
+                        }}
+                      >
+                        {t('common:btn.delete')}
+                      </TableActionButton>
+                    </Menu.Item>
+                  </>
+                )}
               </Menu>
             }
           >
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index 3c43b8db4..84a83da04 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -311,7 +311,7 @@ export default function index() {
                       return (
                         <Dropdown
                           trigger={['click']}
-                          placement='bottomRight'
+                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/datasource/components/TableSource/index.tsx b/src/pages/datasource/components/TableSource/index.tsx
index 030d5d514..f19ce4850 100644
--- a/src/pages/datasource/components/TableSource/index.tsx
+++ b/src/pages/datasource/components/TableSource/index.tsx
@@ -197,7 +197,8 @@ const TableSource = (props: IPropsType) => {
       render: (record) => {
         return (
           <Dropdown
-            trigger={['hover', 'click']}
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index e7358539d..e9ab83fe2 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -130,7 +130,7 @@ export default function Index() {
           return (
             <Dropdown
               trigger={['click']}
-              placement='bottomRight'
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/event/Table.tsx b/src/pages/event/Table.tsx
index 9392ba94e..2918436af 100644
--- a/src/pages/event/Table.tsx
+++ b/src/pages/event/Table.tsx
@@ -135,7 +135,8 @@ export default function TableCpt(props: IProps) {
       render(value, record) {
         return (
           <Dropdown
-            trigger={['hover', 'click']}
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
diff --git a/src/pages/event/card.tsx b/src/pages/event/card.tsx
index c17b6a210..aac4b06a7 100644
--- a/src/pages/event/card.tsx
+++ b/src/pages/event/card.tsx
@@ -176,7 +176,8 @@ function Card(props: Props, ref) {
       render(value, record) {
         return (
           <Dropdown
-            trigger={['hover', 'click']}
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index e3333a3e0..33ee6e5ce 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -228,11 +228,12 @@ export default function List() {
           {
             title: t('common:table.operations'),
             width: 64,
-      fixed: 'right' as const,
+            fixed: 'right' as const,
             render: (item: Item) => {
               return (
                 <Dropdown
-                  trigger={['hover', 'click']}
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
diff --git a/src/pages/historyEvents/ListNG/index.tsx b/src/pages/historyEvents/ListNG/index.tsx
index 2068b0377..ca0c396f5 100644
--- a/src/pages/historyEvents/ListNG/index.tsx
+++ b/src/pages/historyEvents/ListNG/index.tsx
@@ -190,7 +190,8 @@ const Event = (props: Props) => {
           return (
             <div>
               <Dropdown
-                trigger={['hover', 'click']}
+                trigger={['click']}
+                align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                 overlayClassName='fc-table-action-dropdown'
                 overlay={
                   <Menu>
diff --git a/src/pages/log/IndexPatterns/index.tsx b/src/pages/log/IndexPatterns/index.tsx
index b0dafdc10..511d7e515 100644
--- a/src/pages/log/IndexPatterns/index.tsx
+++ b/src/pages/log/IndexPatterns/index.tsx
@@ -145,11 +145,12 @@ export default function Servers() {
                   {
                     title: t('common:table.operations'),
                     width: 64,
-      fixed: 'right' as const,
+                    fixed: 'right' as const,
                     render: (record) => {
                       return (
                         <Dropdown
-                          trigger={['hover', 'click']}
+                          trigger={['click']}
+                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index 413785e5c..ef6ae9a1d 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -232,9 +232,7 @@ export default function index() {
       title: t('extra_fields'),
       dataIndex: 'extra_fields',
       render: (val) => {
-        return (
-          <TableTags data={_.map(val, (item) => `${item.name}: ${item.value}`)} maxVisible={2} maxTagWidth={180} />
-        );
+        return <TableTags data={_.map(val, (item) => `${item.name}: ${item.value}`)} maxVisible={2} maxTagWidth={180} />;
       },
     },
     {
@@ -272,7 +270,8 @@ export default function index() {
       render: (data, record: any) => {
         return (
           <Dropdown
-            trigger={['hover', 'click']}
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
diff --git a/src/pages/notificationChannels/pages/List/index.tsx b/src/pages/notificationChannels/pages/List/index.tsx
index 7096c9425..19f71a535 100644
--- a/src/pages/notificationChannels/pages/List/index.tsx
+++ b/src/pages/notificationChannels/pages/List/index.tsx
@@ -183,11 +183,12 @@ export default function List() {
             {
               title: t('common:table.operations'),
               width: 64,
-      fixed: 'right' as const,
+              fixed: 'right' as const,
               render: (record) => {
                 return (
                   <Dropdown
-                    trigger={['hover', 'click']}
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                     overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
diff --git a/src/pages/notificationChannels/pages/ListNG/index.tsx b/src/pages/notificationChannels/pages/ListNG/index.tsx
index a389e110c..221689732 100644
--- a/src/pages/notificationChannels/pages/ListNG/index.tsx
+++ b/src/pages/notificationChannels/pages/ListNG/index.tsx
@@ -301,7 +301,7 @@ export default function index() {
                       return (
                         <Dropdown
                           trigger={['click']}
-                          placement='bottomRight'
+                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                           overlayClassName='fc-table-action-dropdown'
                           overlay={
                             <Menu>
diff --git a/src/pages/notificationRules/pages/List.tsx b/src/pages/notificationRules/pages/List.tsx
index 9778a5275..4f5602bbf 100644
--- a/src/pages/notificationRules/pages/List.tsx
+++ b/src/pages/notificationRules/pages/List.tsx
@@ -205,11 +205,12 @@ export default function List() {
             {
               title: t('common:table.operations'),
               width: 64,
-      fixed: 'right' as const,
+              fixed: 'right' as const,
               render: (record) => {
                 return (
                   <Dropdown
-                    trigger={['hover', 'click']}
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                     overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index 85cf12135..528c7c7a2 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -218,7 +218,7 @@ const PageTable: React.FC<Props> = ({ gids }) => {
           return (
             <Dropdown
               trigger={['click']}
-              placement='bottomRight'
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index ced1012d3..ca6a76145 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -161,7 +161,8 @@ const index = (_props: any) => {
         render: (_text, record) => {
           return (
             <Dropdown
-              trigger={['hover', 'click']}
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index ce6b299ff..d520630da 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -165,7 +165,8 @@ const index = (_props: any) => {
         render: (_text, record) => {
           return (
             <Dropdown
-              trigger={['hover', 'click']}
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/user/business.tsx b/src/pages/user/business.tsx
index eb8deeff3..ec4584bdb 100644
--- a/src/pages/user/business.tsx
+++ b/src/pages/user/business.tsx
@@ -74,7 +74,8 @@ const Resource: React.FC = () => {
       fixed: 'right' as const,
       render: (text: string, record) => (
         <Dropdown
-          trigger={['hover', 'click']}
+          trigger={['click']}
+          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
           overlayClassName='fc-table-action-dropdown'
           overlay={
             <Menu>
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index 56a20a4fa..737729263 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -117,7 +117,8 @@ const Resource: React.FC = () => {
       fixed: 'right' as const,
       render: (text: string, record) => (
         <Dropdown
-          trigger={['hover', 'click']}
+          trigger={['click']}
+          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
           overlayClassName='fc-table-action-dropdown'
           overlay={
             <Menu>
@@ -408,7 +409,16 @@ const Resource: React.FC = () => {
                 </Button>
               </Row>
 
-              <Table className='mt-2' size='small' rowKey='id' columns={teamMemberColumns} dataSource={memberList} loading={memberLoading} pagination={pagination} scroll={{ x: 'max-content' }} />
+              <Table
+                className='mt-2'
+                size='small'
+                rowKey='id'
+                columns={teamMemberColumns}
+                dataSource={memberList}
+                loading={memberLoading}
+                pagination={pagination}
+                scroll={{ x: 'max-content' }}
+              />
             </div>
           ) : (
             <div className='blank-busi-holder'>
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 4c8f72328..1c08493b0 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -142,22 +142,19 @@ const Resource: React.FC = () => {
       render: (text: string, record) => {
         return (
           <Dropdown
-            trigger={['hover', 'click']}
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
             overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 {_.includes(perms, '/users/put') && (
                   <Menu.Item onClick={() => handleClick(ActionType.EditUser, record.id)}>
-                    <TableActionButton actionIcon='edit'>
-                      {t('common:btn.edit')}
-                    </TableActionButton>
+                    <TableActionButton actionIcon='edit'>{t('common:btn.edit')}</TableActionButton>
                   </Menu.Item>
                 )}
                 {_.includes(perms, '/users/put') && (
                   <Menu.Item onClick={() => handleClick(ActionType.Reset, record.id)}>
-                    <TableActionButton actionIcon='settings'>
-                      {t('account:password.reset')}
-                    </TableActionButton>
+                    <TableActionButton actionIcon='settings'>{t('account:password.reset')}</TableActionButton>
                   </Menu.Item>
                 )}
                 {_.includes(perms, '/users/del') && <Menu.Divider />}
diff --git a/src/pages/variableConfigs/index.tsx b/src/pages/variableConfigs/index.tsx
index f3ddfa4b4..bdb5304c5 100644
--- a/src/pages/variableConfigs/index.tsx
+++ b/src/pages/variableConfigs/index.tsx
@@ -113,11 +113,12 @@ export default function index() {
             {
               title: t('common:table.operations'),
               width: 64,
-      fixed: 'right' as const,
+              fixed: 'right' as const,
               render: (record) => {
                 return (
                   <Dropdown
-                    trigger={['hover', 'click']}
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                     overlayClassName='fc-table-action-dropdown'
                     overlay={
                       <Menu>
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index a6868de44..0b43222a3 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -273,7 +273,8 @@ const Shield: React.FC = () => {
         render: (text: undefined, record: shieldItem) => {
           return (
             <Dropdown
-              trigger={['hover', 'click']}
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
               overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 1d26644f3..2ebb3b2ae 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -270,7 +270,7 @@ const Subscribe = (props: Props) => {
               return (
                 <Dropdown
                   trigger={['click']}
-                  placement='bottomRight'
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
                   overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>

From 60ac0632ba88d8b5581b35e8bc018c96fc1e52d3 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 17:14:18 +0800
Subject: [PATCH 37/44] fix(table): comment out selected row styles to prevent
 fixed column bleed-through

---
 src/theme/default.less | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/theme/default.less b/src/theme/default.less
index 823c802f2..7764c38e4 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -10,7 +10,6 @@ mark {
 
 // 当 table 作为 flex item 时，设置高度为 100%，以便在父容器中填满空间
 .n9e-antd-table-height-full {
-
   height: 100%;
   min-height: 0;
 
@@ -177,22 +176,22 @@ mark {
     }
   }
 
-  .ant-table-tbody > tr.ant-table-row-selected > td {
-    color: inherit;
-    background: rgb(var(--fc-fill-5-rgb) / 0.15);
-  }
+  // .ant-table-tbody > tr.ant-table-row-selected > td {
+  //   color: inherit;
+  //   background: rgb(var(--fc-fill-5-rgb) / 0.15);
+  // }
 
-  .ant-table-tbody > tr.ant-table-row-selected:hover > td {
-    background: rgb(var(--fc-fill-5-rgb) / 0.25);
-  }
+  // .ant-table-tbody > tr.ant-table-row-selected:hover > td {
+  //   background: rgb(var(--fc-fill-5-rgb) / 0.25);
+  // }
 
-  .ant-table-tbody > tr.ant-table-row-selected > td.ant-table-column-sort {
-    background: rgb(var(--fc-fill-5-rgb) / 0.15);
-  }
+  // .ant-table-tbody > tr.ant-table-row-selected > td.ant-table-column-sort {
+  //   background: rgb(var(--fc-fill-5-rgb) / 0.15);
+  // }
 
-  .ant-table-tbody > tr.ant-table-row-selected:hover > td.ant-table-column-sort {
-    background: rgb(var(--fc-fill-5-rgb) / 0.25);
-  }
+  // .ant-table-tbody > tr.ant-table-row-selected:hover > td.ant-table-column-sort {
+  //   background: rgb(var(--fc-fill-5-rgb) / 0.25);
+  // }
 }
 
 .fc-table-action-dropdown {
@@ -353,7 +352,7 @@ mark {
 }
 
 .n9e-checkbox-padding-right-0 {
-  .ant-checkbox+span {
+  .ant-checkbox + span {
     padding-right: 0 !important;
   }
 }
@@ -427,7 +426,6 @@ mark {
     &::-webkit-scrollbar-thumb {
       visibility: visible;
     }
-
   }
 
   &::-webkit-scrollbar-corner {

From 1a8f2d97d7ce352cf1f6e1da6e5a64753ba1d1f7 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 18:12:58 +0800
Subject: [PATCH 38/44] feat(alertRules): replace event count column icons with
 Tags component

- Add Tags component with two-line overflow layout and ResizeObserver
- Use Tags in the event count column with triggered/normal status display
- Add i18n entries for status text and popover title across all locales
---
 src/locales/common/locale/en_US.ts   |   1 +
 src/locales/common/locale/ja_JP.ts   |   1 +
 src/locales/common/locale/ru_RU.ts   |   1 +
 src/locales/common/locale/zh_CN.ts   |   1 +
 src/locales/common/locale/zh_HK.ts   |   1 +
 src/pages/alertRules/List/ListNG.tsx |  27 ++--
 src/pages/alertRules/List/Tags.tsx   | 218 +++++++++++++++++++++++++++
 src/pages/alertRules/locale/en_US.ts |   2 +
 src/pages/alertRules/locale/ja_JP.ts |   2 +
 src/pages/alertRules/locale/ru_RU.ts |   2 +
 src/pages/alertRules/locale/zh_CN.ts |   2 +
 src/pages/alertRules/locale/zh_HK.ts |   2 +
 12 files changed, 250 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/alertRules/List/Tags.tsx

diff --git a/src/locales/common/locale/en_US.ts b/src/locales/common/locale/en_US.ts
index bcc92ffc6..9d9cddc31 100644
--- a/src/locales/common/locale/en_US.ts
+++ b/src/locales/common/locale/en_US.ts
@@ -172,6 +172,7 @@ const en_US = {
   disabling: 'Disabling',
   select_event: 'Select an alert event',
   click_to_view_doc: 'Click to view documentation',
+  tags_popover_title: '{{count}} tags',
 
   tpl: 'Self-healing',
   'tpl.create': 'Create',
diff --git a/src/locales/common/locale/ja_JP.ts b/src/locales/common/locale/ja_JP.ts
index 0d7a66500..045ee2517 100644
--- a/src/locales/common/locale/ja_JP.ts
+++ b/src/locales/common/locale/ja_JP.ts
@@ -172,6 +172,7 @@ const ja_JP = {
   disabling: '無効化中',
   select_event: 'アラートイベントを選択',
   click_to_view_doc: 'クリックしてドキュメントを表示します',
+  tags_popover_title: '{{count}} タグ',
 
   tpl: '自己修復スクリプト',
   'tpl.create': '作成',
diff --git a/src/locales/common/locale/ru_RU.ts b/src/locales/common/locale/ru_RU.ts
index 1ea77043a..668facf60 100644
--- a/src/locales/common/locale/ru_RU.ts
+++ b/src/locales/common/locale/ru_RU.ts
@@ -172,6 +172,7 @@ const ru_RU = {
   disabling: 'Отключение',
   select_event: 'Выбрать событие оповещения',
   click_to_view_doc: 'Нажмите, чтобы просмотреть документацию',
+  tags_popover_title: '{{count}} тегов',
 
   tpl: 'Скрипт самовосстановления',
   'tpl.create': 'Создать',
diff --git a/src/locales/common/locale/zh_CN.ts b/src/locales/common/locale/zh_CN.ts
index 19579b0cd..435f18a39 100644
--- a/src/locales/common/locale/zh_CN.ts
+++ b/src/locales/common/locale/zh_CN.ts
@@ -171,6 +171,7 @@ const zh_CN = {
   disabling: '禁用中',
   select_event: '选择告警事件',
   click_to_view_doc: '点击查看文档',
+  tags_popover_title: '{{count}} 个标签',
 
   // 临时把 task 的翻译放在这里
   tpl: '自愈脚本',
diff --git a/src/locales/common/locale/zh_HK.ts b/src/locales/common/locale/zh_HK.ts
index 655be7af8..31996062e 100644
--- a/src/locales/common/locale/zh_HK.ts
+++ b/src/locales/common/locale/zh_HK.ts
@@ -171,6 +171,7 @@ const zh_HK = {
   disabling: '禁用中',
   select_event: '選擇告警事件',
   click_to_view_doc: '點擊查看文檔',
+  tags_popover_title: '{{count}} 個標籤',
 
   tpl: '自愈腳本',
   'tpl.create': '創建',
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 0ca46da42..062643cec 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -1,12 +1,14 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { Space, Select, Input, Button, Table, Tooltip, Tag, Modal, Switch, message, Dropdown, Menu } from 'antd';
 import { ColumnType } from 'antd/lib/table';
-import { EyeOutlined, SearchOutlined, InfoCircleOutlined, WarningFilled, CheckCircleFilled } from '@ant-design/icons';
+import { EyeOutlined, SearchOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useDebounceFn } from 'ahooks';
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
+import { TriangleAlert, CircleCheckBig } from 'lucide-react';
+import Tags from './Tags';
 
 import { CommonStateContext } from '@/App';
 import { priorityColor } from '@/utils/constant';
@@ -93,13 +95,23 @@ export default function AlertRules(props: Props) {
           </Space>
         ),
         dataIndex: 'cur_event_count',
+        width: 100,
         sorter: (a, b) => {
           return localeCompare(a.cur_event_count, b.cur_event_count);
         },
         render: (val, record) => {
           return (
-            <a
-              onClick={() => {
+            <Tags
+              type='fill'
+              bgColor={val > 0 ? 'var(--fc-red-3)' : 'var(--fc-green-3)'}
+              fontColor={val > 0 ? 'var(--fc-red-11)' : 'var(--fc-green-11)'}
+              icon={() => {
+                if (val > 0) {
+                  return <TriangleAlert size={14} />;
+                }
+                return <CircleCheckBig size={14} />;
+              }}
+              onTagClick={() => {
                 setEventsDrawerProps({
                   ...eventsDrawerProps,
                   visible: true,
@@ -107,13 +119,8 @@ export default function AlertRules(props: Props) {
                   rid: record.id,
                 });
               }}
-              style={{
-                fontSize: 20,
-                color: val > 0 ? '#e6522c' : '#00a700',
-              }}
-            >
-              {val > 0 ? <WarningFilled /> : <CheckCircleFilled />}
-            </a>
+              data={[val > 0 ? t('status_triggered') : t('status_normal')]}
+            />
           );
         },
       },
diff --git a/src/pages/alertRules/List/Tags.tsx b/src/pages/alertRules/List/Tags.tsx
new file mode 100644
index 000000000..bc2d76002
--- /dev/null
+++ b/src/pages/alertRules/List/Tags.tsx
@@ -0,0 +1,218 @@
+import React, { useRef, useState, useLayoutEffect } from 'react';
+import { Button, Popover } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
+import { Trans } from 'react-i18next';
+
+import { copy2ClipBoard } from '@/utils';
+
+interface Props {
+  type: 'outline' | 'fill';
+  bgColor?: string; // 背景颜色，仅在 type 为 'fill' 时生效
+  fontColor?: string; // 字体颜色，仅在 type 为 'fill' 时生效
+  data: string[];
+  icon?: React.ReactNode | ((tagname: string) => React.ReactNode);
+  onTagClick?: (tag: string) => void;
+}
+
+const GAP = 2;
+
+/**
+ * 核心布局算法：根据实际测量的 tag 宽度计算可见数量
+ */
+function calcLayout(tagWidths: number[], overflowTagWidth: number, containerWidth: number): { visibleCount: number; overflowCount: number } {
+  if (!tagWidths.length || containerWidth <= 0) {
+    return { visibleCount: tagWidths.length, overflowCount: 0 };
+  }
+
+  const widths = tagWidths.map((w) => Math.min(w, containerWidth));
+
+  // ── 第一行 ──
+  let row1End = -1;
+  let rem = containerWidth;
+  for (let i = 0; i < widths.length; i++) {
+    const needed = i === 0 ? widths[i] : GAP + widths[i];
+    if (rem >= needed) {
+      rem -= needed;
+      row1End = i;
+    } else {
+      break;
+    }
+  }
+
+  if (row1End === widths.length - 1) {
+    return { visibleCount: widths.length, overflowCount: 0 };
+  }
+
+  // ── 第二行 ──
+  const r2start = row1End + 1;
+  rem = containerWidth;
+  let r2count = 0;
+
+  for (let i = r2start; i < widths.length; i++) {
+    const isFirst = i === r2start;
+    const needed = isFirst ? widths[i] : GAP + widths[i];
+    const isLast = i === widths.length - 1;
+
+    if (isLast) {
+      if (rem >= needed) r2count++;
+      break;
+    }
+
+    // 非最后一个：放置当前 tag 后，还需在第二行留出 overflow tag 的空间
+    if (rem >= needed + GAP + overflowTagWidth) {
+      rem -= needed;
+      r2count++;
+    } else {
+      break;
+    }
+  }
+
+  const visibleCount = r2start + r2count;
+  return { visibleCount, overflowCount: widths.length - visibleCount };
+}
+
+function resolveIcon(icon: Props['icon'], tagname: string): React.ReactNode | undefined {
+  if (!icon) return undefined;
+  return typeof icon === 'function' ? icon(tagname) : icon;
+}
+
+export default function Tags(props: Props) {
+  const { type = 'outline', data, icon, onTagClick } = props;
+  const bgColor = props.bgColor || 'var(--fc-violet-3)';
+  const fontColor = props.fontColor || 'var(--fc-violet-11)';
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tagMeasureRefs = useRef<(HTMLSpanElement | null)[]>([]);
+  const overflowMeasureRef = useRef<HTMLSpanElement | null>(null);
+  const [layout, setLayout] = useState({ visibleCount: data.length, overflowCount: 0 });
+
+  // fill 模式下通过 inline style 设置动态颜色（Tailwind 不支持动态值）
+  const fillStyle: React.CSSProperties | undefined =
+    type === 'fill'
+      ? {
+          backgroundColor: bgColor,
+          backgroundClip: 'padding-box',
+          borderColor: bgColor,
+          color: fontColor,
+        }
+      : undefined;
+
+  // tag 的 Tailwind 基础类（测量层和渲染层共用）
+  // p-[6px] border border-[var(--fc-border-color)] rounded-2xl leading-none whitespace-nowrap box-border
+  const tagBaseClass = `inline-flex items-center px-[6px] py-[4px] border ${
+    type === 'fill' ? '' : 'border-[var(--fc-border-color)]'
+  } rounded-2xl leading-none whitespace-nowrap box-border ${onTagClick ? 'cursor-pointer' : ''}`;
+
+  // 可见层额外加溢出省略
+  const visibleTagClass = `${tagBaseClass} overflow-hidden text-ellipsis max-w-full shrink-0`;
+
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const compute = () => {
+      const containerWidth = el.getBoundingClientRect().width;
+      if (containerWidth <= 0) return;
+
+      const tagWidths = tagMeasureRefs.current.slice(0, data.length).map((span) => (span ? Math.ceil(span.getBoundingClientRect().width) : containerWidth));
+      const overflowTagWidth = overflowMeasureRef.current ? Math.ceil(overflowMeasureRef.current.getBoundingClientRect().width) : 40;
+
+      setLayout(calcLayout(tagWidths, overflowTagWidth, containerWidth));
+    };
+
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    compute();
+
+    return () => ro.disconnect();
+  }, [data]);
+
+  const { visibleCount, overflowCount } = layout;
+
+  return (
+    <div ref={containerRef} className='relative'>
+      {/* 隐藏测量层：绝对定位不占空间，用于获取各 tag 的真实渲染宽度 */}
+      <div aria-hidden className='absolute top-0 left-0 invisible pointer-events-none flex'>
+        {data.map((tag, i) => (
+          <span
+            key={i}
+            ref={(el) => {
+              tagMeasureRefs.current[i] = el;
+            }}
+            className={tagBaseClass}
+          >
+            {icon && <span className='mr-2 flex items-center'>{resolveIcon(icon, tag)}</span>}
+            {tag}
+          </span>
+        ))}
+        {/* 用最大计数值预估 overflow tag 宽度上限 */}
+        <span ref={overflowMeasureRef} className={tagBaseClass}>
+          +{data.length}
+        </span>
+      </div>
+
+      {/* 可见布局层 */}
+      <div className='flex flex-wrap gap-0.5 content-start'>
+        {data.slice(0, visibleCount).map((tag, i) => (
+          <span
+            key={i}
+            className={visibleTagClass}
+            style={fillStyle}
+            title={tag}
+            onClick={(e) => {
+              e.stopPropagation();
+              onTagClick?.(tag);
+            }}
+          >
+            {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, tag)}</span>}
+            {tag}
+          </span>
+        ))}
+        {overflowCount > 0 && (
+          <Popover
+            title={
+              <div className='flex justify-between items-center'>
+                <Trans ns='common' i18nKey='tags_popover_title' values={{ count: data.length }} />
+                <Button
+                  type='text'
+                  icon={<CopyOutlined />}
+                  onClick={() => {
+                    copy2ClipBoard(data.join('\n'));
+                  }}
+                />
+              </div>
+            }
+            content={
+              <div>
+                {data.map((tag, i) => (
+                  <div key={i} className='mb-1'>
+                    <div
+                      className={tagBaseClass}
+                      style={fillStyle}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onTagClick?.(tag);
+                      }}
+                    >
+                      {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, tag)}</span>}
+                      {tag}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            }
+          >
+            <span
+              className={`${tagBaseClass} shrink-0`}
+              style={fillStyle}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              +{overflowCount}
+            </span>
+          </Popover>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/alertRules/locale/en_US.ts b/src/pages/alertRules/locale/en_US.ts
index 04b6b0aa8..8e69cab31 100644
--- a/src/pages/alertRules/locale/en_US.ts
+++ b/src/pages/alertRules/locale/en_US.ts
@@ -1,6 +1,8 @@
 const en_US = {
   title: 'Alert rules',
   search_placeholder: 'Search by name or tags',
+  status_triggered: 'Triggered',
+  status_normal: 'Normal',
   prod: 'Type',
   severity: 'Severity',
   notify_groups: 'Notify groups',
diff --git a/src/pages/alertRules/locale/ja_JP.ts b/src/pages/alertRules/locale/ja_JP.ts
index 99cc16052..fa36d3c5c 100644
--- a/src/pages/alertRules/locale/ja_JP.ts
+++ b/src/pages/alertRules/locale/ja_JP.ts
@@ -1,6 +1,8 @@
 const ja_JP = {
   title: 'アラートルール',
   search_placeholder: '名前またはタグを検索',
+  status_triggered: 'アラート中',
+  status_normal: '正常',
   prod: '監視タイプ',
   severity: 'レベル',
   notify_groups: 'アラート受信グループ',
diff --git a/src/pages/alertRules/locale/ru_RU.ts b/src/pages/alertRules/locale/ru_RU.ts
index 60e093c84..24e4a70b4 100644
--- a/src/pages/alertRules/locale/ru_RU.ts
+++ b/src/pages/alertRules/locale/ru_RU.ts
@@ -1,6 +1,8 @@
 const ru_RU = {
   title: 'Правила оповещений',
   search_placeholder: 'Поиск по названию или тегам',
+  status_triggered: 'Сработало',
+  status_normal: 'Нет срабатываний',
   prod: 'Тип мониторинга',
   severity: 'Уровень',
   notify_groups: 'Группы получателей оповещений',
diff --git a/src/pages/alertRules/locale/zh_CN.ts b/src/pages/alertRules/locale/zh_CN.ts
index 1a086dd29..ef8c45e58 100644
--- a/src/pages/alertRules/locale/zh_CN.ts
+++ b/src/pages/alertRules/locale/zh_CN.ts
@@ -1,6 +1,8 @@
 const zh_CN = {
   title: '告警规则',
   search_placeholder: '搜索名称或标签',
+  status_triggered: '告警中',
+  status_normal: '无告警',
   prod: '监控类型',
   severity: '级别',
   notify_groups: '告警接收组',
diff --git a/src/pages/alertRules/locale/zh_HK.ts b/src/pages/alertRules/locale/zh_HK.ts
index fe67cb0af..4156e0e55 100644
--- a/src/pages/alertRules/locale/zh_HK.ts
+++ b/src/pages/alertRules/locale/zh_HK.ts
@@ -1,6 +1,8 @@
 const zh_HK = {
   title: '告警規則',
   search_placeholder: '搜尋名稱或標籤',
+  status_triggered: '告警中',
+  status_normal: '無告警',
   prod: '監控類型',
   severity: '級別',
   notify_groups: '告警接收組',

From 79c38e154f92abd0015bbb44bdfea47364e56922 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 18:56:45 +0800
Subject: [PATCH 39/44] refactor(tags): relocate Tags component to shared
 directory and adopt in hosts list

Move Tags from alertRules scope to components/TableTags for cross-page reuse;
replace TableTags usage in hosts list with the unified Tags component.
---
 .../List => components/TableTags}/Tags.tsx       |  4 +++-
 src/pages/alertRules/List/ListNG.tsx             |  2 +-
 src/pages/hosts/pages/List/List.tsx              | 16 ++++++++--------
 3 files changed, 12 insertions(+), 10 deletions(-)
 rename src/{pages/alertRules/List => components/TableTags}/Tags.tsx (99%)

diff --git a/src/pages/alertRules/List/Tags.tsx b/src/components/TableTags/Tags.tsx
similarity index 99%
rename from src/pages/alertRules/List/Tags.tsx
rename to src/components/TableTags/Tags.tsx
index bc2d76002..916b6c259 100644
--- a/src/pages/alertRules/List/Tags.tsx
+++ b/src/components/TableTags/Tags.tsx
@@ -94,7 +94,9 @@ export default function Tags(props: Props) {
           borderColor: bgColor,
           color: fontColor,
         }
-      : undefined;
+      : {
+          color: fontColor,
+        };
 
   // tag 的 Tailwind 基础类（测量层和渲染层共用）
   // p-[6px] border border-[var(--fc-border-color)] rounded-2xl leading-none whitespace-nowrap box-border
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 062643cec..b1785e764 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -8,7 +8,7 @@ import _ from 'lodash';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import { TriangleAlert, CircleCheckBig } from 'lucide-react';
-import Tags from './Tags';
+import Tags from '@/components/TableTags/Tags';
 
 import { CommonStateContext } from '@/App';
 import { priorityColor } from '@/utils/constant';
diff --git a/src/pages/hosts/pages/List/List.tsx b/src/pages/hosts/pages/List/List.tsx
index 55c808d3a..62959c9a5 100644
--- a/src/pages/hosts/pages/List/List.tsx
+++ b/src/pages/hosts/pages/List/List.tsx
@@ -14,6 +14,7 @@ import { copy2ClipBoard } from '@/utils';
 import getTextWidth from '@/utils/getTextWidth';
 import usePagination from '@/components/usePagination';
 import DocumentDrawer from '@/components/DocumentDrawer';
+import Tags from '@/components/TableTags/Tags';
 import HostsSelect from '@/pages/targets/components/HostsSelect';
 import Explorer from '@/pages/targets/components/Explorer';
 import EditBusinessGroups from '@/pages/targets/components/EditBusinessGroups';
@@ -31,7 +32,6 @@ import { NS } from '../../constants';
 import { Item, OperateType } from '../../types';
 import { getList } from '../../services';
 import VersionIcon from './VersionIcon';
-import TableTags from '@/components/TableTags';
 import { formatBeatTimeDisplay } from './formatBeatTimeDisplay';
 
 const downtimeOptions = [1, 2, 3, 5, 10, 30];
@@ -524,10 +524,10 @@ export default function List(props: Props) {
                 }
                 return (
                   <div className='w-[200px]' style={{ minWidth }}>
-                    <TableTags
+                    <Tags
+                      type='outline'
                       data={tags}
-                      maxVisible={2}
-                      maxTagWidth={120}
+                      fontColor={record.target_up === 0 ? 'var(--fc-text-4)' : 'var(--fc-text-2)'}
                       onTagClick={(tag) => {
                         if (!_.includes(params.query, tag)) {
                           const val = params.query ? `${params.query.trim()} ${tag}` : tag;
@@ -557,10 +557,10 @@ export default function List(props: Props) {
                 }
                 return (
                   <div className='w-[200px]' style={{ minWidth }}>
-                    <TableTags
+                    <Tags
+                      type='outline'
                       data={tags}
-                      maxVisible={2}
-                      maxTagWidth={120}
+                      fontColor={record.target_up === 0 ? 'var(--fc-text-4)' : 'var(--fc-text-2)'}
                       onTagClick={(tag) => {
                         if (!_.includes(params.query, tag)) {
                           const val = params.query ? `${params.query.trim()} ${tag}` : tag;
@@ -584,7 +584,7 @@ export default function List(props: Props) {
                 }
                 return (
                   <div className='w-[200px]' style={{ minWidth }}>
-                    <TableTags data={groupNames} maxVisible={2} maxTagWidth={120} />
+                    <Tags type='fill' data={groupNames} fontColor={record.target_up === 0 ? 'var(--fc-text-4)' : undefined} />
                   </div>
                 );
               },

From 3bf95de47b472ca37fcc0fc6325144e847e1eae0 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 20:08:52 +0800
Subject: [PATCH 40/44] feat(alertRules): replace TableTags with generic Tags
 and add severity column

- Refactor Tags component to support generic typed data via getKey/getLabel
- Support per-item bgColor/fontColor/icon via function props
- Add maxWidth/borderRadius props for layout control
- Extract calcLayout and add comprehensive test suite
- Move alert rule category icon to datasource column
- Add severity column with color-coded per-level tags
- Merge nickname column into username column
- Add click-to-open notification rules with not-found warning
---
 src/components/TableTags/Tags.test.ts  | 147 +++++++++++++++++++++++++
 src/components/TableTags/Tags.tsx      | 123 ++++++++++++---------
 src/pages/alertRules/List/ListNG.tsx   | 133 ++++++++++++++--------
 src/pages/alertRules/List/constants.ts |  10 +-
 src/pages/alertRules/locale/en_US.ts   |   1 +
 src/pages/alertRules/locale/ja_JP.ts   |   1 +
 src/pages/alertRules/locale/ru_RU.ts   |   1 +
 src/pages/alertRules/locale/zh_CN.ts   |   1 +
 src/pages/alertRules/locale/zh_HK.ts   |   1 +
 src/pages/alertRules/types.ts          |   3 +-
 10 files changed, 320 insertions(+), 101 deletions(-)
 create mode 100644 src/components/TableTags/Tags.test.ts

diff --git a/src/components/TableTags/Tags.test.ts b/src/components/TableTags/Tags.test.ts
new file mode 100644
index 000000000..fc7845ccd
--- /dev/null
+++ b/src/components/TableTags/Tags.test.ts
@@ -0,0 +1,147 @@
+/// <reference types="jest" />
+
+// mock 掉有副作用或 ESM 专属语法的依赖，只测纯逻辑
+jest.mock('@/utils', () => ({ copy2ClipBoard: jest.fn() }));
+jest.mock('react', () => ({}));
+jest.mock('antd', () => ({}));
+jest.mock('@ant-design/icons', () => ({}));
+jest.mock('react-i18next', () => ({}));
+
+import { calcLayout } from './Tags';
+
+// GAP = 2（与源码保持一致）
+
+describe('calcLayout', () => {
+  // ────────────────────── 边界情况 ──────────────────────
+
+  it('空数组时返回 visibleCount=0, overflowCount=0', () => {
+    expect(calcLayout([], 40, 200)).toEqual({ visibleCount: 0, overflowCount: 0 });
+  });
+
+  it('containerWidth <= 0 时直接返回所有 tag 可见', () => {
+    expect(calcLayout([50, 60, 70], 40, 0)).toEqual({ visibleCount: 3, overflowCount: 0 });
+    expect(calcLayout([50, 60, 70], 40, -1)).toEqual({ visibleCount: 3, overflowCount: 0 });
+  });
+
+  it('单个 tag 且恰好填满第一行', () => {
+    expect(calcLayout([100], 30, 100)).toEqual({ visibleCount: 1, overflowCount: 0 });
+  });
+
+  it('单个 tag 且宽度被容器宽度截断后仍可放入第一行', () => {
+    // 宽 300 > 容器 200，clamp 后为 200，恰好放入
+    expect(calcLayout([300], 30, 200)).toEqual({ visibleCount: 1, overflowCount: 0 });
+  });
+
+  // ────────────────────── 第一行全部放下 ──────────────────────
+
+  it('所有 tag 均可放入第一行（宽松容器）', () => {
+    // 50 + 2+60 + 2+70 = 184 <= 300
+    expect(calcLayout([50, 60, 70], 40, 300)).toEqual({ visibleCount: 3, overflowCount: 0 });
+  });
+
+  it('所有 tag 恰好填满第一行（边界等于）', () => {
+    // 100 + (2+48) = 150
+    expect(calcLayout([100, 48], 30, 150)).toEqual({ visibleCount: 2, overflowCount: 0 });
+  });
+
+  it('只有一个 tag 放入第一行，其余全部溢出（无法放入第二行）', () => {
+    // 容器 120；第一行：100 → rem=20
+    // 第二行 r2start=1：tag2=90 (isFirst,isLast); rem(120)>=90 → r2count=1
+    // visibleCount=2, overflowCount=0
+    expect(calcLayout([100, 90], 30, 120)).toEqual({ visibleCount: 2, overflowCount: 0 });
+  });
+
+  // ────────────────────── 两行布局（有溢出指示器）──────────────────────
+
+  it('第二行放入部分 tag，剩余作为溢出', () => {
+    // 容器 120, overflowTag=30
+    // 第一行：50(rem=70) + 2+50=52(rem=18) → row1End=1；第三个放不下
+    // 第二行 r2start=2：
+    //   i=2(isFirst, not isLast): needed=50, 需 50+2+30=82 <= 120 ✓ → rem=70, r2count=1
+    //   i=3(not isFirst, not isLast): needed=2+50=52, 需 52+2+30=84 <= 70? ✗ → break
+    // visibleCount=3, overflowCount=4
+    expect(calcLayout([50, 50, 50, 50, 50, 50, 50], 30, 120)).toEqual({ visibleCount: 3, overflowCount: 4 });
+  });
+
+  it('第二行最后一个 tag 恰好能放入（isLast 分支）', () => {
+    // 容器 100, overflowTag=30
+    // 第一行：50(rem=50)；2+60=62 > 50 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, not isLast): needed=60, 需 60+2+30=92 <= 100 ✓ → rem=40, r2count=1
+    //   i=2(not isFirst, isLast): needed=2+30=32 <= 40 ✓ → r2count=2, break
+    // visibleCount=3, overflowCount=0
+    expect(calcLayout([50, 60, 30], 30, 100)).toEqual({ visibleCount: 3, overflowCount: 0 });
+  });
+
+  it('第二行最后一个 tag 放不下（isLast 分支，空间不足）', () => {
+    // 容器 100, overflowTag=30
+    // 第一行：50(rem=50)；2+60=62 > 50 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, not isLast): needed=60, 需 60+2+30=92 <= 100 ✓ → rem=40, r2count=1
+    //   i=2(not isFirst, isLast): needed=2+50=52 > 40 → 不放入, break
+    // visibleCount=2, overflowCount=1
+    expect(calcLayout([50, 60, 50], 30, 100)).toEqual({ visibleCount: 2, overflowCount: 1 });
+  });
+
+  it('第二行第一个 tag 就放不下时一个也不放', () => {
+    // 容器 60, overflowTag=30
+    // 第一行：50(rem=10)；2+50=52 > 10 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, not isLast): needed=50; 需 50+2+30=82 > 60 → break, r2count=0
+    // visibleCount=1, overflowCount=2
+    expect(calcLayout([50, 50, 50], 30, 60)).toEqual({ visibleCount: 1, overflowCount: 2 });
+  });
+
+  // ────────────────────── tag 宽度被截断 ──────────────────────
+
+  it('tag 宽度超过容器宽度时被截断为容器宽度', () => {
+    // tagWidths=[200,100], 容器 150 → widths=[150,100]
+    // 第一行：150(rem=0)；2+100=102 > 0 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, isLast): needed=100 <= 150 ✓ → r2count=1, break
+    // visibleCount=2, overflowCount=0
+    expect(calcLayout([200, 100], 30, 150)).toEqual({ visibleCount: 2, overflowCount: 0 });
+  });
+
+  it('多个 tag 均超出容器宽度时均被截断', () => {
+    // 每个 tag 截断为 100，容器 100, overflowTag=30
+    // 第一行：100(rem=0)；2+100=102 > 0 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, not isLast): needed=100; 需 100+2+30=132 > 100 → break
+    // visibleCount=1, overflowCount=2
+    expect(calcLayout([200, 300, 400], 30, 100)).toEqual({ visibleCount: 1, overflowCount: 2 });
+  });
+
+  // ────────────────────── 第一行只放得下一个 tag ──────────────────────
+
+  it('第一行恰好放一个、第二行剩余全部放下（均为最后）', () => {
+    // 容器 80, overflowTag=20
+    // 第一行：60(rem=20)；2+60=62 > 20 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, isLast): needed=60 <= 80 ✓ → r2count=1, break
+    // visibleCount=2, overflowCount=0
+    expect(calcLayout([60, 60], 20, 80)).toEqual({ visibleCount: 2, overflowCount: 0 });
+  });
+
+  // ────────────────────── overflowTagWidth 影响 ──────────────────────
+
+  it('overflowTagWidth 较大时第二行能放入的 tag 更少', () => {
+    // 容器 200, overflowTag=100
+    // 第一行：60(rem=140)；2+60=62(rem=78)；2+60=62 > 78? 78>=62 ✓(rem=16)；2+60=62 > 16 → row1End=2
+    // row1End=2 !== 4 → 进入第二行
+    // 第二行 r2start=3：
+    //   i=3(isFirst, not isLast): needed=60; 需 60+2+100=162 <= 200 ✓ → rem=140, r2count=1
+    //   i=4(not isFirst, isLast): needed=2+60=62 <= 140 ✓ → r2count=2, break
+    // visibleCount=5, overflowCount=0
+    expect(calcLayout([60, 60, 60, 60, 60], 100, 200)).toEqual({ visibleCount: 5, overflowCount: 0 });
+  });
+
+  it('overflowTagWidth 较大导致第二行无法放入任何 tag', () => {
+    // 容器 80, overflowTag=80
+    // 第一行：40(rem=40)；2+40=42 > 40 → row1End=0
+    // 第二行 r2start=1：
+    //   i=1(isFirst, not isLast): needed=40; 需 40+2+80=122 > 80 → break
+    // visibleCount=1, overflowCount=2
+    expect(calcLayout([40, 40, 40], 80, 80)).toEqual({ visibleCount: 1, overflowCount: 2 });
+  });
+});
diff --git a/src/components/TableTags/Tags.tsx b/src/components/TableTags/Tags.tsx
index 916b6c259..486baebc2 100644
--- a/src/components/TableTags/Tags.tsx
+++ b/src/components/TableTags/Tags.tsx
@@ -5,13 +5,17 @@ import { Trans } from 'react-i18next';
 
 import { copy2ClipBoard } from '@/utils';
 
-interface Props {
+interface Props<T> {
   type: 'outline' | 'fill';
-  bgColor?: string; // 背景颜色，仅在 type 为 'fill' 时生效
-  fontColor?: string; // 字体颜色，仅在 type 为 'fill' 时生效
-  data: string[];
-  icon?: React.ReactNode | ((tagname: string) => React.ReactNode);
-  onTagClick?: (tag: string) => void;
+  maxWidth?: number; // 容器最大宽度，设置后布局计算以此为上限
+  borderRadius?: number; // 边框圆角
+  bgColor?: string | ((item: string | T, index: number) => string); // 背景颜色，仅在 type 为 'fill' 时生效
+  fontColor?: string | ((item: string | T, index: number) => string); // 字体颜色，仅在 type 为 'fill' 时生效
+  icon?: React.ReactNode | ((item: string | T, index: number) => React.ReactNode);
+  data: string[] | T[];
+  getKey?: (item: T, index: number) => React.Key;
+  getLabel?: (item: T, index: number) => string;
+  onTagClick?: (item: string | T, index: number) => void;
 }
 
 const GAP = 2;
@@ -19,7 +23,7 @@ const GAP = 2;
 /**
  * 核心布局算法：根据实际测量的 tag 宽度计算可见数量
  */
-function calcLayout(tagWidths: number[], overflowTagWidth: number, containerWidth: number): { visibleCount: number; overflowCount: number } {
+export function calcLayout(tagWidths: number[], overflowTagWidth: number, containerWidth: number): { visibleCount: number; overflowCount: number } {
   if (!tagWidths.length || containerWidth <= 0) {
     return { visibleCount: tagWidths.length, overflowCount: 0 };
   }
@@ -71,38 +75,56 @@ function calcLayout(tagWidths: number[], overflowTagWidth: number, containerWidt
   return { visibleCount, overflowCount: widths.length - visibleCount };
 }
 
-function resolveIcon(icon: Props['icon'], tagname: string): React.ReactNode | undefined {
+function resolveIcon<T>(icon: Props<T>['icon'], item: string | T, index: number): React.ReactNode | undefined {
   if (!icon) return undefined;
-  return typeof icon === 'function' ? icon(tagname) : icon;
+  return typeof icon === 'function' ? icon(item, index) : icon;
 }
 
-export default function Tags(props: Props) {
-  const { type = 'outline', data, icon, onTagClick } = props;
-  const bgColor = props.bgColor || 'var(--fc-violet-3)';
-  const fontColor = props.fontColor || 'var(--fc-violet-11)';
+function resolveColor<T>(color: string | ((item: string | T, index: number) => string) | undefined, item: string | T, index: number, defaultValue: string): string {
+  if (!color) return defaultValue;
+  return typeof color === 'function' ? color(item, index) : color;
+}
+
+export default function Tags<T>(props: Props<T>) {
+  const { type = 'outline', data, icon, onTagClick, getKey, getLabel, maxWidth } = props;
+  const borderRadius = props.borderRadius ?? 16;
   const containerRef = useRef<HTMLDivElement>(null);
   const tagMeasureRefs = useRef<(HTMLSpanElement | null)[]>([]);
   const overflowMeasureRef = useRef<HTMLSpanElement | null>(null);
   const [layout, setLayout] = useState({ visibleCount: data.length, overflowCount: 0 });
 
   // fill 模式下通过 inline style 设置动态颜色（Tailwind 不支持动态值）
-  const fillStyle: React.CSSProperties | undefined =
-    type === 'fill'
-      ? {
-          backgroundColor: bgColor,
-          backgroundClip: 'padding-box',
-          borderColor: bgColor,
-          color: fontColor,
-        }
-      : {
-          color: fontColor,
-        };
+  const getTagStyle = (item: string | T, index: number): React.CSSProperties => {
+    if (type === 'fill') {
+      const bg = resolveColor(props.bgColor, item, index, 'var(--fc-violet-3)');
+      const fc = resolveColor(props.fontColor, item, index, 'var(--fc-violet-11)');
+      return {
+        backgroundColor: bg,
+        backgroundClip: 'padding-box',
+        borderColor: bg,
+        color: fc,
+        borderRadius,
+      };
+    }
+    const fc = props.fontColor ? resolveColor(props.fontColor, item, index, '') : undefined;
+    return { ...(fc ? { color: fc } : {}), borderRadius };
+  };
 
   // tag 的 Tailwind 基础类（测量层和渲染层共用）
-  // p-[6px] border border-[var(--fc-border-color)] rounded-2xl leading-none whitespace-nowrap box-border
-  const tagBaseClass = `inline-flex items-center px-[6px] py-[4px] border ${
-    type === 'fill' ? '' : 'border-[var(--fc-border-color)]'
-  } rounded-2xl leading-none whitespace-nowrap box-border ${onTagClick ? 'cursor-pointer' : ''}`;
+  const getItemLabel = (item: string | T, index: number): string => {
+    if (typeof item === 'string') return item;
+    return getLabel ? getLabel(item as T, index) : String(item);
+  };
+
+  const getItemKey = (item: string | T, index: number): React.Key => {
+    if (typeof item === 'string') return index;
+    return getKey ? getKey(item as T, index) : index;
+  };
+
+  // p-[6px] border border-[var(--fc-border-color)] leading-none whitespace-nowrap box-border
+  const tagBaseClass = `inline-flex items-center px-[6px] py-[4px] border ${type === 'fill' ? '' : 'border-[var(--fc-border-color)]'} leading-none whitespace-nowrap box-border ${
+    onTagClick ? 'cursor-pointer' : ''
+  }`;
 
   // 可见层额外加溢出省略
   const visibleTagClass = `${tagBaseClass} overflow-hidden text-ellipsis max-w-full shrink-0`;
@@ -112,8 +134,9 @@ export default function Tags(props: Props) {
     if (!el) return;
 
     const compute = () => {
-      const containerWidth = el.getBoundingClientRect().width;
-      if (containerWidth <= 0) return;
+      const rawWidth = el.getBoundingClientRect().width;
+      if (rawWidth <= 0) return;
+      const containerWidth = maxWidth != null ? Math.min(rawWidth, maxWidth) : rawWidth;
 
       const tagWidths = tagMeasureRefs.current.slice(0, data.length).map((span) => (span ? Math.ceil(span.getBoundingClientRect().width) : containerWidth));
       const overflowTagWidth = overflowMeasureRef.current ? Math.ceil(overflowMeasureRef.current.getBoundingClientRect().width) : 40;
@@ -131,19 +154,19 @@ export default function Tags(props: Props) {
   const { visibleCount, overflowCount } = layout;
 
   return (
-    <div ref={containerRef} className='relative'>
+    <div ref={containerRef} className='relative' style={maxWidth != null ? { maxWidth } : undefined}>
       {/* 隐藏测量层：绝对定位不占空间，用于获取各 tag 的真实渲染宽度 */}
       <div aria-hidden className='absolute top-0 left-0 invisible pointer-events-none flex'>
-        {data.map((tag, i) => (
+        {(data as (string | T)[]).map((item, i) => (
           <span
-            key={i}
+            key={getItemKey(item, i)}
             ref={(el) => {
               tagMeasureRefs.current[i] = el;
             }}
             className={tagBaseClass}
           >
-            {icon && <span className='mr-2 flex items-center'>{resolveIcon(icon, tag)}</span>}
-            {tag}
+            {icon && <span className='mr-2 flex items-center'>{resolveIcon(icon, item, i)}</span>}
+            {getItemLabel(item, i)}
           </span>
         ))}
         {/* 用最大计数值预估 overflow tag 宽度上限 */}
@@ -154,19 +177,19 @@ export default function Tags(props: Props) {
 
       {/* 可见布局层 */}
       <div className='flex flex-wrap gap-0.5 content-start'>
-        {data.slice(0, visibleCount).map((tag, i) => (
+        {(data as (string | T)[]).slice(0, visibleCount).map((item, i) => (
           <span
-            key={i}
+            key={getItemKey(item, i)}
             className={visibleTagClass}
-            style={fillStyle}
-            title={tag}
+            style={getTagStyle(item, i)}
+            title={getItemLabel(item, i)}
             onClick={(e) => {
               e.stopPropagation();
-              onTagClick?.(tag);
+              onTagClick?.(item, i);
             }}
           >
-            {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, tag)}</span>}
-            {tag}
+            {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, item, i)}</span>}
+            {getItemLabel(item, i)}
           </span>
         ))}
         {overflowCount > 0 && (
@@ -178,25 +201,25 @@ export default function Tags(props: Props) {
                   type='text'
                   icon={<CopyOutlined />}
                   onClick={() => {
-                    copy2ClipBoard(data.join('\n'));
+                    copy2ClipBoard((data as (string | T)[]).map((item, i) => getItemLabel(item, i)).join('\n'));
                   }}
                 />
               </div>
             }
             content={
               <div>
-                {data.map((tag, i) => (
-                  <div key={i} className='mb-1'>
+                {(data as (string | T)[]).map((item, i) => (
+                  <div key={getItemKey(item, i)} className='mb-1'>
                     <div
                       className={tagBaseClass}
-                      style={fillStyle}
+                      style={getTagStyle(item, i)}
                       onClick={(e) => {
                         e.stopPropagation();
-                        onTagClick?.(tag);
+                        onTagClick?.(item, i);
                       }}
                     >
-                      {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, tag)}</span>}
-                      {tag}
+                      {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, item, i)}</span>}
+                      {getItemLabel(item, i)}
                     </div>
                   </div>
                 ))}
@@ -205,7 +228,7 @@ export default function Tags(props: Props) {
           >
             <span
               className={`${tagBaseClass} shrink-0`}
-              style={fillStyle}
+              style={getTagStyle('', -1)}
               onClick={(e) => {
                 e.stopPropagation();
               }}
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index b1785e764..d79878fb3 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -8,10 +8,8 @@ import _ from 'lodash';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 import { TriangleAlert, CircleCheckBig } from 'lucide-react';
-import Tags from '@/components/TableTags/Tags';
 
 import { CommonStateContext } from '@/App';
-import { priorityColor } from '@/utils/constant';
 import { updateAlertRules, deleteStrategy } from '@/services/warning';
 import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
 import RefreshIcon from '@/components/RefreshIcon';
@@ -19,10 +17,9 @@ import { TableActionButton, TableActionLink, TableActionTrigger } from '@/compon
 import DatasourceSelect from '@/components/DatasourceSelect/DatasourceSelect';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
 import { getItems as getNotificationRules, RuleItem as NotificationRuleItem } from '@/pages/notificationRules/services';
-import { NS as notificationRulesNS } from '@/pages/notificationRules/constants';
 import { AlertRuleType, AlertRuleStatus } from '@/pages/alertRules/types';
 import { defaultColumnsConfigs, LOCAL_STORAGE_KEY } from '@/pages/alertRules/List/constants';
 import EventsDrawer, { Props as EventsDrawerProps } from '@/pages/alertRules/List/EventsDrawer';
@@ -105,6 +102,7 @@ export default function AlertRules(props: Props) {
               type='fill'
               bgColor={val > 0 ? 'var(--fc-red-3)' : 'var(--fc-green-3)'}
               fontColor={val > 0 ? 'var(--fc-red-11)' : 'var(--fc-green-11)'}
+              borderRadius={6}
               icon={() => {
                 if (val > 0) {
                   return <TriangleAlert size={14} />;
@@ -133,12 +131,6 @@ export default function AlertRules(props: Props) {
           return localeCompare(a.name, b.name);
         },
         render: (data, record) => {
-          const cate = _.find(allCates, { value: record.cate });
-          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
-          let logoSrc = cate?.logo;
-          if (record.cate === 'host') {
-            logoSrc = '/image/logos/host.png';
-          }
           const groupName = !hideBusinessGroupColumn ? _.find(busiGroups, { id: record.group_id })?.name : undefined;
           return (
             <div className='flex flex-col gap-0.5'>
@@ -151,37 +143,71 @@ export default function AlertRules(props: Props) {
               >
                 {data}
               </Link>
-              <span className='text-soft text-xs inline-flex items-center gap-2 flex-wrap'>
-                {logoSrc && <img alt={record.cate} src={logoSrc} height={14} />}
-                {cateLabel && <span>{cateLabel}</span>}
-                {groupName && <span>{groupName}</span>}
-                {_.map(record.severities, (severity) => (
-                  <Tag key={severity} color={priorityColor[severity - 1]} style={{ marginRight: 0 }}>
-                    S{severity}
-                  </Tag>
-                ))}
-              </span>
+              <span className='text-soft text-xs inline-flex items-center gap-2 flex-wrap'>{groupName && <span>{groupName}</span>}</span>
             </div>
           );
         },
       },
+      {
+        title: t('table.severity'),
+        dataIndex: 'severities',
+        render: (data) => {
+          return (
+            <Tags
+              type='fill'
+              borderRadius={6}
+              data={_.map(data, (severity) => `S${severity}`)}
+              bgColor={(tagname) => {
+                const bgColorMap = {
+                  S1: 'var(--fc-red-3)',
+                  S2: 'var(--fc-orange-3)',
+                  S3: 'var(--fc-yellow-3)',
+                };
+                return bgColorMap[tagname] || 'var(--fc-gray-3)';
+              }}
+              fontColor={(tagname) => {
+                const fontColorMap = {
+                  S1: 'var(--fc-red-11)',
+                  S2: 'var(--fc-orange-11)',
+                  S3: 'var(--fc-yellow-11)',
+                };
+                return fontColorMap[tagname] || 'var(--fc-gray-11)';
+              }}
+            />
+          );
+        },
+      },
       {
         title: t('table.datasource_ids'),
         dataIndex: 'datasource_ids',
-        render(value) {
-          if (!value) return '';
+        render(value, record) {
+          if (!value) return '-';
+          const cate = _.find(allCates, { value: record.cate });
+          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
+          let logoSrc = cate?.logo;
+          if (record.cate === 'host') {
+            logoSrc = '/image/logos/host.png';
+          }
           return (
-            <TableTags
-              maxTagWidth={120}
-              data={_.compact(
-                _.map(value, (item) => {
-                  if (item === 0) return '$all';
-                  const name = _.find(datasourceList, { id: item })?.name;
-                  if (!name) return '';
-                  return name;
-                }),
+            <Space>
+              {logoSrc && (
+                <Tooltip title={cateLabel}>
+                  <img alt={record.cate} src={logoSrc} height={18} />
+                </Tooltip>
               )}
-            />
+              <Tags
+                type='outline'
+                maxWidth={180}
+                data={_.compact(
+                  _.map(value, (item) => {
+                    if (item === 0) return '$all';
+                    const name = _.find(datasourceList, { id: item })?.name;
+                    if (!name) return '';
+                    return name;
+                  }),
+                )}
+              />
+            </Space>
           );
         },
       },
@@ -189,14 +215,14 @@ export default function AlertRules(props: Props) {
         title: t('table.append_tags'),
         dataIndex: 'append_tags',
         render(value) {
-          return <TableTags data={value} maxVisible={2} maxTagWidth={180} />;
+          return <Tags type='outline' maxWidth={180} data={value} />;
         },
       },
       {
         title: t('table.notify_groups_obj'),
         dataIndex: 'notify_groups_obj',
         render: (data) => {
-          return <TableTags data={_.map(data, (user) => user.nickname || user.username || user.name)} maxVisible={2} maxTagWidth={160} />;
+          return <Tags type='outline' maxWidth={180} data={_.map(data, (user) => user.nickname || user.username || user.name)} />;
         },
       },
       {
@@ -204,14 +230,20 @@ export default function AlertRules(props: Props) {
         dataIndex: 'notify_rule_ids',
         render: (data) => {
           return (
-            <TableTags
+            <Tags<number>
+              type='outline'
+              maxWidth={180}
               data={data}
-              maxVisible={2}
-              maxTagWidth={160}
               getKey={(id) => id}
-              getLabel={(id) => _.find(notificationRules, { id })?.name || id}
-              getLinkTo={(id) => `/${notificationRulesNS}/edit/${id}`}
-              linkTarget='_blank'
+              getLabel={(id) => _.find(notificationRules, { id })?.name || _.toString(id)}
+              onTagClick={(id) => {
+                const finded = _.find(notificationRules, { id });
+                if (finded) {
+                  window.open(`/notification-rules/edit/${id}`, '_blank');
+                } else {
+                  message.warning(t('notify_rule_not_found'));
+                }
+              }}
             />
           );
         },
@@ -219,20 +251,31 @@ export default function AlertRules(props: Props) {
       {
         title: t('table.update_at'),
         dataIndex: 'update_at',
+        width: 60,
         sorter: (a, b) => {
           return a.update_at - b.update_at;
         },
         render: (text: string) => {
-          return <div className='table-text'>{moment.unix(Number(text)).format('YYYY-MM-DD HH:mm:ss')}</div>;
+          const m = moment.unix(Number(text));
+          return (
+            <div>
+              <div>{m.format('YYYY-MM-DD')}</div>
+              <div>{m.format('HH:mm:ss')}</div>
+            </div>
+          );
         },
       },
       {
         title: t('common:table.username'),
         dataIndex: 'update_by',
-      },
-      {
-        title: t('common:table.nickname'),
-        dataIndex: 'update_by_nickname',
+        render: (val, record) => {
+          return (
+            <div>
+              <div>{val}</div>
+              <div className='text-soft'>{record.update_by_nickname}</div>
+            </div>
+          );
+        },
       },
     ],
     readonly
diff --git a/src/pages/alertRules/List/constants.ts b/src/pages/alertRules/List/constants.ts
index 38ad22f79..24196474d 100644
--- a/src/pages/alertRules/List/constants.ts
+++ b/src/pages/alertRules/List/constants.ts
@@ -29,6 +29,11 @@ export const defaultColumnsConfigs = [
     i18nKey: 'table.name',
     visible: true,
   },
+  {
+    name: 'severities',
+    i18nKey: 'table.severity',
+    visible: false,
+  },
   {
     name: 'datasource_ids',
     i18nKey: 'table.datasource_ids',
@@ -59,11 +64,6 @@ export const defaultColumnsConfigs = [
     i18nKey: 'common:table.username',
     visible: true,
   },
-  {
-    name: 'update_by_nickname',
-    i18nKey: 'common:table.nickname',
-    visible: true,
-  },
   {
     name: 'disabled',
     i18nKey: 'table.disabled',
diff --git a/src/pages/alertRules/locale/en_US.ts b/src/pages/alertRules/locale/en_US.ts
index 8e69cab31..d7bb542bd 100644
--- a/src/pages/alertRules/locale/en_US.ts
+++ b/src/pages/alertRules/locale/en_US.ts
@@ -40,6 +40,7 @@ const en_US = {
   time_zone: 'Time zone',
   time_zone_tip: 'Time zone only affects the start time and end time in the rule, and does not affect the relevant time fields of viewing alert events',
   local_time: 'Local time',
+  notify_rule_not_found: 'Corresponding notification rule not found',
 
   notify_configs: 'Notification Configuration',
   notify_rule_ids: 'Notification rule',
diff --git a/src/pages/alertRules/locale/ja_JP.ts b/src/pages/alertRules/locale/ja_JP.ts
index fa36d3c5c..f8d505706 100644
--- a/src/pages/alertRules/locale/ja_JP.ts
+++ b/src/pages/alertRules/locale/ja_JP.ts
@@ -40,6 +40,7 @@ const ja_JP = {
   time_zone: 'タイムゾーン',
   time_zone_tip: 'タイムゾーンはルールの開始時間と終了時間にのみ影響し、アラートイベントの関連する時間フィールドの表示には影響しません',
   local_time: '現地時間',
+  notify_rule_not_found: '対応する通知ルールが見つかりません',
 
   notify_configs: '通知設定',
   notify_rule_ids: '通知ルール',
diff --git a/src/pages/alertRules/locale/ru_RU.ts b/src/pages/alertRules/locale/ru_RU.ts
index 24e4a70b4..7ae7721d1 100644
--- a/src/pages/alertRules/locale/ru_RU.ts
+++ b/src/pages/alertRules/locale/ru_RU.ts
@@ -40,6 +40,7 @@ const ru_RU = {
   time_zone: 'Часовой пояс',
   time_zone_tip: 'Часовой пояс влияет только на время начала и окончания в правиле, и не влияет на соответствующие временные поля при просмотре событий оповещений',
   local_time: 'Местное время',
+  notify_rule_not_found: 'Соответствующее правило уведомления не найдено',
 
   notify_configs: 'Настройки уведомлений',
   notify_rule_ids: 'Правила уведомлений',
diff --git a/src/pages/alertRules/locale/zh_CN.ts b/src/pages/alertRules/locale/zh_CN.ts
index ef8c45e58..309fcb9b1 100644
--- a/src/pages/alertRules/locale/zh_CN.ts
+++ b/src/pages/alertRules/locale/zh_CN.ts
@@ -39,6 +39,7 @@ const zh_CN = {
   time_zone: '时区',
   time_zone_tip: '时区仅影响规则中的开始时间、结束时间，不影响告警事件查看相关时间字段',
   local_time: '本地时间',
+  notify_rule_not_found: '未找到对应的通知规则',
 
   notify_configs: '通知配置',
   notify_rule_ids: '通知规则',
diff --git a/src/pages/alertRules/locale/zh_HK.ts b/src/pages/alertRules/locale/zh_HK.ts
index 4156e0e55..cebee4037 100644
--- a/src/pages/alertRules/locale/zh_HK.ts
+++ b/src/pages/alertRules/locale/zh_HK.ts
@@ -39,6 +39,7 @@ const zh_HK = {
   time_zone: '時區',
   time_zone_tip: '時區僅影響規則中的開始時間、結束時間，不影響告警事件查看相關時間字段',
   local_time: '本地時間',
+  notify_rule_not_found: '未找到對應的通知規則',
 
   notify_configs: '通知配置',
   notify_rule_ids: '通知規則',
diff --git a/src/pages/alertRules/types.ts b/src/pages/alertRules/types.ts
index b6a880ba4..727b4e20b 100644
--- a/src/pages/alertRules/types.ts
+++ b/src/pages/alertRules/types.ts
@@ -27,7 +27,8 @@ export interface AlertRuleType<T> {
   prod: string;
   severities: number[];
   update_at: number;
-  update_by: number;
+  update_by: string;
+  update_by_nickname?: string;
 
   cur_event_count: number;
 }

From a53ed5c7b524270280d20c558f1b0296c4aedda4 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 20:23:26 +0800
Subject: [PATCH 41/44] refactor(alertRules): render null instead of '-' for
 empty datasource cell

---
 src/pages/alertRules/List/ListNG.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index d79878fb3..9cad5d0ba 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -181,7 +181,7 @@ export default function AlertRules(props: Props) {
         title: t('table.datasource_ids'),
         dataIndex: 'datasource_ids',
         render(value, record) {
-          if (!value) return '-';
+          if (!value) return null;
           const cate = _.find(allCates, { value: record.cate });
           const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
           let logoSrc = cate?.logo;

From d27dde7ed97694f2bdd075d4d76818ddaeb8dbb7 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Wed, 20 May 2026 21:30:00 +0800
Subject: [PATCH 42/44] refactor(table): unify table styling and Tags component
 usage

- Remove scroll={{ x: 'max-content' }} from all table components to
  simplify layout behavior
- Replace TableTags with the new Tags component using outline style
  and consistent maxWidth
- Add null-safety to Tags component (accept null data, early return)
- Split update_at into two-row layout (date + time) across all tables
- Combine update_by/update_by_nickname and create_by/create_by_nickname
  into single columns with stacked display
- Inline business group name into metric name column in recordingRules
---
 src/components/TableTags/Tags.tsx             |  15 +-
 src/pages/aiConfig/agents/pages/List.tsx      |   1 -
 src/pages/aiConfig/llmConfigs/pages/List.tsx  |   1 -
 src/pages/aiConfig/mcpServers/pages/List.tsx  |   1 -
 .../builtInComponents/AlertRules/index.tsx    |   1 -
 .../builtInComponents/CollectTpls/index.tsx   |   1 -
 .../builtInComponents/Dashboards/index.tsx    |   1 -
 src/pages/builtInComponents/Metrics/index.tsx |   1 -
 src/pages/dashboard/List/index.tsx            |   1 -
 .../components/TableSource/index.tsx          |   1 -
 .../embeddedProduct/pages/List/index.tsx      |   1 -
 src/pages/event/Table.tsx                     |   1 -
 src/pages/event/card.tsx                      |   1 -
 src/pages/eventPipeline/pages/List/index.tsx  |  19 +-
 src/pages/log/IndexPatterns/index.tsx         |   1 -
 src/pages/metricsBuiltin/List.tsx             |   1 -
 .../notificationChannels/pages/List/index.tsx |   1 -
 src/pages/notificationRules/pages/List.tsx    |  15 +-
 src/pages/recordingRules/PageTable.tsx        | 269 +++++++++---------
 src/pages/task/index.tsx                      |  15 +-
 src/pages/taskTpl/index.tsx                   |  20 +-
 src/pages/user/business.tsx                   |   1 -
 src/pages/user/groups.tsx                     |  11 +-
 src/pages/user/users.tsx                      |   1 -
 src/pages/variableConfigs/index.tsx           |   1 -
 src/pages/warning/shield/index.tsx            |  21 +-
 src/pages/warning/subscribe/ListNG.tsx        |  43 +--
 27 files changed, 239 insertions(+), 207 deletions(-)

diff --git a/src/components/TableTags/Tags.tsx b/src/components/TableTags/Tags.tsx
index 486baebc2..f74aa5cfc 100644
--- a/src/components/TableTags/Tags.tsx
+++ b/src/components/TableTags/Tags.tsx
@@ -12,7 +12,7 @@ interface Props<T> {
   bgColor?: string | ((item: string | T, index: number) => string); // 背景颜色，仅在 type 为 'fill' 时生效
   fontColor?: string | ((item: string | T, index: number) => string); // 字体颜色，仅在 type 为 'fill' 时生效
   icon?: React.ReactNode | ((item: string | T, index: number) => React.ReactNode);
-  data: string[] | T[];
+  data: string[] | T[] | null; // null 兼容接口可能返回 null 值的情况
   getKey?: (item: T, index: number) => React.Key;
   getLabel?: (item: T, index: number) => string;
   onTagClick?: (item: string | T, index: number) => void;
@@ -86,12 +86,15 @@ function resolveColor<T>(color: string | ((item: string | T, index: number) => s
 }
 
 export default function Tags<T>(props: Props<T>) {
-  const { type = 'outline', data, icon, onTagClick, getKey, getLabel, maxWidth } = props;
+  const { type = 'outline', icon, data, onTagClick, getKey, getLabel, maxWidth } = props;
+
+  if (!data || data.length === 0) return null;
+
   const borderRadius = props.borderRadius ?? 16;
   const containerRef = useRef<HTMLDivElement>(null);
   const tagMeasureRefs = useRef<(HTMLSpanElement | null)[]>([]);
   const overflowMeasureRef = useRef<HTMLSpanElement | null>(null);
-  const [layout, setLayout] = useState({ visibleCount: data.length, overflowCount: 0 });
+  const [layout, setLayout] = useState({ visibleCount: data?.length, overflowCount: 0 });
 
   // fill 模式下通过 inline style 设置动态颜色（Tailwind 不支持动态值）
   const getTagStyle = (item: string | T, index: number): React.CSSProperties => {
@@ -138,7 +141,7 @@ export default function Tags<T>(props: Props<T>) {
       if (rawWidth <= 0) return;
       const containerWidth = maxWidth != null ? Math.min(rawWidth, maxWidth) : rawWidth;
 
-      const tagWidths = tagMeasureRefs.current.slice(0, data.length).map((span) => (span ? Math.ceil(span.getBoundingClientRect().width) : containerWidth));
+      const tagWidths = tagMeasureRefs.current.slice(0, data?.length).map((span) => (span ? Math.ceil(span.getBoundingClientRect().width) : containerWidth));
       const overflowTagWidth = overflowMeasureRef.current ? Math.ceil(overflowMeasureRef.current.getBoundingClientRect().width) : 40;
 
       setLayout(calcLayout(tagWidths, overflowTagWidth, containerWidth));
@@ -171,7 +174,7 @@ export default function Tags<T>(props: Props<T>) {
         ))}
         {/* 用最大计数值预估 overflow tag 宽度上限 */}
         <span ref={overflowMeasureRef} className={tagBaseClass}>
-          +{data.length}
+          +{data?.length}
         </span>
       </div>
 
@@ -196,7 +199,7 @@ export default function Tags<T>(props: Props<T>) {
           <Popover
             title={
               <div className='flex justify-between items-center'>
-                <Trans ns='common' i18nKey='tags_popover_title' values={{ count: data.length }} />
+                <Trans ns='common' i18nKey='tags_popover_title' values={{ count: data?.length }} />
                 <Button
                   type='text'
                   icon={<CopyOutlined />}
diff --git a/src/pages/aiConfig/agents/pages/List.tsx b/src/pages/aiConfig/agents/pages/List.tsx
index 3cfd0a9a5..d04a4ab4e 100644
--- a/src/pages/aiConfig/agents/pages/List.tsx
+++ b/src/pages/aiConfig/agents/pages/List.tsx
@@ -58,7 +58,6 @@ export default function List() {
                 pagination={pagination}
                 loading={loading}
                 dataSource={data}
-                scroll={{ x: 'max-content' }}
                 columns={[
                   {
                     dataIndex: 'name',
diff --git a/src/pages/aiConfig/llmConfigs/pages/List.tsx b/src/pages/aiConfig/llmConfigs/pages/List.tsx
index f531119bc..dd4f6f5cd 100644
--- a/src/pages/aiConfig/llmConfigs/pages/List.tsx
+++ b/src/pages/aiConfig/llmConfigs/pages/List.tsx
@@ -41,7 +41,6 @@ export default function List() {
                 pagination={pagination}
                 loading={loading}
                 dataSource={data}
-                scroll={{ x: 'max-content' }}
                 columns={[
                   {
                     dataIndex: 'id',
diff --git a/src/pages/aiConfig/mcpServers/pages/List.tsx b/src/pages/aiConfig/mcpServers/pages/List.tsx
index a69ab481e..4c92ed3cf 100644
--- a/src/pages/aiConfig/mcpServers/pages/List.tsx
+++ b/src/pages/aiConfig/mcpServers/pages/List.tsx
@@ -41,7 +41,6 @@ export default function List() {
                 pagination={pagination}
                 loading={loading}
                 dataSource={data}
-                scroll={{ x: 'max-content' }}
                 columns={[
                   {
                     dataIndex: 'name',
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index 3c21298e5..5fb28f5f5 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -333,7 +333,6 @@ export default function index(props: Props) {
             },
           },
         ]}
-        scroll={{ x: 'max-content' }}
         pagination={pagination}
       />
     </>
diff --git a/src/pages/builtInComponents/CollectTpls/index.tsx b/src/pages/builtInComponents/CollectTpls/index.tsx
index 42691c29e..c9044dd2a 100644
--- a/src/pages/builtInComponents/CollectTpls/index.tsx
+++ b/src/pages/builtInComponents/CollectTpls/index.tsx
@@ -239,7 +239,6 @@ export default function index(props: Props) {
             },
           },
         ]}
-        scroll={{ x: 'max-content' }}
         pagination={pagination}
       />
     </>
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index 708554cb4..2060e50eb 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -287,7 +287,6 @@ export default function index(props: Props) {
             },
           },
         ]}
-        scroll={{ x: 'max-content' }}
         pagination={pagination}
       />
     </>
diff --git a/src/pages/builtInComponents/Metrics/index.tsx b/src/pages/builtInComponents/Metrics/index.tsx
index aa1389e66..0a25c65d1 100644
--- a/src/pages/builtInComponents/Metrics/index.tsx
+++ b/src/pages/builtInComponents/Metrics/index.tsx
@@ -426,7 +426,6 @@ export default function index(props: Props) {
         rowKey='id'
         {...tableProps}
         columns={ajustColumns(columns, columnsConfigs)}
-        scroll={{ x: 'max-content' }}
         pagination={{
           ...pagination,
           ...tableProps.pagination,
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index 84a83da04..7d6def092 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -407,7 +407,6 @@ export default function index() {
             )}
             rowKey='id'
             size='small'
-            scroll={{ x: 'max-content' }}
             rowSelection={{
               selectedRowKeys: selectRowKeys,
               onChange: (selectedRowKeys: number[]) => {
diff --git a/src/pages/datasource/components/TableSource/index.tsx b/src/pages/datasource/components/TableSource/index.tsx
index f19ce4850..dbf9451aa 100644
--- a/src/pages/datasource/components/TableSource/index.tsx
+++ b/src/pages/datasource/components/TableSource/index.tsx
@@ -287,7 +287,6 @@ const TableSource = (props: IPropsType) => {
         size='small'
         className='settings-data-source-list'
         rowKey='id'
-        scroll={{ x: 'max-content' }}
         dataSource={_.filter(tableData, (item) => {
           if (searchVal) {
             return _.includes(item.name, searchVal);
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index e9ab83fe2..a4e14c5b7 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -233,7 +233,6 @@ export default function Index() {
           pagination={false}
           dataSource={data}
           columns={columns}
-          scroll={{ x: 'max-content' }}
           onRow={(record) => {
             return {
               onDoubleClick: () => {
diff --git a/src/pages/event/Table.tsx b/src/pages/event/Table.tsx
index 2918436af..2ce8bfa8d 100644
--- a/src/pages/event/Table.tsx
+++ b/src/pages/event/Table.tsx
@@ -245,7 +245,6 @@ export default function TableCpt(props: IProps) {
           rowKey={(record) => record.id}
           columns={columns}
           {...tableProps}
-          scroll={{ x: 'max-content' }}
           rowClassName={(record: { severity: number; is_recovered: number }) => {
             return SeverityColor[record.is_recovered ? 3 : record.severity - 1] + '-left-border';
           }}
diff --git a/src/pages/event/card.tsx b/src/pages/event/card.tsx
index aac4b06a7..078a3a065 100644
--- a/src/pages/event/card.tsx
+++ b/src/pages/event/card.tsx
@@ -342,7 +342,6 @@ function Card(props: Props, ref) {
           }}
           dataSource={drawerList}
           columns={columns}
-          scroll={{ x: 'max-content' }}
           pagination={{
             defaultPageSize: 30,
             showSizeChanger: true,
diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index 33ee6e5ce..e77a322c7 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -13,7 +13,7 @@ import Add from '../Add';
 import Edit from '../Edit';
 import MoreOperations from './MoreOperations';
 import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 
 export default function List() {
   const { t } = useTranslation(NS);
@@ -157,7 +157,6 @@ export default function List() {
       <Table
         size='small'
         rowKey='id'
-        scroll={{ x: 'max-content' }}
         columns={[
           {
             title: t('common:table.name'),
@@ -211,18 +210,30 @@ export default function List() {
             title: t('teams'),
             dataIndex: 'team_names',
             render: (val) => {
-              return <TableTags data={val} maxVisible={2} maxTagWidth={160} />;
+              return <Tags type='outline' maxWidth={180} data={val} />;
             },
           },
           {
             title: t('common:table.update_by'),
             dataIndex: 'update_by',
+            render: (val, record: any) => (
+              <div>
+                <div>{val}</div>
+                {record.update_by_nickname && <div className='text-soft'>{record.update_by_nickname}</div>}
+              </div>
+            ),
           },
           {
             title: t('common:table.update_at'),
             dataIndex: 'update_at',
             render: (val) => {
-              return moment.unix(val).format('YYYY-MM-DD HH:mm:ss');
+              const m = moment.unix(val);
+              return (
+                <div>
+                  <div>{m.format('YYYY-MM-DD')}</div>
+                  <div>{m.format('HH:mm:ss')}</div>
+                </div>
+              );
             },
           },
           {
diff --git a/src/pages/log/IndexPatterns/index.tsx b/src/pages/log/IndexPatterns/index.tsx
index 511d7e515..17fee7815 100644
--- a/src/pages/log/IndexPatterns/index.tsx
+++ b/src/pages/log/IndexPatterns/index.tsx
@@ -116,7 +116,6 @@ export default function Servers() {
                 tableLayout='fixed'
                 loading={loading}
                 dataSource={_.filter(data, (item) => _.includes(_.toLower(item.name), _.toLower(search)))}
-                scroll={{ x: 'max-content' }}
                 pagination={false}
                 columns={[
                   {
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index ef6ae9a1d..c51e5f9a1 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -625,7 +625,6 @@ export default function index() {
               rowKey='id'
               {...tableProps}
               columns={ajustColumns(columns, columnsConfigs)}
-              scroll={{ x: 'max-content' }}
               pagination={{
                 ...pagination,
                 ...tableProps.pagination,
diff --git a/src/pages/notificationChannels/pages/List/index.tsx b/src/pages/notificationChannels/pages/List/index.tsx
index 19f71a535..a8138c2ae 100644
--- a/src/pages/notificationChannels/pages/List/index.tsx
+++ b/src/pages/notificationChannels/pages/List/index.tsx
@@ -226,7 +226,6 @@ export default function List() {
               },
             },
           ]}
-          scroll={{ x: 'max-content' }}
           rowSelection={{
             selectedRowKeys: _.map(selectedRows, 'id'),
             onChange: (_selectedRowKeys, selectedRows: ChannelItem[]) => {
diff --git a/src/pages/notificationRules/pages/List.tsx b/src/pages/notificationRules/pages/List.tsx
index 4f5602bbf..d0499cc86 100644
--- a/src/pages/notificationRules/pages/List.tsx
+++ b/src/pages/notificationRules/pages/List.tsx
@@ -166,12 +166,24 @@ export default function List() {
             {
               title: t('common:table.update_by'),
               dataIndex: 'update_by',
+              render: (val, record: any) => (
+                <div>
+                  <div>{val}</div>
+                  {record.update_by_nickname && <div className='text-soft'>{record.update_by_nickname}</div>}
+                </div>
+              ),
             },
             {
               title: t('common:table.update_at'),
               dataIndex: 'update_at',
               render: (val) => {
-                return moment.unix(val).format('YYYY-MM-DD HH:mm:ss');
+                const m = moment.unix(val);
+                return (
+                  <div>
+                    <div>{m.format('YYYY-MM-DD')}</div>
+                    <div>{m.format('HH:mm:ss')}</div>
+                  </div>
+                );
               },
             },
             {
@@ -252,7 +264,6 @@ export default function List() {
               },
             },
           ]}
-          scroll={{ x: 'max-content' }}
           pagination={pagination}
         />
       </div>
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index 528c7c7a2..89271993e 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -14,7 +14,7 @@ import { deleteRecordingRule } from '@/services/recording';
 import { CommonStateContext } from '@/App';
 import localeCompare from '@/pages/dashboard/Renderer/utils/localeCompare';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import EditModal from './components/editModal';
 import Import from './components/Import';
 import Export from './components/Export';
@@ -115,45 +115,36 @@ const PageTable: React.FC<Props> = ({ gids }) => {
     getRecordingRules();
   };
 
-  const columns: ColumnType<strategyItem>[] = _.concat(
-    businessGroup.isLeaf && gids !== '-2'
-      ? []
-      : ([
-          {
-            title: t('common:business_group'),
-            dataIndex: 'group_id',
-            width: 100,
-            render: (id) => {
-              return _.find(busiGroups, { id })?.name;
-            },
-          },
-        ] as any),
-    [
-      {
-        title: t('common:datasource.name'),
-        dataIndex: 'datasource_ids',
-        render: (data) => {
-          return (
-            <TableTags
-              data={_.map(
-                _.filter(data, (item) => item === 0 || _.find(groupedDatasourceList.prometheus, { id: item })),
-                (item) => {
-                  if (item === 0) return '$all';
-                  return _.find(groupedDatasourceList.prometheus, { id: item })?.name!;
-                },
-              )}
-            />
-          );
-        },
+  const columns: ColumnType<strategyItem>[] = _.concat([
+    {
+      title: t('common:datasource.name'),
+      dataIndex: 'datasource_ids',
+      render: (data) => {
+        return (
+          <Tags
+            type='outline'
+            maxWidth={180}
+            data={_.map(
+              _.filter(data, (item) => item === 0 || _.find(groupedDatasourceList.prometheus, { id: item })),
+              (item) => {
+                if (item === 0) return '$all';
+                return _.find(groupedDatasourceList.prometheus, { id: item })?.name!;
+              },
+            )}
+          />
+        );
       },
-      {
-        title: t('name'),
-        dataIndex: 'name',
-        sorter: (a, b) => {
-          return localeCompare(a.name, b.name);
-        },
-        render: (data, record) => {
-          return (
+    },
+    {
+      title: t('name'),
+      dataIndex: 'name',
+      sorter: (a, b) => {
+        return localeCompare(a.name, b.name);
+      },
+      render: (data, record) => {
+        const groupName = !(businessGroup.isLeaf && gids !== '-2') ? _.find(busiGroups, { id: record.group_id })?.name : undefined;
+        return (
+          <div className='flex flex-col gap-0.5'>
             <div
               className='table-active-text'
               onClick={() => {
@@ -162,108 +153,117 @@ const PageTable: React.FC<Props> = ({ gids }) => {
             >
               {data}
             </div>
-          );
-        },
+            {groupName && <span className='text-soft text-xs'>{groupName}</span>}
+          </div>
+        );
       },
-      {
-        title: t('cron_pattern'),
-        dataIndex: 'cron_pattern',
+    },
+    {
+      title: t('cron_pattern'),
+      dataIndex: 'cron_pattern',
+    },
+    {
+      title: t('append_tags'),
+      dataIndex: 'append_tags',
+      render: (data) => {
+        const array = data || [];
+        return <Tags type='outline' maxWidth={180} data={array} />;
       },
-      {
-        title: t('append_tags'),
-        dataIndex: 'append_tags',
-        render: (data) => {
-          const array = data || [];
-          return <TableTags data={array} maxVisible={2} maxTagWidth={160} emptyText={<div />} />;
-        },
+    },
+    {
+      title: t('common:table.update_at'),
+      dataIndex: 'update_at',
+      sorter: (a, b) => {
+        return a.update_at - b.update_at;
       },
-      {
-        title: t('common:table.update_at'),
-        dataIndex: 'update_at',
-        sorter: (a, b) => {
-          return a.update_at - b.update_at;
-        },
-        render: (text: number) => moment.unix(text).format('YYYY-MM-DD HH:mm:ss'),
+      render: (text: number) => {
+        const m = moment.unix(text);
+        return (
+          <div>
+            <div>{m.format('YYYY-MM-DD')}</div>
+            <div>{m.format('HH:mm:ss')}</div>
+          </div>
+        );
       },
-      {
-        title: t('disabled'),
-        dataIndex: 'disabled',
-        render: (disabled, record) => (
-          <Switch
-            checked={disabled === strategyStatus.Enable}
-            size='small'
-            onChange={() => {
-              const { id, disabled } = record;
-              updateRecordingRules(
-                {
-                  ids: [id],
-                  fields: {
-                    disabled: !disabled ? 1 : 0,
-                  },
+    },
+    {
+      title: t('disabled'),
+      dataIndex: 'disabled',
+      render: (disabled, record) => (
+        <Switch
+          checked={disabled === strategyStatus.Enable}
+          size='small'
+          onChange={() => {
+            const { id, disabled } = record;
+            updateRecordingRules(
+              {
+                ids: [id],
+                fields: {
+                  disabled: !disabled ? 1 : 0,
                 },
-                record.group_id,
-              ).then(() => {
-                refreshList();
-              });
-            }}
-          />
-        ),
-      },
-      {
-        title: t('common:table.operations'),
-        dataIndex: 'operator',
-        width: 64,
-        fixed: 'right' as const,
-        render: (data, record) => {
-          return (
-            <Dropdown
-              trigger={['click']}
-              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
-              overlayClassName='fc-table-action-dropdown'
-              overlay={
-                <Menu>
-                  <Menu.Item>
-                    <TableActionButton
-                      actionIcon='copy'
-                      onClick={() => {
-                        handleClickEdit(record.id, true);
-                      }}
-                    >
-                      {t('common:btn.clone')}
-                    </TableActionButton>
-                  </Menu.Item>
-                  <Menu.Divider />
-                  <Menu.Item>
-                    <TableActionButton
-                      actionIcon='delete'
-                      danger
-                      onClick={() => {
-                        confirm({
-                          title: t('common:confirm.delete'),
-                          onOk: () => {
-                            deleteRecordingRule([record.id], record.group_id).then(() => {
-                              message.success(t('common:success.delete'));
-                              refreshList();
-                            });
-                          },
+              },
+              record.group_id,
+            ).then(() => {
+              refreshList();
+            });
+          }}
+        />
+      ),
+    },
+    {
+      title: t('common:table.operations'),
+      dataIndex: 'operator',
+      width: 64,
+      fixed: 'right' as const,
+      render: (data, record) => {
+        return (
+          <Dropdown
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+            overlayClassName='fc-table-action-dropdown'
+            overlay={
+              <Menu>
+                <Menu.Item>
+                  <TableActionButton
+                    actionIcon='copy'
+                    onClick={() => {
+                      handleClickEdit(record.id, true);
+                    }}
+                  >
+                    {t('common:btn.clone')}
+                  </TableActionButton>
+                </Menu.Item>
+                <Menu.Divider />
+                <Menu.Item>
+                  <TableActionButton
+                    actionIcon='delete'
+                    danger
+                    onClick={() => {
+                      confirm({
+                        title: t('common:confirm.delete'),
+                        onOk: () => {
+                          deleteRecordingRule([record.id], record.group_id).then(() => {
+                            message.success(t('common:success.delete'));
+                            refreshList();
+                          });
+                        },
 
-                          onCancel() {},
-                        });
-                      }}
-                    >
-                      {t('common:btn.delete')}
-                    </TableActionButton>
-                  </Menu.Item>
-                </Menu>
-              }
-            >
-              <TableActionTrigger />
-            </Dropdown>
-          );
-        },
+                        onCancel() {},
+                      });
+                    }}
+                  >
+                    {t('common:btn.delete')}
+                  </TableActionButton>
+                </Menu.Item>
+              </Menu>
+            }
+          >
+            <TableActionTrigger />
+          </Dropdown>
+        );
       },
-    ],
-  );
+    },
+  ]);
 
   const toOneArr = (arr, res, name) => {
     arr.forEach((ele) => {
@@ -433,7 +433,6 @@ const PageTable: React.FC<Props> = ({ gids }) => {
         className='mt-2'
         size='small'
         rowKey='id'
-        scroll={{ x: 'max-content' }}
         pagination={{
           total: currentStrategyData.length,
           showQuickJumper: true,
diff --git a/src/pages/task/index.tsx b/src/pages/task/index.tsx
index ca6a76145..35a141b19 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -145,13 +145,25 @@ const index = (_props: any) => {
         title: t('task.creator'),
         dataIndex: 'create_by',
         width: 100,
+        render: (val, record: any) => (
+          <div>
+            <div>{val}</div>
+            {record.create_by_nickname && <div className='text-soft'>{record.create_by_nickname}</div>}
+          </div>
+        ),
       },
       {
         title: t('task.created'),
         dataIndex: 'create_at',
         width: 160,
         render: (text) => {
-          return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
+          const m = moment.unix(text);
+          return (
+            <div>
+              <div>{m.format('YYYY-MM-DD')}</div>
+              <div>{m.format('HH:mm:ss')}</div>
+            </div>
+          );
         },
       },
       {
@@ -254,7 +266,6 @@ const index = (_props: any) => {
               rowKey='id'
               columns={columns as any}
               {...(tableProps as any)}
-              scroll={{ x: 'max-content' }}
               pagination={{
                 ...pagination,
                 ...tableProps.pagination,
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index d520630da..4cdce2691 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -24,7 +24,7 @@ import moment from 'moment';
 import { useAntdTable } from 'ahooks';
 import { useTranslation } from 'react-i18next';
 import { TableActionButton, TableActionLink, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 
 import request from '@/utils/request';
 import { RequestMethod } from '@/store/common';
@@ -41,7 +41,6 @@ import UnBindTags from './unBindTags';
 
 const N9E_GIDS_LOCALKEY = 'N9E_TASK_TPL_NODE_ID';
 const SEARCH_SESSION_KEY = 'taskTpl_query';
-const TASK_TPL_TABLE_SCROLL_X = 1052;
 
 function getTableData(options: any, gids: string | undefined, query: string) {
   if (gids) {
@@ -142,20 +141,32 @@ const index = (_props: any) => {
         dataIndex: 'tags',
         width: 280,
         render: (text) => {
-          return <TableTags data={text} maxVisible={2} maxTagWidth={160} onTagClick={handleTagClick} />;
+          return <Tags type='outline' maxWidth={180} data={text} onTagClick={handleTagClick} />;
         },
       },
       {
         title: t('tpl.creator'),
         dataIndex: 'create_by',
         width: 120,
+        render: (val, record: any) => (
+          <div>
+            <div>{val}</div>
+            {record.create_by_nickname && <div className='text-soft'>{record.create_by_nickname}</div>}
+          </div>
+        ),
       },
       {
         title: t('tpl.last_updated'),
         dataIndex: 'update_at',
         width: 180,
         render: (text) => {
-          return moment.unix(text).format('YYYY-MM-DD HH:mm:ss');
+          const m = moment.unix(text);
+          return (
+            <div>
+              <div>{m.format('YYYY-MM-DD')}</div>
+              <div>{m.format('HH:mm:ss')}</div>
+            </div>
+          );
         },
       },
       {
@@ -285,7 +296,6 @@ const index = (_props: any) => {
               rowKey='id'
               columns={columns}
               {...(tableProps as any)}
-              scroll={{ x: TASK_TPL_TABLE_SCROLL_X }}
               rowSelection={{
                 selectedRowKeys: selectedIds,
                 onChange: (selectedRowKeys) => {
diff --git a/src/pages/user/business.tsx b/src/pages/user/business.tsx
index ec4584bdb..e7c63ca79 100644
--- a/src/pages/user/business.tsx
+++ b/src/pages/user/business.tsx
@@ -340,7 +340,6 @@ const Resource: React.FC = () => {
                 rowKey='id'
                 columns={teamMemberColumns}
                 dataSource={memberList && memberList.length > 0 ? memberList.filter((item) => item.user_group && item.user_group.name.indexOf(searchMemberValue) !== -1) : []}
-                scroll={{ x: 'max-content' }}
                 loading={memberLoading}
                 pagination={pagination}
               />
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index 737729263..17e7b7265 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -409,16 +409,7 @@ const Resource: React.FC = () => {
                 </Button>
               </Row>
 
-              <Table
-                className='mt-2'
-                size='small'
-                rowKey='id'
-                columns={teamMemberColumns}
-                dataSource={memberList}
-                loading={memberLoading}
-                pagination={pagination}
-                scroll={{ x: 'max-content' }}
-              />
+              <Table className='mt-2' size='small' rowKey='id' columns={teamMemberColumns} dataSource={memberList} loading={memberLoading} pagination={pagination} />
             </div>
           ) : (
             <div className='blank-busi-holder'>
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 1c08493b0..1c3407c4c 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -305,7 +305,6 @@ const Resource: React.FC = () => {
           rowKey='id'
           columns={ajustColumns(userColumns, columnsConfigs)}
           {...tableProps}
-          scroll={{ x: 'max-content' }}
           pagination={{
             ...tableProps.pagination,
             ...pagination,
diff --git a/src/pages/variableConfigs/index.tsx b/src/pages/variableConfigs/index.tsx
index bdb5304c5..ba226da20 100644
--- a/src/pages/variableConfigs/index.tsx
+++ b/src/pages/variableConfigs/index.tsx
@@ -89,7 +89,6 @@ export default function index() {
           className='mt-2'
           rowKey='id'
           size='small'
-          scroll={{ x: 'max-content' }}
           columns={[
             {
               dataIndex: 'ckey',
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 0b43222a3..bb472dff7 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -24,7 +24,7 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, Link } from 'react-router-dom';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import PageLayout from '@/components/pageLayout';
 import { getBusiGroupsAlertMutes, deleteShields, updateShields } from '@/services/shield';
 import { shieldItem, strategyStatus } from '@/store/warningInterface';
@@ -114,8 +114,9 @@ const Shield: React.FC = () => {
         render(value, record: any) {
           if (!value) return '-';
           return (
-            <TableTags
-              maxTagWidth={120}
+            <Tags
+              type='outline'
+              maxWidth={180}
               data={_.compact(
                 _.map(value, (item) => {
                   if (item === 0) return '$all';
@@ -233,12 +234,24 @@ const Shield: React.FC = () => {
         title: t('common:table.update_at'),
         dataIndex: 'update_at',
         render: (value) => {
-          return moment.unix(value).format('YYYY-MM-DD HH:mm:ss');
+          const m = moment.unix(value);
+          return (
+            <div>
+              <div>{m.format('YYYY-MM-DD')}</div>
+              <div>{m.format('HH:mm:ss')}</div>
+            </div>
+          );
         },
       },
       {
         title: t('common:table.update_by'),
         dataIndex: 'update_by',
+        render: (val, record: any) => (
+          <div>
+            <div>{val}</div>
+            {record.update_by_nickname && <div className='text-soft'>{record.update_by_nickname}</div>}
+          </div>
+        ),
       },
       {
         title: t('common:table.enabled'),
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 2ebb3b2ae..7f311406b 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -13,7 +13,7 @@ import { CommonStateContext } from '@/App';
 import { priorityColor } from '@/utils/constant';
 import { DatasourceSelect } from '@/components/DatasourceSelect';
 import { strategyStatus } from '@/store/warningInterface';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
 import { NS as notificationRulesNS } from '@/pages/notificationRules/constants';
@@ -96,8 +96,9 @@ const Subscribe = (props: Props) => {
         render(value) {
           if (!value) return '-';
           return (
-            <TableTags
-              maxTagWidth={120}
+            <Tags
+              type='outline'
+              maxWidth={180}
               data={_.compact(
                 _.map(value, (item) => {
                   if (item === 0) return '$all';
@@ -153,10 +154,10 @@ const Subscribe = (props: Props) => {
         render: (text: any) => {
           if (!text) return '-';
           return (
-            <TableTags
+            <Tags
+              type='outline'
+              maxWidth={180}
               data={_.compact(_.map(text, (tag) => (tag ? `${tag.func} ${_.includes(['in', 'not in'], tag.func) ? tag.value.split(' ').join(', ') : tag.value}` : '')))}
-              maxVisible={2}
-              maxTagWidth={160}
             />
           );
         },
@@ -166,10 +167,10 @@ const Subscribe = (props: Props) => {
         dataIndex: 'tags',
         render: (text: any) => {
           return (
-            <TableTags
+            <Tags
+              type='outline'
+              maxWidth={180}
               data={_.compact(_.map(text, (tag) => (tag ? `${tag.key} ${tag.func} ${_.includes(['in', 'not in'], tag.func) ? tag.value.split(' ').join(', ') : tag.value}` : '')))}
-              maxVisible={2}
-              maxTagWidth={180}
             />
           );
         },
@@ -178,7 +179,7 @@ const Subscribe = (props: Props) => {
         title: t('user_groups'),
         dataIndex: 'user_groups',
         render: (data) => {
-          return <TableTags data={_.map(data, 'name')} maxVisible={2} maxTagWidth={140} />;
+          return <Tags type='outline' maxWidth={180} data={_.map(data, 'name')} />;
         },
       },
       {
@@ -186,14 +187,13 @@ const Subscribe = (props: Props) => {
         dataIndex: 'notify_rule_ids',
         render: (data) => {
           return (
-            <TableTags
+            <Tags<number>
+              type='outline'
+              maxWidth={180}
               data={data}
-              maxVisible={2}
-              maxTagWidth={160}
               getKey={(id) => id}
-              getLabel={(id) => _.find(notificationRules, { id })?.name || id}
-              getLinkTo={(id) => `/${notificationRulesNS}/edit/${id}`}
-              linkTarget='_blank'
+              getLabel={(id) => _.find(notificationRules, { id })?.name || _.toString(id)}
+              onTagClick={(id) => window.open(`/${notificationRulesNS}/edit/${id}`, '_blank')}
             />
           );
         },
@@ -216,11 +216,12 @@ const Subscribe = (props: Props) => {
         title: t('common:table.username'),
         ellipsis: true,
         dataIndex: 'update_by',
-      },
-      {
-        title: t('common:table.nickname'),
-        ellipsis: true,
-        dataIndex: 'update_by_nickname',
+        render: (val, record: any) => (
+          <div>
+            <div>{val}</div>
+            {record.update_by_nickname && <div className='text-soft'>{record.update_by_nickname}</div>}
+          </div>
+        ),
       },
     ],
     readonly

From 5338bb0562d9906040223a778fcf917ecbf38202 Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Thu, 21 May 2026 15:00:55 +0800
Subject: [PATCH 43/44] refactor(table): unify tag rendering and replace
 TableTags with Tags component

---
 src/components/TableTags/Tags.tsx             |  21 +-
 src/pages/alertRules/List/ListNG.tsx          |   2 +-
 src/pages/alertRules/List/index.tsx           |   2 +-
 src/pages/alertRules/style.less               |   4 +-
 .../builtInComponents/AlertRules/index.tsx    |   4 +-
 .../builtInComponents/Dashboards/index.tsx    |   4 +-
 src/pages/dashboard/List/constants.ts         |   5 -
 src/pages/dashboard/List/index.tsx            | 455 +++++++++---------
 .../embeddedProduct/pages/List/index.tsx      |   4 +-
 .../eventPipeline/pages/Executions/index.tsx  |  30 +-
 src/pages/eventPipeline/pages/List/index.tsx  |  20 +-
 src/pages/metricsBuiltin/List.tsx             |   4 +-
 src/pages/notificationRules/pages/List.tsx    |  48 +-
 src/pages/targets/List.tsx                    |   7 +-
 src/pages/user/groups.tsx                     |   4 +-
 src/pages/user/users.tsx                      |  34 +-
 src/pages/warning/shield/index.tsx            |  63 ++-
 src/pages/warning/subscribe/ListNG.tsx        |  72 +--
 src/theme/default.less                        | 141 +-----
 19 files changed, 405 insertions(+), 519 deletions(-)

diff --git a/src/components/TableTags/Tags.tsx b/src/components/TableTags/Tags.tsx
index f74aa5cfc..2899c392e 100644
--- a/src/components/TableTags/Tags.tsx
+++ b/src/components/TableTags/Tags.tsx
@@ -5,16 +5,17 @@ import { Trans } from 'react-i18next';
 
 import { copy2ClipBoard } from '@/utils';
 
-interface Props<T> {
-  type: 'outline' | 'fill';
+interface Props<T = any> {
+  type?: 'outline' | 'fill';
   maxWidth?: number; // 容器最大宽度，设置后布局计算以此为上限
   borderRadius?: number; // 边框圆角
   bgColor?: string | ((item: string | T, index: number) => string); // 背景颜色，仅在 type 为 'fill' 时生效
   fontColor?: string | ((item: string | T, index: number) => string); // 字体颜色，仅在 type 为 'fill' 时生效
   icon?: React.ReactNode | ((item: string | T, index: number) => React.ReactNode);
-  data: string[] | T[] | null; // null 兼容接口可能返回 null 值的情况
+  data: T[] | null; // null 兼容接口可能返回 null 值的情况
   getKey?: (item: T, index: number) => React.Key;
   getLabel?: (item: T, index: number) => string;
+  getTooltipTitle?: (item: string | T, index: number) => string | undefined; // 返回 undefined 不显示 tooltip
   onTagClick?: (item: string | T, index: number) => void;
 }
 
@@ -86,7 +87,7 @@ function resolveColor<T>(color: string | ((item: string | T, index: number) => s
 }
 
 export default function Tags<T>(props: Props<T>) {
-  const { type = 'outline', icon, data, onTagClick, getKey, getLabel, maxWidth } = props;
+  const { type = 'outline', icon, data, onTagClick, getKey, getLabel, getTooltipTitle, maxWidth } = props;
 
   if (!data || data.length === 0) return null;
 
@@ -129,8 +130,8 @@ export default function Tags<T>(props: Props<T>) {
     onTagClick ? 'cursor-pointer' : ''
   }`;
 
-  // 可见层额外加溢出省略
-  const visibleTagClass = `${tagBaseClass} overflow-hidden text-ellipsis max-w-full shrink-0`;
+  // 可见层额外加溢出省略（text-ellipsis 对 inline-flex 无效，由内部 span 承接）
+  const visibleTagClass = `${tagBaseClass} overflow-hidden max-w-full shrink-0 min-w-0`;
 
   useLayoutEffect(() => {
     const el = containerRef.current;
@@ -157,7 +158,7 @@ export default function Tags<T>(props: Props<T>) {
   const { visibleCount, overflowCount } = layout;
 
   return (
-    <div ref={containerRef} className='relative' style={maxWidth != null ? { maxWidth } : undefined}>
+    <div ref={containerRef} className='relative overflow-hidden' style={maxWidth != null ? { maxWidth } : undefined}>
       {/* 隐藏测量层：绝对定位不占空间，用于获取各 tag 的真实渲染宽度 */}
       <div aria-hidden className='absolute top-0 left-0 invisible pointer-events-none flex'>
         {(data as (string | T)[]).map((item, i) => (
@@ -185,14 +186,14 @@ export default function Tags<T>(props: Props<T>) {
             key={getItemKey(item, i)}
             className={visibleTagClass}
             style={getTagStyle(item, i)}
-            title={getItemLabel(item, i)}
+            title={getTooltipTitle ? getTooltipTitle(item, i) : getItemLabel(item, i)}
             onClick={(e) => {
               e.stopPropagation();
               onTagClick?.(item, i);
             }}
           >
-            {icon && <span className='mr-[3px] flex items-center'>{resolveIcon(icon, item, i)}</span>}
-            {getItemLabel(item, i)}
+            {icon && <span className='mr-[3px] flex items-center shrink-0'>{resolveIcon(icon, item, i)}</span>}
+            <span className='overflow-hidden text-ellipsis'>{getItemLabel(item, i)}</span>
           </span>
         ))}
         {overflowCount > 0 && (
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 9cad5d0ba..524cf69db 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -251,7 +251,7 @@ export default function AlertRules(props: Props) {
       {
         title: t('table.update_at'),
         dataIndex: 'update_at',
-        width: 60,
+        width: 100,
         sorter: (a, b) => {
           return a.update_at - b.update_at;
         },
diff --git a/src/pages/alertRules/List/index.tsx b/src/pages/alertRules/List/index.tsx
index 245500e5f..45a7c4ef9 100644
--- a/src/pages/alertRules/List/index.tsx
+++ b/src/pages/alertRules/List/index.tsx
@@ -95,7 +95,7 @@ export default function List(props: ListProps) {
   }, [gids, refreshFlag]);
 
   return (
-    <div className='fc-border rounded-lg alert-rules-list-container' style={{ height: '100%', overflowY: 'auto' }}>
+    <div className='fc-border rounded-lg alert-rules-list-container' style={{ height: '100%', overflowY: 'auto', minWidth: 0 }}>
       <ListNG
         hideBusinessGroupColumn={businessGroup.isLeaf && gids !== '-2'}
         showRowSelection
diff --git a/src/pages/alertRules/style.less b/src/pages/alertRules/style.less
index 445399522..c3b677e41 100644
--- a/src/pages/alertRules/style.less
+++ b/src/pages/alertRules/style.less
@@ -1,8 +1,10 @@
 .alert-rules-container {
   display: flex;
+  min-width: 0;
 }
 .alert-rules-list-container {
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   padding: 16px;
   .table-text {
     line-height: 1.4;
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index 5fb28f5f5..e4f6d75bb 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -11,7 +11,7 @@ import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { CommonStateContext } from '@/App';
 import { HelpLink } from '@/components/pageLayout';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import { RuleType } from './types';
 import Import from './Import';
 import { getPayloads, deletePayloads, getCates } from '../services';
@@ -207,7 +207,7 @@ export default function index(props: Props) {
             render: (val) => {
               const tags = _.compact(_.split(val, ' '));
               return (
-                <TableTags
+                <Tags
                   data={tags}
                   onTagClick={(tag) => {
                     const queryItem = _.compact(_.split(filter.query, ' '));
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index 2060e50eb..7f14f6b33 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -11,7 +11,7 @@ import Export from '@/pages/dashboard/List/Export';
 import AuthorizationWrapper from '@/components/AuthorizationWrapper';
 import { HelpLink } from '@/components/pageLayout';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import { getPayloads, deletePayloads } from '../services';
 import { TypeEnum, Payload } from '../types';
 import PayloadFormModal from '../components/PayloadFormModal';
@@ -162,7 +162,7 @@ export default function index(props: Props) {
             render: (val) => {
               const tags = _.compact(_.split(val, ' '));
               return (
-                <TableTags
+                <Tags
                   data={tags}
                   onTagClick={(tag) => {
                     const queryItem = _.compact(_.split(filter.query, ' '));
diff --git a/src/pages/dashboard/List/constants.ts b/src/pages/dashboard/List/constants.ts
index d4d88ba61..00b7a4e01 100644
--- a/src/pages/dashboard/List/constants.ts
+++ b/src/pages/dashboard/List/constants.ts
@@ -41,11 +41,6 @@ export const defaultColumnsConfigs = [
     i18nKey: 'common:table.username',
     visible: false,
   },
-  {
-    name: 'update_by_nickname',
-    i18nKey: 'common:table.nickname',
-    visible: false,
-  },
   {
     name: 'public',
     i18nKey: 'public.name',
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index 7d6def092..569b80904 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -19,7 +19,7 @@
  */
 import React, { useState, useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
-import { Table, Tag, Modal, Space, Button, Dropdown, Menu, message, Tooltip } from 'antd';
+import { Table, Modal, Space, Dropdown, Menu, message, Tooltip } from 'antd';
 import { FundViewOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
@@ -34,7 +34,7 @@ import PageLayout from '@/components/pageLayout';
 import { CommonStateContext } from '@/App';
 import BusinessGroupSideBarWithAll, { getDefaultGidsInDashboard } from '@/components/BusinessGroup/BusinessGroupSideBarWithAll';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import usePagination from '@/components/usePagination';
 import { getDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { getBusiGroups } from '@/components/BusinessGroup';
@@ -145,26 +145,15 @@ export default function index() {
             className='mt-2'
             dataSource={data}
             columns={ajustColumns(
-              _.concat(
-                businessGroup.isLeaf && gids !== '-1' && gids !== '-2'
-                  ? []
-                  : ([
-                      {
-                        title: t('common:business_group'),
-                        dataIndex: 'group_id',
-                        width: 100,
-                        render: (id) => {
-                          return _.find(busiGroups, { id })?.name;
-                        },
-                      },
-                    ] as any),
-                [
-                  {
-                    title: t('name'),
-                    dataIndex: 'name',
-                    className: 'name-column',
-                    render: (text: string, record: DashboardType) => {
-                      return (
+              _.concat([
+                {
+                  title: t('name'),
+                  dataIndex: 'name',
+                  className: 'name-column',
+                  render: (text: string, record: DashboardType) => {
+                    const groupName = _.find(busiGroups, { id: record.group_id })?.name;
+                    return (
+                      <div className='flex flex-col gap-0.5'>
                         <Link
                           className='table-active-text'
                           to={{
@@ -174,176 +163,222 @@ export default function index() {
                         >
                           {text}
                         </Link>
-                      );
-                    },
+                        {groupName && <span className='text-soft text-xs'>{groupName}</span>}
+                      </div>
+                    );
                   },
-                  {
-                    title: t('tags'),
-                    dataIndex: 'tags',
-                    className: 'tags-column',
-                    render: (text: string) => (
-                      <TableTags
-                        data={_.compact(_.split(text, ' '))}
-                        maxVisible={2}
-                        maxTagWidth={160}
-                        onTagClick={(tag) => {
-                          const queryItem = searchVal.length > 0 ? searchVal.split(' ') : [];
-                          if (queryItem.includes(tag)) return;
-                          setsearchVal((searchVal) => {
-                            if (searchVal) {
-                              sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, searchVal + ' ' + tag);
-                              return searchVal + ' ' + tag;
-                            }
-                            sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, tag);
-                            return tag;
-                          });
-                        }}
-                      />
-                    ),
-                  },
-                  {
-                    title: t('common:table.note'),
-                    dataIndex: 'note',
-                    className: 'note-column',
-                  },
-                  {
-                    title: t('common:table.update_at'),
-                    width: 150,
-                    dataIndex: 'update_at',
-                    render: (text: number) => moment.unix(text).format('YYYY-MM-DD HH:mm:ss'),
-                  },
-                  {
-                    title: t('common:table.username'),
-                    dataIndex: 'update_by',
-                    width: 100,
-                  },
-                  {
-                    title: t('common:table.nickname'),
-                    dataIndex: 'update_by_nickname',
-                    width: 100,
+                },
+                {
+                  title: t('tags'),
+                  dataIndex: 'tags',
+                  className: 'tags-column',
+                  render: (text: string) => (
+                    <Tags
+                      type='outline'
+                      data={_.compact(_.split(text, ' '))}
+                      maxWidth={180}
+                      onTagClick={(tag) => {
+                        const queryItem = searchVal.length > 0 ? searchVal.split(' ') : [];
+                        if (queryItem.includes(tag)) return;
+                        setsearchVal((searchVal) => {
+                          if (searchVal) {
+                            sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, searchVal + ' ' + tag);
+                            return searchVal + ' ' + tag;
+                          }
+                          sessionStorage.setItem(SEARCH_SESSION_STORAGE_KEY, tag);
+                          return tag;
+                        });
+                      }}
+                    />
+                  ),
+                },
+                {
+                  title: t('common:table.note'),
+                  dataIndex: 'note',
+                  className: 'note-column',
+                },
+                {
+                  title: t('common:table.update_at'),
+                  width: 100,
+                  dataIndex: 'update_at',
+                  render: (text: number) => {
+                    return (
+                      <div>
+                        <div>{moment.unix(text).format('YYYY-MM-DD')}</div>
+                        <div>{moment.unix(text).format('HH:mm:ss')}</div>
+                      </div>
+                    );
                   },
-                  {
-                    title: t('public.name'),
-                    width: 150,
-                    dataIndex: 'public',
-                    className: 'published-cell',
-                    render: (val: number, record: DashboardType) => {
-                      let content: React.ReactNode = null;
-                      if (val === 1 && record.public_cate !== undefined) {
-                        if (record.public_cate === 0) {
-                          content = (
-                            <Tooltip
-                              overlayClassName='ant-tooltip-with-link'
-                              title={
-                                <>
-                                  <div>
-                                    <Link
-                                      target='_blank'
-                                      to={{
-                                        pathname: `/dashboards/share/${record.ident || record.id}`,
-                                        search: 'themeMode=dark',
-                                      }}
-                                    >
-                                      {t('public.theme_link.dark')}
-                                    </Link>
-                                  </div>
-                                  <div>
-                                    <Link
-                                      target='_blank'
-                                      to={{
-                                        pathname: `/dashboards/share/${record.ident || record.id}`,
-                                        search: 'themeMode=light',
-                                      }}
-                                    >
-                                      {t('public.theme_link.light')}
-                                    </Link>
-                                  </div>
-                                </>
-                              }
+                },
+                {
+                  title: t('common:table.username'),
+                  dataIndex: 'update_by',
+                  render: (val: string, record: any) => (
+                    <div>
+                      <div>{val}</div>
+                      {record.update_by_nickname && <div className='text-soft'>{record.update_by_nickname}</div>}
+                    </div>
+                  ),
+                },
+                {
+                  title: t('public.name'),
+                  width: 150,
+                  dataIndex: 'public',
+                  className: 'published-cell',
+                  render: (val: number, record: DashboardType) => {
+                    let content: React.ReactNode = null;
+                    if (val === 1 && record.public_cate !== undefined) {
+                      if (record.public_cate === 0) {
+                        content = (
+                          <Tooltip
+                            overlayClassName='ant-tooltip-with-link'
+                            title={
+                              <>
+                                <div>
+                                  <Link
+                                    target='_blank'
+                                    to={{
+                                      pathname: `/dashboards/share/${record.ident || record.id}`,
+                                      search: 'themeMode=dark',
+                                    }}
+                                  >
+                                    {t('public.theme_link.dark')}
+                                  </Link>
+                                </div>
+                                <div>
+                                  <Link
+                                    target='_blank'
+                                    to={{
+                                      pathname: `/dashboards/share/${record.ident || record.id}`,
+                                      search: 'themeMode=light',
+                                    }}
+                                  >
+                                    {t('public.theme_link.light')}
+                                  </Link>
+                                </div>
+                              </>
+                            }
+                          >
+                            <Link
+                              target='_blank'
+                              to={{
+                                pathname: `/dashboards/share/${record.ident || record.id}`,
+                              }}
                             >
-                              <Link
-                                target='_blank'
-                                to={{
-                                  pathname: `/dashboards/share/${record.ident || record.id}`,
-                                }}
-                              >
-                                <ShareAltOutlined /> {t(`public.cate.${record.public_cate}`)}
-                              </Link>
-                            </Tooltip>
-                          );
-                        } else {
-                          content = t(`public.cate.${record.public_cate}`);
-                        }
+                              <ShareAltOutlined /> {t(`public.cate.${record.public_cate}`)}
+                            </Link>
+                          </Tooltip>
+                        );
                       } else {
-                        content = t('public.unpublic');
+                        content = t(`public.cate.${record.public_cate}`);
                       }
+                    } else {
+                      content = t('public.unpublic');
+                    }
 
-                      return (
-                        <Space>
-                          {content}
-                          {gids !== '-1' && (
-                            <EditOutlined
-                              onClick={() => {
-                                PublicForm({
-                                  busiGroups,
-                                  boardId: record.id,
-                                  initialValues: {
-                                    public: val,
-                                    public_cate: record.public_cate,
-                                    bgids: record.bgids,
-                                  },
-                                  onOk: () => {
-                                    setRefreshKey(_.uniqueId('refreshKey_'));
-                                  },
-                                });
-                              }}
-                            />
-                          )}
-                        </Space>
-                      );
-                    },
+                    return (
+                      <Space>
+                        {content}
+                        {gids !== '-1' && (
+                          <EditOutlined
+                            onClick={() => {
+                              PublicForm({
+                                busiGroups,
+                                boardId: record.id,
+                                initialValues: {
+                                  public: val,
+                                  public_cate: record.public_cate,
+                                  bgids: record.bgids,
+                                },
+                                onOk: () => {
+                                  setRefreshKey(_.uniqueId('refreshKey_'));
+                                },
+                              });
+                            }}
+                          />
+                        )}
+                      </Space>
+                    );
                   },
-                  {
-                    title: t('common:table.operations'),
-                    width: 64,
-                    fixed: 'right' as const,
-                    render: (text: string, record: DashboardType) => {
-                      return (
-                        <Dropdown
-                          trigger={['click']}
-                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
-                          overlayClassName='fc-table-action-dropdown'
-                          overlay={
-                            <Menu>
-                              {gids !== '-1' && (
-                                <Menu.Item>
-                                  <TableActionButton
-                                    actionIcon='edit'
-                                    onClick={() => {
-                                      FormModal({
-                                        action: 'edit',
-                                        initialValues: record,
-                                        busiId: businessGroup.id,
-                                        onOk: () => {
-                                          setRefreshKey(_.uniqueId('refreshKey_'));
-                                        },
-                                      });
-                                    }}
-                                  >
-                                    {t('common:btn.edit')}
-                                  </TableActionButton>
-                                </Menu.Item>
-                              )}
-                              {gids && gids !== '-1' && (
+                },
+                {
+                  title: t('common:table.operations'),
+                  width: 64,
+                  fixed: 'right' as const,
+                  render: (text: string, record: DashboardType) => {
+                    return (
+                      <Dropdown
+                        trigger={['click']}
+                        align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                        overlayClassName='fc-table-action-dropdown'
+                        overlay={
+                          <Menu>
+                            {gids !== '-1' && (
+                              <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='edit'
+                                  onClick={() => {
+                                    FormModal({
+                                      action: 'edit',
+                                      initialValues: record,
+                                      busiId: businessGroup.id,
+                                      onOk: () => {
+                                        setRefreshKey(_.uniqueId('refreshKey_'));
+                                      },
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.edit')}
+                                </TableActionButton>
+                              </Menu.Item>
+                            )}
+                            {gids && gids !== '-1' && (
+                              <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='copy'
+                                  onClick={async () => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.clone'),
+                                      onOk: async () => {
+                                        await cloneDashboard(record.group_id, record.id);
+                                        message.success(t('common:success.clone'));
+                                        setRefreshKey(_.uniqueId('refreshKey_'));
+                                      },
+
+                                      onCancel() {},
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.clone')}
+                                </TableActionButton>
+                              </Menu.Item>
+                            )}
+                            <Menu.Item>
+                              <TableActionButton
+                                actionIcon='open'
+                                onClick={async () => {
+                                  const exportData = await getDashboard(record.id);
+                                  Export({
+                                    data: exportDataStringify(exportData),
+                                  });
+                                }}
+                              >
+                                {t('common:btn.export')}
+                              </TableActionButton>
+                            </Menu.Item>
+                            {gids !== '-1' && (
+                              <>
+                                <Menu.Divider />
                                 <Menu.Item>
                                   <TableActionButton
-                                    actionIcon='copy'
+                                    danger
+                                    actionIcon='delete'
                                     onClick={async () => {
                                       Modal.confirm({
-                                        title: t('common:confirm.clone'),
+                                        title: t('common:confirm.delete'),
                                         onOk: async () => {
-                                          await cloneDashboard(record.group_id, record.id);
-                                          message.success(t('common:success.clone'));
+                                          await removeDashboards([record.id]);
+                                          message.success(t('common:success.delete'));
                                           setRefreshKey(_.uniqueId('refreshKey_'));
                                         },
 
@@ -351,58 +386,20 @@ export default function index() {
                                       });
                                     }}
                                   >
-                                    {t('common:btn.clone')}
+                                    {t('common:btn.delete')}
                                   </TableActionButton>
                                 </Menu.Item>
-                              )}
-                              <Menu.Item>
-                                <TableActionButton
-                                  actionIcon='open'
-                                  onClick={async () => {
-                                    const exportData = await getDashboard(record.id);
-                                    Export({
-                                      data: exportDataStringify(exportData),
-                                    });
-                                  }}
-                                >
-                                  {t('common:btn.export')}
-                                </TableActionButton>
-                              </Menu.Item>
-                              {gids !== '-1' && (
-                                <>
-                                  <Menu.Divider />
-                                  <Menu.Item>
-                                    <TableActionButton
-                                      danger
-                                      actionIcon='delete'
-                                      onClick={async () => {
-                                        Modal.confirm({
-                                          title: t('common:confirm.delete'),
-                                          onOk: async () => {
-                                            await removeDashboards([record.id]);
-                                            message.success(t('common:success.delete'));
-                                            setRefreshKey(_.uniqueId('refreshKey_'));
-                                          },
-
-                                          onCancel() {},
-                                        });
-                                      }}
-                                    >
-                                      {t('common:btn.delete')}
-                                    </TableActionButton>
-                                  </Menu.Item>
-                                </>
-                              )}
-                            </Menu>
-                          }
-                        >
-                          <TableActionTrigger />
-                        </Dropdown>
-                      );
-                    },
+                              </>
+                            )}
+                          </Menu>
+                        }
+                      >
+                        <TableActionTrigger />
+                      </Dropdown>
+                    );
                   },
-                ],
-              ),
+                },
+              ]),
               columnsConfigs,
             )}
             rowKey='id'
diff --git a/src/pages/embeddedProduct/pages/List/index.tsx b/src/pages/embeddedProduct/pages/List/index.tsx
index a4e14c5b7..08b634167 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -13,7 +13,7 @@ import { getTeamInfoList } from '@/services/manage';
 import PageLayout from '@/components/pageLayout';
 import { eventBus, EVENT_KEYS } from '@/pages/embeddedProduct/eventBus';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 
 import { NS, DETAIL_PATH } from '../../constants';
 import { EmbeddedProductParams, EmbeddedProductResponse } from '../../types';
@@ -65,7 +65,7 @@ export default function Index() {
         title: t('team_ids'),
         dataIndex: 'team_ids',
         render: (val) => {
-          return <TableTags data={val} maxVisible={2} maxTagWidth={160} getKey={(item) => item} getLabel={(item) => _.find(userGroups, { id: item })?.name || item} />;
+          return <Tags<number> data={val} maxWidth={320} getKey={(item) => item} getLabel={(item) => _.find(userGroups, { id: item })?.name || String(item)} />;
         },
       },
       {
diff --git a/src/pages/eventPipeline/pages/Executions/index.tsx b/src/pages/eventPipeline/pages/Executions/index.tsx
index 1f85eea76..7f8bdeab2 100644
--- a/src/pages/eventPipeline/pages/Executions/index.tsx
+++ b/src/pages/eventPipeline/pages/Executions/index.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input, Space, Select, Table, Tag } from 'antd';
+import { Input, Space, Select, Table } from 'antd';
 import { useAntdTable } from 'ahooks';
 import _ from 'lodash';
 import moment from 'moment';
 import { useLocation } from 'react-router-dom';
 import queryString from 'query-string';
 
+import Tags from '@/components/TableTags/Tags';
 import PageLayout from '@/components/pageLayout';
 import AutoRefresh from '@/components/TimeRangePicker/AutoRefresh';
 
@@ -47,12 +48,6 @@ export default function index() {
     defaultPageSize,
   });
 
-  const statusMap = {
-    running: <Tag color='purple'>{t('executions.status.running')}</Tag>,
-    success: <Tag color='green'>{t('executions.status.success')}</Tag>,
-    failed: <Tag color='red'>{t('executions.status.failed')}</Tag>,
-  };
-
   const [itemDetailDrawerState, setItemDetailDrawerState] = useState<{
     id: string | null;
     visible: boolean;
@@ -152,7 +147,7 @@ export default function index() {
                 key: 'mode',
                 width: 100,
                 render: (value) => {
-                  return <Tag color='green'>{t(`trigger_mode.${value}`)}</Tag>;
+                  return <Tags type='fill' data={[t(`trigger_mode.${value}`)]} bgColor={() => 'var(--fc-green-3)'} fontColor={() => 'var(--fc-green-11)'} />;
                 },
               },
               {
@@ -161,7 +156,24 @@ export default function index() {
                 key: 'status',
                 width: 100,
                 render: (value) => {
-                  return statusMap[value] || value;
+                  const bgColorMap = {
+                    running: 'var(--fc-purple-3)',
+                    success: 'var(--fc-green-3)',
+                    failed: 'var(--fc-red-3)',
+                  };
+                  const fontColorMap = {
+                    running: 'var(--fc-purple-11)',
+                    success: 'var(--fc-green-11)',
+                    failed: 'var(--fc-red-11)',
+                  };
+                  return (
+                    <Tags
+                      type='fill'
+                      data={[t(`executions.status.${value}`)]}
+                      bgColor={() => bgColorMap[value as string] || 'var(--fc-gray-3)'}
+                      fontColor={() => fontColorMap[value as string] || 'var(--fc-gray-11)'}
+                    />
+                  );
                 },
               },
               {
diff --git a/src/pages/eventPipeline/pages/List/index.tsx b/src/pages/eventPipeline/pages/List/index.tsx
index e77a322c7..a12d74e32 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Space, Table, Button, Tag, Input, Modal, Drawer, Select, Dropdown, Menu } from 'antd';
+import { Space, Table, Button, Input, Modal, Drawer, Select, Dropdown, Menu } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
@@ -67,11 +67,6 @@ export default function List() {
     featchData();
   }, []);
 
-  const disabledMap = {
-    false: <Tag color='green'>{t('disabled.false')}</Tag>,
-    true: <Tag color='red'>{t('disabled.true')}</Tag>,
-  };
-
   return (
     <>
       <div className='flex justify-between items-center pb-2'>
@@ -186,7 +181,7 @@ export default function List() {
             dataIndex: 'use_case',
             width: 100,
             render: (value) => {
-              return <Tag>{t(`use_case.${value}`)}</Tag>;
+              return <Tags type='outline' maxWidth={100} data={[t(`use_case.${value}`)]} />;
             },
           },
           {
@@ -194,7 +189,7 @@ export default function List() {
             dataIndex: 'trigger_mode',
             width: 100,
             render: (value) => {
-              return <Tag>{t(`trigger_mode.${value}`)}</Tag>;
+              return <Tags type='outline' maxWidth={100} data={[t(`trigger_mode.${value}`)]} />;
             },
           },
           {
@@ -203,7 +198,14 @@ export default function List() {
             key: 'disabled',
             width: 100,
             render: (value) => {
-              return disabledMap[value] || value;
+              return (
+                <Tags
+                  type='fill'
+                  data={[t(`disabled.${value}`)]}
+                  bgColor={() => (value === false ? 'var(--fc-green-3)' : 'var(--fc-red-3)')}
+                  fontColor={() => (value === false ? 'var(--fc-green-11)' : 'var(--fc-red-11)')}
+                />
+              );
             },
           },
           {
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index c51e5f9a1..d44154aed 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -26,7 +26,7 @@ import { CommonStateContext } from '@/App';
 import Markdown from '@/components/Markdown';
 import PageLayout from '@/components/pageLayout';
 import usePagination from '@/components/usePagination';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import RefreshIcon from '@/components/RefreshIcon';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { getUnitLabel, buildUnitOptions } from '@/pages/dashboard/Components/UnitPicker/utils';
@@ -232,7 +232,7 @@ export default function index() {
       title: t('extra_fields'),
       dataIndex: 'extra_fields',
       render: (val) => {
-        return <TableTags data={_.map(val, (item) => `${item.name}: ${item.value}`)} maxVisible={2} maxTagWidth={180} />;
+        return <Tags data={_.map(val, (item) => `${item.name}: ${item.value}`)} maxWidth={180} />;
       },
     },
     {
diff --git a/src/pages/notificationRules/pages/List.tsx b/src/pages/notificationRules/pages/List.tsx
index d0499cc86..8c866fdc1 100644
--- a/src/pages/notificationRules/pages/List.tsx
+++ b/src/pages/notificationRules/pages/List.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Space, Button, Switch, Modal, Input, Tag, Tooltip, Dropdown, Menu } from 'antd';
+import { Table, Space, Button, Switch, Modal, Input, Dropdown, Menu } from 'antd';
 import { NotificationOutlined, SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 
 import { IS_PLUS } from '@/utils/constant';
 import PageLayout from '@/components/pageLayout';
+import Tags from '@/components/TableTags/Tags';
 import { getSimplifiedItems as getNotificationChannels } from '@/pages/notificationChannels/services';
 import { getTeamInfoList } from '@/services/manage';
 import usePagination from '@/components/usePagination';
@@ -139,28 +140,39 @@ export default function List() {
             {
               title: t('notification_configuration.channel'),
               dataIndex: 'notify_configs',
-              render: (val) => {
-                return _.map(val, (item) => {
-                  return (
-                    <Tooltip key={item.channel_id} title={!item.channel ? t('channel_invalid_tip') : undefined}>
-                      <Tag color={!item.channel ? 'warning' : undefined}>{item.channel ?? item.channel_id}</Tag>
-                    </Tooltip>
-                  );
-                });
+              render: (val: { channel_id: number; channel?: string }[]) => {
+                return (
+                  <Tags
+                    type='outline'
+                    maxWidth={180}
+                    data={val}
+                    getKey={(item) => item.channel_id}
+                    getLabel={(item) => item.channel ?? String(item.channel_id)}
+                    getTooltipTitle={(item) => (typeof item === 'string' ? undefined : item.channel ? undefined : t('channel_invalid_tip'))}
+                  />
+                );
               },
             },
             {
               title: t('user_group_ids'),
               dataIndex: 'user_group_ids',
-              render: (val) => {
-                return _.map(val, (item) => {
-                  const name = _.find(userGroups, { id: item })?.name;
-                  return (
-                    <Tooltip key={item} title={!name ? t('user_group_id_invalid_tip') : undefined}>
-                      <Tag color={!name ? 'warning' : undefined}>{name ?? item}</Tag>
-                    </Tooltip>
-                  );
-                });
+              render: (val: number[]) => {
+                return (
+                  <Tags
+                    type='outline'
+                    maxWidth={180}
+                    data={val}
+                    getKey={(item) => item}
+                    getLabel={(item) => {
+                      const id = typeof item === 'number' ? item : Number(item);
+                      return _.find(userGroups, { id })?.name ?? String(item);
+                    }}
+                    getTooltipTitle={(item) => {
+                      const id = typeof item === 'number' ? item : Number(item);
+                      return _.find(userGroups, { id })?.name ? undefined : t('user_group_id_invalid_tip');
+                    }}
+                  />
+                );
               },
             },
             {
diff --git a/src/pages/targets/List.tsx b/src/pages/targets/List.tsx
index 04ba5e7da..c8eba3df1 100644
--- a/src/pages/targets/List.tsx
+++ b/src/pages/targets/List.tsx
@@ -20,7 +20,7 @@ import TargetMetaDrawer from './TargetMetaDrawer';
 import Explorer from './components/Explorer';
 import EditBusinessGroups from './components/EditBusinessGroups';
 import HostsSelect from './components/HostsSelect';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 
 // @ts-ignore
 import CollectsDrawer from 'plus:/pages/collects/CollectsDrawer';
@@ -206,10 +206,9 @@ export default function List(props: IProps) {
         },
         render(tagArr) {
           return (
-            <TableTags
+            <Tags<string>
               data={tagArr}
-              maxVisible={2}
-              maxTagWidth={120}
+              maxWidth={180}
               onTagClick={(item) => {
                 if (!tableQueryContent.includes(item)) {
                   isAddTagToQueryInput.current = true;
diff --git a/src/pages/user/groups.tsx b/src/pages/user/groups.tsx
index 17e7b7265..36bb210c7 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -31,7 +31,7 @@ import { useTranslation } from 'react-i18next';
 import { listToTree } from '@/components/BusinessGroup';
 import { CommonStateContext } from '@/App';
 import Tree from '@/components/BusinessGroup/components/Tree';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import './index.less';
 import './locale';
 import usePagination from '@/components/usePagination';
@@ -104,7 +104,7 @@ const Resource: React.FC = () => {
       dataIndex: 'busi_groups',
       render: (text: string, record) => {
         if (_.isEmpty(record.busi_groups)) return '-';
-        return <TableTags data={record.busi_groups || []} maxVisible={2} maxTagWidth={140} getKey={(item) => item.id} getLabel={(item) => item.name} />;
+        return <Tags data={record.busi_groups || []} maxWidth={180} getKey={(item) => item.id} getLabel={(item) => item.name} />;
       },
     },
   ];
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 1c3407c4c..2475ec94b 100644
--- a/src/pages/user/users.tsx
+++ b/src/pages/user/users.tsx
@@ -22,7 +22,7 @@ import { SearchOutlined, UserOutlined, EyeOutlined } from '@ant-design/icons';
 import { ColumnsType } from 'antd/lib/table';
 import { useTranslation } from 'react-i18next';
 import { useAntdTable } from 'ahooks';
-import PageLayout, { HelpLink } from '@/components/pageLayout';
+import PageLayout from '@/components/pageLayout';
 import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import UserInfoModal from './component/createModal';
 import { getUserInfoList, deleteUser } from '@/services/manage';
@@ -32,7 +32,7 @@ import usePagination from '@/components/usePagination';
 import TimeRangePicker, { IRawTimeRange, parseRange } from '@/components/TimeRangePicker';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { defaultColumnsConfigs, LOCAL_STORAGE_KEY } from './constants';
-import TableTags from '@/components/TableTags';
+import Tags from '@/components/TableTags/Tags';
 import './index.less';
 import './locale';
 
@@ -46,7 +46,7 @@ const Resource: React.FC = () => {
   const [memberId, setMemberId] = useState<string>('');
   const [query, setQuery] = useState<string>('');
   const [range, setRange] = useState<IRawTimeRange>();
-  const { profile, perms } = useContext(CommonStateContext);
+  const { perms } = useContext(CommonStateContext);
   const pagination = usePagination({ PAGESIZE_KEY: 'users' });
   const [columnsConfigs, setColumnsConfigs] = useState<{ name: string; visible: boolean }[]>(getDefaultColumnsConfigs(defaultColumnsConfigs, LOCAL_STORAGE_KEY));
   const userColumn: ColumnsType<User> = [
@@ -78,18 +78,16 @@ const Resource: React.FC = () => {
       title: t('user.busi_groups'),
       dataIndex: 'busi_groups',
       width: 160,
-      render: (value) => {
+      render: (value: { id: number; name: string }[]) => {
         return (
-          <TableTags
+          <Tags
             data={value}
-            maxVisible={1}
-            maxTagWidth={110}
+            maxWidth={220}
             getKey={(item) => item.id}
             getLabel={(item) => item.name}
-            getLinkTo={(item) => ({
-              pathname: '/busi-groups',
-              search: `?id=${item.id}`,
-            })}
+            onTagClick={(item) => {
+              if (typeof item !== 'string') window.open(`/busi-groups?id=${item.id}`, '_blank');
+            }}
           />
         );
       },
@@ -98,18 +96,16 @@ const Resource: React.FC = () => {
       title: t('user.user_groups'),
       dataIndex: 'user_groups',
       width: 160,
-      render: (value) => {
+      render: (value: { id: number; name: string }[]) => {
         return (
-          <TableTags
+          <Tags
             data={value}
-            maxVisible={1}
-            maxTagWidth={110}
+            maxWidth={220}
             getKey={(item) => item.id}
             getLabel={(item) => item.name}
-            getLinkTo={(item) => ({
-              pathname: '/user-groups',
-              search: `?id=${item.id}`,
-            })}
+            onTagClick={(item) => {
+              if (typeof item !== 'string') window.open(`/user-groups?id=${item.id}`, '_blank');
+            }}
           />
         );
       },
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index bb472dff7..cb363b598 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -81,12 +81,6 @@ const Shield: React.FC = () => {
         dataIndex: 'note',
         render: (data, record: any) => {
           const groupName = _.find(busiGroups, { id: record.group_id })?.name;
-          const cate = _.find(allCates, { value: record.cate });
-          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
-          let logoSrc = cate?.logo;
-          if (record.cate === 'host') {
-            logoSrc = '/image/logos/host.png';
-          }
           return (
             <div className='flex flex-col gap-0.5'>
               <Link
@@ -97,11 +91,7 @@ const Shield: React.FC = () => {
               >
                 {data}
               </Link>
-              <span className='text-soft text-xs inline-flex items-center gap-2 flex-wrap'>
-                {logoSrc && <img alt={record.cate} src={logoSrc} height={14} />}
-                {cateLabel && <span>{cateLabel}</span>}
-                {showBusinessGroup && groupName && <span>{groupName}</span>}
-              </span>
+              {showBusinessGroup && groupName && <span className='text-soft text-xs'>{groupName}</span>}
             </div>
           );
         },
@@ -113,19 +103,32 @@ const Shield: React.FC = () => {
         dataIndex: 'datasource_ids',
         render(value, record: any) {
           if (!value) return '-';
+          const cate = _.find(allCates, { value: record.cate });
+          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
+          let logoSrc = cate?.logo;
+          if (record.cate === 'host') {
+            logoSrc = '/image/logos/host.png';
+          }
           return (
-            <Tags
-              type='outline'
-              maxWidth={180}
-              data={_.compact(
-                _.map(value, (item) => {
-                  if (item === 0) return '$all';
-                  const name = _.find(groupedDatasourceList[record.cate], { id: item })?.name;
-                  if (!name) return '';
-                  return name;
-                }),
+            <Space>
+              {logoSrc && (
+                <Tooltip title={cateLabel}>
+                  <img alt={record.cate} src={logoSrc} height={18} />
+                </Tooltip>
               )}
-            />
+              <Tags
+                type='outline'
+                maxWidth={180}
+                data={_.compact(
+                  _.map(value, (item) => {
+                    if (item === 0) return '$all';
+                    const name = _.find(groupedDatasourceList[record.cate], { id: item })?.name;
+                    if (!name) return '';
+                    return name;
+                  }),
+                )}
+              />
+            </Space>
           );
         },
       },
@@ -134,17 +137,11 @@ const Shield: React.FC = () => {
         dataIndex: 'tags',
         render: (text: any) => {
           return (
-            <div>
-              {text
-                ? text.map((tag, index) => {
-                    return tag ? (
-                      <div className='max-w-[400px] break-all' key={index} style={{ lineHeight: '16px' }}>{`${tag.key} ${tag.func} ${
-                        tag.func === 'in' ? tag.value.split(' ').join(', ') : tag.value
-                      }`}</div>
-                    ) : null;
-                  })
-                : ''}
-            </div>
+            <Tags
+              type='outline'
+              maxWidth={180}
+              data={_.compact(_.map(text, (tag) => (tag ? `${tag.key} ${tag.func} ${tag.func === 'in' ? tag.value.split(' ').join(', ') : tag.value}` : '')))}
+            />
           );
         },
       },
diff --git a/src/pages/warning/subscribe/ListNG.tsx b/src/pages/warning/subscribe/ListNG.tsx
index 7f311406b..26edbe931 100644
--- a/src/pages/warning/subscribe/ListNG.tsx
+++ b/src/pages/warning/subscribe/ListNG.tsx
@@ -14,6 +14,7 @@ import { priorityColor } from '@/utils/constant';
 import { DatasourceSelect } from '@/components/DatasourceSelect';
 import { strategyStatus } from '@/store/warningInterface';
 import Tags from '@/components/TableTags/Tags';
+import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
 import { NS as notificationRulesNS } from '@/pages/notificationRules/constants';
@@ -47,7 +48,7 @@ interface Props {
 }
 
 const Subscribe = (props: Props) => {
-  const { t } = useTranslation('alertSubscribes');
+  const { t, i18n } = useTranslation('alertSubscribes');
   const { datasourceList, busiGroups } = useContext(CommonStateContext);
   const { hideBusinessGroupColumn, readonly, headerExtra, data, loading, setRefreshFlag, linkTarget } = props;
   const [columnsConfigs, setColumnsConfigs] = useState<{ name: string; visible: boolean }[]>(getDefaultColumnsConfigs(defaultColumnsConfigs, LOCAL_STORAGE_KEY));
@@ -93,21 +94,34 @@ const Subscribe = (props: Props) => {
       {
         title: t('common:datasource.id'),
         dataIndex: 'datasource_ids',
-        render(value) {
+        render(value, record: any) {
           if (!value) return '-';
+          const cate = _.find(allCates, { value: record.cate });
+          const cateLabel = record.cate === 'host' ? 'Host' : getCateDisplayLabel(cate, i18n.language);
+          let logoSrc = cate?.logo;
+          if (record.cate === 'host') {
+            logoSrc = '/image/logos/host.png';
+          }
           return (
-            <Tags
-              type='outline'
-              maxWidth={180}
-              data={_.compact(
-                _.map(value, (item) => {
-                  if (item === 0) return '$all';
-                  const name = _.find(datasourceList, { id: item })?.name;
-                  if (!name) return '';
-                  return name;
-                }),
+            <Space>
+              {logoSrc && (
+                <Tooltip title={cateLabel}>
+                  <img alt={record.cate} src={logoSrc} height={18} />
+                </Tooltip>
               )}
-            />
+              <Tags
+                type='outline'
+                maxWidth={180}
+                data={_.compact(
+                  _.map(value, (item) => {
+                    if (item === 0) return '$all';
+                    const name = _.find(datasourceList, { id: item })?.name;
+                    if (!name) return '';
+                    return name;
+                  }),
+                )}
+              />
+            </Space>
           );
         },
       },
@@ -116,27 +130,19 @@ const Subscribe = (props: Props) => {
         dataIndex: 'severities',
         render: (data) => {
           return (
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: 4,
+            <Tags
+              type='fill'
+              borderRadius={6}
+              data={_.map(data, (severity) => `S${severity}`)}
+              bgColor={(tagname) => {
+                const bgColorMap = { S1: 'var(--fc-red-3)', S2: 'var(--fc-orange-3)', S3: 'var(--fc-yellow-3)' };
+                return bgColorMap[tagname as string] || 'var(--fc-gray-3)';
               }}
-            >
-              {_.map(data, (severity) => {
-                return (
-                  <Tag
-                    key={severity}
-                    color={priorityColor[severity - 1]}
-                    style={{
-                      marginRight: 0,
-                    }}
-                  >
-                    S{severity}
-                  </Tag>
-                );
-              })}
-            </div>
+              fontColor={(tagname) => {
+                const fontColorMap = { S1: 'var(--fc-red-11)', S2: 'var(--fc-orange-11)', S3: 'var(--fc-yellow-11)' };
+                return fontColorMap[tagname as string] || 'var(--fc-gray-11)';
+              }}
+            />
           );
         },
       },
diff --git a/src/theme/default.less b/src/theme/default.less
index 7764c38e4..57bf0bef0 100644
--- a/src/theme/default.less
+++ b/src/theme/default.less
@@ -55,143 +55,10 @@ mark {
   }
 }
 
-// 2026-05 table design
-.ant-table-wrapper {
-  .ant-table-container {
-    border: 1px solid var(--fc-border-color) !important;
-    border-radius: 8px !important;
-    overflow: hidden;
-  }
-
-  .ant-table-tbody .ant-table-cell-fix-left,
-  .ant-table-tbody .ant-table-cell-fix-right {
-    background: var(--fc-fill-2);
-    z-index: 6;
-  }
-
-  .ant-table-tbody > tr:hover > td.ant-table-cell-fix-left,
-  .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right,
-  .ant-table-tbody > tr > td.ant-table-cell-fix-left.ant-table-cell-row-hover,
-  .ant-table-tbody > tr > td.ant-table-cell-fix-right.ant-table-cell-row-hover {
-    background: var(--fc-fill-2-5);
-    z-index: 7;
-  }
-
-  .ant-table-thead > tr > th.ant-table-cell-fix-left,
-  .ant-table-thead > tr > th.ant-table-cell-fix-right {
-    background: var(--fc-fill-2-5);
-    z-index: 8;
-  }
-
-  .ant-table-ping-right .ant-table-cell-fix-right-first::after {
-    left: 0;
-    right: auto;
-    width: 16px;
-    background: linear-gradient(to right, transparent, var(--fc-boxshadow-base-color));
-    box-shadow: none;
-    pointer-events: none;
-  }
-
-  .ant-table-thead > tr > th {
-    .ant-table-column-sorters {
-      justify-content: flex-start;
-      gap: 4px;
-      min-width: 0;
-    }
-
-    .ant-table-column-title {
-      flex: 0 1 auto;
-      min-width: 0;
-    }
-
-    .ant-table-column-sorter {
-      flex: none;
-      margin-left: 0;
-    }
-
-    .ant-table-column-sorter,
-    .ant-table-filter-trigger {
-      opacity: 0;
-      visibility: hidden;
-      transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-    }
-
-    &:hover {
-      .ant-table-column-sorter,
-      .ant-table-filter-trigger {
-        opacity: 1;
-        visibility: visible;
-      }
-    }
-
-    .ant-table-column-sorter:has(.ant-table-column-sorter-up.active),
-    .ant-table-column-sorter:has(.ant-table-column-sorter-down.active),
-    .ant-table-filter-trigger.active {
-      opacity: 1;
-      visibility: visible;
-    }
-  }
-
-  .ant-table-thead > tr > th,
-  .ant-table-tbody > tr > td,
-  .ant-table tfoot > tr > th,
-  .ant-table tfoot > tr > td {
-    border-bottom-color: var(--fc-border-color);
-  }
-
-  .ant-table-thead > tr > th {
-    background: var(--fc-fill-2-5);
-    color: var(--fc-text-3);
-    white-space: nowrap;
-  }
-
-  .ant-table.ant-table-bordered {
-    > .ant-table-title,
-    > .ant-table-footer,
-    > .ant-table-container {
-      border-color: var(--fc-border-color);
-    }
-
-    > .ant-table-container {
-      > .ant-table-content,
-      > .ant-table-header,
-      > .ant-table-body,
-      > .ant-table-summary {
-        > table {
-          > thead > tr > th,
-          > tbody > tr > td,
-          > tfoot > tr > th,
-          > tfoot > tr > td {
-            border-right-color: var(--fc-border-color);
-          }
-        }
-      }
-
-      > .ant-table-content,
-      > .ant-table-header {
-        > table {
-          border-top-color: var(--fc-border-color);
-        }
-      }
-    }
-  }
-
-  // .ant-table-tbody > tr.ant-table-row-selected > td {
-  //   color: inherit;
-  //   background: rgb(var(--fc-fill-5-rgb) / 0.15);
-  // }
-
-  // .ant-table-tbody > tr.ant-table-row-selected:hover > td {
-  //   background: rgb(var(--fc-fill-5-rgb) / 0.25);
-  // }
-
-  // .ant-table-tbody > tr.ant-table-row-selected > td.ant-table-column-sort {
-  //   background: rgb(var(--fc-fill-5-rgb) / 0.15);
-  // }
-
-  // .ant-table-tbody > tr.ant-table-row-selected:hover > td.ant-table-column-sort {
-  //   background: rgb(var(--fc-fill-5-rgb) / 0.25);
-  // }
+// 2026-03 release-23 版本 强制给表格添加边框和圆角
+.ant-table-container {
+  border: 1px solid var(--fc-border-color) !important;
+  border-radius: 8px !important;
 }
 
 .fc-table-action-dropdown {

From 0d17533821358d16527fd281e586f91a2f2c217c Mon Sep 17 00:00:00 2001
From: jsers <xqing9024@gmail.com>
Date: Thu, 21 May 2026 17:33:07 +0800
Subject: [PATCH 44/44] refactor: add explicit type annotations to callback
 parameters

---
 src/pages/alertRules/List/ListNG.tsx             | 8 ++++----
 src/pages/builtInComponents/AlertRules/index.tsx | 2 +-
 src/pages/builtInComponents/Dashboards/index.tsx | 2 +-
 src/pages/dashboard/List/index.tsx               | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 524cf69db..dbd7c876a 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -157,16 +157,16 @@ export default function AlertRules(props: Props) {
               type='fill'
               borderRadius={6}
               data={_.map(data, (severity) => `S${severity}`)}
-              bgColor={(tagname) => {
-                const bgColorMap = {
+              bgColor={(tagname: string) => {
+                const bgColorMap: Record<string, string> = {
                   S1: 'var(--fc-red-3)',
                   S2: 'var(--fc-orange-3)',
                   S3: 'var(--fc-yellow-3)',
                 };
                 return bgColorMap[tagname] || 'var(--fc-gray-3)';
               }}
-              fontColor={(tagname) => {
-                const fontColorMap = {
+              fontColor={(tagname: string) => {
+                const fontColorMap: Record<string, string> = {
                   S1: 'var(--fc-red-11)',
                   S2: 'var(--fc-orange-11)',
                   S3: 'var(--fc-yellow-11)',
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index e4f6d75bb..c67cce56f 100644
--- a/src/pages/builtInComponents/AlertRules/index.tsx
+++ b/src/pages/builtInComponents/AlertRules/index.tsx
@@ -209,7 +209,7 @@ export default function index(props: Props) {
               return (
                 <Tags
                   data={tags}
-                  onTagClick={(tag) => {
+                  onTagClick={(tag: string) => {
                     const queryItem = _.compact(_.split(filter.query, ' '));
                     if (_.includes(queryItem, tag)) return;
                     setFilter((filter) => ({
diff --git a/src/pages/builtInComponents/Dashboards/index.tsx b/src/pages/builtInComponents/Dashboards/index.tsx
index 7f14f6b33..72e457180 100644
--- a/src/pages/builtInComponents/Dashboards/index.tsx
+++ b/src/pages/builtInComponents/Dashboards/index.tsx
@@ -164,7 +164,7 @@ export default function index(props: Props) {
               return (
                 <Tags
                   data={tags}
-                  onTagClick={(tag) => {
+                  onTagClick={(tag: string) => {
                     const queryItem = _.compact(_.split(filter.query, ' '));
                     if (_.includes(queryItem, tag)) return;
                     setFilter((filter) => ({
diff --git a/src/pages/dashboard/List/index.tsx b/src/pages/dashboard/List/index.tsx
index 569b80904..3abf69ea9 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -177,7 +177,7 @@ export default function index() {
                       type='outline'
                       data={_.compact(_.split(text, ' '))}
                       maxWidth={180}
-                      onTagClick={(tag) => {
+                      onTagClick={(tag: string) => {
                         const queryItem = searchVal.length > 0 ? searchVal.split(' ') : [];
                         if (queryItem.includes(tag)) return;
                         setsearchVal((searchVal) => {