fix: 现在在每个lora左上角会有一个把手用于挪动lora进行排序，而不是整个lora实体都可以被挪动

2025-09-07 05:37:50 +09:00
parent dccd3ba32d
commit dbb1b40db8
3 changed files with 121 additions and 17 deletions
@@ -4,4 +4,5 @@ __pycache__
 **/*.exe
 /loras_userdatas/info
 init.json
-/panel
+/panel
+user_cloud_package.json
@@ -323,4 +323,83 @@
 .lora-item.drag-over-top,
 .lora-item.drag-over-bottom {
    border: none;
+}
+
+/* 在现有CSS基础上添加以下样式 */
+
+.lora-header-item {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 10px 6px 30px; /* 增加左边距为拖拽把手留空间 */
+    background: var(--p-dialog-background);
+    border-bottom: 1px solid var(--p-dialog-border-color);
+}
+
+.drag-handle {
+    position: absolute;
+    top: 50%;
+    left: 6px;
+    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    color: #666;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+    opacity: 0.6;
+}
+
+.drag-handle:hover {
+    background-color: var(--weilin-prompt-ui-hover-bg-color, rgba(0, 0, 0, 0.1));
+    color: var(--fg-color);
+    opacity: 1;
+}
+
+.drag-handle:active {
+    cursor: grabbing;
+    background-color: var(--weilin-prompt-ui-primary-color, #22c55e);
+    color: white;
+    opacity: 1;
+}
+
+.lora-item.dragging .drag-handle {
+    cursor: grabbing;
+    background-color: var(--weilin-prompt-ui-primary-color, #16a34a);
+    border-color: var(--weilin-prompt-ui-primary-color, #16a34a);
+    color: white;
+    transform: translateY(-50%) scale(0.95);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+/* 确保拖拽时的视觉效果 */
+.lora-item.dragging {
+    opacity: 0.7;
+    transform: rotate(2deg) scale(1.02);
+    z-index: 1000;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+/* 拖拽占位符样式优化 */
+.lora-placeholder {
+    height: 100px;
+    border: 2px dashed var(--weilin-prompt-ui-primary-color, #22c55e);
+    border-radius: 6px;
+    background: rgba(34, 197, 94, 0.1);
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--weilin-prompt-ui-primary-color, #22c55e);
+    font-size: 12px;
+    animation: placeholderPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes placeholderPulse {
+    0%, 100% { opacity: 0.6; }
+    50% { opacity: 1; }
 }
@@ -66,7 +66,8 @@ function getSystemLanguage() {
   return lang.startsWith('zh') ? 'zh' : 'en';
 }

-// Render a Lora item
+// 修改renderLoraItem函数中的HTML结构
+// 修改renderLoraItem函数中的HTML结构
 function renderLoraItem(seed, index, lora) {
   const loraListContainer = document.getElementById('loraListContainer_' + seed);

@@ -74,8 +75,7 @@ function renderLoraItem(seed, index, lora) {
   loraItem.className = `lora-item ${lora.hidden ? 'hidden-lora' : ''}`;
   loraItem.id = `lora-item-${seed}-${index}`;
   
-   // 添加拖动属性
-   loraItem.setAttribute('draggable', 'true');
+   // 移除整体拖拽属性
   loraItem.setAttribute('data-index', index.toString());

   const displayName = lora.display_name || lora.name || lora.lora;
@@ -83,6 +83,19 @@ function renderLoraItem(seed, index, lora) {
   loraItem.innerHTML = `
   <div class="lora-info">
       <div class="lora-header-item">
+           <div class="drag-handle" draggable="true" title="${getSystemLanguage() === 'zh' ? '拖拽排序' : 'Drag to reorder'}">
+               <svg viewBox="0 0 24 24" width="14" height="14">
+                   <circle cx="7" cy="7" r="1.5" fill="currentColor"/>
+                   <circle cx="12" cy="7" r="1.5" fill="currentColor"/>
+                   <circle cx="17" cy="7" r="1.5" fill="currentColor"/>
+                   <circle cx="7" cy="12" r="1.5" fill="currentColor"/>
+                   <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
+                   <circle cx="17" cy="12" r="1.5" fill="currentColor"/>
+                   <circle cx="7" cy="17" r="1.5" fill="currentColor"/>
+                   <circle cx="12" cy="17" r="1.5" fill="currentColor"/>
+                   <circle cx="17" cy="17" r="1.5" fill="currentColor"/>
+               </svg>
+           </div>
           <span class="lora-name" title="${displayName}">${displayName}</span>
           <div class="lora-actions">
               <button class="look-on-btn" title="${getSystemLanguage() === 'zh' ? '查看Lora' : 'Look on Lora'}">
@@ -119,20 +132,22 @@ function renderLoraItem(seed, index, lora) {
   </div>
   `;

-   // 添加拖动事件监听器
-   loraItem.addEventListener('dragstart', (e) => handleDragStart(e, seed, index));
-//    loraItem.addEventListener('dragover', handleDragOver);
-//    loraItem.addEventListener('drop', (e) => handleDrop(e, seed));
-   loraItem.addEventListener('dragend', handleDragEnd);
+   // 只在拖拽把手上添加拖拽事件
+   const dragHandle = loraItem.querySelector('.drag-handle');
+   dragHandle.addEventListener('dragstart', (e) => handleDragStart(e, seed, index));
+   dragHandle.addEventListener('dragend', handleDragEnd);
+   
+   // 防止把手事件冒泡
+   dragHandle.addEventListener('mousedown', (e) => {
+       e.stopPropagation();
+   });

-   // Add event listeners
+   // 其余事件监听器保持不变
   loraItem.querySelector('.look-on-btn').addEventListener('click', () => lookOnLora(lora.lora));
   loraItem.querySelector('.remove-btn').addEventListener('click', () => removeLora(seed, index));

-   // Add input change listeners
   const weightInputs = loraItem.querySelectorAll('.lora-weight');
   weightInputs.forEach(input => {
-
        input.addEventListener('mousedown', (e) => {
            e.stopPropagation();
        });
@@ -157,7 +172,7 @@ function renderLoraItem(seed, index, lora) {

   loraListContainer.appendChild(loraItem);

-   // If display name is missing, try to fetch it from server and update UI
+   // 其余代码保持不变...
   if (!lora.display_name && lora.lora) {
       try {
           fetch(`/weilin/prompt_ui/api/lorainfo/api/loras/info?file=${encodeURIComponent(lora.lora)}`)
@@ -178,7 +193,6 @@ function renderLoraItem(seed, index, lora) {
       } catch (e) { /* ignore */ }
   }

-   // Bind visibility toggle switch
   const visToggle = loraItem.querySelector(`#visible-toggle-${seed}-${index}`);
   if (visToggle) {
       visToggle.addEventListener('change', (e) => {
@@ -190,13 +204,23 @@ function renderLoraItem(seed, index, lora) {
           }
       });
   }
+   
   loraItem.querySelector('.look-on-btn').addEventListener('mousedown', (e) => {
        e.stopPropagation();
-        });
+   });

-    loraItem.querySelector('.remove-btn').addEventListener('mousedown', (e) => {
+   loraItem.querySelector('.remove-btn').addEventListener('mousedown', (e) => {
        e.stopPropagation();
-        });
+   });
+}
+
+// 修改handleDragStart函数，从把手获取父元素信息
+function handleDragStart(e, seed, index) {
+    draggedIndex = index;
+    const loraItem = e.target.closest('.lora-item');
+    loraItem.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/html', loraItem.outerHTML);
 }

 // Get hide button content