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

- 新增 ImagePreview 组件用于全屏查看评论中的图片
- 在功能设置中添加图片灯箱模式开关选项
- 扩展媒体元素样式限制，支持视频和 iframe 的尺寸控制
- 更新前后端 API 以支持 enableImageLightbox 配置项
- 优化设置页面布局，使用卡片式分组展示功能项

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}