diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index e8b9911..4bd03fa 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -104,10 +104,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index e8b9911..4bd03fa 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -104,10 +104,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index 6fd6ea3..181f209 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -105,7 +105,7 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" @click="add">
           新增
         </el-button>
       </template>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index e8b9911..4bd03fa 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -104,10 +104,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index 6fd6ea3..181f209 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -105,7 +105,7 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" @click="add">
           新增
         </el-button>
       </template>
diff --git a/src/views/system/notice/note.list.vue b/src/views/system/notice/note.list.vue
index 28f5987..c84f5b8 100644
--- a/src/views/system/notice/note.list.vue
+++ b/src/views/system/notice/note.list.vue
@@ -1,11 +1,13 @@
 <!-- 通知公告 -->
 <script lang="ts" setup>
 import { Delete } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
 import tableHeader from './table.header.vue'
 import addNotice from './noteAdd.vue'
 import noticeDetail from './noticeDetail.vue'
 import type { noticeType } from './notice_interface'
 import { getNoticeeApi } from '@/api/system/notice'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
 const searchQuery = reactive({
   noticeNo: '', // 编号
   noticePublisher: '', // 发布人
@@ -16,7 +18,7 @@
 }) // 查询参数
 const loadingTable = ref<boolean>(false) // 表格loading
 const total = ref<number>(0) // 数据总条数
-const columns = ref([
+const columns: Ref<TableColumn[]> = ref([
   {
     text: '编号',
     value: 'noticeNo',
@@ -128,9 +130,8 @@
         </el-button>
       </template>
     </search-area>
-    <!-- 表头区域 -->
-    <table-header title="数据列表">
-      <template #btns>
+    <table-container>
+      <template #btns-right>
         <el-button type="primary" @click="add">
           新建
         </el-button>
@@ -141,29 +142,29 @@
           打印
         </el-button>
       </template>
-    </table-header>
-    <!-- 表格区域 -->
-    <normal-table
-      :data="list" :total="total" :columns="columns as any" :query="searchQuery"
-      :list-loading="loadingTable" @change="changePage"
-    >
-      <template #preColumns>
-        <el-table-column label="#" width="55" align="center">
-          <template #default="scope">
-            {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
-          </template>
-        </el-table-column>
-      </template>
-      <template #columns>
-        <el-table-column label="操作" align="center" width="80">
-          <template #default="{ row }">
-            <el-button @click="detail(row)">
-              查看
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="searchQuery"
+        :list-loading="loadingTable" @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="#" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="90">
+            <template #default="{ row }">
+              <el-button @click="detail(row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
     <add-notice ref="addDialog" @reset-data="getNoticeList" />
     <notice-detail ref="detailDialog" />
   </app-container>
@@ -172,10 +173,5 @@
 <style lang="scss" scoped>
 .normal-input {
   width: 180px !important;
-  margin-right: 15px !important;
-}
-
-:deep(.el-table__header) {
-  background-color: #bbb;
 }
 </style>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index e8b9911..4bd03fa 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -104,10 +104,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index 6fd6ea3..181f209 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -105,7 +105,7 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" @click="add">
           新增
         </el-button>
       </template>
diff --git a/src/views/system/notice/note.list.vue b/src/views/system/notice/note.list.vue
index 28f5987..c84f5b8 100644
--- a/src/views/system/notice/note.list.vue
+++ b/src/views/system/notice/note.list.vue
@@ -1,11 +1,13 @@
 <!-- 通知公告 -->
 <script lang="ts" setup>
 import { Delete } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
 import tableHeader from './table.header.vue'
 import addNotice from './noteAdd.vue'
 import noticeDetail from './noticeDetail.vue'
 import type { noticeType } from './notice_interface'
 import { getNoticeeApi } from '@/api/system/notice'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
 const searchQuery = reactive({
   noticeNo: '', // 编号
   noticePublisher: '', // 发布人
@@ -16,7 +18,7 @@
 }) // 查询参数
 const loadingTable = ref<boolean>(false) // 表格loading
 const total = ref<number>(0) // 数据总条数
-const columns = ref([
+const columns: Ref<TableColumn[]> = ref([
   {
     text: '编号',
     value: 'noticeNo',
@@ -128,9 +130,8 @@
         </el-button>
       </template>
     </search-area>
-    <!-- 表头区域 -->
-    <table-header title="数据列表">
-      <template #btns>
+    <table-container>
+      <template #btns-right>
         <el-button type="primary" @click="add">
           新建
         </el-button>
@@ -141,29 +142,29 @@
           打印
         </el-button>
       </template>
-    </table-header>
-    <!-- 表格区域 -->
-    <normal-table
-      :data="list" :total="total" :columns="columns as any" :query="searchQuery"
-      :list-loading="loadingTable" @change="changePage"
-    >
-      <template #preColumns>
-        <el-table-column label="#" width="55" align="center">
-          <template #default="scope">
-            {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
-          </template>
-        </el-table-column>
-      </template>
-      <template #columns>
-        <el-table-column label="操作" align="center" width="80">
-          <template #default="{ row }">
-            <el-button @click="detail(row)">
-              查看
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="searchQuery"
+        :list-loading="loadingTable" @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="#" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="90">
+            <template #default="{ row }">
+              <el-button @click="detail(row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
     <add-notice ref="addDialog" @reset-data="getNoticeList" />
     <notice-detail ref="detailDialog" />
   </app-container>
@@ -172,10 +173,5 @@
 <style lang="scss" scoped>
 .normal-input {
   width: 180px !important;
-  margin-right: 15px !important;
-}
-
-:deep(.el-table__header) {
-  background-color: #bbb;
 }
 </style>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index 5ca65ed..2d564a9 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -132,10 +132,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index e8b9911..4bd03fa 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -104,10 +104,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index 6fd6ea3..181f209 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -105,7 +105,7 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" @click="add">
           新增
         </el-button>
       </template>
diff --git a/src/views/system/notice/note.list.vue b/src/views/system/notice/note.list.vue
index 28f5987..c84f5b8 100644
--- a/src/views/system/notice/note.list.vue
+++ b/src/views/system/notice/note.list.vue
@@ -1,11 +1,13 @@
 <!-- 通知公告 -->
 <script lang="ts" setup>
 import { Delete } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
 import tableHeader from './table.header.vue'
 import addNotice from './noteAdd.vue'
 import noticeDetail from './noticeDetail.vue'
 import type { noticeType } from './notice_interface'
 import { getNoticeeApi } from '@/api/system/notice'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
 const searchQuery = reactive({
   noticeNo: '', // 编号
   noticePublisher: '', // 发布人
@@ -16,7 +18,7 @@
 }) // 查询参数
 const loadingTable = ref<boolean>(false) // 表格loading
 const total = ref<number>(0) // 数据总条数
-const columns = ref([
+const columns: Ref<TableColumn[]> = ref([
   {
     text: '编号',
     value: 'noticeNo',
@@ -128,9 +130,8 @@
         </el-button>
       </template>
     </search-area>
-    <!-- 表头区域 -->
-    <table-header title="数据列表">
-      <template #btns>
+    <table-container>
+      <template #btns-right>
         <el-button type="primary" @click="add">
           新建
         </el-button>
@@ -141,29 +142,29 @@
           打印
         </el-button>
       </template>
-    </table-header>
-    <!-- 表格区域 -->
-    <normal-table
-      :data="list" :total="total" :columns="columns as any" :query="searchQuery"
-      :list-loading="loadingTable" @change="changePage"
-    >
-      <template #preColumns>
-        <el-table-column label="#" width="55" align="center">
-          <template #default="scope">
-            {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
-          </template>
-        </el-table-column>
-      </template>
-      <template #columns>
-        <el-table-column label="操作" align="center" width="80">
-          <template #default="{ row }">
-            <el-button @click="detail(row)">
-              查看
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="searchQuery"
+        :list-loading="loadingTable" @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="#" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="90">
+            <template #default="{ row }">
+              <el-button @click="detail(row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
     <add-notice ref="addDialog" @reset-data="getNoticeList" />
     <notice-detail ref="detailDialog" />
   </app-container>
@@ -172,10 +173,5 @@
 <style lang="scss" scoped>
 .normal-input {
   width: 180px !important;
-  margin-right: 15px !important;
-}
-
-:deep(.el-table__header) {
-  background-color: #bbb;
 }
 </style>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index 5ca65ed..2d564a9 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -132,10 +132,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 53b18e2..2b58e5f 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -140,10 +140,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>

diff --git a/src/components/SearchArea/index.vue b/src/components/SearchArea/index.vue
index d0a46f3..8326149 100644
--- a/src/components/SearchArea/index.vue
+++ b/src/components/SearchArea/index.vue
@@ -117,6 +117,6 @@
 
 <style lang="scss">
 .search-item + .search-btn {
-  margin-left: 5px;
+  margin-left: 12px;
 }
 </style>
diff --git a/src/components/TableContainer/index.vue b/src/components/TableContainer/index.vue
index d87651b..031e444 100644
--- a/src/components/TableContainer/index.vue
+++ b/src/components/TableContainer/index.vue
@@ -35,6 +35,7 @@
   .button-area {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 10px;
 
     .button-left {
       display: flex;
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
index 396ab2d..3663af7 100644
--- a/src/views/system/area/listArea.vue
+++ b/src/views/system/area/listArea.vue
@@ -140,7 +140,7 @@
       <!-- 查询结果Table显示 -->
       <normal-table :data="list" :total="total" :query="listQuery" :list-loading="listLoading" @change="changePage">
         <template #btns>
-          <el-button v-if="proxy.hasPerm('/sys/area/add')" size="small" class="filter-item" icon="el-icon-plus" @click="add">
+          <el-button v-if="proxy.hasPerm('/sys/area/add')" class="filter-item" icon="el-icon-plus" @click="add">
             新增
           </el-button>
         </template>
diff --git a/src/views/system/dept/listDept.vue b/src/views/system/dept/listDept.vue
index e8b9911..4bd03fa 100644
--- a/src/views/system/dept/listDept.vue
+++ b/src/views/system/dept/listDept.vue
@@ -104,10 +104,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
index 6fd6ea3..181f209 100644
--- a/src/views/system/dict/listDict.vue
+++ b/src/views/system/dict/listDict.vue
@@ -105,7 +105,7 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" @click="add">
           新增
         </el-button>
       </template>
diff --git a/src/views/system/notice/note.list.vue b/src/views/system/notice/note.list.vue
index 28f5987..c84f5b8 100644
--- a/src/views/system/notice/note.list.vue
+++ b/src/views/system/notice/note.list.vue
@@ -1,11 +1,13 @@
 <!-- 通知公告 -->
 <script lang="ts" setup>
 import { Delete } from '@element-plus/icons-vue'
+import type { Ref } from 'vue'
 import tableHeader from './table.header.vue'
 import addNotice from './noteAdd.vue'
 import noticeDetail from './noticeDetail.vue'
 import type { noticeType } from './notice_interface'
 import { getNoticeeApi } from '@/api/system/notice'
+import type { TableColumn } from '@/components/NormalTable/table_interface'
 const searchQuery = reactive({
   noticeNo: '', // 编号
   noticePublisher: '', // 发布人
@@ -16,7 +18,7 @@
 }) // 查询参数
 const loadingTable = ref<boolean>(false) // 表格loading
 const total = ref<number>(0) // 数据总条数
-const columns = ref([
+const columns: Ref<TableColumn[]> = ref([
   {
     text: '编号',
     value: 'noticeNo',
@@ -128,9 +130,8 @@
         </el-button>
       </template>
     </search-area>
-    <!-- 表头区域 -->
-    <table-header title="数据列表">
-      <template #btns>
+    <table-container>
+      <template #btns-right>
         <el-button type="primary" @click="add">
           新建
         </el-button>
@@ -141,29 +142,29 @@
           打印
         </el-button>
       </template>
-    </table-header>
-    <!-- 表格区域 -->
-    <normal-table
-      :data="list" :total="total" :columns="columns as any" :query="searchQuery"
-      :list-loading="loadingTable" @change="changePage"
-    >
-      <template #preColumns>
-        <el-table-column label="#" width="55" align="center">
-          <template #default="scope">
-            {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
-          </template>
-        </el-table-column>
-      </template>
-      <template #columns>
-        <el-table-column label="操作" align="center" width="80">
-          <template #default="{ row }">
-            <el-button @click="detail(row)">
-              查看
-            </el-button>
-          </template>
-        </el-table-column>
-      </template>
-    </normal-table>
+      <!-- 表格区域 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="searchQuery"
+        :list-loading="loadingTable" @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="#" width="55" align="center">
+            <template #default="scope">
+              {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" align="center" width="90">
+            <template #default="{ row }">
+              <el-button @click="detail(row)">
+                查看
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
     <add-notice ref="addDialog" @reset-data="getNoticeList" />
     <notice-detail ref="detailDialog" />
   </app-container>
@@ -172,10 +173,5 @@
 <style lang="scss" scoped>
 .normal-input {
   width: 180px !important;
-  margin-right: 15px !important;
-}
-
-:deep(.el-table__header) {
-  background-color: #bbb;
 }
 </style>
diff --git a/src/views/system/resource/listResource.vue b/src/views/system/resource/listResource.vue
index 5ca65ed..2d564a9 100644
--- a/src/views/system/resource/listResource.vue
+++ b/src/views/system/resource/listResource.vue
@@ -132,10 +132,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/role/listRole.vue b/src/views/system/role/listRole.vue
index 53b18e2..2b58e5f 100644
--- a/src/views/system/role/listRole.vue
+++ b/src/views/system/role/listRole.vue
@@ -140,10 +140,10 @@
     </search-area>
     <table-container>
       <template #btns-left>
-        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
+        <el-button v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" @click="add">
           新增
         </el-button>
-        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        <el-button :icon="Switch" @click="expandOrCollapse">
           展开/折叠
         </el-button>
       </template>
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index 87ef699..ecc7266 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -251,7 +251,7 @@
         <table-container>
           <template #btns-left>
             <!-- 操作 -->
-            <div style="margin-bottom: 10px;">
+            <div>
               <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
                 新增
               </el-button>