X-Agents/web/src/views/skill/useWorkflow.ts

import { ref } from 'vue'

interface WorkflowNode {
  id: string
  name: string
  description: string
  icon: string
  color: string
  bgColor: string
  borderColor: string
  status: 'pending' | 'processing' | 'completed'
  expanded: boolean
  children?: WorkflowNode[]
}

export function useWorkflow() {
  // 流程生成相关
  const isGeneratingGraph = ref(false)
  const isGraphGenerated = ref(false)

  const workflowData = ref<WorkflowNode[]>([
    {
      id: 'output',
      name: '最终输出',
      description: '生成最终结果返回给用户',
      icon: 'fa-check-circle',
      color: 'text-green-400',
      bgColor: 'from-green-500/20 to-green-500/5',
      borderColor: 'border-green-500/30',
      status: 'pending',
      expanded: false,
      children: [
        {
          id: 'generate',
          name: '方案生成',
          description: '基于分析结果构建解决方案',
          icon: 'fa-lightbulb',
          color: 'text-primary-orange',
          bgColor: 'from-primary-orange/20 to-primary-orange/5',
          borderColor: 'border-primary-orange/30',
          status: 'pending',
          expanded: false,
          children: [
            {
              id: 'analyze',
              name: '问题分析',
              description: '拆解问题、提取关键信息、理解用户意图',
              icon: 'fa-microscope',
              color: 'text-purple-400',
              bgColor: 'from-purple-500/20 to-purple-500/5',
              borderColor: 'border-purple-500/30',
              status: 'pending',
              expanded: false,
              children: [
                {
                  id: 'question',
                  name: '用户问题',
                  description: '输入原始需求和问题描述',
                  icon: 'fa-question',
                  color: 'text-primary-cyan',
                  bgColor: 'from-primary-cyan/20 to-primary-cyan/5',
                  borderColor: 'border-primary-cyan/30',
                  status: 'pending',
                  expanded: false,
                }
              ]
            },
            {
              id: 'data',
              name: '数据获取',
              description: '从知识库、向量数据库获取相关信息',
              icon: 'fa-database',
              color: 'text-green-400',
              bgColor: 'from-green-500/20 to-green-500/5',
              borderColor: 'border-green-500/30',
              status: 'pending',
              expanded: false,
            }
          ]
        },
        {
          id: 'evaluate',
          name: '方案评估',
          description: '验证方案可行性和效果',
          icon: 'fa-clipboard-check',
          color: 'text-yellow-400',
          bgColor: 'from-yellow-500/20 to-yellow-500/5',
          borderColor: 'border-yellow-500/30',
          status: 'pending',
          expanded: false,
        }
      ]
    }
  ])

  // 展开/收起节点
  const toggleNode = (node: WorkflowNode) => {
    node.expanded = !node.expanded
  }

  // 递归渲染节点
  const renderWorkflow = (nodes: WorkflowNode[], level: number = 0) => {
    return nodes
  }

  const generateGraph = () => {
    isGeneratingGraph.value = true
    setTimeout(() => {
      isGeneratingGraph.value = false
      isGraphGenerated.value = true
      if (workflowData.value.length > 0) {
        workflowData.value[0].expanded = true
        if (workflowData.value[0].children) {
          workflowData.value[0].children.forEach(child => {
            child.expanded = false
            if (child.children) {
              child.children.forEach(gc => gc.expanded = false)
            }
          })
        }
      }
    }, 2500)
  }

  return {
    // State
    workflowData,
    isGeneratingGraph,
    isGraphGenerated,

    // Methods
    toggleNode,
    renderWorkflow,
    generateGraph,
  }
}