* refactor square with zin.

2024-02-19 14:35:38 +08:00
parent bc834ce893
commit 216d214299
5 changed files with 154 additions and 103 deletions
@@ -78,8 +78,12 @@
    white-space: nowrap;
 }

-.table-footer {
+.pager-container {
    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+    background: #fff;
+    padding: 12px;
 }

 .btn-star {
@@ -1,21 +0,0 @@
-$(function()
-{
-    $('.btn-star').on('click', function()
-    {
-        const $btn = $(this);
-        const url = $btn.data('url');
-        $.get(url, function(response)
-        {
-            if(response.status == '1')
-            {
-                $btn.children('img').attr('src', 'static/svg/star.svg');
-                $btn.data('url', $btn.data('url').replace('false', 'true'));
-            }
-            else
-            {
-                $btn.children('img').attr('src', 'static/svg/star-empty.svg');
-                $btn.data('url', $btn.data('url').replace('true', 'false'));
-            }
-        }, 'json');
-    });
-});
@@ -0,0 +1,20 @@
+if(!window.aiSquare) window.aiSquare = {};
+
+window.aiSquare.handleStarBtnClick = function()
+{
+    const $btn = $(this);
+    const url = $btn.data('url');
+    $.get(url, function(response)
+    {
+        if(response.status == '1')
+        {
+            $btn.children('img').attr('src', 'static/svg/star.svg');
+            $btn.data('url', $btn.data('url').replace('false', 'true'));
+        }
+        else
+        {
+            $btn.children('img').attr('src', 'static/svg/star-empty.svg');
+            $btn.data('url', $btn.data('url').replace('true', 'false'));
+        }
+    }, 'json');
+};
@@ -0,0 +1,129 @@
+<?php
+declare(strict_types=1);
+
+namespace zin;
+
+$navItems = array();
+
+if(count($categoryList) <= 9)
+{
+    foreach($category as $key => $value)
+    {
+        $isActive = $category === $key;
+        $navItems[] = array(
+            'text'   => $value,
+            'active' => $isActive,
+            'url'    => createLink('ai', 'square', "category=$key"),
+            'badge'  => $isActive ? array('text' => $pager->recTotal, 'class' => 'size-sm rounded-full white') : null,
+            'props'  => array('data-id' => $key)
+        );
+    }
+}
+else
+{
+    foreach(array_slice($categoryList, 0, 8) as $key => $value)
+    {
+        $isActive = $category === $key;
+        $navItems[] = array(
+            'text'   => $value,
+            'active' => $isActive,
+            'url'    => createLink('ai', 'square', "category=$key"),
+            'badge'  => $isActive ? array('text' => $pager->recTotal, 'class' => 'size-sm rounded-full white') : null,
+            'props'  => array('data-id' => $key)
+        );
+    }
+
+    $moreCategoryList = array_slice($categoryList, 8);
+    $subItems = array();
+    foreach($moreCategoryList as $key => $value)
+    {
+        $subItems[] = array(
+            'text'   => $value,
+            'active' => $key === $category,
+            'url'    => createLink('ai', 'square', "category=$key"),
+            'attrs'  => array('data-id' => $key)
+        );
+    }
+    $isActive = array_key_exists($category, $moreCategoryList);
+    $navItems[] = array(
+        'text'   => $isActive ? $moreCategoryList[$category] : $lang->ai->miniPrograms->more,
+        'active' => $isActive,
+        'type'   => 'dropdown',
+        'caret'  => 'down',
+        'badge'  => $isActive ? array('text' => $pager->recTotal, 'class' => 'size-sm rounded-full white') : null,
+        'props'  => array('data-id' => $key),
+        'items'  => $subItems,
+    );
+}
+
+featureBar(set::items($navItems));
+
+$miniProgramCard = function($miniProgram) use ($categoryList, $collectedIDs)
+{
+    global $config, $lang;
+
+    list($iconName, $iconTheme) = explode('-', $miniProgram->icon);
+    $star = in_array($miniProgram->id, $collectedIDs) ? 'star' : 'star-empty';
+    $delete = $star === 'star' ? 'true' : 'false';
+
+    return div(
+        setClass('miniprogram-card'),
+        div(
+            setClass('program-content'),
+            div(
+                setClass('program-text'),
+                div(
+                    setClass('title'),
+                    $miniProgram->name
+                ),
+                div(
+                    setClass('desc'),
+                    $miniProgram->desc
+                )
+            ),
+            div(
+                setClass('program-avatar'),
+                btn(
+                    setClass('btn-avatar'),
+                    setStyle(array(
+                        'width'            => '46px',
+                        'height'           => '46px',
+                        'border-radius'    => '50%',
+                        'display'          => 'flex',
+                        'justify-content'  => 'center',
+                        'align-items'      => 'center',
+                        'border'           => "1px solid {$config->ai->miniPrograms->themeList[$iconTheme][1]}",
+                        'background-color' => "{$config->ai->miniPrograms->themeList[$iconTheme][0]}"
+                    )),
+                    html($config->ai->miniPrograms->iconList[$iconName]),
+                )
+            )
+        ),
+        div(
+            setClass('program-actions'),
+            div(
+                setClass('badge'),
+                $categoryList[$miniProgram->category]
+            ),
+            btn(
+                setClass('ghost btn-star'),
+                setData('url', createLink('ai', 'collectMiniProgram', "appID={$miniProgram->id}&delete={$delete}")),
+                on::click('window.aiSquare.handleStarBtnClick'),
+                html(html::image("static/svg/{$star}.svg", "class='$star'")),
+                $lang->ai->miniPrograms->collect
+            )
+        )
+    );
+};
+
+div(
+    setClass('miniprogram-container'),
+    array_map($miniProgramCard, $miniPrograms),
+);
+
+div(
+    setClass('pager-container'),
+    pager()
+);
+
+render();
@@ -1,81 +0,0 @@
-<?php
-
-/**
- * The ai mini programs view file of ai 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      Wenrui LI <liwenrui@easycorp.ltd>
- * @package     ai
- * @link        https://www.zentao.net
- */
-?>
-<?php include '../../common/view/header.html.php'; ?>
-<div id="mainMenu">
-  <div class="btn-toolbar pull-left">
-    <?php if(count($categoryList) <= 9): ?>
-      <?php foreach($categoryList as $key => $value): ?>
-        <a href="<?= $this->createLink('ai', 'square', "category=$key"); ?>" class="btn btn-link<?php if($category === $key) echo ' btn-active-text'; ?>">
-        <span class="text"><?= $value; ?></span>
-        <?= $category === $key ? '<span class="label label-light label-badge" style="margin-left: 4px;">' . $pager->recTotal . '</span>' : ''; ?>
-        </a>
-      <?php endforeach; ?>
-    <?php else : ?>
-      <?php foreach(array_slice($categoryList, 0, 8) as $key => $value): ?>
-        <a href="<?= $this->createLink('ai', 'square', "category=$key"); ?>" class="btn btn-link<?php if($category === $key) echo ' btn-active-text'; ?>">
-          <span class="text"><?= $value; ?></span>
-          <?= $category === $key ? '<span class="label label-light label-badge" style="margin-left: 4px;">' . $pager->recTotal . '</span>' : ''; ?>
-        </a>
-      <?php endforeach; ?>
-      <div class="btn-group">
-        <?php $moreCategoryList = array_slice($categoryList, 8); ?>
-        <a class="btn btn-link" data-toggle="dropdown"><?= array_key_exists($category, $moreCategoryList) ? ($moreCategoryList[$category] . '<span class="label label-light label-badge" style="margin-left: 4px;">' . $pager->recTotal . '</span>') : $lang->ai->miniPrograms->more; ?><span class="caret"></span></a>
-        <ul class="dropdown-menu">
-          <?php foreach($moreCategoryList as $key => $value): ?>
-            <li <?php if($category === $key) echo 'class="active"'; ?>><a href="<?= $this->createLink('ai', 'square', "category=$key"); ?>"><?= $value; ?></a></li>
-          <?php endforeach; ?>
-        </ul>
-      </div>
-    <?php endif; ?>
-  </div>
-</div>
-<div id="mainContent" class="main-row fade">
-  <div class="miniprogram-container">
-    <?php foreach($miniPrograms as $miniProgram) : ?>
-      <div class="miniprogram-card">
-        <div class="program-content">
-          <div class="program-text">
-            <header class="title">
-              <?= $miniProgram->name; ?>
-            </header>
-            <div class="desc">
-              <?= $miniProgram->desc; ?>
-            </div>
-          </div>
-          <div class="program-avatar">
-            <?php list($iconName, $iconTheme) = explode('-', $miniProgram->icon); ?>
-            <button class="btn btn-icon" style="width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid <?= $config->ai->miniPrograms->themeList[$iconTheme][1]; ?>; background-color: <?= $config->ai->miniPrograms->themeList[$iconTheme][0]; ?>">
-              <?= $config->ai->miniPrograms->iconList[$iconName]; ?>
-            </button>
-          </div>
-        </div>
-        <div class="program-actions">
-          <div class="badge"><?= $categoryList[$miniProgram->category]; ?></div>
-          <?php
-            $star = in_array($miniProgram->id, $collectedIDs) ? 'star' : 'star-empty';
-            $delete = $star === 'star' ? 'true' : 'false';
-          ?>
-          <button class="btn btn-link btn-star" data-url="<?= $this->createLink('ai', 'collectMiniProgram', "appID={$miniProgram->id}&delete={$delete}"); ?>">
-            <?= html::image("static/svg/{$star}.svg", "class='$star'");?>
-            <?= $lang->ai->miniPrograms->collect; ?>
-          </button>
-        </div>
-      </div>
-    <?php endforeach; ?>
-  </div>
-  <div class='table-footer'>
-    <div class="table-statistic"><?= sprintf($lang->ai->miniPrograms->summary, count($miniPrograms)); ?></div>
-    <?php $pager->show('right', 'pagerjs'); ?>
-  </div>
-</div>
-<?php include '../../common/view/footer.html.php'; ?>