diff --git a/frontend/src/index.css b/frontend/src/index.css index 27d0a568..de1a1f0c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -340,6 +340,98 @@ body { min-width: 100%; } +.settings-shell, +.settings-tabs-shell, +.settings-tabs, +.settings-tabs .ant-tabs-content-holder, +.settings-tabs .ant-tabs-content, +.settings-tabs .ant-tabs-tabpane { + min-width: 0; + min-height: 0; + height: 100%; +} + +.settings-tabs-shell { + overflow: hidden; +} + +.settings-tabs { + display: flex; + flex-direction: column; +} + +.settings-tabs .ant-tabs-nav { + flex: 0 0 auto; + margin-bottom: 12px; +} + +.settings-tabs .ant-tabs-content-holder, +.settings-tabs .ant-tabs-content, +.settings-tabs .ant-tabs-tabpane { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.settings-tabs .ant-tabs-tabpane-hidden { + display: none !important; +} + +.settings-tab-panel { + flex: 1 1 auto; + min-width: 0; + min-height: 0; + height: 100%; + display: flex; + flex-direction: column; +} + +.settings-panel-card, +.settings-panel-card .ant-card-body { + min-width: 0; + min-height: 0; + height: 100%; +} + +.settings-panel-card { + flex: 1 1 auto; +} + +.settings-panel-card .ant-card-body { + display: flex; + flex-direction: column; + overflow: hidden; +} + +.settings-panel-scroll { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + padding-right: 6px; + scrollbar-gutter: stable; +} + +.settings-panel-scroll::-webkit-scrollbar { + width: 10px; +} + +.settings-panel-scroll::-webkit-scrollbar-thumb { + background: rgba(148, 163, 184, 0.8); + border-radius: 999px; + border: 2px solid transparent; + background-clip: padding-box; +} + +.settings-panel-scroll::-webkit-scrollbar-track { + background: transparent; +} + +.settings-table-scroll-region { + flex: 1 1 auto; + overflow: hidden; +} + diff --git a/frontend/src/pages/Settings/Settings.tsx b/frontend/src/pages/Settings/Settings.tsx index 5679ccb6..8bdf6a5c 100644 --- a/frontend/src/pages/Settings/Settings.tsx +++ b/frontend/src/pages/Settings/Settings.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { Button, Card, @@ -59,6 +59,8 @@ function Settings() { const [loading, setLoading] = useState(true) const [savingCollectorId, setSavingCollectorId] = useState(null) const [collectors, setCollectors] = useState([]) + const collectorTableRegionRef = useRef(null) + const [collectorTableHeight, setCollectorTableHeight] = useState(360) const [systemForm] = Form.useForm() const [notificationForm] = Form.useForm() const [securityForm] = Form.useForm() @@ -83,6 +85,24 @@ function Settings() { fetchSettings() }, []) + useEffect(() => { + const updateTableHeight = () => { + const regionHeight = collectorTableRegionRef.current?.offsetHeight || 0 + setCollectorTableHeight(Math.max(220, regionHeight - 56)) + } + + updateTableHeight() + + if (typeof ResizeObserver === 'undefined') { + return undefined + } + + const observer = new ResizeObserver(updateTableHeight) + if (collectorTableRegionRef.current) observer.observe(collectorTableRegionRef.current) + + return () => observer.disconnect() + }, [collectors.length]) + const saveSection = async (section: 'system' | 'notifications' | 'security', values: object) => { try { await axios.put(`/api/v1/settings/${section}`, values) @@ -219,115 +239,142 @@ function Settings() { return ( - -
- 系统配置中心 - 这一页现在已经直接连接数据库配置和采集调度,不再只是演示表单。 +
+
+
+ 系统配置中心 + 这一页现在已经直接连接数据库配置和采集调度,不再只是演示表单。 +
- -
saveSection('system', values)}> - - - - - - - - - - - - - - - - -
- - ), - }, - { - key: 'notifications', - label: '通知策略', - children: ( - -
saveSection('notifications', values)}> - - - - - - - - - - - - - - - - -
-
- ), - }, - { - key: 'security', - label: '安全策略', - children: ( - -
saveSection('security', values)}> - - - - - - - - + + + + + + + + + + + + + + +
+
+
- - ), - }, - ]} - /> -
+ ), + }, + { + key: 'notifications', + label: '通知策略', + children: ( +
+ +
+
saveSection('notifications', values)}> + + + + + + + + + + + + + + + + +
+
+
+
+ ), + }, + { + key: 'security', + label: '安全策略', + children: ( +
+ +
+
saveSection('security', values)}> + + + + + + + +