修复表格样式

This commit is contained in:
whyour 2024-08-30 00:30:31 +08:00
parent a3044f9d29
commit a48d100b2d
3 changed files with 70 additions and 56 deletions

View File

@ -240,7 +240,7 @@ const Dependence = () => {
const [isLogModalVisible, setIsLogModalVisible] = useState(false); const [isLogModalVisible, setIsLogModalVisible] = useState(false);
const [type, setType] = useState('nodejs'); const [type, setType] = useState('nodejs');
const tableRef = useRef<HTMLDivElement>(null); const tableRef = useRef<HTMLDivElement>(null);
const tableScrollHeight = useTableScrollHeight(tableRef, 59); const tableScrollHeight = useTableScrollHeight(tableRef, 162);
const getDependencies = (status?: number[]) => { const getDependencies = (status?: number[]) => {
setLoading(true); setLoading(true);
@ -528,46 +528,7 @@ const Dependence = () => {
setType(activeKey); setType(activeKey);
}; };
return ( const children = (
<PageContainer
className="ql-container-wrapper dependence-wrapper ql-container-wrapper-has-tab"
title={intl.get('依赖管理')}
extra={[
<Search
placeholder={intl.get('请输入名称')}
style={{ width: 'auto' }}
enterButton
loading={loading}
onSearch={onSearch}
/>,
<Button key="2" type="primary" onClick={() => addDependence()}>
{intl.get('创建依赖')}
</Button>,
]}
header={{
style: headerStyle,
}}
>
<Tabs
defaultActiveKey="nodejs"
size="small"
tabPosition="top"
onChange={onTabChange}
items={[
{
key: 'nodejs',
label: 'NodeJs',
},
{
key: 'python3',
label: 'Python3',
},
{
key: 'linux',
label: 'Linux',
},
]}
/>
<div ref={tableRef}> <div ref={tableRef}>
{selectedRowIds.length > 0 && ( {selectedRowIds.length > 0 && (
<div style={{ marginBottom: 16 }}> <div style={{ marginBottom: 16 }}>
@ -615,6 +576,53 @@ const Dependence = () => {
/> />
</DndProvider> </DndProvider>
</div> </div>
);
return (
<PageContainer
className="ql-container-wrapper dependence-wrapper ql-container-wrapper-has-tab"
title={intl.get('依赖管理')}
extra={[
<Search
placeholder={intl.get('请输入名称')}
style={{ width: 'auto' }}
enterButton
loading={loading}
onSearch={onSearch}
/>,
<Button key="2" type="primary" onClick={() => addDependence()}>
{intl.get('创建依赖')}
</Button>,
]}
header={{
style: headerStyle,
}}
>
<Tabs
defaultActiveKey="nodejs"
size="small"
tabPosition="top"
style={{ height: '100%' }}
destroyInactiveTabPane
onChange={onTabChange}
items={[
{
key: 'nodejs',
label: 'NodeJs',
children,
},
{
key: 'python3',
label: 'Python3',
children,
},
{
key: 'linux',
label: 'Linux',
children,
},
]}
/>
<DependenceModal <DependenceModal
visible={isModalVisible} visible={isModalVisible}
handleCancel={handleCancel} handleCancel={handleCancel}

View File

@ -129,9 +129,9 @@ const Setting = () => {
const [height, setHeight] = useState<number>(0); const [height, setHeight] = useState<number>(0);
useResizeObserver(containergRef, (entry) => { useResizeObserver(containergRef, (entry) => {
const _height = entry.target.parentElement?.parentElement?.offsetHeight; const _height = (entry.target as HTMLElement)?.offsetHeight;
if (_height && height !== _height - 110) { if (_height && height !== _height - 101) {
setHeight(_height - 110); setHeight(_height - 101);
} }
}); });
@ -329,7 +329,7 @@ const Setting = () => {
dataSource={dataSource} dataSource={dataSource}
rowKey="id" rowKey="id"
size="middle" size="middle"
scroll={{ x: 1000 }} scroll={{ x: 1000, y: height }}
loading={loading} loading={loading}
/> />
), ),
@ -347,7 +347,7 @@ const Setting = () => {
{ {
key: 'login', key: 'login',
label: intl.get('登录日志'), label: intl.get('登录日志'),
children: <LoginLog data={loginLogData} />, children: <LoginLog height={height} data={loginLogData} />,
}, },
{ {
key: 'dependence', key: 'dependence',

View File

@ -67,7 +67,14 @@ const columns = [
}, },
]; ];
const LoginLog = ({ data }: any) => { const LoginLog = ({
data,
height,
}: {
data: Array<object>;
height: number;
}) => {
console.log(height);
return ( return (
<> <>
<Table <Table
@ -76,8 +83,7 @@ const LoginLog = ({ data }: any) => {
dataSource={data} dataSource={data}
rowKey="id" rowKey="id"
size="middle" size="middle"
scroll={{ x: 1000 }} scroll={{ x: 1000, y: height }}
sticky
/> />
</> </>
); );