update

src/App.vue

@@ -3,12 +3,12 @@
     <a-layout-sider collapsible v-model:collapsed="isSiderCollapsed"
       :style="{ overflow: 'auto', height: '100vh', left: 0, top: 0, bottom: 0 }">
 
-      <a-menu theme="dark" mode="inline" v-model:selectedKeys="menuSelectedKeys" :items="menuItems" :inlineIndent="6"
+      <a-menu theme="dark" mode="inline" v-model:selectedKeys="menuSelectedKeys" :items="menuItems"
         @click="actionMenuItemClick" style="white-space: normal;">
       </a-menu>
     </a-layout-sider>
 
-    <a-layout :style="{ marginLeft: '0px', height: '100vh' }">
+    <a-layout :style="{ marginLeft: '0px' }">
       <a-layout-content :style="{ maxHeight: '40px' }">
         <!-- 显示消息 -->
         <input v-model="message" type="text" :style="{ width: '100%', height: '100%', color: messageColor }"
@@ -92,12 +92,22 @@ function setupEventWebSocket() {
   const ws = new WebSocket(process.env.NODE_ENV === 'production' ? `ws://${window.location.host}:80/api/v1/app/ws/event`
     : `ws://localhost:80/api/v1/app/ws/event`);
   ws.onmessage = (event) => {
-    // wsEventData.value = JSON.parse(event.data);
-    Modal.info({
-      title: 'WebSocket Event',
-      content: h(VueJsonPretty, { data: JSON.parse(event.data), deep: 2 }),
-      width: 600,
-    });
+    let report = JSON.parse(event.data);
+    console.info(report);
+    if (report.data.typeName === "AppPromptEvent") {
+      Modal.info({
+        title: 'PROMPT',
+        content: h(VueJsonPretty, { data: report.data.prompt, deep: 2 }),
+        width: 600,
+      });
+    } else {
+      Modal.info({
+        title: 'WebSocket Event',
+        content: h(VueJsonPretty, { data: report, deep: 2 }),
+        width: 600,
+      });
+    }
+
   };
 }
 

src/components/ServiceConfigurationActionLog.vue

@@ -11,15 +11,21 @@
       </div>
     </div>
 
-    <a-modal v-model:open="reultDisplay" title="结果"  @ok="reultDisplay = false" :closable="false">
+    <a-modal v-model:open="reultDisplay" title="结果" @ok="reultDisplay = false" :closable="false">
       <div class="border rounded p-3 whitespace-pre bg-white mb-3 grow" style="max-height: 80vh; overflow-y: auto;">
-        <vue-json-pretty :data="resultContent" :deep="5" :show-double-quotes="false" :show-key-value-space="false" :show-icon="true" :item-height="18"></vue-json-pretty>
+        <vue-json-pretty :data="resultContent" :deep="5" :show-double-quotes="false" :show-key-value-space="false"
+          :show-icon="true" :item-height="18"></vue-json-pretty>
       </div>
     </a-modal>
 
     <a-modal v-model:open="chartEnable" title="曲线" width="90%" @ok="chartEnable = false">
       <div ref="chartContainer" class="w-full bg-white mb-3 border rounded" style="height:600px;"></div>
     </a-modal>
+
+    <a-modal v-model:open="tableDisEnable" title="表单" width="90%" @ok="tableDisEnable = false">
+      <a-table :pagination=false  :scroll="{ y: '50vh' }" :columns="columns" :data-source="tableData" />
+    </a-modal>
+
   </div>
 </template>
 <script setup>
@@ -36,26 +42,34 @@ const chartContainer = ref(null);
 /** @var {Boolean} */
 const chartEnable = ref(false);
 const reultDisplay = ref(false);
+const tableDisEnable = ref(false);
 const resultContent = ref({});
+const tableData = ref([]);
+const columns = ref([]);
 /** @var {echarts} */
 let chart = null;
 // watch log
 watch(() => props.log, handleLogChange, { deep: true });
 
+
 // handle log change
 async function handleLogChange() {
-  chartEnable.value = false;
   if (null !== chart) {
     chart.dispose();
     chart = null;
   }
 
+  chartEnable.value = false;
+  reultDisplay.value = false;
+  tableDisEnable.value = false;
+
   if (null === props.log
     || undefined === props.log.response
     || null === props.log.response) {
     return;
   }
 
+
   if ('A8kScanCurve' === props.log.response.$dataType) {
     chartEnable.value = true;
     let minY = Math.min(...props.log.response.scanDataCurve) - 100;
@@ -139,7 +153,12 @@ async function handleLogChange() {
         },
       }]
     });
-  } else {
+  } else if ('ExtUiTable' === props.log.response.$dataType) {
+    tableDisEnable.value = true;
+    columns.value = props.log.response.columns;
+    tableData.value = props.log.response.datas;
+  }
+  else {
     resultContent.value = props.log.response;
     reultDisplay.value = true;
   }