From f17011939c32f269972955b750f9417119366e18 Mon Sep 17 00:00:00 2001
From: 3030332422 <3030332422@qq.com>
Date: Thu, 18 Sep 2025 10:56:41 +0800
Subject: [PATCH] =?UTF-8?q?update:=E4=BC=98=E5=8C=96=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E8=B0=83=E7=94=A8=E7=95=8C=E9=9D=A2=E4=B8=8E?=
 =?UTF-8?q?=E6=89=A7=E8=A1=8C=E7=BB=93=E6=9E=9C=E5=B1=95=E7=A4=BA=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/controller/DeviceController.java   |   2 +-
 .../src/components/McpToolCallDialog.vue      | 898 ++++++++++++++----
 2 files changed, 734 insertions(+), 166 deletions(-)

diff --git a/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java b/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java
index 65987265..cc4eb5a3 100644
--- a/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java
+++ b/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java
@@ -136,7 +136,7 @@ public class DeviceController {
             headers.set("Authorization", "Bearer " + token);
 
             // 构建请求体JSON
-            String jsonBody = "{\"deviceIds\":" + objectMapper.writeValueAsString(deviceIds) + "}";
+            String jsonBody = "{\"clientIds\":" + objectMapper.writeValueAsString(deviceIds) + "}";
             HttpEntity<String> requestEntity = new HttpEntity<>(jsonBody, headers);
 
             // 发送POST请求
diff --git a/main/manager-web/src/components/McpToolCallDialog.vue b/main/manager-web/src/components/McpToolCallDialog.vue
index 0eeed9e0..eb7ef85f 100644
--- a/main/manager-web/src/components/McpToolCallDialog.vue
+++ b/main/manager-web/src/components/McpToolCallDialog.vue
@@ -1,8 +1,13 @@
 <template>
-  <el-dialog :title="$t('mcpToolCall.title')" :visible="visible" @close="handleClose" width="80%">
+  <el-dialog
+    :title="$t('mcpToolCall.title')"
+    :visible="visible"
+    @close="handleClose"
+    width="80%"
+  >
     <!-- 右上角操作按钮 -->
     <div slot="title" class="dialog-title-wrapper">
-      <span class="dialog-title-text">{{ $t('mcpToolCall.title') }}</span>
+      <span class="dialog-title-text">{{ $t("mcpToolCall.title") }}</span>
     </div>
 
     <div class="dialog-content">
@@ -13,10 +18,14 @@
             <div class="section-header">
               <h3 class="section-title">
                 <i class="el-icon-menu section-icon"></i>
-                {{ $t('mcpToolCall.chooseFunction') }}
+                {{ $t("mcpToolCall.chooseFunction") }}
               </h3>
               <div class="tool-search">
-                <el-input v-model="toolSearchKeyword" :placeholder="$t('mcpToolCall.searchFunction')" clearable />
+                <el-input
+                  v-model="toolSearchKeyword"
+                  :placeholder="$t('mcpToolCall.searchFunction')"
+                  clearable
+                />
               </div>
             </div>
             <div v-if="toolsLoading" class="tool-list-loading">
@@ -25,15 +34,24 @@
             </div>
             <div v-else class="tool-list">
               <el-radio-group v-model="selectedToolName" class="tool-radio-group">
-                <el-radio v-for="tool in filteredToolList" :key="tool.name" :label="tool.name" class="tool-radio">
+                <el-radio
+                  v-for="tool in filteredToolList"
+                  :key="tool.name"
+                  :label="tool.name"
+                  class="tool-radio"
+                >
                   <div class="tool-item">
                     <div class="tool-main-info">
-                      <span class="tool-display-name">{{ getToolDisplayName(tool.name) }}</span>
+                      <span class="tool-display-name">{{
+                        getToolDisplayName(tool.name)
+                      }}</span>
                       <span class="tool-category">
                         {{ getToolCategory(tool.name) }}
                       </span>
                     </div>
-                    <div class="tool-description">{{ getSimpleDescription(tool.description) }}</div>
+                    <div class="tool-description">
+                      {{ getSimpleDescription(tool.description) }}
+                    </div>
                   </div>
                 </el-radio>
               </el-radio-group>
@@ -41,7 +59,7 @@
 
             <div v-if="!toolsLoading && filteredToolList.length === 0" class="no-results">
               <i class="el-icon-search no-results-icon"></i>
-              <div class="no-results-text">{{ $t('mcpToolCall.noResults') }}</div>
+              <div class="no-results-text">{{ $t("mcpToolCall.noResults") }}</div>
             </div>
           </div>
         </div>
@@ -52,43 +70,73 @@
           <div v-if="selectedTool" class="params-section">
             <h3 class="params-title">
               <i class="el-icon-setting params-icon"></i>
-              {{ $t('mcpToolCall.settings') }}
+              {{ $t("mcpToolCall.settings") }}
             </h3>
 
             <div class="params-help">
               {{ getToolHelpText(selectedTool.name) }}
             </div>
 
-            <el-form :model="toolParams" :rules="toolParamsRules" ref="toolParamsForm" label-width="120px">
-              <div v-for="(property, key) in selectedTool.inputSchema.properties" :key="key">
+            <el-form
+              :model="toolParams"
+              :rules="toolParamsRules"
+              ref="toolParamsForm"
+              label-width="120px"
+            >
+              <div
+                v-for="(property, key) in selectedTool.inputSchema.properties"
+                :key="key"
+              >
                 <el-form-item :label="formatPropertyLabel(key, property)" :prop="key">
                   <template
-                    v-if="property.type === 'integer' && property.minimum !== undefined && property.maximum !== undefined">
-                    <el-input-number v-model="toolParams[key]" :min="property.minimum" :max="property.maximum"
-                      :placeholder="$t('mcpToolCall.inputPlaceholder', { label: formatPropertyLabel(key, property) })"
-                      style="width: 100%" />
-                    <div class="param-range-hint">{{ $t('mcpToolCall.valueRange', {
-                      min: property.minimum, max:
-                        property.maximum
-                    }) }}</div>
+                    v-if="
+                      property.type === 'integer' &&
+                      property.minimum !== undefined &&
+                      property.maximum !== undefined
+                    "
+                  >
+                    <el-input-number
+                      v-model="toolParams[key]"
+                      :min="property.minimum"
+                      :max="property.maximum"
+                      style="width: 100%"
+                    />
                   </template>
-                  <template v-else-if="property.type === 'string' && (property.enum || key === 'theme')">
-                    <el-select v-model="toolParams[key]"
-                      :placeholder="$t('mcpToolCall.selectPlaceholder', { label: formatPropertyLabel(key, property) })"
-                      style="width: 100%" clearable @change="handleThemeChange">
+                  <template
+                    v-else-if="
+                      property.type === 'string' && (property.enum || key === 'theme')
+                    "
+                  >
+                    <el-select
+                      v-model="toolParams[key]"
+                      style="width: 100%"
+                      clearable
+                      @change="handleThemeChange"
+                    >
                       <template v-if="key === 'theme'">
-                        <el-option v-for="option in themeOptions" :key="option.value" :label="option.label"
-                          :value="option.value"></el-option>
+                        <el-option
+                          v-for="option in themeOptions"
+                          :key="option.value"
+                          :label="option.label"
+                          :value="option.value"
+                        ></el-option>
                       </template>
                       <template v-else>
-                        <el-option v-for="enumValue in property.enum" :key="enumValue" :label="enumValue"
-                          :value="enumValue"></el-option>
+                        <el-option
+                          v-for="enumValue in property.enum"
+                          :key="enumValue"
+                          :label="enumValue"
+                          :value="enumValue"
+                        ></el-option>
                       </template>
                     </el-select>
                   </template>
-                  <el-input v-else v-model="toolParams[key]"
-                    :placeholder="$t('mcpToolCall.inputPlaceholder', { label: formatPropertyLabel(key, property) })"
-                    :type="property.type === 'integer' ? 'number' : 'text'" style="width: 100%" />
+                  <el-input
+                    v-else
+                    v-model="toolParams[key]"
+                    :type="property.type === 'integer' ? 'number' : 'text'"
+                    style="width: 100%"
+                  />
                 </el-form-item>
               </div>
             </el-form>
@@ -96,22 +144,39 @@
 
           <div v-else class="no-selection">
             <i class="el-icon-info no-selection-icon"></i>
-            <div class="no-selection-text">{{ $t('mcpToolCall.pleaseSelect') }}</div>
+            <div class="no-selection-text">{{ $t("mcpToolCall.pleaseSelect") }}</div>
           </div>
 
           <!-- 下部分：执行结果 -->
           <div v-if="selectedTool" class="result-section">
             <h3 class="result-title">
               <i class="el-icon-document result-icon"></i>
-              {{ $t('mcpToolCall.executionResult') }}
+              {{ $t("mcpToolCall.executionResult") }}
             </h3>
 
             <div v-if="executionResult" class="result-content">
-              <pre class="result-text">{{ formattedExecutionResult }}</pre>
+              <!-- 表格展示模式 -->
+              <div v-if="showResultAsTable" class="result-table">
+                <el-table :data="tableData" border size="mini" style="width: 100%">
+                  <el-table-column
+                    prop="category"
+                    label="组件"
+                    width="120"
+                  ></el-table-column>
+                  <el-table-column
+                    prop="property"
+                    label="属性"
+                    width="120"
+                  ></el-table-column>
+                  <el-table-column prop="value" label="值"></el-table-column>
+                </el-table>
+              </div>
+              <!-- JSON展示模式 -->
+              <pre v-else class="result-text">{{ formattedExecutionResult }}</pre>
             </div>
             <div v-else class="no-result">
               <i class="el-icon-info no-result-icon"></i>
-              <div class="no-result-text">{{ $t('mcpToolCall.noResultYet') }}</div>
+              <div class="no-result-text">{{ $t("mcpToolCall.noResultYet") }}</div>
             </div>
           </div>
         </div>
@@ -120,61 +185,70 @@
 
     <!-- 底部按钮区域 -->
     <div class="dialog-footer">
-      <div class="dialog-btn cancel-btn" @click="cancel" style="flex: none; width: 100px;">{{ $t('mcpToolCall.cancel')
-      }}
+      <div class="dialog-btn cancel-btn" @click="cancel" style="flex: none; width: 100px">
+        {{ $t("mcpToolCall.cancel") }}
       </div>
-      <el-button type="primary" @click="executeTool" size="small" class="execute-btn" style="margin-left: 10px;">
+      <el-button
+        type="primary"
+        @click="executeTool"
+        size="small"
+        class="execute-btn"
+        style="margin-left: 10px"
+      >
         <i class="el-icon-check"></i>
-        {{ $t('mcpToolCall.execute') }}
+        {{ $t("mcpToolCall.execute") }}
       </el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
-import Api from '@/apis/api';
+import Api from "@/apis/api";
 
 export default {
-  name: 'McpToolCallDialog',
+  name: "McpToolCallDialog",
   props: {
     visible: { type: Boolean, required: true },
-    deviceId: { type: String, required: true }
+    deviceId: { type: String, required: true },
   },
   data() {
     return {
       toolList: [],
-      selectedToolName: '',
+      selectedToolName: "",
       toolParams: {},
       toolParamsRules: {},
-      toolSearchKeyword: '',
+      toolSearchKeyword: "",
       executionResult: null,
       themeOptions: [], // 先初始化为空数组
-      toolsLoading: false // 工具列表加载状态
-    }
+      toolsLoading: false, // 工具列表加载状态
+      showResultAsTable: false, // 是否以表格形式展示结果
+      tableData: [], // 表格数据
+    };
   },
   created() {
     // 在created钩子中初始化themeOptions，此时this.$t已经可用
     this.themeOptions = [
-      { label: this.$t('mcpToolCall.lightTheme'), value: 'light' },
-      { label: this.$t('mcpToolCall.darkTheme'), value: 'dark' }
+      { label: this.$t("mcpToolCall.lightTheme"), value: "light" },
+      { label: this.$t("mcpToolCall.darkTheme"), value: "dark" },
     ];
   },
   computed: {
     selectedTool() {
-      return this.toolList.find(tool => tool.name === this.selectedToolName);
+      return this.toolList.find((tool) => tool.name === this.selectedToolName);
     },
     filteredToolList() {
       if (!this.toolSearchKeyword) return this.toolList;
       const keyword = this.toolSearchKeyword.toLowerCase();
-      return this.toolList.filter(tool =>
-        tool.name.toLowerCase().includes(keyword) ||
-        tool.description.toLowerCase().includes(keyword)
+      return this.toolList.filter(
+        (tool) =>
+          tool.name.toLowerCase().includes(keyword) ||
+          tool.description.toLowerCase().includes(keyword)
       );
     },
     formattedExecutionResult() {
-      if (!this.executionResult) return '';
+      if (!this.executionResult) return "";
       return JSON.stringify(this.executionResult, null, 2);
-    }
+    },
   },
   watch: {
     visible(newVal) {
@@ -184,12 +258,21 @@ export default {
     },
     selectedToolName(newVal) {
       if (newVal) {
-        this.initToolParams();
-        this.generateToolParamsRules();
+        // 延迟执行初始化，确保 selectedTool computed 已经更新
+        this.$nextTick(() => {
+          this.initToolParams();
+          this.generateToolParamsRules();
+          // 清空表单验证状态
+          if (this.$refs.toolParamsForm) {
+            this.$refs.toolParamsForm.clearValidate();
+          }
+        });
       } else {
         this.executionResult = null;
+        this.toolParams = {};
+        this.toolParamsRules = {};
       }
-    }
+    },
   },
   methods: {
     // 添加handleThemeChange方法强制更新视图
@@ -199,25 +282,373 @@ export default {
         this.$forceUpdate();
       });
     },
+
+    // 检查是否为预定义工具
+    isPredefinedTool(toolName) {
+      const predefinedTools = [
+        "self.get_device_status",
+        "self.audio_speaker.set_volume",
+        "self.screen.set_brightness",
+        "self.screen.set_theme",
+        "self.get_system_info",
+        "self.reboot",
+        "self.screen.get_info",
+        "self.screen.snapshot",
+      ];
+      return predefinedTools.includes(toolName);
+    },
+
+    // 解析设备状态数据为表格格式
+    parseDeviceStatusToTable(deviceData) {
+      const tableData = [];
+
+      if (deviceData.audio_speaker) {
+        if (deviceData.audio_speaker.volume !== undefined) {
+          tableData.push({
+            category: "音频扬声器",
+            property: "音量",
+            value: deviceData.audio_speaker.volume + "%",
+          });
+        }
+      }
+
+      if (deviceData.screen) {
+        if (deviceData.screen.brightness !== undefined) {
+          tableData.push({
+            category: "屏幕",
+            property: "亮度",
+            value: deviceData.screen.brightness + "%",
+          });
+        }
+        if (deviceData.screen.theme !== undefined) {
+          tableData.push({
+            category: "屏幕",
+            property: "主题",
+            value: deviceData.screen.theme === "dark" ? "深色" : "浅色",
+          });
+        }
+      }
+
+      if (deviceData.network) {
+        if (deviceData.network.type !== undefined) {
+          tableData.push({
+            category: "网络",
+            property: "类型",
+            value: deviceData.network.type.toUpperCase(),
+          });
+        }
+        if (deviceData.network.ssid !== undefined) {
+          tableData.push({
+            category: "网络",
+            property: "SSID",
+            value: deviceData.network.ssid,
+          });
+        }
+        if (deviceData.network.signal !== undefined) {
+          const signalMap = {
+            strong: "强",
+            medium: "中",
+            weak: "弱",
+          };
+          tableData.push({
+            category: "网络",
+            property: "信号强度",
+            value: signalMap[deviceData.network.signal] || deviceData.network.signal,
+          });
+        }
+      }
+
+      return tableData;
+    },
+
+    // 解析其他工具结果为表格格式
+    parseOtherResultToTable(toolName, result) {
+      const tableData = [];
+
+      if (toolName === "self.audio_speaker.set_volume") {
+        tableData.push({
+          category: "音频控制",
+          property: "操作结果",
+          value: result.success ? "设置成功" : "设置失败",
+        });
+      } else if (toolName === "self.screen.set_brightness") {
+        tableData.push({
+          category: "屏幕控制",
+          property: "操作结果",
+          value: result.success ? "亮度设置成功" : "亮度设置失败",
+        });
+      } else if (toolName === "self.screen.set_theme") {
+        tableData.push({
+          category: "屏幕控制",
+          property: "操作结果",
+          value: result.success ? "主题设置成功" : "主题设置失败",
+        });
+      } else if (toolName === "self.reboot") {
+        tableData.push({
+          category: "系统控制",
+          property: "操作结果",
+          value: result.success ? "重启指令已发送" : "重启失败",
+        });
+      } else if (toolName === "self.screen.get_info") {
+        // 解析屏幕信息
+        if (
+          result.success &&
+          result.data &&
+          result.data.content &&
+          result.data.content[0] &&
+          result.data.content[0].text
+        ) {
+          try {
+            const screenInfo = JSON.parse(result.data.content[0].text);
+            if (screenInfo.width !== undefined) {
+              tableData.push({
+                category: "屏幕信息",
+                property: "宽度",
+                value: screenInfo.width + "像素",
+              });
+            }
+            if (screenInfo.height !== undefined) {
+              tableData.push({
+                category: "屏幕信息",
+                property: "高度",
+                value: screenInfo.height + "像素",
+              });
+            }
+            if (screenInfo.monochrome !== undefined) {
+              tableData.push({
+                category: "屏幕信息",
+                property: "类型",
+                value: screenInfo.monochrome ? "单色屏" : "彩色屏",
+              });
+            }
+          } catch (parseError) {
+            // 解析失败时显示原始信息
+            tableData.push({
+              category: "屏幕信息",
+              property: "获取结果",
+              value: result.success ? "获取成功，但解析失败" : "获取失败",
+            });
+          }
+        } else {
+          tableData.push({
+            category: "屏幕信息",
+            property: "获取结果",
+            value: result.success ? "获取成功，但数据格式异常" : "获取失败",
+          });
+        }
+      } else if (toolName === "self.get_system_info") {
+        // 解析系统信息
+        if (
+          result.success &&
+          result.data &&
+          result.data.content &&
+          result.data.content[0] &&
+          result.data.content[0].text
+        ) {
+          try {
+            const systemInfo = JSON.parse(result.data.content[0].text);
+
+            // 基本信息
+            if (systemInfo.chip_model_name) {
+              tableData.push({
+                category: "硬件信息",
+                property: "芯片型号",
+                value: systemInfo.chip_model_name.toUpperCase(),
+              });
+            }
+
+            if (systemInfo.chip_info) {
+              if (systemInfo.chip_info.cores) {
+                tableData.push({
+                  category: "硬件信息",
+                  property: "CPU核心数",
+                  value: systemInfo.chip_info.cores + "核",
+                });
+              }
+              if (systemInfo.chip_info.revision) {
+                tableData.push({
+                  category: "硬件信息",
+                  property: "芯片版本",
+                  value: "Rev " + systemInfo.chip_info.revision,
+                });
+              }
+            }
+
+            if (systemInfo.flash_size) {
+              tableData.push({
+                category: "硬件信息",
+                property: "Flash大小",
+                value: (systemInfo.flash_size / 1024 / 1024).toFixed(0) + " MB",
+              });
+            }
+
+            // 内存信息
+            if (systemInfo.minimum_free_heap_size) {
+              tableData.push({
+                category: "内存信息",
+                property: "最小可用堆",
+                value:
+                  (parseInt(systemInfo.minimum_free_heap_size) / 1024).toFixed(0) + " KB",
+              });
+            }
+
+            // 应用信息
+            if (systemInfo.application) {
+              if (systemInfo.application.name) {
+                tableData.push({
+                  category: "应用信息",
+                  property: "应用名称",
+                  value: systemInfo.application.name,
+                });
+              }
+              if (systemInfo.application.version) {
+                tableData.push({
+                  category: "应用信息",
+                  property: "应用版本",
+                  value: systemInfo.application.version,
+                });
+              }
+              if (systemInfo.application.compile_time) {
+                tableData.push({
+                  category: "应用信息",
+                  property: "编译时间",
+                  value: systemInfo.application.compile_time,
+                });
+              }
+              if (systemInfo.application.idf_version) {
+                tableData.push({
+                  category: "应用信息",
+                  property: "IDF版本",
+                  value: systemInfo.application.idf_version,
+                });
+              }
+            }
+
+            // 网络信息
+            if (systemInfo.mac_address) {
+              tableData.push({
+                category: "网络信息",
+                property: "MAC地址",
+                value: systemInfo.mac_address,
+              });
+            }
+
+            if (systemInfo.board) {
+              if (systemInfo.board.ip) {
+                tableData.push({
+                  category: "网络信息",
+                  property: "IP地址",
+                  value: systemInfo.board.ip,
+                });
+              }
+              if (systemInfo.board.ssid) {
+                tableData.push({
+                  category: "网络信息",
+                  property: "WiFi名称",
+                  value: systemInfo.board.ssid,
+                });
+              }
+              if (systemInfo.board.rssi) {
+                const signalStrength = systemInfo.board.rssi;
+                let signalLevel = "弱";
+                if (signalStrength > -50) signalLevel = "强";
+                else if (signalStrength > -70) signalLevel = "中";
+
+                tableData.push({
+                  category: "网络信息",
+                  property: "信号强度",
+                  value: `${signalStrength} dBm (${signalLevel})`,
+                });
+              }
+              if (systemInfo.board.channel) {
+                tableData.push({
+                  category: "网络信息",
+                  property: "WiFi信道",
+                  value: systemInfo.board.channel + "频道",
+                });
+              }
+            }
+
+            // 显示信息
+            if (systemInfo.display) {
+              if (systemInfo.display.width && systemInfo.display.height) {
+                tableData.push({
+                  category: "显示信息",
+                  property: "屏幕尺寸",
+                  value: `${systemInfo.display.width} × ${systemInfo.display.height}`,
+                });
+              }
+              if (systemInfo.display.monochrome !== undefined) {
+                tableData.push({
+                  category: "显示信息",
+                  property: "屏幕类型",
+                  value: systemInfo.display.monochrome ? "单色屏" : "彩色屏",
+                });
+              }
+            }
+
+            // 其他信息
+            if (systemInfo.uuid) {
+              tableData.push({
+                category: "设备信息",
+                property: "设备UUID",
+                value: systemInfo.uuid,
+              });
+            }
+
+            if (systemInfo.language) {
+              tableData.push({
+                category: "设备信息",
+                property: "系统语言",
+                value: systemInfo.language,
+              });
+            }
+
+            if (systemInfo.ota && systemInfo.ota.label) {
+              tableData.push({
+                category: "系统信息",
+                property: "当前OTA分区",
+                value: systemInfo.ota.label,
+              });
+            }
+          } catch (parseError) {
+            // 解析失败时显示原始信息
+            tableData.push({
+              category: "系统信息",
+              property: "获取结果",
+              value: result.success ? "获取成功，但解析失败" : "获取失败",
+            });
+          }
+        } else {
+          tableData.push({
+            category: "系统信息",
+            property: "获取结果",
+            value: result.success ? "获取成功，但数据格式异常" : "获取失败",
+          });
+        }
+      }
+
+      return tableData;
+    },
     async initTools() {
       if (!this.deviceId) {
         return;
       }
 
       this.toolsLoading = true;
-      
+
       try {
         // 调用设备指令API获取工具列表
         const mcpRequest = {
-          "type": "mcp",
-          "payload": {
-            "jsonrpc": "2.0",
-            "id": 2,
-            "method": "tools/list",
-            "params": {
-              "withUserTools": true
-            }
-          }
+          type: "mcp",
+          payload: {
+            jsonrpc: "2.0",
+            id: 2,
+            method: "tools/list",
+            params: {
+              withUserTools: true,
+            },
+          },
         };
 
         Api.device.sendDeviceCommand(this.deviceId, mcpRequest, ({ data }) => {
@@ -226,17 +657,27 @@ export default {
             try {
               // 解析返回的工具列表数据
               const responseData = JSON.parse(data.data);
-              
+
               // 检查两种可能的数据格式
               let tools = null;
-              if (responseData && responseData.payload && responseData.payload.result && responseData.payload.result.tools) {
+              if (
+                responseData &&
+                responseData.payload &&
+                responseData.payload.result &&
+                responseData.payload.result.tools
+              ) {
                 // 标准MCP格式
                 tools = responseData.payload.result.tools;
-              } else if (responseData && responseData.success && responseData.data && responseData.data.tools) {
+              } else if (
+                responseData &&
+                responseData.success &&
+                responseData.data &&
+                responseData.data.tools
+              ) {
                 // 设备返回的格式
                 tools = responseData.data.tools;
               }
-              
+
               if (tools && Array.isArray(tools) && tools.length > 0) {
                 this.toolList = tools;
                 // 默认选择第一个工具
@@ -264,19 +705,49 @@ export default {
     },
 
     initToolParams() {
+      // 清空现有参数
       this.toolParams = {};
-      if (this.selectedTool && this.selectedTool.inputSchema && this.selectedTool.inputSchema.properties) {
-        Object.keys(this.selectedTool.inputSchema.properties).forEach(key => {
-          // 根据工具名称和参数名设置默认值
-          if (this.selectedTool.name === 'self.audio_speaker.set_volume' && key === 'volume') {
-            this.toolParams[key] = 100; // 音量默认值设为100
-          } else if (this.selectedTool.name === 'self.screen.set_brightness' && key === 'brightness') {
-            this.toolParams[key] = 100; // 亮度默认值设为100
-          } else if (this.selectedTool.name === 'self.screen.set_theme' && key === 'theme') {
-            this.toolParams[key] = 'light'; // 主题默认值设为light
-          } else {
-            this.toolParams[key] = '';
-          }
+
+      if (
+        this.selectedTool &&
+        this.selectedTool.inputSchema &&
+        this.selectedTool.inputSchema.properties
+      ) {
+        // 使用 $nextTick 确保在下一个 tick 中设置参数值，避免响应式更新冲突
+        this.$nextTick(() => {
+          const newParams = {};
+          Object.keys(this.selectedTool.inputSchema.properties).forEach((key) => {
+            // 根据工具名称和参数名设置默认值
+            if (
+              this.selectedTool.name === "self.audio_speaker.set_volume" &&
+              key === "volume"
+            ) {
+              newParams[key] = 100; // 音量默认值设为100
+            } else if (
+              this.selectedTool.name === "self.screen.set_brightness" &&
+              key === "brightness"
+            ) {
+              newParams[key] = 100; // 亮度默认值设为100
+            } else if (
+              this.selectedTool.name === "self.screen.set_theme" &&
+              key === "theme"
+            ) {
+              newParams[key] = "light"; // 主题默认值设为light
+            } else {
+              // 对于字符串类型的参数，设置为空字符串，对于数字类型设置为 null
+              const property = this.selectedTool.inputSchema.properties[key];
+              if (property.type === "string") {
+                newParams[key] = "";
+              } else if (property.type === "integer") {
+                newParams[key] = property.minimum || 0;
+              } else {
+                newParams[key] = "";
+              }
+            }
+          });
+
+          // 一次性设置所有参数，避免多次触发响应式更新
+          this.toolParams = { ...newParams };
         });
       }
       this.executionResult = null;
@@ -284,40 +755,58 @@ export default {
 
     generateToolParamsRules() {
       this.toolParamsRules = {};
-      if (this.selectedTool && this.selectedTool.inputSchema && this.selectedTool.inputSchema.properties) {
+      if (
+        this.selectedTool &&
+        this.selectedTool.inputSchema &&
+        this.selectedTool.inputSchema.properties
+      ) {
         const requiredFields = this.selectedTool.inputSchema.required || [];
 
-        Object.keys(this.selectedTool.inputSchema.properties).forEach(key => {
+        Object.keys(this.selectedTool.inputSchema.properties).forEach((key) => {
           const property = this.selectedTool.inputSchema.properties[key];
           const rules = [];
 
           if (requiredFields.includes(key)) {
-            rules.push({ required: true, message: this.$t('mcpToolCall.requiredField', { field: this.formatPropertyLabel(key, property) }), trigger: 'blur' });
+            rules.push({
+              required: true,
+              message: this.$t("mcpToolCall.requiredField", {
+                field: this.formatPropertyLabel(key, property),
+              }),
+              trigger: "blur",
+            });
           }
 
-          if (property.type === 'integer') {
+          if (property.type === "integer") {
             if (property.minimum !== undefined) {
               rules.push({
                 validator: (rule, value, callback) => {
                   if (value < property.minimum) {
-                    callback(new Error(this.$t('mcpToolCall.minValue', { value: property.minimum })));
+                    callback(
+                      new Error(
+                        this.$t("mcpToolCall.minValue", { value: property.minimum })
+                      )
+                    );
                   } else {
                     callback();
                   }
                 },
-                trigger: 'blur'
+                trigger: "blur",
               });
             }
             if (property.maximum !== undefined) {
               rules.push({
                 validator: (rule, value, callback) => {
                   if (value > property.maximum) {
-                    callback(new Error(this.$t('mcpToolCall.maxValue', { value: property.maximum })));
+                    callback(
+                      new Error(
+                        this.$t("mcpToolCall.maxValue", { value: property.maximum })
+                      )
+                    );
                   } else {
                     callback();
                   }
                 },
-                trigger: 'blur'
+                trigger: "blur",
               });
             }
           }
@@ -330,12 +819,12 @@ export default {
     formatPropertyLabel(key, property) {
       // 将属性名转换为更友好的中文标签
       const labelMap = {
-        'volume': '音量',
-        'brightness': '亮度',
-        'theme': '主题',
-        'question': '问题',
-        'url': '网址',
-        'quality': '质量'
+        volume: "音量",
+        brightness: "亮度",
+        theme: "主题",
+        question: "问题",
+        url: "网址",
+        quality: "质量",
       };
       return labelMap[key] || key;
     },
@@ -343,91 +832,106 @@ export default {
     // 获取工具的显示名称
     getToolDisplayName(toolName) {
       const nameMap = {
-        'self.get_device_status': '查看设备状态',
-        'self.audio_speaker.set_volume': '设置音量',
-        'self.screen.set_brightness': '设置亮度',
-        'self.screen.set_theme': '设置主题',
-        'self.camera.take_photo': '拍照识别',
-        'self.get_system_info': '系统信息',
-        'self.reboot': '重启设备',
-        'self.upgrade_firmware': '升级固件',
-        'self.screen.get_info': '屏幕信息',
-        'self.screen.snapshot': '屏幕截图',
-        'self.screen.preview_image': '预览图片',
-        'self.assets.set_download_url': '设置下载地址'
+        "self.get_device_status": "查看设备状态",
+        "self.audio_speaker.set_volume": "设置音量",
+        "self.screen.set_brightness": "设置亮度",
+        "self.screen.set_theme": "设置主题",
+        "self.camera.take_photo": "拍照识别",
+        "self.get_system_info": "系统信息",
+        "self.reboot": "重启设备",
+        "self.upgrade_firmware": "升级固件",
+        "self.screen.get_info": "屏幕信息",
+        "self.screen.snapshot": "屏幕截图",
+        "self.screen.preview_image": "预览图片",
+        "self.assets.set_download_url": "设置下载地址",
       };
       return nameMap[toolName] || toolName;
     },
 
     // 获取工具分类
     getToolCategory(toolName) {
-      if (toolName.includes('audio_speaker')) return '音频';
-      if (toolName.includes('screen')) return '显示';
-      if (toolName.includes('camera')) return '拍摄';
-      if (toolName.includes('system') || toolName.includes('reboot') || toolName.includes('upgrade')) return '系统';
-      if (toolName.includes('assets')) return '资源';
-      return '设备信息';
+      if (toolName.includes("audio_speaker")) return "音频";
+      if (toolName.includes("screen")) return "显示";
+      if (toolName.includes("camera")) return "拍摄";
+      if (
+        toolName.includes("system") ||
+        toolName.includes("reboot") ||
+        toolName.includes("upgrade")
+      )
+        return "系统";
+      if (toolName.includes("assets")) return "资源";
+      return "设备信息";
     },
 
     // 获取简化的工具描述
     getSimpleDescription(originalDesc) {
       // 移除代码格式和复杂说明，保留核心功能描述
-      return originalDesc.split('\n')[0].replace(/`/g, '');
+      return originalDesc.split("\n")[0].replace(/`/g, "");
     },
 
     // 获取工具帮助文本
     getToolHelpText(toolName) {
       const helpMap = {
-        'self.get_device_status': '查看设备的当前运行状态，包括音量、屏幕、电池等信息。',
-        'self.audio_speaker.set_volume': '调整设备的音量大小，请输入0-100之间的数值。',
-        'self.screen.set_brightness': '调整设备屏幕的亮度，请输入0-100之间的数值。',
-        'self.screen.set_theme': '切换设备屏幕的显示主题，可以选择浅色或深色模式。',
-        'self.camera.take_photo': '使用设备摄像头拍摄照片并进行识别分析，请输入要询问的问题。',
-        'self.get_system_info': '获取设备的系统信息，包括硬件规格、软件版本等。',
-        'self.reboot': '重启设备，执行后设备将重新启动。',
-        'self.upgrade_firmware': '从指定URL下载并升级设备固件，升级后设备会自动重启。',
-        'self.screen.get_info': '获取屏幕的详细信息，如分辨率、尺寸等参数。',
-        'self.screen.snapshot': '对当前屏幕进行截图并上传到指定URL。',
-        'self.screen.preview_image': '在设备屏幕上预览指定URL的图片。',
-        'self.assets.set_download_url': '设置设备资源文件的下载地址。'
+        "self.get_device_status": "查看设备的当前运行状态，包括音量、屏幕、电池等信息。",
+        "self.audio_speaker.set_volume": "调整设备的音量大小，请输入0-100之间的数值。",
+        "self.screen.set_brightness": "调整设备屏幕的亮度，请输入0-100之间的数值。",
+        "self.screen.set_theme": "切换设备屏幕的显示主题，可以选择浅色或深色模式。",
+        "self.camera.take_photo":
+          "使用设备摄像头拍摄照片并进行识别分析，请输入要询问的问题。",
+        "self.get_system_info": "获取设备的系统信息，包括硬件规格、软件版本等。",
+        "self.reboot": "重启设备，执行后设备将重新启动。",
+        "self.upgrade_firmware": "从指定URL下载并升级设备固件，升级后设备会自动重启。",
+        "self.screen.get_info": "获取屏幕的详细信息，如分辨率、尺寸等参数。",
+        "self.screen.snapshot": "对当前屏幕进行截图并上传到指定URL。",
+        "self.screen.preview_image": "在设备屏幕上预览指定URL的图片。",
+        "self.assets.set_download_url": "设置设备资源文件的下载地址。",
       };
-      return helpMap[toolName] || '';
+      return helpMap[toolName] || "";
     },
 
     executeTool() {
       if (!this.selectedTool) {
-        this.$message.warning(this.$t('mcpToolCall.selectTool'));
+        this.$message.warning(this.$t("mcpToolCall.selectTool"));
         return;
       }
 
       // 验证必填参数
       const requiredFields = this.selectedTool.inputSchema.required || [];
       for (const field of requiredFields) {
-        if (this.toolParams[field] === undefined || this.toolParams[field] === null || this.toolParams[field] === '') {
-          this.$message.warning(this.$t('mcpToolCall.requiredField', { field: this.formatPropertyLabel(field, this.selectedTool.inputSchema.properties[field]) }));
+        if (
+          this.toolParams[field] === undefined ||
+          this.toolParams[field] === null ||
+          this.toolParams[field] === ""
+        ) {
+          this.$message.warning(
+            this.$t("mcpToolCall.requiredField", {
+              field: this.formatPropertyLabel(
+                field,
+                this.selectedTool.inputSchema.properties[field]
+              ),
+            })
+          );
           return;
         }
       }
 
       // 构建MCP执行字符串
       const mcpExecuteString = {
-        "type": "mcp",
-        "payload": {
-          "jsonrpc": "2.0",
-          "id": 1,
-          "method": "tools/call",
-          "params": {
-            "name": this.selectedToolName,
-            "arguments": this.toolParams
-          }
-        }
+        type: "mcp",
+        payload: {
+          jsonrpc: "2.0",
+          id: 1,
+          method: "tools/call",
+          params: {
+            name: this.selectedToolName,
+            arguments: this.toolParams,
+          },
+        },
       };
 
       // 显示执行中状态
       this.executionResult = {
-        status: 'executing',
-        message: '正在执行工具...',
-        request: mcpExecuteString
+        request: mcpExecuteString,
       };
 
       // 调用设备执行工具
@@ -436,26 +940,63 @@ export default {
           try {
             // 解析设备返回的结果
             const deviceResult = JSON.parse(data.data);
+
+            // 检查是否为预定义工具，决定展示方式
+            if (this.isPredefinedTool(this.selectedToolName)) {
+              this.showResultAsTable = true;
+
+              // 解析表格数据
+              if (
+                this.selectedToolName === "self.get_device_status" &&
+                deviceResult.success &&
+                deviceResult.data &&
+                deviceResult.data.content &&
+                deviceResult.data.content[0] &&
+                deviceResult.data.content[0].text
+              ) {
+                try {
+                  const deviceData = JSON.parse(deviceResult.data.content[0].text);
+                  this.tableData = this.parseDeviceStatusToTable(deviceData);
+                } catch (parseError) {
+                  // 如果解析失败，回退到JSON模式
+                  this.showResultAsTable = false;
+                  this.tableData = [];
+                }
+              } else {
+                // 其他预定义工具的表格解析
+                this.tableData = this.parseOtherResultToTable(
+                  this.selectedToolName,
+                  deviceResult
+                );
+              }
+            } else {
+              // 非预定义工具，使用JSON模式
+              this.showResultAsTable = false;
+              this.tableData = [];
+            }
+
             this.executionResult = {
-              status: 'success',
+              status: "success",
               response: deviceResult,
-              timestamp: new Date().toLocaleString()
+              timestamp: new Date().toLocaleString(),
             };
           } catch (error) {
+            this.showResultAsTable = false;
+            this.tableData = [];
             this.executionResult = {
-              status: 'error',
+              status: "error",
               request: mcpExecuteString,
-              error: '解析设备响应失败: ' + error.message,
+              error: "解析设备响应失败: " + error.message,
               rawResponse: data.data,
-              timestamp: new Date().toLocaleString()
+              timestamp: new Date().toLocaleString(),
             };
           }
         } else {
           this.executionResult = {
-            status: 'error',
+            status: "error",
             request: mcpExecuteString,
-            error: data.msg || '执行失败',
-            timestamp: new Date().toLocaleString()
+            error: data.msg || "执行失败",
+            timestamp: new Date().toLocaleString(),
           };
         }
       });
@@ -470,16 +1011,18 @@ export default {
     },
 
     closeDialog() {
-      this.$emit('update:visible', false);
-      this.selectedToolName = '';
+      this.$emit("update:visible", false);
+      this.selectedToolName = "";
       this.toolParams = {};
       this.toolParamsRules = {};
-      this.toolSearchKeyword = '';
+      this.toolSearchKeyword = "";
       this.executionResult = null;
       this.toolsLoading = false;
-    }
-  }
-}
+      this.showResultAsTable = false;
+      this.tableData = [];
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -650,7 +1193,7 @@ export default {
   background: #5778ff;
 }
 
-::v-deep .el-radio__input.is-checked+.el-radio__label {
+::v-deep .el-radio__input.is-checked + .el-radio__label {
   color: #5778ff;
 }
 
@@ -707,7 +1250,7 @@ export default {
 /* 参数设置区域 */
 .params-section {
   padding: 0px 20px 20px 20px;
-  flex: 1;
+  flex: 0.8;
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -790,10 +1333,10 @@ export default {
   padding: 20px;
   background: #fafafa;
   border-top: 1px solid #e4e7ed;
-  max-height: 200px;
+  flex: 1;
   display: flex;
   flex-direction: column;
-  min-height: 150px;
+  min-height: 200px;
 }
 
 .result-title {
@@ -820,6 +1363,32 @@ export default {
   border-radius: 8px;
   padding: 12px;
   position: relative;
+  overflow: hidden;
+}
+
+.result-table {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.result-table ::v-deep .el-table {
+  font-size: 12px;
+}
+
+.result-table ::v-deep .el-table__body-wrapper {
+  max-height: none !important;
+}
+
+.result-table ::v-deep .el-table th {
+  background: #f8f9fa;
+  color: #606266;
+  font-weight: 600;
+  padding: 8px 0;
+}
+
+.result-table ::v-deep .el-table td {
+  padding: 6px 0;
 }
 
 .result-text {
@@ -830,11 +1399,10 @@ export default {
   border: 1px solid #e4e7ed;
   border-radius: 4px;
   font-size: 12px;
-  font-family: 'Courier New', monospace;
+  font-family: "Courier New", monospace;
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-y: auto;
-  max-height: 120px;
   text-align: left;
 }
 
@@ -984,4 +1552,4 @@ export default {
     max-height: 400px;
   }
 }
-</style>
\ No newline at end of file
+</style>