优化页面显示

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout class="h-full">
-    <a-layout-sider collapsible>
+    <a-layout-sider collapsible v-model:collapsed="isSiderCollapsed" @click="showSider">
       <a-menu class="h-full" 
         v-model:selectedKeys="menuSelectedKeys"
         :items="menuItems" 
@@ -9,7 +9,7 @@
       ></a-menu>
     </a-layout-sider>
     <a-layout>
-      <a-layout-content>
+      <a-layout-content @click="hideSider">
         <service-configuration :service-key="activeServiceKey"></service-configuration>
       </a-layout-content>
     </a-layout>
@@ -35,6 +35,8 @@ const activeServiceKey = ref(null);
 const isGuest = ref(false);
 /** @var {String} */
 const password = ref('');
+/** @var {Boolean} */
+const isSiderCollapsed = ref(false);
 // on mounted
 onMounted(mounted);
 
@@ -56,6 +58,15 @@ function actionMenuItemClick( event ) {
     activeServiceKey.value = event.item.id;
 }
 
+// hide sider
+function hideSider() {
+    isSiderCollapsed.value = true;
+}
+
+function showSider() {
+    isSiderCollapsed.value = false;
+}
+
 // verify passoed
 function actionVerifyPassword() {
     if ( 'zwsdzwsd' === password.value ) {

src/components/ServiceConfiguration.vue

@@ -1,46 +1,12 @@
 <template>
   <div class="h-full flex flex-col">
-    <a-row class="h-0 grow">
-      <a-col class="border-r h-full overflow-y-auto" :span="16">
+    <div class="flex-grow">
       <service-configuration-status-viewer :service-key="props.serviceKey" />
-
-        <div class="p-5 border-t border-b" v-if="0 < params.length">
-          <div class="flex flex-row flex-wrap">
-            <div v-for="group in params" :key="group.name" class="p-1" style="min-width: 30%;">
-              <fieldset class="border h-full">
-                <legend class="px-3">{{ group.name }}</legend>
-                <table class="w-full">
-                  <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">
-                      <service-configuration-param-value-edit 
-                        :param="item" 
-                        v-model:value="item.value"
-                        @save-request="actionServiceParamSave"  
-                      ></service-configuration-param-value-edit>
-                    </td>
-                  </tr>
-                </table>
-              </fieldset>
-            </div>
-          </div>
-          <div class="p-1 text-right">
-            <a-button class="mr-1" @click="actionServiceParamReset">重置</a-button>
-            <a-button class="mr-1" @click="actionServiceParamReload">刷新</a-button>
-            <a-button @click="actionServiceParamSave">保存</a-button>
-          </div>
-        </div>
-
-        <div class="p-3">
       <service-configuration-actions v-model:actionLog="actionLog" :service-key="props.serviceKey" />
     </div>
-      </a-col>
-      <a-col :span="8" class="h-full flex flex-col">
-        <div class="h-0 grow p-5">
-          <service-configuration-action-log :log="actionLog"/>
+    <div class="flex-none" style="display: none;">
+      <service-configuration-action-log :log="actionLog" />
     </div>
-      </a-col>
-    </a-row>
   </div>
 </template>
 <script setup>
@@ -52,7 +18,7 @@ import ServiceConfigurationStatusViewer from './ServiceConfigurationStatusViewer
 import ServiceConfigurationActions from './ServiceConfigurationActions.vue'
 /** @var {Object} */
 const props = defineProps({
-    serviceKey : String,
+  serviceKey: String,
 });
 /** @var {Array} */
 const params = ref([]);
@@ -63,8 +29,8 @@ watch(() => props.serviceKey, handleServiceKeyChange);
 
 // on mounted
 async function handleServiceKeyChange() {
-    if ( null === props.serviceKey ) {
-        return ;
+  if (null === props.serviceKey) {
+    return;
   }
 
   await actionServiceParamReload();
@@ -75,43 +41,21 @@ async function actionServiceParamReload() {
   try {
     params.value = [];
     let client = ApiClient.getClient();
-        let list = await client.call('service-config/service-params-list', {serviceKey:props.serviceKey});
-        for ( var item of list ) {
+    let list = await client.call('service-config/service-params-list', { serviceKey: props.serviceKey });
+    for (var item of list) {
       let groupName = item.group;
-            let group = params.value.find( i => i.name === groupName);
-            if ( undefined === group ) {
-                group = {name:groupName, items:[], order:0};
+      let group = params.value.find(i => i.name === groupName);
+      if (undefined === group) {
+        group = { name: groupName, items: [], order: 0 };
         group.order = Math.max(group.order, item.order);
         params.value.push(group);
       }
       group.items.push(item);
     }
-        params.value.map(g => g.items.sort((a,b) => a.order - b.order));
-        params.value.sort((a,b) => a.order - b.order || b.items.length - a.items.length || b.name.localeCompare(a.name));
-    } catch ( e ) {/** nothing to do here */}
+    params.value.map(g => g.items.sort((a, b) => a.order - b.order));
+    params.value.sort((a, b) => a.order - b.order || b.items.length - a.items.length || b.name.localeCompare(a.name));
+  } catch (e) {/** nothing to do here */ }
 }
 
-// service param save
-async function actionServiceParamSave() {
-    try {
-        let values = {};
-        for ( let group of params.value ) {
-            for ( let item of group.items ) {
-                values[item.key] = item.value;
-            }
-        }
-        let client = ApiClient.getClient();
-        await client.call('service-config/service-params-update', {serviceKey:props.serviceKey,params:values});
-        await actionServiceParamReload();
-    } catch ( e ) {/** nothing to do here */}
-}
 
-// service param reset
-async function actionServiceParamReset() {
-    try {
-        let client = ApiClient.getClient();
-        await client.call('service-config/service-params-reset', {serviceKey:props.serviceKey});
-        await actionServiceParamReload();
-    } catch ( e ) {/** nothing to do here */}
-}
 </script>

src/components/ServiceConfigurationActionLog.vue

@@ -11,10 +11,11 @@
       </div>
     </div>
 
-    <div class="border rounded p-3 whitespace-pre bg-white mb-3 h-0 grow overflow-y-auto">
-      <div>响应内容：</div>
-      <div class="select-all">{{ JSON.stringify(props.log.response, null, 2) }}</div>
+    <a-modal v-model:open="reultDisplay" title="" width="90%" @ok="reultDisplay = false">
+      <div class="border rounded p-3 whitespace-pre bg-white mb-3 h-0 grow overflow-y-auto" style="height:600px;">
+        <div class="">{{ JSON.stringify(props.log.response, null, 2) }}</div>
       </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>
@@ -32,6 +33,7 @@ const props = defineProps({
 const chartContainer = ref(null);
 /** @var {Boolean} */
 const chartEnable = ref(false);
+const reultDisplay = ref(false);
 /** @var {echarts} */
 let chart = null;
 // watch log
@@ -134,6 +136,8 @@ async function handleLogChange() {
         },
       }]
     });
+  }else{
+    reultDisplay.value = true;
   }
 }
 </script>

src/components/ServiceConfigurationActions.vue

@@ -12,7 +12,7 @@
             <td>
               <div class="inline-block ml-2 relative" v-for="actionParam in action.params" :key="actionParam.key">
                 <div class="action-param-label">{{ actionParam.name }}</div>
-                <a-select v-if="'Boolean' === actionParam.type" v-model:value="actionParam.value"
+                <a-select v-if="'java.lang.Boolean' === actionParam.type" v-model:value="actionParam.value"
                   :dropdownMatchSelectWidth="false">
                   <a-select-option :value="true">TRUE</a-select-option>
                   <a-select-option :value="false">FALSE</a-select-option>