294 lines
8.0 KiB
Vue
294 lines
8.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { getActionTypeDisplay } from '@/layout/components/config.ts'
|
|
import { useAgentsStore } from '@/stores'
|
|
import BranchButton from './components/TaskButton.vue'
|
|
|
|
const agentsStore = useAgentsStore()
|
|
|
|
const props = defineProps<{
|
|
step: {
|
|
Id?: string
|
|
TaskProcess: Array<{
|
|
ID: string
|
|
ActionType: string
|
|
AgentName: string
|
|
Description: string
|
|
}>
|
|
}
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'save-edit', stepId: string, processId: string, value: string): void
|
|
}>()
|
|
|
|
//从 currentTask 中获取数据
|
|
const currentTaskProcess = computed(() => {
|
|
const currentTask = agentsStore.currentTask
|
|
if (currentTask && currentTask.Id === props.step.Id && currentTask.TaskProcess) {
|
|
return currentTask.TaskProcess
|
|
}
|
|
|
|
//从 agentRawPlan 中获取原始数据
|
|
const collaborationProcess = agentsStore.agentRawPlan.data?.['Collaboration Process'] || []
|
|
const rawData = collaborationProcess.find((task: any) => task.Id === props.step.Id)
|
|
return rawData?.TaskProcess || []
|
|
})
|
|
|
|
const editingProcessId = ref<string | null>(null)
|
|
const editValue = ref('')
|
|
const hoverProcessId = ref<string | null>(null)
|
|
|
|
// 处理卡片点击事件
|
|
function handleCardClick() {
|
|
// 如果正在编辑，不处理点击
|
|
if (editingProcessId.value) return
|
|
|
|
// 设置当前任务，与任务大纲联动
|
|
if (props.step.Id) {
|
|
agentsStore.setCurrentTask(props.step as any)
|
|
}
|
|
}
|
|
|
|
// 检测当前是否是深色模式
|
|
function isDarkMode(): boolean {
|
|
return document.documentElement.classList.contains('dark')
|
|
}
|
|
|
|
// 获取颜色浅两号的函数
|
|
function getLightColor(color: string, level: number = 2): string {
|
|
return adjustColor(color, level * 20)
|
|
}
|
|
|
|
// 获取颜色深两号的函数
|
|
function getDarkColor(color: string, level: number = 2): string {
|
|
return adjustColor(color, -level * 20)
|
|
}
|
|
|
|
// 通用的颜色调整函数（提取重复逻辑）
|
|
function adjustColor(color: string, amount: number): string {
|
|
if (!color || color.length !== 7 || color[0] !== '#') return color
|
|
|
|
const r = Math.min(255, Math.max(0, parseInt(color.substr(1, 2), 16) + amount))
|
|
const g = Math.min(255, Math.max(0, parseInt(color.substr(3, 2), 16) + amount))
|
|
const b = Math.min(255, Math.max(0, parseInt(color.substr(5, 2), 16) + amount))
|
|
|
|
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b
|
|
.toString(16)
|
|
.padStart(2, '0')}`
|
|
}
|
|
|
|
// 根据主题模式获取调整后的颜色
|
|
function getAdjustedColor(color: string, level: number = 2): string {
|
|
if (isDarkMode()) {
|
|
return getDarkColor(color, level)
|
|
} else {
|
|
return getLightColor(color, level)
|
|
}
|
|
}
|
|
|
|
// 处理鼠标进入
|
|
function handleMouseEnter(processId: string) {
|
|
hoverProcessId.value = processId
|
|
}
|
|
|
|
// 处理鼠标离开
|
|
function handleMouseLeave() {
|
|
hoverProcessId.value = null
|
|
}
|
|
|
|
// 处理双击编辑
|
|
function handleDblClick(processId: string, currentDescription: string) {
|
|
editingProcessId.value = processId
|
|
editValue.value = currentDescription
|
|
}
|
|
|
|
// 处理保存编辑
|
|
function handleSave(processId: string) {
|
|
if (!editingProcessId.value) return
|
|
|
|
emit('save-edit', props.step.Id || '', processId, editValue.value)
|
|
editingProcessId.value = null
|
|
editValue.value = ''
|
|
}
|
|
|
|
// 处理取消编辑
|
|
function handleCancel() {
|
|
editingProcessId.value = null
|
|
editValue.value = ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="process-card" @click="handleCardClick">
|
|
<div class="process-content">
|
|
<!-- 显示模式 -->
|
|
<div class="display-content">
|
|
<span
|
|
v-for="process in currentTaskProcess"
|
|
:key="process.ID"
|
|
class="process-segment"
|
|
@mouseenter="handleMouseEnter(process.ID)"
|
|
@mouseleave="handleMouseLeave"
|
|
>
|
|
<span
|
|
class="agent-name"
|
|
:style="{
|
|
backgroundColor: getActionTypeDisplay(process.ActionType)?.color || '#909399',
|
|
color: '#fff',
|
|
padding: '2px 6px',
|
|
borderRadius: '3px',
|
|
marginRight: '4px'
|
|
}"
|
|
>
|
|
{{ process.AgentName }}
|
|
</span>
|
|
|
|
<!-- 编辑模式 - 修改为卡片样式 -->
|
|
<div v-if="editingProcessId === process.ID" class="edit-container">
|
|
<div class="edit-card">
|
|
<div class="flex flex-col gap-3">
|
|
<el-input
|
|
v-model="editValue"
|
|
type="textarea"
|
|
:autosize="{ minRows: 3, maxRows: 6 }"
|
|
placeholder="请输入描述内容"
|
|
autofocus
|
|
/>
|
|
<div class="flex justify-end">
|
|
<svg-icon
|
|
icon-class="Check"
|
|
size="20px"
|
|
color="#328621"
|
|
class="cursor-pointer mr-4"
|
|
@click="handleSave(process.ID)"
|
|
title="保存"
|
|
/>
|
|
<svg-icon
|
|
icon-class="Cancel"
|
|
size="20px"
|
|
color="#8e0707"
|
|
class="cursor-pointer mr-1"
|
|
@click="handleCancel"
|
|
title="取消"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 显示模式 -->
|
|
<span
|
|
v-else
|
|
class="process-description"
|
|
:class="{ hovered: hoverProcessId === process.ID }"
|
|
:style="{
|
|
border: `1px solid ${getActionTypeDisplay(process.ActionType)?.border}`,
|
|
backgroundColor:
|
|
hoverProcessId === process.ID
|
|
? getAdjustedColor(getActionTypeDisplay(process.ActionType)?.color || '#909399')
|
|
: 'transparent'
|
|
}"
|
|
@dblclick="handleDblClick(process.ID, process.Description)"
|
|
>
|
|
{{ process.Description }}
|
|
</span>
|
|
|
|
<span class="separator" v-if="process.Description && !process.Description.endsWith('。')"
|
|
>。</span
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- 按钮点击不会冒泡到卡片 -->
|
|
<!-- <BranchButton :step="step" /> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.process-card {
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background: var(--color-bg-list);
|
|
border: 1px solid var(--color-border-default);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
|
|
.process-content {
|
|
min-height: 20px;
|
|
|
|
.display-content {
|
|
line-height: 1.6;
|
|
font-size: 14px;
|
|
color: var(--el-text-color-primary);
|
|
|
|
.process-segment {
|
|
display: inline;
|
|
position: relative;
|
|
|
|
.agent-name {
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
margin-right: 4px;
|
|
cursor: default;
|
|
}
|
|
|
|
.edit-container {
|
|
display: block; // 改为块级元素，使其换行显示
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
|
|
.edit-card {
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
width: 100%;
|
|
max-width: 600px;
|
|
|
|
:deep(.el-textarea) {
|
|
width: 100%;
|
|
|
|
.el-textarea__inner {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
color: var(--color-text-taskbar);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.process-description {
|
|
display: inline;
|
|
white-space: normal;
|
|
cursor: pointer;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.separator {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
&:last-child .separator {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.process-card:hover {
|
|
border-color: var(--el-border-color);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
</style>
|