feat:提交最新代码

apps/web/components.d.ts

@@ -66,10 +66,13 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTooltop: typeof import('element-plus/es')['ElTooltop']
     ErrorHandling: typeof import('./src/components/SetterCommon/Code/ErrorHandling.vue')['default']
     ExecutionChart: typeof import('./src/components/Chart/ExecutionChart.vue')['default']
     HttpSetter: typeof import('./src/components/setter/HttpSetter.vue')['default']
     InputVariables: typeof import('./src/components/SetterCommon/Code/InputVariables.vue')['default']
+    NodeToolBar: typeof import('../../packages/workflow/src/components/elements/node-tool-bar/index.vue')['default']
+    NodeTools: typeof import('./src/components/NodeTools/index.vue')['default']
     OutputVariables: typeof import('./src/components/SetterCommon/Code/OutputVariables.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

apps/web/src/components/setter/CodeSetter.vue

@@ -57,7 +57,6 @@ interface ErrorHandler {
 }
 
 
-
 const formData = reactive({
     // 输入变量
     inputVariables: [

packages/workflow/src/components/elements/node-temp/HttpNode1.vue

@@ -9,6 +9,7 @@
 import { Position } from '@vue-flow/core'
 import CanvasHandle from '../handles/CanvasHandle.vue'
 import { Icon } from '@repo/ui'
+import NodeToolbar from "../node-tool-bar/index.vue";
 
 import type { NodeProps } from '@vue-flow/core'
 import type { IWorkflowNode } from '../../../Interface'
@@ -32,12 +33,16 @@ const methodColors: Record<string, string> = {
 
 <template>
 	<div
-		class="relative min-w-[240px] transition-all duration-300 ease-out hover:-translate-y-0.5"
+		class="relative min-w-[240px] node-http transition-all duration-300 ease-out hover:-translate-y-0.5"
 		:class="{ 'scale-105': selected }"
 	>
+		<div class="tool-bar absolute -top-10 right-0  h-7 pb-1 transition-all duration-300 ease-out">
+			<NodeToolbar  />
+		</div>
+
 		<!-- 节点主体 -->
 		<div
-			class="bg-gradient-to-br from-white to-blue-50 border-2 rounded-xl shadow-md transition-all duration-300 relative overflow-hidden"
+			class="bg-gradient-to-br  from-white to-blue-50 border-2 rounded-xl shadow-md transition-all duration-300 relative overflow-hidden"
 			:class="
 				selected
 					? 'border-blue-500 shadow-blue-200 shadow-lg'
@@ -152,4 +157,13 @@ const methodColors: Record<string, string> = {
 	</div>
 </template>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+.tool-bar{
+	//display: none;
+}
+.node-http:hover{
+	.tool-bar{
+		display: block;
+	}
+}
+</style>

packages/workflow/src/components/elements/node-tool-bar/index.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Icon } from '@repo/ui'
+import {ref} from 'vue'
+const barState = ref(false)
+const more = ()=>{
+	barState.value = !barState.value
+}
+const BarHandleClick = (state:string)=>{
+	console.log(state)
+	barState.value = false
+	if(state==='node-edit'){
+
+	}
+}
+</script>
+
+<template>
+	<div class="node-tools relative" >
+		<div class="bar flex items-center bg-white shadow-lg shadow-gray-200 rounded-xl">
+			<Icon icon="lucide:play" width="20" height="20" class="text-gray-400 p-2 hover:cursor-pointer hover:bg-gray-200" @click="BarHandleClick('node-run')" />
+			<Icon icon="lucide:ellipsis" width="20" height="20" class="text-gray-400 p-2 hover:cursor-pointer hover:bg-gray-200" @click="more"  />
+		</div>
+		<div class="modal absolute -right-26 z-100  bg-white rounded-lg  shadow-xl shadow-gray-200" v-show="barState">
+			<ul class="text-sm">
+				<li @click="BarHandleClick('node-run')">
+					<p>运行此步骤</p>
+				</li>
+				<li @click="BarHandleClick('node-edit')">
+					<p>更改节点</p>
+				</li>
+				<li @click="BarHandleClick('node-copy')">
+					<p>拷贝</p>
+				</li>
+				<li @click="BarHandleClick('node-delete')">
+					<p>删除</p>
+				</li>
+				<li @click="BarHandleClick('node-doc')">
+					<p>查看文档</p>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="less">
+.node-tools{
+	.modal{
+		width: 240px;
+		ul{
+			margin: 0;
+			padding: 0;
+		}
+		li{
+			padding: 6px;
+			text-align: left;
+			list-style: none;
+			border-bottom: 1px solid #eee;
+			p {
+				margin: 0;
+				padding:10px 20px;
+				border-radius: 12px;
+				&:hover{
+					cursor: pointer;
+					background: #e5eff6;
+				}
+			}
+		}
+	}
+}
+</style>