diff --git a/src/App.less b/src/App.less
index 11813ab0b..5356ab6e5 100644
--- a/src/App.less
+++ b/src/App.less
@@ -381,26 +381,6 @@ input::placeholder {
   }
 }
 
-// antd表格排序icon特殊处理
-.ant-table-column-has-sorters .ant-table-column-sorter-inner {
-  .ant-table-column-sorter-up,
-  .ant-table-column-sorter-down {
-    transition: all 0.2s;
-  }
-
-  &:has(.ant-table-column-sorter-up.active) {
-    .ant-table-column-sorter-down {
-      opacity: 0;
-    }
-  }
-
-  &:has(.ant-table-column-sorter-down.active) {
-    .ant-table-column-sorter-up {
-      opacity: 0;
-    }
-  }
-}
-
 .theme-light.theme-light-gold {
   .login-main.integration {
     .ant-btn-primary {
diff --git a/src/components/Contacts/index.tsx b/src/components/Contacts/index.tsx
index 09613d2e7..76367c697 100644
--- a/src/components/Contacts/index.tsx
+++ b/src/components/Contacts/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Drawer, Table, Switch, Space, Button, Modal, message } from 'antd';
+import { Drawer, Table, Switch, Space, Button, Modal, Dropdown, Menu, message } from 'antd';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import { CloseOutlined } from '@ant-design/icons';
@@ -97,59 +98,72 @@ export default function ContactDrawer(props: Props) {
               },
               {
                 title: t('common:table.operations'),
-                width: 100,
+                width: 64,
+                fixed: 'right' as const,
                 render: (reocrd) => {
                   return (
-                    <Space>
-                      <a
-                        onClick={() => {
-                          EditModal({
-                            initialValues: reocrd,
-                            onOk: (values) => {
-                              const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
-                              const newData = _.map(data, (item, idx) => {
-                                if (idx === oldIndex) {
-                                  return values;
-                                }
-                                return item;
-                              });
-                              putNotifyContacts(newData).then(() => {
-                                setData(newData);
-                                message.success(t('common:success.edit'));
-                              });
-                            },
-                          });
-                        }}
-                      >
-                        {t('common:btn.edit')}
-                      </a>
-                      {!reocrd.built_in && (
-                        <Button
-                          size='small'
-                          type='link'
-                          danger
-                          style={{
-                            padding: 0,
-                          }}
-                          onClick={() => {
-                            Modal.confirm({
-                              title: t('common:confirm.delete'),
-                              onOk: () => {
-                                const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
-                                putNotifyContacts(newData).then(() => {
-                                  setData(newData);
-                                  message.success(t('common:success.delete'));
+                    <Dropdown
+                      trigger={['click']}
+                      overlayClassName='fc-table-action-dropdown'
+                      overlay={
+                        <Menu>
+                          <Menu.Item>
+                            <TableActionButton
+                              actionIcon='edit'
+                              onClick={() => {
+                                EditModal({
+                                  initialValues: reocrd,
+                                  onOk: (values) => {
+                                    const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
+                                    const newData = _.map(data, (item, idx) => {
+                                      if (idx === oldIndex) {
+                                        return values;
+                                      }
+                                      return item;
+                                    });
+                                    putNotifyContacts(newData).then(() => {
+                                      setData(newData);
+                                      message.success(t('common:success.edit'));
+                                    });
+                                  },
                                 });
-                              },
+                              }}
+                            >
+                              {t('common:btn.edit')}
+                            </TableActionButton>
+                          </Menu.Item>
+                          {!reocrd.built_in && (
+                            <>
+                              <Menu.Divider />
+                              <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='delete'
+                                  danger
+                                  onClick={() => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.delete'),
+                                      onOk: () => {
+                                        const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
+                                        putNotifyContacts(newData).then(() => {
+                                          setData(newData);
+                                          message.success(t('common:success.delete'));
+                                        });
+                                      },
 
-                              onCancel() {},
-                            });
-                          }}
-                        >
-                          {t('common:btn.delete')}
-                        </Button>
-                      )}
-                    </Space>
+                                      onCancel() {},
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.delete')}
+                                </TableActionButton>
+                              </Menu.Item>
+                            </>
+                          )}
+                        </Menu>
+                      }
+                    >
+                      <TableActionTrigger />
+                    </Dropdown>
                   );
                 },
               },
diff --git a/src/components/TableActionDropdown/index.tsx b/src/components/TableActionDropdown/index.tsx
new file mode 100644
index 000000000..3fb7ed691
--- /dev/null
+++ b/src/components/TableActionDropdown/index.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { Button, Tooltip } 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';
+
+import './style.less';
+
+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 TableActionIconButtonProps extends Omit<ButtonProps, 'icon' | 'title'> {
+  actionIcon: TableActionIconName;
+  title: React.ReactNode;
+}
+
+export function TableActionIconButton({ actionIcon, title, className, type = 'text', ...rest }: TableActionIconButtonProps) {
+  return (
+    <Tooltip title={title}>
+      <Button type={type} className={classNames('fc-table-action-icon-btn', className)} icon={<TableActionIcon name={actionIcon} />} {...rest} />
+    </Tooltip>
+  );
+}
+
+export function TableActionCell({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <div className={classNames('fc-table-action-cell', className)}>{children}</div>;
+}
+
+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 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} />;
+});
diff --git a/src/components/TableActionDropdown/style.less b/src/components/TableActionDropdown/style.less
new file mode 100644
index 000000000..17cfa5989
--- /dev/null
+++ b/src/components/TableActionDropdown/style.less
@@ -0,0 +1,116 @@
+.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);
+  }
+}
+
+// 行内暴露的特色操作图标（与 3 个点的 dropdown 并排）
+.fc-table-action-cell {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.fc-table-action-icon-btn.ant-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--fc-text-3);
+
+  .fc-table-action-menu-icon {
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    stroke-width: 2;
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--fc-text-2);
+  }
+
+  &.ant-btn-dangerous {
+    color: var(--fc-fill-error);
+  }
+
+  &[disabled],
+  &[disabled]:hover {
+    color: var(--fc-text-4);
+  }
+}
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
new file mode 100644
index 000000000..79c2fc393
--- /dev/null
+++ b/src/components/TableTags/Tags.tsx
@@ -0,0 +1,247 @@
+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<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: 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;
+}
+
+const GAP = 2;
+
+/**
+ * 核心布局算法：根据实际测量的 tag 宽度计算可见数量
+ */
+export 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<T>(icon: Props<T>['icon'], item: string | T, index: number): React.ReactNode | undefined {
+  if (!icon) return undefined;
+  return typeof icon === 'function' ? icon(item, index) : icon;
+}
+
+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', icon, data, onTagClick, getKey, getLabel, getTooltipTitle, 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 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 基础类（测量层和渲染层共用）
+  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' : ''
+  }`;
+
+  // 可见层额外加溢出省略（text-ellipsis 对 inline-flex 无效，由内部 span 承接）
+  const visibleTagClass = `${tagBaseClass} overflow-hidden max-w-full shrink-0 min-w-0`;
+
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const compute = () => {
+      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;
+
+      setLayout(calcLayout(tagWidths, overflowTagWidth, containerWidth));
+    };
+
+    const ro = new ResizeObserver(compute);
+    ro.observe(el);
+    compute();
+
+    return () => ro.disconnect();
+  }, [data]);
+
+  const { visibleCount, overflowCount } = layout;
+
+  if (!data || data.length === 0) return null;
+
+  return (
+    <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) => (
+          <span
+            key={getItemKey(item, i)}
+            ref={(el) => {
+              tagMeasureRefs.current[i] = el;
+            }}
+            className={tagBaseClass}
+          >
+            {icon && <span className='mr-2 flex items-center'>{resolveIcon(icon, item, i)}</span>}
+            {getItemLabel(item, i)}
+          </span>
+        ))}
+        {/* 用最大计数值预估 overflow tag 宽度上限 */}
+        <span ref={overflowMeasureRef} className={tagBaseClass}>
+          +{data?.length}
+        </span>
+      </div>
+
+      {/* 可见布局层 */}
+      <div className='flex flex-wrap gap-0.5 content-start'>
+        {(data as (string | T)[]).slice(0, visibleCount).map((item, i) => (
+          <span
+            key={getItemKey(item, i)}
+            className={visibleTagClass}
+            style={getTagStyle(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 shrink-0'>{resolveIcon(icon, item, i)}</span>}
+            <span className='overflow-hidden text-ellipsis'>{getItemLabel(item, i)}</span>
+          </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 as (string | T)[]).map((item, i) => getItemLabel(item, i)).join('\n'));
+                  }}
+                />
+              </div>
+            }
+            content={
+              <div>
+                {(data as (string | T)[]).map((item, i) => (
+                  <div key={getItemKey(item, i)} className='mb-1'>
+                    <div
+                      className={tagBaseClass}
+                      style={getTagStyle(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)}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            }
+          >
+            <span
+              className={`${tagBaseClass} shrink-0`}
+              style={getTagStyle('', -1)}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              +{overflowCount}
+            </span>
+          </Popover>
+        )}
+      </div>
+    </div>
+  );
+}
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/locales/common/locale/en_US.ts b/src/locales/common/locale/en_US.ts
index f55565935..0b421061a 100644
--- a/src/locales/common/locale/en_US.ts
+++ b/src/locales/common/locale/en_US.ts
@@ -173,6 +173,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',
   format_sql: 'Format SQL',
 
   tpl: 'Self-healing',
diff --git a/src/locales/common/locale/ja_JP.ts b/src/locales/common/locale/ja_JP.ts
index 05a82b4ea..69e66588f 100644
--- a/src/locales/common/locale/ja_JP.ts
+++ b/src/locales/common/locale/ja_JP.ts
@@ -173,6 +173,7 @@ const ja_JP = {
   disabling: '無効化中',
   select_event: 'アラートイベントを選択',
   click_to_view_doc: 'クリックしてドキュメントを表示します',
+  tags_popover_title: '{{count}} タグ',
   format_sql: 'SQLをフォーマット',
 
   tpl: '自己修復スクリプト',
diff --git a/src/locales/common/locale/ru_RU.ts b/src/locales/common/locale/ru_RU.ts
index 568d246ba..1b5fe14a4 100644
--- a/src/locales/common/locale/ru_RU.ts
+++ b/src/locales/common/locale/ru_RU.ts
@@ -173,6 +173,7 @@ const ru_RU = {
   disabling: 'Отключение',
   select_event: 'Выбрать событие оповещения',
   click_to_view_doc: 'Нажмите, чтобы просмотреть документацию',
+  tags_popover_title: '{{count}} тегов',
   format_sql: 'Форматировать SQL',
 
   tpl: 'Скрипт самовосстановления',
diff --git a/src/locales/common/locale/zh_CN.ts b/src/locales/common/locale/zh_CN.ts
index c1f88dbae..0ff7b0d51 100644
--- a/src/locales/common/locale/zh_CN.ts
+++ b/src/locales/common/locale/zh_CN.ts
@@ -172,6 +172,7 @@ const zh_CN = {
   disabling: '禁用中',
   select_event: '选择告警事件',
   click_to_view_doc: '点击查看文档',
+  tags_popover_title: '{{count}} 个标签',
   format_sql: '格式化 SQL',
 
   // 临时把 task 的翻译放在这里
diff --git a/src/locales/common/locale/zh_HK.ts b/src/locales/common/locale/zh_HK.ts
index 82c15c51b..4e7cb41fa 100644
--- a/src/locales/common/locale/zh_HK.ts
+++ b/src/locales/common/locale/zh_HK.ts
@@ -172,6 +172,7 @@ const zh_HK = {
   disabling: '禁用中',
   select_event: '選擇告警事件',
   click_to_view_doc: '點擊查看文檔',
+  tags_popover_title: '{{count}} 個標籤',
   format_sql: '格式化 SQL',
 
   tpl: '自愈腳本',
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 />
diff --git a/src/pages/aiConfig/agents/pages/List.tsx b/src/pages/aiConfig/agents/pages/List.tsx
index a170f675e..d04a4ab4e 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 } 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,43 +98,57 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 64,
+                    fixed: 'right' as const,
                     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
+                          trigger={['click']}
+                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                          overlayClassName='fc-table-action-dropdown'
+                          overlay={
+                            <Menu>
+                              <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='edit'
+                                  onClick={() => {
+                                    setEditDrawerState({
+                                      visible: true,
+                                      id: record.id,
                                     });
-                                  },
-                                });
-                              }}
-                            />
-                          </Tooltip>
-                        </Space>
+                                  }}
+                                >
+                                  {t('common:btn.edit')}
+                                </TableActionButton>
+                              </Menu.Item>
+                              <Menu.Divider />
+                              <Menu.Item>
+                                <Tooltip title={record.enable === true ? t('cannot_delete_when_enabled') : undefined}>
+                                  <TableActionButton
+                                    actionIcon='delete'
+                                    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')}
+                                  </TableActionButton>
+                                </Tooltip>
+                              </Menu.Item>
+                            </Menu>
+                          }
+                        >
+                          <TableActionTrigger />
+                        </Dropdown>
                       );
                     },
                   },
diff --git a/src/pages/aiConfig/llmConfigs/pages/List.tsx b/src/pages/aiConfig/llmConfigs/pages/List.tsx
index 6ab0bb050..7d5e4ffb4 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 } 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,31 +90,48 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 64,
+                    fixed: 'right' as const,
                     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
+                        trigger={['click']}
+                        align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                        overlayClassName='fc-table-action-dropdown'
+                        overlay={
+                          <Menu>
+                            <Menu.Item>
+                              <TableActionButton actionIcon='edit' onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
+                                {t('common:btn.edit')}
+                              </TableActionButton>
+                            </Menu.Item>
+                            <Menu.Divider />
+                            <Menu.Item>
+                              <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
+                                <TableActionButton
+                                  actionIcon='delete'
+                                  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')}
+                                </TableActionButton>
+                              </Tooltip>
+                            </Menu.Item>
+                          </Menu>
+                        }
+                      >
+                        <TableActionTrigger />
+                      </Dropdown>
                     ),
                   },
                 ]}
diff --git a/src/pages/aiConfig/mcpServers/pages/List.tsx b/src/pages/aiConfig/mcpServers/pages/List.tsx
index 53510d34d..4c92ed3cf 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 } 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,31 +75,48 @@ export default function List() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 64,
+                    fixed: 'right' as const,
                     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
+                        trigger={['click']}
+                        align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                        overlayClassName='fc-table-action-dropdown'
+                        overlay={
+                          <Menu>
+                            <Menu.Item>
+                              <TableActionButton actionIcon='edit' onClick={() => setEditDrawerState({ visible: true, id: record.id })}>
+                                {t('common:btn.edit')}
+                              </TableActionButton>
+                            </Menu.Item>
+                            <Menu.Divider />
+                            <Menu.Item>
+                              <Tooltip title={record.enabled === true ? t('cannot_delete_when_enabled') : undefined}>
+                                <TableActionButton
+                                  actionIcon='delete'
+                                  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')}
+                                </TableActionButton>
+                              </Tooltip>
+                            </Menu.Item>
+                          </Menu>
+                        }
+                      >
+                        <TableActionTrigger />
+                      </Dropdown>
                     ),
                   },
                 ]}
diff --git a/src/pages/aiConfig/skills/pages/ResourcesTable.tsx b/src/pages/aiConfig/skills/pages/ResourcesTable.tsx
index 03b476c83..2315b0b56 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 } 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 { 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, TableActionCell, TableActionIconButton } from '@/components/TableActionDropdown';
 
 interface Props {
   id: number;
@@ -145,43 +146,56 @@ export default function ResourcesTable(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 90,
+            fixed: 'right' as const,
             render: (record) => {
               return (
-                <Space size={2}>
-                  <Button
-                    size='small'
-                    type='text'
-                    className='p-0'
-                    icon={<EyeOutlined />}
+                <TableActionCell>
+                  <TableActionIconButton
+                    actionIcon='view'
+                    title={t('common:btn.view')}
                     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
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                    overlayClassName='fc-table-action-dropdown'
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='delete'
+                            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')}
+                          </TableActionButton>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <TableActionTrigger />
+                  </Dropdown>
+                </TableActionCell>
               );
             },
           },
         ]}
         pagination={false}
         scroll={{
+          x: 'max-content',
           y: 400,
         }}
       />
diff --git a/src/pages/alertCurEvent/pages/List/AlertTable.tsx b/src/pages/alertCurEvent/pages/List/AlertTable.tsx
index 51e7b1617..f8031153a 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 { Tag, Table, Dropdown, Menu, Space } from 'antd';
 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';
@@ -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>
         );
@@ -186,14 +191,14 @@ 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
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+              overlayClassName='fc-table-action-dropdown'
               overlay={
                 <Menu>
                   {IS_PLUS && (
@@ -208,10 +213,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 +229,14 @@ export default function AlertTable(props: IProps) {
                         }}
                       >
                         {t('shield')}
-                      </Button>
+                      </TableActionButton>
                     </Menu.Item>
                   )}
+                  {(IS_PLUS || !_.includes(['firemap', 'northstar'], record?.rule_prod)) && <Menu.Divider />}
                   <Menu.Item>
-                    <Button
-                      style={{ padding: 0 }}
-                      size='small'
-                      type='link'
+                    <TableActionButton
                       danger
+                      actionIcon='delete'
                       onClick={() =>
                         deleteAlertEventsModal(
                           [record.id],
@@ -247,12 +249,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/alertCurEvent/pages/List/index.tsx b/src/pages/alertCurEvent/pages/List/index.tsx
index 153a6f0c7..9c9436655 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 = {
@@ -320,7 +322,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>
@@ -378,6 +393,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
+}
diff --git a/src/pages/alertRules/List/ListNG.tsx b/src/pages/alertRules/List/ListNG.tsx
index 974e3da0e..dbd7c876a 100644
--- a/src/pages/alertRules/List/ListNG.tsx
+++ b/src/pages/alertRules/List/ListNG.tsx
@@ -1,25 +1,25 @@
 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 } 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 { 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';
 import OrganizeColumns, { getDefaultColumnsConfigs, setDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import usePagination from '@/components/usePagination';
-import Tags from '@/components/Tags';
+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';
@@ -54,7 +54,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;
@@ -92,13 +92,24 @@ 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)'}
+              borderRadius={6}
+              icon={() => {
+                if (val > 0) {
+                  return <TriangleAlert size={14} />;
+                }
+                return <CircleCheckBig size={14} />;
+              }}
+              onTagClick={() => {
                 setEventsDrawerProps({
                   ...eventsDrawerProps,
                   visible: true,
@@ -106,60 +117,13 @@ 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')]}
+            />
           );
         },
       },
     ],
-    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') {
-            logoSrc = '/image/logos/host.png';
-          }
-          return <img alt={val} src={logoSrc} height={20} />;
-        },
-      },
-      {
-        title: t('table.datasource_ids'),
-        dataIndex: 'datasource_ids',
-        render(value) {
-          if (!value) return '';
-          return (
-            <Tags
-              width={70}
-              data={_.compact(
-                _.map(value, (item) => {
-                  if (item === 0) return '$all';
-                  const name = _.find(datasourceList, { id: item })?.name;
-                  if (!name) return '';
-                  return name;
-                }),
-              )}
-            />
-          );
-        },
-      },
       {
         title: t('table.name'),
         dataIndex: 'name',
@@ -167,16 +131,20 @@ export default function AlertRules(props: Props) {
           return localeCompare(a.name, b.name);
         },
         render: (data, record) => {
+          const groupName = !hideBusinessGroupColumn ? _.find(busiGroups, { id: record.group_id })?.name : undefined;
           return (
-            <Link
-              className='table-text'
-              to={{
-                pathname: `/alert-rules/edit/${record.id}`,
-              }}
-              target={linkTarget}
-            >
-              {data}
-            </Link>
+            <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 flex-wrap'>{groupName && <span>{groupName}</span>}</span>
+            </div>
           );
         },
       },
@@ -185,27 +153,61 @@ export default function AlertRules(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: 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)';
               }}
-            >
-              {_.map(data, (severity) => {
-                return (
-                  <Tag
-                    key={severity}
-                    color={priorityColor[severity - 1]}
-                    style={{
-                      marginRight: 0,
-                    }}
-                  >
-                    S{severity}
-                  </Tag>
-                );
-              })}
-            </div>
+              fontColor={(tagname: string) => {
+                const fontColorMap: Record<string, string> = {
+                  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, record) {
+          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;
+          if (record.cate === 'host') {
+            logoSrc = '/image/logos/host.png';
+          }
+          return (
+            <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>
           );
         },
       },
@@ -213,55 +215,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 <Tags type='outline' maxWidth={180} data={value} />;
         },
       },
       {
         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 <Tags type='outline' maxWidth={180} data={_.map(data, (user) => user.nickname || user.username || user.name)} />;
         },
       },
       {
@@ -269,48 +230,52 @@ 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>
+            <Tags<number>
+              type='outline'
+              maxWidth={180}
+              data={data}
+              getKey={(id) => id}
+              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'));
+                }
+              }}
+            />
           );
         },
       },
       {
         title: t('table.update_at'),
         dataIndex: 'update_at',
+        width: 100,
         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
@@ -355,48 +320,61 @@ export default function AlertRules(props: Props) {
           {
             title: t('common:table.operations'),
             fixed: 'right',
+            width: 64,
             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
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                  overlayClassName='fc-table-action-dropdown'
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <TableActionLink
+                          actionIcon='copy'
+                          to={{
+                            pathname: `/alert-rules/edit/${record.id}?mode=clone`,
+                          }}
+                          target='_blank'
+                        >
+                          {t('common:btn.clone')}
+                        </TableActionLink>
+                      </Menu.Item>
+                      {record.cate === 'prometheus' && anomalyEnabled === true && (
+                        <Menu.Item>
+                          <TableActionLink actionIcon='ai' to={{ pathname: `/alert-rules/brain/${record.id}` }}>
+                            {t('brain_result_btn')}
+                          </TableActionLink>
+                        </Menu.Item>
+                      )}
+                      <Menu.Divider />
+                      <Menu.Item>
+                        <TableActionButton
+                          actionIcon='delete'
+                          danger
+                          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')}
+                        </TableActionButton>
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <TableActionTrigger />
+                </Dropdown>
               );
             },
           },
diff --git a/src/pages/alertRules/List/constants.ts b/src/pages/alertRules/List/constants.ts
index dac1b27d8..24196474d 100644
--- a/src/pages/alertRules/List/constants.ts
+++ b/src/pages/alertRules/List/constants.ts
@@ -24,16 +24,6 @@ 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',
@@ -44,6 +34,11 @@ export const defaultColumnsConfigs = [
     i18nKey: 'table.severity',
     visible: false,
   },
+  {
+    name: 'datasource_ids',
+    i18nKey: 'table.datasource_ids',
+    visible: false,
+  },
   {
     name: 'append_tags',
     i18nKey: 'table.append_tags',
@@ -69,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/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/locale/en_US.ts b/src/pages/alertRules/locale/en_US.ts
index a18f0af42..4abb4728d 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',
@@ -38,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 99cc16052..f8d505706 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: 'アラート受信グループ',
@@ -38,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 60e093c84..7ae7721d1 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: 'Группы получателей оповещений',
@@ -38,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 1725543bf..2f18cead8 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: '告警接收组',
@@ -37,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 853a5ca00..8f09794c3 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: '告警接收組',
@@ -37,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/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/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;
 }
diff --git a/src/pages/builtInComponents/AlertRules/index.tsx b/src/pages/builtInComponents/AlertRules/index.tsx
index 35de800e2..fa8f7353f 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,8 @@ 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 Tags from '@/components/TableTags/Tags';
 import { RuleType } from './types';
 import Import from './Import';
 import { getPayloads, deletePayloads, getCates } from '../services';
@@ -205,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>
+                <Tags
+                  data={tags}
+                  onTagClick={(tag: string) => {
+                    const queryItem = _.compact(_.split(filter.query, ' '));
+                    if (_.includes(queryItem, tag)) return;
+                    setFilter((filter) => ({
+                      ...filter,
+                      query: filter.query ? filter.query + ' ' + tag : tag,
+                    }));
+                  }}
+                />
               );
             },
           },
@@ -245,14 +235,19 @@ export default function index(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             Import({
                               data: formatBeautifyJson(record.content),
@@ -264,10 +259,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 +271,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 +294,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 57da79a9f..900e00b0a 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,19 @@ export default function index(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             GroupSelectModal({
                               busiGroups,
@@ -171,11 +177,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 +201,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 7f01aef23..afe0041bd 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,8 @@ 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 Tags from '@/components/TableTags/Tags';
 import { getPayloads, deletePayloads } from '../services';
 import { TypeEnum, Payload } from '../types';
 import PayloadFormModal from '../components/PayloadFormModal';
@@ -160,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>
+                <Tags
+                  data={tags}
+                  onTagClick={(tag: string) => {
+                    const queryItem = _.compact(_.split(filter.query, ' '));
+                    if (_.includes(queryItem, tag)) return;
+                    setFilter((filter) => ({
+                      ...filter,
+                      query: filter.query ? filter.query + ' ' + tag : tag,
+                    }));
+                  }}
+                />
               );
             },
           },
@@ -205,14 +195,19 @@ export default function index(props: Props) {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
+            fixed: 'right' as const,
             render: (record) => {
               return (
                 <Dropdown
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                  overlayClassName='fc-table-action-dropdown'
                   overlay={
                     <Menu>
                       <Menu.Item>
-                        <a
+                        <TableActionButton
+                          actionIcon='open'
                           onClick={() => {
                             Import({
                               data: formatBeautifyJson(record.content),
@@ -221,10 +216,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 +228,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 +249,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 b166737e7..1494337ff 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,14 @@ 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={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 {actionAuth.add && (
@@ -159,7 +165,7 @@ export default function index(props: Props) {
                         setRefreshFlag(_.uniqueId('refreshFlag_'));
                       }}
                     >
-                      <a>{t('common:btn.clone')}</a>
+                      <TableActionButton actionIcon='copy'>{t('common:btn.clone')}</TableActionButton>
                     </FormModal>
                   </Menu.Item>
                 )}
@@ -175,36 +181,38 @@ export default function index(props: Props) {
                         setRefreshFlag(_.uniqueId('refreshFlag_'));
                       }}
                     >
-                      <a>{t('common:btn.edit')}</a>
+                      <TableActionButton actionIcon='edit'>{t('common:btn.edit')}</TableActionButton>
                     </FormModal>
                   </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>
+                  </>
                 )}
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },
diff --git a/src/pages/contacts/pages/List.tsx b/src/pages/contacts/pages/List.tsx
index 901941bf8..350b9efe5 100644
--- a/src/pages/contacts/pages/List.tsx
+++ b/src/pages/contacts/pages/List.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Switch, Space, Button, Modal, message } from 'antd';
+import { Table, Switch, Space, Button, Modal, Dropdown, Menu, message } from 'antd';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 
@@ -92,59 +93,72 @@ export default function Channels() {
               },
               {
                 title: t('common:table.operations'),
-                width: 100,
+                width: 64,
+                fixed: 'right' as const,
                 render: (reocrd) => {
                   return (
-                    <Space>
-                      <a
-                        onClick={() => {
-                          EditModal({
-                            initialValues: reocrd,
-                            onOk: (values) => {
-                              const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
-                              const newData = _.map(data, (item, idx) => {
-                                if (idx === oldIndex) {
-                                  return values;
-                                }
-                                return item;
-                              });
-                              putNotifyContacts(newData).then(() => {
-                                setData(newData);
-                                message.success(t('common:success.edit'));
-                              });
-                            },
-                          });
-                        }}
-                      >
-                        {t('common:btn.edit')}
-                      </a>
-                      {!reocrd.built_in && (
-                        <Button
-                          size='small'
-                          type='link'
-                          danger
-                          style={{
-                            padding: 0,
-                          }}
-                          onClick={() => {
-                            Modal.confirm({
-                              title: t('common:confirm.delete'),
-                              onOk: () => {
-                                const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
-                                putNotifyContacts(newData).then(() => {
-                                  setData(newData);
-                                  message.success(t('common:success.delete'));
+                    <Dropdown
+                      trigger={['click']}
+                      overlayClassName='fc-table-action-dropdown'
+                      overlay={
+                        <Menu>
+                          <Menu.Item>
+                            <TableActionButton
+                              actionIcon='edit'
+                              onClick={() => {
+                                EditModal({
+                                  initialValues: reocrd,
+                                  onOk: (values) => {
+                                    const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
+                                    const newData = _.map(data, (item, idx) => {
+                                      if (idx === oldIndex) {
+                                        return values;
+                                      }
+                                      return item;
+                                    });
+                                    putNotifyContacts(newData).then(() => {
+                                      setData(newData);
+                                      message.success(t('common:success.edit'));
+                                    });
+                                  },
                                 });
-                              },
+                              }}
+                            >
+                              {t('common:btn.edit')}
+                            </TableActionButton>
+                          </Menu.Item>
+                          {!reocrd.built_in && (
+                            <>
+                              <Menu.Divider />
+                              <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='delete'
+                                  danger
+                                  onClick={() => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.delete'),
+                                      onOk: () => {
+                                        const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
+                                        putNotifyContacts(newData).then(() => {
+                                          setData(newData);
+                                          message.success(t('common:success.delete'));
+                                        });
+                                      },
 
-                              onCancel() {},
-                            });
-                          }}
-                        >
-                          {t('common:btn.delete')}
-                        </Button>
-                      )}
-                    </Space>
+                                      onCancel() {},
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.delete')}
+                                </TableActionButton>
+                              </Menu.Item>
+                            </>
+                          )}
+                        </Menu>
+                      }
+                    >
+                      <TableActionTrigger />
+                    </Dropdown>
                   );
                 },
               },
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 a6f47a8cf..4c958f1d5 100644
--- a/src/pages/dashboard/List/index.tsx
+++ b/src/pages/dashboard/List/index.tsx
@@ -19,8 +19,8 @@
  */
 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 { Table, Modal, Space, Dropdown, Menu, message, Tooltip } from 'antd';
+import { FundViewOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -33,6 +33,8 @@ 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 Tags from '@/components/TableTags/Tags';
 import usePagination from '@/components/usePagination';
 import { getDefaultColumnsConfigs, ajustColumns } from '@/components/OrganizeColumns';
 import { getBusiGroups } from '@/components/BusinessGroup';
@@ -143,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={{
@@ -172,214 +163,216 @@ 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) => (
-                      <>
-                        {_.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;
-                        })}
-                      </>
-                    ),
-                  },
-                  {
-                    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: string) => {
+                        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'),
-                    render: (text: string, record: DashboardType) => {
-                      return (
-                        <Dropdown
-                          overlay={
-                            <Menu>
-                              {gids !== '-1' && (
-                                <Menu.Item>
-                                  <Button
-                                    type='link'
-                                    className='p-0 h-auto'
-                                    onClick={() => {
-                                      FormModal({
-                                        action: 'edit',
-                                        initialValues: record,
-                                        busiId: businessGroup.id,
-                                        onOk: () => {
-                                          setRefreshKey(_.uniqueId('refreshKey_'));
-                                        },
-                                      });
-                                    }}
-                                  >
-                                    {t('common:btn.edit')}
-                                  </Button>
-                                </Menu.Item>
-                              )}
-                              {gids && gids !== '-1' && (
-                                <Menu.Item>
-                                  <Button
-                                    type='link'
-                                    className='p-0 h-auto'
-                                    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')}
-                                  </Button>
-                                </Menu.Item>
-                              )}
+                },
+                {
+                  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>
-                                <Button
-                                  type='link'
-                                  className='p-0 h-auto'
+                                <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 () => {
-                                    const exportData = await getDashboard(record.id);
-                                    Export({
-                                      data: exportDataStringify(exportData),
+                                    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.export')}
-                                </Button>
+                                  {t('common:btn.clone')}
+                                </TableActionButton>
                               </Menu.Item>
-                              {gids !== '-1' && (
+                            )}
+                            <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>
-                                  <Button
+                                  <TableActionButton
                                     danger
-                                    type='link'
-                                    className='p-0 h-auto'
+                                    actionIcon='delete'
                                     onClick={async () => {
                                       Modal.confirm({
                                         title: t('common:confirm.delete'),
@@ -394,19 +387,19 @@ export default function index() {
                                     }}
                                   >
                                     {t('common:btn.delete')}
-                                  </Button>
+                                  </TableActionButton>
                                 </Menu.Item>
-                              )}
-                            </Menu>
-                          }
-                        >
-                          <Button type='link' icon={<MoreOutlined />} />
-                        </Dropdown>
-                      );
-                    },
+                              </>
+                            )}
+                          </Menu>
+                        }
+                      >
+                        <TableActionTrigger />
+                      </Dropdown>
+                    );
                   },
-                ],
-              ),
+                },
+              ]),
               columnsConfigs,
             )}
             rowKey='id'
diff --git a/src/pages/datasource/components/TableSource/index.tsx b/src/pages/datasource/components/TableSource/index.tsx
index 67920d589..dbf9451aa 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,67 @@ const TableSource = (props: IPropsType) => {
 
     {
       title: t('common:table.operations'),
-      width: 100,
+      width: 64,
+      fixed: 'right' as const,
       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
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+            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 a87b33a22..e040b6343 100644
--- a/src/pages/embeddedProduct/pages/List/index.tsx
+++ b/src/pages/embeddedProduct/pages/List/index.tsx
@@ -1,7 +1,7 @@
 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 { useTranslation } from 'react-i18next';
@@ -12,6 +12,8 @@ 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 Tags from '@/components/TableTags/Tags';
 
 import { NS, DETAIL_PATH } from '../../constants';
 import { EmbeddedProductParams, EmbeddedProductResponse } from '../../types';
@@ -63,10 +65,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 <Tags<number> data={val} maxWidth={320} getKey={(item) => item} getLabel={(item) => _.find(userGroups, { id: item })?.name || String(item)} />;
         },
       },
       {
@@ -125,38 +124,53 @@ export default function Index() {
       {
         title: t('common:table.operations'),
         dataIndex: 'operator',
-        width: 120,
+        width: 64,
+        fixed: 'right' as const,
         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
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+              overlayClassName='fc-table-action-dropdown'
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <TableActionButton
+                      actionIcon='edit'
+                      onClick={() => {
+                        setCurrentRecord(record);
+                        setModalVisible(true);
+                      }}
+                    >
+                      {t('common:btn.edit')}
+                    </TableActionButton>
+                  </Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <TableActionButton
+                      actionIcon='delete'
+                      danger
+                      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')}
+                    </TableActionButton>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <TableActionTrigger />
+            </Dropdown>
           );
         },
       },
diff --git a/src/pages/event/Table.tsx b/src/pages/event/Table.tsx
index 79771335e..2ce8bfa8d 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,14 @@ export default function TableCpt(props: IProps) {
     {
       title: t('common:table.operations'),
       dataIndex: 'operate',
-      width: 80,
+      width: 64,
+      fixed: 'right' as const,
       render(value, record) {
         return (
           <Dropdown
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 <Menu.Item>
@@ -146,10 +150,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 +166,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 +186,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..078a3a065 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,14 @@ function Card(props: Props, ref) {
     {
       title: t('common:table.operations'),
       dataIndex: 'operate',
-      width: 80,
+      width: 64,
+      fixed: 'right' as const,
       render(value, record) {
         return (
           <Dropdown
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 <Menu.Item>
@@ -187,10 +191,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 +207,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 +227,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/eventPipeline/pages/Executions/index.tsx b/src/pages/eventPipeline/pages/Executions/index.tsx
index f13751013..1e23e11b8 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 13a67ece4..8e28451d1 100644
--- a/src/pages/eventPipeline/pages/List/index.tsx
+++ b/src/pages/eventPipeline/pages/List/index.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Space, Table, Button, Tag, Input, Modal, Drawer, Select } 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';
-import { Link } from 'react-router-dom';
 
 import usePagination from '@/components/usePagination';
 
@@ -13,11 +13,16 @@ import { Item, getList, deleteItems } from '../../services';
 import Add from '../Add';
 import Edit from '../Edit';
 import MoreOperations from './MoreOperations';
+import { TableActionButton, TableActionLink, TableActionTrigger, TableActionCell, TableActionIconButton } from '@/components/TableActionDropdown';
+import Tags from '@/components/TableTags/Tags';
 
 export default function List() {
   const { t } = useTranslation(NS);
+  const history = useHistory();
   const [filter, setFilter] = useState<{
     search?: string;
+    use_case?: string;
+    trigger_mode?: string;
     disabled?: boolean;
   }>();
   const [data, setData] = useState<{
@@ -64,11 +69,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'>
@@ -85,6 +85,40 @@ export default function List() {
             }}
             prefix={<SearchOutlined />}
           />
+          <Select
+            allowClear
+            dropdownMatchSelectWidth={false}
+            placeholder={t('use_case.label')}
+            options={[
+              {
+                label: t('use_case.firemap'),
+                value: 'firemap',
+              },
+              {
+                label: t('use_case.event_pipeline'),
+                value: 'event_pipeline',
+              },
+            ]}
+            value={filter?.use_case}
+            onChange={(value) => setFilter((prev) => ({ ...prev, use_case: value }))}
+          />
+          <Select
+            allowClear
+            placeholder={t('trigger_mode.label')}
+            dropdownMatchSelectWidth={false}
+            options={[
+              {
+                label: t('trigger_mode.event'),
+                value: 'event',
+              },
+              {
+                label: t('trigger_mode.api'),
+                value: 'api',
+              },
+            ]}
+            value={filter?.trigger_mode}
+            onChange={(value) => setFilter((prev) => ({ ...prev, trigger_mode: value }))}
+          />
           <Select
             allowClear
             placeholder={t('disabled.label')}
@@ -144,85 +178,141 @@ export default function List() {
             title: t('common:table.note'),
             dataIndex: 'description',
           },
+          {
+            title: t('use_case.label'),
+            dataIndex: 'use_case',
+            width: 100,
+            render: (value) => {
+              return <Tags type='outline' maxWidth={100} data={[t(`use_case.${value}`)]} />;
+            },
+          },
+          {
+            title: t('trigger_mode.label'),
+            dataIndex: 'trigger_mode',
+            width: 100,
+            render: (value) => {
+              return <Tags type='outline' maxWidth={100} data={[t(`trigger_mode.${value}`)]} />;
+            },
+          },
           {
             title: t('disabled.label'),
             dataIndex: 'disabled',
             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)')}
+                />
+              );
             },
           },
           {
             title: t('teams'),
             dataIndex: 'team_names',
             render: (val) => {
-              return _.map(val, (item) => {
-                return <Tag key={item}>{item}</Tag>;
-              });
+              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>
+              );
             },
           },
           {
             title: t('common:table.operations'),
-            width: 200,
+            width: 90,
+            fixed: 'right' as const,
             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
+                <TableActionCell>
+                  <TableActionIconButton
+                    actionIcon='open'
+                    title={t('executions.title')}
                     onClick={() => {
-                      Modal.confirm({
-                        title: t('common:confirm.delete'),
-                        onOk: () => {
-                          deleteItems([item.id]).then(() => {
-                            featchData();
-                          });
-                        },
-                      });
+                      history.push(`/event-pipelines-executions?pipeline_id=${item.id}`);
                     }}
+                  />
+                  <Dropdown
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                    overlayClassName='fc-table-action-dropdown'
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='copy'
+                            onClick={() => {
+                              setEventPipelineDrawerState({
+                                visible: true,
+                                action: 'clone',
+                                data: _.omit(item, 'id'),
+                              });
+                            }}
+                          >
+                            {t('common:btn.clone')}
+                          </TableActionButton>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='edit'
+                            onClick={() => {
+                              setEventPipelineDrawerState({
+                                visible: true,
+                                action: 'edit',
+                                id: item.id,
+                              });
+                            }}
+                          >
+                            {t('common:btn.edit')}
+                          </TableActionButton>
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='delete'
+                            danger
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteItems([item.id]).then(() => {
+                                    featchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </TableActionButton>
+                        </Menu.Item>
+                      </Menu>
+                    }
                   >
-                    {t('common:btn.delete')}
-                  </Button>
-                  <Link to={`/event-pipelines-executions?pipeline_id=${item.id}`}>{t('executions.title')}</Link>
-                </Space>
+                    <TableActionTrigger />
+                  </Dropdown>
+                </TableActionCell>
               );
             },
           },
@@ -234,6 +324,16 @@ export default function List() {
               pass = false;
             }
           }
+          if (filter?.use_case) {
+            if (item.use_case !== filter.use_case) {
+              pass = false;
+            }
+          }
+          if (filter?.trigger_mode) {
+            if (item.trigger_mode !== filter.trigger_mode) {
+              pass = false;
+            }
+          }
           if (filter?.disabled !== undefined) {
             if (item.disabled !== filter.disabled) {
               pass = false;
diff --git a/src/pages/help/NotificationSettings/Channels/index.tsx b/src/pages/help/NotificationSettings/Channels/index.tsx
index d5e28ccf4..476201d71 100644
--- a/src/pages/help/NotificationSettings/Channels/index.tsx
+++ b/src/pages/help/NotificationSettings/Channels/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Switch, Space, Button, Popconfirm, message } from 'antd';
+import { Table, Switch, Space, Button, Modal, Dropdown, Menu, message } from 'antd';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import DocumentDrawer from '@/components/DocumentDrawer';
@@ -102,47 +103,70 @@ export default function Channels() {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
+            fixed: 'right' as const,
             render: (reocrd) => {
               return (
-                <Space>
-                  <a
-                    onClick={() => {
-                      EditModal({
-                        initialValues: reocrd,
-                        onOk: (values) => {
-                          const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
-                          const newData = _.map(data, (item, idx) => {
-                            if (idx === oldIndex) {
-                              return values;
-                            }
-                            return item;
-                          });
-                          putNotifyChannels(newData).then(() => {
-                            setData(newData);
-                            message.success(t('common:success.edit'));
-                          });
-                        },
-                      });
-                    }}
-                  >
-                    {t('common:btn.edit')}
-                  </a>
-                  {!reocrd.built_in && (
-                    <Popconfirm
-                      title={t('common:confirm.delete')}
-                      onConfirm={() => {
-                        const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
-                        putNotifyChannels(newData).then(() => {
-                          setData(newData);
-                          message.success(t('common:success.delete'));
-                        });
-                      }}
-                    >
-                      <a>{t('common:btn.delete')}</a>
-                    </Popconfirm>
-                  )}
-                </Space>
+                <Dropdown
+                  trigger={['click']}
+                  overlayClassName='fc-table-action-dropdown'
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <TableActionButton
+                          actionIcon='edit'
+                          onClick={() => {
+                            EditModal({
+                              initialValues: reocrd,
+                              onOk: (values) => {
+                                const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
+                                const newData = _.map(data, (item, idx) => {
+                                  if (idx === oldIndex) {
+                                    return values;
+                                  }
+                                  return item;
+                                });
+                                putNotifyChannels(newData).then(() => {
+                                  setData(newData);
+                                  message.success(t('common:success.edit'));
+                                });
+                              },
+                            });
+                          }}
+                        >
+                          {t('common:btn.edit')}
+                        </TableActionButton>
+                      </Menu.Item>
+                      {!reocrd.built_in && (
+                        <>
+                          <Menu.Divider />
+                          <Menu.Item>
+                            <TableActionButton
+                              actionIcon='delete'
+                              danger
+                              onClick={() => {
+                                Modal.confirm({
+                                  title: t('common:confirm.delete'),
+                                  onOk: () => {
+                                    const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
+                                    putNotifyChannels(newData).then(() => {
+                                      setData(newData);
+                                      message.success(t('common:success.delete'));
+                                    });
+                                  },
+                                });
+                              }}
+                            >
+                              {t('common:btn.delete')}
+                            </TableActionButton>
+                          </Menu.Item>
+                        </>
+                      )}
+                    </Menu>
+                  }
+                >
+                  <TableActionTrigger />
+                </Dropdown>
               );
             },
           },
diff --git a/src/pages/help/NotificationSettings/Contacts/index.tsx b/src/pages/help/NotificationSettings/Contacts/index.tsx
index d7e6c4ecf..797350681 100644
--- a/src/pages/help/NotificationSettings/Contacts/index.tsx
+++ b/src/pages/help/NotificationSettings/Contacts/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Switch, Space, Button, Popconfirm, message } from 'antd';
+import { Table, Switch, Space, Button, Modal, Dropdown, Menu, message } from 'antd';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import DocumentDrawer from '@/components/DocumentDrawer';
@@ -102,47 +103,70 @@ export default function Channels() {
           },
           {
             title: t('common:table.operations'),
-            width: 100,
+            width: 64,
+            fixed: 'right' as const,
             render: (reocrd) => {
               return (
-                <Space>
-                  <a
-                    onClick={() => {
-                      EditModal({
-                        initialValues: reocrd,
-                        onOk: (values) => {
-                          const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
-                          const newData = _.map(data, (item, idx) => {
-                            if (idx === oldIndex) {
-                              return values;
-                            }
-                            return item;
-                          });
-                          putNotifyContacts(newData).then(() => {
-                            setData(newData);
-                            message.success(t('common:success.edit'));
-                          });
-                        },
-                      });
-                    }}
-                  >
-                    {t('common:btn.edit')}
-                  </a>
-                  {!reocrd.built_in && (
-                    <Popconfirm
-                      title={t('common:confirm.delete')}
-                      onConfirm={() => {
-                        const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
-                        putNotifyContacts(newData).then(() => {
-                          setData(newData);
-                          message.success(t('common:success.delete'));
-                        });
-                      }}
-                    >
-                      <a>{t('common:btn.delete')}</a>
-                    </Popconfirm>
-                  )}
-                </Space>
+                <Dropdown
+                  trigger={['click']}
+                  overlayClassName='fc-table-action-dropdown'
+                  overlay={
+                    <Menu>
+                      <Menu.Item>
+                        <TableActionButton
+                          actionIcon='edit'
+                          onClick={() => {
+                            EditModal({
+                              initialValues: reocrd,
+                              onOk: (values) => {
+                                const oldIndex = _.findIndex(data, (item) => item.ident === reocrd.ident);
+                                const newData = _.map(data, (item, idx) => {
+                                  if (idx === oldIndex) {
+                                    return values;
+                                  }
+                                  return item;
+                                });
+                                putNotifyContacts(newData).then(() => {
+                                  setData(newData);
+                                  message.success(t('common:success.edit'));
+                                });
+                              },
+                            });
+                          }}
+                        >
+                          {t('common:btn.edit')}
+                        </TableActionButton>
+                      </Menu.Item>
+                      {!reocrd.built_in && (
+                        <>
+                          <Menu.Divider />
+                          <Menu.Item>
+                            <TableActionButton
+                              actionIcon='delete'
+                              danger
+                              onClick={() => {
+                                Modal.confirm({
+                                  title: t('common:confirm.delete'),
+                                  onOk: () => {
+                                    const newData = _.filter(data, (item) => item.ident !== reocrd.ident);
+                                    putNotifyContacts(newData).then(() => {
+                                      setData(newData);
+                                      message.success(t('common:success.delete'));
+                                    });
+                                  },
+                                });
+                              }}
+                            >
+                              {t('common:btn.delete')}
+                            </TableActionButton>
+                          </Menu.Item>
+                        </>
+                      )}
+                    </Menu>
+                  }
+                >
+                  <TableActionTrigger />
+                </Dropdown>
               );
             },
           },
diff --git a/src/pages/historyEvents/ListNG/index.tsx b/src/pages/historyEvents/ListNG/index.tsx
index fba35297d..ca0c396f5 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,14 @@ 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
+                trigger={['click']}
+                align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                overlayClassName='fc-table-action-dropdown'
                 overlay={
                   <Menu>
                     {IS_PLUS && (
@@ -206,10 +207,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 +223,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/hosts/pages/List/List.tsx b/src/pages/hosts/pages/List/List.tsx
index 56bb3683a..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 Tags from './Tags';
 import { formatBeatTimeDisplay } from './formatBeatTimeDisplay';
 
 const downtimeOptions = [1, 2, 3, 5, 10, 30];
@@ -527,7 +527,7 @@ export default function List(props: Props) {
                     <Tags
                       type='outline'
                       data={tags}
-                      fontColor={record.target_up === 0 ? 'text-soft' : 'text-title'}
+                      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;
@@ -560,7 +560,7 @@ export default function List(props: Props) {
                     <Tags
                       type='outline'
                       data={tags}
-                      fontColor={record.target_up === 0 ? 'text-soft' : 'text-title'}
+                      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 }}>
-                    <Tags type='fill' data={groupNames} fontColor={record.target_up === 0 ? 'text-soft' : undefined} />
+                    <Tags type='fill' data={groupNames} fontColor={record.target_up === 0 ? 'var(--fc-text-4)' : undefined} />
                   </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/log/IndexPatterns/index.tsx b/src/pages/log/IndexPatterns/index.tsx
index 4b4491e06..f02eeda12 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';
@@ -30,6 +30,7 @@ import './locale';
 import { SearchOutlined } from '@ant-design/icons';
 import EditField from './EditField';
 import { useQuery } from '@/utils';
+import { TableActionButton, TableActionTrigger, TableActionCell, TableActionIconButton } from '@/components/TableActionDropdown';
 
 export default function Servers() {
   const { t } = useTranslation('es-index-patterns');
@@ -142,11 +143,14 @@ export default function Servers() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 160,
+                    width: 90,
+                    fixed: 'right' as const,
                     render: (record) => {
                       return (
-                        <Space>
-                          <a
+                        <TableActionCell>
+                          <TableActionIconButton
+                            actionIcon='settings'
+                            title={t('common:btn.config')}
                             onClick={() => {
                               if (record) {
                                 EditField({
@@ -170,38 +174,57 @@ export default function Servers() {
                                 });
                               }
                             }}
-                          >
-                            {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>
+                          />
+                          <Dropdown
+                            trigger={['click']}
+                            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                            overlayClassName='fc-table-action-dropdown'
+                            overlay={
+                              <Menu>
+                                <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='edit'
+                                  onClick={() => {
+                                    FormModal({
+                                      mode: 'edit',
+                                      initialValues: record,
+                                      indexPatterns: data,
+                                      datasourceList: groupedDatasourceList.elasticsearch,
+                                      onOk: () => {
+                                        fetchData();
+                                      },
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.edit')}
+                                </TableActionButton>
+                              </Menu.Item>
+                              <Menu.Divider />
+                              <Menu.Item>
+                                <TableActionButton
+                                  actionIcon='delete'
+                                  danger
+                                  onClick={() => {
+                                    Modal.confirm({
+                                      title: t('common:confirm.delete'),
+                                      onOk: () => {
+                                        deleteESIndexPattern(record.id).then(() => {
+                                          message.success(t('common:success.delete'));
+                                          fetchData();
+                                        });
+                                      },
+                                    });
+                                  }}
+                                >
+                                  {t('common:btn.delete')}
+                                </TableActionButton>
+                              </Menu.Item>
+                            </Menu>
+                          }
+                        >
+                            <TableActionTrigger />
+                          </Dropdown>
+                        </TableActionCell>
                       );
                     },
                   },
diff --git a/src/pages/metricsBuiltin/List.tsx b/src/pages/metricsBuiltin/List.tsx
index 374dba099..e47b99a9f 100644
--- a/src/pages/metricsBuiltin/List.tsx
+++ b/src/pages/metricsBuiltin/List.tsx
@@ -19,13 +19,14 @@ 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';
 import Markdown from '@/components/Markdown';
 import PageLayout from '@/components/pageLayout';
 import usePagination from '@/components/usePagination';
+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';
@@ -33,6 +34,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';
@@ -230,13 +232,7 @@ export default function index() {
       title: t('extra_fields'),
       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>
-        );
+        return <Tags data={_.map(val, (item) => `${item.name}: ${item.value}`)} maxWidth={180} />;
       },
     },
     {
@@ -269,14 +265,20 @@ export default function index() {
     {
       title: t('common:table.operations'),
       dataIndex: 'operator',
+      width: 64,
+      fixed: 'right' as const,
       render: (data, record: any) => {
         return (
           <Dropdown
+            trigger={['click']}
+            align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+            overlayClassName='fc-table-action-dropdown'
             overlay={
               <Menu>
                 {actionAuth.add && (
                   <Menu.Item>
-                    <a
+                    <TableActionButton
+                      actionIcon='copy'
                       onClick={() => {
                         setFormDrawerData({
                           open: true,
@@ -287,12 +289,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 +306,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 +348,13 @@ export default function index() {
                       }}
                     >
                       {t('laset_over_time')}
-                    </a>
+                    </TableActionButton>
                   </Menu.Item>
                 )}
               </Menu>
             }
           >
-            <Button type='link' icon={<MoreOutlined />} />
+            <TableActionTrigger />
           </Dropdown>
         );
       },
diff --git a/src/pages/notificationChannels/pages/List/index.tsx b/src/pages/notificationChannels/pages/List/index.tsx
index 1663dbbe2..167fcbda3 100644
--- a/src/pages/notificationChannels/pages/List/index.tsx
+++ b/src/pages/notificationChannels/pages/List/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { Table, Space, Button, Switch, Modal, Input, message } from 'antd';
+import { Table, Space, Button, Switch, Modal, Input, message, Dropdown, Menu } from 'antd';
 import { NotificationOutlined, SearchOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
@@ -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,41 +182,46 @@ export default function List() {
             },
             {
               title: t('common:table.operations'),
-              width: 100,
+              width: 64,
+              fixed: 'right' as const,
               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
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                    overlayClassName='fc-table-action-dropdown'
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <TableActionLink actionIcon='copy' to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                            {t('common:btn.clone')}
+                          </TableActionLink>
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='delete'
+                            danger
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteItems([record.id]).then(() => {
+                                    message.success(t('common:success.delete'));
+                                    fetchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </TableActionButton>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <TableActionTrigger />
+                  </Dropdown>
                 );
               },
             },
diff --git a/src/pages/notificationChannels/pages/ListNG/index.tsx b/src/pages/notificationChannels/pages/ListNG/index.tsx
index a2ab6f6a9..4acafc286 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 } 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';
 
 interface Filter {
   search?: string;
@@ -298,40 +299,49 @@ export default function index() {
                   },
                   {
                     title: t('common:table.operations'),
-                    width: 100,
+                    width: 64,
+                    fixed: 'right' as const,
                     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
+                          trigger={['click']}
+                          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                          overlayClassName='fc-table-action-dropdown'
+                          overlay={
+                            <Menu>
+                              <Menu.Item>
+                                <TableActionLink actionIcon='copy' to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                                  {t('common:btn.clone')}
+                                </TableActionLink>
+                              </Menu.Item>
+                              <Menu.Divider />
+                              <Menu.Item>
+                                <Tooltip title={record.enable === true ? t('delete_disable_first') : undefined}>
+                                  <TableActionButton
+                                    actionIcon='delete'
+                                    danger
+                                    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')}
+                                  </TableActionButton>
+                                </Tooltip>
+                              </Menu.Item>
+                            </Menu>
+                          }
+                        >
+                          <TableActionTrigger />
+                        </Dropdown>
                       );
                     },
                   },
@@ -343,7 +353,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 72a3d4a87..2bf36e04b 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 } 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';
@@ -15,6 +16,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';
 
 interface Filter {
   search?: string;
@@ -138,39 +140,62 @@ 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');
+                    }}
+                  />
+                );
               },
             },
             {
               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>
+                );
               },
             },
             {
@@ -203,48 +228,50 @@ export default function List() {
             },
             {
               title: t('common:table.operations'),
-              width: 160,
+              width: 64,
+              fixed: 'right' as const,
               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
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                    overlayClassName='fc-table-action-dropdown'
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <TableActionLink actionIcon='edit' to={{ pathname: `/${NS}/edit/${record.id}` }}>
+                            {t('common:btn.edit')}
+                          </TableActionLink>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <TableActionLink actionIcon='copy' to={{ pathname: `/${NS}/edit/${record.id}?mode=clone` }} target='_blank'>
+                            {t('common:btn.clone')}
+                          </TableActionLink>
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='delete'
+                            danger
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteItems([record.id]).then(() => {
+                                    fetchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </TableActionButton>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <TableActionTrigger />
+                  </Dropdown>
                 );
               },
             },
diff --git a/src/pages/recordingRules/PageTable.tsx b/src/pages/recordingRules/PageTable.tsx
index b9193912d..3a487a406 100644
--- a/src/pages/recordingRules/PageTable.tsx
+++ b/src/pages/recordingRules/PageTable.tsx
@@ -1,5 +1,5 @@
 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';
@@ -13,6 +13,8 @@ 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 Tags from '@/components/TableTags/Tags';
 import EditModal from './components/editModal';
 import Import from './components/Import';
 import Export from './components/Export';
@@ -116,49 +118,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 _.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>;
-            },
-          );
-        },
+  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={() => {
@@ -167,100 +156,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 (
-            (array.length &&
-              array.map((tag: string, index: number) => {
-                return (
-                  <Tag color='purple' key={index}>
-                    {tag}
-                  </Tag>
-                );
-              })) || <div></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',
-        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();
-                      });
-                    },
+              },
+              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')}
-              </div>
-            </div>
-          );
-        },
+                        onCancel() {},
+                      });
+                    }}
+                  >
+                    {t('common:btn.delete')}
+                  </TableActionButton>
+                </Menu.Item>
+              </Menu>
+            }
+          >
+            <TableActionTrigger />
+          </Dropdown>
+        );
       },
-    ],
-  );
+    },
+  ]);
 
   const toOneArr = (arr, res, name) => {
     arr.forEach((ele) => {
diff --git a/src/pages/targets/List.tsx b/src/pages/targets/List.tsx
index 19c6745ed..c8eba3df1 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 Tags from '@/components/TableTags/Tags';
 
 // @ts-ignore
 import CollectsDrawer from 'plus:/pages/collects/CollectsDrawer';
@@ -46,8 +47,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 +98,7 @@ export default function List(props: IProps) {
     {
       title: (
         <Space>
-          {t('common:table.ident')}
+          {t('host_ip')}
           <Dropdown
             trigger={['click']}
             overlay={
@@ -148,28 +150,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 +188,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: (
@@ -201,30 +205,19 @@ 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>
-            )
+            <Tags<string>
+              data={tagArr}
+              maxWidth={180}
+              onTagClick={(item) => {
+                if (!tableQueryContent.includes(item)) {
+                  isAddTagToQueryInput.current = true;
+                  const val = tableQueryContent ? `${tableQueryContent.trim()} ${item}` : item;
+                  setTableQueryContent(val);
+                  setSearchVal(val);
+                }
+              }}
+            />
           );
         },
       });
@@ -273,33 +266,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/task/index.tsx b/src/pages/task/index.tsx
index d109a7f44..3b4aaccfb 100644
--- a/src/pages/task/index.tsx
+++ b/src/pages/task/index.tsx
@@ -16,13 +16,14 @@
  */
 import React, { useContext, useState, useEffect } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { Table, Divider, Checkbox, Row, Col, Select, Button, Space } from 'antd';
+import { Table, Checkbox, Row, Col, Select, Button, Space, Dropdown, Menu } from 'antd';
 import { 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 { TableActionButton, TableActionLink, TableActionTrigger, TableActionCell, TableActionIconButton } from '@/components/TableActionDropdown';
 
 import request from '@/utils/request';
 import api from '@/utils/api';
@@ -118,57 +119,79 @@ const index = (_props: any) => {
       });
   };
 
+  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>;
-        },
-      },
-      {
-        title: t('table.operations'),
-        width: 150,
-        render: (_text, record) => {
+          const groupName = _.find(busiGroups, { id: record.group_id })?.name;
           return (
-            <span>
-              <Link to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>{t('task.clone')}</Link>
-              <Divider type='vertical' />
-              <a onClick={() => handleOpenMetaDrawer(record)}>{t('task.meta')}</a>
-            </span>
+            <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('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>
+          );
+        },
+      },
+      {
+        title: t('table.operations'),
+        width: 90,
+        fixed: 'right' as const,
+        render: (_text, record) => {
+          return (
+            <TableActionCell>
+              <TableActionIconButton actionIcon='view' title={t('task.meta')} onClick={() => handleOpenMetaDrawer(record)} />
+              <Dropdown
+                trigger={['click']}
+                align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                overlayClassName='fc-table-action-dropdown'
+                overlay={
+                  <Menu>
+                    <Menu.Item>
+                      <TableActionLink actionIcon='copy' to={{ pathname: '/job-tasks/add', search: `task=${record.id}` }}>
+                        {t('task.clone')}
+                      </TableActionLink>
+                    </Menu.Item>
+                  </Menu>
+                }
+              >
+                <TableActionTrigger />
+              </Dropdown>
+            </TableActionCell>
+          );
         },
       },
     ],
diff --git a/src/pages/task/result.tsx b/src/pages/task/result.tsx
index 6c2c360f8..4225be94c 100644
--- a/src/pages/task/result.tsx
+++ b/src/pages/task/result.tsx
@@ -16,7 +16,8 @@
  */
 import React, { useContext, useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { Table, Divider, Tag, Row, Col, Button, Card } from 'antd';
+import { Table, Divider, Tag, Row, Col, Button, Card, Dropdown, Menu } from 'antd';
+import { TableActionButton, TableActionTrigger } from '@/components/TableActionDropdown';
 import { RollbackOutlined } from '@ant-design/icons';
 import { ColumnProps } from 'antd/lib/table';
 import _ from 'lodash';
@@ -160,15 +161,36 @@ const index = (props: any) => {
   if (!data.done) {
     columns.push({
       title: t('table.operations'),
+      width: 64,
+      fixed: 'right' as const,
       render: (_text, record) => {
         return (
-          <span>
-            <a onClick={() => handleHostAction(record.host, 'ignore')}>ignore</a>
-            <Divider type='vertical' />
-            <a onClick={() => handleHostAction(record.host, 'redo')}>redo</a>
-            <Divider type='vertical' />
-            <a onClick={() => handleHostAction(record.host, 'kill')}>kill</a>
-          </span>
+          <Dropdown
+            trigger={['click']}
+            overlayClassName='fc-table-action-dropdown'
+            overlay={
+              <Menu>
+                <Menu.Item>
+                  <TableActionButton actionIcon='default' onClick={() => handleHostAction(record.host, 'ignore')}>
+                    ignore
+                  </TableActionButton>
+                </Menu.Item>
+                <Menu.Item>
+                  <TableActionButton actionIcon='run' onClick={() => handleHostAction(record.host, 'redo')}>
+                    redo
+                  </TableActionButton>
+                </Menu.Item>
+                <Menu.Divider />
+                <Menu.Item>
+                  <TableActionButton actionIcon='delete' danger onClick={() => handleHostAction(record.host, 'kill')}>
+                    kill
+                  </TableActionButton>
+                </Menu.Item>
+              </Menu>
+            }
+          >
+            <TableActionTrigger />
+          </Dropdown>
         );
       },
     });
diff --git a/src/pages/taskTpl/index.tsx b/src/pages/taskTpl/index.tsx
index 28fb2ea2b..ff856976a 100644
--- a/src/pages/taskTpl/index.tsx
+++ b/src/pages/taskTpl/index.tsx
@@ -15,14 +15,16 @@
  *
  */
 import React, { useState, useContext, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import { Table, Divider, Popconfirm, Tag, Row, Col, Button, Dropdown, Menu, message, Space } from 'antd';
+import { Link, useHistory } from 'react-router-dom';
+import { Table, Modal, Tag, Row, Col, Button, Dropdown, Menu, message, Space } from 'antd';
 import { DownOutlined, 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, TableActionCell, TableActionIconButton } from '@/components/TableActionDropdown';
+import Tags from '@/components/TableTags/Tags';
 
 import request from '@/utils/request';
 import { RequestMethod } from '@/store/common';
@@ -60,6 +62,7 @@ function getTableData(options: any, gids: string | undefined, query: string) {
 
 const index = (_props: any) => {
   const { t, i18n } = useTranslation('common');
+  const history = useHistory();
   const [query, setQuery] = useState(() => sessionStorage.getItem(SEARCH_SESSION_KEY) || '');
   const { busiGroups, businessGroup } = useContext(CommonStateContext);
   const [selectedIds, setSelectedIds] = useState([] as any[]);
@@ -112,81 +115,119 @@ 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',
+        width: 360,
         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',
+        width: 280,
         render: (text) => {
-          return _.map(text, (item) => (
-            <Tag color='purple' key={item} onClick={() => handleTagClick(item)}>
-              {item}
-            </Tag>
-          ));
+          return <Tags type='outline' maxWidth={180} data={text} onTagClick={handleTagClick} />;
         },
       },
       {
         title: t('tpl.creator'),
         dataIndex: 'create_by',
-        width: 100,
+        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: 160,
+        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>
+          );
         },
       },
       {
         title: t('table.operations'),
-        width: 220,
+        width: 90,
+        fixed: 'right' as const,
         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();
-                  });
+            <TableActionCell>
+              <TableActionIconButton
+                actionIcon='run'
+                title={t('task.create')}
+                onClick={() => {
+                  history.push({ pathname: `/job-tpls/add/task`, search: `tpl=${record.id}` });
                 }}
+              />
+              <Dropdown
+                trigger={['click']}
+                align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                overlayClassName='fc-table-action-dropdown'
+                overlay={
+                  <Menu>
+                    <Menu.Item>
+                      <TableActionLink actionIcon='edit' to={{ pathname: `/job-tpls/${record.id}/modify` }}>
+                        {t('common:btn.edit')}
+                      </TableActionLink>
+                    </Menu.Item>
+                    <Menu.Item>
+                      <TableActionLink actionIcon='copy' to={{ pathname: `/job-tpls/${record.id}/clone` }}>
+                        {t('common:btn.clone')}
+                      </TableActionLink>
+                    </Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item>
+                      <TableActionButton
+                        actionIcon='delete'
+                        danger
+                        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')}
+                      </TableActionButton>
+                    </Menu.Item>
+                  </Menu>
+                }
               >
-                <a style={{ color: 'red' }}>{t('common:btn.delete')}</a>
-              </Popconfirm>
-            </span>
+                <TableActionTrigger />
+              </Dropdown>
+            </TableActionCell>
           );
         },
       },
@@ -202,7 +243,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
@@ -270,7 +311,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/user/business.tsx b/src/pages/user/business.tsx
index 6072a0631..ddc1ebdc5 100644
--- a/src/pages/user/business.tsx
+++ b/src/pages/user/business.tsx
@@ -19,13 +19,14 @@ 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 { Button, Table, Input, message, Row, Col, Modal, Space, Dropdown, Menu } from 'antd';
 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,35 +70,49 @@ const Resource: React.FC = () => {
     },
     {
       title: t('common:table.operations'),
-      width: '100px',
+      width: 64,
+      fixed: 'right' as const,
       render: (text: string, record) => (
-        <Button
-          type='link'
-          danger={memberList.length > 1}
-          disabled={memberList.length <= 1}
-          onClick={() => {
-            if (memberList.length <= 1) return;
+        <Dropdown
+          trigger={['click']}
+          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+          overlayClassName='fc-table-action-dropdown'
+          overlay={
+            <Menu>
+              <Menu.Item>
+                <TableActionButton
+                  actionIcon='delete'
+                  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')}
+                </TableActionButton>
+              </Menu.Item>
+            </Menu>
+          }
         >
-          {t('common:btn.delete')}
-        </Button>
+          <TableActionTrigger />
+        </Dropdown>
       ),
     },
   ];
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/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/user/groups.tsx b/src/pages/user/groups.tsx
index 53ad2f611..ac636cac9 100644
--- a/src/pages/user/groups.tsx
+++ b/src/pages/user/groups.tsx
@@ -20,16 +20,18 @@ 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 { Button, Table, Input, message, List, Row, Col, Modal, Space, Tag, Dropdown, Menu } from 'antd';
 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';
 import Tree from '@/components/BusinessGroup/components/Tree';
+import Tags from '@/components/TableTags/Tags';
 import './index.less';
 import './locale';
 import usePagination from '@/components/usePagination';
@@ -102,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 <Tags data={record.busi_groups || []} maxWidth={180} getKey={(item) => item.id} getLabel={(item) => item.name} />;
       },
     },
   ];
@@ -113,30 +113,43 @@ const Resource: React.FC = () => {
     ...userColumn,
     {
       title: t('common:table.operations'),
-      width: '100px',
+      width: 64,
+      fixed: 'right' as const,
       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
+          trigger={['click']}
+          align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+          overlayClassName='fc-table-action-dropdown'
+          overlay={
+            <Menu>
+              <Menu.Item>
+                <TableActionButton
+                  actionIcon='delete'
+                  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')}
+                </TableActionButton>
+              </Menu.Item>
+            </Menu>
+          }
         >
-          {t('common:btn.delete')}
-        </Button>
+          <TableActionTrigger />
+        </Dropdown>
       ),
     },
   ];
diff --git a/src/pages/user/users.tsx b/src/pages/user/users.tsx
index 70c181db4..4a37a9ebe 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 PageLayout 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';
@@ -31,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 Tags from '@/components/TableTags/Tags';
 import './index.less';
 import './locale';
 
@@ -45,30 +46,24 @@ 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> = [
     {
       title: t('account:profile.username'),
       dataIndex: 'username',
+      width: 260,
       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) => {
+        return (
+          <div className='flex flex-col gap-0.5'>
+            <span>{record.nickname || text}</span>
+            <span className='text-soft text-xs'>{text}</span>
+          </div>
+        );
+      },
     },
   ];
   const userColumns: ColumnsType<User> = [
@@ -76,20 +71,22 @@ 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',
-      render: (value) => {
+      width: 160,
+      render: (value: { id: number; name: string }[]) => {
         return (
           <Tags
             data={value}
-            tagLinkTo={(item) => {
-              return {
-                pathname: '/busi-groups',
-                search: `?id=${item.id}`,
-              };
+            maxWidth={220}
+            getKey={(item) => item.id}
+            getLabel={(item) => item.name}
+            onTagClick={(item) => {
+              if (typeof item !== 'string') window.open(`/busi-groups?id=${item.id}`, '_blank');
             }}
           />
         );
@@ -98,15 +95,16 @@ const Resource: React.FC = () => {
     {
       title: t('user.user_groups'),
       dataIndex: 'user_groups',
-      render: (value) => {
+      width: 160,
+      render: (value: { id: number; name: string }[]) => {
         return (
           <Tags
             data={value}
-            tagLinkTo={(item) => {
-              return {
-                pathname: '/user-groups',
-                search: `?id=${item.id}`,
-              };
+            maxWidth={220}
+            getKey={(item) => item.id}
+            getLabel={(item) => item.name}
+            onTagClick={(item) => {
+              if (typeof item !== 'string') window.open(`/user-groups?id=${item.id}`, '_blank');
             }}
           />
         );
@@ -115,6 +113,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');
       },
@@ -123,6 +122,7 @@ const Resource: React.FC = () => {
     {
       title: t('user.last_active_time'),
       dataIndex: 'last_active_time',
+      width: 170,
       render: (text) => {
         if (!text) {
           return '-';
@@ -133,26 +133,27 @@ const Resource: React.FC = () => {
     },
     {
       title: t('common:table.operations'),
-      width: i18n.language === 'en_US' || i18n.language === 'ru_RU' ? 80 : 40,
+      width: 64,
+      fixed: 'right' as const,
       render: (text: string, record) => {
         return (
           <Dropdown
+            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)}>
-                    <Button className='p-0 h-auto' type='link'>
-                      {t('common:btn.edit')}
-                    </Button>
+                    <TableActionButton actionIcon='edit'>{t('common:btn.edit')}</TableActionButton>
                   </Menu.Item>
                 )}
                 {_.includes(perms, '/users/put') && (
                   <Menu.Item onClick={() => handleClick(ActionType.Reset, record.id)}>
-                    <Button className='p-0 h-auto' type='link'>
-                      {t('account:password.reset')}
-                    </Button>
+                    <TableActionButton actionIcon='settings'>{t('account:password.reset')}</TableActionButton>
                   </Menu.Item>
                 )}
+                {_.includes(perms, '/users/del') && <Menu.Divider />}
                 {_.includes(perms, '/users/del') && (
                   <Menu.Item
                     onClick={() => {
@@ -168,15 +169,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>
         );
       },
diff --git a/src/pages/variableConfigs/index.tsx b/src/pages/variableConfigs/index.tsx
index 32a348822..428192a5b 100644
--- a/src/pages/variableConfigs/index.tsx
+++ b/src/pages/variableConfigs/index.tsx
@@ -17,12 +17,13 @@
 import React, { useState, useEffect } from 'react';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { Button, Input, Table, Space, message, Popconfirm } from 'antd';
+import { Button, Input, Table, Space, message, Modal, Dropdown, Menu } from 'antd';
 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,64 +111,81 @@ export default function index() {
             },
             {
               title: t('common:table.operations'),
-              width: 140,
+              width: 64,
+              fixed: 'right' as const,
               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
+                    trigger={['click']}
+                    align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                    overlayClassName='fc-table-action-dropdown'
+                    overlay={
+                      <Menu>
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='copy'
+                            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')}
+                          </TableActionButton>
+                        </Menu.Item>
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='edit'
+                            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')}
+                          </TableActionButton>
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item>
+                          <TableActionButton
+                            actionIcon='delete'
+                            danger
+                            onClick={() => {
+                              Modal.confirm({
+                                title: t('common:confirm.delete'),
+                                onOk: () => {
+                                  deleteVariableConfigs(record.id).then(() => {
+                                    message.success(t('common:success.delete'));
+                                    fetchData();
+                                  });
+                                },
+                              });
+                            }}
+                          >
+                            {t('common:btn.delete')}
+                          </TableActionButton>
+                        </Menu.Item>
+                      </Menu>
+                    }
+                  >
+                    <TableActionTrigger />
+                  </Dropdown>
                 );
               },
             },
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index 6c4ddd79d..63e23ec70 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -15,15 +15,16 @@
  *
  */
 import React, { useState, useEffect, useContext } from 'react';
-import { Button, Input, Table, Tooltip, message, Modal, Switch, Space, Tag, Select } from 'antd';
+import { Button, Input, Table, Tooltip, message, Modal, Switch, Space, Tag, Dropdown, Menu, Select } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 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 Tags from '@/components/TableTags/Tags';
 import PageLayout from '@/components/pageLayout';
 import { getBusiGroupsAlertMutes, deleteShields, updateShields } from '@/services/shield';
 import { shieldItem, strategyStatus } from '@/store/warningInterface';
@@ -32,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 +54,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));
@@ -74,63 +75,62 @@ const Shield: React.FC = () => {
     const prev = JSON.parse(window.sessionStorage.getItem(FILTER_SESSION_STORAGE_KEY) || '{}');
     window.sessionStorage.setItem(FILTER_SESSION_STORAGE_KEY, JSON.stringify({ ...prev, ...patch }));
   };
+  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) => {
+          const groupName = _.find(busiGroups, { id: record.group_id })?.name;
           return (
-            <Link
-              to={{
-                pathname: `/alert-mutes/edit/${record.id}`,
-                search: `?bgid=${record.group_id}`,
-              }}
-            >
-              {data}
-            </Link>
+            <div className='flex flex-col gap-0.5'>
+              <Link
+                to={{
+                  pathname: `/alert-mutes/edit/${record.id}`,
+                  search: `?bgid=${record.group_id}`,
+                }}
+              >
+                {data}
+              </Link>
+              {showBusinessGroup && groupName && <span className='text-soft text-xs'>{groupName}</span>}
+            </div>
           );
         },
       },
-      {
-        title: t('common:datasource.type'),
-        dataIndex: 'cate',
-        render: (val) => {
-          let logoSrc = _.find(allCates, { value: val })?.logo;
-          if (val === 'host') {
-            logoSrc = '/image/logos/host.png';
-          }
-          return <img alt={val} src={logoSrc} height={20} />;
-        },
-      },
+    ] as any,
+    [
       {
         title: t('common:datasource.id'),
         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
-              width={70}
-              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>
           );
         },
       },
@@ -139,17 +139,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}` : '')))}
+            />
           );
         },
       },
@@ -239,12 +233,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'),
@@ -275,60 +281,66 @@ const Shield: React.FC = () => {
         title: t('common:table.operations'),
         dataIndex: 'operation',
         fixed: 'right',
+        width: 64,
         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
+              trigger={['click']}
+              align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+              overlayClassName='fc-table-action-dropdown'
+              overlay={
+                <Menu>
+                  <Menu.Item>
+                    <TableActionButton
+                      actionIcon='copy'
+                      onClick={() => {
+                        history.push({
+                          pathname: `/alert-mutes/edit/${record.id}`,
+                          search: `?mode=clone&bgid=${record.group_id}`,
                         });
-                      },
+                      }}
+                    >
+                      {t('common:btn.clone')}
+                    </TableActionButton>
+                  </Menu.Item>
+                  <Menu.Divider />
+                  <Menu.Item>
+                    <TableActionButton
+                      actionIcon='delete'
+                      danger
+                      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')}
+                    </TableActionButton>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <TableActionTrigger />
+            </Dropdown>
           );
         },
       },
     ],
   );
-  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 d5821519a..765bea756 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, Select } 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';
@@ -13,7 +13,8 @@ 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 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';
@@ -22,6 +23,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';
@@ -47,7 +49,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));
@@ -67,52 +69,61 @@ 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',
-        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
-              width={70}
-              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>
           );
         },
       },
@@ -121,27 +132,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)';
+              }}
+            />
           );
         },
       },
@@ -159,13 +162,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;
-                  })
-                : ''}
-            </>
+            <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}` : '')))}
+            />
           );
         },
       },
@@ -174,13 +175,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;
-                  })
-                : ''}
-            </>
+            <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}` : '')))}
+            />
           );
         },
       },
@@ -188,7 +187,7 @@ const Subscribe = (props: Props) => {
         title: t('user_groups'),
         dataIndex: 'user_groups',
         render: (data) => {
-          return <Tags width={110} data={_.map(data, 'name')} />;
+          return <Tags type='outline' maxWidth={180} data={_.map(data, 'name')} />;
         },
       },
       {
@@ -196,28 +195,14 @@ 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>
+            <Tags<number>
+              type='outline'
+              maxWidth={180}
+              data={data}
+              getKey={(id) => id}
+              getLabel={(id) => _.find(notificationRules, { id })?.name || _.toString(id)}
+              onTagClick={(id) => window.open(`/${notificationRulesNS}/edit/${id}`, '_blank')}
+            />
           );
         },
       },
@@ -239,11 +224,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
@@ -288,35 +274,41 @@ const Subscribe = (props: Props) => {
             title: t('common:table.operations'),
             dataIndex: 'operation',
             fixed: 'right',
+            width: 64,
             render: (text: string, record: subscribeItem) => {
               return (
                 <Dropdown
+                  trigger={['click']}
+                  align={{ points: ['tr', 'tl'], offset: [-2, 0] }}
+                  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'),
@@ -337,19 +329,19 @@ const Subscribe = (props: Props) => {
                           }}
                         >
                           {t('common:btn.delete')}
-                        </Button>
+                        </TableActionButton>
                       </Menu.Item>
                     </Menu>
                   }
                 >
-                  <Button type='link' icon={<MoreOutlined />} />
+                  <TableActionTrigger />
                 </Dropdown>
               );
             },
           },
         ],
   );
-  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) => {
diff --git a/src/theme/antd.dark.less b/src/theme/antd.dark.less
index 4178aa7cd..2ac2b49b9 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);
@@ -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/index.less b/src/theme/index.less
index 851889f15..2b159fceb 100644
--- a/src/theme/index.less
+++ b/src/theme/index.less
@@ -10,6 +10,7 @@
 @import './default.light.less';
 @import './default.dark.less';
 @import './default.light-gold.less';
+@import './table.less';
 @import './deprecated.less';
 
 @tailwind base;
@@ -119,4 +120,4 @@
     border-style: solid !important;
     border-color: var(--fc-border-color) !important;
   }
-}
\ No newline at end of file
+}
diff --git a/src/theme/table.less b/src/theme/table.less
new file mode 100644
index 000000000..8fbea0c89
--- /dev/null
+++ b/src/theme/table.less
@@ -0,0 +1,76 @@
+// 2026-05 table 设计规范：未排序使用 ArrowDownUp，升序/降序分别使用 MoveUp/MoveDown
+.ant-table-thead > tr > th.ant-table-column-has-sorters {
+  .ant-table-column-sorters {
+    display: inline-flex;
+    flex: none;
+    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;
+    width: 14px;
+    height: 14px;
+    margin-left: 0;
+    color: var(--fc-text-3);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, color 0.2s ease;
+  }
+
+  &:hover .ant-table-column-sorter,
+  .ant-table-column-sorter:has(.ant-table-column-sorter-up.active),
+  .ant-table-column-sorter:has(.ant-table-column-sorter-down.active) {
+    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) {
+    color: var(--fc-primary-color);
+  }
+
+  .ant-table-column-sorter-inner {
+    position: relative;
+    display: block;
+    width: 14px;
+    height: 14px;
+  }
+
+  .ant-table-column-sorter-up,
+  .ant-table-column-sorter-down {
+    display: none;
+  }
+
+  .ant-table-column-sorter-inner::before {
+    content: '';
+    display: block;
+    width: 14px;
+    height: 14px;
+    background: currentColor;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16 4 4 4-4'/%3E%3Cpath d='M7 20V4'/%3E%3Cpath d='m21 8-4-4-4 4'/%3E%3Cpath d='M17 4v16'/%3E%3C/svg%3E");
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: contain;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16 4 4 4-4'/%3E%3Cpath d='M7 20V4'/%3E%3Cpath d='m21 8-4-4-4 4'/%3E%3Cpath d='M17 4v16'/%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+  }
+
+  .ant-table-column-sorter:has(.ant-table-column-sorter-up.active) .ant-table-column-sorter-inner::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6L12 2L16 6'/%3E%3Cpath d='M12 2V22'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6L12 2L16 6'/%3E%3Cpath d='M12 2V22'/%3E%3C/svg%3E");
+  }
+
+  .ant-table-column-sorter:has(.ant-table-column-sorter-down.active) .ant-table-column-sorter-inner::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 18L12 22L16 18'/%3E%3Cpath d='M12 2V22'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 18L12 22L16 18'/%3E%3Cpath d='M12 2V22'/%3E%3C/svg%3E");
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index 8fd6c8d6d..38e8797a6 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': 'var(--fc-fill-2)',
             '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)',
@@ -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',