From b3b19062691b4ca44abeca417726607fb7e2a65e Mon Sep 17 00:00:00 2001 From: dingyongliang Date: Wed, 21 Jun 2023 16:12:03 +0800 Subject: [PATCH] * modulemenu: refactor. --- lib/zin/wg/modulemenu/css/v1.css | 16 +---- lib/zin/wg/modulemenu/v1.php | 112 +++++++++++++++++++------------ 2 files changed, 71 insertions(+), 57 deletions(-) diff --git a/lib/zin/wg/modulemenu/css/v1.css b/lib/zin/wg/modulemenu/css/v1.css index d80a5dc204..18253c1b22 100644 --- a/lib/zin/wg/modulemenu/css/v1.css +++ b/lib/zin/wg/modulemenu/css/v1.css @@ -1,13 +1,3 @@ -.module-menu {max-height: calc(100vh - 105px); display: flex; flex-direction: column; border-radius: 2px;} -.module-menu > header {height: 40px; display: flex; align-items: center; padding-left: 12px; flex: none;} -.module-menu .module-title {font-size: 13; line-height: 20px; font-weight: bold;} -.module-menu > header span {margin-right: 12px;} -.module-menu > header i {padding: 2px;} -.module-menu > main {display: flex; flex: 1 1 auto; overflow-y: auto; flex-direction: column;} -.module-menu > main > .menu {border: none; box-shadow: none; flex: 1 1 auto; overflow-y: auto;} -.module-menu .menu-item > a:hover {background: #EFF5FF; color: #313C52;} -.module-menu, -.module-menu .has-nested-menu > .menu.menu-nested {background-color: #fff;} -.module-menu .menu {padding: 0;} -.module-menu .menu-item.active {color: #2e7fff;} -.setting-btns {display: flex; flex-direction: column; padding: 10px 30px; gap: 8px;} +.module-menu {max-height: calc(100vh - 105px);} +.module-menu .active {color: var(--color-primary-600); font-weight: 500;} +.module-menu header a:hover > .icon {color: var(--color-primary-600) !important;} diff --git a/lib/zin/wg/modulemenu/v1.php b/lib/zin/wg/modulemenu/v1.php index 592f0fb86f..0ba10e03fb 100644 --- a/lib/zin/wg/modulemenu/v1.php +++ b/lib/zin/wg/modulemenu/v1.php @@ -8,12 +8,12 @@ class moduleMenu extends wg protected static $defineProps = array( 'modules: array', - 'activeKey: int', - 'settingLink: string', + 'activeKey?: int', + 'settingLink?: string', 'closeLink: string', - 'activeText: string=""', - 'branchType: string=""', - 'showDisplay: bool=true' + 'branchType?: string=""', + 'showDisplay?: bool=true', + 'allText?: string' ); public static function getPageCSS(): string|false @@ -26,9 +26,17 @@ class moduleMenu extends wg $children = $this->getChildModule($parentID); if(count($children) === 0) return []; + $activeKey = $this->prop('activeKey'); + foreach($children as $child) { - $item = array('key' => $child->id, 'text' => $child->name, 'url' => $child->url, 'items' => []); + $item = array( + 'key' => $child->id, + 'text' => $child->name, + 'url' => $child->url, + 'items' => array(), + 'active' => $child->id == $activeKey, + ); $items = $this->buildMenuTree($item['items'], $child->id); if(count($items) !== 0) $item['items'] = $items; else unset($item['items']); @@ -45,18 +53,27 @@ class moduleMenu extends wg private function setMenuTreeProps(): void { $this->modules = $this->prop('modules'); - $this->setProp('items', $this->buildMenuTree([], 0)); - $this->setDefaultProps(array('activeClass' => 'active')); + $this->setProp('items', $this->buildMenuTree(array(), 0)); } - private function getTitle($activeKey): string + private function getTitle(): string { + global $lang; + $activeKey = $this->prop('activeKey'); + + if(empty($activeKey)) + { + $allText = $this->prop('allText'); + if(empty($allText)) return $lang->all; + return $allText; + } + foreach($this->modules as $module) { if($module->id == $activeKey) return $module->name; } - return $this->prop('activeText'); + return ''; } private function buildBtns() @@ -75,58 +92,65 @@ class moduleMenu extends wg return div ( - setClass('setting-btns'), - $settingLink ? a - ( - setClass('btn'), - setStyle('background', '#EEF5FF'), - setStyle('box-shadow', 'none'), - set::href($settingLink), - $lang->moduleSetting - ) : null, - $showDisplay ? - a( + setClass('col gap-2 py-3 px-7'), + $settingLink + ? a + ( + setClass('btn'), + setStyle('background', '#EEF5FF'), + setStyle('box-shadow', 'none'), + set::href($settingLink), + $lang->moduleSetting + ) + : null, + $showDisplay + ? a + ( setClass('btn white'), - set::href(helper::createLink('datatable', 'ajaxDisplay', "datatableId=$datatableId&moduleName=$app->moduleName&methodName=$app->methodName¤tModule=$currentModule¤tMethod=$currentMethod&branchType=$branchType")), set('data-toggle', 'modal'), + set::href(helper::createLink('datatable', 'ajaxDisplay', "datatableId=$datatableId&moduleName=$app->moduleName&methodName=$app->methodName¤tModule=$currentModule¤tMethod=$currentMethod&branchType=$branchType")), $lang->displaySetting ) - : null, + : null, + ); + } + + private function buildCloseBtn() + { + $activeKey = $this->prop('activeKey'); + if(empty($activeKey)) return null; + + return a + ( + set('href', $this->prop('closeLink')), + icon('close', setStyle('color', 'var(--color-slate-600)')) ); } protected function build(): wg { $this->setMenuTreeProps(); - $activeKey = $this->prop('activeKey'); - $title = $this->getTitle($activeKey); - $closeBtn = null; - if(!empty($activeKey)) - { - $closeBtn = a - ( - set('href', $this->prop('closeLink')), - h::i - ( - setClass('icon icon-close'), - setStyle('color', '#313C52') - ) - ); - } + $title = $this->getTitle(); + return div ( - setClass('module-menu rounded shadow-sm'), - $title ? h::header + setClass('module-menu rounded shadow-sm bg-white col rounded-sm'), + h::header ( + setClass('h-10 flex items-center pl-4 flex-none gap-3'), span ( - setClass('module-title'), + setClass('module-title text-lg font-semibold'), $title ), - $closeBtn - ) : null, - h::main(zui::tree(set($this->props->pick(array('items', 'activeClass', 'activeIcon', 'activeKey', 'onClickItem', 'defaultNestedShow', 'changeActiveKey', 'isDropdownMenu'))))), + $this->buildCloseBtn(), + ), + h::main + ( + setClass('col flex-auto of-y-auto pl-4'), + zui::tree(set($this->props->pick(array('items', 'activeClass', 'activeIcon', 'activeKey', 'onClickItem', 'defaultNestedShow', 'changeActiveKey', 'isDropdownMenu')))) + ), $this->buildBtns(), ); }