feat: persist system settings and refine admin layouts

frontend/src/pages/DataSources/DataSources.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Table, Tag, Space, message, Button, Form, Input, Select,
   Drawer, Tabs, Empty, Tooltip, Popconfirm, Collapse, InputNumber
@@ -67,6 +67,10 @@ function DataSources() {
   const [recordCount, setRecordCount] = useState<number>(0)
   const [testing, setTesting] = useState(false)
   const [testResult, setTestResult] = useState<any>(null)
+  const builtinTableRegionRef = useRef<HTMLDivElement | null>(null)
+  const customTableRegionRef = useRef<HTMLDivElement | null>(null)
+  const [builtinTableHeight, setBuiltinTableHeight] = useState(360)
+  const [customTableHeight, setCustomTableHeight] = useState(360)
   const [form] = Form.useForm()
 
   const fetchData = async () => {
@@ -91,6 +95,28 @@ function DataSources() {
     fetchData()
   }, [])
 
+  useEffect(() => {
+    const updateHeights = () => {
+      const builtinRegionHeight = builtinTableRegionRef.current?.offsetHeight || 0
+      const customRegionHeight = customTableRegionRef.current?.offsetHeight || 0
+
+      setBuiltinTableHeight(Math.max(220, builtinRegionHeight - 56))
+      setCustomTableHeight(Math.max(220, customRegionHeight - 56))
+    }
+
+    updateHeights()
+
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined
+    }
+
+    const observer = new ResizeObserver(updateHeights)
+    if (builtinTableRegionRef.current) observer.observe(builtinTableRegionRef.current)
+    if (customTableRegionRef.current) observer.observe(customTableRegionRef.current)
+
+    return () => observer.disconnect()
+  }, [activeTab, builtInSources.length, customSources.length])
+
   useEffect(() => {
     const runningSources = builtInSources.filter(s => s.is_running)
     if (runningSources.length === 0) return
@@ -440,16 +466,21 @@ function DataSources() {
       key: 'builtin',
       label: '内置数据源',
       children: (
-        <Table
-          columns={builtinColumns}
-          dataSource={builtInSources}
-          rowKey="id"
-          loading={loading}
-          pagination={false}
-          scroll={{ x: 800, y: 'auto' }}
-          tableLayout="fixed"
-          size="small"
-        />
+        <div className="page-shell__body"> 
+          <div ref={builtinTableRegionRef} className="table-scroll-region data-source-table-region">
+            <Table
+              columns={builtinColumns}
+              dataSource={builtInSources}
+              rowKey="id"
+              loading={loading}
+              pagination={false}
+              scroll={{ x: 800, y: builtinTableHeight }}
+              tableLayout="fixed"
+              size="small"
+              virtual
+            />
+          </div>
+        </div>
       ),
     },
     {
@@ -460,35 +491,48 @@ function DataSources() {
         </span>
       ),
       children: (
-        <>
-          <div style={{ marginBottom: 16, textAlign: 'right' }}>
+        <div className="page-shell__body data-source-custom-tab">
+          <div className="data-source-custom-toolbar">
             <Button type="primary" icon={<PlusOutlined />} onClick={() => openDrawer()}>
               添加数据源
             </Button>
           </div>
           {customSources.length === 0 ? (
-            <Empty description="暂无自定义数据源" />
+            <div className="data-source-empty-state">
+              <Empty description="暂无自定义数据源" />
+            </div>
           ) : (
-            <Table
-              columns={customColumns}
-              dataSource={customSources}
-              rowKey="id"
-              loading={loading}
-              pagination={false}
-              scroll={{ x: 600, y: 'auto' }}
-              tableLayout="fixed"
-              size="small"
-            />
+            <div ref={customTableRegionRef} className="table-scroll-region data-source-table-region">
+              <Table
+                columns={customColumns}
+                dataSource={customSources}
+                rowKey="id"
+                loading={loading}
+                pagination={false}
+                scroll={{ x: 600, y: customTableHeight }}
+                tableLayout="fixed"
+                size="small"
+                virtual
+              />
+            </div>
           )}
-        </>
+        </div>
       ),
     },
   ]
 
   return (
     <AppLayout>
-      <h2>数据源管理</h2>
-      <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
+      <div className="page-shell">
+        <div className="page-shell__header">
+          <h2 style={{ margin: 0 }}>数据源管理</h2>
+        </div>
+        <div className="page-shell__body">
+          <div className="data-source-tabs-shell">
+            <Tabs className="data-source-tabs" activeKey={activeTab} onChange={setActiveTab} items={tabItems} />
+          </div>
+        </div>
+      </div>
 
       <Drawer
         title={editingConfig ? '编辑数据源' : '添加数据源'}