@@ -65,6 +65,7 @@ const DraggableTab: React.FC<TabsProps & { onItemsChange?: (items: any[]) => voi | |||||
return ( | return ( | ||||
<Tabs | <Tabs | ||||
style={{ position: 'relative' }} | |||||
renderTabBar={(tabBarProps, DefaultTabBar) => ( | renderTabBar={(tabBarProps, DefaultTabBar) => ( | ||||
<DndContext sensors={[sensor]} onDragEnd={onDragEnd} modifiers={[restrictToHorizontalAxis]}> | <DndContext sensors={[sensor]} onDragEnd={onDragEnd} modifiers={[restrictToHorizontalAxis]}> | ||||
<SortableContext items={items.map((i) => i.key)} strategy={horizontalListSortingStrategy}> | <SortableContext items={items.map((i) => i.key)} strategy={horizontalListSortingStrategy}> | ||||
@@ -80,7 +81,7 @@ const DraggableTab: React.FC<TabsProps & { onItemsChange?: (items: any[]) => voi | |||||
)} | )} | ||||
{...props} | {...props} | ||||
items={items} | items={items} | ||||
tabBarStyle={{ marginBottom: 8 }} | |||||
tabBarStyle={{ marginBottom: 8, position: 'sticky', top: 0, zIndex: 997}} | |||||
className='tab-layout' | className='tab-layout' | ||||
/> | /> | ||||
); | ); | ||||
@@ -18,7 +18,6 @@ const Content: FC<any> = ({ children }) => { | |||||
style={{ | style={{ | ||||
borderRadius: '8px', | borderRadius: '8px', | ||||
marginLeft: collapsed ? 100 : defaultSetting.slideWidth, | marginLeft: collapsed ? 100 : defaultSetting.slideWidth, | ||||
minHeight: 'calc(100vh - 60px)', | |||||
transition: "all 200ms cubic-bezier(0.4, 0, 0.6, 1) 0ms", | transition: "all 200ms cubic-bezier(0.4, 0, 0.6, 1) 0ms", | ||||
width: `calc(100vw - ${isPC ? collapsed ? 100 : defaultSetting.slideWidth : 32}px)` | width: `calc(100vw - ${isPC ? collapsed ? 100 : defaultSetting.slideWidth : 32}px)` | ||||
}} | }} | ||||
@@ -73,8 +73,17 @@ const TabsLayout: React.FC = () => { | |||||
<div | <div | ||||
key={tab.key} | key={tab.key} | ||||
className='px-[16px]' | className='px-[16px]' | ||||
style={{ | |||||
height: 'calc(100vh - 107px)' | |||||
}} | |||||
> | > | ||||
{tab.children} | |||||
<div style={{ | |||||
height: '100%', | |||||
overflow: 'auto' | |||||
}}> | |||||
{tab.children} | |||||
</div> | |||||
</div> | </div> | ||||
), | ), | ||||
closable: tabs.length > 1, // 剩最后一个就不能删除了 | closable: tabs.length > 1, // 剩最后一个就不能删除了 | ||||