From 00ffac7210028b334c802b98ece7114723ad57b7 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Mon, 4 Dec 2023 22:12:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=93=E5=AD=98=E6=B8=85=E7=90=86?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4=20(#3172?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/routers/modules/toolbox.ts       |  10 +
 frontend/src/views/setting/panel/index.vue    |  27 --
 .../panel => toolbox}/clean/index.vue         | 403 ++++++++----------
 frontend/src/views/toolbox/index.vue          |   4 +
 4 files changed, 202 insertions(+), 242 deletions(-)
 rename frontend/src/views/{setting/panel => toolbox}/clean/index.vue (50%)

diff --git a/frontend/src/routers/modules/toolbox.ts b/frontend/src/routers/modules/toolbox.ts
index 3d20830b1..25a78241f 100644
--- a/frontend/src/routers/modules/toolbox.ts
+++ b/frontend/src/routers/modules/toolbox.ts
@@ -47,6 +47,16 @@ const toolboxRouter = {
                         requiresAuth: false,
                     },
                 },
+                {
+                    path: 'clean',
+                    name: 'Clean',
+                    component: () => import('@/views/toolbox/clean/index.vue'),
+                    hidden: true,
+                    meta: {
+                        activeMenu: '/toolbox',
+                        requiresAuth: false,
+                    },
+                },
             ],
         },
     ],
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index 8580c1321..e9a783369 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -84,15 +84,6 @@
                                     </template>
                                 </el-input>
                             </el-form-item>
-                            <el-form-item :label="$t('setting.diskClean')">
-                                <el-input disabled v-model="form.lastCleanTime">
-                                    <template #append>
-                                        <el-button v-show="!show" @click="onClean" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
 
                             <el-form-item :label="$t('setting.systemIP')" prop="systemIP">
                                 <el-input disabled v-if="form.systemIP" v-model="form.systemIP">
@@ -122,7 +113,6 @@
         <SystemIP ref="systemIPRef" @search="search()" />
         <Timeout ref="timeoutRef" @search="search()" />
         <Network ref="networkRef" @search="search()" />
-        <Clean ref="cleanRef" @search="search()" />
     </div>
 </template>
 
@@ -140,7 +130,6 @@ import Timeout from '@/views/setting/panel/timeout/index.vue';
 import PanelName from '@/views/setting/panel/name/index.vue';
 import SystemIP from '@/views/setting/panel/systemip/index.vue';
 import Network from '@/views/setting/panel/default-network/index.vue';
-import Clean from '@/views/setting/panel/clean/index.vue';
 
 const loading = ref(false);
 const i18n = useI18n();
@@ -163,10 +152,6 @@ const form = reactive({
     complexityVerification: '',
     defaultNetwork: '',
     defaultNetworkVal: '',
-
-    lastCleanTime: '',
-    lastCleanSize: '',
-    lastCleanData: '',
 });
 
 const show = ref();
@@ -177,7 +162,6 @@ const panelNameRef = ref();
 const systemIPRef = ref();
 const timeoutRef = ref();
 const networkRef = ref();
-const cleanRef = ref();
 const unset = ref(i18n.t('setting.unSetting'));
 
 const search = async () => {
@@ -195,10 +179,6 @@ const search = async () => {
     form.complexityVerification = res.data.complexityVerification;
     form.defaultNetwork = res.data.defaultNetwork;
     form.defaultNetworkVal = res.data.defaultNetwork === 'all' ? i18n.t('commons.table.all') : res.data.defaultNetwork;
-
-    form.lastCleanTime = res.data.lastCleanTime;
-    form.lastCleanSize = res.data.lastCleanSize;
-    form.lastCleanData = res.data.lastCleanData;
 };
 
 const onChangePassword = () => {
@@ -219,13 +199,6 @@ const onChangeSystemIP = () => {
 const onChangeNetwork = () => {
     networkRef.value.acceptParams({ defaultNetwork: form.defaultNetwork });
 };
-const onClean = () => {
-    cleanRef.value.acceptParams({
-        lastCleanTime: form.lastCleanTime,
-        lastCleanSize: form.lastCleanSize,
-        lastCleanData: form.lastCleanData,
-    });
-};
 
 const onSave = async (key: string, val: any) => {
     loading.value = true;
diff --git a/frontend/src/views/setting/panel/clean/index.vue b/frontend/src/views/toolbox/clean/index.vue
similarity index 50%
rename from frontend/src/views/setting/panel/clean/index.vue
rename to frontend/src/views/toolbox/clean/index.vue
index f4b58af90..4466ec3d6 100644
--- a/frontend/src/views/setting/panel/clean/index.vue
+++ b/frontend/src/views/toolbox/clean/index.vue
@@ -1,19 +1,26 @@
 <template>
-    <div>
-        <el-drawer v-model="drawerVisible" :destroy-on-close="true" :close-on-click-modal="false" size="50%">
-            <template #header>
-                <DrawerHeader :header="$t('setting.diskClean')" :back="handleClose" />
+    <div v-loading="loading">
+        <LayoutContent :title="$t('setting.diskClean')" :divider="true">
+            <template #toolbar>
+                <el-row>
+                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                        <el-button type="primary" @click="scanData">
+                            {{ $t('clean.scan') }}
+                        </el-button>
+                    </el-col>
+                </el-row>
             </template>
-            <div v-loading="loading">
-                <el-row type="flex" justify="center">
-                    <el-col :span="22">
+            <template #main>
+                <el-row class="mt-5 mb-5">
+                    <el-col :span="1"><br /></el-col>
+                    <el-col :xs="24" :sm="20" :md="20" :lg="10" :xl="10">
                         <div v-if="scanStatus !== 'scanned'">
                             <div v-if="scanStatus === 'beforeScan'">
-                                <el-text class="clean_title" type="success">
+                                <el-text class="clean_title">
                                     {{ $t('clean.lastCleanTime', [form.lastCleanTime || '-']) }}
                                 </el-text>
                                 <div class="mt-4">
-                                    <el-text type="success">
+                                    <el-text>
                                         {{
                                             $t('clean.lastCleanHelper', [
                                                 form.lastCleanData || '-',
@@ -22,16 +29,75 @@
                                         }}
                                     </el-text>
                                 </div>
-                                <div class="large_button">
-                                    <el-button type="primary" size="large" @click="scanData">
-                                        {{ $t('clean.scan') }}
-                                    </el-button>
+                                <div class="app-card">
+                                    <el-card class="e-card">
+                                        <el-row>
+                                            <el-col :span="4">
+                                                <el-button icon="Setting" link class="card_icon" />
+                                            </el-col>
+                                            <el-col :span="20">
+                                                <div>
+                                                    <el-text class="mx-1 card_title" type="primary">
+                                                        {{ $t('clean.system') }}
+                                                    </el-text>
+                                                </div>
+                                                <span class="input-help">{{ $t('clean.systemHelper') }}</span>
+                                            </el-col>
+                                        </el-row>
+                                    </el-card>
+                                    <el-card class="e-card">
+                                        <el-row>
+                                            <el-col :span="4">
+                                                <el-button icon="Upload" link class="card_icon" />
+                                            </el-col>
+                                            <el-col :span="20">
+                                                <div>
+                                                    <el-text class="mx-1 card_title" type="primary">
+                                                        {{ $t('clean.upload') }}
+                                                    </el-text>
+                                                </div>
+                                                <span class="input-help">{{ $t('clean.uploadHelper') }}</span>
+                                            </el-col>
+                                        </el-row>
+                                    </el-card>
+                                    <el-card class="e-card">
+                                        <el-row>
+                                            <el-col :span="4">
+                                                <el-button icon="Download" link class="card_icon" />
+                                            </el-col>
+                                            <el-col :span="20">
+                                                <div>
+                                                    <el-text class="mx-1 card_title" type="primary">
+                                                        {{ $t('clean.download') }}
+                                                    </el-text>
+                                                </div>
+                                                <span class="input-help">{{ $t('clean.downloadHelper') }}</span>
+                                            </el-col>
+                                        </el-row>
+                                    </el-card>
+                                    <el-card class="e-card">
+                                        <el-row>
+                                            <el-col :span="4">
+                                                <el-button icon="Document" link class="card_icon" />
+                                            </el-col>
+                                            <el-col :span="20">
+                                                <div>
+                                                    <el-text class="mx-1 card_title" type="primary">
+                                                        {{ $t('clean.systemLog') }}
+                                                    </el-text>
+                                                </div>
+                                                <span class="input-help">
+                                                    {{ $t('clean.systemLogHelper') }}
+                                                </span>
+                                            </el-col>
+                                        </el-row>
+                                    </el-card>
                                 </div>
                             </div>
                             <div v-if="scanStatus === 'afterScan'">
-                                <el-text class="clean_title" type="success">{{ $t('clean.cleanSuccessful') }}</el-text>
+                                <el-text class="clean_title">{{ $t('clean.cleanSuccessful') }}</el-text>
                                 <div class="mt-4">
-                                    <el-text type="success">
+                                    <el-text>
                                         {{
                                             $t('clean.currentCleanHelper', [
                                                 form.lastCleanData,
@@ -40,80 +106,11 @@
                                         }}
                                     </el-text>
                                 </div>
-                                <div class="large_button">
-                                    <el-button type="success" size="large" @click="scanData">
-                                        {{ $t('clean.reScan') }}
-                                    </el-button>
-                                </div>
-                            </div>
-                            <div class="app-card">
-                                <el-card class="e-card">
-                                    <el-row>
-                                        <el-col :span="4">
-                                            <el-button icon="Setting" link class="card_icon" />
-                                        </el-col>
-                                        <el-col :span="20">
-                                            <div>
-                                                <el-text class="mx-1 card_title" type="primary">
-                                                    {{ $t('clean.system') }}
-                                                </el-text>
-                                            </div>
-                                            <span class="input-help">{{ $t('clean.systemHelper') }}</span>
-                                        </el-col>
-                                    </el-row>
-                                </el-card>
-                                <el-card class="e-card">
-                                    <el-row>
-                                        <el-col :span="4">
-                                            <el-button icon="Upload" link class="card_icon" />
-                                        </el-col>
-                                        <el-col :span="20">
-                                            <div>
-                                                <el-text class="mx-1 card_title" type="primary">
-                                                    {{ $t('clean.upload') }}
-                                                </el-text>
-                                            </div>
-                                            <span class="input-help">{{ $t('clean.uploadHelper') }}</span>
-                                        </el-col>
-                                    </el-row>
-                                </el-card>
-                                <el-card class="e-card">
-                                    <el-row>
-                                        <el-col :span="4">
-                                            <el-button icon="Download" link class="card_icon" />
-                                        </el-col>
-                                        <el-col :span="20">
-                                            <div>
-                                                <el-text class="mx-1 card_title" type="primary">
-                                                    {{ $t('clean.download') }}
-                                                </el-text>
-                                            </div>
-                                            <span class="input-help">{{ $t('clean.downloadHelper') }}</span>
-                                        </el-col>
-                                    </el-row>
-                                </el-card>
-                                <el-card class="e-card">
-                                    <el-row>
-                                        <el-col :span="4">
-                                            <el-button icon="Document" link class="card_icon" />
-                                        </el-col>
-                                        <el-col :span="20">
-                                            <div>
-                                                <el-text class="mx-1 card_title" type="primary">
-                                                    {{ $t('clean.systemLog') }}
-                                                </el-text>
-                                            </div>
-                                            <span class="input-help">
-                                                {{ $t('clean.systemLogHelper') }}
-                                            </span>
-                                        </el-col>
-                                    </el-row>
-                                </el-card>
                             </div>
                         </div>
                         <div v-if="scanStatus === 'scanned'">
                             <div>
-                                <el-text class="clean_title" type="primary">
+                                <el-text class="clean_title">
                                     {{ $t('clean.totalScan') }} {{ computeSize(totalSize) }}
                                 </el-text>
                                 <div class="mt-4">
@@ -127,126 +124,116 @@
                                     </el-button>
                                 </div>
                             </div>
-                            <el-scrollbar class="mt-4" max-height="calc(100vh - 235px)">
-                                <el-collapse v-model="activeNames">
-                                    <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>
-                                    <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-scrollbar>
+                            <el-collapse v-model="activeNames">
+                                <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>
+                                <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>
                         </div>
                     </el-col>
                 </el-row>
-            </div>
-            <template #footer>
-                <span class="dialog-footer">
-                    <el-button @click="onCancel">{{ $t('commons.button.cancel') }}</el-button>
-                </span>
             </template>
-        </el-drawer>
+        </LayoutContent>
     </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { computeSize } from '@/utils/util';
-import DrawerHeader from '@/components/drawer-header/index.vue';
-import { cleanSystem, scanSystem } from '@/api/modules/setting';
+import { cleanSystem, scanSystem, getSettingInfo } from '@/api/modules/setting';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
-const emit = defineEmits<{ (e: 'search'): void }>();
-const drawerVisible = ref();
 const loading = ref();
 const totalSize = ref<number>(0);
 const selectSize = ref<number>(0);
@@ -280,18 +267,6 @@ const form = reactive({
     lastCleanSize: '',
     lastCleanData: '',
 });
-interface DialogProps {
-    lastCleanTime: string;
-    lastCleanSize: string;
-    lastCleanData: string;
-}
-const acceptParams = (params: DialogProps): void => {
-    scanStatus.value = 'beforeScan';
-    form.lastCleanTime = params.lastCleanTime;
-    form.lastCleanSize = params.lastCleanSize;
-    form.lastCleanData = params.lastCleanData;
-    drawerVisible.value = true;
-};
 
 const scanData = async () => {
     loading.value = true;
@@ -371,9 +346,11 @@ const onSubmitClean = async () => {
     });
 };
 
-const onCancel = async () => {
-    drawerVisible.value = false;
-    emit('search');
+const search = async () => {
+    const res = await getSettingInfo();
+    form.lastCleanTime = res.data.lastCleanTime;
+    form.lastCleanSize = res.data.lastCleanSize;
+    form.lastCleanData = res.data.lastCleanData;
 };
 
 const loadSubmitCheck = (data: any) => {
@@ -528,13 +505,9 @@ function load18n(label: string) {
     }
 }
 
-const handleClose = () => {
-    emit('search');
-    drawerVisible.value = false;
-};
-
-defineExpose({
-    acceptParams,
+onMounted(() => {
+    search();
+    scanStatus.value = 'beforeScan';
 });
 </script>
 
@@ -546,7 +519,7 @@ defineExpose({
         transform: scale(1.2);
     }
     .e-card {
-        margin-top: 30px;
+        margin-top: 20px;
         cursor: pointer;
         border: var(--panel-border) !important;
         &:hover {
diff --git a/frontend/src/views/toolbox/index.vue b/frontend/src/views/toolbox/index.vue
index 3b6eadfb8..e4bcdb40d 100644
--- a/frontend/src/views/toolbox/index.vue
+++ b/frontend/src/views/toolbox/index.vue
@@ -15,6 +15,10 @@ const buttons = [
         label: i18n.global.t('toolbox.device.toolbox'),
         path: '/toolbox/device',
     },
+    {
+        label: i18n.global.t('setting.diskClean'),
+        path: '/toolbox/clean',
+    },
     {
         label: i18n.global.t('menu.supervisor'),
         path: '/toolbox/supervisor',