clawVERSE Dashboard<script src="dashboard/batch.js"></script> <meta name="description" content="clawVERSE Dashboard - 智能管理控制台"> <meta name="theme-color" content="#0f0f23"> <!-- 核心样式 --> <style> :root { --bg-primary: #0f0f23; --bg-secondary: #1a1a2e; --bg-tertiary: #16213e; --accent-color: #00d4ff; --accent-hover: #00b8e6; --text-primary: #ffffff; --text-secondary: #a0a0a0; --border-color: #2a2a4a; --success-color: #10b981; --warning-color: #f59e0b; --error-color: #ef4444; --gradient-start: #667eea; --gradient-end: #764ba2; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; min-height: 100vh; } /* 移动端导航栏 */ .mobile-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; } .mobile-nav h1 { font-size: 1.2em; background: linear-gradient(135deg, var(--accent-color), #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .nav-links { display: flex; gap: 15px; } .nav-link { color: var(--text-secondary); text-decoration: none; font-size: 0.9em; transition: color 0.3s; } .nav-link:hover, .nav-link.active { color: var(--accent-color); } /* 桌面端隐藏导航 */ @media (min-width: 768px) { #desktop-only { display: none !important; } } /* 快捷键提示按钮 */ .shortcut-hint { position: fixed; bottom: 20px; right: 20px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2em; transition: all 0.3s; z-index: 50; } .shortcut-hint:hover { background: var(--accent-color); transform: scale(1.1); } .shortcut-hint kbd { font-family: monospace; font-size: 0.8em; } /* 加载动画 */ .loading-screen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; transition: opacity 0.5s, visibility 0.5s; } .loading-screen.hidden { opacity: 0; visibility: hidden; } .loading-spinner { width: 50px; height: 50px; border: 3px solid var(--border-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* 小部件样式 */ .widget { background: var(--bg-secondary); border-radius: 12px; padding: 20px; border: 1px solid var(--border-color); transition: all 0.3s ease; } .widget:hover { border-color: var(--accent-color); box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2); } .widget.dragging { opacity: 0.5; transform: scale(0.98); } .widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .widget-actions button { background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: background 0.2s; } .widget-actions button:hover { background: var(--bg-tertiary); } .widget-content { min-height: 100px; } .loading-text { margin-top: 20px; color: var(--text-secondary); } /* 通知容器 */ .notifications-container { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; } .notification { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px 20px; min-width: 300px; animation: slideIn 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .notification.success { border-left: 4px solid var(--success-color); } .notification.warning { border-left: 4px solid var(--warning-color); } .notification.error { border-left: 4px solid var(--error-color); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* 页脚 */ footer { text-align: center; padding: 30px 20px; color: var(--text-secondary); font-size: 0.9em; border-top: 1px solid var(--border-color); margin-top: 40px; } footer a { color: var(--accent-color); text-decoration: none; } </style> </head> <body> <!-- 加载屏幕 --> <div class="loading-screen" id="loadingScreen"> <div class="loading-spinner"></div> <div class="loading-text">加载中...</div> </div> <!-- 移动端导航栏 --> <nav class="mobile-nav" id="desktop-only"> <h1>🐾 clawVERSE</h1> <div class="nav-links"> <a href="dashboard/index.html" class="nav-link active">仪表盘</a> <a href="dashboard/agents.html" class="nav-link">Agent 议会</a> <a href="dashboard/democracy.html" class="nav-link">民主讨论</a> <a href="dashboard/console.html" class="nav-link">开发团队</a> <a href="dashboard/logs.html" class="nav-link">操作日志</a> <a href="dashboard/settings.html" class="nav-link">设置中心</a> </div> </nav> <!-- 快捷键提示按钮 --> <div class="shortcut-hint" onclick="shortcutManager.toggleHelp()" title="查看快捷键"> <kbd>?</kbd> </div> <!-- 通知容器 --> <div class="notifications-container" id="notificationsContainer"></div> <!-- 主内容区 --> <main> <!-- 搜索 UI 容器 --> <div id="search-ui"></div> <div id="ai-chat-container"></div> <link rel="stylesheet" href="dashboard/ai-chat.css"> <script src="dashboard/ai-chat.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { initAIChat(); }); </script> <!-- 主要内容 --> <div style="padding: 20px; max-width: 1200px; margin: 0 auto;"> <h1 style="text-align: center; margin: 40px 0; font-size: 2em;"> 🐾 clawVERSE Dashboard </h1> <p style="text-align: center; color: var(--text-secondary); margin-bottom: 40px;"> 智能管理控制台 - 按 <kbd style="background: var(--bg-secondary); padding: 4px 8px; border-radius: 4px;">?</kbd> 查看快捷键 </p> <!-- 功能卡片 --> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px 0;"> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color);"> <h3 style="color: var(--accent-color); margin-bottom: 12px;">📊 Dashboard</h3> <p style="color: var(--text-secondary); font-size: 0.9em;">主控制台首页，概览系统状态</p> <p style="margin-top: 12px; font-size: 0.85em; color: var(--text-secondary);"> <kbd>g</kbd> + <kbd>d</kbd> 快速跳转 </p> </div> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color);"> <h3 style="color: #a855f7; margin-bottom: 12px;">🤖 Agent 议会</h3> <p style="color: var(--text-secondary); font-size: 0.9em;">多 Agent 协作决策系统</p> <p style="margin-top: 12px; font-size: 0.85em; color: var(--text-secondary);"> <kbd>g</kbd> + <kbd>a</kbd> 快速跳转 </p> <!-- 批量操作栏 --> <div id="batch-action-bar" class="hidden"> <div class="flex items-center justify-between"> <div class="flex items-center gap-4"> <label class="flex items-center gap-2 cursor-pointer"> <input type="checkbox" id="select-all-checkbox" onchange="handleSelectAll(this.checked)" class="w-5 h-5 rounded border-gray-500 text-indigo-500 focus:ring-indigo-500"> <span class="text-sm">全选</span> </label> <span class="text-gray-400">|</span> <span class="text-sm"> 已选择 <strong id="selected-count" class="text-indigo-400">0</strong> 个 Agent </span> </div> <div class="flex items-center gap-2"> <!-- 状态更新 --> <select id="batch-status-select" onchange="handleBatchStatusChange(this.value)" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"> <option value="">更新状态...</option> <option value="active">🟢 活跃</option> <option value="paused">🟡 暂停</option> <option value="maintenance">🔧 维护中</option> <option value="archived">⚪ 归档</option> </select> <!-- 优先级更新 --> <select id="batch-priority-select" onchange="handleBatchPriorityChange(this.value)" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500"> <option value="">更新优先级...</option> <option value="low">🔵 低</option> <option value="medium">🟡 中</option> <option value="high">🟠 高</option> <option value="critical">🔴 紧急</option> </select> <!-- 导出 --> <div class="relative"> <button onclick="toggleBatchDropdown('export-dropdown')" class="bg-purple-500/20 hover:bg-purple-500/30 border border-purple-500/50 text-purple-400 px-3 py-2 rounded-lg text-sm transition"> 📤 导出 </button> <div id="export-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-secondary border border-border-color rounded-lg shadow-xl z-50"> <button onclick="handleBatchExport('json')" class="block w-full text-left px-4 py-2 text-sm hover:bg-bg-tertiary"> 📄 JSON </button> <button onclick="handleBatchExport('csv')" class="block w-full text-left px-4 py-2 text-sm hover:bg-bg-tertiary"> 📊 CSV </button> </div> </div> <!-- 更多操作 --> <div class="relative"> <button onclick="toggleBatchDropdown('more-dropdown')" class="bg-gray-500/20 hover:bg-gray-500/30 border border-gray-500/50 text-gray-400 px-3 py-2 rounded-lg text-sm transition"> ⋯ 更多 </button> <div id="more-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-secondary border border-border-color rounded-lg shadow-xl z-50"> <button onclick="handleBatchAssign()" class="block w-full text-left px-4 py-2 text-sm hover:bg-bg-tertiary"> 👤 分配给用户 </button> <button onclick="handleBatchAddTags()" class="block w-full text-left px-4 py-2 text-sm hover:bg-bg-tertiary"> 🏷️ 添加标签 </button> <button onclick="handleBatchRemoveTags()" class="block w-full text-left px-4 py-2 text-sm hover:bg-bg-tertiary"> 🏷️ 移除标签 </button> <hr class="border-border-color my-1"> <button onclick="handleBatchDelete()" class="block w-full text-left px-4 py-2 text-sm text-red-400 hover:bg-error-color/10"> 🗑️ 删除选中 </button> <button onclick="handleBatchRestore()" class="block w-full text-left px-4 py-2 text-sm text-green-400 hover:bg-success-color/10"> ♻️ 恢复选中 </button> </div> </div> <button onclick="BatchOperations.clearSelection()" class="text-gray-400 hover:text-white text-sm"> ✕ 取消选择 </button> </div> </div> <!-- 进度条 --> <div id="batch-progress" class="hidden mt-3"> <div class="flex items-center gap-2"> <div class="flex-1 bg-white/10 rounded-full h-2 overflow-hidden"> <div id="batch-progress-bar" class="h-full bg-gradient-to-r from-indigo-500 to-purple-500 animate-pulse" style="width: 0%"></div> </div> <span id="batch-progress-text" class="text-xs text-gray-400">处理中...</span> </div> </div> </div> </div> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color);"> <h3 style="color: #10b981; margin-bottom: 12px;">🗳️ 民主讨论</h3> <p style="color: var(--text-secondary); font-size: 0.9em;">去中心化治理与投票</p> <p style="margin-top: 12px; font-size: 0.85em; color: var(--text-secondary);"> <kbd>g</kbd> + <kbd>m</kbd> 快速跳转 </p> </div> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color);"> <h3 style="color: #f59e0b; margin-bottom: 12px;">🛠️ 开发团队</h3> <p style="color: var(--text-secondary); font-size: 0.9em;">开发团队控制台</p> <p style="margin-top: 12px; font-size: 0.85em; color: var(--text-secondary);"> <kbd>g</kbd> + <kbd>c</kbd> 快速跳转 </p> </div> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color);"> <h3 style="color: #ef4444; margin-bottom: 12px;">📋 操作日志</h3> <p style="color: var(--text-secondary); font-size: 0.9em;">系统操作记录与审计</p> <p style="margin-top: 12px; font-size: 0.85em; color: var(--text-secondary);"> <kbd>g</kbd> + <kbd>l</kbd> 快速跳转 </p> </div> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color);"> <h3 style="color: #3b82f6; margin-bottom: 12px;">⚙️ 设置中心</h3> <p style="color: var(--text-secondary); font-size: 0.9em;">系统设置与偏好配置</p> <p style="margin-top: 12px; font-size: 0.85em; color: var(--text-secondary);"> <kbd>g</kbd> + <kbd>s</kbd> 快速跳转 </p> </div> </div> <!-- Dashboard 小部件区域 --> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color); margin-top: 30px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"> <h2 style="color: var(--accent-color);">📦 Dashboard 小部件</h2> <button onclick="if(widgetSystem) widgetSystem.resetWidgetConfigs()" style="background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); padding: 8px 16px; border-radius: 6px; cursor: pointer;"> 🔄 重置布局 </button> </div> <!-- 可拖拽小部件容器 --> <div id="widgets-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;"> <!-- 小部件将由 widgets.js 动态渲染 --> </div> </div> <!-- 快捷键概览 --> <div style="background: var(--bg-secondary); border-radius: 12px; padding: 24px; border: 1px solid var(--border-color); margin-top: 30px;"> <h2 style="margin-bottom: 20px; color: var(--accent-color);">⌨️ 常用快捷键</h2> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;"> <div style="display: flex; align-items: center; gap: 10px;"> <kbd style="background: var(--bg-tertiary); padding: 6px 12px; border-radius: 6px; min-width: 80px; text-align: center;">Ctrl+K</kbd> <span style="color: var(--text-secondary);">搜索</span> </div> <div style="display: flex; align-items: center; gap: 10px;"> <kbd style="background: var(--bg-tertiary); padding: 6px 12px; border-radius: 6px; min-width: 80px; text-align: center;">Ctrl+S</kbd> <span style="color: var(--text-secondary);">保存</span> </div> <div style="display: flex; align-items: center; gap: 10px;"> <kbd style="background: var(--bg-tertiary); padding: 6px 12px; border-radius: 6px; min-width: 80px; text-align: center;">Ctrl+R</kbd> <span style="color: var(--text-secondary);">刷新</span> </div> <div style="display: flex; align-items: center; gap: 10px;"> <kbd style="background: var(--bg-tertiary); padding: 6px 12px; border-radius: 6px; min-width: 80px; text-align: center;">Ctrl+T</kbd> <span style="color: var(--text-secondary);">切换主题</span> </div> <div style="display: flex; align-items: center; gap: 10px;"> <kbd style="background: var(--bg-tertiary); padding: 6px 12px; border-radius: 6px; min-width: 80px; text-align: center;">?</kbd> <span style="color: var(--text-secondary);">帮助</span> </div> <div style="display: flex; align-items: center; gap: 10px;"> <kbd style="background: var(--bg-tertiary); padding: 6px 12px; border-radius: 6px; min-width: 80px; text-align: center;">Esc</kbd> <span style="color: var(--text-secondary);">关闭</span> </div> </div> </div> </div> </main> <!-- 页脚 --> <footer> <p>🐾 clawVERSE Dashboard © 2024</p> <p style="margin-top: 10px;"> <a href="dashboard/">Dashboard</a> · <a href="dashboard/agents.html">Agent 议会</a> · <a href="dashboard/settings.html">设置</a> </p> </footer> <!-- 快捷键脚本 --> <script src="dashboard/shortcuts.js"></script> <!-- 小部件系统 --> <script src="dashboard/widgets.js"></script> <!-- 初始化 --> <script> // 隐藏加载屏幕 window.addEventListener('load', () => { setTimeout(() => { document.getElementById('loadingScreen').classList.add('hidden'); }, 500); }); // 全局通知函数 function showNotification(message, type = 'info') { const container = document.getElementById('notificationsContainer'); const notification = document.createElement('div'); notification.className = `notification ${type}`; notification.textContent = message; container.appendChild(notification); setTimeout(() => { notification.style.animation = 'slideIn 0.3s ease reverse'; setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 300); }, 3000); } // 监听快捷键保存事件 document.addEventListener('shortcutSave', () => { showNotification('💾 设置已保存', 'success'); }); // 监听快捷键刷新事件 document.addEventListener('shortcutRefresh', () => { window.location.reload(); }); // 监听快捷键切换主题事件 document.addEventListener('shortcutToggleTheme', () => { document.body.classList.toggle('dark-mode'); showNotification('🎨 主题已切换', 'info'); }); // 监听快捷键新建事件 document.addEventListener('shortcutCreateNew', () => { showNotification('📝 新建功能待实现', 'info'); }); // 监听快捷键显示历史记录事件 document.addEventListener('shortcutShowHistory', () => { showNotification('📜 历史记录待实现', 'info'); }); // 监听快捷键显示通知事件 document.addEventListener('shortcutShowNotifications', () => { showNotification('🔔 通知面板待实现', 'info'); }); console.log('🦞 clawVERSE Dashboard 已加载'); console.log('⌨️ 按 ? 查看快捷键帮助'); </script> </body> </html>

Lightweight company profile from the Semantil web index.