Skip to content

Commit 49b7323

Browse files
mlhitermlhiter
committed
style: style perf
1 parent d50b5d9 commit 49b7323

File tree

6 files changed

+135
-97
lines changed

6 files changed

+135
-97
lines changed

‎frontend/providers/devbox/components/Icon/icons/fileConfig.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎frontend/providers/devbox/components/Icon/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { IconProps } from '@chakra-ui/react'
2-
import { Icon } from '@chakra-ui/react'
1+
import type { IconProps } from '@chakra-ui/react';
2+
import { Icon } from '@chakra-ui/react';
33

44
const map = {
55
codeServer: require('./icons/codeServer.svg').default,
@@ -82,8 +82,9 @@ const map = {
8282
rubymine: require('./icons/jetbrains/rubymine.svg').default,
8383
rustover: require('./icons/jetbrains/rustover.svg').default,
8484
webstorm: require('./icons/jetbrains/webstorm.svg').default,
85-
gift: require('./icons/gift.svg').default
86-
}
85+
gift: require('./icons/gift.svg').default,
86+
fileConfig: require('./icons/fileConfig.svg').default
87+
};
8788

8889
const MyIcon = ({
8990
name,
@@ -93,7 +94,7 @@ const MyIcon = ({
9394
}: { name: keyof typeof map } & IconProps) => {
9495
return map[name] ? (
9596
<Icon as={map[name]} verticalAlign={'text-top'} fill={'currentColor'} w={w} h={h} {...props} />
96-
) : null
97-
}
97+
) : null;
98+
};
9899

99-
export default MyIcon
100+
export default MyIcon;

‎frontend/providers/devbox/components/ScriptCode.tsx‎

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,77 @@
1-
import { useState } from 'react'
2-
import { Box, Button, Collapse, Flex } from '@chakra-ui/react'
1+
import { useState } from 'react';
2+
import { Box, Button, Collapse, Flex } from '@chakra-ui/react';
33

4-
import MyIcon from './Icon'
5-
import Code from './Code'
6-
import { useCopyData } from '@/utils/tools'
4+
import MyIcon from './Icon';
5+
import Code from './Code';
6+
import { useCopyData } from '@/utils/tools';
77

88
const ScriptCode = ({
99
platform,
1010
script,
1111
defaultOpen = false,
1212
oneLine = false
1313
}: {
14-
platform: string
15-
script: string
16-
defaultOpen?: boolean
17-
oneLine?: boolean
14+
platform: string;
15+
script: string;
16+
defaultOpen?: boolean;
17+
oneLine?: boolean;
1818
}) => {
19-
const [onOpenScripts, setOnOpenScripts] = useState(defaultOpen)
19+
const [onOpenScripts, setOnOpenScripts] = useState(defaultOpen);
2020

21-
const { copyData } = useCopyData()
21+
const { copyData } = useCopyData();
2222

2323
return (
2424
<Flex
25-
bg={'grayModern.25'}
2625
p={2}
2726
borderRadius={'6px'}
2827
border={'1px solid'}
2928
borderColor={'grayModern.200'}
3029
flexDirection={oneLine ? 'row' : 'column'}
3130
w={'585px'}
32-
maxH={'300px'}>
31+
maxH={'300px'}
32+
sx={{
33+
'& .copy-button': {
34+
display: 'none'
35+
},
36+
'&:hover .copy-button': {
37+
display: 'flex'
38+
}
39+
}}
40+
>
3341
<Flex justifyContent={oneLine ? 'null' : 'space-between'} alignItems={'center'} w={'full'}>
34-
<Box>
35-
<Button
36-
onClick={() => setOnOpenScripts(!onOpenScripts)}
37-
bg={'transparent'}
38-
border={'none'}
39-
boxShadow={'none'}
40-
color={'grayModern.900'}
41-
fontWeight={400}
42-
_hover={{
43-
cursor: 'default'
44-
}}
45-
{...(!oneLine && {
46-
leftIcon: (
42+
{!oneLine && (
43+
<Box>
44+
<Button
45+
onClick={() => setOnOpenScripts(!onOpenScripts)}
46+
bg={'transparent'}
47+
border={'none'}
48+
boxShadow={'none'}
49+
color={'grayModern.900'}
50+
fontWeight={400}
51+
_hover={{
52+
cursor: 'default'
53+
}}
54+
leftIcon={
4755
<MyIcon
4856
name="arrowRight"
4957
color={'grayModern.500'}
5058
w={'16px'}
5159
transform={onOpenScripts ? 'rotate(90deg)' : 'rotate(0)'}
5260
transition="transform 0.2s ease"
5361
/>
54-
),
55-
_hover: {
56-
color: 'brightBlue.600',
57-
'& svg': {
58-
color: 'brightBlue.600'
59-
}
6062
}
61-
})}>
62-
{platform === 'Windows' ? 'PowerShell' : 'Bash'}
63-
</Button>
64-
</Box>
63+
>
64+
{platform === 'Windows' ? 'PowerShell' : 'Bash'}
65+
</Button>
66+
</Box>
67+
)}
6568
{oneLine && (
66-
<Box pt={2} overflowY={'auto'} h={'100%'}>
69+
<Box py={2} overflowY={'auto'} h={'100%'}>
6770
<Code content={script} language={platform === 'Windows' ? 'powershell' : 'bash'} />
6871
</Box>
6972
)}
7073
<Button
74+
className="copy-button"
7175
bg={'transparent'}
7276
border={'none'}
7377
{...(oneLine && {
@@ -81,7 +85,8 @@ const ScriptCode = ({
8185
'& svg': {
8286
color: 'brightBlue.600'
8387
}
84-
}}>
88+
}}
89+
>
8590
<MyIcon
8691
name="copy"
8792
color={'grayModern.600'}
@@ -98,7 +103,7 @@ const ScriptCode = ({
98103
</Collapse>
99104
)}
100105
</Flex>
101-
)
102-
}
106+
);
107+
};
103108

104-
export default ScriptCode
109+
export default ScriptCode;

‎frontend/providers/devbox/components/modals/SshConnectModal.tsx‎

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,13 @@ const SshConnectModal = ({
128128
scrollBehavior={'inside'}
129129
>
130130
<ModalOverlay />
131-
<ModalContent maxWidth={'800px'} w={'700px'} minH={'785px'} position={'relative'}>
131+
<ModalContent
132+
maxWidth={'800px'}
133+
w={'700px'}
134+
minH={'785px'}
135+
h={'785px'}
136+
position={'relative'}
137+
>
132138
<ModalHeader pl={10}>{t('jetbrains_guide_config_ssh')}</ModalHeader>
133139
<ModalCloseButton top={'10px'} right={'10px'} />
134140
<ModalBody pb={6} overflowY={'auto'}>
@@ -167,7 +173,46 @@ const SshConnectModal = ({
167173
>
168174
<StepStatus incomplete={<StepNumber />} />
169175
</StepIndicator>
170-
<Flex flexDirection={'column'} gap={12} mt={1} ml={2} mb={5} flex={1}>
176+
<Flex flexDirection={'column'} gap={6} mt={1} ml={2} mb={5} flex={1}>
177+
<Flex
178+
borderRadius={'6px'}
179+
p={2}
180+
h={'96px'}
181+
borderWidth={1}
182+
borderColor={'brightBlue.500'}
183+
flexDirection={'column'}
184+
alignItems={'center'}
185+
justifyContent={'center'}
186+
_hover={{
187+
bg: 'brightBlue.50'
188+
}}
189+
cursor={'pointer'}
190+
onClick={() => {
191+
if (script.platform === 'Windows') {
192+
downLoadBlob(
193+
script.script,
194+
'text/plain',
195+
`ssh-config-${jetbrainsGuideData.devboxName}.ps1`
196+
);
197+
} else {
198+
downLoadBlob(
199+
script.script,
200+
'text/plain',
201+
`ssh-config-${jetbrainsGuideData.devboxName}.sh`
202+
);
203+
}
204+
}}
205+
>
206+
<MyIcon
207+
name="fileConfig"
208+
color={'brightBlue.600'}
209+
w={'24px'}
210+
h={'24px'}
211+
/>
212+
<Text fontSize={'14px'} color={'brightBlue.600'} fontWeight={'500'}>
213+
{t('jetbrains_guide_click_to_download')}
214+
</Text>
215+
</Flex>
171216
<Box
172217
fontSize={'14px'}
173218
color={'grayModern.900'}
@@ -184,11 +229,6 @@ const SshConnectModal = ({
184229
>
185230
{chunks}
186231
</Text>
187-
),
188-
lightColor: (chunks) => (
189-
<Text color={'grayModern.600'} display={'inline-block'}>
190-
{chunks}
191-
</Text>
192232
)
193233
})
194234
: t.rich('jetbrains_guide_one_click_setup_desc', {
@@ -200,48 +240,23 @@ const SshConnectModal = ({
200240
>
201241
{chunks}
202242
</Text>
203-
),
204-
lightColor: (chunks) => (
205-
<Text color={'grayModern.600'} display={'inline-block'}>
206-
{chunks}
207-
</Text>
208243
)
209244
})}
210245
</Box>
211-
<Button
212-
leftIcon={<MyIcon name="download" color={'grayModern.500'} w={'16px'} />}
213-
bg={'white'}
214-
w={'fit-content'}
215-
size={'sm'}
216-
py={4}
217-
color={'grayModern.600'}
218-
border={'1px solid'}
219-
borderColor={'grayModern.200'}
220-
borderRadius={'6px'}
221-
_hover={{
222-
color: 'brightBlue.600',
223-
'& svg': {
224-
color: 'brightBlue.600'
225-
}
226-
}}
227-
onClick={() => {
228-
if (script.platform === 'Windows') {
229-
downLoadBlob(
230-
script.script,
231-
'text/plain',
232-
`ssh-config-${jetbrainsGuideData.devboxName}.ps1`
233-
);
234-
} else {
235-
downLoadBlob(
236-
script.script,
237-
'text/plain',
238-
`ssh-config-${jetbrainsGuideData.devboxName}.sh`
239-
);
240-
}
241-
}}
246+
<Box
247+
fontSize={'14px'}
248+
color={'grayModern.900'}
249+
fontWeight={400}
250+
lineHeight={'20px'}
242251
>
243-
{t('download_scripts')}
244-
</Button>
252+
{t.rich('jetbrains_guide_one_click_setup_desc_2', {
253+
lightColor: (chunks) => (
254+
<Text color={'grayModern.600'} display={'inline-block'}>
255+
{chunks}
256+
</Text>
257+
)
258+
})}
259+
</Box>
245260
<ScriptCode platform={script.platform} script={script.script} />
246261
</Flex>
247262
<StepSeparator />

‎frontend/providers/devbox/message/en.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@
121121
"jetbrains_guide_cancel": "Click to Cancel",
122122
"jetbrains_guide_check_ssh_connection": "Connection Verification",
123123
"jetbrains_guide_click_to_config": "Click the button below to <blue>configure SSH connection </blue>.",
124+
"jetbrains_guide_click_to_download": "Download the Script",
124125
"jetbrains_guide_command": "Open a terminal and type the following command to verify connection:",
125126
"jetbrains_guide_config_ssh": "Configure SSH Connection",
126127
"jetbrains_guide_confirm": "Setup Complete",
@@ -131,8 +132,9 @@
131132
"jetbrains_guide_modified_file": "Open <blue>~/.ssh/sealos/devbox_config</blue> and append the following content:",
132133
"jetbrains_guide_move_to_path": "Make sure the private key is in the following directory: <blue>~/.ssh/sealos/</blue>.",
133134
"jetbrains_guide_one_click_setup": "One-Click Setup",
134-
"jetbrains_guide_one_click_setup_desc": "Click the button below to download <blue>the bat/sh script</blue>. After downloading, <blue>simply double-click to run it</blue> to complete the SSH connection setup.<lightColor>(Alternatively, you can copy the script to a local file and execute it with a single click).</lightColor>",
135-
"jetbrains_guide_one_click_setup_desc_windows": "Click the button below to download <blue>the bat/sh script</blue>. After downloading, <blue>right click the file > Run with PowerShell</blue> to complete the SSH connection setup.<lightColor>(Alternatively, you can copy the script to a local file and execute it with a single click).</lightColor>",
135+
"jetbrains_guide_one_click_setup_desc": "Click the button below to download <blue>the bat/sh script</blue>,then <blue>simply double-click to run it</blue> to complete the SSH connection setup.",
136+
"jetbrains_guide_one_click_setup_desc_2": "<lightColor>Alternatively, you can copy the script below, paste it into your local terminal, and run it directly.</lightColor>",
137+
"jetbrains_guide_one_click_setup_desc_windows": "Click the button below to download <blue>the bat/sh script</blue>,then <blue>right click the file > Run with PowerShell</blue> to complete the SSH connection setup.",
136138
"jetbrains_guide_post_connection": "You can click the button below to view the user guide.",
137139
"jetbrains_guide_post_use": "Learn More",
138140
"jetbrains_guide_prepare": "Prerequiste(s)",

‎frontend/providers/devbox/message/zh.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@
123123
"jetbrains_guide_cancel": "点击取消",
124124
"jetbrains_guide_check_ssh_connection": "连接验证",
125125
"jetbrains_guide_click_to_config": "点击下方按钮，<blue>配置 SSH 连接信息</blue>。",
126+
"jetbrains_guide_click_to_download": "点击下载脚本",
126127
"jetbrains_guide_command": "打开命令行，输入以下命令来检测SSH连接是否正常：",
127128
"jetbrains_guide_config_ssh": "配置 SSH 连接信息",
128129
"jetbrains_guide_confirm": "配置完成",
@@ -133,8 +134,9 @@
133134
"jetbrains_guide_modified_file": "修改<blue> ~/.ssh/sealos/devbox_config</blue> 文件（如果不存在需要新建一个文件），在文件末尾追加：",
134135
"jetbrains_guide_move_to_path": "将下载好的私钥移动到目录：<blue>~/.ssh/sealos/</blue> 。",
135136
"jetbrains_guide_one_click_setup": "一键配置",
136-
"jetbrains_guide_one_click_setup_desc": "点击下方按钮 <blue>下载 bat/sh 脚本</blue>，下载到本地后<blue>直接双击运行</blue>即可完成 SSH 连接信息的配置<lightColor>（或者您也可以复制脚本到本地一个文件，然后一键执行）</lightColor>。",
137-
"jetbrains_guide_one_click_setup_desc_windows": "点击下方按钮 <blue>下载 bat/sh 脚本</blue>，下载到本地后<blue>右键点击文件 > 使用 PowerShell 运行</blue> 即可完成 SSH 连接信息的配置<lightColor>（或者您也可以复制脚本到本地一个文件，然后一键执行）</lightColor>。",
137+
"jetbrains_guide_one_click_setup_desc": "点击下方按钮 <blue>下载 bat/sh 脚本</blue>，下载到本地后<blue>直接双击运行</blue>即可完成 SSH 连接信息的配置。",
138+
"jetbrains_guide_one_click_setup_desc_windows": "点击下方按钮 <blue>下载 bat/sh 脚本</blue>，下载到本地后<blue>右键点击文件 > 使用 PowerShell 运行</blue> 即可完成 SSH 连接信息的配置。",
139+
"jetbrains_guide_one_click_setup_desc_2": "<lightColor>或者，您也可以复制下方脚本到本地命令行,然后直接执行。</lightColor>。",
138140
"jetbrains_guide_post_connection": "后续使用可点击下方按钮进行查看。",
139141
"jetbrains_guide_post_use": "后续使用",
140142
"jetbrains_guide_prepare": "前置准备",

0 commit comments

Comments
 (0)