feat: 缓存清理菜单位置调整 (#3172)

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,
+                    },
+                },
             ],
         },
     ],

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;

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" />
-            </template>
     <div v-loading="loading">
-                <el-row type="flex" justify="center">
+        <LayoutContent :title="$t('setting.diskClean')" :divider="true">
-                    <el-col :span="22">
+            <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>
+            <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,30 +29,6 @@
                                         }}
                                     </el-text>
                                 </div>
-                                <div class="large_button">
-                                    <el-button type="primary" size="large" @click="scanData">
-                                        {{ $t('clean.scan') }}
-                                    </el-button>
-                                </div>
-                            </div>
-                            <div v-if="scanStatus === 'afterScan'">
-                                <el-text class="clean_title" type="success">{{ $t('clean.cleanSuccessful') }}</el-text>
-                                <div class="mt-4">
-                                    <el-text type="success">
-                                        {{
-                                            $t('clean.currentCleanHelper', [
-                                                form.lastCleanData,
-                                                computeSize(Number(form.lastCleanSize)),
-                                            ])
-                                        }}
-                                    </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>
@@ -111,9 +94,23 @@
                                     </el-card>
                                 </div>
                             </div>
+                            <div v-if="scanStatus === 'afterScan'">
+                                <el-text class="clean_title">{{ $t('clean.cleanSuccessful') }}</el-text>
+                                <div class="mt-4">
+                                    <el-text>
+                                        {{
+                                            $t('clean.currentCleanHelper', [
+                                                form.lastCleanData,
+                                                computeSize(Number(form.lastCleanSize)),
+                                            ])
+                                        }}
+                                    </el-text>
+                                </div>
+                            </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,7 +124,6 @@
                                     </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
@@ -222,31 +218,22 @@
                                     </el-tree>
                                 </el-collapse-item>
                             </el-collapse>
-                            </el-scrollbar>
                         </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, getSettingInfo } from '@/api/modules/setting';
-import { cleanSystem, scanSystem } 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 () => {
+const search = async () => {
-    drawerVisible.value = false;
+    const res = await getSettingInfo();
-    emit('search');
+    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 = () => {
+onMounted(() => {
-    emit('search');
+    search();
-    drawerVisible.value = false;
+    scanStatus.value = 'beforeScan';
-};
-
-defineExpose({
-    acceptParams,
 });
 </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 {

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',