BIGTOP-4255: Refactor layout page

bigtop-manager-ui/.env.development

@@ -18,3 +18,4 @@ NODE_ENV=development
 VITE_APP_BASE='/'
 VITE_APP_BASE_URL='http://localhost:8080'
 VITE_APP_BASE_API='/api'
+VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'

bigtop-manager-ui/.env.production

@@ -18,3 +18,4 @@ NODE_ENV=production
 VITE_APP_BASE='/ui/'
 VITE_APP_BASE_URL=''
 VITE_APP_BASE_API='/api'
+VITE_GITHUB_URL='https://github.com/apache/bigtop-manager'

bigtop-manager-ui/src/App.vue

@@ -18,15 +18,22 @@
 -->
 
 <script setup lang="ts">
-  import { useLocaleStore } from '@/store/locale'
   import { storeToRefs } from 'pinia'
-
+  import { onMounted } from 'vue'
+  import { useLocaleStore } from '@/store/locale'
+  import { useTheme } from './store/theme'
+  const themeStore = useTheme()
   const localeStore = useLocaleStore()
   const { antd } = storeToRefs(localeStore)
+  const { themeConfig } = storeToRefs(themeStore)
+
+  onMounted(() => {
+    themeStore.initTheme()
+  })
 </script>
 
 <template>
-  <a-config-provider :locale="antd">
+  <a-config-provider :locale="antd" :theme="themeConfig">
     <a-app class="app">
       <router-view />
     </a-app>
@@ -35,9 +42,6 @@
 
 <style scoped lang="scss">
   .app {
-    height: 100%;
-    > section {
-      height: 100%;
-    }
+    overflow: hidden;
   }
 </style>