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

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

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

easyflow-ui-admin/app/src/components/chat-workspace/ChatMessageActionBar.test.ts

@@ -0,0 +1,66 @@
+import { flushPromises, mount } from '@vue/test-utils';
+
+import { copyTextToClipboard } from '@easyflow/utils';
+
+import { ElMessage } from 'element-plus';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import ChatMessageActionBar from './ChatMessageActionBar.vue';
+
+vi.mock('@easyflow/utils', () => ({
+  copyTextToClipboard: vi.fn(),
+}));
+
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    error: vi.fn(),
+  },
+}));
+
+describe('chat message action bar', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.useRealTimers();
+  });
+
+  it('shows a check icon after copying and restores the copy icon', async () => {
+    vi.useFakeTimers();
+    vi.mocked(copyTextToClipboard).mockResolvedValue('clipboard-api');
+    const wrapper = mount(ChatMessageActionBar, {
+      props: {
+        allowCopy: true,
+        copyText: '消息内容',
+      },
+    });
+
+    await wrapper.get('[aria-label="复制消息"]').trigger('click');
+    await flushPromises();
+
+    expect(copyTextToClipboard).toHaveBeenCalledWith('消息内容');
+    expect(wrapper.get('button').attributes('aria-label')).toBe('复制成功');
+    expect(wrapper.get('button').classes()).not.toContain('is-copied');
+    expect(ElMessage.error).not.toHaveBeenCalled();
+
+    await vi.advanceTimersByTimeAsync(1600);
+
+    expect(wrapper.get('button').attributes('aria-label')).toBe('复制消息');
+  });
+
+  it('keeps the copy icon and shows the existing warning on failure', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    vi.mocked(copyTextToClipboard).mockRejectedValue(new Error('copy denied'));
+    const wrapper = mount(ChatMessageActionBar, {
+      props: {
+        allowCopy: true,
+        copyErrorMessage: '复制失败，请重试',
+        copyText: '消息内容',
+      },
+    });
+
+    await wrapper.get('[aria-label="复制消息"]').trigger('click');
+    await flushPromises();
+
+    expect(wrapper.get('button').attributes('aria-label')).toBe('复制消息');
+    expect(ElMessage.error).toHaveBeenCalledWith('复制失败，请重试');
+  });
+});

easyflow-ui-admin/app/src/components/chat-workspace/ChatMessageActionBar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import {
-  CopyDocument,
-  RefreshRight,
-} from '@element-plus/icons-vue';
+import { onBeforeUnmount, ref } from 'vue';
+
+import { copyTextToClipboard } from '@easyflow/utils';
+
+import { Check, CopyDocument, RefreshRight } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 
 import ChatAnswerVariantNavigator from './ChatAnswerVariantNavigator.vue';
 
@@ -11,6 +13,8 @@ const props = withDefaults(
     align?: 'end' | 'start';
     allowCopy?: boolean;
     allowRegenerate?: boolean;
+    copyErrorMessage?: string;
+    copyText?: string;
     disabledVariantNext?: boolean;
     disabledVariantPrevious?: boolean;
     regenerateDisabled?: boolean;
@@ -23,6 +27,8 @@ const props = withDefaults(
     align: 'start',
     allowCopy: false,
     allowRegenerate: false,
+    copyErrorMessage: '复制失败',
+    copyText: '',
     disabledVariantNext: false,
     disabledVariantPrevious: false,
     regenerateDisabled: false,
@@ -34,14 +40,37 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  copy: [];
   regenerate: [];
   selectNextVariant: [];
   selectPreviousVariant: [];
 }>();
 
-function handleCopy() {
-  emit('copy');
+const copied = ref(false);
+const copying = ref(false);
+const COPIED_FEEDBACK_DURATION_MS = 1600;
+let copiedResetTimer: ReturnType<typeof setTimeout> | undefined;
+
+async function handleCopy() {
+  if (copying.value || !props.copyText) {
+    return;
+  }
+  copying.value = true;
+  try {
+    await copyTextToClipboard(props.copyText);
+    copied.value = true;
+    if (copiedResetTimer) {
+      clearTimeout(copiedResetTimer);
+    }
+    copiedResetTimer = setTimeout(() => {
+      copied.value = false;
+      copiedResetTimer = undefined;
+    }, COPIED_FEEDBACK_DURATION_MS);
+  } catch (error) {
+    console.error('复制消息失败:', error);
+    ElMessage.error(props.copyErrorMessage);
+  } finally {
+    copying.value = false;
+  }
 }
 
 function handleRegenerate() {
@@ -58,6 +87,12 @@ function handleSelectPreviousVariant() {
 function handleSelectNextVariant() {
   emit('selectNextVariant');
 }
+
+onBeforeUnmount(() => {
+  if (copiedResetTimer) {
+    clearTimeout(copiedResetTimer);
+  }
+});
 </script>
 
 <template>
@@ -81,11 +116,15 @@ function handleSelectNextVariant() {
       v-if="allowCopy"
       type="button"
       class="message-actions__button"
-      aria-label="复制消息"
-      title="复制"
+      :aria-busy="copying"
+      :aria-label="copied ? '复制成功' : '复制消息'"
+      :title="copied ? '复制成功' : '复制'"
       @click="handleCopy"
     >
-      <CopyDocument />
+      <Transition name="message-actions__icon" mode="out-in">
+        <Check v-if="copied" key="check" />
+        <CopyDocument v-else key="copy" />
+      </Transition>
     </button>
 
     <button
@@ -150,4 +189,17 @@ function handleSelectNextVariant() {
   width: 15px;
   height: 15px;
 }
+
+.message-actions__icon-enter-active,
+.message-actions__icon-leave-active {
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.message-actions__icon-enter-from,
+.message-actions__icon-leave-to {
+  opacity: 0;
+  transform: scale(0.88);
+}
 </style>