diff --git a/backend/dvadmin/system/urls.py b/backend/dvadmin/system/urls.py
index 6b8c95f..59e65f2 100644
--- a/backend/dvadmin/system/urls.py
+++ b/backend/dvadmin/system/urls.py
@@ -30,8 +30,6 @@ system_url.register(r'system_config', SystemConfigViewSet)
 system_url.register(r'message_center',MessageCenterViewSet)
 
 urlpatterns = [
-    path('user/export/', UserViewSet.as_view({'post': 'export_data', })),
-    path('user/import/', UserViewSet.as_view({'get': 'import_data', 'post': 'import_data'})),
     path('system_config/save_content/', SystemConfigViewSet.as_view({'put': 'save_content'})),
     path('system_config/get_association_table/', SystemConfigViewSet.as_view({'get': 'get_association_table'})),
     path('system_config/get_table_data/<int:pk>/', SystemConfigViewSet.as_view({'get': 'get_table_data'})),
diff --git a/backend/dvadmin/system/views/login.py b/backend/dvadmin/system/views/login.py
index faaa2ea..184dba9 100644
--- a/backend/dvadmin/system/views/login.py
+++ b/backend/dvadmin/system/views/login.py
@@ -54,25 +54,39 @@ class LoginSerializer(TokenObtainPairSerializer):
     登录的序列化器:
     重写djangorestframework-simplejwt的序列化器
     """
-
     captcha = serializers.CharField(
         max_length=6, required=False, allow_null=True, allow_blank=True
     )
-
     class Meta:
         model = Users
         fields = "__all__"
         read_only_fields = ["id"]
 
-    default_error_messages = {"no_active_account": _("账号/密码错误")}
+class LoginView(TokenObtainPairView):
+    """
+    登录接口
+    """
+    serializer_class = LoginSerializer
+    permission_classes = []
+
+    def post(self, request, *args, **kwargs):
+        # username可能携带的不止是用户名，可能还是用户的其它唯一标识 手机号 邮箱
+        username = request.data.get('username',None)
+        if username is None:
+            return ErrorResponse(msg="账号不能为空")
+        password = request.data.get('password',None)
+        if password is None:
+            return ErrorResponse(msg="密码不能为空")
 
-    def validate(self, attrs):
-        captcha = self.initial_data.get("captcha", None)
         if dispatch.get_system_config_values("base.captcha_state"):
+            captcha = request.data.get('captcha', None)
+            captchaKey = request.data.get('captchaKey', None)
+            if captchaKey is None:
+                return ErrorResponse(msg="验证码不能为空")
             if captcha is None:
                 raise CustomValidationError("验证码不能为空")
             self.image_code = CaptchaStore.objects.filter(
-                id=self.initial_data["captchaKey"]
+                id=captchaKey
             ).first()
             five_minute_ago = datetime.now() - timedelta(hours=0, minutes=5, seconds=0)
             if self.image_code and five_minute_ago > self.image_code.expiration:
@@ -87,34 +101,36 @@ class LoginSerializer(TokenObtainPairSerializer):
                 else:
                     self.image_code and self.image_code.delete()
                     raise CustomValidationError("图片验证码错误")
-        data = super().validate(attrs)
-        data["name"] = self.user.name
-        data["userId"] = self.user.id
-        data["avatar"] = self.user.avatar
-        dept = getattr(self.user, 'dept', None)
+        try:
+            # 手动通过 user 签发 jwt-token
+            user = Users.objects.get(username=username)
+        except:
+            return ErrorResponse(msg='该账号未注册')
+        # 获得用户后，校验密码并签发token
+        if not user.check_password(password):
+            return ErrorResponse(msg='密码错误')
+        result = {
+           "name":user.name,
+            "userId":user.id,
+            "avatar":user.avatar,
+        }
+        dept = getattr(user, 'dept', None)
         if dept:
-            data['dept_info'] = {
+            result['dept_info'] = {
                 'dept_id': dept.id,
                 'dept_name': dept.name,
                 'dept_key': dept.key
             }
-        role = getattr(self.user, 'role', None)
+        role = getattr(user, 'role', None)
         if role:
-            data['role_info'] = role.values('id', 'name', 'key')
-        request = self.context.get("request")
-        request.user = self.user
+            result['role_info'] = role.values('id', 'name', 'key')
+        refresh = LoginSerializer.get_token(user)
+        result["refresh"] = str(refresh)
+        result["access"] = str(refresh.access_token)
         # 记录登录日志
+        request.user = user
         save_login_log(request=request)
-        return {"code": 2000, "msg": "请求成功", "data": data}
-
-
-class LoginView(TokenObtainPairView):
-    """
-    登录接口
-    """
-
-    serializer_class = LoginSerializer
-    permission_classes = []
+        return DetailResponse(data=result,msg="获取成功")
 
 
 class LoginTokenSerializer(TokenObtainPairSerializer):
diff --git a/backend/dvadmin/system/views/login_log.py b/backend/dvadmin/system/views/login_log.py
index 4dc3617..5853ecb 100644
--- a/backend/dvadmin/system/views/login_log.py
+++ b/backend/dvadmin/system/views/login_log.py
@@ -34,3 +34,4 @@ class LoginLogViewSet(CustomModelViewSet):
     queryset = LoginLog.objects.all()
     serializer_class = LoginLogSerializer
     extra_filter_backends = []
+    ordering_fields = ['create_datetime']
diff --git a/backend/dvadmin/system/views/menu.py b/backend/dvadmin/system/views/menu.py
index 16d60f4..b00086a 100644
--- a/backend/dvadmin/system/views/menu.py
+++ b/backend/dvadmin/system/views/menu.py
@@ -185,11 +185,11 @@ class MenuViewSet(CustomModelViewSet):
         parent = params.get('parent', None)
         if params:
             if parent:
-                queryset = self.queryset.filter(status=1, parent=parent)
+                queryset = self.queryset.filter(parent=parent)
             else:
-                queryset = self.queryset.filter(status=1)
+                queryset = self.queryset
         else:
-            queryset = self.queryset.filter(status=1, parent__isnull=True)
+            queryset = self.queryset.filter(parent__isnull=True)
         queryset = self.filter_queryset(queryset)
         serializer = MenuSerializer(queryset, many=True, request=request)
         data = serializer.data
diff --git a/backend/dvadmin/system/views/message_center.py b/backend/dvadmin/system/views/message_center.py
index 072db85..ad3c680 100644
--- a/backend/dvadmin/system/views/message_center.py
+++ b/backend/dvadmin/system/views/message_center.py
@@ -86,7 +86,9 @@ class MessageCenterTargetUserListSerializer(CustomModelSerializer):
         user_id = self.request.user.id
         message_center_id = instance.id
         queryset = MessageCenterTargetUser.objects.filter(messagecenter__id=message_center_id,users_id=user_id).first()
-        return queryset.is_read
+        if queryset:
+            return queryset.is_read
+        return False
 
     class Meta:
         model = MessageCenter
@@ -121,12 +123,12 @@ class MessageCenterCreateSerializer(CustomModelSerializer):
         users = initial_data.get('target_user', [])
         if target_type in [1]:  # 按角色
             target_role = initial_data.get('target_role',[])
-            users = Users.objects.exclude(is_deleted=True).filter(role__id__in=target_role).values_list('id', flat=True)
+            users = Users.objects.filter(role__id__in=target_role).values_list('id', flat=True)
         if target_type in [2]:  # 按部门
             target_dept = initial_data.get('target_dept',[])
-            users = Users.objects.exclude(is_deleted=True).filter(dept__id__in=target_dept).values_list('id', flat=True)
+            users = Users.objects.filter(dept__id__in=target_dept).values_list('id', flat=True)
         if target_type in [3]:  # 系统通知
-            users = Users.objects.exclude(is_deleted=True).values_list('id', flat=True)
+            users = Users.objects.values_list('id', flat=True)
         targetuser_data = []
         for user in users:
             targetuser_data.append({
@@ -211,6 +213,6 @@ class MessageCenterViewSet(CustomModelViewSet):
         queryset = MessageCenterTargetUser.objects.filter(users__id=self_user_id).order_by('create_datetime').last()
         data = None
         if queryset:
-            serializer = MessageCenterTargetUserListSerializer(queryset, many=False, request=request)
+            serializer = MessageCenterTargetUserListSerializer(queryset.messagecenter, many=False, request=request)
             data = serializer.data
         return DetailResponse(data=data, msg="获取成功")
diff --git a/backend/dvadmin/system/views/user.py b/backend/dvadmin/system/views/user.py
index 046c2b6..dcc4d80 100644
--- a/backend/dvadmin/system/views/user.py
+++ b/backend/dvadmin/system/views/user.py
@@ -219,10 +219,12 @@ class ExportUserProfileSerializer(CustomModelSerializer):
 
 
 class UserProfileImportSerializer(CustomModelSerializer):
+    password = serializers.CharField(required=True, max_length=50, error_messages={"required": "登录密码不能为空"})
+
     def save(self, **kwargs):
         data = super().save(**kwargs)
         password = hashlib.new(
-            "md5", str(self.initial_data.get("password", "")).encode(encoding="UTF-8")
+            "md5", str(self.initial_data.get("password", "admin123456")).encode(encoding="UTF-8")
         ).hexdigest()
         data.set_password(password)
         data.save()
diff --git a/backend/dvadmin/utils/pagination.py b/backend/dvadmin/utils/pagination.py
index 1884c06..b702884 100644
--- a/backend/dvadmin/utils/pagination.py
+++ b/backend/dvadmin/utils/pagination.py
@@ -10,7 +10,7 @@
 from collections import OrderedDict
 
 from django.core import paginator
-from django.core.paginator import Paginator as DjangoPaginator
+from django.core.paginator import Paginator as DjangoPaginator, InvalidPage
 from rest_framework.pagination import PageNumberPagination
 from rest_framework.response import Response
 
@@ -21,13 +21,52 @@ class CustomPagination(PageNumberPagination):
     max_page_size = 999
     django_paginator_class = DjangoPaginator
 
+    def paginate_queryset(self, queryset, request, view=None):
+        """
+        Paginate a queryset if required, either returning a
+        page object, or `None` if pagination is not configured for this view.
+        """
+        empty = True
+
+        page_size = self.get_page_size(request)
+        if not page_size:
+            return None
+
+        paginator = self.django_paginator_class(queryset, page_size)
+        page_number = request.query_params.get(self.page_query_param, 1)
+        if page_number in self.last_page_strings:
+            page_number = paginator.num_pages
+
+        try:
+            self.page = paginator.page(page_number)
+        except InvalidPage as exc:
+
+            # msg = self.invalid_page_message.format(
+            #     page_number=page_number, message=str(exc)
+            # )
+            # raise NotFound(msg)
+            empty = False
+            pass
+
+        if paginator.num_pages > 1 and self.template is not None:
+            # The browsable API should display pagination controls.
+            self.display_page_controls = True
+
+        self.request = request
+
+        if not empty:
+            self.page = []
+
+        return list(self.page)
     def get_paginated_response(self, data):
         code = 2000
         msg = 'success'
         res = {
             "page": int(self.get_page_number(self.request, paginator)) or 1,
-            "total": self.page.paginator.count,
+            "total": self.page.paginator.count if self.page else 0,
             "limit": int(self.get_page_size(self.request)) or 10,
+            "is_next": self.page.has_next(),
+            "is_previous": self.page.has_previous(),
             "data": data
         }
         if not data:
@@ -38,6 +77,6 @@ class CustomPagination(PageNumberPagination):
         return Response(OrderedDict([
             ('code', code),
             ('msg', msg),
-            # ('total',self.page.paginator.count),
             ('data', res),
         ]))
+
diff --git a/web/package.json b/web/package.json
index 336ae62..dc88cd4 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,9 +20,9 @@
     "china-division": "^2.4.0",
     "core-js": "^3.4.3",
     "cropperjs": "^1.5.6",
-    "d2-crud-plus": "^2.13.1",
-    "d2-crud-x": "^2.13.1",
-    "d2p-extends": "^2.13.1",
+    "d2-crud-plus": "^2.17.9",
+    "d2-crud-x": "^2.17.9",
+    "d2p-extends": "^2.17.9",
     "dayjs": "^1.8.17",
     "echarts": "^5.1.2",
     "el-phone-number-input": "^1.1.5",
@@ -42,6 +42,7 @@
     "sortablejs": "^1.10.1",
     "ua-parser-js": "^0.7.20",
     "vue": "2.7.14",
+    "vue-grid-layout": "^2.4.0",
     "vue-i18n": "^8.15.1",
     "vue-infinite-scroll": "^2.0.2",
     "vue-router": "^3.6.5",
diff --git a/web/src/components/importExcel/index.vue b/web/src/components/importExcel/index.vue
index 1f5241e..06ef430 100644
--- a/web/src/components/importExcel/index.vue
+++ b/web/src/components/importExcel/index.vue
@@ -118,7 +118,7 @@ export default {
       that.$refs.upload.clearFiles()
       // 是否更新已经存在的用户数据
       return request({
-        url: util.baseURL() + that.api + 'import_data/',
+        url: that.api + 'import_data/',
         method: 'post',
         data: {
           url: response.data.url
diff --git a/web/src/install.js b/web/src/install.js
index b20fa54..3bfc11e 100644
--- a/web/src/install.js
+++ b/web/src/install.js
@@ -62,7 +62,15 @@ Vue.use(d2CrudPlus, {
         page: { // page接口返回的数据结构配置，
           request: {
             current: 'page',
-            size: 'limit'
+            size: 'limit',
+            orderAsc (query, value) {
+              const field = query.orderProp
+              if (value) {
+                query.ordering = field
+              } else {
+                query.ordering = `-${field}`
+              }
+            }
           },
           response: {
             current: 'page', // 当前页码 ret.data.current
diff --git a/web/src/layout/header-aside/layout.vue b/web/src/layout/header-aside/layout.vue
index 469c25d..11e082f 100644
--- a/web/src/layout/header-aside/layout.vue
+++ b/web/src/layout/header-aside/layout.vue
@@ -97,6 +97,12 @@
         </div>
       </div>
     </div>
+<!-- 授权后可以删除-->
+    <div class="dvadmin-auth">
+      <span>Powered by Django-Vue-Admin</span>
+      <el-divider direction="vertical"></el-divider>
+      <span>Copyright dvadmin团队</span>
+    </div>
   </div>
 </template>
 
@@ -208,4 +214,24 @@ export default {
 <style lang="scss">
 // 注册主题
 @import "~@/assets/style/theme/register.scss";
+
+// 授权样式
+.dvadmin-auth{
+  font-size: 0.8em;
+  position: absolute;
+  top: 50vh;
+  right: -9vw;
+  text-align: center;
+  color: #888888;
+  background-image: linear-gradient(to left, #d3d3d3, #989898, #888888, #363636,#888888,#989898,#d3d3d3);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-size: 200% 100%;
+  animation: bgp 6s infinite linear;
+  transform: rotate(90deg);
+}
+@-webkit-keyframes bgp {
+  0% {background-position: 0 0; }
+  100% {background-position: -100% 0; }
+}
 </style>
diff --git a/web/src/views/dashboard/workbench/components/about.vue b/web/src/views/dashboard/workbench/components/about.vue
new file mode 100644
index 0000000..e8571d8
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/about.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-card  shadow="hover" header="关于项目" class="item-background">
+    <p>高性能 / 精致 / 优雅。基于Vue2 + Element-UI 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
+    <p>
+      <a href='https://liqianglog.gitee.io/django-vue-admin' target="_blank">
+        <img src='https://liqianglog.gitee.io/django-vue-admin/badge/star.svg?theme=dark' alt='star' style="vertical-align: middle">
+      </a>
+    </p>
+  </el-card>
+</template>
+
+<script>
+export default {
+  title: '关于项目',
+  icon: 'el-icon-setting',
+  description: '点个星星支持一下',
+  height: 20,
+  width: 8,
+  minH: 20,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.item-background p {
+  color: #999;
+}
+</style>
diff --git a/web/src/views/dashboard/workbench/components/index.js b/web/src/views/dashboard/workbench/components/index.js
new file mode 100644
index 0000000..4d5867f
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/index.js
@@ -0,0 +1,13 @@
+import { markRaw } from 'vue'
+
+const resultComps = {}
+const requireComponent = require.context(
+  './', // 在当前目录下查找
+  false, // 不遍历子文件夹
+  /\.vue$/ // 正则匹配 以 .vue结尾的文件
+)
+requireComponent.keys().forEach(fileName => {
+  const comp = requireComponent(fileName)
+  resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
+})
+export default markRaw(resultComps)
diff --git a/web/src/views/dashboard/workbench/components/time.vue b/web/src/views/dashboard/workbench/components/time.vue
new file mode 100644
index 0000000..d9ae761
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/time.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-card shadow="hover" header="时钟" class="item-background">
+    <div class="time">
+      <h2>{{ time }}</h2>
+      <p>{{ day }}</p>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+
+export default {
+  title: '时钟',
+  icon: 'el-icon-alarm-clock',
+  description: '演示部件效果',
+  height: 17,
+  minH: 17,
+  width: 8,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {
+      time: '',
+      day: ''
+    }
+  },
+  mounted () {
+    this.showTime()
+    setInterval(() => {
+      this.showTime()
+    }, 1000)
+  },
+  methods: {
+    showTime () {
+      this.time = dayjs().format('hh:mm:ss')
+      this.day = dayjs().format('YYYY年MM月DD日')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.item-background {
+  background: linear-gradient(to right, #8E54E9, #4776E6);
+  color: #fff;
+}
+
+.time h2 {
+  font-size: 40px;
+}
+
+.time p {
+  font-size: 14px;
+  margin-top: 10px;
+  opacity: 0.7;
+}
+</style>
diff --git a/web/src/views/dashboard/workbench/components/ver.vue b/web/src/views/dashboard/workbench/components/ver.vue
new file mode 100644
index 0000000..841a2ee
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/ver.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-card shadow="hover" header="版本信息">
+    <div style="height: 70px;text-align: center;">
+      <h2 style="margin-top: 5px;">Dvadmin</h2>
+      <p style="margin-top: 5px;">最新版本 {{ ver }}</p>
+    </div>
+    <div style="margin-top: 5px;">
+      <el-button type="primary" plain round @click="golog">更新日志</el-button>
+      <el-button type="primary" plain round @click="gogit">gitee</el-button>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  title: '版本信息',
+  icon: 'el-icon-monitor',
+  description: '当前项目版本信息',
+  height: 22,
+  width: 8,
+  minH: 22,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {
+      ver: 'loading...'
+    }
+  },
+  mounted () {
+    this.getVer()
+  },
+  methods: {
+    async getVer () {
+      this.ver = 'v2.0.9'
+    },
+    golog () {
+      window.open('https://gitee.com/liqianglog/django-vue-admin/releases')
+    },
+    gogit () {
+      window.open('https://gitee.com/liqianglog/django-vue-admin')
+    }
+  }
+}
+</script>
diff --git a/web/src/views/dashboard/workbench/components/welcome.vue b/web/src/views/dashboard/workbench/components/welcome.vue
new file mode 100644
index 0000000..87229fb
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/welcome.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-card shadow="hover" header="欢迎">
+    <div class="welcome">
+      <div class="logo">
+        <img src="/image/django-vue-admin.png">
+        <h2>欢迎体验 Dvadmin</h2>
+      </div>
+      <div class="tips">
+        <div class="tips-item">
+          <div class="tips-item-icon">
+            <i class="el-icon-menu"></i>
+          </div>
+          <div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
+        </div>
+        <div class="tips-item">
+          <div class="tips-item-icon">
+            <i class="el-icon-star-on"></i>
+          </div>
+          <div class="tips-item-message">热爱Python和Vue,打造一个低代码开源平台，并且持续着。</div>
+        </div>
+        <div class="tips-item">
+          <div class="tips-item-icon">
+            <i class="el-icon-milk-tea"></i>
+          </div>
+          <div class="tips-item-message">项目目的：让前端和后端工作更快乐</div>
+        </div>
+      </div>
+      <div class="actions">
+        <el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+export default {
+  title: '欢迎',
+  icon: 'el-icon-present',
+  description: '项目特色以及文档链接',
+  height: 50,
+  minH: 50,
+  width: 8,
+  minW: 4,
+  isResizable: true,
+  data () {
+    return {}
+  },
+  methods: {
+    godoc () {
+      window.open('https://www.django-vue-admin.com/')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.welcome {
+}
+
+.welcome .logo {
+  text-align: center;
+}
+
+.welcome .logo img {
+  vertical-align: bottom;
+  width: 100px;
+  height: 100px;
+  margin-bottom: 20px;
+}
+
+.welcome .logo h2 {
+  font-size: 30px;
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tips {
+  margin-top: 20px;
+  padding: 0 40px;
+}
+
+.tips-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7.5px 0;
+}
+
+.tips-item-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 18px;
+  margin-right: 20px;
+  color: var(--el-color-primary);
+  background: rgba(180, 180, 180, 0.1);
+}
+
+.tips-item-message {
+  flex: 1;
+  font-size: 14px;
+}
+
+.actions {
+  text-align: center;
+  margin: 40px 0 20px 0;
+}
+</style>
diff --git a/web/src/views/dashboard/workbench/index.vue b/web/src/views/dashboard/workbench/index.vue
index 9c15a8d..88e7227 100644
--- a/web/src/views/dashboard/workbench/index.vue
+++ b/web/src/views/dashboard/workbench/index.vue
@@ -1,313 +1,382 @@
 <template>
   <d2-container>
-    <div class="page-header">
-
-      <el-avatar src="https://q1.qlogo.cn/g?b=qq&amp;nk=190848757&amp;s=640" class="user-avatar">
-
-      </el-avatar>
-      <div class="title">
-        <h1>早安, DVAdmin, 开始您一天的工作吧！</h1>
-        <span> 今日晴，20℃ - 32℃！ </span>
+    <div class="component-header">
+      <div class="set-btn-class">
+        <el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
+        <el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
+      </div>
+      <div v-if="customizing" class="all-component-class">
+        <el-card style="margin-bottom: 20px">
+          <div slot="header">
+            <i class="el-icon-circle-plus"></i>
+            <span>添加部件</span>
+            <el-button-group style="float: right">
+              <el-button type="primary" size="mini" @click="backDefaul()">恢复默认</el-button>
+              <el-button type="danger" size="mini" @click="close()">关闭</el-button>
+            </el-button-group>
+          </div>
+          <div class="widgets-list">
+            <div v-if="myCompsList.length<=0" class="widgets-list-nodata">
+              <el-empty description="没有部件啦" :image-size="60"></el-empty>
+            </div>
+            <div v-for="item in myCompsList" :key="item.title" class="widgets-list-item" @drag="onDrag($event,item)"
+                 @dragend="onDragend($event,item)" draggable="true"
+                 unselectable="on">
+              <el-card style="width: 300px">
+                <div slot="header">
+                  <i :class="item.icon"></i>
+                  <span> {{ item.title }}</span>
+                  <el-button type="primary" style="float: right;" size="mini" @click="push(item)">添加</el-button>
+                </div>
+                <div class="item-info">
+                  <p>{{ item.description }}</p>
+                </div>
+              </el-card>
+            </div>
+          </div>
+        </el-card>
       </div>
     </div>
-
-    <el-row :gutter="20">
-      <el-col :span="12">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>友情链接</span>
-
-            <el-button style="float: right; padding: 3px 0" type="text">
-              <el-link href="https://bbs.django-vue-admin.com" target="_blank" type="primary">更多</el-link>
-            </el-button>
-          </div>
-          <el-row>
-              <el-col :span="8" v-for="({name,imageUrl,slogan,link},index) in projects" :key="index">
-              <el-card shadow="hover" style="padding: 0">
-                <div class="project-detail">
-                  <div>
-                    <a :href="link" target="_blank">
-                      <img :src="imageUrl" alt="">
-                      <span v-text="name" class="name"></span>
-                    </a>
-                  </div>
-                  <div v-text="slogan" class="slogan" :title="slogan"></div>
-                </div>
-
-              </el-card>
-              </el-col>
-          </el-row>
-        </el-card>
-
-      </el-col>
-
-      <el-col :span="12">
-        <div class="grid-content bg-purple">
-
-          <el-card class="box-card" >
-            <div slot="header" class="clearfix">
-              <span>快捷导航</span>
-            </div>
-            <el-row>
-              <el-col :span="8" v-for="({name,icon,route,color},index) of navigators" :key="index" style="padding: 0">
-                <el-card shadow="hover">
-                  <div  style="display: flex;align-items: center;flex-direction: column;cursor: pointer" @click="()=>{gotoRoute(route)}">
-                    <d2-icon-svg :name="icon" style="width: 25px;height: 25px;" :style="{fill:color}"/>
-                    <div style="text-align: center;font-size: 12px;margin-top: 20px" v-text="name"></div>
-                  </div>
-                </el-card>
-              </el-col>
-            </el-row>
-          </el-card>
-
-          <el-card class="box-card"  style="margin-top: 25px">
-            <div class="work">
-              <d2-icon-svg name="work" style="margin-left: 50%;transform: translateX(-50%);height: 216px"/>
-            </div>
-          </el-card>
+    <div class="widgets" ref="widgets">
+      <div :class="['widgets-wrapper',customizing?'widgets-wrapper-bg':'']">
+        <div v-if="nowCompsList.length<=0" class="no-widgets">
+          <el-empty image="img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty>
         </div>
-      </el-col>
-    </el-row>
+        <grid-layout
+          ref="gridlayout"
+          :layout.sync="layout"
+          :col-num="24"
+          :row-height="1"
+          :is-draggable="customizing"
+          :vertical-compact="false"
+          :use-css-transforms="true"
+          :autoSize="true"
+        >
+          <grid-item v-for="(item, index) in layout"
+                     :static="item.static"
+                     :x="item.x"
+                     :y="item.y"
+                     :w="item.w"
+                     :h="item.h"
+                     :i="item.i"
+                     :key="index"
+                     :isResizable="customizing"
 
+          >
+            <div  v-if="customizing" class="customize-overlay">
+              <el-button class="close" type="danger" plain icon="el-icon-close" size="small"
+                         @click="remove(index)"></el-button>
+              <label>
+                <i :class="allComps[item.element].icon"></i>
+                {{ allComps[item.element].title }}</label>
+            </div>
+            <component :class="customizing?'set-component-bg':''"  :is="allComps[item.element]"></component>
+          </grid-item>
+        </grid-layout>
+      </div>
+    </div>
   </d2-container>
 </template>
 
 <script>
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { PieChart } from 'echarts/charts'
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent
-} from 'echarts/components'
-
-use([
-  CanvasRenderer,
-  PieChart,
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent
-])
+import draggable from 'vuedraggable'
+import allComps from './components'
+import util from '@/libs/util'
+import VueGridLayout from 'vue-grid-layout'
+import XEUtils from 'xe-utils'
+const mouseXY = { x: null, y: null }
+const DragPos = { x: 0, y: 0, w: 1, h: 1, i: null }
 export default {
-  name: 'workbench',
+  components: {
+    draggable,
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem
+  },
   data () {
     return {
-      projects: [
-        {
-          name: '官方文档',
-          imageUrl: '/image/django-vue-admin.png',
-          slogan: 'Django-Vue-Admin 是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。',
-          link: 'http://django-vue-admin.com'
-        },
-        {
-          name: '官方论坛',
-          imageUrl: '/image/django-vue-admin.png',
-          slogan: 'Django-Vue-Admin 官方论坛',
-          link: 'http://bbs.django-vue-admin.com'
-        },
-        {
-          name: 'D2admin',
-          imageUrl: '/image/d2-pub.png',
-          slogan: 'D2Admin (opens new window)是一个完全 开源免费 的企业中后台产品前端集成方案，使用最新的前端技术栈，' +
-            '小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统快速开发。',
-          link: 'https://d2.pub/zh'
-        },
-        {
-          name: 'SimpleUi',
-          imageUrl: '/image/simple-ui.png',
-          slogan: '一个基于Django Admin的现代化主题。',
-          link: 'https://simpleui.72wo.com/'
-        },
-        {
-          name: '若依',
-          imageUrl: '/image/ruoyi.png',
-          slogan: '基于SpringBoot、Shiro、Mybatis的权限后台管理系统。',
-          link: 'http://ruoyi.vip/'
-        },
-        {
-          name: 'Gin-Vue-Admin',
-          imageUrl: '/image/gin-vue-admin.png',
-          slogan: '使用gin+vue进行极速开发的全栈后台管理系统。',
-          link: 'https://www.gin-vue-admin.com/'
-        },
-        {
-          name: 'DCM',
-          imageUrl: '/image/django-comment-migrate.png',
-          slogan: '这是一个Django model注释迁移的app',
-          link: 'https://github.com/starryrbs/django-comment-migrate'
-        },
-        {
-          name: 'Jetbrains',
-          imageUrl: '/image/jetbrains.jpeg',
-          slogan: '我们构建我们的软件，让您可以享受构建自己的软件的乐趣',
-          link: 'https://www.jetbrains.com/'
-        },
-        {
-          name: 'Django',
-          imageUrl: '/image/django.png',
-          slogan: '有期限的完美主义者的网络框架。',
-          link: 'https://github.com/django/django'
-        }
-      ],
-      navigators: [
-        {
-          name: '控制台',
-          icon: 'home',
-          route: {
-            name: 'index'
-          },
-          color: 'rgb(31, 218, 202);'
-        },
-        {
-          name: '部门管理',
-          icon: 'department',
-          route: {
-            name: 'dept'
-          },
-          color: 'rgb(225, 133, 37);'
-        },
-        {
-          name: '角色管理',
-          icon: 'role',
-          route: {
-            name: 'role'
-          },
-          color: 'rgb(191, 12, 44);'
-        },
-        {
-          name: '菜单管理',
-          icon: 'menu',
-          route: {
-            name: 'menu'
-          },
-          color: 'rgb(63, 178, 127);'
-        },
-        {
-          name: '用户管理',
-          icon: 'user',
-          route: {
-            name: 'user'
-          },
-          color: 'rgb(191, 12, 44);'
-        },
-        {
-          name: '日志管理',
-          icon: 'log',
-          route: {
-            name: 'operationLog'
-          },
-          color: 'rgb(0, 216, 255);'
-        }
-      ],
-      chartData: {
-        columns: ['日期', '销售额'],
-        rows: [
-          { 日期: '1月1日', 销售额: 123 },
-          { 日期: '1月2日', 销售额: 1223 },
-          { 日期: '1月3日', 销售额: 2123 },
-          { 日期: '1月4日', 销售额: 4123 },
-          { 日期: '1月5日', 销售额: 3123 },
-          { 日期: '1月6日', 销售额: 7123 }
+      customizing: false,
+      allComps: allComps,
+      selectLayout: [],
+      defaultGrid: {
+        // 默认分栏数量和宽度 例如 [24] [18,6] [8,8,8] [6,12,6]
+        layout: [12, 6, 6],
+        // 小组件分布，com取值:views/home/components 文件名
+        copmsList: [
+          ['welcome'],
+          ['about', 'ver'],
+          ['time', 'progress']
         ]
+      },
+      defaultLayout: [],
+      layout: [
+        // { x: 0, y: 0, w: 2, h: 2, i: '0', element: 'welcome' },
+        // { x: 2, y: 0, w: 2, h: 4, i: '1', element: 'about' },
+        // { x: 4, y: 0, w: 2, h: 5, i: '2', element: 'time' },
+        // { x: 6, y: 0, w: 2, h: 3, i: '3', element: 'progress' }
+      ]
+    }
+  },
+  created () {
+    this.layout = JSON.parse(util.cookies.get('grid-layout') || JSON.stringify(this.defaultLayout))
+  },
+  mounted () {
+    document.addEventListener('dragover', function (e) {
+      mouseXY.x = e.clientX
+      mouseXY.y = e.clientY
+    }, false)
+    this.$emit('on-mounted')
+  },
+  computed: {
+    allCompsList () {
+      var allCompsList = []
+      for (var key in this.allComps) {
+        allCompsList.push({
+          key: key,
+          title: allComps[key].title,
+          icon: allComps[key].icon,
+          height: allComps[key].height,
+          width: allComps[key].width,
+          maxH: allComps[key].maxH || Infinity,
+          maxW: allComps[key].maxW || Infinity,
+          isResizable: allComps[key].isResizable || null,
+          description: allComps[key].description
+        })
       }
+      return allCompsList
+    },
+    myCompsList () {
+      return this.allCompsList
+    },
+    nowCompsList () {
+      return this.allCompsList
     }
   },
   methods: {
-    gotoRoute (route) {
-      this.$router.push(route)
+    // 开启自定义
+    custom () {
+      this.customizing = true
+      const oldWidth = this.$refs.widgets.offsetWidth
+      this.$nextTick(() => {
+        const scale = this.$refs.widgets.offsetWidth / oldWidth
+        this.$refs.widgets.style.setProperty('transform', `scale(${scale})`)
+      })
+    },
+    // 设置布局
+    setLayout (layout) {
+      // 暂定
+    },
+    getLayoutElementNumber (elementName) {
+      // var index = 0
+      // this.layout.map(res => {
+      //   if (elementName === res.element) {
+      //     index += 1
+      //   }
+      // })
+      // return index + 1
+      return elementName + this.layout.length
+    },
+    // 追加
+    push (item) {
+      console.log(1, item)
+      this.layout.push({
+        x: 6,
+        y: 0,
+        w: item.width,
+        h: item.height,
+        isResizable: item.isResizable || null,
+        i: this.getLayoutElementNumber(item.key),
+        element: item.key
+      })
+    },
+    // 删除组件
+    remove (index) {
+      this.layout.splice(index, 1)
+    },
+    // 保存
+    save () {
+      console.log(this.layout)
+      this.customizing = false
+      this.$refs.widgets.style.removeProperty('transform')
+      util.cookies.set('grid-layout', this.layout)
+    },
+    // 恢复默认
+    backDefaul () {
+      this.customizing = false
+      this.$refs.widgets.style.removeProperty('transform')
+      this.layout = JSON.parse(JSON.stringify(this.defaultLayout))
+      util.cookies.remove('grid-layout')
+    },
+    // 关闭
+    close () {
+      this.customizing = false
+      this.$refs.widgets.style.removeProperty('transform')
+    },
+    // 拖拽事件
+    onDrag (e, item) {
+      const { key, width, height } = item
+      const parentRect = this.$refs.widgets.getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      const cloneLayout = XEUtils.clone(this.layout, true)
+      if (mouseInGrid === true && (cloneLayout.findIndex(item => item.i === this.getLayoutElementNumber(key)) === -1)) {
+        // this.layout.push({
+        //   x: (this.layout.length * 2) % (this.colNum || 12),
+        //   y: this.layout.length + (this.colNum || 12), // puts it at the bottom
+        //   w: width,
+        //   h: height,
+        //   i: this.getLayoutElementNumber(key),
+        //   element: key
+        // })
+      }
+      const index = this.layout.findIndex(item => item.i === this.getLayoutElementNumber(key))
+      if (index !== -1) {
+        try {
+          this.$refs.gridlayout.$children[this.layout.length].$refs.item.style.display = 'none'
+        } catch {
+        }
+        const el = this.$refs.gridlayout.$children[index]
+        el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
+        const new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
+        if (mouseInGrid === true) {
+          this.$refs.gridlayout.dragEvent('dragstart', this.getLayoutElementNumber(key), new_pos.x, new_pos.y, 1, 1)
+          DragPos.i = String(index)
+          DragPos.x = this.layout[index].x
+          DragPos.y = this.layout[index].y
+        }
+        if (mouseInGrid === false) {
+          this.$refs.gridlayout.dragEvent('dragend', this.getLayoutElementNumber(key), new_pos.x, new_pos.y, 1, 1)
+          this.layout = this.layout.filter(obj => obj.i !== this.getLayoutElementNumber(key))
+        }
+      }
+    },
+    onDragend (e, item) {
+      const { key, width, height } = item
+      const parentRect = this.$refs.widgets.getBoundingClientRect()
+      let mouseInGrid = false
+      if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
+        mouseInGrid = true
+      }
+      if (mouseInGrid === true) {
+        this.layout.push({
+          x: DragPos.x,
+          y: DragPos.y,
+          w: width,
+          h: height,
+          i: this.getLayoutElementNumber(key),
+          element: key
+        })
+        this.$refs.gridlayout.dragEvent('dragend', this.getLayoutElementNumber(key), DragPos.x, DragPos.y, 1, 1)
+        this.layout = this.layout.filter(obj => obj.i !== this.getLayoutElementNumber(key))
+        // UNCOMMENT below if you want to add a grid-item
+        /*
+        this.layout.push({
+            x: DragPos.x,
+            y: DragPos.y,
+            w: 1,
+            h: 1,
+            i: DragPos.i,
+        });
+        this.$refs.gridLayout.dragEvent('dragend', DragPos.i, DragPos.x,DragPos.y,1,1);
+        try {
+            this.$refs.gridLayout.$children[this.layout.length].$refs.item.style.display="block";
+        } catch {
+        }
+        */
+      }
     }
   }
 }
 </script>
-
 <style scoped lang="scss">
+.component-header {
+  background-color: #FFFFFF;
+  position: sticky;
+  top: -20px;
+  z-index: 99;
 
-  $userAvatarLength: 72px;
+  .set-btn-class {
+    float: right;
+    z-index: 99;
+    margin-bottom: 10px;
+  }
 
-  .page-header{
-    box-sizing: border-box;
-    padding: 16px;
-    .user-avatar{
-        width: $userAvatarLength;
-        height: $userAvatarLength;
-        line-height: $userAvatarLength;
-      display: inline-block;
-    }
+  .all-component-class {
+    clear: right;
 
-    .title{
-      display: inline-block;
-      padding: 0 0 0 15px;
-      position: relative;
-      top: -5px;
+    .widgets-list {
+      display: flex;
+      justify-content: space-between;
+      overflow-x: scroll;
+      padding-bottom: 10px;
 
-      h1{
-        font-size: 1.125rem;
-        font-weight: 500;
-        line-height: 1.75rem;
+      .widgets-list-item {
+        margin-right: 10px;
       }
-      span{
-        font-size: 14px;
-        color: rgba(0,0,0,.45);
+
+      .widgets-list-item:last-child {
+        margin-right: 0px;
       }
     }
+  }
+}
 
-  }
+.widgets-wrapper-bg {
+  background: rgba(180, 180, 180, .2);
+  min-height: 500px;
+}
 
-  .project-detail{
-    color: rgba(0,0,0,.45);
-    height: 65px;
-     img {
-       width: 25px;
-       height: 25px;
-     }
-    .name{
-      margin-left: 1rem;
-      font-size: 1rem;
-      line-height: 2rem;
-      height: 2rem;
-      display: inline-block;
-      color: rgba(0,0,0,.85);
-      position: relative;
-      top: -5px;
-    }
-    .slogan{
-      font-size: 12px;
-      padding: 5px 0;
-      overflow:hidden;
-      text-overflow:ellipsis;
-      white-space:nowrap;
-    }
-    .team{
-      font-size: 14px;
-    }
-  }
+.widgets-wrapper .sortable-ghost {
+  opacity: 0.5;
+}
 
-  .activity{
-    padding: 0;
-    .activity-avatar{
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-    }
-    .activity-detail{
-      padding: 10px;
-      line-height: 15px;
-      font-size: 14px;
-      color: rgba(0,0,0,.85);
-    }
-  }
-  .chart {
-    height: 408px;
-  }
+.set-component-bg{
+  background:rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0,0,0,.5);
+}
 
-  .el-divider--horizontal{
-    margin: 4px 0;
-    background: 0 0;
-    border-top: 1px solid #e8eaec;
+.customize-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 5px;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.5);
+  cursor: move;
+}
+
+.customize-overlay label {
+  background: #409EFF;
+  color: #fff;
+  height: 40px;
+  padding: 0 30px;
+  border-radius: 40px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: move;
+}
+
+.customize-overlay label i {
+  margin-right: 15px;
+  font-size: 24px;
+}
+
+.customize-overlay .close {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+}
+
+.customize-overlay .close:focus, .customize-overlay .close:hover {
+  background: #76B1F9;
+}
 
-  }
-  .el-card, .el-message {
-    border-radius: 0;
-  }
 </style>
diff --git a/web/src/views/system/areas/crud.js b/web/src/views/system/areas/crud.js
index c7a0092..7f71b32 100644
--- a/web/src/views/system/areas/crud.js
+++ b/web/src/views/system/areas/crud.js
@@ -29,34 +29,35 @@ export const crudOptions = (vm) => {
         iconLoaded: 'el-icon-loading' // 美化loading图标
       }
     },
-    rowHandle: {
-      show: false,
-      width: 140,
-      view: {
-        thin: true,
-        text: '',
-        show: false,
-        disabled () {
-          return !vm.hasPermissions('Retrieve')
-        }
-      },
-      edit: {
-        thin: true,
-        text: '',
-        show: false,
-        disabled () {
-          return !vm.hasPermissions('Update')
-        }
-      },
-      remove: {
-        thin: true,
-        text: '',
-        show: false,
-        disabled () {
-          return !vm.hasPermissions('Delete')
-        }
-      }
-    },
+    // rowHandle: {
+    //   show: false,
+    //   width: 140,
+    //   view: {
+    //     thin: true,
+    //     text: '',
+    //     show: false,
+    //     disabled () {
+    //       return !vm.hasPermissions('Retrieve')
+    //     }
+    //   },
+    //   edit: {
+    //     thin: true,
+    //     text: '',
+    //     show: false,
+    //     disabled () {
+    //       return !vm.hasPermissions('Update')
+    //     }
+    //   },
+    //   remove: {
+    //     thin: true,
+    //     text: '',
+    //     show: false,
+    //     disabled () {
+    //       return !vm.hasPermissions('Delete')
+    //     }
+    //   }
+    // },
+    rowHandle: false,
     viewOptions: {
       componentType: 'form'
     },
diff --git a/web/src/views/system/fileList/crud.js b/web/src/views/system/fileList/crud.js
index b4f009c..754b3e6 100644
--- a/web/src/views/system/fileList/crud.js
+++ b/web/src/views/system/fileList/crud.js
@@ -15,13 +15,7 @@ export const crudOptions = (vm) => {
           return !vm.hasPermissions('Retrieve')
         }
       },
-      edit: {
-        thin: true,
-        text: '',
-        disabled () {
-          return !vm.hasPermissions('Update')
-        }
-      },
+      edit: false,
       remove: {
         thin: true,
         text: '',
diff --git a/web/src/views/system/log/loginLog/crud.js b/web/src/views/system/log/loginLog/crud.js
index 08a33a4..94dd3ab 100644
--- a/web/src/views/system/log/loginLog/crud.js
+++ b/web/src/views/system/log/loginLog/crud.js
@@ -4,12 +4,11 @@ export const crudOptions = (vm) => {
       compact: true
     },
     options: {
-      tableType: 'vxe-table',
-      rowKey: true, // 必须设置，true or false
+      // tableType: 'vxe-table',
+      // rowKey: true, // 必须设置，true or false
       rowId: 'id',
       height: '100%', // 表格高度100%, 使用toolbar必须设置
-      highlightCurrentRow: false
-
+      highlightCurrentRow: false,
     },
     rowHandle: {
       fixed: 'right',
@@ -284,7 +283,8 @@ export const crudOptions = (vm) => {
         title: '登录时间',
         key: 'create_datetime',
         width: 160,
-        type: 'datetime'
+        type: 'datetime',
+        sortable: true
       }
     ]
   }
diff --git a/web/src/views/system/messageCenter/crud.js b/web/src/views/system/messageCenter/crud.js
index a2824c0..115863c 100644
--- a/web/src/views/system/messageCenter/crud.js
+++ b/web/src/views/system/messageCenter/crud.js
@@ -19,9 +19,7 @@ export const crudOptions = (vm) => {
       edit: {
         thin: true,
         text: '',
-        show () {
-          return vm.tabActivted !== 'receive'
-        },
+        show: false,
         disabled () {
           return !vm.hasPermissions('Update')
         }
diff --git a/web/src/views/system/user/crud.js b/web/src/views/system/user/crud.js
index 88a2f9c..fa29cfb 100644
--- a/web/src/views/system/user/crud.js
+++ b/web/src/views/system/user/crud.js
@@ -9,8 +9,8 @@ export const crudOptions = (vm) => {
     },
     options: {
       height: '100%',
-      tableType: 'vxe-table',
-      rowKey: true,
+     // tableType: 'vxe-table',
+      //rowKey: true,
       rowId: 'id'
     },
     selectionRow: {
@@ -149,6 +149,7 @@ export const crudOptions = (vm) => {
       {
         title: '姓名',
         key: 'name',
+        sortable: 'custom',
         minWidth: 90,
         search: {
           disabled: false