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

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

- 统一聊天与智能体试运行的原色对勾反馈
This commit is contained in:
2026-07-22 20:07:34 +08:00
parent 5a3d4788da
commit 9f06c238d3
15 changed files with 423 additions and 83 deletions

View File

@@ -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>