样式优化

update

resources/assets/dcat/sass/_variables.scss

@@ -1,3 +1,6 @@
+// 自定义颜色
+$custom: #59a9f8;
+
 
 // 蓝色
 $blue: #3085d6;

resources/assets/dcat/sass/components/_button.scss

@@ -0,0 +1,35 @@
+.btn {
+  padding: 0.9rem 1.4rem;
+  /* font-size: 1rem; */
+  line-height: .8;
+  border-radius: 0.4rem;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.7rem;
+  line-height: 1.4;
+}
+
+
+.btn-custom {
+  background: $custom;
+  border-color: $custom;
+  color: $white;
+}
+
+.btn-custom:hover {
+  color: $white;
+  box-shadow: 0 8px 25px -8px $custom;
+}
+
+.btn-outline-custom {
+  background: $white;
+  border: 1px solid $custom;
+  color: $custom;
+}
+
+.btn-outline-custom:hover {
+  background: rgba($custom, .15);
+  color: $custom;
+}

resources/assets/dcat/sass/components/_card.scss

@@ -0,0 +1,6 @@
+.card {
+  box-shadow: $shadow;
+}
+.card .card-header {
+  justify-content: normal;
+}

resources/assets/dcat/sass/components/_checkbox.scss

@@ -0,0 +1,11 @@
+.vs-checkbox-con {
+  margin: 0;
+}
+.vs-checkbox-con .vs-checkbox.vs-checkbox-sm {
+  width: 17px;
+  height: 17px;
+}
+.vs-checkbox-con input:checked ~ .vs-checkbox.vs-checkbox-sm .vs-checkbox--check .vs-icon {
+  font-size: 1rem;
+  margin-top: -1px;
+}

resources/assets/dcat/sass/components/_dropdown.scss

@@ -0,0 +1,8 @@
+.dropdown .dropdown-menu {
+  box-shadow: $shadow;
+  border: 1px solid rgba(0, 0, 0, 0.03)
+}
+.dropdown .dropdown-menu::before {
+  border-top: 1px solid rgba(0, 0, 0, 0.07);
+  border-left: 1px solid rgba(0, 0, 0, 0.07);
+}

resources/assets/dcat/sass/components/_grid.scss

@@ -0,0 +1,30 @@
+.grid-column-header {
+  a {
+    color: $dark70;
+  }
+  a:hover, a.active {
+    color: $primary-darker;
+  }
+}
+// 排序图标
+.grid-sort {
+  display: inline-block;
+  margin: -4px -4px 0 3px;
+  height: 17px;
+
+  .up:before {
+    font-family: "feather";
+    padding-right: 0.3rem;
+    font-size: 0.7rem;
+    content: "\E845";
+  }
+
+  .down {
+    margin: 6px 0 0 -1.17rem;
+  }
+  .down:after {
+    font-family: "feather";
+    content: "\E842";
+    font-size: 0.7rem;
+  }
+}

resources/assets/dcat/sass/components/_nestable.scss

@@ -0,0 +1,9 @@
+.dd-item > button:before {
+  font-family: "feather";
+  content: "\e844"!important;
+  margin-top: 3px;
+}
+
+.dd-item > button[data-action="collapse"]:before {
+  content: "\E842"!important;
+}

resources/assets/dcat/sass/components/_pagination.scss

@@ -0,0 +1,4 @@
+
+.pagination .page-item .page-link {
+  font-weight: 600;
+}

resources/assets/dcat/sass/components/_table.scss

@@ -0,0 +1,15 @@
+// data-list-view 表格
+table.data-list-view.dataTable tbody tr, table.data-thumb-view.dataTable tbody tr {
+  box-shadow: $shadow;
+}
+table.data-list-view.dataTable thead th:first-child, table.data-thumb-view.dataTable thead th:first-child {
+  padding-left: 1rem;
+}
+table.data-list-view.dataTable, table.data-thumb-view.dataTable {
+  border-spacing: 0 .95rem;
+  padding: 0;
+}
+table.data-list-view.dataTable tbody tr:hover, table.data-thumb-view.dataTable tbody tr:hover {
+  transform: none;
+  background: $dark20;
+}

resources/assets/dcat/sass/dcat-app.scss

@@ -26,6 +26,25 @@ body, .header-navbar, .navigation, .breadcrumb, h1, h2, h3, h4, h5 {
   font-family: Nunito, Montserrat,system-ui,BlinkMacSystemFont,-apple-system,sans-serif;
 }
 
+
+// 按钮
+@import "./components/button";
+// 分页
+@import "./components/pagination";
+// data-list-view 表格
+@import "./components/table";
+// grid
+@import "./components/grid";
+// 下拉菜单
+@import "./components/dropdown";
+// checkbox
+@import "./components/checkbox";
+// card
+@import "./components/card";
+// tree jquery.nestable
+@import "./components/nestable";
+
+
 body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
    font-size: 1.3rem;
 }
@@ -64,103 +83,8 @@ body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation >
 code {
   box-shadow: 0 1px 1px rgba(0,0,0,0.125);
   padding: 3px 5px;
-  background: #f1f1f1;
+  background: #f7f7f9;
 }
 pre {
   padding: 7px;
 }
-
-
-// 分页
-.pagination .page-item .page-link {
-  font-weight: 600;
-}
-
-// data-list-view 表格
-table.data-list-view.dataTable tbody tr, table.data-thumb-view.dataTable tbody tr {
-  box-shadow: $shadow;
-}
-table.data-list-view.dataTable thead th:first-child, table.data-thumb-view.dataTable thead th:first-child {
-  padding-left: 1rem;
-}
-table.data-list-view.dataTable, table.data-thumb-view.dataTable {
-  border-spacing: 0 .95rem;
-  padding: 0;
-}
-table.data-list-view.dataTable tbody tr:hover, table.data-thumb-view.dataTable tbody tr:hover {
-  transform: none;
-  background: $dark20;
-}
-
-
-// 按钮
-.btn {
-  padding: 0.9rem 1.4rem;
-  /* font-size: 1rem; */
-  line-height: .8;
-  border-radius: 0.4rem;
-}
-
-.btn-sm, .btn-group-sm > .btn {
-  padding: 0.5rem 1rem;
-  font-size: 0.7rem;
-  line-height: 1.4;
-}
-
-
-// grid表格
-.grid-column-header {
-  a {
-    color: $dark70;
-  }
-  a:hover, a.active {
-    color: $primary-darker;
-  }
-}
-// 排序图标
-.grid-sort {
-  display: inline-block;
-  margin: -4px -4px 0 3px;
-  height: 17px;
-
-  .up:before {
-    font-family: "feather";
-    padding-right: 0.3rem;
-    font-size: 0.7rem;
-    content: "\E845";
-  }
-
-  .down {
-    margin: 6px 0 0 -1.17rem;
-  }
-  .down:after {
-    font-family: "feather";
-    content: "\E842";
-    font-size: 0.7rem;
-  }
-}
-
-
-// 下拉菜单
-.dropdown .dropdown-menu {
-  box-shadow: $shadow;
-  border: 1px solid rgba(0, 0, 0, 0.03)
-}
-.dropdown .dropdown-menu::before {
-  border-top: 1px solid rgba(0, 0, 0, 0.07);
-  border-left: 1px solid rgba(0, 0, 0, 0.07);
-}
-
-
-// checkbox
-.vs-checkbox-con {
-  margin: 0;
-}
-.vs-checkbox-con .vs-checkbox.vs-checkbox-sm {
-  width: 18px;
-  height: 18px;
-}
-.vs-checkbox-con input:checked ~ .vs-checkbox.vs-checkbox-sm .vs-checkbox--check .vs-icon {
-  font-size: 1rem;
-  margin-top: -1px;
-}

resources/dist/dcat/css/app.css

@@ -1734,44 +1734,40 @@ h5 {
   font-family: Nunito, Montserrat, system-ui, BlinkMacSystemFont, -apple-system, sans-serif;
 }
 
-body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
-  font-size: 1.3rem;
-}
-
-.header-navbar.navbar-shadow {
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-}
-
-.main-menu.menu-shadow {
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+.btn {
+  padding: 0.9rem 1.4rem;
+  /* font-size: 1rem; */
+  line-height: 0.8;
+  border-radius: 0.4rem;
 }
 
-.breadcrumb {
-  border-left: 0;
+.btn-sm,
+.btn-group-sm > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.7rem;
+  line-height: 1.4;
 }
 
-.content-header h1 {
-  font-weight: 400;
-  font-size: 24px;
-  display: inline-block;
-  font-family: Montserrat, Nunito, sans-serif;
+.btn-custom {
+  background: #59a9f8;
+  border-color: #59a9f8;
+  color: #fff;
 }
 
-.content-header h1 small {
-  font-size: 15px;
-  display: inline-block;
-  padding-left: 5px;
-  font-weight: 300;
+.btn-custom:hover {
+  color: #fff;
+  box-shadow: 0 8px 25px -8px #59a9f8;
 }
 
-code {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
-  padding: 3px 5px;
-  background: #f1f1f1;
+.btn-outline-custom {
+  background: #fff;
+  border: 1px solid #59a9f8;
+  color: #59a9f8;
 }
 
-pre {
-  padding: 7px;
+.btn-outline-custom:hover {
+  background: rgba(89, 169, 248, 0.15);
+  color: #59a9f8;
 }
 
 .pagination .page-item .page-link {
@@ -1800,20 +1796,6 @@ table.data-thumb-view.dataTable tbody tr:hover {
   background: #f6fbff;
 }
 
-.btn {
-  padding: 0.9rem 1.4rem;
-  /* font-size: 1rem; */
-  line-height: 0.8;
-  border-radius: 0.4rem;
-}
-
-.btn-sm,
-.btn-group-sm > .btn {
-  padding: 0.5rem 1rem;
-  font-size: 0.7rem;
-  line-height: 1.4;
-}
-
 .grid-column-header a {
   color: #b3b9bf;
 }
@@ -1861,8 +1843,8 @@ table.data-thumb-view.dataTable tbody tr:hover {
 }
 
 .vs-checkbox-con .vs-checkbox.vs-checkbox-sm {
-  width: 18px;
-  height: 18px;
+  width: 17px;
+  height: 17px;
 }
 
 .vs-checkbox-con input:checked ~ .vs-checkbox.vs-checkbox-sm .vs-checkbox--check .vs-icon {
@@ -1870,3 +1852,61 @@ table.data-thumb-view.dataTable tbody tr:hover {
   margin-top: -1px;
 }
 
+.card {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+.card .card-header {
+  justify-content: normal;
+}
+
+.dd-item > button:before {
+  font-family: "feather";
+  content: "\E844" !important;
+  margin-top: 3px;
+}
+
+.dd-item > button[data-action=collapse]:before {
+  content: "\E842" !important;
+}
+
+body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
+  font-size: 1.3rem;
+}
+
+.header-navbar.navbar-shadow {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+}
+
+.main-menu.menu-shadow {
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
+}
+
+.breadcrumb {
+  border-left: 0;
+}
+
+.content-header h1 {
+  font-weight: 400;
+  font-size: 24px;
+  display: inline-block;
+  font-family: Montserrat, Nunito, sans-serif;
+}
+
+.content-header h1 small {
+  font-size: 15px;
+  display: inline-block;
+  padding-left: 5px;
+  font-weight: 300;
+}
+
+code {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
+  padding: 3px 5px;
+  background: #f7f7f9;
+}
+
+pre {
+  padding: 7px;
+}
+

resources/views/tree.blade.php

@@ -10,19 +10,19 @@
     </div>
 
     @if($useSave)
-    <div class="btn-group" style="margin-right:3px">
+    &nbsp;<div class="btn-group" style="margin-right:3px">
         <button class="btn btn-primary btn-sm {{ $id }}-save" ><i class="feather icon-save"></i><span class="hidden-xs">&nbsp;{{ trans('admin.save') }}</span></button>
     </div>
     @endif
 
     @if($useRefresh)
-    <div class="btn-group" style="margin-right:3px">
-        <button class="btn btn-custom btn-sm" data-action="refresh" ><i class="feather icon-refresh-cw"></i><span class="hidden-xs">&nbsp;{{ trans('admin.refresh') }}</span></button>
+        &nbsp;<div class="btn-group" style="margin-right:3px">
+        <button class="btn btn-outline-custom btn-sm" data-action="refresh" ><i class="feather icon-refresh-cw"></i><span class="hidden-xs">&nbsp;{{ trans('admin.refresh') }}</span></button>
     </div>
     @endif
 
     @if($tools)
-    <div class="btn-group" style="margin-right:3px">
+    &nbsp;<div class="btn-group" style="margin-right:3px">
         {!! $tools !!}
     </div>
     @endif

src/Layout/Assets.php

@@ -65,7 +65,12 @@ class Assets
     /**
      * @var array
      */
-    public $components = [];
+    public $components = [
+        'jquery.nestable' => [
+            'js'  => 'dcat-admin/plugins/nestable/jquery.nestable.min.js',
+            'css' => 'dcat-admin/plugins/nestable/nestable.css',
+        ],
+    ];
 
     /**
      * @var array