✨ Added gallery display feature.

2025-01-08 11:57:52 +08:00 · 2021-04-20 10:35:33 +08:00 · 2021-04-20 10:35:33 +08:00 · 5231f8d541
commit 5231f8d541
parent 703d686d5e
6 changed files with 140 additions and 2 deletions
--- a/README.md
+++ b/README.md
@ -35,8 +35,7 @@
 * [x] IP 封禁功能(支持通配符)
 * [x] 自定义链接参数
 * [x] 单用户模式
-* [ ] 图片广场
-...
+* [x] 图片广场(画廊)

 ### 🛠 安装要求
 * PHP 版本 &ge; 5.6
--- a/application/index/controller/Index.php
+++ b/application/index/controller/Index.php
@ -10,6 +10,7 @@ namespace app\index\controller;

 use app\common\model\Images;
 use app\common\model\Users;
+use think\Collection;
 use think\Exception;

 class Index extends Base
@ -36,8 +37,32 @@ class Index extends Base
        return $this->fetch();
    }

+    public function gallery()
+    {
+        if (!$this->getConfig('open_gallery')) {
+            abort(404, "画廊功能已关闭");
+        }
+        $images = [];
+        Images::order('id', 'desc')
+            ->paginate($this->request->limit ? $this->request->limit : 30)
+            ->each(function (Images $item) use (&$images) {
+            $images[] = [
+               'url' => $item->url,
+               'date' => $item->date,
+            ];
+        });
+        if ($this->request->isPost()) {
+            $this->success('success', null, $images);
+        }
+        $this->assign('images', $images);
+        return $this->fetch();
+    }
+
    public function api()
    {
+        if (!$this->getConfig('open_api')) {
+            abort(404, "API 接口已关闭");
+        }
        $this->assign('domain', $this->request->domain());
        return $this->fetch();
    }
--- a/application/index/view/common/base.html
+++ b/application/index/view/common/base.html
@ -59,6 +59,12 @@
      <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">&#xe88a;</i>
      <div class="mdui-list-item-content">首页</div>
    </a>
+    {if $config.open_gallery}
+    <a class="mdui-list-item mdui-ripple {if $uri eq 'index/gallery'}mdui-list-item-active{/if}" href="{:url('index/gallery')}">
+      <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">&#xe8aa;</i>
+      <div class="mdui-list-item-content">画廊</div>
+    </a>
+    {/if}
    {if $config.open_api}
    <a class="mdui-list-item mdui-ripple {if $uri eq 'index/api'}mdui-list-item-active{/if}" href="{:url('index/api')}">
      <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">&#xe157;</i>
--- a/application/index/view/index/gallery.html
+++ b/application/index/view/index/gallery.html
@ -0,0 +1,102 @@
+{extend name="common:base" /}
+
+{block name="title"}画廊 - {$config.site_name}{/block}
+
+{block name="css"}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@1.5.0/dist/viewer.min.css">
+{/block}
+
+{block name="main"}
+<style>
+    .image-item {
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        margin-bottom: .8rem;
+        height: 160px;
+    }
+    .image-item .mdui-grid-tile {
+        height: 100%;
+    }
+    .image-item .mdui-grid-tile .img {
+        height: 100%;
+        object-fit: cover;
+        background-size: cover;
+        background-position: center;
+    }
+</style>
+
+<div class="mdui-container">
+  <main>
+    <div id="images-box" class="mdui-row-xs-3 mdui-row-sm-4 mdui-row-md-5 mdui-row-lg-6 mdui-row-xl-7 mdui-grid-list">
+      {foreach ($images as $index => $image)}
+      <div class="mdui-col image-item">
+        <div class="mdui-grid-tile">
+          <div class="img" style="background-image: url('{$image.url}')"></div>
+          <img src="{$image.url}" style="display: none">
+          <div class="mdui-grid-tile-actions mdui-grid-tile-actions-top">
+            <div class="mdui-grid-tile-text">
+              <div class="mdui-grid-tile-title">{$image.date}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/foreach}
+    </div>
+    <button class="mdui-btn mdui-m-t-2 mdui-center mdui-ripple" id="more">查看更多</button>
+  </main>
+</div>
+{/block}
+
+{block name="js"}
+<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.5.0/dist/viewer.min.js"></script>
+<script src="/static/jquery-viewer/1.2.0/js/jquery-viewer.js"></script>
+<script>
+  var page = 2;
+  var limit = 30;
+  var loading = false;
+  var $box = $('#images-box');
+  var $more = $("#more");
+  var $viewer = $box.viewer({zIndex: 999999999});
+  $box.on('click', '.image-item .img', function () {
+    $viewer.data('viewer').view($(this).closest('.image-item').index());
+  });
+  $more.click(function () {
+    if (loading) return;
+    loading = true;
+    $more.attr('disabled', true).text("加载中...");
+    app.ajax("", {page: page, limit: limit}, function (response) {
+      if (response.code) {
+        var data = response.data;
+        if (data.length === 0) {
+          $more.text("我也是有底线的~");
+        } else {
+          var html = '';
+          for (var key in data) {
+            html += "<div class=\"mdui-col image-item\">\n" +
+              "        <div class=\"mdui-grid-tile\">\n" +
+              "          <div class=\"img\" style=\"background-image: url('"+ data[key].url + "')\"></div>\n" +
+              "          <img src=\""+ data[key].url + "\" style=\"display: none\">\n" +
+              "          <div class=\"mdui-grid-tile-actions mdui-grid-tile-actions-top\">\n" +
+              "            <div class=\"mdui-grid-tile-text\">\n" +
+              "              <div class=\"mdui-grid-tile-title\">"+ data[key].date + "</div>\n" +
+              "            </div>\n" +
+              "          </div>\n" +
+              "        </div>\n" +
+              "      </div>"
+          }
+          $('#images-box').append(html);
+          $viewer.data('viewer').update();
+          loading = false;
+          if (data.length < limit) {
+            $more.text("我也是有底线的~");
+          } else {
+            $more.attr('disabled', false).text("查看更多");
+            page++;
+          }
+        }
+      }
+    });
+  });
+</script>
+{/block}
--- a/application/sql/install.sql
+++ b/application/sql/install.sql
@ -132,6 +132,7 @@ INSERT INTO `lsky_config` (`id`, `key`, `type`, `input_type`, `name`, `title`, `
 (NULL, 'mail', 'text', 'email', 'mail_form_email', '发件人邮箱', NULL, '', ''),

 (NULL, 'other', 'bool', 'checkbox', 'soft_delete', '软删除', '删除图片时不删除源文件，不建议开启', '0', ''),
+(NULL, 'other', 'bool', 'checkbox', 'open_gallery', '开启画廊', '开启画廊功能，游客上传的图片将会出现在画廊中', '0', ''),
 (NULL, 'other', 'bool', 'checkbox', 'open_api', '开启API', '是否开放接口', '0', ''),
 (NULL, 'other', 'textarea', 'textarea', 'ban_ip', '封禁IP', '封禁IP, 多个使用逗号隔开', '', ''),

--- a/application/sql/update.sql
+++ b/application/sql/update.sql
@ -105,3 +105,8 @@ INSERT IGNORE INTO `lsky_config` (`id`, `key`, `type`, `input_type`, `name`, `ti

 -- v1.6.1
 UPDATE `lsky_config` SET `value` = '1.6.1' WHERE `lsky_config`.`name` = 'system_version';
+
+-- v1.6.2
+UPDATE `lsky_config` SET `value` = '1.6.2' WHERE `lsky_config`.`name` = 'system_version';
+INSERT IGNORE INTO `lsky_config` (`id`, `key`, `type`, `input_type`, `name`, `title`, `tip`, `value`, `extend`) VALUES
+(NULL, 'other', 'bool', 'checkbox', 'open_gallery', '开启画廊', '开启画廊功能，游客上传的图片将会出现在画廊中', '', '');