706 lines
23 KiB
JavaScript
706 lines
23 KiB
JavaScript
// 对话框组件 - 负责各种确认对话框和选择器
|
||
|
||
export class DialogComponents {
|
||
constructor() {
|
||
this.addStyles();
|
||
}
|
||
|
||
// 删除确认对话框
|
||
showDeleteConfirm(promptName, onConfirm) {
|
||
return new Promise((resolve) => {
|
||
const modal = this.createModal('delete-confirm-modal');
|
||
modal.innerHTML = `
|
||
<div class="dialog-overlay">
|
||
<div class="dialog-container delete-confirm">
|
||
<div class="dialog-header">
|
||
<h4>⚠️ 确认删除</h4>
|
||
<button class="dialog-close-btn">×</button>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<p>确定要删除提示词 "<strong>${this.escapeHtml(promptName)}</strong>" 吗？</p>
|
||
<p class="warning-text">此操作不可撤销！</p>
|
||
<div class="dialog-actions">
|
||
<button class="btn-danger delete-confirm-btn">确定删除</button>
|
||
<button class="btn-secondary delete-cancel-btn">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.bindDialogEvents(modal, {
|
||
'.delete-confirm-btn': () => {
|
||
if (onConfirm) onConfirm();
|
||
resolve(true);
|
||
this.closeModal(modal);
|
||
},
|
||
'.delete-cancel-btn': () => {
|
||
resolve(false);
|
||
this.closeModal(modal);
|
||
}
|
||
});
|
||
|
||
this.showModal(modal);
|
||
});
|
||
} // 插入模式选择对话框
|
||
showInsertModeDialog(title = '选择插入模式', message = '检测到输入框中已有内容，请选择插入模式：') {
|
||
return new Promise((resolve) => {
|
||
let resolved = false; // 防止多次resolve
|
||
|
||
const modal = this.createModal('insert-mode-modal');
|
||
modal.innerHTML = `
|
||
<div class="dialog-overlay">
|
||
<div class="dialog-container insert-mode">
|
||
<div class="dialog-header">
|
||
<h4>${title}</h4>
|
||
<button class="dialog-close-btn">×</button>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<p>${message}</p>
|
||
<div class="option-cards">
|
||
<div class="option-card" data-action="insert">
|
||
<div class="option-icon">📝</div>
|
||
<div class="option-title">插入模式</div>
|
||
<div class="option-description">在光标位置或文本开头插入提示词</div>
|
||
</div>
|
||
<div class="option-card" data-action="append">
|
||
<div class="option-icon">➕</div>
|
||
<div class="option-title">追加模式</div>
|
||
<div class="option-description">在现有内容后面添加提示词</div>
|
||
</div>
|
||
<div class="option-card" data-action="replace">
|
||
<div class="option-icon">🔄</div>
|
||
<div class="option-title">替换模式</div>
|
||
<div class="option-description">删除原有内容，使用新提示词替换</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
const resolveOnce = (value) => {
|
||
if (!resolved) {
|
||
resolved = true;
|
||
this.closeModal(modal);
|
||
resolve(value);
|
||
}
|
||
};
|
||
|
||
this.bindDialogEvents(modal, {
|
||
'.option-card': (e) => {
|
||
const action = e.currentTarget.getAttribute('data-action');
|
||
console.log('插入模式选择:', action); // 调试信息
|
||
resolveOnce(action);
|
||
},
|
||
'.dialog-close-btn': () => {
|
||
console.log('对话框关闭按钮点击'); // 调试信息
|
||
resolveOnce(null);
|
||
}
|
||
});
|
||
|
||
this.showModal(modal);
|
||
});
|
||
}
|
||
|
||
// 文本组件选择器对话框
|
||
showWidgetSelector(widgets, getDisplayName) {
|
||
return new Promise((resolve) => {
|
||
if (!Array.isArray(widgets) || widgets.length <= 1) {
|
||
resolve(widgets[0] || null);
|
||
return;
|
||
}
|
||
|
||
const modal = this.createModal('widget-selector-modal');
|
||
modal.innerHTML = `
|
||
<div class="dialog-overlay">
|
||
<div class="dialog-container widget-selector">
|
||
<div class="dialog-header">
|
||
<h4>🎯 选择文本输入框</h4>
|
||
<button class="dialog-close-btn">×</button>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<p>该节点有多个文本输入框，请选择要应用提示词的输入框：</p>
|
||
<div class="widget-list">
|
||
${widgets.map((widget, index) => `
|
||
<button class="widget-option" data-index="${index}">
|
||
<div class="widget-info">
|
||
<div class="widget-name">${getDisplayName ? getDisplayName(widget) : `输入框 ${index + 1}`}</div>
|
||
<div class="widget-preview">${widget.value ? this.truncateText(widget.value, 50) : '(空)'}</div>
|
||
</div>
|
||
</button>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.bindDialogEvents(modal, {
|
||
'.widget-option': (e) => {
|
||
const index = parseInt(e.currentTarget.getAttribute('data-index'));
|
||
resolve(widgets[index]);
|
||
this.closeModal(modal);
|
||
}
|
||
});
|
||
|
||
this.showModal(modal);
|
||
});
|
||
}
|
||
|
||
// 导入文件选择对话框
|
||
showFileImportDialog(accept = '.json') {
|
||
return new Promise((resolve) => {
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = accept;
|
||
input.style.display = 'none';
|
||
|
||
input.addEventListener('change', (e) => {
|
||
const file = e.target.files[0];
|
||
resolve(file);
|
||
document.body.removeChild(input);
|
||
});
|
||
|
||
input.addEventListener('cancel', () => {
|
||
resolve(null);
|
||
document.body.removeChild(input);
|
||
});
|
||
|
||
document.body.appendChild(input);
|
||
input.click();
|
||
});
|
||
}
|
||
|
||
// 成功提示对话框
|
||
showSuccessDialog(title, message, autoClose = 3000) {
|
||
return new Promise((resolve) => {
|
||
const modal = this.createModal('success-dialog-modal');
|
||
modal.innerHTML = `
|
||
<div class="dialog-overlay">
|
||
<div class="dialog-container success-dialog">
|
||
<div class="dialog-header success">
|
||
<h4>✅ ${title}</h4>
|
||
<button class="dialog-close-btn">×</button>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<p>${message}</p>
|
||
${autoClose ? `<div class="auto-close-indicator">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" style="animation-duration: ${autoClose}ms;"></div>
|
||
</div>
|
||
<small>对话框将在 ${Math.ceil(autoClose / 1000)} 秒后自动关闭</small>
|
||
</div>` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.bindDialogEvents(modal, {
|
||
'.dialog-close-btn': () => {
|
||
resolve();
|
||
this.closeModal(modal);
|
||
}
|
||
});
|
||
|
||
this.showModal(modal);
|
||
|
||
// 自动关闭
|
||
if (autoClose) {
|
||
setTimeout(() => {
|
||
resolve();
|
||
this.closeModal(modal);
|
||
}, autoClose);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 错误提示对话框
|
||
showErrorDialog(title, message) {
|
||
return new Promise((resolve) => {
|
||
const modal = this.createModal('error-dialog-modal');
|
||
modal.innerHTML = `
|
||
<div class="dialog-overlay">
|
||
<div class="dialog-container error-dialog">
|
||
<div class="dialog-header error">
|
||
<h4>❌ ${title}</h4>
|
||
<button class="dialog-close-btn">×</button>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<p>${message}</p>
|
||
<div class="dialog-actions">
|
||
<button class="btn-primary error-ok-btn">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.bindDialogEvents(modal, {
|
||
'.error-ok-btn': () => {
|
||
resolve();
|
||
this.closeModal(modal);
|
||
}
|
||
});
|
||
|
||
this.showModal(modal);
|
||
});
|
||
}
|
||
|
||
// 通用确认对话框
|
||
showConfirmDialog(title, message, confirmText = '确定', cancelText = '取消') {
|
||
return new Promise((resolve) => {
|
||
const modal = this.createModal('confirm-dialog-modal');
|
||
modal.innerHTML = `
|
||
<div class="dialog-overlay">
|
||
<div class="dialog-container confirm-dialog">
|
||
<div class="dialog-header">
|
||
<h4>${title}</h4>
|
||
<button class="dialog-close-btn">×</button>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<p>${message}</p>
|
||
<div class="dialog-actions">
|
||
<button class="btn-primary confirm-ok-btn">${confirmText}</button>
|
||
<button class="btn-secondary confirm-cancel-btn">${cancelText}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
this.bindDialogEvents(modal, {
|
||
'.confirm-ok-btn': () => {
|
||
resolve(true);
|
||
this.closeModal(modal);
|
||
},
|
||
'.confirm-cancel-btn': () => {
|
||
resolve(false);
|
||
this.closeModal(modal);
|
||
}
|
||
});
|
||
|
||
this.showModal(modal);
|
||
});
|
||
}
|
||
|
||
// 工具方法
|
||
createModal(className) {
|
||
// 移除已存在的相同类型对话框
|
||
const existing = document.querySelector(`.${className}`);
|
||
if (existing) {
|
||
existing.remove();
|
||
}
|
||
|
||
const modal = document.createElement('div');
|
||
modal.className = className;
|
||
return modal;
|
||
}
|
||
|
||
showModal(modal) {
|
||
document.body.appendChild(modal);
|
||
// 添加显示动画
|
||
requestAnimationFrame(() => {
|
||
modal.classList.add('show');
|
||
});
|
||
}
|
||
|
||
closeModal(modal) {
|
||
modal.classList.remove('show');
|
||
setTimeout(() => {
|
||
if (modal.parentNode) {
|
||
modal.parentNode.removeChild(modal);
|
||
}
|
||
}, 300);
|
||
} bindDialogEvents(modal, eventMap) {
|
||
// 绑定自定义事件
|
||
Object.entries(eventMap).forEach(([selector, handler]) => {
|
||
const elements = modal.querySelectorAll(selector);
|
||
elements.forEach(element => {
|
||
element.addEventListener('click', handler);
|
||
});
|
||
});
|
||
|
||
// 只有在没有自定义关闭按钮处理时才绑定通用关闭事件
|
||
if (!eventMap['.dialog-close-btn']) {
|
||
const closeBtn = modal.querySelector('.dialog-close-btn');
|
||
if (closeBtn) {
|
||
closeBtn.addEventListener('click', () => this.closeModal(modal));
|
||
}
|
||
}
|
||
const handleKeydown = (e) => {
|
||
if (e.key === 'Escape') {
|
||
// 如果有自定义关闭处理，使用它；否则直接关闭
|
||
if (eventMap['.dialog-close-btn']) {
|
||
eventMap['.dialog-close-btn']();
|
||
} else {
|
||
this.closeModal(modal);
|
||
}
|
||
document.removeEventListener('keydown', handleKeydown);
|
||
}
|
||
};
|
||
document.addEventListener('keydown', handleKeydown);
|
||
}
|
||
|
||
escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
truncateText(text, maxLength) {
|
||
if (!text || text.length <= maxLength) return text;
|
||
return text.substring(0, maxLength) + '...';
|
||
}
|
||
|
||
addStyles() {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
/* 通用对话框样式 */
|
||
.delete-confirm-modal,
|
||
.insert-mode-modal,
|
||
.widget-selector-modal,
|
||
.success-dialog-modal,
|
||
.error-dialog-modal,
|
||
.confirm-dialog-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 20000;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||
}
|
||
|
||
.delete-confirm-modal.show,
|
||
.insert-mode-modal.show,
|
||
.widget-selector-modal.show,
|
||
.success-dialog-modal.show,
|
||
.error-dialog-modal.show,
|
||
.confirm-dialog-modal.show {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.dialog-overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.dialog-container {
|
||
background: #2b2b2b;
|
||
border-radius: 12px;
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
|
||
max-width: 500px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow: hidden;
|
||
transform: scale(0.9);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.delete-confirm-modal.show .dialog-container,
|
||
.insert-mode-modal.show .dialog-container,
|
||
.widget-selector-modal.show .dialog-container,
|
||
.success-dialog-modal.show .dialog-container,
|
||
.error-dialog-modal.show .dialog-container,
|
||
.confirm-dialog-modal.show .dialog-container {
|
||
transform: scale(1);
|
||
}
|
||
|
||
.dialog-header {
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid #404040;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%);
|
||
}
|
||
|
||
.dialog-header.success {
|
||
background: linear-gradient(135deg, #43cf7c 0%, #38b86a 100%);
|
||
}
|
||
|
||
.dialog-header.error {
|
||
background: linear-gradient(135deg, #ff5733 0%, #e04929 100%);
|
||
}
|
||
|
||
.dialog-header h4 {
|
||
margin: 0;
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dialog-close-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
width: 28px;
|
||
height: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.dialog-close-btn:hover {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.dialog-content {
|
||
padding: 24px;
|
||
color: #e0e0e0;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.dialog-content p {
|
||
margin: 0 0 16px 0;
|
||
}
|
||
|
||
.warning-text {
|
||
color: #ff8c42;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.dialog-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.btn-primary,
|
||
.btn-secondary,
|
||
.btn-danger {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
flex: 1;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #2a82e4;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #1c6bb7;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #5a6268;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-danger {
|
||
background: #ff5733;
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background: #e04929;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* 选项卡片样式 */
|
||
.option-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.option-card {
|
||
background: #1a1a1a;
|
||
border: 2px solid #404040;
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.option-card:hover {
|
||
border-color: #2a82e4;
|
||
background: #262626;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.option-icon {
|
||
font-size: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.option-title {
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.option-description {
|
||
font-size: 13px;
|
||
color: #888;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 组件选择器样式 */
|
||
.widget-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.widget-option {
|
||
background: #1a1a1a;
|
||
border: 2px solid #404040;
|
||
border-radius: 8px;
|
||
padding: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
text-align: left;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
.widget-option:hover {
|
||
border-color: #2a82e4;
|
||
background: #262626;
|
||
}
|
||
|
||
.widget-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
}
|
||
|
||
.widget-name {
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.widget-preview {
|
||
font-size: 12px;
|
||
color: #888;
|
||
font-family: monospace;
|
||
}
|
||
|
||
/* 自动关闭指示器 */
|
||
.auto-close-indicator {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #404040;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 3px;
|
||
background: #404040;
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: #43cf7c;
|
||
width: 100%;
|
||
animation: shrink linear forwards;
|
||
transform-origin: right;
|
||
}
|
||
|
||
@keyframes shrink {
|
||
from {
|
||
transform: scaleX(1);
|
||
}
|
||
to {
|
||
transform: scaleX(0);
|
||
}
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.dialog-container {
|
||
margin: 20px;
|
||
max-width: none;
|
||
width: calc(100% - 40px);
|
||
}
|
||
|
||
.dialog-content {
|
||
padding: 16px;
|
||
}
|
||
|
||
.option-cards {
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-card {
|
||
padding: 12px;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.dialog-actions {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
`;
|
||
|
||
if (!document.head.querySelector('style[data-component="dialog-components"]')) {
|
||
style.setAttribute('data-component', 'dialog-components');
|
||
document.head.appendChild(style);
|
||
}
|
||
}
|
||
|
||
destroy() {
|
||
// 移除所有对话框
|
||
const dialogs = document.querySelectorAll(`
|
||
.delete-confirm-modal,
|
||
.insert-mode-modal,
|
||
.widget-selector-modal,
|
||
.success-dialog-modal,
|
||
.error-dialog-modal,
|
||
.confirm-dialog-modal
|
||
`);
|
||
|
||
dialogs.forEach(dialog => {
|
||
if (dialog.parentNode) {
|
||
dialog.parentNode.removeChild(dialog);
|
||
}
|
||
});
|
||
|
||
// 移除样式
|
||
const style = document.head.querySelector('style[data-component="dialog-components"]');
|
||
if (style) {
|
||
style.remove();
|
||
}
|
||
}
|
||
}
|