wenyongda
26cd7f7e8f
问答助手解决Popconfirm气泡确认框不触发的问题，为Dify二次开发问答助手前端的Tooltip导致及Popconfirm需在Button按钮的上一级才可触发，将Dify的Tooltip更换成Ant Design的Tooltip，此气泡确认框的作用为取消赞成及取消反对时进行确认，而不是直接取消
55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
'use client'
|
|
import { useState } from 'react'
|
|
import { t } from 'i18next'
|
|
import { debounce } from 'lodash-es'
|
|
import copy from 'copy-to-clipboard'
|
|
import s from './style.module.css'
|
|
// import Tooltip from '@/app/components/base/tooltip'
|
|
import { Tooltip } from 'antd';
|
|
|
|
type ICopyBtnProps = {
|
|
value: string
|
|
className?: string
|
|
isPlain?: boolean
|
|
}
|
|
|
|
const CopyBtn = ({
|
|
value,
|
|
className,
|
|
isPlain,
|
|
}: ICopyBtnProps) => {
|
|
const [isCopied, setIsCopied] = useState(false)
|
|
|
|
const onClickCopy = debounce(() => {
|
|
copy(value)
|
|
setIsCopied(true)
|
|
}, 100)
|
|
|
|
const onMouseLeave = debounce(() => {
|
|
setIsCopied(false)
|
|
}, 100)
|
|
|
|
return (
|
|
<div className={`${className}`}>
|
|
<Tooltip
|
|
title={(isCopied ? t('appApi.copied') : t('appApi.copy'))}
|
|
>
|
|
<div
|
|
onMouseLeave={onMouseLeave}
|
|
className={'box-border p-0.5 flex items-center justify-center rounded-md bg-components-button-secondary-bg cursor-pointer'}
|
|
style={!isPlain
|
|
? {
|
|
boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
|
|
}
|
|
: {}}
|
|
onClick={onClickCopy}
|
|
>
|
|
<div className={`w-6 h-6 rounded-md hover:bg-components-button-secondary-bg-hover ${s.copyIcon} ${isCopied ? s.copied : ''}`}></div>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CopyBtn
|