feat(table): align table design in fe

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 {

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>
                   );
                 },
               },

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} />;
+});

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);
+  }
+}