chore: move styles into css files

Author: LinuxSuRen

console/atest-ui/src/App.vue

@@ -101,15 +101,14 @@ watch(theme, (e) => {
 </script>
 
 <template>
-  <el-container style="height: 100%;">
+  <el-container class="full-height">
     <el-aside width="auto" style="display: flex; flex-direction: column;">
-      <el-radio-group v-model="isCollapse">
+      <el-radio-group v-model="isCollapse" class="el-menu">
         <el-radio-button :value="false">+</el-radio-button>
         <el-radio-button :value="true">-</el-radio-button>
       </el-radio-group>
       <el-menu
-        class="el-menu-vertical"
-        style="height: 100%;"
+        class="el-menu-vertical full-height"
         :default-active="activeMenu"
         :collapse="isCollapse"
         @select="handleSelect"
@@ -145,7 +144,7 @@ watch(theme, (e) => {
       </el-menu>
     </el-aside>
 
-    <el-main style="padding-top: 0px;">
+    <el-main class="center-zone">
       <div class="top-menu">
         <el-col style="display: flex; align-items: center;">
           <el-icon @click="settingDialogVisible=true" size="20"><Setting /></el-icon>
@@ -219,4 +218,7 @@ watch(theme, (e) => {
 .el-menu-vertical:not(.el-menu--collapse) {
   width: 200px;
 }
+.el-menu-vertical:is(.el-menu--collapse) {
+  width: 80px;
+}
 </style>

console/atest-ui/src/assets/base.css

@@ -19,6 +19,8 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+
+  --center-zone-side-padding: 5px;
 }
 
 /* semantic color variables for this project */
@@ -34,6 +36,12 @@
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
+
+  --tool-box-bottom: 5px;
+  --tool-box-position: absolute;
+
+  --page-title-right-padding: 10px;
+  --page-title-bottom-padding: 5px;
 }
 
 *,
@@ -67,3 +75,26 @@ html.dark .el-main {
   color: #fff;
 }
 
+.center-zone {
+  padding-left: var(--center-zone-side-padding) !important;
+  padding-right: var(--center-zone-side-padding) !important;
+  padding-top: 0px !important;
+}
+
+.tool-box {
+  position: var(--tool-box-position);
+  bottom: var(--tool-box-bottom);
+}
+
+.edit-button {
+  height: 32px !important;
+  margin-left: 10px;
+}
+
+.page-title {
+  padding-right: var(--page-title-right-padding);
+}
+
+.page-header {
+  padding-bottom: var(--page-title-bottom-padding, 0px);
+}

console/atest-ui/src/assets/main.css

@@ -2,7 +2,6 @@
 
 #app {
     margin: 0 auto;
-    padding: 1rem;
     padding-top: 40px;
     height: 100vh;
     font-weight: normal;
@@ -14,6 +13,14 @@
     right: 20px;
 }
 
+.full-height {
+    height: 100%;
+}
+
+.full-width {
+    width: 100%;
+}
+
 a,
 .green {
     text-decoration: none;

console/atest-ui/src/components/EditButton.vue

@@ -40,7 +40,7 @@ const handleInputConfirm = () => {
         @keyup.enter="handleInputConfirm"
         @blur="handleInputConfirm"
       />
-      <el-button v-else class="button-new-tag" size="small" @click="showInput">
+      <el-button v-else class="button-new-tag" size="small edit-button" @click="showInput">
         {{ value }}
       </el-button>
     </span>

console/atest-ui/src/locales/en.json

@@ -35,6 +35,7 @@
         "updateStore": "Update Store",
         "createSecret": "Create Secret",
         "secretManager": "Secret Manager",
+        "storeManager": "Store Manager",
         "protoContent": "Proto Content",
         "protoFile": "Proto File",
         "protoImport": "Proto Import",

console/atest-ui/src/locales/zh.json

@@ -35,6 +35,7 @@
         "updateStore": "更新存储",
         "createSecret": "创建凭据",
         "secretManager": "凭据管理",
+        "storeManager": "存储管理",
         "apiRequestParameter": "API 请求参数",
         "codeGenerator": "代码生成",
         "testing": "测试",

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

@@ -66,8 +66,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
 </script>
 
 <template>
-    <div>{{t('title.secretManager')}}</div>
-    <div>
+    <div class="page-header">
+      <span class="page-title">{{t('title.secretManager')}}</span>
         <el-button type="primary" @click="addSecret" :icon="Edit">{{t('button.new')}}</el-button>
     </div>
     <el-table :data="secrets" style="width: 100%">

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

@@ -67,7 +67,6 @@ function loadStores() {
   })
 }
 loadStores()
-Magic.Keys(loadStores, ['Alt+KeyR'])
 
 function deleteStore(name: string) {
   API.DeleteStore(name, () => {
@@ -108,7 +107,14 @@ function addStore() {
     dialogVisible.value = true
     createAction.value = true
 }
-Magic.Keys(addStore, ['Alt+KeyN'])
+
+Magic.AdvancedKeys([{
+  Keys: ['Alt+KeyE', 'ctrl+n'],
+  Func: addStore
+}, {
+  Keys: ['Alt+KeyR'],
+  Func: loadStores
+}])
 
 const rules = reactive<FormRules<Store>>({
   name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
@@ -211,10 +217,10 @@ const storeExtLink = ref('')
 </script>
 
 <template>
-    <div>Store Manager</div>
-    <div>
-        <Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
-        <Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
+    <div class="page-header">
+      <span class="page-title">{{t('title.storeManager')}}</span>
+      <Button type="primary" @click="addStore" :icon="Edit">{{t('button.new')}}</Button>
+      <Button type="primary" @click="loadStores" :icon="Refresh">{{t('button.refresh')}}</Button>
     </div>
     <el-table :data="stores" style="width: 100%" v-loading=storesLoading>
       <el-table-column :label="t('field.name')" width="180">

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

@@ -24,7 +24,7 @@ Magic.Keys(() => {
 </script>
 
 <template>
-    <el-affix position="bottom" :offset="20" style="position: absolute; bottom: 5px;" >
+    <el-affix position="bottom" :offset="20" class="tool-box">
         <el-button type="primary" @click="dialogVisible = !dialogVisible"
             data-intro="You can search your desired template functions.">{{ t('button.toolbox') }}</el-button>
     </el-affix>

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

@@ -305,7 +305,7 @@ const renameTestSuite = (name: string) => {
       <el-form-item :label="t('tip.apiAddress')" prop="api">
         <HistoryInput placeholder="API" v-model="suite.api" group="apiAddress" />
       </el-form-item>
-      <table style="width: 100%">
+      <table class="full-width">
         <tr>
           <td>
             <el-select
@@ -333,7 +333,7 @@ const renameTestSuite = (name: string) => {
 
       <el-collapse>
         <el-collapse-item :title="t('title.parameter')">
-          <el-table :data="suite.param" style="width: 100%">
+          <el-table :data="suite.param" class="full-width">
             <el-table-column :label="t('field.key')" width="180">
               <template #default="scope">
                 <el-input v-model="scope.row.key" :placeholder="t('field.key')" @change="paramChange" />