update

src/App.vue

@@ -1,25 +1,21 @@
 <template>
-  <a-layout class="h-full">
-    <a-layout-sider collapsible v-model:collapsed="isSiderCollapsed">
-      <a-menu class="h-full" 
-        v-model:selectedKeys="menuSelectedKeys"
-        :items="menuItems" 
-        @click="actionMenuItemClick"
-        style="white-space: normal;"
-      ></a-menu>
+  <a-layout>
+    <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"
+        @click="actionMenuItemClick"  style="white-space: normal;">
+      </a-menu>
     </a-layout-sider>
-    <a-layout>
-      <a-layout-content>
-        <service-configuration :service-key="activeServiceKey"></service-configuration>
+    <a-layout :style="{ marginLeft: '0px' }">
+      <a-layout-content :style="{ overflow: 'auto' }">
+        <div :style="{ padding: '15px', height: '100vh' }">
+          <service-configuration :service-key="activeServiceKey"></service-configuration>
+        </div>
       </a-layout-content>
     </a-layout>
   </a-layout>
-  <a-modal :open="isGuest" :closable="false" title="操作认证">
-    <a-input-password v-model:value="password" />
-    <template #footer>
-      <a-button type="primary" @click="actionVerifyPassword">验证</a-button>
-    </template>
-  </a-modal>
+
 </template>
 <script setup>
 import { onMounted, ref } from 'vue';
@@ -27,50 +23,39 @@ import ApiClient from '@/utils/ApiClient';
 import ServiceConfiguration from './components/ServiceConfiguration.vue';
 // service menu items
 const menuItems = ref([]);
-/** @var {Array} */
-const menuSelectedKeys = ref([]);
 /** @var {string} */
 const activeServiceKey = ref(null);
 /** @var {Boolean} */
-const isGuest = ref(false);
-/** @var {String} */
-const password = ref('');
-/** @var {Boolean} */
 const isSiderCollapsed = ref(false);
 // on mounted
 onMounted(mounted);
 
 // on mounted
 async function mounted() {
-    menuItems.value = [];
-    let client = ApiClient.getClient();
-    let services = await client.call('service-config/service-list');
-    for ( let item of services ) {
-        menuItems.value.push({id:item.key, key:item.key, label:item.name, order:item.order});
-    }
-    menuItems.value.sort((a,b) => a.order - b.order);
-    activeServiceKey.value = menuItems.value[0].key;
-    menuSelectedKeys.value.push(activeServiceKey.value);
+  menuItems.value = [];
+  let services = await ApiClient.getClient().call('service-config/service-list');
+  menuItems.value = services;
+  activeServiceKey.value = null;
 }
 
 // handle menu item click
-function actionMenuItemClick( event ) {
-    activeServiceKey.value = event.item.id;
+function actionMenuItemClick(event) {
+  // console.log('actionMenuItemClick', event);
+  console.log('actionMenuItemClick', event.item.key);
+  activeServiceKey.value = event.key;
 }
 
-// hide sider
-function hideSider() {
-    isSiderCollapsed.value = true;
+// handle open change
+function handleOpenChange(keys) {
+  openKeys.value = keys.length ? [keys[keys.length - 1]] : [];
 }
 
-function showSider() {
-    isSiderCollapsed.value = false;
-}
+</script>
+
+<style scoped>
 
-// verify passoed
-function actionVerifyPassword() {
-    if ( 'zwsdzwsd' === password.value ) {
-        isGuest.value = false;
-    }
+::-webkit-scrollbar {
+/*隐藏滚轮*/
+display: none;
 }
-</script>
+</style>

src/components/ServiceConfigurationStatusViewer.vue

@@ -11,13 +11,11 @@
                 <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"
-                    :style="{ maxHeight: '20vh', overflowY: 'auto' }"></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>
-              <p v-else class="p-style"   readonly
-               >{{item.value}}</p>
+              <p v-else class="p-style" readonly>{{ item.value }}</p>
 
             </td>
           </tr>

src/utils/ApiClient.js

@@ -18,7 +18,7 @@ export default class ApiClient {
     async call( name, params={} ) {
         let response = await axios({
             method: 'post',
-            url: process.env.NODE_ENV === 'production' ? `/api/${name}` : `http://localhost:8080/api/${name}`,
+            url: process.env.NODE_ENV === 'production' ? `/api/${name}` : `http://localhost:80/api/${name}`,
             data: params
         });
         if ( !response.data.success ) {