From 3b38b9d86bde8a4e9a562baa0f5fa11e5afbdf16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Tue, 17 Dec 2024 20:46:11 +0800
Subject: [PATCH] feat: Optimize style and description (#7393)

---
 .../src/views/login/components/login-form.vue |   7 +-
 frontend/src/views/setting/panel/index.vue    |   2 +-
 frontend/src/views/toolbox/clean/index.vue    | 366 ++++++++++++------
 3 files changed, 249 insertions(+), 126 deletions(-)

diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 3a2d7e2e1..a7a3d5862 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -52,9 +52,14 @@
                                 </span>
                                 <template #dropdown>
                                     <el-dropdown-menu>
+                                        <el-dropdown-item v-if="globalStore.isIntl" command="en">
+                                            English
+                                        </el-dropdown-item>
                                         <el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
                                         <el-dropdown-item command="tw">中文(繁體)</el-dropdown-item>
-                                        <el-dropdown-item command="en">English</el-dropdown-item>
+                                        <el-dropdown-item v-if="!globalStore.isIntl" command="en">
+                                            English
+                                        </el-dropdown-item>
                                     </el-dropdown-menu>
                                 </template>
                             </el-dropdown>
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index 0a5ce9a79..2d7d8b601 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('setting.panel')" :divider="true">
             <template #main>
-                <el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="150px">
+                <el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="auto">
                     <el-row>
                         <el-col :span="1"><br /></el-col>
                         <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
diff --git a/frontend/src/views/toolbox/clean/index.vue b/frontend/src/views/toolbox/clean/index.vue
index 06f76f447..ae04a35e2 100644
--- a/frontend/src/views/toolbox/clean/index.vue
+++ b/frontend/src/views/toolbox/clean/index.vue
@@ -137,14 +137,16 @@
                             </div>
                         </div>
                         <div v-if="scanStatus === 'scanned'">
-                            <div>
-                                <el-text class="clean_title">
-                                    {{ $t('clean.totalScan') }} {{ computeSize(totalSize) }}
-                                </el-text>
-                                <div class="mt-4">
-                                    <el-text type="info">
-                                        {{ $t('clean.selectScan') }} {{ computeSize(selectSize) }}
+                            <div class="flex flex-row justify-between items-center gap-2">
+                                <div>
+                                    <el-text class="clean_title">
+                                        {{ $t('clean.totalScan') }} {{ computeSize(totalSize) }}
                                     </el-text>
+                                    <div class="mt-4">
+                                        <el-text type="info">
+                                            {{ $t('clean.selectScan') }} {{ computeSize(selectSize) }}
+                                        </el-text>
+                                    </div>
                                 </div>
                                 <div class="large_button">
                                     <el-button type="primary" size="large" @click="onSubmitClean">
@@ -152,124 +154,191 @@
                                     </el-button>
                                 </div>
                             </div>
-                            <el-collapse v-model="activeNames" class="mt-5">
-                                <el-collapse-item :title="$t('clean.system')" name="system">
-                                    <el-tree
-                                        ref="systemRef"
-                                        :data="cleanData.systemClean"
-                                        node-key="id"
-                                        :default-checked-keys="systemDefaultCheck"
-                                        show-checkbox
-                                        :props="defaultProps"
-                                        @check-change="onChange"
-                                    >
-                                        <template #default="{ node, data }">
-                                            <div class="float-left">
-                                                <span>{{ load18n(data.label) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span v-if="data.size">{{ computeSize(data.size) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span>{{ loadTag(node, data) }}</span>
-                                            </div>
-                                        </template>
-                                    </el-tree>
-                                </el-collapse-item>
+                            <div class="tree-container">
+                                <el-collapse v-model="activeNames" class="tree-collapse">
+                                    <el-collapse-item :title="$t('clean.system')" name="system">
+                                        <el-tree
+                                            ref="systemRef"
+                                            :data="cleanData.systemClean"
+                                            node-key="id"
+                                            :default-checked-keys="systemDefaultCheck"
+                                            show-checkbox
+                                            :props="defaultProps"
+                                            @check-change="onChange"
+                                            class="responsive-tree"
+                                        >
+                                            <template #default="{ node, data }">
+                                                <div class="tree-node">
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="load18n(data.label)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-label">{{ load18n(data.label) }}</span>
+                                                    </el-tooltip>
+                                                    <span class="tree-node-size" v-if="data.size">
+                                                        {{ computeSize(data.size) }}
+                                                    </span>
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="loadTag(node, data)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-tooltip">
+                                                            {{ loadTag(node, data) }}
+                                                        </span>
+                                                    </el-tooltip>
+                                                </div>
+                                            </template>
+                                        </el-tree>
+                                    </el-collapse-item>
 
-                                <el-collapse-item :title="$t('clean.containerTrash')" name="container_trash">
-                                    <el-tree
-                                        ref="containerRef"
-                                        :data="cleanData.containerClean"
-                                        node-key="id"
-                                        :default-checked-keys="containerDefaultCheck"
-                                        show-checkbox
-                                        :props="defaultProps"
-                                        @check-change="onChange"
-                                    >
-                                        <template #default="{ node, data }">
-                                            <div class="float-left">
-                                                <span>{{ load18n(data.label) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span v-if="data.size">{{ computeSize(data.size) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span>{{ loadTag(node, data) }}</span>
-                                            </div>
-                                        </template>
-                                    </el-tree>
-                                </el-collapse-item>
-                                <el-collapse-item :title="$t('clean.upload')" name="upload">
-                                    <el-tree
-                                        ref="uploadRef"
-                                        :data="cleanData.uploadClean"
-                                        node-key="id"
-                                        :default-checked-keys="uploadDefaultCheck"
-                                        show-checkbox
-                                        :props="defaultProps"
-                                        @check-change="onChange"
-                                    >
-                                        <template #default="{ node, data }">
-                                            <div class="float-left">
-                                                <span>{{ load18n(data.label) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span v-if="data.size">{{ computeSize(data.size) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span>{{ loadTag(node, data) }}</span>
-                                            </div>
-                                        </template>
-                                    </el-tree>
-                                </el-collapse-item>
-                                <el-collapse-item :title="$t('clean.download')" name="download">
-                                    <el-tree
-                                        ref="downloadRef"
-                                        :data="cleanData.downloadClean"
-                                        node-key="id"
-                                        :default-checked-keys="downloadDefaultCheck"
-                                        show-checkbox
-                                        :props="defaultProps"
-                                        @check-change="onChange"
-                                    >
-                                        <template #default="{ node, data }">
-                                            <div class="float-left">
-                                                <span>{{ load18n(data.label) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span v-if="data.size">{{ computeSize(data.size) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span>{{ loadTag(node, data) }}</span>
-                                            </div>
-                                        </template>
-                                    </el-tree>
-                                </el-collapse-item>
-                                <el-collapse-item :title="$t('clean.systemLog')" name="system_log">
-                                    <el-tree
-                                        ref="systemLogRef"
-                                        :data="cleanData.systemLogClean"
-                                        node-key="id"
-                                        :default-checked-keys="systemLogDefaultCheck"
-                                        show-checkbox
-                                        :props="defaultProps"
-                                        @check-change="onChange"
-                                    >
-                                        <template #default="{ node, data }">
-                                            <div class="float-left">
-                                                <span>{{ load18n(data.label) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span v-if="data.size">{{ computeSize(data.size) }}</span>
-                                            </div>
-                                            <div class="ml-4 float-left">
-                                                <span>{{ loadTag(node, data) }}</span>
-                                            </div>
-                                        </template>
-                                    </el-tree>
-                                </el-collapse-item>
-                            </el-collapse>
+                                    <el-collapse-item :title="$t('clean.containerTrash')" name="container_trash">
+                                        <el-tree
+                                            ref="containerRef"
+                                            :data="cleanData.containerClean"
+                                            node-key="id"
+                                            :default-checked-keys="containerDefaultCheck"
+                                            show-checkbox
+                                            :props="defaultProps"
+                                            @check-change="onChange"
+                                            class="responsive-tree"
+                                        >
+                                            <template #default="{ node, data }">
+                                                <div class="tree-node">
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="load18n(data.label)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-label">{{ load18n(data.label) }}</span>
+                                                    </el-tooltip>
+                                                    <span class="tree-node-size" v-if="data.size">
+                                                        {{ computeSize(data.size) }}
+                                                    </span>
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="loadTag(node, data)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-tooltip">
+                                                            {{ loadTag(node, data) }}
+                                                        </span>
+                                                    </el-tooltip>
+                                                </div>
+                                            </template>
+                                        </el-tree>
+                                    </el-collapse-item>
+                                    <el-collapse-item :title="$t('clean.upload')" name="upload">
+                                        <el-tree
+                                            ref="uploadRef"
+                                            :data="cleanData.uploadClean"
+                                            node-key="id"
+                                            :default-checked-keys="uploadDefaultCheck"
+                                            show-checkbox
+                                            :props="defaultProps"
+                                            @check-change="onChange"
+                                            class="responsive-tree"
+                                        >
+                                            <template #default="{ node, data }">
+                                                <div class="tree-node">
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="load18n(data.label)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-label">{{ load18n(data.label) }}</span>
+                                                    </el-tooltip>
+                                                    <span class="tree-node-size" v-if="data.size">
+                                                        {{ computeSize(data.size) }}
+                                                    </span>
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="loadTag(node, data)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-tooltip">
+                                                            {{ loadTag(node, data) }}
+                                                        </span>
+                                                    </el-tooltip>
+                                                </div>
+                                            </template>
+                                        </el-tree>
+                                    </el-collapse-item>
+                                    <el-collapse-item :title="$t('clean.download')" name="download">
+                                        <el-tree
+                                            ref="downloadRef"
+                                            :data="cleanData.downloadClean"
+                                            node-key="id"
+                                            :default-checked-keys="downloadDefaultCheck"
+                                            show-checkbox
+                                            :props="defaultProps"
+                                            @check-change="onChange"
+                                            class="responsive-tree"
+                                        >
+                                            <template #default="{ node, data }">
+                                                <div class="tree-node">
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="load18n(data.label)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-label">{{ load18n(data.label) }}</span>
+                                                    </el-tooltip>
+                                                    <span class="tree-node-size" v-if="data.size">
+                                                        {{ computeSize(data.size) }}
+                                                    </span>
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="loadTag(node, data)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-tooltip">
+                                                            {{ loadTag(node, data) }}
+                                                        </span>
+                                                    </el-tooltip>
+                                                </div>
+                                            </template>
+                                        </el-tree>
+                                    </el-collapse-item>
+                                    <el-collapse-item :title="$t('clean.systemLog')" name="system_log">
+                                        <el-tree
+                                            ref="systemLogRef"
+                                            :data="cleanData.systemLogClean"
+                                            node-key="id"
+                                            :default-checked-keys="systemLogDefaultCheck"
+                                            show-checkbox
+                                            :props="defaultProps"
+                                            @check-change="onChange"
+                                            class="responsive-tree"
+                                        >
+                                            <template #default="{ node, data }">
+                                                <div class="tree-node">
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="load18n(data.label)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-label">{{ load18n(data.label) }}</span>
+                                                    </el-tooltip>
+                                                    <span class="tree-node-size" v-if="data.size">
+                                                        {{ computeSize(data.size) }}
+                                                    </span>
+                                                    <el-tooltip
+                                                        effect="dark"
+                                                        :content="loadTag(node, data)"
+                                                        placement="top"
+                                                    >
+                                                        <span class="tree-node-tooltip">
+                                                            {{ loadTag(node, data) }}
+                                                        </span>
+                                                    </el-tooltip>
+                                                </div>
+                                            </template>
+                                        </el-tree>
+                                    </el-collapse-item>
+                                </el-collapse>
+                            </div>
                         </div>
                     </el-col>
                 </el-row>
@@ -642,4 +711,53 @@ onMounted(() => {
     float: right;
     margin-right: 15px;
 }
+
+.tree-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+}
+
+.tree-collapse {
+    flex: 1;
+    overflow: hidden;
+}
+
+.responsive-tree {
+    width: 100%;
+    max-height: 100%;
+    overflow: auto;
+}
+
+.tree-node {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 1rem;
+    width: 100%;
+    overflow: hidden;
+}
+
+.tree-node-label {
+    flex-shrink: 0;
+    max-width: 60%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.tree-node-size {
+    flex-shrink: 0;
+    max-width: 25%;
+    white-space: nowrap;
+}
+
+.tree-node-tooltip {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+}
 </style>