diff --git a/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue b/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue
index af856ff6ea..8d7cef4288 100644
--- a/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue
+++ b/frontend/src/business/components/settings/workspace/TestCaseReportTemplate.vue
@@ -11,12 +11,7 @@
       </template>
 
       <el-main>
-        <div class="testcase-template" v-for="fit in fits" :key="fit">
-          <div class="template-img">
-            <i class="el-icon-error"/>
-          </div>
-          <span class="demonstration">{{ fit }}</span>
-        </div>
+        <testcase-template-item v-for="fit in fits" :key="fit" :name="fit"/>
       </el-main>
 
       <test-case-report-template-edit ref="templateEdit"/>
@@ -31,9 +26,10 @@
 
     import MsTableHeader from "../../common/components/MsTableHeader";
     import TestCaseReportTemplateEdit from "./components/TestCaseReportTemplateEdit";
+    import TestcaseTemplateItem from "./components/TestcaseTemplateItem";
     export default {
       name: "TestCaseReportTemplate",
-      components: {TestCaseReportTemplateEdit, MsTableHeader},
+      components: {TestcaseTemplateItem, TestCaseReportTemplateEdit, MsTableHeader},
       data() {
         return {
           result: {},
@@ -44,12 +40,13 @@
             'scalev-downddddddddddd',
             'filelv', 'sontwain', 'cosgewver', 'nodegne', 'scale-dfownddddddddddd',
           ],
-          url: '../../../../assets/template.png',
           condition: {},
         }
       },
       methods: {
-        initTableData() {
+        initData() {
+
+          // this.$get()
 
         },
         templateCreate() {
@@ -64,53 +61,6 @@
 
 <style scoped>
 
-  .testcase-template {
-    display: inline-block;
-    margin: 10px 30px;
-    width: 150px;
-  }
 
-  .demonstration {
-    display: block;
-    text-align: center;
-    margin: 10px auto;
-    width: 150px;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-  }
-
-  .template-img {
-    height: 100px;
-    width: 80px;
-    margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
-    border: solid 2px #fff;
-    box-sizing: border-box;
-    border-radius: 3px;
-    background: url(../../../../assets/template.png) no-repeat center;
-  }
-
-  .template-img:hover {
-    border: solid 1px #4b8fdf;
-    border-radius: 3px;
-    color: deepskyblue;
-    cursor: pointer;
-  }
-
-  .template-img > i {
-    display:none;
-    float: right;
-    color: gray;
-    margin: 2px;
-  }
-
-  .template-img > i:hover {
-    color: red;
-  }
-
-  .template-img:hover > .el-icon-error {
-    display: inline;
-  }
 
 </style>
diff --git a/frontend/src/business/components/settings/workspace/components/BaseInfoComponent.vue b/frontend/src/business/components/settings/workspace/components/TemplateComponent/BaseInfoComponent.vue
similarity index 100%
rename from frontend/src/business/components/settings/workspace/components/BaseInfoComponent.vue
rename to frontend/src/business/components/settings/workspace/components/TemplateComponent/BaseInfoComponent.vue
diff --git a/frontend/src/business/components/settings/workspace/components/CommonComponent.vue b/frontend/src/business/components/settings/workspace/components/TemplateComponent/CommonComponent.vue
similarity index 100%
rename from frontend/src/business/components/settings/workspace/components/CommonComponent.vue
rename to frontend/src/business/components/settings/workspace/components/TemplateComponent/CommonComponent.vue
diff --git a/frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue
similarity index 94%
rename from frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue
rename to frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue
index 07b8667a9f..0e6cfbfc8b 100644
--- a/frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue
+++ b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultChartComponent.vue
@@ -14,7 +14,7 @@
 
 <script>
     import CommonComponent from "./CommonComponent";
-    import MsPieChart from "../../../common/components/MsPieChart";
+    import MsPieChart from "../../../../common/components/MsPieChart";
 
     export default {
       name: "TestResultChartComponent",
diff --git a/frontend/src/business/components/settings/workspace/components/TestResultComponent.vue b/frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultComponent.vue
similarity index 100%
rename from frontend/src/business/components/settings/workspace/components/TestResultComponent.vue
rename to frontend/src/business/components/settings/workspace/components/TemplateComponent/TestResultComponent.vue
diff --git a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
index 99a47d2784..c3c4699085 100644
--- a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
+++ b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
@@ -104,9 +104,9 @@
 
   import draggable from 'vuedraggable';
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-  import BaseInfoComponent from "./BaseInfoComponent";
-  import TestResultComponent from "./TestResultComponent";
-  import TestResultChartComponent from "./TestResultChartComponent";
+  import BaseInfoComponent from "./TemplateComponent/BaseInfoComponent";
+  import TestResultComponent from "./TemplateComponent/TestResultComponent";
+  import TestResultChartComponent from "./TemplateComponent/TestResultChartComponent";
 
   let idGlobal = 8;
     export default {
diff --git a/frontend/src/business/components/settings/workspace/components/TestcaseTemplateItem.vue b/frontend/src/business/components/settings/workspace/components/TestcaseTemplateItem.vue
new file mode 100644
index 0000000000..e3490ce0c6
--- /dev/null
+++ b/frontend/src/business/components/settings/workspace/components/TestcaseTemplateItem.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="testcase-template">
+    <div class="template-img">
+      <i class="el-icon-error"/>
+    </div>
+    <span class="demonstration">{{ name }}</span>
+  </div>
+</template>
+
+<script>
+    export default {
+      name: "TestcaseTemplateItem",
+      props: {
+        name: {
+          type: String,
+          default: 'Template name'
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .testcase-template {
+    display: inline-block;
+    margin: 10px 30px;
+    width: 150px;
+  }
+
+  .demonstration {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    width: 150px;
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+  }
+
+  .template-img {
+    height: 100px;
+    width: 80px;
+    margin: 0 auto;
+    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
+    border: solid 2px #fff;
+    box-sizing: border-box;
+    border-radius: 3px;
+    background: url(../../../../../assets/template.png) no-repeat center;
+  }
+
+  .template-img:hover {
+    border: solid 1px #4b8fdf;
+    border-radius: 3px;
+    color: deepskyblue;
+    cursor: pointer;
+  }
+
+  .template-img > i {
+    display:none;
+    float: right;
+    color: gray;
+    margin: 2px;
+  }
+
+  .template-img > i:hover {
+    color: red;
+  }
+
+  .template-img:hover > .el-icon-error {
+    display: inline;
+  }
+
+</style>