用户管理页面调整

wujingjing

2025-01-13 0bb7dffa90bfa3bd5ad04b75da9c31d21347c668

 src/views/project/yw/systemManage/flowApp/FlowApp.vue

@@ -1,12 +1,17 @@
<template>
   <div class="absolute bottom-0 left-0 right-0 top-0">
   <div class="absolute bottom-0 left-0 right-0 top-0 bg-page text-base">
      <div class="relative flex h-full w-full flex-col">
         <Header />
         <Header :isViewMode="isViewMode" v-if="flowAgent" :flowAgent="flowAgent" :queryId="queryId" />
         <main class="relative flex h-full w-full flex-1">
			
            <Sidebar @dragstart="handleOnDragStart"/>
            <div class="relative h-full flex-1 overflow-hidden">
               <MainCanvas />
            <Sidebar v-if="!isViewMode" class="w-52" @dragstart="handleOnDragStart" />
            <div class="relative h-full flex-1 overflow-hidden" v-if="flowJson">
               <MainCanvas
                  :isViewMode="isViewMode"
                  :flowJson="flowJson"
                  :agentNames="agentNames"
                  :funcNames="funcNames"
                  :llmInfoList="llmInfoList"
               />
            </div>
         </main>
      </div>
@@ -18,13 +23,26 @@
import { useVueFlow } from '@vue-flow/core';
import { useClipboard } from '@vueuse/core';
// import MainCanvas from '@/components/vue-flow/MainCanvas.vue';
import MainCanvas from '/@/components/vue-flow/MainCanvas.vue';
import { computed, onMounted, ref } from 'vue';
import Header from './components/Header.vue';
import Sidebar from './components/Sidebar.vue';

import {
   get_agent_names,
   get_flow_func_names,
   get_workflow_agent_list,
   get_workflow_json_flow,
   get_llm_info_list,
} from '/@/api/workflow';
import MainCanvas from '/@/components/vue-flow/MainCanvas.vue';
import router from '/@/router';
const props = defineProps<{
   isViewMode: {
      type: Boolean;
      default: false;
   };
}>();
// import { Button } from '@/components/ui/button';
// import { Toaster, useToast } from '@/components/ui/toast';

function handleOnDragStart(event: DragEvent, nodeType: any) {
   if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', nodeType);
@@ -32,21 +50,72 @@
   }
}

const queryId = computed(() => router.currentRoute.value.query.id as string);

const { toObject } = useVueFlow();
const { copy } = useClipboard();
// const { toast } = useToast();
// function handleClickGetData() {
//    copy(JSON.stringify(toObject())).then(() => {
//       toast({
//          title: 'copied success',
//       });
//    });
// }

// function handleClickPublishBtn() {
//    toast({
//       title: 'Save Data',
//       description: '1.valid data 2.fetch backend api to save result',
//    });
// }
const flowJson = ref(null);

const flowAgent = ref(null);

const handleGetJSON = async (id: string) => {
   const res = await get_workflow_json_flow({
      agent_id: id,
   });
   flowJson.value = res.json_ok ? res.json_flow ?? {} : {};
};

const getFlowAgent = async () => {
   const res = await get_workflow_agent_list();
   const flowAgentList = res.values ?? [];
   const currentFlowAgent = flowAgentList.find((item: any) => item.id === queryId.value);
   flowAgent.value = currentFlowAgent;
};

const agentNames = ref([]);
const getAgentNames = async () => {
   const res = await get_agent_names();
   agentNames.value = res.agents ?? [];
};
const funcNames = ref([]);

const getFuncNames = async () => {
   const res = await get_flow_func_names();
   funcNames.value = res.funcs ?? [];
};

const llmInfoList = ref([]);
const getLlmInfoList = async () => {
   const res = await get_llm_info_list();
   const factorys = res.factorys ?? [];
   const connections = res.connections ?? [];
   const logicTree = [];
   factorys.forEach((factory: any) => {
      logicTree.push({
         id: factory.factory_id,
         name: factory.factory_name,
         type: 'factory',
         model: factory,
         children: connections
            .filter((connection: any) => connection.factory_id === factory.factory_id)
            .map((item: any) => ({
               id: item.connect_id,
               name: item.connect_title,
               type: 'connection',
               model: item,
            })),
      });
   });
   llmInfoList.value = logicTree;
};

onMounted(() => {
   if (!queryId.value) return;
   handleGetJSON(queryId.value);
   getFlowAgent();
   getAgentNames();
   getFuncNames();
   getLlmInfoList();
});
</script>