From 703a6e4fe33d69563934baa3e5e6d9412096b7f9 Mon Sep 17 00:00:00 2001 From: mercury233 Date: Sat, 20 Jan 2024 10:13:00 +0800 Subject: [PATCH 1/2] add simple lightbox --- src/client/utils/i18n/i18n.js | 8 ++++ src/client/view/components/TkAdminConfig.vue | 1 + src/client/view/components/TkComment.vue | 42 +++++++++++++++++++- src/server/function/twikoo/utils/index.js | 1 + 4 files changed, 51 insertions(+), 1 deletion(-) diff --git a/src/client/utils/i18n/i18n.js b/src/client/utils/i18n/i18n.js index 159962d9f..6b164d109 100644 --- a/src/client/utils/i18n/i18n.js +++ b/src/client/utils/i18n/i18n.js @@ -471,6 +471,14 @@ export default { 'Тасвир токен белгиси. Қслоуд учун кераксиз', '画像ホスティングトークン。qcloud画像ホスティングには設定が必要ありません' ], + [S.ACI + '_LIGHTBOX']: [ + '使用简易 Lightbox 效果。默认：false', + '使用簡易 Lightbox 效果。預設：false', + '使用簡易 Lightbox 效果。預設：false', + 'Use simple Lightbox effect. Default: false', + 'Используйте простые эффекты лайтбокса. По умолчанию: false', + 'シンプルなLightbox効果を使用します。デフォルト：false' + ], [S.ACI + '_LIMIT_PER_MINUTE']: [ '单个 IP 发言频率限制（条/10分钟），0 为无限制，默认：10', '單個 IP 發言頻率限制（條/10分鐘），0 為無限制，預設：10', diff --git a/src/client/view/components/TkAdminConfig.vue b/src/client/view/components/TkAdminConfig.vue index a7d2b2eb6..91c2db944 100644 --- a/src/client/view/components/TkAdminConfig.vue +++ b/src/client/view/components/TkAdminConfig.vue @@ -72,6 +72,7 @@ export default { { key: 'SHOW_IMAGE', desc: t('ADMIN_CONFIG_ITEM_SHOW_IMAGE'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' }, { key: 'IMAGE_CDN', desc: t('ADMIN_CONFIG_ITEM_IMAGE_CDN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}qcloud`, value: '' }, { key: 'IMAGE_CDN_TOKEN', desc: t('ADMIN_CONFIG_ITEM_IMAGE_CDN_TOKEN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}example`, value: '' }, + { key: 'LIGHTBOX', desc: t('ADMIN_CONFIG_ITEM_LIGHTBOX'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' }, { 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: '' }, diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue index 5c6f39449..2fcf54510 100644 --- a/src/client/view/components/TkComment.vue +++ b/src/client/view/components/TkComment.vue @@ -31,7 +31,7 @@ @like="onLike" @reply="onReply" /> -
+
{{ t('COMMENT_REPLIED') }} @{{ comment.ruser }} :
@@ -235,6 +235,22 @@ export default { $event.preventDefault() this.setComment({ top }) }, + popupLightbox (event) { + if (this.$twikoo.serverConfig.LIGHTBOX !== 'true') return; + var target = event.target; + if (target.tagName === 'IMG' && !target.classList.contains('tk-owo-emotion')) { + var lightbox = document.createElement('div'); + lightbox.className = 'tk-lightbox'; + var lightboxImg = document.createElement('img'); + lightboxImg.className = 'tk-lightbox-image'; + lightboxImg.src = target.src; + lightbox.appendChild(lightboxImg); + document.body.appendChild(lightbox); + lightbox.addEventListener('click', function () { + document.body.removeChild(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%; +} diff --git a/src/server/function/twikoo/utils/index.js b/src/server/function/twikoo/utils/index.js index 28688872c..3fbf044a1 100644 --- a/src/server/function/twikoo/utils/index.js +++ b/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, From 618a27d85fca83741486435165d1956eaaf27ee8 Mon Sep 17 00:00:00 2001 From: iMaeGoo Date: Wed, 24 Jan 2024 10:07:55 +0800 Subject: [PATCH 2/2] fix: code style --- .eslintignore | 3 +- .gitignore | 1 + src/client/utils/i18n/i18n.js | 6 +- src/client/view/components/TkAdminConfig.vue | 4 +- src/client/view/components/TkComment.vue | 70 ++++++++++---------- 5 files changed, 43 insertions(+), 41 deletions(-) diff --git a/.eslintignore b/.eslintignore index d7f97d597..f3a24f38f 100644 --- a/.eslintignore +++ b/.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 \ No newline at end of file +src/server/pkg/web.config +pnpm-lock.yaml \ No newline at end of file diff --git a/.gitignore b/.gitignore index 48d156b3c..6dfe4f803 100644 --- a/.gitignore +++ b/.gitignore @@ -119,3 +119,4 @@ db.json db.json.* pnpm-lock.yaml +.idea/ diff --git a/src/client/utils/i18n/i18n.js b/src/client/utils/i18n/i18n.js index 6b164d109..1b4145b4e 100644 --- a/src/client/utils/i18n/i18n.js +++ b/src/client/utils/i18n/i18n.js @@ -472,9 +472,9 @@ export default { '画像ホスティングトークン。qcloud画像ホスティングには設定が必要ありません' ], [S.ACI + '_LIGHTBOX']: [ - '使用简易 Lightbox 效果。默认：false', - '使用簡易 Lightbox 效果。預設：false', - '使用簡易 Lightbox 效果。預設：false', + '使用简易图片点击放大效果。默认：false', + '使用簡易圖片點擊放大效果。預設：false', + '使用簡易圖片點擊放大效果。預設：false', 'Use simple Lightbox effect. Default: false', 'Используйте простые эффекты лайтбокса. По умолчанию: false', 'シンプルなLightbox効果を使用します。デフォルト：false' diff --git a/src/client/view/components/TkAdminConfig.vue b/src/client/view/components/TkAdminConfig.vue index 91c2db944..1a46b5f7e 100644 --- a/src/client/view/components/TkAdminConfig.vue +++ b/src/client/view/components/TkAdminConfig.vue @@ -72,11 +72,11 @@ export default { { key: 'SHOW_IMAGE', desc: t('ADMIN_CONFIG_ITEM_SHOW_IMAGE'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' }, { key: 'IMAGE_CDN', desc: t('ADMIN_CONFIG_ITEM_IMAGE_CDN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}qcloud`, value: '' }, { key: 'IMAGE_CDN_TOKEN', desc: t('ADMIN_CONFIG_ITEM_IMAGE_CDN_TOKEN'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}example`, value: '' }, - { key: 'LIGHTBOX', desc: t('ADMIN_CONFIG_ITEM_LIGHTBOX'), ph: `${t('ADMIN_CONFIG_EXAMPLE')}false`, value: '' }, { 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: '' } ] }, { diff --git a/src/client/view/components/TkComment.vue b/src/client/view/components/TkComment.vue index 2fcf54510..46f77db13 100644 --- a/src/client/view/components/TkComment.vue +++ b/src/client/view/components/TkComment.vue @@ -31,9 +31,9 @@ @like="onLike" @reply="onReply" />
-
+
{{ t('COMMENT_REPLIED') }} @{{ comment.ruser }} : - +
@@ -236,20 +236,20 @@ export default { this.setComment({ top }) }, popupLightbox (event) { - if (this.$twikoo.serverConfig.LIGHTBOX !== 'true') return; - var target = event.target; + if (this.$twikoo.serverConfig.LIGHTBOX !== 'true') return + const { target } = event if (target.tagName === 'IMG' && !target.classList.contains('tk-owo-emotion')) { - var lightbox = document.createElement('div'); - lightbox.className = 'tk-lightbox'; - var lightboxImg = document.createElement('img'); - lightboxImg.className = 'tk-lightbox-image'; - lightboxImg.src = target.src; - lightbox.appendChild(lightboxImg); - document.body.appendChild(lightbox); - lightbox.addEventListener('click', function () { - document.body.removeChild(lightbox); - }); - }; + 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 @@ -403,27 +403,27 @@ export default { 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; + 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%; + 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%; }