gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-02-08 01:20:07 +08:00
Code

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

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

@ -3,13 +3,21 @@
<template #header> <template #header>
<DrawerHeader :header="$t('file.info')" :back="handleClose" /> <DrawerHeader :header="$t('file.info')" :back="handleClose" />
</template> </template>
<el-row>
<el-col>
<el-descriptions :column="1" border> <el-descriptions :column="1" border>
<el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item> <el-descriptions-item label-class-name="detail-label" :label="$t('file.fileName')">
<el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item> {{ data.name }}
<el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :label="$t('file.size')"> <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"> <span v-if="data.isDir">
<el-button type="primary" link small @click="getDirSize(data)" :loading="loading"> <el-button type="primary" link small @click="getDirSize(data)" :loading="loading">
<span v-if="data.dirSize == undefined"> <span v-if="data.dirSize == undefined">
@ -20,15 +28,19 @@
</span> </span>
<span v-else>{{ computeSize(data.size) }}</span> <span v-else>{{ computeSize(data.size) }}</span>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item> <el-descriptions-item label-class-name="detail-label" :label="$t('file.role')">
<el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item> {{ data.mode }}
<el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.updatedAt')"> <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) }} {{ dateFormatSimple(data.modTime) }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-col>
</el-row>
</el-drawer> </el-drawer>
</template> </template>
@ -80,3 +92,14 @@ defineExpose({
acceptParams, acceptParams,
}); });
</script> </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>