@@ -32,86 +32,90 @@ const ProfileCard: React.FC = () => {
32
32
const total = extra ?. total ?? 0
33
33
34
34
return (
35
- < Card
36
- fullWidth
37
- className = { `mb-2 ${ match ? 'bg-primary' : '' } ` }
38
- isPressable
39
- onPress = { ( ) => navigate ( '/profiles' ) }
40
- >
35
+ < >
41
36
{ showRuntimeConfig && < ConfigViewer onClose = { ( ) => setShowRuntimeConfig ( false ) } /> }
42
- < CardBody className = "pb-1" >
43
- < div className = "flex justify-between h-[32px]" >
44
- < h3
45
- className = { `select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${ match ? 'text-white' : 'text-foreground' } ` }
46
- >
47
- { info ?. name }
48
- </ h3 >
49
- < div className = "flex" >
50
- < Button
51
- isIconOnly
52
- size = "sm"
53
- title = "查看当前运行时配置"
54
- variant = "light"
55
- color = "default"
56
- onPress = { ( ) => {
57
- setShowRuntimeConfig ( true )
58
- } }
37
+ < Card
38
+ fullWidth
39
+ className = { `mb-2 ${ match ? 'bg-primary' : '' } ` }
40
+ isPressable
41
+ onPress = { ( ) => navigate ( '/profiles' ) }
42
+ >
43
+ < CardBody className = "pb-1" >
44
+ < div className = "flex justify-between h-[32px]" >
45
+ < h3
46
+ className = { `select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${ match ? 'text-white' : 'text-foreground' } ` }
59
47
>
60
- < CgLoadbarDoc className = { `text-[24px] ${ match ? 'text-white' : 'text-foreground' } ` } />
61
- </ Button >
62
- { info . type === 'remote' && (
48
+ { info ?. name }
49
+ </ h3 >
50
+ < div className = "flex" >
63
51
< Button
64
52
isIconOnly
65
53
size = "sm"
66
- disabled = { updating }
54
+ title = "查看当前运行时配置"
67
55
variant = "light"
68
56
color = "default"
69
57
onPress = { ( ) => {
70
- setUpdating ( true )
71
- addProfileItem ( info ) . finally ( ( ) => {
72
- setUpdating ( false )
73
- } )
58
+ setShowRuntimeConfig ( true )
74
59
} }
75
60
>
76
- < IoMdRefresh
77
- className = { `text-[24px] ${ match ? 'text-white' : 'text-foreground' } ${ updating ? 'animate-spin' : '' } ` }
61
+ < CgLoadbarDoc
62
+ className = { `text-[24px] ${ match ? 'text-white' : 'text-foreground' } ` }
78
63
/>
79
64
</ Button >
80
- ) }
65
+ { info . type === 'remote' && (
66
+ < Button
67
+ isIconOnly
68
+ size = "sm"
69
+ disabled = { updating }
70
+ variant = "light"
71
+ color = "default"
72
+ onPress = { ( ) => {
73
+ setUpdating ( true )
74
+ addProfileItem ( info ) . finally ( ( ) => {
75
+ setUpdating ( false )
76
+ } )
77
+ } }
78
+ >
79
+ < IoMdRefresh
80
+ className = { `text-[24px] ${ match ? 'text-white' : 'text-foreground' } ${ updating ? 'animate-spin' : '' } ` }
81
+ />
82
+ </ Button >
83
+ ) }
84
+ </ div >
81
85
</ div >
82
- </ div >
83
- { info . type === 'remote' && (
84
- < div
85
- className = { `mt-2 flex select-none justify-between ${ match ? 'text-white' : 'text-foreground' } ` }
86
- >
87
- < small > { extra ? `${ calcTraffic ( usage ) } /${ calcTraffic ( total ) } ` : undefined } </ small >
88
- < small > { dayjs ( info . updated ) . fromNow ( ) } </ small >
89
- </ div >
90
- ) }
91
- { info . type === 'local' && (
92
- < div
93
- className = { `mt-2 flex select-none justify-between ${ match ? 'text-white' : 'text-foreground' } ` }
94
- >
95
- < Chip
96
- size = "sm"
97
- variant = "bordered"
98
- className = { `${ match ? 'text-white border-white' : 'border-primary text-primary' } ` }
86
+ { info . type === 'remote' && (
87
+ < div
88
+ className = { `mt-2 flex select-none justify-between ${ match ? 'text-white' : 'text-foreground' } ` }
99
89
>
100
- 本地
101
- </ Chip >
102
- </ div >
103
- ) }
104
- </ CardBody >
105
- < CardFooter className = "pt-0" >
106
- { extra && (
107
- < Progress
108
- className = "w-full"
109
- classNames = { { indicator : match ? 'bg-white' : 'bg-foreground' , label : 'select-none' } }
110
- value = { calcPercent ( extra ?. upload , extra ?. download , extra ?. total ) }
111
- />
112
- ) }
113
- </ CardFooter >
114
- </ Card >
90
+ < small > { extra ? `${ calcTraffic ( usage ) } /${ calcTraffic ( total ) } ` : undefined } </ small >
91
+ < small > { dayjs ( info . updated ) . fromNow ( ) } </ small >
92
+ </ div >
93
+ ) }
94
+ { info . type === 'local' && (
95
+ < div
96
+ className = { `mt-2 flex select-none justify-between ${ match ? 'text-white' : 'text-foreground' } ` }
97
+ >
98
+ < Chip
99
+ size = "sm"
100
+ variant = "bordered"
101
+ className = { `${ match ? 'text-white border-white' : 'border-primary text-primary' } ` }
102
+ >
103
+ 本地
104
+ </ Chip >
105
+ </ div >
106
+ ) }
107
+ </ CardBody >
108
+ < CardFooter className = "pt-0" >
109
+ { extra && (
110
+ < Progress
111
+ className = "w-full"
112
+ classNames = { { indicator : match ? 'bg-white' : 'bg-foreground' , label : 'select-none' } }
113
+ value = { calcPercent ( extra ?. upload , extra ?. download , extra ?. total ) }
114
+ />
115
+ ) }
116
+ </ CardFooter >
117
+ </ Card >
118
+ </ >
115
119
)
116
120
}
117
121
0 commit comments