微件

配队模拟器:修订间差异

来自卡厄思梦境WIKI

律Rhyme留言 | 贡献
创建页面,内容为“<script> (function() { 'use strict'; // ========== 工具函数 ========== function show(el) { if (el) el.style.display = 'block'; } function hide(el) { if (el) el.style.display = 'none'; } // ========== 战斗员选择 ========== const characterBox = document.getElementById('character-box'); const selectedCharacter = document.getElementById('selected-character'); characterBox.addEventListener('click', function(e) { e.…”
 
律Rhyme留言 | 贡献
无编辑摘要
 
(未显示同一用户的33个中间版本)
第1行: 第1行:
<!-- 加载html2canvas库 -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
<script>
(function() {
(function() {
     'use strict';
     // 等待DOM加载完成
    function initTeamSimulator() {
        // 为每个角色单元保存独立的状态
        var characterUnits = {};
        var currentActiveUnit = null;
       
        // 初始化所有角色单元
        document.querySelectorAll('.character-unit').forEach(function(unit) {
            var unitIndex = unit.getAttribute('data-unit-index');
            characterUnits[unitIndex] = {
                characterName: null,
                characterClass: null,
                cardIdCounter: 0,
                selectedCards: {}
            };
        });


    // ========== 工具函数 ==========
        // ========== 保存为图片功能 ==========
    function show(el) { if (el) el.style.display = 'block'; }
        document.getElementById('save-team-btn').addEventListener('click', function() {
    function hide(el) { if (el) el.style.display = 'none'; }
            var btn = this;
            var originalText = btn.textContent;
            btn.textContent = '生成中...';
            btn.style.pointerEvents = 'none';
           
            var contentElement = document.getElementById('team-content');
           
            // 临时隐藏删除按钮
            var deleteButtons = contentElement.querySelectorAll('.card-delete-btn');
            deleteButtons.forEach(function(btn) {
                btn.style.display = 'none';
            });
           
            html2canvas(contentElement, {
                backgroundColor: '#ffffff',
                scale: 2,
                logging: false,
                useCORS: true,
                allowTaint: true
            }).then(function(canvas) {
                // 恢复删除按钮
                deleteButtons.forEach(function(btn) {
                    btn.style.display = 'flex';
                });
               
                // 下载图片
                var link = document.createElement('a');
                link.download = '配队方案_' + new Date().getTime() + '.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
               
                btn.textContent = originalText;
                btn.style.pointerEvents = 'auto';
            }).catch(function(error) {
                console.error('保存失败:', error);
                alert('保存失败,请重试');
               
                // 恢复删除按钮
                deleteButtons.forEach(function(btn) {
                    btn.style.display = 'flex';
                });
               
                btn.textContent = originalText;
                btn.style.pointerEvents = 'auto';
            });
        });


    // ========== 战斗员选择 ==========
        // 点击角色槽位显示选择窗口
    const characterBox = document.getElementById('character-box');
        document.querySelectorAll('.character-slot').forEach(function(slot) {
    const selectedCharacter = document.getElementById('selected-character');
            slot.addEventListener('click', function() {
                currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
                document.getElementById('character-modal').style.display = 'block';
            });
        });
       
        // 关闭角色选择窗口
        document.getElementById('close-character-modal').addEventListener('click', function() {
            document.getElementById('character-modal').style.display = 'none';
        });
       
        // 点击遮罩层关闭窗口
        document.getElementById('character-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });
       
        // 加载战斗员卡牌 - 支持多角色
        function loadCharacterCards(characterName, unitIndex) {
            if (!characterName) {
                console.error('战斗员名称为空');
                return;
            }
           
            var unitData = characterUnits[unitIndex];
            unitData.characterName = characterName;
            console.log('加载战斗员卡牌:', characterName, '单元:', unitIndex);
           
            var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
            var deckArea = unit.querySelector('.deck-area');
           
            // 显示加载状态
            var placeholder = deckArea.querySelector('.deck-placeholder');
            if (placeholder) {
                placeholder.textContent = '加载中...';
                placeholder.style.fontSize = '18px';
                placeholder.style.color = '#999';
            }
           
            var apiUrl = mw.util.wikiScript('api');
            var params = {
                action: 'parse',
                format: 'json',
                text: '{{#invoke:配队/卡牌|deck|' + characterName + '}}',
                contentmodel: 'wikitext',
                disablelimitreport: true,
                wrapoutputclass: ''
            };
           
            fetch(apiUrl + '?' + new URLSearchParams(params))
                .then(response => response.json())
                .then(data => {
                    if (data.parse && data.parse.text) {
                        // 清空并添加卡牌
                        deckArea.innerHTML = data.parse.text['*'];
                       
                        // 重置该单元的卡牌状态
                        unitData.selectedCards = {};
                        unitData.cardIdCounter = 0;
                       
                        setTimeout(function() {
                            initializeCardFeatures(unitIndex);
                        }, 100);
                    } else {
                        if (placeholder) {
                            placeholder.textContent = '加载失败';
                            placeholder.style.color = 'red';
                        }
                    }
                })
                .catch(error => {
                    console.error('加载卡牌失败:', error);
                    if (placeholder) {
                        placeholder.textContent = '加载出错';
                        placeholder.style.color = 'red';
                    }
                });
        }
       
        // 初始化卡牌功能
        function initializeCardFeatures(unitIndex) {
            var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
            var unitData = characterUnits[unitIndex];
            var deckArea = unit.querySelector('.deck-area');
           
            var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
           
            wrappers.forEach(function(wrapper) {
                var card = wrapper.querySelector('.card-small-wrapper');
                if (!card) return;
               
                // 确保wrapper样式正确
                wrapper.style.flexShrink = '0';
                wrapper.style.display = 'inline-block';
               
                var uniqueId = 'deck-card-' + unitIndex + '-' + (++unitData.cardIdCounter);
                wrapper.setAttribute('data-unique-id', uniqueId);
                wrapper.setAttribute('data-unit-index', unitIndex);
               
                unitData.selectedCards[uniqueId] = {
                    module: wrapper.getAttribute('data-module') || unitData.characterName,
                    cardName: wrapper.getAttribute('data-card'),
                    variantType: null,
                    variantParam: null,
                    variantIndex: null
                };
               
                if (!card.querySelector('.card-delete-btn')) {
                    var deleteBtn = document.createElement('div');
                    deleteBtn.className = 'card-delete-btn';
                    deleteBtn.innerHTML = '×';
                    deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                   
                    deleteBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        wrapper.remove();
                        delete unitData.selectedCards[uniqueId];
                       
                        // 如果没有卡牌了,显示占位符
                        checkAndShowPlaceholder(unitIndex);
                    });
                   
                    card.style.position = 'relative';
                    card.appendChild(deleteBtn);
                }
            });
           
            setupGlobalModalListener();
        }
       
        // 检查并显示占位符
        function checkAndShowPlaceholder(unitIndex) {
            var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
            var deckArea = unit.querySelector('.deck-area');
            var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
           
            if (wrappers.length === 0) {
                deckArea.innerHTML = '<div class="deck-placeholder" style="width: 100%; text-align: center; font-size: 48px; color: #ccc; line-height: 330px;">+</div>';
            }
        }
       
        // 设置全局模态框监听器
        function setupGlobalModalListener() {
            if (window.deckModalObserver) {
                window.deckModalObserver.disconnect();
            }
           
            window.deckModalObserver = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                        var modal = mutation.target;
                        if (modal.classList.contains('card-modal') && modal.style.display !== 'none') {
                            setTimeout(function() {
                                enhanceActiveModal(modal);
                            }, 100);
                        }
                    }
                });
            });
           
            document.querySelectorAll('.card-modal').forEach(function(modal) {
                window.deckModalObserver.observe(modal, {
                    attributes: true,
                    attributeFilter: ['style']
                });
            });
        }
       
        // 增强当前活动的模态框
        function enhanceActiveModal(modal) {
            var cardId = modal.id ? modal.id.replace('-modal', '') : null;
            if (!cardId) return;
           
            var deckCard = null;
            var uniqueId = null;
            var unitIndex = null;
           
            document.querySelectorAll('.deck-area .deck-card-wrapper').forEach(function(wrapper) {
                var wrapperCard = wrapper.querySelector('.card-small-wrapper');
                if (wrapperCard && wrapperCard.getAttribute('data-card-id') === cardId) {
                    deckCard = wrapper;
                    uniqueId = wrapper.getAttribute('data-unique-id');
                    unitIndex = wrapper.getAttribute('data-unit-index');
                }
            });
           
            if (!deckCard || !uniqueId || !unitIndex) {
                return;
            }
           
            var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
            if (!cardData) {
                return;
            }
           
            if (modal.hasAttribute('data-deck-enhanced')) {
                return;
            }
            modal.setAttribute('data-deck-enhanced', 'true');
           
            var inspirationButton = modal.querySelector('.inspiration-button');
            if (inspirationButton) {
                inspirationButton.addEventListener('click', function() {
                    setTimeout(function() {
                        enhanceInspirationView(modal, uniqueId, unitIndex);
                    }, 100);
                });
            }
           
            var godButton = modal.querySelector('.god-inspiration-button');
            if (godButton) {
                godButton.addEventListener('click', function() {
                    setTimeout(function() {
                        enhanceGodView(modal, uniqueId, unitIndex);
                    }, 100);
                });
            }
        }
       
        // 关闭模态框并恢复滚动
        function closeModalAndRestoreScroll(modal) {
            modal.style.display = 'none';
            modal.removeAttribute('data-deck-enhanced');
            document.body.style.overflow = '';
            document.body.style.position = '';
            document.documentElement.style.overflow = '';
            document.body.classList.remove('modal-open');
            document.documentElement.classList.remove('modal-open');
            window.dispatchEvent(new Event('resize'));
        }
       
        // 增强灵光一闪视图
        function enhanceInspirationView(modal, uniqueId, unitIndex) {
            var inspirationView = modal.querySelector('.inspiration-view');
            if (!inspirationView) return;
           
            var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
            if (!cardData) return;
           
            var variants = inspirationView.querySelectorAll('.inspiration-variant');
            variants.forEach(function(variant, index) {
                if (!variant.querySelector('.select-variant-btn')) {
                    var selectBtn = document.createElement('div');
                    selectBtn.className = 'select-variant-btn';
                    selectBtn.innerHTML = '选择此变体';
                    selectBtn.style.cssText = 'margin-top:10px;padding:8px 15px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;font-size:14px;font-weight:bold;border-radius:6px;cursor:pointer;text-align:center;';
                   
                    selectBtn.addEventListener('click', function() {
                        replaceCard(uniqueId, unitIndex, '灵光一闪', index + 1);
                        closeModalAndRestoreScroll(modal);
                    });
                   
                    variant.appendChild(selectBtn);
                }
            });
        }
       
        // 增强神光一闪视图
        function enhanceGodView(modal, uniqueId, unitIndex) {
            var godView = modal.querySelector('.god-inspiration-view');
            if (!godView) return;
           
            var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
            if (!cardData) return;
           
            var godGroups = godView.querySelectorAll('.god-group');
            godGroups.forEach(function(group) {
                var groupNameEl = group.querySelector('div[style*="color:#ffd36a"]');
                if (!groupNameEl) return;
               
                var groupName = groupNameEl.textContent.trim();
                var variants = group.querySelectorAll('.god-variant-card');
               
                variants.forEach(function(variant, index) {
                    if (!variant.querySelector('.select-variant-btn')) {
                        var selectBtn = document.createElement('div');
                        selectBtn.className = 'select-variant-btn';
                        selectBtn.innerHTML = '选择';
                        selectBtn.style.cssText = 'margin-top:5px;padding:6px 12px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;font-size:12px;font-weight:bold;border-radius:4px;cursor:pointer;text-align:center;';
                       
                        selectBtn.addEventListener('click', function() {
                            replaceCard(uniqueId, unitIndex, '神光一闪', groupName, index + 1);
                            closeModalAndRestoreScroll(modal);
                        });
                       
                        variant.appendChild(selectBtn);
                    }
                });
            });
        }
       
        // 替换卡牌
        function replaceCard(uniqueId, unitIndex, variantType, param1, param2) {
            var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
            if (!cardData) {
                console.error('找不到卡牌数据:', uniqueId);
                return;
            }
           
            var wrapper = document.querySelector('[data-unique-id="' + uniqueId + '"]');
            if (!wrapper) {
                console.error('找不到卡牌容器:', uniqueId);
                return;
            }
           
            cardData.variantType = variantType;
            cardData.variantParam = param1;
            cardData.variantIndex = param2;
           
            var oldContent = wrapper.innerHTML;
            wrapper.innerHTML = '<div style="color:#999;padding:20px;">加载中...</div>';
           
            var invokeText = '{{#invoke:卡牌|main|' + cardData.module + '|' + cardData.cardName;
            if (variantType === '灵光一闪') {
                invokeText += '|灵光一闪|' + param1;
            } else if (variantType === '神光一闪') {
                invokeText += '|神光一闪|' + param1 + '|' + param2;
            }
            invokeText += '}}';
           
            var apiUrl = mw.util.wikiScript('api');
            var params = {
                action: 'parse',
                format: 'json',
                text: invokeText,
                contentmodel: 'wikitext',
                disablelimitreport: true
            };
           
            fetch(apiUrl + '?' + new URLSearchParams(params))
                .then(response => response.json())
                .then(data => {
                    if (data.parse && data.parse.text) {
                        wrapper.innerHTML = data.parse.text['*'];
                       
                        setTimeout(function() {
                            var newCard = wrapper.querySelector('.card-small-wrapper');
                            if (newCard) {
                                // 确保wrapper样式
                                wrapper.style.flexShrink = '0';
                                wrapper.style.display = 'inline-block';
                               
                                var deleteBtn = document.createElement('div');
                                deleteBtn.className = 'card-delete-btn';
                                deleteBtn.innerHTML = '×';
                                deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                               
                                deleteBtn.addEventListener('click', function(e) {
                                    e.stopPropagation();
                                    wrapper.remove();
                                    delete characterUnits[unitIndex].selectedCards[uniqueId];
                                    checkAndShowPlaceholder(unitIndex);
                                });
                               
                                newCard.style.position = 'relative';
                                newCard.appendChild(deleteBtn);
                            }
                           
                            setupGlobalModalListener();
                            document.body.style.overflow = '';
                            document.documentElement.style.overflow = '';
                        }, 100);
                    } else {
                        wrapper.innerHTML = oldContent;
                    }
                })
                .catch(error => {
                    console.error('替换卡牌失败:', error);
                    wrapper.innerHTML = oldContent;
                    document.body.style.overflow = '';
                    document.documentElement.style.overflow = '';
                });
        }
       
        // 选择角色
        document.getElementById('character-list').addEventListener('click', function(e) {
            var characterOption = e.target.closest('.character-option');
            if (characterOption && currentActiveUnit) {
                var characterName = characterOption.getAttribute('data-character-name') ||
                                  characterOption.getAttribute('data-name') ||
                                  characterOption.getAttribute('title');
               
                var characterClass = characterOption.getAttribute('data-class') ||
                                  characterOption.getAttribute('data-职业');
               
                if (!characterName) {
                    var nameEl = characterOption.querySelector('.character-name, [class*="name"]');
                    if (nameEl) characterName = nameEl.textContent.trim();
                }
               
                characterUnits[currentActiveUnit].characterClass = characterClass;
               
                var clonedCard = characterOption.cloneNode(true);
                clonedCard.classList.remove('character-option');
                clonedCard.style.cursor = 'default';
               
                var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
                var characterSlot = unit.querySelector('.character-slot');
                characterSlot.innerHTML = '';
                characterSlot.appendChild(clonedCard);
                characterSlot.style.border = 'none';
               
                document.getElementById('character-modal').style.display = 'none';
               
                if (characterName) {
                    loadCharacterCards(characterName, currentActiveUnit);
                }
            }
        });
       
        // 选择伙伴
        document.querySelectorAll('.partner-slot').forEach(function(slot) {
            slot.addEventListener('click', function() {
                currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
                document.getElementById('partner-modal').style.display = 'block';
            });
        });
       
        document.getElementById('close-partner-modal').addEventListener('click', function() {
            document.getElementById('partner-modal').style.display = 'none';
        });
       
        document.getElementById('partner-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });
       
        document.getElementById('partner-list').addEventListener('click', function(e) {
            var partnerOption = e.target.closest('.partner-option');
            if (partnerOption && currentActiveUnit) {
                var partnerId = partnerOption.dataset.partnerId || partnerOption.getAttribute('data-partner-id');
               
                var partnerImg = document.createElement('img');
                partnerImg.src = '/index.php?title=Special:Redirect/file/Portrait_character_wide_' + partnerId + '.png';
                partnerImg.style.width = '159px';
                partnerImg.style.height = '77px';
                partnerImg.style.objectFit = 'cover';
               
                var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
                var partnerSlot = unit.querySelector('.partner-slot');
                partnerSlot.innerHTML = '';
                partnerSlot.appendChild(partnerImg);
                partnerSlot.style.border = 'none';
               
                document.getElementById('partner-modal').style.display = 'none';
            }
        });
       
        // ========== 卡牌添加功能 ==========
        var currentDeckArea = null;
        var currentCardType = 'character';
       
        // 点击卡组区域打开卡牌选择
        document.querySelectorAll('.deck-area').forEach(function(deckArea) {
            var originalClickHandler = function(e) {
                if (e.target.closest('.deck-card-wrapper') ||
                    e.target.closest('.card-small-wrapper') ||
                    e.target.closest('.card-delete-btn') ||
                    e.target.classList.contains('card-delete-btn')) {
                    return;
                }
               
                currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
                currentDeckArea = this;
               
                var unit = this.closest('.character-unit');
                var characterSlot = unit.querySelector('.character-slot');
               
                var hasCharacter = characterSlot.querySelector('img') !== null ||
                                  characterSlot.innerHTML.indexOf('data-character-name') > -1 ||
                                  !characterSlot.querySelector('.placeholder');
               
                var unitData = characterUnits[currentActiveUnit];
                if (!unitData.characterName) {
                    hasCharacter = false;
                }
               
                if (!hasCharacter) {
                    alert('请先选择战斗员!');
                    return;
                }
               
                currentCardType = 'character';
                document.querySelectorAll('.card-type-tab').forEach(function(tab) {
                    tab.classList.remove('active');
                    tab.style.borderBottomColor = 'transparent';
                    tab.style.fontWeight = 'normal';
                });
                var characterTab = document.querySelector('.card-type-tab[data-type="character"]');
                if (characterTab) {
                    characterTab.classList.add('active');
                    characterTab.style.borderBottomColor = '#667eea';
                    characterTab.style.fontWeight = 'bold';
                }
               
                document.getElementById('card-modal').style.display = 'block';
                loadCardList('character');
            };
           
            deckArea.addEventListener('click', originalClickHandler);
        });
       
        // 卡牌类型标签切换
        document.querySelectorAll('.card-type-tab').forEach(function(tab) {
            tab.addEventListener('click', function() {
                var cardType = this.getAttribute('data-type');
                currentCardType = cardType;
               
                document.querySelectorAll('.card-type-tab').forEach(function(t) {
                    t.classList.remove('active');
                    t.style.borderBottomColor = 'transparent';
                    t.style.fontWeight = 'normal';
                });
                this.classList.add('active');
                this.style.borderBottomColor = '#667eea';
                this.style.fontWeight = 'bold';
               
                loadCardList(cardType);
            });
        });
       
        // 加载卡牌列表
        function loadCardList(cardType) {
            var listContainer = document.getElementById('card-selection-list');
            listContainer.innerHTML = '<div style="color:#999;font-size:18px;">加载中...</div>';
           
            var apiUrl = mw.util.wikiScript('api');
            var invokeText = '';
           
            if (cardType === 'character') {
                var unitData = characterUnits[currentActiveUnit];
                if (!unitData.characterName) {
                    listContainer.innerHTML = '<div style="color:red;">错误: 未选择战斗员</div>';
                    return;
                }
                invokeText = '{{#invoke:配队/卡牌|deck|' + unitData.characterName + '}}';
            } else if (cardType === 'neutral') {
                var unitData = characterUnits[currentActiveUnit];
                var characterClass = unitData.characterClass;
               
                if (characterClass) {
                    invokeText = '{{#invoke:卡牌/中立|showByClass|' + characterClass + '}}';
                } else {
                    invokeText = '{{#invoke:卡牌/中立|showAll}}';
                }
            } else if (cardType === 'monster') {
                invokeText = '{{#invoke:卡牌/怪物|all}}';
            }
           
            var params = {
                action: 'parse',
                format: 'json',
                text: invokeText,
                contentmodel: 'wikitext',
                disablelimitreport: true,
                wrapoutputclass: ''
            };
           
            fetch(apiUrl + '?' + new URLSearchParams(params))
                .then(response => response.json())
                .then(data => {
                    if (data.parse && data.parse.text) {
                        listContainer.innerHTML = data.parse.text['*'];
                       
                        setTimeout(function() {
                            addCardSelectionHandlers(cardType);
                        }, 100);
                    } else {
                        listContainer.innerHTML = '<div style="color:red;">加载卡牌失败</div>';
                    }
                })
                .catch(error => {
                    console.error('加载卡牌失败:', error);
                    listContainer.innerHTML = '<div style="color:red;">加载卡牌出错:' + error.message + '</div>';
                });
        }
       
        // 添加卡牌选择处理器
        function addCardSelectionHandlers(cardType) {
            var listContainer = document.getElementById('card-selection-list');
           
            if (cardType === 'character') {
                var wrappers = listContainer.querySelectorAll('.deck-card-wrapper');
                wrappers.forEach(function(wrapper) {
                    wrapper.style.cursor = 'pointer';
                    wrapper.style.transition = 'transform 0.2s';
                   
                    wrapper.addEventListener('mouseenter', function() {
                        this.style.transform = 'scale(1.05)';
                    });
                   
                    wrapper.addEventListener('mouseleave', function() {
                        this.style.transform = 'scale(1)';
                    });
                   
                    wrapper.addEventListener('click', function(e) {
                        e.stopPropagation();
                       
                        var cardName = this.getAttribute('data-card');
                        var card = this.querySelector('.card-small-wrapper');
                       
                        if (!cardName && card) {
                            cardName = card.getAttribute('data-card');
                        }
                       
                        if (!cardName) {
                            console.error('无法获取卡牌名称');
                            return;
                        }
                       
                        var hasInspiration = card && card.querySelector('.inspiration-button');
                        var hasGodInspiration = card && card.querySelector('.god-inspiration-button');
                       
                        if (hasInspiration || hasGodInspiration) {
                            showVariantSelectionDialog(cardName, 'character');
                        } else {
                            addCardToDeckByName(cardName, 'character');
                        }
                    });
                });
            } else {
                var cards = listContainer.querySelectorAll('.card-small-wrapper');
               
                cards.forEach(function(card) {
                    card.style.cursor = 'pointer';
                    card.style.transition = 'transform 0.2s';
                   
                    card.addEventListener('mouseenter', function() {
                        this.style.transform = 'scale(1.05)';
                    });
                   
                    card.addEventListener('mouseleave', function() {
                        this.style.transform = 'scale(1)';
                    });
                   
                    card.addEventListener('click', function(e) {
                        e.stopPropagation();
                        addCardToDeck(this, cardType);
                    });
                });
            }
        }
       
        // 显示变体选择对话框
        function showVariantSelectionDialog(cardName, cardType) {
            var dialog = document.createElement('div');
            dialog.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:30px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.3);z-index:10001;min-width:300px;';
           
            var html = '<h3 style="margin:0 0 20px 0;color:#667eea;text-align:center;">选择添加方式</h3>';
            html += '<p style="margin:0 0 20px 0;color:#666;text-align:center;">卡牌: ' + cardName + '</p>';
            html += '<div style="display:flex;flex-direction:column;gap:0px;">';
            html += '<div class="variant-option-btn" data-action="base" style="padding:12px 20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-radius:8px;cursor:pointer;text-align:center;font-weight:bold;transition:all 0.3s;">添加基础卡牌</div>';
            html += '<div class="variant-option-btn" data-action="view" style="padding:12px 20px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;border-radius:8px;cursor:pointer;text-align:center;font-weight:bold;transition:all 0.3s;">查看变体并选择</div>';
            html += '<div class="variant-option-btn" data-action="cancel" style="padding:12px 20px;background:#ccc;color:#333;border-radius:8px;cursor:pointer;text-align:center;font-weight:bold;transition:all 0.3s;">取消</div>';
            html += '</div>';
           
            dialog.innerHTML = html;
           
            var overlay = document.createElement('div');
            overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;';
           
            document.body.appendChild(overlay);
            document.body.appendChild(dialog);
           
            dialog.querySelectorAll('.variant-option-btn').forEach(function(btn) {
                btn.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-2px)';
                    this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.2)';
                });
                btn.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = 'none';
                });
            });
           
            dialog.addEventListener('click', function(e) {
                var btn = e.target.closest('.variant-option-btn');
                if (!btn) return;
               
                var action = btn.getAttribute('data-action');
               
                if (action === 'base') {
                    addCardToDeckByName(cardName, cardType);
                    document.body.removeChild(overlay);
                    document.body.removeChild(dialog);
                    document.getElementById('card-modal').style.display = 'none';
                } else if (action === 'view') {
                    addCardToDeckByName(cardName, cardType, function() {
                        document.body.removeChild(overlay);
                        document.body.removeChild(dialog);
                        document.getElementById('card-modal').style.display = 'none';
                       
                        setTimeout(function() {
                            alert('卡牌已添加!现在您可以点击卡牌查看并选择变体。');
                        }, 300);
                    });
                } else {
                    document.body.removeChild(overlay);
                    document.body.removeChild(dialog);
                }
            });
        }
       
        // 按名称添加卡牌到卡组
        function addCardToDeckByName(cardName, cardType, callback) {
            if (!currentDeckArea || !currentActiveUnit) return;
           
            var unitData = characterUnits[currentActiveUnit];
           
            var moduleName = '';
            if (cardType === 'character') {
                moduleName = unitData.characterName;
            } else if (cardType === 'neutral') {
                moduleName = '中立';
            } else if (cardType === 'monster') {
                moduleName = '怪物';
            }
           
            var invokeText = '';
            if (cardType === 'character') {
                invokeText = '{{#invoke:卡牌|main|' + moduleName + '|' + cardName + '}}';
            } else if (cardType === 'neutral') {
                invokeText = '{{#invoke:卡牌/中立|main|' + cardName + '}}';
            } else if (cardType === 'monster') {
                invokeText = '{{#invoke:卡牌/怪物|main|' + cardName + '}}';
            }
           
            var apiUrl = mw.util.wikiScript('api');
            var params = {
                action: 'parse',
                format: 'json',
                text: invokeText,
                contentmodel: 'wikitext',
                disablelimitreport: true
            };
           
            fetch(apiUrl + '?' + new URLSearchParams(params))
                .then(response => response.json())
                .then(data => {
                    if (data.parse && data.parse.text) {
                        // 移除占位符
                        var placeholder = currentDeckArea.querySelector('.deck-placeholder');
                        if (placeholder) {
                            placeholder.remove();
                        }
                       
                        var wrapper = document.createElement('div');
                        wrapper.className = 'deck-card-wrapper';
                        wrapper.innerHTML = data.parse.text['*'];
                        wrapper.setAttribute('data-module', moduleName);
                        wrapper.setAttribute('data-card', cardName);
                       
                        // 确保wrapper不会换行
                        wrapper.style.flexShrink = '0';
                        wrapper.style.display = 'inline-block';
                       
                        var uniqueId = 'deck-card-' + currentActiveUnit + '-' + (++unitData.cardIdCounter);
                        wrapper.setAttribute('data-unique-id', uniqueId);
                        wrapper.setAttribute('data-unit-index', currentActiveUnit);
                       
                        unitData.selectedCards[uniqueId] = {
                            module: moduleName,
                            cardName: cardName,
                            variantType: null,
                            variantParam: null,
                            variantIndex: null
                        };
                       
                        currentDeckArea.appendChild(wrapper);
                       
                        setTimeout(function() {
                            var card = wrapper.querySelector('.card-small-wrapper');
                            if (card) {
                                var deleteBtn = document.createElement('div');
                                deleteBtn.className = 'card-delete-btn';
                                deleteBtn.innerHTML = '×';
                                deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                               
                                deleteBtn.addEventListener('click', function(e) {
                                    e.stopPropagation();
                                    wrapper.remove();
                                    delete unitData.selectedCards[uniqueId];
                                    checkAndShowPlaceholder(currentActiveUnit);
                                });
                               
                                card.style.position = 'relative';
                                card.appendChild(deleteBtn);
                            }
                           
                            setupGlobalModalListener();
                           
                            if (callback) callback();
                        }, 100);
                    } else {
                        alert('添加卡牌失败');
                    }
                })
                .catch(error => {
                    console.error('添加卡牌失败:', error);
                    alert('添加卡牌出错:' + error.message);
                });
        }
       
        // 添加卡牌到卡组(从元素获取信息)
        function addCardToDeck(cardElement, cardType) {
            if (!currentDeckArea || !currentActiveUnit) return;
           
            var cardName = cardElement.getAttribute('data-card-name') ||
                          cardElement.getAttribute('data-card');
           
            if (!cardName) {
                var parent = cardElement.closest('[data-card]');
                if (parent) {
                    cardName = parent.getAttribute('data-card');
                }
            }
           
            if (!cardName) {
                var parent = cardElement.closest('[data-card-name]');
                if (parent) {
                    cardName = parent.getAttribute('data-card-name');
                }
            }
           
            if (!cardName) {
                var wrapper = cardElement.closest('.deck-card-wrapper');
                if (wrapper) {
                    cardName = wrapper.getAttribute('data-card');
                }
            }
           
            if (!cardName) {
                console.error('无法获取卡牌名称');
                alert('错误:无法获取卡牌名称');
                return;
            }
           
            addCardToDeckByName(cardName, cardType, function() {
                document.getElementById('card-modal').style.display = 'none';
            });
        }
       
        // 关闭卡牌选择窗口
        document.getElementById('close-card-modal').addEventListener('click', function() {
            document.getElementById('card-modal').style.display = 'none';
        });
       
        document.getElementById('card-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });
       
        // ========== 装备选择功能 ==========
        document.querySelectorAll('.equipment-slot').forEach(function(slot) {
            slot.addEventListener('click', function() {
                currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
                var equipmentType = this.getAttribute('data-equipment-type');
               
                var titleMap = {
                    'weapon': '选择武器',
                    'armor': '选择装甲',
                    'ring': '选择戒指'
                };
                document.getElementById('equipment-modal-title').textContent = titleMap[equipmentType] || '选择装备';
               
                loadEquipmentList(equipmentType);
               
                document.getElementById('equipment-modal').style.display = 'block';
            });
        });
       
        document.getElementById('close-equipment-modal').addEventListener('click', function() {
            document.getElementById('equipment-modal').style.display = 'none';
        });
       
        document.getElementById('equipment-modal').addEventListener('click', function(e) {
            if (e.target === this) {
                this.style.display = 'none';
            }
        });
       
        function loadEquipmentList(equipmentType) {
            var listContainer = document.getElementById('equipment-list');
            listContainer.innerHTML = '<div style="color:#999;font-size:18px;">加载中...</div>';
           
            var categoryMap = {
                'weapon': '武器',
                'armor': '装甲',
                'ring': '戒指'
            };
           
            var category = categoryMap[equipmentType];
           
            var apiUrl = mw.util.wikiScript('api');
            var askQuery = '{{#ask:[[分类:' + category + ']]|?名称|?稀有度|sort=稀有度,名称|order=desc,asc|format=template|template=配队/装备|limit=500}}';
           
            var params = {
                action: 'parse',
                format: 'json',
                text: askQuery,
                contentmodel: 'wikitext',
                disablelimitreport: true
            };
           
            fetch(apiUrl + '?' + new URLSearchParams(params))
                .then(response => response.json())
                .then(data => {
                    if (data.parse && data.parse.text) {
                        listContainer.innerHTML = data.parse.text['*'];
                       
                        setTimeout(function() {
                            addEquipmentSelectionHandlers(equipmentType);
                        }, 100);
                    } else {
                        listContainer.innerHTML = '<div style="color:red;">加载装备失败</div>';
                    }
                })
                .catch(error => {
                    console.error('加载装备失败:', error);
                    listContainer.innerHTML = '<div style="color:red;">加载装备出错:' + error.message + '</div>';
                });
        }
       
        function addEquipmentSelectionHandlers(equipmentType) {
            var equipmentOptions = document.querySelectorAll('#equipment-list .equipment-option');
           
            equipmentOptions.forEach(function(option) {
                option.style.cursor = 'pointer';
                option.style.transition = 'all 0.3s';
               
                option.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px)';
                    this.style.boxShadow = '0 5px 20px rgba(102,126,234,0.4)';
                });
               
                option.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
                });
               
                option.addEventListener('click', function() {
                    var equipmentId = this.getAttribute('data-equipment-id');
                    var equipmentImg = this.querySelector('img');
                   
                    if (equipmentImg && currentActiveUnit) {
                        var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
                        var slot = unit.querySelector('.equipment-slot[data-equipment-type="' + equipmentType + '"]');
                       
                        var clonedImg = equipmentImg.cloneNode(true);
                        clonedImg.style.width = '100px';
                        clonedImg.style.height = '100px';
                        clonedImg.style.objectFit = 'contain';
                       
                        slot.innerHTML = '';
                        slot.appendChild(clonedImg);
                        slot.style.border = 'none';
                       
                        document.getElementById('equipment-modal').style.display = 'none';
                    }
                });
            });
        }
       
        // 初始化:设置默认角色1为激活单元
        currentActiveUnit = '0';
    }
   
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTeamSimulator);
    } else {
        initTeamSimulator();
    }
})();
</script>
 
<style>
#team-simulator {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
 
#save-team-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
 
#save-team-btn:active {
    transform: translateY(0);
}
 
.character-unit {
    background: white;
    transition: all 0.3s;
}
 
.character-slot, .partner-slot {
    transition: all 0.3s;
    overflow: hidden;
}
 
.character-slot:hover, .partner-slot:hover {
    border-color: #667eea;
    background: #f9f9ff;
}
 
.deck-area {
    transition: border-color 0.3s, background 0.3s;
}
 
.deck-area:hover {
    border-color: #667eea;
}
 
/* 确保卡牌wrapper不换行 */
.deck-card-wrapper {
    flex-shrink: 0;
    display: inline-block;
}
 
/* 确保中立和怪物卡牌也不换行 */
#card-selection-list .deck-card-wrapper,
#card-selection-list .card-small-wrapper {
    flex-shrink: 0;
    display: inline-block;
}
 
.equipment-slot {
    transition: all 0.3s;
}
 
.equipment-slot:hover {
    border-color: #667eea;
    background: #f9f9ff;
}
 
/* 模态框样式优化 */
#card-modal, #character-modal, #partner-modal, #equipment-modal {
    animation: fadeIn 0.3s ease;
}


     characterBox.addEventListener('click', function(e) {
@keyframes fadeIn {
         e.stopPropagation();
     from {
        // 创建选择层
         opacity: 0;
        const overlay = document.createElement('div');
    }
        overlay.style.cssText = `
    to {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);
         opacity: 1;
            z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto;
    }
        `;
}
         overlay.innerHTML = `
            <div style="background: #222; padding: 20px; border-radius: 10px; max-width: 90vw; max-height: 90vh; overflow-y: auto;">
                <div style="position: absolute; top: 20px; right: 20px; color: white; font-size: 24px; cursor: pointer;">×</div>
                <h2 style="color: white; text-align: center;">选择战斗员</h2>
                <div id="character-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; padding-top: 20px;">
                    <!-- 由AJAX或预加载填充 -->
                </div>
            </div>
        `;
        document.body.appendChild(overlay);


        // 关闭按钮
/* 模态框内容动画 */
        overlay.querySelector('div').firstChild.onclick = function() {
#card-modal > div,
            document.body.removeChild(overlay);
#character-modal > div,
        };
#partner-modal > div,
#equipment-modal > div {
    animation: slideIn 0.3s ease;
}


        // 获取战斗员列表(使用你提供的SMW查询)
@keyframes slideIn {
         fetch(mw.util.wikiScript('api'), {
    from {
            method: 'POST',
         transform: translate(-50%, -60%);
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        opacity: 0;
            body: new URLSearchParams({
    }
                action: 'parse',
    to {
                format: 'json',
        transform: translate(-50%, -50%);
                text: '{{#ask:[[分类:战斗员]]|?名称|?稀有度|?职业|?属性|sort=实装日期,稀有度,id|order=desc,desc,desc|mainlabel=-|link=none|template=配队/战斗员|headers=hide|format=template|limit=1000}}'
        opacity: 1;
            })
    }
        })
}
        .then(r => r.json())
 
        .then(data => {
/* 卡牌类型标签样式 */
            const listContainer = overlay.querySelector('#character-list');
.card-type-tab {
            listContainer.innerHTML = data.parse.text['*'];
    transition: all 0.3s;
}
 
.card-type-tab:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}
 
.card-type-tab.active {
    color: #667eea;
}
 
/* 角色和伙伴选项样式 */
.character-option, .partner-option {
    transition: all 0.3s;
}


            // 为每个角色绑定点击事件
.character-option:hover, .partner-option:hover {
            const characterItems = listContainer.querySelectorAll('.rarity-1, .rarity-2, .rarity-3, .rarity-4, .rarity-5');
    transform: translateY(-5px);
            characterItems.forEach(item => {
    box-shadow: 0 5px 20px rgba(102,126,234,0.4);
                item.addEventListener('click', function(e) {
}
                    e.stopPropagation();
                    const name = this.previousElementSibling.textContent.trim(); // 名称在底部黑条内
                    const imgSrc = this.parentElement.querySelector('img').src;


                    // 更新显示
/* 装备选项样式 */
                    selectedCharacter.innerHTML = `<img src="${imgSrc}" style="width:100%; height:100%; object-fit: cover;">`;
.equipment-option {
                    show(selectedCharacter);
    cursor: pointer;
                    hide(characterBox.querySelector('span'));
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 8px;
    transition: all 0.3s;
    background: white;
}


                    document.body.removeChild(overlay);
.equipment-option:hover {
                });
    border-color: #667eea;
            });
    transform: translateY(-5px);
        });
    box-shadow: 0 5px 20px rgba(102,126,234,0.4);
    });
}


    // ========== 伙伴选择 ==========
/* 删除按钮样式优化 */
     const partnerBox = document.getElementById('partner-box');
.card-delete-btn {
     const selectedPartner = document.getElementById('selected-partner');
     transition: all 0.2s;
     user-select: none;
}


    partnerBox.addEventListener('click', function(e) {
.card-delete-btn:hover {
        e.stopPropagation();
    background: rgba(255,0,0,0.9);
        const overlay = document.createElement('div');
    transform: scale(1.2);
        overlay.style.cssText = `
}
            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);
            z-index: 10000; display: flex; align-items: center; justify-content: center; overflow-y: auto;
        `;
        overlay.innerHTML = `
            <div style="background: #222; padding: 20px; border-radius: 10px; max-width: 90vw; max-height: 90vh; overflow-y: auto;">
                <div style="position: absolute; top: 20px; right: 20px; color: white; font-size: 24px; cursor: pointer;">×</div>
                <h2 style="color: white; text-align: center;">选择伙伴</h2>
                <div id="partner-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; padding-top: 20px;">
                    <!-- 填充 -->
                </div>
            </div>
        `;
        document.body.appendChild(overlay);


        overlay.querySelector('div').firstChild.onclick = function() {
/* 占位符样式 */
            document.body.removeChild(overlay);
.deck-placeholder {
        };
    pointer-events: none;
    user-select: none;
}


        fetch(mw.util.wikiScript('api'), {
/* 变体选择按钮样式 */
            method: 'POST',
.select-variant-btn {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    transition: all 0.3s;
            body: new URLSearchParams({
    user-select: none;
                action: 'parse',
}
                format: 'json',
                text: '{{#ask:[[分类:伙伴]]|?名称|?稀有度|?职业|?属性|?id|sort=实装日期,稀有度,id|order=desc,desc,desc|mainlabel=-|link=none|template=配队/伙伴|headers=hide|format=template|limit=1000}}'
            })
        })
        .then(r => r.json())
        .then(data => {
            const listContainer = overlay.querySelector('#partner-list');
            listContainer.innerHTML = data.parse.text['*'];


            const partnerItems = listContainer.querySelectorAll('.rarity-1, .rarity-2, .rarity-3, .rarity-4, .rarity-5');
.select-variant-btn:hover {
            partnerItems.forEach(item => {
    transform: translateY(-2px);
                item.addEventListener('click', function(e) {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                    e.stopPropagation();
}
                    const name = this.previousElementSibling.textContent.trim();
                    // 注意:伙伴使用 face_character_wide_{id}.png
                    const id = this.parentElement.querySelector('img').alt.match(/portrait_character_crop_half_(\d+)/)?.[1] || '0000';
                    const imgSrc = mw.util.getUrl(`File:face_character_wide_${id}.png`, { action: 'view' }); // 构建图片URL


                    selectedPartner.innerHTML = `<img src="${imgSrc}" style="width:100%; height:100%; object-fit: cover;">`;
.select-variant-btn:active {
                    show(selectedPartner);
    transform: translateY(0);
                    hide(partnerBox.querySelector('span'));
}


                    document.body.removeChild(overlay);
/* 卡牌选择列表样式优化 */
                });
#card-selection-list {
            });
    max-height: 60vh;
        });
    overflow-y: auto;
    });
}


    // ========== 卡牌选择 ==========
/* 自定义滚动条 */
    const addCardButton = document.getElementById('add-card-button');
#card-selection-list::-webkit-scrollbar,
    const cardDeckBox = document.getElementById('card-deck-box');
#character-list::-webkit-scrollbar,
    const cardSelectionModal = document.getElementById('card-selection-modal');
#partner-list::-webkit-scrollbar,
    const cardListContainer = document.getElementById('card-list');
#equipment-list::-webkit-scrollbar {
    width: 8px;
}


    addCardButton.addEventListener('click', function() {
#card-selection-list::-webkit-scrollbar-track,
        show(cardSelectionModal);
#character-list::-webkit-scrollbar-track,
        loadCharacterCards(); // 加载当前所选角色的卡牌(需要你提供角色→模块映射表,这里先模拟)
#partner-list::-webkit-scrollbar-track,
    });
#equipment-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}


    function loadCharacterCards() {
#card-selection-list::-webkit-scrollbar-thumb,
        // 示例:假设选择的角色是"艾莉丝",对应 Module:卡牌/艾莉丝
#character-list::-webkit-scrollbar-thumb,
        // 实际应从 selectedCharacter 获取角色名,然后查映射 → 这里简化处理
#partner-list::-webkit-scrollbar-thumb,
        const moduleName = "示例角色"; // 替换为实际逻辑
#equipment-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}


        // 假设我们有一个 API 或模板能列出某角色的所有卡牌
#card-selection-list::-webkit-scrollbar-thumb:hover,
        // 这里我们伪造一些卡牌供演示,你应该替换为真实的 SMW 查询或 Lua 输出
#character-list::-webkit-scrollbar-thumb:hover,
        const sampleCards = [
#partner-list::-webkit-scrollbar-thumb:hover,
            { module: "示例角色", name: "起始卡牌_1" },
#equipment-list::-webkit-scrollbar-thumb:hover {
            { module: "示例角色", name: "起始卡牌_2" },
    background: #555;
            { module: "示例角色", name: "独特卡牌_1" }
}
        ];


        cardListContainer.innerHTML = ''; // 清空
/* 响应式设计 */
        sampleCards.forEach(card => {
@media (max-width: 1200px) {
            const cardDiv = document.createElement('div');
    #team-content {
            // 使用Module:卡牌渲染单张卡牌
        max-width: 100%;
            fetch(mw.util.wikiScript('api'), {
        padding: 10px;
                method: 'POST',
    }
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
   
                body: new URLSearchParams({
    .character-unit {
                    action: 'parse',
        padding: 15px;
                    format: 'json',
    }
                    text: `{{#invoke:卡牌|main|${card.module}|${card.name}}}`
}
                })
            })
            .then(r => r.json())
            .then(data => {
                cardDiv.innerHTML = data.parse.text['*'];
                cardListContainer.appendChild(cardDiv);


                // 绑定点击加入卡组
@media (max-width: 768px) {
                const smallCard = cardDiv.querySelector('.card-small-wrapper');
    .character-unit > div {
                if (smallCard) {
        flex-direction: column;
                    smallCard.addEventListener('click', function(e) {
    }
                        e.stopPropagation();
   
                        const clone = this.cloneNode(true);
    .character-unit > div > div {
                        clone.style.width = '180px';
        width: 100% !important;
                        clone.style.height = 'auto';
    }
                        cardDeckBox.appendChild(clone);
   
                        cardDeckBox.querySelector('div[style*="margin-top: 100px"]')?.remove(); // 移除提示占位符
    .deck-area {
                    });
        min-height: 200px;
                }
    }
            });
   
         });
    #card-modal > div,
    #character-modal > div,
    #partner-modal > div,
    #equipment-modal > div {
        width: 95%;
        max-width: 95%;
        min-width: auto;
        padding: 15px;
    }
   
    .card-type-tab {
        padding: 8px 12px;
        font-size: 14px;
    }
   
    #save-team-btn {
        padding: 10px 20px;
         font-size: 14px;
     }
     }
}
/* 卡牌hover效果 */
.deck-card-wrapper:hover {
    z-index: 10;
}
.card-small-wrapper {
    transition: transform 0.2s;
}
.deck-card-wrapper:hover .card-small-wrapper {
    transform: scale(1.05);
}
/* 加载动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* 关闭按钮样式 */
#close-card-modal,
#close-character-modal,
#close-partner-modal,
#close-equipment-modal {
    transition: all 0.3s;
    user-select: none;
}
#close-card-modal:hover,
#close-character-modal:hover,
#close-partner-modal:hover,
#close-equipment-modal:hover {
    color: #ff6b6b;
    transform: rotate(90deg) scale(1.2);
}
/* 变体对话框按钮动画 */
.variant-option-btn {
    position: relative;
    overflow: hidden;
}
.variant-option-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}


    // ========== 装备选择 ==========
.variant-option-btn:hover::before {
    const equipmentSlots = document.querySelectorAll('.equipment-slot');
     width: 300px;
     const equipmentModal = document.getElementById('equipment-modal');
     height: 300px;
     const equipmentListContainer = document.getElementById('equipment-list');
}
    const equipmentTitle = document.getElementById('equipment-title');


    equipmentSlots.forEach(slot => {
/* 确保弹窗内容居中 */
        slot.addEventListener('click', function() {
#card-modal > div,
            const type = this.getAttribute('data-type');
#character-modal > div,
            equipmentTitle.textContent = `选择${type}`;
#partner-modal > div,
            show(equipmentModal);
#equipment-modal > div {
    box-sizing: border-box;
}


            // 使用 Module:装备 生成列表
/* 网格布局优化 */
            fetch(mw.util.wikiScript('api'), {
#character-list,
                method: 'POST',
#partner-list {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    display: grid;
                body: new URLSearchParams({
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
                    action: 'parse',
    gap: 15px;
                    format: 'json',
    justify-items: center;
                    text: '{{#invoke:装备|generateCards}}'
}
                })
 
            })
#equipment-list {
            .then(r => r.json())
    display: grid;
            .then(data => {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
                equipmentListContainer.innerHTML = data.parse.text['*'];
    gap: 15px;
    justify-items: center;
}
 
/* 图片加载优化 */
img {
    image-rendering: -webkit-optimize-contrast;
}
 
/* 防止文本选择 */
.character-slot,
.partner-slot,
.deck-area,
.equipment-slot,
.card-type-tab,
#save-team-btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
 
/* 工具提示样式(如果需要) */
[data-tooltip] {
    position: relative;
}
 
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background: rgba(0,0,0,0.8);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
 
[data-tooltip]:hover::after {
    opacity: 1;
}
 
/* 确保deck-area内的flex布局正确 */
.deck-area {
    box-sizing: border-box;
}
 
.deck-area > * {
    box-sizing: border-box;
}


                // 筛选类型 & 绑定点击
/* 修复可能的布局问题 */
                const allCards = equipmentListContainer.querySelectorAll('.equipment-wrapper');
.character-unit > div {
                allCards.forEach(card => {
    box-sizing: border-box;
                    const cardType = card.getAttribute('data-param3');
}
                    if (cardType !== type) {
                        hide(card);
                    } else {
                        show(card);
                        const clickableCard = card.querySelector('.equipment-card');
                        clickableCard.addEventListener('click', function(e) {
                            e.stopPropagation();


                            // 获取装备名
.character-unit > div > div {
                            const equipName = clickableCard.getAttribute('data-equipment');
    box-sizing: border-box;
                            // 渲染单张装备卡片到槽位
}
                            renderEquipmentToSlot(slot, equipName);
                            hide(equipmentModal);
                        });
                    }
                });
            });
        });
    });


     function renderEquipmentToSlot(slot, equipName) {
/* 打印样式优化 */
        const outputDiv = slot.querySelector('.selected-equipment');
@media print {
        fetch(mw.util.wikiScript('api'), {
     #save-team-btn,
            method: 'POST',
    .card-delete-btn,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    #card-modal,
            body: new URLSearchParams({
    #character-modal,
                action: 'parse',
    #partner-modal,
                format: 'json',
    #equipment-modal {
                text: `{{#invoke:装备|card|${equipName}|5}}` // 默认5星
        display: none !important;
            })
    }
        })
   
        .then(r => r.json())
    .character-unit {
        .then(data => {
         page-break-inside: avoid;
            outputDiv.innerHTML = data.parse.text['*'];
            show(outputDiv);
            hide(slot.querySelector('span'));
         });
     }
     }
}
/* 无障碍支持 */
button, [role="button"], .character-option, .partner-option, .equipment-option, .card-type-tab {
    outline-offset: 2px;
}


    // ESC关闭模态框
button:focus, [role="button"]:focus, .character-option:focus, .partner-option:focus, .equipment-option:focus, .card-type-tab:focus {
    document.addEventListener('keydown', function(e) {
    outline: 2px solid #667eea;
        if (e.key === 'Escape') {
}
            hide(cardSelectionModal);
            hide(equipmentModal);
            document.querySelectorAll('.modal').forEach(modal => hide(modal));
        }
    });


})();
/* 暗色模式支持(如果需要) */
</script>
@media (prefers-color-scheme: dark) {
    /* 可以在这里添加暗色模式样式 */
}
</style>

2025年11月1日 (六) 16:43的最新版本

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

<script> (function() {

   // 等待DOM加载完成
   function initTeamSimulator() {
       // 为每个角色单元保存独立的状态
       var characterUnits = {};
       var currentActiveUnit = null;
       
       // 初始化所有角色单元
       document.querySelectorAll('.character-unit').forEach(function(unit) {
           var unitIndex = unit.getAttribute('data-unit-index');
           characterUnits[unitIndex] = {
               characterName: null,
               characterClass: null,
               cardIdCounter: 0,
               selectedCards: {}
           };
       });
       // ========== 保存为图片功能 ==========
       document.getElementById('save-team-btn').addEventListener('click', function() {
           var btn = this;
           var originalText = btn.textContent;
           btn.textContent = '生成中...';
           btn.style.pointerEvents = 'none';
           
           var contentElement = document.getElementById('team-content');
           
           // 临时隐藏删除按钮
           var deleteButtons = contentElement.querySelectorAll('.card-delete-btn');
           deleteButtons.forEach(function(btn) {
               btn.style.display = 'none';
           });
           
           html2canvas(contentElement, {
               backgroundColor: '#ffffff',
               scale: 2,
               logging: false,
               useCORS: true,
               allowTaint: true
           }).then(function(canvas) {
               // 恢复删除按钮
               deleteButtons.forEach(function(btn) {
                   btn.style.display = 'flex';
               });
               
               // 下载图片
               var link = document.createElement('a');
               link.download = '配队方案_' + new Date().getTime() + '.png';
               link.href = canvas.toDataURL('image/png');
               link.click();
               
               btn.textContent = originalText;
               btn.style.pointerEvents = 'auto';
           }).catch(function(error) {
               console.error('保存失败:', error);
               alert('保存失败,请重试');
               
               // 恢复删除按钮
               deleteButtons.forEach(function(btn) {
                   btn.style.display = 'flex';
               });
               
               btn.textContent = originalText;
               btn.style.pointerEvents = 'auto';
           });
       });
       // 点击角色槽位显示选择窗口
       document.querySelectorAll('.character-slot').forEach(function(slot) {
           slot.addEventListener('click', function() {
               currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
               document.getElementById('character-modal').style.display = 'block';
           });
       });
       
       // 关闭角色选择窗口
       document.getElementById('close-character-modal').addEventListener('click', function() {
           document.getElementById('character-modal').style.display = 'none';
       });
       
       // 点击遮罩层关闭窗口
       document.getElementById('character-modal').addEventListener('click', function(e) {
           if (e.target === this) {
               this.style.display = 'none';
           }
       });
       
       // 加载战斗员卡牌 - 支持多角色
       function loadCharacterCards(characterName, unitIndex) {
           if (!characterName) {
               console.error('战斗员名称为空');
               return;
           }
           
           var unitData = characterUnits[unitIndex];
           unitData.characterName = characterName;
           console.log('加载战斗员卡牌:', characterName, '单元:', unitIndex);
           
           var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
           var deckArea = unit.querySelector('.deck-area');
           
           // 显示加载状态
           var placeholder = deckArea.querySelector('.deck-placeholder');
           if (placeholder) {
               placeholder.textContent = '加载中...';
               placeholder.style.fontSize = '18px';
               placeholder.style.color = '#999';
           }
           
           var apiUrl = mw.util.wikiScript('api');
           var params = {
               action: 'parse',
               format: 'json',
               text: '错误: 找不到模块 "Module:卡牌/' + characterName + '"',
               contentmodel: 'wikitext',
               disablelimitreport: true,
               wrapoutputclass: 
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       // 清空并添加卡牌
                       deckArea.innerHTML = data.parse.text['*'];
                       
                       // 重置该单元的卡牌状态
                       unitData.selectedCards = {};
                       unitData.cardIdCounter = 0;
                       
                       setTimeout(function() {
                           initializeCardFeatures(unitIndex);
                       }, 100);
                   } else {
                       if (placeholder) {
                           placeholder.textContent = '加载失败';
                           placeholder.style.color = 'red';
                       }
                   }
               })
               .catch(error => {
                   console.error('加载卡牌失败:', error);
                   if (placeholder) {
                       placeholder.textContent = '加载出错';
                       placeholder.style.color = 'red';
                   }
               });
       }
       
       // 初始化卡牌功能
       function initializeCardFeatures(unitIndex) {
           var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
           var unitData = characterUnits[unitIndex];
           var deckArea = unit.querySelector('.deck-area');
           
           var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
           
           wrappers.forEach(function(wrapper) {
               var card = wrapper.querySelector('.card-small-wrapper');
               if (!card) return;
               
               // 确保wrapper样式正确
               wrapper.style.flexShrink = '0';
               wrapper.style.display = 'inline-block';
               
               var uniqueId = 'deck-card-' + unitIndex + '-' + (++unitData.cardIdCounter);
               wrapper.setAttribute('data-unique-id', uniqueId);
               wrapper.setAttribute('data-unit-index', unitIndex);
               
               unitData.selectedCards[uniqueId] = {
                   module: wrapper.getAttribute('data-module') || unitData.characterName,
                   cardName: wrapper.getAttribute('data-card'),
                   variantType: null,
                   variantParam: null,
                   variantIndex: null
               };
               
               if (!card.querySelector('.card-delete-btn')) {
                   var deleteBtn = document.createElement('div');
                   deleteBtn.className = 'card-delete-btn';
                   deleteBtn.innerHTML = '×';
                   deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                   
                   deleteBtn.addEventListener('click', function(e) {
                       e.stopPropagation();
                       wrapper.remove();
                       delete unitData.selectedCards[uniqueId];
                       
                       // 如果没有卡牌了,显示占位符
                       checkAndShowPlaceholder(unitIndex);
                   });
                   
                   card.style.position = 'relative';
                   card.appendChild(deleteBtn);
               }
           });
           
           setupGlobalModalListener();
       }
       
       // 检查并显示占位符
       function checkAndShowPlaceholder(unitIndex) {
           var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
           var deckArea = unit.querySelector('.deck-area');
           var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
           
           if (wrappers.length === 0) {

deckArea.innerHTML = '

+

';

           }
       }
       
       // 设置全局模态框监听器
       function setupGlobalModalListener() {
           if (window.deckModalObserver) {
               window.deckModalObserver.disconnect();
           }
           
           window.deckModalObserver = new MutationObserver(function(mutations) {
               mutations.forEach(function(mutation) {
                   if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                       var modal = mutation.target;
                       if (modal.classList.contains('card-modal') && modal.style.display !== 'none') {
                           setTimeout(function() {
                               enhanceActiveModal(modal);
                           }, 100);
                       }
                   }
               });
           });
           
           document.querySelectorAll('.card-modal').forEach(function(modal) {
               window.deckModalObserver.observe(modal, { 
                   attributes: true, 
                   attributeFilter: ['style'] 
               });
           });
       }
       
       // 增强当前活动的模态框
       function enhanceActiveModal(modal) {
           var cardId = modal.id ? modal.id.replace('-modal', ) : null;
           if (!cardId) return;
           
           var deckCard = null;
           var uniqueId = null;
           var unitIndex = null;
           
           document.querySelectorAll('.deck-area .deck-card-wrapper').forEach(function(wrapper) {
               var wrapperCard = wrapper.querySelector('.card-small-wrapper');
               if (wrapperCard && wrapperCard.getAttribute('data-card-id') === cardId) {
                   deckCard = wrapper;
                   uniqueId = wrapper.getAttribute('data-unique-id');
                   unitIndex = wrapper.getAttribute('data-unit-index');
               }
           });
           
           if (!deckCard || !uniqueId || !unitIndex) {
               return;
           }
           
           var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
           if (!cardData) {
               return;
           }
           
           if (modal.hasAttribute('data-deck-enhanced')) {
               return;
           }
           modal.setAttribute('data-deck-enhanced', 'true');
           
           var inspirationButton = modal.querySelector('.inspiration-button');
           if (inspirationButton) {
               inspirationButton.addEventListener('click', function() {
                   setTimeout(function() {
                       enhanceInspirationView(modal, uniqueId, unitIndex);
                   }, 100);
               });
           }
           
           var godButton = modal.querySelector('.god-inspiration-button');
           if (godButton) {
               godButton.addEventListener('click', function() {
                   setTimeout(function() {
                       enhanceGodView(modal, uniqueId, unitIndex);
                   }, 100);
               });
           }
       }
       
       // 关闭模态框并恢复滚动
       function closeModalAndRestoreScroll(modal) {
           modal.style.display = 'none';
           modal.removeAttribute('data-deck-enhanced');
           document.body.style.overflow = ;
           document.body.style.position = ;
           document.documentElement.style.overflow = ;
           document.body.classList.remove('modal-open');
           document.documentElement.classList.remove('modal-open');
           window.dispatchEvent(new Event('resize'));
       }
       
       // 增强灵光一闪视图
       function enhanceInspirationView(modal, uniqueId, unitIndex) {
           var inspirationView = modal.querySelector('.inspiration-view');
           if (!inspirationView) return;
           
           var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
           if (!cardData) return;
           
           var variants = inspirationView.querySelectorAll('.inspiration-variant');
           variants.forEach(function(variant, index) {
               if (!variant.querySelector('.select-variant-btn')) {
                   var selectBtn = document.createElement('div');
                   selectBtn.className = 'select-variant-btn';
                   selectBtn.innerHTML = '选择此变体';
                   selectBtn.style.cssText = 'margin-top:10px;padding:8px 15px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;font-size:14px;font-weight:bold;border-radius:6px;cursor:pointer;text-align:center;';
                   
                   selectBtn.addEventListener('click', function() {
                       replaceCard(uniqueId, unitIndex, '灵光一闪', index + 1);
                       closeModalAndRestoreScroll(modal);
                   });
                   
                   variant.appendChild(selectBtn);
               }
           });
       }
       
       // 增强神光一闪视图
       function enhanceGodView(modal, uniqueId, unitIndex) {
           var godView = modal.querySelector('.god-inspiration-view');
           if (!godView) return;
           
           var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
           if (!cardData) return;
           
           var godGroups = godView.querySelectorAll('.god-group');
           godGroups.forEach(function(group) {
               var groupNameEl = group.querySelector('div[style*="color:#ffd36a"]');
               if (!groupNameEl) return;
               
               var groupName = groupNameEl.textContent.trim();
               var variants = group.querySelectorAll('.god-variant-card');
               
               variants.forEach(function(variant, index) {
                   if (!variant.querySelector('.select-variant-btn')) {
                       var selectBtn = document.createElement('div');
                       selectBtn.className = 'select-variant-btn';
                       selectBtn.innerHTML = '选择';
                       selectBtn.style.cssText = 'margin-top:5px;padding:6px 12px;background:linear-gradient(135deg,#28a745 0%,#218838 100%);color:white;font-size:12px;font-weight:bold;border-radius:4px;cursor:pointer;text-align:center;';
                       
                       selectBtn.addEventListener('click', function() {
                           replaceCard(uniqueId, unitIndex, '神光一闪', groupName, index + 1);
                           closeModalAndRestoreScroll(modal);
                       });
                       
                       variant.appendChild(selectBtn);
                   }
               });
           });
       }
       
       // 替换卡牌
       function replaceCard(uniqueId, unitIndex, variantType, param1, param2) {
           var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
           if (!cardData) {
               console.error('找不到卡牌数据:', uniqueId);
               return;
           }
           
           var wrapper = document.querySelector('[data-unique-id="' + uniqueId + '"]');
           if (!wrapper) {
               console.error('找不到卡牌容器:', uniqueId);
               return;
           }
           
           cardData.variantType = variantType;
           cardData.variantParam = param1;
           cardData.variantIndex = param2;
           
           var oldContent = wrapper.innerHTML;

wrapper.innerHTML = '

加载中...

';

           var invokeText = '错误: 找不到模块 "Module:卡牌/' + cardData.module + '"';
           
           var apiUrl = mw.util.wikiScript('api');
           var params = {
               action: 'parse',
               format: 'json',
               text: invokeText,
               contentmodel: 'wikitext',
               disablelimitreport: true
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       wrapper.innerHTML = data.parse.text['*'];
                       
                       setTimeout(function() {
                           var newCard = wrapper.querySelector('.card-small-wrapper');
                           if (newCard) {
                               // 确保wrapper样式
                               wrapper.style.flexShrink = '0';
                               wrapper.style.display = 'inline-block';
                               
                               var deleteBtn = document.createElement('div');
                               deleteBtn.className = 'card-delete-btn';
                               deleteBtn.innerHTML = '×';
                               deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                               
                               deleteBtn.addEventListener('click', function(e) {
                                   e.stopPropagation();
                                   wrapper.remove();
                                   delete characterUnits[unitIndex].selectedCards[uniqueId];
                                   checkAndShowPlaceholder(unitIndex);
                               });
                               
                               newCard.style.position = 'relative';
                               newCard.appendChild(deleteBtn);
                           }
                           
                           setupGlobalModalListener();
                           document.body.style.overflow = ;
                           document.documentElement.style.overflow = ;
                       }, 100);
                   } else {
                       wrapper.innerHTML = oldContent;
                   }
               })
               .catch(error => {
                   console.error('替换卡牌失败:', error);
                   wrapper.innerHTML = oldContent;
                   document.body.style.overflow = ;
                   document.documentElement.style.overflow = ;
               });
       }
       
       // 选择角色
       document.getElementById('character-list').addEventListener('click', function(e) {
           var characterOption = e.target.closest('.character-option');
           if (characterOption && currentActiveUnit) {
               var characterName = characterOption.getAttribute('data-character-name') || 
                                 characterOption.getAttribute('data-name') ||
                                 characterOption.getAttribute('title');
               
               var characterClass = characterOption.getAttribute('data-class') || 
                                  characterOption.getAttribute('data-职业');
               
               if (!characterName) {
                   var nameEl = characterOption.querySelector('.character-name, [class*="name"]');
                   if (nameEl) characterName = nameEl.textContent.trim();
               }
               
               characterUnits[currentActiveUnit].characterClass = characterClass;
               
               var clonedCard = characterOption.cloneNode(true);
               clonedCard.classList.remove('character-option');
               clonedCard.style.cursor = 'default';
               
               var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
               var characterSlot = unit.querySelector('.character-slot');
               characterSlot.innerHTML = ;
               characterSlot.appendChild(clonedCard);
               characterSlot.style.border = 'none';
               
               document.getElementById('character-modal').style.display = 'none';
               
               if (characterName) {
                   loadCharacterCards(characterName, currentActiveUnit);
               }
           }
       });
       
       // 选择伙伴
       document.querySelectorAll('.partner-slot').forEach(function(slot) {
           slot.addEventListener('click', function() {
               currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
               document.getElementById('partner-modal').style.display = 'block';
           });
       });
       
       document.getElementById('close-partner-modal').addEventListener('click', function() {
           document.getElementById('partner-modal').style.display = 'none';
       });
       
       document.getElementById('partner-modal').addEventListener('click', function(e) {
           if (e.target === this) {
               this.style.display = 'none';
           }
       });
       
       document.getElementById('partner-list').addEventListener('click', function(e) {
           var partnerOption = e.target.closest('.partner-option');
           if (partnerOption && currentActiveUnit) {
               var partnerId = partnerOption.dataset.partnerId || partnerOption.getAttribute('data-partner-id');
               
               var partnerImg = document.createElement('img');
               partnerImg.src = '/index.php?title=Special:Redirect/file/Portrait_character_wide_' + partnerId + '.png';
               partnerImg.style.width = '159px';
               partnerImg.style.height = '77px';
               partnerImg.style.objectFit = 'cover';
               
               var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
               var partnerSlot = unit.querySelector('.partner-slot');
               partnerSlot.innerHTML = ;
               partnerSlot.appendChild(partnerImg);
               partnerSlot.style.border = 'none';
               
               document.getElementById('partner-modal').style.display = 'none';
           }
       });
       
       // ========== 卡牌添加功能 ==========
       var currentDeckArea = null;
       var currentCardType = 'character';
       
       // 点击卡组区域打开卡牌选择
       document.querySelectorAll('.deck-area').forEach(function(deckArea) {
           var originalClickHandler = function(e) {
               if (e.target.closest('.deck-card-wrapper') || 
                   e.target.closest('.card-small-wrapper') ||
                   e.target.closest('.card-delete-btn') ||
                   e.target.classList.contains('card-delete-btn')) {
                   return;
               }
               
               currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
               currentDeckArea = this;
               
               var unit = this.closest('.character-unit');
               var characterSlot = unit.querySelector('.character-slot');
               
               var hasCharacter = characterSlot.querySelector('img') !== null || 
                                 characterSlot.innerHTML.indexOf('data-character-name') > -1 ||
                                 !characterSlot.querySelector('.placeholder');
               
               var unitData = characterUnits[currentActiveUnit];
               if (!unitData.characterName) {
                   hasCharacter = false;
               }
               
               if (!hasCharacter) {
                   alert('请先选择战斗员!');
                   return;
               }
               
               currentCardType = 'character';
               document.querySelectorAll('.card-type-tab').forEach(function(tab) {
                   tab.classList.remove('active');
                   tab.style.borderBottomColor = 'transparent';
                   tab.style.fontWeight = 'normal';
               });
               var characterTab = document.querySelector('.card-type-tab[data-type="character"]');
               if (characterTab) {
                   characterTab.classList.add('active');
                   characterTab.style.borderBottomColor = '#667eea';
                   characterTab.style.fontWeight = 'bold';
               }
               
               document.getElementById('card-modal').style.display = 'block';
               loadCardList('character');
           };
           
           deckArea.addEventListener('click', originalClickHandler);
       });
       
       // 卡牌类型标签切换
       document.querySelectorAll('.card-type-tab').forEach(function(tab) {
           tab.addEventListener('click', function() {
               var cardType = this.getAttribute('data-type');
               currentCardType = cardType;
               
               document.querySelectorAll('.card-type-tab').forEach(function(t) {
                   t.classList.remove('active');
                   t.style.borderBottomColor = 'transparent';
                   t.style.fontWeight = 'normal';
               });
               this.classList.add('active');
               this.style.borderBottomColor = '#667eea';
               this.style.fontWeight = 'bold';
               
               loadCardList(cardType);
           });
       });
       
       // 加载卡牌列表
       function loadCardList(cardType) {
           var listContainer = document.getElementById('card-selection-list');

listContainer.innerHTML = '

加载中...

';

           var apiUrl = mw.util.wikiScript('api');
           var invokeText = ;
           
           if (cardType === 'character') {
               var unitData = characterUnits[currentActiveUnit];
               if (!unitData.characterName) {

listContainer.innerHTML = '

错误: 未选择战斗员

';

                   return;
               }
               invokeText = '错误: 找不到模块 "Module:卡牌/' + unitData.characterName + '"';
           } else if (cardType === 'neutral') {
               var unitData = characterUnits[currentActiveUnit];
               var characterClass = unitData.characterClass;
               
               if (characterClass) {
                   invokeText = '错误: 没有找到职业为 "' + characterClass + '" 的中立卡牌';
               } else {

invokeText = '

2
伪装
技能
[消灭]
闪避1
下一回合抽取2
1
保护之喊
技能
护盾130%
若未持有护盾、护盾增加100%
3
光荣的抵抗
强化
每回合开始时、对友军造成HP上限???%的固定伤害、
获得1点AP
2
冲击
攻击
所有敌人伤害200%
脆弱2
1
准备战斗
技能
生成1张随机德朗商店卡牌
1回合内该卡牌的费用变更为0
1
协商
技能
[保留/消灭]
士气2
所有敌人士气2
2
原子分解
攻击
所有敌人穿透伤害230%
1
反击准备
技能
[消灭]
将自我意识技能栏位、替换为其他自我意识技能
0
回收利用
技能
自我意识点数为2以上时、获得2点AP、自我意识点数减少1
1
坚固
技能
护盾150%
连击:下一回合开始时、护盾150%
0
好战性
技能
手牌中无攻击卡牌时、抽取2
1
忏悔
技能
[消灭]
士气1
决心1
0
快速拔枪
攻击
[开战/消灭]
伤害150%
标记1
2
急救包
技能
[天上/消灭]
治愈250%
1
战术应对
强化
[开战]
对持有护盾的目标造成的伤害量增加15%
1
战略起点
技能
[消灭]
获得2点自我意识点数
3
拦截
攻击
基于防御的伤害400%
若生命值已满、则此卡牌费用减少1
2
撕裂
攻击
[弱点攻击]
伤害1502
抽取1
1
施虐性
技能
[主导]
所有敌人脆弱1
1回合内手牌中1张随机攻击卡牌费用减少1
0
机动射击
攻击
[开战/消灭]
所有敌人伤害200%
脆弱2
1
毁灭
攻击
[消灭]
伤害300%
丢弃1
2
沉重一击
攻击
伤害200%
脆弱2
削弱2
2
激愤
攻击
伤害300%
手牌中没有其他战斗员卡牌时、此卡牌费用减少2
2
灵魂
攻击
基于防御的伤害1002
按照决心的数量、伤害量+20%
1
点燃直觉
强化
生成卡牌时、随机赋予灵光一闪
(每回合1次)
1
睡眠果实
技能
[终极/消灭]
随机战斗员压力减少5
2
瞄准射击
攻击
伤害400%
击杀:获得20信用点数
1
神圣一击
攻击
[消灭]
伤害200%
韧性伤害2
0
秘藏一击
攻击
[保留/消灭]
伤害100%
保留:伤害量+???%
0
突袭
攻击
伤害80%
击破时、坟墓中的此卡牌移动至手牌
0
精密瞄准
攻击
伤害120%
抽取1
在手牌选择1张卡牌、此卡牌移动至抽取卡牌顶端
1
肉搏战
攻击
[消灭]
基于防御的伤害200%
结晶化2
0
能量护盾
技能
[消灭]
护盾100%
获得1点AP
2
致命射击
攻击
伤害350%
下一回合开始时、抽取1
1
荆棘盾
攻击
所有敌人基于防御的伤害100%
破坏:额外攻击1
0
虚空流浪者
技能
1回合内目标的行动次数不会减少
1
装备包
技能
[消灭/连击]
抽取2
2
觉悟
强化
回合开始时、1张手牌的随机攻击卡牌在1回合内伤害量+50%
1
解除之风
技能
所有敌人痛苦2可选择并消灭最多2张手牌中的状态异常或诅咒卡牌
1
跳跃攻击
攻击
伤害200%
0
辗压
攻击
[消灭]
所有敌人伤害1003
抽取卡牌中生成2超出负荷
0
进攻!
技能
从抽取卡牌中选择1张攻击卡牌、此卡牌移动至手牌
1
连续攻击
攻击
伤害503
1
酸性气体
技能
[回收]
所有敌人未找到词条: 损坏2
1
重新整顿
技能
[消灭]
抽取3
1
重组战略
技能
[消灭]
接下来使用的自我意识技能费用减少1
1
金融治疗
技能
[消灭]
治愈200%
若HP已满、则获得信用点数30
1
铜墙铁壁
强化
[开战]
决心1
不屈1
0
集结
技能
[快速]
抽取1
所有敌人行动次数+3
2
顽强的耐心
技能
[保留]
护盾350%
1
颅骨重击
攻击
伤害200%
弱点攻击:伤害量+50%
0
高速连射
攻击
伤害80%
抽取1
1
魔力暴走
强化
免疫2
1
黑暗知识
技能
[终极/消灭]
抽取1
发动该卡牌

';

               }
           } else if (cardType === 'monster') {

invokeText = '

1
七臂怪
攻击
伤害120%
目标的行动次数为5以上时,获得2点AP
2
主宰者
强化
回合开始时,士气1
3
光束射手
攻击
伤害350%
若目标持有护盾,伤害量+50%
1
卡瓦利自动...
攻击
伤害150%
脆弱4
2
士兵首领
攻击
伤害300%
击破时,获得2点AP
1
害羞的园丁
攻击
伤害504
标记3
1
密教仲裁者
技能
护盾140%
下一回合开始时,所有敌人行动次数增加2
1
忧郁的教父
攻击
伤害504
痛苦6
1
恶灵杜拉汉
强化
[消灭]
使用锁定攻击卡牌,对目标痛苦1
1
恶灵火蜥蜴
技能
[消灭2]
抽取4
1
恶灵火蜥蜴
技能
[消灭]
消灭手牌中所有卡牌
并按照相应数量对所有敌人造成伤害50%
1
捕兽者
技能
[快速]
护盾240%、脆弱2
若目标未行动,则护盾获得量+120%、追加脆弱1
1
暗影之爪
攻击
伤害1202
击杀:赋予随机敌人伤害1202
2
杀戮者
技能
[消灭]
护盾200%
按照获得的护盾对所有敌人造成伤害
0
深渊虫
技能
士气减少1
决心减少3
1
狼之克星
攻击
所有敌人伤害120%
削弱2
损伤2
1
甲虫
强化
结晶化5
2
痛苦炽天使
攻击
伤害250%
若手牌中只有此卡牌时费用减少2
1
精灵凤凰
技能
[消灭]
决心2
获得相当于HP减少量的护盾
1
精灵凯福克...
技能
[消灭]
从抽取卡牌中选择1张抽取,复制1张此卡牌至手牌
1
翅翼人面兽
攻击
对随机敌人伤害505
1
腐烂收割者
攻击
[快速]
伤害160%
行动次数增加1
0
虚无饥饿
技能
[消灭]
士气2
士气减少2
1
阴森的教母
强化
回合结束时,对随机敌人造成200%的伤害
0
阿比图姆
强化
[消灭]
所受伤害量-15%(每回合1次)

';

           }
           
           var params = {
               action: 'parse',
               format: 'json',
               text: invokeText,
               contentmodel: 'wikitext',
               disablelimitreport: true,
               wrapoutputclass: 
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       listContainer.innerHTML = data.parse.text['*'];
                       
                       setTimeout(function() {
                           addCardSelectionHandlers(cardType);
                       }, 100);
                   } else {

listContainer.innerHTML = '

加载卡牌失败

';

                   }
               })
               .catch(error => {
                   console.error('加载卡牌失败:', error);

listContainer.innerHTML = '

加载卡牌出错:' + error.message + '

';

               });
       }
       
       // 添加卡牌选择处理器
       function addCardSelectionHandlers(cardType) {
           var listContainer = document.getElementById('card-selection-list');
           
           if (cardType === 'character') {
               var wrappers = listContainer.querySelectorAll('.deck-card-wrapper');
               wrappers.forEach(function(wrapper) {
                   wrapper.style.cursor = 'pointer';
                   wrapper.style.transition = 'transform 0.2s';
                   
                   wrapper.addEventListener('mouseenter', function() {
                       this.style.transform = 'scale(1.05)';
                   });
                   
                   wrapper.addEventListener('mouseleave', function() {
                       this.style.transform = 'scale(1)';
                   });
                   
                   wrapper.addEventListener('click', function(e) {
                       e.stopPropagation();
                       
                       var cardName = this.getAttribute('data-card');
                       var card = this.querySelector('.card-small-wrapper');
                       
                       if (!cardName && card) {
                           cardName = card.getAttribute('data-card');
                       }
                       
                       if (!cardName) {
                           console.error('无法获取卡牌名称');
                           return;
                       }
                       
                       var hasInspiration = card && card.querySelector('.inspiration-button');
                       var hasGodInspiration = card && card.querySelector('.god-inspiration-button');
                       
                       if (hasInspiration || hasGodInspiration) {
                           showVariantSelectionDialog(cardName, 'character');
                       } else {
                           addCardToDeckByName(cardName, 'character');
                       }
                   });
               });
           } else {
               var cards = listContainer.querySelectorAll('.card-small-wrapper');
               
               cards.forEach(function(card) {
                   card.style.cursor = 'pointer';
                   card.style.transition = 'transform 0.2s';
                   
                   card.addEventListener('mouseenter', function() {
                       this.style.transform = 'scale(1.05)';
                   });
                   
                   card.addEventListener('mouseleave', function() {
                       this.style.transform = 'scale(1)';
                   });
                   
                   card.addEventListener('click', function(e) {
                       e.stopPropagation();
                       addCardToDeck(this, cardType);
                   });
               });
           }
       }
       
       // 显示变体选择对话框
       function showVariantSelectionDialog(cardName, cardType) {
           var dialog = document.createElement('div');
           dialog.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:30px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.3);z-index:10001;min-width:300px;';
           

var html = '

选择添加方式

'; html += '

卡牌: ' + cardName + '

'; html += '

'; html += '
添加基础卡牌
'; html += '
查看变体并选择
'; html += '
取消
'; html += '

';

           dialog.innerHTML = html;
           
           var overlay = document.createElement('div');
           overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;';
           
           document.body.appendChild(overlay);
           document.body.appendChild(dialog);
           
           dialog.querySelectorAll('.variant-option-btn').forEach(function(btn) {
               btn.addEventListener('mouseenter', function() {
                   this.style.transform = 'translateY(-2px)';
                   this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.2)';
               });
               btn.addEventListener('mouseleave', function() {
                   this.style.transform = 'translateY(0)';
                   this.style.boxShadow = 'none';
               });
           });
           
           dialog.addEventListener('click', function(e) {
               var btn = e.target.closest('.variant-option-btn');
               if (!btn) return;
               
               var action = btn.getAttribute('data-action');
               
               if (action === 'base') {
                   addCardToDeckByName(cardName, cardType);
                   document.body.removeChild(overlay);
                   document.body.removeChild(dialog);
                   document.getElementById('card-modal').style.display = 'none';
               } else if (action === 'view') {
                   addCardToDeckByName(cardName, cardType, function() {
                       document.body.removeChild(overlay);
                       document.body.removeChild(dialog);
                       document.getElementById('card-modal').style.display = 'none';
                       
                       setTimeout(function() {
                           alert('卡牌已添加!现在您可以点击卡牌查看并选择变体。');
                       }, 300);
                   });
               } else {
                   document.body.removeChild(overlay);
                   document.body.removeChild(dialog);
               }
           });
       }
       
       // 按名称添加卡牌到卡组
       function addCardToDeckByName(cardName, cardType, callback) {
           if (!currentDeckArea || !currentActiveUnit) return;
           
           var unitData = characterUnits[currentActiveUnit];
           
           var moduleName = ;
           if (cardType === 'character') {
               moduleName = unitData.characterName;
           } else if (cardType === 'neutral') {
               moduleName = '中立';
           } else if (cardType === 'monster') {
               moduleName = '怪物';
           }
           
           var invokeText = ;
           if (cardType === 'character') {
               invokeText = '错误: 找不到模块 "Module:卡牌/' + moduleName + '"';
           } else if (cardType === 'neutral') {
               invokeText = '错误: 找不到中立卡牌 "' + cardName + '"';
           } else if (cardType === 'monster') {
               invokeText = '错误: 找不到怪物 "' + cardName + '"';
           }
           
           var apiUrl = mw.util.wikiScript('api');
           var params = {
               action: 'parse',
               format: 'json',
               text: invokeText,
               contentmodel: 'wikitext',
               disablelimitreport: true
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       // 移除占位符
                       var placeholder = currentDeckArea.querySelector('.deck-placeholder');
                       if (placeholder) {
                           placeholder.remove();
                       }
                       
                       var wrapper = document.createElement('div');
                       wrapper.className = 'deck-card-wrapper';
                       wrapper.innerHTML = data.parse.text['*'];
                       wrapper.setAttribute('data-module', moduleName);
                       wrapper.setAttribute('data-card', cardName);
                       
                       // 确保wrapper不会换行
                       wrapper.style.flexShrink = '0';
                       wrapper.style.display = 'inline-block';
                       
                       var uniqueId = 'deck-card-' + currentActiveUnit + '-' + (++unitData.cardIdCounter);
                       wrapper.setAttribute('data-unique-id', uniqueId);
                       wrapper.setAttribute('data-unit-index', currentActiveUnit);
                       
                       unitData.selectedCards[uniqueId] = {
                           module: moduleName,
                           cardName: cardName,
                           variantType: null,
                           variantParam: null,
                           variantIndex: null
                       };
                       
                       currentDeckArea.appendChild(wrapper);
                       
                       setTimeout(function() {
                           var card = wrapper.querySelector('.card-small-wrapper');
                           if (card) {
                               var deleteBtn = document.createElement('div');
                               deleteBtn.className = 'card-delete-btn';
                               deleteBtn.innerHTML = '×';
                               deleteBtn.style.cssText = 'position:absolute;top:5px;right:5px;width:20px;height:20px;background:rgba(255,0,0,0.7);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;font-size:16px;line-height:1;font-weight:bold;';
                               
                               deleteBtn.addEventListener('click', function(e) {
                                   e.stopPropagation();
                                   wrapper.remove();
                                   delete unitData.selectedCards[uniqueId];
                                   checkAndShowPlaceholder(currentActiveUnit);
                               });
                               
                               card.style.position = 'relative';
                               card.appendChild(deleteBtn);
                           }
                           
                           setupGlobalModalListener();
                           
                           if (callback) callback();
                       }, 100);
                   } else {
                       alert('添加卡牌失败');
                   }
               })
               .catch(error => {
                   console.error('添加卡牌失败:', error);
                   alert('添加卡牌出错:' + error.message);
               });
       }
       
       // 添加卡牌到卡组(从元素获取信息)
       function addCardToDeck(cardElement, cardType) {
           if (!currentDeckArea || !currentActiveUnit) return;
           
           var cardName = cardElement.getAttribute('data-card-name') || 
                         cardElement.getAttribute('data-card');
           
           if (!cardName) {
               var parent = cardElement.closest('[data-card]');
               if (parent) {
                   cardName = parent.getAttribute('data-card');
               }
           }
           
           if (!cardName) {
               var parent = cardElement.closest('[data-card-name]');
               if (parent) {
                   cardName = parent.getAttribute('data-card-name');
               }
           }
           
           if (!cardName) {
               var wrapper = cardElement.closest('.deck-card-wrapper');
               if (wrapper) {
                   cardName = wrapper.getAttribute('data-card');
               }
           }
           
           if (!cardName) {
               console.error('无法获取卡牌名称');
               alert('错误:无法获取卡牌名称');
               return;
           }
           
           addCardToDeckByName(cardName, cardType, function() {
               document.getElementById('card-modal').style.display = 'none';
           });
       }
       
       // 关闭卡牌选择窗口
       document.getElementById('close-card-modal').addEventListener('click', function() {
           document.getElementById('card-modal').style.display = 'none';
       });
       
       document.getElementById('card-modal').addEventListener('click', function(e) {
           if (e.target === this) {
               this.style.display = 'none';
           }
       });
       
       // ========== 装备选择功能 ==========
       document.querySelectorAll('.equipment-slot').forEach(function(slot) {
           slot.addEventListener('click', function() {
               currentActiveUnit = this.closest('.character-unit').getAttribute('data-unit-index');
               var equipmentType = this.getAttribute('data-equipment-type');
               
               var titleMap = {
                   'weapon': '选择武器',
                   'armor': '选择装甲',
                   'ring': '选择戒指'
               };
               document.getElementById('equipment-modal-title').textContent = titleMap[equipmentType] || '选择装备';
               
               loadEquipmentList(equipmentType);
               
               document.getElementById('equipment-modal').style.display = 'block';
           });
       });
       
       document.getElementById('close-equipment-modal').addEventListener('click', function() {
           document.getElementById('equipment-modal').style.display = 'none';
       });
       
       document.getElementById('equipment-modal').addEventListener('click', function(e) {
           if (e.target === this) {
               this.style.display = 'none';
           }
       });
       
       function loadEquipmentList(equipmentType) {
           var listContainer = document.getElementById('equipment-list');

listContainer.innerHTML = '

加载中...

';

           var categoryMap = {
               'weapon': '武器',
               'armor': '装甲',
               'ring': '戒指'
           };
           
           var category = categoryMap[equipmentType];
           
           var apiUrl = mw.util.wikiScript('api');
           var askQuery = ;
           
           var params = {
               action: 'parse',
               format: 'json',
               text: askQuery,
               contentmodel: 'wikitext',
               disablelimitreport: true
           };
           
           fetch(apiUrl + '?' + new URLSearchParams(params))
               .then(response => response.json())
               .then(data => {
                   if (data.parse && data.parse.text) {
                       listContainer.innerHTML = data.parse.text['*'];
                       
                       setTimeout(function() {
                           addEquipmentSelectionHandlers(equipmentType);
                       }, 100);
                   } else {

listContainer.innerHTML = '

加载装备失败

';

                   }
               })
               .catch(error => {
                   console.error('加载装备失败:', error);

listContainer.innerHTML = '

加载装备出错:' + error.message + '

';

               });
       }
       
       function addEquipmentSelectionHandlers(equipmentType) {
           var equipmentOptions = document.querySelectorAll('#equipment-list .equipment-option');
           
           equipmentOptions.forEach(function(option) {
               option.style.cursor = 'pointer';
               option.style.transition = 'all 0.3s';
               
               option.addEventListener('mouseenter', function() {
                   this.style.transform = 'translateY(-5px)';
                   this.style.boxShadow = '0 5px 20px rgba(102,126,234,0.4)';
               });
               
               option.addEventListener('mouseleave', function() {
                   this.style.transform = 'translateY(0)';
                   this.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
               });
               
               option.addEventListener('click', function() {
                   var equipmentId = this.getAttribute('data-equipment-id');
                   var equipmentImg = this.querySelector('img');
                   
                   if (equipmentImg && currentActiveUnit) {
                       var unit = document.querySelector('.character-unit[data-unit-index="' + currentActiveUnit + '"]');
                       var slot = unit.querySelector('.equipment-slot[data-equipment-type="' + equipmentType + '"]');
                       
                       var clonedImg = equipmentImg.cloneNode(true);
                       clonedImg.style.width = '100px';
                       clonedImg.style.height = '100px';
                       clonedImg.style.objectFit = 'contain';
                       
                       slot.innerHTML = ;
                       slot.appendChild(clonedImg);
                       slot.style.border = 'none';
                       
                       document.getElementById('equipment-modal').style.display = 'none';
                   }
               });
           });
       }
       
       // 初始化:设置默认角色1为激活单元
       currentActiveUnit = '0';
   }
   
   // 页面加载完成后初始化
   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initTeamSimulator);
   } else {
       initTeamSimulator();
   }

})(); </script>

<style>

  1. team-simulator {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

  1. save-team-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 12px rgba(0,0,0,0.15);

}

  1. save-team-btn:active {
   transform: translateY(0);

}

.character-unit {

   background: white;
   transition: all 0.3s;

}

.character-slot, .partner-slot {

   transition: all 0.3s;
   overflow: hidden;

}

.character-slot:hover, .partner-slot:hover {

   border-color: #667eea;
   background: #f9f9ff;

}

.deck-area {

   transition: border-color 0.3s, background 0.3s;

}

.deck-area:hover {

   border-color: #667eea;

}

/* 确保卡牌wrapper不换行 */ .deck-card-wrapper {

   flex-shrink: 0;
   display: inline-block;

}

/* 确保中立和怪物卡牌也不换行 */

  1. card-selection-list .deck-card-wrapper,
  2. card-selection-list .card-small-wrapper {
   flex-shrink: 0;
   display: inline-block;

}

.equipment-slot {

   transition: all 0.3s;

}

.equipment-slot:hover {

   border-color: #667eea;
   background: #f9f9ff;

}

/* 模态框样式优化 */

  1. card-modal, #character-modal, #partner-modal, #equipment-modal {
   animation: fadeIn 0.3s ease;

}

@keyframes fadeIn {

   from {
       opacity: 0;
   }
   to {
       opacity: 1;
   }

}

/* 模态框内容动画 */

  1. card-modal > div,
  2. character-modal > div,
  3. partner-modal > div,
  4. equipment-modal > div {
   animation: slideIn 0.3s ease;

}

@keyframes slideIn {

   from {
       transform: translate(-50%, -60%);
       opacity: 0;
   }
   to {
       transform: translate(-50%, -50%);
       opacity: 1;
   }

}

/* 卡牌类型标签样式 */ .card-type-tab {

   transition: all 0.3s;

}

.card-type-tab:hover {

   color: #667eea;
   background: rgba(102, 126, 234, 0.05);

}

.card-type-tab.active {

   color: #667eea;

}

/* 角色和伙伴选项样式 */ .character-option, .partner-option {

   transition: all 0.3s;

}

.character-option:hover, .partner-option:hover {

   transform: translateY(-5px);
   box-shadow: 0 5px 20px rgba(102,126,234,0.4);

}

/* 装备选项样式 */ .equipment-option {

   cursor: pointer;
   padding: 10px;
   border: 2px solid transparent;
   border-radius: 8px;
   transition: all 0.3s;
   background: white;

}

.equipment-option:hover {

   border-color: #667eea;
   transform: translateY(-5px);
   box-shadow: 0 5px 20px rgba(102,126,234,0.4);

}

/* 删除按钮样式优化 */ .card-delete-btn {

   transition: all 0.2s;
   user-select: none;

}

.card-delete-btn:hover {

   background: rgba(255,0,0,0.9);
   transform: scale(1.2);

}

/* 占位符样式 */ .deck-placeholder {

   pointer-events: none;
   user-select: none;

}

/* 变体选择按钮样式 */ .select-variant-btn {

   transition: all 0.3s;
   user-select: none;

}

.select-variant-btn:hover {

   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}

.select-variant-btn:active {

   transform: translateY(0);

}

/* 卡牌选择列表样式优化 */

  1. card-selection-list {
   max-height: 60vh;
   overflow-y: auto;

}

/* 自定义滚动条 */

  1. card-selection-list::-webkit-scrollbar,
  2. character-list::-webkit-scrollbar,
  3. partner-list::-webkit-scrollbar,
  4. equipment-list::-webkit-scrollbar {
   width: 8px;

}

  1. card-selection-list::-webkit-scrollbar-track,
  2. character-list::-webkit-scrollbar-track,
  3. partner-list::-webkit-scrollbar-track,
  4. equipment-list::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 4px;

}

  1. card-selection-list::-webkit-scrollbar-thumb,
  2. character-list::-webkit-scrollbar-thumb,
  3. partner-list::-webkit-scrollbar-thumb,
  4. equipment-list::-webkit-scrollbar-thumb {
   background: #888;
   border-radius: 4px;

}

  1. card-selection-list::-webkit-scrollbar-thumb:hover,
  2. character-list::-webkit-scrollbar-thumb:hover,
  3. partner-list::-webkit-scrollbar-thumb:hover,
  4. equipment-list::-webkit-scrollbar-thumb:hover {
   background: #555;

}

/* 响应式设计 */ @media (max-width: 1200px) {

   #team-content {
       max-width: 100%;
       padding: 10px;
   }
   
   .character-unit {
       padding: 15px;
   }

}

@media (max-width: 768px) {

   .character-unit > div {
       flex-direction: column;
   }
   
   .character-unit > div > div {
       width: 100% !important;
   }
   
   .deck-area {
       min-height: 200px;
   }
   
   #card-modal > div,
   #character-modal > div,
   #partner-modal > div,
   #equipment-modal > div {
       width: 95%;
       max-width: 95%;
       min-width: auto;
       padding: 15px;
   }
   
   .card-type-tab {
       padding: 8px 12px;
       font-size: 14px;
   }
   
   #save-team-btn {
       padding: 10px 20px;
       font-size: 14px;
   }

}

/* 卡牌hover效果 */ .deck-card-wrapper:hover {

   z-index: 10;

}

.card-small-wrapper {

   transition: transform 0.2s;

}

.deck-card-wrapper:hover .card-small-wrapper {

   transform: scale(1.05);

}

/* 加载动画 */ @keyframes spin {

   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }

}

/* 关闭按钮样式 */

  1. close-card-modal,
  2. close-character-modal,
  3. close-partner-modal,
  4. close-equipment-modal {
   transition: all 0.3s;
   user-select: none;

}

  1. close-card-modal:hover,
  2. close-character-modal:hover,
  3. close-partner-modal:hover,
  4. close-equipment-modal:hover {
   color: #ff6b6b;
   transform: rotate(90deg) scale(1.2);

}

/* 变体对话框按钮动画 */ .variant-option-btn {

   position: relative;
   overflow: hidden;

}

.variant-option-btn::before {

   content: ;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 0;
   height: 0;
   border-radius: 50%;
   background: rgba(255,255,255,0.3);
   transform: translate(-50%, -50%);
   transition: width 0.6s, height 0.6s;

}

.variant-option-btn:hover::before {

   width: 300px;
   height: 300px;

}

/* 确保弹窗内容居中 */

  1. card-modal > div,
  2. character-modal > div,
  3. partner-modal > div,
  4. equipment-modal > div {
   box-sizing: border-box;

}

/* 网格布局优化 */

  1. character-list,
  2. partner-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
   gap: 15px;
   justify-items: center;

}

  1. equipment-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   gap: 15px;
   justify-items: center;

}

/* 图片加载优化 */ img {

   image-rendering: -webkit-optimize-contrast;

}

/* 防止文本选择 */ .character-slot, .partner-slot, .deck-area, .equipment-slot, .card-type-tab,

  1. save-team-btn {
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

}

/* 工具提示样式(如果需要) */ [data-tooltip] {

   position: relative;

}

[data-tooltip]::after {

   content: attr(data-tooltip);
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   padding: 5px 10px;
   background: rgba(0,0,0,0.8);
   color: white;
   border-radius: 4px;
   font-size: 12px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;

}

[data-tooltip]:hover::after {

   opacity: 1;

}

/* 确保deck-area内的flex布局正确 */ .deck-area {

   box-sizing: border-box;

}

.deck-area > * {

   box-sizing: border-box;

}

/* 修复可能的布局问题 */ .character-unit > div {

   box-sizing: border-box;

}

.character-unit > div > div {

   box-sizing: border-box;

}

/* 打印样式优化 */ @media print {

   #save-team-btn,
   .card-delete-btn,
   #card-modal,
   #character-modal,
   #partner-modal,
   #equipment-modal {
       display: none !important;
   }
   
   .character-unit {
       page-break-inside: avoid;
   }

}

/* 无障碍支持 */ button, [role="button"], .character-option, .partner-option, .equipment-option, .card-type-tab {

   outline-offset: 2px;

}

button:focus, [role="button"]:focus, .character-option:focus, .partner-option:focus, .equipment-option:focus, .card-type-tab:focus {

   outline: 2px solid #667eea;

}

/* 暗色模式支持(如果需要) */ @media (prefers-color-scheme: dark) {

   /* 可以在这里添加暗色模式样式 */

} </style>