fix: 兼容低版本浏览器消息复制

- 为 Chrome 90 增加剪贴板兼容回退

- 统一聊天与智能体试运行的原色对勾反馈

easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/ChatMessageToolbar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import {Copy, RotateCw} from '@easyflow/icons';
+import { onBeforeUnmount, ref } from 'vue';
+
+import { Check, Copy, RotateCw } from '@easyflow/icons';
 
 import ChatVariantNavigator from './ChatVariantNavigator.vue';
 
@@ -8,6 +10,7 @@ const props = withDefaults(
     align?: 'end' | 'start';
     allowCopy?: boolean;
     allowRegenerate?: boolean;
+    copyAction?: () => boolean | Promise<boolean>;
     disabledVariantNext?: boolean;
     disabledVariantPrevious?: boolean;
     regenerateDisabled?: boolean;
@@ -20,6 +23,7 @@ const props = withDefaults(
     align: 'start',
     allowCopy: false,
     allowRegenerate: false,
+    copyAction: undefined,
     disabledVariantNext: false,
     disabledVariantPrevious: false,
     regenerateDisabled: false,
@@ -37,12 +41,53 @@ const emit = defineEmits<{
   selectPreviousVariant: [];
 }>();
 
+const copied = ref(false);
+const copying = ref(false);
+const COPIED_FEEDBACK_DURATION_MS = 3000;
+let copiedResetTimer: ReturnType<typeof setTimeout> | undefined;
+
+async function handleCopy() {
+  if (copying.value) {
+    return;
+  }
+  if (!props.copyAction) {
+    emit('copy');
+    return;
+  }
+
+  copying.value = true;
+  try {
+    const success = await props.copyAction();
+    if (!success) {
+      return;
+    }
+    copied.value = true;
+    if (copiedResetTimer) {
+      clearTimeout(copiedResetTimer);
+    }
+    copiedResetTimer = setTimeout(() => {
+      copied.value = false;
+      copiedResetTimer = undefined;
+    }, COPIED_FEEDBACK_DURATION_MS);
+  } catch (error) {
+    console.error('复制消息失败:', error);
+  } finally {
+    copying.value = false;
+  }
+}
+
 function handleRegenerate() {
   if (props.regenerateDisabled) {
     return;
   }
   emit('regenerate');
 }
+
+onBeforeUnmount(() => {
+  if (copiedResetTimer) {
+    clearTimeout(copiedResetTimer);
+  }
+});
 </script>
 
 <template>
@@ -55,11 +100,15 @@ function handleRegenerate() {
       v-if="allowCopy"
       type="button"
       class="chat-message-toolbar__button"
-      aria-label="复制消息"
-      title="复制"
-      @click="emit('copy')"
+      :aria-busy="copying"
+      :aria-label="copied ? '复制成功' : '复制消息'"
+      :title="copied ? '复制成功' : '复制'"
+      @click="handleCopy"
     >
-      <Copy />
+      <Transition name="chat-message-toolbar__icon" mode="out-in">
+        <Check v-if="copied" key="check" />
+        <Copy v-else key="copy" />
+      </Transition>
     </button>
     <button
       v-if="allowRegenerate"
@@ -140,4 +189,17 @@ function handleRegenerate() {
   width: 14px;
   height: 14px;
 }
+
+.chat-message-toolbar__icon-enter-active,
+.chat-message-toolbar__icon-leave-active {
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.chat-message-toolbar__icon-enter-from,
+.chat-message-toolbar__icon-leave-to {
+  opacity: 0;
+  transform: scale(0.88);
+}
 </style>

easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/ChatTimeline.vue

@@ -13,6 +13,7 @@ import ChatTimelineItem from './ChatTimelineItem.vue';
 const props = defineProps<{
   approvalLoading?: boolean;
   copyable?: (item: ChatTimelineMessageItem) => boolean;
+  copyAction?: (item: ChatTimelineMessageItem) => boolean | Promise<boolean>;
   emptyText?: string;
   imageLoader?: ChatImageLoader;
   items: ChatTimelineItemType[];
@@ -157,6 +158,7 @@ watch(
         :item="item"
         :image-loader="imageLoader"
         :approval-loading="approvalLoading"
+        :copy-action="copyAction"
         :copyable="canCopyMessage(item)"
         :regenerable="canRegenerateMessage(item)"
         :regenerate-disabled="regenerateDisabled"

easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/ChatTimelineItem.vue

@@ -21,6 +21,7 @@ import ChatToolCard from './ChatToolCard.vue';
 const props = defineProps<{
   approvalLoading?: boolean;
   copyable?: boolean;
+  copyAction?: (item: ChatTimelineMessageItem) => boolean | Promise<boolean>;
   regenerable?: boolean;
   regenerateDisabled?: boolean;
   assistantActionsVisible?: boolean;
@@ -118,6 +119,14 @@ function updateThinkingExpanded(partId: string, expanded: boolean) {
     part.expanded = expanded;
   }
 }
+
+function handleCopyAction() {
+  const item = messageItem.value;
+  if (!item || !props.copyAction) {
+    return false;
+  }
+  return props.copyAction(item);
+}
 </script>
 
 <template>
@@ -161,6 +170,7 @@ function updateThinkingExpanded(partId: string, expanded: boolean) {
         :align="messageItem.role === 'user' ? 'end' : 'start'"
         :allow-copy="copyable"
         :allow-regenerate="regenerable"
+        :copy-action="copyAction ? handleCopyAction : undefined"
         :disabled-variant-next="disabledVariantNext"
         :disabled-variant-previous="disabledVariantPrevious"
         :regenerate-disabled="regenerateDisabled"

easyflow-ui-admin/packages/effects/common-ui/src/components/chat-timeline/__tests__/ChatTimelineToolbar.test.ts

@@ -1,8 +1,8 @@
 import type {ChatTimelineItem} from '../types';
 
-import {mount} from '@vue/test-utils';
+import {flushPromises, mount} from '@vue/test-utils';
 
-import {describe, expect, it} from 'vitest';
+import {afterEach, describe, expect, it, vi} from 'vitest';
 
 import ChatTimeline from '../ChatTimeline.vue';
 
@@ -28,6 +28,10 @@ function textMessage(
 }
 
 describe('ChatTimeline toolbar', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('shows copy button for user messages and emits copy-message', async () => {
     const userMessage = textMessage('user', '用户问题');
     const wrapper = mount(ChatTimeline, {
@@ -70,6 +74,32 @@ describe('ChatTimeline toolbar', () => {
     );
   });
 
+  it('shows a check icon after the copy action succeeds', async () => {
+    vi.useFakeTimers();
+    const copyAction = vi.fn().mockResolvedValue(true);
+    const userMessage = textMessage('user', '用户问题');
+    const wrapper = mount(ChatTimeline, {
+      props: {
+        copyAction,
+        copyable: () => true,
+        items: [userMessage],
+      },
+    });
+
+    await wrapper.get('[aria-label="复制消息"]').trigger('click');
+    await flushPromises();
+
+    expect(copyAction).toHaveBeenCalledWith(userMessage);
+    expect(wrapper.get('button').attributes('aria-label')).toBe('复制成功');
+    expect(
+      wrapper.find('.chat-message-toolbar__button.is-copied').exists(),
+    ).toBe(false);
+    expect(wrapper.emitted('copyMessage')).toBeUndefined();
+
+    await vi.advanceTimersByTimeAsync(3000);
+    expect(wrapper.get('button').attributes('aria-label')).toBe('复制消息');
+  });
+
   it('renders variant navigator and disables boundary buttons', async () => {
     const assistantMessage = textMessage('assistant', '助手回答', {
       roundId: 'round-1',