优化移动设备上的提示框样式和交互逻辑，增强用户体验，确保在不同设备上均能良好显示和操作。

src/web/static/css/style.css

@@ -204,4 +204,67 @@
     border-left: 3px solid #4f46e5;
     padding-left: 5px;
     border-radius: 4px;
+}
+
+/* 移动设备上的提示框样式优化 */
+@media (max-width: 768px) {
+    #tft-tooltip {
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+        border: 1px solid rgba(99, 102, 241, 0.5);
+        max-width: calc(100vw - 40px);
+        animation: mobileTooltipFadeIn 0.2s ease-out;
+    }
+    
+    #tft-tooltip .close-tooltip {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(79, 70, 229, 0.2);
+        border-radius: 50%;
+        opacity: 0.9;
+    }
+    
+    #tft-tooltip .tooltip-content {
+        margin-top: 5px;
+        padding-right: 15px;
+    }
+    
+    /* 增大移动端触摸目标大小 */
+    .chess-item-mini, .synergy-item-mini {
+        padding: 10px;
+        margin-bottom: 8px;
+    }
+    
+    /* 移动端使用更明显的交互提示 */
+    .chess-item-mini::after, .synergy-item-mini::after {
+        content: '点击查看';
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        color: rgba(99, 102, 241, 0.8);
+        font-size: 10px;
+        opacity: 0.8;
+    }
+    
+    /* 提示框返回按钮优化 */
+    .tooltip-back-button {
+        width: 36px;
+        height: 36px;
+        opacity: 0.9;
+        background-color: rgba(79, 70, 229, 0.8);
+    }
+    
+    @keyframes mobileTooltipFadeIn {
+        from { 
+            opacity: 0;
+            transform: translateY(10px) scale(0.95);
+        }
+        to { 
+            opacity: 1;
+            transform: translateY(0) scale(1);
+        }
+    }
 } 

src/web/static/js/main.js

@@ -658,20 +658,43 @@ function toggleActiveChessVisibility(showOnlyActive) {
 let tooltipHistory = [];
 
 /**
- * 创建悬停提示
+ * 创建提示框
  */
 function createTooltip() {
-    // 创建提示元素
+    // 如果已经存在提示框，不重复创建
-    if ($('#tft-tooltip').length === 0) {
+    if ($('#tft-tooltip').length) {
-        $('body').append(`
+        return;
-            <div id="tft-tooltip" class="hidden fixed z-50 p-4 bg-gray-800 text-white rounded-lg shadow-lg max-w-sm">
-                <div class="tooltip-content relative"></div>
-                <div class="loading-spinner hidden flex justify-center py-2">
-                    <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-white"></div>
-                </div>
-            </div>
-        `);
     }
+    
+    const tooltip = $(`
+        <div id="tft-tooltip" class="fixed z-50 hidden bg-gray-800 text-white rounded-lg p-4 shadow-lg border border-gray-700 w-80">
+            <div class="tooltip-content"></div>
+            <div class="loading-spinner absolute inset-0 flex items-center justify-center bg-gray-800 bg-opacity-80 hidden">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500"></div>
+            </div>
+            <button class="close-tooltip absolute top-2 right-2 text-gray-400 hover:text-white">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+            </button>
+        </div>
+    `);
+    
+    // 添加到页面
+    $('body').append(tooltip);
+    
+    // 绑定关闭按钮事件
+    tooltip.find('.close-tooltip').on('click', function(e) {
+        e.stopPropagation();
+        tooltip.addClass('hidden');
+        currentHoveredId = null;
+        $('.tooltip-active').removeClass('tooltip-active');
+    });
+    
+    // 防止点击提示框本身触发关闭
+    tooltip.on('click', function(e) {
+        e.stopPropagation();
+    });
 }
 
 /**
@@ -1069,34 +1092,65 @@ function showSynergyTooltip(synergyId, element) {
  */
 function positionTooltip(tooltip, element) {
     const rect = element.getBoundingClientRect();
-    const tooltipWidth = 320;  // 提示框宽度
+    const isMobile = window.matchMedia("(max-width: 768px)").matches || 
+                     ('ontouchstart' in window) || 
+                     (navigator.maxTouchPoints > 0);
     
-    // 计算水平位置，优先显示在右侧
+    // 移动设备优先考虑居中显示
-    let left = rect.right + 10;
+    if (isMobile) {
-    if (left + tooltipWidth > window.innerWidth) {
+        const tooltipWidth = Math.min(320, window.innerWidth - 40); // 在小屏幕上适当缩小
-        // 右侧空间不足，显示在左侧
+        let left = Math.max(20, (window.innerWidth - tooltipWidth) / 2);
-        left = rect.left - tooltipWidth - 10;
+        
-        // 如果左侧也没有足够空间
+        // 移动设备上优先显示在元素下方，占据更多空间
-        if (left < 0) {
+        let top = rect.bottom + 10;
-            left = Math.max(10, (window.innerWidth - tooltipWidth) / 2); // 居中显示
+        
+        // 如果元素已经在视窗下方，则显示在元素上方
+        if (top > window.innerHeight / 2) {
+            top = Math.max(20, rect.top - 300); // 预留足够空间显示内容
         }
+        
+        // 设置最大高度，确保提示框不会占满整个屏幕
+        const maxHeight = window.innerHeight - top - 20;
+        
+        tooltip.css({
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${tooltipWidth}px`,
+            maxHeight: `${maxHeight}px`,
+            zIndex: 1000 // 确保在移动设备上能覆盖其他元素
+        });
+    } else {
+        // 桌面设备的定位逻辑
+        const tooltipWidth = 320;  // 提示框宽度
+        
+        // 计算水平位置，优先显示在右侧
+        let left = rect.right + 10;
+        if (left + tooltipWidth > window.innerWidth) {
+            // 右侧空间不足，显示在左侧
+            left = rect.left - tooltipWidth - 10;
+            // 如果左侧也没有足够空间
+            if (left < 0) {
+                left = Math.max(10, (window.innerWidth - tooltipWidth) / 2); // 居中显示
+            }
+        }
+        
+        // 计算垂直位置，考虑提示框不超出屏幕
+        let top = rect.top;
+        const tooltipHeight = Math.min(500, window.innerHeight * 0.8); // 预估高度
+        
+        if (top + tooltipHeight > window.innerHeight) {
+            // 尝试显示在元素上方
+            top = Math.max(10, rect.top - tooltipHeight);
+        }
+        
+        // 设置位置
+        tooltip.css({
+            left: `${left}px`,
+            top: `${top}px`,
+            width: 'auto',
+            maxHeight: `${window.innerHeight - 20}px` // 防止溢出屏幕
+        });
     }
-    
-    // 计算垂直位置，考虑提示框不超出屏幕
-    let top = rect.top;
-    const tooltipHeight = Math.min(500, window.innerHeight * 0.8); // 预估高度
-    
-    if (top + tooltipHeight > window.innerHeight) {
-        // 尝试显示在元素上方
-        top = Math.max(10, rect.top - tooltipHeight);
-    }
-    
-    // 设置位置
-    tooltip.css({
-        left: `${left}px`,
-        top: `${top}px`,
-        maxHeight: `${window.innerHeight - 20}px` // 防止溢出屏幕
-    });
 }
 
 // 防抖函数
@@ -1155,72 +1209,128 @@ function initTooltips() {
     
     const tooltipElement = $('#tft-tooltip');
     
-    // 棋子悬停事件 - 使用防抖
+    // 检测是否为移动设备
-    const debouncedShowChessTooltip = debounce((chessId, element) => {
+    const isMobile = window.matchMedia("(max-width: 768px)").matches || 
-        if (currentHoveredId === chessId) {
+                     ('ontouchstart' in window) || 
-            showChessTooltip(chessId, element);
+                     (navigator.maxTouchPoints > 0);
-        }
-    }, 50);
     
-    $(document).on('mouseenter', '.chess-item', function(e) {
+    // 点击文档其它位置关闭提示框
+    $(document).on('click touchend', function(e) {
+        if (!$(e.target).closest('#tft-tooltip, .chess-item, .synergy-item').length) {
+            tooltipElement.addClass('hidden');
+            currentHoveredId = null;
+            $('.tooltip-active').removeClass('tooltip-active');
+        }
+    });
+    
+    // 处理棋子触发事件
+    $(document).on(isMobile ? 'click' : 'mouseenter', '.chess-item', function(e) {
         // 避免在点击移除按钮时显示提示
         if ($(e.target).closest('.remove-chess').length) {
             return;
         }
         
+        // 在移动设备上点击时阻止冒泡
+        if (isMobile) {
+            e.stopPropagation();
+            // 如果已经点击过同一个元素，则关闭提示
+            if (currentHoveredId === $(this).data('chess-id') && tooltipElement.is(':visible')) {
+                tooltipElement.addClass('hidden');
+                currentHoveredId = null;
+                $(this).removeClass('tooltip-active');
+                return;
+            }
+        }
+        
         const chessId = $(this).data('chess-id');
         if (chessId) {
+            // 关闭之前可能打开的提示
+            $('.tooltip-active').removeClass('tooltip-active');
+            
             currentHoveredId = chessId;
-            debouncedShowChessTooltip(chessId, this);
+            
+            // 在移动设备上直接显示，非移动设备使用防抖
+            if (isMobile) {
+                showChessTooltip(chessId, this);
+            } else {
+                // 使用防抖函数延迟显示提示
+                debounce((id, element) => {
+                    if (currentHoveredId === id) {
+                        showChessTooltip(id, element);
+                    }
+                }, 50)(chessId, this);
+            }
             
             // 添加活跃状态
             $(this).addClass('tooltip-active');
         }
     });
     
-    // 羁绊悬停事件 - 使用防抖
+    // 处理羁绊触发事件
-    const debouncedShowSynergyTooltip = debounce((synergyId, element) => {
+    $(document).on(isMobile ? 'click' : 'mouseenter', '.synergy-item', function(e) {
-        if (currentHoveredId === synergyId) {
-            showSynergyTooltip(synergyId, element);
-        }
-    }, 50);
-    
-    $(document).on('mouseenter', '.synergy-item', function(e) {
         // 避免在点击移除按钮时显示提示
         if ($(e.target).closest('.remove-synergy').length) {
             return;
         }
         
+        // 在移动设备上点击时阻止冒泡
+        if (isMobile) {
+            e.stopPropagation();
+            // 如果已经点击过同一个元素，则关闭提示
+            if (currentHoveredId === $(this).data('synergy-id') && tooltipElement.is(':visible')) {
+                tooltipElement.addClass('hidden');
+                currentHoveredId = null;
+                $(this).removeClass('tooltip-active');
+                return;
+            }
+        }
+        
         const synergyId = $(this).data('synergy-id');
         if (synergyId) {
+            // 关闭之前可能打开的提示
+            $('.tooltip-active').removeClass('tooltip-active');
+            
             currentHoveredId = synergyId;
-            debouncedShowSynergyTooltip(synergyId, this);
+            
+            // 在移动设备上直接显示，非移动设备使用防抖
+            if (isMobile) {
+                showSynergyTooltip(synergyId, this);
+            } else {
+                // 使用防抖函数延迟显示提示
+                debounce((id, element) => {
+                    if (currentHoveredId === id) {
+                        showSynergyTooltip(id, element);
+                    }
+                }, 50)(synergyId, this);
+            }
             
             // 添加活跃状态
             $(this).addClass('tooltip-active');
         }
     });
     
-    // 离开时隐藏提示
+    // 非移动设备的鼠标离开事件
-    $(document).on('mouseleave', '.chess-item, .synergy-item', function() {
+    if (!isMobile) {
-        currentHoveredId = null;
+        $(document).on('mouseleave', '.chess-item, .synergy-item', function() {
-        // 移除活跃状态
+            currentHoveredId = null;
-        $(this).removeClass('tooltip-active');
+            // 移除活跃状态
+            $(this).removeClass('tooltip-active');
+            
+            // 检查鼠标是否在提示框上
+            if (!tooltipElement.is(':hover')) {
+                tooltipElement.addClass('hidden');
+            }
+        });
         
-        // 检查鼠标是否在提示框上
+        // 避免提示框本身触发悬停事件
-        if (!tooltipElement.is(':hover')) {
+        tooltipElement.on('mouseenter', function() {
-            tooltipElement.addClass('hidden');
+            // 保持显示
-        }
+        }).on('mouseleave', function() {
-    });
+            $(this).addClass('hidden');
-    
+            currentHoveredId = null;
-    // 避免提示框本身触发悬停事件
+            $('.tooltip-active').removeClass('tooltip-active');
-    tooltipElement.on('mouseenter', function() {
+        });
-        // 保持显示
+    }
-    }).on('mouseleave', function() {
-        $(this).addClass('hidden');
-        currentHoveredId = null;
-        $('.tooltip-active').removeClass('tooltip-active');
-    });
     
     // 处理点击事件，避免与提示框冲突
     $(document).on('click', '.remove-chess, .remove-synergy', function(e) {