update

src/App.vue

@@ -4,10 +4,16 @@
       :style="{ overflow: 'auto', height: '100vh', left: 0, top: 0, bottom: 0 }">
 
       <a-menu theme="dark" mode="inline" v-model:selectedKeys="menuSelectedKeys" :items="menuItems"
-        @click="actionMenuItemClick"  style="white-space: normal;">
+        @click="actionMenuItemClick" style="white-space: normal;">
       </a-menu>
     </a-layout-sider>
     <a-layout :style="{ marginLeft: '0px' }">
+      <a-layout-content :style="{ height: '40px' }">
+        <!-- 显示消息 -->
+        <input v-model="message" type="text" :style="{ width: '100%', height: '100%', color: messageColor }"
+          @click="showMessageBoxList" placeholder="显示消息" />
+      </a-layout-content>
+
       <a-layout-content :style="{ overflow: 'auto' }">
         <div :style="{ padding: '15px', height: '100vh' }">
           <service-configuration :service-key="activeServiceKey"></service-configuration>
@@ -18,15 +24,22 @@
 
 </template>
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, h } from 'vue';
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfiguration from './components/ServiceConfiguration.vue';
+import { Modal } from 'ant-design-vue';
+import VueJsonPretty from 'vue-json-pretty';
+
 // service menu items
 const menuItems = ref([]);
 /** @var {string} */
 const activeServiceKey = ref(null);
 /** @var {Boolean} */
 const isSiderCollapsed = ref(false);
+const message = ref(''); // 添加一个响应式变量来存储消息
+const messageColor = ref('black'); // 添加一个响应式变量来存储消息颜色
+const messageBoxList = ref([]); // 添加一个响应式变量来存储消息列表
+
 // on mounted
 onMounted(mounted);
 
@@ -36,6 +49,9 @@ async function mounted() {
   let services = await ApiClient.getClient().call('service-config/service-list');
   menuItems.value = services;
   activeServiceKey.value = null;
+
+  setupEventWebSocket();
+  setupStateUpdateWebSocket();
 }
 
 // handle menu item click
@@ -43,19 +59,92 @@ function actionMenuItemClick(event) {
   // console.log('actionMenuItemClick', event);
   console.log('actionMenuItemClick', event.item.key);
   activeServiceKey.value = event.key;
+
 }
 
 // handle open change
 function handleOpenChange(keys) {
   openKeys.value = keys.length ? [keys[keys.length - 1]] : [];
 }
+function setupEventWebSocket() {
+  const ws = new WebSocket('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: wsEventData.value, deep: 2 }),
+      width: 600,
+    });
+  };
+}
+// {
+//     "messageType": "Report",
+//     "dataType": "MessageBoxState",
+//     "data": {
+//         "topMessage": {
+//             "time": 1736148598278,
+//             "messageLevel": "Info",
+//             "message": "你好"
+//         },
+//         "messageBoxList": [
+//             {
+//                 "time": 1736148598278,//UTC ms
+//                 "messageLevel": "Info",//Level,Info,Warn,Error
+//                 "message": "你好"
+//             },
+//             {
+//                 "time": 1736148589557,
+//                 "messageLevel": "Info",
+//                 "message": "你好"
+//             },
+//             {
+//                 "time": 1736147915685,
+//                 "messageLevel": "Info",
+//                 "message": "系统启动"
+//             }
+//         ],
+//         "stateVersion": 3
+//     },
+//     "timestamp": 1736148598
+// }
+
+function setupStateUpdateWebSocket() {
+  const ws = new WebSocket('ws://localhost:80/api/v1/app/ws/state');
+  ws.onmessage = (event) => {
+    const data = JSON.parse(event.data);
+    if (data.messageType === 'Report' && data.dataType === 'MessageBoxState') {
+      const time = new Date(data.data.topMessage.time).toLocaleString();
+      message.value = `${time} - ${data.data.topMessage.message}`;
+      messageBoxList.value = data.data.messageBoxList;
+      switch (data.data.topMessage.messageLevel) {
+        case 'Info':
+          messageColor.value = 'blue';
+          break;
+        case 'Warn':
+          messageColor.value = 'orange';
+          break;
+        case 'Error':
+          messageColor.value = 'red';
+          break;
+        default:
+          messageColor.value = 'black';
+      }
+    }
+  };
+}
 
+function showMessageBoxList() {
+  Modal.info({
+    title: 'Message Box List',
+    content: h(VueJsonPretty, { data: messageBoxList.value, deep: 2 }),
+    width: 600,
+  });
+}
 </script>
 
 <style scoped>
-
 ::-webkit-scrollbar {
-/*隐藏滚轮*/
-display: none;
+  /*隐藏滚轮*/
+  display: none;
 }
-</style>
+</style>