init

2025-11-28 21:20:40 +08:00
commit f940b95b67
73 changed files with 15721 additions and 0 deletions
--- a/static/js/ui-components.js
+++ b/static/js/ui-components.js
@@ -0,0 +1,120 @@
+// 现代化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;
+    }
+};