feat:三个浮动窗口功能新增

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

@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, reactive } from 'vue'
-
+import { ref, onMounted, computed, reactive, nextTick } 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'
-
+import AssignmentButton from './TaskTemplate/TaskSyllabus/components/AssignmentButton.vue'
 const emit = defineEmits<{
   (e: 'search-start'): void
   (e: 'search', value: string): void
@@ -21,7 +17,6 @@ const searchValue = ref('')
 const triggerOnFocus = ref(true)
 const isFocus = ref(false)
 const hasAutoSearched = ref(false) // 防止重复自动搜索
-const agentAllocationVisible = ref(false) // 智能体分配弹窗是否可见
 const isExpanded = ref(false) // 控制搜索框是否展开
 
 // 解析URL参数
@@ -30,6 +25,13 @@ function getUrlParam(param: string): string | null {
   return urlParams.get(param)
 }
 
+const planReady = computed(() => {
+  return agentsStore.agentRawPlan.data !== undefined
+})
+const openAgentAllocationDialog = () => {
+  console.log('打开智能体分配弹窗')
+  agentsStore.openAgentAllocationDialog()
+}
 // 自动搜索函数
 async function autoSearchFromUrl() {
   const query = getUrlParam('q')
@@ -46,32 +48,42 @@ async function autoSearchFromUrl() {
   }
 }
 
-// 智能体分配
-// 处理智能体分配点击事件
-function handleAgentAllocation() {
-  agentAllocationVisible.value = true
-}
-
-// 关闭智能体分配弹窗
-function handleAgentAllocationClose() {
-  agentAllocationVisible.value = false
-}
-
 // 处理获取焦点事件
 function handleFocus() {
   isFocus.value = true
   isExpanded.value = true // 搜索框展开
 }
 
+const taskContainerRef = ref<HTMLDivElement | null>(null)
+
 // 处理失去焦点事件
 function handleBlur() {
   isFocus.value = false
   // 延迟收起搜索框，以便点击按钮等操作
   setTimeout(() => {
     isExpanded.value = false
+    // 强制重置文本区域高度到最小行数
+    resetTextareaHeight()
   }, 200)
 }
 
+// 重置文本区域高度到最小行数
+function resetTextareaHeight() {
+  nextTick(() => {
+    // 修复：使用更可靠的方式获取textarea元素
+    const textarea =
+      document.querySelector('#task-container .el-textarea__inner') ||
+      document.querySelector('#task-container textarea')
+
+    if (textarea) {
+      // 强制设置最小高度
+      textarea.style.height = 'auto'
+      textarea.style.minHeight = '56px'
+      textarea.style.overflowY = 'hidden'
+    }
+  })
+}
+
 async function handleSearch() {
   try {
     triggerOnFocus.value = false
@@ -109,8 +121,6 @@ const createFilter = (queryString: string) => {
   }
 }
 
-const taskContainerRef = ref<HTMLDivElement | null>(null)
-
 // 组件挂载时检查URL参数
 onMounted(() => {
   autoSearchFromUrl()
@@ -133,10 +143,12 @@ onMounted(() => {
       >
         <span class="text-[var(--color-text-task)] font-bold task-title">任务</span>
         <el-autocomplete
+          ref="autocompleteRef"
           v-model.trim="searchValue"
           class="task-input"
           size="large"
-          :rows="isFocus ? 3 : 1"
+          :rows="1"
+          :autosize="{ minRows: 1, maxRows: 10 }"
           placeholder="请输入您的任务"
           type="textarea"
           :append-to="taskContainerRef"
@@ -169,23 +181,7 @@ onMounted(() => {
           />
         </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>
+      <AssignmentButton v-dev-only v-if="planReady" @click="openAgentAllocationDialog" />
     </div>
   </el-tooltip>
 </template>
@@ -216,6 +212,21 @@ onMounted(() => {
   /* 搜索框展开时的样式 */
   &.expanded {
     box-shadow: var(--color-task-shadow);
+    :deep(.el-autocomplete .el-textarea .el-textarea__inner) {
+      overflow-y: auto !important;
+      min-height: 56px !important;
+      // overflow-y: hidden;
+      // background-color: black;
+    }
+  }
+
+  /* 非展开状态时，确保文本区域高度固定 */
+  &:not(.expanded) {
+    :deep(.el-textarea__inner) {
+      height: 56px !important;
+      overflow-y: hidden !important;
+      min-height: 56px !important;
+    }
   }
 
   :deep(.el-popper) {
@@ -267,6 +278,11 @@ onMounted(() => {
       resize: none;
       color: var(--color-text-taskbar);
 
+      /* 聚焦时的样式 */
+      .expanded & {
+        overflow-y: auto;
+      }
+
       &::placeholder {
         line-height: 1.2;
         font-size: 18px;
@@ -363,67 +379,4 @@ onMounted(() => {
   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>