feat: improve sidebar with collapsible panels

Author: JavaZeroo

src/App.jsx

@@ -252,7 +252,7 @@ function App() {
         >
           {sidebarVisible && (
             <aside
-              className="xl:col-span-1 space-y-3"
+              className="xl:col-span-1 space-y-3 overflow-y-auto max-h-screen"
               role="complementary"
               aria-label="控制面板"
             >
@@ -304,7 +304,14 @@ function App() {
             </div>
 
             <FileUpload onFilesUploaded={handleFilesUploaded} />
-            
+
+            <FileList
+              files={uploadedFiles}
+              onFileRemove={handleFileRemove}
+              onFileToggle={handleFileToggle}
+              onFileConfig={handleFileConfig}
+            />
+
             <RegexControls
               globalParsingConfig={globalParsingConfig}
               onGlobalParsingConfigChange={handleGlobalParsingConfigChange}
@@ -313,13 +320,6 @@ function App() {
               onXRangeChange={setXRange}
               maxStep={maxStep}
             />
-            
-            <FileList
-              files={uploadedFiles}
-              onFileRemove={handleFileRemove}
-              onFileToggle={handleFileToggle}
-              onFileConfig={handleFileConfig}
-            />
 
             {uploadedFiles.filter(file => file.enabled).length === 2 && (
               <ComparisonControls

src/components/CollapsibleSection.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+export function CollapsibleSection({ title, defaultOpen = true, action = null, children }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const id = `section-${title}`.replace(/\s+/g, '-');
+  return (
+    <section className="bg-white rounded-lg shadow-md" aria-labelledby={id}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between p-3 focus:outline-none"
+        aria-expanded={open}
+      >
+        <h3 id={id} className="text-base font-semibold text-gray-800">
+          {title}
+        </h3>
+        <span className="flex items-center gap-1">
+          {action}
+          <ChevronDown
+            size={16}
+            className={`text-gray-600 transition-transform ${open ? 'transform rotate-180' : ''}`}
+            aria-hidden="true"
+          />
+        </span>
+      </button>
+      {open && <div className="p-3 border-t">{children}</div>}
+    </section>
+  );
+}
+
+export default CollapsibleSection;

src/components/FileUpload.jsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { Upload, FileText } from 'lucide-react';
+import CollapsibleSection from './CollapsibleSection.jsx';
 
 export function FileUpload({ onFilesUploaded }) {
   const [isDragOver, setIsDragOver] = useState(false);
@@ -63,13 +64,7 @@ export function FileUpload({ onFilesUploaded }) {
   }, [processFiles]);
 
   return (
-    <div className="bg-white rounded-lg shadow-md p-3">
-      <h3 
-        id="file-upload-heading"
-        className="text-base font-semibold text-gray-800 mb-2"
-      >
-        📁 文件上传
-      </h3>
+    <CollapsibleSection title="📁 文件上传">
       <div
         className={`drag-area border-2 border-dashed rounded-lg p-4 text-center cursor-pointer ${
           isDragOver ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
@@ -81,7 +76,7 @@ export function FileUpload({ onFilesUploaded }) {
         onClick={() => document.getElementById('fileInput').click()}
         role="button"
         tabIndex={0}
-        aria-labelledby="file-upload-heading"
+        aria-label="上传日志文件"
         aria-describedby="file-upload-description"
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -113,6 +108,6 @@ export function FileUpload({ onFilesUploaded }) {
           aria-label="选择日志文件，支持所有文本格式"
         />
       </div>
-    </div>
+    </CollapsibleSection>
   );
 }

src/components/RegexControls.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Settings, Zap, Eye, ChevronDown, ChevronUp, Target, Code, ZoomIn } from 'lucide-react';
+import { Settings, Zap, Eye, Target, Code, ZoomIn } from 'lucide-react';
+import CollapsibleSection from './CollapsibleSection.jsx';
 import { METRIC_PRESETS } from '../metricPresets.js';
 
 // 匹配模式枚举
@@ -450,20 +451,26 @@ export function RegexControls({
 
       <div className="space-y-4">
         {globalParsingConfig.metrics.map((cfg, idx) => (
-          <div key={idx} className="border rounded-lg p-3 relative">
-            <button
-              onClick={() => removeMetric(idx)}
-              className="absolute top-1 right-1 text-red-500"
-              title="删除配置"
-            >
-              ×
-            </button>
-            <h4 className="text-sm font-medium text-gray-800 mb-2 flex items-center gap-1">
-              <span className="w-3 h-3 bg-blue-500 rounded-full"></span>
-              {getMetricTitle(cfg, idx)} 解析配置
-            </h4>
-            {renderConfigPanel(`metric-${idx}`, cfg, (field, value) => handleMetricChange(idx, field, value), idx)}
-          </div>
+          <CollapsibleSection
+            key={idx}
+            title={`${getMetricTitle(cfg, idx)} 解析配置`}
+            action={
+              <button
+                onClick={() => removeMetric(idx)}
+                className="text-red-500"
+                title="删除配置"
+              >
+                ×
+              </button>
+            }
+          >
+            {renderConfigPanel(
+              `metric-${idx}`,
+              cfg,
+              (field, value) => handleMetricChange(idx, field, value),
+              idx
+            )}
+          </CollapsibleSection>
         ))}
         <button
           onClick={addMetric}