微件

TierListMaker：修订间差异

来自卡厄思梦境WIKI

←上一编辑下一编辑→
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,106次编辑
无编辑摘要
律Rhyme​（留言 | 贡献）
行政员、​界面管理员、​管理员
4,106次编辑
无编辑摘要
第7行： 第7行：
     transition: all 0.2s ease;
     transition: all 0.2s ease;
     min-height: 120px;
     min-height: 120px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}
}


第17行： 第21行：
     position: relative;
     position: relative;
     min-height: 150px;
     min-height: 150px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}
}


第105行： 第113行：
}
}


/* 编辑模式下的样式 */
.tier-header.editable {
.tier-header.editable {
     cursor: pointer;
     cursor: pointer;
第143行： 第152行：
}
}


/* 颜色选择器容器 */
.color-picker-popup {
.color-picker-popup {
     position: fixed;
     position: fixed;
第206行： 第216行：
     background: rgba(0,0,0,0.5);
     background: rgba(0,0,0,0.5);
     z-index: 999;
     z-index: 999;
}
.avatar-frame {
    display: inline-block;
    margin: 0;
}
}
</style>
</style>
第236行： 第251行：
          
          
         setup: function() {
         setup: function() {
            this.cleanupContainers(); // 清理可能存在的空元素
             this.initDragAndDrop();
             this.initDragAndDrop();
             this.initButtons();
             this.initButtons();
             this.loadState();
             this.loadState();
        },
       
        // 清理容器中的空元素
        cleanupContainers: function() {
            const containers = document.querySelectorAll('.tier-row, #character-pool');
            containers.forEach(container => {
                // 移除所有空的文本节点和空div
                const children = Array.from(container.childNodes);
                children.forEach(child => {
                    if (child.nodeType === Node.TEXT_NODE && !child.textContent.trim()) {
                        container.removeChild(child);
                    } else if (child.nodeType === Node.ELEMENT_NODE) {
                        // 移除空的div或没有avatar-frame类的空元素
                        if (!child.classList.contains('avatar-frame') &&
                            !child.querySelector('.avatar-frame') &&
                            !child.textContent.trim()) {
                            container.removeChild(child);
                        }
                    }
                });
            });
         },
         },
          
          
第290行： 第327行：
                 el.classList.remove('drag-over');
                 el.classList.remove('drag-over');
             });
             });
           
            // 清理可能产生的空元素
            this.cleanupContainers();
              
              
             // 保存状态
             // 保存状态
第324行： 第364行：
              
              
             if (this.draggedElement && this.draggedElement.parentElement !== element) {
             if (this.draggedElement && this.draggedElement.parentElement !== element) {
                 // 确保只移动avatar-frame元素
                 // 从原位置移除
                 if (this.draggedElement.classList.contains('avatar-frame')) {
                 if (this.draggedElement.parentElement) {
                     // 从原位置移除
                     this.draggedElement.parentElement.removeChild(this.draggedElement);
                    if (this.draggedElement.parentElement) {
                }
                        this.draggedElement.parentElement.removeChild(this.draggedElement);
               
                    }
                // 添加到新位置
                   
                element.appendChild(this.draggedElement);
                    // 添加到新位置
               
                    element.appendChild(this.draggedElement);
                // 确保图片透明度正常
                   
                const img = this.draggedElement.querySelector('img');
                    // 确保图片透明度正常
                if (img) {
                    const img = this.draggedElement.querySelector('img');
                    img.style.opacity = '1';
                    if (img) {
                        img.style.opacity = '1';
                    }
                 }
                 }
               
                // 清理空元素
                this.cleanupContainers();
             }
             }
              
              
第440行： 第480行：
                 if (newName) {
                 if (newName) {
                     header.setAttribute('data-tier', newName);
                     header.setAttribute('data-tier', newName);
                     header.querySelector('.delete-row-btn').remove();
                     const deleteBtn = header.querySelector('.delete-row-btn');
                    if (deleteBtn) deleteBtn.remove();
                     header.textContent = newName;
                     header.textContent = newName;
                     header.style.backgroundColor = newColor;
                     header.style.backgroundColor = newColor;
                      
                      
                     // 重新添加删除按钮
                     // 重新添加删除按钮
                     const deleteBtn = document.createElement('button');
                     const newDeleteBtn = document.createElement('button');
                     deleteBtn.className = 'delete-row-btn';
                     newDeleteBtn.className = 'delete-row-btn';
                     deleteBtn.textContent = '删除';
                     newDeleteBtn.textContent = '删除';
                     deleteBtn.onclick = (e) => {
                     newDeleteBtn.onclick = (e) => {
                         e.stopPropagation();
                         e.stopPropagation();
                         this.deleteRow(header.parentElement);
                         this.deleteRow(header.parentElement);
                     };
                     };
                     header.appendChild(deleteBtn);
                     header.appendChild(newDeleteBtn);
                      
                      
                     // 更新对应的tier-row
                     // 更新对应的tier-row
第544行： 第585行：
              
              
             const tierRow = row.querySelector('.tier-row');
             const tierRow = row.querySelector('.tier-row');
            const avatars = Array.from(tierRow.querySelectorAll('.avatar-frame'));
             const pool = document.getElementById('character-pool');
             const pool = document.getElementById('character-pool');
              
              
             // 只移动avatar-frame元素
             // 将角色移回角色池
             if (tierRow) {
             avatars.forEach(avatar => {
                const avatars = tierRow.querySelectorAll('.avatar-frame');
                pool.appendChild(avatar);
                avatars.forEach(avatar => {
            });
                    pool.appendChild(avatar);
                });
            }
              
              
             // 删除行
             // 删除行
             row.remove();
             row.remove();
           
            // 清理空元素
            this.cleanupContainers();
              
              
             this.saveState();
             this.saveState();
第635行： 第677行：
                                 if (tierRow) {
                                 if (tierRow) {
                                     tierRow.setAttribute('data-tier', savedRow.name);
                                     tierRow.setAttribute('data-tier', savedRow.name);
                                    tierRow.innerHTML = ''; // 清空内容
                                 }
                                 }
                             }
                             }
第666行： 第709行：
                         rowData.characters.forEach(charId => {
                         rowData.characters.forEach(charId => {
                             const avatar = this.findAvatarById(charId);
                             const avatar = this.findAvatarById(charId);
                             if (avatar) {
                             if (avatar && avatar.parentElement) {
                                 tierRow.appendChild(avatar);
                                 tierRow.appendChild(avatar);
                             }
                             }
                         });
                         });
                     });
                     });
                   
                    // 清理可能产生的空元素
                    this.cleanupContainers();
                 }, 100);
                 }, 100);
                  
                  
第768行： 第814行：
             }
             }
              
              
             // 只选择tier-row中的avatar-frame元素
             // 收集所有avatar元素
             const tierRows = document.querySelectorAll('.tier-row');
             const allAvatars = Array.from(document.querySelectorAll('.avatar-frame'));
           
            // 清空所有tier行
            document.querySelectorAll('.tier-row').forEach(row => {
                row.innerHTML = '';
            });
           
            // 清空角色池
            pool.innerHTML = '';
              
              
             tierRows.forEach(row => {
             // 将所有角色添加回角色池
                const avatars = row.querySelectorAll('.avatar-frame');
            allAvatars.forEach(avatar => {
                avatars.forEach(avatar => {
                pool.appendChild(avatar);
                    pool.appendChild(avatar);
                const img = avatar.querySelector('img');
                    const img = avatar.querySelector('img');
                if (img) {
                    if (img) {
                    img.style.opacity = '1';
                        img.style.opacity = '1';
                 }
                    }
                 });
             });
             });
           
            // 清理空元素
            this.cleanupContainers();
              
              
             // 清除保存的状态
             // 清除保存的状态

2025年10月20日 (一) 21:34的版本

检索自“http://cznwiki.com/index.php?title=微件:TierListMaker&oldid=3521”