-
+
-
{{ currentWorkflowForCreation?.flowName || '内容创作' }}
{{ currentWorkflowForCreation?.description || '填写表单参数进行内容创作' }}
-
+
+ {{ creationFormCollapsed ? '展开表单' : '收起表单' }}
+
返回画布
-
-
-
-
-
-
-
-
- {{ node.name }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
历史对话
+
+
-
+
+
+
-
- 助手
+ 这里展示历史对话内容(样式占位,功能待定)。
+
+ 我
+ 收起上方表单后,此区域可完整展示历史对话。
+
-
{{ file.name }}
-
技能: {{ selectedCreationSkill.name }}
@@ -683,6 +639,9 @@ const showCreationSkillSelector = ref(false);
const currentSessionId = ref(null); // 当前会话的 sessionId(从工作空间进入时使用)
const isFromWorkspace = ref(false); // 是否从工作空间进入创作模式
const isCreating = ref(false);
+const creationFormCollapsed = ref(false);
+const formPanelHeightPercent = ref(50);
+const isDraggingMiddleSplitter = ref(false);
// 预览相关状态
const previewDialogVisible = ref(false);
const previewUrl = ref('');
@@ -1447,11 +1406,25 @@ const stopExecution = async () => {
ElMessage.error('终止执行失败');
}
};
-// 判断节点是否有可见字段
-const _hasVisibleFields = (node: any) => {
- if (!node.config) return false;
- const excludeKeys = ['nodeCode', 'width', 'height', 'x', 'y', 'formConfig', 'inputSource', 'fieldMetadata', 'selectedModel'];
- return Object.keys(node.config).some((key) => !excludeKeys.includes(key));
+
+const handleMiddleSplitterMouseDown = () => {
+ if (creationFormCollapsed.value) return;
+ isDraggingMiddleSplitter.value = true;
+};
+
+const handleGlobalMouseMove = (e: MouseEvent) => {
+ if (!isDraggingMiddleSplitter.value) return;
+ const middleEl = document.querySelector('.creation-middle') as HTMLElement | null;
+ if (!middleEl) return;
+
+ const rect = middleEl.getBoundingClientRect();
+ const y = e.clientY - rect.top;
+ const ratio = (y / rect.height) * 100;
+ formPanelHeightPercent.value = Math.min(75, Math.max(25, ratio));
+};
+
+const handleGlobalMouseUp = () => {
+ isDraggingMiddleSplitter.value = false;
};
// 根据字段类型返回CSS类名
const getFieldClass = (type: string) => {
@@ -2520,6 +2493,8 @@ onMounted(async () => {
initLogicFlow();
await getNodeLibrary();
await fetchWorkflowList();
+ window.addEventListener('mousemove', handleGlobalMouseMove);
+ window.addEventListener('mouseup', handleGlobalMouseUp);
// 获取当前用户角色
try {
@@ -2530,6 +2505,8 @@ onMounted(async () => {
}
});
onBeforeUnmount(() => {
+ window.removeEventListener('mousemove', handleGlobalMouseMove);
+ window.removeEventListener('mouseup', handleGlobalMouseUp);
logicFlowInstance.value?.destroy();
logicFlowInstance.value = null;
});
@@ -2672,20 +2649,74 @@ onBeforeUnmount(() => {
display: block;
}
.creation-mode-container {
- display: flex;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ gap: 14px;
flex: 1;
min-height: 0;
height: 100%;
}
.creation-form-panel {
- flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
- max-width: 1200px;
- margin: 0 auto;
width: 100%;
}
+.creation-form-panel.collapsed {
+ display: none;
+}
+.creation-history-panel {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+.history-header {
+ font-size: 16px;
+ font-weight: 700;
+ color: #1e293b;
+ padding-bottom: 12px;
+ border-bottom: 1px solid #e5e7eb;
+ margin-bottom: 12px;
+}
+.history-list-placeholder {
+ flex: 1;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding-right: 4px;
+}
+.history-item {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+.history-item .role {
+ font-size: 12px;
+ color: #64748b;
+}
+.history-item .bubble {
+ max-width: 86%;
+ padding: 10px 12px;
+ border-radius: 12px;
+ line-height: 1.6;
+ font-size: 13px;
+}
+.history-item.assistant .bubble {
+ background: #f1f5f9;
+ color: #0f172a;
+ align-self: flex-start;
+}
+.history-item.user {
+ align-items: flex-end;
+}
+.history-item.user .bubble {
+ background: #3b82f6;
+ color: #fff;
+}
+.creation-form-panel.collapsed + .creation-history-panel {
+ grid-column: 1 / -1;
+}
/* 画布模式:画布和侧边栏并排 */
.panel.canvas-panel {
flex: 1;
@@ -3040,6 +3071,9 @@ onBeforeUnmount(() => {
width: 100%;
flex-wrap: wrap;
}
+ .creation-middle {
+ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+ }
}
.workflow-list-panel {
padding: 16px;
@@ -3170,15 +3204,111 @@ onBeforeUnmount(() => {
display: flex;
flex: 1;
min-height: 0;
+ height: 100%;
+}
+.creation-main-panel {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ width: 100%;
+}
+.creation-middle {
+ display: grid;
+ grid-template-rows: minmax(0, 1fr) 8px minmax(0, 1fr);
+ gap: 0;
+ flex: 1;
+ min-height: 0;
+ overflow: hidden;
+}
+.creation-middle.form-collapsed {
+ grid-template-rows: 1fr;
+}
+.middle-splitter {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: row-resize;
+ user-select: none;
+}
+.middle-splitter-line {
+ width: 100%;
+ height: 2px;
+ background: #dbe4ef;
+ border-radius: 999px;
+}
+.middle-splitter:hover .middle-splitter-line {
+ background: #8db4f7;
}
.creation-form-panel {
- flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
- max-width: 1200px;
- margin: 0 auto;
width: 100%;
+ margin: 0;
+ max-width: none;
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #e5e7eb;
+}
+.simple-form-scroll {
+ flex: 1;
+ overflow: auto;
+ padding: 12px;
+}
+.simple-creation-form :deep(.el-form-item) {
+ margin-bottom: 12px;
+}
+.creation-history-panel {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ padding: 12px;
+ height: 100%;
+}
+.history-header {
+ font-size: 16px;
+ font-weight: 700;
+ color: #1e293b;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #e5e7eb;
+ margin-bottom: 10px;
+}
+.history-list-placeholder {
+ flex: 1;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding-right: 4px;
+}
+.history-item {
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+.history-item .role {
+ font-size: 12px;
+ color: #64748b;
+}
+.history-item .bubble {
+ max-width: 86%;
+ padding: 10px 12px;
+ border-radius: 12px;
+ line-height: 1.6;
+ font-size: 13px;
+}
+.history-item.assistant .bubble {
+ background: #f1f5f9;
+ color: #0f172a;
+ align-self: flex-start;
+}
+.history-item.user {
+ align-items: flex-end;
+}
+.history-item.user .bubble {
+ background: #3b82f6;
+ color: #fff;
}
.creation-header {
display: flex;
@@ -3387,6 +3517,9 @@ onBeforeUnmount(() => {
width: 100%;
flex-wrap: wrap;
}
+ .creation-middle {
+ grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
+ }
}
/* 左侧Tab面板样式 */
-
@@ -338,15 +297,12 @@
-
-
-