feat(table): EnhancedTable align style

src/components/Contacts/index.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Drawer, Table, Switch, Space, Button, Modal, message } from 'antd';
+import { Drawer, Switch, Space, Button, Modal, message } from 'antd';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import { CloseOutlined } from '@ant-design/icons';
 
+import EnhancedTable, { getEnabledStatusColumn } from '@/components/EnhancedTable';
 import { getNotifyContacts, putNotifyContacts } from './services';
 import { ContactType } from './types';
 import { NS, CN } from './constants';
@@ -51,11 +52,61 @@ export default function ContactDrawer(props: Props) {
               </Button>
             </Space>
           </div>
-          <Table<ContactType>
+          <EnhancedTable<ContactType>
             rowKey='ident'
             size='small'
             pagination={false}
             dataSource={data}
+            rowActions={(reocrd) => ({
+              menu: _.compact([
+                {
+                  key: 'edit',
+                  icon: 'edit',
+                  text: t('common:btn.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'));
+                        });
+                      },
+                    });
+                  },
+                },
+                !reocrd.built_in
+                  ? {
+                      key: 'delete',
+                      icon: 'delete',
+                      text: t('common:btn.delete'),
+                      danger: true,
+                      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() {},
+                        });
+                      },
+                    }
+                  : undefined,
+              ]),
+            })}
+            actionColumn={{ title: t('common:table.operations'), width: 64 }}
             columns={[
               {
                 title: t('common:table.name'),
@@ -68,9 +119,16 @@ export default function ContactDrawer(props: Props) {
                 key: 'ident',
               },
               {
-                title: t('common:table.enabled'),
-                dataIndex: 'hide',
+                ...getEnabledStatusColumn({
+                  title: t('common:table.enabled'),
+                  dataIndex: 'hide',
+                  enabledText: t('common:table.enabled'),
+                  disabledText: t('disabled'),
+                  enabledValue: false,
+                  disabledValue: true,
+                }),
                 key: 'hide',
+
                 render: (val: boolean, record) => {
                   return (
                     <Switch
@@ -95,66 +153,8 @@ export default function ContactDrawer(props: Props) {
                   );
                 },
               },
-              {
-                title: t('common:table.operations'),
-                width: 100,
-                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'));
-                                });
-                              },
-
-                              onCancel() {},
-                            });
-                          }}
-                        >
-                          {t('common:btn.delete')}
-                        </Button>
-                      )}
-                    </Space>
-                  );
-                },
-              },
             ]}
-          ></Table>
+          ></EnhancedTable>
         </div>
       </div>
     </Drawer>

src/components/EllipsisText/index.tsx

@@ -0,0 +1,60 @@
+import React, { useRef, useState } from 'react';
+import { Tooltip } from 'antd';
+import type { TooltipProps } from 'antd';
+import classNames from 'classnames';
+
+export interface EllipsisTextProps {
+  /** content to render, truncated to a single line */
+  text: React.ReactNode;
+  /** tooltip content when truncated; defaults to `text` */
+  title?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  /** extra props forwarded to the underlying Tooltip */
+  tooltipProps?: Partial<TooltipProps>;
+}
+
+const ellipsisStyle: React.CSSProperties = {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+};
+
+/**
+ * Single-line text that truncates with an ellipsis when it overflows its
+ * container, revealing the full content in a tooltip on hover — but only when
+ * it is actually truncated. The tooltip is controlled and overflow is measured
+ * lazily on hover, so it stays cheap when rendered across many table rows.
+ *
+ * Relies on the container having a bounded width (e.g. a fixed-layout table
+ * cell, which antd uses whenever a column is fixed/has ellipsis/scroll).
+ */
+export default function EllipsisText({ text, title, className, style, tooltipProps }: EllipsisTextProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  const onVisibleChange = (open: boolean) => {
+    if (!open) {
+      setVisible(false);
+      return;
+    }
+    const el = ref.current;
+    setVisible(!!el && el.scrollWidth > el.clientWidth);
+  };
+
+  return (
+    <Tooltip
+      title={title ?? text}
+      visible={visible}
+      onVisibleChange={onVisibleChange}
+      // light surface tooltip via design tokens; auto-flips to a dark surface in dark mode
+      color='var(--fc-fill-2)'
+      overlayInnerStyle={{ color: 'var(--fc-text-1)', border: '1px solid var(--fc-border-color)' }}
+      {...tooltipProps}
+    >
+      <div ref={ref} className={classNames('fc-ellipsis-text', className)} style={{ ...ellipsisStyle, ...style }}>
+        {text}
+      </div>
+    </Tooltip>
+  );
+}

src/components/EnhancedTable/EnhancedTable.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo, useRef } from 'react';
+import { Table } from 'antd';
+import type { ColumnType, ColumnsType } from 'antd/lib/table';
+import classNames from 'classnames';
+
+import { injectColumnFilters } from './columns';
+import { RowActionCell } from './RowActionCell';
+import type { EnhancedTableProps } from './types';
+import './style.less';
+import { defaultComparator } from './sorter';
+
+/**
+ * Thin pass-through wrapper over antd Table.
+ * Forwards all TableProps; pass `rowActions` to auto-render the action column.
+ * Visual baseline (sort/filter icons, fixed-column bg, …) lives in global theme/table.less.
+ *
+ * NOTE: keep this file exporting ONLY the component, otherwise React Fast Refresh
+ * loses its boundary here and edits trigger a full page reload.
+ */
+export default function EnhancedTable<RecordType extends object = any>(props: EnhancedTableProps<RecordType>) {
+  const { rowActions, actionColumn, columns, className, dataSource, compactHeader, ...rest } = props;
+
+  const rowActionsRef = useRef(rowActions);
+  rowActionsRef.current = rowActions;
+  const hasRowActions = !!rowActions;
+
+  const enhancedColumns: ColumnsType<RecordType> = useMemo(() => {
+    let finalColumns: ColumnsType<RecordType> | undefined = injectColumnFilters(columns, Array.isArray(dataSource) ? dataSource : undefined);
+    const allColumns: ColumnType<RecordType>[] = ((finalColumns ?? []) as ColumnsType<RecordType>).filter(Boolean).map((col: ColumnType<RecordType>) => {
+      const dataIndex = col.dataIndex;
+      // 操作列不排序
+      const sorter = col.sorter !== undefined ? col.sorter : !!dataIndex && !['operate'].includes(dataIndex as string) ? defaultComparator(dataIndex as string) : false;
+      return {
+        ...col,
+        // ellipsis: col.ellipsis !== undefined ? col.ellipsis : true,
+        sorter,
+      };
+    });
+
+    if (hasRowActions) {
+      const opColumn: ColumnType<RecordType> = {
+        title: '操作',
+        key: '__fc_action__',
+        fixed: 'right',
+        width: 100,
+        ...actionColumn,
+        render: (_value: unknown, record: RecordType, index: number) => {
+          const cfg = rowActionsRef.current?.(record, index);
+          return cfg ? <RowActionCell actions={cfg} /> : null;
+        },
+      };
+      allColumns.push(opColumn);
+    }
+
+    return allColumns;
+  }, [columns, actionColumn, hasRowActions]);
+
+  return (
+    <Table<RecordType>
+      {...rest}
+      dataSource={dataSource}
+      columns={enhancedColumns}
+      className={classNames('fc-enhanced-table', { 'fc-enhanced-table--compact-header': compactHeader }, className)}
+    />
+  );
+}