表单校验

wujingjing

2025-02-17 0f01c4bbce19fa8489a4e835c83cb9415549f681

 src/views/project/yw/systemManage/flowApp/components/Sidebar.vue

@@ -1,66 +1,32 @@
<template>
   <div class="w-44 bg-white rounded-lg mt-2 py-2 px-2">
   <div class="bg-white rounded-lg mt-2 py-2 px-2 relative">
      <div
         v-for="item in sidebarList"
         v-for="item in VueFlowConfig.nodeStyleMap.values()"
         :key="item.type"
         class="cursor-grab rounded-md bg-white py-3 px-2 hover:bg-gray-100"
         :draggable="true"
         @dragstart="handleOnDragStart($event, item.type)"
      >
         <div class="flex items-center justify-between">
            <h3 class="flex items-center gap-x-2">
               <img :src="item.img" class="h-4 w-4" alt="LLM icon" />
            <span class="flex items-center gap-x-2">
               <YWIcon :name="item.icon" :fontSize="item.fontSize" :color="item.color" class="rounded-lg p-1.5" :class="item.class" />
               {{ item.title }}
            </h3>
            </span>
            <!-- <plus-icon class="text-primary" /> -->
         </div>
      </div>
      <!-- <YWIcon name="close" class="absolute top-2 right-2 cursor-pointer"  /> -->
   </div>
</template>

<script setup lang="ts">
import llmImg from '/@/components/vue-flow/ui/assets/images/icon_LLM.png';
import startImg from '/@/components/vue-flow/ui/assets/images/icon_Start.png';
import endImg from '/@/components/vue-flow/ui/assets/images/icon_End.png';
import { NodeType, nodeTypeMap } from '/@/components/vue-flow/vueFlowEnum';
import YWIcon from '/@/components/icon/index.vue';
import { VueFlowConfig } from '/@/components/vue-flow/ui/VueFlowConfig';

const emit = defineEmits(['dragstart']);

const handleOnDragStart = (e, type: string) => {
   emit('dragstart', e, type);
};

const sidebarList = [
   {
      type: NodeType.Start,
      title: nodeTypeMap[NodeType.Start],
      img: startImg,
   },
   {
      type: NodeType.End,
      title: nodeTypeMap[NodeType.End],
      img: endImg,
   },
    {
      type: NodeType.Condition,
      title: nodeTypeMap[NodeType.Condition],
      img: llmImg,
   },
   {
      type: NodeType.LLM,
      title: nodeTypeMap[NodeType.LLM],
      img: llmImg,
   },
   {
      type: NodeType.Output,
      title: nodeTypeMap[NodeType.Output],
      img: llmImg,
   },
   {
      type: NodeType.Agent,
      title: nodeTypeMap[NodeType.Agent],
      img: llmImg,
   },

];
</script>
<style scoped lang="scss"></style>