908705107/ai-agent-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Trim online design previews from AI panels

Browse Source
This commit is contained in:
cls_宁波本机
2026-06-08 23:35:08 +08:00
parent 52231d32f9
commit 5d4525b898
6 changed files with 28 additions and 620 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue
+12 -88
View File
@@ -23,7 +23,7 @@ import {
sendAgentMessageStream,
} from '#/api/ai-platform/ai-platform';
import { ChatBox } from '#/components/ChatBox/index';
import { AppDesignPanel, DesignEditorPanel } from '#/components/form-editor';
import { DesignEditorPanel } from '#/components/form-editor';
import AiWorkingAnimation from '../../../../components/ai-loading/AiWorkingAnimation.vue';
@@ -54,7 +54,6 @@ const emit = defineEmits<{
// 设计面板显示状态
const showDesignPanel = ref(false);
const showAppDesignPanel = ref(false);
// 对话状态
const chatMessages = ref<AgentMessage[]>([]);
@@ -79,14 +78,6 @@ const currentDesign = ref<null | {
type: string;
}>(null);
// 应用设计面板状态
const currentAppDesign = ref<null | {
data: any;
nodeId: string;
title: string;
type: string;
}>(null);
// 取消流式请求
let cancelStream: (() => void) | null = null;
@@ -493,31 +484,17 @@ function handleStreamEvent(
if (configData?.type === 'design_preview') {
const previewType = configData.preview_type;
// 应用设计方案使用 AppDesignPanel（富文本编辑器）
if (previewType === 'app_design') {
currentAppDesign.value = {
type: previewType,
title:
configData.title ||
$t('ai-platform.agent.chatPanel.appDesignTitle'),
data: configData.data || {},
nodeId: event.node_id || '',
};
showAppDesignPanel.value = true;
} else {
// 其他设计类型使用 DesignEditorPanel（表单编辑器）
currentDesign.value = {
type: previewType,
title:
configData.title ||
$t('ai-platform.agent.chatPanel.designPreview'),
data: configData.data || {},
nodeId: event.node_id || '',
form_fields: configData.form_fields || [],
table_configs: configData.table_configs || [],
};
showDesignPanel.value = true;
}
currentDesign.value = {
type: previewType,
title:
configData.title ||
$t('ai-platform.agent.chatPanel.designPreview'),
data: configData.data || {},
nodeId: event.node_id || '',
form_fields: configData.form_fields || [],
table_configs: configData.table_configs || [],
};
showDesignPanel.value = true;
// 显示提示消息
const waitingContent = `**${configData.title}**\n\n${configData.message || $t('ai-platform.agent.chatPanel.designPanelHint')}`;
@@ -795,46 +772,6 @@ function handleDesignCancel() {
currentDesign.value = null;
}
// 应用设计面板确认
function handleAppDesignConfirm(data: Record<string, any>) {
showAppDesignPanel.value = false;
// 添加用户确认消息
const userMsg: AgentMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.agent.chatPanel.confirmAppDesign'),
status: 'completed',
reasoning_steps: [],
tool_calls: [],
prompt_tokens: 0,
completion_tokens: 0,
total_tokens: 0,
elapsed_time: 0,
error_message: '',
feedback: '',
created_at: new Date().toISOString(),
};
chatMessages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
currentAppDesign.value = null;
// 继续工作流，传递编辑后的数据
doSendMessage(JSON.stringify(data), false);
}
// 应用设计面板取消
function handleAppDesignCancel() {
showAppDesignPanel.value = false;
waitingForInput.value = false;
waitingConfig.value = null;
currentAppDesign.value = null;
}
// 暴露方法给父组件
defineExpose({
clearChat,
scrollToBottom,
@@ -909,18 +846,5 @@ onUnmounted(() => {
/>
</div>
<!-- 应用设计面板 -->
<div
v-if="showAppDesignPanel && currentAppDesign"
class="flex flex-1 flex-col overflow-hidden"
>
<AppDesignPanel
:visible="showAppDesignPanel"
:design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignCancel"
/>
</div>
</div>
</template>
web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue
+3 -307
View File
@@ -2,18 +2,13 @@
import type { WorkflowStreamEvent } from '#/api/ai-platform/ai-platform';
import type { ChatMessage, ReasoningStep } from '#/components/ChatBox/index';
import type {
AppDesignData,
AppSettingsData,
DashboardBasicInfoData,
DashboardDesignData,
DashboardPublishData,
DesignData,
SystemSummaryData,
} from '#/components/form-editor';
import { computed, onUnmounted, ref, watch } from 'vue';
import { Settings2, X } from '@vben/icons';
import { Close, Setting } from '@element-plus/icons-vue';
import { $t } from '@vben/locales';
import {
@@ -31,11 +26,6 @@ import {
} from '#/api/ai-platform/ai-platform';
import { ChatBox } from '#/components/ChatBox/index';
import {
AppDesignPanel,
AppSettingsPanel,
DashboardBasicInfoConfirmPanel,
DashboardDesignConfirmPanel,
DashboardPublishConfirmPanel,
DesignEditorPanel,
SystemSummaryConfirmPanel,
} from '#/components/form-editor';
@@ -74,30 +64,6 @@ const currentRunId = ref('');
const showDesignPanel = ref(false);
const currentDesign = ref<DesignData | undefined>(undefined);
// 应用设计面板状态
const showAppDesignPanel = ref(false);
const currentAppDesign = ref<AppDesignData | undefined>(undefined);
// 应用设置面板状态
const showAppSettingsPanel = ref(false);
const currentAppSettings = ref<AppSettingsData | undefined>(undefined);
// 仪表盘基础信息面板状态
const showDashboardBasicInfoPanel = ref(false);
const currentDashboardBasicInfo = ref<DashboardBasicInfoData | undefined>(
undefined,
);
// 仪表盘设计面板状态
const showDashboardDesignPanel = ref(false);
const currentDashboardDesign = ref<DashboardDesignData | undefined>(undefined);
// 仪表盘发布面板状态
const showDashboardPublishPanel = ref(false);
const currentDashboardPublish = ref<DashboardPublishData | undefined>(
undefined,
);
// 系统总结面板状态
const showSystemSummaryPanel = ref(false);
const currentSystemSummary = ref<SystemSummaryData | undefined>(undefined);
@@ -600,84 +566,6 @@ const handleStreamEvent = (event: WorkflowStreamEvent, msgId: string) => {
if (configData?.type === 'design_preview') {
// 检查是否是应用设计类型
switch (configData.preview_type) {
case 'app_design': {
// 应用设计：打开专用的应用设计面板
currentAppDesign.value = {
type: 'app_design',
title:
configData.title ||
$t('ai-platform.workflow.editor.chatPanel.appDesignTitle'),
data: configData.data || {},
nodeId: event.node_id || '',
};
showAppDesignPanel.value = true;
break;
}
case 'app_settings': {
// 应用设置：打开专用的应用设置面板
currentAppSettings.value = {
type: 'app_settings',
title:
configData.title ||
$t('ai-platform.workflow.editor.chatPanel.appSettingsTitle'),
data: configData.data || {},
nodeId: event.node_id || '',
layoutOptions: configData.layoutOptions || [],
themeOptions: configData.themeOptions || [],
};
showAppSettingsPanel.value = true;
break;
}
case 'dashboard_basic_info': {
// 仪表盘基础信息：打开专用面板（在聊天框右侧）
currentDashboardBasicInfo.value = {
type: 'dashboard_basic_info',
title:
configData.title ||
$t(
'ai-platform.workflow.editor.chatPanel.dashboardBasicInfoTitle',
),
data: configData.data || {},
nodeId: event.node_id || '',
};
showDashboardBasicInfoPanel.value = true;
break;
}
case 'dashboard_design': {
// 仪表盘设计：打开设计器面板（在聊天框右侧）
currentDashboardDesign.value = {
type: 'dashboard_design',
title:
configData.title ||
$t(
'ai-platform.workflow.editor.chatPanel.dashboardDesignTitle',
),
data: configData.data || {},
nodeId: event.node_id || '',
};
showDashboardDesignPanel.value = true;
break;
}
case 'dashboard_publish': {
// 仪表盘发布：打开发布确认面板（在聊天框右侧）
currentDashboardPublish.value = {
type: 'dashboard_publish',
title:
configData.title ||
$t(
'ai-platform.workflow.editor.chatPanel.dashboardPublishTitle',
),
data: configData.data || {},
nodeId: event.node_id || '',
};
showDashboardPublishPanel.value = true;
break;
}
case 'system_summary': {
// 系统总结：打开总结展示面板
currentSystemSummary.value = {
@@ -979,153 +867,6 @@ const handleDesignClose = () => {
};
// 处理应用设计确认
const handleAppDesignConfirm = (data: Record<string, any>) => {
showAppDesignPanel.value = false;
currentAppDesign.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmAppDesign'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流，传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理应用设计面板关闭
const handleAppDesignClose = () => {
showAppDesignPanel.value = false;
currentAppDesign.value = undefined;
};
// 处理应用设置确认
const handleAppSettingsConfirm = (data: Record<string, any>) => {
showAppSettingsPanel.value = false;
currentAppSettings.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmAppSettings'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流，传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理应用设置面板关闭
const handleAppSettingsClose = () => {
showAppSettingsPanel.value = false;
currentAppSettings.value = undefined;
};
// 处理仪表盘基础信息确认
const handleDashboardBasicInfoConfirm = (data: Record<string, any>) => {
showDashboardBasicInfoPanel.value = false;
currentDashboardBasicInfo.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t(
'ai-platform.workflow.editor.chatPanel.confirmDashboardBasicInfo',
),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流，传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理仪表盘基础信息面板关闭
const handleDashboardBasicInfoClose = () => {
showDashboardBasicInfoPanel.value = false;
currentDashboardBasicInfo.value = undefined;
};
// 处理仪表盘设计确认
const handleDashboardDesignConfirm = (data: Record<string, any>) => {
showDashboardDesignPanel.value = false;
currentDashboardDesign.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.confirmDashboardDesign'),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流，传递编辑后的数据
resumeWorkflow(JSON.stringify(data));
};
// 处理仪表盘设计面板关闭
const handleDashboardDesignClose = () => {
showDashboardDesignPanel.value = false;
currentDashboardDesign.value = undefined;
};
// 处理仪表盘发布确认
const handleDashboardPublishConfirm = (data: Record<string, any>) => {
console.log('[ChatPanel] 接收到发布确认数据:', data);
showDashboardPublishPanel.value = false;
currentDashboardPublish.value = undefined;
// 添加用户确认消息
const userMsg: ChatMessage = {
id: generateId(),
role: 'user',
content: $t('ai-platform.workflow.editor.chatPanel.publishToMenu', {
name: data.menu_name,
}),
timestamp: new Date(),
};
messages.value.push(userMsg);
// 重置等待状态
waitingForInput.value = false;
waitingConfig.value = null;
// 恢复工作流，传递发布数据
const userInputStr = JSON.stringify(data);
console.log('[ChatPanel] 传递给 resumeWorkflow 的数据:', userInputStr);
resumeWorkflow(userInputStr);
};
// 处理仪表盘发布面板关闭
const handleDashboardPublishClose = () => {
showDashboardPublishPanel.value = false;
currentDashboardPublish.value = undefined;
};
// 处理系统总结确认
const handleSystemSummaryConfirm = (data: Record<string, any>) => {
showSystemSummaryPanel.value = false;
currentSystemSummary.value = undefined;
@@ -1177,11 +918,11 @@ onUnmounted(() => {
<ElButton
v-if="hasMultipleVariables"
link
:icon="Settings2"
:icon="Setting"
:title="$t('ai-platform.workflow.editor.chatPanel.configVariables')"
@click="variablesDialogVisible = true"
/>
<ElButton link :icon="X" @click="$emit('close')" />
<ElButton link :icon="Close" @click="$emit('close')" />
</div>
</div>
@@ -1258,51 +999,6 @@ onUnmounted(() => {
/>
<!-- 应用设计面板 -->
<AppDesignPanel
:visible="showAppDesignPanel"
:design="currentAppDesign"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignClose"
/>
<!-- 应用设置面板 -->
<AppSettingsPanel
:visible="showAppSettingsPanel"
:settings="currentAppSettings"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose"
/>
<!-- 仪表盘基础信息面板 -->
<DashboardBasicInfoConfirmPanel
:visible="showDashboardBasicInfoPanel"
:basic-info="currentDashboardBasicInfo"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose"
/>
<!-- 仪表盘设计面板 -->
<DashboardDesignConfirmPanel
:visible="showDashboardDesignPanel"
:design="currentDashboardDesign"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose"
/>
<!-- 仪表盘发布面板 -->
<DashboardPublishConfirmPanel
:visible="showDashboardPublishPanel"
:publish-data="currentDashboardPublish"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose"
/>
<!-- 系统总结面板 -->
<SystemSummaryConfirmPanel
:visible="showSystemSummaryPanel"
:data="currentSystemSummary"