07079293f4
Major changes: - Add HandList.tsx component for left sidebar - Add HandTaskPanel.tsx for middle content area - Restructure Sidebar tabs: 分身/HANDS/Workflow - Remove Hands tab from RightPanel - Localize all UI text to Chinese - Archive legacy OpenClaw documentation - Add Hands integration lessons document - Update feature checklist with new components UI improvements: - Left sidebar now shows Hands list with status icons - Middle area shows selected Hand's tasks and results - Consistent styling with Tailwind CSS - Chinese status labels and buttons Documentation: - Create docs/archive/openclaw-legacy/ for old docs - Add docs/knowledge-base/hands-integration-lessons.md - Update docs/knowledge-base/feature-checklist.md - Update docs/knowledge-base/README.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
571 lines
28 KiB
HTML
571 lines
28 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>Browser Agent - ZCLAW</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: #fafafa;
|
||
}
|
||
|
||
.sidebar-item:hover {
|
||
background-color: rgba(0,0,0,0.03);
|
||
}
|
||
|
||
.sidebar-item.active {
|
||
background-color: #f3f4f6;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background: #e5e7eb;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.chat-bubble {
|
||
max-width: 85%;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
background: #f3f4f6;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #6b7280;
|
||
margin-right: 4px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.code-block {
|
||
background: #f9fafb;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.right-panel {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.file-item:hover {
|
||
background-color: #f9fafb;
|
||
}
|
||
</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">
|
||
<!-- ZCLAW -->
|
||
<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-gradient-to-br from-orange-400 to-red-500 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">ZCLAW</span>
|
||
<span class="text-xs text-gray-400">08:40</span>
|
||
</div>
|
||
<p class="text-xs text-gray-500 truncate">一# ✅ ZCLAW 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">08:40</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>
|
||
|
||
<!-- 监控 -->
|
||
<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>
|
||
|
||
<!-- Browser Agent（选中） -->
|
||
<div class="sidebar-item active mx-2 px-3 py-3 rounded-lg cursor-pointer mb-1 shadow-sm bg-white border border-gray-100">
|
||
<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-semibold text-gray-900 truncate">Browser Agent</span>
|
||
<span class="text-xs text-gray-400">08:40</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-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">14:40</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 min-w-0">
|
||
<!-- 顶部标题栏 -->
|
||
<div class="h-14 border-b border-gray-100 flex items-center justify-between px-6 flex-shrink-0 bg-white">
|
||
<h2 class="font-semibold text-gray-900 text-base">Browser Agent</h2>
|
||
<div class="flex items-center gap-4">
|
||
<div class="flex items-center gap-2 text-sm text-orange-600 bg-orange-50 px-3 py-1.5 rounded-full border border-orange-100">
|
||
<i data-lucide="alert-triangle" class="w-4 h-4">
|
||
</i>
|
||
<span>连接中断，点击重试</span>
|
||
<button class="ml-2 text-xs bg-white px-2 py-1 rounded border border-orange-200 hover:bg-orange-50">重新连接</button>
|
||
<button class="text-xs text-gray-500 hover:text-gray-700">重置连接</button>
|
||
</div>
|
||
</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 bg-blue-500 rounded-lg flex items-center justify-center text-white flex-shrink-0">
|
||
<i data-lucide="globe" class="w-4 h-4">
|
||
</i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="chat-bubble bg-white border border-gray-200 rounded-2xl rounded-tl-sm p-5 shadow-sm">
|
||
<div class="text-gray-800 space-y-4">
|
||
<p>完成！详细分析报告已保存到：</p>
|
||
|
||
<div class="flex items-start gap-2 bg-gray-50 p-3 rounded-lg border border-gray-100">
|
||
<i data-lucide="file-text" class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0">
|
||
</i>
|
||
<code class="text-xs text-gray-600 break-all">C:\Users\欧瑞\.openclaw-ZCLAW\workspace\Qclaw-ZCLAW 技术栈分析与独立实现方案.md</code>
|
||
</div>
|
||
|
||
<h3 class="font-bold text-lg flex items-center gap-2 mt-6">
|
||
<span class="text-green-600">📊</span>
|
||
核心发现总结
|
||
</h3>
|
||
|
||
<h4 class="font-semibold text-gray-900 mt-4">两个产品的本质</h4>
|
||
|
||
<!-- 表格 -->
|
||
<div class="overflow-x-auto border border-gray-200 rounded-lg mt-2">
|
||
<table class="w-full text-sm">
|
||
<thead class="bg-gray-50 text-gray-600 font-medium">
|
||
<tr>
|
||
<th class="px-4 py-3 text-left border-b border-gray-200">产品</th>
|
||
<th class="px-4 py-3 text-left border-b border-gray-200">本质</th>
|
||
<th class="px-4 py-3 text-left border-b border-gray-200">技术来源</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-gray-100">
|
||
<tr>
|
||
<td class="px-4 py-3 font-medium">腾讯 Qclaw</td>
|
||
<td class="px-4 py-3 text-gray-600">OpenClaw 的微信封装版</td>
|
||
<td class="px-4 py-3 text-gray-600">基于 OpenClaw 开源框架 + WeChatFerry</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-4 py-3 font-medium">智谱 ZCLAW</td>
|
||
<td class="px-4 py-3 text-gray-600">手机自动化 Agent</td>
|
||
<td class="px-4 py-3 text-gray-600">自研 GLM-4.1V-9B 模型 + ADB 控制</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h4 class="font-semibold text-gray-900 mt-6">技术栈对比</h4>
|
||
|
||
<!-- 代码块 -->
|
||
<div class="code-block mt-2">
|
||
<div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-gray-50 rounded-t-lg">
|
||
<span class="text-xs text-gray-500 font-medium">text</span>
|
||
<button class="text-xs text-gray-500 flex items-center gap-1 hover:text-gray-700">
|
||
<i data-lucide="copy" class="w-3 h-3">
|
||
</i>
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<pre class="p-4 overflow-x-auto text-xs text-gray-700 leading-relaxed">
|
||
腾讯 Qclaw:
|
||
├─ 微信接入：WeChatFerry
|
||
├─ Agent 引擎：OpenClaw PI Agent
|
||
├─ 模型：Kimi-2.5 + 腾讯混元
|
||
└─ 执行：Node.js + Playwright
|
||
|
||
智谱 ZCLAW:
|
||
├─ 系统控制：ADB + Android 无障碍服务
|
||
├─ Agent 引擎：AutoGLM 自研架构
|
||
├─ 模型：GLM-4.1V-9B 多模态模型
|
||
└─ 执行：Python + Appium</pre>
|
||
</div>
|
||
</div>
|
||
</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="bg-orange-500 text-white p-4 rounded-2xl rounded-tr-sm shadow-md">
|
||
<p class="leading-relaxed">
|
||
到小红书搜索关于龙虾的最热门的笔记，选五个整理一下笔记的内容、点赞数和前三条评论到Excel里，放在桌面就行，名字叫"笔记整理"。
|
||
</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-3 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="发送给 ZCLAW" class="w-full bg-transparent border-none focus:outline-none text-gray-700 placeholder-gray-400 text-sm">
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 pr-1">
|
||
<button class="flex items-center gap-1 px-2 py-1.5 text-xs text-gray-500 hover:bg-gray-200 rounded-md transition-colors">
|
||
<span>qwen3.5-plus</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>
|
||
</main>
|
||
|
||
<!-- 右侧边栏 -->
|
||
<aside class="w-80 bg-white border-l border-gray-200 flex flex-col flex-shrink-0 right-panel">
|
||
<!-- 顶部工具栏 -->
|
||
<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 font-medium">去购买</button>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<button onclick="switchPanel('files')" id="btn-files" class="flex items-center gap-1 text-xs text-gray-900 font-medium bg-gray-100 px-2 py-1.5 rounded-md transition-colors">
|
||
<i data-lucide="file-text" class="w-4 h-4">
|
||
</i>
|
||
<span>文件</span>
|
||
</button>
|
||
<button onclick="switchPanel('agent')" id="btn-agent" class="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 px-2 py-1.5 rounded-md transition-colors">
|
||
<i data-lucide="user" class="w-4 h-4">
|
||
</i>
|
||
<span>Agent</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 文件列表面板 -->
|
||
<div id="panel-files" class="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-3">
|
||
<!-- 文件1 -->
|
||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 text-orange-600">
|
||
<i data-lucide="file-archive" class="w-5 h-5">
|
||
</i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-medium text-gray-900 text-sm truncate">openclaw-extension.zip</div>
|
||
<div class="text-xs text-gray-500 mt-0.5 truncate">$env:TEMP\openclaw-extension.zip</div>
|
||
</div>
|
||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||
<i data-lucide="external-link" class="w-4 h-4">
|
||
</i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 文件2 -->
|
||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 text-blue-600">
|
||
<i data-lucide="file-text" class="w-5 h-5">
|
||
</i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-medium text-gray-900 text-sm truncate">OpenClaw-技术栈分析.md</div>
|
||
<div class="text-xs text-gray-500 mt-0.5 flex items-center gap-1">
|
||
<span class="text-orange-600">#</span>
|
||
<span>OpenClaw/ZCLAW 技术栈完整分析</span>
|
||
</div>
|
||
</div>
|
||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||
<i data-lucide="external-link" class="w-4 h-4">
|
||
</i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 文件3 -->
|
||
<div class="file-item flex items-start gap-3 p-3 rounded-lg cursor-pointer group">
|
||
<div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 text-gray-600">
|
||
<i data-lucide="file-text" class="w-5 h-5">
|
||
</i>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="font-medium text-gray-900 text-sm truncate">Qclaw-ZCLAW 技术栈分析与独立实现方案.md</div>
|
||
<div class="text-xs text-gray-500 mt-0.5 truncate">$workspace\Qclaw-ZCLAW 技术栈分析与独立实现方...</div>
|
||
</div>
|
||
<button class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-600">
|
||
<i data-lucide="external-link" class="w-4 h-4">
|
||
</i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Agent信息面板（默认隐藏） -->
|
||
<div id="panel-agent" class="hidden flex-1 overflow-y-auto custom-scrollbar">
|
||
<!-- 头部信息 -->
|
||
<div class="p-6 border-b border-gray-100">
|
||
<div class="flex items-center gap-4 mb-6">
|
||
<div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold">
|
||
Brow
|
||
</div>
|
||
<div>
|
||
<h3 class="font-bold text-lg text-gray-900">qiqi</h3>
|
||
<p class="text-sm text-gray-500">AI coworker</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-6 space-y-6">
|
||
<!-- 关于我 -->
|
||
<div>
|
||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">关于我</h4>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">生日</span>
|
||
<span class="text-gray-400">—</span>
|
||
</div>
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">风格</span>
|
||
<div class="text-right text-sm text-gray-700">
|
||
<div>sharp</div>
|
||
<div>resourceful</div>
|
||
<div>no-nonsense</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">emoji</span>
|
||
<span class="text-lg">🐙</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我眼中的你 -->
|
||
<div>
|
||
<div class="flex justify-between items-center mb-3">
|
||
<h4 class="font-semibold text-gray-900 text-sm">我眼中的你</h4>
|
||
<span class="text-xs text-gray-400">我知道得越多，帮得越好</span>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">名字</span>
|
||
<span class="text-gray-700 text-sm">iven</span>
|
||
</div>
|
||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">称呼</span>
|
||
<span class="text-gray-700 text-sm">iven</span>
|
||
</div>
|
||
<div class="flex justify-between items-center py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">时区</span>
|
||
<span class="text-gray-700 text-sm">Asia/Shanghai</span>
|
||
</div>
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">专注于</span>
|
||
<div class="flex flex-wrap justify-end gap-1">
|
||
<span class="tag">marketing</span>
|
||
<span class="tag">research</span>
|
||
<span class="tag">coding</span>
|
||
<span class="tag">writing</span>
|
||
<span class="tag">product</span>
|
||
<span class="tag">data</span>
|
||
<span class="tag">design</span>
|
||
<span class="tag">ops</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">备注</span>
|
||
<div class="text-right text-xs text-gray-600 space-y-1">
|
||
<div>Name: iven</div>
|
||
<div>Timezone: Asia/Shanghai</div>
|
||
<div>Language: 中文</div>
|
||
<div>首次上线: 2026-03-11</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的笔记 -->
|
||
<div>
|
||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">我的笔记</h4>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">当前项目</span>
|
||
<span class="text-gray-400 text-sm italic">Current project not recorded yet</span>
|
||
</div>
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">工作流</span>
|
||
<span class="text-gray-600 text-sm">Capture recurring workflows here</span>
|
||
</div>
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">记忆系统</span>
|
||
<span class="text-gray-600 text-sm text-right max-w-[150px]">Summarize stable facts and working patterns</span>
|
||
</div>
|
||
<div class="flex justify-between items-start py-2 border-b border-gray-50">
|
||
<span class="text-gray-500 text-sm">工具链</span>
|
||
<span class="text-gray-600 text-sm text-right max-w-[180px]">Record important tools, services, and local setup here</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重要教训 -->
|
||
<div>
|
||
<h4 class="font-semibold text-gray-900 mb-3 text-sm">重要教训</h4>
|
||
<div class="space-y-2 text-sm text-gray-600">
|
||
<div class="flex gap-2">
|
||
<span class="text-gray-400">1.</span>
|
||
<span>Confirm before making risky changes</span>
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<span class="text-gray-400">2.</span>
|
||
<span>Persist important facts so they survive the session</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<script>
|
||
lucide.createIcons();
|
||
|
||
function switchPanel(panel) {
|
||
const filesPanel = document.getElementById('panel-files');
|
||
const agentPanel = document.getElementById('panel-agent');
|
||
const btnFiles = document.getElementById('btn-files');
|
||
const btnAgent = document.getElementById('btn-agent');
|
||
|
||
if (panel === 'files') {
|
||
filesPanel.classList.remove('hidden');
|
||
agentPanel.classList.add('hidden');
|
||
|
||
btnFiles.classList.add('bg-gray-100', 'text-gray-900');
|
||
btnFiles.classList.remove('text-gray-500');
|
||
|
||
btnAgent.classList.remove('bg-gray-100', 'text-gray-900');
|
||
btnAgent.classList.add('text-gray-500');
|
||
} else {
|
||
filesPanel.classList.add('hidden');
|
||
agentPanel.classList.remove('hidden');
|
||
|
||
btnAgent.classList.add('bg-gray-100', 'text-gray-900');
|
||
btnAgent.classList.remove('text-gray-500');
|
||
|
||
btnFiles.classList.remove('bg-gray-100', 'text-gray-900');
|
||
btnFiles.classList.add('text-gray-500');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |