Improve sidebar layout with collapsible sections

src/App.jsx

@@ -188,7 +188,7 @@ function App() {
   }, [handleGlobalDragEnter, handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
+    <div className="h-screen overflow-hidden bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
       {/* 全页面拖拽覆盖层 */}
       {globalDragOver && (
         <div
@@ -243,16 +243,16 @@ function App() {
         </button>
       )}
 
-      <div className="w-full px-3 py-3">
+      <div className="w-full px-3 py-3 h-full">
 
         <main
           id="main-content"
-          className="grid grid-cols-1 xl:grid-cols-5 gap-3"
+          className="grid grid-cols-1 xl:grid-cols-5 gap-3 h-full"
           role="main"
         >
           {sidebarVisible && (
             <aside
-              className="xl:col-span-1 space-y-3"
+              className="xl:col-span-1 space-y-3 overflow-y-auto max-h-screen sidebar-scroll"
               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"
+        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}

src/index.css

@@ -18,7 +18,7 @@
   }
 
   /* Focus styles for better keyboard navigation */
-  :focus {
+  :focus-visible {
     outline: 2px solid #3b82f6;
     outline-offset: 2px;
   }
@@ -130,11 +130,29 @@
   background-color: #dbeafe;
 }
 
+/* Sidebar scrollbar styling */
+.sidebar-scroll {
+  scrollbar-width: thin;
+}
+.sidebar-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.sidebar-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background-color: #cbd5e1;
+  border-radius: 3px;
+}
+.sidebar-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: #94a3b8;
+}
+
 /* Enhanced focus indicators for interactive elements */
-button:focus,
-input:focus,
-select:focus,
-textarea:focus {
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
@@ -162,8 +180,8 @@ button:disabled {
 }
 
 /* Form improvements */
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
+input[type="radio"]:focus-visible,
+input[type="checkbox"]:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
 }