improve style of the page ui (#540)

Co-authored-by: rick <[email protected]>

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -47,15 +47,7 @@ API.GetVersion((d) => {
   }
 })
 
-const sideWidth = ref("width: 200px; display: flex;flex-direction: column;")
 const isCollapse = ref(true)
-watch(isCollapse, (e) => {
-  if (e) {
-    sideWidth.value = "width: 80px; display: flex;flex-direction: column;"
-  } else {
-    sideWidth.value = "width: 200px; display: flex;flex-direction: column;"
-  }
-})
 const lastActiveMenu = window.localStorage.getItem('activeMenu')
 const activeMenu = ref(lastActiveMenu === '' ? 'welcome' : lastActiveMenu)
 const panelName = ref(activeMenu)
@@ -92,14 +84,15 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
 </script>
 
 <template>
-  <el-container style="height: 100%">
-    <el-aside :style="sideWidth">
+  <el-container style="height: 100%;">
+    <el-aside width="auto" style="display: flex; flex-direction: column;">
       <el-radio-group v-model="isCollapse">
         <el-radio-button :label="false">+</el-radio-button>
         <el-radio-button :label="true">-</el-radio-button>
       </el-radio-group>
       <el-menu
-        style="flex-grow: 1;"
+        class="el-menu-vertical"
+        style="height: 100%;"
         :default-active="activeMenu"
         :collapse="isCollapse"
         @select="handleSelect"
@@ -159,3 +152,9 @@ const toHistoryPanel = ({ ID: selectID, panelName: historyPanelName }) => {
     </div>
   </el-container>
 </template>
+
+<style>
+.el-menu-vertical:not(.el-menu--collapse) {
+  width: 200px;
+}
+</style>

console/atest-ui/src/views/TestCase.vue

@@ -852,7 +852,7 @@ Magic.Keys(() => {
 </script>
 
 <template>
-  <el-container>
+  <el-container style="height: 100%;">
     <el-header style="padding-left: 5px;">
       <div style="margin-bottom: 5px">
         <el-button type="primary" @click="saveTestCase" :icon="Edit" v-loading="saveLoading"

console/atest-ui/src/views/TestSuite.vue

@@ -50,7 +50,7 @@ function load() {
         } as Pair)
       }
 
-      shareLink.value = `${window.location.href}api/v1/suites/${e.name}/yaml?store=${store.name}`
+      shareLink.value = `${window.location.href}api/v1/suites/${e.name}/yaml?x-store-name=${store.name}`
     },
     (e) => {
       ElMessage.error('Oops, ' + e)