style: 优化文件属性页面显示 (#6104)

Refs https://github.com/1Panel-dev/1Panel/issues/5855
This commit is contained in:
zhengkunwang 2024-08-12 18:02:53 +08:00 committed by GitHub
parent d561c86c68
commit a6af97e3c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -3,13 +3,21 @@
<template #header>
<DrawerHeader :header="$t('file.info')" :back="handleClose" />
</template>
<el-row>
<el-col>
<el-descriptions :column="1" border>
<el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.size')">
<el-descriptions-item label-class-name="detail-label" :label="$t('file.fileName')">
{{ data.name }}
</el-descriptions-item>
<el-descriptions-item
label-class-name="detail-label"
:label="$t('commons.table.type')"
v-if="data.type != ''"
>
{{ data.type }}
</el-descriptions-item>
<el-descriptions-item class-name="detail-content" label-class-name="detail-label" :label="$t('file.path')">
{{ data.path }}
</el-descriptions-item>
<el-descriptions-item label-class-name="detail-label" :label="$t('file.size')">
<span v-if="data.isDir">
<el-button type="primary" link small @click="getDirSize(data)" :loading="loading">
<span v-if="data.dirSize == undefined">
@ -20,15 +28,19 @@
</span>
<span v-else>{{ computeSize(data.size) }}</span>
</el-descriptions-item>
<el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.updatedAt')">
<el-descriptions-item label-class-name="detail-label" :label="$t('file.role')">
{{ data.mode }}
</el-descriptions-item>
<el-descriptions-item label-class-name="detail-label" :label="$t('commons.table.user')">
{{ data.user }}
</el-descriptions-item>
<el-descriptions-item label-class-name="detail-label" :label="$t('file.group')">
{{ data.group }}
</el-descriptions-item>
<el-descriptions-item label-class-name="detail-label" :label="$t('commons.table.updatedAt')">
{{ dateFormatSimple(data.modTime) }}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</el-drawer>
</template>
@ -80,3 +92,14 @@ defineExpose({
acceptParams,
});
</script>
<style scoped>
:deep(.detail-label) {
min-width: 100px !important;
}
:deep(.detail-content) {
max-width: 295px;
word-break: break-all;
word-wrap: break-word;
}
</style>