mky-vent-base/src/views/ventAI/manageAssistent/components/chatModal/CreateSubAgentModal.vue

<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? '编辑子智能体' : '创建子智能体'"
    :width="700"
    :footer="null"
    destroyOnClose
    @cancel="emit('close')"
    class="create-sub-agent-modal"
  >
    <div class="sub-agent-form" v-if="!toolsLoading">
      <div class="form-item">
        <label class="form-label">名称 <span class="required">*</span></label>
        <a-input v-model:value="form.name" placeholder="英文字母、数字、_、-（1-50字符）" :maxlength="50" :disabled="isEdit" />
        <div class="form-hint" v-if="isEdit">名称创建后不可修改</div>
      </div>

      <div class="form-item">
        <label class="form-label">描述 <span class="required">*</span></label>
        <a-textarea v-model:value="form.description" placeholder="主 Agent 据此判断何时委派任务" :rows="2" :maxlength="500" />
      </div>

      <div class="form-item">
        <label class="form-label">系统提示词 <span class="required">*</span></label>
        <a-textarea v-model:value="form.system_prompt" placeholder="定义子智能体的角色、能力和行为规范" :rows="5" :maxlength="5000" />
      </div>

      <div class="form-item">
        <label class="form-label">可用工具</label>
        <div class="form-hint">不选择任何工具时，自动继承对话助手的全部工具</div>
        <div class="tools-selector">
          <div class="tools-selector-sidebar">
            <div
              v-for="group in toolGroups"
              :key="group.key"
              :class="['sidebar-tab', { active: activeGroupKey === group.key }]"
              @click="activeGroupKey = group.key"
            >
              <span class="sidebar-tab-name">{{ group.display }}</span>
              <span v-if="getGroupSelectedCount(group) > 0" class="sidebar-tab-badge">{{ getGroupSelectedCount(group) }}</span>
            </div>
          </div>
          <div class="tools-selector-main">
            <div class="tools-search-bar">
              <a-input v-model:value="toolSearch" placeholder="搜索工具..." allow-clear size="small" class="tools-search-input" />
            </div>
            <div class="tools-tags-area" v-if="activeGroup">
              <div class="tools-tags-header">
                <span class="tools-tags-title">{{ activeGroup.display }}</span>
                <span class="tools-tags-count">已选 {{ getGroupSelectedCount(activeGroup) }}/{{ activeGroup.tools.length }}</span>
                <div class="tools-tags-ops">
                  <span class="tools-op-link" @click="selectAllInGroup(activeGroup)">全选</span>
                  <span class="tools-op-sep">|</span>
                  <span class="tools-op-link" @click="clearGroupTools(activeGroup)">清空</span>
                </div>
              </div>
              <div class="tools-tags-wrap">
                <div
                  v-for="tool in filteredActiveTools"
                  :key="tool.name"
                  :class="['tool-tag-item', { selected: form.tools.includes(tool.name) }]"
                  @click="toggleTool(tool.name)"
                  :title="tool.description"
                >
                  <span class="tool-tag-name">{{ tool.display_name }}</span>
                  <div v-if="form.tools.includes(tool.name)" class="tool-tag-check"></div>
                </div>
                <div v-if="filteredActiveTools.length === 0" class="tools-empty-hint">无匹配工具</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="form.tools.length > 0" class="tools-selected-summary">
          <span class="summary-label">已选 {{ form.tools.length }} 项</span>
          <span class="summary-clear" @click="form.tools = []">清空全部</span>
        </div>
      </div>

      <!-- <div class="form-item">
        <label class="form-label">模型</label>
        <a-select v-model:value="form.model" class="form-select" placeholder="留空则跟随对话助手当前模型" allow-clear>
          <a-select-option v-for="m in modelList" :key="m" :value="m">{{ m }}</a-select-option>
        </a-select>
      </div>

      <div class="form-item form-switch-item">
        <label class="form-label">启用</label>
        <a-switch v-model:checked="form.enabled" />
      </div> -->

      <div class="form-actions">
        <a-button @click="emit('close')">取消</a-button>
        <a-button type="primary" :loading="submitting" :disabled="!canSubmit" @click="handleSubmit">{{ isEdit ? '保存' : '创建' }}</a-button>
      </div>
    </div>

    <div class="form-loading" v-else>
      <a-spin />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch } from 'vue';
  import { createSubAgent, updateSubAgent, getSubAgentTools } from '../../api';
  import { message } from 'ant-design-vue';

  interface ToolInfo {
    name: string;
    display_name: string;
    description?: string;
  }

  interface ToolGroup {
    key: string;
    display: string;
    tools: ToolInfo[];
  }

  interface SubAgentData {
    name: string;
    description: string;
    system_prompt: string;
    tools: string[];
    tool_infos?: ToolInfo[];
    model: string;
    enabled: boolean;
  }

  const props = defineProps<{ visible: boolean; editData?: SubAgentData | null }>();
  const emit = defineEmits<{
    (e: 'close'): void;
    (e: 'created'): void;
    (e: 'updated'): void;
  }>();

  const submitting = ref(false);
  const toolsLoading = ref(false);
  const toolGroups = ref<ToolGroup[]>([]);
  const modelList = ref<string[]>([]);
  const activeGroupKey = ref('');
  const toolSearch = ref('');

  const activeGroup = computed(() => toolGroups.value.find((g) => g.key === activeGroupKey.value));

  const filteredActiveTools = computed(() => {
    if (!activeGroup.value) return [];
    const keyword = toolSearch.value.trim().toLowerCase();
    if (!keyword) return activeGroup.value.tools;
    return activeGroup.value.tools.filter((t) => t.display_name.toLowerCase().includes(keyword) || t.name.toLowerCase().includes(keyword));
  });

  const defaultForm = () => ({
    name: '',
    description: '',
    system_prompt: '',
    tools: [] as string[],
    model: '',
    enabled: true,
  });

  const form = reactive(defaultForm());

  const isEdit = computed(() => !!props.editData);

  const fetchToolsAndModels = async () => {
    toolsLoading.value = true;
    try {
      const res = await getSubAgentTools();
      toolGroups.value = res?.groups || [];
      modelList.value = res?.models || [];
      if (toolGroups.value.length > 0 && !activeGroupKey.value) {
        activeGroupKey.value = toolGroups.value[0].key;
      }
    } catch {
      toolGroups.value = [];
      modelList.value = [];
    } finally {
      toolsLoading.value = false;
    }
  };

  watch(
    () => props.visible,
    (val) => {
      if (val) {
        Object.assign(form, defaultForm());
        submitting.value = false;
        activeGroupKey.value = '';
        toolSearch.value = '';
        fetchToolsAndModels();
        if (props.editData) {
          const d = props.editData;
          form.name = d.name;
          form.description = d.description || '';
          form.system_prompt = d.system_prompt || '';
          form.tools = [...(d.tools || [])];
          form.model = d.model || '';
          form.enabled = d.enabled !== false;
        }
      }
    }
  );

  const getGroupSelectedCount = (group: ToolGroup) => {
    return group.tools.filter((t) => form.tools.includes(t.name)).length;
  };

  const toggleTool = (name: string) => {
    const idx = form.tools.indexOf(name);
    if (idx >= 0) {
      form.tools.splice(idx, 1);
    } else {
      form.tools.push(name);
    }
  };

  const selectAllInGroup = (group: ToolGroup) => {
    for (const tool of group.tools) {
      if (!form.tools.includes(tool.name)) {
        form.tools.push(tool.name);
      }
    }
  };

  const clearGroupTools = (group: ToolGroup) => {
    const names = new Set(group.tools.map((t) => t.name));
    form.tools = form.tools.filter((t) => !names.has(t));
  };

  const nameRegex = /^[a-zA-Z0-9_-]{1,50}$/;

  const canSubmit = computed(() => {
    if (!form.name.trim() || !form.description.trim() || !form.system_prompt.trim()) return false;
    if (!isEdit.value && !nameRegex.test(form.name.trim())) return false;
    return true;
  });

  const handleSubmit = async () => {
    if (!canSubmit.value) return;
    submitting.value = true;
    try {
      if (isEdit.value) {
        await updateSubAgent(form.name, {
          description: form.description.trim(),
          system_prompt: form.system_prompt.trim(),
          tools: form.tools,
          model: form.model || '',
          enabled: form.enabled,
        });
        message.success(`已更新子智能体「${form.name}」`);
        emit('updated');
      } else {
        await createSubAgent({
          name: form.name.trim(),
          description: form.description.trim(),
          system_prompt: form.system_prompt.trim(),
          tools: form.tools,
          model: form.model || '',
          enabled: form.enabled,
        });
        message.success(`已创建子智能体「${form.name.trim()}」`);
        emit('created');
      }
      emit('close');
    } catch (err: any) {
      const msg = err?.response?.data?.message || err?.message || (isEdit.value ? '更新失败，请重试' : '创建失败，请重试');
      message.error(msg);
    } finally {
      submitting.value = false;
    }
  };
</script>

<style scoped lang="less">
  .sub-agent-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .form-label {
    font-size: 13px;
    color: #e8edf3;
    font-weight: 500;

    .required {
      color: #ff4d4f;
    }
  }

  .form-hint {
    font-size: 12px;
    color: #6a7a8a;
    margin-top: -2px;
  }

  :deep(.zxm-input),
  :deep(textarea.zxm-input) {
    background: rgba(10, 132, 255, 0.08);
    border: 1px solid rgba(63, 80, 106, 0.4);
    border-radius: 6px;
    color: #e0e6ed;

    &:hover,
    &:focus {
      border-color: rgba(10, 132, 255, 0.5);
    }

    &[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  .form-select {
    width: 100%;

    :deep(.zxm-select-selector) {
      background: rgba(10, 132, 255, 0.08) !important;
      border: 1px solid rgba(63, 80, 106, 0.4) !important;
      border-radius: 6px !important;
      color: #e0e6ed;
      height: 36px;
    }

    :deep(.zxm-select-selection-item) {
      line-height: 34px !important;
      color: #e0e6ed;
    }

    :deep(.zxm-select-selection-placeholder) {
      color: #6a7a8a;
    }
  }

  .form-switch-item {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .tools-selector {
    display: flex;
    border: 1px solid rgba(63, 80, 106, 0.3);
    border-radius: 6px;
    background: rgba(10, 132, 255, 0.03);
    height: 220px;
    overflow: hidden;
  }

  .tools-selector-sidebar {
    width: 140px;
    flex-shrink: 0;
    border-right: 1px solid rgba(63, 80, 106, 0.2);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(63, 80, 106, 0.3);
      border-radius: 2px;
    }

    .sidebar-tab {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      cursor: pointer;
      transition: all 0.2s;
      border-left: 2px solid transparent;

      &:hover {
        background: rgba(10, 132, 255, 0.06);
      }

      &.active {
        background: rgba(10, 132, 255, 0.1);
        border-left-color: #0a84ff;

        .sidebar-tab-name {
          color: #5cb8ff;
        }
      }

      .sidebar-tab-name {
        font-size: 13px;
        color: #c9d1d9;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .sidebar-tab-badge {
        min-width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 11px;
        color: #fff;
        background: rgba(10, 132, 255, 0.7);
        border-radius: 9px;
        padding: 0 5px;
        flex-shrink: 0;
      }
    }
  }

  .tools-selector-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }

  .tools-search-bar {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(63, 80, 106, 0.15);
    flex-shrink: 0;

    .tools-search-input {
      height: 30px;
      background: rgba(10, 132, 255, 0.06);
      border: 1px solid rgba(63, 80, 106, 0.3);

      :deep(.zxm-input) {
        background: transparent;
        color: #e0e6ed;
        font-size: 12px;
      }
    }
  }

  .tools-tags-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .tools-tags-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 0;
    flex-shrink: 0;

    .tools-tags-title {
      font-size: 12px;
      font-weight: 500;
      color: #8b949e;
    }

    .tools-tags-count {
      font-size: 11px;
      color: #6a7a8a;
    }

    .tools-tags-ops {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .tools-op-link {
      font-size: 11px;
      color: #5cb8ff;
      cursor: pointer;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }

    .tools-op-sep {
      color: rgba(63, 80, 106, 0.4);
      font-size: 11px;
    }
  }

  .tools-tags-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(63, 80, 106, 0.3);
      border-radius: 2px;
    }
  }

  .tool-tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid rgba(63, 80, 106, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(10, 132, 255, 0.02);

    &:hover {
      border-color: rgba(10, 132, 255, 0.4);
      background: rgba(10, 132, 255, 0.06);
    }

    &.selected {
      border-color: rgba(10, 132, 255, 0.6);
      background: rgba(10, 132, 255, 0.12);

      .tool-tag-name {
        color: #5cb8ff;
      }
    }

    .tool-tag-name {
      font-size: 12px;
      color: #c9d1d9;
      white-space: nowrap;
    }

    .tool-tag-check {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 2px;
        top: 0;
        width: 5px;
        height: 8px;
        border: solid #5cb8ff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }
  }

  .tools-empty-hint {
    font-size: 12px;
    color: #6a7a8a;
    padding: 20px 0;
    text-align: center;
    width: 100%;
  }

  .tools-selected-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;

    .summary-label {
      font-size: 12px;
      color: #5cb8ff;
    }

    .summary-clear {
      font-size: 12px;
      color: #ff7875;
      cursor: pointer;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .form-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
  }
</style>

<style lang="less">
  .create-sub-agent-modal {
    .zxm-modal-content {
      background: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1e35 100%);
      border: 1px solid rgba(63, 80, 106, 0.4);
      border-radius: 12px;
    }

    .zxm-modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(63, 80, 106, 0.25);
      padding: 18px 24px;
      border-radius: 10px 10px 0 0;
    }

    .zxm-modal-title {
      color: #e8edf3;
      font-size: 18px;
      font-weight: 600;
    }

    .zxm-modal-body {
      padding: 24px !important;
      max-height: 70vh;
      overflow-y: auto;
    }

    .zxm-modal-close {
      .zxm-modal-close-x {
        color: #8b949e;
      }
    }
  }
</style>