update

src/App.vue

@@ -7,21 +7,41 @@
         @click="actionMenuItemClick" style="white-space: normal;">
       </a-menu>
     </a-layout-sider>
+
     <a-layout :style="{ marginLeft: '0px' }">
-      <a-layout-content :style="{ height: '40px' }">
+      <a-layout-content :style="{ maxHeight: '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' }">
+        <div :style="{ padding: '15px' }">
           <service-configuration :service-key="activeServiceKey"></service-configuration>
         </div>
       </a-layout-content>
     </a-layout>
+
   </a-layout>
 
+  <!-- <template>
+    <a-list item-layout="horizontal" :data-source="data" hidden = "true">
+      <template #renderItem="{ item }">
+        <a-list-item>
+          <a-list-item-meta
+            description="">
+            <template #title>
+              <a >{{ item.title }}</a>
+            </template>
+            <template #avatar>
+              <a-avatar  />
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </template> -->
+
 </template>
 <script setup>
 import { onMounted, ref, h } from 'vue';
@@ -77,36 +97,7 @@ function setupEventWebSocket() {
     });
   };
 }
-// {
-//     "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');
@@ -134,9 +125,14 @@ function setupStateUpdateWebSocket() {
 }
 
 function showMessageBoxList() {
+  const listItems = messageBoxList.value.map(item => {
+    const time = new Date(item.time).toLocaleString();
+    return `${time} - ${item.message}`;
+  });
+
   Modal.info({
     title: 'Message Box List',
-    content: h(VueJsonPretty, { data: messageBoxList.value, deep: 2 }),
+    content: h('div', { style: { maxHeight: '400px', overflowY: 'auto' } }, listItems.map(message => h('p', message))),
     width: 600,
   });
 }