gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-13 17:24:44 +08:00
Code

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

Browse Source
This commit is contained in:
ssongliu 2023-03-16 19:19:07 +08:00 committed by f2c-ci-robot[bot]
parent 59b025353f
commit af753bdffe
12 changed files with 92 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components.d.ts vendored
View File

@ -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']
}

52
frontend/src/components/tooltip/index.vue Normal file
View File

@ -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>

11
frontend/src/views/container/compose/detail/index.vue
View File

@ -69,15 +69,9 @@
@search="search"
>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
>
<el-table-column :label="$t('commons.table.name')" 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';

11
frontend/src/views/container/compose/index.vue
View File

@ -47,15 +47,9 @@
:data="data"
@search="search"
>
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
>
<el-table-column :label="$t('commons.table.name')" 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';

11
frontend/src/views/container/container/index.vue
View File

@ -66,15 +66,9 @@
@search="search"
>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="80"
prop="name"
fix
>
<el-table-column :label="$t('commons.table.name')" 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';

7
frontend/src/views/container/image/index.vue
View File

@ -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';

17
frontend/src/views/container/network/index.vue
View File

@ -47,16 +47,14 @@
@search="search"
>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="80"
prop="name"
fix
>
<el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
<template #default="{ row }">
<el-link @click="onInspect(row.id)" type="primary">{{ row.name }}</el-link>
<el-tag effect="dark" round v-if="row.isSystem" style="margin-left: 5px">system</el-tag>
<Tooltip @click="onInspect(row.id)" :text="row.name" />
</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';

11
frontend/src/views/container/template/index.vue
View File

@ -47,15 +47,9 @@
@search="search"
>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
>
<el-table-column :label="$t('commons.table.name')" 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';

13
frontend/src/views/container/volume/index.vue
View File

@ -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">
<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>
<Tooltip @click="onInspect(row.name)" :text="row.name" />
</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';

13
frontend/src/views/cronjob/index.vue
View File

@ -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">
<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>
<Tooltip @click="loadDetail(row)" :text="row.name" />
</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';

2
frontend/src/views/cronjob/record/index.vue
View File

@ -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') }}

17
frontend/src/views/website/website/index.vue
View File

@ -66,18 +66,14 @@
@search="search()"
:class="{ mask: nginxStatus != 'Running' }"
>
<el-table-column
:label="$t('commons.table.name')"
fix
show-overflow-tooltip
prop="primaryDomain"
min-width="120px"
>
<el-table-column width="30px">
<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)">
{{ row.primaryDomain }}
</span>
</template>
</el-table-column>
<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';