diff --git a/application/admin/command/Crud.php b/application/admin/command/Crud.php
index 42eb4386..f5f3d869 100755
--- a/application/admin/command/Crud.php
+++ b/application/admin/command/Crud.php
@@ -1660,7 +1660,7 @@ EOD;
     {
         $uploadfilter = $selectfilter = '';
         if ($this->isMatchSuffix($field, $this->imageField)) {
-            $uploadfilter = ' data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp"';
+            $uploadfilter = ' data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp"';
             $selectfilter = ' data-mimetype="image/*"';
         }
         $multiple = substr($field, -1) == 's' ? ' data-multiple="true"' : ' data-multiple="false"';
diff --git a/application/admin/controller/general/Attachment.php b/application/admin/controller/general/Attachment.php
index 3b749b5b..407aff20 100644
--- a/application/admin/controller/general/Attachment.php
+++ b/application/admin/controller/general/Attachment.php
@@ -45,17 +45,13 @@ class Attachment extends Backend
                 $filterArr['category'] = ',unclassed';
                 $this->request->get(['filter' => json_encode(array_diff_key($filterArr, ['category' => '']))]);
             }
-            if (isset($filterArr['mimetype']) && preg_match("/[]\,|\*]/", $filterArr['mimetype'])) {
+            if (isset($filterArr['mimetype']) && preg_match("/(\/|\,|\*)/", $filterArr['mimetype'])) {
                 $mimetype = $filterArr['mimetype'];
                 $filterArr = array_diff_key($filterArr, ['mimetype' => '']);
                 $mimetypeQuery = function ($query) use ($mimetype) {
-                    $mimetypeArr = explode(',', $mimetype);
+                    $mimetypeArr = array_filter(explode(',', $mimetype));
                     foreach ($mimetypeArr as $index => $item) {
-                        if (stripos($item, "/*") !== false) {
-                            $query->whereOr('mimetype', 'like', str_replace("/*", "/", $item) . '%');
-                        } else {
-                            $query->whereOr('mimetype', 'like', '%' . $item . '%');
-                        }
+                        $query->whereOr('mimetype', 'like', '%' . str_replace("/*", "/", $item) . '%');
                     }
                 };
             }
diff --git a/application/admin/view/general/config/index.html b/application/admin/view/general/config/index.html
index e3af1eea..fbff8f72 100644
--- a/application/admin/view/general/config/index.html
+++ b/application/admin/view/general/config/index.html
@@ -136,7 +136,7 @@
                                             {case value="images"}
                                             <div class="form-inline">
                                                 <input id="c-{$item.name}" class="form-control" size="50" name="row[{$item.name}]" type="text" value="{$item.value|htmlentities}" data-tip="{$item.tip}">
-                                                <span><button type="button" id="faupload-{$item.name}" class="btn btn-danger faupload" data-input-id="c-{$item.name}" data-mimetype="image/*" data-multiple="{$item.type=='image'?'false':'true'}" data-preview-id="p-{$item.name}"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
+                                                <span><button type="button" id="faupload-{$item.name}" class="btn btn-danger faupload" data-input-id="c-{$item.name}" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="{$item.type=='image'?'false':'true'}" data-preview-id="p-{$item.name}"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                                 <span><button type="button" id="fachoose-{$item.name}" class="btn btn-primary fachoose" data-input-id="c-{$item.name}" data-mimetype="image/*" data-multiple="{$item.type=='image'?'false':'true'}"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                                                 <span class="msg-box n-right" for="c-{$item.name}"></span>
                                                 <ul class="row list-inline faupload-preview" id="p-{$item.name}"></ul>
diff --git a/application/admin/view/general/profile/index.html b/application/admin/view/general/profile/index.html
index db2a2c28..ce4262e5 100644
--- a/application/admin/view/general/profile/index.html
+++ b/application/admin/view/general/profile/index.html
@@ -39,7 +39,7 @@
 </style>
 <div class="row animated fadeInRight">
     <div class="col-md-4">
-        <div class="box box-success">
+        <div class="box box-primary">
             <div class="panel-heading">
                 {:__('Profile')}
             </div>
@@ -76,7 +76,7 @@
                             <input type="password" class="form-control" id="password" placeholder="{:__('Leave password blank if dont want to change')}" autocomplete="new-password" name="row[password]" value="" data-rule="password"/>
                         </div>
                         <div class="form-group">
-                            <button type="submit" class="btn btn-success">{:__('Submit')}</button>
+                            <button type="submit" class="btn btn-primary">{:__('Submit')}</button>
                             <button type="reset" class="btn btn-default">{:__('Reset')}</button>
                         </div>
 
diff --git a/application/index/controller/User.php b/application/index/controller/User.php
index b3030ed3..7daf6c12 100644
--- a/application/index/controller/User.php
+++ b/application/index/controller/User.php
@@ -277,16 +277,12 @@ class User extends Frontend
             $where = [];
             $filter = $this->request->request('filter');
             $filterArr = (array)json_decode($filter, true);
-            if (isset($filterArr['mimetype']) && preg_match("/[]\,|\*]/", $filterArr['mimetype'])) {
+            if (isset($filterArr['mimetype']) && preg_match("/(\/|\,|\*)/", $filterArr['mimetype'])) {
                 $this->request->get(['filter' => json_encode(array_diff_key($filterArr, ['mimetype' => '']))]);
                 $mimetypeQuery = function ($query) use ($filterArr) {
-                    $mimetypeArr = explode(',', $filterArr['mimetype']);
+                    $mimetypeArr = array_filter(explode(',', $filterArr['mimetype']));
                     foreach ($mimetypeArr as $index => $item) {
-                        if (stripos($item, "/*") !== false) {
-                            $query->whereOr('mimetype', 'like', str_replace("/*", "/", $item) . '%');
-                        } else {
-                            $query->whereOr('mimetype', 'like', '%' . $item . '%');
-                        }
+                        $query->whereOr('mimetype', 'like', '%' . str_replace("/*", "/", $item) . '%');
                     }
                 };
             } elseif (isset($filterArr['mimetype'])) {
diff --git a/public/assets/css/backend.css b/public/assets/css/backend.css
index 31c34e4a..edf01996 100644
--- a/public/assets/css/backend.css
+++ b/public/assets/css/backend.css
@@ -12,6 +12,32 @@
 @import url("../libs/bootstrap-select/dist/css/bootstrap-select.min.css");
 @import url("../libs/fastadmin-selectpage/selectpage.css");
 @import url("../libs/bootstrap-slider/slider.css");
+.m-0 {
+  margin-top: 0px !important;
+  margin-right: 0px !important;
+  margin-bottom: 0px !important;
+  margin-left: 0px !important;
+}
+.mt-0 {
+  margin-top: 0px !important;
+}
+.mr-0 {
+  margin-right: 0px !important;
+}
+.mb-0 {
+  margin-bottom: 0px !important;
+}
+.ml-0 {
+  margin-left: 0px !important;
+}
+.mx-0 {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+.my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
 .m-1 {
   margin-top: 5px !important;
   margin-right: 5px !important;
@@ -116,6 +142,32 @@
   margin-top: 20px !important;
   margin-bottom: 20px !important;
 }
+.p-0 {
+  padding-top: 0px !important;
+  padding-right: 0px !important;
+  padding-bottom: 0px !important;
+  padding-left: 0px !important;
+}
+.pt-0 {
+  padding-top: 0px !important;
+}
+.pr-0 {
+  padding-right: 0px !important;
+}
+.pb-0 {
+  padding-bottom: 0px !important;
+}
+.pl-0 {
+  padding-left: 0px !important;
+}
+.px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.py-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
 .p-1 {
   padding-top: 5px !important;
   padding-right: 5px !important;
@@ -1378,7 +1430,7 @@ table.table-nowrap thead > tr > th {
 }
 .radio > label > input,
 .checkbox > label > input {
-  margin: 2px 0 0;
+  margin: 5px 0 0;
 }
 .wipecache li a {
   color: #444444 !important;
diff --git a/public/assets/css/frontend.css b/public/assets/css/frontend.css
index 27e5a5db..6bb292f7 100644
--- a/public/assets/css/frontend.css
+++ b/public/assets/css/frontend.css
@@ -11,6 +11,32 @@
 @import url("../libs/bootstrap-select/dist/css/bootstrap-select.min.css");
 @import url("../libs/fastadmin-selectpage/selectpage.css");
 @import url("../libs/bootstrap-slider/slider.css");
+.m-0 {
+  margin-top: 0px !important;
+  margin-right: 0px !important;
+  margin-bottom: 0px !important;
+  margin-left: 0px !important;
+}
+.mt-0 {
+  margin-top: 0px !important;
+}
+.mr-0 {
+  margin-right: 0px !important;
+}
+.mb-0 {
+  margin-bottom: 0px !important;
+}
+.ml-0 {
+  margin-left: 0px !important;
+}
+.mx-0 {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+.my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
 .m-1 {
   margin-top: 5px !important;
   margin-right: 5px !important;
@@ -115,6 +141,32 @@
   margin-top: 20px !important;
   margin-bottom: 20px !important;
 }
+.p-0 {
+  padding-top: 0px !important;
+  padding-right: 0px !important;
+  padding-bottom: 0px !important;
+  padding-left: 0px !important;
+}
+.pt-0 {
+  padding-top: 0px !important;
+}
+.pr-0 {
+  padding-right: 0px !important;
+}
+.pb-0 {
+  padding-bottom: 0px !important;
+}
+.pl-0 {
+  padding-left: 0px !important;
+}
+.px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.py-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
 .p-1 {
   padding-top: 5px !important;
   padding-right: 5px !important;
@@ -446,7 +498,7 @@ input.selectpage {
 }
 .radio > label > input,
 .checkbox > label > input {
-  margin: 2px 0 0;
+  margin: 5px 0 0;
 }
 form.form-horizontal .control-label {
   font-weight: normal;
diff --git a/public/assets/css/tinycss.css b/public/assets/css/tinycss.css
index e52cb50e..f872524c 100644
--- a/public/assets/css/tinycss.css
+++ b/public/assets/css/tinycss.css
@@ -1,3 +1,29 @@
+.m-0 {
+  margin-top: 0px !important;
+  margin-right: 0px !important;
+  margin-bottom: 0px !important;
+  margin-left: 0px !important;
+}
+.mt-0 {
+  margin-top: 0px !important;
+}
+.mr-0 {
+  margin-right: 0px !important;
+}
+.mb-0 {
+  margin-bottom: 0px !important;
+}
+.ml-0 {
+  margin-left: 0px !important;
+}
+.mx-0 {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+}
+.my-0 {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
 .m-1 {
   margin-top: 5px !important;
   margin-right: 5px !important;
@@ -102,6 +128,32 @@
   margin-top: 20px !important;
   margin-bottom: 20px !important;
 }
+.p-0 {
+  padding-top: 0px !important;
+  padding-right: 0px !important;
+  padding-bottom: 0px !important;
+  padding-left: 0px !important;
+}
+.pt-0 {
+  padding-top: 0px !important;
+}
+.pr-0 {
+  padding-right: 0px !important;
+}
+.pb-0 {
+  padding-bottom: 0px !important;
+}
+.pl-0 {
+  padding-left: 0px !important;
+}
+.px-0 {
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.py-0 {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+}
 .p-1 {
   padding-top: 5px !important;
   padding-right: 5px !important;
diff --git a/public/assets/js/backend/addon.js b/public/assets/js/backend/addon.js
index 5c5a3454..0e83e8e9 100644
--- a/public/assets/js/backend/addon.js
+++ b/public/assets/js/backend/addon.js
@@ -67,6 +67,13 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function
                 });
             });
 
+            //当表格分页变更时
+            table.on('page-change.bs.table', function (e, page, pagesize) {
+                if (!isNaN(pagesize)) {
+                    localStorage.setItem("pagesize-addon", pagesize);
+                }
+            });
+
             Template.helper("Moment", Moment);
             Template.helper("addons", Config['addons']);
 
@@ -149,7 +156,6 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function
                         {
                             field: 'id',
                             title: __('Operate'),
-                            align: 'center',
                             table: table,
                             formatter: Controller.api.formatter.operate,
                             align: 'right'
@@ -172,7 +178,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template'], function
                 commonSearch: true,
                 searchFormVisible: true,
                 searchFormTemplate: 'searchformtpl',
-                pageSize: 5,
+                pageSize: localStorage.getItem('pagesize-addon') || 50,
             });
 
             // 为表格绑定事件
diff --git a/public/assets/js/require-form.js b/public/assets/js/require-form.js
index 463a9345..8d9ab869 100755
--- a/public/assets/js/require-form.js
+++ b/public/assets/js/require-form.js
@@ -248,6 +248,7 @@ define(['jquery', 'bootstrap', 'upload', 'validator', 'validator-lang'], functio
                         var mimetype = $(this).data("mimetype") ? $(this).data("mimetype") : '';
                         var admin_id = $(this).data("admin-id") ? $(this).data("admin-id") : '';
                         var user_id = $(this).data("user-id") ? $(this).data("user-id") : '';
+                        mimetype = mimetype.replace(/\/\*/ig, '/');
                         var url = $(this).data("url") ? $(this).data("url") : (typeof Backend !== 'undefined' ? "general/attachment/select" : "user/attachment");
                         parent.Fast.api.open(url + "?element_id=" + $(this).attr("id") + "&multiple=" + multiple + "&mimetype=" + mimetype + "&admin_id=" + admin_id + "&user_id=" + user_id, __('Choose'), {
                             callback: function (data) {
diff --git a/public/assets/less/backend.less b/public/assets/less/backend.less
index a2d2f934..397c374d 100644
--- a/public/assets/less/backend.less
+++ b/public/assets/less/backend.less
@@ -1432,7 +1432,7 @@ table.table-nowrap {
         margin-right: 10px;
 
         > input {
-            margin: 2px 0 0;
+            margin: 5px 0 0;
         }
     }
 }
diff --git a/public/assets/less/frontend.less b/public/assets/less/frontend.less
index 81a90c2f..62d58c18 100644
--- a/public/assets/less/frontend.less
+++ b/public/assets/less/frontend.less
@@ -292,7 +292,7 @@ input.selectpage {
         margin-right: 10px;
 
         > input {
-            margin: 2px 0 0;
+            margin: 5px 0 0;
         }
     }
 }
@@ -889,4 +889,3 @@ main.content {
 
     }
 }
-
diff --git a/public/assets/less/tinycss.less b/public/assets/less/tinycss.less
index 3c1b8d48..7ff7687f 100644
--- a/public/assets/less/tinycss.less
+++ b/public/assets/less/tinycss.less
@@ -2,7 +2,7 @@
 .make-margin-padding(margin, m, 5px, 4);
 .make-margin-padding(padding, p, 5px, 4);
 
-.make-margin-padding(@type, @prefix, @space, @i) when (@i > 0) {
+.make-margin-padding(@type, @prefix, @space, @i) when (@i >= 0) {
   .make-margin-padding(@type, @prefix, @space, @i - 1);
   @pixel: @space * @i;
   .@{prefix}-@{i} {