397 lines
17 KiB
HTML
397 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>光湖频道 · 一体化版</title>
|
|||
|
|
<style>
|
|||
|
|
.channel-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|||
|
|
}
|
|||
|
|
.channel-nav {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
border-bottom: 2px solid #e5e7eb;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.channel-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border: none;
|
|||
|
|
background: #f3f4f6;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
}
|
|||
|
|
.channel-btn:hover {
|
|||
|
|
background: #e5e7eb;
|
|||
|
|
}
|
|||
|
|
.channel-btn.active {
|
|||
|
|
background: #3b82f6;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
.channel-btn.visited {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.channel-btn.visited::after {
|
|||
|
|
content: "✓";
|
|||
|
|
position: absolute;
|
|||
|
|
top: -5px;
|
|||
|
|
right: -5px;
|
|||
|
|
background: #10b981;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.channel-content {
|
|||
|
|
min-height: 400px;
|
|||
|
|
padding: 20px;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|||
|
|
transition: opacity 0.3s ease-in-out;
|
|||
|
|
}
|
|||
|
|
.channel-content.fade-out {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
.channel-content.fade-in {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="channel-container">
|
|||
|
|
<nav class="channel-nav">
|
|||
|
|
<button class="channel-btn active" data-channel="home">🏠 首页</button>
|
|||
|
|
<button class="channel-btn" data-channel="module-a">📦 模块A</button>
|
|||
|
|
<button class="channel-btn" data-channel="module-b">📦 模块B</button>
|
|||
|
|
<button class="channel-btn" data-channel="module-c">📦 模块C</button>
|
|||
|
|
<button class="channel-btn" data-channel="debug">🐞 调试面板</button>
|
|||
|
|
</nav>
|
|||
|
|
<main id="channel-content" class="channel-content">
|
|||
|
|
<!-- 动态内容会加载到这里 -->
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// ==================== 所有代码整合在一个文件里 ====================
|
|||
|
|
|
|||
|
|
// ---------- 模块注册表 ----------
|
|||
|
|
window.ModuleRegistry = {
|
|||
|
|
modules: {},
|
|||
|
|
register: function(name, module) {
|
|||
|
|
this.modules[name] = module;
|
|||
|
|
console.log(`[registry] 模块 ${name} 已注册`);
|
|||
|
|
},
|
|||
|
|
get: function(name) {
|
|||
|
|
return this.modules[name];
|
|||
|
|
},
|
|||
|
|
list: function() {
|
|||
|
|
return Object.keys(this.modules);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---------- 事件总线 ----------
|
|||
|
|
window.EventBus = {
|
|||
|
|
listeners: {},
|
|||
|
|
on: function(event, callback) {
|
|||
|
|
if (!this.listeners[event]) this.listeners[event] = [];
|
|||
|
|
this.listeners[event].push(callback);
|
|||
|
|
console.log(`[事件总线] 订阅事件: ${event}`);
|
|||
|
|
},
|
|||
|
|
off: function(event, callback) {
|
|||
|
|
if (!this.listeners[event]) return;
|
|||
|
|
if (!callback) delete this.listeners[event];
|
|||
|
|
else this.listeners[event] = this.listeners[event].filter(cb => cb !== callback);
|
|||
|
|
console.log(`[事件总线] 取消订阅: ${event}`);
|
|||
|
|
},
|
|||
|
|
emit: function(event, data) {
|
|||
|
|
console.log(`[事件总线] 发送事件: ${event}`, data);
|
|||
|
|
if (!this.listeners[event]) return;
|
|||
|
|
this.listeners[event].forEach(callback => {
|
|||
|
|
try { callback(data); } catch (e) { console.error(`[事件总线] 执行回调出错: ${e}`); }
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---------- 模块生命周期 ----------
|
|||
|
|
window.ModuleLifecycle = {
|
|||
|
|
activeModules: new Set(),
|
|||
|
|
onLoad: function(moduleName) {
|
|||
|
|
this.activeModules.add(moduleName);
|
|||
|
|
console.log(`[生命周期] 模块加载: ${moduleName}`);
|
|||
|
|
EventBus.emit('module:loaded', { module: moduleName, time: Date.now() });
|
|||
|
|
},
|
|||
|
|
onUnload: function(moduleName) {
|
|||
|
|
this.activeModules.delete(moduleName);
|
|||
|
|
console.log(`[生命周期] 模块卸载: ${moduleName}`);
|
|||
|
|
EventBus.emit('module:unloaded', { module: moduleName, time: Date.now() });
|
|||
|
|
},
|
|||
|
|
getActiveModules: function() {
|
|||
|
|
return Array.from(this.activeModules);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---------- 频道状态 ----------
|
|||
|
|
window.ChannelState = {
|
|||
|
|
STORAGE_KEY: 'hololake_channel_state',
|
|||
|
|
saveState: function(state) {
|
|||
|
|
const data = { ...state, timestamp: Date.now(), visited: state.visited || [] };
|
|||
|
|
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(data));
|
|||
|
|
console.log('[state] 保存状态:', data);
|
|||
|
|
},
|
|||
|
|
restoreState: function() {
|
|||
|
|
const saved = localStorage.getItem(this.STORAGE_KEY);
|
|||
|
|
if (!saved) return null;
|
|||
|
|
try {
|
|||
|
|
const state = JSON.parse(saved);
|
|||
|
|
console.log('[state] 恢复状态:', state);
|
|||
|
|
return state;
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('[state] 解析失败:', e);
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
markVisited: function(channel) {
|
|||
|
|
const state = this.restoreState() || { visited: [] };
|
|||
|
|
if (!state.visited.includes(channel)) {
|
|||
|
|
state.visited.push(channel);
|
|||
|
|
this.saveState(state);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
clearState: function() {
|
|||
|
|
localStorage.removeItem(this.STORAGE_KEY);
|
|||
|
|
console.log('[state] 已清除');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---------- 模块加载器 ----------
|
|||
|
|
window.ModuleLoader = {
|
|||
|
|
loadModule: function(moduleName, containerId) {
|
|||
|
|
console.log(`[loader] 加载模块: ${moduleName}`);
|
|||
|
|
const module = ModuleRegistry.get(moduleName);
|
|||
|
|
if (!module) {
|
|||
|
|
console.error(`[loader] 模块 ${moduleName} 未注册`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const container = document.getElementById(containerId);
|
|||
|
|
if (!container) {
|
|||
|
|
console.error(`[loader] 容器 ${containerId} 不存在`);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (module.init && typeof module.init === 'function') {
|
|||
|
|
module.init(container);
|
|||
|
|
} else {
|
|||
|
|
container.innerHTML = `<div>模块 ${moduleName} 内容</div>`;
|
|||
|
|
}
|
|||
|
|
ModuleLifecycle.onLoad(moduleName);
|
|||
|
|
},
|
|||
|
|
unloadModule: function(moduleName) {
|
|||
|
|
console.log(`[loader] 卸载模块: ${moduleName}`);
|
|||
|
|
const module = ModuleRegistry.get(moduleName);
|
|||
|
|
if (module && module.destroy && typeof module.destroy === 'function') {
|
|||
|
|
module.destroy();
|
|||
|
|
}
|
|||
|
|
ModuleLifecycle.onUnload(moduleName);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---------- 路由 ----------
|
|||
|
|
window.ChannelRouter = {
|
|||
|
|
currentChannel: 'home',
|
|||
|
|
contentEl: null,
|
|||
|
|
init: function(contentElement) {
|
|||
|
|
this.contentEl = contentElement;
|
|||
|
|
console.log('[router] 初始化');
|
|||
|
|
const savedState = ChannelState.restoreState();
|
|||
|
|
if (savedState && savedState.currentChannel) {
|
|||
|
|
this.currentChannel = savedState.currentChannel;
|
|||
|
|
}
|
|||
|
|
this.loadChannel(this.currentChannel);
|
|||
|
|
if (savedState && savedState.visited) {
|
|||
|
|
savedState.visited.forEach(channel => {
|
|||
|
|
document.querySelectorAll('.channel-btn').forEach(btn => {
|
|||
|
|
if (btn.dataset.channel === channel) btn.classList.add('visited');
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
navigateTo: function(channel) {
|
|||
|
|
if (channel === this.currentChannel) return;
|
|||
|
|
console.log(`[router] 导航到: ${channel}`);
|
|||
|
|
this.contentEl.classList.add('fade-out');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.loadChannel(channel);
|
|||
|
|
this.contentEl.classList.remove('fade-out');
|
|||
|
|
this.contentEl.classList.add('fade-in');
|
|||
|
|
setTimeout(() => { this.contentEl.classList.remove('fade-in'); }, 300);
|
|||
|
|
}, 300);
|
|||
|
|
this.currentChannel = channel;
|
|||
|
|
document.querySelectorAll('.channel-btn').forEach(btn => {
|
|||
|
|
btn.classList.remove('active');
|
|||
|
|
if (btn.dataset.channel === channel) btn.classList.add('active');
|
|||
|
|
});
|
|||
|
|
ChannelState.saveState({ currentChannel: channel, visited: this.getVisitedChannels() });
|
|||
|
|
},
|
|||
|
|
loadChannel: function(channel) {
|
|||
|
|
if (!this.contentEl) return;
|
|||
|
|
let content = '';
|
|||
|
|
switch(channel) {
|
|||
|
|
case 'home':
|
|||
|
|
content = '<h2>🏠 首页</h2><p>欢迎来到光湖频道</p>';
|
|||
|
|
break;
|
|||
|
|
case 'module-a':
|
|||
|
|
content = '<h2>📦 模块A</h2><button id="sendMsgBtn">发送消息给模块B</button><div id="msgDisplay"></div>';
|
|||
|
|
break;
|
|||
|
|
case 'module-b':
|
|||
|
|
content = '<h2>📦 模块B</h2><div id="receivedMsg">等待消息...</div>';
|
|||
|
|
break;
|
|||
|
|
case 'module-c':
|
|||
|
|
content = '<h2>📦 模块C</h2><p>这是模块C的内容</p>';
|
|||
|
|
break;
|
|||
|
|
case 'debug':
|
|||
|
|
this.loadDebugPanel();
|
|||
|
|
return;
|
|||
|
|
default:
|
|||
|
|
content = '<h2>未知频道</h2>';
|
|||
|
|
}
|
|||
|
|
this.contentEl.innerHTML = content;
|
|||
|
|
ModuleLifecycle.onLoad(channel);
|
|||
|
|
if (channel === 'module-a') {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const btn = document.getElementById('sendMsgBtn');
|
|||
|
|
if (btn) {
|
|||
|
|
btn.addEventListener('click', () => {
|
|||
|
|
EventBus.emit('module-a:message', { text: '你好，模块B！', from: '模块A' });
|
|||
|
|
document.getElementById('msgDisplay').innerHTML = '✅ 消息已发送';
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
if (channel === 'module-b') {
|
|||
|
|
this.subscribeModuleB();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
loadDebugPanel: function() {
|
|||
|
|
// 调试面板直接用内嵌 HTML，避免 fetch 问题
|
|||
|
|
this.contentEl.innerHTML = `
|
|||
|
|
<div class="debug-panel">
|
|||
|
|
<h2>🐞 调试面板</h2>
|
|||
|
|
<div class="module-list"><strong>当前活跃模块:</strong> <span id="active-modules">加载中...</span></div>
|
|||
|
|
<h3>事件总线聊天记录</h3>
|
|||
|
|
<ul class="message-list" id="debug-messages" style="border:1px solid #ccc; padding:10px; height:200px; overflow-y:auto; background:#f9f9f9;"></ul>
|
|||
|
|
<div style="display:flex; gap:10px; margin:10px 0;">
|
|||
|
|
<input type="text" id="debug-input" placeholder="输入要发送的消息..." style="flex:1; padding:8px;">
|
|||
|
|
<button id="debug-send" style="padding:8px 16px; background:#3b82f6; color:white; border:none; border-radius:4px;">发送测试消息</button>
|
|||
|
|
</div>
|
|||
|
|
<div style="display:flex; gap:10px;">
|
|||
|
|
<button id="debug-clear" style="padding:8px 16px; background:#ef4444; color:white; border:none; border-radius:4px;">清除状态</button>
|
|||
|
|
<button id="debug-refresh" onclick="location.reload()" style="padding:8px 16px; background:#6b7280; color:white; border:none; border-radius:4px;">刷新页面</button>
|
|||
|
|
</div>
|
|||
|
|
<p><small>消息会广播给所有订阅的模块</small></p>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
ModuleLifecycle.onLoad('debug');
|
|||
|
|
this.initDebugPanel();
|
|||
|
|
},
|
|||
|
|
initDebugPanel: function() {
|
|||
|
|
const msgList = document.getElementById('debug-messages');
|
|||
|
|
if (msgList && window.debugMessages) {
|
|||
|
|
window.debugMessages.forEach(msg => {
|
|||
|
|
const li = document.createElement('li');
|
|||
|
|
li.textContent = `[${msg.time}] ${msg.event}: ${JSON.stringify(msg.data)}`;
|
|||
|
|
msgList.appendChild(li);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
const sendBtn = document.getElementById('debug-send');
|
|||
|
|
const input = document.getElementById('debug-input');
|
|||
|
|
if (sendBtn && input) {
|
|||
|
|
sendBtn.addEventListener('click', () => {
|
|||
|
|
const text = input.value.trim();
|
|||
|
|
if (text) {
|
|||
|
|
EventBus.emit('debug:message', { text, from: '调试面板' });
|
|||
|
|
input.value = '';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
const clearBtn = document.getElementById('debug-clear');
|
|||
|
|
if (clearBtn) {
|
|||
|
|
clearBtn.addEventListener('click', () => {
|
|||
|
|
ChannelState.clearState();
|
|||
|
|
alert('状态已清除，刷新页面生效');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
// 更新活跃模块
|
|||
|
|
const updateActive = () => {
|
|||
|
|
const span = document.getElementById('active-modules');
|
|||
|
|
if (span) {
|
|||
|
|
const modules = ModuleLifecycle.getActiveModules();
|
|||
|
|
span.textContent = modules.length ? modules.join('、') : '无';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
EventBus.on('module:loaded', updateActive);
|
|||
|
|
EventBus.on('module:unloaded', updateActive);
|
|||
|
|
updateActive();
|
|||
|
|
},
|
|||
|
|
subscribeModuleB: function() {
|
|||
|
|
const handleMessage = (data) => {
|
|||
|
|
const display = document.getElementById('receivedMsg');
|
|||
|
|
if (display) {
|
|||
|
|
display.innerHTML = `📩 收到消息: ${data.text} (来自 ${data.from})`;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
EventBus.off('module-a:message');
|
|||
|
|
EventBus.on('module-a:message', handleMessage);
|
|||
|
|
},
|
|||
|
|
getVisitedChannels: function() {
|
|||
|
|
const visited = [];
|
|||
|
|
document.querySelectorAll('.channel-btn.visited').forEach(btn => visited.push(btn.dataset.channel));
|
|||
|
|
return visited;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ---------- 应用启动 ----------
|
|||
|
|
console.log('[app] 启动中...');
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
console.log('[app] DOM 已加载');
|
|||
|
|
const contentEl = document.getElementById('channel-content');
|
|||
|
|
if (!contentEl) {
|
|||
|
|
console.error('[app] 找不到 #channel-content');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (window.ChannelRouter) {
|
|||
|
|
ChannelRouter.init(contentEl);
|
|||
|
|
}
|
|||
|
|
document.querySelectorAll('.channel-btn').forEach(btn => {
|
|||
|
|
btn.addEventListener('click', function() {
|
|||
|
|
const channel = this.dataset.channel;
|
|||
|
|
if (channel && window.ChannelRouter) {
|
|||
|
|
ChannelRouter.navigateTo(channel);
|
|||
|
|
this.classList.add('visited');
|
|||
|
|
ChannelState.markVisited(channel);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 拦截事件总线消息用于调试
|
|||
|
|
const originalEmit = EventBus.emit;
|
|||
|
|
EventBus.emit = function(event, data) {
|
|||
|
|
if (!window.debugMessages) window.debugMessages = [];
|
|||
|
|
window.debugMessages.push({ event, data, time: new Date().toLocaleTimeString() });
|
|||
|
|
originalEmit.call(this, event, data);
|
|||
|
|
};
|
|||
|
|
console.log('[app] 事件总线拦截器已安装');
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|