feat: new copy code animate

Signed-off-by: Innei <i@innei.in>

src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx

@@ -4,9 +4,12 @@ import {
  useEffect,
  useImperativeHandle,
  useMemo,
+ useRef,
  useState,
 } from 'react'
 import clsx from 'clsx'
+import { AnimatePresence, m } from 'framer-motion'
+import type { Variants } from 'framer-motion'
 import type { PropsWithChildren } from 'react'
 
 import { getViewport } from '~/atoms/hooks'
@@ -28,6 +31,20 @@ interface Props {
  renderedHTML?: string
 }
 
+const copyIconVariants: Variants = {
+ initial: {
+ opacity: 1,
+ scale: 1,
+ },
+ animate: {
+ opacity: 1,
+ scale: 1,
+ },
+ exit: {
+ opacity: 0,
+ scale: 0,
+ },
+}
 export const ShikiHighLighterWrapper = forwardRef<
  HTMLDivElement,
  PropsWithChildren<
@@ -43,9 +60,16 @@ export const ShikiHighLighterWrapper = forwardRef<
  attrs,
  } = props
 
+ const [copied, setCopied] = useState(false)
+ const copiedTimerRef = useRef<any>()
  const handleCopy = useCallback(() => {
  navigator.clipboard.writeText(value)
- toast.success('已复制到剪贴板')
+ setCopied(true)
+
+ clearTimeout(copiedTimerRef.current)
+ copiedTimerRef.current = setTimeout(() => {
+ setCopied(false)
+ }, 2000)
  }, [value])
 
  const [codeBlockRef, setCodeBlockRef] = useState<HTMLDivElement | null>(null)
@@ -122,16 +146,31 @@ export const ShikiHighLighterWrapper = forwardRef<
  <MotionButtonBase
  onClick={handleCopy}
  className={clsx(
- 'center absolute right-2 top-2 z-[1] flex text-xs',
+ 'absolute right-2 top-2 z-[1] flex text-xs center',
  'rounded-md border border-accent/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200',
  'opacity-0 group-hover:opacity-100',
  filename && '!top-12',
  )}
  >
- <i className="icon-[mingcute--copy-2-fill] size-4" />
+ <AnimatePresence mode="wait">
+ {copied ? (
+ <m.i
+ key={'copied'}
+ className="icon-[mingcute--check-line] size-4"
+ {...copyIconVariants}
+ />
+ ) : (
+ <m.i
+ key={'copy'}
+ className="icon-[mingcute--copy-2-fill] size-4"
+ {...copyIconVariants}
+ />
+ )}
+ </AnimatePresence>
  </MotionButtonBase>
  <AutoResizeHeight spring className="relative">
  <div
+ onCopy={stopPropagation}
  ref={setCodeBlockRef}
  className={clsxm(
  'relative max-h-[50vh] w-full overflow-auto',