feat(admin): 快捷操作支持翻页滚动显示 and optimize UI for better user experience

- Add swiper plugin support for carousel functionality
- Optimize UI for better user experience by using swiper
- Update index.js to support swiper initialization
- Modify welcome.html to include swiper HTML structure
- Adjust welcome.css for better styling of swiper elements

app/admin/controller/Index.php

@@ -36,11 +36,9 @@ class Index extends AdminController
         $mysqlVersion = Db::query("select version() as version")[0]['version'] ?? '未知';
         $phpVersion   = phpversion();
         $versions     = compact('tpVersion', 'mysqlVersion', 'phpVersion');
-        $quicks       = SystemQuick::field('id,title,icon,href')
-            ->where(['status' => 1])
-            ->order('sort', 'desc')
-            ->limit(8)
-            ->select();
+        $quick_list   = SystemQuick::field('id,title,icon,href')
+            ->where(['status' => 1])->order('sort', 'desc')->limit(50)->select()->toArray();
+        $quicks       = array_chunk($quick_list, 8);
         $this->assign(compact('quicks', 'versions'));
         return $this->fetch();
     }
@@ -55,7 +53,7 @@ class Index extends AdminController
      */
     public function editAdmin(Request $request): string
     {
-        $id  =  $this->adminUid;
+        $id  = $this->adminUid;
         $row = (new SystemAdmin())
             ->withoutField('password')
             ->find($id);
@@ -88,7 +86,7 @@ class Index extends AdminController
      */
     public function editPassword(Request $request): string
     {
-        $id  =  $this->adminUid;
+        $id  = $this->adminUid;
         $row = (new SystemAdmin())
             ->withoutField('password')
             ->find($id);

app/admin/view/index/welcome.html

@@ -69,16 +69,27 @@
                             <div class="layui-card-body">
                                 <div class="welcome-module">
                                     <div class="layui-row layui-col-space10">
+                                        <div class="swiper mySwiper">
+                                            <div class="swiper-wrapper">
+                                                {foreach $quicks as $value}
 
-                                        {foreach $quicks as $vo}
-                                        <div class="layui-col-xs3 layuimini-qiuck-module">
-                                            <a layuimini-content-href="{:url($vo['href'])}" data-title="{$vo['title']}">
-                                                <i class="{$vo['icon']|raw}"></i>
-                                                <cite>{$vo['title']}</cite>
-                                            </a>
+                                                <div class="swiper-slide">
+                                                    {foreach $value as $vo}
+
+                                                    <div class="layui-col-xs3 layuimini-qiuck-module">
+                                                        <a layuimini-content-href="{:url($vo['href'])}" data-title="{$vo['title']}">
+                                                            <i class="{$vo['icon']|raw}"></i>
+                                                            <cite>{$vo['title']}</cite>
+                                                        </a>
+                                                    </div>
+                                                    {/foreach}
+
+                                                </div>
+                                                {/foreach}
+
+                                            </div>
                                         </div>
-                                        {/foreach}
-
+                                        <div class="swiper-pagination"></div>
                                     </div>
                                 </div>
                             </div>

public/static/admin/css/welcome.css

@@ -32,7 +32,7 @@
 
 .layuimini-qiuck-module a i {
     display: inline-block;
-    width: 100%;
+    width: 80%;
     height: 60px;
     line-height: 60px;
     text-align: center;

public/static/admin/js/index.js

@@ -1,4 +1,4 @@
-define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTab"], function ($, ea, echarts, undefined, miniAdmin, miniTab) {
+define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTab", "swiper"], function ($, ea, echarts, undefined, miniAdmin, miniTab) {
 
     return {
         index: function () {
@@ -50,6 +50,14 @@ define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTa
         },
         welcome: function () {
             miniTab.listen();
+
+            new Swiper('.mySwiper', {
+                pagination: {
+                    el: '.swiper-pagination',
+                    clickable: true,
+                },
+            })
+
             /**
              * 查看公告信息
              **/

public/static/config-admin.js

@@ -21,6 +21,7 @@ require.config({
         "iconPickerFa": ["plugs/lay-module/iconPicker/iconPickerFa"],
         "autocomplete": ["plugs/lay-module/autocomplete/autocomplete"],
         "vue": ["plugs/vue-2.6.10/vue.min"],
+        "swiper": ["plugs/swiper/swiper-bundle.min"],
     }
 });