feat(web): 支持渠道列表手动调整列宽

web/default/src/components/data-table/core/data-table-colgroup.tsx

@@ -34,17 +34,33 @@ export function DataTableColgroup<TData>({
   return (
     <colgroup>
       {columns.map((column) => {
-        const width = isContentSizedColumn(column.id)
-          ? undefined
-          : getColumnWidth(column.getSize(), totalSize)
+        const width = getColumnWidth(
+          table,
+          column.id,
+          column.getSize(),
+          totalSize
+        )
 
         return <col key={column.id} style={{ width }} />
       })}
     </colgroup>
   )
 }
 
-function getColumnWidth(columnSize: number, totalSize: number) {
+function getColumnWidth<TData>(
+  table: TanstackTable<TData>,
+  columnId: string,
+  columnSize: number,
+  totalSize: number
+) {
+  if (isContentSizedColumn(columnId)) {
+    return undefined
+  }
+
+  if (table.options.enableColumnResizing === true) {
+    return `${columnSize}px`
+  }
+
   if (totalSize <= 0) {
     return undefined
   }

web/default/src/components/data-table/core/data-table-header.tsx

@@ -21,8 +21,11 @@ import {
   type Header,
   type Table as TanstackTable,
 } from '@tanstack/react-table'
+import type { KeyboardEvent, MouseEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { cn } from '@/lib/utils'
 
 import { DataTableColumnHeader } from './column-header'
 import { isContentSizedColumn } from './content-sized-columns'
@@ -43,6 +46,8 @@ export function DataTableHeader<TData>({
   rowClassName,
   getColumnClassName,
 }: DataTableHeaderProps<TData>) {
+  const { t } = useTranslation()
+
   return (
     <TableHeader className={className}>
       {table.getHeaderGroups().map((headerGroup) => (
@@ -51,10 +56,36 @@ export function DataTableHeader<TData>({
             <TableHead
               key={header.id}
               colSpan={header.colSpan}
-              className={getColumnClassName?.(header.column.id, 'header')}
+              data-column-id={header.column.id}
+              className={cn(
+                'relative',
+                getColumnClassName?.(header.column.id, 'header')
+              )}
               style={getHeaderSizeStyle(header, applyHeaderSize)}
             >
               {renderHeaderContent(header)}
+              {shouldRenderColumnResizer(table, header) && (
+                <div
+                  role='separator'
+                  aria-orientation='vertical'
+                  aria-label={t('Resize column')}
+                  data-column-resizer
+                  tabIndex={0}
+                  onDoubleClick={(event) =>
+                    handleColumnAutoSize(event, table, header)
+                  }
+                  onMouseDown={header.getResizeHandler()}
+                  onTouchStart={header.getResizeHandler()}
+                  onKeyDown={(event) =>
+                    handleColumnResizeKeyDown(event, table, header)
+                  }
+                  className={cn(
+                    'absolute top-0 right-0 h-full w-2 cursor-col-resize touch-none select-none',
+                    'after:bg-border hover:after:bg-primary after:absolute after:top-2 after:right-0 after:h-[calc(100%-1rem)] after:w-px after:transition-colors',
+                    header.column.getIsResizing() && 'after:bg-primary'
+                  )}
+                />
+              )}
             </TableHead>
           ))}
         </TableRow>
@@ -63,6 +94,161 @@ export function DataTableHeader<TData>({
   )
 }
 
+function handleColumnResizeKeyDown<TData>(
+  event: KeyboardEvent<HTMLDivElement>,
+  table: TanstackTable<TData>,
+  header: Header<TData, unknown>
+) {
+  const step = event.shiftKey ? 50 : 10
+
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault()
+    resizeColumnByKeyboard(table, header, -step)
+    return
+  }
+
+  if (event.key === 'ArrowRight') {
+    event.preventDefault()
+    resizeColumnByKeyboard(table, header, step)
+    return
+  }
+
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    autoSizeColumn(event.currentTarget, table, header)
+  }
+}
+
+function resizeColumnByKeyboard<TData>(
+  table: TanstackTable<TData>,
+  header: Header<TData, unknown>,
+  delta: number
+) {
+  table.setColumnSizing((previous) => ({
+    ...previous,
+    [header.column.id]: getClampedColumnSize(
+      header,
+      header.column.getSize() + delta
+    ),
+  }))
+}
+
+function handleColumnAutoSize<TData>(
+  event: MouseEvent<HTMLDivElement>,
+  table: TanstackTable<TData>,
+  header: Header<TData, unknown>
+) {
+  event.preventDefault()
+  autoSizeColumn(event.currentTarget, table, header)
+}
+
+function autoSizeColumn<TData>(
+  resizerElement: HTMLElement,
+  table: TanstackTable<TData>,
+  header: Header<TData, unknown>
+) {
+  const measuredSize = measureColumnContentWidth(
+    resizerElement,
+    header.column.id
+  )
+
+  if (measuredSize === undefined) {
+    return
+  }
+
+  table.setColumnSizing((previous) => ({
+    ...previous,
+    [header.column.id]: getClampedColumnSize(header, measuredSize),
+  }))
+}
+
+function getClampedColumnSize<TData>(
+  header: Header<TData, unknown>,
+  nextSize: number
+) {
+  const { minSize, maxSize } = header.column.columnDef
+
+  if (typeof minSize === 'number' && nextSize < minSize) {
+    return minSize
+  }
+
+  if (typeof maxSize === 'number' && nextSize > maxSize) {
+    return maxSize
+  }
+
+  return nextSize
+}
+
+function measureColumnContentWidth(
+  resizerElement: HTMLElement,
+  columnId: string
+) {
+  const tableElement = resizerElement.closest('table')
+  if (!tableElement) {
+    return undefined
+  }
+
+  const cells = tableElement.querySelectorAll<HTMLElement>(
+    getColumnElementSelector(columnId)
+  )
+  if (cells.length === 0) {
+    return undefined
+  }
+
+  const measuredWidth = [...cells].reduce(
+    (maxWidth, cell) => Math.max(maxWidth, measureElementWidth(cell)),
+    0
+  )
+
+  return measuredWidth > 0 ? Math.ceil(measuredWidth) : undefined
+}
+
+function measureElementWidth(element: HTMLElement) {
+  const clone = element.cloneNode(true) as HTMLElement
+
+  clone.querySelectorAll('[data-column-resizer]').forEach((resizer) => {
+    resizer.remove()
+  })
+
+  clone.style.position = 'absolute'
+  clone.style.visibility = 'hidden'
+  clone.style.pointerEvents = 'none'
+  clone.style.left = '-10000px'
+  clone.style.top = '0'
+  clone.style.width = 'max-content'
+  clone.style.minWidth = '0'
+  clone.style.maxWidth = 'none'
+  clone.style.height = 'auto'
+  clone.style.whiteSpace = 'nowrap'
+
+  document.body.append(clone)
+  const width = clone.scrollWidth
+  clone.remove()
+
+  return width
+}
+
+function getColumnElementSelector(columnId: string) {
+  const escapedColumnId =
+    typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+      ? CSS.escape(columnId)
+      : columnId.replaceAll('\\', '\\\\').replaceAll('"', '\\"')
+
+  return `[data-column-id="${escapedColumnId}"]`
+}
+
+function shouldRenderColumnResizer<TData>(
+  table: TanstackTable<TData>,
+  header: Header<TData, unknown>
+) {
+  return (
+    table.options.enableColumnResizing === true &&
+    !header.isPlaceholder &&
+    header.column.getCanResize() &&
+    !isContentSizedColumn(header.column.id)
+  )
+}
+
 function getHeaderSizeStyle<TData>(
   header: Header<TData, unknown>,
   applyHeaderSize: boolean | undefined

web/default/src/components/data-table/core/data-table-row.tsx

@@ -65,6 +65,7 @@ function DataTableRowInner<TData>({
         return (
           <TableCell
             key={cell.id}
+            data-column-id={cell.column.id}
             className={cn(
               'max-w-full min-w-0',
               renderedCell.isPrimitive && 'overflow-hidden',