Add fade-slide animations

src/App.jsx

@@ -257,7 +257,7 @@ function App() {
               aria-label="控制面板"
             >
               {/* 标题信息 */}
-              <div className="bg-white rounded-lg shadow-md p-3">
+              <div className="bg-white rounded-lg shadow-md p-3 fade-slide-in">
               <div className="flex items-center gap-2 mb-2">
                 <div className="p-2 bg-blue-100 rounded-lg">
                   <svg className="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -328,7 +328,7 @@ function App() {
               />
             )}
 
-            <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="display-options-heading">
+            <section className="bg-white rounded-lg shadow-md p-3 fade-slide-in" aria-labelledby="display-options-heading">
               <h3 
                 id="display-options-heading"
                 className="text-base font-semibold text-gray-800 mb-2"

src/components/ChartContainer.jsx

@@ -13,6 +13,7 @@ import {
   Legend,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
+import { Decimation } from 'chart.js';
 import { getMinSteps } from "../utils/getMinSteps.js";
 
 ChartJS.register(
@@ -23,7 +24,8 @@ ChartJS.register(
   Title,
   Tooltip,
   Legend,
-  zoomPlugin
+  zoomPlugin,
+  Decimation
 );
 
 const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover }) => {
@@ -54,7 +56,11 @@ const ChartWrapper = ({ data, options, chartId, onRegisterChart, onSyncHover })
   }, [onSyncHover, chartId]);
 
   return (
-    <div onMouseLeave={handleContainerMouseLeave} style={{ width: '100%', height: '100%' }}>
+    <div
+      onMouseLeave={handleContainerMouseLeave}
+      style={{ width: '100%', height: '100%' }}
+      className="fade-slide-in"
+    >
       <Line ref={handleChartRef} data={data} options={enhancedOptions} />
     </div>
   );
@@ -196,8 +202,10 @@ export default function ChartContainer({
         pointHoverBackgroundColor: color,
         pointHoverBorderColor: color,
         pointHoverBorderWidth: 1,
-        animation: false,
-        animations: { colors: false, x: false, y: false },
+        animation: {
+          duration: 500,
+          easing: 'easeOutQuart'
+        },
       };
     })
   });
@@ -253,12 +261,19 @@ export default function ChartContainer({
   const chartOptions = useMemo(() => ({
     responsive: true,
     maintainAspectRatio: false,
-    animation: { duration: 0 },
-    animations: { colors: false, x: false, y: false },
-    hover: { animationDuration: 0 },
-    responsiveAnimationDuration: 0,
+    animation: {
+      duration: 500,
+      easing: 'easeOutQuart'
+    },
     interaction: { mode: 'index', intersect: false },
     plugins: {
+      decimation: {
+        enabled: parsedData.some(file =>
+          Object.values(file.metricsData || {}).some(arr => arr.length > 1000)
+        ),
+        algorithm: 'lttb',
+        samples: 1000
+      },
       zoom: {
         pan: {
           enabled: true,
@@ -308,7 +323,6 @@ export default function ChartContainer({
       tooltip: {
         mode: 'index',
         intersect: false,
-        animation: false,
         backgroundColor: 'rgba(15, 23, 42, 0.92)',
         titleColor: '#f1f5f9',
         bodyColor: '#cbd5e1',
@@ -370,7 +384,7 @@ export default function ChartContainer({
       }
     },
     elements: { point: { radius: 0 } }
-  }), [xRange, onXRangeChange]);
+  }), [xRange, onXRangeChange, parsedData]);
 
   const createComparisonChartData = (item1, item2, title) => {
     const comparisonData = getComparisonData(item1.data, item2.data, compareMode);
@@ -392,8 +406,10 @@ export default function ChartContainer({
         pointHoverBackgroundColor: '#dc2626',
         pointHoverBorderColor: '#dc2626',
         pointHoverBorderWidth: 1,
-        animation: false,
-        animations: { colors: false, x: false, y: false },
+        animation: {
+          duration: 500,
+          easing: 'easeOutQuart'
+        },
       },
     ];
     if (baseline > 0 && (compareMode === 'relative' || compareMode === 'absolute')) {
@@ -415,16 +431,18 @@ export default function ChartContainer({
         pointHoverBackgroundColor: '#10b981',
         pointHoverBorderColor: '#10b981',
         pointHoverBorderWidth: 1,
-        animation: false,
-        animations: { colors: false, x: false, y: false },
+        animation: {
+          duration: 500,
+          easing: 'easeOutQuart'
+        },
       });
     }
     return { datasets };
   };
 
   if (parsedData.length === 0) {
     return (
-      <div className="bg-white rounded-lg shadow-md p-8">
+      <div className="bg-white rounded-lg shadow-md p-8 fade-slide-in">
         <div className="text-center text-gray-500">
           <p className="text-lg mb-2">📊 暂无数据</p>
           <p>📁 请上传日志文件开始分析</p>
@@ -451,7 +469,7 @@ export default function ChartContainer({
 
   if (metrics.length === 0) {
     return (
-      <div className="bg-white rounded-lg shadow-md p-8">
+      <div className="bg-white rounded-lg shadow-md p-8 fade-slide-in">
         <div className="text-center text-gray-500">
           <p className="text-lg mb-2 font-medium">🎯 请选择要显示的图表</p>
         </div>
@@ -523,7 +541,7 @@ export default function ChartContainer({
         </ResizablePanel>
         {comparisonChart}
         {stats && (
-          <div className="bg-white rounded-lg shadow-md p-3">
+          <div className="bg-white rounded-lg shadow-md p-3 fade-slide-in">
             <h4 className="text-sm font-medium text-gray-700 mb-1">{key} 差值统计</h4>
             <div className="space-y-1 text-xs">
               <p>Mean Difference: {stats.meanNormal.toFixed(6)}</p>

src/components/ComparisonControls.jsx

@@ -12,7 +12,7 @@ export function ComparisonControls({
   ];
 
   return (
-    <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="comparison-controls-heading">
+    <section className="bg-white rounded-lg shadow-md p-3 fade-slide-in" aria-labelledby="comparison-controls-heading">
       <div className="flex items-center gap-2 mb-2">
         <BarChart2 
           size={16} 

src/components/FileConfigModal.jsx

@@ -186,15 +186,15 @@ export function FileConfigModal({ file, isOpen, onClose, onSave, globalParsingCo
   if (!isOpen || !file) return null;
 
   return (
-    <div 
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 fade-slide-in"
       role="dialog"
       aria-labelledby="config-modal-title"
       aria-modal="true"
       onClick={onClose}
     >
-      <div 
-        className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
+      <div
+        className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto fade-slide-in"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between p-4 border-b bg-gray-50">

src/components/FileList.jsx

@@ -4,7 +4,7 @@ import { FileText, X, Settings } from 'lucide-react';
 export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
   if (files.length === 0) {
     return (
-      <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="file-list-heading">
+      <section className="bg-white rounded-lg shadow-md p-3 fade-slide-in" aria-labelledby="file-list-heading">
         <h3 
           id="file-list-heading"
           className="text-base font-semibold text-gray-800 mb-2"
@@ -19,7 +19,7 @@ export function FileList({ files, onFileRemove, onFileToggle, onFileConfig }) {
   }
 
   return (
-    <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="file-list-heading">
+    <section className="bg-white rounded-lg shadow-md p-3 fade-slide-in" aria-labelledby="file-list-heading">
       <h3 
         id="file-list-heading"
         className="text-base font-semibold text-gray-800 mb-2"

src/components/FileUpload.jsx

@@ -63,7 +63,7 @@ export function FileUpload({ onFilesUploaded }) {
   }, [processFiles]);
 
   return (
-    <div className="bg-white rounded-lg shadow-md p-3">
+    <div className="bg-white rounded-lg shadow-md p-3 fade-slide-in">
       <h3 
         id="file-upload-heading"
         className="text-base font-semibold text-gray-800 mb-2"

src/components/RegexControls.jsx

@@ -412,7 +412,7 @@ export function RegexControls({
   };
 
   return (
-    <section className="bg-white rounded-lg shadow-md p-3" aria-labelledby="regex-controls-heading">
+    <section className="bg-white rounded-lg shadow-md p-3 fade-slide-in" aria-labelledby="regex-controls-heading">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
           <Settings 

src/components/ResizablePanel.jsx

@@ -42,9 +42,9 @@ export function ResizablePanel({ children, title, initialHeight = 440, minHeight
   }, [height]);
 
   return (
-    <section 
+    <section
       ref={panelRef}
-      className="chart-panel p-3"
+      className="chart-panel p-3 fade-slide-in"
       style={{ height: `${height}px` }}
       aria-labelledby={`panel-title-${title.replace(/\s+/g, '-').toLowerCase()}`}
     >

src/components/__tests__/ChartContainer.test.jsx

@@ -20,7 +20,8 @@ vi.mock('chart.js', () => {
     LineElement: {},
     Title: {},
     Tooltip: {},
-    Legend: {}
+    Legend: {},
+    Decimation: {}
   };
 });
 

src/index.css

@@ -247,6 +247,28 @@ input[type="checkbox"]:focus {
   }
 }
 
+/* 通用元素入场动画 */
+@keyframes fadeSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-slide-in {
+  animation: fadeSlideIn 0.4s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade-slide-in {
+    animation: none !important;
+  }
+}
+
 /* 渐变文字动画 */
 @keyframes gradientShift {
   0%, 100% {