refactor: 模块化架构重构
将单文件巨型 IIFE (1608行) 拆分为 14 个 ES Module: 核心层: - js/state.js - 轻量级响应式状态管理 (发布-订阅) - js/utils.js - 通用工具函数 - js/sanitizer.js - HTML XSS 净化器 - js/marked-config.js - Markdown 渲染器配置 组件层: - js/components/chat-area.js - 消息渲染/流式更新/导出 - js/components/input-area.js - 文本输入/图片上传/发送 - js/components/history-modal.js - 历史记录面板/搜索/分页 - js/components/settings-modal.js - 设置面板/数据管理 - js/components/header.js - 顶部导航/连接状态 - js/components/model-bar.js - 模型选择栏 - js/components/toast.js - Toast 通知 - js/components/lightbox.js - 图片预览 入口层: - js/app.js - 主入口/初始化协调 index.html: 1608行 → 204行纯模板
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Lightbox - 图片预览组件
|
||||
*/
|
||||
|
||||
let lightboxEl, lightboxImg;
|
||||
|
||||
export function initLightbox() {
|
||||
lightboxEl = document.querySelector('#lightbox');
|
||||
lightboxImg = document.querySelector('#lightboxImg');
|
||||
|
||||
// 关闭事件
|
||||
lightboxEl.addEventListener('click', (e) => {
|
||||
if (e.target === lightboxEl) closeLightbox();
|
||||
});
|
||||
document.querySelector('#lightboxClose').addEventListener('click', closeLightbox);
|
||||
|
||||
// 消息区域点击图片打开预览
|
||||
document.querySelector('#messagesContainer')?.addEventListener('click', (e) => {
|
||||
if (e.target.dataset.lightbox === 'true') {
|
||||
openLightbox(e.target.src);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function openLightbox(src) {
|
||||
lightboxImg.src = src;
|
||||
lightboxEl.style.display = '';
|
||||
}
|
||||
|
||||
export function closeLightbox() {
|
||||
lightboxEl.style.display = 'none';
|
||||
lightboxImg.src = '';
|
||||
}
|
||||
Reference in New Issue
Block a user