fix: 表格可点击列超长样式优化

frontend/components.d.ts

@@ -64,6 +64,7 @@ declare module 'vue' {
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColmn: typeof import('element-plus/es')['ElTableColmn']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
@@ -87,6 +88,7 @@ declare module 'vue' {
     SvgIcon: typeof import('./src/components/svg-icon/svg-icon.vue')['default']
     SystemUpgrade: typeof import('./src/components/system-upgrade/index.vue')['default']
     TableSetting: typeof import('./src/components/table-setting/index.vue')['default']
+    Tooltip: typeof import('./src/components/tooltip/index.vue')['default']
     Upload: typeof import('./src/components/upload/index.vue')['default']
     VCharts: typeof import('./src/components/v-charts/index.vue')['default']
   }

frontend/src/components/tooltip/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="tooltip-container">
+        <el-tooltip :disabled="showTooltip">
+            <template #content>
+                <div :style="{ width: tootipWidth, 'word-break': 'break-all' }">{{ text }}</div>
+            </template>
+            <p ref="tooltipBox" class="text-box">
+                <span v-if="islink" ref="tooltipItem" class="table-link">{{ text }}</span>
+                <span v-else ref="tooltipItem" class="">{{ text }}</span>
+            </p>
+        </el-tooltip>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+const showTooltip = ref();
+const tooltipBox = ref();
+const tooltipItem = ref();
+
+const tootipWidth = ref();
+
+defineProps({
+    text: {
+        type: String,
+        default: '',
+    },
+    islink: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+onMounted(() => {
+    const boxWidth = tooltipBox.value.offsetWidth;
+    const itemWidth = tooltipItem.value.offsetWidth;
+    tootipWidth.value = itemWidth > 250 ? '250px' : itemWidth + 'px';
+    showTooltip.value = boxWidth > itemWidth;
+});
+</script>
+<style scoped lang="scss">
+.tooltip-container {
+    width: 100%;
+    .text-box {
+        margin: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+</style>

frontend/src/views/container/compose/detail/index.vue

@@ -69,15 +69,9 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column
+                    <el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix>
-                        :label="$t('commons.table.name')"
-                        show-overflow-tooltip
-                        min-width="100"
-                        prop="name"
-                        fix
-                    >
                         <template #default="{ row }">
-                            <el-link @click="onInspect(row.containerID)" type="primary">{{ row.name }}</el-link>
+                            <Tooltip @click="onInspect(row.containerID)" :text="row.name" />
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -120,6 +114,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
+import Tooltip from '@/components/tooltip/index.vue';
 import LayoutContent from '@/layout/layout-content.vue';
 import CreateDialog from '@/views/container/container/create/index.vue';
 import MonitorDialog from '@/views/container/container/monitor/index.vue';

frontend/src/views/container/compose/index.vue

@@ -47,15 +47,9 @@
                     :data="data"
                     @search="search"
                 >
-                    <el-table-column
+                    <el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix>
-                        :label="$t('commons.table.name')"
-                        show-overflow-tooltip
-                        min-width="100"
-                        prop="name"
-                        fix
-                    >
                         <template #default="{ row }">
-                            <el-link @click="loadDetail(row)" type="primary">{{ row.name }}</el-link>
+                            <Tooltip @click="loadDetail(row)" :text="row.name" />
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('container.from')" prop="createdBy" min-width="80" fix>
@@ -89,6 +83,7 @@
 </template>
 
 <script lang="ts" setup>
+import Tooltip from '@/components/tooltip/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import { reactive, onMounted, ref } from 'vue';

frontend/src/views/container/container/index.vue

@@ -66,15 +66,9 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column
+                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
-                        :label="$t('commons.table.name')"
-                        show-overflow-tooltip
-                        min-width="80"
-                        prop="name"
-                        fix
-                    >
                         <template #default="{ row }">
-                            <el-link @click="onInspect(row.containerID)" type="primary">{{ row.name }}</el-link>
+                            <Tooltip @click="onInspect(row.containerID)" :text="row.name" />
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -118,6 +112,7 @@
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import ReNameDialog from '@/views/container/container/rename/index.vue';

frontend/src/views/container/image/index.vue

@@ -40,7 +40,11 @@
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                    <el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
+                    <el-table-column label="ID" prop="id" min-width="60">
+                        <template #default="{ row }">
+                            <Tooltip :islink="false" :text="row.id" />
+                        </template>
+                    </el-table-column>
                     <el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
                         <template #default="{ row }">
                             <el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
@@ -76,6 +80,7 @@
 </template>
 
 <script lang="ts" setup>
+import Tooltip from '@/components/tooltip/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import { reactive, onMounted, ref } from 'vue';

frontend/src/views/container/network/index.vue

@@ -47,16 +47,14 @@
                     @search="search"
                 >
                     <el-table-column type="selection" :selectable="selectable" fix />
-                    <el-table-column
+                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
-                        :label="$t('commons.table.name')"
-                        show-overflow-tooltip
-                        min-width="80"
-                        prop="name"
-                        fix
-                    >
                         <template #default="{ row }">
-                            <el-link @click="onInspect(row.id)" type="primary">{{ row.name }}</el-link>
+                            <Tooltip @click="onInspect(row.id)" :text="row.name" />
-                            <el-tag effect="dark" round v-if="row.isSystem" style="margin-left: 5px">system</el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column min-width="50">
+                        <template #default="{ row }">
+                            <el-tag effect="dark" round v-if="row.isSystem">system</el-tag>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -99,6 +97,7 @@
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import CreateDialog from '@/views/container/network/create/index.vue';

frontend/src/views/container/template/index.vue

@@ -47,15 +47,9 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column
+                    <el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix>
-                        :label="$t('commons.table.name')"
-                        show-overflow-tooltip
-                        min-width="100"
-                        prop="name"
-                        fix
-                    >
                         <template #default="{ row }">
-                            <el-link @click="onOpenDetail(row)" type="primary">{{ row.name }}</el-link>
+                            <Tooltip @click="onOpenDetail(row)" :text="row.name" />
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('container.description')" prop="description" min-width="200" fix />
@@ -75,6 +69,7 @@
 </template>
 
 <script lang="ts" setup>
+import Tooltip from '@/components/tooltip/index.vue';
 import LayoutContent from '@/layout/layout-content.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';

frontend/src/views/container/volume/index.vue

@@ -45,17 +45,7 @@
                     <el-table-column type="selection" fix />
                     <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
                         <template #default="{ row }">
-                            <el-tooltip v-if="row.name.length > 20" effect="dark" placement="bottom">
+                            <Tooltip @click="onInspect(row.name)" :text="row.name" />
-                                <template #content>
-                                    <div style="width: 300px; word-break: break-all">{{ row.name }}</div>
-                                </template>
-                                <el-link @click="onInspect(row.name)" type="primary">
-                                    {{ row.name.substring(0, 20) }}...
-                                </el-link>
-                            </el-tooltip>
-                            <el-link v-else @click="onInspect(row.name)" type="primary">
-                                {{ row.name }}
-                            </el-link>
                         </template>
                     </el-table-column>
                     <el-table-column
@@ -88,6 +78,7 @@
 
 <script lang="ts" setup>
 import LayoutContent from '@/layout/layout-content.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import CreateDialog from '@/views/container/volume/create/index.vue';

frontend/src/views/cronjob/index.vue

@@ -45,17 +45,7 @@
                     <el-table-column type="selection" fix />
                     <el-table-column :label="$t('cronjob.taskName')" :min-width="120" prop="name">
                         <template #default="{ row }">
-                            <el-tooltip effect="dark" v-if="row.name.length > 12" placement="top">
+                            <Tooltip @click="loadDetail(row)" :text="row.name" />
-                                <template #content>
-                                    <div style="width: 300px; word-break: break-all">{{ row.name }}</div>
-                                </template>
-                                <el-link @click="loadDetail(row)" type="primary">
-                                    {{ row.name.substring(0, 15) }}...
-                                </el-link>
-                            </el-tooltip>
-                            <el-link v-else @click="loadDetail(row)" type="primary">
-                                {{ row.name }}
-                            </el-link>
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.status')" :min-width="80" prop="status">
@@ -136,6 +126,7 @@
 <script lang="ts" setup>
 import ComplexTable from '@/components/complex-table/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
+import Tooltip from '@/components/tooltip/index.vue';
 import OperatrDialog from '@/views/cronjob/operate/index.vue';
 import Records from '@/views/cronjob/record/index.vue';
 import LayoutContent from '@/layout/layout-content.vue';

frontend/src/views/cronjob/record/index.vue

@@ -4,7 +4,7 @@
             <el-card>
                 <div>
                     <el-tag style="float: left" effect="dark" type="success">
-                        {{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
+                        {{ $t('cronjob.' + dialogData.rowData.type) }}
                     </el-tag>
                     <el-tag v-if="dialogData.rowData.status === 'Enable'" round class="status-content" type="success">
                         {{ $t('commons.status.running') }}

frontend/src/views/website/website/index.vue

@@ -66,18 +66,14 @@
                     @search="search()"
                     :class="{ mask: nginxStatus != 'Running' }"
                 >
-                    <el-table-column
+                    <el-table-column width="30px">
-                        :label="$t('commons.table.name')"
-                        fix
-                        show-overflow-tooltip
-                        prop="primaryDomain"
-                        min-width="120px"
-                    >
                         <template #default="{ row }">
                             <el-button link :icon="Promotion" @click="openUrl(row)"></el-button>
-                            <span class="table-link" style="margin-left: 10px" @click="openConfig(row.id)">
+                        </template>
-                                {{ row.primaryDomain }}
+                    </el-table-column>
-                            </span>
+                    <el-table-column :label="$t('commons.table.name')" fix prop="primaryDomain" min-width="120px">
+                        <template #default="{ row }">
+                            <Tooltip @click="openConfig(row.id)" :text="row.primaryDomain" />
                         </template>
                     </el-table-column>
                     <el-table-column :label="$t('commons.table.type')" fix show-overflow-tooltip prop="type">
@@ -162,6 +158,7 @@
 </template>
 
 <script lang="ts" setup>
+import Tooltip from '@/components/tooltip/index.vue';
 import LayoutContent from '@/layout/layout-content.vue';
 import RouterButton from '@/components/router-button/index.vue';
 import Backups from '@/components/backup/index.vue';