update temp

2025-10-28 12:22:27 +08:00
parent aed46f2adc
commit 6e86ed3f65
10 changed files with 2339 additions and 783 deletions
--- a/public/test-drag.html
+++ b/public/test-drag.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>拖拽测试</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        .editor-container {
+            border: 2px solid #e5e7eb;
+            border-radius: 8px;
+            min-height: 400px;
+            background: white;
+        }
+        
+        .debug-info {
+            background: #f1f5f9;
+            border: 1px solid #cbd5e1;
+            border-radius: 6px;
+            padding: 12px;
+            margin: 20px 0;
+            font-family: monospace;
+            font-size: 12px;
+        }
+        
+        /* 确保我们的拖拽样式生效 */
+        .tiptap {
+            min-height: 350px;
+            padding: 20px;
+            outline: none;
+        }
+        
+        .tiptap .draggable-block {
+            position: relative;
+            cursor: grab;
+            transition: all 0.2s ease;
+            border-radius: 4px;
+            margin: 2px 0;
+        }
+        
+        .tiptap .draggable-block:hover {
+            background-color: rgba(59, 130, 246, 0.08);
+            padding: 4px 8px;
+            margin: -2px -6px;
+        }
+        
+        .tiptap .draggable-block:active {
+            cursor: grabbing;
+        }
+        
+        .tiptap .dragging {
+            opacity: 0.6;
+            transform: rotate(1deg);
+            background-color: rgba(59, 130, 246, 0.1) !important;
+        }
+        
+        .tiptap .ProseMirror-dropcursor {
+            pointer-events: none;
+            position: absolute;
+            height: 1.2em;
+            width: 3px;
+            background-color: #3b82f6;
+            margin-left: -1px;
+            z-index: 10;
+            border-radius: 1px;
+        }
+        
+        .status {
+            padding: 8px 12px;
+            border-radius: 4px;
+            margin: 10px 0;
+            font-weight: 500;
+        }
+        
+        .status.ready {
+            background: #dcfce7;
+            color: #166534;
+            border: 1px solid #bbf7d0;
+        }
+        
+        .status.dragging {
+            background: #fef3c7;
+            color: #92400e;
+            border: 1px solid #fde68a;
+        }
+        
+        .status.dropped {
+            background: #dbeafe;
+            color: #1e40af;
+            border: 1px solid #bfdbfe;
+        }
+    </style>
+</head>
+<body>
+    <h1>🧪 拖拽功能测试</h1>
+    
+    <div class="status ready" id="status">
+        ✅ 编辑器已就绪 - 可以开始拖拽测试
+    </div>
+    
+    <div class="debug-info" id="debug">
+        等待拖拽操作...
+    </div>
+    
+    <div class="editor-container">
+        <div id="editor"></div>
+    </div>
+    
+    <script>
+        // 简单的调试信息显示
+        function updateDebug(message) {
+            document.getElementById('debug').textContent = new Date().toLocaleTimeString() + ': ' + message;
+        }
+        
+        function updateStatus(message, type = 'ready') {
+            const status = document.getElementById('status');
+            status.textContent = message;
+            status.className = 'status ' + type;
+        }
+        
+        // 全局事件监听器来监控拖拽状态
+        document.addEventListener('dragstart', () => {
+            updateStatus('🟡 正在拖拽中...', 'dragging');
+            updateDebug('拖拽开始');
+        });
+        
+        document.addEventListener('dragend', () => {
+            updateStatus('✅ 拖拽结束', 'ready');
+            updateDebug('拖拽结束');
+        });
+        
+        document.addEventListener('drop', () => {
+            updateStatus('🔵 已放置', 'dropped');
+            updateDebug('元素已放置');
+            setTimeout(() => {
+                updateStatus('✅ 编辑器已就绪 - 可以开始拖拽测试', 'ready');
+            }, 2000);
+        });
+        
+        updateDebug('页面加载完成，等待编辑器初始化...');
+    </script>
+</body>
+</html>