fix: 修复地图界面搜索栏和省级地图返回按钮问题

- 添加省级地图返回按钮，与企业列表界面风格一致
- 修复移动端搜索框布局，独立于header显示
- 添加响应式布局支持：
  * 移动端：112px顶部空间（header + 搜索框）
  * PC端：64px顶部空间（只有header）
- 优化面包屑导航位置
- 在切换地图层级时自动显示/隐藏返回按钮

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

css/components.css

@@ -300,3 +300,30 @@
         padding: 4px 10px;
     }
 }
+
+/* 地图界面响应式布局 */
+#map-interface main {
+    padding-top: 112px; /* 默认移动端：64px header + 48px 搜索框 */
+}
+
+#map-interface #map-chart {
+    height: calc(100vh - 112px);
+}
+
+#breadcrumb-container {
+    top: 120px; /* 移动端：在搜索框下方 */
+}
+
+@media (min-width: 768px) {
+    #map-interface main {
+        padding-top: 64px; /* PC端：只有header */
+    }
+    
+    #map-interface #map-chart {
+        height: calc(100vh - 64px);
+    }
+    
+    #breadcrumb-container {
+        top: 80px; /* PC端：在header下方 */
+    }
+}

index.html

@@ -744,31 +744,48 @@
 
         <!-- 地图界面 -->
         <div id="map-interface">
-            <header class="glass-header fixed top-0 w-full h-16 flex items-center justify-between px-4 md:px-8 z-50">
+            <header class="glass-header fixed top-0 w-full h-16 flex flex-col md:flex-row items-center justify-between px-4 md:px-8 z-50">
-                <div id="map-logo-area" class="flex items-center gap-2 cursor-pointer flex-shrink-0">
+                <div class="flex items-center justify-between w-full md:w-auto">
-                    <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_logo/LOGO_1097x300.png"
+                    <!-- 返回按钮（省级地图显示） -->
-                         alt="多多畅职" class="h-6 md:h-8 w-auto object-contain">
+                    <button id="map-back-btn" class="hidden flex items-center gap-1 md:gap-2 text-gray-400 hover:text-white transition flex-shrink-0" onclick="window.resetMapToChina()">
-                    <div class="text-white font-bold text-xs md:text-sm tracking-wide hidden sm:block">多多畅职企业内推平台</div>
+                        <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <span class="text-gray-400 text-xs ml-2 hidden lg:inline">点击返回首页</span>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+                        </svg>
+                        <span class="text-xs md:text-sm">返回全国</span>
+                    </button>
+                    
+                    <!-- Logo区域 -->
+                    <div id="map-logo-area" class="flex items-center gap-2 cursor-pointer flex-shrink-0">
+                        <img src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/img/duoduo_logo/LOGO_1097x300.png"
+                             alt="多多畅职" class="h-6 md:h-8 w-auto object-contain">
+                        <div class="text-white font-bold text-xs md:text-sm tracking-wide hidden sm:block">多多畅职企业内推平台</div>
+                        <span class="text-gray-400 text-xs ml-2 hidden lg:inline">点击返回首页</span>
+                    </div>
                 </div>
+                
+                <!-- 搜索框（PC端） -->
                 <div class="relative w-1/3 hidden md:block">
                     <input type="text" id="search-input" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-5 rounded-full text-center text-sm placeholder-gray-400">
                 </div>
-                <div class="relative w-full px-4 md:hidden mb-2">
+                
-                    <input type="text" id="search-input-mobile" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-4 rounded-full text-sm placeholder-gray-400">
+                <!-- 当前区域显示 -->
-                </div>
                 <div class="flex items-center gap-2 text-white text-xs md:text-sm flex-shrink-0">
                     <span class="text-gray-400 hidden sm:inline">当前区域:</span>
                     <span id="top-region-name" class="text-cyan-300 font-bold">全国</span>
                 </div>
             </header>
-            <main class="pt-16 w-full h-full relative">
+            
-                <div id="breadcrumb-container" class="absolute top-20 left-4 md:left-8 text-gray-400 text-xs md:text-sm z-40 hidden">
+            <!-- 搜索框（移动端） -->
+            <div class="md:hidden fixed top-16 left-0 right-0 px-4 py-2 z-40" style="background: rgba(11, 16, 38, 0.95); backdrop-filter: blur(12px);">
+                <input type="text" id="search-input-mobile" placeholder="搜索省份、城市、企业..." class="search-input w-full py-2 px-4 rounded-full text-sm placeholder-gray-400">
+            </div>
+            <main class="w-full h-full relative">
+                <div id="breadcrumb-container" class="absolute left-4 md:left-8 text-gray-400 text-xs md:text-sm z-40 hidden">
                     <span class="hover:text-white cursor-pointer transition" onclick="resetMapToChina()">全国</span>
                     <span class="mx-2 text-gray-600">/</span>
                     <span class="text-cyan-400 font-bold">江苏省</span>
                 </div>
-                <div id="map-chart" style="width: 100%; height: calc(100vh - 64px); min-height: 500px;"></div>
+                <div id="map-chart" style="width: 100%; min-height: 400px;"></div>
             </main>
         </div>
 

js/ui/MapInterface.js

@@ -62,10 +62,14 @@ export class MapInterface {
             return;
         }
 
+        // 计算正确的高度：移动端112px（header+搜索框），PC端64px（只有header）
+        const isMobile = window.innerWidth < 768;
+        const headerHeight = isMobile ? 112 : 64;
+        
         this.myChart = echarts.init(chartDom, null, {
             renderer: 'canvas',
             width: window.innerWidth,
-            height: window.innerHeight - 64  // 减去导航栏高度
+            height: window.innerHeight - headerHeight
         });
 
         // 显示加载动画
@@ -84,7 +88,15 @@ export class MapInterface {
         if (regionName === 'china') {
             // 全国地图
             geoJsonUrl = mapConfig.geoJsonUrls.china;
+            
+            // 隐藏面包屑和返回按钮
             document.getElementById('breadcrumb-container').classList.add('hidden');
+            const backBtn = document.getElementById('map-back-btn');
+            if (backBtn) {
+                backBtn.classList.add('hidden');
+                backBtn.classList.remove('flex');
+            }
+            
             document.getElementById('top-region-name').innerText = '全国';
         } else {
             // 省级地图 - 动态加载
@@ -104,6 +116,14 @@ export class MapInterface {
                     `;
                     breadcrumb.classList.remove('hidden');
                 }
+                
+                // 显示返回按钮
+                const backBtn = document.getElementById('map-back-btn');
+                if (backBtn) {
+                    backBtn.classList.remove('hidden');
+                    backBtn.classList.add('flex');
+                }
+                
                 document.getElementById('top-region-name').innerText = provinceInfo.name;
             } else {
                 console.error(`未找到省份 "${provinceName}" 的配置`);