perf: 逻辑调整

2025-08-21 11:40:36 +08:00
parent 55166ff580
commit df01af0656
5 changed files with 66 additions and 21 deletions
--- a/src/components/xt-chat/xt-bubble/style.scss
+++ b/src/components/xt-chat/xt-bubble/style.scss
@ -32,7 +32,10 @@

  .xt-bubble-content {
    display: flex;
-    align-items: center;
+    flex-direction: column;
+    align-items: flex-start;
+    min-width: 0;
+    max-width: 100%;
    @include cts;
    &-filled {
      background-color: #f2f3f5;
--- a/src/components/xt-chat/xt-bubble/types.ts
+++ b/src/components/xt-chat/xt-bubble/types.ts
@ -70,7 +70,8 @@ export interface _AvatarProps extends AvatarProps {
 * 气泡组件属性接口
 * 定义气泡组件的所有可配置属性
 */
-export interface BubbleProps<ContentType extends BubbleContentType = string> extends /* @vue-ignore */ Omit<HTMLAttributes, 'content'> {
+export interface BubbleProps<ContentType extends BubbleContentType = string>
+  extends /* @vue-ignore */ Omit<HTMLAttributes, 'content'> {
  /** 组件前缀类名 */
  prefixCls?: string;
  /** 根元素的自定义类名 */
@ -102,9 +103,13 @@ export interface BubbleProps<ContentType extends BubbleContentType = string> ext
  /** 打字完成时的回调函数 */
  onTypingComplete?: VoidFunction;
  /** 头部内容：可以是VNode、字符串或渲染函数 */
-  header?: AvoidValidation<VNode | string | ((content: ContentType, info: SlotInfoType) => VNode | string)>;
+  header?: AvoidValidation<
+    VNode | string | ((params: { content: ContentType; info: SlotInfoType; item: BubbleProps<any> }) => VNode | string)
+  >;
  /** 底部内容：可以是VNode、字符串或渲染函数 */
-  footer?: AvoidValidation<VNode | string | ((content: ContentType, info: SlotInfoType) => VNode | string)>;
+  footer?: AvoidValidation<
+    VNode | string | ((params: { content: ContentType; info: SlotInfoType; item: BubbleProps<any> }) => VNode | string)
+  >;
 }

 /**
--- a/src/components/xt-chat/xt-bubble/xt-bubble.vue
+++ b/src/components/xt-chat/xt-bubble/xt-bubble.vue
@ -85,16 +85,16 @@ export default defineComponent({

    const renderHeader = () => {
      const info: SlotInfoType = { key: props._key };
-      if (slots.header) return slots.header({ content: typedContent.value as any, info }) as any;
-      const h = props.header as any;
-      return typeof h === 'function' ? h(typedContent.value as any, info) : h;
+      if (slots.header) return slots.header({ content: typedContent.value as any, info, item: props }) as any;
+      const h = props.header;
+      return typeof h === 'function' ? h({ content: typedContent.value as any, info, item: props }) : h;
    };

    const renderFooter = () => {
      const info: SlotInfoType = { key: props._key };
-      if (slots.footer) return slots.footer({ content: typedContent.value as any, info }) as any;
-      const f = props.footer as any;
-      return typeof f === 'function' ? f(typedContent.value as any, info) : f;
+      if (slots.footer) return slots.footer({ content: typedContent.value as any, info, item: props }) as any;
+      const f = props.footer;
+      return typeof f === 'function' ? f({ content: typedContent.value as any, info, item: props }) : f;
    };

    return () => (
--- a/src/views/home/components/conversation-detail/index.vue
+++ b/src/views/home/components/conversation-detail/index.vue
@ -1,11 +1,13 @@
 <script lang="tsx">
-import { message } from 'ant-design-vue';
+import { message, Tooltip } from 'ant-design-vue';
 import { BubbleList } from '@/components/xt-chat/xt-bubble';
 import type { BubbleListProps } from 'ant-design-x-vue';
 import { useRoute } from 'vue-router';
 import SenderInput from '../sender-input/index.vue';
 import markdownit from 'markdown-it';
 import { Typography } from 'ant-design-vue';
+import { useClipboard } from '@vueuse/core';
+import { genRandomId } from '@/utils/tools';

 const QUESTION_ROLE = 'question';
 const ANSWER_ROLE = 'text';
@ -13,6 +15,8 @@ const ANSWER_ROLE = 'text';
 export default {
  setup(props, { emit, expose }) {
    const route = useRoute();
+    const { copy, copied, isSupported } = useClipboard();
+
    const senderRef = ref(null);
    const searchValue = ref('');
    const generateLoading = ref(false);
@ -23,14 +27,33 @@ export default {
      return route.params.conversationId;
    });

+    const onCopy = (content: string) => {
+      copy(content);
+      message.success('复制成功！');
+    };
+
+    const onRefresh = (tempId: string, tempIndex: number) => {
+      generateLoading.value = true;
+      conversationList.value.splice(tempIndex, 1, {
+        id: tempId,
+        loading: true,
+        role: ANSWER_ROLE,
+      });
+    };
+
    const handleSubmit = () => {
+      if (generateLoading.value) {
+        message.warning('停止生成后可发送');
+        return;
+      }
+
      generateLoading.value = true;
      conversationList.value.push({
        role: QUESTION_ROLE,
        content: searchValue.value,
      });

-      const tempId = Date.now();
+      const tempId = genRandomId();
      const tempIndex = conversationList.value.length;
      conversationList.value.push({
        id: tempId,
@ -39,9 +62,7 @@ export default {
      });

      setTimeout(() => {
-        const content = `> Render as markdown content to show rich text!
-          Link: [Ant Design X](https://x.ant.design)
-      `;
+        const content = `> Render as markdown content to show rich text!`;
        searchValue.value = '';
        conversationList.value.splice(tempIndex, 1, {
          id: tempId,
@ -53,6 +74,24 @@ export default {
              <div v-html={md.render(content)}></div>
            </Typography>
          ),
+          footer: ({ item }) => {
+            // 判断当前元素是否是最后一个非QUESTION_ROLE的元素
+            const nonQuestionElements = conversationList.value.filter((item) => item.role !== QUESTION_ROLE);
+            const isLastAnswer = nonQuestionElements[nonQuestionElements.length - 1]?.id === item.id;
+
+            return (
+              <div class="flex items-center">
+                <Tooltip title="复制" onClick={() => onCopy(content)}>
+                  <icon-copy size={16} class="mr-12px color-#737478 cursor-pointer" />
+                </Tooltip>
+                {isLastAnswer && (
+                  <Tooltip title="重新生成" onClick={() => onRefresh(tempId, tempIndex)}>
+                    <icon-refresh size={16} class="color-#737478 cursor-pointer" />
+                  </Tooltip>
+                )}
+              </div>
+            );
+          },
        });
      }, 1000);
    };
@ -74,7 +113,7 @@ export default {
      },
      [QUESTION_ROLE]: {
        placement: 'end',
-        shape: 'round'
+        shape: 'round',
      },
    };

@ -88,8 +127,8 @@ export default {
                class="w-full"
                ref={senderRef}
                placeholder="继续追问..."
-                v-model={searchValue.value}
                loading={generateLoading.value}
+                v-model={searchValue.value}
                onSubmit={handleSubmit}
                onCancel={handleCancel}
              />
--- a/src/views/home/components/sender-input/index.vue
+++ b/src/views/home/components/sender-input/index.vue
@ -39,9 +39,7 @@ export default {
    );

    const handleSubmit = () => {
-      if (!props.loading) {
      emit('submit', localSearchValue.value);
-      }
    };
    const handleCancel = () => {
      emit('cancel');