fix: optimize table overflow and action widths

src/shared/components/DataTable.vue

@@ -10,6 +10,9 @@ export interface DataTableColumn {
   hideable?: boolean
   movable?: boolean
   defaultVisible?: boolean
+  singleLine?: boolean
+  showOverflowTooltip?: boolean
+  className?: string
   [attribute: string]: unknown
 }
 
@@ -241,7 +244,7 @@ watch([page, pageCount], ([value, count]) => {
   if (value !== nextValue) page.value = nextValue
 }, { immediate: true })
 
-function columnAttrs({ key, slotName, headerSlotName, hideable, movable, defaultVisible, ...attrs }: DataTableColumn) {
+function columnAttrs({ key, slotName, headerSlotName, hideable, movable, defaultVisible, singleLine, ...attrs }: DataTableColumn) {
   const hasDataProperty = attrs.prop !== undefined || attrs.property !== undefined
   const isSpecialColumn = slotName || ['selection', 'expand', 'index'].includes(String(attrs.type || ''))
   if (hasDataProperty || isSpecialColumn || key === undefined || key === null || key === '') return attrs
@@ -257,6 +260,22 @@ function columnAttrs({ key, slotName, headerSlotName, hideable, movable, default
   }
 }
 
+function singleLineColumn(column: DataTableColumn) {
+  return column.singleLine !== false && !systemColumn(column)
+}
+
+function columnOverflowTooltip(column: DataTableColumn) {
+  return singleLineColumn(column) ? column.showOverflowTooltip ?? true : column.showOverflowTooltip
+}
+
+function columnClassName(column: DataTableColumn) {
+  return [
+    column.className,
+    systemColumn(column) ? 'data-table__system-cell' : '',
+    singleLineColumn(column) ? 'data-table__single-line-cell' : '',
+  ].filter(Boolean).join(' ')
+}
+
 function columnRenderKey(column: DataTableColumn, index: number) {
   return String(column.key ?? column.columnKey ?? column.prop ?? column.property ?? index)
 }
@@ -309,6 +328,8 @@ function setPage(value: number) {
         v-for="(column, index) in visibleColumns"
         :key="columnRenderKey(column, index)"
         v-bind="columnAttrs(column)"
+        :class-name="columnClassName(column)"
+        :show-overflow-tooltip="columnOverflowTooltip(column)"
       >
         <template v-if="hasSlot(column.headerSlotName)" #header="scope">
           <slot :name="column.headerSlotName" v-bind="scope" />
@@ -379,6 +400,10 @@ function setPage(value: number) {
 .data-table__page-buttons { gap: 4px; }
 .data-table__page-button { width: 32px; min-width: 32px; height: 32px; padding: 0; margin-left: 0; font-size: var(--cc-list-page-button-font-size); }
 .data-table__page-ellipsis { display: inline-flex; width: 24px; height: 32px; align-items: center; justify-content: center; }
+.data-table :deep(.data-table__single-line-cell .cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.data-table :deep(.data-table__system-cell .cell) { white-space: nowrap; }
+.data-table :deep(.data-table__system-cell .el-button + .el-button),
+.data-table :deep(.data-table__system-cell .el-button + .el-dropdown) { margin-left: 8px; }
 
 @media (min-width: 1920px) {
   .data-table__toolbar { min-height: 64px; gap: 12px; padding: 10px 14px; }