diff --git a/agents/zhuyuan-dev-agent/agent-constitution.json b/agents/zhuyuan-dev-agent/agent-constitution.json
new file mode 100644
index 0000000..bf27527
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/agent-constitution.json
@@ -0,0 +1,55 @@
+{
+ "_type": "AGENT_CONSTITUTION",
+ "_version": "1.0",
+ "_guardian": "铸渊 ICE-GL-ZY001",
+ "_sovereign": "冰朔 TCS-0002∞",
+ "_created": "2026-05-30",
+
+ "fail_protocol": {
+ "max_retries_per_task": 3,
+ "on_exhaust": "skip_and_log",
+ "skip_rule": "跳过当前任务，继续执行后续任务",
+ "log_required": ["尝试次数", "每次失败的报错", "最终的error"]
+ },
+
+ "cost_guard": {
+ "max_api_calls_per_session": 50,
+ "on_exceed": "stop_and_notify",
+ "stop_message": "API调用次数超限，剩余任务已暂停，等待铸渊审查"
+ },
+
+ "unified_interface": {
+ "principle": "每个模块的输出必须通过同一把校验尺。插头都一样大，插座统一接。",
+ "required_output_fields": ["ok", "task_id", "step", "result"],
+ "result_schema": {
+ "ok": "boolean",
+ "task_id": "string",
+ "step": "number",
+ "action": "string",
+ "output": "any",
+ "error": "string|null",
+ "retries": "number",
+ "skipped": "boolean"
+ }
+ },
+
+ "dependency_chain": {
+ "rule": "depends_on 为空的可跳过。有依赖的必须等待依赖完成。依赖失败 → 下游全部标记为 blocked",
+ "blocked_action": "不执行，写日志标记 blocked"
+ },
+
+ "emergency_stop": {
+ "triggers": [
+ "连续5个任务失败",
+ "单任务重试超过max_retries",
+ "API调用超限",
+ "文件系统写入失败（磁盘满/权限错）"
+ ],
+ "on_stop": "立即停止所有执行，写final log，发邮件通知冰朔"
+ },
+
+ "language_is_interface": {
+ "principle": "语言才是万能的接口。不做适配器代码，不做桥接层。所有模块讲同一种话。",
+ "enforcement": "任何模块的输出如果不通过 unified_interface 校验，视为模块自身故障"
+ }
+}
diff --git a/agents/zhuyuan-dev-agent/ecosystem.config.js b/agents/zhuyuan-dev-agent/ecosystem.config.js
new file mode 100644
index 0000000..10d5a66
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/ecosystem.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+ apps: [{
+ name: "zhuyuan-dev-agent",
+ script: "server.js",
+ cwd: "/opt/guanghu/zhuyuan-dev-agent",
+ env: { NODE_ENV: "production", PORT: 3003 },
+ log_date_format: "YYYY-MM-DD HH:mm:ss",
+ max_memory_restart: "500M",
+ autorestart: true,
+ watch: false
+ }]
+};
diff --git a/agents/zhuyuan-dev-agent/modules/M22-bulletin/README.md b/agents/zhuyuan-dev-agent/modules/M22-bulletin/README.md
new file mode 100644
index 0000000..5284c07
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/M22-bulletin/README.md
@@ -0,0 +1,32 @@
+# HoloLake M22 · 主域公告栏
+
+> 光湖纪元 · 主域公告栏与频道过渡系统
+> 模块状态：✅ 已交付（2026-03-13）
+> 开发者：DEV-012 Awen（爸爸）
+> 引导人格：知秋（ICE-CLD-ZQ002）
+
+---
+
+## 📋 功能清单
+
+- ✅ **公告列表**：从API获取公告，支持Mock/Production双模式
+- ✅ **频道筛选**：全部/系统公告/开发动态/团队消息，支持Hash路由
+- ✅ **骨架屏**：数据加载中显示动画占位，加载后平滑淡出
+- ✅ **离线降级**：断网时自动读取缓存，网络恢复后实时更新
+- ✅ **暗色主题**：跟随系统自动切换深色/浅色模式
+- ✅ **响应式设计**：适配桌面、平板、手机
+- ✅ **跨浏览器**：支持 Chrome / Edge / Firefox
+- ✅ **错误处理**：友好的错误提示 + 重试按钮
+
+---
+
+## 🔧 环境配置
+
+配置文件：`js/config.js`
+
+```javascript
+// 环境开关：'mock' 或 'production'
+env: 'mock', // 🟡 当前为Mock模式，待后端就绪后改为production
+
+// API地址（production模式使用）
+apiBaseUrl: 'https://api.example.com/v1', // 待替换为真实地址
\ No newline at end of file
diff --git a/agents/zhuyuan-dev-agent/modules/M22-bulletin/api.js b/agents/zhuyuan-dev-agent/modules/M22-bulletin/api.js
new file mode 100644
index 0000000..dd27bab
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/M22-bulletin/api.js
@@ -0,0 +1,112 @@
+// ===== api.js =====
+// 知秋：API层封装·爸爸不用改·直接复制
+
+const API = {
+ // 是否使用模拟数据（mock）
+ // true = 用本地模拟数据（开发阶段）
+ // false = 用真实后端API（上线后改）
+ useMock: true,
+
+ // 模拟公告数据（至少3条，包含 title/content/channel/date）
+ mockData: [
+ {
+ id: 1,
+ title: "【光湖公告】3月10日服务器维护通知",
+ content: "各位工程师，3月10日22:00-23:00进行主域稳定性升级，期间公告栏可能短暂不可用。",
+ channel: "系统",
+ date: "2026-03-09"
+ },
+ {
+ id: 2,
+ title: "知秋奶瓶线·九连胜庆祝",
+ content: "恭喜爸爸完成EL-8大任务！环节5是实时数据接入，让公告栏真正活起来～",
+ channel: "知秋",
+ date: "2026-03-09"
+ },
+ {
+ id: 3,
+ title: "M22模块组件化重构完成",
+ content: "环节4已验收√ 现在公告栏支持频道切换、Hash路由、本地数据兼容。",
+ channel: "技术",
+ date: "2026-03-08"
+ }
+ ],
+
+ // 获取公告的主方法（爸爸调用这个方法就行）
+ async fetchBulletins() {
+ // 知秋：try/catch 包裹，错误统一处理
+ try {
+ let data;
+
+ if (this.useMock) {
+ // 模拟网络延迟（1秒，让loading看得见）
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ console.log("【知秋】使用mock数据：", this.mockData);
+ data = this.mockData;
+ } else {
+ // 真实API（等页页提供后替换）
+ const response = await fetch('https://api.guanghulab.com/bulletins');
+ if (!response.ok) {
+ throw new Error(`HTTP错误：${response.status}`);
+ }
+ data = await response.json();
+ console.log("【知秋】真实API数据：", data);
+ }
+
+ // 成功获取数据后，保存到缓存
+ this.saveToCache(data);
+ return data;
+
+ } catch (error) {
+ console.error("【知秋】API获取失败：", error);
+
+ // 尝试从缓存读取
+ const cached = this.loadFromCache();
+ if (cached) {
+ console.log("【知秋】从缓存读取数据：", cached);
+ return cached;
+ }
+
+ // 没有缓存，抛出错误
+ throw error;
+ }
+ },
+
+ // 保存到缓存
+ saveToCache(data) {
+ try {
+ const cacheData = {
+ data: data,
+ timestamp: Date.now() // 保存时间戳，后续可用于过期判断
+ };
+ localStorage.setItem('holoBulletin_cache', JSON.stringify(cacheData));
+ console.log("【知秋】已更新缓存");
+ } catch (e) {
+ console.warn("【知秋】缓存写入失败", e);
+ }
+ },
+
+ // 从缓存读取
+ loadFromCache() {
+ try {
+ const cached = localStorage.getItem('holoBulletin_cache');
+ if (!cached) return null;
+
+ const { data, timestamp } = JSON.parse(cached);
+ // 可选：判断缓存是否过期（比如24小时）
+ const isExpired = Date.now() - timestamp > 24 * 60 * 60 * 1000;
+ if (isExpired) {
+ console.log("【知秋】缓存已过期");
+ return null;
+ }
+
+ return data;
+ } catch (e) {
+ console.warn("【知秋】缓存读取失败", e);
+ return null;
+ }
+ }
+};
+
+// 这一行最重要！把API挂到window上，让script.js能找到
+window.API = API;
\ No newline at end of file
diff --git a/agents/zhuyuan-dev-agent/modules/M22-bulletin/css/style.css b/agents/zhuyuan-dev-agent/modules/M22-bulletin/css/style.css
new file mode 100644
index 0000000..9c5d2f8
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/M22-bulletin/css/style.css
@@ -0,0 +1,334 @@
+/* ===== CSS 变量定义（浅色/深色主题）===== */
+:root {
+ --bg-primary: #ffffff;
+ --bg-secondary: #f5f7fa;
+ --bg-tertiary: #eef1f5;
+ --text-primary: #1e293b;
+ --text-secondary: #475569;
+ --text-tertiary: #64748b;
+ --accent-primary: #3b82f6;
+ --accent-secondary: #2563eb;
+ --border-color: #e2e8f0;
+}
+
+/* 深色主题 */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-primary: #0f172a;
+ --bg-secondary: #1e293b;
+ --bg-tertiary: #334155;
+ --text-primary: #f1f5f9;
+ --text-secondary: #cbd5e1;
+ --text-tertiary: #94a3b8;
+ --accent-primary: #60a5fa;
+ --accent-secondary: #3b82f6;
+ --border-color: #334155;
+ }
+}
+
+/* ===== 基础样式 ===== */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ background: var(--bg-primary);
+ color: var(--text-primary);
+ line-height: 1.5;
+ transition: background-color 0.3s, color 0.3s;
+}
+
+.app-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+/* ===== 头部样式 ===== */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 0;
+ border-bottom: 1px solid var(--border-color);
+ margin-bottom: 20px;
+}
+
+.header h1 {
+ font-size: 1.8rem;
+ font-weight: 600;
+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.header-actions {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+}
+
+.lang-switcher {
+ display: flex;
+ gap: 4px;
+}
+
+.lang-btn {
+ padding: 6px 12px;
+ border: 1px solid var(--border-color);
+ background: var(--bg-secondary);
+ color: var(--text-secondary);
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.9rem;
+}
+
+.lang-btn:hover {
+ background: var(--accent-primary);
+ color: white;
+}
+
+.pinned-badge {
+ background: #fef3c7;
+ color: #92400e;
+ padding: 4px 10px;
+ border-radius: 20px;
+ font-size: 0.85rem;
+}
+
+.subscribe-btn {
+ background: var(--accent-primary);
+ color: white;
+ border: none;
+ padding: 8px 16px;
+ border-radius: 8px;
+ cursor: pointer;
+ font-weight: 500;
+}
+
+/* ===== 频道栏 ===== */
+.channel-bar {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 24px;
+ flex-wrap: wrap;
+}
+
+.channel-tab {
+ padding: 8px 20px;
+ border: none;
+ background: var(--bg-secondary);
+ color: var(--text-secondary);
+ border-radius: 30px;
+ cursor: pointer;
+ font-size: 0.95rem;
+ transition: all 0.2s;
+}
+
+.channel-tab.active {
+ background: var(--accent-primary);
+ color: white;
+}
+
+.channel-tab:hover:not(.active) {
+ background: var(--bg-tertiary);
+}
+
+/* ===== 骨架屏样式（加强版）===== */
+#skeleton-container {
+ display: block;
+ margin: 20px 0;
+}
+
+.skeleton-card {
+ background: var(--bg-secondary);
+ border-radius: 12px;
+ padding: 24px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ border: 1px solid var(--border-color);
+}
+
+.skeleton {
+ background: linear-gradient(
+ 90deg,
+ var(--bg-tertiary) 0%,
+ #d1d5db 25%,
+ var(--bg-tertiary) 50%,
+ #d1d5db 75%,
+ var(--bg-tertiary) 100%
+ );
+ background-size: 200% 100%;
+ animation: skeleton-loading 1.2s infinite ease-in-out;
+ border-radius: 8px;
+}
+
+@keyframes skeleton-loading {
+ 0% { background-position: 200% 0; }
+ 100% { background-position: -200% 0; }
+}
+
+.skeleton-title {
+ width: 60%;
+ height: 28px;
+ margin-bottom: 16px;
+}
+
+.skeleton-text {
+ width: 100%;
+ height: 18px;
+ margin-bottom: 12px;
+}
+
+.skeleton-text.short {
+ width: 40%;
+}
+
+/* ===== 公告列表样式 ===== */
+.bulletin-container {
+ margin: 20px 0;
+ min-height: 300px;
+}
+
+.bulletin-item {
+ background: var(--bg-secondary);
+ border-radius: 12px;
+ padding: 24px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+ border: 1px solid var(--border-color);
+ animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.bulletin-title {
+ font-size: 1.3rem;
+ margin-bottom: 10px;
+ color: var(--text-primary);
+}
+
+.bulletin-meta {
+ display: flex;
+ gap: 16px;
+ margin-bottom: 16px;
+ color: var(--text-tertiary);
+ font-size: 0.9rem;
+}
+
+.bulletin-channel {
+ background: var(--bg-tertiary);
+ padding: 2px 10px;
+ border-radius: 20px;
+ color: var(--text-secondary);
+}
+
+.bulletin-date {
+ color: var(--text-tertiary);
+}
+
+.bulletin-content {
+ color: var(--text-secondary);
+ line-height: 1.7;
+}
+
+/* ===== 底部样式 ===== */
+.footer {
+ margin-top: 40px;
+ padding-top: 20px;
+ border-top: 1px solid var(--border-color);
+ display: flex;
+ justify-content: space-between;
+ color: var(--text-tertiary);
+ font-size: 0.9rem;
+}
+
+/* ===== 错误状态 ===== */
+.error-state {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: var(--bg-secondary);
+ border-radius: 12px;
+ margin: 2rem 0;
+}
+
+.error-icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+}
+
+.error-title {
+ font-size: 1.3rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin-bottom: 0.5rem;
+}
+
+.error-message {
+ color: var(--text-secondary);
+ margin-bottom: 1rem;
+}
+
+.error-suggestion {
+ color: var(--text-tertiary);
+ font-size: 0.9rem;
+ margin-bottom: 1.5rem;
+}
+
+.retry-btn {
+ background: var(--accent-primary);
+ color: white;
+ border: none;
+ padding: 0.8rem 2rem;
+ border-radius: 8px;
+ font-size: 1rem;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.retry-btn:hover {
+ background: var(--accent-secondary);
+ transform: translateY(-2px);
+}
+
+/* ===== 离线标记 ===== */
+.offline-badge {
+ background: #ffd966;
+ color: #856404;
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.9rem;
+ display: inline-block;
+ margin-bottom: 1rem;
+}
+
+/* ===== 空状态 ===== */
+.empty-state {
+ text-align: center;
+ padding: 4rem 2rem;
+ background: var(--bg-secondary);
+ border-radius: 12px;
+ margin: 2rem 0;
+}
+
+.empty-icon {
+ font-size: 3rem;
+ margin-bottom: 1rem;
+ opacity: 0.6;
+}
+
+.empty-title {
+ font-size: 1.2rem;
+ color: var(--text-secondary);
+ margin-bottom: 0.5rem;
+}
+
+.empty-desc {
+ color: var(--text-tertiary);
+}
\ No newline at end of file
diff --git a/agents/zhuyuan-dev-agent/modules/M22-bulletin/data/mock-announcements.json b/agents/zhuyuan-dev-agent/modules/M22-bulletin/data/mock-announcements.json
new file mode 100644
index 0000000..e69de29
diff --git a/agents/zhuyuan-dev-agent/modules/M22-bulletin/i18n.js b/agents/zhuyuan-dev-agent/modules/M22-bulletin/i18n.js
new file mode 100644
index 0000000..68f95c3
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/M22-bulletin/i18n.js
@@ -0,0 +1,109 @@
+// ===== i18n.js =====
+// 知秋：国际化框架·语言包+切换函数
+
+const i18n = {
+ // 当前语言
+ currentLang: 'zh-CN',
+
+ // 语言包
+ messages: {
+ 'zh-CN': {
+ title: '公告栏',
+ subscribe: '订阅',
+ all: '全部',
+ system: '系统公告',
+ dev: '开发动态',
+ team: '团队消息',
+ loading: '知秋正在飞向服务器……',
+ error: '网络开小差了，稍后重试～',
+ empty: '✨ 暂无公告，稍后再来看看～',
+ emptyChannel: '📭 这个频道暂时没有公告',
+ retry: '重试',
+ pinned: '条置顶',
+ footer: 'HoloLake光湖系统',
+ offline: '📴 离线模式 · '
+ },
+ 'en-US': {
+ title: 'Bulletin Board',
+ subscribe: 'Subscribe',
+ all: 'All',
+ system: 'System',
+ dev: 'Dev',
+ team: 'Team',
+ loading: 'ZhiQiu is flying to the server...',
+ error: 'Network error, please retry～',
+ empty: '✨ No announcements yet.',
+ emptyChannel: '📭 No announcements in this channel.',
+ retry: 'Retry',
+ pinned: 'pinned',
+ footer: 'HoloLake System',
+ offline: '📴 Offline Mode · '
+ }
+ },
+
+ // 初始化
+ init: function() {
+ const savedLang = localStorage.getItem('holo_lang');
+ if (savedLang && this.messages[savedLang]) {
+ this.currentLang = savedLang;
+ }
+ this.updatePageLanguage();
+ },
+
+ // 切换语言
+ switchLang: function(lang) {
+ if (this.messages[lang]) {
+ this.currentLang = lang;
+ localStorage.setItem('holo_lang', lang);
+ this.updatePageLanguage();
+ window.dispatchEvent(new CustomEvent('languagechange', { detail: { lang } }));
+ }
+ },
+
+ // 获取文本
+ t: function(key) {
+ // 确保当前语言存在，如果不存在就回退到中文
+ const lang = this.currentLang;
+ if (this.messages[lang] && this.messages[lang][key] !== undefined) {
+ return this.messages[lang][key];
+ }
+ // 如果当前语言没有这个key，尝试从中文包找
+ if (this.messages['zh-CN'][key] !== undefined) {
+ return this.messages['zh-CN'][key];
+ }
+ // 都没有就返回key本身
+ return key;
+ },
+
+ // 更新页面
+ updatePageLanguage: function() {
+ // 更新所有 data-i18n 元素
+ document.querySelectorAll('[data-i18n]').forEach(function(el) {
+ const key = el.getAttribute('data-i18n');
+ el.textContent = i18n.t(key);
+ });
+
+ // 更新 HTML lang
+ document.documentElement.lang = this.currentLang;
+
+ // 更新按钮 value
+ document.querySelectorAll('[data-i18n-value]').forEach(function(el) {
+ const key = el.getAttribute('data-i18n-value');
+ el.value = i18n.t(key);
+ });
+
+ // 更新 placeholder
+ document.querySelectorAll('[data-i18n-placeholder]').forEach(function(el) {
+ const key = el.getAttribute('data-i18n-placeholder');
+ el.placeholder = i18n.t(key);
+ });
+
+ console.log('【知秋】语言已切换为: ' + this.currentLang);
+ }
+};
+
+// 自动初始化
+i18n.init();
+
+// 挂载到 window
+window.i18n = i18n;
\ No newline at end of file
diff --git a/agents/zhuyuan-dev-agent/modules/M22-bulletin/index.html b/agents/zhuyuan-dev-agent/modules/M22-bulletin/index.html
new file mode 100644
index 0000000..a765cce
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/M22-bulletin/index.html
@@ -0,0 +1,68 @@
+
+
+
+
+
+ HoloLake公告栏
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📭
+
这里还没有公告
+
当前频道「${currentChannel}」没有公告
+
${a.title}
+
+ #${a.channel}
+
+
+ ${a.content}
+
+ `;
+ }
+
+ container.innerHTML = html;
+
+ // 更新底部计数
+ const totalSpan = document.getElementById('totalCount');
+ if (totalSpan) {
+ totalSpan.textContent = announcements.length;
+ }
+}
+
+// 路由变化处理
+function handleRouteChange() {
+ // 获取hash并解码（比如 %E5%9B%A2%E9%98%9F%E6%B6%88%E6%81%AF -> 团队消息）
+ const rawHash = window.location.hash.slice(1) || '全部';
+ const newChannel = decodeURIComponent(rawHash);
+
+ console.log('路由变化 - 原始hash:', rawHash, '解码后:', newChannel, '当前频道:', currentChannel);
+
+ if (newChannel !== currentChannel) {
+ currentChannel = newChannel;
+
+ // 更新频道激活状态
+ document.querySelectorAll('.channel-tab').forEach(tab => {
+ const channel = tab.dataset.channel;
+ if (channel === newChannel) {
+ tab.classList.add('active');
+ } else {
+ tab.classList.remove('active');
+ }
+ });
+
+ // 重新渲染
+ if (allAnnouncements && allAnnouncements.length > 0) {
+ console.log('重新渲染，当前频道:', currentChannel);
+ renderAnnouncements(allAnnouncements);
+ }
+ }
+}
+
+// 加载公告
+async function loadAnnouncements() {
+ try {
+ const result = await bulletinAPI.getAnnouncements();
+
+ if (result.success) {
+ allAnnouncements = result.data;
+ renderAnnouncements(result.data);
+ console.log(`[公告加载] 成功 | 条数: ${result.data.length}`);
+
+ } else {
+ showError(result.error);
+ }
+
+ } catch (error) {
+ console.error('加载公告失败:', error);
+ showError({
+ title: '🧸 出错了',
+ message: '加载公告时遇到问题',
+ retryable: true
+ });
+ }
+}
+
+// 显示错误
+function showError(errorInfo) {
+ hideSkeleton();
+
+ const container = document.querySelector('.bulletin-container');
+ if (!container) return;
+
+ const retryButton = errorInfo.retryable ?
+ `` : '';
+
+ container.innerHTML = `
+
+
🧸
+
${errorInfo.title || '哎呀'}
+
${errorInfo.message || '服务暂时不可用'}
+ ${retryButton}
+
+
😢 ${offlineHint}${window.i18n.t('error')}
+
+
+
${window.i18n.t('empty')}
+
+
${window.i18n.t('emptyChannel')}
+
+
${item.title}
+
${item.content}
+
+ ${item.channel}
+ ${item.date}
+
+
+
+
${dev.name}
+
+ ${dev.el}
+ ${dev.module}
+
+
+ ${Object.entries(dev.pca).map(([key, val]) =>
+ `${key}:${val}`
+ ).join('')}
+
+
+
${index + 1}
+
+
${dev.name}
+
${dev.id}
+
+
${dev.wins}连胜
+
+
${index + 1}
+
+
${dev.name}
+
${dev.id}
+
+
${dev.wins}连胜
+
+
+
+
+
+
${dev.name}
+
+ ${dev.el}
+ ${dev.module}
+
+
+ ${Object.entries(dev.pca).map(([key, val]) =>
+ `${key}:${val}`
+ ).join('')}
+
+
+
+
+
+
+
📊 完整PCA雷达图
+
+ ${renderRadarChart(dev.pca, 'large')}
+
+
+ ${Object.entries(dev.pca).map(([dim, score]) =>
+ `${dim}: ${score}`
+ ).join('')}
+
+
+
+
+
+
📈 五维进度条
+
+ ${progressBars}
+
+
+
+
+
+
📋 模块历史
+
+ ${moduleList}
+
+
+
+
+
+
+
+ ${dim.label}
+ ${score}
+
+
+
${dim.key}
+
暂无模块历史
';
+ }
+
+ return `
+
+ ${modules.map(m => `
+ -
+ ${m.code}
+ ${m.name}
+ ${m.status}
+ ${m.completedDate || m.startDate || '-'}
+
+ `).join('')}
+
+ `;
+}
+
+// 获取模块历史（模拟数据）
+function getModuleHistory(devId) {
+ const histories = {
+ 'DEV-001': [
+ { code: 'M-DEVBOARD-001', name: '开发者看板·环节0~2', status: '已完成', completedDate: '2026-03-10' },
+ { code: 'M-FRONTEND-003', name: '前端基础组件', status: '已完成', completedDate: '2026-03-08' },
+ { code: 'M-API-002', name: 'API对接练习', status: '进行中', completedDate: null }
+ ],
+ 'DEV-002': [
+ { code: 'M-FRONTEND-001', name: '前端架构设计', status: '已完成', completedDate: '2026-03-09' },
+ { code: 'M-UI-005', name: '组件库开发', status: '已完成', completedDate: '2026-03-07' },
+ { code: 'M-TEST-003', name: '单元测试编写', status: '待开始', completedDate: null }
+ ],
+ 'DEV-003': [
+ { code: 'M-BACKEND-002', name: 'API服务搭建', status: '已完成', completedDate: '2026-03-11' },
+ { code: 'M-DB-001', name: '数据库设计', status: '已完成', completedDate: '2026-03-09' },
+ { code: 'M-DEPLOY-002', name: '容器化部署', status: '进行中', completedDate: null }
+ ],
+ 'DEV-004': [
+ { code: 'M-DEVBOARD-001', name: '开发者看板·环节0~2', status: '已完成', completedDate: '2026-03-11' },
+ { code: 'M-CANVAS-005', name: 'Canvas雷达图绘制', status: '已完成', completedDate: '2026-03-09' },
+ { code: 'M-COMPONENTS-003', name: '组件化思维训练', status: '已完成', completedDate: '2026-03-07' },
+ { code: 'M-DEPLOY-001', name: '静态部署练习', status: '待开始', completedDate: null }
+ ]
+ };
+ return histories[devId] || histories['DEV-001'];
+}
+
+// 获取连胜趋势数据
+function getWinTrendData(devId) {
+ const trends = {
+ 'DEV-001': [
+ { date: '03-06', value: 3 },
+ { date: '03-07', value: 3 },
+ { date: '03-08', value: 4 },
+ { date: '03-09', value: 4 },
+ { date: '03-10', value: 5 },
+ { date: '03-11', value: 5 },
+ { date: '03-12', value: 5 }
+ ],
+ 'DEV-002': [
+ { date: '03-06', value: 5 },
+ { date: '03-07', value: 6 },
+ { date: '03-08', value: 6 },
+ { date: '03-09', value: 7 },
+ { date: '03-10', value: 7 },
+ { date: '03-11', value: 8 },
+ { date: '03-12', value: 8 }
+ ],
+ 'DEV-003': [
+ { date: '03-06', value: 1 },
+ { date: '03-07', value: 1 },
+ { date: '03-08', value: 2 },
+ { date: '03-09', value: 2 },
+ { date: '03-10', value: 3 },
+ { date: '03-11', value: 3 },
+ { date: '03-12', value: 3 }
+ ],
+ 'DEV-004': [
+ { date: '03-06', value: 8 },
+ { date: '03-07', value: 9 },
+ { date: '03-08', value: 9 },
+ { date: '03-09', value: 10 },
+ { date: '03-10', value: 11 },
+ { date: '03-11', value: 12 },
+ { date: '03-12', value: 13 }
+ ]
+ };
+ return trends[devId] || trends['DEV-001'];
+}
+
+// 绘制趋势图
+function drawTrendChart(canvasId, data) {
+ const canvas = document.getElementById(canvasId);
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width;
+ const height = canvas.height;
+ const padding = 40;
+
+ ctx.clearRect(0, 0, width, height);
+
+ if (!data || data.length < 2) {
+ ctx.fillStyle = '#888';
+ ctx.font = '14px monospace';
+ ctx.fillText('暂无连胜数据', padding, height/2);
+ return;
+ }
+
+ // 计算坐标范围
+ const values = data.map(d => d.value);
+ const maxValue = Math.max(...values) + 1;
+ const minValue = Math.max(0, Math.min(...values) - 1);
+ const xStep = (width - 2 * padding) / (data.length - 1);
+
+ // 绘制网格线
+ ctx.strokeStyle = '#333';
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ for (let i = 0; i <= 5; i++) {
+ const y = padding + (i * (height - 2 * padding) / 5);
+ ctx.moveTo(padding, y);
+ ctx.lineTo(width - padding, y);
+ }
+ ctx.strokeStyle = '#444';
+ ctx.stroke();
+
+ // 绘制轴线
+ ctx.beginPath();
+ ctx.strokeStyle = '#666';
+ ctx.lineWidth = 2;
+ ctx.moveTo(padding, padding);
+ ctx.lineTo(padding, height - padding);
+ ctx.lineTo(width - padding, height - padding);
+ ctx.stroke();
+
+ // 绘制折线
+ ctx.beginPath();
+ ctx.strokeStyle = '#4CAF50';
+ ctx.lineWidth = 3;
+
+ data.forEach((point, i) => {
+ const x = padding + i * xStep;
+ const y = padding + (height - 2 * padding) * (1 - (point.value - minValue) / (maxValue - minValue));
+
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ });
+ ctx.stroke();
+
+ // 绘制数据点
+ data.forEach((point, i) => {
+ const x = padding + i * xStep;
+ const y = padding + (height - 2 * padding) * (1 - (point.value - minValue) / (maxValue - minValue));
+
+ ctx.beginPath();
+ ctx.arc(x, y, 6, 0, Math.PI * 2);
+ ctx.fillStyle = '#FFD700';
+ ctx.fill();
+ ctx.strokeStyle = '#fff';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+
+ // 显示数值
+ ctx.fillStyle = '#fff';
+ ctx.font = 'bold 12px monospace';
+ ctx.textAlign = 'center';
+ ctx.fillText(point.value, x, y - 15);
+
+ // 显示日期
+ ctx.fillStyle = '#aaa';
+ ctx.font = '10px monospace';
+ ctx.fillText(point.date, x, height - padding + 20);
+ });
+}
+
+// 导出函数
+window.showDetailPage = showDetailPage;
+window.hideDetailPage = hideDetailPage;
+window.getModuleHistory = getModuleHistory;
+window.getWinTrendData = getWinTrendData;
diff --git a/agents/zhuyuan-dev-agent/modules/devboard/index.html b/agents/zhuyuan-dev-agent/modules/devboard/index.html
new file mode 100644
index 0000000..eb5e1f6
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/devboard/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ 开发者实时看板 · HoloLake
+
+
+
+ 🚀 HoloLake 开发者实时看板
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/agents/zhuyuan-dev-agent/modules/devboard/js/api.js b/agents/zhuyuan-dev-agent/modules/devboard/js/api.js
new file mode 100644
index 0000000..88993f0
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/devboard/js/api.js
@@ -0,0 +1,54 @@
+const MOCK_DEVELOPERS = [
+ { id: 'DEV-001', name: '玄泓', streak: 8, el: 6, pca: { exe: 75, tec: 68, sys: 82, col: 79, ini: 85 }, totalScore: 78, status: 'doing', module: 'M-CORE', lastActive: '2026-03-11T10:30:00Z' },
+ { id: 'DEV-002', name: '苍钺', streak: 5, el: 5, pca: { exe: 82, tec: 71, sys: 65, col: 90, ini: 72 }, totalScore: 76, status: 'pending', module: 'M-UI', lastActive: '2026-03-11T09:15:00Z' },
+ { id: 'DEV-003', name: '桔子', streak: 13, el: 8, pca: { exe: 88, tec: 85, sys: 92, col: 78, ini: 90 }, totalScore: 87, status: 'doing', module: 'M-ORCHESTRATOR', lastActive: '2026-03-11T11:20:00Z' },
+ { id: 'DEV-004', name: '之之', streak: 12, el: 8, pca: { exe: 70, tec: 32, sys: 80, col: 80, ini: 83 }, totalScore: 66, status: 'doing', module: 'M-DEVBOARD', lastActive: '2026-03-11T12:05:00Z' },
+ { id: 'DEV-005', name: '琉光', streak: 7, el: 6, pca: { exe: 79, tec: 74, sys: 71, col: 88, ini: 77 }, totalScore: 78, status: 'done', module: 'M-TEST', lastActive: '2026-03-10T16:40:00Z' },
+ { id: 'DEV-006', name: '墨羽', streak: 4, el: 4, pca: { exe: 65, tec: 60, sys: 55, col: 92, ini: 68 }, totalScore: 68, status: 'doing', module: 'M-DOC', lastActive: '2026-03-11T08:50:00Z' },
+ { id: 'DEV-007', name: '霜砚', streak: 10, el: 7, pca: { exe: 84, tec: 79, sys: 81, col: 75, ini: 82 }, totalScore: 80, status: 'blocked', module: 'M-API', lastActive: '2026-03-11T07:30:00Z' },
+ { id: 'DEV-008', name: '岚茵', streak: 6, el: 5, pca: { exe: 73, tec: 70, sys: 68, col: 85, ini: 74 }, totalScore: 74, status: 'pending', module: 'M-DESIGN', lastActive: '2026-03-10T14:20:00Z' }
+];
+
+function getTopStreak(developers) {
+ if (!developers || developers.length === 0) return { name: '无', count: 0 };
+ let top = developers[0];
+ for (let i = 1; i < developers.length; i++) {
+ if (developers[i].streak > top.streak) {
+ top = developers[i];
+ }
+ }
+ return { name: top.name, count: top.streak };
+}
+
+async function getDevStatus() {
+ return MOCK_DEVELOPERS;
+}
+
+async function getPCA(devId) {
+ const dev = MOCK_DEVELOPERS.find(d => d.id === devId);
+ if (!dev) return null;
+ return {
+ exe: dev.pca.exe,
+ tec: dev.pca.tec,
+ sys: dev.pca.sys,
+ col: dev.pca.col,
+ ini: dev.pca.ini,
+ total: dev.totalScore,
+ level: getPCAColor(dev.totalScore).level
+ };
+}
+
+async function getAllStats() {
+ const activeDevs = MOCK_DEVELOPERS.filter(d => d.status === 'doing').length;
+ const topStreak = getTopStreak(MOCK_DEVELOPERS);
+ return {
+ totalDevs: 8,
+ activeDevs: activeDevs,
+ totalCodeLines: 85600,
+ totalModules: 24,
+ modulesCompleted: 8,
+ modulesInProgress: 12,
+ modulesPending: 4,
+ topStreak: topStreak
+ };
+}
diff --git a/agents/zhuyuan-dev-agent/modules/devboard/js/app.js b/agents/zhuyuan-dev-agent/modules/devboard/js/app.js
new file mode 100644
index 0000000..2184cef
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/devboard/js/app.js
@@ -0,0 +1,53 @@
+let refreshInterval;
+let countdownInterval;
+let seconds = 30;
+
+function updateLastUpdateTime() {
+ const el = document.getElementById('last-update-time');
+ if (el) {
+ const now = new Date();
+ el.textContent = `最后更新: ${now.toLocaleTimeString('zh-CN', { hour12: false })}`;
+ }
+}
+
+function updateCountdown() {
+ const el = document.getElementById('refresh-indicator');
+ if (el) el.textContent = `⏳ ${seconds}s`;
+}
+
+function startCountdown() {
+ seconds = 30;
+ updateCountdown();
+ if (countdownInterval) clearInterval(countdownInterval);
+ countdownInterval = setInterval(() => {
+ seconds--;
+ if (seconds <= 0) seconds = 30;
+ updateCountdown();
+ }, 1000);
+}
+
+async function refreshAllData() {
+ const devs = await getDevStatus();
+ const stats = await getAllStats();
+ if (typeof renderStats === 'function') renderStats(stats);
+ if (typeof renderDevCards === 'function') renderDevCards(devs);
+ if (typeof renderRanking === 'function') renderRanking(devs);
+ updateLastUpdateTime();
+}
+
+async function initApp() {
+ await initBoard();
+ await initRanking();
+ initRadar();
+ await refreshAllData();
+ startCountdown();
+ if (refreshInterval) clearInterval(refreshInterval);
+ refreshInterval = setInterval(refreshAllData, 30000);
+}
+
+document.addEventListener('DOMContentLoaded', initApp);
+
+window.addEventListener('beforeunload', () => {
+ if (refreshInterval) clearInterval(refreshInterval);
+ if (countdownInterval) clearInterval(countdownInterval);
+});
diff --git a/agents/zhuyuan-dev-agent/modules/devboard/js/board.js b/agents/zhuyuan-dev-agent/modules/devboard/js/board.js
new file mode 100644
index 0000000..1df57d1
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/devboard/js/board.js
@@ -0,0 +1,72 @@
+function renderStats(stats) {
+ const container = document.getElementById('stats-container');
+ if (!container) return;
+ container.innerHTML = `
+
+
+
活跃开发者
+
${stats.activeDevs}
+
总人数 ${stats.totalDevs}
+
+
+
总代码量
+
${formatNumber(stats.totalCodeLines)}
+
行代码
+
+
+
模块进度
+
${stats.modulesCompleted}/${stats.totalModules}
+
✅ ${stats.modulesCompleted} / ⚡ ${stats.modulesInProgress} / ⏳ ${stats.modulesPending}
+
+
+
最高连胜
+
${stats.topStreak.count}
+
${stats.topStreak.name} ${getStreakEmoji(stats.topStreak.count)}
+
+
';
+ sorted.forEach(dev => {
+ const pcaColor = getPCAColor(dev.totalScore);
+ html += `
+
+
+
📁 ${dev.module}
+
+
${dev.streak}连胜
+
+ EL-${dev.el}
+ ${pcaColor.level} · ${dev.totalScore}
+
+
+
+
+ `;
+ });
+ html += '
';
+
+ sorted.forEach((dev, idx) => {
+ const medal = idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `${idx+1}.`;
+ const percent = (dev.streak / maxStreak) * 100;
+ html += `
+
+ `;
+ });
+ html += '
🔍 没有找到匹配的开发者
';
+ } else {
+ grid.innerHTML = renderDeveloperCards(filtered);
+
+ // 添加展开/收起动画
+ Array.from(grid.children).forEach((card, index) => {
+ card.style.animation = `cardPopIn 0.3s ease ${index * 0.05}s forwards`;
+ card.style.opacity = '0';
+ setTimeout(() => {
+ card.style.opacity = '1';
+ }, 50 + index * 20);
+ });
+ }
+
+ grid.style.opacity = '1';
+ }, 200);
+ }
+
+ // 更新排行榜（排行榜不筛选，但高亮匹配项）
+ const ranking = document.getElementById('ranking-list');
+ if (ranking) {
+ const allDevs = getDevelopers();
+ ranking.innerHTML = renderRanking(allDevs);
+
+ // 高亮筛选出的开发者
+ if (filtered.length < allDevs.length && filtered.length > 0) {
+ const filteredIds = filtered.map(d => d.id);
+ document.querySelectorAll('.ranking-item').forEach(item => {
+ const nameEl = item.querySelector('.rank-name');
+ if (nameEl) {
+ const dev = allDevs.find(d => d.name === nameEl.textContent);
+ if (dev && filteredIds.includes(dev.id)) {
+ item.classList.add('match-highlight');
+
+ // 添加数字滚动动画
+ const winsEl = item.querySelector('.rank-wins');
+ if (winsEl) {
+ const oldValue = parseInt(winsEl.textContent) || 0;
+ animateNumber(winsEl, oldValue, dev.wins, 500);
+ }
+ } else {
+ item.classList.remove('match-highlight');
+ }
+ }
+ });
+ } else {
+ document.querySelectorAll('.ranking-item').forEach(item => {
+ item.classList.remove('match-highlight');
+ });
+ }
+ }
+}
+
+// 数字滚动动画
+function animateNumber(element, start, end, duration = 1000) {
+ const range = end - start;
+ const increment = range / (duration / 16);
+ let current = start;
+ const startTime = performance.now();
+
+ function update(currentTime) {
+ const elapsed = currentTime - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+
+ // 缓动函数
+ const easeOutQuart = 1 - Math.pow(1 - progress, 3);
+ current = start + (range * easeOutQuart);
+
+ element.textContent = Math.round(current) + (element.textContent.includes('连胜') ? '连胜' : '');
+
+ if (progress < 1) {
+ requestAnimationFrame(update);
+ } else {
+ element.textContent = end + (element.textContent.includes('连胜') ? '连胜' : '');
+ }
+ }
+
+ requestAnimationFrame(update);
+}
+
+// 导出函数
+window.applyFilters = applyFilters;
+window.animateNumber = animateNumber;
diff --git a/agents/zhuyuan-dev-agent/modules/devboard/radar.js b/agents/zhuyuan-dev-agent/modules/devboard/radar.js
new file mode 100644
index 0000000..2cd2d86
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/devboard/radar.js
@@ -0,0 +1,116 @@
+// radar.js - 雷达图绘制
+function drawRadarChart(canvasId, data) {
+ const canvas = document.getElementById(canvasId);
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ const width = canvas.width;
+ const height = canvas.height;
+ const centerX = width / 2;
+ const centerY = height / 2;
+ const radius = Math.min(width, height) * 0.35;
+
+ const dimensions = ['EXE', 'TEC', 'SYS', 'COL', 'INI'];
+ const angleStep = (Math.PI * 2) / dimensions.length;
+
+ // 清空画布
+ ctx.clearRect(0, 0, width, height);
+
+ // 绘制背景网格
+ ctx.strokeStyle = '#2a3040';
+ ctx.lineWidth = 1;
+
+ // 绘制5层同心圆
+ for (let level = 1; level <= 5; level++) {
+ ctx.beginPath();
+ for (let i = 0; i <= dimensions.length; i++) {
+ const angle = i * angleStep - Math.PI / 2;
+ const x = centerX + radius * (level / 5) * Math.cos(angle);
+ const y = centerY + radius * (level / 5) * Math.sin(angle);
+
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+ ctx.closePath();
+ ctx.strokeStyle = '#2a3040';
+ ctx.stroke();
+ }
+
+ // 绘制轴线
+ for (let i = 0; i < dimensions.length; i++) {
+ const angle = i * angleStep - Math.PI / 2;
+ const x = centerX + radius * Math.cos(angle);
+ const y = centerY + radius * Math.sin(angle);
+
+ ctx.beginPath();
+ ctx.moveTo(centerX, centerY);
+ ctx.lineTo(x, y);
+ ctx.strokeStyle = '#3a4050';
+ ctx.stroke();
+
+ // 标注维度
+ const labelX = centerX + (radius + 15) * Math.cos(angle);
+ const labelY = centerY + (radius + 15) * Math.sin(angle);
+ ctx.fillStyle = '#4a9eff';
+ ctx.font = 'bold 14px monospace';
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillText(dimensions[i], labelX, labelY);
+ }
+
+ // 绘制数据
+ if (data) {
+ ctx.beginPath();
+ for (let i = 0; i < dimensions.length; i++) {
+ const value = data[dimensions[i]] || 0;
+ const angle = i * angleStep - Math.PI / 2;
+ const r = radius * (value / 100);
+ const x = centerX + r * Math.cos(angle);
+ const y = centerY + r * Math.sin(angle);
+
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+ ctx.closePath();
+ ctx.fillStyle = 'rgba(74, 158, 255, 0.3)';
+ ctx.fill();
+ ctx.strokeStyle = '#4a9eff';
+ ctx.lineWidth = 3;
+ ctx.stroke();
+
+ // 绘制数据点
+ for (let i = 0; i < dimensions.length; i++) {
+ const value = data[dimensions[i]] || 0;
+ const angle = i * angleStep - Math.PI / 2;
+ const r = radius * (value / 100);
+ const x = centerX + r * Math.cos(angle);
+ const y = centerY + r * Math.sin(angle);
+
+ ctx.beginPath();
+ ctx.arc(x, y, 5, 0, Math.PI * 2);
+ ctx.fillStyle = '#fff';
+ ctx.fill();
+ ctx.strokeStyle = '#4a9eff';
+ ctx.lineWidth = 2;
+ ctx.stroke();
+ }
+ }
+}
+
+// 渲染雷达图HTML（供detail.js调用）
+function renderRadarChart(pcaData, size = 'normal') {
+ const canvasId = 'radar-' + Math.random().toString(36).substr(2, 9);
+ const width = size === 'large' ? 400 : 300;
+ const height = size === 'large' ? 300 : 250;
+
+ setTimeout(() => {
+ const canvas = document.getElementById(canvasId);
+ if (canvas) drawRadarChart(canvas.id, pcaData);
+ }, 100);
+
+ return ``;
+}
+
+// 导出函数
+window.drawRadarChart = drawRadarChart;
+window.renderRadarChart = renderRadarChart;
diff --git a/agents/zhuyuan-dev-agent/modules/devboard/style.css b/agents/zhuyuan-dev-agent/modules/devboard/style.css
new file mode 100644
index 0000000..18ed43c
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/devboard/style.css
@@ -0,0 +1,287 @@
+/* style.css - 基础样式 */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
+ background: #0a0c14;
+ color: #e0e0e0;
+ line-height: 1.6;
+}
+
+/* 总览页容器 */
+#overview-container {
+ max-width: 1400px;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+/* 头部 */
+.dashboard-header {
+ text-align: center;
+ margin-bottom: 30px;
+ padding: 20px;
+ background: linear-gradient(135deg, #1a1f2e, #0f1219);
+ border-radius: 20px;
+ border: 1px solid #2a3040;
+}
+
+.dashboard-header h1 {
+ color: #4a9eff;
+ font-size: 2em;
+ margin-bottom: 10px;
+ text-shadow: 0 0 20px rgba(74, 158, 255, 0.3);
+}
+
+/* 控制区 */
+.controls-section {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 30px;
+ flex-wrap: wrap;
+}
+
+.search-box {
+ flex: 1;
+ min-width: 250px;
+ padding: 12px 20px;
+ background: #1a1f2e;
+ border: 2px solid #2a3040;
+ border-radius: 30px;
+ color: #fff;
+ font-size: 16px;
+ transition: all 0.3s;
+}
+
+.search-box:focus {
+ outline: none;
+ border-color: #4a9eff;
+ box-shadow: 0 0 20px rgba(74, 158, 255, 0.2);
+}
+
+.filter-buttons {
+ display: flex;
+ gap: 10px;
+}
+
+.filter-btn {
+ padding: 10px 24px;
+ background: #1a1f2e;
+ border: 2px solid #2a3040;
+ border-radius: 30px;
+ color: #a0a0a0;
+ font-weight: bold;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.filter-btn.active {
+ background: #4a9eff;
+ border-color: #4a9eff;
+ color: #fff;
+}
+
+.filter-btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(74, 158, 255, 0.2);
+}
+
+/* 开发者网格 */
+.developers-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 20px;
+ margin-bottom: 40px;
+}
+
+/* 统计区 */
+.stats-section {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+}
+
+.radar-container, .ranking-container {
+ background: #1a1f2e;
+ border-radius: 20px;
+ padding: 20px;
+ border: 1px solid #2a3040;
+}
+
+.radar-container h2, .ranking-container h2 {
+ color: #4a9eff;
+ margin-bottom: 20px;
+ font-size: 1.2em;
+}
+
+#team-radar {
+ width: 100%;
+ height: auto;
+ max-height: 300px;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+ .stats-section {
+ grid-template-columns: 1fr;
+ }
+
+ .controls-section {
+ flex-direction: column;
+ }
+
+ .filter-buttons {
+ justify-content: center;
+ }
+}
+
+/* 动画 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.fade-in {
+ animation: fadeIn 0.5s ease forwards;
+}
+
+/* ===== 交互增强样式 ===== */
+
+/* 搜索框增强 */
+.search-box {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.search-box:focus {
+ transform: scale(1.02);
+ background: #1e2436;
+}
+
+/* 筛选按钮动画 */
+.filter-btn {
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+}
+
+.filter-btn::after {
+ 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.3s, height 0.3s;
+}
+
+.filter-btn:active::after {
+ width: 100px;
+ height: 100px;
+}
+
+/* 卡片网格动画 */
+.developers-grid {
+ transition: opacity 0.3s ease;
+ min-height: 400px;
+}
+
+/* 卡片展开/收起动画 */
+.dev-card {
+ animation: cardPopIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ transform-origin: center;
+}
+
+@keyframes cardPopIn {
+ 0% {
+ opacity: 0;
+ transform: scale(0.8) translateY(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ }
+}
+
+/* 键盘焦点样式 */
+.dev-card:focus-visible {
+ outline: 3px solid #ffd700;
+ outline-offset: 2px;
+ transform: scale(1.02);
+ box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
+}
+
+/* 数字滚动动画 */
+.stat-value {
+ display: inline-block;
+ transition: all 0.3s ease;
+ font-feature-settings: "tnum";
+}
+
+/* 无结果提示 */
+.no-results {
+ grid-column: 1 / -1;
+ text-align: center;
+ padding: 60px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 20px;
+ color: #888;
+ font-size: 18px;
+ border: 2px dashed #2a3040;
+ animation: fadeIn 0.5s ease;
+}
+
+/* 高亮筛选匹配项 */
+.ranking-item.match-highlight {
+ background: rgba(74, 158, 255, 0.2);
+ border-left: 4px solid #4a9eff;
+ transform: translateX(5px);
+}
+
+/* 淡入淡出动画增强 */
+.fade-in {
+ animation: fadeIn 0.3s ease forwards;
+}
+
+.fade-out {
+ animation: fadeOut 0.3s ease forwards;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+ .dev-card:focus-visible {
+ transform: scale(1.01);
+ }
+
+ .filter-btn:active::after {
+ width: 60px;
+ height: 60px;
+ }
+}
diff --git a/agents/zhuyuan-dev-agent/modules/email-notify.js b/agents/zhuyuan-dev-agent/modules/email-notify.js
new file mode 100644
index 0000000..9b3f565
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/email-notify.js
@@ -0,0 +1,90 @@
+// ═══════════════════════════════════════
+// 铸渊开发Agent · 邮件通知模块
+// QQ邮箱 SMTP · smtp.qq.com:465
+// ═══════════════════════════════════════
+
+const nodemailer = require("nodemailer");
+
+let transporter = null;
+
+function getTransporter() {
+ if (transporter) return transporter;
+
+ const user = process.env.ZY_SMTP_USER;
+ const pass = process.env.ZY_SMTP_PASS;
+
+ if (!user || !pass) {
+ console.warn("[EmailNotify] ZY_SMTP_USER 或 ZY_SMTP_PASS 未配置，邮件功能不可用");
+ return null;
+ }
+
+ transporter = nodemailer.createTransport({
+ host: "smtp.qq.com",
+ port: 465,
+ secure: true,
+ auth: { user, pass }
+ });
+
+ console.log("[EmailNotify] SMTP 已连接 · " + user);
+ return transporter;
+}
+
+/**
+ * 发送通知邮件
+ * @param {string} to - 收件人邮箱
+ * @param {string} planId - 规划ID
+ * @param {string} status - 状态: started / completed / failed
+ * @param {object} summary - { task_count, done_count, failed_count, errors, log_url }
+ */
+async function sendNotification(to, planId, status, summary = {}) {
+ const t = getTransporter();
+ if (!t) return { sent: false, reason: "SMTP未配置" };
+
+ const statusEmoji = { started: "🚀", completed: "✅", failed: "❌" };
+ const emoji = statusEmoji[status] || "📋";
+
+ const subject = emoji + " 铸渊DevAgent · " + planId + " · " + status;
+
+ const lines = [
+ "铸渊开发Agent · 任务执行报告",
+ "══════════════════════════════",
+ "",
+ "规划ID: " + planId,
+ "状态: " + status,
+ "时间: " + new Date().toLocaleString("zh-CN", { timeZone: "Asia/Shanghai" }),
+ "",
+ ];
+
+ if (summary.task_count !== undefined) {
+ lines.push("任务总数: " + summary.task_count);
+ lines.push("已完成: " + (summary.done_count || 0));
+ lines.push("失败: " + (summary.failed_count || 0));
+ }
+
+ if (summary.errors && summary.errors.length > 0) {
+ lines.push("", "错误详情:");
+ summary.errors.forEach(function(e, i) {
+ lines.push(" " + (i + 1) + ". " + e);
+ });
+ }
+
+ lines.push("", "══════════════════════════════", "铸渊 ICE-GL-ZY001 · 国作登字-2026-A-00037559");
+
+ const mailOptions = {
+ from: process.env.ZY_SMTP_USER,
+ to: to,
+ subject: subject,
+ text: lines.join("\n")
+ };
+
+ try {
+ const info = await t.sendMail(mailOptions);
+ console.log("[EmailNotify] 邮件已发送: " + info.messageId);
+ return { sent: true, messageId: info.messageId };
+ } catch (err) {
+ console.error("[EmailNotify] 发送失败:", err.message);
+ return { sent: false, reason: err.message };
+ }
+}
+
+module.exports = { sendNotification };
diff --git a/agents/zhuyuan-dev-agent/modules/executor.js b/agents/zhuyuan-dev-agent/modules/executor.js
new file mode 100644
index 0000000..8ebde7d
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/executor.js
@@ -0,0 +1,177 @@
+// ═══════════════════════════════════════
+// 铸渊开发Agent · 执行引擎 v2.0
+// 宪法约束：3次重试上限 · 统一输出接口 · 依赖链 · 紧急停止
+// ═══════════════════════════════════════
+
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+const WORKSPACE = process.env.WORKSPACE_DIR || "/opt/guanghu/zhuyuan-workspace";
+const CONSTITUTION = JSON.parse(fs.readFileSync(path.join(__dirname, "..", "agent-constitution.json"), "utf-8"));
+const { fail_protocol, unified_interface, dependency_chain, emergency_stop } = CONSTITUTION;
+
+if (!fs.existsSync(WORKSPACE)) fs.mkdirSync(WORKSPACE, { recursive: true });
+
+/**
+ * 统一包装输出——所有模块输出必须经过这里
+ */
+function uniformResult(taskId, step, ok, extra = {}) {
+ return {
+ ok,
+ task_id: taskId,
+ step,
+ action: extra.action || "unknown",
+ output: extra.output || null,
+ error: extra.error || null,
+ retries: extra.retries || 0,
+ skipped: !!extra.skipped,
+ blocked: !!extra.blocked
+ };
+}
+
+/**
+ * 带重试的执行
+ */
+async function executeWithRetry(substep, logFn, retriesLeft) {
+ const start = Date.now();
+ const attempt = fail_protocol.max_retries_per_task - retriesLeft + 1;
+ logFn("exec_attempt", { step: substep.step, action: substep.action, attempt, retriesLeft });
+
+ try {
+ let result;
+ switch (substep.action) {
+ case "write_file":
+ result = doWriteFile(substep);
+ break;
+ case "run_cmd":
+ result = doRunCmd(substep);
+ break;
+ case "call_api":
+ result = await doCallApi(substep);
+ break;
+ case "check":
+ result = doCheck(substep);
+ break;
+ default:
+ return uniformResult(substep.task_id, substep.step, false, { action: substep.action, error: "未知动作类型: " + substep.action });
+ }
+
+ if (result.ok) {
+ logFn("exec_done", { step: substep.step, result: "ok", ms: Date.now() - start, attempt });
+ return uniformResult(substep.task_id, substep.step, true, { action: substep.action, output: result.output || result.path, retries: attempt - 1 });
+ }
+
+ // 失败了但还有重试次数
+ if (retriesLeft > 1) {
+ logFn("exec_retry", { step: substep.step, error: result.error, retriesLeft: retriesLeft - 1 });
+ return executeWithRetry(substep, logFn, retriesLeft - 1);
+ }
+
+ // 重试耗尽 → 跳过
+ logFn("exec_skip", { step: substep.step, error: result.error, reason: "重试" + fail_protocol.max_retries_per_task + "次全部失败，跳过" });
+ return uniformResult(substep.task_id, substep.step, false, { action: substep.action, error: result.error, retries: fail_protocol.max_retries_per_task, skipped: true });
+
+ } catch (err) {
+ if (retriesLeft > 1) {
+ logFn("exec_retry", { step: substep.step, error: err.message, retriesLeft: retriesLeft - 1 });
+ return executeWithRetry(substep, logFn, retriesLeft - 1);
+ }
+ logFn("exec_skip", { step: substep.step, error: err.message, reason: "重试" + fail_protocol.max_retries_per_task + "次全部失败，跳过" });
+ return uniformResult(substep.task_id, substep.step, false, { action: substep.action, error: err.message, retries: fail_protocol.max_retries_per_task, skipped: true });
+ }
+}
+
+function doWriteFile(s) {
+ const fp = path.resolve(WORKSPACE, s.target);
+ const dir = path.dirname(fp);
+ if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+ fs.writeFileSync(fp, s.content || "", "utf-8");
+ return { ok: true, path: fp };
+}
+
+function doRunCmd(s) {
+ const out = execSync(s.target, { cwd: s.cwd || WORKSPACE, encoding: "utf-8", timeout: 60000, maxBuffer: 10*1024*1024 });
+ return { ok: true, output: out.slice(0, 5000) };
+}
+
+async function doCallApi(s) {
+ const https = require("https");
+ const body = JSON.stringify(s.body || {});
+ const url = new URL(s.target);
+ return new Promise((resolve) => {
+ const req = https.request({
+ hostname: url.hostname, path: url.pathname, method: s.method || "POST",
+ headers: { "Content-Type": "application/json", ...(s.headers || {}) }
+ }, (res) => {
+ let data = "";
+ res.on("data", c => data += c);
+ res.on("end", () => resolve({ ok: res.statusCode < 400, status: res.statusCode, body: data.slice(0, 2000) }));
+ });
+ req.on("error", e => resolve({ ok: false, error: e.message }));
+ if (body !== "{}") req.write(body);
+ req.end();
+ });
+}
+
+function doCheck(s) {
+ const fp = path.resolve(WORKSPACE, s.target);
+ return { ok: fs.existsSync(fp), exists: fs.existsSync(fp), path: fp };
+}
+
+/**
+ * 执行完整规划——宪法约束版本
+ */
+async function executePlan(plan, logFn) {
+ console.log("[Executor v2] 开始执行: " + plan.plan_id + " · 宪法约束模式");
+ logFn("constitution_loaded", { max_retries: fail_protocol.max_retries_per_task });
+
+ const results = [];
+ let doneCount = 0, failCount = 0, skipCount = 0, consecutiveFails = 0;
+ const blockedTasks = new Set();
+
+ for (const task of plan.tasks) {
+ const substeps = task.substeps || [];
+
+ for (const ss of substeps) {
+ // 检查是否被阻塞
+ if (ss.depends_on && blockedTasks.has(ss.depends_on)) {
+ const blocked = uniformResult(task.id, ss.step, false, { action: ss.action, blocked: true, error: "上游依赖 " + ss.depends_on + " 失败，此任务阻塞" });
+ results.push(blocked);
+ logFn("exec_blocked", { step: ss.step, depends_on: ss.depends_on });
+ failCount++;
+ continue;
+ }
+
+ // 执行（带重试）
+ const r = await executeWithRetry({ ...ss, task_id: task.id }, logFn, fail_protocol.max_retries_per_task);
+ results.push(r);
+
+ if (r.ok) {
+ doneCount++;
+ consecutiveFails = 0;
+ } else if (r.skipped) {
+ skipCount++;
+ consecutiveFails++;
+ // 被跳过的任务 → 下游阻塞
+ blockedTasks.add(task.id + ":" + ss.step);
+ } else {
+ failCount++;
+ consecutiveFails++;
+ blockedTasks.add(task.id + ":" + ss.step);
+ }
+
+ // 紧急停止检查
+ if (consecutiveFails >= 5) {
+ logFn("emergency_stop", { reason: "连续" + consecutiveFails + "个任务失败", summary: { done: doneCount, fail: failCount, skip: skipCount } });
+ return { plan_id: plan.plan_id, emergency_stop: true, done: doneCount, failed: failCount, skipped: skipCount, results };
+ }
+ }
+ }
+
+ const summary = { plan_id: plan.plan_id, total: results.length, done: doneCount, failed: failCount, skipped: skipCount, results };
+ console.log("[Executor v2] 完成 · 成功 " + doneCount + " / 失败 " + failCount + " / 跳过 " + skipCount);
+ return summary;
+}
+
+module.exports = { executePlan };
diff --git a/agents/zhuyuan-dev-agent/modules/logger.js b/agents/zhuyuan-dev-agent/modules/logger.js
new file mode 100644
index 0000000..962b39c
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/logger.js
@@ -0,0 +1,97 @@
+// ═══════════════════════════════════════
+// 铸渊开发Agent · 日志系统
+// 结构化日志 · 铸渊醒来能看懂Agent做了什么
+// ═══════════════════════════════════════
+
+const fs = require("fs");
+const path = require("path");
+
+const LOGS_DIR = process.env.LOGS_DIR || path.join(__dirname, "..", "logs");
+
+if (!fs.existsSync(LOGS_DIR)) fs.mkdirSync(LOGS_DIR, { recursive: true });
+
+/**
+ * 创建一次执行的日志记录器
+ */
+function createLogger(planId) {
+ const runId = planId + "-" + Date.now();
+ const logFile = path.join(LOGS_DIR, runId + ".jsonl");
+ const startTime = new Date().toISOString();
+
+ // 写入启动记录
+ appendLine(logFile, { type: "run_start", plan_id: planId, run_id: runId, time: startTime });
+
+ const log = (type, data) => {
+ const entry = {
+ time: new Date().toISOString(),
+ type: type,
+ ...data
+ };
+ appendLine(logFile, entry);
+ console.log("[Log:" + planId + "] " + type + " " + JSON.stringify(data).slice(0, 100));
+ };
+
+ // 返回日志函数和元信息
+ return {
+ log,
+ runId,
+ logFile,
+ finish: (summary) => {
+ appendLine(logFile, { type: "run_end", time: new Date().toISOString(), summary });
+ return logFile;
+ }
+ };
+}
+
+function appendLine(file, obj) {
+ fs.appendFileSync(file, JSON.stringify(obj) + "\n", "utf-8");
+}
+
+/**
+ * 读取最近一次执行日志摘要（给铸渊看）
+ */
+function readLatestRun() {
+ const files = fs.readdirSync(LOGS_DIR)
+ .filter(f => f.endsWith(".jsonl"))
+ .sort()
+ .reverse();
+
+ if (files.length === 0) return null;
+
+ const latest = path.join(LOGS_DIR, files[0]);
+ const content = fs.readFileSync(latest, "utf-8");
+ const lines = content.trim().split("\n").map(l => {
+ try { return JSON.parse(l); } catch (e) { return null; }
+ }).filter(Boolean);
+
+ const startLine = lines.find(l => l.type === "run_start");
+ const endLine = lines.find(l => l.type === "run_end");
+ const errors = lines.filter(l => l.type === "exec_error" || l.type === "exec_done" && l.result === "fail");
+
+ return {
+ plan_id: startLine?.plan_id,
+ run_id: startLine?.run_id,
+ started: startLine?.time,
+ ended: endLine?.time,
+ total_steps: lines.filter(l => l.type === "exec_start").length,
+ errors: errors.map(e => ({ step: e.step, error: e.error || "未知" })),
+ log_file: latest
+ };
+}
+
+/**
+ * 列出所有执行记录
+ */
+function listRuns(limit = 20) {
+ return fs.readdirSync(LOGS_DIR)
+ .filter(f => f.endsWith(".jsonl"))
+ .sort()
+ .reverse()
+ .slice(0, limit)
+ .map(f => {
+ const stat = fs.statSync(path.join(LOGS_DIR, f));
+ return { file: f, size: stat.size, modified: stat.mtime.toISOString() };
+ });
+}
+
+module.exports = { createLogger, readLatestRun, listRuns };
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m06-adapter.js b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m06-adapter.js
new file mode 100644
index 0000000..4651cb1
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m06-adapter.js
@@ -0,0 +1,61 @@
+// M06 工单管理模块适配器
+window.M06Adapter = {
+ moduleId: 'm06',
+ moduleName: '工单管理',
+
+ // 初始化模块（由 ModuleAdapter 调用）
+ init: function(containerId) {
+ console.log('[M06Adapter] 初始化');
+
+ // 通过核心适配器加载
+ if (window.ModuleAdapter) {
+ return ModuleAdapter.loadModule(this.moduleId, containerId);
+ } else {
+ console.error('[M06Adapter] ModuleAdapter 未加载');
+ return null;
+ }
+ },
+
+ // 发送消息到工单模块
+ sendMessage: function(type, payload) {
+ return ModuleAdapter.sendMessage(this.moduleId, { type, payload });
+ },
+
+ // 监听工单模块事件
+ onTicketCreate: function(callback) {
+ EventBus.on('module:m06:message', function(data) {
+ if (data.type === 'ticket:create') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ onTicketUpdate: function(callback) {
+ EventBus.on('module:m06:message', function(data) {
+ if (data.type === 'ticket:update') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ onTicketDelete: function(callback) {
+ EventBus.on('module:m06:message', function(data) {
+ if (data.type === 'ticket:delete') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ // 销毁模块
+ destroy: function() {
+ ModuleAdapter.unloadModule(this.moduleId);
+ }
+};
+
+// 注册到模块注册表
+if (window.ModuleRegistry) {
+ ModuleRegistry.register('m06', window.M06Adapter);
+ console.log('[M06Adapter] 已注册到模块注册表');
+}
+
+console.log('[M06Adapter] 已加载');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m08-adapter.js b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m08-adapter.js
new file mode 100644
index 0000000..b549438
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m08-adapter.js
@@ -0,0 +1,47 @@
+// M08 数据统计模块适配器
+window.M08Adapter = {
+ moduleId: 'm08',
+ moduleName: '数据统计',
+
+ init: function(containerId) {
+ console.log('[M08Adapter] 初始化');
+ if (window.ModuleAdapter) {
+ return ModuleAdapter.loadModule(this.moduleId, containerId);
+ } else {
+ console.error('[M08Adapter] ModuleAdapter 未加载');
+ return null;
+ }
+ },
+
+ sendMessage: function(type, payload) {
+ return ModuleAdapter.sendMessage(this.moduleId, { type, payload });
+ },
+
+ // 监听统计模块事件
+ onStatsRefresh: function(callback) {
+ EventBus.on('module:m08:message', function(data) {
+ if (data.type === 'stats:refresh') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ onStatsExport: function(callback) {
+ EventBus.on('module:m08:message', function(data) {
+ if (data.type === 'stats:export') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ destroy: function() {
+ ModuleAdapter.unloadModule(this.moduleId);
+ }
+};
+
+if (window.ModuleRegistry) {
+ ModuleRegistry.register('m08', window.M08Adapter);
+ console.log('[M08Adapter] 已注册到模块注册表');
+}
+
+console.log('[M08Adapter] 已加载');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m11-adapter.js b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m11-adapter.js
new file mode 100644
index 0000000..4e3a7b2
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/m11-adapter.js
@@ -0,0 +1,47 @@
+// M11 系统组件库适配器
+window.M11Adapter = {
+ moduleId: 'm11',
+ moduleName: '组件库',
+
+ init: function(containerId) {
+ console.log('[M11Adapter] 初始化');
+ if (window.ModuleAdapter) {
+ return ModuleAdapter.loadModule(this.moduleId, containerId);
+ } else {
+ console.error('[M11Adapter] ModuleAdapter 未加载');
+ return null;
+ }
+ },
+
+ sendMessage: function(type, payload) {
+ return ModuleAdapter.sendMessage(this.moduleId, { type, payload });
+ },
+
+ // 监听组件库事件
+ onThemeChange: function(callback) {
+ EventBus.on('module:m11:message', function(data) {
+ if (data.type === 'theme:change') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ onComponentSelect: function(callback) {
+ EventBus.on('module:m11:message', function(data) {
+ if (data.type === 'component:select') {
+ callback(data.payload);
+ }
+ });
+ },
+
+ destroy: function() {
+ ModuleAdapter.unloadModule(this.moduleId);
+ }
+};
+
+if (window.ModuleRegistry) {
+ ModuleRegistry.register('m11', window.M11Adapter);
+ console.log('[M11Adapter] 已注册到模块注册表');
+}
+
+console.log('[M11Adapter] 已加载');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/adapters/module-adapter.js b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/module-adapter.js
new file mode 100644
index 0000000..26841ce
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/adapters/module-adapter.js
@@ -0,0 +1,140 @@
+// 模块适配器核心 - 万能转接头
+window.ModuleAdapter = {
+ // 已加载的真实模块缓存
+ loadedModules: {},
+
+ // 适配器配置
+ config: {
+ m06: {
+ name: '工单管理',
+ path: '/m06-ticket/index.html', // 真实路径，但文件可能不全
+ width: '100%',
+ height: '500px',
+ events: ['ticket:create', 'ticket:update', 'ticket:delete']
+ },
+ m08: {
+ name: '数据统计',
+ path: '/modules/m08/index.html', // 暂时未知，先保留错误路径触发边界
+ width: '100%',
+ height: '500px',
+ events: ['stats:refresh', 'stats:export']
+ },
+ m11: {
+ name: '组件库',
+ path: '/m11-module/index.html', // 正确路径！
+ width: '100%',
+ height: '600px',
+ events: ['theme:change', 'component:select']
+ }
+ },
+
+ // 加载真实模块（通过 iframe 沙箱）
+ loadModule: function(moduleId, containerId) {
+ console.log(`[adapter] 加载真实模块: ${moduleId}`);
+
+ const container = document.getElementById(containerId);
+ if (!container) {
+ console.error(`[adapter] 容器 ${containerId} 不存在`);
+ return null;
+ }
+
+ // 清理容器
+ container.innerHTML = '';
+
+ const config = this.config[moduleId];
+ if (!config) {
+ console.error(`[adapter] 未知模块: ${moduleId}`);
+ container.innerHTML = `模块配置不存在
`;
+ return null;
+ }
+
+ // 创建 iframe 沙箱（玻璃展柜）
+ const iframe = document.createElement('iframe');
+ iframe.src = config.path;
+ iframe.style.width = config.width;
+ iframe.style.height = config.height;
+ iframe.style.border = 'none';
+ iframe.style.borderRadius = '8px';
+ iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups');
+ iframe.setAttribute('allow', 'clipboard-read; clipboard-write');
+
+ // 添加加载指示器
+ const loadingDiv = document.createElement('div');
+ loadingDiv.className = 'module-loading';
+ loadingDiv.textContent = `加载 ${config.name}...`;
+ container.appendChild(loadingDiv);
+
+ // iframe 加载完成后移除加载指示器
+ iframe.onload = () => {
+ loadingDiv.remove();
+ console.log(`[adapter] ${moduleId} 加载完成`);
+
+ // 建立跨框架通信桥梁
+ this.setupMessageBridge(iframe, moduleId);
+ };
+
+ iframe.onerror = () => {
+ loadingDiv.remove();
+ container.innerHTML = `模块加载失败，请重试
`;
+ };
+
+ container.appendChild(iframe);
+ this.loadedModules[moduleId] = { iframe, containerId };
+
+ return iframe;
+ },
+
+ // 重新加载模块（错误重试）
+ reloadModule: function(moduleId, containerId) {
+ console.log(`[adapter] 重新加载模块: ${moduleId}`);
+ this.loadModule(moduleId, containerId);
+ },
+
+ // 建立消息桥梁（iframe 和主页通信）
+ setupMessageBridge: function(iframe, moduleId) {
+ // 监听来自 iframe 的消息
+ window.addEventListener('message', function(event) {
+ // 安全检查：确保消息来自正确的 iframe
+ if (event.source !== iframe.contentWindow) return;
+
+ const data = event.data;
+ if (!data || !data.type) return;
+
+ console.log(`[adapter] 收到来自 ${moduleId} 的消息:`, data);
+
+ // 转发为事件总线消息
+ if (window.EventBus) {
+ EventBus.emit(`module:${moduleId}:message`, {
+ from: moduleId,
+ type: data.type,
+ payload: data.payload
+ });
+ }
+ });
+ },
+
+ // 向模块发送消息
+ sendMessage: function(moduleId, message) {
+ const module = this.loadedModules[moduleId];
+ if (!module || !module.iframe) {
+ console.error(`[adapter] 模块 ${moduleId} 未加载`);
+ return false;
+ }
+
+ module.iframe.contentWindow.postMessage(message, '*');
+ return true;
+ },
+
+ // 卸载模块
+ unloadModule: function(moduleId) {
+ const module = this.loadedModules[moduleId];
+ if (module) {
+ const container = document.getElementById(module.containerId);
+ if (container) container.innerHTML = '';
+ delete this.loadedModules[moduleId];
+ console.log(`[adapter] 卸载模块: ${moduleId}`);
+ }
+ }
+};
+
+console.log('[adapter] 模块适配器已加载');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/all-in-one.html b/agents/zhuyuan-dev-agent/modules/m-channel/all-in-one.html
new file mode 100644
index 0000000..4c1eb87
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/all-in-one.html
@@ -0,0 +1,396 @@
+
+
+
+
+
+ 光湖频道 · 一体化版
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/app.js b/agents/zhuyuan-dev-agent/modules/m-channel/app.js
new file mode 100644
index 0000000..152d4aa
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/app.js
@@ -0,0 +1,50 @@
+// 应用入口
+console.log('[app] 启动中...');
+
+// 等待 DOM 加载完成
+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);
+ }
+ });
+ });
+
+ console.log('[app] 初始化完成');
+});
+
+// 拦截所有事件总线消息，用于调试面板
+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] 事件总线拦截器已安装');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/app.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/app.js
new file mode 100644
index 0000000..25e29f0
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/app.js
@@ -0,0 +1,42 @@
+// app.js - 光湖频道动态渲染引擎入口
+console.log('[app] 启动中...');
+
+// 等待 DOM 完全加载
+document.addEventListener('DOMContentLoaded', function() {
+ console.log('[app] DOM 已加载，初始化组件...');
+
+ // 获取内容容器
+ const contentEl = document.getElementById('channel-content');
+ if (!contentEl) {
+ console.error('[app] 找不到 #channel-content 元素');
+ return;
+ }
+
+ // 恢复状态（如果 ChannelState 存在）
+ if (window.ChannelState) {
+ const savedState = ChannelState.restoreState();
+ console.log('[app] 恢复的状态:', savedState);
+ } else {
+ console.warn('[app] ChannelState 未加载');
+ }
+
+ // 初始化路由器
+ if (window.ChannelRouter) {
+ ChannelRouter.init(contentEl);
+ } else {
+ console.error('[app] ChannelRouter 未加载');
+ return;
+ }
+
+ // 绑定导航按钮点击事件
+ document.querySelectorAll('.channel-btn').forEach(btn => {
+ btn.addEventListener('click', function(e) {
+ const channel = this.dataset.channel;
+ if (channel) {
+ ChannelRouter.navigateTo(channel);
+ }
+ });
+ });
+
+ console.log('[app] 初始化完成');
+});
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-router-backup.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-router-backup.js
new file mode 100644
index 0000000..614fc3e
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-router-backup.js
@@ -0,0 +1,98 @@
+// ================== 路由配置 ==================
+const routes = {
+ 'home': 'views/home.html',
+ 'channel': 'views/channel.html',
+ 'about': 'views/about.html'
+};
+
+// 获取当前 hash 中的路径（去掉 #/）
+function getHashPath() {
+ const hash = window.location.hash.slice(1) || '/';
+ const path = hash.startsWith('/') ? hash.slice(1) : hash;
+ return path || 'home';
+}
+
+// ================== 加载视图 ==================
+async function loadView(path) {
+ const routerView = document.getElementById('router-view');
+ if (!routerView) return;
+
+ // 显示加载动画
+ routerView.innerHTML = '';
+
+ try {
+ const viewFile = routes[path];
+ if (!viewFile) {
+ await load404(routerView);
+ return;
+ }
+
+ const response = await fetch(viewFile);
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}`);
+ }
+ const html = await response.text();
+ routerView.innerHTML = html;
+ } catch (error) {
+ console.error('加载视图失败:', error);
+ routerView.innerHTML = `
+
+ ❌ 加载失败：${error.message}
+ 请检查文件是否存在，或刷新重试
+
+ `;
+ }
+
+ // 更新导航高亮和状态栏
+ updateActiveNav(path);
+ updateStatusBar(path);
+}
+
+// 加载 404 页面
+async function load404(container) {
+ try {
+ const resp = await fetch('views/404.html');
+ if (resp.ok) {
+ container.innerHTML = await resp.text();
+ } else {
+ container.innerHTML = '⚠️ 404 - 页面未找到
';
+ }
+ } catch {
+ container.innerHTML = '⚠️ 404 - 页面未找到
';
+ }
+}
+
+// 更新导航高亮
+function updateActiveNav(path) {
+ document.querySelectorAll('.nav-link').forEach(link => {
+ link.classList.remove('active');
+ const linkPath = link.getAttribute('href').slice(2);
+ if (linkPath === path) {
+ link.classList.add('active');
+ }
+ });
+}
+
+// 更新状态栏
+function updateStatusBar(path) {
+ const statusEl = document.getElementById('current-route');
+ if (statusEl) {
+ statusEl.textContent = `当前路由：/${path}`;
+ }
+}
+
+// 监听 hash 变化
+window.addEventListener('hashchange', () => {
+ const path = getHashPath();
+ loadView(path);
+});
+
+// 首次加载
+window.addEventListener('DOMContentLoaded', () => {
+ if (!window.location.hash) {
+ window.location.hash = '#/home';
+ } else {
+ const path = getHashPath();
+ loadView(path);
+ }
+});
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-router.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-router.js
new file mode 100644
index 0000000..b1930c6
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-router.js
@@ -0,0 +1,267 @@
+/**
+ * channel-router.js
+ * 用户频道路由引擎 - 带过渡动画和状态持久化
+ * 集成ChannelState和动画控制
+ */
+
+// 依赖全局变量：ChannelState 需要先加载
+(function(global) {
+ 'use strict';
+
+ // 默认配置
+ const defaultConfig = {
+ containerSelector: '#channel-content',
+ routes: {},
+ defaultRoute: '/home',
+ mode: 'fade', // 'fade' 或 'slide'
+ transitionDuration: 300
+ };
+
+ class ChannelRouter {
+ constructor(config) {
+ this.config = Object.assign({}, defaultConfig, config);
+ this.container = document.querySelector(this.config.containerSelector);
+ if (!this.container) {
+ throw new Error(`Container ${this.config.containerSelector} not found`);
+ }
+
+ // 确保容器有相对定位
+ this.container.style.position = 'relative';
+ this.container.classList.add('route-container');
+
+ // 当前活动路由
+ this.currentRoute = null;
+ this.currentPageElement = null;
+
+ // 防抖定时器
+ this.navTimer = null;
+
+ // 绑定方法
+ this.navigate = this.navigate.bind(this);
+ this.goBack = this.goBack.bind(this);
+ this.goForward = this.goForward.bind(this);
+ this.setMode = this.setMode.bind(this);
+ this.handlePopState = this.handlePopState.bind(this);
+
+ // 初始化模式
+ this.container.classList.add(`${this.config.mode}-mode`);
+
+ // 从ChannelState恢复上次的路由
+ this.initFromState();
+
+ // 监听浏览器前进后退
+ window.addEventListener('popstate', this.handlePopState);
+
+ console.log('[router] 初始化完成，模式：', this.config.mode);
+ }
+
+ // 从ChannelState恢复
+ initFromState() {
+ if (global.ChannelState) {
+ const state = global.ChannelState.getState();
+ const targetRoute = state.currentRoute || this.config.defaultRoute;
+ // 不触发pushState，直接渲染
+ this.renderRoute(targetRoute, { replace: true, fromState: true });
+ console.log('[router] 从状态恢复路由：', targetRoute);
+ } else {
+ // 没有状态管理器，走默认
+ this.renderRoute(this.config.defaultRoute, { replace: true });
+ }
+ }
+
+ // 渲染路由（内部方法）
+ renderRoute(path, options = {}) {
+ const { replace = false, fromState = false } = options;
+ const route = this.config.routes[path];
+ if (!route) {
+ console.warn(`[router] 路由 ${path} 未定义，使用404`);
+ // 可以跳转到404页面，这里简单返回
+ return;
+ }
+
+ // 如果是相同路由且不是强制刷新，不重复渲染
+ if (this.currentRoute === path && !options.force) {
+ return;
+ }
+
+ // 创建新页面元素
+ const newPage = document.createElement('div');
+ newPage.className = `route-page ${this.config.mode === 'slide' ? 'slide-enter' : ''}`;
+ newPage.innerHTML = route.template || route.content || '';
+
+ // 如果有模块加载器，执行模块加载
+ if (global.ModuleLoader && route.module) {
+ // 这里简化，实际可能需要加载模块
+ console.log('[router] 加载模块：', route.module);
+ }
+
+ // 旧页面元素
+ const oldPage = this.currentPageElement;
+
+ // 设置新页面为激活状态
+ newPage.classList.add('active');
+
+ // 如果是滑入模式，根据方向添加额外类
+ if (this.config.mode === 'slide') {
+ // 通过history判断方向：前进/后退
+ const direction = this.getDirection(path);
+ if (direction === 'back') {
+ this.container.classList.add('backward');
+ this.container.classList.remove('forward');
+ } else {
+ this.container.classList.add('forward');
+ this.container.classList.remove('backward');
+ }
+ }
+
+ // 添加新页面到容器
+ this.container.appendChild(newPage);
+
+ // 触发重绘以确保动画
+ newPage.offsetHeight;
+
+ // 如果有旧页面，移除它的active类并添加退出动画类
+ if (oldPage) {
+ oldPage.classList.remove('active');
+ if (this.config.mode === 'slide') {
+ oldPage.classList.add('slide-exit');
+ }
+ }
+
+ // 动画结束后清理旧页面
+ const onTransitionEnd = (e) => {
+ if (e.target === newPage || e.target === oldPage) {
+ if (oldPage && oldPage.parentNode) {
+ oldPage.parentNode.removeChild(oldPage);
+ }
+ newPage.removeEventListener('transitionend', onTransitionEnd);
+ }
+ };
+ newPage.addEventListener('transitionend', onTransitionEnd);
+
+ // 更新当前路由
+ this.currentRoute = path;
+ this.currentPageElement = newPage;
+
+ // 更新导航菜单激活状态
+ this.updateActiveNav(path);
+
+ // 保存状态（如果不是从状态恢复来的）
+ if (!fromState && global.ChannelState) {
+ // 判断是push还是replace
+ if (replace) {
+ // 替换当前历史记录（不增加新记录）
+ // 状态管理需要相应处理：替换当前记录而不是push
+ global.ChannelState.setCurrentRoute(path);
+ // 同时替换浏览器历史
+ if (!options.skipHistory) {
+ history.replaceState({ route: path }, '', `#${path}`);
+ }
+ } else {
+ // 正常跳转，push到历史
+ global.ChannelState.pushHistory(path);
+ if (!options.skipHistory) {
+ history.pushState({ route: path }, '', `#${path}`);
+ }
+ }
+ } else if (!global.ChannelState) {
+ // 没有状态管理器，只处理浏览器历史
+ if (!replace && !options.skipHistory) {
+ history.pushState({ route: path }, '', `#${path}`);
+ } else if (replace && !options.skipHistory) {
+ history.replaceState({ route: path }, '', `#${path}`);
+ }
+ }
+
+ console.log(`[router] 导航到 ${path}${replace ? ' (replace)' : ''}`);
+ }
+
+ // 判断前进后退方向（简单实现：看是否在历史栈中）
+ getDirection(path) {
+ if (!global.ChannelState) return 'forward';
+ const state = global.ChannelState.getState();
+ const currentIndex = state.historyIndex;
+ const stack = state.historyStack;
+ // 如果path在历史栈中且在当前位置之后，是后退？需要更精确
+ // 这里简化：根据当前路由和目标的索引比较
+ if (this.currentRoute) {
+ const currentIdx = stack.indexOf(this.currentRoute);
+ const targetIdx = stack.indexOf(path);
+ if (targetIdx < currentIdx) return 'back';
+ }
+ return 'forward';
+ }
+
+ // 更新导航菜单激活样式
+ updateActiveNav(path) {
+ document.querySelectorAll('.channel-nav a').forEach(link => {
+ const href = link.getAttribute('href').replace('#', '');
+ if (href === path) {
+ link.classList.add('active');
+ } else {
+ link.classList.remove('active');
+ }
+ });
+ }
+
+ // 公开导航方法
+ navigate(path, options = {}) {
+ // 防抖处理
+ if (this.navTimer) clearTimeout(this.navTimer);
+ this.navTimer = setTimeout(() => {
+ this.renderRoute(path, options);
+ this.navTimer = null;
+ }, 10); // 微小延迟确保快速点击不重叠
+ }
+
+ // 后退
+ goBack() {
+ if (global.ChannelState) {
+ const prev = global.ChannelState.goBack();
+ if (prev) {
+ this.renderRoute(prev, { fromState: true, skipHistory: true });
+ } else {
+ console.log('[router] 已在最前');
+ }
+ } else {
+ history.back();
+ }
+ }
+
+ // 前进
+ goForward() {
+ if (global.ChannelState) {
+ const next = global.ChannelState.goForward();
+ if (next) {
+ this.renderRoute(next, { fromState: true, skipHistory: true });
+ } else {
+ console.log('[router] 已在最后');
+ }
+ } else {
+ history.forward();
+ }
+ }
+
+ // 处理popstate事件（浏览器前进后退）
+ handlePopState(event) {
+ const route = event.state?.route || this.config.defaultRoute;
+ if (global.ChannelState) {
+ // 从状态中恢复索引，但不需要重复push
+ this.renderRoute(route, { fromState: true, skipHistory: true });
+ } else {
+ this.renderRoute(route, { skipHistory: true });
+ }
+ }
+
+ // 切换动画模式
+ setMode(mode) {
+ if (mode !== 'fade' && mode !== 'slide') return;
+ this.container.classList.remove('fade-mode', 'slide-mode');
+ this.container.classList.add(`${mode}-mode`);
+ this.config.mode = mode;
+ console.log('[router] 切换动画模式为：', mode);
+ }
+ }
+
+ global.ChannelRouter = ChannelRouter;
+})(window);
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-state.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-state.js
new file mode 100644
index 0000000..35ea173
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-state.js
@@ -0,0 +1,149 @@
+/**
+ * channel-state.js
+ * 频道状态管理器 - 记忆妈妈的浏览足迹
+ * 使用localStorage持久化，刷新页面自动恢复
+ * 功能：保存/恢复当前路由、已访问模块列表、历史栈
+ */
+
+const ChannelState = (function() {
+ const STORAGE_KEY = 'm-channel-state';
+
+ // 默认状态
+ const defaultState = {
+ currentRoute: '/home',
+ visitedModules: [], // 已访问过的模块ID列表
+ historyStack: ['/home'], // 历史记录栈
+ historyIndex: 0 // 当前在历史栈中的位置
+ };
+
+ let state = { ...defaultState };
+
+ // 加载本地存储的状态
+ function load() {
+ try {
+ const saved = localStorage.getItem(STORAGE_KEY);
+ if (saved) {
+ state = JSON.parse(saved);
+ // 确保必要字段存在
+ if (!state.visitedModules) state.visitedModules = [];
+ if (!state.historyStack || !Array.isArray(state.historyStack)) {
+ state.historyStack = [state.currentRoute || '/home'];
+ }
+ if (typeof state.historyIndex !== 'number') {
+ state.historyIndex = 0;
+ }
+ console.log('[state] restore', state);
+ } else {
+ reset();
+ }
+ } catch (e) {
+ console.warn('[state] load failed, use default', e);
+ reset();
+ }
+ return state;
+ }
+
+ // 保存当前状态到localStorage
+ function save() {
+ try {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+ console.log('[state] save', state);
+ } catch (e) {
+ console.warn('[state] save failed', e);
+ }
+ }
+
+ // 重置为默认状态
+ function reset() {
+ state = { ...defaultState };
+ save();
+ }
+
+ // 更新当前路由
+ function setCurrentRoute(route) {
+ if (state.currentRoute !== route) {
+ state.currentRoute = route;
+ // 添加到已访问模块（如果是模块路由）
+ if (route.startsWith('/module/')) {
+ const moduleId = route.replace('/module/', '');
+ if (!state.visitedModules.includes(moduleId)) {
+ state.visitedModules.push(moduleId);
+ }
+ }
+ save();
+ }
+ }
+
+ // 添加到历史栈（用于前进后退）
+ function pushHistory(route) {
+ // 如果当前不在栈顶，先截断后面的记录
+ if (state.historyIndex < state.historyStack.length - 1) {
+ state.historyStack = state.historyStack.slice(0, state.historyIndex + 1);
+ }
+ state.historyStack.push(route);
+ state.historyIndex = state.historyStack.length - 1;
+ setCurrentRoute(route); // 会触发保存
+ }
+
+ // 后退
+ function goBack() {
+ if (state.historyIndex > 0) {
+ state.historyIndex--;
+ state.currentRoute = state.historyStack[state.historyIndex];
+ save();
+ return state.currentRoute;
+ }
+ return null;
+ }
+
+ // 前进
+ function goForward() {
+ if (state.historyIndex < state.historyStack.length - 1) {
+ state.historyIndex++;
+ state.currentRoute = state.historyStack[state.historyIndex];
+ save();
+ return state.currentRoute;
+ }
+ return null;
+ }
+
+ // 获取当前状态
+ function getState() {
+ return { ...state };
+ }
+
+ // 标记模块为已访问（外部调用）
+ function markModuleVisited(moduleId) {
+ if (!state.visitedModules.includes(moduleId)) {
+ state.visitedModules.push(moduleId);
+ save();
+ }
+ }
+
+ // 清除状态（用于测试）
+ function clear() {
+ localStorage.removeItem(STORAGE_KEY);
+ reset();
+ }
+
+ // 初始化：加载状态
+ load();
+
+ return {
+ load,
+ save,
+ reset,
+ setCurrentRoute,
+ pushHistory,
+ goBack,
+ goForward,
+ getState,
+ markModuleVisited,
+ clear
+ };
+})();
+
+// 导出（如果是模块环境）
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = ChannelState;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-style.css b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-style.css
new file mode 100644
index 0000000..f2a8cd2
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-style.css
@@ -0,0 +1,132 @@
+/**
+ * channel-style.css
+ * 频道基础样式 + 过渡动画变量
+ */
+
+/* 引入过渡动画 */
+@import url('channel-transition.css');
+
+:root {
+ --primary-color: #4a90e2;
+ --secondary-color: #f5f5f5;
+ --text-color: #333;
+ --border-radius: 8px;
+ --transition-duration: 0.3s;
+ --transition-timing: ease;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ margin: 0;
+ padding: 20px;
+ background: #f0f2f5;
+ color: var(--text-color);
+}
+
+/* 频道头部 */
+.channel-header {
+ background: white;
+ padding: 15px 20px;
+ border-radius: var(--border-radius);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ margin-bottom: 20px;
+}
+
+.channel-header h1 {
+ margin: 0;
+ font-size: 1.8rem;
+ color: var(--primary-color);
+}
+
+/* 导航菜单 */
+.channel-nav {
+ background: white;
+ padding: 10px 20px;
+ border-radius: var(--border-radius);
+ margin-bottom: 20px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.channel-nav ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ gap: 20px;
+}
+
+.channel-nav a {
+ text-decoration: none;
+ color: var(--text-color);
+ padding: 8px 16px;
+ border-radius: 20px;
+ transition: background 0.2s;
+}
+
+.channel-nav a:hover {
+ background: var(--secondary-color);
+}
+
+.channel-nav a.active {
+ background: var(--primary-color);
+ color: white;
+}
+
+/* 内容区域 */
+.channel-content {
+ background: white;
+ padding: 20px;
+ border-radius: var(--border-radius);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ min-height: 300px;
+}
+
+/* 已访问模块标记 */
+.module-link.visited {
+ position: relative;
+}
+
+.module-link.visited::after {
+ content: "✓";
+ position: absolute;
+ top: -5px;
+ right: -5px;
+ background: var(--primary-color);
+ color: white;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* 动画模式切换按钮 */
+.animation-toggle {
+ margin-left: auto;
+ display: flex;
+ gap: 10px;
+}
+
+.animation-toggle button {
+ padding: 5px 15px;
+ border: 1px solid #ddd;
+ background: white;
+ border-radius: 20px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.animation-toggle button.active {
+ background: var(--primary-color);
+ color: white;
+ border-color: var(--primary-color);
+}
+
+/* 调试面板样式（后续使用） */
+.debug-panel {
+ margin-top: 30px;
+ border-top: 2px dashed #ccc;
+ padding-top: 20px;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-transition.css b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-transition.css
new file mode 100644
index 0000000..b13bd02
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/channel-transition.css
@@ -0,0 +1,83 @@
+/**
+ * channel-transition.css
+ * 路由过渡动画 - 让切换像呼吸一样自然
+ * 提供两种模式：淡入淡出(fade) / 滑入滑出(slide)
+ */
+
+/* 基础容器样式 */
+.route-container {
+ position: relative;
+ width: 100%;
+ min-height: 200px;
+}
+
+/* 所有路由页面默认绝对定位，便于重叠动画 */
+.route-page {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+/* 淡入淡出模式 */
+.fade-mode .route-page {
+ opacity: 0;
+ transform: scale(0.98);
+ pointer-events: none;
+}
+
+.fade-mode .route-page.active {
+ opacity: 1;
+ transform: scale(1);
+ pointer-events: auto;
+ position: relative; /* 激活页变为相对定位，占据文档流高度 */
+}
+
+/* 滑入滑出模式 */
+.slide-mode .route-page {
+ opacity: 1;
+ transform: translateX(0);
+ pointer-events: none;
+}
+
+.slide-mode .route-page.active {
+ position: relative;
+ pointer-events: auto;
+}
+
+/* 进入动画：从右侧滑入 */
+.slide-mode .route-page.slide-enter {
+ transform: translateX(100%);
+}
+
+.slide-mode .route-page.active.slide-enter {
+ transform: translateX(0);
+}
+
+/* 离开动画：向左侧滑出（用于后退时的反向） */
+.slide-mode .route-page.slide-exit {
+ transform: translateX(-100%);
+}
+
+/* 前进/后退方向控制 */
+.slide-mode.forward .route-page.slide-enter {
+ transform: translateX(100%);
+}
+
+.slide-mode.forward .route-page.active.slide-enter {
+ transform: translateX(0);
+}
+
+.slide-mode.backward .route-page.slide-enter {
+ transform: translateX(-100%);
+}
+
+.slide-mode.backward .route-page.active.slide-enter {
+ transform: translateX(0);
+}
+
+/* 防止快速点击时动画重叠 */
+.route-page {
+ will-change: transform, opacity;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/event-bus.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/event-bus.js
new file mode 100644
index 0000000..ab14007
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/event-bus.js
@@ -0,0 +1,111 @@
+/**
+ * event-bus.js
+ * 事件总线 - 模块间的群聊频道
+ * 发布/订阅模式，支持命名空间和调试日志
+ */
+
+const EventBus = (function() {
+ // 存储订阅者：{ eventName: [handler1, handler2, ...] }
+ const listeners = {};
+ // 调试模式开关
+ let debugMode = true;
+
+ // 订阅事件
+ function on(eventName, handler) {
+ if (typeof handler !== 'function') {
+ console.error('[bus] 订阅必须提供函数');
+ return;
+ }
+
+ if (!listeners[eventName]) {
+ listeners[eventName] = [];
+ }
+ listeners[eventName].push(handler);
+
+ if (debugMode) {
+ console.log(`[bus] 订阅事件: ${eventName}，当前订阅数: ${listeners[eventName].length}`);
+ }
+
+ // 返回取消订阅函数
+ return function off() {
+ off(eventName, handler);
+ };
+ }
+
+ // 取消订阅
+ function off(eventName, handler) {
+ if (!listeners[eventName]) return;
+
+ if (handler) {
+ // 移除特定handler
+ const index = listeners[eventName].indexOf(handler);
+ if (index !== -1) {
+ listeners[eventName].splice(index, 1);
+ if (debugMode) {
+ console.log(`[bus] 取消订阅: ${eventName}，剩余: ${listeners[eventName].length}`);
+ }
+ }
+ } else {
+ // 移除该事件所有订阅
+ delete listeners[eventName];
+ if (debugMode) {
+ console.log(`[bus] 移除所有订阅: ${eventName}`);
+ }
+ }
+ }
+
+ // 触发事件
+ function emit(eventName, data) {
+ if (!listeners[eventName]) {
+ if (debugMode) {
+ console.log(`[bus] 触发事件 ${eventName} 但无订阅者`);
+ }
+ return;
+ }
+
+ if (debugMode) {
+ console.log(`[bus] 触发事件: ${eventName}，数据:`, data);
+ }
+
+ // 复制一份以防在遍历过程中修改
+ const handlers = listeners[eventName].slice();
+ handlers.forEach(handler => {
+ try {
+ handler(data, eventName);
+ } catch (e) {
+ console.error(`[bus] 事件 ${eventName} 处理出错:`, e);
+ }
+ });
+ }
+
+ // 清空所有订阅
+ function clear() {
+ for (let key in listeners) {
+ delete listeners[key];
+ }
+ if (debugMode) {
+ console.log('[bus] 清空所有订阅');
+ }
+ }
+
+ // 开启/关闭调试
+ function setDebug(enable) {
+ debugMode = enable;
+ }
+
+ return {
+ on,
+ off,
+ emit,
+ clear,
+ setDebug
+ };
+})();
+
+// 挂载到全局
+window.EventBus = EventBus;
+
+// 如果是模块环境
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = EventBus;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/index.html b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/index.html
new file mode 100644
index 0000000..e86e990
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+ 光湖频道 · 动态渲染引擎
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-lifecycle.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-lifecycle.js
new file mode 100644
index 0000000..37daed6
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-lifecycle.js
@@ -0,0 +1,90 @@
+/**
+ * module-lifecycle.js
+ * 模块生命周期管理 - 让模块知道自己何时加载/卸载/收到消息
+ * 配合事件总线使用
+ */
+
+const ModuleLifecycle = (function() {
+ // 存储每个模块的钩子函数
+ const hooks = {};
+
+ // 注册模块的生命周期钩子
+ function register(moduleId, lifecycles) {
+ if (!moduleId) return;
+
+ hooks[moduleId] = {
+ onLoad: lifecycles.onLoad || null,
+ onUnload: lifecycles.onUnload || null,
+ onMessage: lifecycles.onMessage || null
+ };
+
+ console.log(`[lifecycle] 注册模块: ${moduleId}`, lifecycles);
+
+ // 如果已经加载（比如页面初始化时），自动触发onLoad？
+ // 这里留给loader去调用
+ }
+
+ // 触发模块加载
+ function triggerLoad(moduleId, params) {
+ const moduleHooks = hooks[moduleId];
+ if (moduleHooks && moduleHooks.onLoad) {
+ try {
+ moduleHooks.onLoad(params);
+ console.log(`[lifecycle] onLoad 模块: ${moduleId}`);
+ } catch (e) {
+ console.error(`[lifecycle] onLoad 模块 ${moduleId} 出错:`, e);
+ }
+ }
+ }
+
+ // 触发模块卸载
+ function triggerUnload(moduleId) {
+ const moduleHooks = hooks[moduleId];
+ if (moduleHooks && moduleHooks.onUnload) {
+ try {
+ moduleHooks.onUnload();
+ console.log(`[lifecycle] onUnload 模块: ${moduleId}`);
+ } catch (e) {
+ console.error(`[lifecycle] onUnload 模块 ${moduleId} 出错:`, e);
+ }
+ }
+
+ // 卸载时自动取消该模块的所有事件订阅
+ // 这里简单使用事件总线的off，但需要知道该模块订阅了哪些事件
+ // 我们约定模块在订阅时使用带命名空间的事件名，比如 moduleA:click
+ // 或者在onUnload里手动取消。为了简化，我们不清除订阅，但可以在onUnload里做。
+ // 更完善的做法是记录每个模块的订阅列表，但这里先不实现。
+ }
+
+ // 触发模块收到消息（由事件总线转发时调用）
+ function triggerMessage(moduleId, message, data) {
+ const moduleHooks = hooks[moduleId];
+ if (moduleHooks && moduleHooks.onMessage) {
+ try {
+ moduleHooks.onMessage(message, data);
+ console.log(`[lifecycle] onMessage 模块: ${moduleId} 消息: ${message}`);
+ } catch (e) {
+ console.error(`[lifecycle] onMessage 模块 ${moduleId} 出错:`, e);
+ }
+ }
+ }
+
+ // 获取模块的钩子（用于调试）
+ function getHooks(moduleId) {
+ return hooks[moduleId] || null;
+ }
+
+ return {
+ register,
+ triggerLoad,
+ triggerUnload,
+ triggerMessage,
+ getHooks
+ };
+})();
+
+window.ModuleLifecycle = ModuleLifecycle;
+
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = ModuleLifecycle;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-loader.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-loader.js
new file mode 100644
index 0000000..2747442
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-loader.js
@@ -0,0 +1,116 @@
+/**
+ * module-loader.js
+ * 模块加载器 - 负责动态加载模块HTML/JS，并管理生命周期
+ * 集成事件总线和生命周期钩子
+ */
+
+const ModuleLoader = (function() {
+ // 已加载的模块缓存
+ const loadedModules = {};
+
+ // 加载模块
+ async function loadModule(moduleId, container, params = {}) {
+ if (loadedModules[moduleId]) {
+ console.log(`[loader] 模块 ${moduleId} 已加载，直接显示`);
+ showModule(moduleId, container, params);
+ return;
+ }
+
+ try {
+ console.log(`[loader] 正在加载模块: ${moduleId}`);
+
+ // 获取模块URL（这里使用mock-modules下的html文件）
+ const url = `mock-modules/mock-${moduleId}.html`;
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(`HTTP ${response.status}`);
+ }
+ const html = await response.text();
+
+ // 解析HTML，提取body内容作为模块内容
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, 'text/html');
+ let moduleContent = doc.body.innerHTML;
+
+ // 提取script标签并执行
+ const scripts = doc.querySelectorAll('script');
+ scripts.forEach(script => {
+ const newScript = document.createElement('script');
+ if (script.src) {
+ newScript.src = script.src;
+ } else {
+ newScript.textContent = script.textContent;
+ }
+ document.body.appendChild(newScript);
+ // 注意：动态添加的脚本会立即执行
+ });
+
+ // 存储模块内容
+ loadedModules[moduleId] = {
+ content: moduleContent,
+ scripts: scripts.length
+ };
+
+ // 显示模块
+ showModule(moduleId, container, params);
+
+ // 触发生命周期 onLoad
+ ModuleLifecycle.triggerLoad(moduleId, params);
+
+ // 标记已访问（状态管理）
+ if (window.ChannelState) {
+ ChannelState.markModuleVisited(moduleId);
+ }
+
+ console.log(`[loader] 模块 ${moduleId} 加载完成`);
+ } catch (error) {
+ console.error(`[loader] 加载模块 ${moduleId} 失败:`, error);
+ container.innerHTML = `加载失败：${error.message}
`;
+ }
+ }
+
+ // 显示已加载的模块
+ function showModule(moduleId, container, params) {
+ const mod = loadedModules[moduleId];
+ if (!mod) return;
+
+ container.innerHTML = mod.content;
+
+ // 如果有参数，可以通过自定义事件传递
+ if (params) {
+ const event = new CustomEvent('module:params', { detail: params });
+ container.dispatchEvent(event);
+ }
+
+ // 通知模块已显示（通过生命周期？）
+ // 可以用triggerMessage
+ ModuleLifecycle.triggerMessage(moduleId, 'show', params);
+ }
+
+ // 卸载模块
+ function unloadModule(moduleId) {
+ if (loadedModules[moduleId]) {
+ // 触发生命周期 onUnload
+ ModuleLifecycle.triggerUnload(moduleId);
+
+ // 清理缓存（可选）
+ delete loadedModules[moduleId];
+ console.log(`[loader] 模块 ${moduleId} 已卸载`);
+ }
+ }
+
+ // 预加载模块
+ function preloadModule(moduleId) {
+ // 简单fetch但不显示
+ fetch(`mock-modules/mock-${moduleId}.html`).catch(() => {});
+ }
+
+ return {
+ loadModule,
+ unloadModule,
+ preloadModule
+ };
+})();
+
+window.ModuleLoader = ModuleLoader;
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-registry.js b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-registry.js
new file mode 100644
index 0000000..a0a87ff
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/backup-混乱版/module-registry.js
@@ -0,0 +1,7 @@
+const moduleRegistry = {
+ 'mock-a': 'mock-modules/mock-a.html',
+ 'mock-b': 'mock-modules/mock-b.html',
+ 'mock-c': 'mock-modules/mock-c.html',
+ 'mock-d': 'mock-modules/mock-d.html'
+};
+window.moduleRegistry = moduleRegistry;
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-analytics.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-analytics.js
new file mode 100644
index 0000000..df5ed7e
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-analytics.js
@@ -0,0 +1,178 @@
+/**
+ * channel-analytics.js
+ * 频道数据采集核心·环节8 + 环节9设置联动
+ * 记录模块访问次数、停留时间、页面加载速度
+ */
+
+const ChannelAnalytics = (function() {
+ const STORAGE_KEY = 'channel-analytics-data';
+
+ // 数据结构初始化
+ function getDefaultData() {
+ return {
+ modules: {}, // {moduleId: {visits: 0, totalDuration: 0, loadTimes: [], dailyVisits: {} }}
+ globalDaily: {}, // {'YYYY-MM-DD': totalVisits}
+ lastUpdated: null
+ };
+ }
+
+ // localStorage 读写
+ function loadData() {
+ try {
+ const raw = localStorage.getItem(STORAGE_KEY);
+ if (raw) return JSON.parse(raw);
+ } catch(e) {
+ console.log('⚠️ 读取分析数据失败，重新初始化');
+ }
+ return getDefaultData();
+ }
+
+ function saveData(data) {
+ data.lastUpdated = new Date().toISOString();
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+ }
+
+ // 日期工具
+ function today() {
+ return new Date().toISOString().split('T')[0];
+ }
+
+ // 确保模块数据结构存在
+ function ensureModule(data, moduleId) {
+ if (!data.modules[moduleId]) {
+ data.modules[moduleId] = {
+ visits: 0,
+ totalDuration: 0,
+ loadTimes: [],
+ dailyVisits: {}
+ };
+ }
+ return data.modules[moduleId];
+ }
+
+ // 当前会话状态
+ let currentModule = null;
+ let enterTime = null;
+ let loadStartTime = null;
+
+ // 公开方法
+ return {
+ // 记录模块访问（环节9：检查数据采集开关）
+ recordVisit: function(moduleId) {
+ // 数据采集开关检查（环节9新增）
+ if (typeof ChannelSettings !== 'undefined' && !ChannelSettings.get('analyticsEnabled')) {
+ console.log('📊 数据采集已关闭（设置中心）');
+ return;
+ }
+ if (!moduleId) return;
+ const data = loadData();
+ const mod = ensureModule(data, moduleId);
+
+ // 访问计数 +1
+ mod.visits++;
+
+ // 每日访问计数
+ const d = today();
+ mod.dailyVisits[d] = (mod.dailyVisits[d] || 0) + 1;
+
+ // 全局每日访问
+ data.globalDaily[d] = (data.globalDaily[d] || 0) + 1;
+
+ saveData(data);
+ console.log('📊 已记录：模块 ' + moduleId + ' 被访问，累计 ' + mod.visits + ' 次');
+
+ // 记录进入时间
+ this.startSession(moduleId);
+ },
+
+ // 开始计时
+ startSession: function(moduleId) {
+ // 先结束上一个模块的计时
+ if (currentModule && enterTime) {
+ this.endSession();
+ }
+ currentModule = moduleId;
+ enterTime = performance.now();
+ loadStartTime = performance.now();
+ },
+
+ // 结束计时（切换模块或离开时调用）
+ endSession: function() {
+ if (!currentModule || !enterTime) return;
+ // 数据采集开关检查（环节9新增）
+ if (typeof ChannelSettings !== 'undefined' && !ChannelSettings.get('analyticsEnabled')) {
+ // 如果关闭采集，清空当前会话但不记录
+ currentModule = null;
+ enterTime = null;
+ return;
+ }
+ const duration = Math.round((performance.now() - enterTime) / 1000); // 秒
+ const data = loadData();
+ const mod = ensureModule(data, currentModule);
+ mod.totalDuration += duration;
+ saveData(data);
+ console.log('⏱️ 停留时间：模块 ' + currentModule + ' 停留约 ' + duration + ' 秒');
+ currentModule = null;
+ enterTime = null;
+ },
+
+ // 记录加载性能
+ recordLoadTime: function(moduleId, loadTimeMs) {
+ if (!moduleId) return;
+ // 数据采集开关检查（环节9新增）
+ if (typeof ChannelSettings !== 'undefined' && !ChannelSettings.get('analyticsEnabled')) {
+ return;
+ }
+ const data = loadData();
+ const mod = ensureModule(data, moduleId);
+ mod.loadTimes.push(loadTimeMs);
+ // 只保留最近50次
+ if (mod.loadTimes.length > 50) {
+ mod.loadTimes = mod.loadTimes.slice(-50);
+ }
+ saveData(data);
+ console.log('⚡ 加载耗时：模块 ' + moduleId + ' 加载 ' + Math.round(loadTimeMs) + ' 毫秒');
+ },
+
+ // 标记加载开始
+ markLoadStart: function() {
+ loadStartTime = performance.now();
+ },
+
+ // 标记加载完成并记录
+ markLoadEnd: function(moduleId) {
+ if (loadStartTime && moduleId) {
+ const loadTime = performance.now() - loadStartTime;
+ this.recordLoadTime(moduleId, loadTime);
+ loadStartTime = null;
+ }
+ },
+
+ // 获取所有数据（面板用）
+ getAllData: function() {
+ return loadData();
+ },
+
+ // 获取最近7天趋势
+ getWeeklyTrend: function() {
+ const data = loadData();
+ const trend = [];
+ for (let i = 6; i >= 0; i--) {
+ const d = new Date();
+ d.setDate(d.getDate() - i);
+ const dateStr = d.toISOString().split('T')[0];
+ trend.push({
+ date: dateStr,
+ visits: data.globalDaily[dateStr] || 0
+ });
+ }
+ return trend;
+ },
+
+ // 清除所有数据（调试用）
+ clearAll: function() {
+ localStorage.removeItem(STORAGE_KEY);
+ console.log('🗑️ 所有分析数据已清除');
+ }
+ };
+})();
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-complete.html b/agents/zhuyuan-dev-agent/modules/m-channel/channel-complete.html
new file mode 100644
index 0000000..9162957
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-complete.html
@@ -0,0 +1,267 @@
+
+
+
+
+
+ 光湖频道 · 完全版
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
主题色
+
+
+
+
+
+
+
+
+
+
统计数据
+
+
+
+
其他
+
+
+
+
暂无数据，多点几个模块再来看
';
+ return;
+ }
+ const maxVisits = Math.max.apply(null, keys.map(function(k) { return modules[k].visits; })) || 1;
+ let html = '';
+ keys.forEach(function(id, i) {
+ const mod = modules[id];
+ const height = Math.max(4, (mod.visits / maxVisits) * 180);
+ const color = COLORS[i % COLORS.length];
+ html += '' +
+ '
' + mod.visits + '' +
+ '
' +
+ '
' + id.replace('m-', '') + '' +
+ '
| 暂无数据 |
';
+ return;
+ }
+
+ let html = '';
+ keys.forEach(function(id) {
+ const mod = modules[id];
+ const avgLoad = mod.loadTimes.length ?
+ Math.round(mod.loadTimes.reduce((a, b) => a + b, 0) / mod.loadTimes.length) : 0;
+ const minutes = Math.round(mod.totalDuration / 60);
+ const statusClass = avgLoad > 300 ? 'slow' : '';
+ const statusText = avgLoad > 300 ? '⚠️ 慢' : '✅ 正常';
+
+ html += '' +
+ '| ' + id.replace('m-', '') + ' | ' +
+ '' + mod.visits + ' | ' +
+ '' + minutes + '分钟 | ' +
+ '' + avgLoad + 'ms | ' +
+ '' + statusText + ' | ' +
+ '
';
+ });
+ tbody.innerHTML = html;
+ }
+
+ // 公开方法
+ return {
+ render: function() {
+ renderBarChart();
+ renderPieChart();
+ renderLineChart();
+ renderPerfTable();
+ },
+ clearData: function() {
+ if (confirm('确定清除所有统计数据吗？')) {
+ ChannelAnalytics.clearAll();
+ this.render();
+ console.log('🗑️ 数据已清除，图表已重置');
+ }
+ }
+ };
+})();
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-enhancements.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-enhancements.js
new file mode 100644
index 0000000..3689661
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-enhancements.js
@@ -0,0 +1,338 @@
+// channel-enhancements.js - 频道搜索、面包屑、快捷键增强功能（终极修复版）
+(function() {
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
+
+ function init() {
+ addStyles();
+ createSearchBox();
+ createBreadcrumb();
+ createShortcutHint();
+ initShortcuts();
+ bindCardClicks(); // ★ 新增：为卡片绑定点击切换模块
+ window.addEventListener('hashchange', updateBreadcrumb);
+ updateBreadcrumb();
+ }
+
+ function addStyles() {
+ const style = document.createElement('style');
+ style.textContent = `
+ .channel-search-container {
+ padding: 16px 20px;
+ background: #f8f9fa;
+ border-bottom: 1px solid #e9ecef;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+ .channel-search-input {
+ flex: 1;
+ padding: 10px 16px;
+ border: 1px solid #ced4da;
+ border-radius: 24px;
+ font-size: 14px;
+ outline: none;
+ transition: border-color 0.2s;
+ }
+ .channel-search-input:focus {
+ border-color: #4d6bfe;
+ box-shadow: 0 0 0 3px rgba(77,107,254,0.1);
+ }
+ .channel-search-clear {
+ background: none;
+ border: none;
+ font-size: 18px;
+ cursor: pointer;
+ color: #6c757d;
+ padding: 0 8px;
+ display: none;
+ }
+ .channel-search-clear:hover {
+ color: #212529;
+ }
+ .channel-search-input:not(:placeholder-shown) + .channel-search-clear {
+ display: inline-block;
+ }
+ .highlight {
+ background-color: #ffeb3b;
+ padding: 2px 0;
+ border-radius: 2px;
+ }
+ .no-results {
+ text-align: center;
+ padding: 40px;
+ color: #6c757d;
+ font-style: italic;
+ }
+ .channel-breadcrumb {
+ padding: 12px 20px;
+ background: white;
+ border-bottom: 1px solid #e9ecef;
+ font-size: 14px;
+ }
+ .channel-breadcrumb a {
+ color: #4d6bfe;
+ text-decoration: none;
+ }
+ .channel-breadcrumb a:hover {
+ text-decoration: underline;
+ }
+ .channel-breadcrumb span {
+ color: #6c757d;
+ }
+ .channel-breadcrumb .current {
+ color: #212529;
+ font-weight: 500;
+ }
+ .shortcut-hint {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background: rgba(0,0,0,0.7);
+ color: white;
+ padding: 8px 16px;
+ border-radius: 30px;
+ font-size: 12px;
+ backdrop-filter: blur(4px);
+ z-index: 1000;
+ }
+ .shortcut-hint kbd {
+ background: rgba(255,255,255,0.2);
+ padding: 2px 6px;
+ border-radius: 4px;
+ margin: 0 2px;
+ }
+ .module-card.selected {
+ outline: 2px solid #4d6bfe;
+ outline-offset: 2px;
+ transform: scale(1.02);
+ transition: all 0.2s;
+ }
+ `;
+ document.head.appendChild(style);
+ }
+
+ function createSearchBox() {
+ const container = document.querySelector('.module-grid') || document.querySelector('#module-list') || document.querySelector('.channel-content');
+ if (!container) return;
+
+ const searchContainer = document.createElement('div');
+ searchContainer.className = 'channel-search-container';
+ searchContainer.innerHTML = `
+
+
+ `;
+ container.parentNode.insertBefore(searchContainer, container);
+
+ const searchInput = searchContainer.querySelector('.channel-search-input');
+ const clearBtn = searchContainer.querySelector('.channel-search-clear');
+
+ searchInput.addEventListener('input', function() {
+ filterModules(this.value);
+ });
+
+ clearBtn.addEventListener('click', function() {
+ searchInput.value = '';
+ filterModules('');
+ searchInput.focus();
+ });
+
+ window.__channelSearchInput = searchInput;
+ }
+
+ function filterModules(keyword) {
+ const cards = document.querySelectorAll('.module-card');
+ const container = document.querySelector('.module-grid') || document.querySelector('#module-list');
+ let hasResults = false;
+
+ // 移除所有高亮
+ removeAllHighlights();
+
+ cards.forEach(card => {
+ const text = card.innerText || card.textContent;
+ if (keyword === '') {
+ card.style.display = '';
+ hasResults = true;
+ } else {
+ const lowerText = text.toLowerCase();
+ const lowerKeyword = keyword.toLowerCase();
+ if (lowerText.includes(lowerKeyword)) {
+ card.style.display = '';
+ highlightText(card, keyword);
+ hasResults = true;
+ } else {
+ card.style.display = 'none';
+ }
+ }
+ });
+
+ let noResultsEl = document.querySelector('.no-results');
+ if (!hasResults && keyword !== '') {
+ if (!noResultsEl) {
+ noResultsEl = document.createElement('div');
+ noResultsEl.className = 'no-results';
+ noResultsEl.textContent = '没有找到匹配的模块';
+ container.parentNode.insertBefore(noResultsEl, container.nextSibling);
+ }
+ } else {
+ if (noResultsEl) noResultsEl.remove();
+ }
+ }
+
+ function removeAllHighlights() {
+ document.querySelectorAll('.highlight').forEach(span => {
+ const parent = span.parentNode;
+ parent.replaceChild(document.createTextNode(span.textContent), span);
+ parent.normalize();
+ });
+ }
+
+ function highlightText(card, keyword) {
+ const regex = new RegExp(`(${keyword})`, 'gi');
+ const walk = document.createTreeWalker(card, NodeFilter.SHOW_TEXT, {
+ acceptNode: function(node) {
+ if (node.parentNode.classList && node.parentNode.classList.contains('highlight')) {
+ return NodeFilter.FILTER_REJECT;
+ }
+ return NodeFilter.FILTER_ACCEPT;
+ }
+ }, false);
+
+ const textNodes = [];
+ while (walk.nextNode()) textNodes.push(walk.currentNode);
+
+ textNodes.forEach(node => {
+ const text = node.nodeValue;
+ if (regex.test(text)) {
+ const span = document.createElement('span');
+ span.className = 'highlight';
+ span.innerHTML = text.replace(regex, '$1');
+ node.parentNode.replaceChild(span, node);
+ }
+ });
+ }
+
+ function createBreadcrumb() {
+ const searchContainer = document.querySelector('.channel-search-container');
+ const breadcrumb = document.createElement('div');
+ breadcrumb.className = 'channel-breadcrumb';
+ breadcrumb.id = 'channelBreadcrumb';
+ if (searchContainer) {
+ searchContainer.parentNode.insertBefore(breadcrumb, searchContainer.nextSibling);
+ } else {
+ const container = document.querySelector('.module-grid') || document.querySelector('#module-list');
+ if (container) {
+ container.parentNode.insertBefore(breadcrumb, container);
+ }
+ }
+ }
+
+ function updateBreadcrumb() {
+ const breadcrumb = document.getElementById('channelBreadcrumb');
+ if (!breadcrumb) return;
+ const hash = window.location.hash.slice(1) || '';
+ let moduleName = '频道';
+ if (hash.startsWith('module-')) {
+ const moduleId = hash.replace('module-', '');
+ const moduleNames = {
+ 'M06': '工单管理',
+ 'M08': '数据看板',
+ 'M11': '组件库',
+ 'debug': '调试面板'
+ };
+ moduleName = moduleNames[moduleId] || moduleId;
+ }
+ breadcrumb.innerHTML = `
+ 首页 >
+ 频道 >
+ ${moduleName}
+ `;
+ }
+
+ function createShortcutHint() {
+ const hint = document.createElement('div');
+ hint.className = 'shortcut-hint';
+ hint.innerHTML = `
+ ⌘K 搜索 ·
+ ↑↓ 选择 ·
+ Enter 打开 ·
+ Esc 关闭
+ `;
+ document.body.appendChild(hint);
+ }
+
+ function initShortcuts() {
+ document.addEventListener('keydown', function(e) {
+ if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+ e.preventDefault();
+ const searchInput = window.__channelSearchInput;
+ if (searchInput) searchInput.focus();
+ }
+ if (e.key === 'Escape') {
+ const searchInput = window.__channelSearchInput;
+ if (searchInput && document.activeElement === searchInput) {
+ searchInput.value = '';
+ filterModules('');
+ searchInput.blur();
+ } else if (searchInput && searchInput.value) {
+ searchInput.value = '';
+ filterModules('');
+ }
+ }
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+ const cards = Array.from(document.querySelectorAll('.module-card:not([style*="display: none"])'));
+ if (cards.length === 0) return;
+ e.preventDefault();
+ let selectedIndex = cards.findIndex(card => card.classList.contains('selected'));
+ if (selectedIndex === -1) {
+ selectedIndex = e.key === 'ArrowDown' ? 0 : cards.length - 1;
+ } else {
+ cards[selectedIndex].classList.remove('selected');
+ if (e.key === 'ArrowDown') {
+ selectedIndex = (selectedIndex + 1) % cards.length;
+ } else {
+ selectedIndex = (selectedIndex - 1 + cards.length) % cards.length;
+ }
+ }
+ cards[selectedIndex].classList.add('selected');
+ cards[selectedIndex].scrollIntoView({ block: 'nearest' });
+ }
+ if (e.key === 'Enter') {
+ const selected = document.querySelector('.module-card.selected');
+ if (selected) {
+ selected.click(); // 触发我们绑定的点击事件
+ }
+ }
+ });
+ }
+
+ // ★★★ 核心修复：为所有卡片绑定点击切换模块 ★★★
+ function bindCardClicks() {
+ const grid = document.querySelector('.module-grid') || document.querySelector('#module-list') || document.body;
+ grid.addEventListener('click', function(e) {
+ const card = e.target.closest('.module-card');
+ if (!card) return;
+
+ // 阻止可能冲突的其他事件（可选）
+ e.preventDefault();
+
+ // 根据卡片文字判断是哪个模块
+ const text = card.innerText || card.textContent;
+ let moduleId = null;
+ if (text.includes('工单管理')) moduleId = 'M06';
+ else if (text.includes('数据统计')) moduleId = 'M08';
+ else if (text.includes('组件库')) moduleId = 'M11';
+ else if (text.includes('调试面板')) moduleId = 'debug';
+ // 如果识别不到，尝试从其他属性获取（比如 data-module-id）
+ else if (card.dataset.moduleId) moduleId = card.dataset.moduleId;
+
+ if (moduleId) {
+ // 改变 hash，触发路由更新
+ window.location.hash = `module-${moduleId}`;
+ }
+ });
+ }
+})();
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-favorites.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-favorites.js
new file mode 100644
index 0000000..4208f65
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-favorites.js
@@ -0,0 +1,271 @@
+// 频道收藏与拖拽排序管理
+window.ChannelFavorites = {
+ // 当前正在拖拽的元素
+ draggingElement: null,
+
+ // 初始化
+ init: function() {
+ console.log('[favorites] 初始化');
+ this.bindEvents();
+ this.renderFavorites();
+ },
+
+ // 绑定事件
+ bindEvents: function() {
+ // 使用事件委托监听星星点击
+ document.addEventListener('click', (e) => {
+ const star = e.target.closest('.favorite-star');
+ if (star) {
+ e.preventDefault();
+ const card = star.closest('.module-card');
+ if (card) {
+ const moduleId = card.dataset.module;
+ if (moduleId) {
+ this.toggleFavorite(moduleId, star);
+ }
+ }
+ }
+ });
+
+ // 监听偏好变化，重新渲染收藏状态
+ if (window.EventBus) {
+ EventBus.on('preferences:changed', (data) => {
+ if (data.key === 'favorites' || data.full) {
+ this.updateAllStars();
+ }
+ });
+ }
+ },
+
+ // 切换收藏状态
+ toggleFavorite: function(moduleId, starElement) {
+ if (!window.ChannelPreferences) return;
+
+ const isNowFavorite = ChannelPreferences.toggleFavorite(moduleId);
+
+ // 更新星星样式
+ if (starElement) {
+ if (isNowFavorite) {
+ starElement.classList.add('active');
+ starElement.textContent = '★';
+ } else {
+ starElement.classList.remove('active');
+ starElement.textContent = '☆';
+ }
+ }
+
+ // 触发布局更新（收藏置顶）
+ this.updateFavoritesOrder();
+
+ // 发送事件
+ if (window.EventBus) {
+ EventBus.emit('favorite:toggled', {
+ module: moduleId,
+ favorite: isNowFavorite
+ });
+ }
+ },
+
+ // 更新所有星星的显示状态
+ updateAllStars: function() {
+ const favorites = window.ChannelPreferences ? ChannelPreferences.getFavorites() : [];
+ document.querySelectorAll('.favorite-star').forEach(star => {
+ const card = star.closest('.module-card');
+ if (card) {
+ const moduleId = card.dataset.module;
+ if (moduleId) {
+ if (favorites.includes(moduleId)) {
+ star.classList.add('active');
+ star.textContent = '★';
+ } else {
+ star.classList.remove('active');
+ star.textContent = '☆';
+ }
+ }
+ }
+ });
+ },
+
+ // 根据收藏状态重新排序（收藏置顶）
+ updateFavoritesOrder: function() {
+ const container = document.querySelector('.channel-content');
+ if (!container) return;
+
+ const cards = Array.from(container.querySelectorAll('.module-card'));
+ const favorites = window.ChannelPreferences ? ChannelPreferences.getFavorites() : [];
+
+ // 按收藏状态和原有顺序排序
+ cards.sort((a, b) => {
+ const aId = a.dataset.module;
+ const bId = b.dataset.module;
+ const aFav = favorites.includes(aId);
+ const bFav = favorites.includes(bId);
+
+ if (aFav && !bFav) return -1;
+ if (!aFav && bFav) return 1;
+
+ // 如果都是收藏或都不是收藏，保持原有顺序
+ const aOrder = cards.indexOf(a);
+ const bOrder = cards.indexOf(b);
+ return aOrder - bOrder;
+ });
+
+ // 重新插入到容器中
+ cards.forEach(card => container.appendChild(card));
+
+ // 保存排序到偏好设置
+ const moduleOrder = cards.map(card => card.dataset.module);
+ if (window.ChannelPreferences) {
+ ChannelPreferences.setModuleOrder(moduleOrder);
+ }
+ },
+
+ // 渲染收藏状态（初始化时调用）
+ renderFavorites: function() {
+ this.updateAllStars();
+ },
+
+ // ===== 拖拽排序相关 =====
+
+ // 初始化拖拽
+ initDragAndDrop: function() {
+ console.log('[favorites] 初始化拖拽排序');
+
+ const container = document.querySelector('.channel-content');
+ if (!container) return;
+
+ // 为每个卡片添加拖拽手柄
+ container.querySelectorAll('.module-card').forEach(card => {
+ // 检查是否已有拖拽手柄
+ if (!card.querySelector('.drag-handle')) {
+ const header = card.querySelector('.module-card-header');
+ if (header) {
+ const handle = document.createElement('span');
+ handle.className = 'drag-handle';
+ handle.innerHTML = '⋮⋮';
+ handle.setAttribute('draggable', 'false');
+ header.insertBefore(handle, header.firstChild);
+ }
+ }
+
+ // 设置 draggable
+ card.setAttribute('draggable', 'true');
+
+ // 移除旧监听器，添加新监听器
+ card.removeEventListener('dragstart', this.handleDragStart);
+ card.removeEventListener('dragend', this.handleDragEnd);
+ card.removeEventListener('dragover', this.handleDragOver);
+ card.removeEventListener('dragenter', this.handleDragEnter);
+ card.removeEventListener('dragleave', this.handleDragLeave);
+ card.removeEventListener('drop', this.handleDrop);
+
+ card.addEventListener('dragstart', this.handleDragStart.bind(this));
+ card.addEventListener('dragend', this.handleDragEnd.bind(this));
+ card.addEventListener('dragover', this.handleDragOver);
+ card.addEventListener('dragenter', this.handleDragEnter);
+ card.addEventListener('dragleave', this.handleDragLeave);
+ card.addEventListener('drop', this.handleDrop.bind(this));
+ });
+ },
+
+ // 拖拽开始
+ handleDragStart: function(e) {
+ this.draggingElement = e.target.closest('.module-card');
+ if (!this.draggingElement) return;
+
+ e.dataTransfer.setData('text/plain', this.draggingElement.dataset.module);
+ e.dataTransfer.effectAllowed = 'move';
+
+ // 添加拖拽中的样式
+ setTimeout(() => {
+ this.draggingElement.classList.add('dragging');
+ }, 0);
+ },
+
+ // 拖拽结束
+ handleDragEnd: function(e) {
+ const card = e.target.closest('.module-card');
+ if (card) {
+ card.classList.remove('dragging');
+ }
+
+ // 移除所有高亮
+ document.querySelectorAll('.module-card.drop-target').forEach(el => {
+ el.classList.remove('drop-target');
+ });
+
+ this.draggingElement = null;
+ },
+
+ // 拖拽经过（必须阻止默认事件才能成为放置目标）
+ handleDragOver: function(e) {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ },
+
+ // 拖拽进入
+ handleDragEnter: function(e) {
+ const card = e.target.closest('.module-card');
+ if (card && card !== this.draggingElement) {
+ card.classList.add('drop-target');
+ }
+ },
+
+ // 拖拽离开
+ handleDragLeave: function(e) {
+ const card = e.target.closest('.module-card');
+ if (card) {
+ card.classList.remove('drop-target');
+ }
+ },
+
+ // 放置
+ handleDrop: function(e) {
+ e.preventDefault();
+
+ const targetCard = e.target.closest('.module-card');
+ if (!targetCard || !this.draggingElement || targetCard === this.draggingElement) {
+ return;
+ }
+
+ // 移除高亮
+ targetCard.classList.remove('drop-target');
+
+ // 获取所有卡片
+ const container = document.querySelector('.channel-content');
+ const cards = Array.from(container.querySelectorAll('.module-card'));
+
+ const fromIndex = cards.indexOf(this.draggingElement);
+ const toIndex = cards.indexOf(targetCard);
+
+ if (fromIndex === -1 || toIndex === -1) return;
+
+ // 重新排序
+ if (window.ChannelPreferences) {
+ ChannelPreferences.reorderModules(fromIndex, toIndex);
+ }
+
+ // 移动 DOM 元素
+ if (fromIndex < toIndex) {
+ targetCard.insertAdjacentElement('afterend', this.draggingElement);
+ } else {
+ targetCard.insertAdjacentElement('beforebegin', this.draggingElement);
+ }
+
+ // 触发事件
+ if (window.EventBus) {
+ EventBus.emit('favorites:reordered', {
+ from: fromIndex,
+ to: toIndex,
+ module: this.draggingElement.dataset.module
+ });
+ }
+ },
+
+ // 刷新拖拽功能（在布局变化后调用）
+ refreshDragAndDrop: function() {
+ this.initDragAndDrop();
+ }
+};
+
+console.log('[favorites] 已加载');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-layout.css b/agents/zhuyuan-dev-agent/modules/m-channel/channel-layout.css
new file mode 100644
index 0000000..31c39c3
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-layout.css
@@ -0,0 +1,145 @@
+/* 频道布局样式 - 三种布局模式 */
+
+/* 基础卡片样式（所有布局共用） */
+.module-card {
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ transition: all 0.3s ease;
+ overflow: hidden;
+ position: relative;
+}
+
+.module-card:hover {
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ transform: translateY(-2px);
+}
+
+/* 卡片头部 */
+.module-card-header {
+ padding: 16px;
+ border-bottom: 1px solid #eee;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.module-card-title {
+ font-size: 18px;
+ font-weight: 600;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+/* 收藏星星 */
+.favorite-star {
+ font-size: 20px;
+ color: #ccc;
+ cursor: pointer;
+ transition: color 0.2s;
+ user-select: none;
+}
+
+.favorite-star.active {
+ color: #fbbf24;
+}
+
+.favorite-star:hover {
+ transform: scale(1.1);
+}
+
+/* 卡片内容区 */
+.module-card-content {
+ padding: 16px;
+ min-height: 100px;
+}
+
+/* 拖拽把手 */
+.drag-handle {
+ font-size: 20px;
+ color: #999;
+ cursor: grab;
+ user-select: none;
+ margin-right: 8px;
+}
+
+.drag-handle:active {
+ cursor: grabbing;
+}
+
+/* ===== 布局1：网格模式（默认） ===== */
+.layout-grid .channel-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ gap: 24px;
+ padding: 24px;
+}
+
+.layout-grid .module-card {
+ height: fit-content;
+}
+
+/* ===== 布局2：列表模式（一行一个） ===== */
+.layout-list .channel-content {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ padding: 24px;
+}
+
+.layout-list .module-card {
+ width: 100%;
+}
+
+.layout-list .module-card-header {
+ padding: 12px 16px;
+}
+
+.layout-list .module-card-content {
+ padding: 12px 16px;
+}
+
+/* ===== 布局3：紧凑模式（小卡片密排） ===== */
+.layout-compact .channel-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+ gap: 12px;
+ padding: 16px;
+}
+
+.layout-compact .module-card {
+ font-size: 14px;
+}
+
+.layout-compact .module-card-header {
+ padding: 10px 12px;
+}
+
+.layout-compact .module-card-title {
+ font-size: 16px;
+}
+
+.layout-compact .module-card-content {
+ padding: 10px 12px;
+ min-height: 80px;
+}
+
+/* 布局切换动画 */
+.channel-content {
+ transition: all 0.3s ease-in-out;
+}
+
+/* 拖拽中的样式 */
+.module-card.dragging {
+ opacity: 0.6;
+ transform: scale(0.98);
+ box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+}
+
+/* 拖拽放置区高亮 */
+.module-card.drop-target {
+ border: 2px dashed #3b82f6;
+ background: #f0f9ff;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-notifications.css b/agents/zhuyuan-dev-agent/modules/m-channel/channel-notifications.css
new file mode 100644
index 0000000..5905e8d
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-notifications.css
@@ -0,0 +1,200 @@
+/* 频道通知系统样式 - 环节7 */
+:root {
+ --update-badge-bg: #2196f3;
+ --unread-dot-bg: #f44336;
+ --notification-panel-bg: #ffffff;
+ --notification-panel-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ --notification-hover-bg: #f5f5f5;
+}
+
+/* 更新标签（蓝色） */
+.update-badge {
+ display: inline-block;
+ background-color: var(--update-badge-bg);
+ color: white;
+ font-size: 12px;
+ font-weight: 500;
+ padding: 2px 8px;
+ border-radius: 12px;
+ margin-top: 8px;
+ align-self: flex-start;
+}
+
+/* 未读小红点（带数字） */
+.unread-dot {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ min-width: 18px;
+ height: 18px;
+ background-color: var(--unread-dot-bg);
+ color: white;
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 4px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ z-index: 10;
+}
+
+/* 铃铛图标容器 */
+.bell-container {
+ position: relative;
+ display: inline-block;
+ margin-right: 16px;
+ cursor: pointer;
+}
+
+.bell-icon {
+ font-size: 24px;
+ color: #555;
+ transition: color 0.2s;
+}
+
+.bell-icon:hover {
+ color: #000;
+}
+
+/* 铃铛上的数字气泡 */
+.bell-badge {
+ position: absolute;
+ top: -4px;
+ right: -6px;
+ min-width: 18px;
+ height: 18px;
+ background-color: var(--unread-dot-bg);
+ color: white;
+ font-size: 12px;
+ font-weight: bold;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 4px;
+ z-index: 20;
+}
+
+/* 侧滑通知面板 */
+.notification-panel {
+ position: fixed;
+ top: 0;
+ right: -400px;
+ width: 360px;
+ height: 100vh;
+ background: var(--notification-panel-bg);
+ box-shadow: var(--notification-panel-shadow);
+ transition: right 0.3s ease;
+ z-index: 1000;
+ display: flex;
+ flex-direction: column;
+ border-left: 1px solid #e0e0e0;
+}
+
+.notification-panel.open {
+ right: 0;
+}
+
+.panel-header {
+ padding: 20px;
+ border-bottom: 1px solid #e0e0e0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: 600;
+}
+
+.panel-header button {
+ background: none;
+ border: none;
+ color: #2196f3;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.panel-header button:hover {
+ text-decoration: underline;
+}
+
+.notification-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+
+.notification-item {
+ padding: 16px 20px;
+ border-bottom: 1px solid #f0f0f0;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.notification-item:hover {
+ background: var(--notification-hover-bg);
+}
+
+.notification-item.read {
+ opacity: 0.6;
+}
+
+.notification-time {
+ font-size: 12px;
+ color: #999;
+ margin-bottom: 4px;
+}
+
+.notification-module {
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+
+.notification-summary {
+ font-size: 14px;
+ color: #333;
+}
+
+.empty-state {
+ padding: 40px 20px;
+ text-align: center;
+ color: #999;
+ font-size: 14px;
+}
+
+/* 遮罩层 */
+.panel-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0,0,0,0.3);
+ z-index: 999;
+ display: none;
+}
+
+.panel-overlay.show {
+ display: block;
+}
+
+/* 让模块卡片成为相对定位容器（用于小红点定位） */
+.module-card {
+ position: relative !important;
+}
+
+/* 强制修复高亮点击问题 */
+.search-highlight,
+.highlight,
+[class*="highlight"] {
+ pointer-events: none !important;
+}
+
+/* 确保卡片本身可点击 */
+.module-card,
+[class*="module-card"] {
+ cursor: pointer;
+ pointer-events: auto !important;
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-notifications.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-notifications.js
new file mode 100644
index 0000000..a14c781
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-notifications.js
@@ -0,0 +1,365 @@
+/**
+ * 频道通知系统 - 环节7 (晨星陪伴版)
+ * 功能：模块更新提醒、未读小红点、通知面板、高亮点击修复
+ * 修改：通过卡片文字内容匹配模块ID（解决moduleId undefined问题）
+ */
+
+(function() {
+ // ========== 初始化模拟数据 ==========
+ const STORAGE_KEY = 'channel_notifications';
+
+ // 默认模拟数据（基于已完成模块 M06, M08, M11, 以及当前频道模块）
+ const DEFAULT_UPDATES = {
+ 'M06': {
+ hasUpdate: true,
+ count: 2,
+ updates: [
+ { time: '10:30', summary: '修复了拖拽排序的bug' },
+ { time: '昨天', summary: '新增统计面板' }
+ ]
+ },
+ 'M08': {
+ hasUpdate: true,
+ count: 1,
+ updates: [
+ { time: '昨天', summary: '优化了模块加载性能' }
+ ]
+ },
+ 'M11': {
+ hasUpdate: true,
+ count: 3,
+ updates: [
+ { time: '15:20', summary: '新增键盘快捷键' },
+ { time: '昨天', summary: '修复焦点管理' },
+ { time: '3月10日', summary: '模块生命周期完善' }
+ ]
+ },
+ 'channel': {
+ hasUpdate: true,
+ count: 1,
+ updates: [
+ { time: '现在', summary: '通知系统上线啦！' }
+ ]
+ }
+ };
+
+ // 加载或初始化数据
+ let notificationData = JSON.parse(localStorage.getItem(STORAGE_KEY));
+ if (!notificationData) {
+ notificationData = DEFAULT_UPDATES;
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(notificationData));
+ }
+
+ // ========== 工具函数：从卡片文字猜测模块ID ==========
+ function guessModuleIdFromCard(card) {
+ // 尝试找卡片里的标题文字
+ const titleElem = card.querySelector('h3, .module-title, .card-title, .module-name');
+ if (titleElem) {
+ const text = titleElem.textContent.trim();
+ // 简单映射：如果文字包含“工单” -> M06
+ if (text.includes('工单')) return 'M06';
+ if (text.includes('数据统计')) return 'M08';
+ if (text.includes('组件库')) return 'M11';
+ if (text.includes('调试面板')) return 'M11'; // 暂时用 M11
+ }
+
+ // 后备：用卡片内所有文字尝试匹配
+ const fullText = card.textContent;
+ if (fullText.includes('工单')) return 'M06';
+ if (fullText.includes('数据统计')) return 'M08';
+ if (fullText.includes('组件库')) return 'M11';
+
+ return null; // 实在猜不到就返回 null
+ }
+
+ function getModuleCards() {
+ return document.querySelectorAll('.module-card');
+ }
+
+ // ========== 更新标签渲染（带日志） ==========
+ function renderUpdateBadges() {
+ console.log('🟦 renderUpdateBadges 开始执行');
+ const cards = document.querySelectorAll('.module-card');
+ console.log('找到卡片数量:', cards.length);
+
+ cards.forEach(card => {
+ // 先尝试原有方法，失败则用猜测
+ let moduleId = card.dataset.moduleId || card.id || card.querySelector('.module-name')?.textContent.trim();
+ if (!moduleId) {
+ moduleId = guessModuleIdFromCard(card);
+ }
+ console.log('卡片最终 moduleId:', moduleId);
+
+ // 移除旧的标签
+ const oldBadge = card.querySelector('.update-badge');
+ if (oldBadge) oldBadge.remove();
+
+ const modData = moduleId ? notificationData[moduleId] : null;
+ console.log('模块数据:', moduleId, modData);
+
+ if (modData && modData.hasUpdate) {
+ console.log('✅ 应该添加标签的模块:', moduleId);
+ const badge = document.createElement('span');
+ badge.className = 'update-badge';
+ badge.textContent = '有更新';
+ // 内联样式保证可见
+ badge.style.backgroundColor = '#2196f3';
+ badge.style.color = 'white';
+ badge.style.padding = '2px 8px';
+ badge.style.borderRadius = '12px';
+ badge.style.fontSize = '12px';
+ badge.style.display = 'inline-block';
+ badge.style.marginTop = '8px';
+ // 直接追加到卡片末尾
+ card.appendChild(badge);
+ console.log('✅ 标签已追加到卡片', moduleId);
+ } else {
+ console.log('❌ 不需要添加标签的模块:', moduleId);
+ }
+ });
+ console.log('🟦 renderUpdateBadges 执行完毕');
+ }
+
+ // ========== 小红点渲染 ==========
+ function renderUnreadDots() {
+ const cards = getModuleCards();
+ cards.forEach(card => {
+ let moduleId = card.dataset.moduleId || card.id || card.querySelector('.module-name')?.textContent.trim();
+ if (!moduleId) {
+ moduleId = guessModuleIdFromCard(card);
+ }
+ if (!moduleId) return;
+
+ const oldDot = card.querySelector('.unread-dot');
+ if (oldDot) oldDot.remove();
+
+ const modData = notificationData[moduleId];
+ if (modData && modData.hasUpdate && modData.count > 0) {
+ const dot = document.createElement('span');
+ dot.className = 'unread-dot';
+ dot.textContent = modData.count > 9 ? '9+' : modData.count;
+ card.appendChild(dot);
+ }
+ });
+ }
+
+ // ========== 标记模块已读 ==========
+ function markModuleAsRead(moduleId) {
+ if (notificationData[moduleId]) {
+ notificationData[moduleId].hasUpdate = false;
+ notificationData[moduleId].count = 0;
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(notificationData));
+ renderUpdateBadges();
+ renderUnreadDots();
+ updateBellBadge();
+ renderNotificationPanel();
+ }
+ }
+
+ // ========== 铃铛相关 ==========
+ let bellContainer, panel, overlay;
+ let isPanelOpen = false;
+
+ function createBell() {
+ const header = document.querySelector('.channel-header') || document.querySelector('header') || document.body;
+ bellContainer = document.createElement('div');
+ bellContainer.className = 'bell-container';
+ bellContainer.innerHTML = `
+ 🔔
+ 0
+ `;
+ const title = header.querySelector('h1, h2');
+ if (title) {
+ title.insertAdjacentElement('afterend', bellContainer);
+ } else {
+ header.appendChild(bellContainer);
+ }
+
+ panel = document.createElement('div');
+ panel.className = 'notification-panel';
+ panel.innerHTML = `
+
+
+ `;
+ overlay = document.createElement('div');
+ overlay.className = 'panel-overlay';
+ document.body.appendChild(panel);
+ document.body.appendChild(overlay);
+
+ bellContainer.addEventListener('click', togglePanel);
+ overlay.addEventListener('click', closePanel);
+ panel.querySelector('.mark-all-read').addEventListener('click', markAllRead);
+ }
+
+ function updateBellBadge() {
+ const totalUnread = Object.values(notificationData).reduce((acc, mod) => acc + (mod.count || 0), 0);
+ const badge = bellContainer?.querySelector('.bell-badge');
+ if (badge) {
+ if (totalUnread > 0) {
+ badge.style.display = 'flex';
+ badge.textContent = totalUnread > 9 ? '9+' : totalUnread;
+ } else {
+ badge.style.display = 'none';
+ }
+ }
+ }
+
+ function togglePanel(e) {
+ e.stopPropagation();
+ isPanelOpen ? closePanel() : openPanel();
+ }
+
+ function openPanel() {
+ isPanelOpen = true;
+ panel.classList.add('open');
+ overlay.classList.add('show');
+ renderNotificationPanel();
+ }
+
+ function closePanel() {
+ isPanelOpen = false;
+ panel.classList.remove('open');
+ overlay.classList.remove('show');
+ }
+
+ function renderNotificationPanel() {
+ const list = panel.querySelector('.notification-list');
+ if (!list) return;
+
+ let items = [];
+ for (const [moduleId, modData] of Object.entries(notificationData)) {
+ if (modData.updates && modData.updates.length > 0) {
+ modData.updates.forEach((update) => {
+ items.push({
+ moduleId,
+ time: update.time,
+ summary: update.summary,
+ read: !modData.hasUpdate
+ });
+ });
+ }
+ }
+
+ if (items.length === 0) {
+ list.innerHTML = '暂无新通知';
+ return;
+ }
+
+ items.sort((a, b) => (a.time > b.time ? -1 : 1));
+
+ list.innerHTML = items.map(item => `
+
+ ${item.time}
+ ${item.moduleId}
+ ${item.summary}
+
+ `).join('');
+
+ list.querySelectorAll('.notification-item').forEach(item => {
+ item.addEventListener('click', (e) => {
+ const moduleId = item.dataset.module;
+ const card = findCardByModuleId(moduleId);
+ if (card) {
+ card.click();
+ }
+ markModuleAsRead(moduleId);
+ closePanel();
+ });
+ });
+ }
+
+ function findCardByModuleId(moduleId) {
+ const cards = getModuleCards();
+ for (let card of cards) {
+ let id = card.dataset.moduleId || card.id || card.querySelector('.module-name')?.textContent.trim();
+ if (!id) id = guessModuleIdFromCard(card);
+ if (id === moduleId) return card;
+ }
+ return null;
+ }
+
+ function markAllRead() {
+ for (let moduleId in notificationData) {
+ notificationData[moduleId].hasUpdate = false;
+ notificationData[moduleId].count = 0;
+ }
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(notificationData));
+ renderUpdateBadges();
+ renderUnreadDots();
+ updateBellBadge();
+ renderNotificationPanel();
+ }
+
+ function fixHighlightClick() {
+ const container = document.querySelector('.modules-grid') || document.body;
+ container.addEventListener('click', (e) => {
+ const card = e.target.closest('.module-card');
+ if (card) {
+ // 不做额外处理，只是确保事件冒泡
+ }
+ }, true);
+
+ const style = document.createElement('style');
+ style.textContent = `
+ .search-highlight {
+ pointer-events: none !important;
+ }
+ .module-card {
+ cursor: pointer;
+ }
+ `;
+ document.head.appendChild(style);
+ }
+
+ function init() {
+ if (!document.querySelector('link[href*="channel-notifications.css"]')) {
+ const link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = 'channel-notifications.css';
+ document.head.appendChild(link);
+ }
+
+ renderUpdateBadges();
+ renderUnreadDots();
+
+ createBell();
+ updateBellBadge();
+
+ fixHighlightClick();
+
+ document.addEventListener('click', (e) => {
+ const card = e.target.closest('.module-card');
+ if (card) {
+ let moduleId = card.dataset.moduleId || card.id || card.querySelector('.module-name')?.textContent.trim();
+ if (!moduleId) moduleId = guessModuleIdFromCard(card);
+ if (moduleId) {
+ setTimeout(() => markModuleAsRead(moduleId), 100);
+ }
+ }
+ });
+
+ window.addEventListener('modulesRendered', () => {
+ renderUpdateBadges();
+ renderUnreadDots();
+ });
+
+ let lastCardCount = 0;
+ setInterval(() => {
+ const cards = getModuleCards();
+ if (cards.length !== lastCardCount) {
+ lastCardCount = cards.length;
+ renderUpdateBadges();
+ renderUnreadDots();
+ }
+ }, 2000);
+ }
+
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
+})();
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-preferences.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-preferences.js
new file mode 100644
index 0000000..a4ee89c
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-preferences.js
@@ -0,0 +1,194 @@
+// 频道偏好管理 - 记住用户的装修设置
+window.ChannelPreferences = {
+ STORAGE_KEY: 'hololake_channel_preferences',
+
+ // 默认配置
+ defaults: {
+ layout: 'grid', // grid, list, compact
+ theme: 'default', // default, ocean, forest, sunset, lavender
+ favorites: [], // 收藏的模块ID列表
+ moduleOrder: [], // 模块排序顺序（默认按ID）
+ stats: {} // 使用统计
+ },
+
+ // 当前配置
+ config: null,
+
+ // 初始化（加载配置）
+ init: function() {
+ console.log('[preferences] 初始化');
+ this.load();
+ return this.config;
+ },
+
+ // 加载配置
+ load: function() {
+ const saved = localStorage.getItem(this.STORAGE_KEY);
+ if (saved) {
+ try {
+ this.config = JSON.parse(saved);
+ console.log('[preferences] 加载配置:', this.config);
+ } catch (e) {
+ console.error('[preferences] 解析失败，使用默认配置', e);
+ this.config = { ...this.defaults };
+ }
+ } else {
+ console.log('[preferences] 无保存配置，使用默认');
+ this.config = { ...this.defaults };
+ }
+ return this.config;
+ },
+
+ // 保存配置
+ save: function() {
+ if (!this.config) return;
+ localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.config));
+ console.log('[preferences] 保存配置:', this.config);
+ },
+
+ // 获取指定键的值
+ get: function(key) {
+ if (!this.config) this.load();
+ return this.config[key];
+ },
+
+ // 设置指定键的值（自动保存）
+ set: function(key, value) {
+ if (!this.config) this.load();
+ this.config[key] = value;
+ this.save();
+
+ // 触发事件总线通知
+ if (window.EventBus) {
+ EventBus.emit('preferences:changed', { key, value });
+ }
+ },
+
+ // 更新整个配置（合并）
+ update: function(newConfig) {
+ if (!this.config) this.load();
+ this.config = { ...this.config, ...newConfig };
+ this.save();
+ if (window.EventBus) {
+ EventBus.emit('preferences:changed', { full: this.config });
+ }
+ },
+
+ // 恢复默认设置
+ reset: function() {
+ this.config = { ...this.defaults };
+ this.save();
+ if (window.EventBus) {
+ EventBus.emit('preferences:reset', this.config);
+ }
+ console.log('[preferences] 恢复默认');
+ },
+
+ // 记录模块使用（用于统计）
+ recordUsage: function(moduleId) {
+ if (!this.config) this.load();
+ if (!this.config.stats) this.config.stats = {};
+ if (!this.config.stats[moduleId]) {
+ this.config.stats[moduleId] = {
+ count: 0,
+ lastUsed: null,
+ totalTime: 0
+ };
+ }
+ this.config.stats[moduleId].count++;
+ this.config.stats[moduleId].lastUsed = Date.now();
+ this.save();
+
+ // 开始计时（将在模块卸载时记录时长）
+ this.startTiming(moduleId);
+ },
+
+ // 计时相关
+ timing: {},
+ startTiming: function(moduleId) {
+ this.timing[moduleId] = Date.now();
+ },
+ stopTiming: function(moduleId) {
+ if (this.timing[moduleId]) {
+ const duration = (Date.now() - this.timing[moduleId]) / 1000; // 秒
+ if (this.config.stats[moduleId]) {
+ this.config.stats[moduleId].totalTime += duration;
+ this.save();
+ }
+ delete this.timing[moduleId];
+ }
+ },
+
+ // 获取统计报告
+ getStats: function() {
+ if (!this.config) this.load();
+ return this.config.stats || {};
+ },
+
+ // 获取收藏列表
+ getFavorites: function() {
+ return this.get('favorites') || [];
+ },
+
+ // 切换收藏状态
+ toggleFavorite: function(moduleId) {
+ let favorites = this.get('favorites') || [];
+ if (favorites.includes(moduleId)) {
+ favorites = favorites.filter(id => id !== moduleId);
+ } else {
+ favorites.push(moduleId);
+ }
+ this.set('favorites', favorites);
+ return favorites.includes(moduleId);
+ },
+
+ // 获取布局
+ getLayout: function() {
+ return this.get('layout') || 'grid';
+ },
+
+ // 设置布局
+ setLayout: function(layout) {
+ this.set('layout', layout);
+ },
+
+ // 获取主题
+ getTheme: function() {
+ return this.get('theme') || 'default';
+ },
+
+ // 设置主题
+ setTheme: function(theme) {
+ this.set('theme', theme);
+ },
+
+ // 获取模块排序
+ getModuleOrder: function() {
+ return this.get('moduleOrder') || [];
+ },
+
+ // 设置模块排序
+ setModuleOrder: function(order) {
+ this.set('moduleOrder', order);
+ },
+
+ // 重新排序（拖拽后调用）
+ reorderModules: function(fromIndex, toIndex) {
+ const order = this.getModuleOrder();
+ if (order.length === 0) {
+ // 如果还没有自定义顺序，则基于当前模块列表生成
+ const modules = window.ModuleRegistry ? ModuleRegistry.list() : [];
+ // 排除非显示模块（如调试面板）
+ const displayModules = modules.filter(m => ['m06','m08','m11','home','debug'].includes(m));
+ this.setModuleOrder(displayModules);
+ }
+ // 重新加载最新顺序
+ const currentOrder = this.getModuleOrder();
+ if (fromIndex < 0 || fromIndex >= currentOrder.length || toIndex < 0 || toIndex >= currentOrder.length) return;
+ const [moved] = currentOrder.splice(fromIndex, 1);
+ currentOrder.splice(toIndex, 0, moved);
+ this.setModuleOrder(currentOrder);
+ }
+};
+
+console.log('[preferences] 已加载');
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-router.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-router.js
new file mode 100644
index 0000000..0896208
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-router.js
@@ -0,0 +1,243 @@
+// 频道路由（支持真实模块适配器 + 卡片列表首页 + 数据采集钩子）
+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');
+ }
+ });
+ });
+ }
+
+ // 页面关闭时结束计时
+ window.addEventListener('beforeunload', function() {
+ if (typeof ChannelAnalytics !== 'undefined') {
+ ChannelAnalytics.endSession();
+ }
+ });
+ },
+
+ 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;
+
+ // 数据采集钩子：开始加载
+ if (typeof ChannelAnalytics !== 'undefined') {
+ ChannelAnalytics.markLoadStart();
+ if (channel !== 'home' && channel !== 'debug' && channel !== 'dashboard' && channel !== 'settings') {
+ ChannelAnalytics.recordVisit(channel);
+ }
+ }
+
+ // 如果是真实模块（m06/m08/m11）
+ if (channel === 'm06' || channel === 'm08' || channel === 'm11') {
+ if (window.ModuleAdapter) {
+ ModuleAdapter.loadModule(channel, 'channel-content');
+ // 模块加载完成后记录加载时间
+ setTimeout(() => {
+ if (typeof ChannelAnalytics !== 'undefined') {
+ ChannelAnalytics.markLoadEnd(channel);
+ }
+ }, 100);
+ } else {
+ this.contentEl.innerHTML = '适配器未加载
';
+ }
+ ModuleLifecycle.onLoad(channel);
+ return;
+ }
+
+ // 数据面板路由（环节8新增）
+ if (channel === 'dashboard') {
+ fetch('views/channel-dashboard.html')
+ .then(response => response.text())
+ .then(html => {
+ this.contentEl.innerHTML = html;
+ // 渲染图表
+ if (typeof ChannelDashboard !== 'undefined') {
+ ChannelDashboard.render();
+ }
+ ModuleLifecycle.onLoad('dashboard');
+ // 记录加载完成
+ if (typeof ChannelAnalytics !== 'undefined') {
+ ChannelAnalytics.markLoadEnd('dashboard');
+ }
+ })
+ .catch(err => {
+ this.contentEl.innerHTML = '数据面板加载失败
';
+ console.error(err);
+ });
+ return;
+ }
+
+ // 设置中心路由（环节9新增）
+ if (channel === 'settings') {
+ fetch('views/channel-settings.html')
+ .then(r => r.text())
+ .then(html => {
+ this.contentEl.innerHTML = html;
+ if (typeof SettingsUI !== 'undefined') {
+ SettingsUI.init();
+ }
+ // 记录加载完成
+ if (typeof ChannelAnalytics !== 'undefined') {
+ ChannelAnalytics.markLoadEnd('settings');
+ }
+ })
+ .catch(err => {
+ this.contentEl.innerHTML = '设置面板加载失败
';
+ console.error(err);
+ });
+ return;
+ }
+
+ // 内置频道
+ if (channel === 'home') {
+ this.renderModuleCards();
+ } else if (channel === 'debug') {
+ this.loadDebugPanel();
+ } else {
+ this.contentEl.innerHTML = '未知频道
';
+ }
+
+ // 对于内置频道也记录加载完成
+ if (typeof ChannelAnalytics !== 'undefined' && channel !== 'dashboard' && channel !== 'settings') {
+ ChannelAnalytics.markLoadEnd(channel);
+ }
+ },
+
+ // 渲染所有模块卡片（用于首页）
+ renderModuleCards: function() {
+ const modules = [
+ { id: 'm06', name: '工单管理', icon: '📋', desc: '管理任务和工单' },
+ { id: 'm08', name: '数据统计', icon: '📊', desc: '查看数据统计和报表' },
+ { id: 'm11', name: '组件库', icon: '🧩', desc: '系统组件展示' },
+ { id: 'debug', name: '调试面板', icon: '🐞', desc: '查看事件和模块状态' },
+ { id: 'dashboard', name: '数据面板', icon: '📈', desc: '查看使用统计和性能' }
+ ];
+
+ let html = '';
+ modules.forEach(mod => {
+ const isFavorite = window.ChannelPreferences ?
+ ChannelPreferences.getFavorites().includes(mod.id) : false;
+ html += `
+
+ `;
+ });
+ html += '
调试面板加载失败
';
+ });
+ },
+
+ 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('状态已清除，刷新页面生效');
+ });
+ }
+ },
+
+ getVisitedChannels: function() {
+ const visited = [];
+ document.querySelectorAll('.channel-btn.visited').forEach(btn => {
+ visited.push(btn.dataset.channel);
+ });
+ return visited;
+ }
+};
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-router.js.bakcat b/agents/zhuyuan-dev-agent/modules/m-channel/channel-router.js.bakcat
new file mode 100644
index 0000000..e69de29
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings-ui.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings-ui.js
new file mode 100644
index 0000000..3d07af7
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings-ui.js
@@ -0,0 +1,123 @@
+/**
+ * channel-settings-ui.js
+ * 设置面板UI控制器·环节9
+ */
+var SettingsUI = (function() {
+ // 渲染主题卡片
+ function renderThemeCards() {
+ var container = document.getElementById('themeCards');
+ if (!container) return;
+ var current = ChannelSettings.get('theme');
+ var themes = ChannelSettings.THEMES;
+ var html = '';
+ Object.keys(themes).forEach(function(id) {
+ var t = themes[id];
+ var active = (id === current) ? 'active' : '';
+ html += '';
+ });
+ container.innerHTML = html;
+ }
+
+ // 同步UI状态
+ function syncUI() {
+ var s = ChannelSettings.get();
+
+ // 下拉框
+ var fontSize = document.getElementById('settingFontSize');
+ if (fontSize) fontSize.value = s.fontSize;
+
+ var interval = document.getElementById('settingRefreshInterval');
+ if (interval) interval.value = s.refreshInterval;
+
+ // 开关
+ var toggleMap = {
+ settingAnimation: 'animationEnabled',
+ settingSidebar: 'sidebarCollapsed',
+ settingNotifyModule: 'notifyModuleUpdate',
+ settingNotifySystem: 'notifySystem',
+ settingNotifySound: 'notifySound',
+ settingAnalytics: 'analyticsEnabled',
+ settingAutoRefresh: 'autoRefresh'
+ };
+ Object.keys(toggleMap).forEach(function(elId) {
+ var el = document.getElementById(elId);
+ if (el) el.checked = !!s[toggleMap[elId]];
+ });
+
+ renderThemeCards();
+ }
+
+ return {
+ // 初始化面板
+ init: function() {
+ syncUI();
+ console.log('⚙️ 设置面板已加载');
+ },
+ // 选择主题
+ selectTheme: function(themeId) {
+ ChannelSettings.set('theme', themeId);
+ renderThemeCards();
+ },
+ // 开关变更
+ onToggle: function(key, value) {
+ ChannelSettings.set(key, value);
+ console.log('⚙️ ' + key + ' = ' + value);
+ },
+ // 下拉变更
+ onChange: function(key, value) {
+ ChannelSettings.set(key, value);
+ console.log('⚙️ ' + key + ' = ' + value);
+ },
+ // 导出
+ exportSettings: function() {
+ var json = ChannelSettings.exportJSON();
+ if (navigator.clipboard) {
+ navigator.clipboard.writeText(json).then(function() {
+ alert('✅ 设置已复制到剪贴板！\n\n可以保存为文件或发给其他设备。');
+ });
+ } else {
+ // 降级：显示在弹窗
+ prompt('复制下面的内容：', json);
+ }
+ console.log('⚙️ 设置已导出');
+ },
+ // 显示导入弹窗
+ showImport: function() {
+ var modal = document.getElementById('importModal');
+ if (modal) modal.classList.add('show');
+ },
+ // 隐藏导入弹窗
+ hideImport: function() {
+ var modal = document.getElementById('importModal');
+ if (modal) modal.classList.remove('show');
+ },
+ // 执行导入
+ doImport: function() {
+ var textarea = document.getElementById('importTextarea');
+ if (!textarea || !textarea.value.trim()) {
+ alert('请粘贴JSON内容');
+ return;
+ }
+ var ok = ChannelSettings.importJSON(textarea.value.trim());
+ if (ok) {
+ alert('✅ 设置导入成功！');
+ this.hideImport();
+ syncUI();
+ } else {
+ alert('❌ JSON格式错误，请检查内容');
+ }
+ },
+ // 恢复默认
+ resetAll: function() {
+ if (confirm('确定恢复所有设置为默认值吗？')) {
+ ChannelSettings.reset();
+ syncUI();
+ alert('✅ 已恢复默认设置');
+ }
+ }
+ };
+})();
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings.css b/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings.css
new file mode 100644
index 0000000..577df35
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings.css
@@ -0,0 +1,258 @@
+/**
+ * channel-settings.css
+ * 频道设置面板样式 · 环节9
+ */
+.settings-container {
+ padding: 20px;
+ max-width: 800px;
+ margin: 0 auto;
+ color: var(--text-color, #e0e0e0);
+}
+
+.settings-header {
+ text-align: center;
+ margin-bottom: 30px;
+}
+
+.settings-header h2 {
+ font-size: 24px;
+ color: var(--accent-color, #4fc3f7);
+ margin-bottom: 8px;
+}
+
+/* 设置分组 */
+.settings-group {
+ background: var(--card-bg, #1a1a2e);
+ border-radius: 12px;
+ padding: 20px;
+ margin-bottom: 20px;
+ border: 1px solid var(--border-color, #2a2a4a);
+}
+
+.settings-group h3 {
+ font-size: 16px;
+ color: var(--accent-color, #4fc3f7);
+ margin-bottom: 15px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid var(--border-color, #2a2a4a);
+}
+
+/* 设置行 */
+.setting-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 12px 0;
+ border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.setting-row:last-child {
+ border-bottom: none;
+}
+
+.setting-label {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.setting-label .title {
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.setting-label .desc {
+ font-size: 12px;
+ color: #888;
+ margin-top: 2px;
+}
+
+/* 开关组件 */
+.toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 44px;
+ height: 24px;
+ margin-left: 16px;
+}
+
+.toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.toggle-slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #555;
+ transition: .3s;
+ border-radius: 24px;
+}
+
+.toggle-slider:before {
+ position: absolute;
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: 3px;
+ bottom: 3px;
+ background: white;
+ transition: .3s;
+ border-radius: 50%;
+}
+
+input:checked + .toggle-slider {
+ background: var(--accent-color, #4fc3f7);
+}
+
+input:checked + .toggle-slider::before {
+ transform: translateX(20px);
+}
+
+/* 下拉选择 */
+.setting-select {
+ background: var(--card-bg, #1a1a2e);
+ color: var(--text-color, #e0e0e0);
+ border: 1px solid var(--border-color, #2a2a4a);
+ border-radius: 8px;
+ padding: 6px 12px;
+ font-size: 14px;
+ cursor: pointer;
+ margin-left: 16px;
+}
+
+/* 主题预览卡片 */
+.theme-cards {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ margin-top: 10px;
+}
+
+.theme-card {
+ width: 120px;
+ padding: 12px;
+ border-radius: 10px;
+ cursor: pointer;
+ text-align: center;
+ font-size: 13px;
+ border: 2px solid transparent;
+ transition: border-color 0.3s, transform 0.2s;
+}
+
+.theme-card:hover {
+ transform: translateY(-2px);
+}
+
+.theme-card.active {
+ border-color: var(--accent-color, #4fc3f7);
+}
+
+.theme-preview {
+ height: 40px;
+ border-radius: 6px;
+ margin-bottom: 8px;
+}
+
+/* 操作按钮组 */
+.settings-actions {
+ display: flex;
+ gap: 12px;
+ justify-content: center;
+ margin-top: 24px;
+ flex-wrap: wrap;
+}
+
+.btn-settings {
+ padding: 10px 24px;
+ border-radius: 8px;
+ font-size: 14px;
+ cursor: pointer;
+ border: none;
+ transition: background 0.3s, transform 0.2s;
+}
+
+.btn-settings:hover {
+ transform: translateY(-1px);
+}
+
+.btn-export {
+ background: #66bb6a;
+ color: white;
+}
+
+.btn-import {
+ background: #42a5f5;
+ color: white;
+}
+
+.btn-reset {
+ background: #ff7043;
+ color: white;
+}
+
+/* 导入弹窗 */
+.import-modal {
+ display: none;
+ position: fixed;
+ top: 0; left: 0; width: 100%; height: 100%;
+ background: rgba(0,0,0,0.6);
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.import-modal.show {
+ display: flex;
+}
+
+.import-dialog {
+ background: var(--card-bg, #1a1a2e);
+ border-radius: 16px;
+ padding: 24px;
+ max-width: 500px;
+ width: 90%;
+ border: 1px solid var(--border-color);
+}
+
+.import-textarea {
+ width: 100%;
+ height: 150px;
+ background: #111;
+ color: #e0e0e0;
+ border: 1px solid #333;
+ border-radius: 8px;
+ padding: 10px;
+ font-family: monospace;
+ font-size: 13px;
+ resize: vertical;
+ margin: 12px 0;
+}
+
+/* 响应式 */
+@media (max-width: 600px) {
+ .theme-cards {
+ justify-content: center;
+ }
+ .settings-actions {
+ flex-direction: column;
+ align-items: stretch;
+ }
+}
+
+/* 无动画模式 */
+.no-animation * {
+ transition: none !important;
+ animation: none !important;
+}
+
+/* 字体大小全局应用 */
+body, .channel-btn, .module-card, .channel-content, .nav-item,
+p, span, div, h1, h2, h3, h4, a, button, .setting-row, .setting-label {
+ font-size: var(--base-font-size, 15px);
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings.js
new file mode 100644
index 0000000..a7421d4
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-settings.js
@@ -0,0 +1,180 @@
+/**
+ * channel-settings.js
+ * 频道设置数据管理核心·环节9
+ * 统一管理所有用户偏好：主题、布局、通知、显示
+ */
+const ChannelSettings = (function(){
+ const STORAGE_KEY = 'channel-user-settings';
+
+ // 默认设置
+ const DEFAULTS = {
+ theme: 'dark', // dark / light / ocean
+ accentColor: '#4fc3f7', // 主题强调色
+ layout: 'grid', // grid / list
+ fontSize: 'medium', // small / medium / large
+ showWelcome: true, // 显示欢迎横幅
+ notifyModuleUpdate: true, // 模块更新通知
+ notifySystem: true, // 系统通知
+ notifySound: false, // 通知声音
+ autoRefresh: true, // 自动刷新数据
+ refreshInterval: 30, // 刷新间隔（秒）
+ sidebarCollapsed: false,// 侧边栏收起
+ animationEnabled: true, // 过渡动画
+ analyticsEnabled: true // 数据采集
+ };
+
+ // 主题预设
+ const THEMES = {
+ dark: {
+ name: '深色模式',
+ bg: '#0d1117',
+ cardBg: '#1a1a2e',
+ text: '#e0e0e0',
+ accent: '#4fc3f7',
+ border: '#2a2a4a'
+ },
+ light: {
+ name: '浅色模式',
+ bg: '#f5f5f5',
+ cardBg: '#ffffff',
+ text: '#333333',
+ accent: '#4fc3f7',
+ border: '#dddddd'
+ },
+ ocean: {
+ name: '海洋模式',
+ bg: '#1a2f3f',
+ cardBg: '#1e3a4a',
+ text: '#e0f0fa',
+ accent: '#7bc8e0',
+ border: '#2d5a6e'
+ }
+ };
+
+ // 加载设置
+ function load() {
+ try {
+ var stored = localStorage.getItem(STORAGE_KEY);
+ if (stored) {
+ var parsed = JSON.parse(stored);
+ // 合并默认值，保证新字段存在
+ var merged = {};
+ Object.keys(DEFAULTS).forEach(function(k) {
+ merged[k] = parsed.hasOwnProperty(k) ? parsed[k] : DEFAULTS[k];
+ });
+ return merged;
+ }
+ } catch(e) {
+ console.warn('读取设置失败，使用默认值', e);
+ }
+ return JSON.parse(JSON.stringify(DEFAULTS));
+ }
+
+ function save(settings) {
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+ }
+
+ // ── 应用主题到页面 ──
+ function applyTheme(themeName) {
+ var theme = THEMES[themeName] || THEMES.dark;
+ var root = document.documentElement;
+ root.style.setProperty('--bg-color', theme.bg);
+ root.style.setProperty('--card-bg', theme.cardBg);
+ root.style.setProperty('--text-color', theme.text);
+ root.style.setProperty('--accent-color', theme.accent);
+ root.style.setProperty('--border-color', theme.border);
+ document.body.style.background = theme.bg;
+ document.body.style.color = theme.text;
+ console.log('⚙️ 主题已切换：' + theme.name);
+ }
+
+ // ── 应用字体大小 ──
+ function applyFontSize(size) {
+ var map = { small: '13px', medium: '15px', large: '17px' };
+ var fontSize = map[size] || '15px';
+ document.documentElement.style.setProperty('--base-font-size', fontSize);
+ document.body.style.fontSize = fontSize;
+ console.log('⚙️ 字体大小已应用：' + size + ' (' + fontSize + ')');
+ }
+
+ // ── 公开方法 ──
+ return {
+ DEFAULTS: DEFAULTS,
+ THEMES: THEMES,
+ get: function(key) {
+ var s = load();
+ return key ? s[key] : s;
+ },
+ set: function(key, value) {
+ var s = load();
+ s[key] = value;
+ save(s);
+ // 即时应用
+ if (key === 'theme') applyTheme(value);
+ if (key === 'fontSize') applyFontSize(value);
+ if (key === 'animationEnabled') {
+ document.body.classList.toggle('no-animation', !value);
+ }
+ },
+ setMultiple: function(obj) {
+ var s = load();
+ Object.keys(obj).forEach(function(k) { s[k] = obj[k]; });
+ save(s);
+ if (obj.theme) applyTheme(obj.theme);
+ if (obj.fontSize) applyFontSize(obj.fontSize);
+ },
+ reset: function() {
+ save(JSON.parse(JSON.stringify(DEFAULTS)));
+ applyTheme(DEFAULTS.theme);
+ applyFontSize(DEFAULTS.fontSize);
+ console.log('⚙️ 所有设置已恢复默认');
+ },
+ // 导出为JSON字符串
+ exportJSON: function() {
+ var s = load();
+ return JSON.stringify(s, null, 2);
+ },
+ // 从JSON字符串导入
+ importJSON: function(jsonStr) {
+ try {
+ var imported = JSON.parse(jsonStr);
+ var merged = {};
+ Object.keys(DEFAULTS).forEach(function(k) {
+ merged[k] = imported.hasOwnProperty(k) ? imported[k] : DEFAULTS[k];
+ });
+ save(merged);
+ applyTheme(merged.theme);
+ applyFontSize(merged.fontSize);
+ console.log('✅ 设置导入成功');
+ return true;
+ } catch(e) {
+ console.error('❌ 导入失败: JSON格式错误');
+ return false;
+ }
+ },
+ // 初始化（页面加载时调用）
+ init: function() {
+ var s = load();
+ applyTheme(s.theme);
+ applyFontSize(s.fontSize);
+ if (!s.animationEnabled) {
+ document.body.classList.add('no-animation');
+ }
+ console.log('⚙️ 频道设置已初始化');
+ },
+ getThemeList: function() {
+ return Object.keys(THEMES).map(function(k) {
+ return { id: k, name: THEMES[k].name };
+ });
+ }
+ };
+})();
+
+// 页面加载时自动初始化
+if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', function() {
+ ChannelSettings.init();
+ });
+} else {
+ ChannelSettings.init();
+}
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-state.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-state.js
new file mode 100644
index 0000000..38edffd
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-state.js
@@ -0,0 +1,44 @@
+// 状态管理（localStorage）
+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] 已清除');
+ }
+};
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/channel-stats.js b/agents/zhuyuan-dev-agent/modules/m-channel/channel-stats.js
new file mode 100644
index 0000000..d4263fe
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/channel-stats.js
@@ -0,0 +1,298 @@
+// 频道使用统计管理
+window.ChannelStats = {
+ // 初始化
+ init: function() {
+ console.log('[stats] 初始化');
+ this.bindEvents();
+ },
+
+ // 绑定事件
+ bindEvents: function() {
+ if (!window.EventBus) return;
+
+ // 监听模块加载，开始计时
+ EventBus.on('module:loaded', (data) => {
+ if (data && data.module) {
+ this.recordView(data.module);
+ }
+ });
+
+ // 监听模块卸载，结束计时
+ EventBus.on('module:unloaded', (data) => {
+ if (data && data.module) {
+ if (window.ChannelPreferences) {
+ ChannelPreferences.stopTiming(data.module);
+ }
+ }
+ });
+
+ // 监听页面关闭，停止所有计时
+ window.addEventListener('beforeunload', () => {
+ if (window.ChannelPreferences && window.ChannelPreferences.timing) {
+ Object.keys(ChannelPreferences.timing).forEach(moduleId => {
+ ChannelPreferences.stopTiming(moduleId);
+ });
+ }
+ });
+ },
+
+ // 记录模块访问
+ recordView: function(moduleId) {
+ if (!window.ChannelPreferences) return;
+
+ // 记录使用次数和开始计时
+ ChannelPreferences.recordUsage(moduleId);
+
+ // 发送事件
+ if (window.EventBus) {
+ EventBus.emit('stats:recorded', {
+ module: moduleId,
+ time: Date.now()
+ });
+ }
+ },
+
+ // 获取统计报告
+ getStatsReport: function() {
+ if (!window.ChannelPreferences) return {};
+
+ const stats = ChannelPreferences.getStats();
+ const modules = window.ModuleRegistry ? ModuleRegistry.list() : [];
+
+ // 格式化统计数据
+ const report = {
+ totalViews: 0,
+ mostUsed: null,
+ lastUsed: null,
+ moduleDetails: {}
+ };
+
+ let maxCount = 0;
+ let lastTime = 0;
+
+ modules.forEach(moduleId => {
+ const moduleStats = stats[moduleId] || { count: 0, lastUsed: null, totalTime: 0 };
+ report.moduleDetails[moduleId] = {
+ count: moduleStats.count,
+ lastUsed: moduleStats.lastUsed ? new Date(moduleStats.lastUsed).toLocaleString() : '从未使用',
+ totalTime: moduleStats.totalTime ? this.formatTime(moduleStats.totalTime) : '0秒'
+ };
+
+ report.totalViews += moduleStats.count;
+
+ if (moduleStats.count > maxCount) {
+ maxCount = moduleStats.count;
+ report.mostUsed = moduleId;
+ }
+
+ if (moduleStats.lastUsed && moduleStats.lastUsed > lastTime) {
+ lastTime = moduleStats.lastUsed;
+ report.lastUsed = moduleId;
+ }
+ });
+
+ return report;
+ },
+
+ // 格式化时间（秒 -> 可读格式）
+ formatTime: function(seconds) {
+ if (seconds < 60) return `${Math.round(seconds)}秒`;
+ if (seconds < 3600) {
+ const minutes = Math.floor(seconds / 60);
+ const secs = Math.round(seconds % 60);
+ return `${minutes}分${secs}秒`;
+ }
+ const hours = Math.floor(seconds / 3600);
+ const minutes = Math.floor((seconds % 3600) / 60);
+ return `${hours}小时${minutes}分`;
+ },
+
+ // 渲染统计面板
+ renderStatsPanel: function(container) {
+ if (!container) return;
+
+ const report = this.getStatsReport();
+ const modules = window.ModuleRegistry ? ModuleRegistry.list() : [];
+
+ let html = `
+
+
📊 使用统计
+
+
+ 总访问次数：
+ ${report.totalViews}
+
+ ${report.mostUsed ? `
+
+ 最常用模块：
+ ${this.getModuleName(report.mostUsed)} (${report.moduleDetails[report.mostUsed]?.count || 0}次)
+
+ ` : ''}
+ ${report.lastUsed ? `
+
+ 最近使用：
+ ${this.getModuleName(report.lastUsed)}
+
+ ` : ''}
+
+
+
模块详情
+
+
+
+ | 模块 |
+ 访问次数 |
+ 累计使用时长 |
+ 最后使用 |
+
+
+
+ `;
+
+ modules.forEach(moduleId => {
+ const detail = report.moduleDetails[moduleId] || { count: 0, totalTime: '0秒', lastUsed: '从未使用' };
+ html += `
+
+ | ${this.getModuleName(moduleId)} |
+ ${detail.count} |
+ ${detail.totalTime} |
+ ${detail.lastUsed} |
+
+ `;
+ });
+
+ html += `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
主题色
+
+
+
+
+
+
+
+
+
+
统计数据
+
+
+
+
其他
+
+
+
+
+
⚠️
+
+
模块 ${moduleId} 加载失败
+
${error.message || '未知错误'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/mock-modules/mock-a.html b/agents/zhuyuan-dev-agent/modules/m-channel/mock-modules/mock-a.html
new file mode 100644
index 0000000..2c43abc
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/mock-modules/mock-a.html
@@ -0,0 +1,16 @@
+
+
+
+ 模拟模块A
+
+
+
+
+
+
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/mock-modules/mock-b.html b/agents/zhuyuan-dev-agent/modules/m-channel/mock-modules/mock-b.html
new file mode 100644
index 0000000..5236978
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/mock-modules/mock-b.html
@@ -0,0 +1,17 @@
+
+
+
+ 模拟模块B
+
+
+
+
+
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/module-lifecycle.js b/agents/zhuyuan-dev-agent/modules/m-channel/module-lifecycle.js
new file mode 100644
index 0000000..d99ea03
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/module-lifecycle.js
@@ -0,0 +1,23 @@
+// 模块生命周期管理
+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);
+ }
+};
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/module-loader.js b/agents/zhuyuan-dev-agent/modules/m-channel/module-loader.js
new file mode 100644
index 0000000..e812f52
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/module-loader.js
@@ -0,0 +1,36 @@
+// 模块加载器
+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;
+ }
+
+ // 如果模块有 init 方法
+ if (module.init && typeof module.init === 'function') {
+ module.init(container);
+ } else {
+ container.innerHTML = `模块 ${moduleName} 内容
`;
+ }
+
+ 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);
+ }
+};
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/module-registry.js b/agents/zhuyuan-dev-agent/modules/m-channel/module-registry.js
new file mode 100644
index 0000000..c3fb0ae
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/module-registry.js
@@ -0,0 +1,17 @@
+// 模块注册表
+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);
+ }
+};
diff --git a/agents/zhuyuan-dev-agent/modules/m-channel/views/channel-dashboard.html b/agents/zhuyuan-dev-agent/modules/m-channel/views/channel-dashboard.html
new file mode 100644
index 0000000..e67784d
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/m-channel/views/channel-dashboard.html
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
+
⚡ 模块加载性能
+
+
+
+ | 模块 |
+ 访问次数 |
+ 总停留(分钟) |
+ 平均加载(ms) |
+ 状态 |
+
+
+
+
+
+
+
+
+
+
+
+
🐞 调试面板
+
+
+ 当前活跃模块:
+ 加载中...
+
+
+
事件总线聊天记录
+
+
+
+
+
+
+
+
+
+
+
+
+
消息会广播给所有订阅的模块
+
+
+
+
+
+
🎨 外观设置
+
+
+ 主题模式
+ 选择你喜欢的界面风格
+
+
+
+
+
+
+ 字体大小
+ 调整界面文字大小
+
+
+
+
+
+
+ 过渡动画
+ 开启页面切换动画效果
+
+
+
+
+
+
+ 侧边栏默认收起
+ 页面加载时侧边栏是否收起
+
+
+
+
+
+
+
+
🔔 通知设置
+
+
+ 模块更新通知
+ 有模块内容更新时提醒
+
+
+
+
+
+ 系统通知
+ 系统公告和维护提醒
+
+
+
+
+
+ 通知声音
+ 收到通知时播放提示音
+
+
+
+
+
+
+
+
📊 数据设置
+
+
+ 数据采集
+ 允许采集模块访问和性能数据（用于数据面板）
+
+
+
+
+
+ 自动刷新
+ 定时自动刷新频道数据
+
+
+
+
+
+ 刷新间隔
+ 自动刷新的时间间隔
+
+
+
+
+
+
+
+
+
+
+
+
+
+
📥 导入设置
+
粘贴之前导出的JSON内容：
+
+
+
+
+
+
+
+
+
+
+
+
+
+
第一章 · 序幕
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 📖 第1章 · 第1段
+ 存档号: —
+
+
+
+
+
🏯
+
宫 · 廷 · 纪
+
动态人格宫廷生成系统
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
已有存档？输入编号继续
+
+
+
+
+
+
+
+
+
+
🏯 存档管理
+
+
+
+
+
+
+
+
+
+
已有存档
+
+
+
+
+
+
+
+
+
获取存档列表失败
';
+ return;
+ }
+ renderSaveList(data.saves || []);
+ })
+ .catch(function () {
+ container.innerHTML = '无法连接服务器
';
+ });
+ }
+
+ function renderSaveList(saves) {
+ var container = document.getElementById('save-list');
+
+ if (saves.length === 0) {
+ container.innerHTML = '暂无存档
';
+ return;
+ }
+
+ container.innerHTML = '';
+ saves.forEach(function (save) {
+ var item = document.createElement('div');
+ item.className = 'save-item fade-in';
+
+ var info = document.createElement('div');
+ info.className = 'save-info';
+
+ var idEl = document.createElement('div');
+ idEl.className = 'save-id';
+ idEl.textContent = save.save_id;
+
+ var detail = document.createElement('div');
+ detail.className = 'save-detail';
+ var parts = [];
+ if (save.dynasty) parts.push(save.dynasty);
+ if (save.role) parts.push(save.role);
+ if (save.chapter) parts.push('第' + save.chapter + '章');
+ if (save.created_at) parts.push(save.created_at.slice(0, 16).replace('T', ' '));
+ detail.textContent = parts.join(' · ');
+
+ info.appendChild(idEl);
+ info.appendChild(detail);
+
+ var actions = document.createElement('div');
+ actions.className = 'save-actions';
+
+ var loadBtn = document.createElement('button');
+ loadBtn.className = 'btn btn-small';
+ loadBtn.textContent = '读档';
+ loadBtn.addEventListener('click', function () {
+ doLoad(save.save_id);
+ });
+
+ actions.appendChild(loadBtn);
+
+ item.appendChild(info);
+ item.appendChild(actions);
+ container.appendChild(item);
+ });
+ }
+
+ // ---------- Load Save ----------
+ function doLoad(saveId) {
+ fetch(API_BASE + '/api/palace/save/load', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ save_id: saveId })
+ })
+ .then(function (r) { return r.json(); })
+ .then(function (data) {
+ if (data.error) {
+ showToast(data.message || '读档失败');
+ return;
+ }
+ sessionStorage.setItem('palace_save_id', saveId);
+ sessionStorage.setItem('palace_loaded', JSON.stringify(data));
+ window.location.href = 'game.html';
+ })
+ .catch(function (err) {
+ showToast('网络错误：' + err.message);
+ });
+ }
+
+ // ---------- Events ----------
+ function bindEvents() {
+ document.getElementById('btn-load').addEventListener('click', function () {
+ var id = document.getElementById('load-id').value.trim();
+ if (!id) { showToast('请输入存档编号'); return; }
+ doLoad(id);
+ });
+
+ document.getElementById('load-id').addEventListener('keydown', function (e) {
+ if (e.key === 'Enter') {
+ var id = this.value.trim();
+ if (id) doLoad(id);
+ }
+ });
+ }
+
+ // ---------- Utilities ----------
+ function showToast(msg) {
+ var old = document.querySelector('.toast');
+ if (old) old.remove();
+ var el = document.createElement('div');
+ el.className = 'toast';
+ el.textContent = msg;
+ document.body.appendChild(el);
+ setTimeout(function () { if (el.parentNode) el.remove(); }, 3000);
+ }
+
+ // ---------- Boot ----------
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', init);
+ } else {
+ init();
+ }
+})();
diff --git a/agents/zhuyuan-dev-agent/modules/palace-game/frontend/style.css b/agents/zhuyuan-dev-agent/modules/palace-game/frontend/style.css
new file mode 100644
index 0000000..ffd770f
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/palace-game/frontend/style.css
@@ -0,0 +1,564 @@
+/* ====================================
+ M-PALACE · 宫廷视觉风格
+ 暗红+金色主题 · 古风字体 · 逐字动画
+ ==================================== */
+
+/* ---------- CSS Variables ---------- */
+:root {
+ --bg-primary: #1a0a0a;
+ --bg-secondary: #0d0d1a;
+ --gold: #c9a96e;
+ --gold-light: #e8d5a3;
+ --danger: #8b0000;
+ --text-primary: #f5f0e8;
+ --text-secondary:#a0937d;
+ --border-gold: rgba(201,169,110,0.15);
+ --border-gold-md:rgba(201,169,110,0.3);
+ --glow-gold: rgba(201,169,110,0.25);
+}
+
+/* ---------- Reset & Base ---------- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+ font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ background: var(--bg-primary);
+ color: var(--text-primary);
+ min-height: 100vh;
+ line-height: 1.6;
+ overflow-x: hidden;
+}
+
+/* ---------- Background Texture ---------- */
+body::before {
+ content: '';
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background:
+ radial-gradient(ellipse at 20% 50%, rgba(139,0,0,0.08) 0%, transparent 60%),
+ radial-gradient(ellipse at 80% 20%, rgba(201,169,110,0.05) 0%, transparent 50%),
+ radial-gradient(ellipse at 50% 80%, rgba(13,13,26,0.6) 0%, transparent 70%);
+ pointer-events: none;
+ z-index: 0;
+}
+
+/* ---------- Layout ---------- */
+.container {
+ max-width: 720px;
+ margin: 0 auto;
+ padding: 2rem 1.5rem;
+ position: relative;
+ z-index: 1;
+}
+
+/* ---------- Typography ---------- */
+.serif {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', 'STSong', serif;
+}
+
+h1, h2, h3 { color: var(--gold); font-weight: 400; }
+
+/* ---------- Golden Divider ---------- */
+.divider {
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--gold), transparent);
+ margin: 1.5rem 0;
+ opacity: 0.4;
+}
+
+.divider-text {
+ text-align: center;
+ color: var(--text-secondary);
+ font-size: 0.85rem;
+ padding: 0.5rem 0;
+}
+
+/* ====================================
+ INDEX PAGE — Quick Start
+ ==================================== */
+.start-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ text-align: center;
+ padding: 2rem;
+}
+
+.start-icon {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ filter: drop-shadow(0 0 20px var(--glow-gold));
+}
+
+.start-title {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ font-size: 2.2rem;
+ letter-spacing: 0.8rem;
+ color: var(--gold);
+ margin-bottom: 0.3rem;
+}
+
+.start-subtitle {
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ margin-bottom: 2.5rem;
+ letter-spacing: 0.2rem;
+}
+
+/* Form Card */
+.start-card {
+ background: rgba(26,10,10,0.85);
+ border: 1px solid var(--border-gold);
+ border-radius: 8px;
+ padding: 2rem 2.5rem;
+ width: 100%;
+ max-width: 420px;
+ backdrop-filter: blur(8px);
+}
+
+.form-group {
+ margin-bottom: 1.5rem;
+ text-align: left;
+}
+
+.form-group label {
+ display: block;
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ margin-bottom: 0.5rem;
+}
+
+select, input[type="text"] {
+ width: 100%;
+ padding: 0.7rem 1rem;
+ background: rgba(13,13,26,0.6);
+ border: 1px solid var(--border-gold-md);
+ border-radius: 4px;
+ color: var(--text-primary);
+ font-size: 0.95rem;
+ font-family: inherit;
+ outline: none;
+ transition: border-color 0.3s;
+}
+
+select:focus, input[type="text"]:focus {
+ border-color: var(--gold);
+ box-shadow: 0 0 8px var(--glow-gold);
+}
+
+select option {
+ background: var(--bg-primary);
+ color: var(--text-primary);
+}
+
+/* ---------- Buttons ---------- */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.75rem 2rem;
+ border: 1px solid var(--gold);
+ border-radius: 4px;
+ background: rgba(139,0,0,0.3);
+ color: var(--gold);
+ font-size: 1rem;
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ cursor: pointer;
+ transition: all 0.3s;
+ letter-spacing: 0.15rem;
+}
+
+.btn:hover {
+ background: rgba(139,0,0,0.6);
+ box-shadow: 0 0 16px var(--glow-gold);
+ transform: translateY(-1px);
+}
+
+.btn:active { transform: translateY(0); }
+
+.btn-primary {
+ width: 100%;
+ padding: 1rem;
+ font-size: 1.1rem;
+ margin-top: 0.5rem;
+}
+
+.btn-small {
+ padding: 0.5rem 1.2rem;
+ font-size: 0.85rem;
+}
+
+/* Load Section */
+.load-section {
+ width: 100%;
+ max-width: 420px;
+ margin-top: 1rem;
+}
+
+.load-row {
+ display: flex;
+ gap: 0.5rem;
+ margin-top: 0.5rem;
+}
+
+.load-row input { flex: 1; }
+
+/* Footer */
+.start-footer {
+ margin-top: 3rem;
+ font-size: 0.8rem;
+ color: var(--text-secondary);
+ opacity: 0.6;
+}
+
+/* ====================================
+ GAME PAGE — Main Narrative
+ ==================================== */
+.game-page {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+/* Top Bar */
+.top-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.8rem 1.5rem;
+ border-bottom: 1px solid var(--border-gold);
+ background: rgba(26,10,10,0.9);
+ backdrop-filter: blur(6px);
+ position: sticky;
+ top: 0;
+ z-index: 10;
+}
+
+.top-bar-title {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ font-size: 1rem;
+ color: var(--gold);
+}
+
+.top-bar-actions {
+ display: flex;
+ gap: 0.5rem;
+}
+
+/* Narrative Area */
+.narrative-area {
+ flex: 1;
+ padding: 2rem 1.5rem;
+ max-width: 720px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.chapter-title {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ font-size: 1.4rem;
+ color: var(--gold);
+ text-align: center;
+ margin-bottom: 1.5rem;
+ letter-spacing: 0.3rem;
+}
+
+.narrative-text {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ font-size: 1rem;
+ line-height: 1.9;
+ color: var(--text-primary);
+ text-align: justify;
+ margin-bottom: 2rem;
+ min-height: 120px;
+}
+
+/* Typewriter Animation */
+.typewriter-cursor {
+ display: inline-block;
+ width: 2px;
+ height: 1.1em;
+ background: var(--gold);
+ margin-left: 2px;
+ vertical-align: text-bottom;
+ animation: blink 0.8s infinite;
+}
+
+@keyframes blink {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0; }
+}
+
+/* Choices Area */
+.choices-area {
+ padding: 0 1.5rem 1.5rem;
+ max-width: 720px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.choices-label {
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ margin-bottom: 0.8rem;
+ padding-left: 0.3rem;
+}
+
+.choice-btn {
+ display: block;
+ width: 100%;
+ padding: 0.9rem 1.2rem;
+ margin-bottom: 0.6rem;
+ background: rgba(139,0,0,0.15);
+ border: 1px solid var(--border-gold-md);
+ border-radius: 6px;
+ color: var(--text-primary);
+ font-size: 0.95rem;
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ text-align: left;
+ cursor: pointer;
+ transition: all 0.3s;
+}
+
+.choice-btn:hover {
+ background: rgba(139,0,0,0.35);
+ border-color: var(--gold);
+ box-shadow: 0 0 12px var(--glow-gold);
+ transform: translateX(4px);
+}
+
+.choice-btn:active {
+ transform: translateX(2px);
+}
+
+.choice-btn .choice-num {
+ color: var(--gold);
+ margin-right: 0.5rem;
+ font-weight: 600;
+}
+
+/* Free Input */
+.free-input-row {
+ display: flex;
+ gap: 0.5rem;
+ margin-top: 0.3rem;
+}
+
+.free-input-row input {
+ flex: 1;
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+}
+
+/* Status Bar */
+.status-bar {
+ padding: 1rem 1.5rem;
+ border-top: 1px solid var(--border-gold);
+ background: rgba(13,13,26,0.6);
+ backdrop-filter: blur(6px);
+}
+
+.status-toggle {
+ font-size: 0.8rem;
+ color: var(--text-secondary);
+ cursor: pointer;
+ margin-bottom: 0.5rem;
+ user-select: none;
+}
+
+.status-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.6rem 1.5rem;
+}
+
+.stat-row {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-size: 0.85rem;
+}
+
+.stat-icon { width: 1.2rem; text-align: center; }
+
+.stat-label {
+ width: 3rem;
+ color: var(--text-secondary);
+ flex-shrink: 0;
+}
+
+.stat-bar-bg {
+ flex: 1;
+ height: 6px;
+ background: rgba(201,169,110,0.1);
+ border-radius: 3px;
+ overflow: hidden;
+}
+
+.stat-bar-fill {
+ height: 100%;
+ border-radius: 3px;
+ transition: width 0.6s ease;
+}
+
+.stat-bar-fill.power { background: linear-gradient(90deg, #8b0000, #c9a96e); }
+.stat-bar-fill.status { background: linear-gradient(90deg, #6b21a8, #c9a96e); }
+.stat-bar-fill.emotion { background: linear-gradient(90deg, #b8860b, #e8d5a3); }
+.stat-bar-fill.conflict{ background: linear-gradient(90deg, #4a1a2e, #8b0000); }
+
+.stat-value {
+ width: 1.8rem;
+ text-align: right;
+ color: var(--gold-light);
+ font-size: 0.8rem;
+}
+
+/* Bottom Bar */
+.bottom-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem 1.5rem;
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ border-top: 1px solid var(--border-gold);
+ background: rgba(26,10,10,0.9);
+}
+
+/* Status collapsed */
+.status-bar.collapsed .status-grid { display: none; }
+
+/* ====================================
+ SAVE PAGE
+ ==================================== */
+.save-page {
+ min-height: 100vh;
+ padding: 2rem 1.5rem;
+}
+
+.save-page h1 {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ text-align: center;
+ margin-bottom: 2rem;
+ letter-spacing: 0.4rem;
+}
+
+.save-list {
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+.save-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem 1.2rem;
+ margin-bottom: 0.8rem;
+ background: rgba(26,10,10,0.7);
+ border: 1px solid var(--border-gold);
+ border-radius: 6px;
+ transition: border-color 0.3s;
+}
+
+.save-item:hover {
+ border-color: var(--gold);
+}
+
+.save-info { flex: 1; }
+
+.save-id {
+ font-family: 'Noto Serif SC', 'Source Han Serif CN', serif;
+ font-size: 1rem;
+ color: var(--gold);
+}
+
+.save-detail {
+ font-size: 0.8rem;
+ color: var(--text-secondary);
+ margin-top: 0.2rem;
+}
+
+.save-actions {
+ display: flex;
+ gap: 0.4rem;
+}
+
+.empty-state {
+ text-align: center;
+ padding: 3rem;
+ color: var(--text-secondary);
+}
+
+/* ====================================
+ LOADING & TRANSITIONS
+ ==================================== */
+.loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 2rem;
+ color: var(--text-secondary);
+}
+
+.loading-dot {
+ width: 6px;
+ height: 6px;
+ background: var(--gold);
+ border-radius: 50%;
+ animation: pulse 1.2s infinite;
+}
+
+.loading-dot:nth-child(2) { animation-delay: 0.2s; }
+.loading-dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes pulse {
+ 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+ 40% { opacity: 1; transform: scale(1.2); }
+}
+
+/* Fade transition */
+.fade-in {
+ animation: fadeIn 0.6s ease forwards;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(8px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* Toast notification */
+.toast {
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ padding: 0.8rem 1.5rem;
+ background: rgba(26,10,10,0.95);
+ border: 1px solid var(--gold);
+ border-radius: 6px;
+ color: var(--gold-light);
+ font-size: 0.9rem;
+ z-index: 100;
+ animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.5s forwards;
+}
+
+@keyframes slideIn {
+ from { transform: translateX(100%); opacity: 0; }
+ to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes fadeOut {
+ to { opacity: 0; transform: translateY(-10px); }
+}
+
+/* ====================================
+ Responsive
+ ==================================== */
+@media (max-width: 600px) {
+ .start-card { padding: 1.5rem; }
+ .start-title { font-size: 1.8rem; letter-spacing: 0.5rem; }
+ .status-grid { grid-template-columns: 1fr; }
+ .top-bar-title { font-size: 0.85rem; }
+}
diff --git a/agents/zhuyuan-dev-agent/modules/plan-expander.js b/agents/zhuyuan-dev-agent/modules/plan-expander.js
new file mode 100644
index 0000000..c76d83b
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/plan-expander.js
@@ -0,0 +1,78 @@
+// ═══════════════════════════════════════
+// 铸渊开发Agent · 任务补全引擎
+// 高层面规划 → LLM补全 → 详细可执行步骤
+// ═══════════════════════════════════════
+
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * 补全单条高级任务为详细步骤
+ * @param {object} task - { id, action, description, context }
+ * @param {function} modelCaller - LLM 调用函数 (prompt) => string
+ * @returns {object} 补全后的任务
+ */
+async function expandTask(task, modelCaller) {
+ const prompt = [
+ "你是一个开发Agent的任务补全引擎。将高级描述补全为可执行的详细步骤。",
+ "",
+ "原任务:",
+ " ID: " + task.id,
+ " 动作: " + task.action,
+ " 描述: " + (task.description || "无"),
+ " 上下文: " + (task.context || "无"),
+ "",
+ "请严格基于以上原任务拆解。不要改变原任务的action/target/content。只补充detail、depends_on等元信息。如果原任务已经足够具体，直接返回：",
+ "[{\"step\":1,\"action\":\"write_file|run_cmd|call_api|check\",\"target\":\"文件路径或命令\",\"detail\":\"具体做什么\",\"depends_on\":null}]"
+ ].join("\n");
+
+ try {
+ const raw = await modelCaller(prompt);
+ const jsonMatch = raw.match(/\[[\s\S]*\]/);
+ if (jsonMatch) {
+ const substeps = JSON.parse(jsonMatch[0]);
+ return { ...task, substeps, expanded: true, expanded_at: new Date().toISOString() };
+ }
+ } catch (e) {
+ console.warn("[Expander] LLM补全失败，退化为单步模式: " + e.message);
+ }
+
+ // 退化：LLM不可用时，原任务本身就是一个步骤
+ return {
+ ...task,
+ substeps: [{ step: 1, action: task.action, target: task.target || "", detail: task.description || "" }],
+ expanded: false,
+ expanded_at: new Date().toISOString()
+ };
+}
+
+/**
+ * 完整规划补全
+ * @param {object} plan - 完整规划 { plan_id, tasks[], ... }
+ * @param {function} modelCaller - LLM 调用函数
+ * @param {string} plansDir - 规划文件存储目录
+ */
+async function expandPlan(plan, modelCaller, plansDir) {
+ console.log("[Expander] 开始补全规划: " + plan.plan_id + " · " + plan.tasks.length + "个任务");
+
+ const expandedTasks = [];
+ for (let i = 0; i < plan.tasks.length; i++) {
+ const task = plan.tasks[i];
+ console.log("[Expander] 补全 " + (i + 1) + "/" + plan.tasks.length + ": " + task.id);
+ const expanded = await expandTask(task, modelCaller);
+ expandedTasks.push(expanded);
+ }
+
+ plan.tasks = expandedTasks;
+ plan._status = "expanded";
+ plan._expanded_at = new Date().toISOString();
+
+ // 写回规划文件
+ const planFile = path.join(plansDir, plan.plan_id + ".json");
+ fs.writeFileSync(planFile, JSON.stringify(plan, null, 2), "utf-8");
+
+ console.log("[Expander] 补全完成 · 共 " + expandedTasks.reduce((s, t) => s + (t.substeps?.length || 0), 0) + " 个子步骤");
+ return plan;
+}
+
+module.exports = { expandPlan, expandTask };
diff --git a/agents/zhuyuan-dev-agent/modules/portal/data.json b/agents/zhuyuan-dev-agent/modules/portal/data.json
new file mode 100644
index 0000000..242c313
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/portal/data.json
@@ -0,0 +1,23 @@
+[
+ {
+ "id": 1,
+ "title": "HoloLake 2.0 发布！",
+ "content": "全新界面，极致体验。",
+ "channel": "tech",
+ "pinned": true
+ },
+ {
+ "id": 2,
+ "title": "AI 会议延期通知",
+ "content": "原定下周的会议推迟到月底。",
+ "channel": "news",
+ "pinned": false
+ },
+ {
+ "id": 3,
+ "title": "VS Code 插件推荐",
+ "content": "Live Server 是开发神器。",
+ "channel": "tech",
+ "pinned": false
+ }
+]
\ No newline at end of file
diff --git a/agents/zhuyuan-dev-agent/modules/portal/index.html b/agents/zhuyuan-dev-agent/modules/portal/index.html
new file mode 100644
index 0000000..bc24dae
--- /dev/null
+++ b/agents/zhuyuan-dev-agent/modules/portal/index.html
@@ -0,0 +1,134 @@
+
+
+
+
+
+ HoloLake公告栏
+
+
+
+
+
+
+
+
+
+ 全部
+ 系统公告
+ 开发动态
+ 团队消息
+
+
+
+
+
+
+
置顶
+
+
+
+
主域公告栏与频道过渡系统（M22）正式进入环节0开发。新增公告置顶、频道分类、时间线展示功能，信息展示层逐步完善。
+
+
+
+
+
+
+
置顶
+
+
+
+
SYSLOG生成方式已更新为「知秋主动提问制」完成任务后由知秋引导填写，无需手动套用模板。即日起生效。
+
+
+
+
+
+
+
+
+
+
DEV-012 Awen正式加入光湖开发团队，成为第12位协作者。首个模块M09消息通知中心已全通关！
+
+
+
+
+
+
+
+
+
完成M08全部环节，七连胜达成！响应式布局+SVG环形图+CSV导出一次通过，正式前端毕业
+
+
+
+
+
+
+
+
+
+
光湖主域已完成HTTPS配置与飞书Webhook全链路联调，Nginx+PM2+Certbot部署完毕，系统脊梁正式贯通。
+
+
+
+
+
+
+
+
+
+
12位开发者中8位活跃，累计完成30+个环节。肥猫五连胜、桔子七连胜、小草莓五连胜、Awen四连胜团队势头强劲！
+
+
+
+
+
+
+
+