1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-09-20 07:35:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
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
1 changed files with 48 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/views/host/file-management/detail/index.vue
View file

@ -3,32 +3,44 @@
<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')">
<span v-if="data.isDir">
<el-button type="primary" link small @click="getDirSize(data)" :loading="loading">
<span v-if="data.dirSize == undefined">
{{ $t('file.calculate') }}
</span>
<span v-else>{{ computeSize(data.dirSize) }}</span>
</el-button>
<el-descriptions :column="1" border>
<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">
{{ $t('file.calculate') }}
</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')">
{{ dateFormatSimple(data.modTime) }}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<span v-else>{{ computeSize(data.dirSize) }}</span>
</el-button>
</span>
<span v-else>{{ computeSize(data.size) }}</span>
</el-descriptions-item>
<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-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>