feat: harden ai agent admin workflow experience
This commit is contained in:
@@ -18,7 +18,7 @@ import type {
|
||||
*/
|
||||
import { computed, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
import { Close, Setting } from '@element-plus/icons-vue';
|
||||
import { Settings2, X } from '@vben/icons';
|
||||
|
||||
import {
|
||||
ElButton,
|
||||
@@ -31,10 +31,19 @@ import {
|
||||
|
||||
import { AiWorkingAnimation } from '#/components/ai-loading';
|
||||
import { ChatBox } from '#/components/ChatBox';
|
||||
import {
|
||||
AppDesignPanel,
|
||||
AppSettingsPanel,
|
||||
DashboardBasicInfoConfirmPanel,
|
||||
DashboardDesignConfirmPanel,
|
||||
DashboardPublishConfirmPanel,
|
||||
DesignEditorPanel,
|
||||
SystemSummaryConfirmPanel,
|
||||
} from '#/components/form-editor';
|
||||
|
||||
import { useChatApi } from './composables/useChatApi';
|
||||
import { useEventHandler } from './composables/useEventHandler';
|
||||
|
||||
|
||||
// ==================== Props ====================
|
||||
const props = withDefaults(defineProps<AiChatPanelProps>(), {
|
||||
mode: 'workflow',
|
||||
@@ -184,13 +193,44 @@ const variablesDialogVisible = ref(false);
|
||||
const variablesForm = ref<Record<string, any>>({});
|
||||
const pendingMessage = ref('');
|
||||
|
||||
// ==================== 设计预览面板状态 ====================
|
||||
const showDesignPanel = ref(false);
|
||||
const currentDesign = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
const showAppDesignPanel = ref(false);
|
||||
const currentAppDesign = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
const showAppSettingsPanel = ref(false);
|
||||
const currentAppSettings = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
const showDashboardBasicInfoPanel = ref(false);
|
||||
const currentDashboardBasicInfo = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
const showDashboardDesignPanel = ref(false);
|
||||
const currentDashboardDesign = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
const showDashboardPublishPanel = ref(false);
|
||||
const currentDashboardPublish = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
const showSystemSummaryPanel = ref(false);
|
||||
const currentSystemSummary = ref<DesignPreviewData | undefined>(undefined);
|
||||
|
||||
// AI 工作动画状态（用于 application 类型工作流）
|
||||
const showLoadingAnimation = ref(false);
|
||||
const loadingAnimationTitle = ref('AI 正在开发...');
|
||||
|
||||
// 是否有任何设计面板打开
|
||||
const hasAnyDesignPanelOpen = computed(() => showLoadingAnimation.value);
|
||||
const hasAnyDesignPanelOpen = computed(
|
||||
() =>
|
||||
showDesignPanel.value ||
|
||||
showAppDesignPanel.value ||
|
||||
showAppSettingsPanel.value ||
|
||||
showDashboardBasicInfoPanel.value ||
|
||||
showDashboardDesignPanel.value ||
|
||||
showDashboardPublishPanel.value ||
|
||||
showSystemSummaryPanel.value ||
|
||||
showLoadingAnimation.value,
|
||||
);
|
||||
|
||||
// ==================== 工作流变量 ====================
|
||||
const startNode = computed(() => props.nodes?.find((n) => n.type === 'start'));
|
||||
@@ -234,16 +274,45 @@ const generateId = () =>
|
||||
`msg-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
|
||||
|
||||
const handleDesignPreview = (data: DesignPreviewData) => {
|
||||
// 关闭加载动画
|
||||
showLoadingAnimation.value = false;
|
||||
const content = [data.title, data.message].filter(Boolean).join('\n\n');
|
||||
if (content) {
|
||||
messages.value.push({
|
||||
id: generateId(),
|
||||
role: 'assistant',
|
||||
content,
|
||||
timestamp: new Date(),
|
||||
status: 'completed',
|
||||
});
|
||||
|
||||
switch (data.type) {
|
||||
case 'app_design': {
|
||||
currentAppDesign.value = data;
|
||||
showAppDesignPanel.value = true;
|
||||
break;
|
||||
}
|
||||
case 'app_settings': {
|
||||
currentAppSettings.value = data;
|
||||
showAppSettingsPanel.value = true;
|
||||
break;
|
||||
}
|
||||
case 'dashboard_basic_info': {
|
||||
currentDashboardBasicInfo.value = data;
|
||||
showDashboardBasicInfoPanel.value = true;
|
||||
break;
|
||||
}
|
||||
case 'dashboard_design': {
|
||||
currentDashboardDesign.value = data;
|
||||
showDashboardDesignPanel.value = true;
|
||||
break;
|
||||
}
|
||||
case 'dashboard_publish': {
|
||||
currentDashboardPublish.value = data;
|
||||
showDashboardPublishPanel.value = true;
|
||||
break;
|
||||
}
|
||||
case 'system_summary': {
|
||||
currentSystemSummary.value = data;
|
||||
showSystemSummaryPanel.value = true;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
currentDesign.value = data;
|
||||
showDesignPanel.value = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -685,6 +754,132 @@ const handleUpdateMessage = (
|
||||
};
|
||||
|
||||
// ==================== 设计预览处理 ====================
|
||||
const createDesignConfirmHandler = (
|
||||
showRef: ReturnType<typeof ref<boolean>>,
|
||||
dataRef: ReturnType<typeof ref<DesignPreviewData | undefined>>,
|
||||
confirmMessage: string,
|
||||
) => {
|
||||
return (data: Record<string, any>) => {
|
||||
showRef.value = false;
|
||||
dataRef.value = undefined;
|
||||
|
||||
// 全屏布局且是 application 类型工作流时，显示加载动画
|
||||
if (
|
||||
props.layout === 'fullscreen' &&
|
||||
props.agent?.workflow_type === 'application'
|
||||
) {
|
||||
showLoadingAnimation.value = true;
|
||||
loadingAnimationTitle.value = 'AI 正在继续开发...';
|
||||
}
|
||||
|
||||
const userMsg: ChatMessage = {
|
||||
id: generateId(),
|
||||
role: 'user',
|
||||
content: confirmMessage,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
messages.value.push(userMsg);
|
||||
|
||||
waitingForInput.value = false;
|
||||
waitingConfig.value = null;
|
||||
|
||||
resumeExecution(JSON.stringify(data));
|
||||
};
|
||||
};
|
||||
|
||||
const createDesignCloseHandler = (
|
||||
showRef: ReturnType<typeof ref<boolean>>,
|
||||
dataRef: ReturnType<typeof ref<DesignPreviewData | undefined>>,
|
||||
) => {
|
||||
return () => {
|
||||
showRef.value = false;
|
||||
dataRef.value = undefined;
|
||||
};
|
||||
};
|
||||
|
||||
const handleDesignConfirm = createDesignConfirmHandler(
|
||||
showDesignPanel,
|
||||
currentDesign,
|
||||
'确认设计',
|
||||
);
|
||||
const handleDesignClose = createDesignCloseHandler(
|
||||
showDesignPanel,
|
||||
currentDesign,
|
||||
);
|
||||
|
||||
const handleAppDesignConfirm = createDesignConfirmHandler(
|
||||
showAppDesignPanel,
|
||||
currentAppDesign,
|
||||
'确认应用设计',
|
||||
);
|
||||
const handleAppDesignClose = createDesignCloseHandler(
|
||||
showAppDesignPanel,
|
||||
currentAppDesign,
|
||||
);
|
||||
|
||||
const handleAppSettingsConfirm = createDesignConfirmHandler(
|
||||
showAppSettingsPanel,
|
||||
currentAppSettings,
|
||||
'确认应用设置',
|
||||
);
|
||||
const handleAppSettingsClose = createDesignCloseHandler(
|
||||
showAppSettingsPanel,
|
||||
currentAppSettings,
|
||||
);
|
||||
|
||||
const handleDashboardBasicInfoConfirm = createDesignConfirmHandler(
|
||||
showDashboardBasicInfoPanel,
|
||||
currentDashboardBasicInfo,
|
||||
'确认仪表盘基础信息',
|
||||
);
|
||||
const handleDashboardBasicInfoClose = createDesignCloseHandler(
|
||||
showDashboardBasicInfoPanel,
|
||||
currentDashboardBasicInfo,
|
||||
);
|
||||
|
||||
const handleDashboardDesignConfirm = createDesignConfirmHandler(
|
||||
showDashboardDesignPanel,
|
||||
currentDashboardDesign,
|
||||
'确认仪表盘设计',
|
||||
);
|
||||
const handleDashboardDesignClose = createDesignCloseHandler(
|
||||
showDashboardDesignPanel,
|
||||
currentDashboardDesign,
|
||||
);
|
||||
|
||||
const handleDashboardPublishConfirm = (data: Record<string, any>) => {
|
||||
showDashboardPublishPanel.value = false;
|
||||
currentDashboardPublish.value = undefined;
|
||||
|
||||
const userMsg: ChatMessage = {
|
||||
id: generateId(),
|
||||
role: 'user',
|
||||
content: `发布到菜单：${data.menu_name}`,
|
||||
timestamp: new Date(),
|
||||
};
|
||||
messages.value.push(userMsg);
|
||||
|
||||
waitingForInput.value = false;
|
||||
waitingConfig.value = null;
|
||||
|
||||
resumeExecution(JSON.stringify(data));
|
||||
};
|
||||
const handleDashboardPublishClose = createDesignCloseHandler(
|
||||
showDashboardPublishPanel,
|
||||
currentDashboardPublish,
|
||||
);
|
||||
|
||||
const handleSystemSummaryConfirm = createDesignConfirmHandler(
|
||||
showSystemSummaryPanel,
|
||||
currentSystemSummary,
|
||||
'完成',
|
||||
);
|
||||
const handleSystemSummaryClose = createDesignCloseHandler(
|
||||
showSystemSummaryPanel,
|
||||
currentSystemSummary,
|
||||
);
|
||||
|
||||
// ==================== 暴露方法 ====================
|
||||
defineExpose({
|
||||
clearChat: handleClear,
|
||||
sendMessage: handleSend,
|
||||
@@ -724,14 +919,14 @@ onUnmounted(() => {
|
||||
mode === 'workflow' && enableVariablesForm && hasMultipleVariables
|
||||
"
|
||||
link
|
||||
:icon="Setting"
|
||||
:icon="Settings2"
|
||||
title="配置输入变量"
|
||||
@click="variablesDialogVisible = true"
|
||||
/>
|
||||
<ElButton
|
||||
v-if="showCloseButton"
|
||||
link
|
||||
:icon="Close"
|
||||
:icon="X"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
@@ -750,7 +945,6 @@ onUnmounted(() => {
|
||||
:enable-image="enableImage"
|
||||
:enable-voice="enableVoice"
|
||||
:enable-feedback="enableFeedback"
|
||||
:show-reasoning-steps="true"
|
||||
:show-clear-button="showClearButton"
|
||||
:empty-text="emptyText"
|
||||
:welcome-config="welcomeConfig"
|
||||
@@ -811,6 +1005,133 @@ onUnmounted(() => {
|
||||
/>
|
||||
|
||||
<!-- 设计编辑面板 -->
|
||||
<DesignEditorPanel
|
||||
v-if="showDesignPanel"
|
||||
:visible="showDesignPanel"
|
||||
:design="currentDesign as any"
|
||||
@update:visible="showDesignPanel = $event"
|
||||
@confirm="handleDesignConfirm"
|
||||
@close="handleDesignClose"
|
||||
/>
|
||||
|
||||
<!-- 应用设计面板 -->
|
||||
<AppDesignPanel
|
||||
v-if="showAppDesignPanel"
|
||||
:visible="showAppDesignPanel"
|
||||
:design="currentAppDesign as any"
|
||||
@update:visible="showAppDesignPanel = $event"
|
||||
@confirm="handleAppDesignConfirm"
|
||||
@close="handleAppDesignClose"
|
||||
/>
|
||||
|
||||
<!-- 应用设置面板 -->
|
||||
<AppSettingsPanel
|
||||
v-if="showAppSettingsPanel"
|
||||
:visible="showAppSettingsPanel"
|
||||
:settings="currentAppSettings as any"
|
||||
@update:visible="showAppSettingsPanel = $event"
|
||||
@confirm="handleAppSettingsConfirm"
|
||||
@close="handleAppSettingsClose"
|
||||
/>
|
||||
|
||||
<!-- 仪表盘基础信息面板 -->
|
||||
<DashboardBasicInfoConfirmPanel
|
||||
v-if="showDashboardBasicInfoPanel"
|
||||
:visible="showDashboardBasicInfoPanel"
|
||||
:basic-info="currentDashboardBasicInfo as any"
|
||||
@update:visible="showDashboardBasicInfoPanel = $event"
|
||||
@confirm="handleDashboardBasicInfoConfirm"
|
||||
@close="handleDashboardBasicInfoClose"
|
||||
/>
|
||||
|
||||
<!-- 仪表盘设计面板 -->
|
||||
<DashboardDesignConfirmPanel
|
||||
v-if="showDashboardDesignPanel"
|
||||
:visible="showDashboardDesignPanel"
|
||||
:design="currentDashboardDesign as any"
|
||||
@update:visible="showDashboardDesignPanel = $event"
|
||||
@confirm="handleDashboardDesignConfirm"
|
||||
@close="handleDashboardDesignClose"
|
||||
/>
|
||||
|
||||
<!-- 仪表盘发布面板 -->
|
||||
<DashboardPublishConfirmPanel
|
||||
v-if="showDashboardPublishPanel"
|
||||
:visible="showDashboardPublishPanel"
|
||||
:publish-data="currentDashboardPublish as any"
|
||||
@update:visible="showDashboardPublishPanel = $event"
|
||||
@confirm="handleDashboardPublishConfirm"
|
||||
@close="handleDashboardPublishClose"
|
||||
/>
|
||||
|
||||
<!-- 系统总结面板 -->
|
||||
<SystemSummaryConfirmPanel
|
||||
v-if="showSystemSummaryPanel"
|
||||
:visible="showSystemSummaryPanel"
|
||||
:data="currentSystemSummary as any"
|
||||
@update:visible="showSystemSummaryPanel = $event"
|
||||
@confirm="handleSystemSummaryConfirm"
|
||||
@close="handleSystemSummaryClose"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 侧边栏布局时的设计面板（保持原有行为） -->
|
||||
<template v-if="layout === 'sidebar'">
|
||||
<DesignEditorPanel
|
||||
:visible="showDesignPanel"
|
||||
:design="currentDesign as any"
|
||||
@update:visible="showDesignPanel = $event"
|
||||
@confirm="handleDesignConfirm"
|
||||
@close="handleDesignClose"
|
||||
/>
|
||||
|
||||
<AppDesignPanel
|
||||
:visible="showAppDesignPanel"
|
||||
:design="currentAppDesign as any"
|
||||
@update:visible="showAppDesignPanel = $event"
|
||||
@confirm="handleAppDesignConfirm"
|
||||
@close="handleAppDesignClose"
|
||||
/>
|
||||
|
||||
<AppSettingsPanel
|
||||
:visible="showAppSettingsPanel"
|
||||
:settings="currentAppSettings as any"
|
||||
@update:visible="showAppSettingsPanel = $event"
|
||||
@confirm="handleAppSettingsConfirm"
|
||||
@close="handleAppSettingsClose"
|
||||
/>
|
||||
|
||||
<DashboardBasicInfoConfirmPanel
|
||||
:visible="showDashboardBasicInfoPanel"
|
||||
:basic-info="currentDashboardBasicInfo as any"
|
||||
@update:visible="showDashboardBasicInfoPanel = $event"
|
||||
@confirm="handleDashboardBasicInfoConfirm"
|
||||
@close="handleDashboardBasicInfoClose"
|
||||
/>
|
||||
|
||||
<DashboardDesignConfirmPanel
|
||||
:visible="showDashboardDesignPanel"
|
||||
:design="currentDashboardDesign as any"
|
||||
@update:visible="showDashboardDesignPanel = $event"
|
||||
@confirm="handleDashboardDesignConfirm"
|
||||
@close="handleDashboardDesignClose"
|
||||
/>
|
||||
|
||||
<DashboardPublishConfirmPanel
|
||||
:visible="showDashboardPublishPanel"
|
||||
:publish-data="currentDashboardPublish as any"
|
||||
@update:visible="showDashboardPublishPanel = $event"
|
||||
@confirm="handleDashboardPublishConfirm"
|
||||
@close="handleDashboardPublishClose"
|
||||
/>
|
||||
|
||||
<SystemSummaryConfirmPanel
|
||||
:visible="showSystemSummaryPanel"
|
||||
:data="currentSystemSummary as any"
|
||||
@update:visible="showSystemSummaryPanel = $event"
|
||||
@confirm="handleSystemSummaryConfirm"
|
||||
@close="handleSystemSummaryClose"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user