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

Revert "Replace heavy design panels with preview drawer"

Browse Source 
This reverts commit 0398d5956c.
This commit is contained in:
cls_宁波本机
2026-06-10 11:25:49 +08:00
parent 0398d5956c
commit eab0a8f5cb
4 changed files with 245 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue
+79 -44
View File
@@ -16,7 +16,7 @@ import type {
* - agent-debug: 智能体编辑器调试模式 * - agent-debug: 智能体编辑器调试模式
* - agent-chat: 智能体正式对话模式（支持历史、反馈） * - agent-chat: 智能体正式对话模式（支持历史、反馈）
*/ */
import { computed, onUnmounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
import { Close, Setting } from '@element-plus/icons-vue'; import { Close, Setting } from '@element-plus/icons-vue';
@@ -31,10 +31,31 @@ import {
import { AiWorkingAnimation } from '#/components/ai-loading'; import { AiWorkingAnimation } from '#/components/ai-loading';
import { ChatBox } from '#/components/ChatBox'; import { ChatBox } from '#/components/ChatBox';
import DesignPreviewPanel from './DesignPreviewPanel.vue';
import { useChatApi } from './composables/useChatApi'; import { useChatApi } from './composables/useChatApi';
import { useEventHandler } from './composables/useEventHandler'; import { useEventHandler } from './composables/useEventHandler';
const DesignEditorPanel = defineAsyncComponent(
() => import('#/components/form-editor/DesignEditorPanel.vue'),
);
const AppDesignPanel = defineAsyncComponent(
() => import('#/components/form-editor/AppDesignPanel.vue'),
);
const AppSettingsPanel = defineAsyncComponent(
() => import('#/components/form-editor/AppSettingsPanel.vue'),
);
const DashboardBasicInfoConfirmPanel = defineAsyncComponent(
() => import('#/components/form-editor/DashboardBasicInfoConfirmPanel.vue'),
);
const DashboardDesignConfirmPanel = defineAsyncComponent(
() => import('#/components/form-editor/DashboardDesignConfirmPanel.vue'),
);
const DashboardPublishConfirmPanel = defineAsyncComponent(
() => import('#/components/form-editor/DashboardPublishConfirmPanel.vue'),
);
const SystemSummaryConfirmPanel = defineAsyncComponent(
() => import('#/components/form-editor/SystemSummaryConfirmPanel.vue'),
);
// ==================== Props ==================== // ==================== Props ====================
const props = withDefaults(defineProps<AiChatPanelProps>(), { const props = withDefaults(defineProps<AiChatPanelProps>(), {
mode: 'workflow', mode: 'workflow',
@@ -996,59 +1017,66 @@ onUnmounted(() => {
/> />
<!-- 设计编辑面板 --> <!-- 设计编辑面板 -->
<DesignPreviewPanel <DesignEditorPanel
v-if="showDesignPanel" v-if="showDesignPanel"
v-model:visible="showDesignPanel" :visible="showDesignPanel"
:preview="currentDesign as any" :design="currentDesign as any"
@update:visible="showDesignPanel = $event"
@confirm="handleDesignConfirm" @confirm="handleDesignConfirm"
@close="handleDesignClose" @close="handleDesignClose"
/> />
<DesignPreviewPanel <AppDesignPanel
v-if="showAppDesignPanel" v-if="showAppDesignPanel"
v-model:visible="showAppDesignPanel" :visible="showAppDesignPanel"
:preview="currentAppDesign as any" :design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm" @confirm="handleAppDesignConfirm"
@close="handleAppDesignClose" @close="handleAppDesignClose"
/> />
<DesignPreviewPanel <AppSettingsPanel
v-if="showAppSettingsPanel" v-if="showAppSettingsPanel"
v-model:visible="showAppSettingsPanel" :visible="showAppSettingsPanel"
:preview="currentAppSettings as any" :settings="currentAppSettings as any"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm" @confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose" @close="handleAppSettingsClose"
/> />
<DesignPreviewPanel <DashboardBasicInfoConfirmPanel
v-if="showDashboardBasicInfoPanel" v-if="showDashboardBasicInfoPanel"
v-model:visible="showDashboardBasicInfoPanel" :visible="showDashboardBasicInfoPanel"
:preview="currentDashboardBasicInfo as any" :basic-info="currentDashboardBasicInfo as any"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm" @confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose" @close="handleDashboardBasicInfoClose"
/> />
<DesignPreviewPanel <DashboardDesignConfirmPanel
v-if="showDashboardDesignPanel" v-if="showDashboardDesignPanel"
v-model:visible="showDashboardDesignPanel" :visible="showDashboardDesignPanel"
:preview="currentDashboardDesign as any" :design="currentDashboardDesign as any"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm" @confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose" @close="handleDashboardDesignClose"
/> />
<DesignPreviewPanel <DashboardPublishConfirmPanel
v-if="showDashboardPublishPanel" v-if="showDashboardPublishPanel"
v-model:visible="showDashboardPublishPanel" :visible="showDashboardPublishPanel"
:preview="currentDashboardPublish as any" :publish-data="currentDashboardPublish as any"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm" @confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose" @close="handleDashboardPublishClose"
/> />
<!-- 系统总结面板 --> <!-- 系统总结面板 -->
<DesignPreviewPanel <SystemSummaryConfirmPanel
v-if="showSystemSummaryPanel" v-if="showSystemSummaryPanel"
v-model:visible="showSystemSummaryPanel" :visible="showSystemSummaryPanel"
:preview="currentSystemSummary as any" :data="currentSystemSummary as any"
@update:visible="showSystemSummaryPanel = $event"
@confirm="handleSystemSummaryConfirm" @confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose" @close="handleSystemSummaryClose"
/> />
@@ -1056,51 +1084,58 @@ onUnmounted(() => {
<!-- 侧边栏布局时的设计面板（保持原有行为） --> <!-- 侧边栏布局时的设计面板（保持原有行为） -->
<template v-if="layout === 'sidebar'"> <template v-if="layout === 'sidebar'">
<DesignPreviewPanel <DesignEditorPanel
v-model:visible="showDesignPanel" :visible="showDesignPanel"
:preview="currentDesign as any" :design="currentDesign as any"
@update:visible="showDesignPanel = $event"
@confirm="handleDesignConfirm" @confirm="handleDesignConfirm"
@close="handleDesignClose" @close="handleDesignClose"
/> />
<DesignPreviewPanel <AppDesignPanel
v-model:visible="showAppDesignPanel" :visible="showAppDesignPanel"
:preview="currentAppDesign as any" :design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm" @confirm="handleAppDesignConfirm"
@close="handleAppDesignClose" @close="handleAppDesignClose"
/> />
<DesignPreviewPanel <AppSettingsPanel
v-model:visible="showAppSettingsPanel" :visible="showAppSettingsPanel"
:preview="currentAppSettings as any" :settings="currentAppSettings as any"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm" @confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose" @close="handleAppSettingsClose"
/> />
<DesignPreviewPanel <DashboardBasicInfoConfirmPanel
v-model:visible="showDashboardBasicInfoPanel" :visible="showDashboardBasicInfoPanel"
:preview="currentDashboardBasicInfo as any" :basic-info="currentDashboardBasicInfo as any"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm" @confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose" @close="handleDashboardBasicInfoClose"
/> />
<DesignPreviewPanel <DashboardDesignConfirmPanel
v-model:visible="showDashboardDesignPanel" :visible="showDashboardDesignPanel"
:preview="currentDashboardDesign as any" :design="currentDashboardDesign as any"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm" @confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose" @close="handleDashboardDesignClose"
/> />
<DesignPreviewPanel <DashboardPublishConfirmPanel
v-model:visible="showDashboardPublishPanel" :visible="showDashboardPublishPanel"
:preview="currentDashboardPublish as any" :publish-data="currentDashboardPublish as any"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm" @confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose" @close="handleDashboardPublishClose"
/> />
<DesignPreviewPanel <SystemSummaryConfirmPanel
v-model:visible="showSystemSummaryPanel" :visible="showSystemSummaryPanel"
:preview="currentSystemSummary as any" :data="currentSystemSummary as any"
@update:visible="showSystemSummaryPanel = $event"
@confirm="handleSystemSummaryConfirm" @confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose" @close="handleSystemSummaryClose"
/> />
web/apps/web-ele/src/components/ai-chat-panel/DesignPreviewPanel.vue
-77
View File
@@ -1,77 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue';
import { ElButton, ElDrawer, ElScrollbar, ElTag } from 'element-plus';
const props = withDefaults(
defineProps<{
preview?: any;
title?: string;
visible: boolean;
}>(),
{
preview: undefined,
title: '',
},
);
const emit = defineEmits<{
(e: 'close'): void;
(e: 'confirm', data: Record<string, any>): void;
(e: 'update:visible', value: boolean): void;
}>();
const previewTitle = computed(
() => props.title || props.preview?.title || 'AI 生成结果确认',
);
const previewType = computed(
() => props.preview?.type || props.preview?.preview_type || 'preview',
);
const previewData = computed(() => props.preview?.data || props.preview || {});
const formattedData = computed(() => {
if (typeof previewData.value === 'string') return previewData.value;
return JSON.stringify(previewData.value, null, 2);
});
const handleClose = () => {
emit('update:visible', false);
emit('close');
};
const handleConfirm = () => {
emit('confirm', previewData.value as Record<string, any>);
};
</script>
<template>
<ElDrawer
:model-value="visible"
:title="previewTitle"
size="52%"
append-to-body
destroy-on-close
@update:model-value="$emit('update:visible', $event)"
@close="handleClose"
>
<div class="flex h-full flex-col gap-3">
<div class="flex items-center gap-2">
<ElTag type="primary" effect="plain">{{ previewType }}</ElTag>
<span class="text-muted-foreground text-sm">
请确认 AI 生成内容，确认后工作流会继续执行
</span>
</div>
<ElScrollbar class="border-border bg-muted/30 flex-1 rounded border">
<pre class="text-foreground m-0 whitespace-pre-wrap break-words p-4 text-sm leading-6">{{ formattedData }}</pre>
</ElScrollbar>
<div class="flex justify-end gap-2">
<ElButton @click="handleClose">取消</ElButton>
<ElButton type="primary" @click="handleConfirm">确认继续</ElButton>
</div>
</div>
</ElDrawer>
</template>
web/apps/web-ele/src/views/ai-platform/agent/components/AgentChatPanel.vue
+102 -13
View File
@@ -13,6 +13,7 @@ import type { ChatMessage } from '#/components/ChatBox/index';
*/ */
import { import {
computed, computed,
defineAsyncComponent,
nextTick, nextTick,
onUnmounted, onUnmounted,
ref, ref,
@@ -28,11 +29,17 @@ import {
getAgentMessagesApi, getAgentMessagesApi,
sendAgentMessageStream, sendAgentMessageStream,
} from '#/api/ai-platform/ai-platform'; } from '#/api/ai-platform/ai-platform';
import DesignPreviewPanel from '#/components/ai-chat-panel/DesignPreviewPanel.vue';
import { ChatBox } from '#/components/ChatBox/index'; import { ChatBox } from '#/components/ChatBox/index';
import AiWorkingAnimation from '../../../../components/ai-loading/AiWorkingAnimation.vue'; import AiWorkingAnimation from '../../../../components/ai-loading/AiWorkingAnimation.vue';
const DesignEditorPanel = defineAsyncComponent(
() => import('#/components/form-editor/DesignEditorPanel.vue'),
);
const AppDesignPanel = defineAsyncComponent(
() => import('#/components/form-editor/AppDesignPanel.vue'),
);
const props = defineProps<{ const props = defineProps<{
/** Agent 详情（可选，用于显示名称和欢迎配置） */ /** Agent 详情（可选，用于显示名称和欢迎配置） */
agent?: Agent | null; agent?: Agent | null;
@@ -60,6 +67,7 @@ const emit = defineEmits<{
// 设计面板显示状态 // 设计面板显示状态
const showDesignPanel = ref(false); const showDesignPanel = ref(false);
const showAppDesignPanel = ref(false);
// 对话状态 // 对话状态
const chatMessages = ref<AgentMessage[]>([]); const chatMessages = ref<AgentMessage[]>([]);
@@ -85,6 +93,12 @@ const currentDesign = ref<null | {
}>(null); }>(null);
// 应用设计面板状态 // 应用设计面板状态
const currentAppDesign = ref<null | {
data: any;
nodeId: string;
title: string;
type: string;
}>(null);
// 取消流式请求 // 取消流式请求
let cancelStream: (() => void) | null = null; let cancelStream: (() => void) | null = null;
@@ -492,17 +506,33 @@ function handleStreamEvent(
if (configData?.type === 'design_preview') { if (configData?.type === 'design_preview') {
const previewType = configData.preview_type; const previewType = configData.preview_type;
currentDesign.value = { // 应用设计方案使用 AppDesignPanel（富文本编辑器）
type: previewType, if (previewType === 'app_design') {
title: currentAppDesign.value = {
configData.title || $t('ai-platform.agent.chatPanel.designPreview'), type: previewType,
data: configData.data || {}, title:
nodeId: event.node_id || '', configData.title ||
form_fields: configData.form_fields || [], $t('ai-platform.agent.chatPanel.appDesignTitle'),
table_configs: configData.table_configs || [], data: configData.data || {},
}; nodeId: event.node_id || '',
showDesignPanel.value = true; };
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;
}
// 显示提示消息
const waitingContent = `**${configData.title}**\n\n${configData.message || $t('ai-platform.agent.chatPanel.designPanelHint')}`; const waitingContent = `**${configData.title}**\n\n${configData.message || $t('ai-platform.agent.chatPanel.designPanelHint')}`;
const newMsg: AgentMessage = { const newMsg: AgentMessage = {
id: generateId(), id: generateId(),
@@ -779,7 +809,45 @@ function handleDesignCancel() {
} }
// 应用设计面板确认 // 应用设计面板确认
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({ defineExpose({
clearChat, clearChat,
scrollToBottom, scrollToBottom,
@@ -838,13 +906,34 @@ onUnmounted(() => {
class="ml-3 h-full min-h-[400px] flex-1 rounded-lg" class="ml-3 h-full min-h-[400px] flex-1 rounded-lg"
/> />
<!-- 设计编辑器 --> <!-- 设计编辑器 -->
<DesignPreviewPanel <DesignEditorPanel
v-else v-else
v-model:visible="showDesignPanel" v-model:visible="showDesignPanel"
:preview="currentDesign" :design="{
type: currentDesign.type as any,
title: currentDesign.title,
data: currentDesign.data,
nodeId: currentDesign.nodeId,
form_fields: currentDesign.form_fields,
table_configs: currentDesign.table_configs,
}"
@confirm="handleDesignConfirm" @confirm="handleDesignConfirm"
@close="handleDesignCancel" @close="handleDesignCancel"
/> />
</div> </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> </div>
</template> </template>
web/apps/web-ele/src/views/ai-platform/workflow/editor/components/ChatPanel.vue
+64 -31
View File
@@ -1,9 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import type { WorkflowStreamEvent } from '#/api/ai-platform/ai-platform'; import type { WorkflowStreamEvent } from '#/api/ai-platform/ai-platform';
import type { ChatMessage, ReasoningStep } from '#/components/ChatBox/index'; import type { ChatMessage, ReasoningStep } from '#/components/ChatBox/index';
import type { DesignPreviewData } from '#/components/ai-chat-panel/types'; import type { AppDesignData } from '#/components/form-editor/AppDesignPanel.vue';
import type { AppSettingsData } from '#/components/form-editor/AppSettingsPanel.vue';
import type { DashboardBasicInfoData } from '#/components/form-editor/DashboardBasicInfoConfirmPanel.vue';
import type { DashboardDesignData } from '#/components/form-editor/DashboardDesignConfirmPanel.vue';
import type { DashboardPublishData } from '#/components/form-editor/DashboardPublishConfirmPanel.vue';
import type { DesignData } from '#/components/form-editor/DesignEditorPanel.vue';
import type { SystemSummaryData } from '#/components/form-editor/SystemSummaryConfirmPanel.vue';
import { computed, onUnmounted, ref, watch } from 'vue'; import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
import { Settings2, X } from '@vben/icons'; import { Settings2, X } from '@vben/icons';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
@@ -21,8 +27,28 @@ import {
resumeWorkflowStreamApi, resumeWorkflowStreamApi,
runWorkflowStreamApi, runWorkflowStreamApi,
} from '#/api/ai-platform/ai-platform'; } from '#/api/ai-platform/ai-platform';
import DesignPreviewPanel from '#/components/ai-chat-panel/DesignPreviewPanel.vue';
import { ChatBox } from '#/components/ChatBox/index'; import { ChatBox } from '#/components/ChatBox/index';
const DesignEditorPanel = defineAsyncComponent(() =>
import('#/components/form-editor/DesignEditorPanel.vue'),
);
const AppDesignPanel = defineAsyncComponent(() =>
import('#/components/form-editor/AppDesignPanel.vue'),
);
const AppSettingsPanel = defineAsyncComponent(() =>
import('#/components/form-editor/AppSettingsPanel.vue'),
);
const DashboardBasicInfoConfirmPanel = defineAsyncComponent(() =>
import('#/components/form-editor/DashboardBasicInfoConfirmPanel.vue'),
);
const DashboardDesignConfirmPanel = defineAsyncComponent(() =>
import('#/components/form-editor/DashboardDesignConfirmPanel.vue'),
);
const DashboardPublishConfirmPanel = defineAsyncComponent(() =>
import('#/components/form-editor/DashboardPublishConfirmPanel.vue'),
);
const SystemSummaryConfirmPanel = defineAsyncComponent(() =>
import('#/components/form-editor/SystemSummaryConfirmPanel.vue'),
);
const props = defineProps<{ const props = defineProps<{
nodes: any[]; nodes: any[];
@@ -56,35 +82,35 @@ const currentRunId = ref('');
// 设计预览编辑面板状态 // 设计预览编辑面板状态
const showDesignPanel = ref(false); const showDesignPanel = ref(false);
const currentDesign = ref<DesignPreviewData | undefined>(undefined); const currentDesign = ref<DesignData | undefined>(undefined);
// 应用设计面板状态 // 应用设计面板状态
const showAppDesignPanel = ref(false); const showAppDesignPanel = ref(false);
const currentAppDesign = ref<DesignPreviewData | undefined>(undefined); const currentAppDesign = ref<AppDesignData | undefined>(undefined);
// 应用设置面板状态 // 应用设置面板状态
const showAppSettingsPanel = ref(false); const showAppSettingsPanel = ref(false);
const currentAppSettings = ref<DesignPreviewData | undefined>(undefined); const currentAppSettings = ref<AppSettingsData | undefined>(undefined);
// 仪表盘基础信息面板状态 // 仪表盘基础信息面板状态
const showDashboardBasicInfoPanel = ref(false); const showDashboardBasicInfoPanel = ref(false);
const currentDashboardBasicInfo = ref<DesignPreviewData | undefined>( const currentDashboardBasicInfo = ref<DashboardBasicInfoData | undefined>(
undefined, undefined,
); );
// 仪表盘设计面板状态 // 仪表盘设计面板状态
const showDashboardDesignPanel = ref(false); const showDashboardDesignPanel = ref(false);
const currentDashboardDesign = ref<DesignPreviewData | undefined>(undefined); const currentDashboardDesign = ref<DashboardDesignData | undefined>(undefined);
// 仪表盘发布面板状态 // 仪表盘发布面板状态
const showDashboardPublishPanel = ref(false); const showDashboardPublishPanel = ref(false);
const currentDashboardPublish = ref<DesignPreviewData | undefined>( const currentDashboardPublish = ref<DashboardPublishData | undefined>(
undefined, undefined,
); );
// 系统总结面板状态 // 系统总结面板状态
const showSystemSummaryPanel = ref(false); const showSystemSummaryPanel = ref(false);
const currentSystemSummary = ref<DesignPreviewData | undefined>(undefined); const currentSystemSummary = ref<SystemSummaryData | undefined>(undefined);
// 查找 Start 节点并提取变量 // 查找 Start 节点并提取变量
const startNode = computed(() => props.nodes.find((n) => n.type === 'start')); const startNode = computed(() => props.nodes.find((n) => n.type === 'start'));
@@ -1233,57 +1259,64 @@ onUnmounted(() => {
</div> </div>
<!-- 设计编辑面板 --> <!-- 设计编辑面板 -->
<DesignPreviewPanel <DesignEditorPanel
v-model:visible="showDesignPanel" :visible="showDesignPanel"
:preview="currentDesign as any" :design="currentDesign"
@update:visible="showDesignPanel = $event"
@confirm="handleDesignConfirm" @confirm="handleDesignConfirm"
@close="handleDesignClose" @close="handleDesignClose"
/> />
<!-- 应用设计面板 --> <!-- 应用设计面板 -->
<DesignPreviewPanel <AppDesignPanel
v-model:visible="showAppDesignPanel" :visible="showAppDesignPanel"
:preview="currentAppDesign as any" :design="currentAppDesign"
@update:visible="showAppDesignPanel = $event"
@confirm="handleAppDesignConfirm" @confirm="handleAppDesignConfirm"
@close="handleAppDesignClose" @close="handleAppDesignClose"
/> />
<!-- 应用设置面板 --> <!-- 应用设置面板 -->
<DesignPreviewPanel <AppSettingsPanel
v-model:visible="showAppSettingsPanel" :visible="showAppSettingsPanel"
:preview="currentAppSettings as any" :settings="currentAppSettings"
@update:visible="showAppSettingsPanel = $event"
@confirm="handleAppSettingsConfirm" @confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose" @close="handleAppSettingsClose"
/> />
<!-- 仪表盘基础信息面板 --> <!-- 仪表盘基础信息面板 -->
<DesignPreviewPanel <DashboardBasicInfoConfirmPanel
v-model:visible="showDashboardBasicInfoPanel" :visible="showDashboardBasicInfoPanel"
:preview="currentDashboardBasicInfo as any" :basic-info="currentDashboardBasicInfo"
@update:visible="showDashboardBasicInfoPanel = $event"
@confirm="handleDashboardBasicInfoConfirm" @confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose" @close="handleDashboardBasicInfoClose"
/> />
<!-- 仪表盘设计面板 --> <!-- 仪表盘设计面板 -->
<DesignPreviewPanel <DashboardDesignConfirmPanel
v-model:visible="showDashboardDesignPanel" :visible="showDashboardDesignPanel"
:preview="currentDashboardDesign as any" :design="currentDashboardDesign"
@update:visible="showDashboardDesignPanel = $event"
@confirm="handleDashboardDesignConfirm" @confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose" @close="handleDashboardDesignClose"
/> />
<!-- 仪表盘发布面板 --> <!-- 仪表盘发布面板 -->
<DesignPreviewPanel <DashboardPublishConfirmPanel
v-model:visible="showDashboardPublishPanel" :visible="showDashboardPublishPanel"
:preview="currentDashboardPublish as any" :publish-data="currentDashboardPublish"
@update:visible="showDashboardPublishPanel = $event"
@confirm="handleDashboardPublishConfirm" @confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose" @close="handleDashboardPublishClose"
/> />
<!-- 系统总结面板 --> <!-- 系统总结面板 -->
<DesignPreviewPanel <SystemSummaryConfirmPanel
v-model:visible="showSystemSummaryPanel" :visible="showSystemSummaryPanel"
:preview="currentSystemSummary as any" :data="currentSystemSummary"
@update:visible="showSystemSummaryPanel = $event"
@confirm="handleSystemSummaryConfirm" @confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose" @close="handleSystemSummaryClose"
/> />