diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
index 51ff8e7..b84f125 100644
--- a/src/views/system/dept/list.dept.vue
+++ b/src/views/system/dept/list.dept.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDeptList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { DeptInfo, DeptTreeNode } from './dept_interface'
 import SystemEditDept from './edit.dept.vue'
@@ -96,13 +96,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,11 +111,11 @@
           展开/折叠
         </ElButton>
       </template>
-    </TableContainer>
+    </table-container>
     <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
           <template #default="scope">
             <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
               修改
@@ -124,11 +124,11 @@
               删除
             </ElButton>
           </template>
-        </ElTableColumn>
-      </ElTable>
+        </el-table-column>
+      </el-table>
     </div>
     <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
index 51ff8e7..b84f125 100644
--- a/src/views/system/dept/list.dept.vue
+++ b/src/views/system/dept/list.dept.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDeptList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { DeptInfo, DeptTreeNode } from './dept_interface'
 import SystemEditDept from './edit.dept.vue'
@@ -96,13 +96,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,11 +111,11 @@
           展开/折叠
         </ElButton>
       </template>
-    </TableContainer>
+    </table-container>
     <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
           <template #default="scope">
             <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
               修改
@@ -124,11 +124,11 @@
               删除
             </ElButton>
           </template>
-        </ElTableColumn>
-      </ElTable>
+        </el-table-column>
+      </el-table>
     </div>
     <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
index 2c7d960..1de9db4 100644
--- a/src/views/system/dict/list.dict.vue
+++ b/src/views/system/dict/list.dict.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDictList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import type { DictListInfo } from './dict_interface'
 import SystemEditDict from './edit.dict.vue'
@@ -97,13 +97,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,7 +111,7 @@
       </template>
       <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
         <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
             <template #default="scope">
               <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
                 修改
@@ -120,10 +120,10 @@
                 删除
               </ElButton>
             </template>
-          </ElTableColumn>
+          </el-table-column>
         </template>
       </NormalTable>
-    </TableContainer>
+    </table-container>
     <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
index 51ff8e7..b84f125 100644
--- a/src/views/system/dept/list.dept.vue
+++ b/src/views/system/dept/list.dept.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDeptList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { DeptInfo, DeptTreeNode } from './dept_interface'
 import SystemEditDept from './edit.dept.vue'
@@ -96,13 +96,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,11 +111,11 @@
           展开/折叠
         </ElButton>
       </template>
-    </TableContainer>
+    </table-container>
     <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
           <template #default="scope">
             <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
               修改
@@ -124,11 +124,11 @@
               删除
             </ElButton>
           </template>
-        </ElTableColumn>
-      </ElTable>
+        </el-table-column>
+      </el-table>
     </div>
     <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
index 2c7d960..1de9db4 100644
--- a/src/views/system/dict/list.dict.vue
+++ b/src/views/system/dict/list.dict.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDictList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import type { DictListInfo } from './dict_interface'
 import SystemEditDict from './edit.dict.vue'
@@ -97,13 +97,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,7 +111,7 @@
       </template>
       <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
         <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
             <template #default="scope">
               <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
                 修改
@@ -120,10 +120,10 @@
                 删除
               </ElButton>
             </template>
-          </ElTableColumn>
+          </el-table-column>
         </template>
       </NormalTable>
-    </TableContainer>
+    </table-container>
     <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
index cb9c156..f5e3079 100644
--- a/src/views/system/resource/list.resource.vue
+++ b/src/views/system/resource/list.resource.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemResourceList">
 import type { Ref } from 'vue'
 import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
 import SystemEditResource from './edit.resource.vue'
@@ -111,48 +111,48 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
             v-for="item in resourceTypeList"
             :key="item.value"
             :label="item.name"
             :value="item.value"
           />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
-        <ElButton 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" style="margin-bottom: 10px;" @click="add">
           新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
           展开/折叠
-        </ElButton>
+        </el-button>
       </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
           <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
               修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
               删除
-            </ElButton>
+            </el-button>
           </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
+        </el-table-column>
+      </el-table>
+    </table-container>
     <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>

diff --git a/src/components/NormalTable/index.vue b/src/components/NormalTable/index.vue
index f947a47..a751eca 100644
--- a/src/components/NormalTable/index.vue
+++ b/src/components/NormalTable/index.vue
@@ -141,11 +141,11 @@
 
 <template>
   <div class="normal-table">
-    <ElTable ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
+    <el-table ref="table" v-loading="loading" :data="data" height="height" :size="size" :border="false" style="width: 100%;">
       <slot name="preColumns" />
-      <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
+      <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" :show-overflow-tooltip="column.showOverflow ? column.showOverflow : true" />
       <slot name="columns" />
-    </ElTable>
+    </el-table>
     <div v-if="props.pagination" style="width: 100%;margin-top: 10px;">
       <el-pagination
         :current-page="props.query.offset"
diff --git a/src/views/system/dept/list.dept.vue b/src/views/system/dept/list.dept.vue
index 51ff8e7..b84f125 100644
--- a/src/views/system/dept/list.dept.vue
+++ b/src/views/system/dept/list.dept.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDeptList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { DeptInfo, DeptTreeNode } from './dept_interface'
 import SystemEditDept from './edit.dept.vue'
@@ -96,13 +96,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,11 +111,11 @@
           展开/折叠
         </ElButton>
       </template>
-    </TableContainer>
+    </table-container>
     <div>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
           <template #default="scope">
             <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
               修改
@@ -124,11 +124,11 @@
               删除
             </ElButton>
           </template>
-        </ElTableColumn>
-      </ElTable>
+        </el-table-column>
+      </el-table>
     </div>
     <SystemEditDept ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/system/dict/list.dict.vue b/src/views/system/dict/list.dict.vue
index 2c7d960..1de9db4 100644
--- a/src/views/system/dict/list.dict.vue
+++ b/src/views/system/dict/list.dict.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemDictList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import type { DictListInfo } from './dict_interface'
 import SystemEditDict from './edit.dict.vue'
@@ -97,13 +97,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.condition" placeholder="字典名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/dict/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -111,7 +111,7 @@
       </template>
       <NormalTable :query="listQuery" :loading="loading" :columns="columns" :data="list" :total="total" :border="false" @change="changePage">
         <template #columns>
-          <ElTableColumn v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
+          <el-table-column v-if="proxy.hasPerm('/sys/dict/update') || proxy.hasPerm('/sys/dict/delete')" label="操作" width="140" align="center">
             <template #default="scope">
               <ElButton v-if="proxy.hasPerm('/sys/dict/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
                 修改
@@ -120,10 +120,10 @@
                 删除
               </ElButton>
             </template>
-          </ElTableColumn>
+          </el-table-column>
         </template>
       </NormalTable>
-    </TableContainer>
+    </table-container>
     <SystemEditDict ref="editDialog" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
diff --git a/src/views/system/resource/list.resource.vue b/src/views/system/resource/list.resource.vue
index cb9c156..f5e3079 100644
--- a/src/views/system/resource/list.resource.vue
+++ b/src/views/system/resource/list.resource.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemResourceList">
 import type { Ref } from 'vue'
 import { computed, getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
 import SystemEditResource from './edit.resource.vue'
@@ -111,48 +111,48 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
-      </SearchItem>
-      <SearchItem>
-        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
-      </SearchItem>
-      <SearchItem>
-        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
-          <ElOption
+  <app-container>
+    <search-area @search="search">
+      <search-item>
+        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
+      </search-item>
+      <search-item>
+        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
+      </search-item>
+      <search-item>
+        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
+          <el-option
             v-for="item in resourceTypeList"
             :key="item.value"
             :label="item.name"
             :value="item.value"
           />
-        </ElSelect>
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+        </el-select>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
-        <ElButton 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" style="margin-bottom: 10px;" @click="add">
           新增
-        </ElButton>
-        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
+        </el-button>
+        <el-button :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
           展开/折叠
-        </ElButton>
+        </el-button>
       </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
+        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
           <template #default="scope">
-            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
+            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
               修改
-            </ElButton>
-            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
+            </el-button>
+            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
               删除
-            </ElButton>
+            </el-button>
           </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
+        </el-table-column>
+      </el-table>
+    </table-container>
     <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
-  </appcontainer>
+  </app-container>
 </template>
diff --git a/src/views/system/role/list.role.vue b/src/views/system/role/list.role.vue
index a775da3..38e70f1 100644
--- a/src/views/system/role/list.role.vue
+++ b/src/views/system/role/list.role.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup name="SystemRoleList">
 import type { Ref } from 'vue'
 import { getCurrentInstance, reactive, ref } from 'vue'
-import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Switch } from '@element-plus/icons-vue'
 import type { DataScopeTypeInfo, RoleInfo } from './role_interface'
 import SystemEditRole from './edit.role.vue'
@@ -132,13 +132,13 @@
 </script>
 
 <template>
-  <AppContainer>
-    <SearchArea @search="search">
-      <SearchItem>
+  <app-container>
+    <search-area @search="search">
+      <search-item>
         <ElInput v-model="listQuery.keyword" placeholder="角色名称" />
-      </SearchItem>
-    </SearchArea>
-    <TableContainer>
+      </search-item>
+    </search-area>
+    <table-container>
       <template #btns-left>
         <ElButton v-if="proxy.hasPerm('/sys/role/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
           新增
@@ -147,9 +147,11 @@
           展开/折叠
         </ElButton>
       </template>
-      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
-        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
-        <ElTableColumn v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
+      <el-table ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
+        <el-table-column
+          v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align"
+        />
+        <el-table-column v-if="proxy.hasPerm('/sys/role/funcAuthor') || proxy.hasPerm('/sys/role/dataAuthor') || proxy.hasPerm('/sys/role/update') || proxy.hasPerm('/sys/role/delete')" label="操作" width="250" align="left" header-align="center">
           <template #default="scope">
             <ElButton v-if="proxy.hasPerm('/sys/role/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
               修改
@@ -165,11 +167,11 @@
               数据权限
             </ElButton>
           </template>
-        </ElTableColumn>
-      </ElTable>
-    </TableContainer>
+        </el-table-column>
+      </el-table>
+    </table-container>
     <SystemEditRole ref="editDialog" :role-type-list="roleTypeList" @close-refresh="search" />
     <FunctionPerm ref="functionPerm" />
     <DataPerm ref="dataPerm" />
-  </appcontainer>
+  </app-container>
 </template>