Fix: add rate button to free position mode

Author: xiaohajiayou

src/popup/script/submission.js

@@ -79,39 +79,166 @@ export const addRecordButton = () => {
             position: fixed;
             bottom: 20px;
             right: 20px;
-            padding: 12px 20px;
+            padding: 8px 12px;  /* 减小内边距 */
             background: #2563eb;
             color: white;
             border: none;
-            border-radius: 8px;
+            border-radius: 6px;  /* 稍微减小圆角 */
             cursor: pointer;
-            font-size: 14px;
-            box-shadow: 0 2px 10px rgba(37, 99, 235, 0.2);
-            transition: all 0.2s ease;
+            font-size: 13px;  /* 减小字体大小 */
+            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
+            transition: background 0.2s ease, box-shadow 0.2s ease;
             z-index: 9999;
+            user-select: none;
+            display: flex;
+            align-items: center;
+            line-height: 1;
         }
         
         .Leetcode-Mastery-Scheduler-record-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+            box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
+        }
+        
+        .Leetcode-Mastery-Scheduler-record-btn.dragging {
+            opacity: 0.8;
+            cursor: grabbing;
+            transition: none;
+        }
+        
+        .Leetcode-Mastery-Scheduler-record-btn .drag-handle {
+            display: inline-block;
+            margin-right: 6px;  /* 减小间距 */
+            cursor: grab;
+            opacity: 0.7;
+            font-size: 12px;  /* 减小拖动手柄大小 */
+        }
+        
+        .Leetcode-Mastery-Scheduler-record-btn .drag-handle:hover {
+            opacity: 1;
+        }
+        
+        .Leetcode-Mastery-Scheduler-record-btn .reset-position {
+            margin-left: 6px;  /* 减小间距 */
+            opacity: 0.7;
+            cursor: pointer;
+            font-size: 12px;  /* 减小重置按钮大小 */
+        }
+        
+        .Leetcode-Mastery-Scheduler-record-btn .reset-position:hover {
+            opacity: 1;
+        }
+        
+        .Leetcode-Mastery-Scheduler-record-btn .star-icon {
+            margin-right: 4px;
+            font-size: 11px;
         }
     `;
     document.head.appendChild(style);
 
+    // 从localStorage获取保存的位置
+    const savedPosition = JSON.parse(localStorage.getItem('LMS_rateButtonPosition') || '{"bottom": 20, "right": 20}');
+    
     // 创建按钮
     const button = document.createElement('button');
     button.className = 'Leetcode-Mastery-Scheduler-record-btn';
-    button.textContent = 'Rate It';
+    button.innerHTML = `
+        <span class="drag-handle">⋮</span>
+        <i class="fas fa-star star-icon"></i>Rate
+        <span class="reset-position" title="Reset position">↺</span>
+    `;
+    
+    // 设置保存的位置
+    button.style.bottom = `${savedPosition.bottom}px`;
+    button.style.right = `${savedPosition.right}px`;
 
     // 添加点击事件
-    button.addEventListener('click', async () => {
+    button.addEventListener('click', async (e) => {
+        // 如果点击的是拖动手柄或重置按钮，不触发评分
+        if (e.target.classList.contains('drag-handle') || e.target.classList.contains('reset-position')) {
+            return;
+        }
+        
         const result = await handleFeedbackSubmission();
         if (result) {
             console.log("Submission successfully tracked!");
             console.log("难度记录成功！");
         }
     });
-
+    
+    // 重置位置
+    const resetButton = button.querySelector('.reset-position');
+    resetButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        button.style.bottom = '20px';
+        button.style.right = '20px';
+        localStorage.setItem('LMS_rateButtonPosition', JSON.stringify({bottom: 20, right: 20}));
+    });
+    
+    // 添加拖拽功能
+    let isDragging = false;
+    let startX, startY, startBottom, startRight;
+    
+    const dragHandle = button.querySelector('.drag-handle');
+    
+    // 鼠标按下事件
+    const onMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        isDragging = true;
+        button.classList.add('dragging');
+        
+        // 记录初始位置
+        startX = e.clientX;
+        startY = e.clientY;
+        startBottom = parseInt(getComputedStyle(button).bottom);
+        startRight = parseInt(getComputedStyle(button).right);
+        
+        // 添加鼠标移动和松开事件
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+    
+    // 鼠标移动事件
+    const onMouseMove = (e) => {
+        if (!isDragging) return;
+        
+        // 计算新位置
+        const deltaX = startX - e.clientX;
+        const deltaY = e.clientY - startY;  // 修正垂直方向
+        
+        const newRight = Math.max(10, startRight + deltaX);
+        const newBottom = Math.max(10, startBottom - deltaY);
+        
+        // 确保按钮不会超出屏幕
+        const maxRight = window.innerWidth - button.offsetWidth - 10;
+        const maxBottom = window.innerHeight - button.offsetHeight - 10;
+        
+        button.style.right = `${Math.min(newRight, maxRight)}px`;
+        button.style.bottom = `${Math.min(newBottom, maxBottom)}px`;
+    };
+    
+    // 鼠标松开事件
+    const onMouseUp = () => {
+        if (!isDragging) return;
+        
+        isDragging = false;
+        button.classList.remove('dragging');
+        
+        // 保存新位置到localStorage
+        localStorage.setItem('LMS_rateButtonPosition', JSON.stringify({
+            bottom: parseInt(button.style.bottom),
+            right: parseInt(button.style.right)
+        }));
+        
+        // 移除事件监听器
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+    
+    // 添加事件监听器
+    dragHandle.addEventListener('mousedown', onMouseDown);
+    
     // 添加到页面
     document.body.appendChild(button);
 };