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/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();
+    }
+  }
+}