* modulemenu: refactor.

This commit is contained in:
dingyongliang
2023-06-21 16:12:11 +08:00
parent f60325ed60
commit b3b1906269
2 changed files with 71 additions and 57 deletions
+3 -13
View File
@@ -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;}
+68 -44
View File
@@ -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&currentModule=$currentModule&currentMethod=$currentMethod&branchType=$branchType")),
set('data-toggle', 'modal'),
set::href(helper::createLink('datatable', 'ajaxDisplay', "datatableId=$datatableId&moduleName=$app->moduleName&methodName=$app->methodName&currentModule=$currentModule&currentMethod=$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(),
);
}