From 4ccab78831409decc3148668449dedc778380f07 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 17 二月 2025 16:24:09 +0800
Subject: [PATCH] Node 宽度基本一致
---
src/components/vue-flow/ui/nodes/AnalysisNode.vue | 5 +-
src/components/vue-flow/ui/nodes/FuncNode.vue | 2
vite.config.ts | 2
src/components/vue-flow/ui/nodes/components/NodeBasicLayout.vue | 3 -
src/components/vue-flow/ui/nodes/AgentNode.vue | 2
src/components/vue-flow/ui/nodes/OutputNode.vue | 10 ++++
src/components/vue-flow/ui/nodes/components/FieldLayout.vue | 2
src/components/vue-flow/ui/nodes/LLMNode.vue | 5 +-
src/components/vue-flow/ui/nodes/StartNode.vue | 63 +++++++++----------------------
9 files changed, 39 insertions(+), 55 deletions(-)
diff --git a/src/components/vue-flow/ui/nodes/AgentNode.vue b/src/components/vue-flow/ui/nodes/AgentNode.vue
index d9bf7d5..53cd6b6 100644
--- a/src/components/vue-flow/ui/nodes/AgentNode.vue
+++ b/src/components/vue-flow/ui/nodes/AgentNode.vue
@@ -9,7 +9,7 @@
<FieldLayout :title="VueFlowHelper.getConfigValue(VueFlowHelper.getGroupParam(data), 'name', '浠ｇ悊鍚嶇О')">
<el-select
- class="w-[340px]"
+ class="w-full"
filterable
:disabled="isViewMode"
:placeholder="VueFlowHelper.getConfigValue(agentParams, 'placeholder', '浠ｇ悊鍚嶇О')"
diff --git a/src/components/vue-flow/ui/nodes/AnalysisNode.vue b/src/components/vue-flow/ui/nodes/AnalysisNode.vue
index 6b67bd0..b2bdcc7 100644
--- a/src/components/vue-flow/ui/nodes/AnalysisNode.vue
+++ b/src/components/vue-flow/ui/nodes/AnalysisNode.vue
@@ -2,7 +2,7 @@
<NodeBasicLayout v-model:title="data.title" :type="NodeType.Analysis" :isViewMode="isViewMode">
<Handle :id="targetHandleId" type="target" :position="Position.Left" />
<FieldLayout :title="modelSetting.name">
- <div class="w-[340px] flex-items-center gap-x-2">
+ <div class="w-full flex-items-center gap-x-2">
<div class="flex-column gap-y-1.5">
<span class="text-gray-500">{{ VueFlowHelper.getParams(modelSetting, 'llm_model').label }}</span>
@@ -24,7 +24,8 @@
<el-input-number
:readonly="isViewMode"
v-model="VueFlowHelper.getParams(modelSetting, 'temperature').value"
- class="w-[180px]"
+ class="w-full"
+ controls-position="right"
placeholder=""
></el-input-number>
</div>
diff --git a/src/components/vue-flow/ui/nodes/FuncNode.vue b/src/components/vue-flow/ui/nodes/FuncNode.vue
index b8432dd..660e8fe 100644
--- a/src/components/vue-flow/ui/nodes/FuncNode.vue
+++ b/src/components/vue-flow/ui/nodes/FuncNode.vue
@@ -3,7 +3,7 @@
<Handle :id="targetHandleId" type="target" :position="Position.Left" />
<FieldLayout :title="VueFlowHelper.getConfigValue(VueFlowHelper.getGroupParam(data), 'name', '鍑芥暟鍚嶇О')">
<el-select
- class="w-[340px]"
+ class="w-full"
filterable
:placeholder="funcNameParams.placeholder"
v-model="funcNameParams.value"
diff --git a/src/components/vue-flow/ui/nodes/LLMNode.vue b/src/components/vue-flow/ui/nodes/LLMNode.vue
index 638a793..a612aab 100644
--- a/src/components/vue-flow/ui/nodes/LLMNode.vue
+++ b/src/components/vue-flow/ui/nodes/LLMNode.vue
@@ -8,7 +8,7 @@
<Handle :id="targetHandleId" type="target" :position="Position.Left" />
<FieldLayout :title="VueFlowHelper.getConfigValue(modelSetting, 'name', '妯″瀷璁剧疆')">
- <div class="w-[340px] flex-items-center gap-x-2">
+ <div class="w-full flex-items-center gap-x-2">
<div class="flex-column gap-y-1.5">
<span class="text-gray-500">{{ VueFlowHelper.getParams(modelSetting, 'llm_model').label }}</span>
<el-tree-select
@@ -27,8 +27,9 @@
<div class="flex-column gap-y-1.5">
<span class="text-gray-500">{{ VueFlowHelper.getParams(modelSetting, 'temperature').label }}</span>
<el-input-number
+ class="w-full"
+ controls-position="right"
v-model="VueFlowHelper.getParams(modelSetting, 'temperature').value"
- class="w-[180px]"
:readonly="isViewMode"
placeholder=""
></el-input-number>
diff --git a/src/components/vue-flow/ui/nodes/OutputNode.vue b/src/components/vue-flow/ui/nodes/OutputNode.vue
index 1933095..be303e2 100644
--- a/src/components/vue-flow/ui/nodes/OutputNode.vue
+++ b/src/components/vue-flow/ui/nodes/OutputNode.vue
@@ -1,6 +1,5 @@
<template>
<NodeBasicLayout
- :maxWidth="520"
v-model:title="data.title"
:type="NodeType.Output"
:description="VueFlowHelper.getConfigValue(data, 'description', '鍙悜鐢ㄦ埛鍙戦�佹秷鎭�...')"
@@ -21,6 +20,8 @@
v-model="VueFlowHelper.getParams(outputParams, 'output_result').value.type"
@change="interactionTypeChange"
:disabled="isViewMode"
+ class="flex-items-center justify-between interaction-radio-group"
+
>
<el-radio v-for="item in Object.keys(interactionTypeMap)" :key="item" :value="item">
{{ interactionTypeMap[item] }}
@@ -152,3 +153,10 @@
const isEditStatus = ref(false);
const tmpEditValue = ref('');
</script>
+<style scoped lang="scss">
+.interaction-radio-group {
+ :deep(.el-radio) {
+ margin-right: 0;
+ }
+}
+</style>
diff --git a/src/components/vue-flow/ui/nodes/StartNode.vue b/src/components/vue-flow/ui/nodes/StartNode.vue
index 4dd5e37..741c332 100644
--- a/src/components/vue-flow/ui/nodes/StartNode.vue
+++ b/src/components/vue-flow/ui/nodes/StartNode.vue
@@ -6,52 +6,27 @@
:isViewMode="isViewMode"
>
<FieldLayout :title="VueFlowHelper.getConfigValue(varListConfig, 'name', '娴佺▼鍙傛暟')">
- <el-table class="flex-auto" :data="varList" border>
- <el-table-column prop="name" width="170" label="鍙傛暟鍚�" fixed>
- <template #default="scope">
- <el-input v-model="scope.row.name" :readonly="isViewMode"></el-input>
+ <div v-for="(item, index) in varList" :key="index" class="group/varItem">
+ <FieldLayout level="2" title="鍙傛暟鍚�">
+ <template #right v-if="!isViewMode">
+ <span
+ class="ywifont ywicon-shanchu text-red-400 invisible group-hover/varItem:visible cursor-pointer"
+ @click="handleClickDeleteBtn(index)"
+ ></span>
</template>
- </el-table-column>
- <!-- <el-table-column prop="type" width="220" label="绫诲瀷">
- <template #default="scope">
- <el-select v-model="scope.row.type">
- <el-option
- v-for="item in Object.keys(parameterTypeMap)"
- :key="item"
- :value="item"
- :label="parameterTypeMap[item]"
- ></el-option>
- </el-select>
- </template>
- </el-table-column> -->
- <el-table-column prop="description" width="380" label="鎻忚堪">
- <template #default="scope">
- <el-input
- class="nowheel"
- type="textarea"
- :autosize="{ minRows: 1, maxRows: 6 }"
- v-model="scope.row.description"
- :readonly="isViewMode"
- ></el-input>
- </template>
- </el-table-column>
- <!-- <el-table-column prop="isRequired" width="56" label="蹇呭～">
- <template #default="scope">
- <el-checkbox v-model="scope.row.isRequired"></el-checkbox>
- </template>
- </el-table-column> -->
+ <el-input v-model="item.name" :readonly="isViewMode"></el-input>
+ </FieldLayout>
+ <FieldLayout level="2" title="鎻忚堪">
+ <el-input
+ class="nowheel"
+ type="textarea"
+ :autosize="{ minRows: 2, maxRows: 6 }"
+ v-model="item.description"
+ :readonly="isViewMode"
+ ></el-input>
+ </FieldLayout>
+ </div>
- <el-table-column label="鎿嶄綔" width="55" fixed="right" v-if="!isViewMode">
- <template #default="scope">
- <el-tooltip effect="dark" content="鍒犻櫎" placement="top">
- <i
- class="ywifont ywicon-shanchu !text-[17px] text-red-400 cursor-pointer"
- @click="handleClickDeleteBtn(scope.$index)"
- ></i>
- </el-tooltip>
- </template>
- </el-table-column>
- </el-table>
<el-button v-if="!isViewMode" class="w-fit" type="primary" @click="handleClickAddBtn">娣诲姞鍙傛暟</el-button>
</FieldLayout>
<Handle :id="handleId" type="source" :position="Position.Right" />
diff --git a/src/components/vue-flow/ui/nodes/components/FieldLayout.vue b/src/components/vue-flow/ui/nodes/components/FieldLayout.vue
index 21fa6c6..42dd280 100644
--- a/src/components/vue-flow/ui/nodes/components/FieldLayout.vue
+++ b/src/components/vue-flow/ui/nodes/components/FieldLayout.vue
@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col" :class="[`gap-${gapLen}`]">
<div class="flex-items-center justify-between">
- <div class="text-base" :class="[level === '1' ? 'font-bold' : 'text-secondary']">{{ title }}</div>
+ <div class="text-base" :class="[level === '1' ? 'font-bold' : 'text-secondary font-bold']">{{ title }}</div>
<div class="flex-items-center gap-3" v-if="$slots.right">
<slot name="right"></slot>
</div>
diff --git a/src/components/vue-flow/ui/nodes/components/NodeBasicLayout.vue b/src/components/vue-flow/ui/nodes/components/NodeBasicLayout.vue
index bf55afb..ddd0a4d 100644
--- a/src/components/vue-flow/ui/nodes/components/NodeBasicLayout.vue
+++ b/src/components/vue-flow/ui/nodes/components/NodeBasicLayout.vue
@@ -1,6 +1,6 @@
<template>
<div
- :style="{ maxHeight: `${maxHeight}px`, maxWidth: `${maxWidth}px`, minHeight: `${minHeight}px`, minWidth: minWidth }"
+ :style="{ maxHeight: `${maxHeight}px`, maxWidth: `${maxWidth}px`, minHeight: `${minHeight}px`, minWidth: `320px` }"
class="order-2 rounded-lg border-solid border-gray-100 bg-white p-3 shadow-md relative hover:border-blue-500 group h-fit"
>
<div
@@ -74,7 +74,6 @@
const props = defineProps({
maxWidth: { type: Number },
maxHeight: { type: Number },
- minWidth: { type: Number },
minHeight: { type: Number },
type: { type: String as PropType<NodeType>, required: true },
description: { type: String },
diff --git a/vite.config.ts b/vite.config.ts
index a568226..fa15255 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -45,7 +45,7 @@
host: '0.0.0.0',
port: env.VITE_PORT as unknown as number,
open: JSON.parse(env.VITE_OPEN),
- hmr: false,
+ hmr: true,
proxy: {
'/gitee': {
target: 'https://gitee.com',
--
Gitblit v1.9.3