From d91e73d1d3963f503bfba64a2cb60c39ed622241 Mon Sep 17 00:00:00 2001 From: augushong Date: Tue, 12 Nov 2024 17:45:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=96=B0=E7=89=88layui?= =?UTF-8?q?=EF=BC=9B=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC=E5=A4=9A=E6=A8=A1?= =?UTF-8?q?=E6=9D=BF=E6=9C=BA=E5=88=B6=EF=BC=9B=E5=A2=9E=E5=8A=A0local?= =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=96=B9=E6=B3=95=EF=BC=9B=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=B0=E5=BF=86=E6=93=8D=E4=BD=9C=E6=96=B9?= =?UTF-8?q?=E6=B3=95=EF=BC=9B=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- extend/base/admin/view/layout/default.html | 1 + .../common/controller/AdminControllerBase.php | 16 +- public/static/admin/css/public.css | 612 +++++++++-------- public/static/admin/css/public.scss | 649 ++++++++++++++++++ public/static/common/js/app.js | 19 + .../static/plugs/ulthon-admin/ulthon-admin.js | 294 +++++++- view/index/welcome.html | 4 +- 7 files changed, 1262 insertions(+), 333 deletions(-) create mode 100644 public/static/admin/css/public.scss diff --git a/extend/base/admin/view/layout/default.html b/extend/base/admin/view/layout/default.html index ec62d67..f834fc7 100644 --- a/extend/base/admin/view/layout/default.html +++ b/extend/base/admin/view/layout/default.html @@ -17,6 +17,7 @@ IS_SUPER_ADMIN: "{$isSuperAdmin|default='false'}", VERSION: "{$version|default='1.0.0'}", CSRF_TOKEN: "{:token()}", + PAGE_KEY_NAME:'{$pageKeyName|default=$Request.url}' }; var PATH_CONFIG = { diff --git a/extend/base/common/controller/AdminControllerBase.php b/extend/base/common/controller/AdminControllerBase.php index f130510..64fef28 100644 --- a/extend/base/common/controller/AdminControllerBase.php +++ b/extend/base/common/controller/AdminControllerBase.php @@ -19,6 +19,8 @@ class AdminControllerBase extends BaseController { use \app\common\traits\JumpTrait; + protected $pageKeyName = null; + /** * 当前模型. * @Model @@ -108,6 +110,10 @@ class AdminControllerBase extends BaseController */ protected function initialize() { + if(empty($this->pageKeyName)){ + $this->pageKeyName = $this->request->controller().'_'. $this->request->action(); + } + parent::initialize(); $this->layout && $this->app->view->engine()->layout($this->layout); $this->isDemo = Env::get('adminsystem.is_demo', false); @@ -364,18 +370,12 @@ class AdminControllerBase extends BaseController 'autoloadJs' => $autoloadJs, 'isSuperAdmin' => $isSuperAdmin, 'version' => env('app_debug') ? time() : sysconfig('site', 'site_version'), + 'pageKeyName'=>$this->pageKeyName ]; View::assign($data); - if ($this->request->isMobile()) { - $logo_info = [ - 'title' => sysconfig('site', 'logo_title'), - 'image' => sysconfig('site', 'logo_image'), - 'href' => __url('index/index'), - ]; - $this->assign('logo_info', $logo_info); - } + } /** diff --git a/public/static/admin/css/public.css b/public/static/admin/css/public.css index d892848..45e1236 100644 --- a/public/static/admin/css/public.css +++ b/public/static/admin/css/public.css @@ -1,614 +1,626 @@ -@import url("../../plugs/layui-v2.8.17/css/layui.css"); +@charset "UTF-8"; +@import url("../../plugs/layui-v2.9.18/css/layui.css"); @import url("../../plugs/font-awesome-4.7.0/css/font-awesome.min.css"); @import url("../css/iconfont.css"); -@import url('../../plugs/jq-module/city-picker/css/city-picker.css'); - +@import url("../../plugs/jq-module/city-picker/css/city-picker.css"); html, body { - height: 100%; - background: #f2f2f2; + height: 100%; + background: #f2f2f2; } .layuimini-container { - min-height: 250px; - padding: 15px; - margin-right: auto; - margin-left: auto; - padding-left: 15px; - padding-right: 15px; + min-height: 250px; + padding: 15px; + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } .layuimini-main { - position: relative; - padding: 15px 15px; - background-color: #ffffff; - border: 1px solid #f2f2f2; - border-radius: 5px; + position: relative; + padding: 15px 15px; + background-color: #ffffff; + border: 1px solid #f2f2f2; + border-radius: 5px; } .text-center { - text-align: center; + text-align: center; } .layuimini-form { - margin-top: 10px; + margin-top: 10px; } .layuimini-form .layui-form-item { - position: relative; - padding: 0 60px 0 0; - line-height: 24px; + position: relative; + padding: 0 60px 0 0; + line-height: 24px; } .layuimini-form.multiple-columns .hr-line { - width: 100%; + width: 100%; } -.layuimini-form.multiple-columns .hr-line+.layui-form-item { - width: 100%; +.layuimini-form.multiple-columns .hr-line + .layui-form-item { + width: 100%; } .layuimini-form.multiple-columns .layui-form-item { - display: inline-block; - width: calc(50% - 62px); - flex-shrink: 1; + display: inline-block; + width: calc(50% - 62px); + flex-shrink: 1; } .layuimini-form.multiple-columns .layui-form-item.full-line { - display: block; - width: calc(100% - 62px); + display: block; + width: calc(100% - 62px); } - .easy-bg-white { - background-color: #ffffff; - height: auto; + background-color: #ffffff; + height: auto; } .hr-line { - color: #fff; - height: 1px; - margin: 30px 0; - background-color: #fff; - border-top: 1px dashed #e7eaec; + color: #fff; + height: 1px; + margin: 30px 0; + background-color: #fff; + border-top: 1px dashed #e7eaec; } /**重写layui表格自适应*/ .layuimini-container .layui-table-cell { - max-width: 100%; + max-width: 100%; } /**数据表格-搜索表单样式*/ .layuimini-container .table-search-fieldset { - margin: 0; - border: 1px solid #e6e6e6; - padding: 10px 20px 5px 20px; - color: #6b6b6b; + margin: 0; + border: 1px solid #e6e6e6; + padding: 10px 20px 5px 20px; + color: #6b6b6b; } .layuimini-container .table-search-fieldset input::-webkit-input-placeholder { - color: #a9a9a9; + color: #a9a9a9; } .layuimini-container .table-search-fieldset input:-ms-input-placeholder { - color: #a9a9a9; + color: #a9a9a9; } .layuimini-container .table-search-fieldset input::-ms-input-placeholder { - color: #a9a9a9; + color: #a9a9a9; } /**图标选择器*/ .layui-iconpicker-body.layui-iconpicker-body-page .hide { - display: none; + display: none; } /**必填红点 */ -.layuimini-form>.layui-form-item .required:after { - content: '*'; - color: red; - position: absolute; - margin-left: 4px; - font-weight: bold; - line-height: 1.8em; - top: 6px; - right: 5px; +.layuimini-form > .layui-form-item .required:after { + content: "*"; + color: red; + position: absolute; + margin-left: 4px; + font-weight: bold; + line-height: 1.8em; + top: 6px; + right: 5px; } /*.layuimini-form>.layui-form-item>.layui-form-label {width:120px !important;}*/ /*.layuimini-form>.layui-form-item>.layui-input-block {margin-left:150px !important;}*/ -.layuimini-form>.layui-form-item>.layui-input-block tip, -.layuimini-form>.layui-form-item>.layui-inline tip { - display: inline-block; - margin-top: 10px; - line-height: 15px; - font-size: 10px; - color: #a29c9c; +.layuimini-form > .layui-form-item > .layui-input-block tip, +.layuimini-form > .layui-form-item > .layui-inline tip { + display: inline-block; + margin-top: 10px; + line-height: 15px; + font-size: 10px; + color: #a29c9c; } /** 按钮背景色 */ .layuimini-container .layuimini-btn-primary { - color: #fff; - background-color: #2c3e50; + color: #fff; + background-color: #2c3e50; } .layuimini-container .layui-btn-sm i { - font-size: 12px !important; + font-size: 12px !important; } /**文件上传样式*/ .layuimini-upload { - position: relative; + position: relative; } .layuimini-upload .layuimini-upload-btn { - display: inline-block; - position: absolute; - right: 0px; - background-color: #fff; + display: inline-block; + position: absolute; + right: 0px; + background-color: #fff; } .layuimini-upload-show { - margin-top: 10px; - margin-bottom: 0; + margin-top: 10px; + margin-bottom: 0; } .layuimini-upload-show li { - position: relative; - display: inline-block; - padding: 5px 0 5px 0; - padding-left: 10px; - padding-right: 10px; - border: 1px solid #e2e2e2; + position: relative; + display: inline-block; + padding: 5px 0 5px 0; + padding-left: 10px; + padding-right: 10px; + border: 1px solid #e2e2e2; } .layuimini-upload-show a img { - height: 80px; - object-fit: cover; + height: 80px; + -o-object-fit: cover; + object-fit: cover; } .layuimini-upload-show .uploads-delete-tip { - position: absolute; - right: 10px; - font-size: 12px; + position: absolute; + right: 10px; + font-size: 12px; } .bg-red { - background-color: #e74c3c !important; + background-color: #e74c3c !important; } .color-red { - color: #e74c3c !important; + color: #e74c3c !important; } .badge { - display: inline-block; - min-width: 10px; - padding: 3px 7px; - font-size: 11px; - font-weight: bold; - color: #fff; - line-height: 1; - vertical-align: middle; - white-space: nowrap; - text-align: center; - background-color: #777777; - border-radius: 10px; + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 11px; + font-weight: bold; + color: #fff; + line-height: 1; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: #777777; + border-radius: 10px; } /**vue隐藏样式*/ [v-cloak] { - display: none; + display: none; } /**表格url样式*/ .layuimini-table-url { - background-color: #1497f3; - color: #ffffff; - border-radius: 3px; - size: 8px !important; - padding: 2px + background-color: #1497f3; + color: #ffffff; + border-radius: 3px; + size: 8px !important; + padding: 2px; } .layuimini-table-url:hover { - background-color: #1497f3; - color: #ffffff; - border-radius: 3px; - size: 8px !important; - padding: 2px + background-color: #1497f3; + color: #ffffff; + border-radius: 3px; + size: 8px !important; + padding: 2px; } /**后台权限隐藏*/ /*[auth] { display: none; }*/ - .layui-form-label { - width: 100px; + width: 100px; } .layui-input-block { - margin-left: 130px; - min-height: 36px + margin-left: 130px; + min-height: 36px; } /** table样式 */ .layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em { - border-radius: 30px !important; - background-color: #1e9fff !important; + border-radius: 30px !important; + background-color: #1e9fff !important; } .layuimini-container .layui-table-tool { - background-color: #ffffff; - border-bottom: none !important; - padding-bottom: 15px !important; + background-color: #ffffff; + border-bottom: none !important; + padding-bottom: 15px !important; } .layuimini-container .layui-table-view { - border: none !important; + border: none !important; } -.layuimini-container .layui-table-view::after{ - content: ""; - display: block; - clear: both; - height: 0; - visibility: hidden; +.layuimini-container .layui-table-view::after { + content: ""; + display: block; + clear: both; + height: 0; + visibility: hidden; } .layuimini-container .layui-table-box { - border-width: 1px; - border-style: solid; - border-color: #e6e6e6; + border-width: 1px; + border-style: solid; + border-color: #e6e6e6; } .layuimini-container .layui-table-page, .layui-table-total { - border-width: 0px 0 0; + border-width: 0px 0 0; } .layuimini-container .layui-table-box .layui-table-header th { - font-weight: bold !important; - color: #565656 !important; + font-weight: bold !important; + color: #565656 !important; } /** 搜索 */ .form-search .layui-btn { - height: 32px; - line-height: 28px; - font-size: 12px; - padding: 0 10px; + height: 32px; + line-height: 28px; + font-size: 12px; + padding: 0 10px; } .form-search .layui-form-label { - padding: 0 8px; - height: 32px; - line-height: 30px; + padding: 0 8px; + height: 32px; + line-height: 30px; } .form-search .layui-input-inline { - width: 170px; + width: 170px; } .form-search .layui-input-inline input, .form-search .layui-input-inline select { - width: 100%; - height: 32px; - padding: 2px 8px; - line-height: 1em; - font-size: 12px; + width: 100%; + height: 32px; + padding: 2px 8px; + line-height: 1em; + font-size: 12px; } .form-search .layui-form-select dl { - top: 31px; - padding: 0; + top: 31px; + padding: 0; } - /** 按钮 */ .layuimini-container .layui-btn-success { - color: #fff; - background-color: #4bb368; - border-color: #4bb368; + color: #fff; + background-color: #4bb368; + border-color: #4bb368; } .layuimini-container .layui-btn-danger { - color: #fff; - background-color: #f56c6c; - border-color: #f56c6c; + color: #fff; + background-color: #f56c6c; + border-color: #f56c6c; } -.layuimini-container .layui-table-tool .layui-btn+.layui-btn { - margin-left: 5px; +.layuimini-container .layui-table-tool .layui-btn + .layui-btn { + margin-left: 5px; } .layuimini-container .layui-table-tool .layui-inline[lay-event] { - width: 30px; - height: 30px; - line-height: 30px; - padding: 0px; + width: 30px; + height: 30px; + line-height: 30px; + padding: 0px; } .layuimini-container .layui-table-tool .layui-inline .layui-icon { - font-size: 16px; + font-size: 16px; } .layuimini-container .layui-table-tool-self { - right: 0px; + right: 0px; } .layuimini-container .layui-table-tool { - padding: 10px 0px; + padding: 10px 0px; } /* 手机端的表格头部操作 */ .layuimini-container .main-tool { - padding: 15px; + padding: 15px; } /** 开关 */ .layuimini-container .layui-form-switch { - border: 1px solid #f56d6d; - background-color: #f56d6d; + border: 1px solid #f56d6d; + background-color: #f56d6d; } .layuimini-container .layui-form-switch em { - color: #fff !important; + color: #fff !important; } .layuimini-container .layui-form-switch i { - background-color: #ffffff; + background-color: #ffffff; } .layuimini-container .layui-form-onswitch { - border-color: #1f9fff; - background-color: #1f9fff; + border-color: #1f9fff; + background-color: #1f9fff; } /** 下拉选择 */ .layuimini-container .layui-form-select dl dd.layui-this { - background-color: #1e9fff !important; - color: #fff; + background-color: #1e9fff !important; + color: #fff; } /** 弹出层样式 */ .layui-layer-easy .layui-layer-title { - background: #2c3e50 !important; - color: #fff !important; - border-bottom: none; + background: #2c3e50 !important; + color: #fff !important; + border-bottom: none; } -.layui-layer-easy .layui-layer-title~.layui-layer-setwin>a { - height: 42px; - line-height: 42px; - display: inline-block; +.layui-layer-easy .layui-layer-title ~ .layui-layer-setwin > a { + height: 42px; + line-height: 42px; + display: inline-block; } .layui-layer-easy.layui-layer-border { - border: none !important; - box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3) !important; + border: none !important; + box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3) !important; } .layui-layer-easy.layui-layer-iframe { - overflow: visible; + overflow: visible; } .layui-layer-easy .layui-layer-moves { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + box-sizing: content-box; } .layui-layer-easy .layui-layer-btn { - text-align: center !important; - padding: 10px !important; - background: #ecf0f1; - overflow: hidden; + text-align: center !important; + padding: 10px !important; + background: #ecf0f1; + overflow: hidden; } .layui-layer-easy .layui-layer-btn a { - background-color: #95a5a6; - border-color: #95a5a6; - color: #fff !important; - height: 31px; - margin-top: 0; - border: 1px solid transparent; + background-color: #95a5a6; + border-color: #95a5a6; + color: #fff !important; + height: 31px; + margin-top: 0; + border: 1px solid transparent; } .layui-layer-easy .layui-layer-btn .layui-layer-btn0 { - background-color: #1E9FFF; - border-color: #1E9FFF; + background-color: #1E9FFF; + border-color: #1E9FFF; } .layui-layer-easy .layui-layer-footer { - padding: 8px 20px; - background-color: #ecf0f1; - height: auto; - text-align: inherit !important; + padding: 8px 20px; + background-color: #ecf0f1; + height: auto; + text-align: inherit !important; } -.layui-layer-easy .layui-layer-setwin>span { - color: #fff; +.layui-layer-easy .layui-layer-setwin > span { + color: #fff; } -.layui-layer-easy .layui-layer-setwin>a { - background: none !important; +.layui-layer-easy .layui-layer-setwin > a { + background: none !important; } -.layui-layer-easy .layui-layer-setwin>a cite { - display: none; +.layui-layer-easy .layui-layer-setwin > a cite { + display: none; } -.layui-layer-easy .layui-layer-setwin>a:after { - content: "\e625"; - font-family: iconfont; - font-style: normal; - font-weight: normal; - text-decoration: inherit; - position: absolute; - font-size: 18px; - color: #fff; - margin: 0; - z-index: 1; +.layui-layer-easy .layui-layer-setwin > a:after { + content: "\e625"; + font-family: iconfont; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + position: absolute; + font-size: 18px; + color: #fff; + margin: 0; + z-index: 1; } -.layui-layer-easy .layui-layer-setwin>a:hover { - text-decoration: none !important; - background: none !important; +.layui-layer-easy .layui-layer-setwin > a:hover { + text-decoration: none !important; + background: none !important; } -.layui-layer-easy .layui-layer-setwin>a:focus { - text-decoration: none !important; +.layui-layer-easy .layui-layer-setwin > a:focus { + text-decoration: none !important; } .layui-layer-easy .layui-layer-setwin .layui-layer-max::after, .layui-layer-easy .layui-layer-setwin .layui-layer-max::before { - border-color: #fff; + border-color: #fff; } .layui-layer-easy .layui-layer-setwin .layui-layer-min::before { - background-color: #fff; + background-color: #fff; } .layui-layer-content { - clear: both; + clear: both; } .layui-layer-easy-msg { - min-width: 100px; + min-width: 100px; } .layui-layer-easy-tab .layui-layer-title .layui-this { - color: #333; + color: #333; } .layui-layer-easy-tab .layui-layer-content .layui-layer-tabmain { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } @media screen and (max-width: 1024px) { - .layuimini-form .layui-form-item { - position: relative; - padding: 0 30px 0 0; - line-height: 24px; - } + .layuimini-form .layui-form-item { + position: relative; + padding: 0 30px 0 0; + line-height: 24px; + } } - @media screen and (max-width: 768px) { - .easyadmin-export-btn { - display: none; - } + .easyadmin-export-btn { + display: none; + } } - /** 资源加载锁 */ .easy-load-lock { - cursor: not-allowed; + cursor: not-allowed; } .line-limit-length { - width: 200px; - overflow: hidden; - text-overflow: ellipsis; - background: goldenrod; - white-space: nowrap; + width: 200px; + overflow: hidden; + text-overflow: ellipsis; + background: goldenrod; + white-space: nowrap; } - - - - .search-hide-item { - display: none; + display: none; } .form-item-time-limit .layui-input-inline { - display: flex; - width: 274px; + display: flex; + width: 274px; } .form-item-number-limit .layui-input-inline { - display: flex; + display: flex; } /* 重写地区选择器的样式 */ - .city-picker-span { - height: 38px; - border-width: 1px; - border-style: solid; - background-color: #fff; - color: rgba(0, 0, 0, .85); - border-radius: 2px; - border-color: #eee; + height: 38px; + border-width: 1px; + border-style: solid; + background-color: #fff; + color: rgba(0, 0, 0, 0.85); + border-radius: 2px; + border-color: #eee; } .city-picker-span:hover { - border-color: #eee !important; + border-color: #eee !important; } -.city-picker-span>.placeholder { - padding-left: 10px; +.city-picker-span > .placeholder { + padding-left: 10px; } .city-picker-span.focus, .city-picker-span.open { - border-color: #d2d2d2 !important; + border-color: #d2d2d2 !important; } -[data-toggle="copy-text"].copy-rendered { - cursor: pointer; +[data-toggle=copy-text].copy-rendered { + cursor: pointer; } +.table-tpl-container { + position: absolute; + z-index: 9999999999; + right: 0; + white-space: nowrap; + border: 1px solid #d2d2d2; + text-align: left; + overflow-y: auto; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); +} + +.ul-nav-block .item.current { + background-color: rgb(22, 183, 119); +} + +.ul-nav-block .item:hover { + background-color: rgba(22, 183, 119, 0.7); +} + +.ul-nav-block .item .item-icon { + margin-right: 8; +} + +.ul-nav-block .item { + padding: 8px 18px; +} + +.ul-nav-block { + border-radius: 0; +} @media (max-width: 768px) { - .layuimini-form .layui-form-item { - padding-right: 0; - } - - .layuimini-form .layui-form-item .layui-form-label { - float: unset; - display: inline-block; - width: auto; - padding-left: 0; - padding-bottom: 0px; - } - - .layuimini-form .layui-form-item .layui-input-block { - margin-left: 0; - } - - .layuimini-form.multiple-columns .layui-form-item.full-line { - width: calc(100% - 0px); - } - - .layui-table-tool-temp{ - padding-right: unset; - padding-bottom: 40px; - - } - - .layuimini-container .layui-table-tool-self{ - right: 0; - bottom: 10px; - top: unset; - } + .layuimini-form .layui-form-item { + padding-right: 0; + } + .layuimini-form .layui-form-item .layui-form-label { + float: unset; + display: inline-block; + width: auto; + padding-left: 0; + padding-bottom: 0px; + } + .layuimini-form .layui-form-item .layui-input-block { + margin-left: 0; + } + .layuimini-form.multiple-columns .layui-form-item.full-line { + width: calc(100% - 0px); + } + .layui-table-tool-temp { + padding-right: unset; + padding-bottom: 40px; + } + .layuimini-container .layui-table-tool-self { + right: 0; + bottom: 10px; + top: unset; + } } - .w-e-text-container, .w-e-bar { - border: 1px solid #d2d2d2; - + border: 1px solid #d2d2d2; } \ No newline at end of file diff --git a/public/static/admin/css/public.scss b/public/static/admin/css/public.scss new file mode 100644 index 0000000..e8e6cf4 --- /dev/null +++ b/public/static/admin/css/public.scss @@ -0,0 +1,649 @@ +@import url("../../plugs/layui-v2.9.18/css/layui.css"); +@import url("../../plugs/font-awesome-4.7.0/css/font-awesome.min.css"); +@import url("../css/iconfont.css"); +@import url('../../plugs/jq-module/city-picker/css/city-picker.css'); + +html, +body { + height: 100%; + background: #f2f2f2; +} + +.layuimini-container { + min-height: 250px; + padding: 15px; + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; +} + +.layuimini-main { + position: relative; + padding: 15px 15px; + background-color: #ffffff; + border: 1px solid #f2f2f2; + border-radius: 5px; +} + +.text-center { + text-align: center; +} + +.layuimini-form { + margin-top: 10px; +} + +.layuimini-form .layui-form-item { + position: relative; + padding: 0 60px 0 0; + line-height: 24px; +} + +.layuimini-form.multiple-columns .hr-line { + width: 100%; +} + +.layuimini-form.multiple-columns .hr-line+.layui-form-item { + width: 100%; +} + +.layuimini-form.multiple-columns .layui-form-item { + display: inline-block; + width: calc(50% - 62px); + flex-shrink: 1; +} + +.layuimini-form.multiple-columns .layui-form-item.full-line { + display: block; + width: calc(100% - 62px); +} + + +.easy-bg-white { + background-color: #ffffff; + height: auto; +} + +.hr-line { + color: #fff; + height: 1px; + margin: 30px 0; + background-color: #fff; + border-top: 1px dashed #e7eaec; +} + +/**重写layui表格自适应*/ +.layuimini-container .layui-table-cell { + max-width: 100%; +} + +/**数据表格-搜索表单样式*/ +.layuimini-container .table-search-fieldset { + margin: 0; + border: 1px solid #e6e6e6; + padding: 10px 20px 5px 20px; + color: #6b6b6b; +} + +.layuimini-container .table-search-fieldset input::-webkit-input-placeholder { + color: #a9a9a9; +} + +.layuimini-container .table-search-fieldset input:-ms-input-placeholder { + color: #a9a9a9; +} + +.layuimini-container .table-search-fieldset input::-ms-input-placeholder { + color: #a9a9a9; +} + +/**图标选择器*/ +.layui-iconpicker-body.layui-iconpicker-body-page .hide { + display: none; +} + +/**必填红点 */ +.layuimini-form>.layui-form-item .required:after { + content: '*'; + color: red; + position: absolute; + margin-left: 4px; + font-weight: bold; + line-height: 1.8em; + top: 6px; + right: 5px; +} + +/*.layuimini-form>.layui-form-item>.layui-form-label {width:120px !important;}*/ +/*.layuimini-form>.layui-form-item>.layui-input-block {margin-left:150px !important;}*/ +.layuimini-form>.layui-form-item>.layui-input-block tip, +.layuimini-form>.layui-form-item>.layui-inline tip { + display: inline-block; + margin-top: 10px; + line-height: 15px; + font-size: 10px; + color: #a29c9c; +} + +/** 按钮背景色 */ +.layuimini-container .layuimini-btn-primary { + color: #fff; + background-color: #2c3e50; +} + +.layuimini-container .layui-btn-sm i { + font-size: 12px !important; +} + +/**文件上传样式*/ +.layuimini-upload { + position: relative; +} + +.layuimini-upload .layuimini-upload-btn { + display: inline-block; + position: absolute; + right: 0px; + background-color: #fff; +} + +.layuimini-upload-show { + margin-top: 10px; + margin-bottom: 0; +} + +.layuimini-upload-show li { + position: relative; + display: inline-block; + padding: 5px 0 5px 0; + padding-left: 10px; + padding-right: 10px; + border: 1px solid #e2e2e2; +} + +.layuimini-upload-show a img { + height: 80px; + object-fit: cover; +} + +.layuimini-upload-show .uploads-delete-tip { + position: absolute; + right: 10px; + font-size: 12px; +} + +.bg-red { + background-color: #e74c3c !important; +} + +.color-red { + color: #e74c3c !important; +} + +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 11px; + font-weight: bold; + color: #fff; + line-height: 1; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: #777777; + border-radius: 10px; +} + +/**vue隐藏样式*/ +[v-cloak] { + display: none; +} + +/**表格url样式*/ +.layuimini-table-url { + background-color: #1497f3; + color: #ffffff; + border-radius: 3px; + size: 8px !important; + padding: 2px +} + +.layuimini-table-url:hover { + background-color: #1497f3; + color: #ffffff; + border-radius: 3px; + size: 8px !important; + padding: 2px +} + +/**后台权限隐藏*/ +/*[auth] { display: none; }*/ + +.layui-form-label { + width: 100px; +} + +.layui-input-block { + margin-left: 130px; + min-height: 36px +} + +/** +table样式 + */ +.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em { + border-radius: 30px !important; + background-color: #1e9fff !important; +} + +.layuimini-container .layui-table-tool { + background-color: #ffffff; + border-bottom: none !important; + padding-bottom: 15px !important; +} + +.layuimini-container .layui-table-view { + border: none !important; +} + +.layuimini-container .layui-table-view::after { + content: ""; + display: block; + clear: both; + height: 0; + visibility: hidden; +} + +.layuimini-container .layui-table-box { + border-width: 1px; + border-style: solid; + border-color: #e6e6e6; +} + +.layuimini-container .layui-table-page, +.layui-table-total { + border-width: 0px 0 0; +} + +.layuimini-container .layui-table-box .layui-table-header th { + font-weight: bold !important; + color: #565656 !important; +} + +/** +搜索 + */ +.form-search .layui-btn { + height: 32px; + line-height: 28px; + font-size: 12px; + padding: 0 10px; +} + +.form-search .layui-form-label { + padding: 0 8px; + height: 32px; + line-height: 30px; +} + +.form-search .layui-input-inline { + width: 170px; +} + +.form-search .layui-input-inline input, +.form-search .layui-input-inline select { + width: 100%; + height: 32px; + padding: 2px 8px; + line-height: 1em; + font-size: 12px; +} + +.form-search .layui-form-select dl { + top: 31px; + padding: 0; +} + + +/** +按钮 + */ +.layuimini-container .layui-btn-success { + color: #fff; + background-color: #4bb368; + border-color: #4bb368; +} + +.layuimini-container .layui-btn-danger { + color: #fff; + background-color: #f56c6c; + border-color: #f56c6c; +} + +.layuimini-container .layui-table-tool .layui-btn+.layui-btn { + margin-left: 5px; +} + +.layuimini-container .layui-table-tool .layui-inline[lay-event] { + width: 30px; + height: 30px; + line-height: 30px; + padding: 0px; +} + +.layuimini-container .layui-table-tool .layui-inline .layui-icon { + font-size: 16px; +} + +.layuimini-container .layui-table-tool-self { + right: 0px; +} + +.layuimini-container .layui-table-tool { + padding: 10px 0px; +} + +/* 手机端的表格头部操作 */ +.layuimini-container .main-tool { + padding: 15px; +} + +/** +开关 + */ +.layuimini-container .layui-form-switch { + border: 1px solid #f56d6d; + background-color: #f56d6d; +} + +.layuimini-container .layui-form-switch em { + color: #fff !important; +} + +.layuimini-container .layui-form-switch i { + background-color: #ffffff; +} + +.layuimini-container .layui-form-onswitch { + border-color: #1f9fff; + background-color: #1f9fff; +} + +/** +下拉选择 + */ +.layuimini-container .layui-form-select dl dd.layui-this { + background-color: #1e9fff !important; + color: #fff; +} + +/** +弹出层样式 + */ +.layui-layer-easy .layui-layer-title { + background: #2c3e50 !important; + color: #fff !important; + border-bottom: none; +} + +.layui-layer-easy .layui-layer-title~.layui-layer-setwin>a { + height: 42px; + line-height: 42px; + display: inline-block; +} + +.layui-layer-easy.layui-layer-border { + border: none !important; + box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3) !important; +} + +.layui-layer-easy.layui-layer-iframe { + overflow: visible; +} + +.layui-layer-easy .layui-layer-moves { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} + +.layui-layer-easy .layui-layer-btn { + text-align: center !important; + padding: 10px !important; + background: #ecf0f1; + overflow: hidden; +} + +.layui-layer-easy .layui-layer-btn a { + background-color: #95a5a6; + border-color: #95a5a6; + color: #fff !important; + height: 31px; + margin-top: 0; + border: 1px solid transparent; +} + +.layui-layer-easy .layui-layer-btn .layui-layer-btn0 { + background-color: #1E9FFF; + border-color: #1E9FFF; +} + +.layui-layer-easy .layui-layer-footer { + padding: 8px 20px; + background-color: #ecf0f1; + height: auto; + text-align: inherit !important; +} + +.layui-layer-easy .layui-layer-setwin>span { + color: #fff; +} + +.layui-layer-easy .layui-layer-setwin>a { + background: none !important; +} + +.layui-layer-easy .layui-layer-setwin>a cite { + display: none; +} + +.layui-layer-easy .layui-layer-setwin>a:after { + content: "\e625"; + font-family: iconfont; + font-style: normal; + font-weight: normal; + text-decoration: inherit; + position: absolute; + font-size: 18px; + color: #fff; + margin: 0; + z-index: 1; +} + +.layui-layer-easy .layui-layer-setwin>a:hover { + text-decoration: none !important; + background: none !important; +} + +.layui-layer-easy .layui-layer-setwin>a:focus { + text-decoration: none !important; +} + +.layui-layer-easy .layui-layer-setwin .layui-layer-max::after, +.layui-layer-easy .layui-layer-setwin .layui-layer-max::before { + border-color: #fff; +} + +.layui-layer-easy .layui-layer-setwin .layui-layer-min::before { + background-color: #fff; +} + +.layui-layer-content { + clear: both; +} + +.layui-layer-easy-msg { + min-width: 100px; +} + +.layui-layer-easy-tab .layui-layer-title .layui-this { + color: #333; +} + +.layui-layer-easy-tab .layui-layer-content .layui-layer-tabmain { + margin: 0; + padding: 0; +} + +@media screen and (max-width: 1024px) { + .layuimini-form .layui-form-item { + position: relative; + padding: 0 30px 0 0; + line-height: 24px; + } +} + +@media screen and (max-width: 768px) { + .easyadmin-export-btn { + display: none; + } +} + +/** +资源加载锁 + */ +.easy-load-lock { + cursor: not-allowed; +} + +.line-limit-length { + width: 200px; + overflow: hidden; + text-overflow: ellipsis; + background: goldenrod; + white-space: nowrap; +} + + + + + +.search-hide-item { + display: none; +} + +.form-item-time-limit .layui-input-inline { + display: flex; + width: 274px; +} + +.form-item-number-limit .layui-input-inline { + display: flex; +} + +/* 重写地区选择器的样式 */ + +.city-picker-span { + height: 38px; + border-width: 1px; + border-style: solid; + background-color: #fff; + color: rgba(0, 0, 0, .85); + border-radius: 2px; + border-color: #eee; +} + +.city-picker-span:hover { + border-color: #eee !important; +} + +.city-picker-span>.placeholder { + padding-left: 10px; +} + +.city-picker-span.focus, +.city-picker-span.open { + border-color: #d2d2d2 !important; +} + +[data-toggle="copy-text"].copy-rendered { + cursor: pointer; +} + +.table-tpl-container { + position: absolute; + z-index: 9999999999; + right: 0; + white-space: nowrap; + border: 1px solid #d2d2d2; + text-align: left; + overflow-y: auto; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, .12); + +} + +.ul-nav-block .item.current { + background-color: rgb(22, 183, 119); +} + +.ul-nav-block .item:hover { + background-color: rgb(22, 183, 119, 0.7); +} + +.ul-nav-block .item .item-icon { + margin-right: 8; +} + +.ul-nav-block .item { + padding: 8px 18px; +} +.ul-nav-block{ + border-radius: 0; +} + +.layui-table-custom{ + +} + +@media (max-width: 768px) { + .layuimini-form .layui-form-item { + padding-right: 0; + } + + .layuimini-form .layui-form-item .layui-form-label { + float: unset; + display: inline-block; + width: auto; + padding-left: 0; + padding-bottom: 0px; + } + + .layuimini-form .layui-form-item .layui-input-block { + margin-left: 0; + } + + .layuimini-form.multiple-columns .layui-form-item.full-line { + width: calc(100% - 0px); + } + + .layui-table-tool-temp { + padding-right: unset; + padding-bottom: 40px; + + } + + .layuimini-container .layui-table-tool-self { + right: 0; + bottom: 10px; + top: unset; + } +} + +.w-e-text-container, +.w-e-bar { + border: 1px solid #d2d2d2; + +} \ No newline at end of file diff --git a/public/static/common/js/app.js b/public/static/common/js/app.js index 95a0393..014ad8b 100644 --- a/public/static/common/js/app.js +++ b/public/static/common/js/app.js @@ -39,8 +39,27 @@ loading.hide = function (count) { }; + const tools = {}; + +// 操作本地缓存，实现set和get +tools.setLocal = function (key, value) { + value = JSON.stringify([value]); + return localStorage.setItem(key, value); + +}; + +tools.getLocal = function (key, defaultValue) { + var value = localStorage.getItem(key); + + if (value) { + value = JSON.parse(value)[0]; + return value; + } + return defaultValue; +}; + tools.checkMobile = function () { var userAgentInfo = navigator.userAgent; var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; diff --git a/public/static/plugs/ulthon-admin/ulthon-admin.js b/public/static/plugs/ulthon-admin/ulthon-admin.js index 59f3e35..cd2fb15 100644 --- a/public/static/plugs/ulthon-admin/ulthon-admin.js +++ b/public/static/plugs/ulthon-admin/ulthon-admin.js @@ -1,3 +1,4 @@ + (function () { window.onInitElemStyle = function () { @@ -313,6 +314,19 @@ icon: 'layui-icon-template-1', extend: 'data-table-id="' + options.id + '"' }); + + if (options.layoutDefault === true) { + // 自动判断，手机端默认card，电脑端默认table + if (admin.checkMobile()) { + options.layoutDefault = 'card'; + } else { + options.layoutDefault = 'table'; + } + } + + options.layoutDefault = admin.trySetPageSetting('table-layout-default', options.layoutDefault); + + } if (options.search) { @@ -328,7 +342,13 @@ } - + var optionBefore = function () { }; + if (options.before != undefined) { + optionBefore = options.before; + } + options.before = function (tableIns) { + optionBefore(tableIns); + }; var optionDone = function () { }; if (options.done != undefined) { @@ -336,7 +356,6 @@ } options.done = function (res, curr, count) { optionDone(res, curr, count); - console.log(res, curr, count); // 监听表格内的复制组件 admin.api.copyText('[lay-id=' + options.id + ']'); @@ -718,46 +737,190 @@ } var tableId = options.id; - var elem = options.elem; - console.log(tableId); + var layuiTableElemName = '[lay-table-id="' + tableId + '"]'; + var elem = options.elem; // 初始化参数 - options.labelList = options.layoutList.map((item) => { + options.layoutList = options.layoutList.map((item) => { if (item == 'table') { return { name: 'table', + icon: 'layui-icon layui-icon-table', title: '默认表格', }; - } - if (item == 'card') { + } else if (item == 'card') { return { name: 'card', title: '默认卡片', - 'tplFunction': function (data) { + icon: 'layui-icon layui-icon-form', + tplFunction: function (options, res, container) { + console.log('card func'); + + console.log(options); + console.log(res); + console.log(container); + + var baseItem = ` +
+
+
+ # + +
+
+ +
+
+
+
+ + +
+
+
+
+ +
+
+
+
+
`; + var baseDataItem = ` +
+
+ +
+
+ +
+
`; + + res.data.forEach(row => { + + var rowItem = $.extend(true, {}, row); + + var baseElem = $(baseItem).appendTo(container); + + if (options.cols[0][0].type == 'checkbox' || options.cols[0[0]].type == 'radio') { + $('') + .appendTo(baseElem.find('.header').find('.plus')); + + } + + rowItem.LAY_COL = $.extend(true, {}, options.cols[0][1]); + baseElem.find('.header').find('.main').find('span').html( + options.cols[0][1].templet(rowItem) + ); + + options.cols[0].forEach(LAY_COL => { + var dataItem = $.extend(true, {}, row); + dataItem.LAY_COL = $.extend(true, {}, LAY_COL); + if (LAY_COL.type == 'checkbox' || LAY_COL.type == 'radio') { + return; + } + + if (LAY_COL.templet == ua.table.tool) { + // 暂时隐藏按钮 + // baseElem.find('.footer .plus').html(dataItem.LAY_COL.templet(dataItem)); + return; + } + + if (LAY_COL.field == 'create_time') { + baseElem.find('.footer .main').html(dataItem.LAY_COL.templet(dataItem)); + return; + } + + var baseDataItemElem = $(baseDataItem).appendTo(baseElem.find('.body .main')); + baseDataItemElem.find('.item-title').html( + dataItem.LAY_COL.title + ':' + ); + baseDataItemElem.find('.item-value').html( + dataItem.LAY_COL.templet(dataItem) + ); + }); + + }); + return ''; } }; + } else { + if (item.icon == undefined) { + item.icon = 'layui-icon layui-icon-component'; + } + if (item.title == undefined) { + item.title = item.name; + } } return item; }); + var optionBefore = options.before; + options.before = function (res, curr, count) { + optionBefore(res, curr, count); + console.log('layout before fun'); + + var currentLayout = admin.getPageSetting('table-layout-default', 'table'); + // 隐藏所有数据体内容 + var layuiTableElem = $(layuiTableElemName); + + options.layoutList.forEach((item) => { + if (item.name == 'table') { + layuiTableElem.find('.layui-table-box').hide(); + } else { + layuiTableElem.find('.layui-table-custom.layui-table-custom-' + item.name).hide(); + } + }); + + if (currentLayout == 'table') { + layuiTableElem.find('.layui-table-box').show(); + } else { + var className = '.layui-table-custom.layui-table-custom-' + currentLayout; + // 如果不存在则创建 + if (!layuiTableElem.find(className).length) { + layuiTableElem.find('.layui-table-box').before('
'); + } + layuiTableElem.find(className).show(); + loading.show(); + } + }; + var optionDone = options.done; options.done = function (res, curr, count) { optionDone(res, curr, count); + console.log('layout done fun'); + var currentLayout = admin.getPageSetting('table-layout-default', 'table'); + // 隐藏所有数据体内容 + var layuiTableElem = $(layuiTableElemName); + + options.layoutList.forEach((item) => { + if (currentLayout == 'table') { + // 如果是table，则不用生成数据，显示出来就行，before已经显示过了 + return; + } + + if (currentLayout != item.name) { + // 如果不是，则不进行任何操作 + return; + } + + var className = '.layui-table-custom.layui-table-custom-' + item.name; + + // 清空里面的数据 + layuiTableElem.find(className).html(''); + loading.hide() + + item.tplFunction(options, res, layuiTableElem.find(className)); + + + + + }); }; - // 生成html - var layoutElemId = 'layout-list-option-' + tableId; - // 构建下拉选择 - var layoutHtml = '
'; - - layoutHtml += '
'; - - $(elem).before(layoutHtml); - return options; @@ -1413,7 +1576,10 @@ }, listenToolbar: function (layFilter, tableId) { table.on('toolbar(' + layFilter + ')', function (obj) { + console.log(obj); + var options = obj.config; + var tableId = obj.config.id; // 搜索表单的显示 switch (obj.event) { case 'TABLE_SEARCH': @@ -1426,13 +1592,64 @@ } break; case 'TABLE_LAYOUT': - var searchFieldsetId = 'searchFieldset_' + tableId; - var _that = $("#" + searchFieldsetId); - if (_that.hasClass("layui-hide")) { - _that.removeClass('layui-hide'); - } else { - _that.addClass('layui-hide'); + var layoutElemId = 'layout-list-option-' + tableId; + var layoutElemIdName = '#' + layoutElemId; + + var currentLayout = admin.getPageSetting('table-layout-default', 'table'); + + // 构建下拉选择 + var layoutHtml = '
'; + + options.layoutList.forEach(item => { + var currentClassName = ''; + if (item.name == currentLayout) { + currentClassName = 'current'; + } + layoutHtml += ` +
+
+
${item.title}
+
`; + }); + + layoutHtml += '
'; + + var toolbarLayoutElem = $('[lay-table-id="' + tableId + '"]').find('[lay-event="TABLE_LAYOUT"]'); + if (toolbarLayoutElem.find(layoutElemIdName).length > 0) { + // If it is, remove the HTML + $(layoutElemIdName).remove(); } + layoulElem = $(layoutHtml); + layoulElem.appendTo(toolbarLayoutElem); + + + layoulElem.on('click', function (event) { + + var item = $(event.target).closest('.item'); + if (item.length > 0) { + // 点击操作 + item.addClass('current').siblings().removeClass('current'); + + var layoutName = item.data('name'); + admin.setPageSetting('table-layout-default', layoutName); + + table.reloadData(tableId, {}, true); + } else { + // 其他区域操作 + } + + // 不要冒泡 + event.stopPropagation(); + }); + + // Remove any existing click event listeners to avoid duplicates + $(document).off('click.table-layout').on('click.table-layout', function (event) { + + if (!$(event.target).closest(toolbarLayoutElem).length) { + // If it is, remove the HTML + $(layoutElemIdName).remove(); + } + }); break; } }); @@ -2671,8 +2888,39 @@ pwd += $chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; + }, + getPageSetting(key, defaultValue, global = false) { + if (!global) { + key = window.CONFIG.PAGE_KEY_NAME + '_' + key; + } + return tools.getLocal(key, defaultValue); + }, + setPageSetting(key, value, global) { + if (!global) { + key = window.CONFIG.PAGE_KEY_NAME + '_' + key; + } + return tools.setLocal(key, value); + }, + /** + * 如果不存在则写入，返回有效的值 + * 如果不存在则返回新的值，否则返回之前设置的值 + * + * @param {string} key + * @param {mixed} value + * @param {boolean} global + * @returns + */ + trySetPageSetting(key, value, global) { + var oldValue = admin.getPageSetting(key, undefined, global); + if (!oldValue) { + admin.setPageSetting(key, value, global); + return value; + } + + return oldValue; } }; + window.ulAdmin = window.ua = admin; })(); \ No newline at end of file diff --git a/view/index/welcome.html b/view/index/welcome.html index 36ed3c3..47ea464 100644 --- a/view/index/welcome.html +++ b/view/index/welcome.html @@ -10,8 +10,8 @@ ulthon_admin | 一款基于ThinkPHP8和Layui的快速开发的后台管理框架系统 - - + +