121 lines
4.3 KiB
JavaScript
121 lines
4.3 KiB
JavaScript
// 现代化UI组件库
|
||
const UI = {
|
||
// 显示通知消息
|
||
notify(message, type = 'info', duration = 3000) {
|
||
const container = document.getElementById('notification-container') || this.createNotificationContainer();
|
||
const notification = document.createElement('div');
|
||
notification.className = `notification notification-${type}`;
|
||
notification.innerHTML = `
|
||
<div class="notification-content">
|
||
<span class="notification-icon">${this.getIcon(type)}</span>
|
||
<span class="notification-message">${message}</span>
|
||
</div>
|
||
`;
|
||
container.appendChild(notification);
|
||
setTimeout(() => notification.classList.add('show'), 10);
|
||
setTimeout(() => {
|
||
notification.classList.remove('show');
|
||
setTimeout(() => notification.remove(), 300);
|
||
}, duration);
|
||
},
|
||
|
||
// 显示确认对话框
|
||
confirm(title, message, onConfirm, onCancel) {
|
||
const modal = document.createElement('div');
|
||
modal.className = 'ui-modal';
|
||
modal.innerHTML = `
|
||
<div class="ui-modal-overlay"></div>
|
||
<div class="ui-modal-content ui-modal-confirm">
|
||
<h3>${title}</h3>
|
||
<p>${message}</p>
|
||
<div class="ui-modal-actions">
|
||
<button class="ui-btn ui-btn-secondary" data-action="cancel">取消</button>
|
||
<button class="ui-btn ui-btn-primary" data-action="confirm">确认</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(modal);
|
||
setTimeout(() => modal.classList.add('show'), 10);
|
||
|
||
modal.querySelector('[data-action="confirm"]').onclick = () => {
|
||
this.closeModal(modal);
|
||
if (onConfirm) onConfirm();
|
||
};
|
||
modal.querySelector('[data-action="cancel"]').onclick = () => {
|
||
this.closeModal(modal);
|
||
if (onCancel) onCancel();
|
||
};
|
||
modal.querySelector('.ui-modal-overlay').onclick = () => {
|
||
this.closeModal(modal);
|
||
if (onCancel) onCancel();
|
||
};
|
||
},
|
||
|
||
// 显示输入对话框
|
||
prompt(title, placeholder, defaultValue, onConfirm, onCancel) {
|
||
const modal = document.createElement('div');
|
||
modal.className = 'ui-modal';
|
||
modal.innerHTML = `
|
||
<div class="ui-modal-overlay"></div>
|
||
<div class="ui-modal-content ui-modal-prompt">
|
||
<h3>${title}</h3>
|
||
<input type="text" class="ui-input" placeholder="${placeholder}" value="${defaultValue || ''}">
|
||
<div class="ui-modal-actions">
|
||
<button class="ui-btn ui-btn-secondary" data-action="cancel">取消</button>
|
||
<button class="ui-btn ui-btn-primary" data-action="confirm">确认</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(modal);
|
||
setTimeout(() => modal.classList.add('show'), 10);
|
||
|
||
const input = modal.querySelector('.ui-input');
|
||
input.focus();
|
||
input.select();
|
||
|
||
const confirm = () => {
|
||
const value = input.value.trim();
|
||
if (value) {
|
||
this.closeModal(modal);
|
||
if (onConfirm) onConfirm(value);
|
||
}
|
||
};
|
||
|
||
modal.querySelector('[data-action="confirm"]').onclick = confirm;
|
||
input.onkeypress = (e) => { if (e.key === 'Enter') confirm(); };
|
||
modal.querySelector('[data-action="cancel"]').onclick = () => {
|
||
this.closeModal(modal);
|
||
if (onCancel) onCancel();
|
||
};
|
||
modal.querySelector('.ui-modal-overlay').onclick = () => {
|
||
this.closeModal(modal);
|
||
if (onCancel) onCancel();
|
||
};
|
||
},
|
||
|
||
// 关闭模态框
|
||
closeModal(modal) {
|
||
modal.classList.remove('show');
|
||
setTimeout(() => modal.remove(), 300);
|
||
},
|
||
|
||
// 创建通知容器
|
||
createNotificationContainer() {
|
||
const container = document.createElement('div');
|
||
container.id = 'notification-container';
|
||
document.body.appendChild(container);
|
||
return container;
|
||
},
|
||
|
||
// 获取图标
|
||
getIcon(type) {
|
||
const icons = {
|
||
success: '✓',
|
||
error: '✕',
|
||
warning: '⚠',
|
||
info: 'ℹ'
|
||
};
|
||
return icons[type] || icons.info;
|
||
}
|
||
};
|