From c216726449bd8110a91d69fa6022159218b94abc Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Fri, 19 Sep 2025 18:08:01 +0800
Subject: [PATCH] fix: Optimize the style of quick command options (#10408)

---
 core/app/dto/command.go                       |  4 +-
 core/app/service/command.go                   |  4 +-
 frontend/src/components/app-status/index.vue  |  2 +-
 .../host/file-management/terminal/index.vue   | 28 +++++-----
 .../src/views/terminal/terminal/index.vue     | 51 +++++++++++--------
 .../views/toolbox/supervisor/status/index.vue |  2 +-
 6 files changed, 53 insertions(+), 38 deletions(-)

diff --git a/core/app/dto/command.go b/core/app/dto/command.go
index fef7436fb..934664b16 100644
--- a/core/app/dto/command.go
+++ b/core/app/dto/command.go
@@ -28,9 +28,9 @@ type CommandInfo struct {
 }
 
 type CommandTree struct {
-	ID       uint          `json:"id"`
 	Label    string        `json:"label"`
-	Children []CommandInfo `json:"children"`
+	Value    string        `json:"value"`
+	Children []CommandTree `json:"children"`
 }
 
 type CommandDelete struct {
diff --git a/core/app/service/command.go b/core/app/service/command.go
index fe3dba1f0..1f931d98a 100644
--- a/core/app/service/command.go
+++ b/core/app/service/command.go
@@ -51,11 +51,11 @@ func (u *CommandService) SearchForTree(req dto.OperateByType) ([]dto.CommandTree
 	var lists []dto.CommandTree
 	for _, group := range groups {
 		var data dto.CommandTree
-		data.ID = group.ID + 10000
 		data.Label = group.Name
+		data.Value = group.Name
 		for _, cmd := range cmdList {
 			if cmd.GroupID == group.ID {
-				data.Children = append(data.Children, dto.CommandInfo{ID: cmd.ID, Name: cmd.Name, Command: cmd.Command})
+				data.Children = append(data.Children, dto.CommandTree{Label: cmd.Name, Value: cmd.Command})
 			}
 		}
 		if len(data.Children) != 0 {
diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 41acf72a5..500c0078e 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -5,7 +5,7 @@
                 <div class="flex flex-wrap gap-4 ml-3">
                     <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
                     <Status class="mt-0.5" :key="refresh" :status="data.status"></Status>
-                    <el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>
+                    <el-tag>{{ $t('app.version') }}: {{ data.version }}</el-tag>
                 </div>
 
                 <div class="mt-0.5">
diff --git a/frontend/src/views/host/file-management/terminal/index.vue b/frontend/src/views/host/file-management/terminal/index.vue
index cba96d74a..90789c50b 100644
--- a/frontend/src/views/host/file-management/terminal/index.vue
+++ b/frontend/src/views/host/file-management/terminal/index.vue
@@ -10,17 +10,17 @@
         <template #content>
             <Terminal style="height: calc(100vh - 120px)" ref="terminalRef"></Terminal>
             <div>
-                <el-select v-model="quickCmd" clearable filterable @change="quickInput" class="w-full -mt-6">
+                <el-cascader
+                    v-model="quickCmd"
+                    :options="commandTree"
+                    @change="quickInput"
+                    :show-all-levels="false"
+                    class="w-full -mt-6"
+                    placeholder=" "
+                    filterable
+                >
                     <template #prefix>{{ $t('terminal.quickCommand') }}</template>
-                    <el-option-group v-for="group in commandTree" :key="group.label" :label="group.label">
-                        <el-option
-                            v-for="(cmd, index) in group.children"
-                            :key="index"
-                            :label="cmd.name"
-                            :value="cmd.command"
-                        />
-                    </el-option-group>
-                </el-select>
+                </el-cascader>
             </div>
         </template>
     </DrawerPro>
@@ -62,8 +62,12 @@ const loadCommandTree = async () => {
     commandTree.value = res.data || [];
 };
 
-function quickInput(val: any) {
-    terminalRef.value?.sendMsg(val + '\n');
+function quickInput(val: Array<string>) {
+    if (val.length < 1) {
+        return;
+    }
+    quickCmd.value = val[val.length - 1];
+    terminalRef.value?.sendMsg(quickCmd.value + '\n');
     quickCmd.value = '';
 }
 
diff --git a/frontend/src/views/terminal/terminal/index.vue b/frontend/src/views/terminal/terminal/index.vue
index 88cb863f7..802e20470 100644
--- a/frontend/src/views/terminal/terminal/index.vue
+++ b/frontend/src/views/terminal/terminal/index.vue
@@ -52,17 +52,17 @@
                     :key="item.Refresh"
                 ></Terminal>
                 <div>
-                    <el-select v-model="quickCmd" clearable filterable @change="quickInput" style="width: 25%">
+                    <el-cascader
+                        v-model="quickCmd"
+                        :options="commandTree"
+                        @change="quickInput"
+                        :show-all-levels="false"
+                        style="width: 25%"
+                        placeholder=" "
+                        filterable
+                    >
                         <template #prefix>{{ $t('terminal.quickCommand') }}</template>
-                        <el-option-group v-for="group in commandTree" :key="group.label" :label="group.label">
-                            <el-option
-                                v-for="(cmd, index) in group.children"
-                                :key="index"
-                                :label="cmd.name"
-                                :value="cmd.command"
-                            />
-                        </el-option-group>
-                    </el-select>
+                    </el-cascader>
                     <el-input v-model="batchVal" @keyup.enter="batchInput" style="width: 75%">
                         <template #prepend>
                             <el-checkbox :label="$t('terminal.batchInput')" v-model="isBatch" />
@@ -283,19 +283,30 @@ const filterHost = (value: string, data: any) => {
 const loadCommandTree = async () => {
     const res = await getCommandTree('command');
     commandTree.value = res.data || [];
+    for (const item of commandTree.value) {
+        if (item.label === 'Default') {
+            item.label = i18n.global.t('commons.table.default');
+        }
+    }
 };
 
-function quickInput(val: any) {
-    if (val !== '' && ctx) {
-        if (isBatch.value) {
-            for (const tab of terminalTabs.value) {
-                ctx.refs[`t-${tab.index}`] && ctx.refs[`t-${tab.index}`][0].sendMsg(val + '\n');
-            }
-            return;
-        }
-        ctx.refs[`t-${terminalValue.value}`] && ctx.refs[`t-${terminalValue.value}`][0].sendMsg(val + '\n');
-        quickCmd.value = '';
+function quickInput(val: Array<string>) {
+    if (val.length < 1) {
+        return;
     }
+    if (!ctx) {
+        return;
+    }
+    quickCmd.value = val[val.length - 1];
+    if (isBatch.value) {
+        for (const tab of terminalTabs.value) {
+            ctx.refs[`t-${tab.index}`] && ctx.refs[`t-${tab.index}`][0].sendMsg(quickCmd.value + '\n');
+        }
+        quickCmd.value = '';
+        return;
+    }
+    ctx.refs[`t-${terminalValue.value}`] && ctx.refs[`t-${terminalValue.value}`][0].sendMsg(quickCmd.value + '\n');
+    quickCmd.value = '';
 }
 
 function batchInput() {
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index e0b2f8a43..5b802eeb1 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -6,7 +6,7 @@
                     <div class="flex flex-wrap gap-4 ml-3">
                         <el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
                         <Status class="mt-0.5" :key="data.status" :status="data.status"></Status>
-                        <el-tag>{{ $t('app.version') }}{{ $t('commons.colon') }}{{ data.version }}</el-tag>
+                        <el-tag>{{ $t('app.version') }}: {{ $t('commons.colon') }}{{ data.version }}</el-tag>
                     </div>
                     <div class="mt-0.5" v-if="!data.init">
                         <el-button type="primary" v-if="data.status != 'running'" link @click="onOperate('start')">