feat: Added a reminder when the drawer is closed (#8248)

frontend/src/components/drawer-pro/index.vue

@@ -2,6 +2,7 @@
     <el-drawer
         v-model="localOpenPage"
         @close="handleClose"
+        :before-close="handleBeforeClose"
         :destroy-on-close="true"
         :size="size"
         :close-on-press-escape="true"
@@ -29,14 +30,16 @@
             </el-page-header>
         </template>
 
-        <div v-if="slots.content">
-            <slot name="content"></slot>
+        <div ref="drawerContent">
+            <div v-if="slots.content">
+                <slot name="content"></slot>
+            </div>
+            <el-row v-else>
+                <el-col :span="22" :offset="1">
+                    <slot></slot>
+                </el-col>
+            </el-row>
         </div>
-        <el-row v-else>
-            <el-col :span="22" :offset="1">
-                <slot></slot>
-            </el-col>
-        </el-row>
 
         <template #footer v-if="slots.footer">
             <slot name="footer"></slot>
@@ -50,6 +53,7 @@ defineOptions({ name: 'DrawerPro' });
 import i18n from '@/lang';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
+const drawerContent = ref();
 
 const props = defineProps({
     header: String,
@@ -111,7 +115,31 @@ const handleBack = () => {
     }
 };
 
+const handleBeforeClose = (done: () => void) => {
+    console.log(drawerContent.value, drawerContent.value.querySelector('.el-form'));
+    if (drawerContent.value) {
+        const hasForm = drawerContent.value.querySelector('.el-form') !== null;
+        if (hasForm) {
+            ElMessageBox.confirm(
+                i18n.global.t('commons.msg.closeDrawerHelper'),
+                i18n.global.t('commons.button.close'),
+                {
+                    confirmButtonText: i18n.global.t('commons.button.confirm'),
+                    cancelButtonText: i18n.global.t('commons.button.cancel'),
+                },
+            ).then(async () => {
+                done();
+            });
+        } else {
+            done();
+        }
+    } else {
+        done();
+    }
+};
+
 const handleClose = () => {
+    console.log('321321');
     localOpenPage.value = false;
     globalStore.isFullScreen = false;
     emit('close');

frontend/src/lang/modules/en.ts

@@ -137,10 +137,9 @@ const message = {
         },
         msg: {
             noneData: 'No data available',
-            disConn:
-                'Please click the disconnect button directly to terminate the terminal connection, avoiding the use of exit commands like {0}.',
             delete: 'This operation delete cannot be rolled back. Do you want to continue?',
             clean: 'This operation clean cannot be rolled back. Do you want to continue?',
+            closeDrawerHelper: 'The system may not save the changes you made. Do you want to continue?',
             deleteSuccess: 'Delete Success',
             loginSuccess: 'Login Success',
             operationSuccess: 'Successful operation',

frontend/src/lang/modules/ja.ts

@@ -129,10 +129,9 @@ const message = {
         },
         msg: {
             noneData: '利用可能なデータはありません',
-            disConn:
-                '端末接続を切断するには、{0} のような終了コマンドを使用せずに、直接切断ボタンをクリックしてください',
             delete: `この操作削除は元に戻すことはできません。続けたいですか？`,
             clean: `この操作は取り消すことはできません。続けたいですか？`,
+            closeDrawerHelper: 'システムは変更を保存しない可能性があります。続行しますか？',
             deleteSuccess: '正常に削除されました',
             loginSuccess: '正常にログインしました',
             operationSuccess: '正常に完了',

frontend/src/lang/modules/ko.ts

@@ -129,10 +129,9 @@ const message = {
         },
         msg: {
             noneData: '데이터가 없습니다',
-            disConn:
-                '종료 명령어인 {0} 등을 사용하지 않고 직접 연결 끊기 버튼을 클릭하여 터미널 연결을 종료해 주십시오.',
             delete: `이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?`,
             clean: `이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?`,
+            closeDrawerHelper: '시스템에서 변경 사항을 저장하지 않을 수 있습니다. 계속하시겠습니까?',
             deleteSuccess: '삭제 완료',
             loginSuccess: '로그인 성공',
             operationSuccess: '작업 완료',

frontend/src/lang/modules/ms.ts

@@ -129,10 +129,9 @@ const message = {
         },
         msg: {
             noneData: 'Tiada data tersedia',
-            disConn:
-                'Sila klik butang putus sambungan secara langsung untuk menamatkan sambungan terminal, mengelakkan penggunaan arahan keluar seperti {0}.',
             delete: 'Operasi ini tidak boleh diundur. Adakah anda mahu meneruskan?',
             clean: 'Operasi ini tidak boleh diundur. Adakah anda mahu meneruskan?',
+            closeDrawerHelper: 'Sistem mungkin tidak menyimpan perubahan yang anda buat. Adakah anda ingin teruskan?',
             deleteSuccess: 'Berjaya dipadam',
             loginSuccess: 'Berjaya log masuk',
             operationSuccess: 'Berjaya dilakukan',

frontend/src/lang/modules/pt-br.ts

@@ -129,10 +129,9 @@ const message = {
         },
         msg: {
             noneData: 'Nenhum dado disponível',
-            disConn:
-                'Por favor, clique diretamente no botão de desconexão para encerrar a conexão do terminal, evitando o uso de comandos de saída como {0}.',
             delete: 'Esta operação de exclusão não pode ser desfeita. Deseja continuar?',
             clean: 'Esta operação de limpeza não pode ser desfeita. Deseja continuar?',
+            closeDrawerHelper: 'O sistema pode não salvar as alterações que você fez. Deseja continuar?',
             deleteSuccess: 'Excluído com sucesso',
             loginSuccess: 'Login realizado com sucesso',
             operationSuccess: 'Operação concluída com sucesso',

frontend/src/lang/modules/ru.ts

@@ -129,10 +129,9 @@ const message = {
         },
         msg: {
             noneData: 'Нет данных',
-            disConn:
-                'Пожалуйста, нажмите кнопку отключения, чтобы разорвать соединение с терминалом, избегая использования команд выхода, таких как {0}.',
             delete: 'Эта операция удаления не может быть отменена. Хотите продолжить?',
             clean: 'Эта операция очистки не может быть отменена. Хотите продолжить?',
+            closeDrawerHelper: 'Система может не сохранить внесённые вами изменения. Продолжить?',
             deleteSuccess: 'Успешно удалено',
             loginSuccess: 'Успешный вход',
             operationSuccess: 'Операция выполнена успешно',

frontend/src/lang/modules/zh-Hant.ts

@@ -136,6 +136,7 @@ const message = {
             noneData: '暫無數據',
             delete: '刪除 操作不可回滾，是否繼續？',
             clean: '清空 操作不可回滾，是否繼續？',
+            closeDrawerHelper: '系統可能不會儲存您所做的變更，是否繼續？',
             deleteSuccess: '刪除成功',
             loginSuccess: '登錄成功',
             operationSuccess: '操作成功',

frontend/src/lang/modules/zh.ts

@@ -136,6 +136,7 @@ const message = {
             noneData: '暂无数据',
             delete: '删除 操作不可回滚，是否继续？',
             clean: '清空 操作不可回滚，是否继续？',
+            closeDrawerHelper: '系统可能不会保存您所做的更改，是否继续？',
             deleteSuccess: '删除成功',
             loginSuccess: '登录成功',
             operationSuccess: '操作成功',

frontend/src/views/home/status/index.vue

@@ -112,7 +112,7 @@
             <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
         </el-col>
         <template v-for="(item, index) of currentInfo.diskData" :key="index">
-            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" if="isShow('disk', index)">
+            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
                 <el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
                     <el-row :gutter="5">
                         <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
@@ -164,7 +164,7 @@
             </el-col>
         </template>
         <template v-for="(item, index) of currentInfo.gpuData" :key="index">
-            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" if="isShow('gpu', index)">
+            <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
                 <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
                     <el-row :gutter="5">
                         <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
@@ -265,7 +265,7 @@ import router from '@/routers';
 import i18n from '@/lang';
 import { nextTick, ref } from 'vue';
 import { toFolder } from '@/global/business';
-const showMore = ref(true);
+const showMore = ref(false);
 const totalCount = ref();
 
 const baseInfo = ref<Dashboard.BaseInfo>({