From 4b78f1e86e43a579367268be46bf792f511335dd Mon Sep 17 00:00:00 2001 From: wangyuting Date: Mon, 15 May 2023 11:12:14 +0800 Subject: [PATCH] * Finish rookie guide block. --- module/block/css/guideblock.ui.css | 40 +++++++ module/block/lang/de.php | 2 +- module/block/lang/en.php | 2 +- module/block/lang/fr.php | 2 +- module/block/lang/zh-cn.php | 2 +- module/block/ui/downloadclient.html.php | 71 +++++++++++ module/block/ui/downloadmobile.html.php | 52 ++++++++ module/block/ui/flowchart.html.php | 47 ++++++++ module/block/ui/guideblock.html.php | 113 ++++++++++++++++++ module/block/ui/preference.html.php | 86 +++++++++++++ .../block/ui/productstatisticblock.html.php | 6 +- module/block/ui/systemmode.html.php | 56 +++++++++ module/block/ui/themeswitch.html.php | 67 +++++++++++ module/block/ui/visionswitch.html.php | 62 ++++++++++ 14 files changed, 600 insertions(+), 8 deletions(-) create mode 100644 module/block/css/guideblock.ui.css create mode 100644 module/block/ui/downloadclient.html.php create mode 100644 module/block/ui/downloadmobile.html.php create mode 100644 module/block/ui/flowchart.html.php create mode 100644 module/block/ui/guideblock.html.php create mode 100644 module/block/ui/preference.html.php create mode 100644 module/block/ui/systemmode.html.php create mode 100644 module/block/ui/themeswitch.html.php create mode 100644 module/block/ui/visionswitch.html.php diff --git a/module/block/css/guideblock.ui.css b/module/block/css/guideblock.ui.css new file mode 100644 index 0000000000..152dd0dab0 --- /dev/null +++ b/module/block/css/guideblock.ui.css @@ -0,0 +1,40 @@ +.guide-block {background: #FCFDFE} + +.guide-block .tab-content {width: 100%;} +.guide-block .tab-pane {padding: 0;} +.guide-block .bg-secondary-pale {background: #F3F6FA;} + +.guide-block .nav-tabs .nav-item {height:36px; line-height: 36px;} +.guide-block .nav-tabs .nav-item:hover {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;} +.guide-block .nav-tabs .nav-item.active {border-left: 2px solid #2E7FFF; background-color: #FCFDFE;} +.guide-block .nav-tabs .nav-item > a {color: #5E626D;} +.guide-block .nav-tabs .nav-item > a:before {background: transparent;} +.guide-block .nav-tabs .nav-item.active > a {color: #0B0F18;} +.guide-block .nav-tabs .nav-item:hover > a {color: #0B0F18;} +.guide-block .nav-tabs .nav-item:hover > span.link {display: flex!important;} + +.guide-block .flowchart .flow-chart-row {display: flex; gap: 5px; margin-bottom: 9px; width: 100%;} +.guide-block .flowchart .flow-item {background: url('static/svg/arrow-blue.svg') center no-repeat; background-size: cover; text-align: center; margin: 0; padding-right: 15px; flex:0 1 15%; position: relative; padding: 5px 0 5px 12px; white-space:nowrap; overflow: hidden; color: #3c4353; display: flex; align-items: center; text-align: center; padding-right: 10px;} +.guide-block .flowchart .ie-8 .flow-item > div:before {display: none;} +.guide-block .flowchart .flow-item > div:before {border-left-color: #fff; z-index: 1;} +.guide-block .flowchart .flow-item > div > div {display: flow-root; overflow: hidden;}.ie-8 .flow-item > div {margin-right: 10px}.flow-item-0 > div {color: #FFF; font-weight: 400;} +.guide-block .flowchart .flow-item-0 > div:before {display: none;} +.guide-block .flowchart {.flow-item-1, .flow-item-2, .flow-item-3, .flow-item-4, .flow-item-5 {background-image: url('static/svg/arrow-white.svg');}} +.guide-block .flowchart .flow-item-display {overflow: hidden; white-space:nowrap; text-overflow: clip; font-size: 12px;} + +.guide-block .theme-switch div.theme-default {color: #3785ff;} +.guide-block .theme-switch div.theme-blue {color: #2b80ff;} +.guide-block .theme-switch div.theme-green {color: #248f83;} +.guide-block .theme-switch div.theme-red {color: #f34a5a;} +.guide-block .theme-switch div.theme-pink {color: #f7889c;} +.guide-block .theme-switch div.theme-blackberry {color: #304269;} +.guide-block .theme-switch div.theme-classic {color: #114f8e;} +.guide-block .theme-switch div.theme-purple {color: #9958dc;} +.guide-block .theme-switch .block.active i.icon-check-circle {display: inline!important;} + +.guide-block .download-client .avatar > img {object-fit: revert;} + +.guide-block .block {background: rgba(230, 240, 255, 0.4);} +.guide-block .block:hover {box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);} +.guide-block .block.active {box-shadow: 0 0 0 2px #2E7FFF; border-radius: 2px;} + diff --git a/module/block/lang/de.php b/module/block/lang/de.php index fb6b170dbd..dd771e58e6 100644 --- a/module/block/lang/de.php +++ b/module/block/lang/de.php @@ -682,7 +682,7 @@ $lang->block->guideTabs['visionSwitch'] = 'Interface Switch'; $lang->block->guideTabs['themeSwitch'] = 'Theme Switch'; $lang->block->guideTabs['preference'] = 'Personalized setting'; $lang->block->guideTabs['downloadClient'] = 'Desktop Client download'; -$lang->block->guideTabs['downloadMoblie'] = 'Mobile Apps download'; +$lang->block->guideTabs['downloadMobile'] = 'Mobile Apps download'; $lang->block->themes['default'] = 'Default'; $lang->block->themes['blue'] = 'Young Blue'; diff --git a/module/block/lang/en.php b/module/block/lang/en.php index 597968f591..6f63223113 100644 --- a/module/block/lang/en.php +++ b/module/block/lang/en.php @@ -682,7 +682,7 @@ $lang->block->guideTabs['visionSwitch'] = 'Interface Switch'; $lang->block->guideTabs['themeSwitch'] = 'Theme Switch'; $lang->block->guideTabs['preference'] = 'Personalized setting'; $lang->block->guideTabs['downloadClient'] = 'Desktop Client download'; -$lang->block->guideTabs['downloadMoblie'] = 'Mobile Apps download'; +$lang->block->guideTabs['downloadMobile'] = 'Mobile Apps download'; $lang->block->themes['default'] = 'Default'; $lang->block->themes['blue'] = 'Young Blue'; diff --git a/module/block/lang/fr.php b/module/block/lang/fr.php index 2414d04bcf..d74cb106a1 100644 --- a/module/block/lang/fr.php +++ b/module/block/lang/fr.php @@ -682,7 +682,7 @@ $lang->block->guideTabs['visionSwitch'] = 'Interface Switch'; $lang->block->guideTabs['themeSwitch'] = 'Theme Switch'; $lang->block->guideTabs['preference'] = 'Personalized setting'; $lang->block->guideTabs['downloadClient'] = 'Desktop Client download'; -$lang->block->guideTabs['downloadMoblie'] = 'Mobile Apps download'; +$lang->block->guideTabs['downloadMobile'] = 'Mobile Apps download'; $lang->block->themes['default'] = 'Default'; $lang->block->themes['blue'] = 'Young Blue'; diff --git a/module/block/lang/zh-cn.php b/module/block/lang/zh-cn.php index 9f73d4820e..6c65998b44 100644 --- a/module/block/lang/zh-cn.php +++ b/module/block/lang/zh-cn.php @@ -682,7 +682,7 @@ $lang->block->guideTabs['visionSwitch'] = '界面切换'; $lang->block->guideTabs['themeSwitch'] = '主题切换'; $lang->block->guideTabs['preference'] = '个性化设置'; $lang->block->guideTabs['downloadClient'] = '客户端下载'; -$lang->block->guideTabs['downloadMoblie'] = '移动端下载'; +$lang->block->guideTabs['downloadMobile'] = '移动端下载'; $lang->block->themes['default'] = '禅道蓝'; $lang->block->themes['blue'] = '青春蓝'; diff --git a/module/block/ui/downloadclient.html.php b/module/block/ui/downloadclient.html.php new file mode 100644 index 0000000000..22ebb8f232 --- /dev/null +++ b/module/block/ui/downloadclient.html.php @@ -0,0 +1,71 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 展示客户端下载页面。 + * Print client download page. + */ +function printDownloadClient() +{ + global $lang, $config; + + $downloads = array(); + foreach($lang->block->zentaoclient->edition as $edition => $editionName) + { + $downloads[] = cell + ( + set('class', 'py-6 px-2 border'), + a + ( + set('class', 'flex leading-6'), + set('data-toggle', 'modal'), + set('href', helper::createLink('misc', 'downloadClient', "action=getPackage&os=$edition")), + span + ( + set('class', 'avatar rounded-full flex-none size-sm has-img mr-2'), + img(set('src', $config->webRoot . "theme/default/images/guide/edition_{$edition}.png"), set('class', 'inline p-1.5')) + ), + span($editionName), + ) + ); + } + + return div + ( + set('class', 'download-client p-4'), + div + ( + div(span($lang->block->zentaoclient->common)), + div(span(set('class', 'text-sm text-gray'), $lang->block->zentaoclient->desc)), + div + ( + set('class','flex py-4'), + cell + ( + set('width', '25%'), + div + ( + set('class', 'flex col'), + $downloads + ) + ), + cell + ( + set('class', 'ml-4'), + set('width', '75%'), + img(set('src', $config->webRoot . 'theme/default/images/guide/' . (common::checkNotCN() ? 'client_en.png' : 'client_cn.png')), set('class', 'h-56')) + ) + ) + ) + ); +} diff --git a/module/block/ui/downloadmobile.html.php b/module/block/ui/downloadmobile.html.php new file mode 100644 index 0000000000..9707f049c8 --- /dev/null +++ b/module/block/ui/downloadmobile.html.php @@ -0,0 +1,52 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 展示移动端下载页面。 + * Print app download page. + */ +function printDownloadMobile() +{ + global $lang, $config; + + return div + ( + set('class', 'download-client p-4'), + div + ( + div(span($lang->block->zentaoapp->common)), + div(span(set('class', 'text-sm text-gray'), $lang->block->zentaoapp->desc)), + div + ( + set('class','flex py-4'), + cell + ( + set('width', '67%'), + div + ( + set('class', 'flex'), + div(img(set('src', $config->webRoot . 'theme/default/images/guide/app_index.png')), set('class', 'flex-1 pr-2')), + div(img(set('src', $config->webRoot . 'theme/default/images/guide/app_execution.png')), set('class', 'flex-1 pr-2')), + div(img(set('src', $config->webRoot . 'theme/default/images/guide/app_statistic.png')), set('class', 'flex-1 pr-2')), + ) + ), + cell + ( + set('width', '32%'), + div(img(set('src', $config->webRoot . 'theme/default/images/main/mobile_qrcode.png'))), + div(span($lang->block->zentaoapp->downloadTip)) + ) + ) + ) + ); +} diff --git a/module/block/ui/flowchart.html.php b/module/block/ui/flowchart.html.php new file mode 100644 index 0000000000..74f77e4898 --- /dev/null +++ b/module/block/ui/flowchart.html.php @@ -0,0 +1,47 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 展示流程图。 + * Print flow chart. + */ +function printFlowchart() +{ + global $lang; + + $charts = array(); + foreach($lang->block->flowchart as $flowName => $flow) + { + $items = array(); + $index = 0; + foreach ($flow as $flowItem) + { + $items[] = div + ( + set('class', 'flow-item flow-item-' . $index++), + div + ( + set('class', 'flow-item-display'), + $flowItem + ) + ); + } + $charts[] = div + ( + set('class', 'row flow-chart-row row-' . $flowName), + $items + ); + } + + return div(set('class', 'flowchart p-6'), $charts); +} diff --git a/module/block/ui/guideblock.html.php b/module/block/ui/guideblock.html.php new file mode 100644 index 0000000000..a8c236a583 --- /dev/null +++ b/module/block/ui/guideblock.html.php @@ -0,0 +1,113 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 获取区块左侧的帮助列表。 + * Get guide tabs on the left side. + * + * @param string $blockNavCode + * @return array + */ +function getGuideTabs(string $blockNavCode): array +{ + global $lang, $config, $app; + + $navTabs = array(); + $selected = key($lang->block->guideTabs); + foreach($lang->block->guideTabs as $tab => $tabName) + { + //if(strpos($tab, 'download') !== false && (!isset($config->xxserver->installed) || !$config->xuanxuan->turnon)) continue; + //if($tab == 'downloadMoblie' && common::checkNotCN()) continue; + //if(($tab == 'preference' || $tab == 'systemMode') && $config->vision == 'lite') continue; + //if($tab == 'systemMode' && !common::hasPriv('custom', 'mode')) continue; + //if($tab == 'preference' && !common::hasPriv('my', 'preference')) continue; + //if($tab == 'visionSwitch' && !strpos($app->user->visions, ',')) continue; + + $navTabs[] = li + ( + set('class', 'nav-item w-full' . ($tab == $selected ? ' active' : '')), + a + ( + set('class', 'ellipsis text-dark'), + set('data-toggle', 'tab'), + set('href', "#tab{$blockNavCode}Content{$tab}"), + $tabName + ), + span + ( + set('class', 'link flex-1 text-right px-4 hidden'), + icon + ( + set('class', 'text-primary'), + 'arrow-right' + ) + ) + ); + } + return $navTabs; +} + +/** + * 获取区块右侧显示的帮助信息。 + * Get guide information. + * + * @param string $blockNavCode + * @return array + */ +function getGuideInfo($blockNavID): array +{ + global $lang; + + $selected = key($lang->block->guideTabs); + $tabItems = array(); + foreach($lang->block->guideTabs as $tab => $tabName) + { + include_once (strtolower($tab) . '.html.php'); + $function = '\zin\print' . ucfirst($tab); + $tabItems[] = div + ( + set('class', 'tab-pane h-full' . ($tab == $selected ? ' active' : '')), + set('id', "tab{$blockNavID}Content{$tab}"), + $function() + ); + } + return $tabItems; +} + +$blockNavCode = 'nav-' . uniqid(); +div +( + set('class', 'guide-block of-hidden'), + div + ( + set('class', 'flex h-full'), + cell + ( + set('width', '22%'), + set('class', 'bg-secondary-pale'), + ul + ( + set('class', 'nav nav-tabs nav-stacked h-full of-y-auto of-x-hidden'), + getGuideTabs($blockNavCode) + ), + ), + cell + ( + set('class', 'tab-content'), + set('width', '78%'), + getGuideInfo($blockNavCode) + ) + ) +); + +render(); diff --git a/module/block/ui/preference.html.php b/module/block/ui/preference.html.php new file mode 100644 index 0000000000..869bd718bd --- /dev/null +++ b/module/block/ui/preference.html.php @@ -0,0 +1,86 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 展示个性化设置页面。 + * Print preference page. + */ +function printPreference() +{ + global $lang, $config; + + return div + ( + set('class', 'p-6'), + form + ( + set::labelWidth('8rem'), + set::actions(array('submit')), + formGroup + ( + set::value($URSR), + set::label($lang->my->storyConcept), + set::name('URSR'), + set::control(array + ( + 'type' => 'select', + 'items' => $URSRList + )) + ), + $config->systemMode == 'ALM' ? formGroup + ( + set::value($programLink), + set::label($lang->my->programLink), + set::name('programLink'), + set::control(array + ( + 'type' => 'select', + 'items' => $lang->my->programLinkList + )) + ) : null, + formGroup + ( + set::value($productLink), + set::label($lang->my->productLink), + set::name('productLink'), + set::control(array + ( + 'type' => 'select', + 'items' => $lang->my->productLinkList + )) + ), + formGroup + ( + set::value($projectLink), + set::label($lang->my->projectLink), + set::name('projectLink'), + set::control(array + ( + 'type' => 'select', + 'items' => $lang->my->projectLinkList + )) + ), + formGroup + ( + set::value($executionLink), + set::label($lang->my->executionLink), + set::name('executionLink'), + set::control(array + ( + 'type' => 'select', + 'items' => $lang->my->executionLinkList + )) + ) + ) + ); +} diff --git a/module/block/ui/productstatisticblock.html.php b/module/block/ui/productstatisticblock.html.php index 3a24d771d2..42a9edc030 100644 --- a/module/block/ui/productstatisticblock.html.php +++ b/module/block/ui/productstatisticblock.html.php @@ -13,13 +13,12 @@ namespace zin; $app->loadLang('execution'); /** - * 获取区块左侧的产品列表. + * 获取区块左侧的产品列表。 * Get product tabs on the left side. * * @param array $products * @param string $blockNavCode * @param bool $longBlock - * @access public * @return array */ function getProductTabs(array $products, string $blockNavCode, bool $longBlock): array @@ -71,13 +70,12 @@ function getProductTabs(array $products, string $blockNavCode, bool $longBlock): } /** - * 获取区块右侧显示的产品信息. + * 获取区块右侧显示的产品信息。 * Get product statistical information. * * @param array $products * @param string $blockNavID * @param bool $longBlock - * @access public * @return array */ function getProductInfo(array $products, string $blockNavID, bool $longBlock): array diff --git a/module/block/ui/systemmode.html.php b/module/block/ui/systemmode.html.php new file mode 100644 index 0000000000..2e9b35016e --- /dev/null +++ b/module/block/ui/systemmode.html.php @@ -0,0 +1,56 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +function printSystemMode() +{ + global $lang, $config; + + $modes = array(); + $usedMode = zget($config->global, 'mode', 'light'); + foreach($lang->block->customModes as $mode => $modeName) + { + $modes[] = cell + ( + set('class', 'flex-1 block mr-4 ' . ($usedMode == $mode ? 'active' : '')), + div + ( + set('class', 'w-full state'), + img + ( + set('class', 'p-4'), + set('src', $config->webRoot . "theme/default/images/guide/{$mode}_" . (common::checkNotCN() ? 'en' : 'cn') . ".png") + ), + div + ( + set('class', 'px-4 pb-2'), + div(set('class', 'pb-2'), span(set('class', 'font-bold'), $modeName)), + span(set('class', 'text-sm text-gray'), $lang->block->customModeTip->{$mode}) + ) + ) + ); + } + + return div + ( + set('class', 'mode-switch p-4'), + div + ( + span(set('class', 'py-2'), $lang->block->customModeTip->common), + div + ( + set('class','flex mt-2'), + $modes + ) + ) + ); +} diff --git a/module/block/ui/themeswitch.html.php b/module/block/ui/themeswitch.html.php new file mode 100644 index 0000000000..f94d96d02c --- /dev/null +++ b/module/block/ui/themeswitch.html.php @@ -0,0 +1,67 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 展示主题切换页面。 + * Print theme switch. + */ +function printThemeSwitch() +{ + global $lang, $config, $app; + + $themes = array(); + foreach($lang->block->themes as $themeKey => $themeName) + { + $image = $config->webRoot . "theme/default/images/guide/theme_{$themeKey}.png"; + $themes[] = cell + ( + set('width', '25%'), + set('class', 'pr-4 pb-4'), + div + ( + set('class', 'block ' . ($app->cookie->theme == $themeKey ? 'active' : '')), + div + ( + set('class', 'w-full state'), + img + ( + set('class', 'p-4'), + set('src', $image) + ), + div + ( + set('class', "px-4 pb-2 text-center theme-{$themeKey}"), + span + ( + icon('check-circle mr-2 hidden'), + $themeName + ), + ) + ) + ) + ); + } + + return div + ( + set('class', 'theme-switch p-4'), + div + ( + div + ( + set('class','flex flex-wrap mt-2'), + $themes + ) + ) + ); +} diff --git a/module/block/ui/visionswitch.html.php b/module/block/ui/visionswitch.html.php new file mode 100644 index 0000000000..47c0e78b61 --- /dev/null +++ b/module/block/ui/visionswitch.html.php @@ -0,0 +1,62 @@ + +* @package block +* @link https://www.zentao.net +*/ + +namespace zin; + +/** + * 展示界面切换页面。 + * Print vision switch. + */ +function printVisionSwitch() +{ + global $lang, $config; + + $cells = array(); + foreach($lang->block->visions as $vision) + { + $image = $config->webRoot . "theme/default/images/guide/vision_{$vision->key}.png"; + if(!common::checkNotCN() and $vision->key == 'rnd') $image = $config->webRoot . "theme/default/images/guide/vision_{$vision->key}_cn.png"; + if(common::checkNotCN() and $vision->key == 'rnd') $image = $config->webRoot . "theme/default/images/guide/vision_{$vision->key}_en.png"; + $cells[] = cell + ( + set('class', 'flex-1 block mr-4 ' . ($config->vision == $vision->key ? 'active' : '')), + div + ( + set('class', 'w-full state'), + img + ( + set('class', 'p-4'), + set('src', $image) + ), + div + ( + set('class', 'px-4 pb-2'), + div(set('class', 'pb-2'), span(set('class', 'font-bold'), $vision->title)), + span(set('class', 'text-sm text-gray'), $vision->text) + ) + ) + ); + } + + return div + ( + set('class', 'vision-switch p-4'), + div + ( + span(set('class', 'py-2'), $lang->block->visionTitle), + div + ( + set('class','flex mt-2'), + $cells + ) + ) + ); +}