feat(widget): 添加评论图片灯箱预览功能

- 新增 ImagePreview 组件用于全屏查看评论中的图片 - 在功能设置中添加图片灯箱模式开关选项 - 扩展媒体元素样式限制，支持视频和 iframe 的尺寸控制 - 更新前后端 API 以支持 enableImageLightbox 配置项 - 优化设置页面布局，使用卡片式分组展示功能项
2026-02-06 17:22:46 +08:00
parent 1becce7092
commit c59af44e2a
9 changed files with 281 additions and 20 deletions
--- a/cwd-admin/src/api/admin.ts
+++ b/cwd-admin/src/api/admin.ts
@@ -130,6 +130,7 @@ export type LikeStatsResponse = {
 export type FeatureSettingsResponse = {
 	enableCommentLike: boolean;
 	enableArticleLike: boolean;
+	enableImageLightbox: boolean;
 	commentPlaceholder?: string;
 	visibleDomains?: string[];
 };
@@ -333,7 +334,7 @@ export function fetchFeatureSettings(): Promise<FeatureSettingsResponse> {
 	return get<FeatureSettingsResponse>('/admin/settings/features');
 }

-export function saveFeatureSettings(data: { enableCommentLike?: boolean; enableArticleLike?: boolean; commentPlaceholder?: string; visibleDomains?: string[] }): Promise<{ message: string }> {
+export function saveFeatureSettings(data: { enableCommentLike?: boolean; enableArticleLike?: boolean; enableImageLightbox?: boolean; commentPlaceholder?: string; visibleDomains?: string[] }): Promise<{ message: string }> {
 	return put<{ message: string }>('/admin/settings/features', data);
 }

--- a/cwd-admin/src/styles/components/setting.less
+++ b/cwd-admin/src/styles/components/setting.less
@@ -279,4 +279,20 @@
 .tab-fade-leave-to {
  opacity: 0;
  transform: translateY(4px);
+}
+
+.form-item-flex {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.feature {
+  .bg {
+    margin-bottom: 15px;
+    background: var(--bg-sider);
+    padding: 10px;
+    border-radius: 5px;
+  }
 }
--- a/cwd-admin/src/styles/markdown.css
+++ b/cwd-admin/src/styles/markdown.css
@@ -114,9 +114,12 @@
  background: var(--cwd-bg-secondary, #f6f8fa);
 }

-.cell-content-text img {
+.cell-content-text img,
+.cell-content-text video,
+.cell-content-text iframe {
  max-width: 100%;
  height: auto;
+  max-height: 200px;
 }

 /* 兼容其他框架导入的样式 */
--- a/cwd-admin/src/views/SettingsView/index.vue
+++ b/cwd-admin/src/views/SettingsView/index.vue
@@ -207,39 +207,54 @@
            </div>
          </template>
          <template v-else-if="activeTab === 'feature'">
-            <div class="card">
+            <div class="card feature">
              <div class="card-header">
                <div class="card-title">功能开关</div>
              </div>
              <div class="card-body">
-                <div class="form-item">
-                  <label class="form-label">开启文章点赞功能</label>
-                  <label class="switch">
-                    <input v-model="enableArticleLike" type="checkbox" />
-                    <span class="slider" />
-                  </label>
+                <div class="form-item bg">
+                  <div class="form-item-flex">
+                    <label class="form-label">开启文章点赞功能</label>
+                    <label class="switch">
+                      <input v-model="enableArticleLike" type="checkbox" />
+                      <span class="slider" />
+                    </label>
+                  </div>
                  <div class="form-hint">
                    开启后，评论区顶部会显示的文章点赞（喜欢）按钮。
                  </div>
                </div>
-                <div class="form-item">
-                  <label class="form-label">开启评论点赞功能</label>
-                  <label class="switch">
-                    <input v-model="enableCommentLike" type="checkbox" />
-                    <span class="slider" />
-                  </label>
+                <div class="form-item bg">
+                  <div class="form-item-flex">
+                    <label class="form-label">开启评论点赞功能</label>
+                    <label class="switch">
+                      <input v-model="enableCommentLike" type="checkbox" />
+                      <span class="slider" />
+                    </label>
+                  </div>
                  <div class="form-hint">
                    开启后，评论列表中的每条评论都会显示点赞按钮。
                  </div>
                </div>
-      
+
+                <div class="form-item bg">
+                  <div class="form-item-flex">
+                    <label class="form-label">评论列表图片灯箱模式</label>
+                    <label class="switch">
+                      <input v-model="enableImageLightbox" type="checkbox" />
+                      <span class="slider" />
+                    </label>
+                  </div>
+                  <div class="form-hint">开启后，点击评论中的图片时会全屏放大预览。</div>
+                </div>
+
                <div class="form-item">
                  <label class="form-label">评论框提示文案 (Placeholder)</label>
                  <textarea
                    v-model="commentPlaceholder"
                    class="form-input"
                    rows="3"
-                    style="height:90px;resize:none;"
+                    style="height: 90px; resize: none"
                    placeholder="默认：写下你的评论，可换行书写提示"
                  ></textarea>
                  <div class="form-hint">
@@ -382,7 +397,8 @@
                  </div>
                  <div v-else-if="smtpProvider === '163'" class="form-hint">
                    注意：163 邮箱必须使用授权码，而非登录密码。<br />
-                    请登录 163 邮箱网页版，在【设置 - POP3/SMTP/IMAP】中开启服务并生成授权码。
+                    请登录 163 邮箱网页版，在【设置 -
+                    POP3/SMTP/IMAP】中开启服务并生成授权码。
                  </div>
                </div>

@@ -640,6 +656,7 @@ const adminKeySet = ref(false);
 const requireReview = ref(false);
 const enableArticleLike = ref(true);
 const enableCommentLike = ref(true);
+const enableImageLightbox = ref(true);
 const commentPlaceholder = ref("");
 const telegramBotToken = ref("");
 const telegramChatId = ref("");
@@ -932,6 +949,7 @@ async function load() {
    emailGlobalEnabled.value = !!emailNotifyRes.globalEnabled;
    enableArticleLike.value = featureRes.enableArticleLike;
    enableCommentLike.value = featureRes.enableCommentLike;
+    enableImageLightbox.value = featureRes.enableImageLightbox;
    commentPlaceholder.value = featureRes.commentPlaceholder || "";

    telegramBotToken.value = telegramRes.botToken || "";
@@ -1080,6 +1098,7 @@ async function saveFeature() {
      saveFeatureSettings({
        enableArticleLike: enableArticleLike.value,
        enableCommentLike: enableCommentLike.value,
+        enableImageLightbox: enableImageLightbox.value,
        commentPlaceholder: commentPlaceholder.value,
      }),
    ]);
--- a/cwd-api/src/api/admin/featureSettings.ts
+++ b/cwd-api/src/api/admin/featureSettings.ts
@@ -25,6 +25,10 @@ export const updateFeatureSettings = async (c: Context<{ Bindings: Bindings }>)
 			typeof body.enableArticleLike === 'boolean'
 				? body.enableArticleLike
 				: undefined;
+		const enableImageLightbox =
+			typeof body.enableImageLightbox === 'boolean'
+				? body.enableImageLightbox
+				: undefined;
 		const rawCommentPlaceholder =
 			typeof body.commentPlaceholder === 'string' ? body.commentPlaceholder : undefined;
 		const commentPlaceholder =
@@ -37,6 +41,7 @@ export const updateFeatureSettings = async (c: Context<{ Bindings: Bindings }>)
 		await saveFeatureSettings(c.env, {
 			enableCommentLike,
 			enableArticleLike,
+			enableImageLightbox,
 			commentPlaceholder,
 			visibleDomains
 		});
--- a/cwd-api/src/utils/featureSettings.ts
+++ b/cwd-api/src/utils/featureSettings.ts
@@ -2,12 +2,14 @@ import { Bindings } from '../bindings';

 export const FEATURE_COMMENT_LIKE_KEY = 'comment_feature_comment_like';
 export const FEATURE_ARTICLE_LIKE_KEY = 'comment_feature_article_like';
+export const FEATURE_IMAGE_LIGHTBOX_KEY = 'comment_feature_image_lightbox';
 export const FEATURE_COMMENT_PLACEHOLDER_KEY = 'comment_feature_placeholder';
 export const FEATURE_VISIBLE_DOMAINS_KEY = 'admin_visible_domains';

 export type FeatureSettings = {
 	enableCommentLike: boolean;
 	enableArticleLike: boolean;
+	enableImageLightbox: boolean;
 	commentPlaceholder?: string;
 	visibleDomains?: string[];
 };
@@ -20,11 +22,12 @@ export async function loadFeatureSettings(env: Bindings): Promise<FeatureSetting
 	const keys = [
 		FEATURE_COMMENT_LIKE_KEY,
 		FEATURE_ARTICLE_LIKE_KEY,
+		FEATURE_IMAGE_LIGHTBOX_KEY,
 		FEATURE_COMMENT_PLACEHOLDER_KEY,
 		FEATURE_VISIBLE_DOMAINS_KEY
 	];
 	const { results } = await env.CWD_DB.prepare(
-		'SELECT key, value FROM Settings WHERE key IN (?, ?, ?, ?)'
+		'SELECT key, value FROM Settings WHERE key IN (?, ?, ?, ?, ?)'
 	)
 		.bind(...keys)
 		.all<{ key: string; value: string }>();
@@ -56,6 +59,9 @@ export async function loadFeatureSettings(env: Bindings): Promise<FeatureSetting
 	const enableArticleLikeRaw = map.get(FEATURE_ARTICLE_LIKE_KEY);
 	const enableArticleLike = enableArticleLikeRaw !== '0'; // Default to true if missing or '1'

+	const enableImageLightboxRaw = map.get(FEATURE_IMAGE_LIGHTBOX_KEY);
+	const enableImageLightbox = enableImageLightboxRaw === '1';
+
 	const commentPlaceholder = map.get(FEATURE_COMMENT_PLACEHOLDER_KEY);

 	let visibleDomains: string[] | undefined;
@@ -71,6 +77,7 @@ export async function loadFeatureSettings(env: Bindings): Promise<FeatureSetting
 	return {
 		enableCommentLike,
 		enableArticleLike,
+		enableImageLightbox,
 		commentPlaceholder,
 		visibleDomains
 	};
@@ -103,6 +110,15 @@ export async function saveFeatureSettings(
 						: '0'
 					: undefined
 		},
+		{
+			key: FEATURE_IMAGE_LIGHTBOX_KEY,
+			value:
+				typeof settings.enableImageLightbox === 'boolean'
+					? settings.enableImageLightbox
+						? '1'
+						: '0'
+					: undefined
+		},
 		{
 			key: FEATURE_COMMENT_PLACEHOLDER_KEY,
 			value: settings.commentPlaceholder
--- a/docs/widget/src/components/ImagePreview.js
+++ b/docs/widget/src/components/ImagePreview.js
@@ -0,0 +1,76 @@
+
+import { Component } from './Component.js';
+
+export class ImagePreview extends Component {
+  constructor(container) {
+    super(container);
+    this.visible = false;
+    this.imageUrl = '';
+  }
+
+  render() {
+    if (!this.visible) {
+      if (this.elements.root) {
+        this.elements.root.remove();
+        this.elements.root = null;
+      }
+      return;
+    }
+
+    const root = this.createElement('div', {
+      className: 'cwd-image-preview-overlay',
+      attributes: {
+        role: 'dialog',
+        'aria-modal': 'true',
+        onClick: (e) => this.handleOverlayClick(e)
+      },
+      children: [
+        this.createElement('div', {
+          className: 'cwd-image-preview-content',
+          children: [
+            this.createElement('img', {
+              className: 'cwd-image-preview-img',
+              attributes: {
+                src: this.imageUrl,
+                alt: 'Preview'
+              }
+            }),
+            this.createElement('button', {
+              className: 'cwd-image-preview-close',
+              attributes: {
+                type: 'button',
+                'aria-label': 'Close preview',
+                onClick: () => this.close()
+              },
+              html: '&times;'
+            })
+          ]
+        })
+      ]
+    });
+
+    this.elements.root = root;
+    this.container.appendChild(root);
+  }
+
+  open(url) {
+    this.imageUrl = url;
+    this.visible = true;
+    this.render();
+    document.body.style.overflow = 'hidden'; // Prevent background scrolling
+  }
+
+  close() {
+    this.visible = false;
+    this.imageUrl = '';
+    this.render();
+    document.body.style.overflow = ''; // Restore scrolling
+  }
+
+  handleOverlayClick(e) {
+    if (e.target.classList.contains('cwd-image-preview-overlay') || 
+        e.target.classList.contains('cwd-image-preview-content')) {
+      this.close();
+    }
+  }
+}
--- a/docs/widget/src/core/CWDComments.js
+++ b/docs/widget/src/core/CWDComments.js
@@ -7,6 +7,7 @@ import { createApiClient } from './api.js';
 import { createCommentStore } from './store.js';
 import { CommentForm } from '@/components/CommentForm.js';
 import { CommentList } from '@/components/CommentList.js';
+import { ImagePreview } from '@/components/ImagePreview.js';
 import styles from '@/styles/main.css?inline';

 /**
@@ -42,6 +43,7 @@ export class CWDComments {
 		this.mountPoint = null;
 		this.commentForm = null;
 		this.commentList = null;
+		this.imagePreview = null;
 		this.formContainer = null;
 		this.customStyleElement = null;
 		this.store = null;
@@ -101,6 +103,7 @@ export class CWDComments {
 				allowedDomains: Array.isArray(data.allowedDomains) ? data.allowedDomains : [],
 				enableCommentLike: typeof data.enableCommentLike === 'boolean' ? data.enableCommentLike : true,
 				enableArticleLike: typeof data.enableArticleLike === 'boolean' ? data.enableArticleLike : true,
+				enableImageLightbox: typeof data.enableImageLightbox === 'boolean' ? data.enableImageLightbox : false,
 				commentPlaceholder:
 					typeof data.commentPlaceholder === 'string' ? data.commentPlaceholder : undefined,
 			};
@@ -170,6 +173,15 @@ export class CWDComments {
 			this.config.requireReview = !!serverConfig.requireReview;
 			this.config.enableCommentLike = serverConfig.enableCommentLike;
 			this.config.enableArticleLike = serverConfig.enableArticleLike;
+			this.config.enableImageLightbox = serverConfig.enableImageLightbox;
+
+			if (this.config.enableImageLightbox === true) {
+				if (this.mountPoint && !this.imagePreview) {
+					this.imagePreview = new ImagePreview(this.mountPoint);
+					this.mountPoint.addEventListener('click', (e) => this._handleImageClick(e));
+				}
+			}
+
 			this.config.commentPlaceholder =
 				typeof serverConfig.commentPlaceholder === 'string'
 					? serverConfig.commentPlaceholder
@@ -234,6 +246,11 @@ export class CWDComments {
 			this.commentList = null;
 		}

+		if (this.imagePreview) {
+			// imagePreview 没有 destroy 方法，但它挂载在 shadowRoot 下，会被自动移除
+			this.imagePreview = null;
+		}
+
 		// 取消订阅
 		if (this.unsubscribe) {
 			this.unsubscribe();
@@ -727,6 +744,22 @@ export class CWDComments {
 			});
 	}

+	/**
+	 * 处理图片点击
+	 * @private
+	 */
+	_handleImageClick(e) {
+		const target = e.target;
+		// 检查点击的是否是评论内容中的图片
+		if (target.tagName === 'IMG' && target.closest('.cwd-comment-content')) {
+			e.preventDefault();
+			e.stopPropagation();
+			if (this.imagePreview) {
+				this.imagePreview.open(target.src);
+			}
+		}
+	}
+
 	/**
 	 * 获取当前配置
 	 * @returns {Object}
--- a/docs/widget/src/styles/main.css
+++ b/docs/widget/src/styles/main.css
@@ -545,9 +545,12 @@
  background: var(--cwd-bg-secondary, #f6f8fa);
 }

-.cwd-comment-content img {
+.cwd-comment-content img,
+.cwd-comment-content video,
+.cwd-comment-content iframe {
  max-width: 100%;
  height: auto;
+  max-height: 400px;
 }

 .cwd-like {
@@ -1030,3 +1033,92 @@
  vertical-align: bottom;
  max-width: 40px;
 }
+
+/* ========== Image Preview Modal ========== */
+.cwd-image-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2147483647;
+  /* Max z-index to be on top of everything */
+  animation: cwd-fade-in 0.2s ease-out;
+  cursor: zoom-out;
+}
+
+.cwd-image-preview-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cwd-image-preview-img {
+  max-width: 100%;
+  max-height: 90vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  cursor: default;
+  animation: cwd-zoom-in 0.3s cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+.cwd-image-preview-close {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 50%;
+  color: #fff;
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.cwd-image-preview-close:hover {
+  background: rgba(255, 255, 255, 0.4);
+}
+
+@keyframes cwd-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes cwd-zoom-in {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .cwd-image-preview-close {
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.5);
+  }
+}