e5a8cd9b19
- 将 uiLayer.style.display 从 'flex' 改为 'block' - 确保标题和副标题垂直堆叠显示 - 修复用户反馈的文字左右排列问题 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
260 lines
8.5 KiB
JavaScript
260 lines
8.5 KiB
JavaScript
/* ===================================
|
||
应用主入口 - 模块编排与路由控制
|
||
=================================== */
|
||
|
||
import { SceneManager } from './scene/SceneManager.js';
|
||
import { MapInterface } from './ui/MapInterface.js';
|
||
import { ListInterface } from './ui/ListInterface.js';
|
||
import { DetailInterface } from './ui/DetailInterface.js';
|
||
import { SearchController } from './ui/SearchController.js';
|
||
import { UIUtils } from './ui/UIUtils.js';
|
||
|
||
class App {
|
||
constructor() {
|
||
// 3D平台 DOM 引用
|
||
this.appContainer = document.getElementById('app-container');
|
||
this.canvasContainer = document.getElementById('canvas-container');
|
||
this.mapInterface = document.getElementById('map-interface');
|
||
this.listInterface = document.getElementById('list-interface');
|
||
this.detailInterface = document.getElementById('detail-interface');
|
||
|
||
// UI 元素
|
||
this.uiLayer = document.getElementById('ui-layer');
|
||
this.hint = document.querySelector('.instruction-hint');
|
||
this.speedLines = document.getElementById('speed-lines');
|
||
this.cloudFog = document.getElementById('cloud-fog');
|
||
|
||
// 模块实例
|
||
this.sceneManager = null;
|
||
this.mapController = null;
|
||
this.listController = null;
|
||
this.detailController = null;
|
||
|
||
// 2D地图初始化标志，防止重复初始化导致省级地图被覆盖
|
||
this.is2DInitialized = false;
|
||
|
||
this.init();
|
||
}
|
||
|
||
// 初始化应用
|
||
async init() {
|
||
// 初始化 3D 平台的控制器（但不启动）
|
||
this.mapController = new MapInterface(
|
||
this.mapInterface,
|
||
(cityName) => this.showList(cityName)
|
||
);
|
||
|
||
this.listController = new ListInterface(
|
||
this.listInterface,
|
||
(company) => this.showDetail(company),
|
||
() => this.backToMap()
|
||
);
|
||
|
||
this.detailController = new DetailInterface(
|
||
this.detailInterface,
|
||
() => this.backToList()
|
||
);
|
||
|
||
// 初始化搜索控制器（PC端）
|
||
const searchInput = document.getElementById('search-input');
|
||
if (searchInput) {
|
||
this.searchController = new SearchController(searchInput, {
|
||
onSelectProvince: (provinceName) => {
|
||
this.mapController.init('province', provinceName);
|
||
},
|
||
onSelectCity: (cityName) => {
|
||
this.showList(cityName);
|
||
},
|
||
onSelectCompany: (company) => {
|
||
// 设置当前城市为企业所属城市，以便返回时显示正确的列表
|
||
this.listController.currentCity = company.city;
|
||
this.showDetail(company);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化搜索控制器（移动端）
|
||
const searchInputMobile = document.getElementById('search-input-mobile');
|
||
if (searchInputMobile) {
|
||
this.searchControllerMobile = new SearchController(searchInputMobile, {
|
||
onSelectProvince: (provinceName) => {
|
||
this.mapController.init('province', provinceName);
|
||
},
|
||
onSelectCity: (cityName) => {
|
||
this.showList(cityName);
|
||
},
|
||
onSelectCompany: (company) => {
|
||
// 设置当前城市为企业所属城市，以便返回时显示正确的列表
|
||
this.listController.currentCity = company.city;
|
||
this.showDetail(company);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 绑定全局函数和事件
|
||
this.bindGlobalFunctions();
|
||
|
||
// 将应用实例暴露给全局，供页面切换使用
|
||
window.appInstance = this;
|
||
}
|
||
|
||
// 切换到 3D 内推平台
|
||
switchToApp() {
|
||
// 显示 3D 容器
|
||
this.appContainer.classList.remove('hidden');
|
||
|
||
// 每次都重新初始化 3D 场景
|
||
this.init3DScene();
|
||
}
|
||
|
||
// 初始化 3D 场景（每次进入都重新加载）
|
||
init3DScene() {
|
||
// 如果有旧场景，先清理
|
||
if (this.sceneManager) {
|
||
this.sceneManager.dispose();
|
||
this.sceneManager = null;
|
||
}
|
||
|
||
// 重置UI状态
|
||
this.canvasContainer.style.display = 'block';
|
||
this.speedLines.style.display = 'block';
|
||
this.cloudFog.style.display = 'none'; // 云雾初始隐藏，转场时才显示
|
||
this.cloudFog.style.opacity = '0';
|
||
this.mapInterface.style.display = 'none';
|
||
this.mapInterface.style.opacity = '0';
|
||
|
||
// 重置UI层和提示文字的状态
|
||
this.uiLayer.style.display = 'block';
|
||
this.hint.style.display = 'block';
|
||
// 不设置 opacity，让GSAP的 fromTo() 控制
|
||
|
||
// 创建场景管理器
|
||
this.sceneManager = new SceneManager(
|
||
this.canvasContainer,
|
||
() => this.onTransitionComplete()
|
||
);
|
||
|
||
// 初始化转场系统
|
||
this.sceneManager.initTransition({
|
||
uiLayer: this.uiLayer,
|
||
hint: this.hint,
|
||
speedLines: this.speedLines,
|
||
cloudFog: this.cloudFog
|
||
});
|
||
|
||
// 启动开场动画
|
||
this.sceneManager.startIntroSequence({
|
||
uiLayer: this.uiLayer,
|
||
hint: this.hint
|
||
});
|
||
}
|
||
|
||
// 转场完成回调（3D地球 → 2D地图）
|
||
onTransitionComplete() {
|
||
this.switchTo2D();
|
||
}
|
||
|
||
// 切换到2D地图界面
|
||
switchTo2D() {
|
||
// 防止重复初始化：如果已经初始化过，直接返回
|
||
if (this.is2DInitialized) {
|
||
console.log('⏭️ 2D地图已初始化，跳过重复初始化');
|
||
return;
|
||
}
|
||
|
||
// 隐藏3D容器和特效层
|
||
this.canvasContainer.style.display = 'none';
|
||
this.speedLines.style.display = 'none';
|
||
|
||
// 隐藏3D场景的UI元素（关键修复）
|
||
this.uiLayer.style.display = 'none';
|
||
this.hint.style.display = 'none';
|
||
|
||
// 先显示地图容器（opacity: 0，但display: block）
|
||
this.mapInterface.style.display = 'block';
|
||
this.mapInterface.style.opacity = '0';
|
||
|
||
// 使用 requestAnimationFrame 确保浏览器完成布局渲染
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(async () => {
|
||
// 现在容器已经有了正确的尺寸，可以安全初始化ECharts
|
||
await this.mapController.init('china');
|
||
|
||
// 地图初始化完成后，立即调用resize确保尺寸正确
|
||
this.mapController.resize();
|
||
|
||
// 标记2D地图已初始化，防止后续重复初始化
|
||
this.is2DInitialized = true;
|
||
|
||
// 延迟淡入，提升视觉效果
|
||
setTimeout(() => {
|
||
gsap.to(this.mapInterface, { opacity: 1, duration: 1 });
|
||
gsap.to(this.cloudFog, {
|
||
opacity: 0,
|
||
duration: 1,
|
||
onComplete: () => {
|
||
this.cloudFog.style.display = 'none';
|
||
}
|
||
});
|
||
}, 50);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 显示企业列表
|
||
async showList(cityName) {
|
||
await this.mapController.hide();
|
||
this.listController.show(cityName);
|
||
}
|
||
|
||
// 显示企业详情
|
||
async showDetail(company) {
|
||
await this.listController.hide();
|
||
this.detailController.show(company);
|
||
}
|
||
|
||
// 返回列表
|
||
async backToList() {
|
||
await this.detailController.hide();
|
||
this.listController.show(this.listController.currentCity);
|
||
}
|
||
|
||
// 返回地图
|
||
async backToMap() {
|
||
await this.listController.hide();
|
||
this.mapController.show();
|
||
this.mapController.resize(); // 确保地图尺寸正确
|
||
}
|
||
|
||
// 绑定全局函数和事件
|
||
bindGlobalFunctions() {
|
||
// 地图界面logo点击返回首页
|
||
const mapLogoArea = document.getElementById('map-logo-area');
|
||
if (mapLogoArea) {
|
||
mapLogoArea.addEventListener('click', () => {
|
||
window.backToHome();
|
||
});
|
||
}
|
||
|
||
// 重置地图到全国视图
|
||
window.resetMapToChina = () => {
|
||
if (this.mapController) {
|
||
this.mapController.reset();
|
||
}
|
||
};
|
||
|
||
// 从列表返回地图
|
||
window.backToMap = () => {
|
||
this.backToMap();
|
||
};
|
||
|
||
// 从详情返回列表
|
||
window.backToList = () => {
|
||
this.backToList();
|
||
};
|
||
}
|
||
}
|
||
|
||
// 应用启动
|
||
const app = new App();
|