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

* 支持渠道表格列宽拖拽

* fix(web): address column resize review feedback

* feat(web): auto-fit resized table columns

* fix(web): reduce column resize persistence work

---------

Signed-off-by: zuiho <2324465096@qq.com>

web/default/src/features/channels/components/channels-columns.tsx

@@ -560,6 +560,7 @@ export function useChannelsColumns(
               },
               enableSorting: false,
               enableHiding: false,
+              enableResizing: false,
               size: 40,
             } satisfies ColumnDef<Channel>,
           ]
@@ -624,13 +625,13 @@ export function useChannelsColumns(
           const hasParamOverride = Boolean(channel.param_override?.trim())
 
           return (
-            <div className='flex items-center gap-2'>
-              <div className='flex flex-col gap-1'>
-                <div className='flex items-center gap-1.5'>
+            <div className='flex max-w-full min-w-0 items-center gap-2'>
+              <div className='flex max-w-full min-w-0 flex-col gap-1'>
+                <div className='flex max-w-full min-w-0 items-center gap-1.5'>
                   <TruncatedText
                     text={sensitiveVisible ? name : SENSITIVE_MASK}
                     className='font-medium'
-                    maxWidth='max-w-[180px]'
+                    maxWidth='max-w-full'
                   />
                   {isPassThrough && (
                     <TooltipProvider delay={100}>
@@ -684,6 +685,7 @@ export function useChannelsColumns(
             </div>
           )
         },
+        size: 260,
         minSize: 200,
       },
 

web/default/src/features/channels/components/channels-table.tsx

@@ -67,6 +67,7 @@ import { DataTableBulkActions } from './data-table-bulk-actions'
 
 const route = getRouteApi('/_authenticated/channels/')
 const CHANNELS_COLUMN_VISIBILITY_STORAGE_KEY = 'channels:column-visibility'
+const CHANNELS_COLUMN_SIZING_STORAGE_KEY = 'channels:column-sizing'
 const CHANNELS_VIEW_MODE_STORAGE_KEY = 'channels:view-mode'
 const CHANNELS_STATUS_FILTER_STORAGE_KEY = 'channel-status-filter'
 
@@ -316,6 +317,9 @@ export function ChannelsTable() {
       tag: false,
     },
     columnVisibilityStorageKey: CHANNELS_COLUMN_VISIBILITY_STORAGE_KEY,
+    columnSizingStorageKey: isMobile
+      ? false
+      : CHANNELS_COLUMN_SIZING_STORAGE_KEY,
     columnFilters,
     pagination,
     globalFilter,
@@ -331,6 +335,7 @@ export function ChannelsTable() {
     manualSorting: true,
     manualFiltering: true,
     withExpandedRowModel: true,
+    enableColumnResizing: !isMobile,
     ensurePageInRange,
   })