diff --git a/frontend/src/business/components/settings/organization/OrganizationMember.vue b/frontend/src/business/components/settings/organization/OrganizationMember.vue
index a1f9a7fd8f..2bf4aa6a95 100644
--- a/frontend/src/business/components/settings/organization/OrganizationMember.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationMember.vue
@@ -2,18 +2,8 @@
   <div v-loading="result.loading">
     <el-card>
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle">
-          <span class="title">{{$t('commons.member')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-            <el-input type="text" size="small" :placeholder="$t('member.search_by_name')"
-                      prefix-icon="el-icon-search"
-                      maxlength="60" v-model="condition" @change="search" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.member')"/>
       </template>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="name" :label="$t('commons.username')"/>
@@ -114,10 +104,11 @@
   import MsCreateBox from "../CreateBox";
   import {TokenKey} from "../../../../common/js/constants";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
     name: "MsOrganizationMember",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     created() {
       this.initTableData();
     },
diff --git a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
index 9a720839c4..ad9407e884 100644
--- a/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
+++ b/frontend/src/business/components/settings/organization/OrganizationWorkspace.vue
@@ -2,18 +2,8 @@
   <div>
     <el-card v-loading="result.loading">
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle">
-          <span class="title">{{$t('commons.workspace')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-            <el-input type="text" size="small" :placeholder="$t('workspace.search_by_name')"
-                      prefix-icon="el-icon-search" @change="search"
-                      maxlength="60" v-model="condition" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.workspace')"/>
       </template>
       <el-table :data="items" style="width: 100%">
         <el-table-column prop="name" :label="$t('commons.name')"/>
@@ -174,10 +164,11 @@
   import {Message} from "element-ui";
   import {TokenKey} from "../../../../common/js/constants";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
     name: "MsOrganizationWorkspace",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     mounted() {
       this.list();
     },
diff --git a/frontend/src/business/components/settings/system/Organization.vue b/frontend/src/business/components/settings/system/Organization.vue
index 970d46a4e4..da6f1614d9 100644
--- a/frontend/src/business/components/settings/system/Organization.vue
+++ b/frontend/src/business/components/settings/system/Organization.vue
@@ -3,18 +3,8 @@
 
     <el-card>
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle">
-          <span class="title">{{$t('commons.organization')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-            <el-input type="text" size="small" :placeholder="$t('organization.search_by_name')"
-                      prefix-icon="el-icon-search" @change="search"
-                      maxlength="60" v-model="condition" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.organization')"/>
       </template>
       <!-- system menu organization table-->
       <el-table :data="tableData" style="width: 100%">
@@ -199,10 +189,11 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
     name: "MsOrganization",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination,MsTableHeader},
     data() {
       return {
         queryPath: '/organization/list',
diff --git a/frontend/src/business/components/settings/system/SystemWorkspace.vue b/frontend/src/business/components/settings/system/SystemWorkspace.vue
index 7badd0d075..b6d045bbaa 100644
--- a/frontend/src/business/components/settings/system/SystemWorkspace.vue
+++ b/frontend/src/business/components/settings/system/SystemWorkspace.vue
@@ -2,20 +2,8 @@
   <div>
     <el-card v-loading="result.loading">
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle">
-          <span class="title">
-            {{$t('commons.workspace')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-            <el-input type="text" size="small"
-                      :placeholder="$t('workspace.search_by_name')"
-                      prefix-icon="el-icon-search" @change="search"
-                      maxlength="60" v-model="condition" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.workspace')"/>
       </template>
       <!-- workspace table -->
       <el-table :data="items" style="width: 100%">
@@ -216,10 +204,11 @@
   import MsCreateBox from "../CreateBox";
   import {Message} from "element-ui";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
     name: "MsSystemWorkspace",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     mounted() {
       this.list();
     },
diff --git a/frontend/src/business/components/settings/system/TestResourcePool.vue b/frontend/src/business/components/settings/system/TestResourcePool.vue
index 61ccbbd99c..224c0275b7 100644
--- a/frontend/src/business/components/settings/system/TestResourcePool.vue
+++ b/frontend/src/business/components/settings/system/TestResourcePool.vue
@@ -3,18 +3,8 @@
 
     <el-card>
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle">
-          <span class="title">{{$t('commons.test_resource_pool')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-            <el-input type="text" size="small" :placeholder="$t('test_resource_pool.search_by_name')"
-                      prefix-icon="el-icon-search"
-                      maxlength="60" v-model="condition" @change="search" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.test_resource_pool')"/>
       </template>
       <el-table :data="items" style="width: 100%">
         <el-table-column prop="name" :label="$t('commons.name')"/>
@@ -225,10 +215,11 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
     name: "MsTestResourcePool",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     data() {
       return {
         result: {},
diff --git a/frontend/src/business/components/settings/system/User.vue b/frontend/src/business/components/settings/system/User.vue
index abe67f2642..037829f249 100644
--- a/frontend/src/business/components/settings/system/User.vue
+++ b/frontend/src/business/components/settings/system/User.vue
@@ -3,18 +3,8 @@
 
     <el-card>
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle">
-          <span class="title">{{$t('commons.member')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-            <el-input type="text" size="small" :placeholder="$t('member.search_by_name')"
-                      prefix-icon="el-icon-search" maxlength="60" @change="search"
-                      v-model="condition" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.member')"/>
       </template>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column type="selection" width="55"/>
@@ -105,8 +95,11 @@
 <script>
   import MsCreateBox from "../CreateBox";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
+    name: "MsUser",
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     data() {
       return {
         queryPath: '/user/special/list',
@@ -159,8 +152,6 @@
         }
       }
     },
-    name: "MsUser",
-    components: {MsCreateBox, MsTablePagination},
     created() {
       this.search();
     },
diff --git a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
index 58dd25b371..d40082dae6 100644
--- a/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
+++ b/frontend/src/business/components/settings/workspace/WorkspaceMember.vue
@@ -2,17 +2,8 @@
   <div v-loading="result.loading">
     <el-card>
       <template v-slot:header>
-        <div>
-          <el-row type="flex" justify="space-between" align="middle" v-permission="['test_manager']">
-          <span class="title">{{$t('commons.member')}}
-            <ms-create-box :tips="btnTips" :exec="create"/>
-          </span>
-            <span class="search">
-                    <el-input type="text" size="small" placeholder="根据用户名搜索" prefix-icon="el-icon-search"
-                              maxlength="60" v-model="condition" @change="search" clearable/>
-          </span>
-          </el-row>
-        </div>
+        <ms-table-header :condition.sync="condition" @search="search" @create="create"
+                         :create-tip="btnTips" :title="$t('commons.member')"/>
       </template>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column prop="name" :label="$t('commons.username')"/>
@@ -109,10 +100,11 @@
   import MsCreateBox from "../CreateBox";
   import {TokenKey} from "../../../../common/js/constants";
   import MsTablePagination from "../../common/pagination/TablePagination";
+  import MsTableHeader from "../../common/components/MsTableHeader";
 
   export default {
     name: "MsMember",
-    components: {MsCreateBox, MsTablePagination},
+    components: {MsCreateBox, MsTablePagination, MsTableHeader},
     data() {
       return {
         result: {},