feat: 功能2 - 绑定/解绑 Agent (v0.9.7)

- 添加 BotSettingsModal.vue 机器人设置模态框
- 显示在线 Agent 列表
- 实现 Agent 绑定功能
- 实现 Agent 解绑功能
- HomeView 添加设置按钮（hover 显示）
- Store 添加 bindBotAgent 方法
- 显示机器人绑定状态

frontend/src/views/HomeView.vue

@@ -2,14 +2,17 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
-import { useChatStore } from '@/stores/chat'
+import { useChatStore, type Bot } from '@/stores/chat'
 import CreateBotModal from '@/components/chat/CreateBotModal.vue'
+import BotSettingsModal from '@/components/chat/BotSettingsModal.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
 const chatStore = useChatStore()
 
 const showCreateBot = ref(false)
+const showBotSettings = ref(false)
+const selectedBot = ref<Bot | null>(null)
 
 onMounted(async () => {
   await chatStore.fetchBots()
@@ -28,9 +31,23 @@ function resumeChat(sessionId: string) {
   router.push({ name: 'chat', params: { sessionId } })
 }
 
-function handleBotCreated(bot: any) {
+function handleBotCreated(bot: Bot) {
   chatStore.bots.push(bot)
 }
+
+function openBotSettings(bot: Bot, event: Event) {
+  event.stopPropagation()
+  selectedBot.value = bot
+  showBotSettings.value = true
+}
+
+function handleBotUpdated(bot: Bot) {
+  const index = chatStore.bots.findIndex(b => b.id === bot.id)
+  if (index !== -1) {
+    chatStore.bots[index] = bot
+  }
+  selectedBot.value = bot
+}
 </script>
 
 <template>
@@ -53,7 +70,10 @@ function handleBotCreated(bot: any) {
     <main class="main-content">
       <!-- Bot List -->
       <section class="section">
-        <h2 class="section-title">选择机器人开始聊天</h2>
+        <div class="section-header">
+          <h2 class="section-title">选择机器人开始聊天</h2>
+          <span class="bot-count">{{ chatStore.bots.length }} 个机器人</span>
+        </div>
         <div class="bot-grid">
           <div
             v-for="bot in chatStore.bots"
@@ -70,6 +90,12 @@ function handleBotCreated(bot: any) {
                 {{ bot.status === 'online' ? '🟢 在线' : '⚪ 离线' }}
               </p>
             </div>
+            <button
+              class="settings-btn"
+              @click="openBotSettings(bot, $event)"
+            >
+              ⚙️
+            </button>
           </div>
         </div>
       </section>
@@ -110,6 +136,13 @@ function handleBotCreated(bot: any) {
       @close="showCreateBot = false"
       @created="handleBotCreated"
     />
+
+    <BotSettingsModal
+      v-if="showBotSettings && selectedBot"
+      :bot="selectedBot"
+      @close="showBotSettings = false"
+      @updated="handleBotUpdated"
+    />
   </div>
 </template>
 
@@ -192,11 +225,22 @@ function handleBotCreated(bot: any) {
   margin-bottom: var(--spacing-xl);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-md);
+}
+
 .section-title {
   font-size: var(--font-size-md);
   font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: var(--spacing-md);
+}
+
+.bot-count {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
 }
 
 .bot-grid {
@@ -214,6 +258,7 @@ function handleBotCreated(bot: any) {
   gap: var(--spacing-md);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
+  position: relative;
 }
 
 .bot-card:hover {
@@ -221,6 +266,32 @@ function handleBotCreated(bot: any) {
   box-shadow: var(--shadow-md);
 }
 
+.settings-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: var(--bg-tertiary);
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.bot-card:hover .settings-btn {
+  opacity: 1;
+}
+
+.settings-btn:hover {
+  background: var(--bg-primary);
+}
+
 .bot-avatar {
   width: 48px;
   height: 48px;