feat: add hire modal and fire agent action to overview page

Yi Bo
1 parent 562e85dc
Showing 1 changed file with 81 additions and 2 deletions
web/src/views/CompanyDashboard.vue
@@ -111,8 +111,11 @@
           <!-- Agent Status Table -->
           <div class="overview-card agents-card">
             <div class="overview-card-header">
-              <h3>🤖 Agent 状态监控</h3>
-              <span class="agent-count-badge">{{ companyStatus?.agents?.length || 0 }} 个</span>
+              <div style="display:flex; align-items:center; gap:8px;">
+                <h3>🤖 Agent 状态监控</h3>
+                <span class="agent-count-badge">{{ companyStatus?.agents?.length || 0 }} 个</span>
+              </div>
+              <button class="btn-sm" @click="openHireModal">＋ 雇佣 Agent</button>
             </div>
             <div v-if="companyStatus?.agents?.length > 0" class="agent-status-table">
               <div class="table-header">
@@ -168,6 +171,7 @@
                       <button class="btn-action-chat" @click="goToAgentChat(agent.id)">💬 聊天</button>
                       <button class="btn-action-skills" @click="toggleAgentSkills(agent.id)">📋 技能</button>
                       <button class="btn-action-train" @click="triggerTrain(agent.id)">🎓 训练</button>
+                      <button class="btn-action-fire" @click="fireAgent(agent.id, agent.name)">🗑️ 解雇</button>
                     </div>
                   </span>
                 </div>
@@ -517,6 +521,37 @@
     </section>
  
  
+    <!-- Hire Modal -->
+    <div v-if="showHireModal" class="modal-overlay" @click="showHireModal = false">
+      <div class="modal-content" style="max-width: 500px;" @click.stop>
+        <div class="modal-header">
+          <h3>＋ 雇佣新 Agent</h3>
+          <button class="btn-close" @click="showHireModal = false">✕</button>
+        </div>
+        <div class="modal-body" style="display: flex; flex-direction: column; gap: 16px;">
+          <div>
+            <label style="font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; color: var(--text-primary);">从模板库选择角色 (Role)</label>
+            <select v-model="hireForm.role" class="form-input" style="width: 100%;">
+              <option value="">-- 请选择预置 Agent 模板 --</option>
+              <option v-for="tpl in templates" :key="tpl.id" :value="tpl.id">
+                {{ agentEmoji(tpl.type) }} {{ tpl.name }} ({{ tpl.id }})
+              </option>
+            </select>
+          </div>
+          <div v-if="hireForm.role">
+            <label style="font-size: 13px; font-weight: 600; margin-bottom: 6px; display: block; color: var(--text-primary);">自定义花名 (可选)</label>
+            <input v-model="hireForm.name" class="form-input" style="width: 100%;" placeholder="留空则使用默认名称" />
+          </div>
+        </div>
+        <div class="modal-footer" style="padding-top: 16px; margin-top: 8px;">
+          <button class="btn-cancel" @click="showHireModal = false" style="padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border-primary); background: transparent; color: var(--text-primary); cursor: pointer;">取消</button>
+          <button class="btn-install-large" :disabled="!hireForm.role || hiring" @click="submitHire" style="padding: 6px 16px; font-size: 13px;">
+            {{ hiring ? '⏳ 办理入职中...' : '🎉 正式雇佣' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- ═══ Templates Panel ═══ -->
     <div v-if="showTemplates" class="templates-panel">
       <div class="panel-header">
@@ -569,6 +604,49 @@ const showDropdown = ref(false)
 const expandedAgent = ref(null)
 const agentSkills = ref([])
  
+const showHireModal = ref(false)
+const hiring = ref(false)
+const hireForm = ref({ role: '', name: '' })
+
+function openHireModal() {
+  hireForm.value = { role: '', name: '' };
+  showHireModal.value = true;
+  if (templates.value.length === 0) loadTemplates();
+}
+
+async function submitHire() {
+  if (!hireForm.value.role || !selectedCompany.value) return;
+  hiring.value = true;
+  try {
+    const tpl = templates.value.find(t => t.id === hireForm.value.role);
+    await axios.post(`/api/company/${selectedCompany.value.id}/hire`, {
+      role: hireForm.value.role,
+      name: hireForm.value.name || undefined,
+      type: tpl?.type,
+      description: tpl?.description
+    });
+    showHireModal.value = false;
+    await loadCompanyStatus(selectedCompany.value.id);
+    await loadCompanyAgents(selectedCompany.value.id);
+  } catch (e) {
+    alert(`❌ 雇佣失败: ${e.response?.data?.error || e.message}`);
+  } finally {
+    hiring.value = false;
+  }
+}
+
+async function fireAgent(agentId, agentName) {
+  if (!selectedCompany.value) return;
+  if (!confirm(`⚠️ 确定要彻底解雇 ${agentName || agentId} 吗？将停止其所有运行进程并归档数据！`)) return;
+  try {
+    await axios.post(`/api/company/${selectedCompany.value.id}/fire`, { role: agentId });
+    await loadCompanyStatus(selectedCompany.value.id);
+    await loadCompanyAgents(selectedCompany.value.id);
+  } catch (e) {
+    alert(`❌ 解雇失败: ${e.response?.data?.error || e.message}`);
+  }
+}
+
 // Files tab
 const companyFiles = ref(null)
 const selectedFilePath = ref(null)
@@ -1539,6 +1617,7 @@ function closeDropdown() {
 .btn-action-chat { color: var(--accent-light); }
 .btn-action-skills { color: var(--blue-text, #60a5fa); }
 .btn-action-train { color: var(--purple-text, #a78bfa); }
+.btn-action-fire { color: var(--red-text, #ef4444); }
  
 /* Expandable Skills Panel */
 .agent-expand-panel {