style: 子 Tab 紧凑模式,移除多余边距
- SubTabContainer: 添加 compact 属性 - 移除 TabList 的 mx/mb 外边距 - 移除圆角和阴影 - 减小垂直内边距 - BasicInfoTab: 启用 compact 模式,移除 Card 包裹 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -134,6 +134,8 @@ export interface SubTabContainerProps {
|
||||
isLazy?: boolean;
|
||||
/** TabList 右侧自定义内容 */
|
||||
rightElement?: React.ReactNode;
|
||||
/** 紧凑模式 - 移除 TabList 的外边距 */
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
||||
@@ -147,6 +149,7 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
||||
contentPadding = 4,
|
||||
isLazy = true,
|
||||
rightElement,
|
||||
compact = false,
|
||||
}) => {
|
||||
// 内部状态(非受控模式)
|
||||
const [internalIndex, setInternalIndex] = useState(defaultIndex);
|
||||
@@ -201,17 +204,17 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
|
||||
sx={{ WebkitBackdropFilter: 'blur(20px)' }}
|
||||
borderBottom="1px solid"
|
||||
borderColor={theme.borderColor}
|
||||
borderRadius={DEEP_SPACE.radiusLG}
|
||||
mx={2}
|
||||
mb={2}
|
||||
borderRadius={compact ? 0 : DEEP_SPACE.radiusLG}
|
||||
mx={compact ? 0 : 2}
|
||||
mb={compact ? 0 : 2}
|
||||
px={3}
|
||||
py={3}
|
||||
py={compact ? 2 : 3}
|
||||
flexWrap="nowrap"
|
||||
gap={2}
|
||||
alignItems="center"
|
||||
overflowX="auto"
|
||||
position="relative"
|
||||
boxShadow={DEEP_SPACE.innerGlow}
|
||||
boxShadow={compact ? 'none' : DEEP_SPACE.innerGlow}
|
||||
css={{
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
scrollbarWidth: 'none',
|
||||
|
||||
Reference in New Issue
Block a user