feat: 重构前后端架构，添加Go后端和Python Agent服务
- 新增 Go 语言后端服务(server/)，包含用户认证、Agent管理、数据库连接等API - 新增 Python Agent 服务(agent/)，实现Agent核心逻辑和工具集 - 前端从原生HTML迁移到Vue.js框架(web/src/) - 添加 Docker Compose 支持(docker-compose.yml) - 添加项目架构文档(docs/ARCHITECTURE.md) - 添加环境变量示例(.env.example)和本地启动脚本(start-local.ps1) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
337
docs/agents.html
Normal file
337
docs/agents.html
Normal file
@@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Remo MVP Design Interface</title>
|
||||
<!-- 引入Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- 引入Font Awesome图标 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<!-- 自定义Tailwind配置 -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#1E6BF9',
|
||||
figma: '#F24E1E',
|
||||
action: '#000000',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/tailwindcss">
|
||||
@layer utilities {
|
||||
.node-shadow {
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
}
|
||||
.flow-line {
|
||||
@apply bg-gray-300 w-0.5;
|
||||
}
|
||||
.flow-line-h {
|
||||
@apply bg-gray-300 h-0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 font-sans h-screen flex flex-col overflow-hidden">
|
||||
<!-- 顶部浏览器模拟栏 -->
|
||||
<div class="bg-white border-b border-gray-200 px-4 py-2 flex items-center gap-2">
|
||||
<div class="flex gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<div class="flex-1 mx-4 bg-gray-100 rounded-md px-3 py-1 text-sm text-gray-500 flex items-center gap-2">
|
||||
<i class="fa-solid fa-lock text-xs"></i>
|
||||
<span>Remo MVP Design</span>
|
||||
</div>
|
||||
<div class="flex gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-chevron-left"></i>
|
||||
<i class="fa-solid fa-chevron-right opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容三栏布局 -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col h-full">
|
||||
<!-- 顶部导航信息 -->
|
||||
<div class="p-4 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<i class="fa-solid fa-th text-gray-600"></i>
|
||||
<span class="font-medium text-gray-800">Designera</span>
|
||||
<span class="text-gray-400">|</span>
|
||||
<span class="text-gray-600 text-sm">Web Design</span>
|
||||
</div>
|
||||
<i class="fa-solid fa-window-maximize text-gray-500"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500">Drafts</p>
|
||||
</div>
|
||||
|
||||
<!-- 文件/资产标签栏 -->
|
||||
<div class="px-4 py-2 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex gap-4">
|
||||
<button class="text-sm font-medium text-gray-800 border-b-2 border-primary pb-1">File</button>
|
||||
<button class="text-sm font-medium text-gray-400 pb-1">Assets</button>
|
||||
</div>
|
||||
<i class="fa-solid fa-magnifying-glass text-gray-500 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pages区域 -->
|
||||
<div class="p-4 border-b border-gray-200">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Pages</span>
|
||||
<button class="text-gray-500 hover:text-gray-800">
|
||||
<i class="fa-solid fa-plus text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-gray-100 rounded px-3 py-2">
|
||||
<i class="fa-solid fa-palette text-sm text-gray-600"></i>
|
||||
<span class="text-sm font-medium text-gray-800">Design</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layers区域 -->
|
||||
<div class="p-4 flex-1 overflow-y-auto">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<i class="fa-solid fa-layer-group text-xs text-gray-500"></i>
|
||||
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Layers</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间画布区域 -->
|
||||
<main class="flex-1 bg-gray-50 relative overflow-auto">
|
||||
<!-- 流程图容器 -->
|
||||
<div class="min-h-full w-full flex flex-col items-center py-10 px-4">
|
||||
<!-- 节点1 -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">1. Start your project from sketch</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线1 -->
|
||||
<div class="flow-line h-6"></div>
|
||||
|
||||
<!-- 节点2 Action黑色节点 -->
|
||||
<div class="node bg-action rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-5 h-5 flex items-center justify-center">
|
||||
<i class="fa-solid fa-bolt text-white text-sm"></i>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="font-medium text-white">Action</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-white/70">
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white/90 ml-8 mt-1">2. Take a frame and start designing</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线2 -->
|
||||
<div class="flow-line h-6"></div>
|
||||
|
||||
<!-- 节点3 -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">3. Add few shapes</p>
|
||||
</div>
|
||||
|
||||
<!-- 连接线3 -->
|
||||
<div class="flow-line h-6"></div>
|
||||
|
||||
<!-- 节点4 -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">4. Split into paths</p>
|
||||
</div>
|
||||
|
||||
<!-- 分支连接线 -->
|
||||
<div class="w-full max-w-2xl relative flex justify-center">
|
||||
<div class="flow-line h-6"></div>
|
||||
<div class="absolute top-6 w-full flex justify-center">
|
||||
<div class="flow-line-h w-2/3"></div>
|
||||
</div>
|
||||
<div class="absolute top-6 w-full flex justify-between px-[12.5%]">
|
||||
<div class="flow-line h-6"></div>
|
||||
<div class="flow-line h-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分支标签 -->
|
||||
<div class="w-full max-w-2xl flex justify-between px-[12.5%] mb-6">
|
||||
<span class="bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">Path A</span>
|
||||
<span class="bg-primary text-white text-xs font-medium px-3 py-1 rounded-full">Path B</span>
|
||||
</div>
|
||||
|
||||
<!-- 双分支节点 -->
|
||||
<div class="w-full max-w-2xl flex justify-between px-4">
|
||||
<!-- 节点5 Path A -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">5. Split into paths</p>
|
||||
</div>
|
||||
|
||||
<!-- 节点6 Path B -->
|
||||
<div class="node bg-white rounded-lg node-shadow w-72 p-3 relative z-10">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" checked class="w-5 h-5 rounded text-primary focus:ring-primary">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<i class="fa-brands fa-figma text-figma text-lg"></i>
|
||||
<span class="font-medium text-gray-800">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-gray-500">
|
||||
<i class="fa-solid fa-arrow-up-right-from-square text-sm"></i>
|
||||
<i class="fa-solid fa-pen text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700 ml-8 mt-1">6. Split into paths</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部工具栏 -->
|
||||
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white rounded-full shadow-lg px-4 py-2 flex items-center gap-4">
|
||||
<button class="text-primary p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-cursor-pointer"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-hand"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-regular fa-square"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-t"></i>
|
||||
</button>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-regular fa-circle"></i>
|
||||
</button>
|
||||
<div class="w-px h-5 bg-gray-200"></div>
|
||||
<button class="text-gray-600 p-1.5 rounded hover:bg-gray-100">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 右侧Copilot面板 -->
|
||||
<aside class="w-96 bg-white border-l border-gray-200 flex flex-col h-full">
|
||||
<!-- 顶部Copilot品牌区 -->
|
||||
<div class="p-6 flex flex-col items-center text-center border-b border-gray-200">
|
||||
<div class="w-16 h-16 rounded-xl bg-gradient-to-tr from-blue-500 via-purple-500 to-orange-400 mb-4 flex items-center justify-center">
|
||||
<div class="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-lg"></div>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-gray-800 mb-2">Hey, what's on your mind today?</h2>
|
||||
<button class="bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium px-4 py-2 rounded-lg transition">
|
||||
Get advice
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 聊天对话区 -->
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
|
||||
<!-- Copilot消息 -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<div class="w-5 h-5 rounded bg-gradient-to-tr from-blue-500 to-purple-500 flex items-center justify-center">
|
||||
<i class="fa-brands fa-microsoft text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">Copilot</span>
|
||||
</div>
|
||||
<div class="bg-gray-100 rounded-2xl rounded-tl-none px-4 py-3 text-gray-700 ml-7">
|
||||
Advice on what, exactly? Whether it's life decisions, career choices, relationships, or something entirely random, I'm here to help. Let me know the topic, and we'll dive into it together!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<div class="flex flex-col gap-2 items-end">
|
||||
<div class="bg-gray-800 rounded-2xl rounded-tr-none px-4 py-3 text-white max-w-[80%]">
|
||||
What are some common life decisions people seek advice on?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入框 -->
|
||||
<div class="p-4 border-t border-gray-200">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Ask anything..." class="w-full border border-gray-300 rounded-full px-4 py-3 pr-12 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
|
||||
<button class="absolute right-3 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
|
||||
<i class="fa-solid fa-arrow-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 mt-2 ml-2 text-xs text-gray-500">
|
||||
<i class="fa-brands fa-microsoft"></i>
|
||||
<span>Copilot by Microsoft</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user