update

src/components/ServiceConfigurationActionLog.vue

@@ -12,8 +12,8 @@
     </div>
 
     <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  overflow-y-auto">
-        <vue-json-pretty :data="resultContent" :deep="5"></vue-json-pretty>
+      <div class="border rounded p-3 whitespace-pre bg-white mb-3 grow">
+        <vue-json-pretty :data="resultContent" :deep="5" :show-double-quotes="false" :show-key-value-space="false" :show-icon="true" :item-height="18" :style="{ maxHeight: '70vh', overflowY: 'auto' }"></vue-json-pretty>
       </div>
     </a-modal>
 

src/components/ServiceConfigurationStatusViewer.vue

@@ -1,17 +1,17 @@
 <template>
 <div class="flex flex-row flex-wrap p-5 bg-white">
-  <div v-for="group in statuses" :key="group.name" class="p-1" style="min-width: 20%;">
-    <fieldset class="border h-full">
+  <div  v-for="group in statuses" :key="group.name" class="p-1" :style="{ minWidth: group.minWidth } ">
+    <fieldset class="border " >
       <legend class="px-3">{{ group.name }}&nbsp;</legend>
       <table class="w-full">
-        <tr v-for="item in group.items" :key="item.key">
+        <tr  v-for="item in group.items" :key="item.key"  >
           <td class="py-1 px-2">{{ item.name }} </td>
           <td class="py-1 px-2">
             <template v-if="isBoolean(item.value)">
               <BulbOutlined class="align-text-bottom" :class="{'text-green-400':item.value}"/>
             </template>
             <template v-else-if="isObject(item.value)">
-              <vue-json-pretty :data="item.value" :deep="1" :show-double-quotes="false" :show-key-value-space="false" :show-icon="true" :item-height="18"></vue-json-pretty>
+              <vue-json-pretty :data="item.value" :deep="1" :show-double-quotes="false" :show-key-value-space="false" :show-icon="true" :item-height="18" :style="{ maxHeight: '20vh', overflowY: 'auto' }"></vue-json-pretty>
             </template>
             <span v-else>{{ item.value }}</span>
           </td>
@@ -69,7 +69,7 @@ async function refreshServiceStatusList() {
             let gname = item.group;
             let group = statuses.value.find(g => g.name == item.group);
             if ( undefined === group ) {
-                group = {name:gname, order:item.order, items:[]};
+                group = {name:gname, order:item.order, items:[], minWidth: item.minWidth};
                 statuses.value.push(group);
             }
             group.order = Math.max(group.order, item.order);
@@ -92,11 +92,11 @@ function isBoolean( value ) {
 
 // is object
 function isObject(value) {
-    return value && typeof value === 'object' && !Array.isArray(value);
+    return value && typeof value === 'object' ;
 }
 
 // format object
 function formatObject(value) {
     return JSON.stringify(value, null, 2);
 }
-</script>
+</script>