feat: 概览页重启按钮优化 (#2926)

Refs #2921

backend/app/service/dashboard.go

@@ -31,7 +31,7 @@ func NewIDashboardService() IDashboardService {
 }
 
 func (u *DashboardService) Restart(operation string) error {
-	if operation != "panel" && operation != "system" {
+	if operation != "1panel" && operation != "system" {
 		return fmt.Errorf("handle restart operation %s failed, err: nonsupport such operation", operation)
 	}
 	itemCmd := fmt.Sprintf("%s 1pctl restart", cmd.SudoHandleCmd())

frontend/src/components/confirm-dialog/index.vue

@@ -6,8 +6,8 @@
             </div>
         </template>
         <div>
-            <span style="font-size: 12px">{{ operationInfo }}</span>
-            <div style="margin-top: 10px">
+            <span v-if="operationInfo" style="font-size: 12px">{{ operationInfo }}</span>
+            <div :style="{ 'margin-top': operationInfo ? '10px' : '0px' }">
                 <span style="font-size: 12px">{{ $t('commons.msg.operateConfirm') }}</span>
                 <span style="font-size: 12px; color: red; font-weight: 500">'{{ submitInputInfo }}'</span>
             </div>

frontend/src/lang/modules/en.ts

@@ -286,9 +286,6 @@ const message = {
     home: {
         restart_1panel: 'Restart Panel',
         restart_system: 'Restart Server',
-        panel: '1Panel',
-        system: '1Panel Server',
-        restartHelper: 'About to restart {0}, do you want to continue?',
         operationSuccess: 'Operation successful! Restarting, please wait...',
         overview: 'Overview',
         entranceHelper:

frontend/src/lang/modules/tw.ts

@@ -284,9 +284,6 @@ const message = {
     home: {
         restart_1panel: '重啟面板',
         restart_system: '重啟服務器',
-        panel: '1Panel 面板',
-        system: '1Panel 服務器',
-        restartHelper: '即將重新啟動 {0}，是否繼續？',
         operationSuccess: '操作成功！正在重啟，請稍候...',
         overview: '概覽',
         entranceHelper: '設置安全入口有利於提高系統的安全性，如有需要，前往 面板設置-安全 中，啟用安全入口',

frontend/src/lang/modules/zh.ts

@@ -284,9 +284,6 @@ const message = {
     home: {
         restart_1panel: '重启面板',
         restart_system: '重启服务器',
-        panel: '1Panel 面板',
-        system: '1Panel 服务器',
-        restartHelper: '即将重新启动 {0}，是否继续？',
         operationSuccess: '操作成功！正在重启，请稍候...',
         overview: '概览',
         entranceHelper: '设置安全入口有利于提高系统的安全性，如有需要，前往 面板设置-安全 中，启用安全入口',

frontend/src/views/home/index.vue

@@ -10,11 +10,11 @@
         >
             <template #route-button>
                 <div class="router-button">
-                    <el-button link type="primary" @click="restart('panel')">
+                    <el-button link type="primary" @click="onRestart('1panel')">
                         {{ $t('home.restart_1panel') }}
                     </el-button>
                     <el-divider direction="vertical" />
-                    <el-button link type="primary" @click="restart('system')">
+                    <el-button link type="primary" @click="onRestart('system')">
                         {{ $t('home.restart_system') }}
                     </el-button>
                 </div>
@@ -230,10 +230,13 @@
                 </CardWithHeader>
             </el-col>
         </el-row>
+
+        <ConfirmDialog ref="confirmDialogRef" @confirm="onSave"></ConfirmDialog>
     </div>
 </template>
 
 <script lang="ts" setup>
+import ConfirmDialog from '@/components/confirm-dialog/index.vue';
 import { onMounted, onBeforeUnmount, ref, reactive } from 'vue';
 import Status from '@/views/home/status/index.vue';
 import App from '@/views/home/app/index.vue';
@@ -252,6 +255,8 @@ const router = useRouter();
 const globalStore = GlobalStore();
 
 const statusRef = ref();
+const restartType = ref();
+const confirmDialogRef = ref();
 const appRef = ref();
 
 const isSafety = ref();
@@ -540,20 +545,19 @@ const loadSafeStatus = async () => {
     isSafety.value = res.data.securityEntrance;
 };
 
-const restart = async (type: string) => {
-    ElMessageBox.confirm(
-        i18n.global.t('home.restartHelper', [i18n.global.t('home.' + type)]),
-        i18n.global.t('commons.msg.operate'),
-        {
-            confirmButtonText: i18n.global.t('commons.button.confirm'),
-            cancelButtonText: i18n.global.t('commons.button.cancel'),
-            type: 'info',
-        },
-    ).then(async () => {
-        globalStore.isOnRestart = true;
-        MsgSuccess(i18n.global.t('home.operationSuccess'));
-        await systemRestart(type);
-    });
+const onRestart = (type: string) => {
+    restartType.value = type;
+    let params = {
+        header: i18n.global.t('home.restart_' + type),
+        operationInfo: '',
+        submitInputInfo: i18n.global.t('database.restartNow'),
+    };
+    confirmDialogRef.value!.acceptParams(params);
+};
+const onSave = async () => {
+    globalStore.isOnRestart = true;
+    MsgSuccess(i18n.global.t('home.operationSuccess'));
+    await systemRestart(restartType.value);
 };
 
 const onFocus = () => {