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

Replace heavy design panels with preview drawer

Browse Source
This commit is contained in:
cls_宁波本机
2026-06-10 11:13:49 +08:00
parent 76680c48ad
commit 0398d5956c
4 changed files with 165 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/web-ele/src/components/ai-chat-panel/AiChatPanel.vue
+44 -79
View File
@@ -16,7 +16,7 @@ import type {
* - agent-debug: 智能体编辑器调试模式
* - agent-chat: 智能体正式对话模式（支持历史、反馈）
*/
import { computed, defineAsyncComponent, onUnmounted, ref, watch } from 'vue';
import { computed, onUnmounted, ref, watch } from 'vue';
import { Close, Setting } from '@element-plus/icons-vue';
@@ -31,31 +31,10 @@ import {
import { AiWorkingAnimation } from '#/components/ai-loading';
import { ChatBox } from '#/components/ChatBox';
import DesignPreviewPanel from './DesignPreviewPanel.vue';
import { useChatApi } from './composables/useChatApi';
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 ====================
const props = withDefaults(defineProps<AiChatPanelProps>(), {
mode: 'workflow',
@@ -1017,66 +996,59 @@ onUnmounted(() => {
/>
<!-- 设计编辑面板 -->
<DesignEditorPanel
<DesignPreviewPanel
v-if="showDesignPanel"
:visible="showDesignPanel"
:design="currentDesign as any"
@update:visible="showDesignPanel = $event"
v-model:visible="showDesignPanel"
:preview="currentDesign as any"
@confirm="handleDesignConfirm"
@close="handleDesignClose"
/>
<AppDesignPanel
<DesignPreviewPanel
v-if="showAppDesignPanel"
:visible="showAppDesignPanel"
:design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
v-model:visible="showAppDesignPanel"
:preview="currentAppDesign as any"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignClose"
/>
<AppSettingsPanel
<DesignPreviewPanel
v-if="showAppSettingsPanel"
:visible="showAppSettingsPanel"
:settings="currentAppSettings as any"
@update:visible="showAppSettingsPanel = $event"
v-model:visible="showAppSettingsPanel"
:preview="currentAppSettings as any"
@confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose"
/>
<DashboardBasicInfoConfirmPanel
<DesignPreviewPanel
v-if="showDashboardBasicInfoPanel"
:visible="showDashboardBasicInfoPanel"
:basic-info="currentDashboardBasicInfo as any"
@update:visible="showDashboardBasicInfoPanel = $event"
v-model:visible="showDashboardBasicInfoPanel"
:preview="currentDashboardBasicInfo as any"
@confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose"
/>
<DashboardDesignConfirmPanel
<DesignPreviewPanel
v-if="showDashboardDesignPanel"
:visible="showDashboardDesignPanel"
:design="currentDashboardDesign as any"
@update:visible="showDashboardDesignPanel = $event"
v-model:visible="showDashboardDesignPanel"
:preview="currentDashboardDesign as any"
@confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose"
/>
<DashboardPublishConfirmPanel
<DesignPreviewPanel
v-if="showDashboardPublishPanel"
:visible="showDashboardPublishPanel"
:publish-data="currentDashboardPublish as any"
@update:visible="showDashboardPublishPanel = $event"
v-model:visible="showDashboardPublishPanel"
:preview="currentDashboardPublish as any"
@confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose"
/>
<!-- 系统总结面板 -->
<SystemSummaryConfirmPanel
<DesignPreviewPanel
v-if="showSystemSummaryPanel"
:visible="showSystemSummaryPanel"
:data="currentSystemSummary as any"
@update:visible="showSystemSummaryPanel = $event"
v-model:visible="showSystemSummaryPanel"
:preview="currentSystemSummary as any"
@confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose"
/>
@@ -1084,58 +1056,51 @@ onUnmounted(() => {
<!-- 侧边栏布局时的设计面板（保持原有行为） -->
<template v-if="layout === 'sidebar'">
<DesignEditorPanel
:visible="showDesignPanel"
:design="currentDesign as any"
@update:visible="showDesignPanel = $event"
<DesignPreviewPanel
v-model:visible="showDesignPanel"
:preview="currentDesign as any"
@confirm="handleDesignConfirm"
@close="handleDesignClose"
/>
<AppDesignPanel
:visible="showAppDesignPanel"
:design="currentAppDesign as any"
@update:visible="showAppDesignPanel = $event"
<DesignPreviewPanel
v-model:visible="showAppDesignPanel"
:preview="currentAppDesign as any"
@confirm="handleAppDesignConfirm"
@close="handleAppDesignClose"
/>
<AppSettingsPanel
:visible="showAppSettingsPanel"
:settings="currentAppSettings as any"
@update:visible="showAppSettingsPanel = $event"
<DesignPreviewPanel
v-model:visible="showAppSettingsPanel"
:preview="currentAppSettings as any"
@confirm="handleAppSettingsConfirm"
@close="handleAppSettingsClose"
/>
<DashboardBasicInfoConfirmPanel
:visible="showDashboardBasicInfoPanel"
:basic-info="currentDashboardBasicInfo as any"
@update:visible="showDashboardBasicInfoPanel = $event"
<DesignPreviewPanel
v-model:visible="showDashboardBasicInfoPanel"
:preview="currentDashboardBasicInfo as any"
@confirm="handleDashboardBasicInfoConfirm"
@close="handleDashboardBasicInfoClose"
/>
<DashboardDesignConfirmPanel
:visible="showDashboardDesignPanel"
:design="currentDashboardDesign as any"
@update:visible="showDashboardDesignPanel = $event"
<DesignPreviewPanel
v-model:visible="showDashboardDesignPanel"
:preview="currentDashboardDesign as any"
@confirm="handleDashboardDesignConfirm"
@close="handleDashboardDesignClose"
/>
<DashboardPublishConfirmPanel
:visible="showDashboardPublishPanel"
:publish-data="currentDashboardPublish as any"
@update:visible="showDashboardPublishPanel = $event"
<DesignPreviewPanel
v-model:visible="showDashboardPublishPanel"
:preview="currentDashboardPublish as any"
@confirm="handleDashboardPublishConfirm"
@close="handleDashboardPublishClose"
/>
<SystemSummaryConfirmPanel
:visible="showSystemSummaryPanel"
:data="currentSystemSummary as any"
@update:visible="showSystemSummaryPanel = $event"
<DesignPreviewPanel
v-model:visible="showSystemSummaryPanel"
:preview="currentSystemSummary as any"
@confirm="handleSystemSummaryConfirm"
@close="handleSystemSummaryClose"
/>
web/apps/web-ele/src/components/ai-chat-panel/DesignPreviewPanel.vue
+77
View File
@@ -0,0 +1,77 @@
<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>