add simple lightbox (#656)

* add simple lightbox

* fix: code style

---------

Co-authored-by: iMaeGoo <mail1st@qq.com>

.eslintignore

@@ -7,4 +7,5 @@ src/server/self-hosted/data/*
 yarn.lock
 src/server/pkg/dist/*
 src/server/pkg/patches/*
-src/server/pkg/web.config
+src/server/pkg/web.config
+pnpm-lock.yaml

.gitignore

@@ -119,3 +119,4 @@ db.json
 db.json.*
 
 pnpm-lock.yaml
+.idea/

src/client/utils/i18n/i18n.js

@@ -471,6 +471,14 @@ export default {
     'Тасвир токен белгиси. Қслоуд учун кераксиз',
     '画像ホスティングトークン。qcloud画像ホスティングには設定が必要ありません'
   ],
+  [S.ACI + '_LIGHTBOX']: [
+    '使用简易图片点击放大效果。默认：false',
+    '使用簡易圖片點擊放大效果。預設：false',
+    '使用簡易圖片點擊放大效果。預設：false',
+    'Use simple Lightbox effect. Default: false',
+    'Используйте простые эффекты лайтбокса. По умолчанию: false',
+    'シンプルなLightbox効果を使用します。デフォルト：false'
+  ],
   [S.ACI + '_LIMIT_PER_MINUTE']: [
     '单个 IP 发言频率限制（条/10分钟），0 为无限制，默认：10',
     '單個 IP 發言頻率限制（條/10分鐘），0 為無限制，預設：10',

src/client/view/components/TkAdminConfig.vue

@@ -75,7 +75,8 @@ export default {
             { key: 'SHOW_EMOTION', desc: t('ADMIN_CONFIG_ITEM_SHOW_EMOTION'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },
             { key: 'EMOTION_CDN', desc: t('ADMIN_CONFIG_ITEM_EMOTION_CDN'), ph: '', value: '' },
             { key: 'HIGHLIGHT', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' },
-            { key: 'HIGHLIGHT_THEME', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT_THEME'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}tomorrow`, value: '' }
+            { key: 'HIGHLIGHT_THEME', desc: t('ADMIN_CONFIG_ITEM_HIGHLIGHT_THEME'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}tomorrow`, value: '' },
+            { key: 'LIGHTBOX', desc: t('ADMIN_CONFIG_ITEM_LIGHTBOX'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}true`, value: '' }
           ]
         },
         {

src/client/view/components/TkComment.vue

@@ -33,7 +33,7 @@
       </div>
       <div class="tk-content">
         <span v-if="comment.pid">{{ t('COMMENT_REPLIED') }} <a class="tk-ruser" :href="`#${comment.pid}`">@{{ comment.ruser }}</a> :</span>
-        <span v-html="comment.comment" ref="comment"></span>
+        <span v-html="comment.comment" ref="comment" @click="popupLightbox"></span>
       </div>
       <div class="tk-extras" v-if="comment.ipRegion || comment.os || comment.browser">
         <div class="tk-extra" v-if="comment.ipRegion">
@@ -235,6 +235,22 @@ export default {
       $event.preventDefault()
       this.setComment({ top })
     },
+    popupLightbox (event) {
+      if (this.$twikoo.serverConfig.LIGHTBOX !== 'true') return
+      const { target } = event
+      if (target.tagName === 'IMG' && !target.classList.contains('tk-owo-emotion')) {
+        const lightbox = document.createElement('div')
+        lightbox.className = 'tk-lightbox'
+        const lightboxImg = document.createElement('img')
+        lightboxImg.className = 'tk-lightbox-image'
+        lightboxImg.src = target.src
+        lightbox.appendChild(lightboxImg)
+        lightbox.addEventListener('click', () => {
+          document.body.removeChild(lightbox)
+        })
+        document.body.appendChild(lightbox)
+      }
+    },
     async setComment (set) {
       this.loading = true
       await call(this.$tcb, 'COMMENT_SET_FOR_ADMIN', {
@@ -386,4 +402,28 @@ export default {
 .tk-expand {
   font-size: 0.75em;
 }
+.tk-lightbox {
+  display: block;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.3);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+.tk-lightbox-image {
+  min-width: 100px;
+  min-height: 30px;
+  width: auto;
+  height: auto;
+  max-width: 95%;
+  max-height: 95%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: linear-gradient(90deg, #eeeeee 50%, #e3e3e3 0);
+  background-size: 40px 100%;
+}
 </style>

src/server/function/twikoo/utils/index.js

@@ -267,6 +267,7 @@ const fn = {
         DEFAULT_GRAVATAR: config.DEFAULT_GRAVATAR,
         SHOW_IMAGE: config.SHOW_IMAGE || 'true',
         IMAGE_CDN: config.IMAGE_CDN,
+        LIGHTBOX: config.LIGHTBOX || 'false',
         SHOW_EMOTION: config.SHOW_EMOTION || 'true',
         EMOTION_CDN: config.EMOTION_CDN,
         COMMENT_PLACEHOLDER: config.COMMENT_PLACEHOLDER,