ms-

frontend/src/business/components/common/components/MsAsideContainer.vue

@@ -0,0 +1,23 @@
+<template>
+
+  <el-aside class="ms-aside-container">
+    <slot></slot>
+  </el-aside>
+
+</template>
+
+<script>
+    export default {
+      name: "MsAsideContainer"
+    }
+</script>
+
+<style scoped>
+
+  .ms-aside-container {
+    border: 1px solid #EBEEF5;
+    border-radius: 2px;
+    background: white;
+  }
+
+</style>

frontend/src/business/components/common/components/MsContainer.vue

@@ -0,0 +1,27 @@
+<template>
+
+  <el-container class="ms-container">
+    <slot></slot>
+  </el-container>
+
+</template>
+
+<script>
+    export default {
+      name: "MsContainer"
+    }
+</script>
+
+<style scoped>
+
+  .ms-container >>> span.title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-top: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-wrap: break-word;
+    white-space: nowrap;
+  }
+
+</style>

frontend/src/business/components/common/components/MsMainContainer.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-main class="ms-main-container">
+    <slot></slot>
+  </el-main>
+</template>
+
+<script>
+    export default {
+      name: "MsMainContainer"
+    }
+</script>
+
+<style scoped>
+
+  .ms-main-container {
+    padding: 15px;
+    height: calc(100vh - 80px);
+  }
+
+</style>

frontend/src/business/components/project/MsProject.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
+  <ms-container>
-    <div class="main-content">
+    <ms-main-container>
       <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
           <ms-table-header :condition.sync="condition" @search="search" @create="create"
@@ -19,6 +19,7 @@
         <ms-table-pagination :change="list" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
+    </ms-main-container>
 
     <el-dialog :title="title" :visible.sync="createVisible">
       <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="100px" size="small">
@@ -37,8 +38,8 @@
         </div>
       </template>
     </el-dialog>
-    </div>
+
-  </div>
+  </ms-container>
 </template>
 
 <script>
@@ -49,10 +50,14 @@
   import MsTableOperator from "../common/components/MsTableOperator";
   import MsDialogFooter from "../common/components/MsDialogFooter";
   import {getCurrentUser} from "../../../common/js/utils";
+  import MsContainer from "../common/components/MsContainer";
+  import MsMainContainer from "../common/components/MsMainContainer";
 
   export default {
     name: "MsProject",
-    components: {MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
+    components: {
+      MsMainContainer,
+      MsContainer, MsTableOperator, MsCreateBox, MsTablePagination, MsTableHeader, MsDialogFooter},
     data() {
       return {
         createVisible: false,

frontend/src/business/components/track/TestTrack.vue

@@ -28,24 +28,9 @@
 
 
 <style>
-
-  .tree-aside {
-    position: relative;
-    border: 1px solid #EBEEF5;
-    box-sizing: border-box;
-    height: calc(100vh - 80px);
-    background: white;
-  }
-
   .node-tree {
     margin: 3%;
   }
-
-  .case-container {
-    margin-top: 0;
-    margin-left: 0;
-  }
-
 </style>
 
 <style scoped>

frontend/src/business/components/track/case/TestCase.vue

@@ -1,14 +1,14 @@
 <template>
-    <div class="main-content">
+  <ms-container>
-        <el-container class="case-container">
+
-          <el-aside class="tree-aside">
+    <ms-aside-container>
       <select-menu
         :data="projects"
         :current-data="currentProject"
         :title="$t('test_track.project')"
-              @dataChange="changeProject">
+        @dataChange="changeProject"/>
-            </select-menu>
+      <node-tree
-            <node-tree class="node-tree"
+        class="node-tree"
         v-loading="result.loading"
         @nodeSelectEvent="nodeChange"
         @refresh="refresh"
@@ -18,9 +18,9 @@
         :select-node.sync="selectNode"
         @refreshTable="refreshTable"
         ref="nodeTree"/>
-          </el-aside>
+    </ms-aside-container>
 
-          <el-main>
+    <ms-main-container>
       <test-case-list
         :current-project="currentProject"
         :select-node-ids="selectNodeIds"
@@ -32,8 +32,7 @@
         @moveToNode="moveToNode"
         ref="testCaseList">
       </test-case-list>
-          </el-main>
+    </ms-main-container>
-        </el-container>
 
     <test-case-edit
       @refresh="refresh"
@@ -45,7 +44,8 @@
 
     <test-case-move @refresh="refresh" ref="testCaseMove"/>
 
-    </div>
+  </ms-container>
+
 </template>
 
 <script>
@@ -56,10 +56,15 @@
   import TestCaseList from "./components/TestCaseList";
   import SelectMenu from "../common/SelectMenu";
   import TestCaseMove from "./components/TestCaseMove";
+  import MsContainer from "../../common/components/MsContainer";
+  import MsAsideContainer from "../../common/components/MsAsideContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
 
   export default {
     name: "TestCase",
-    components: {TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu},
+    components: {
+      MsMainContainer,
+      MsAsideContainer, MsContainer, TestCaseMove, TestCaseList, NodeTree, TestCaseEdit, SelectMenu},
     comments: {},
     data() {
       return {

frontend/src/business/components/track/home/TrackHome.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container">
+  <ms-container>
-    <div class="main-content">
+    <ms-main-container>
       <el-row>
         <el-col :span="15">
           <related-test-plan-list ref="relatedTestPlanList"/>
@@ -9,16 +9,18 @@
           <test-case-side-list :title="'最近测试'" ref="testCaseRecentList"/>
         </el-col>
       </el-row>
-    </div>
+    </ms-main-container>
-  </div>
+  </ms-container>
 </template>
 
 <script>
     import RelatedTestPlanList from "./components/RelatedTestPlanList";
     import TestCaseSideList from "./components/TestCaseSideList";
+    import MsContainer from "../../common/components/MsContainer";
+    import MsMainContainer from "../../common/components/MsMainContainer";
     export default {
       name: "TrackHome",
-      components: {TestCaseSideList, RelatedTestPlanList},
+      components: {MsMainContainer, MsContainer, TestCaseSideList, RelatedTestPlanList},
       watch: {
         '$route'(to,from) {
           if (to.path.indexOf('/track/home') > -1) {
@@ -37,7 +39,7 @@
 
 <style scoped>
 
-  .main-content >>> .el-table {
+  .ms-main-container >>> .el-table {
     cursor:pointer;
   }
 

frontend/src/business/components/track/plan/TestPlan.vue

@@ -1,25 +1,28 @@
 <template>
-  <div class="container">
+  <ms-container>
-    <div class="main-content">
+
+    <ms-main-container>
       <test-plan-list
         @openTestPlanEditDialog="openTestPlanEditDialog"
         @testPlanEdit="openTestPlanEditDialog"
-        ref="testPlanList"></test-plan-list>
+        ref="testPlanList"/>
-      <test-plan-edit
+    </ms-main-container>
-        ref="testPlanEditDialog"
+
-        @refresh="refreshTestPlanList"></test-plan-edit>
+    <test-plan-edit ref="testPlanEditDialog" @refresh="refreshTestPlanList"/>
-    </div>
+
-  </div>
+  </ms-container>
 </template>
 
 <script>
 
   import TestPlanList from './components/TestPlanList';
   import TestPlanEdit from './components/TestPlanEdit';
+  import MsContainer from "../../common/components/MsContainer";
+  import MsMainContainer from "../../common/components/MsMainContainer";
 
   export default {
     name: "TestPlan",
-    components: {TestPlanList, TestPlanEdit},
+    components: {MsMainContainer, MsContainer, TestPlanList, TestPlanEdit},
     data() {
       return {
       }

frontend/src/business/components/track/plan/components/TestPlanList.vue

@@ -1,7 +1,4 @@
 <template>
-
-  <div class="container">
-    <el-main class="main-content">
   <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
           <ms-table-header :condition.sync="condition" @search="initTableData" @create="testPlanCreate"
@@ -67,8 +64,6 @@
         <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
                              :total="total"/>
       </el-card>
-    </el-main>
-  </div>
 </template>
 
 <script>

frontend/src/business/components/track/plan/view/TestPlanView.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="main-content">
+
-    <el-container class="case-container">
+  <ms-container>
-      <el-aside class="tree-aside">
+
+    <ms-aside-container>
       <select-menu
         :data="testPlans"
         :current-data="currentPlan"
         :title="$t('test_track.plan_view.plan')"
         @dataChange="changePlan"/>
-
       <node-tree class="node-tree"
                  v-loading="result.loading"
                  @nodeSelectEvent="nodeChange"
@@ -15,24 +15,25 @@
                  :tree-nodes="treeNodes"
                  :draggable="false"
                  ref="nodeTree"/>
-      </el-aside>
+    </ms-aside-container>
 
-      <el-main>
+    <ms-main-container>
-        <test-plan-test-case-list class="table-list"
+        <test-plan-test-case-list
+          class="table-list"
           @openTestCaseRelevanceDialog="openTestCaseRelevanceDialog"
           @refresh="refresh"
           :plan-id="planId"
           :select-node-ids="selectNodeIds"
           :select-parent-nodes="selectParentNodes"
           ref="testPlanTestCaseList"/>
-      </el-main>
+    </ms-main-container>
-    </el-container>
 
     <test-case-relevance
       @refresh="refresh"
       :plan-id="planId"
       ref="testCaseRelevance"/>
-  </div>
+
+  </ms-container>
 
 </template>
 
@@ -42,10 +43,15 @@
     import TestPlanTestCaseList from "./comonents/TestPlanTestCaseList";
     import TestCaseRelevance from "./comonents/TestCaseRelevance";
     import SelectMenu from "../../common/SelectMenu";
+    import MsContainer from "../../../common/components/MsContainer";
+    import MsAsideContainer from "../../../common/components/MsAsideContainer";
+    import MsMainContainer from "../../../common/components/MsMainContainer";
 
     export default {
       name: "TestPlanView",
-      components: {NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
+      components: {
+        MsMainContainer,
+        MsAsideContainer, MsContainer, NodeTree, TestPlanTestCaseList, TestCaseRelevance, SelectMenu},
       data() {
         return {
           result: {},
@@ -128,9 +134,4 @@
 </script>
 
 <style scoped>
-
-  .el-main {
-    padding: 15px;
-  }
-
 </style>

frontend/src/common/css/main.css

@@ -33,14 +33,8 @@ body {
   clear: both;
 }
 
-.card-container {
-  position: relative;
-}
 
-.card-content {
+
-  width: 100%;
-  position: absolute;
-}
 
 .table-card > .el-card__body {
   padding-top: 0;