Merge pull request Project-HAMi#63 from Shenhan11/fix/text-overflow

fix(web): improve table column width and text overflow handling

Author: Nimbus318

packages/web/projects/vgpu/views/card/admin/index.vue

@@ -92,6 +92,7 @@ const columns = [
   {
     title: '算力(已分配/总量)',
     dataIndex: 'used',
+    minWidth: 100,
     render: ({ coreTotal, coreUsed, isExternal }) => (
         <span>
       {isExternal ? '--' : coreUsed}/{coreTotal}
@@ -101,6 +102,7 @@ const columns = [
   {
     title: '显存(已分配/总量)',
     dataIndex: 'w',
+    minWidth: 100,
     render: ({ memoryTotal, memoryUsed, isExternal }) => (
         <span>
       {isExternal ? '--' : roundToDecimal(memoryUsed / 1024, 1)}/

packages/web/projects/vgpu/views/node/admin/index.vue

@@ -103,6 +103,7 @@ const columns = [
   {
     title: '算力(已分配/总量)',
     dataIndex: 'used',
+    minWidth: 100,
     render: ({ coreTotal, coreUsed, isExternal }) => (
         <span>
       {isExternal ? '--' : coreUsed}/{coreTotal}
@@ -112,6 +113,7 @@ const columns = [
   {
     title: '显存(已分配/总量)',
     dataIndex: 'w',
+    minWidth: 100,
     render: ({ memoryTotal, memoryUsed, isExternal }) => (
         <span>
       {isExternal ? '--' : roundToDecimal(memoryUsed / 1024, 1)}/

packages/web/src/components/TablePlus/index.vue

@@ -67,6 +67,7 @@
               dataIndex,
               render,
               width,
+              minWidth,
               fixed,
               sort,
               filters,
@@ -79,6 +80,7 @@
             :label="title"
             :formatter="render"
             :width="width"
+            :min-width="minWidth"
             :fixed="fixed"
             :sortable="sort && 'custom'"
             :filters="isFunction(filters) ? filters(state.list) : filters"
@@ -94,7 +96,7 @@
 
           <el-table-column
             fixed="right"
-            :min-width="180"
+            :min-width="120"
             label="操作"
             v-if="rowAction.length"
           >

packages/web/src/components/TextPlus.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text-plus">
-    <span :class="{ link: !!to }" @click="handleClick"> {{ text }}</span>
+    <span :class="{ link: !!to }" @click="handleClick">{{ text }}</span>
     <div v-if="copy && text" class="copy-ico" @click="handleCopy">
       <svg-icon icon="copy" />
     </div>
@@ -42,6 +42,13 @@ const handleClick = () => {
   display: inline-flex;
   gap: 10px;
   // width: 100%;
+  max-width: 100%;
+  
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
   .link {
     color: var(--el-color-primary);
     cursor: pointer;