feat: 更新前端页面

- Agents, Chat, Settings, Skill, Tools
- Account, Plan, Script
- useSkills composable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/views/Agents.vue

@@ -1,6 +1,70 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 
+// 创建智能体弹窗状态
+const showCreateModal = ref(false)
+const isCreating = ref(false)
+const newAgent = ref({
+  name: '',
+  description: '',
+  skills: '',
+  knowledge: '',
+  prompt: '',
+})
+
+// Skills 选项
+const skillsOptions = [
+  { value: 'research', label: 'Research' },
+  { value: 'coder', label: 'Coder' },
+  { value: 'review', label: 'Code Review' },
+  { value: 'writer', label: 'Writer' },
+  { value: 'analyst', label: 'Analyst' },
+  { value: 'assistant', label: 'Assistant' },
+]
+
+// Knowledge 选项
+const knowledgeOptions = [
+  { value: 'general', label: 'General Knowledge' },
+  { value: 'codebase', label: 'Codebase' },
+  { value: 'docs', label: 'Documentation' },
+  { value: 'api', label: 'API Reference' },
+]
+
+// 打开创建弹窗
+const openCreateModal = () => {
+  newAgent.value = { name: '', description: '', skills: '', knowledge: '', prompt: '' }
+  showCreateModal.value = true
+}
+
+// 创建智能体
+const createAgent = async () => {
+  if (!newAgent.value.name || !newAgent.value.skills || !newAgent.value.knowledge) {
+    return
+  }
+
+  isCreating.value = true
+  try {
+    // 模拟创建
+    const newId = Math.max(...agents.value.map(a => a.id)) + 1
+    agents.value.unshift({
+      id: newId,
+      name: newAgent.value.name,
+      avatar: '🤖',
+      description: newAgent.value.description,
+      accentColor: '#f97316',
+      gradient: 'from-orange-500/20 to-amber-500/20',
+      status: 'stopped',
+      framework: skillsOptions.find(f => f.value === newAgent.value.skills)?.label || newAgent.value.skills,
+      model: knowledgeOptions.find(k => k.value === newAgent.value.knowledge)?.label || newAgent.value.knowledge,
+      mcpServers: 0,
+      createdAt: new Date().toISOString().split('T')[0],
+    })
+    showCreateModal.value = false
+  } finally {
+    isCreating.value = false
+  }
+}
+
 interface Agent {
   id: number
   name: string
@@ -73,7 +137,7 @@ const deleteAgent = (id: number) => {
         <i class="fa-solid fa-robot text-orange-500"></i>
         <span class="font-medium">Agents</span>
       </div>
-      <button class="btn-primary">
+      <button @click="openCreateModal" class="btn-primary">
         <i class="fa-solid fa-plus"></i>
         New Agent
       </button>
@@ -224,4 +288,81 @@ const deleteAgent = (id: number) => {
       </div>
     </div>
   </div>
+
+  <!-- 创建智能体弹窗 -->
+  <Teleport to="body">
+    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
+        <div class="flex items-center justify-between p-5 border-b border-dark-500">
+          <h3 class="text-lg font-semibold">Create New Agent</h3>
+          <button @click="showCreateModal = false" class="text-gray-400 hover:text-white transition-colors">
+            <i class="fa-solid fa-xmark text-xl"></i>
+          </button>
+        </div>
+
+        <div class="p-5 space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Agent Name *</label>
+            <input
+              v-model="newAgent.name"
+              type="text"
+              placeholder="Enter agent name..."
+              class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
+            >
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
+            <textarea
+              v-model="newAgent.description"
+              rows="3"
+              placeholder="Describe what this agent does..."
+              class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange resize-none"
+            ></textarea>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Skills *</label>
+            <el-select v-model="newAgent.skills" placeholder="Select skills" class="w-full" size="large" popper-class="dark-select-dropdown">
+              <el-option v-for="s in skillsOptions" :key="s.value" :label="s.label" :value="s.value" />
+            </el-select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Knowledge *</label>
+            <el-select v-model="newAgent.knowledge" placeholder="Select knowledge" class="w-full" size="large" popper-class="dark-select-dropdown">
+              <el-option v-for="k in knowledgeOptions" :key="k.value" :label="k.label" :value="k.value" />
+            </el-select>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Custom Prompt</label>
+            <textarea
+              v-model="newAgent.prompt"
+              rows="4"
+              placeholder="Define the agent's behavior and instructions..."
+              class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange resize-none"
+            ></textarea>
+          </div>
+        </div>
+
+        <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
+          <button
+            @click="showCreateModal = false"
+            class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            @click="createAgent"
+            :disabled="isCreating || !newAgent.name || !newAgent.skills || !newAgent.knowledge"
+            class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            <i v-if="isCreating" class="fa-solid fa-circle-notch fa-spin"></i>
+            {{ isCreating ? 'Creating...' : 'Create Agent' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
 </template>