微件

配队模拟器:修订间差异

来自卡厄思梦境WIKI

律Rhyme留言 | 贡献
无编辑摘要
律Rhyme留言 | 贡献
无编辑摘要
 
(未显示同一用户的2个中间版本)
第1行: 第1行:
<!-- 加载html2canvas库 -->
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
<script>
(function() {
(function() {
第12行: 第15行:
             characterUnits[unitIndex] = {
             characterUnits[unitIndex] = {
                 characterName: null,
                 characterName: null,
                 characterClass: null, // 新增:保存职业信息
                 characterClass: null,
                 cardIdCounter: 0,
                 cardIdCounter: 0,
                 selectedCards: {}
                 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';
            });
         });
         });


第49行: 第101行:
             console.log('加载战斗员卡牌:', characterName, '单元:', unitIndex);
             console.log('加载战斗员卡牌:', characterName, '单元:', unitIndex);
              
              
            // 找到对应单元的卡组区域
             var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
             var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
             var deckArea = unit.querySelector('.deck-area');
             var deckArea = unit.querySelector('.deck-area');
            deckArea.innerHTML = '<div style="color:#999;font-size:18px;">加载中...</div>';
              
              
             // 通过API调用模块获取卡牌HTML
             // 显示加载状态
            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 apiUrl = mw.util.wikiScript('api');
             var params = {
             var params = {
第69行: 第126行:
                 .then(data => {
                 .then(data => {
                     if (data.parse && data.parse.text) {
                     if (data.parse && data.parse.text) {
                        // 清空并添加卡牌
                         deckArea.innerHTML = data.parse.text['*'];
                         deckArea.innerHTML = data.parse.text['*'];
                          
                          
第75行: 第133行:
                         unitData.cardIdCounter = 0;
                         unitData.cardIdCounter = 0;
                          
                          
                        // 为每张卡牌添加功能
                         setTimeout(function() {
                         setTimeout(function() {
                             initializeCardFeatures(unitIndex);
                             initializeCardFeatures(unitIndex);
                         }, 100);
                         }, 100);
                     } else {
                     } else {
                         deckArea.innerHTML = '<div style="color:red;">加载卡牌失败</div>';
                         if (placeholder) {
                            placeholder.textContent = '加载失败';
                            placeholder.style.color = 'red';
                        }
                     }
                     }
                 })
                 })
                 .catch(error => {
                 .catch(error => {
                     console.error('加载卡牌失败:', error);
                     console.error('加载卡牌失败:', error);
                     deckArea.innerHTML = '<div style="color:red;">加载卡牌出错:' + error.message + '</div>';
                     if (placeholder) {
                        placeholder.textContent = '加载出错';
                        placeholder.style.color = 'red';
                    }
                 });
                 });
         }
         }
          
          
         // 初始化卡牌功能 - 支持多角色
         // 初始化卡牌功能
         function initializeCardFeatures(unitIndex) {
         function initializeCardFeatures(unitIndex) {
             var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
             var unit = document.querySelector('.character-unit[data-unit-index="' + unitIndex + '"]');
             var unitData = characterUnits[unitIndex];
             var unitData = characterUnits[unitIndex];
             var deckArea = unit.querySelector('.deck-area');
             var deckArea = unit.querySelector('.deck-area');
           
            // 明确设置卡组区域样式
            deckArea.style.display = 'flex';
            deckArea.style.flexWrap = 'wrap';
            deckArea.style.gap = '10px';
            deckArea.style.alignItems = 'flex-start';
            deckArea.style.justifyContent = 'flex-start';  // 新增
            deckArea.style.width = '960px';  // 新增:强制宽度
            deckArea.style.padding = '10px';
            deckArea.style.border = '2px dashed #e0e0e0';
            deckArea.style.cursor = 'pointer';
            deckArea.style.background = 'white';
            deckArea.style.boxSizing = 'border-box';  // 新增
              
              
             var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
             var wrappers = deckArea.querySelectorAll('.deck-card-wrapper');
第114行: 第164行:
                 if (!card) return;
                 if (!card) return;
                  
                  
                 // 给每个wrapper分配唯一ID(包含单元索引)
                 // 确保wrapper样式正确
                wrapper.style.flexShrink = '0';
                wrapper.style.display = 'inline-block';
               
                 var uniqueId = 'deck-card-' + unitIndex + '-' + (++unitData.cardIdCounter);
                 var uniqueId = 'deck-card-' + unitIndex + '-' + (++unitData.cardIdCounter);
                 wrapper.setAttribute('data-unique-id', uniqueId);
                 wrapper.setAttribute('data-unique-id', uniqueId);
                 wrapper.setAttribute('data-unit-index', unitIndex);
                 wrapper.setAttribute('data-unit-index', unitIndex);
                  
                  
                // 记录原始状态
                 unitData.selectedCards[uniqueId] = {
                 unitData.selectedCards[uniqueId] = {
                     module: wrapper.getAttribute('data-module') || unitData.characterName,
                     module: wrapper.getAttribute('data-module') || unitData.characterName,
第128行: 第180行:
                 };
                 };
                  
                  
                // 添加删除按钮
                 if (!card.querySelector('.card-delete-btn')) {
                 if (!card.querySelector('.card-delete-btn')) {
                     var deleteBtn = document.createElement('div');
                     var deleteBtn = document.createElement('div');
第139行: 第190行:
                         wrapper.remove();
                         wrapper.remove();
                         delete unitData.selectedCards[uniqueId];
                         delete unitData.selectedCards[uniqueId];
                       
                        // 如果没有卡牌了,显示占位符
                        checkAndShowPlaceholder(unitIndex);
                     });
                     });
                      
                      
第146行: 第200行:
             });
             });
              
              
            // 全局监听卡牌模态框的显示
             setupGlobalModalListener();
             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() {
         function setupGlobalModalListener() {
            // 移除之前的全局监听器
             if (window.deckModalObserver) {
             if (window.deckModalObserver) {
                 window.deckModalObserver.disconnect();
                 window.deckModalObserver.disconnect();
             }
             }
              
              
            // 创建新的观察器
             window.deckModalObserver = new MutationObserver(function(mutations) {
             window.deckModalObserver = new MutationObserver(function(mutations) {
                 mutations.forEach(function(mutation) {
                 mutations.forEach(function(mutation) {
第163行: 第225行:
                         var modal = mutation.target;
                         var modal = mutation.target;
                         if (modal.classList.contains('card-modal') && modal.style.display !== 'none') {
                         if (modal.classList.contains('card-modal') && modal.style.display !== 'none') {
                            // 延迟处理,确保模态框内容已经渲染
                             setTimeout(function() {
                             setTimeout(function() {
                                 enhanceActiveModal(modal);
                                 enhanceActiveModal(modal);
第172行: 第233行:
             });
             });
              
              
            // 观察所有模态框
             document.querySelectorAll('.card-modal').forEach(function(modal) {
             document.querySelectorAll('.card-modal').forEach(function(modal) {
                 window.deckModalObserver.observe(modal, {  
                 window.deckModalObserver.observe(modal, {  
第183行: 第243行:
         // 增强当前活动的模态框
         // 增强当前活动的模态框
         function enhanceActiveModal(modal) {
         function enhanceActiveModal(modal) {
            // 查找是哪张卡牌打开的模态框
             var cardId = modal.id ? modal.id.replace('-modal', '') : null;
             var cardId = modal.id ? modal.id.replace('-modal', '') : null;
             if (!cardId) return;
             if (!cardId) return;
              
              
            // 查找对应的deck卡牌
             var deckCard = null;
             var deckCard = null;
             var uniqueId = null;
             var uniqueId = null;
             var unitIndex = null;
             var unitIndex = null;
              
              
            // 遍历所有deck中的卡牌,找到匹配的那个
             document.querySelectorAll('.deck-area .deck-card-wrapper').forEach(function(wrapper) {
             document.querySelectorAll('.deck-area .deck-card-wrapper').forEach(function(wrapper) {
                 var wrapperCard = wrapper.querySelector('.card-small-wrapper');
                 var wrapperCard = wrapper.querySelector('.card-small-wrapper');
第203行: 第260行:
              
              
             if (!deckCard || !uniqueId || !unitIndex) {
             if (!deckCard || !uniqueId || !unitIndex) {
                console.log('未找到对应的deck卡牌');
                 return;
                 return;
             }
             }
第209行: 第265行:
             var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
             var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
             if (!cardData) {
             if (!cardData) {
                console.log('未找到卡牌数据:', uniqueId);
                 return;
                 return;
             }
             }
              
              
            console.log('增强模态框,卡牌:', cardData.cardName);
           
            // 标记已处理
             if (modal.hasAttribute('data-deck-enhanced')) {
             if (modal.hasAttribute('data-deck-enhanced')) {
                 return;
                 return;
第221行: 第273行:
             modal.setAttribute('data-deck-enhanced', 'true');
             modal.setAttribute('data-deck-enhanced', 'true');
              
              
            // 处理灵光一闪
             var inspirationButton = modal.querySelector('.inspiration-button');
             var inspirationButton = modal.querySelector('.inspiration-button');
             if (inspirationButton) {
             if (inspirationButton) {
第231行: 第282行:
             }
             }
              
              
            // 处理神光一闪
             var godButton = modal.querySelector('.god-inspiration-button');
             var godButton = modal.querySelector('.god-inspiration-button');
             if (godButton) {
             if (godButton) {
第244行: 第294行:
         // 关闭模态框并恢复滚动
         // 关闭模态框并恢复滚动
         function closeModalAndRestoreScroll(modal) {
         function closeModalAndRestoreScroll(modal) {
            // 关闭模态框
             modal.style.display = 'none';
             modal.style.display = 'none';
           
            // 移除可能存在的data属性
             modal.removeAttribute('data-deck-enhanced');
             modal.removeAttribute('data-deck-enhanced');
           
            // 确保body可以滚动
             document.body.style.overflow = '';
             document.body.style.overflow = '';
             document.body.style.position = '';
             document.body.style.position = '';
             document.documentElement.style.overflow = '';
             document.documentElement.style.overflow = '';
           
            // 移除可能存在的其他样式
             document.body.classList.remove('modal-open');
             document.body.classList.remove('modal-open');
             document.documentElement.classList.remove('modal-open');
             document.documentElement.classList.remove('modal-open');
           
            // 触发resize事件,有些框架依赖这个
             window.dispatchEvent(new Event('resize'));
             window.dispatchEvent(new Event('resize'));
         }
         }
第270行: 第311行:
             var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
             var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
             if (!cardData) return;
             if (!cardData) return;
           
            console.log('增强灵光一闪视图,卡牌:', cardData.cardName);
              
              
             var variants = inspirationView.querySelectorAll('.inspiration-variant');
             var variants = inspirationView.querySelectorAll('.inspiration-variant');
第282行: 第321行:
                      
                      
                     selectBtn.addEventListener('click', function() {
                     selectBtn.addEventListener('click', function() {
                        console.log('选择灵光一闪变体', index + 1, '对于卡牌:', cardData.cardName);
                         replaceCard(uniqueId, unitIndex, '灵光一闪', index + 1);
                         replaceCard(uniqueId, unitIndex, '灵光一闪', index + 1);
                         closeModalAndRestoreScroll(modal);
                         closeModalAndRestoreScroll(modal);
第299行: 第337行:
             var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
             var cardData = characterUnits[unitIndex].selectedCards[uniqueId];
             if (!cardData) return;
             if (!cardData) return;
           
            console.log('增强神光一闪视图,卡牌:', cardData.cardName);
              
              
             var godGroups = godView.querySelectorAll('.god-group');
             var godGroups = godView.querySelectorAll('.god-group');
第318行: 第354行:
                          
                          
                         selectBtn.addEventListener('click', function() {
                         selectBtn.addEventListener('click', function() {
                            console.log('选择神光一闪变体', groupName, index + 1, '对于卡牌:', cardData.cardName);
                             replaceCard(uniqueId, unitIndex, '神光一闪', groupName, index + 1);
                             replaceCard(uniqueId, unitIndex, '神光一闪', groupName, index + 1);
                             closeModalAndRestoreScroll(modal);
                             closeModalAndRestoreScroll(modal);
第343行: 第378行:
             }
             }
              
              
            console.log('替换卡牌:', cardData.cardName, '变体类型:', variantType, '参数:', param1, param2);
           
            // 更新记录
             cardData.variantType = variantType;
             cardData.variantType = variantType;
             cardData.variantParam = param1;
             cardData.variantParam = param1;
             cardData.variantIndex = param2;
             cardData.variantIndex = param2;
              
              
            // 显示加载中
             var oldContent = wrapper.innerHTML;
             var oldContent = wrapper.innerHTML;
             wrapper.innerHTML = '<div style="color:#999;padding:20px;">加载中...</div>';
             wrapper.innerHTML = '<div style="color:#999;padding:20px;">加载中...</div>';
              
              
            // 构建invoke调用
             var invokeText = '{{#invoke:卡牌|main|' + cardData.module + '|' + cardData.cardName;
             var invokeText = '{{#invoke:卡牌|main|' + cardData.module + '|' + cardData.cardName;
             if (variantType === '灵光一闪') {
             if (variantType === '灵光一闪') {
第363行: 第393行:
             invokeText += '}}';
             invokeText += '}}';
              
              
            console.log('调用文本:', invokeText);
           
            // 通过API获取新卡牌HTML
             var apiUrl = mw.util.wikiScript('api');
             var apiUrl = mw.util.wikiScript('api');
             var params = {
             var params = {
第381行: 第408行:
                         wrapper.innerHTML = data.parse.text['*'];
                         wrapper.innerHTML = data.parse.text['*'];
                          
                          
                        // 重新添加删除按钮
                         setTimeout(function() {
                         setTimeout(function() {
                             var newCard = wrapper.querySelector('.card-small-wrapper');
                             var newCard = wrapper.querySelector('.card-small-wrapper');
                             if (newCard) {
                             if (newCard) {
                                 // 添加删除按钮
                                 // 确保wrapper样式
                                wrapper.style.flexShrink = '0';
                                wrapper.style.display = 'inline-block';
                               
                                 var deleteBtn = document.createElement('div');
                                 var deleteBtn = document.createElement('div');
                                 deleteBtn.className = 'card-delete-btn';
                                 deleteBtn.className = 'card-delete-btn';
第395行: 第424行:
                                     wrapper.remove();
                                     wrapper.remove();
                                     delete characterUnits[unitIndex].selectedCards[uniqueId];
                                     delete characterUnits[unitIndex].selectedCards[uniqueId];
                                    checkAndShowPlaceholder(unitIndex);
                                 });
                                 });
                                  
                                  
第401行: 第431行:
                             }
                             }
                              
                              
                            // 重新设置全局监听
                             setupGlobalModalListener();
                             setupGlobalModalListener();
                           
                            // 确保滚动恢复
                             document.body.style.overflow = '';
                             document.body.style.overflow = '';
                             document.documentElement.style.overflow = '';
                             document.documentElement.style.overflow = '';
                         }, 100);
                         }, 100);
                     } else {
                     } else {
                        console.error('API返回数据无效');
                         wrapper.innerHTML = oldContent;
                         wrapper.innerHTML = oldContent;
                     }
                     }
第416行: 第442行:
                     console.error('替换卡牌失败:', error);
                     console.error('替换卡牌失败:', error);
                     wrapper.innerHTML = oldContent;
                     wrapper.innerHTML = oldContent;
                    // 恢复滚动
                     document.body.style.overflow = '';
                     document.body.style.overflow = '';
                     document.documentElement.style.overflow = '';
                     document.documentElement.style.overflow = '';
第426行: 第451行:
             var characterOption = e.target.closest('.character-option');
             var characterOption = e.target.closest('.character-option');
             if (characterOption && currentActiveUnit) {
             if (characterOption && currentActiveUnit) {
                // 获取战斗员名称
                 var characterName = characterOption.getAttribute('data-character-name') ||  
                 var characterName = characterOption.getAttribute('data-character-name') ||  
                                   characterOption.getAttribute('data-name') ||
                                   characterOption.getAttribute('data-name') ||
                                   characterOption.getAttribute('title');
                                   characterOption.getAttribute('title');
                  
                  
                // 获取战斗员职业
                 var characterClass = characterOption.getAttribute('data-class') ||  
                 var characterClass = characterOption.getAttribute('data-class') ||  
                                   characterOption.getAttribute('data-职业');
                                   characterOption.getAttribute('data-职业');
第440行: 第463行:
                 }
                 }
                  
                  
                console.log('选中的战斗员:', characterName, '职业:', characterClass, '单元:', currentActiveUnit);
               
                // 保存职业信息
                 characterUnits[currentActiveUnit].characterClass = characterClass;
                 characterUnits[currentActiveUnit].characterClass = characterClass;
                  
                  
                // 克隆卡片显示
                 var clonedCard = characterOption.cloneNode(true);
                 var clonedCard = characterOption.cloneNode(true);
                 clonedCard.classList.remove('character-option');
                 clonedCard.classList.remove('character-option');
第489行: 第508行:
                 var partnerImg = document.createElement('img');
                 var partnerImg = document.createElement('img');
                 partnerImg.src = '/index.php?title=Special:Redirect/file/Portrait_character_wide_' + partnerId + '.png';
                 partnerImg.src = '/index.php?title=Special:Redirect/file/Portrait_character_wide_' + partnerId + '.png';
                 partnerImg.style.width = '150px';
                 partnerImg.style.width = '159px';
                 partnerImg.style.height = '77px';
                 partnerImg.style.height = '77px';
                 partnerImg.style.objectFit = 'cover';
                 partnerImg.style.objectFit = 'cover';
第505行: 第524行:
         // ========== 卡牌添加功能 ==========
         // ========== 卡牌添加功能 ==========
         var currentDeckArea = null;
         var currentDeckArea = null;
         var currentCardType = 'character'; // 当前选择的卡牌类型
         var currentCardType = 'character';
          
          
         // 点击卡组区域打开卡牌选择
         // 点击卡组区域打开卡牌选择
         document.querySelectorAll('.deck-area').forEach(function(deckArea) {
         document.querySelectorAll('.deck-area').forEach(function(deckArea) {
             var originalClickHandler = function(e) {
             var originalClickHandler = function(e) {
                // 如果点击的是卡牌本身或删除按钮,不触发
                 if (e.target.closest('.deck-card-wrapper') ||  
                 if (e.target.closest('.deck-card-wrapper') ||  
                     e.target.closest('.card-small-wrapper') ||
                     e.target.closest('.card-small-wrapper') ||
第521行: 第539行:
                 currentDeckArea = this;
                 currentDeckArea = this;
                  
                  
                // 检查是否已选择战斗员
                 var unit = this.closest('.character-unit');
                 var unit = this.closest('.character-unit');
                 var characterSlot = unit.querySelector('.character-slot');
                 var characterSlot = unit.querySelector('.character-slot');
                  
                  
                // 修正判断逻辑:检查是否有战斗员图片或内容
                 var hasCharacter = characterSlot.querySelector('img') !== null ||  
                 var hasCharacter = characterSlot.querySelector('img') !== null ||  
                                   characterSlot.innerHTML.indexOf('data-character-name') > -1 ||
                                   characterSlot.innerHTML.indexOf('data-character-name') > -1 ||
第540行: 第556行:
                 }
                 }
                  
                  
                // 重置为战斗员卡牌选项
                 currentCardType = 'character';
                 currentCardType = 'character';
                 document.querySelectorAll('.card-type-tab').forEach(function(tab) {
                 document.querySelectorAll('.card-type-tab').forEach(function(tab) {
第554行: 第569行:
                 }
                 }
                  
                  
                // 显示弹窗
                 document.getElementById('card-modal').style.display = 'block';
                 document.getElementById('card-modal').style.display = 'block';
                 loadCardList('character');
                 loadCardList('character');
第568行: 第582行:
                 currentCardType = cardType;
                 currentCardType = cardType;
                  
                  
                // 更新标签样式
                 document.querySelectorAll('.card-type-tab').forEach(function(t) {
                 document.querySelectorAll('.card-type-tab').forEach(function(t) {
                     t.classList.remove('active');
                     t.classList.remove('active');
第578行: 第591行:
                 this.style.fontWeight = 'bold';
                 this.style.fontWeight = 'bold';
                  
                  
                // 加载对应类型的卡牌
                 loadCardList(cardType);
                 loadCardList(cardType);
             });
             });
第592行: 第604行:
              
              
             if (cardType === 'character') {
             if (cardType === 'character') {
                // 战斗员卡牌 - 使用当前战斗员的卡牌
                 var unitData = characterUnits[currentActiveUnit];
                 var unitData = characterUnits[currentActiveUnit];
                 if (!unitData.characterName) {
                 if (!unitData.characterName) {
第600行: 第611行:
                 invokeText = '{{#invoke:配队/卡牌|deck|' + unitData.characterName + '}}';
                 invokeText = '{{#invoke:配队/卡牌|deck|' + unitData.characterName + '}}';
             } else if (cardType === 'neutral') {
             } else if (cardType === 'neutral') {
                // 中立卡牌 - 根据战斗员职业筛选
                 var unitData = characterUnits[currentActiveUnit];
                 var unitData = characterUnits[currentActiveUnit];
                 var characterClass = unitData.characterClass;
                 var characterClass = unitData.characterClass;
第610行: 第620行:
                 }
                 }
             } else if (cardType === 'monster') {
             } else if (cardType === 'monster') {
                // 怪物卡牌
                 invokeText = '{{#invoke:卡牌/怪物|all}}';
                 invokeText = '{{#invoke:卡牌/怪物|all}}';
             }
             }
第629行: 第638行:
                         listContainer.innerHTML = data.parse.text['*'];
                         listContainer.innerHTML = data.parse.text['*'];
                          
                          
                        // 为每张卡牌添加点击事件
                         setTimeout(function() {
                         setTimeout(function() {
                             addCardSelectionHandlers(cardType);
                             addCardSelectionHandlers(cardType);
第643行: 第651行:
         }
         }
          
          
        // 添加卡牌选择处理器
         function addCardSelectionHandlers(cardType) {
         function addCardSelectionHandlers(cardType) {
             var listContainer = document.getElementById('card-selection-list');
             var listContainer = document.getElementById('card-selection-list');
第660行: 第669行:
                     });
                     });
                      
                      
                    // 战斗员卡牌点击后
                     wrapper.addEventListener('click', function(e) {
                     wrapper.addEventListener('click', function(e) {
                         e.stopPropagation();
                         e.stopPropagation();
                          
                          
                        // 获取卡牌信息
                         var cardName = this.getAttribute('data-card');
                         var cardName = this.getAttribute('data-card');
                         var card = this.querySelector('.card-small-wrapper');
                         var card = this.querySelector('.card-small-wrapper');
第677行: 第684行:
                         }
                         }
                          
                          
                        // 检查是否有变体
                         var hasInspiration = card && card.querySelector('.inspiration-button');
                         var hasInspiration = card && card.querySelector('.inspiration-button');
                         var hasGodInspiration = card && card.querySelector('.god-inspiration-button');
                         var hasGodInspiration = card && card.querySelector('.god-inspiration-button');
                          
                          
                         if (hasInspiration || hasGodInspiration) {
                         if (hasInspiration || hasGodInspiration) {
                            // 有变体,显示一个提示框让用户选择
                             showVariantSelectionDialog(cardName, 'character');
                             showVariantSelectionDialog(cardName, 'character');
                         } else {
                         } else {
                            // 没有变体,直接添加
                             addCardToDeckByName(cardName, 'character');
                             addCardToDeckByName(cardName, 'character');
                         }
                         }
第691行: 第695行:
                 });
                 });
             } else {
             } else {
           
                 var cards = listContainer.querySelectorAll('.card-small-wrapper');
                 var cards = listContainer.querySelectorAll('.card-small-wrapper');
                  
                  
第714行: 第717行:
         }
         }
          
          
         // 新增:显示变体选择对话框
         // 显示变体选择对话框
         function showVariantSelectionDialog(cardName, cardType) {
         function showVariantSelectionDialog(cardName, cardType) {
            // 创建临时对话框
             var dialog = document.createElement('div');
             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;';
             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;';
第722行: 第724行:
             var html = '<h3 style="margin:0 0 20px 0;color:#667eea;text-align:center;">选择添加方式</h3>';
             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 += '<p style="margin:0 0 20px 0;color:#666;text-align:center;">卡牌: ' + cardName + '</p>';
             html += '<div style="display:flex;flex-direction:column;gap:10px;">';
             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="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="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>';
第730行: 第732行:
             dialog.innerHTML = html;
             dialog.innerHTML = html;
              
              
            // 添加背景遮罩
             var overlay = document.createElement('div');
             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;';
             overlay.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10000;';
第737行: 第738行:
             document.body.appendChild(dialog);
             document.body.appendChild(dialog);
              
              
            // 按钮悬停效果
             dialog.querySelectorAll('.variant-option-btn').forEach(function(btn) {
             dialog.querySelectorAll('.variant-option-btn').forEach(function(btn) {
                 btn.addEventListener('mouseenter', function() {
                 btn.addEventListener('mouseenter', function() {
第749行: 第749行:
             });
             });
              
              
            // 处理选择
             dialog.addEventListener('click', function(e) {
             dialog.addEventListener('click', function(e) {
                 var btn = e.target.closest('.variant-option-btn');
                 var btn = e.target.closest('.variant-option-btn');
第757行: 第756行:
                  
                  
                 if (action === 'base') {
                 if (action === 'base') {
                    // 添加基础卡牌
                     addCardToDeckByName(cardName, cardType);
                     addCardToDeckByName(cardName, cardType);
                     document.body.removeChild(overlay);
                     document.body.removeChild(overlay);
第763行: 第761行:
                     document.getElementById('card-modal').style.display = 'none';
                     document.getElementById('card-modal').style.display = 'none';
                 } else if (action === 'view') {
                 } else if (action === 'view') {
                    // 先添加基础卡牌到deck,然后让用户点击查看变体
                     addCardToDeckByName(cardName, cardType, function() {
                     addCardToDeckByName(cardName, cardType, function() {
                         document.body.removeChild(overlay);
                         document.body.removeChild(overlay);
第769行: 第766行:
                         document.getElementById('card-modal').style.display = 'none';
                         document.getElementById('card-modal').style.display = 'none';
                          
                          
                        // 提示用户
                         setTimeout(function() {
                         setTimeout(function() {
                             alert('卡牌已添加!现在您可以点击卡牌查看并选择变体。');
                             alert('卡牌已添加!现在您可以点击卡牌查看并选择变体。');
第775行: 第771行:
                     });
                     });
                 } else {
                 } else {
                    // 取消
                     document.body.removeChild(overlay);
                     document.body.removeChild(overlay);
                     document.body.removeChild(dialog);
                     document.body.removeChild(dialog);
第782行: 第777行:
         }
         }
          
          
        // 按名称添加卡牌到卡组
         function addCardToDeckByName(cardName, cardType, callback) {
         function addCardToDeckByName(cardName, cardType, callback) {
             if (!currentDeckArea || !currentActiveUnit) return;
             if (!currentDeckArea || !currentActiveUnit) return;
第787行: 第783行:
             var unitData = characterUnits[currentActiveUnit];
             var unitData = characterUnits[currentActiveUnit];
              
              
            // 确定模块名称
             var moduleName = '';
             var moduleName = '';
             if (cardType === 'character') {
             if (cardType === 'character') {
                 moduleName = unitData.characterName;
                 moduleName = unitData.characterName;
             } else if (cardType === 'neutral') {
             } else if (cardType === 'neutral') {
                 moduleName = '卡牌/中立';
                 moduleName = '中立';
             } else if (cardType === 'monster') {
             } else if (cardType === 'monster') {
                 moduleName = '卡牌/怪物';
                 moduleName = '怪物';
             }
             }
              
              
             console.log('添加卡牌:', cardName, '类型:', cardType, '模块:', moduleName);
             var invokeText = '';
           
            if (cardType === 'character') {
            // 构建invoke调用
                invokeText = '{{#invoke:卡牌|main|' + moduleName + '|' + cardName + '}}';
            var 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 apiUrl = mw.util.wikiScript('api');
第815行: 第814行:
                 .then(data => {
                 .then(data => {
                     if (data.parse && data.parse.text) {
                     if (data.parse && data.parse.text) {
                         // 创建卡牌容器
                         // 移除占位符
                        var placeholder = currentDeckArea.querySelector('.deck-placeholder');
                        if (placeholder) {
                            placeholder.remove();
                        }
                       
                         var wrapper = document.createElement('div');
                         var wrapper = document.createElement('div');
                         wrapper.className = 'deck-card-wrapper';
                         wrapper.className = 'deck-card-wrapper';
第822行: 第826行:
                         wrapper.setAttribute('data-card', cardName);
                         wrapper.setAttribute('data-card', cardName);
                          
                          
                         // 分配唯一ID
                         // 确保wrapper不会换行
                        wrapper.style.flexShrink = '0';
                        wrapper.style.display = 'inline-block';
                       
                         var uniqueId = 'deck-card-' + currentActiveUnit + '-' + (++unitData.cardIdCounter);
                         var uniqueId = 'deck-card-' + currentActiveUnit + '-' + (++unitData.cardIdCounter);
                         wrapper.setAttribute('data-unique-id', uniqueId);
                         wrapper.setAttribute('data-unique-id', uniqueId);
                         wrapper.setAttribute('data-unit-index', currentActiveUnit);
                         wrapper.setAttribute('data-unit-index', currentActiveUnit);
                          
                          
                        // 记录卡牌数据
                         unitData.selectedCards[uniqueId] = {
                         unitData.selectedCards[uniqueId] = {
                             module: moduleName,
                             module: moduleName,
第836行: 第842行:
                         };
                         };
                          
                          
                        // 添加到卡组区域
                         currentDeckArea.appendChild(wrapper);
                         currentDeckArea.appendChild(wrapper);
                          
                          
                        // 添加删除按钮
                         setTimeout(function() {
                         setTimeout(function() {
                             var card = wrapper.querySelector('.card-small-wrapper');
                             var card = wrapper.querySelector('.card-small-wrapper');
第852行: 第856行:
                                     wrapper.remove();
                                     wrapper.remove();
                                     delete unitData.selectedCards[uniqueId];
                                     delete unitData.selectedCards[uniqueId];
                                    checkAndShowPlaceholder(currentActiveUnit);
                                 });
                                 });
                                  
                                  
第858行: 第863行:
                             }
                             }
                              
                              
                            // 重新设置全局监听
                             setupGlobalModalListener();
                             setupGlobalModalListener();
                              
                              
                            // 执行回调
                             if (callback) callback();
                             if (callback) callback();
                         }, 100);
                         }, 100);
第874行: 第877行:
         }
         }
          
          
         // 修复问题4:添加卡牌到卡组(从元素获取信息)
         // 添加卡牌到卡组(从元素获取信息)
         function addCardToDeck(cardElement, cardType) {
         function addCardToDeck(cardElement, cardType) {
             if (!currentDeckArea || !currentActiveUnit) return;
             if (!currentDeckArea || !currentActiveUnit) return;
              
              
            var unitData = characterUnits[currentActiveUnit];
           
            // 修复:多种方式获取卡牌名称
             var cardName = cardElement.getAttribute('data-card-name') ||  
             var cardName = cardElement.getAttribute('data-card-name') ||  
                           cardElement.getAttribute('data-card');
                           cardElement.getAttribute('data-card');
              
              
            // 如果还获取不到,尝试从父元素获取
             if (!cardName) {
             if (!cardName) {
                 var parent = cardElement.closest('[data-card]');
                 var parent = cardElement.closest('[data-card]');
第892行: 第891行:
             }
             }
              
              
            // 如果还获取不到,尝试从 data-card-name
             if (!cardName) {
             if (!cardName) {
                 var parent = cardElement.closest('[data-card-name]');
                 var parent = cardElement.closest('[data-card-name]');
第900行: 第898行:
             }
             }
              
              
            // 如果还获取不到,尝试从wrapper的data-card属性
             if (!cardName) {
             if (!cardName) {
                 var wrapper = cardElement.closest('.deck-card-wrapper');
                 var wrapper = cardElement.closest('.deck-card-wrapper');
第909行: 第906行:
              
              
             if (!cardName) {
             if (!cardName) {
                 console.error('无法获取卡牌名称,尝试的元素:', cardElement);
                 console.error('无法获取卡牌名称');
                 alert('错误:无法获取卡牌名称');
                 alert('错误:无法获取卡牌名称');
                 return;
                 return;
             }
             }
              
              
            console.log('获取到卡牌名称:', cardName);
           
            // 使用统一的添加方法
             addCardToDeckByName(cardName, cardType, function() {
             addCardToDeckByName(cardName, cardType, function() {
                // 关闭卡牌选择弹窗
                 document.getElementById('card-modal').style.display = 'none';
                 document.getElementById('card-modal').style.display = 'none';
             });
             });
第940行: 第933行:
                 var equipmentType = this.getAttribute('data-equipment-type');
                 var equipmentType = this.getAttribute('data-equipment-type');
                  
                  
                // 设置弹窗标题
                 var titleMap = {
                 var titleMap = {
                     'weapon': '选择武器',
                     'weapon': '选择武器',
第948行: 第940行:
                 document.getElementById('equipment-modal-title').textContent = titleMap[equipmentType] || '选择装备';
                 document.getElementById('equipment-modal-title').textContent = titleMap[equipmentType] || '选择装备';
                  
                  
                // 加载装备列表
                 loadEquipmentList(equipmentType);
                 loadEquipmentList(equipmentType);
                  
                  
第977行: 第968行:
             var category = categoryMap[equipmentType];
             var category = categoryMap[equipmentType];
              
              
            // 使用 SMW ask 查询装备
             var apiUrl = mw.util.wikiScript('api');
             var apiUrl = mw.util.wikiScript('api');
             var askQuery = '{{#ask:[[分类:' + category + ']]|?名称|?稀有度|sort=稀有度,名称|order=desc,asc|format=template|template=配队/装备|limit=500}}';
             var askQuery = '{{#ask:[[分类:' + category + ']]|?名称|?稀有度|sort=稀有度,名称|order=desc,asc|format=template|template=配队/装备|limit=500}}';
第995行: 第985行:
                         listContainer.innerHTML = data.parse.text['*'];
                         listContainer.innerHTML = data.parse.text['*'];
                          
                          
                        // 为每个装备添加点击事件
                         setTimeout(function() {
                         setTimeout(function() {
                             addEquipmentSelectionHandlers(equipmentType);
                             addEquipmentSelectionHandlers(equipmentType);
第1,034行: 第1,023行:
                         var slot = unit.querySelector('.equipment-slot[data-equipment-type="' + equipmentType + '"]');
                         var slot = unit.querySelector('.equipment-slot[data-equipment-type="' + equipmentType + '"]');
                          
                          
                        // 克隆图片
                         var clonedImg = equipmentImg.cloneNode(true);
                         var clonedImg = equipmentImg.cloneNode(true);
                         clonedImg.style.width = '100px';
                         clonedImg.style.width = '100px';
第1,047行: 第1,035行:
                     }
                     }
                 });
                 });
            });
        }
       
        // ========== 生成代码功能 ==========
        var generateBtn = document.getElementById('generate-code');
        if (generateBtn) {
            generateBtn.addEventListener('click', function() {
                var code = '{{配队模拟器\n';
               
                // 遍历所有角色单元
                document.querySelectorAll('.character-unit').forEach(function(unit, index) {
                    var unitIndex = unit.getAttribute('data-unit-index');
                    var unitData = characterUnits[unitIndex];
                   
                    // 获取战斗员信息
                    var characterSlot = unit.querySelector('.character-slot .character-option');
                    if (!characterSlot) return;
                   
                    var characterName = characterSlot.getAttribute('data-character-name') ||
                                      characterSlot.getAttribute('data-name') ||
                                      unitData.characterName;
                   
                    if (!characterName) return;
                   
                    // 获取伙伴信息
                    var partnerSlot = unit.querySelector('.partner-slot img');
                    var partnerId = '';
                    if (partnerSlot) {
                        var src = partnerSlot.src;
                        var match = src.match(/Portrait_character_wide_(.+?)\.png/);
                        if (match) partnerId = match[1];
                    }
                   
                    // 角色编号
                    var unitNum = parseInt(unitIndex) + 1;
                    code += '|角色' + unitNum + '=' + characterName + '\n';
                    if (partnerId) {
                        code += '|伙伴' + unitNum + '=' + partnerId + '\n';
                    }
                   
                    // 获取卡组信息
                    var cardWrappers = unit.querySelectorAll('.deck-area .deck-card-wrapper');
                    var cardIndex = 1;
                   
                    cardWrappers.forEach(function(wrapper) {
                        var uniqueId = wrapper.getAttribute('data-unique-id');
                        var cardData = unitData.selectedCards[uniqueId];
                       
                        if (!cardData) return;
                       
                        var cardParam = '|卡牌' + unitNum + '-' + cardIndex + '=' + cardData.cardName;
                       
                        if (cardData.variantType === '灵光一闪') {
                            cardParam += '|灵光' + unitNum + '-' + cardIndex + '=' + cardData.variantParam;
                        } else if (cardData.variantType === '神光一闪') {
                            cardParam += '|神光' + unitNum + '-' + cardIndex + '=' + cardData.variantParam + '-' + cardData.variantIndex;
                        }
                       
                        code += cardParam + '\n';
                        cardIndex++;
                    });
                });
               
                code += '}}';
               
                // 显示生成的代码
                var codeOutput = document.getElementById('generated-code');
                if (codeOutput) {
                    codeOutput.value = code;
                    document.getElementById('code-output').style.display = 'block';
                }
            });
        }
       
        // 复制代码
        var copyBtn = document.getElementById('copy-code');
        if (copyBtn) {
            copyBtn.addEventListener('click', function() {
                var codeArea = document.getElementById('generated-code');
                if (codeArea) {
                    codeArea.select();
                    document.execCommand('copy');
                   
                    this.textContent = '已复制!';
                    var btn = this;
                    setTimeout(function() {
                        btn.textContent = '复制代码';
                    }, 2000);
                }
             });
             });
         }
         }
第1,153行: 第1,052行:


<style>
<style>
.team-simulator {
#team-simulator {
     max-width: 1400px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 20px auto;
}
    padding: 20px;
 
     background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
#save-team-btn:hover {
    border-radius: 15px;
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
}


.team-container {
#save-team-btn:active {
     display: flex;
     transform: translateY(0);
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}
}


.character-unit {
.character-unit {
     background: white;
     background: white;
     border-radius: 12px;
     transition: all 0.3s;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 400px;
    max-width: 450px;
}
 
.unit-header {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
}


.character-slot, .partner-slot {
.character-slot, .partner-slot {
    border: 2px dashed #ccc;
    border-radius: 8px;
    cursor: pointer;
     transition: all 0.3s;
     transition: all 0.3s;
     overflow: hidden;
     overflow: hidden;
    background: #f9f9f9;
}
}


.character-slot {
.character-slot:hover, .partner-slot:hover {
     width: 150px;
     border-color: #667eea;
     height: 150px;
     background: #f9f9ff;
}
}


.partner-slot {
.deck-area {
     width: 150px;
     transition: border-color 0.3s, background 0.3s;
    height: 77px;
}
}


.character-slot:hover, .partner-slot:hover {
.deck-area:hover {
     border-color: #667eea;
     border-color: #667eea;
    background: #f0f0ff;
    transform: scale(1.02);
}
}


.placeholder {
/* 确保卡牌wrapper不换行 */
     display: flex;
.deck-card-wrapper {
    align-items: center;
     flex-shrink: 0;
     justify-content: center;
     display: inline-block;
    height: 100%;
}
    color: #999;
 
    font-size: 14px;
/* 确保中立和怪物卡牌也不换行 */
     text-align: center;
#card-selection-list .deck-card-wrapper,
     padding: 10px;
#card-selection-list .card-small-wrapper {
     flex-shrink: 0;
     display: inline-block;
}
}


/* 修复问题1:卡组区域样式 */
.equipment-slot {
.deck-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 360px;
    width: 100%;
    padding: 10px;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
     transition: all 0.3s;
     transition: all 0.3s;
    box-sizing: border-box;
}
}


.deck-area:hover {
.equipment-slot:hover {
     border-color: #667eea;
     border-color: #667eea;
     background: #f9f9ff;
     background: #f9f9ff;
}
}


.deck-card-wrapper {
/* 模态框样式优化 */
     position: relative;
#card-modal, #character-modal, #partner-modal, #equipment-modal {
    flex-shrink: 0;
     animation: fadeIn 0.3s ease;
}
}


/* 模态框样式 */
@keyframes fadeIn {
.modal {
     from {
     display: none;
        opacity: 0;
    position: fixed;
     }
    z-index: 9999;
     to {
    left: 0;
        opacity: 1;
    top: 0;
     }
     width: 100%;
     height: 100%;
    background-color: rgba(0,0,0,0.6);
     overflow: auto;
}
}


.modal-content {
/* 模态框内容动画 */
    background-color: #fefefe;
#card-modal > div,
    margin: 3% auto;
#character-modal > div,
    padding: 0;
#partner-modal > div,  
    border-radius: 15px;
#equipment-modal > div {
    width: 90%;
     animation: slideIn 0.3s ease;
    max-width: 1200px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.3);
    max-height: 90vh;
     display: flex;
    flex-direction: column;
}
}


.modal-header {
@keyframes slideIn {
     padding: 20px 30px;
     from {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        transform: translate(-50%, -60%);
    color: white;
        opacity: 0;
     border-radius: 15px 15px 0 0;
     }
     display: flex;
     to {
    justify-content: space-between;
        transform: translate(-50%, -50%);
     align-items: center;
        opacity: 1;
     }
}
}


.modal-header h2 {
/* 卡牌类型标签样式 */
     margin: 0;
.card-type-tab {
    font-size: 24px;
     transition: all 0.3s;
}
}


.modal-body {
.card-type-tab:hover {
     padding: 30px;
     color: #667eea;
    overflow-y: auto;
     background: rgba(102, 126, 234, 0.05);
     flex: 1;
}
}


.close {
.card-type-tab.active {
     color: white;
     color: #667eea;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s;
}
}


.close:hover {
/* 角色和伙伴选项样式 */
     transform: scale(1.2);
.character-option, .partner-option {
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
     transition: all 0.3s;
}
}


/* 角色列表 */
.character-option:hover, .partner-option:hover {
#character-list, #partner-list {
     transform: translateY(-5px);
     display: grid;
     box-shadow: 0 5px 20px rgba(102,126,234,0.4);
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}
}


.character-option, .partner-option {
/* 装备选项样式 */
.equipment-option {
     cursor: pointer;
     cursor: pointer;
     padding: 10px;
     padding: 10px;
     border: 2px solid transparent;
     border: 2px solid transparent;
     border-radius: 12px;
     border-radius: 8px;
     transition: all 0.3s;
     transition: all 0.3s;
     background: white;
     background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
}


.character-option:hover, .partner-option:hover {
.equipment-option:hover {
     border-color: #667eea;
     border-color: #667eea;
     transform: translateY(-5px);
     transform: translateY(-5px);
第1,332行: 第1,183行:
}
}


.character-option img, .partner-option img {
/* 删除按钮样式优化 */
     width: 100%;
.card-delete-btn {
     height: auto;
     transition: all 0.2s;
     border-radius: 8px;
     user-select: none;
}
 
.card-delete-btn:hover {
     background: rgba(255,0,0,0.9);
    transform: scale(1.2);
}
}


/* 卡牌类型标签 */
/* 占位符样式 */
.card-type-tabs {
.deck-placeholder {
     display: flex;
     pointer-events: none;
    gap: 10px;
     user-select: none;
    margin-bottom: 20px;
     border-bottom: 2px solid #e0e0e0;
}
}


.card-type-tab {
/* 变体选择按钮样式 */
    padding: 12px 24px;
.select-variant-btn {
    cursor: pointer;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: normal;
    color: #666;
    border-bottom: 3px solid transparent;
     transition: all 0.3s;
     transition: all 0.3s;
    user-select: none;
}
}


.card-type-tab:hover {
.select-variant-btn:hover {
     color: #667eea;
     transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
}


.card-type-tab.active {
.select-variant-btn:active {
     color: #667eea;
     transform: translateY(0);
    border-bottom-color: #667eea;
    font-weight: bold;
}
}


/* 卡牌选择列表 */
/* 卡牌选择列表样式优化 */
#card-selection-list {
#card-selection-list {
     display: flex;
     max-height: 60vh;
     flex-wrap: wrap;
    overflow-y: auto;
     gap: 15px;
}
     justify-content: center;
 
/* 自定义滚动条 */
#card-selection-list::-webkit-scrollbar,
#character-list::-webkit-scrollbar,
#partner-list::-webkit-scrollbar,
#equipment-list::-webkit-scrollbar {
    width: 8px;
}
 
#card-selection-list::-webkit-scrollbar-track,
#character-list::-webkit-scrollbar-track,
#partner-list::-webkit-scrollbar-track,
#equipment-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
 
#card-selection-list::-webkit-scrollbar-thumb,
#character-list::-webkit-scrollbar-thumb,
#partner-list::-webkit-scrollbar-thumb,
#equipment-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
 
#card-selection-list::-webkit-scrollbar-thumb:hover,
#character-list::-webkit-scrollbar-thumb:hover,
#partner-list::-webkit-scrollbar-thumb:hover,
#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);
}
}


/* 生成按钮 */
/* 加载动画 */
.generate-section {
@keyframes spin {
     text-align: center;
     0% { transform: rotate(0deg); }
     margin-top: 30px;
     100% { transform: rotate(360deg); }
}
}


#generate-code {
/* 关闭按钮样式 */
    padding: 15px 40px;
#close-card-modal,
    font-size: 18px;
#close-character-modal,
    font-weight: bold;
#close-partner-modal,
    color: white;
#close-equipment-modal {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(102,126,234,0.4);
     transition: all 0.3s;
     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 {
    width: 300px;
    height: 300px;
}
/* 确保弹窗内容居中 */
#card-modal > div,
#character-modal > div,
#partner-modal > div,
#equipment-modal > div {
    box-sizing: border-box;
}
}


#generate-code:hover {
/* 网格布局优化 */
     transform: translateY(-2px);
#character-list,
     box-shadow: 0 8px 25px rgba(102,126,234,0.6);
#partner-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    justify-items: center;
}
}


/* 代码输出 */
#equipment-list {
#code-output {
     display: grid;
     display: none;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     margin-top: 20px;
     gap: 15px;
     padding: 20px;
     justify-items: center;
     background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
}


#generated-code {
/* 图片加载优化 */
     width: 100%;
img {
    min-height: 200px;
     image-rendering: -webkit-optimize-contrast;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    resize: vertical;
}
}


#copy-code {
/* 防止文本选择 */
    margin-top: 10px;
.character-slot,
    padding: 10px 30px;
.partner-slot,
    font-size: 16px;
.deck-area,
    color: white;
.equipment-slot,
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
.card-type-tab,
     border: none;
#save-team-btn {
     border-radius: 25px;
     user-select: none;
     cursor: pointer;
     -webkit-user-select: none;
     transition: all 0.3s;
     -moz-user-select: none;
     -ms-user-select: none;
}
}


#copy-code:hover {
/* 工具提示样式(如果需要) */
     transform: scale(1.05);
[data-tooltip] {
    box-shadow: 0 5px 15px rgba(40,167,69,0.4);
     position: relative;
}
}


/* 删除按钮 */
[data-tooltip]::after {
.card-delete-btn {
    content: attr(data-tooltip);
     position: absolute;
     position: absolute;
     top: 5px;
     bottom: 100%;
     right: 5px;
     left: 50%;
     width: 20px;
     transform: translateX(-50%);
     height: 20px;
     padding: 5px 10px;
     background: rgba(255,0,0,0.7);
     background: rgba(0,0,0,0.8);
     color: white;
     color: white;
     border-radius: 50%;
     border-radius: 4px;
     display: flex;
     font-size: 12px;
     align-items: center;
     white-space: nowrap;
     justify-content: center;
     opacity: 0;
     cursor: pointer;
    pointer-events: none;
    z-index: 100;
     transition: opacity 0.3s;
     font-size: 16px;
}
     line-height: 1;
 
     font-weight: bold;
[data-tooltip]:hover::after {
     transition: all 0.2s;
     opacity: 1;
}
 
/* 确保deck-area内的flex布局正确 */
.deck-area {
     box-sizing: border-box;
}
 
.deck-area > * {
     box-sizing: border-box;
}
 
/* 修复可能的布局问题 */
.character-unit > div {
     box-sizing: border-box;
}
}


.card-delete-btn:hover {
.character-unit > div > div {
     background: rgba(255,0,0,0.9);
     box-sizing: border-box;
    transform: scale(1.2);
}
}


/* 响应式设计 */
/* 打印样式优化 */
@media (max-width: 768px) {
@media print {
     .team-container {
    #save-team-btn,
         flex-direction: column;
     .card-delete-btn,
    #card-modal,
    #character-modal,
    #partner-modal,
    #equipment-modal {
         display: none !important;
     }
     }
      
      
     .character-unit {
     .character-unit {
         min-width: 100%;
         page-break-inside: avoid;
    }
   
    #character-list, #partner-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
   
    .modal-content {
        width: 95%;
        margin: 5% auto;
     }
     }
}
/* 无障碍支持 */
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>
</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>