fix: normalize client table presentation

src/components/common/DataTable.vue

@@ -7,6 +7,9 @@ export interface DataTableColumn {
   columnKey?: string
   slotName?: string
   headerSlotName?: string
+  singleLine?: boolean
+  showOverflowTooltip?: boolean
+  className?: string
   [attribute: string]: unknown
 }
 
@@ -88,10 +91,34 @@ watch([page, pageCount], ([value, count]) => {
   if (value !== nextValue) page.value = nextValue
 }, { immediate: true })
 
-function columnAttrs({ key, slotName, headerSlotName, ...attrs }: DataTableColumn) {
+function columnAttrs({ key, slotName, headerSlotName, singleLine, ...attrs }: DataTableColumn) {
   return attrs
 }
 
+function systemColumn(column: DataTableColumn) {
+  return column.type === 'selection'
+    || column.type === 'index'
+    || column.type === 'expand'
+    || column.slotName === 'actions'
+    || column.label === '操作'
+}
+
+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)
 }
@@ -119,6 +146,8 @@ function setPage(value: number) {
         v-for="(column, index) in columns"
         :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" />
@@ -168,6 +197,9 @@ function setPage(value: number) {
 
 <style scoped>
 .data-table { min-width: 0; }
+.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; }
 .data-table__pagination { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
 .data-table__pagination-left { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; }
 .data-table__pagination-controls, .data-table__page-size, .data-table__page-buttons { display: flex; align-items: center; gap: 8px; }