vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新Company页面的UI为FUI风格

Browse Source
This commit is contained in:
zzlgreat
2025-12-17 22:22:44 +08:00
parent 0d150f7b26
commit 3adff89995
6 changed files with 228 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/SubTabContainer/index.tsx
View File

@@ -61,11 +61,11 @@ export interface SubTabTheme {
const THEME_PRESETS: Record<string, SubTabTheme> = {
blackGold: {
bg: 'transparent',
borderColor: 'rgba(212, 175, 55, 0.2)',
tabSelectedBg: 'linear-gradient(135deg, #D4AF37 0%, #B8960C 100%)',
borderColor: 'rgba(212, 175, 55, 0.15)',
tabSelectedBg: 'linear-gradient(135deg, rgba(212, 175, 55, 0.95) 0%, rgba(184, 150, 12, 0.95) 100%)',
tabSelectedColor: '#0A0A14',
tabUnselectedColor: 'rgba(212, 175, 55, 0.8)',
tabHoverBg: 'rgba(212, 175, 55, 0.1)',
tabUnselectedColor: 'rgba(212, 175, 55, 0.75)',
tabHoverBg: 'rgba(212, 175, 55, 0.12)',
},
default: {
bg: 'white',
@@ -162,11 +162,11 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
bg={theme.bg}
borderBottom="1px solid"
borderColor={theme.borderColor}
pl={0}
pr={2}
py={1.5}
pl={2}
pr={4}
py={3}
flexWrap="nowrap"
gap={1}
gap={2}
alignItems="center"
overflowX="auto"
css={{
@@ -178,29 +178,51 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
<Tab
key={tab.key}
color={theme.tabUnselectedColor}
borderRadius="full"
px={3}
py={1.5}
fontSize="xs"
borderRadius="md"
px={5}
py={2.5}
fontSize="sm"
fontWeight="500"
whiteSpace="nowrap"
flexShrink={0}
border="1px solid transparent"
transition="all 0.2s cubic-bezier(0.4, 0, 0.2, 1)"
position="relative"
letterSpacing="0.05em"
transition="all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
_before={{
content: '""',
position: 'absolute',
bottom: '-1px',
left: '50%',
transform: 'translateX(-50%)',
width: '0%',
height: '2px',
bg: '#D4AF37',
transition: 'width 0.25s ease',
}}
_selected={{
bg: theme.tabSelectedBg,
color: theme.tabSelectedColor,
fontWeight: 'bold',
boxShadow: '0 0 12px rgba(212, 175, 55, 0.4)',
border: '1px solid rgba(212, 175, 55, 0.5)',
fontWeight: '700',
boxShadow: '0 4px 16px rgba(212, 175, 55, 0.35), 0 0 20px rgba(212, 175, 55, 0.15)',
border: '1px solid rgba(212, 175, 55, 0.6)',
transform: 'translateY(-1px)',
_before: {
width: '80%',
},
}}
_hover={{
bg: theme.tabHoverBg,
border: '1px solid rgba(212, 175, 55, 0.3)',
border: '1px solid rgba(212, 175, 55, 0.35)',
transform: 'translateY(-1px)',
_before: {
width: '60%',
},
}}
>
<HStack spacing={1.5}>
{tab.icon && <Icon as={tab.icon} boxSize={3.5} />}
<Text letterSpacing="wide">{tab.name}</Text>
<HStack spacing={2}>
{tab.icon && <Icon as={tab.icon} boxSize={4} />}
<Text>{tab.name}</Text>
</HStack>
</Tab>
))}