Lazy load AI chat panels

This commit is contained in:
2026-06-09 22:14:13 +08:00
parent 0b4458484c
commit 68ee56034a
3 changed files with 16 additions and 5 deletions
@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { Agent } from '#/api/ai-platform/ai-platform';
import { computed, onMounted, ref } from 'vue';
import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Page } from '@vben/common-ui';
@@ -11,7 +11,13 @@ import { $t } from '@vben/locales';
import { ElButton, ElEmpty } from 'element-plus';
import { getAgentByCodeApi } from '#/api/ai-platform/ai-platform';
import { AiChatPanel, ConversationList } from '#/components/ai-chat-panel';
const AiChatPanel = defineAsyncComponent(() =>
import('#/components/ai-chat-panel/AiChatPanel.vue'),
);
const ConversationList = defineAsyncComponent(() =>
import('#/components/ai-chat-panel/ConversationList.vue'),
);
defineOptions({ name: 'AgentChat' });
@@ -7,7 +7,7 @@ import type {
WorkflowListItem,
} from '#/api/ai-platform/ai-platform';
import { onMounted, reactive, ref, watch } from 'vue';
import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
@@ -49,9 +49,12 @@ import {
publishAgentApi,
updateAgentApi,
} from '#/api/ai-platform/ai-platform';
import { AiChatPanel } from '#/components/ai-chat-panel';
import { useAppContextStore } from '#/store/app-context';
const AiChatPanel = defineAsyncComponent(() =>
import('#/components/ai-chat-panel/AiChatPanel.vue'),
);
const appContextStore = useAppContextStore();
const route = useRoute();
@@ -76,7 +76,6 @@ import {
runWorkflowStreamApi,
updateWorkflowApi,
} from '#/api/ai-platform/ai-platform';
import { AiChatPanel } from '#/components/ai-chat-panel';
import { useAppContextStore } from '#/store/app-context';
import { useWorkflowEditorStore } from '#/store/workflow-editor';
@@ -91,6 +90,9 @@ import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';
import '@vue-flow/controls/dist/style.css';
const AiChatPanel = defineAsyncComponent(() =>
import('#/components/ai-chat-panel/AiChatPanel.vue'),
);
const AppCreateNode = defineAsyncComponent(() => import('./nodes/AppCreateNode.vue'));
const AppDesignNode = defineAsyncComponent(() => import('./nodes/AppDesignNode.vue'));
const AppSettingsNode = defineAsyncComponent(() => import('./nodes/AppSettingsNode.vue'));