EasyFlow/easyflow-ui-admin/app/src/views/ai/agents/components/AgentInspectorPanel.vue

<script setup lang="ts">
import type {
  AgentDraftState,
  AgentOption,
  AgentValidationIssue,
} from '../types';

import { computed } from 'vue';

import { Close } from '@element-plus/icons-vue';
import { ElButton } from 'element-plus';

import AgentBaseForm from './AgentBaseForm.vue';
import AgentKnowledgeForm from './AgentKnowledgeForm.vue';
import AgentToolForm from './AgentToolForm.vue';
import AgentTryoutPanel from './AgentTryoutPanel.vue';

const props = defineProps<{
  categories: AgentOption[];
  issues: AgentValidationIssue[];
  knowledges: AgentOption[];
  mcps: AgentOption[];
  models: AgentOption[];
  pluginTools: AgentOption[];
  state: AgentDraftState;
  workflows: AgentOption[];
}>();

const emit = defineEmits<{
  change: [];
  closeTryout: [];
  removeCapability: [];
  selectIssue: [nodeId: string];
}>();

const selectedKnowledge = computed(() => {
  if (!props.state.selectedNodeId.startsWith('knowledge:')) return;
  const localId = props.state.selectedNodeId.slice('knowledge:'.length);
  return props.state.knowledgeBindings.find((item) => item.localId === localId);
});

const selectedTool = computed(() => {
  if (!props.state.selectedNodeId.startsWith('tool:')) return;
  const localId = props.state.selectedNodeId.slice('tool:'.length);
  return props.state.toolBindings.find((item) => item.localId === localId);
});

const selectedToolKind = computed(() => {
  const toolType = String(selectedTool.value?.toolType || '').toUpperCase();
  if (toolType === 'WORKFLOW') return 'workflow';
  if (toolType === 'MCP') return 'mcp';
  return 'plugin';
});

const selectedToolOptions = computed(() => {
  if (selectedToolKind.value === 'workflow') return props.workflows;
  if (selectedToolKind.value === 'mcp') return props.mcps;
  return props.pluginTools;
});
</script>

<template>
  <aside class="agent-inspector">
    <template v-if="state.panelMode === 'tryout'">
      <AgentTryoutPanel
        :agent="state.agent"
        :tool-bindings="state.toolBindings"
        :knowledge-bindings="state.knowledgeBindings"
        @close="emit('closeTryout')"
      />
    </template>
    <template v-else>
      <header class="agent-inspector__header">
        <div>
          <div class="agent-inspector__title">
            {{ state.panelMode === 'base' ? '基座智能体' : '能力配置' }}
          </div>
          <div class="agent-inspector__subtitle">
            {{ state.panelMode === 'base' ? '核心设定' : '绑定关系' }}
          </div>
        </div>
      </header>

      <div class="agent-inspector__body">
        <div v-if="issues.length > 0" class="agent-inspector__issues">
          <button
            v-for="issue in issues"
            :key="`${issue.nodeId}-${issue.field || issue.message}`"
            class="agent-inspector__issue"
            type="button"
            @click="emit('selectIssue', issue.nodeId)"
          >
            {{ issue.message }}
          </button>
        </div>

        <AgentBaseForm
          v-if="state.panelMode === 'base'"
          :agent="state.agent"
          :categories="categories"
          :models="models"
          @change="emit('change')"
        />
        <AgentKnowledgeForm
          v-else-if="selectedKnowledge"
          :binding="selectedKnowledge"
          :knowledges="knowledges"
          @change="emit('change')"
          @remove="emit('removeCapability')"
        />
        <AgentToolForm
          v-else-if="selectedTool"
          :binding="selectedTool"
          :kind="selectedToolKind"
          :options="selectedToolOptions"
          @change="emit('change')"
          @remove="emit('removeCapability')"
        />
        <div v-else class="agent-inspector__empty">
          <ElButton :icon="Close" text @click="emit('closeTryout')">
            返回基座
          </ElButton>
        </div>
      </div>
    </template>
  </aside>
</template>

<style scoped>
.agent-inspector {
  position: absolute;
  top: 24px;
  right: 24px;
  bottom: 96px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 320px));
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--el-bg-color) 94%, transparent);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  backdrop-filter: blur(16px);
}

.agent-inspector__header {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.agent-inspector__body {
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
}

.agent-inspector__title {
  font-size: 16px;
  font-weight: 600;
}

.agent-inspector__subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.agent-inspector__issues {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 0;
}

.agent-inspector__issue {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--el-color-danger);
  text-align: left;
  cursor: pointer;
  background: var(--el-color-danger-light-9);
  border: 0;
  border-radius: 8px;
}

.agent-inspector__empty {
  padding: 16px;
}
</style>