opensource/sealos
3
0
Fork 0
mirror of https://github.com/labring/sealos.git synced 2026-09-01 15:38:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

style&fix(devbox): ui adjust and network refetch bug (#5490)

Browse Source 
* fix: refetch cache bug

* style: ide button

* fix(devbox): adjust network icon
This commit is contained in:
Alex Lee
2025-03-18 16:11:28 +08:00
committed by GitHub
parent cb98417117
commit c4aa267680
3 changed files with 76 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/providers/devbox/app/[lang]/(platform)/devbox/detail/[name]/components/MainBody.tsx
+4 -20
View File
@@ -58,8 +58,7 @@ const MainBody = () => {
}, delay);
}
},
refetchIntervalInBackground: false,
staleTime: 1000 * 60 * 5
refetchIntervalInBackground: false
});
const statusMap = useMemo(
@@ -143,7 +142,7 @@ const MainBody = () => {
bg={'rgba(3, 152, 85, 0.05)'}
color={'#039855'}
borderRadius={'full'}
p={'2px 8px 2px 4px'}
p={'2px 8px 2px 8px'}
gap={'2px'}
minW={'63px'}
>
@@ -163,24 +162,9 @@ const MainBody = () => {
bg={'rgba(17, 24, 36, 0.05)'}
color={'#485264'}
borderRadius={'full'}
p={'2px 8px 2px 4px'}
p={'2px 8px 2px 8px'}
>
<MyIcon
name={'loadingCircle'}
w={'12px'}
h={'12px'}
animation={'spin 1s linear infinite'}
sx={{
'@keyframes spin': {
'0%': {
transform: 'rotate(0deg)'
},
'100%': {
transform: 'rotate(360deg)'
}
}
}}
/>
<MyIcon name={'help'} w={'18px'} h={'18px'} />
<Text fontSize={'12px'} w={'full'} color={'#485264'}>
{t('prepare')}
</Text>
frontend/providers/devbox/app/api/checkReady/route.ts
+1 -2
View File
@@ -2,8 +2,7 @@ import { devboxKey } from '@/constants/devbox';
import { authSession } from '@/services/backend/auth';
import { getK8s } from '@/services/backend/kubernetes';
import { jsonRes } from '@/services/backend/response';
import { ProtocolType } from '@/types/devbox';
import { NextRequest, NextResponse } from 'next/server';
import { NextRequest } from 'next/server';
export const dynamic = 'force-dynamic';
frontend/providers/devbox/components/IDEButton.tsx
+71 -47
View File
@@ -191,66 +191,79 @@ const IDEButton = ({
fontSize={'12px'}
defaultValue={currentIDE}
p={'6px'}
w={'186px'}
px={'4px'}
w={'210px'}
display={'flex'}
flexDirection={'column'}
gap={'4px'}
gap={'2px'}
>
{menuItems.map((item) => {
if (item.group === 'trae') {
return (
<Flex key={item.value} gap={'4px'}>
{item.options?.map((option) => (
<MenuItem
h={'30px'}
w={'90px'}
borderRadius={'4px'}
bg={'grayModern.50'}
key={option.value}
value={option.value}
onClick={() => {
updateDevboxIDE(option.value as IDEType, devboxName);
handleGotoIDE(option.value as IDEType);
}}
_hover={{
bg: 'grayModern.150',
borderRadius: 4
}}
_focus={{
bg: '#1118240D',
borderRadius: 4
}}
{...(currentIDE === option.value && {
bg: 'grayModern.50',
borderWidth: '1px',
borderColor: 'brightBlue.500',
color: 'brightBlue.600'
})}
>
<Flex alignItems="center" w={'100%'}>
<MyIcon name="trae" w={'16px'} mr={'6px'} />
<Text whiteSpace="nowrap" mr={'2px'}>
{option.menuLabel}
</Text>
</Flex>
</MenuItem>
{item.options?.map((option, index) => (
<Flex key={option.value} alignItems={'center'}>
<MenuItem
h={'32px'}
{...(index === 0 && {
pl: '8px',
pr: '4px',
w: '80px'
})}
{...(index === 1 && {
pr: '8px',
w: '110px'
})}
borderRadius={'4px'}
value={option.value}
onClick={() => {
updateDevboxIDE(option.value as IDEType, devboxName);
handleGotoIDE(option.value as IDEType);
}}
_hover={{
bg: 'grayModern.100',
borderRadius: 4
}}
_focus={{
bg: '#1118240D',
borderRadius: 4
}}
{...(currentIDE === option.value && {
color: 'brightBlue.600'
})}
>
<Flex alignItems="center" w={'100%'}>
<MyIcon name="trae" w={'16px'} mr={'6px'} />
<Text whiteSpace="nowrap" mr={'2px'} fontWeight={500}>
{option.menuLabel}
</Text>
{currentIDE === option.value && (
<MyIcon name="check" w={'12px'} ml={'6px'} />
)}
</Flex>
</MenuItem>
{index === 0 && (
<Box h={'12px'} w={'2px'} bg={'grayModern.200'} ml={'4px'}></Box>
)}
</Flex>
))}
</Flex>
);
} else {
return (
<MenuItem
h={'32px'}
w={'100%'}
p={'6px'}
borderRadius={'4px'}
key={item.value}
value={item.value}
bg={'grayModern.50'}
fontWeight={500}
onClick={() => {
updateDevboxIDE(item.value as IDEType, devboxName);
handleGotoIDE(item.value as IDEType);
}}
_hover={{
bg: 'grayModern.150',
bg: 'grayModern.100',
borderRadius: 4
}}
_focus={{
@@ -258,17 +271,28 @@ const IDEButton = ({
borderRadius: 4
}}
{...(currentIDE === item.value && {
bg: 'grayModern.50',
borderWidth: '1px',
borderColor: 'brightBlue.500',
color: 'brightBlue.600'
})}
>
<Flex alignItems="center" w={'100%'}>
<MyIcon name={getIconName(item.value as IDEType)} w={'16px'} mr={'6px'} />
<Text whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" mr={'4px'}>
{item?.menuLabel}
</Text>
<Flex
alignItems="center"
w={'100%'}
p={'7px 2px'}
justifyContent={'space-between'}
>
<Flex alignItems={'center'}>
<MyIcon name={getIconName(item.value as IDEType)} w={'16px'} mr={'6px'} />
<Text
whiteSpace="nowrap"
overflow="hidden"
textOverflow="ellipsis"
mr={'4px'}
fontWeight={500}
>
{item?.menuLabel}
</Text>
</Flex>
{currentIDE === item.value && <MyIcon name="check" w={'12px'} />}
</Flex>
</MenuItem>
);