AgentCoord/frontend/src/layout/components/Main/Task.vue

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue'

import SvgIcon from '@/components/SvgIcon/index.vue'
import { useAgentsStore, useConfigStore } from '@/stores'
import api from '@/api'
import { changeBriefs } from '@/utils/collaboration_Brief_FrontEnd.ts'
import { ElMessage } from 'element-plus'
import { log } from '@jsplumb/browser-ui'
import ProcessCard from './TaskTemplate/TaskProcess/ProcessCard.vue'
import AgentAllocation from './TaskTemplate/TaskSyllabus/components/AgentAllocation.vue'

const emit = defineEmits<{
  (e: 'search-start'): void
  (e: 'search', value: string): void
}>()

const agentsStore = useAgentsStore()
const configStore = useConfigStore()
const searchValue = ref('')
const triggerOnFocus = ref(true)
const isFocus = ref(false)
const hasAutoSearched = ref(false) // 防止重复自动搜索
const agentAllocationVisible = ref(false) // 智能体分配弹窗是否可见
const isExpanded = ref(false) // 控制搜索框是否展开

// 解析URL参数
function getUrlParam(param: string): string | null {
  const urlParams = new URLSearchParams(window.location.search)
  return urlParams.get(param)
}

// 自动搜索函数
async function autoSearchFromUrl() {
  const query = getUrlParam('q')
  if (query && !hasAutoSearched.value) {
    // 解码URL参数
    const decodedQuery = decodeURIComponent(query)
    searchValue.value = decodedQuery
    hasAutoSearched.value = true

    // 延迟执行搜索，确保组件已完全渲染
    setTimeout(() => {
      handleSearch()
    }, 100)
  }
}

// 智能体分配
// 处理智能体分配点击事件
function handleAgentAllocation() {
  agentAllocationVisible.value = true
}

// 关闭智能体分配弹窗
function handleAgentAllocationClose() {
  agentAllocationVisible.value = false
}

// 处理获取焦点事件
function handleFocus() {
  isFocus.value = true
  isExpanded.value = true // 搜索框展开
}

// 处理失去焦点事件
function handleBlur() {
  isFocus.value = false
  // 延迟收起搜索框，以便点击按钮等操作
  setTimeout(() => {
    isExpanded.value = false
  }, 200)
}

async function handleSearch() {
  try {
    triggerOnFocus.value = false
    if (!searchValue.value) {
      ElMessage.warning('请输入搜索内容')
      return
    }
    emit('search-start')
    agentsStore.resetAgent()
    agentsStore.setAgentRawPlan({ loading: true })
    const data = await api.generateBasePlan({
      goal: searchValue.value,
      inputs: []
    })
    data['Collaboration Process'] = changeBriefs(data['Collaboration Process'])
    agentsStore.setAgentRawPlan({ data })
    emit('search', searchValue.value)
  } finally {
    triggerOnFocus.value = true
    agentsStore.setAgentRawPlan({ loading: false })
  }
}

const querySearch = (queryString: string, cb: (v: { value: string }[]) => void) => {
  const results = queryString
    ? configStore.config.taskPromptWords.filter(createFilter(queryString))
    : configStore.config.taskPromptWords
  // call callback function to return suggestions
  cb(results.map(item => ({ value: item })))
}

const createFilter = (queryString: string) => {
  return (restaurant: string) => {
    return restaurant.toLowerCase().includes(queryString.toLowerCase())
  }
}

const taskContainerRef = ref<HTMLDivElement | null>(null)

// 组件挂载时检查URL参数
onMounted(() => {
  autoSearchFromUrl()
})
</script>

<template>
  <el-tooltip
    content="请先点击智能体库右侧的按钮上传智能体信息"
    placement="top"
    effect="light"
    :disabled="agentsStore.agents.length > 0"
  >
    <div class="task-root-container">
      <div
        class="task-container"
        ref="taskContainerRef"
        id="task-container"
        :class="{ expanded: isExpanded }"
      >
        <span class="text-[var(--color-text-task)] font-bold task-title">任务</span>
        <el-autocomplete
          v-model.trim="searchValue"
          class="task-input"
          size="large"
          :rows="isFocus ? 3 : 1"
          placeholder="请输入您的任务"
          type="textarea"
          :append-to="taskContainerRef"
          :fetch-suggestions="querySearch"
          @change="agentsStore.setSearchValue"
          :disabled="!(agentsStore.agents.length > 0)"
          :debounce="0"
          :trigger-on-focus="triggerOnFocus"
          @focus="handleFocus"
          @blur="handleBlur"
          @select="isFocus = false"
        >
        </el-autocomplete>
        <el-button
          class="task-button"
          color="linear-gradient(to right, #00C7D2, #315AB4)"
          size="large"
          title="点击搜索任务"
          circle
          :loading="agentsStore.agentRawPlan.loading"
          :disabled="!searchValue"
          @click.stop="handleSearch"
        >
          <SvgIcon
            v-if="!agentsStore.agentRawPlan.loading"
            icon-class="paper-plane"
            size="18px"
            color="#ffffff"
          />
        </el-button>
      </div>
      <!-- 智能体分配 -->
      <!-- <div class="agent-allocation-entry" @click="handleAgentAllocation" title="智能体分配">
        <SvgIcon icon-class="agent-change" size="20px" color="var(--color-bg)" />
      </div> -->

      <!-- 智能体分配弹窗 -->
      <el-dialog
        v-model="agentAllocationVisible"
        width="70%"
        top="10vh"
        :close-on-click-modal="false"
        :close-on-press-escape="true"
        :show-close="false"
        custom-class="agent-allocation-dialog"
      >
        <AgentAllocation @close="handleAgentAllocationClose" />
      </el-dialog>
    </div>
  </el-tooltip>
</template>

<style scoped lang="scss">
.task-root-container {
  height: 60px;
  margin-bottom: 24px;
  position: relative;
}
.task-container {
  width: 40%;
  margin: 0 auto;
  border: 2px solid transparent;
  $bg: var(--el-input-bg-color, var(--el-fill-color-blank));
  background: linear-gradient(var(--color-bg-taskbar), var(--color-bg-taskbar)) padding-box,
    linear-gradient(to right, #00c8d2, #315ab4) border-box;
  border-radius: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
  min-height: 100%;
  overflow: hidden;
  padding: 0 55px 0 47px;
  transition: all 0.3s ease;

  /* 搜索框展开时的样式 */
  &.expanded {
    box-shadow: var(--color-task-shadow);
  }

  :deep(.el-popper) {
    position: static !important;
    width: calc(100% + 102px); /*增加左右padding的总和 */
    min-width: calc(100% + 102px); /* 确保最小宽度也增加 */
    margin-left: -47px; /* 向左偏移左padding的值 */
    margin-right: -55px; /*向右偏移右padding的值 */
    background: var(--color-bg-taskbar);
    border: none;
    transition: height 0s ease-in-out;
    border-top: 1px solid var(--color-border);
    border-radius: 0;

    li {
      height: 45px;
      box-sizing: border-box;
      line-height: 45px;
      font-size: 14px;
      padding-left: 27px;

      &:hover {
        background: var(--color-bg-hover);
        color: var(--color-text-hover);
      }
    }

    .el-popper__arrow {
      display: none;
    }
  }

  :deep(.el-autocomplete) {
    min-height: 56px;
    width: 100%;

    .task-input {
      height: 100%;
    }

    .el-textarea__inner {
      border-radius: 0;
      box-shadow: none;
      font-size: 14px;
      height: 100%;
      line-height: 1.5;
      padding: 18px 0 0 18px;
      resize: none;
      color: var(--color-text-taskbar);

      &::placeholder {
        line-height: 1.2;
        font-size: 18px;
        vertical-align: middle;
      }

      .el-icon.is-loading {
        & + span {
          display: none;
        }
      }
    }
  }

  .task-title {
    position: absolute;
    top: 28px;
    left: 27px;
    z-index: 999;
    transform: translateY(-50%);
  }

  .task-button {
    background: linear-gradient(to right, #00c7d2, #315ab4);
    border: none; // 如果需要移除边框
    position: absolute;
    top: 28px;
    right: 10px;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .task-button.is-loading {
    :deep(span) {
      display: none !important;
    }
  }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.process-list {
  padding: 0 8px;
}
.process-item {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-bg-list);
  border: 1px solid var(--color-border-default);

  .process-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    .agent-tag {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .process-text {
      line-height: 1.6;
      font-size: 14px;
      color: var(--el-text-color-primary);
      white-space: pre-wrap;
    }
  }

  .edit-container {
    margin-top: 8px;
  }
}

.process-item:hover {
  border-color: var(--el-border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.agent-allocation-entry {
  position: absolute;
  right: 0; /* 顶头 */
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #00aaff; /* 纯蓝色背景 */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 170, 255, 0.35);
  transition: transform 0.2s;

  &:hover {
    transform: scale(1.08);
  }
  &:active {
    transform: scale(0.96);
  }
}

// 智能体分配弹窗样式
:deep(.agent-allocation-dialog) {
  .el-dialog {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    &__header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--color-border);
      margin-right: 0;

      .el-dialog__title {
        font-size: 18px;
        font-weight: bold;
        color: var(--color-text-title);
      }
    }

    &__body {
      padding: 0;
      max-height: 70vh;
      overflow: hidden;
    }

    &__headerbtn {
      top: 16px;
      right: 20px;

      .el-dialog__close {
        color: var(--color-text);
        font-size: 16px;

        &:hover {
          color: var(--color-primary);
        }
      }
    }
  }
}
</style>