From a6af97e3c1903c9332a42e7191ac0c0299b563fa Mon Sep 17 00:00:00 2001
From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com>
Date: Mon, 12 Aug 2024 18:02:53 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=A1=B5=E9=9D=A2=E6=98=BE=E7=A4=BA=20(#6104?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs https://github.com/1Panel-dev/1Panel/issues/5855
---
 .../host/file-management/detail/index.vue     | 73 ++++++++++++-------
 1 file changed, 48 insertions(+), 25 deletions(-)

diff --git a/frontend/src/views/host/file-management/detail/index.vue b/frontend/src/views/host/file-management/detail/index.vue
index 1b61f8e0b..c0f693d52 100644
--- a/frontend/src/views/host/file-management/detail/index.vue
+++ b/frontend/src/views/host/file-management/detail/index.vue
@@ -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>