fix: 兼容低版本浏览器消息复制
- 为 Chrome 90 增加剪贴板兼容回退 - 统一聊天与智能体试运行的原色对勾反馈
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user