refactor: 调整聊天组件为按需引入
- 移除 bootstrap 中 vue-element-plus-x 全局组件注册 - 在聊天与会话页面改为局部引入对应组件
This commit is contained in:
@@ -1,11 +1,4 @@
|
|||||||
import { createApp, watchEffect } from 'vue';
|
import { createApp, watchEffect } from 'vue';
|
||||||
import {
|
|
||||||
BubbleList,
|
|
||||||
Conversations,
|
|
||||||
Sender,
|
|
||||||
Thinking,
|
|
||||||
XMarkdown,
|
|
||||||
} from 'vue-element-plus-x';
|
|
||||||
|
|
||||||
import { registerAccessDirective } from '@easyflow/access';
|
import { registerAccessDirective } from '@easyflow/access';
|
||||||
import {
|
import {
|
||||||
@@ -49,12 +42,6 @@ async function bootstrap(namespace: string) {
|
|||||||
// 注册Element Plus提供的v-loading指令
|
// 注册Element Plus提供的v-loading指令
|
||||||
app.directive('loading', ElLoading.directive);
|
app.directive('loading', ElLoading.directive);
|
||||||
|
|
||||||
app.component('ElBubbleList', BubbleList);
|
|
||||||
app.component('ElConversations', Conversations);
|
|
||||||
app.component('ElSender', Sender);
|
|
||||||
app.component('ElXMarkdown', XMarkdown);
|
|
||||||
app.component('ElThinking', Thinking);
|
|
||||||
|
|
||||||
// 注册EasyFlow提供的v-loading和v-spinning指令
|
// 注册EasyFlow提供的v-loading和v-spinning指令
|
||||||
registerLoadingDirective(app, {
|
registerLoadingDirective(app, {
|
||||||
loading: false, // EasyFlow提供的v-loading指令和Element Plus提供的v-loading指令二选一即可,此处false表示不注册EasyFlow提供的v-loading指令
|
loading: false, // EasyFlow提供的v-loading指令和Element Plus提供的v-loading指令二选一即可,此处false表示不注册EasyFlow提供的v-loading指令
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { Sender } from 'vue-element-plus-x';
|
|
||||||
import type {
|
import type {
|
||||||
BubbleListInstance,
|
BubbleListInstance,
|
||||||
BubbleListProps,
|
BubbleListProps,
|
||||||
@@ -11,6 +10,10 @@ import type { BotInfo, ChatMessage } from '@easyflow/types';
|
|||||||
|
|
||||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue';
|
import { nextTick, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import ElBubbleList from 'vue-element-plus-x/es/BubbleList/index.js';
|
||||||
|
import ElSender from 'vue-element-plus-x/es/Sender/index.js';
|
||||||
|
import ElThinking from 'vue-element-plus-x/es/Thinking/index.js';
|
||||||
|
import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
|
||||||
|
|
||||||
import { IconifyIcon } from '@easyflow/icons';
|
import { IconifyIcon } from '@easyflow/icons';
|
||||||
import { $t } from '@easyflow/locales';
|
import { $t } from '@easyflow/locales';
|
||||||
@@ -85,7 +88,7 @@ const bubbleListRef = ref<BubbleListInstance>();
|
|||||||
const messageContainerRef = ref<HTMLElement | null>(null);
|
const messageContainerRef = ref<HTMLElement | null>(null);
|
||||||
const bubbleListScrollElement = ref<HTMLElement | null>(null);
|
const bubbleListScrollElement = ref<HTMLElement | null>(null);
|
||||||
const showBackToBottomButton = ref(false);
|
const showBackToBottomButton = ref(false);
|
||||||
const senderRef = ref<InstanceType<typeof Sender>>();
|
const senderRef = ref<InstanceType<typeof ElSender>>();
|
||||||
const senderValue = ref('');
|
const senderValue = ref('');
|
||||||
const sending = ref(false);
|
const sending = ref(false);
|
||||||
const BACK_TO_BOTTOM_THRESHOLD = 160;
|
const BACK_TO_BOTTOM_THRESHOLD = 160;
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import type { BotInfo, Session } from '@easyflow/types';
|
|||||||
|
|
||||||
import { onMounted, ref, watchEffect } from 'vue';
|
import { onMounted, ref, watchEffect } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
import ElConversations from 'vue-element-plus-x/es/Conversations/index.js';
|
||||||
|
|
||||||
import { IconifyIcon } from '@easyflow/icons';
|
import { IconifyIcon } from '@easyflow/icons';
|
||||||
import { preferences } from '@easyflow/preferences';
|
import { preferences } from '@easyflow/preferences';
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import type {ServerSentEventMessage} from 'fetch-event-stream';
|
|||||||
|
|
||||||
import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue';
|
import {computed, nextTick, onBeforeUnmount, onMounted, ref, watch} from 'vue';
|
||||||
import {useRoute} from 'vue-router';
|
import {useRoute} from 'vue-router';
|
||||||
|
import ElXMarkdown from 'vue-element-plus-x/es/XMarkdown/index.js';
|
||||||
|
|
||||||
import {IconifyIcon} from '@easyflow/icons';
|
import {IconifyIcon} from '@easyflow/icons';
|
||||||
import {$t} from '@easyflow/locales';
|
import {$t} from '@easyflow/locales';
|
||||||
|
|||||||
Reference in New Issue
Block a user