diff --git a/src/components/DataScreen/pie/index.vue b/src/components/DataScreen/pie/index.vue
index 4391d52..696c082 100644
--- a/src/components/DataScreen/pie/index.vue
+++ b/src/components/DataScreen/pie/index.vue
@@ -174,5 +174,6 @@ onMounted(() => {
 .echarts{
   width: 100%;
   height: 100%;
+
 }
 </style>
diff --git a/src/components/Table/PropTable/index.vue b/src/components/Table/PropTable/index.vue
index 1801523..ccdb913 100644
--- a/src/components/Table/PropTable/index.vue
+++ b/src/components/Table/PropTable/index.vue
@@ -231,8 +231,6 @@ const deleteAction = (row) => {
       height: 100%;
     }
   }
-
-
   ::v-deep{
     .el-table__header th{
       font-size: 15px;
diff --git a/src/layout/Footer/index.vue b/src/layout/Footer/index.vue
index a7be3c1..373c6ea 100644
--- a/src/layout/Footer/index.vue
+++ b/src/layout/Footer/index.vue
@@ -7,11 +7,13 @@
 <style scoped lang="scss">
 .footer{
   height: 40px;
+  font-size: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   border-top: 1px solid #e4e7ed;
   flex-shrink: 0;
+  color: rgba(0, 0, 0, 0.45);
 }
 </style>
diff --git a/src/layout/Main/index.vue b/src/layout/Main/index.vue
index 53e2933..3825c7c 100644
--- a/src/layout/Main/index.vue
+++ b/src/layout/Main/index.vue
@@ -10,7 +10,7 @@
       </router-view>
     </div>
     <Theme />
-
+    <Footer/>
   </div>
 </template>
 
diff --git a/src/layout/TagsView/components/MoreButton.vue b/src/layout/TagsView/components/MoreButton.vue
index c721a1d..48fcd1b 100644
--- a/src/layout/TagsView/components/MoreButton.vue
+++ b/src/layout/TagsView/components/MoreButton.vue
@@ -6,10 +6,10 @@
     </el-button>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item @click="refresh">刷新当页</el-dropdown-item>
-        <el-dropdown-item @click="closeCurrentTab">关闭当前</el-dropdown-item>
-        <el-dropdown-item @click="closeOtherTab">关闭其他</el-dropdown-item>
-        <el-dropdown-item @click="closeAllTab">关闭所有</el-dropdown-item>
+        <el-dropdown-item @click="refresh"><el-icon :size="14"><Refresh /></el-icon> 刷新当页</el-dropdown-item>
+        <el-dropdown-item @click="closeCurrentTab"><el-icon :size="14"><FolderRemove/></el-icon> 关闭当前</el-dropdown-item>
+        <el-dropdown-item @click="closeOtherTab"><el-icon :size="14"><Close /></el-icon>关闭其他</el-dropdown-item>
+        <el-dropdown-item @click="closeAllTab"><el-icon :size="14"><FolderDelete /></el-icon>关闭所有</el-dropdown-item>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -18,7 +18,9 @@
 import {computed} from "vue";
 import {useSettingStore} from "@/store/modules/setting"
 import {useTagsViewStore} from "@/store/modules/tagsView"
-
+import { useRouter,useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
 const SettingStore = useSettingStore()
 const TagsViewStore = useTagsViewStore()
 const visitedViews = computed(() => TagsViewStore.visitedViews)
@@ -27,24 +29,19 @@ const refresh = () => {
 }
 // 关闭当前
 const closeCurrentTab = (event)=>{
-  closeSelectedTag(event,route)
+  TagsViewStore.toLastView(route.path)
+  TagsViewStore.delView(route.path)
+
 }
 // 关闭其他
 const closeOtherTab= async ()=>{
-  const { name } = route
-  for(let item of visitedViews.value){
-    if(item.name!==name){
-      await closeSelectedTag(null,item)
-    }
-  }
+  TagsViewStore.delOtherViews(route.path)
 }
 
-
-
 // 关闭所有 去首页
 const closeAllTab = async ()=>{
-  let visitedViews = await TagsViewStore.delAllViews()
-  await TagsViewStore.goHome()
+  await TagsViewStore.delAllViews()
+  TagsViewStore.goHome()
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/layout/TagsView/index.vue b/src/layout/TagsView/index.vue
index de82504..3720abd 100644
--- a/src/layout/TagsView/index.vue
+++ b/src/layout/TagsView/index.vue
@@ -109,7 +109,6 @@ function toLastView(activeTabPath) {
   router.push(nextTab.path);
   TagsViewStore.addVisitedView(nextTab)
 }
-// Tab Click
 const tabClick = (tabItem: TabsPaneContext) => {
   let path = tabItem.props.name as string;
   router.push(path);
diff --git a/src/mock/system.ts b/src/mock/system.ts
new file mode 100644
index 0000000..5c477fc
--- /dev/null
+++ b/src/mock/system.ts
@@ -0,0 +1,237 @@
+export const userData =[
+    {
+        username:'zzb',
+        nickname:'林峰',
+        sex:'男',
+        role:'超级管理员',
+        status:true,
+    },
+    {
+        username:'zhangsan',
+        nickname:'张三',
+        sex:'女',
+        role:'管理员',
+        status:true,
+    },
+    {
+        username:'lisi',
+        nickname:'李四',
+        sex:'男',
+        role:'管理员',
+        status:true,
+    },
+    {
+        username:'wangwu',
+        nickname:'王五',
+        sex:'男',
+        role:'超级管理员',
+        status:false,
+    },
+    {
+        username:'zhaoliu',
+        nickname:'赵柳',
+        sex:'男',
+        role:'普通用户',
+        status:false,
+    },
+
+]
+
+
+export const roleData =[
+    {
+        roleName:'超级管理员',
+        roleId:'admin',
+        createTime:'2022-09-02',
+    },
+    {
+        roleName:'管理员',
+        roleId:'role',
+        createTime:'2022-09-02',
+    },
+    {
+        roleName:'普通用户',
+        roleId:'other',
+        createTime:'2022-09-02',
+    },
+
+]
+
+
+export const menuData =[
+    {
+        menuName:'首页',
+        menuType:'菜单',
+        menuRouter:'/home',
+        identification:'menu:home',
+        parentId:0,
+        level:1,
+        id:0,
+        createTime:'2022-09-02',
+    },
+    {
+        menuName:'表格',
+        menuType:'目录',
+        menuRouter:'/table',
+        identification:'menu:table',
+        parentId:0,
+        level:1,
+        id:1,
+        createTime:'2022-09-02',
+        children:[
+            {
+                menuName:'菜单1',
+                menuType:'菜单',
+                menuRouter:'/table',
+                identification:'menu1:view',
+                parentId:1,
+                level:2,
+                id:10,
+                createTime:'2022-09-02',
+                children:[
+                    {
+                        menuName:'按钮1',
+                        menuType:'按钮',
+                        menuRouter:'/table',
+                        identification:'menu1:view:btn1',
+                        parentId:10,
+                        id:20,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮2',
+                        menuType:'按钮',
+                        menuRouter:'/table',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:21,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮3',
+                        menuType:'按钮',
+                        menuRouter:'/table',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:22,
+                        level:3,
+                        createTime:'2022-09-02',
+                    }
+                ]
+            }
+        ]
+    },
+
+    {
+        menuName:'可视化图表',
+        menuType:'目录',
+        menuRouter:'/charts',
+        identification:'menu:charts',
+        parentId:0,
+        level:1,
+        id:1,
+        createTime:'2022-09-02',
+        children:[
+            {
+                menuName:'菜单1',
+                menuType:'菜单',
+                menuRouter:'/charts',
+                identification:'menu1:view',
+                parentId:1,
+                level:2,
+                id:10,
+                createTime:'2022-09-02',
+                children:[
+                    {
+                        menuName:'按钮1',
+                        menuType:'按钮',
+                        menuRouter:'/charts',
+                        identification:'menu1:view:btn1',
+                        parentId:10,
+                        id:20,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮2',
+                        menuType:'按钮',
+                        menuRouter:'/charts',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:21,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮3',
+                        menuType:'按钮',
+                        menuRouter:'/charts',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:22,
+                        level:3,
+                        createTime:'2022-09-02',
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        menuName:'基础组件',
+        menuType:'目录',
+        menuRouter:'/components',
+        identification:'menu:components',
+        parentId:0,
+        level:1,
+        id:1,
+        createTime:'2022-09-02',
+        children:[
+            {
+                menuName:'菜单1',
+                menuType:'菜单',
+                menuRouter:'/components',
+                identification:'menu1:view',
+                parentId:1,
+                level:2,
+                id:10,
+                createTime:'2022-09-02',
+                children:[
+                    {
+                        menuName:'按钮1',
+                        menuType:'按钮',
+                        menuRouter:'/components',
+                        identification:'menu1:view:btn1',
+                        parentId:10,
+                        id:20,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮2',
+                        menuType:'按钮',
+                        menuRouter:'/components',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:21,
+                        level:3,
+                        createTime:'2022-09-02',
+                    },
+                    {
+                        menuName:'按钮3',
+                        menuType:'按钮',
+                        menuRouter:'/components',
+                        identification:'menu1:view:btn2',
+                        parentId:10,
+                        id:22,
+                        level:3,
+                        createTime:'2022-09-02',
+                    }
+                ]
+            }
+        ]
+    },
+]
+
+
diff --git a/src/mock/table.ts b/src/mock/table.ts
new file mode 100644
index 0000000..998476c
--- /dev/null
+++ b/src/mock/table.ts
@@ -0,0 +1,132 @@
+export const tableList = [
+    {
+        date: '2016-05-02',
+        name: '王五',
+        price: 20,
+        province: '上海',
+        admin: 'admin',
+        sex: 1,
+        id:  1,
+        age: 18,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1518 弄',
+        zip: 200333,
+    },
+    {
+        date: '2018-06-11',
+        name: '梦琪',
+        price: 20,
+        province: '上海',
+        admin: 'admin',
+        sex: 1,
+        id:  2,
+        age: 22,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1519 弄',
+        zip: 200333,
+    },
+    {
+        date: '2022-05-23',
+        name: '忆柳',
+        price: 22,
+        province: '上海',
+        admin: 'admin',
+        sex: 0,
+        id:  3,
+        age: 23,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 1520 弄',
+        zip: 200333,
+    },
+    {
+        date: '2022-01-24',
+        name: '之桃',
+        price: 33,
+        province: '上海',
+        admin: 'admin',
+        sex: 1,
+        id:  4,
+        age: 24,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 2222 弄',
+        zip: 200333,
+    },
+    {
+        date: '2022-07-22',
+        name: '慕青',
+        price: 45,
+        province: '上海',
+        admin: 'admin',
+        sex: 0,
+        id:  5,
+        age: 25,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 2223 弄',
+        zip: 200333,
+    },
+    {
+        date: '2016-05-02',
+        name: '问兰',
+        price: 47,
+        province: '上海',
+        admin: 'admin',
+        sex: 1,
+        id:  6,
+        age: 26,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 2224 弄',
+        zip: 200333,
+    },
+    {
+        date: '2016-08-02',
+        name: '元香',
+        price: 45,
+        province: '上海',
+        admin: 'admin',
+        sex: 0,
+        id:  7,
+        age: 27,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 2225 弄',
+        zip: 200333,
+    },
+    {
+        date: '2019-11-11',
+        name: '初夏',
+        price: 23,
+        province: '上海',
+        admin: 'admin',
+        sex: 1,
+        id:  8,
+        age: 28,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 2226 弄',
+        zip: 200333,
+    },
+    {
+        date: '2018-08-02',
+        name: '沛菡',
+        price: 33,
+        province: '上海',
+        admin: 'other',
+        sex: 0,
+        id:  9,
+        age: 29,
+        city: '普陀区',
+        address: '上海市普陀区金沙江路 2227 弄',
+        zip: 200339,
+    },
+    {
+        date: '2022-11-03',
+        name: '傲珊',
+        price: 222,
+        province: '浙江',
+        admin: 'admin',
+        sex: 1,
+        id:  10,
+        age: 30,
+        city: '杭州',
+        address: '杭州市滨江区建业路228号',
+        zip: 200433,
+    }
+]
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index e9d3729..bdb6873 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -1,6 +1,5 @@
 import {defineStore} from 'pinia'
-import {  useRouter } from "vue-router";
-const router = useRouter()
+import router from "@/router/index";
 
 export const useTagsViewStore = defineStore({
     // id: 必须的，在所有 Store 中唯一
@@ -52,6 +51,13 @@ export const useTagsViewStore = defineStore({
             })
 
         },
+        toLastView(activeTabPath){
+            let index = this.visitedViews.findIndex(item=>item.path===activeTabPath)
+            const nextTab = this.visitedViews[index + 1] || this.visitedViews[index - 1];
+            if (!nextTab) return;
+            router.push(nextTab.path);
+            this.addVisitedView(nextTab)
+        },
         delVisitedView(path){
             return new Promise(resolve => {
                 this.visitedViews = this.visitedViews.filter(v=>{
@@ -82,9 +88,17 @@ export const useTagsViewStore = defineStore({
                 resolve([...this.visitedViews])
             })
         },
-        async goHome() {
-            router.push('/home');
+        delOtherViews(path){
+            this.visitedViews = this.visitedViews.filter(item => {
+                return item.path === path || item.meta.affix;
+            });
+            this.cachedViews = this.visitedViews.filter(item => {
+                return item.path === path || item.meta.affix;
+            });
+        },
+        goHome() {
             this.activeTabsValue = '/home';
+            router.push({path: '/home'});
         },
         updateVisitedView(view){
             for (let v of this.visitedViews) {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 2955fe2..40fd669 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -55,6 +55,8 @@ body{
 }
 
 
+
+
 /* nprogress样式 */
 #nprogress .bar {
   background: $primaryColor !important;
diff --git a/src/styles/element.scss b/src/styles/element.scss
index 240386e..fae6049 100644
--- a/src/styles/element.scss
+++ b/src/styles/element.scss
@@ -3,3 +3,7 @@
   color: #252525;
   background: #fafafa;
 }
+
+.el-table .el-table__header th {
+  background: var(--el-fill-color-light)!important;
+}
diff --git a/src/views/excel/exportExcel/index.scss b/src/views/excel/exportExcel/index.scss
new file mode 100644
index 0000000..c52e6e2
--- /dev/null
+++ b/src/views/excel/exportExcel/index.scss
@@ -0,0 +1,32 @@
+.header{
+  display: flex;
+  padding: 16px 16px 16px 16px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+.footer{
+  flex: 1;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  position: relative;
+  box-sizing: border-box;
+  .footer-inner{
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
diff --git a/src/views/excel/exportExcel/index.vue b/src/views/excel/exportExcel/index.vue
index adf15ad..074fc57 100644
--- a/src/views/excel/exportExcel/index.vue
+++ b/src/views/excel/exportExcel/index.vue
@@ -35,45 +35,28 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import * as dayjs from 'dayjs'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import {tableList} from "@/mock/table"
+import { ref } from 'vue'
 import { exportExcel } from '@/utils/exprotExcel'
-const data = []
-for (let i = 0; i < 10; i++) {
-  data.push({
-    date: '2016-05-02',
-    name: '王五' + i,
-    price: 1 + i,
-    province: '上海',
-    admin: 'admin',
-    checked: true,
-    id: i + 1,
-    age: 0,
-    city: '普陀区',
-    address: '上海市普上海',
-    zip: 200333,
-  })
-}
 const column = [
   { name: 'id', label: 'id' },
   { name: 'name', label: '姓名' },
   { name: 'age', label: '年龄', align: 'right' },
   {name: 'price', label: '价格', },
   { name: 'admin', label: '账号' },
-  { name: 'address', label: '地址',width:180 },
+  { name: 'address', label: '地址',width:250 },
   { name: 'date', label: '日期' ,width:140},
   { name: 'province', label: '省份' },
   { name: 'city', label: '城市' },
   { name: 'zip', label: '邮编' },
 ]
-const list = ref(data)
+const list = ref(tableList)
 const input = ref('')
 const format = ref('xlsx')
 const exportExcelAction = () => {
   exportExcel({
     column,
-    data,
+    data:list.value,
     filename: input.value || '导出 excel',
     format: format.value,
     autoWidth: true,
@@ -82,36 +65,5 @@ const exportExcelAction = () => {
 </script>
 
 <style lang="scss" scoped>
-.header{
-  display: flex;
-  padding: 16px 16px 16px 16px;
-  margin-bottom: 16px;
-  border-radius: 4px;
-  background: white;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-}
-.footer{
-  flex: 1;
-  display: flex;
-  padding: 16px;
-  flex-direction: column;
-  border-radius: 4px;
-  overflow: hidden;
-  background: white;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
-  position: relative;
-  box-sizing: border-box;
-  .footer-inner{
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .table{
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%
-  }
-}
+@import "./index";
 </style>
diff --git a/src/views/system/menu.vue b/src/views/system/menu.vue
index d7d956a..596714f 100644
--- a/src/views/system/menu.vue
+++ b/src/views/system/menu.vue
@@ -1,33 +1,39 @@
 <template>
-  <u-container-layout class="components-container">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
-      <el-form-item label="用户名" prop="username">
-        <el-input v-model="formInline.username" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="reset(ruleFormRef1)">重置</el-button>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
-      </el-form-item>
-    </el-form>
-    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
-      <el-button type="primary" @click="add">新增</el-button>
+  <div class="app-container">
+    <div class="header">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="formInline.username" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
+          <el-button @click="reset(ruleFormRef1)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div class="util">
+        <el-button type="primary" @click="add">新增</el-button>
+      </div>
+      <div class="table-wrap">
+        <el-table :data="tableData" style="width: 100%" border default-expand-all row-key="id" class="table">
+          <el-table-column prop="menuName" label="权限名称" />
+          <el-table-column prop="menuType" label="权限类型" />
+          <el-table-column prop="menuRouter" label="权限路由" />
+          <el-table-column prop="identification" label="权限标识" />
+          <el-table-column prop="status" label="操作">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
+                编辑
+              </el-button>
+              <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
-    <el-table :data="tableData" style="width: 100%" border default-expand-all row-key="id">
-      <el-table-column prop="menuName" label="权限名称" />
-      <el-table-column prop="menuType" label="权限类型" />
-      <el-table-column prop="menuRouter" label="权限路由" />
-      <el-table-column prop="identification" label="权限标识" />
-      <el-table-column prop="status" label="操作">
-        <template #default="scope">
-          <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
-            编辑
-          </el-button>
-          <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <el-drawer v-model="dialogVisible" :title="title" width="50%">
       <el-form
         ref="ruleFormRef"
@@ -61,13 +67,14 @@
         </span>
       </template>
     </el-drawer>
-  </u-container-layout>
+  </div>
 </template>
 
 <script lang="ts" setup>
   import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
   import { reactive, ref } from 'vue'
-  import { menuData } from './data/user'
+  import {Search } from '@element-plus/icons-vue'
+  import { menuData } from '@/mock/system'
   import * as dayjs from 'dayjs'
   const tableData = ref(menuData)
   const dialogVisible = ref(false)
@@ -159,4 +166,49 @@
   }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.header{
+  display: flex;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+.footer{
+  flex: 1;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  position: relative;
+  box-sizing: border-box;
+  .util{
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+  .table-wrap{
+    flex: 1;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+  .table-inner{
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
+</style>
diff --git a/src/views/system/role.vue b/src/views/system/role.vue
index 381e14e..77dcd49 100644
--- a/src/views/system/role.vue
+++ b/src/views/system/role.vue
@@ -1,31 +1,37 @@
 <template>
-  <u-container-layout class="components-container">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input v-model="formInline.roleName" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="reset(ruleFormRef1)">重置</el-button>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
-      </el-form-item>
-    </el-form>
-    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
-      <el-button type="primary" @click="add">新增</el-button>
+  <div class="app-container">
+    <div class="header">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="formInline.roleName" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
+          <el-button @click="reset(ruleFormRef1)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div class="util">
+        <el-button type="primary" @click="add">新增</el-button>
+      </div>
+      <div class="table-inner">
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column prop="roleName" label="角色名称" />
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column prop="status" label="操作">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
+                编辑
+              </el-button>
+              <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
-    <el-table :data="tableData" style="width: 100%" border>
-      <el-table-column prop="roleName" label="角色名称" />
-      <el-table-column prop="createTime" label="创建时间" />
-      <el-table-column prop="status" label="操作">
-        <template #default="scope">
-          <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
-            编辑
-          </el-button>
-          <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <el-drawer v-model="dialogVisible" :title="title" width="50%">
       <el-form
         ref="ruleFormRef"
@@ -58,13 +64,14 @@
         </span>
       </template>
     </el-drawer>
-  </u-container-layout>
+  </div>
 </template>
 
 <script lang="ts" setup>
   import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+  import {Search } from '@element-plus/icons-vue'
   import { reactive, ref } from 'vue'
-  import { roleData, menuData } from './data/user'
+  import { roleData } from '@/mock/system'
   import * as dayjs from 'dayjs'
   const tableData = ref(roleData)
   const dialogVisible = ref(false)
@@ -155,4 +162,43 @@
   }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.header{
+  display: flex;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+.footer{
+  flex: 1;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  position: relative;
+  box-sizing: border-box;
+  .util{
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+  .table-inner{
+    flex: 1;
+    position: relative;
+  }
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
+
+</style>
diff --git a/src/views/system/user.vue b/src/views/system/user.vue
index c1cb1da..b052952 100644
--- a/src/views/system/user.vue
+++ b/src/views/system/user.vue
@@ -1,38 +1,44 @@
 <template>
-  <u-container-layout class="components-container">
-    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef1">
-      <el-form-item label="用户名" prop="username">
-        <el-input v-model="formInline.username" />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="reset(ruleFormRef1)">重置</el-button>
-        <el-button type="primary" @click="onSubmit">查询</el-button>
-      </el-form-item>
-    </el-form>
-    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
-      <el-button type="primary" @click="add">新增</el-button>
+  <div class="app-container">
+    <div class="header">
+      <el-form :inline="true" :model="formInline" ref="ruleFormRef1">
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="formInline.username" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
+          <el-button @click="reset(ruleFormRef1)">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="footer">
+      <div class="util">
+        <el-button type="primary" @click="add">新增</el-button>
+      </div>
+      <div class="table-inner">
+        <el-table :data="tableData" style="width: 100%" border>
+          <el-table-column prop="username" label="用户名" />
+          <el-table-column prop="nickname" label="昵称" />
+          <el-table-column prop="sex" label="性别" />
+          <el-table-column prop="role" label="角色" />
+          <el-table-column prop="status" label="状态">
+            <template #default="scope">
+              <el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="操作">
+            <template #default="scope">
+              <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
+                编辑
+              </el-button>
+              <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
-    <el-table :data="tableData" style="width: 100%" border>
-      <el-table-column prop="username" label="用户名" />
-      <el-table-column prop="nickname" label="昵称" />
-      <el-table-column prop="sex" label="性别" />
-      <el-table-column prop="role" label="角色" />
-      <el-table-column prop="status" label="状态">
-        <template #default="scope">
-          <el-switch v-model="scope.row.status" @change="changeStatus(scope.row)" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" label="操作">
-        <template #default="scope">
-          <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
-            编辑
-          </el-button>
-          <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
       <el-form
         ref="ruleFormRef"
@@ -69,13 +75,14 @@
         </span>
       </template>
     </el-dialog>
-  </u-container-layout>
+  </div>
 </template>
 
 <script lang="ts" setup>
   import { ElMessageBox, ElMessage, FormInstance } from 'element-plus'
+  import {Search } from '@element-plus/icons-vue'
   import { reactive, ref } from 'vue'
-  import { userData } from './data/user'
+  import { userData } from '@/mock/system'
   import * as dayjs from 'dayjs'
   const tableData = ref(userData)
   const dialogVisible = ref(false)
@@ -168,4 +175,43 @@
   }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.header{
+  display: flex;
+  padding: 16px 16px 0px 16px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+}
+.footer{
+  flex: 1;
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  position: relative;
+  box-sizing: border-box;
+  .util{
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+  .table-inner{
+    flex: 1;
+    position: relative;
+  }
+  .table{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%
+  }
+}
+
+</style>
diff --git a/src/views/table/InlineEditTable/index.vue b/src/views/table/InlineEditTable/index.vue
index 35e31c2..933946c 100644
--- a/src/views/table/InlineEditTable/index.vue
+++ b/src/views/table/InlineEditTable/index.vue
@@ -12,9 +12,11 @@
     </div>
     <div class="footer">
 
-      <el-table :data="list" style="width: 100%" :border="true" v-loading="loading">
-        <el-table-column prop="id" width="60" label="id" />
-        <el-table-column prop="name" label="姓名" min-width="200px">
+      <el-table
+          :data="list"
+          style="width: 100%" :border="true" v-loading="loading">
+        <el-table-column prop="id" width="60" label="id" align="center"/>
+        <el-table-column prop="name" label="姓名" min-width="200px" align="center">
           <template #default="scope">
             <template v-if="scope.row.edit">
               <div style="display: flex; align-items: center">
@@ -32,19 +34,21 @@
             <template v-else>{{ scope.row.name }}</template>
           </template>
         </el-table-column>
-        <el-table-column prop="age" label="年龄" />
-        <el-table-column prop="sex" label="性别">
+        <el-table-column prop="age" label="年龄" align="center"/>
+        <el-table-column prop="sex" label="性别" align="center">
           <template #default="scope">
             {{ scope.row.sex ? '男' : '女' }}
           </template>
         </el-table-column>
-        <el-table-column prop="price" label="价格" />
-        <el-table-column prop="admin" label="账号" />
-        <el-table-column prop="address" label="地址" width="180"/>
-        <el-table-column prop="date" label="日期" width="180"/>
-        <el-table-column prop="province" label="省份" width="120"/>
-        <el-table-column prop="city" label="城市" />
-        <el-table-column prop="operator" label="操作" width="180px" fixed="right">
+        <el-table-column prop="price" label="价格" align="center"/>
+        <el-table-column prop="admin" label="账号" align="center"/>
+        <el-table-column prop="address"
+                         :show-overflow-tooltip="true"
+                         label="地址" width="180" align="center"/>
+        <el-table-column prop="date" label="日期" width="180" align="center"/>
+        <el-table-column prop="province" label="省份" width="120" align="center"/>
+        <el-table-column prop="city" label="城市" align="center"/>
+        <el-table-column prop="operator" label="操作" width="180px" fixed="right" align="center">
           <template #default="scope">
             <el-button
               v-if="scope.row.edit"
@@ -102,7 +106,7 @@
       img: 'https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
       age: 0,
       city: '普陀区',
-      address: '上海市普上海',
+      address: `上海市普陀区金沙江路 222${i} 弄`,
       zip: 200333,
     })
   }