diff --git a/README.md b/README.md
index c365725..4195884 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,75 @@
-# ad
+# 简介
+vue-element-perfect 是一个后台前端解决方案, 基于Vue3.0+TS+Element-plus实现。它使用了最新的前端技术栈、动态路由，权限验证，并且有着丰富的组件。
+
+## 效果预览
+
+### 在线预览点击 —— [企业级、通用型中后台前端解决方案 ](http://182.61.5.190:8889/)
+
+### 附上github地址点击跳转 [vue-admin-perfect](https://github.com/zouzhibin/vue-admin-perfect)
+
+## 目录结构介绍
 
-## Project setup
-```
-yarn install
 ```
 
-### Compiles and hot-reloads for development
+├─assets    放置一些静态文件
+├─components 放置组件
+├─layout 首页布局
+│  ├─components
+│  │  ├─Sidebar 侧边栏配置
+│  │  ├─TagsView 标签栏配置
+│  │  └─UHeader 头部内容配置
+│  └─hooks
+├─router   路由配置
+├─store    数据存储
+├─styles   样式文件
+├─utils   工具方法
+└─views    页面配置方法
+└─permission  路由拦截 权限配置
 ```
+
+## 技术栈
+vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
+
+## 实现功能
+- 登录逻辑
+- 权限校验
+- 侧边栏导航显示
+- 打印
+- 地图
+- 头像裁剪
+- 无限滚动
+- 多标签显示
+- 退出
+- 其他各组件
+
+
+## 项目 master 分支 基于vue3.0 + Typescript + vuex + vue-router + Element-Plus scss
+```
+# 克隆项目
+git clone https://github.com/zouzhibin/vue-admin-perfect.git
+
+# 安装依赖
+yarn
+
+# 本地开发 启动项目
 yarn serve
 ```
 
-### Compiles and minifies for production
+
+## 项目 uniapp 分支 基于 uniapp +vuex +element scss
+
 ```
-yarn build
+# 克隆项目 切换 uniapp分支
+git clone https://github.com/zouzhibin/vue-admin-perfect.git
+
+# 安装依赖
+yarn
+
+# 本地开发 启动项目
+hbuilder运行浏览器启动
 ```
 
-### Lints and fixes files
-```
-yarn lint
-```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..f31ae91
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,18 @@
+#强制推送
+#!/usr/bin/env bash
+set -e
+npm run build
+cd dist
+touch .nojekyll
+git init
+git add -A
+git commit -m 'deploy'
+git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master:gh-pages
+git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master:gh-pages
+
+cd -
+exec /bin/bash
+
+
+
+
diff --git a/package.json b/package.json
index 9685106..2a221c9 100644
--- a/package.json
+++ b/package.json
@@ -60,9 +60,6 @@
     "sass-loader": "^8.0.2",
     "typescript": "~4.1.5"
   },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": [
       "vue-cli-service lint",
diff --git a/push.sh b/push.sh
new file mode 100644
index 0000000..884fc8a
--- /dev/null
+++ b/push.sh
@@ -0,0 +1,13 @@
+#强制推送
+#!/usr/bin/env bash
+set -e
+git init
+git add -A
+git commit -m '🎉 feat: init project'
+git push -f "https://${access_token}@gitee.com/yuanzbz/vue-admin-perfect.git" master
+git push -f "https://${access_token}@github.com/zouzhibin/vue-admin-perfect.git" master
+exec /bin/bash
+
+
+
+
diff --git a/src/components/u-info/index.vue b/src/components/u-info/index.vue
index edc6ea3..00a37f4 100644
--- a/src/components/u-info/index.vue
+++ b/src/components/u-info/index.vue
@@ -20,22 +20,21 @@
             </div>
         </el-popover>
 
-
     </div>
 
 </template>
 
 <script lang="ts" setup>
-    import { ref } from 'vue'
-    import type { TabsPaneContext } from 'element-plus'
+import { ref } from 'vue'
+import type { TabsPaneContext } from 'element-plus'
 
-    const activeName = ref('first')
-    const toGitHub = ()=>{
-        window.open('https://github.com/zouzhibin/vue-admin-perfect')
-    }
-    const handleClick = (tab: TabsPaneContext, event: Event) => {
-        console.log(tab, event)
-    }
+const activeName = ref('first')
+const toGitHub = () => {
+  window.open('https://github.com/zouzhibin/vue-admin-perfect')
+}
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 6d05da9..7305837 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -13,18 +13,18 @@
 </template>
 
 <script lang="ts" setup>
-    import USetting from '@/components/u-setting/index.vue'
-    import {useStore} from "vuex";
-    import {computed, ref,} from 'vue'
-    const store = useStore()
+import USetting from '@/components/u-setting/index.vue'
+import { useStore } from 'vuex'
+import { computed, ref } from 'vue'
+const store = useStore()
 
-    const cachedViews = computed(()=>{
-      return store.state.tagsView.cachedViews
-    })
+const cachedViews = computed(() => {
+  return store.state.tagsView.cachedViews
+})
 
-    const isReload = computed(()=>{
-      return store.state.app.isReload
-    })
+const isReload = computed(() => {
+  return store.state.app.isReload
+})
 </script>
 
 <style lang="scss" scoped>
@@ -41,7 +41,6 @@
     //  background: white;
   }
 
-
   //// 主内容区动画
   //.main-enter-active {
   //  transition: 0.2s;
diff --git a/src/router/modules/other.ts b/src/router/modules/other.ts
index acd2a11..85af372 100644
--- a/src/router/modules/other.ts
+++ b/src/router/modules/other.ts
@@ -1,72 +1,72 @@
 /** When your routing table is too long, you can split it into small modules**/
 
-import Layout from "@/layout/index.vue";
+import Layout from '@/layout/index.vue'
 
 const othersRouter = {
-    path: '/other',
-    component: Layout,
-    redirect: 'noRedirect',
-    name: 'other',
-    meta: {
-        title: '扩展组件',
-        icon: 'management'
+  path: '/other',
+  component: Layout,
+  redirect: 'noRedirect',
+  name: 'other',
+  meta: {
+    title: '扩展组件',
+    icon: 'management'
+  },
+  children: [
+    {
+      path: 'editor',
+      component: () => import('@/views/other/editor.vue'),
+      name: 'editor',
+      meta: { title: '富文本编辑器', roles: ['other'] }
     },
-    children: [
-        {
-            path: 'editor',
-            component: () => import('@/views/other/editor.vue'),
-            name: 'editor',
-            meta: { title: '富文本编辑器',   roles:['other'] }
-        },
-        {
-            path: 'mark-down',
-            component: () => import('@/views/other/mark-down.vue'),
-            name: 'mark-down',
-            meta: { title: 'markDown',  roles:['other']}
-        },
-        {
-            path: 'print',
-            component: () => import('@/views/other/print.vue'),
-            name: 'print',
-            meta: { title: '打印',   }
-        },
-        {
-            path: 'cropper',
-            component: () => import('@/views/other/cropper/index.vue'),
-            name: 'cropper',
-            meta: { title: '头像裁剪'  , }
-        },
-        {
-            path: 'grid-sorter',
-            component: () => import('@/views/other/grid-sorter.vue'),
-            name: 'grid-sorter',
-            meta: { title: '卡片拖拽', }
-        },
-        // {
-        //     path: 'splitpane',
-        //     component: () => import('@/views/other/splitpane.vue'),
-        //     name: 'splitpane',
-        //     meta: { title: '分割模块',}
-        // },
-        {
-            path: 'qrcode',
-            component: () => import('@/views/other/qrcode.vue'),
-            name: 'qrcode',
-            meta: { title: '生成二维码', }
-        },
-        {
-            path: 'right-menu',
-            component: () => import('@/views/other/right-menu.vue'),
-            name: 'right-menu',
-            meta: { title: '右键菜单',}
-        },
-        {
-            path: 'count',
-            component: () => import('@/views/other/count.vue'),
-            name: 'count',
-            meta: { title: '数字自增长',}
-        },
-    ]
+    {
+      path: 'mark-down',
+      component: () => import('@/views/other/mark-down.vue'),
+      name: 'mark-down',
+      meta: { title: 'markDown', roles: ['other'] }
+    },
+    {
+      path: 'print',
+      component: () => import('@/views/other/print.vue'),
+      name: 'print',
+      meta: { title: '打印' }
+    },
+    {
+      path: 'cropper',
+      component: () => import('@/views/other/cropper/index.vue'),
+      name: 'cropper',
+      meta: { title: '头像裁剪' }
+    },
+    {
+      path: 'grid-sorter',
+      component: () => import('@/views/other/grid-sorter.vue'),
+      name: 'grid-sorter',
+      meta: { title: '卡片拖拽' }
+    },
+    // {
+    //     path: 'splitpane',
+    //     component: () => import('@/views/other/splitpane.vue'),
+    //     name: 'splitpane',
+    //     meta: { title: '分割模块',}
+    // },
+    {
+      path: 'qrcode',
+      component: () => import('@/views/other/qrcode.vue'),
+      name: 'qrcode',
+      meta: { title: '生成二维码' }
+    },
+    {
+      path: 'right-menu',
+      component: () => import('@/views/other/right-menu.vue'),
+      name: 'right-menu',
+      meta: { title: '右键菜单' }
+    },
+    {
+      path: 'count',
+      component: () => import('@/views/other/count.vue'),
+      name: 'count',
+      meta: { title: '数字自增长' }
+    }
+  ]
 }
 
 export default othersRouter
diff --git a/src/views/charts/components/migration/index.vue b/src/views/charts/components/migration/index.vue
index 5b29c38..ba3ef8e 100644
--- a/src/views/charts/components/migration/index.vue
+++ b/src/views/charts/components/migration/index.vue
@@ -3,279 +3,274 @@
   <div :id="id" :class="className" :style="{height:height,width:width}" />
 </template>
 <script lang="ts" setup>
-  import {geoJson} from './get.js'
-  import * as echarts from "echarts";
-  import {EChartsType} from "echarts/core";
-  import {onMounted} from "vue";
+import { geoJson } from './get.js'
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts/core'
+import { onMounted } from 'vue'
 
-  let props = defineProps({
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    config:{
-      type: Object,
-      default: ()=>{}
-    },
-    id: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '200px'
-    },
-    height: {
-      type: String,
-      default: '200px'
-    }
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart'
+  },
+  config: {
+    type: Object,
+    default: () => {}
+  },
+  id: {
+    type: String,
+    default: 'chart'
+  },
+  width: {
+    type: String,
+    default: '200px'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  }
+})
+
+var geoGpsMap = [109.1162, 34.2004]
+var geoCoordMap = {
+  江苏: [118.8062, 31.9208],
+  内蒙古: [110.3467, 41.4899],
+  辽宁: [123.1238, 42.1216],
+  陕西: [109.1162, 34.2004],
+  甘肃: [103.5901, 36.3043],
+  青海: [101.4038, 36.8207],
+  新疆: [87.9236, 43.5883],
+
+  河南: [113.4668, 34.6234],
+  西藏: [116.3896, 39.91],
+  浙江: [119.5313, 29.8773],
+  福建: [119.4543, 25.9222],
+  湖南: [113.0823, 28.2568],
+  四川: [113.0823, 28.2568],
+  云南: [102.9199, 25.4663],
+  广东: [113.12244, 23.009505],
+  海南: [110.3893, 19.8516]
+}
+
+var value = {
+  江苏: 10000,
+  内蒙古: 10000,
+  辽宁: 10000,
+  陕西: 10000,
+  福建: 10000,
+  甘肃: 10000,
+  青海: 10000,
+  新疆: 10000,
+  湖北: 10000,
+  浙江: 10000,
+  河南: 10000,
+  湖南: 10000,
+  云南: 10000,
+  广东: 10000,
+  海南: 10000,
+  西藏: 10000
+
+}
+var colors = '#f9b207'
+
+var year = ['长春', '长春', '青岛', '青岛', '成都', '成都']
+var mapData = []
+
+/* 柱子Y名称 */
+var categoryData = []
+var barData = []
+
+for (var key in geoCoordMap) {
+  mapData.push({
+    year: '陕西',
+    name: key,
+    value: value[key] / 100,
+    value1: value[key] / 100
   })
+}
 
-  var geoGpsMap = [109.1162, 34.2004]
-  var geoCoordMap = {
-    "江苏": [118.8062, 31.9208],
-    '内蒙古': [110.3467, 41.4899],
-    "辽宁": [123.1238, 42.1216],
-    "陕西": [109.1162, 34.2004],
-    "甘肃": [103.5901, 36.3043],
-    "青海": [101.4038, 36.8207],
-    "新疆": [87.9236, 43.5883],
+mapData.sort(function sortNumber (a, b) {
+  return a.value - b.value
+})
+for (var j = 0; j < mapData.length; j++) {
+  barData.push(mapData[j].value1)
+  categoryData.push(mapData[j].name)
+}
 
-    "河南": [113.4668, 34.6234],
-    "西藏": [116.3896, 39.91],
-    "浙江": [119.5313, 29.8773],
-    "福建": [119.4543, 25.9222],
-    "湖南": [113.0823, 28.2568],
-    "四川": [113.0823, 28.2568],
-    "云南": [102.9199, 25.4663],
-    "广东": [113.12244, 23.009505],
-    "海南": [110.3893, 19.8516]
-  };
-
-  var value = {
-    '江苏': 10000,
-    '内蒙古': 10000,
-    '辽宁': 10000,
-    '陕西': 10000,
-    '福建': 10000,
-    '甘肃': 10000,
-    '青海': 10000,
-    '新疆': 10000,
-    '湖北': 10000,
-    '浙江': 10000,
-    '河南': 10000,
-    '湖南': 10000,
-    '云南': 10000,
-    '广东': 10000,
-    '海南': 10000,
-    '西藏': 10000,
-
-
-
-  };
-  var colors = '#f9b207';
-
-  var year = ["长春", "长春", "青岛", "青岛", "成都", "成都"];
-  var mapData = [];
-
-  /*柱子Y名称*/
-  var categoryData = [];
-  var barData = [];
-
-  for (var key in geoCoordMap) {
-    mapData.push({
-      "year": '陕西',
-      "name": key,
-      "value": value[key] / 100,
-      "value1": value[key] / 100,
-    });
+echarts.registerMap('china', geoJson)
+var convertData = function (data) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var geoCoord = geoCoordMap[data[i].name]
+    if (geoCoord) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.concat(data[i].value)
+      })
+    }
   }
-
-  mapData.sort(function sortNumber(a, b) {
-    return a.value - b.value
-  });
-  for (var j = 0; j < mapData.length; j++) {
-    barData.push(mapData[j].value1);
-    categoryData.push(mapData[j].name);
+  return res
+}
+var convertToLineData = function (data, gps) {
+  var res = []
+  for (var i = 0; i < data.length; i++) {
+    var dataItem = data[i]
+    var toCoord = geoCoordMap[dataItem.name]
+    // debugger;
+    var fromCoord = gps // 郑州
+    //  var toCoord = geoGps[Math.random()*3];
+    if (fromCoord && toCoord) {
+      res.push([{
+        coord: fromCoord,
+        value: dataItem.value
+      }, {
+        coord: toCoord
+      }])
+    }
   }
+  return res
+}
 
-  echarts.registerMap('china', geoJson);
-  var convertData = function(data) {
-    var res = [];
-    for (var i = 0; i < data.length; i++) {
-      var geoCoord = geoCoordMap[data[i].name];
-      if (geoCoord) {
-        res.push({
-          name: data[i].name,
-          value: geoCoord.concat(data[i].value)
-        });
+const options = {
+  backgroundColor: '#001540',
+  geo: {
+    show: true,
+    map: 'china',
+    roam: true,
+    zoom: 1,
+    center: [101.4038, 36.8207],
+    label: {
+      emphasis: {
+        show: false
+      }
+    },
+    itemStyle: {
+      normal: {
+        borderColor: 'rgba(147, 235, 248, 1)',
+        borderWidth: 1,
+        areaColor: {
+          type: 'radial',
+          x: 0.5,
+          y: 0.5,
+          r: 0.8,
+          colorStops: [{
+            offset: 0,
+            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
+          }, {
+            offset: 1,
+            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
+          }],
+          globalCoord: false // 缺省为 false
+        },
+        shadowColor: 'rgba(128, 217, 248, 1)',
+        // shadowColor: 'rgba(255, 255, 255, 1)',
+        shadowOffsetX: -2,
+        shadowOffsetY: 2,
+        shadowBlur: 10
+      },
+      emphasis: {
+        areaColor: '#389BB7',
+        borderWidth: 0
       }
     }
-    return res;
-  };
-  var convertToLineData = function(data, gps) {
-    var res = [];
-    for (var i = 0; i < data.length; i++) {
-      var dataItem = data[i];
-      var toCoord = geoCoordMap[dataItem.name];
-      // debugger;
-      var fromCoord = gps; //郑州
-      //  var toCoord = geoGps[Math.random()*3];
-      if (fromCoord && toCoord) {
-        res.push([{
-          coord: fromCoord,
-          value: dataItem.value
-        }, {
-          coord: toCoord,
-        }]);
-      }
-    }
-    return res;
-  };
+  },
+  series: [
 
-
-
-  const options = {
-    backgroundColor: '#001540',
-    geo: {
-      show: true,
+    // 地图？
+    {
+      type: 'map',
       map: 'china',
-      roam: true,
-      zoom: 1,
-      center: [101.4038, 36.8207],
+      geoIndex: 0,
+      aspectScale: 0.75, // 长宽比
+      showLegendSymbol: false, // 存在legend时显示
       label: {
-        emphasis: {
+        normal: {
           show: false
+        },
+        emphasis: {
+          show: false,
+          textStyle: {
+            color: '#fff'
+          }
+        }
+      },
+      roam: true,
+      itemStyle: {
+        normal: {
+          areaColor: '#031525',
+          borderColor: '#FFFFFF'
+        },
+        emphasis: {
+          areaColor: '#2B91B7'
+        }
+      },
+      animation: false
+    },
+    // 地图点的动画效果
+    {
+      //  name: 'Top 5',
+      type: 'effectScatter',
+      coordinateSystem: 'geo',
+      data: convertData(mapData.sort(function (a, b) {
+        return b.value - a.value
+      }).slice(0, 20)),
+      symbolSize: function (val) {
+        return val[2] / 10
+      },
+      showEffectOn: 'render',
+      rippleEffect: {
+        brushType: 'stroke'
+      },
+      hoverAnimation: true,
+      label: {
+        normal: {
+          formatter: '{b}',
+          position: 'right',
+          show: true
         }
       },
       itemStyle: {
         normal: {
-          borderColor: 'rgba(147, 235, 248, 1)',
-          borderWidth: 1,
-          areaColor: {
-            type: 'radial',
-            x: 0.5,
-            y: 0.5,
-            r: 0.8,
-            colorStops: [{
-              offset: 0,
-              color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
-            }, {
-              offset: 1,
-              color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
-            }],
-            globalCoord: false // 缺省为 false
-          },
-          shadowColor: 'rgba(128, 217, 248, 1)',
-          // shadowColor: 'rgba(255, 255, 255, 1)',
-          shadowOffsetX: -2,
-          shadowOffsetY: 2,
-          shadowBlur: 10
-        },
-        emphasis: {
-          areaColor: '#389BB7',
-          borderWidth: 0
+          color: colors,
+          shadowBlur: 10,
+          shadowColor: colors
         }
-      }
+      },
+      zlevel: 1
     },
-    series: [
-
-      //地图？
-      {
-        type: 'map',
-        map: 'china',
-        geoIndex: 0,
-        aspectScale: 0.75, //长宽比
-        showLegendSymbol: false, // 存在legend时显示
-        label: {
-          normal: {
-            show: false
-          },
-          emphasis: {
-            show: false,
-            textStyle: {
-              color: '#fff'
-            }
-          }
-        },
-        roam: true,
-        itemStyle: {
-          normal: {
-            areaColor: '#031525',
-            borderColor: '#FFFFFF',
-          },
-          emphasis: {
-            areaColor: '#2B91B7'
-          }
-        },
-        animation: false
+    // 地图线的动画效果
+    {
+      type: 'lines',
+      zlevel: 2,
+      effect: {
+        show: true,
+        period: 4, // 箭头指向速度，值越小速度越快
+        trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
+        symbol: 'arrow', // 箭头图标
+        symbolSize: 3 // 图标大小
       },
-      //地图点的动画效果
-      {
-        //  name: 'Top 5',
-        type: 'effectScatter',
-        coordinateSystem: 'geo',
-        data: convertData(mapData.sort(function(a, b) {
-          return b.value - a.value;
-        }).slice(0, 20)),
-        symbolSize: function(val) {
-          return val[2] / 10;
-        },
-        showEffectOn: 'render',
-        rippleEffect: {
-          brushType: 'stroke'
-        },
-        hoverAnimation: true,
-        label: {
-          normal: {
-            formatter: '{b}',
-            position: 'right',
-            show: true
-          }
-        },
-        itemStyle: {
-          normal: {
-            color: colors,
-            shadowBlur: 10,
-            shadowColor: colors
-          }
-        },
-        zlevel: 1
+      lineStyle: {
+        normal: {
+          color: colors,
+          width: 0.1, // 尾迹线条宽度
+          opacity: 0.5, // 尾迹线条透明度
+          curveness: 0.3 // 尾迹线条曲直度
+        }
       },
-      //地图线的动画效果
-      {
-        type: 'lines',
-        zlevel: 2,
-        effect: {
-          show: true,
-          period: 4, //箭头指向速度，值越小速度越快
-          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
-          symbol: 'arrow', //箭头图标
-          symbolSize: 3, //图标大小
-        },
-        lineStyle: {
-          normal: {
-            color: colors,
-            width: 0.1, //尾迹线条宽度
-            opacity: 0.5, //尾迹线条透明度
-            curveness: .3 //尾迹线条曲直度
-          }
-        },
-        data: convertToLineData(mapData, geoGpsMap)
-      }
-    ]
-  };
-  let chart:EChartsType;
-  const initChart =()=> {
-    let chart = echarts.init(document.getElementById(props.id))
-    chart.setOption(options)
-    return chart
-  }
-  onMounted(()=>{
-    chart = initChart()
-    window.addEventListener('resize',function (){
-      chart&&chart.resize()
-    })
-
+      data: convertToLineData(mapData, geoGpsMap)
+    }
+  ]
+}
+let chart:EChartsType
+const initChart = () => {
+  const chart = echarts.init(document.getElementById(props.id))
+  chart.setOption(options)
+  return chart
+}
+onMounted(() => {
+  chart = initChart()
+  window.addEventListener('resize', function () {
+    chart && chart.resize()
   })
+})
 </script>
diff --git a/src/views/charts/migration.vue b/src/views/charts/migration.vue
index 0578732..5002896 100644
--- a/src/views/charts/migration.vue
+++ b/src/views/charts/migration.vue
@@ -5,7 +5,6 @@
 
 </template>
 
-
 <script setup lang="ts">
 import MigrationCharts from './components/migration/index.vue'
 
diff --git a/src/views/components-demo/button.vue b/src/views/components-demo/button.vue
index 5b22e47..8b3facf 100644
--- a/src/views/components-demo/button.vue
+++ b/src/views/components-demo/button.vue
@@ -143,7 +143,6 @@
         </div>
       </el-card>
 
-
       <el-card class="box-card">
         <template #header>
           <div class="card-header">
@@ -173,7 +172,7 @@ import {
   Message,
   Search,
   Share,
-  Star,
+  Star
 } from '@element-plus/icons-vue'
 </script>
 <style>
diff --git a/src/views/other/grid-sorter.vue b/src/views/other/grid-sorter.vue
index 564a690..f8ae800 100644
--- a/src/views/other/grid-sorter.vue
+++ b/src/views/other/grid-sorter.vue
@@ -37,61 +37,61 @@
   </u-container-layout>
 </template>
 <script lang="ts" setup>
-  // 参考文档 https://sortablejs.github.io/vue.draggable.next/#/transition-example-2
-  // https://github.com/SortableJS/vue.draggable.next/blob/master/package.json
-  import draggable from "vuedraggable";
-  import {computed, ref,reactive} from "vue";
-  import {getColor} from '@/utils/index'
+// 参考文档 https://sortablejs.github.io/vue.draggable.next/#/transition-example-2
+// https://github.com/SortableJS/vue.draggable.next/blob/master/package.json
+import draggable from 'vuedraggable'
+import { computed, ref, reactive } from 'vue'
+import { getColor } from '@/utils/index'
 
-  const message = ref([]);
-  const tags = ref([]);
+const message = ref([])
+const tags = ref([])
 
-  let icon = ['management','baseball','Basketball','BellFilled','Bell',
-    'AddLocation','Aim','AlarmClock','Apple','ArrowDownBold','Burger',
-    'Brush','BrushFilled','RemoveFilled','QuestionFilled','Promotion','Printer',
-    'School','Setting','WarningFilled','ZoomOut','WalletFilled','User',
-    'ToiletPaper','Sunrise','Sunny','SwitchButton','TakeawayBox','Ticket',
-    'StarFilled','Stamp','Stopwatch','SortDown','SemiSelect','Search',
-  ]
+const icon = ['management', 'baseball', 'Basketball', 'BellFilled', 'Bell',
+  'AddLocation', 'Aim', 'AlarmClock', 'Apple', 'ArrowDownBold', 'Burger',
+  'Brush', 'BrushFilled', 'RemoveFilled', 'QuestionFilled', 'Promotion', 'Printer',
+  'School', 'Setting', 'WarningFilled', 'ZoomOut', 'WalletFilled', 'User',
+  'ToiletPaper', 'Sunrise', 'Sunny', 'SwitchButton', 'TakeawayBox', 'Ticket',
+  'StarFilled', 'Stamp', 'Stopwatch', 'SortDown', 'SemiSelect', 'Search'
+]
 
-  // 随机生成颜色
-  for(let i=0;i<30;i++){
-    message.value.push({
-      name:i,
-      order:i+1,
-      icon:icon[i],
-      color:getColor()
-    })
-  }
-
-  const drag = ref(false)
-
-  // 设置排序参数
-  const dragOptions = computed(()=>{
-    return{
-          animation: 200,
-          group: "description",
-          disabled: false,
-          ghostClass: "ghost" // 滑动颜色
-        };
+// 随机生成颜色
+for (let i = 0; i < 30; i++) {
+  message.value.push({
+    name: i,
+    order: i + 1,
+    icon: icon[i],
+    color: getColor()
   })
+}
 
-  const sorter = ()=>{
-    message.value =  message.value.sort((a, b) => a.name - b.name);
+const drag = ref(false)
+
+// 设置排序参数
+const dragOptions = computed(() => {
+  return {
+    animation: 200,
+    group: 'description',
+    disabled: false,
+    ghostClass: 'ghost' // 滑动颜色
   }
+})
 
-  const onMoveCallback = (val) => {
-    console.log('拖动前的索引 :' + val.moved.newIndex);
-    console.log('拖动后的索引 :' + val.moved.oldIndex);
-  };
-  // 查看最新的数据
-  const getdata = () => {
-    console.log(11111111);
-  };
-  // 查看最新的数据
-  const getDataAction = () => {
-    console.log(message.value);
-  };
+const sorter = () => {
+  message.value = message.value.sort((a, b) => a.name - b.name)
+}
+
+const onMoveCallback = (val) => {
+  console.log('拖动前的索引 :' + val.moved.newIndex)
+  console.log('拖动后的索引 :' + val.moved.oldIndex)
+}
+// 查看最新的数据
+const getdata = () => {
+  console.log(11111111)
+}
+// 查看最新的数据
+const getDataAction = () => {
+  console.log(message.value)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/table/components/comprehensive.vue b/src/views/table/components/comprehensive.vue
index 2fc23ef..9709581 100644
--- a/src/views/table/components/comprehensive.vue
+++ b/src/views/table/components/comprehensive.vue
@@ -63,28 +63,27 @@
   </div>
 </template>
 <script lang="ts" setup>
-import {computed, ref} from "vue";
-import { ElMessage,ElMessageBox  } from 'element-plus'
+import { computed, ref, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import type { FormInstance } from 'element-plus'
+
 const ruleFormRef = ref<FormInstance>()
-const emit = defineEmits(['reset','onSubmit','selection-change'])
-let props = defineProps({
-  columns:{
-    type:Array,
-    default:()=>[]
+const emit = defineEmits(['reset', 'onSubmit', 'selection-change'])
+const props = defineProps({
+  columns: {
+    type: Array,
+    default: () => []
   },
-  data:{
-    type:Array,
-    default:()=>[]
+  data: {
+    type: Array,
+    default: () => []
   },
-  loading:{
-    type:Boolean,
-    default:false
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 
-
-
 const currentPage1 = ref(1)
 const isExpand = ref(true)
 const handleSizeChange = (val: number) => {
@@ -95,29 +94,26 @@ const handleCurrentChange = (val: number) => {
   currentPage1.value = val
 }
 
-const list = computed(()=>{
-  let arr = JSON.parse(JSON.stringify(props.data))
-  return arr.splice((currentPage1.value-1)*10,10)
+const list = computed(() => {
+  const arr = JSON.parse(JSON.stringify(props.data))
+  return arr.splice((currentPage1.value - 1) * 10, 10)
 })
 
-
 const listLoading = ref(false)
-const confirmEdit = (row)=>{
+const confirmEdit = (row) => {
   row.edit = false
 }
-const cancelEdit = (row)=>{
+const cancelEdit = (row) => {
   row.edit = false
 }
 
-import { reactive } from 'vue'
-
-let obj = {}
-let search = []
-for(let item of props.columns){
-  if(item.inSearch){
+const obj = {}
+const search = []
+for (const item of props.columns) {
+  if (item.inSearch) {
     obj[item.name] = null
   }
-  if(item.inSearch){
+  if (item.inSearch) {
     search.push(item)
   }
 }
@@ -125,39 +121,36 @@ const formSearchData = ref(search)
 const formInline = reactive(obj)
 
 const onSubmit = () => {
-  console.log('submit!',formInline)
-  emit('onSubmit',formInline)
+  console.log('submit!', formInline)
+  emit('onSubmit', formInline)
 }
 
-const reset = (formEl: FormInstance | undefined)=>{
-  formSearchData.value.forEach(item=>{
+const reset = (formEl: FormInstance | undefined) => {
+  formSearchData.value.forEach(item => {
     formInline[item.name] = null
   })
   emit('reset')
 }
-const deleteAction = (row)=>{
+const deleteAction = (row) => {
   ElMessageBox.confirm(
-      '你确定要删除当前项吗?',
-      '温馨提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        draggable: true,
-      }
+    '你确定要删除当前项吗?',
+    '温馨提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true
+    }
   )
-      .then(() => {
-        list.value = list.value.filter(item=>item.id!==row.id)
-        ElMessage.success('删除成功')
-
-      })
-      .catch(() => {
-
-      })
+    .then(() => {
+      list.value = list.value.filter(item => item.id !== row.id)
+      ElMessage.success('删除成功')
+    })
+    .catch(() => {
 
+    })
 }
 
-
 </script>
 <style scoped>
 .edit-input {
diff --git a/src/views/table/comprehensive.vue b/src/views/table/comprehensive.vue
index fb38d0f..95426ff 100644
--- a/src/views/table/comprehensive.vue
+++ b/src/views/table/comprehensive.vue
@@ -73,229 +73,244 @@
 
 </template>
 <script lang="ts">
-export default { name: 'comprehensive' };
 </script>
 <script lang="ts" setup>
-  import {ref, reactive, onMounted} from "vue";
-  import * as dayjs from 'dayjs'
-  import { ElMessage,ElMessageBox } from 'element-plus'
-  import type { FormInstance } from 'element-plus'
-  const loading = ref(true)
-  import ComprehensiveTable from './components/comprehensive.vue'
-  const data = []
-  for(let i=0;i<100;i++){
-    data.push({
-      date: '2016-05-02',
-      name: '王五'+i,
-      price: 1+i,
-      province: '上海',
-      admin:"admin",
-      sex:i%2?1:0,
-      checked:true,
-      id:i+1,
-      age:0,
-      city: '普陀区',
-      address: '上海市普上海',
-      zip: 200333
-    })
-  }
-  const column = [
-    { type:'selection', width:60 },
-    { name: 'id', label: 'id',width:80, },
-    { name: 'name',
-      label: '姓名',
-      inSearch:true,
-      valueType:'input',
-      width:80
-    },
-    { name: 'age',
-      label: '年龄',
-      align:'right',
-    },
-    { name: 'sex',
-      label: '性别',
-      slot:true,
-      inSearch:true,
-      options:[{
-        value:1,
-        label:'男'
-      },{
-        value:0,
-        label:'女'
-      }],
-      valueType:'select',
-    },
+import { ref, reactive, onMounted } from 'vue'
+import * as dayjs from 'dayjs'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import ComprehensiveTable from './components/comprehensive.vue'
+export default { name: 'comprehensive' }
+const loading = ref(true)
+const data = []
+for (let i = 0; i < 100; i++) {
+  data.push({
+    date: '2016-05-02',
+    name: '王五' + i,
+    price: 1 + i,
+    province: '上海',
+    admin: 'admin',
+    sex: i % 2 ? 1 : 0,
+    checked: true,
+    id: i + 1,
+    age: 0,
+    city: '普陀区',
+    address: '上海市普上海',
+    zip: 200333
+  })
+}
+const column = [
+  { type: 'selection', width: 60 },
+  { name: 'id', label: 'id', width: 80 },
+  {
+    name: 'name',
+    label: '姓名',
+    inSearch: true,
+    valueType: 'input',
+    width: 80
+  },
+  {
+    name: 'age',
+    label: '年龄',
+    align: 'right'
+  },
+  {
+    name: 'sex',
+    label: '性别',
+    slot: true,
+    inSearch: true,
+    options: [{
+      value: 1,
+      label: '男'
+    }, {
+      value: 0,
+      label: '女'
+    }],
+    valueType: 'select'
+  },
+  {
+    name: 'price',
+    label: '价格',
+    inSearch: true,
+    valueType: 'input'
+  },
+  {
+    name: 'admin',
+    label: '账号',
+    inSearch: true,
+    valueType: 'input'
+  },
+  {
+    name: 'address',
+    label: '地址',
+    inSearch: true,
+    valueType: 'input'
+  },
+  {
+    name: 'date',
+    label: '日期',
+    sorter: true,
+    inSearch: true,
+    valueType: 'input'
+  },
+  { name: 'province', label: '省份' },
+  { name: 'city', label: '城市' },
+  { name: 'zip', label: '邮编' },
+  { name: 'operation', slot: true, fixed: 'right', width: 200 }
+]
+const list = ref(data)
+
+const formSize = ref('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive({
+  name: '',
+  sex: null,
+  price: null
+})
+
+const rules = reactive({
+  name: [
+    { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
+    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+  ],
+  price: [
+    { required: true, message: '请输入价格', trigger: 'blur' }
+  ],
+  sex: [
     {
-      name: 'price',
-      label: '价格',
-      inSearch:true,
-      valueType:'input',
-    },
-    { name: 'admin', label: '账号', inSearch:true,
-      valueType:'input',},
-    { name: 'address', label: '地址', inSearch:true,
-      valueType:'input', },
-    { name: 'date', label: '日期',sorter:true, inSearch:true,
-      valueType:'input', },
-    { name: 'province', label: '省份' },
-    { name: 'city', label: '城市' },
-    { name: 'zip', label: '邮编' },
-    { name: 'operation',slot:true,fixed:'right',width:200 }
+      required: true,
+      message: '请选择性别',
+      trigger: 'change'
+    }
   ]
-  const list = ref(data)
+})
 
-  const formSize = ref('default')
-  const ruleFormRef = ref<FormInstance>()
-  const ruleForm = reactive({
-    name: '',
-    sex: null,
-    price:null,
-  })
+const dialogVisible = ref(false)
+const title = ref('新增')
+const rowObj = ref({})
+const selectObj = ref([])
 
-  const rules = reactive({
-    name: [
-      { required: true, message: '请输入活动名称活动区域', trigger: 'blur' },
-      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
-    ],
-    price:[
-      { required: true, message: '请输入价格', trigger: 'blur' },
-    ],
-    sex: [
-      {
-        required: true,
-        message: '请选择性别',
-        trigger: 'change',
-      },
-    ],
-  })
-
-  const dialogVisible = ref(false)
-  const title = ref('新增')
-  const rowObj = ref({})
-  const selectObj = ref([])
-
-  const handleClose = async (done:  () => void) => {
-    await ruleFormRef.value.validate((valid, fields) => {
-      if (valid) {
-        let obj = {
-          id:Date.now(),
-          ...ruleForm,
-          age:0,
-          city: '普陀区',
-          address: '上海市普上海',
-          zip: 200333,
-          province: '上海',
-          admin:"admin",
-          date: dayjs().format('YYYY-MM-DD')
+const handleClose = async (done: () => void) => {
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      const obj = {
+        id: Date.now(),
+        ...ruleForm,
+        age: 0,
+        city: '普陀区',
+        address: '上海市普上海',
+        zip: 200333,
+        province: '上海',
+        admin: 'admin',
+        date: dayjs().format('YYYY-MM-DD')
       }
-      if(title.value==='新增'){
-        list.value = [obj,...list.value]
+      if (title.value === '新增') {
+        list.value = [obj, ...list.value]
         ElMessage.success('添加成功')
-      }else {
-        list.value.forEach(item=>{
-          if(item.id===rowObj.value.id){
-            item.name=obj.name
-            item.sex=obj.sex
-            item.price=obj.price
+      } else {
+        list.value.forEach(item => {
+          if (item.id === rowObj.value.id) {
+            item.name = obj.name
+            item.sex = obj.sex
+            item.price = obj.price
           }
         })
       }
-        dialogVisible.value = false
-        console.log('submit!',obj)
-      } else {
-        console.log('error submit!', fields)
-      }
-    })
-  }
-
-  const add = ()=>{
-    title.value='新增'
-    dialogVisible.value = true
-  }
-
-  const batchDelete = ()=>{
-      if(!selectObj.value.length){
-        return ElMessage.error('未选中任何行')
-      }
-    ElMessageBox.confirm(
-            '你确定要删除选中项吗?',
-            '温馨提示',
-            {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning',
-              draggable: true,
-            }
-    )
-            .then(() => {
-
-              ElMessage.success('模拟删除成功')
-              list.value = list.value.concat([])
-            })
-            .catch(() => {
-
-            })
-  }
-  const selectionChange = (val)=>{
-    selectObj.value = val
-  }
-
-  const edit = (row)=>{
-    title.value='编辑'
-    rowObj.value = row
-    dialogVisible.value = true
-    ruleForm.name = row.name
-    ruleForm.sex = row.sex
-    ruleForm.price = row.price
-  }
-
-  const del = (row)=>{
-    console.log('row==',row)
-    ElMessageBox.confirm(
-            '你确定要删除当前项吗?',
-            '温馨提示',
-            {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning',
-              draggable: true,
-            }
-    )
-            .then(() => {
-              list.value = list.value.filter(item=>item.id!==row.id)
-              ElMessage.success('删除成功')
-              loading.value = true
-              setTimeout(()=>{
-                loading.value = false
-              },500)
-            })
-            .catch(() => {
-
-            })
-  }
-
-  const reset = ()=>{
-    loading.value = true
-    setTimeout(()=>{
-      loading.value = false
-    },500)
-    ElMessage.success('触发重置方法')
-  }
-
-  const onSubmit = (val)=>{
-    console.log('val===',val)
-    ElMessage.success('触发查询方法')
-    loading.value = true
-    setTimeout(()=>{
-      loading.value = false
-    },500)
-  }
-
-  onMounted(()=>{
-    setTimeout(()=>{
-      loading.value = false
-    },500)
+      dialogVisible.value = false
+      console.log('submit!', obj)
+    } else {
+      console.log('error submit!', fields)
+    }
   })
+}
+
+const add = () => {
+  title.value = '新增'
+  dialogVisible.value = true
+}
+
+const batchDelete = () => {
+  if (!selectObj.value.length) {
+    return ElMessage.error('未选中任何行')
+  }
+  ElMessageBox.confirm(
+    '你确定要删除选中项吗?',
+    '温馨提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true
+    }
+  )
+    .then(() => {
+      ElMessage.success('模拟删除成功')
+      list.value = list.value.concat([])
+    })
+    .catch(() => {
+
+    })
+}
+const selectionChange = (val) => {
+  selectObj.value = val
+}
+
+const edit = (row) => {
+  title.value = '编辑'
+  rowObj.value = row
+  dialogVisible.value = true
+  ruleForm.name = row.name
+  ruleForm.sex = row.sex
+  ruleForm.price = row.price
+}
+
+const del = (row) => {
+  console.log('row==', row)
+  ElMessageBox.confirm(
+    '你确定要删除当前项吗?',
+    '温馨提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true
+    }
+  )
+    .then(() => {
+      list.value = list.value.filter(item => item.id !== row.id)
+      ElMessage.success('删除成功')
+      loading.value = true
+      setTimeout(() => {
+        loading.value = false
+      }, 500)
+    })
+    .catch(() => {
+
+    })
+}
+
+const reset = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+  ElMessage.success('触发重置方法')
+}
+
+const onSubmit = (val) => {
+  console.log('val===', val)
+  ElMessage.success('触发查询方法')
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+})
 </script>
 
 <style scoped>
diff --git a/src/views/table/inline-edit-table.vue b/src/views/table/inline-edit-table.vue
index b4e81a0..c8d6547 100644
--- a/src/views/table/inline-edit-table.vue
+++ b/src/views/table/inline-edit-table.vue
@@ -90,93 +90,90 @@
 
 </template>
 <script lang="ts">
-export default { name: 'inline-table' };
 </script>
 <script lang="ts" setup >
-  import {computed, ref} from "vue";
-  import { ElMessage,ElMessageBox  } from 'element-plus'
-  const data = [
-  ]
-  for(let i=0;i<100;i++){
-    data.push({
-      date: '2016-05-02',
-      name: '王五'+i,
-      price: 1+i,
-      province: '上海',
-      admin:"admin",
-      sex:i%2?1:0,
-      checked:true,
-      id:i+1,
-      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: '上海市普上海',
-      zip: 200333
+import { computed, ref, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+export default { name: 'inline-table' }
+const data = [
+]
+for (let i = 0; i < 100; i++) {
+  data.push({
+    date: '2016-05-02',
+    name: '王五' + i,
+    price: 1 + i,
+    province: '上海',
+    admin: 'admin',
+    sex: i % 2 ? 1 : 0,
+    checked: true,
+    id: i + 1,
+    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: '上海市普上海',
+    zip: 200333
+  })
+}
+
+const currentPage1 = ref(1)
+const handleSizeChange = (val: number) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val: number) => {
+  console.log(`current page: ${val}`)
+  currentPage1.value = val
+}
+
+const transData = ref(data)
+const loading = ref(false)
+
+const list = computed(() => {
+  const arr = JSON.parse(JSON.stringify(transData.value))
+  return arr.splice((currentPage1.value - 1) * 10, 10)
+})
+
+const listLoading = ref(false)
+
+const confirmEdit = (row) => {
+  row.edit = false
+}
+
+const cancelEdit = (row) => {
+  row.edit = false
+}
+
+const formInline1 = reactive({
+  username: ''
+})
+
+const onSubmit = () => {
+  console.log('submit!')
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+}
+
+const deleteAction = (row) => {
+  ElMessageBox.confirm(
+    '你确定要删除当前项吗?',
+    '温馨提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      draggable: true
+    }
+  )
+    .then(() => {
+      transData.value = transData.value.filter(item => item.id !== row.id)
+      ElMessage.success('删除成功')
     })
-  }
+    .catch(() => {
 
-  const currentPage1 = ref(1)
-  const handleSizeChange = (val: number) => {
-    console.log(`${val} items per page`)
-  }
-  const handleCurrentChange = (val: number) => {
-    console.log(`current page: ${val}`)
-    currentPage1.value = val
-  }
-
-  const transData = ref(data)
-  const loading = ref(false)
-
-  const list = computed(()=>{
-    let arr = JSON.parse(JSON.stringify(transData.value))
-    return arr.splice((currentPage1.value-1)*10,10)
-  })
-
-
-  const listLoading = ref(false)
-
-  const confirmEdit = (row)=>{
-    row.edit = false
-  }
-
-  const cancelEdit = (row)=>{
-    row.edit = false
-  }
-
-  import { reactive } from 'vue'
-
-  const formInline1 = reactive({
-    username: '',
-  })
-
-  const onSubmit = () => {
-    console.log('submit!')
-    loading.value = true
-    setTimeout(()=>{
-      loading.value = false
-    },500)
-  }
-
-  const deleteAction = (row)=>{
-    ElMessageBox.confirm(
-        '你确定要删除当前项吗?',
-        '温馨提示',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-          draggable: true,
-        }
-    )
-        .then(() => {
-          transData.value = transData.value.filter(item=>item.id!==row.id)
-          ElMessage.success('删除成功')
-        })
-        .catch(() => {
-
-        })
-
-  }
+    })
+}
 
 </script>