1 line
16 KiB
HTML
1 line
16 KiB
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AutoClaw</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://unpkg.com/lucide@latest"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f9fafb; } .sidebar-item:hover { background-color: rgba(0,0,0,0.03); } .chat-bubble-assistant { background: white; border: 1px solid #e5e7eb; border-radius: 12px; border-bottom-left-radius: 4px; } .chat-bubble-user { background: #f97316; color: white; border-radius: 12px; border-bottom-right-radius: 4px; } .option-card { background: white; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid transparent; } .toast { background: rgba(0,0,0,0.75); backdrop-filter: blur(10px); } .agent-avatar { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); } .thinking-dot { animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .file-preview { background: #fafafa; border-left: 3px solid #f97316; } </style> </head> <body class="h-screen flex overflow-hidden text-gray-800 text-sm"> <!-- 左侧边栏 --> <aside class="w-64 bg-gray-50 border-r border-gray-200 flex flex-col flex-shrink-0"> <!-- 顶部标签 --> <div class="flex border-b border-gray-200 bg-white"> <button class="flex-1 py-3 px-4 text-xs font-medium text-gray-900 border-b-2 border-gray-900">分身</button> <button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">IM 频道</button> <button class="flex-1 py-3 px-4 text-xs font-medium text-gray-500 hover:text-gray-700">定时任务</button> </div> <!-- Agent 列表 --> <div class="flex-1 overflow-y-auto custom-scrollbar py-2"> <!-- AutoClaw --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer bg-white shadow-sm border border-gray-100 mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 agent-avatar rounded-xl flex items-center justify-center text-white flex-shrink-0"> <i data-lucide="cat" class="w-6 h-6"></i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-semibold text-gray-900 truncate">AutoClaw</span> <span class="text-xs text-gray-400">15:45</span> </div> <p class="text-xs text-gray-500 truncate leading-relaxed">好的! **选项 A 确认** + **加入 Tauri...</p> </div> </div> </div> <!-- 沉思小助手 --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center text-blue-600 flex-shrink-0"> <i data-lucide="search" class="w-5 h-5"></i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">沉思小助手</span> <span class="text-xs text-gray-400">15:05</span> </div> <div class="flex items-center gap-1"> <i data-lucide="check-square" class="w-3.5 h-3.5 text-green-500"></i> <p class="text-xs text-gray-500 truncate">已将今天的工作进展持久化到 'm...</p> </div> </div> </div> </div> <!-- Browser Agent --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-blue-500 rounded-xl flex items-center justify-center text-white flex-shrink-0"> <i data-lucide="globe" class="w-5 h-5"></i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">Browser Agent</span> <span class="text-xs text-gray-400">12:04</span> </div> <p class="text-xs text-gray-500 truncate">完成! 详细分析报告已保存到: **...</p> </div> </div> </div> <!-- 监控 --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center text-orange-600 flex-shrink-0"> <i data-lucide="bar-chart-2" class="w-5 h-5"></i> </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">监控</span> <span class="text-xs text-gray-400">08:40</span> </div> <p class="text-xs text-orange-600 truncate">+ 新分身</p> </div> </div> </div> <!-- 如果我在新的电脑上面... --> <div class="sidebar-item mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1"> <div class="flex items-start gap-3"> <div class="w-10 h-10 bg-purple-500 rounded-xl flex items-center justify-center text-white flex-shrink-0 text-xs font-bold"> 如果 </div> <div class="flex-1 min-w-0"> <div class="flex justify-between items-center mb-0.5"> <span class="font-medium text-gray-900 truncate">如果我在新的电脑上面...</span> <span class="text-xs text-gray-400">15:07</span> </div> <p class="text-xs text-gray-500 truncate">**可以迁移，但要拷对目录。** ## 关...</p> </div> </div> </div> </div> <!-- 底部用户 --> <div class="p-3 border-t border-gray-200 bg-gray-50"> <div class="flex items-center gap-3"> <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold"> 用 </div> <span class="font-medium text-gray-700">用户7141</span> <button class="ml-auto text-gray-400 hover:text-gray-600"> <i data-lucide="settings" class="w-4 h-4"></i> </button> </div> </div> </aside> <!-- 中间聊天区域 --> <main class="flex-1 flex flex-col bg-white relative"> <!-- 顶部标题栏 --> <div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0"> <div class="flex items-center gap-2"> <h2 class="font-semibold text-gray-900">AutoClaw</h2> <span class="text-xs text-gray-400 flex items-center gap-1"> <span class="w-1.5 h-1.5 bg-gray-400 rounded-full thinking-dot"></span> 正在输入中 </span> </div> </div> <!-- 聊天内容区 --> <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6"> <!-- AI消息 --> <div class="flex gap-4"> <div class="w-8 h-8 agent-avatar rounded-lg flex items-center justify-center text-white flex-shrink-0"> <i data-lucide="cat" class="w-5 h-5"></i> </div> <div class="flex-1 max-w-3xl"> <div class="chat-bubble-assistant p-4 shadow-sm"> <div class="space-y-3 text-gray-700 leading-relaxed"> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>1-2 周上线，快速验证</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>后续逐步增加核心系统</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>优点：快速反馈，降低风险</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400 mt-1">•</span> <span>缺点：早期功能有限</span> </div> </div> </div> <!-- 选项B --> <div class="mt-4"> <h3 class="font-semibold text-gray-900 mb-2">选项 B: 完整开发</h3> <div class="bg-gray-50 rounded-lg p-4 space-y-2 text-gray-600"> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>13 周完成所有 7 个核心系统</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>一次性上线完整产品</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>优点：功能完整，体验更好</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>缺点：周期长，风险高</span> </div> </div> </div> <!-- 选项C --> <div class="mt-4"> <h3 class="font-semibold text-gray-900 mb-2">选项 C: 混合模式</h3> <div class="bg-gray-50 rounded-lg p-4 space-y-2 text-gray-600"> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>4 周完成核心系统（远程执行 + 任务编排 + 持续记忆）</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>先上线验证</span> </div> <div class="flex items-start gap-2"> <span class="text-gray-400">•</span> <span>后续迭代其他系统</span> </div> </div> </div> <!-- 建议 --> <div class="mt-4 text-gray-800"> <p class="font-medium mb-2">我的建议是选项 A，理由：</p> <div class="space-y-1 text-gray-600 ml-4"> <p>1. 你之前强调"轻改造"</p> <p>2. 可以快速验证产品价值</p> <p>3. 降低开发风险</p> <p>4. 用户反馈可以指导后续开发</p> </div> </div> <!-- 问题 --> <div class="mt-4 flex items-center gap-2 text-gray-700"> <span>你倾向于哪个选项？或者有其他想法？</span> <span class="text-lg">🤔</span> </div> </div> </div> <!-- 用户消息 --> <div class="flex gap-4 flex-row-reverse"> <div class="w-8 h-8 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white flex-shrink-0 text-xs font-bold"> 用 </div> <div class="max-w-2xl"> <div class="chat-bubble-user p-4 shadow-md"> <p class="leading-relaxed"> 选项A，同时要打造桌面端。前面不是规划过使用tauri么，最终方案怎么没有体现。你能读取图片么，可以的话我把autoclaw的界面截图给你参考 </p> </div> </div> </div> </div> <!-- 底部输入区 --> <div class="border-t border-gray-100 p-4 bg-white"> <div class="max-w-4xl mx-auto"> <div class="relative flex items-end gap-2 bg-gray-50 rounded-2xl border border-gray-200 p-2 focus-within:border-orange-300 focus-within:ring-2 focus-within:ring-orange-100 transition-all"> <button class="p-2 text-gray-400 hover:text-gray-600 rounded-lg"> <i data-lucide="paperclip" class="w-5 h-5"></i> </button> <div class="flex-1 py-2"> <input type="text" placeholder="发送给 AutoClaw" class="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400"> </div> <div class="flex items-center gap-2 pr-2 pb-1"> <button class="flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors"> <span>glm5</span> <i data-lucide="chevron-down" class="w-3 h-3"></i> </button> <button class="w-8 h-8 bg-gray-900 text-white rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors"> <i data-lucide="arrow-up" class="w-4 h-4"></i> </button> </div> </div> <div class="text-center mt-2 text-xs text-gray-400"> Agent 在本地运行，内容由AI生成 </div> </div> </div> <!-- Toast 提示 --> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 toast text-white px-6 py-4 rounded-xl flex flex-col items-center gap-2 shadow-2xl"> <i data-lucide="check" class="w-8 h-8"></i> <span class="text-sm font-medium">已添加到剪贴板</span> </div> </main> <!-- 右侧边栏 --> <aside class="w-80 bg-white border-l border-gray-200 flex flex-col flex-shrink-0"> <!-- 顶部工具栏 --> <div class="h-14 border-b border-gray-100 flex items-center justify-between px-4 flex-shrink-0"> <div class="flex items-center gap-3"> <div class="flex items-center gap-1 text-gray-600"> <i data-lucide="shopping-cart" class="w-4 h-4"></i> <span class="font-medium">2268</span> </div> <button class="text-xs text-orange-600 hover:underline">去购买</button> </div> <div class="flex items-center gap-3 text-gray-500"> <button class="hover:text-gray-700 flex items-center gap-1 text-xs"> <i data-lucide="file-text" class="w-4 h-4"></i> <span>文件</span> </button> <button class="hover:text-gray-700 flex items-center gap-1 text-xs"> <i data-lucide="user" class="w-4 h-4"></i> <span>Agent</span> </button> </div> </div> <!-- 文件预览 --> <div class="flex-1 overflow-y-auto custom-scrollbar p-4"> <!-- 文件标题 --> <div class="flex items-center justify-between mb-4 text-xs text-gray-500"> <div class="flex items-center gap-1"> <i data-lucide="minus" class="w-3 h-3"></i> <span>zclaw-final-plan.md</span> </div> <div class="flex gap-2"> <i data-lucide="code" class="w-3.5 h-3.5 cursor-pointer hover:text-gray-700"></i> <i data-lucide="copy" class="w-3.5 h-3.5 cursor-pointer hover:text-gray-700"></i> <i data-lucide="more-horizontal" class="w-3.5 h-3.5 cursor-pointer hover:text-gray-700"></i> </div> </div> <!-- 任务成功率卡片 --> <div class="bg-gray-50 rounded-lg border border-gray-100 mb-6 overflow-hidden"> <table class="w-full text-xs"> <tbody class="divide-y divide-gray-100"> <tr> <td class="py-3 px-3 text-gray-600">任务成功率</td> <td class="py-3 px-3 text-right font-medium text-gray-900">> 95%</td> </tr> <tr> <td class="py-3 px-3 text-gray-600">并发用户数</td> <td class="py-3 px-3 text-right font-medium text-gray-900">> 100</td> </tr> </tbody> </table> </div> <!-- 产品指标 --> <div class="mb-6"> <h3 class="font-bold text-gray-900 mb-3 text-sm">产品指标</h3> <div class="bg-gray-50 rounded-lg border border-gray-100 overflow-hidden"> <table class="w-full text-xs"> <thead class="bg-gray-100 text-gray-600"> <tr> <th class="py-2 px-3 text-left font-medium">指标</th> <th class="py-2 px-3 text-right font-medium">目标</th> </tr> </thead> <tbody class="divide-y divide-gray-100 bg-white"> <tr> <td class="py-2.5 px-3 text-gray-700">DAU</td> <td class="py-2.5 px-3 text-right text-gray-900">> 100 (MVP)</td> </tr> <tr> <td class="py-2.5 px-3 text-gray-700">用户留存 (7日)</td> <td class="py-2.5 px-3 text-right text-gray-900">> 40%</td> </tr> <tr> <td class="py-2.5 px-3 text-gray-700">任务完成率</td> <td class="py-2.5 px-3 text-right text-gray-900">> 90%</td> </tr> <tr> <td class="py-2.5 px-3 text-gray-700">NPS</td> <td class="py-2.5 px-3 text-right text-gray-900">> 50</td> </tr> </tbody> </table> </div> </div> <!-- 下一步行动 --> <div> <h3 class="font-bold text-gray-900 mb-3 text-sm flex items-center gap-2"> <span class="w-5 h-5 bg-orange-500 rounded-full flex items-center justify-center text-white text-xs"> <i data-lucide="target" class="w-3 h-3"></i> </span> 下一步行动 </h3> <!-- 立即执行 --> <div class="mb-4"> <h4 class="text-xs font-semibold text-gray-900 mb-2 ml-7">立即执行 (今天)</h4> <ul class="space-y-2 ml-7"> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0"></div> <span>创建 GitHub 仓库</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0"></div> <span>初始化项目结构</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0"></div> <span>配置 CI/CD</span> </li> </ul> </div> <!-- 本周执行 --> <div> <h4 class="text-xs font-semibold text-gray-900 mb-2 ml-7">本周执行</h4> <ul class="space-y-2 ml-7"> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0"></div> <span>设计数据库 Schema</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0"></div> <span>搭建基础框架</span> </li> <li class="flex items-start gap-2 text-xs text-gray-600"> <div class="w-3 h-3 border border-gray-300 rounded-sm mt-0.5 flex-shrink-0"></div> <span>开始远程执行系统开发</span> </li> </ul> </div> </div> <!-- 底部版本信息 --> <div class="mt-8 pt-4 border-t border-gray-100 text-xs text-gray-400 text-center"> 方案版本: v1.0.0 Final 文档维护: ZCLAW 团队 </div> </div> </aside> <script> lucide.createIcons(); </script> </body> </html> |