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

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

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
 		});

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