feat(widget): 添加评论图片灯箱预览功能
- 新增 ImagePreview 组件用于全屏查看评论中的图片 - 在功能设置中添加图片灯箱模式开关选项 - 扩展媒体元素样式限制，支持视频和 iframe 的尺寸控制 - 更新前后端 API 以支持 enableImageLightbox 配置项 - 优化设置页面布局，使用卡片式分组展示功能项
This commit is contained in:
anghunk
76
docs/widget/src/components/ImagePreview.js
Normal file
76
docs/widget/src/components/ImagePreview.js
Normal file
@@ -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: '×'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user