feat: add fadeInWithBlur animation to Tailwind CSS and update Markdown component

- Introduced a new `fadeInWithBlur` keyframe animation in Tailwind CSS for enhanced visual effects.
- Removed inline fade animation styles from the `Markdown` component to streamline rendering.
- Updated the `SmoothFade` function to utilize the new animation, improving the user experience during content transitions.

src/renderer/src/assets/styles/tailwind.css

@@ -163,6 +163,13 @@
   }
 }
 
+@layer components {
+  @keyframes fadeInWithBlur {
+    from { opacity: 0; filter: blur(2px); }
+     to { opacity: 1; filter: blur(0px); }
+   }
+}
+
 :root {
   background-color: unset;
 }

src/renderer/src/pages/home/Markdown/Markdown.tsx

@@ -154,7 +154,6 @@ const Markdown: FC<Props> = ({ block, postProcess }) => {
 
   return (
     <div className="markdown">
-      <style>{fadeStyle}</style>
       <ReactMarkdown
         rehypePlugins={rehypePlugins}
         remarkPlugins={remarkPlugins}
@@ -174,18 +173,11 @@ const Markdown: FC<Props> = ({ block, postProcess }) => {
 
 export default memo(Markdown)
 
-const fadeStyle = `
- @keyframes fadeIn {
-   from { opacity: 0; filter: blur(2px); }
-   to { opacity: 1; filter: blur(0px); }
- }
-`
-
 const SmoothFade = (Comp: React.ElementType, isStreaming: boolean) => {
   const handleAnimationEnd = (e: React.AnimationEvent) => {
     // 动画结束后移除类名
-    if (e.animationName === 'fadeIn') {
+    if (e.animationName === 'fadeInWithBlur') {
-      e.currentTarget.classList.remove('animate-[fadeIn_500ms_ease-out_forwards]')
+      e.currentTarget.classList.remove('animate-[fadeInWithBlur_500ms_ease-out_forwards]')
       e.currentTarget.classList.remove('opacity-0')
     }
   }
@@ -193,7 +185,7 @@ const SmoothFade = (Comp: React.ElementType, isStreaming: boolean) => {
     return (
       <Comp
         {...rest}
-        className={isStreaming ? 'animate-[fadeIn_500ms_ease-out_forwards] opacity-0' : ''}
+        className={isStreaming ? 'animate-[fadeInWithBlur_500ms_ease-out_forwards] opacity-0' : ''}
         onAnimationEnd={handleAnimationEnd}>
         {children}
       </Comp>