From 15b001bab562c4cd505d0178fd1a3d6cb0e802e7 Mon Sep 17 00:00:00 2001
From: "feifei.xu" <307327147@qq.com>
Date: Sun, 15 Mar 2026 11:54:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=9F=E8=83=BD1=20-=20=E6=96=B0?=
 =?UTF-8?q?=E5=BB=BA=E6=9C=BA=E5=99=A8=E4=BA=BA=20(v0.9.6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 CreateBotModal.vue 新建机器人模态框
- 实现12个预设头像选择
- 实现名称/显示名称/描述表单
- HomeView 添加「新建机器人」按钮
- Store 添加 createBot 方法
- Store 添加 fetchAgents 方法
- 表单验证和错误提示
---
 .../src/components/chat/CreateBotModal.vue    | 316 ++++++++++++++++++
 frontend/src/stores/chat.ts                   |  74 +++-
 frontend/src/views/HomeView.vue               |  48 ++-
 3 files changed, 433 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/chat/CreateBotModal.vue

diff --git a/frontend/src/components/chat/CreateBotModal.vue b/frontend/src/components/chat/CreateBotModal.vue
new file mode 100644
index 0000000..aff3cb8
--- /dev/null
+++ b/frontend/src/components/chat/CreateBotModal.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  close: []
+  created: [bot: any]
+}>()
+
+const name = ref('')
+const displayName = ref('')
+const description = ref('')
+const selectedAvatar = ref('🤖')
+const loading = ref(false)
+const error = ref('')
+
+const avatars = [
+  '🤖', '🐶', '🐱', '🦊', '🐼', '🐸',
+  '🦁', '🐯', '🐨', '🐮', '🐷', '🐵'
+]
+
+function selectAvatar(avatar: string) {
+  selectedAvatar.value = avatar
+}
+
+async function handleCreate() {
+  error.value = ''
+  
+  if (!name.value.trim()) {
+    error.value = '请输入机器人名称'
+    return
+  }
+  
+  loading.value = true
+  
+  try {
+    const response = await fetch('/api/bots', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('access_token')}`
+      },
+      body: JSON.stringify({
+        name: name.value.trim(),
+        display_name: displayName.value.trim() || undefined,
+        avatar: selectedAvatar.value,
+        description: description.value.trim() || undefined
+      })
+    })
+    
+    if (!response.ok) {
+      const data = await response.json()
+      throw new Error(data.error || '创建失败')
+    }
+    
+    const data = await response.json()
+    emit('created', data.bot)
+    emit('close')
+  } catch (e: any) {
+    error.value = e.message || '创建失败'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="modal-overlay" @click.self="emit('close')">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>新建机器人</h3>
+        <button class="close-btn" @click="emit('close')">×</button>
+      </div>
+      
+      <form class="modal-body" @submit.prevent="handleCreate">
+        <!-- Avatar Selector -->
+        <div class="form-group">
+          <label>选择头像</label>
+          <div class="avatar-grid">
+            <button
+              v-for="avatar in avatars"
+              :key="avatar"
+              type="button"
+              class="avatar-btn"
+              :class="{ selected: selectedAvatar === avatar }"
+              @click="selectAvatar(avatar)"
+            >
+              {{ avatar }}
+            </button>
+          </div>
+        </div>
+        
+        <!-- Name -->
+        <div class="form-group">
+          <label for="name">名称 <span class="required">*</span></label>
+          <input
+            id="name"
+            v-model="name"
+            type="text"
+            placeholder="机器人唯一标识（如 xiaobai）"
+            maxlength="20"
+          />
+        </div>
+        
+        <!-- Display Name -->
+        <div class="form-group">
+          <label for="displayName">显示名称</label>
+          <input
+            id="displayName"
+            v-model="displayName"
+            type="text"
+            placeholder="显示给用户的名称（如 小白）"
+            maxlength="20"
+          />
+        </div>
+        
+        <!-- Description -->
+        <div class="form-group">
+          <label for="description">描述</label>
+          <textarea
+            id="description"
+            v-model="description"
+            placeholder="机器人简介..."
+            rows="3"
+            maxlength="200"
+          />
+        </div>
+        
+        <!-- Error -->
+        <div v-if="error" class="error-message">
+          {{ error }}
+        </div>
+        
+        <!-- Actions -->
+        <div class="modal-actions">
+          <button type="button" class="btn-cancel" @click="emit('close')">
+            取消
+          </button>
+          <button type="submit" class="btn-create" :disabled="loading">
+            {{ loading ? '创建中...' : '创建' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  background: var(--bg-primary);
+  border-radius: var(--border-radius-lg);
+  width: 100%;
+  max-width: 440px;
+  overflow: hidden;
+}
+
+.modal-header {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-header h3 {
+  font-size: var(--font-size-lg);
+  font-weight: 600;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  font-size: 24px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.close-btn:hover {
+  background: var(--bg-secondary);
+}
+
+.modal-body {
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.form-group label {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.required {
+  color: var(--error-color);
+}
+
+.form-group input,
+.form-group textarea {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  font-size: var(--font-size-md);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-family: inherit;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+}
+
+.avatar-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: var(--spacing-sm);
+}
+
+.avatar-btn {
+  width: 48px;
+  height: 48px;
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--bg-secondary);
+  font-size: 24px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.avatar-btn:hover {
+  border-color: var(--primary-light);
+}
+
+.avatar-btn.selected {
+  border-color: var(--primary-color);
+  background: var(--primary-light);
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.error-message {
+  color: var(--error-color);
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-sm);
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--border-radius);
+}
+
+.modal-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-sm);
+}
+
+.btn-cancel,
+.btn-create {
+  flex: 1;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius);
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-cancel {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+.btn-cancel:hover {
+  background: var(--bg-secondary);
+}
+
+.btn-create {
+  background: var(--primary-color);
+  border: none;
+  color: white;
+}
+
+.btn-create:hover:not(:disabled) {
+  background: var(--primary-dark);
+}
+
+.btn-create:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+</style>
diff --git a/frontend/src/stores/chat.ts b/frontend/src/stores/chat.ts
index 312ef6e..48975d5 100644
--- a/frontend/src/stores/chat.ts
+++ b/frontend/src/stores/chat.ts
@@ -10,6 +10,19 @@ export interface Bot {
   avatar?: string
   description?: string
   status: string
+  agent_id?: string
+  is_system?: boolean
+  capabilities?: string[]
+  config?: Record<string, any>
+}
+
+export interface Agent {
+  id: string
+  name: string
+  display_name?: string
+  status: string
+  model?: string
+  capabilities?: string[]
 }
 
 export interface Message {
@@ -190,6 +203,61 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
+  // Agent actions
+  async function fetchAgents() {
+    try {
+      const response = await fetch('/api/agents/available')
+      return await response.json()
+    } catch (error) {
+      console.error('Fetch agents failed:', error)
+      throw error
+    }
+  }
+
+  // Bot actions
+  async function createBot(data: {
+    name: string
+    display_name?: string
+    avatar?: string
+    description?: string
+  }) {
+    try {
+      const response = await botApi.create(data)
+      const newBot = response.data.bot
+      bots.value.push(newBot)
+      return { bot: newBot, token: response.data.token }
+    } catch (error) {
+      console.error('Create bot failed:', error)
+      throw error
+    }
+  }
+
+  async function bindBotAgent(botId: string, agentId: string) {
+    try {
+      const response = await botApi.bind(botId, agentId)
+      const updatedBot = response.data.bot
+      // Update bot in list
+      const index = bots.value.findIndex(b => b.id === botId)
+      if (index !== -1) {
+        bots.value[index] = { ...bots.value[index], ...updatedBot }
+      }
+      return updatedBot
+    } catch (error) {
+      console.error('Bind bot agent failed:', error)
+      throw error
+    }
+  }
+
+  async function deleteBot(botId: string) {
+    try {
+      await botApi.delete(botId)
+      bots.value = bots.value.filter(b => b.id !== botId)
+    } catch (error) {
+      console.error('Delete bot failed:', error)
+      throw error
+    }
+  }
+
   return {
     socket,
     connected,
@@ -202,11 +270,15 @@ export const useChatStore = defineStore('chat', () => {
     setupSocket,
     disconnectSocket,
     fetchBots,
+    fetchAgents,
     fetchSessions,
+    createBot,
     createSession,
     joinSession,
     leaveSession,
     sendMessage,
-    sendTyping
+    sendTyping,
+    bindBotAgent,
+    deleteBot
   }
 })
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index adc3e4c..1cbe993 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useChatStore } from '@/stores/chat'
+import CreateBotModal from '@/components/chat/CreateBotModal.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
 const chatStore = useChatStore()
 
+const showCreateBot = ref(false)
+
 onMounted(async () => {
   await chatStore.fetchBots()
   await chatStore.fetchSessions()
@@ -24,6 +27,10 @@ function startChat(botId: string) {
 function resumeChat(sessionId: string) {
   router.push({ name: 'chat', params: { sessionId } })
 }
+
+function handleBotCreated(bot: any) {
+  chatStore.bots.push(bot)
+}
 </script>
 
 <template>
@@ -31,9 +38,14 @@ function resumeChat(sessionId: string) {
     <header class="header">
       <div class="header-content">
         <h1>🐕 智队中枢</h1>
-        <div class="user-info">
-          <span>{{ authStore.user?.nickname || authStore.user?.username }}</span>
-          <button class="logout-btn" @click="authStore.logout">退出</button>
+        <div class="user-actions">
+          <button class="new-bot-btn" @click="showCreateBot = true">
+            + 新建机器人
+          </button>
+          <div class="user-info">
+            <span>{{ authStore.user?.nickname || authStore.user?.username }}</span>
+            <button class="logout-btn" @click="authStore.logout">退出</button>
+          </div>
         </div>
       </div>
     </header>
@@ -92,6 +104,12 @@ function resumeChat(sessionId: string) {
         </div>
       </section>
     </main>
+
+    <CreateBotModal
+      v-if="showCreateBot"
+      @close="showCreateBot = false"
+      @created="handleBotCreated"
+    />
   </div>
 </template>
 
@@ -120,6 +138,28 @@ function resumeChat(sessionId: string) {
   color: var(--primary-color);
 }
 
+.user-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.new-bot-btn {
+  padding: var(--spacing-xs) var(--spacing-md);
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  border-radius: var(--border-radius);
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.new-bot-btn:hover {
+  background: var(--primary-dark);
+}
+
 .user-info {
   display: flex;
   align-items: center;