feat：AdditionalOutputCard.vue未开发完毕版本

frontend/src/layout/components/Main/TaskTemplate/TaskResult/AdditionalOutputCard.vue

@@ -0,0 +1,148 @@
+<!-- AdditionalOutputCard.vue -->
+<script setup lang="ts">
+import { computed, ref, nextTick } from 'vue'
+import { useAgentsStore } from '@/stores'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+const agentsStore = useAgentsStore()
+const props = defineProps<{
+  index: number
+}>()
+
+// 获取产物名称
+const currentOutput = computed(() => {
+  return agentsStore.additionalOutputs[props.index] || ''
+})
+
+// 编辑状态
+const isEditing = ref(false)
+const inputValue = ref('')
+const originalValue = ref('')
+const inputRef = ref<HTMLElement>()
+
+// 点击编辑图标
+const handleEditClick = () => {
+  isEditing.value = true
+  originalValue.value = inputValue.value
+
+  // 等待 DOM 更新后聚焦输入框
+  nextTick(() => {
+    if (inputRef.value) {
+      const inputEl = inputRef.value.querySelector('input')
+      if (inputEl) {
+        inputEl.focus()
+      }
+    }
+  })
+}
+
+// 保存编辑
+const handleSave = () => {
+  if (isEditing.value) {
+    isEditing.value = false
+  }
+}
+
+// 取消编辑
+const handleCancel = () => {
+  if (isEditing.value) {
+    inputValue.value = originalValue.value // 恢复原始值
+    isEditing.value = false
+  }
+}
+
+// 处理键盘事件
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    handleSave()
+  } else if (event.key === 'Escape') {
+    event.preventDefault()
+    handleCancel()
+  }
+}
+
+// 输入框失去焦点处理
+const handleBlur = () => {
+  // 延迟处理，避免点击按钮时立即触发
+  setTimeout(() => {
+    if (isEditing.value) {
+      handleSave()
+    }
+  }, 200)
+}
+</script>
+
+<template>
+  <!-- 当产物存在时才显示 -->
+  <div v-if="currentOutput" class="card-item">
+    <el-card
+      class="card-item w-full relative output-object-card"
+      :shadow="true"
+      :id="`additional-output-${index}`"
+    >
+      <!-- 显示产物名称 -->
+      <div class="text-start w-[100%]">
+        <div class="text-[18px] font-bold text-[var(--color-text)] mb-2">
+          {{ currentOutput }}
+        </div>
+        <div ref="inputRef">
+          <el-input
+            v-model="inputValue"
+            :readonly="!isEditing"
+            :placeholder="isEditing ? '请输入内容...' : '点击编辑图标开始编辑...'"
+            @keydown="handleKeydown"
+            @blur="handleBlur"
+            :class="{ editing: isEditing }"
+          >
+            <template #suffix>
+              <!-- 只读状态：显示编辑图标 -->
+              <div v-if="!isEditing" class="flex items-center">
+                <svg-icon
+                  icon-class="Edit"
+                  size="20px"
+                  class="cursor-pointer hover:text-[#409eff] transition-colors"
+                  @click="handleEditClick"
+                  title="点击编辑"
+                />
+              </div>
+            </template>
+          </el-input>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.card-item {
+  transition: all 0.3s ease;
+}
+
+.output-object-card {
+  :deep(.el-card__body) {
+    min-height: 80px;
+    display: flex;
+    align-items: start;
+    justify-content: start;
+  }
+}
+
+/* 输入框样式 */
+:deep(.el-input .el-input__wrapper) {
+  box-shadow: none;
+  background-color: var(--color-bg-three);
+  transition: all 0.2s ease;
+}
+
+/* 编辑状态下的输入框样式 */
+:deep(.el-input.editing .el-input__wrapper) {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+:deep(.el-input.editing .el-input__wrapper.is-focus) {
+  border-color: #c0c4cc;
+  box-shadow: 0 0 0 1px #c0c4cc;
+}
+</style>