* Add admin to zui3.

This commit is contained in:
wangyuting
2023-06-30 19:54:30 +08:00
parent daec687ae2
commit c646d4871f
3 changed files with 293 additions and 0 deletions
+105
View File
@@ -0,0 +1,105 @@
/* atomic class */
.flex {display: flex;}
.align-center {align-items: center;}
.justify-between {justify-content: space-between;}
.title-color {color: #313C52}
.font-13 {font-size: 13px;}
.border-gray {border: 1px solid #E3E4E9;}
.h-56 {height: 56px;}
.h-40 {height: 40px;}
.pl-16 {padding-left: 16px;}
.px-16 {padding: 0 16px;}
.mb-16 {margin-bottom: 16px;}
.mr-16 {margin-right: 16px;}
.mx-16 {margin: 0 16px;}
.pd-3 {padding: 3px;}
.pb-3 {padding-bottom: 3px;}
.pr-4 {padding-right: 4px;}
.mt-6 {margin-top: 6px;}
.font-18 {font-size: 18px;}
.font-20 {font-size: 20px;}
.font-24 {font-size: 24px;}
.radius-4 {border-radius: 4px;}
.white-nowrap {white-space: nowrap;}
.w-full {width: 100%;}
#notice {margin: -20px -20px 20px; padding: 20px;}
#zentaoLinks {margin-top: 20px;}
#zentaoLinks .panel .panel-heading {padding: 6px 10px;}
.main-content.admin {padding: 0;}
.admin {display: flex; background: unset; box-shadow: none;}
.admin h4 {color: #0B0F18;}
.admin > .main {flex: 1 1 70%;}
.admin > .side {flex: 1 1 30%; margin-left: 16px; padding-right: 16px;}
.panel-title {padding: 10px 0px;}
.panel {padding-left: 16px;}
.settings.panel, .plug.panel {margin-bottom: 16px;}
.main > .panel {padding-right: 8px;}
.settings-list {display: flex; flex-wrap: wrap; padding: 0 4px 16px 4px;}
.settings-list > .setting-box {border: unset; flex: 0 1 20%; padding: 8px;}
.settings-list > .setting-box > button.btn {padding: 5px 10px; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; white-space: unset; text-align: unset; border: 1px solid rgba(227, 228, 233, 0.6)}
.settings-list > .setting-box > .btn:hover {background: unset;}
.settings-list > .setting-box > .btn[disabled] {cursor: not-allowed; pointer-events: unset;}
.settings-list > .setting-box > .btn[disabled] > a,
.settings-list > .setting-box > .btn[disabled] a.setting-help,
.settings-list > .setting-box > .btn[disabled] p.setting-desc {pointer-events: none;}
.settings-list > .setting-box > .btn > h4 {padding-right: 5px;}
.settings-list > .setting-box > .btn > h4 > div {gap: 3px;}
.settings-list > .setting-box > .btn > h4 > img {padding-right: 8px; padding-bottom: 3px; width: 32px; height: 27px;}
.settings-list > .setting-box > .btn > .setting-desc {padding-bottom: 16px; line-height: 25px; height: 50px; overflow: hidden;}
.settings-list.lite-setting > .setting-box {flex: 1 1 30%;}
.plugin-list {display: flex; flex-wrap: wrap; padding: 12px 4px 4px 4px;}
.plugin-list > .plugin-item {flex: 1 1 26%; padding: 16px 10px; border: 1px solid #EDEEF2; border-radius: 4px; margin-right: 10px; margin-bottom: 16px; width: 0px; cursor: pointer;}
.plugin-list > .plugin-item .ext-download {float: right; padding: 6px 0px;}
.plugin-list > .plugin-item > .plug-title {height: 16px; overflow: hidden;}
.plugin-list > .plugin-item .extension-desc {overflow: hidden; height: 16px;}
.bottom.flex > .panel, .side.panel {margin-bottom: 0;}
.bottom.flex > .official {flex: 1 1 30%; margin-right: 16px; padding: 40px 16px 16px 16px; display: flex; flex-direction: column; position: relative;}
.bottom.flex > .publicClass {flex: 1 1 60%;}
.official {justify-content: center;}
.official > .panel-title {position: absolute; top: 0px;}
.official-img {background-image: url('static/images/wechat.jpg'); background-repeat: no-repeat; background-size: contain; flex: 1 1 30%; aspect-ratio: 1 / 1; background-position: center;}
.official-content {flex: 0 0 60%; display: flex; flex-direction: column; padding-left: 10px; padding-top: 15px;}
.official-content > .content {color: #838A9D; font-size: 12px; line-height: 22px; padding-top: 6px;}
.official-content > .title {color: #313C52; font-size: 13px; line-height: 14px;}
.panel-link {color: #313c52; padding-left: 10px; font-size: 13px;}
.panel-link > a {border-bottom: 1px solid;}
.classList > .classItem {flex: 1 1 30%; margin: 5px 5px 16px 5px; border: 1px solid rgba(227, 228, 233, 0.6); border-radius: 4px; padding-bottom: 5px; align-items: center;}
.classItem > .imgBack {flex: 1 1 50%;}
.classItem > .imgBack > .classImg {background-repeat: no-repeat; background-size: contain; aspect-ratio: 16 / 9; background-position: center; margin: 0; border-top-left-radius: 4px; border-top-right-radius: 4px;}
.classItem > .classContent {flex: 1 1 50%; padding: 5px; font-size: 14px; color: #0B0F18; text-align: center; overflow: hidden; height: 24px; margin-bottom: 6px; font-weight: 700;}
.more {float: right; padding-right: 12px; font-weight: normal; color: #9EA3B0;}
.panel.publicClass {padding: 0 10px;}
.icon.follow-us {font-size: 20px; padding-left: 10px;}
.setting-help {color: #9EA3B0; padding-left: 5px;}
.setting-help > a {font-size: 15px;}
[lang^='zh'] .setting-help {padding-top: 0;}
.pointer-none {pointer-events: none;}
/* css for without internet */
.main.without-internet {display: flex; flex-wrap: wrap;}
.main.without-internet > .plug.panel {flex: 1 1 60%; margin-bottom: unset; margin-right: 16px;}
.main.without-internet > .bottom {flex: 1 1 30%;}
.main.without-internet > .bottom > .official.panel {margin-right: unset;}
.main.without-internet > .bottom > .official.panel > .main-panel {flex-direction: row-reverse;}
/* css in side */
#mainContent > .side.panel {height: 100%;}
.time-block {background: #EDEEF2; padding:2px 4px; border-radius: 4px; color: #0B0F18; font-size: 15px; margin: 0 4px;}
.dynamic-block {height: 74px; padding: 12px 16px; display: flex; justify-content: space-between; position: relative; line-height: 20px; border-top: 1px solid #E3E4E9;}
.dynamic-content {height: 50px; line-height: 25px; overflow: hidden;}
.dynamic-time {white-space: nowrap; position: absolute; right: 12px; bottom: 12px; padding-left: 10px; padding-right: 12px; background: white; color: #5E626D;}
.time-count {letter-spacing: 1px;}
.patch-block {padding: 10px 16px 12px; line-height: 20px; border-top: 1px solid #E3E4E9;}
.patch-content {height: 40px; overflow: hidden;}
.upgrade-block {padding: 6px 16px; line-height: 20px; border-top: 1px solid #E3E4E9;}
.upgrade-content {height: 20px; padding-left: 20px; position: relative; margin: 5px 0;}
.upgrade-content:before {content: ' '; width: 8px; height: 8px; background: #E3E4E9; border-radius: 50%; position: absolute; left: 0px; top: 5px;}
+15
View File
@@ -0,0 +1,15 @@
$(function()
{
$(document).on('click', '.setting-box > button', function()
{
location.href = $(this).attr('data-link');
}).on('click', '.setting-box a', function(e)
{
e.stopPropagation();
}).on('click', '.plugin-item', function()
{
window.open($(this).data('link'));
});
if(!hasInternet) $.get(createLink('admin', 'ajaxSetZentaoData'));
});
+173
View File
@@ -0,0 +1,173 @@
<?php
declare(strict_types=1);
/**
* The index view file of admin module of ZenTaoPMS.
* @copyright Copyright 2009-2023 禅道软件(青岛)有限公司(ZenTao Software (Qingdao) Co., Ltd. www.zentao.net)
* @license ZPL(https://zpl.pub/page/zplv12.html) or AGPL(https://www.gnu.org/licenses/agpl-3.0.en.html)
* @author Yuting Wang <wangyuting@easycorp.ltd>
* @package admin
* @link https://www.zentao.net
*/
namespace zin;
jsVar('hasInternet', $zentaoData->hasData);
?>
<?php $app->control->loadModel('admin')->setMenu();?>
<div id='mainContent' class='main-content admin'>
<div class="main <?php if(!$zentaoData->hasData) echo 'without-internet';?>">
<div class="settings panel">
<div class="panel-title mt-6"><?php echo $lang->admin->setting?></div>
<div class="settings-list <?php if($config->vision == 'lite') echo 'lite-setting';?>">
<?php foreach($lang->admin->menuList as $menuKey => $menu):?>
<?php if($config->vision == 'lite' and !in_array($menuKey, $config->admin->liteMenuList)) continue;?>
<div class="setting-box" <?php if($menu['disabled']) echo "title={$lang->admin->noPriv}";?> data-id="<?php echo $menuKey;?>">
<button class="btn shadow-primary-hover" <?php if($menu['disabled']) echo 'disabled';?> onclick="openUrl('<?php echo $menu['link']?>');">
<h4 class="flex align-center w-full">
<div class="flex align-center">
<img src="static/svg/admin-<?php echo $menuKey;?>.svg"/>
<?php echo $menu['name'];?>
</div>
<?php echo html::a($config->admin->helpURL[$menuKey], "<i title='{$lang->help}' class='icon icon-help'></i> ", '_blank', 'class="text-muted setting-help" onclick="window.event.cancelBubble=true;"');?>
</h4>
<p class="text-muted setting-desc" title="<?php echo $menu['desc'];?>"><?php echo $menu['desc'];?></p>
</button>
</div>
<?php endforeach;?>
</div>
</div>
<?php if($zentaoData->plugins):?>
<div class="plug panel">
<div class="panel-title">
<?php echo $lang->admin->pluginRecommendation;?>
<?php echo html::a($config->admin->extensionURL, "{$lang->more} <i class='icon icon-caret-right'></i>", '_blank', 'class="more text-muted flex align-center"');?>
</div>
<div class="plugin-list" <?php if($langNotCN) echo 'style="flex-wrap: nowrap"';?>>
<?php foreach($zentaoData->plugins as $plugin):?>
<?php $pluginDesc = preg_replace('/[[:cntrl:]]/mu', '', strip_tags($plugin->abstract));?>
<div class="plugin-item shadow-primary-hover" onclick="window.open('<?php echo $plugin->viewLink;?>')">
<span class='ext-download'><i class='icon icon-download-alt text-primary bg-primary-100 pd-3'></i></span>
<h4 class="plug-title" title="<?php echo $plugin->name;?>"><?php echo $plugin->name;?></h4>
<p class='extension-desc text-muted' title="<?php echo $pluginDesc;?>"><?php echo $pluginDesc;?></p>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif;?>
<?php if(!$langNotCN):?>
<div class="flex bottom">
<div class="panel official">
<div class="panel-title"><?php echo $lang->admin->officialAccount?></div>
<div class="flex main-panel">
<div class="official-img"></div>
<div class="official-content">
<div class="title">
<?php echo $lang->admin->followUs?>
<?php if(!$zentaoData->hasData):?>
<i class="icon follow-us icon-arrow-right text-primary"></i>
<?php endif;?>
</div>
<div class="content"> <?php echo $lang->admin->followUsContent?></div>
</div>
</div>
<?php if(!$bind and !$ignore and $zentaoData->hasData and common::hasPriv('admin', 'register')):?>
<div class="panel-link"> <?php echo sprintf($lang->admin->notice->register, html::a(inlink('register'), $lang->admin->registerNotice->submitHere, '', 'class="text-primary"'));?></div>
<?php endif;?>
</div>
<?php if($zentaoData->classes):?>
<div class="panel publicClass">
<div class="panel-title">
<?php echo $lang->admin->publicClass;?>
<?php echo html::a($config->admin->classURL, "{$lang->more} <i class='icon icon-caret-right'></i>", '_blank', 'class="more text-muted flex align-center"');?>
</div>
<div class="classList flex">
<?php foreach($zentaoData->classes as $class):?>
<a class="classItem shadow-primary-hover" href='<?php echo $class->viewLink;?>' target='_blank'>
<div class="imgBack">
<div class="classImg" style="background-image: url('<?php echo $class->image;?>');"></div>
</div>
<div class="classContent"><?php echo $class->name;?></div>
</a>
<?php endforeach;?>
</div>
</div>
<?php endif;?>
<?php endif;?>
</div>
</div>
<?php if($zentaoData->hasData and !$langNotCN):?>
<div class="side panel" style="background: #FCFDFE">
<div class="h-56 flex align-center justify-between">
<div class="panel-title"><?php echo $lang->admin->zentaoInfo?></div>
<div class="time-count">
<?php echo $lang->admin->zentaoUsed;?>
<?php if($dateUsed->year):?>
<span class="time-block"><?php echo $dateUsed->year;?></span><?php echo $lang->year;?>
<?php endif;?>
<?php if($dateUsed->month):?>
<span class="time-block"><?php echo $dateUsed->month;?></span><?php echo $lang->admin->mon;?>
<?php endif;?>
<span class="time-block"><?php echo $dateUsed->day;?></span><?php echo $lang->admin->day;?>
</div>
</div>
<div class="border-gray mb-16 radius-4">
<div class="h-40 pl-16 flex align-center justify-between">
<div class="panel-title"><?php echo $lang->admin->updateDynamics?></div>
<?php echo html::a($config->admin->dynamicURL, "{$lang->more} <i class='icon icon-caret-right pb-3'></i>", '_blank', 'class="more text-muted flex align-center"');?>
</div>
<?php foreach($zentaoData->dynamics as $dynamic):?>
<div class="dynamic-block">
<div class="dynamic-content" title=<?php echo $dynamic->title ?>><i class="icon icon-horn text-primary pr-4 font-20"></i><?php echo html::a($dynamic->link, $dynamic->title, '_blank');?></div>
<div class="dynamic-time"><?php echo substr($dynamic->addedDate, 0, 10);?></div>
</div>
<?php endforeach;?>
</div>
<div class="border-gray mb-16 radius-4">
<div class="h-40 pl-16 flex align-center justify-between">
<div class="panel-title"><?php echo $lang->admin->updatePatch?></div>
<?php echo html::a($config->admin->patchURL, "{$lang->more} <i class='icon icon-caret-right pb-3'></i>", '_blank', 'class="more text-muted flex align-center"');?>
</div>
<?php foreach($zentaoData->patches as $patch):?>
<div class="patch-block">
<div class="title flex justify-between">
<div class="panel-title"><?php echo $patch->name?></div>
<a href="<?php echo $patch->viewLink;?>" class='ext-download flex align-center' target='_blank'><i class='icon icon-download-alt text-primary bg-primary-100 pd-3'></i></a>
</div>
<div class="patch-content"><?php echo $patch->desc?></div>
</div>
<?php endforeach;?>
</div>
<?php if($config->edition != 'max'):?>
<div class="border-gray mb-16 radius-4">
<div class="h-40 pl-16 flex align-center justify-between">
<div class="panel-title"><?php echo $lang->admin->upgradeRecommend?></div>
</div>
<?php if($config->edition != 'biz'):?>
<div class="upgrade-block">
<a class="title text-primary flex justify-between" href="<?php echo $config->admin->apiRoot;?>" target="_blank">
<div class="panel-title"><i class="icon icon-zentao text-primary pr-4 font-18"></i><?php echo $lang->admin->bizTag?></div>
<div class="flex align-center"><div><?php echo $lang->admin->productDetail?></div><i class="icon icon-caret-right text-primary pb-3"></i></div>
</a>
<?php foreach($lang->admin->productFeature['biz'] as $feature):?>
<div class="upgrade-content color-gray"><?php echo $feature;?></div>
<?php endforeach;?>
</div>
<?php endif;?>
<div class="upgrade-block">
<a class="title text-primary flex justify-between" href='<?php echo $config->admin->apiRoot;?>' target="_blank">
<div class="panel-title"><i class="icon icon-zentao text-primary pr-4 font-18"></i><?php echo $lang->admin->maxTag?></div>
<div class="flex align-center"><div><?php echo $lang->admin->productDetail?></div><i class="icon icon-caret-right text-primary pb-3"></i></div>
</a>
<?php foreach($lang->admin->productFeature['max'] as $feature):?>
<div class="upgrade-content color-gray"><?php echo $feature;?></div>
<?php endforeach;?>
</div>
</div>
<?php endif;?>
</div>
<?php endif;?>
</div>
<?php
rawContent();
render();