feat: implement main application dashboard with service management and project configuration UI
This commit is contained in:
+19
-14
@@ -746,8 +746,20 @@ function App(): JSX.Element {
|
|||||||
backdropFilter: 'blur(10px)'
|
backdropFilter: 'blur(10px)'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Toolbar sx={{ gap: 2 }}>
|
<Toolbar sx={{ gap: 1 }}>
|
||||||
<FormControl size="small" variant="outlined" sx={{ minWidth: 120 }}>
|
<Box sx={{ flexGrow: 1 }} />
|
||||||
|
<Tooltip title={t('dashboard.start_all')}>
|
||||||
|
<IconButton color="inherit" onClick={handleStartAll} sx={{ '&:hover': { color: 'success.main' } }}>
|
||||||
|
<StartIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title={t('dashboard.stop_all')}>
|
||||||
|
<IconButton color="inherit" onClick={handleStopAll} sx={{ '&:hover': { color: 'error.main' } }}>
|
||||||
|
<StopIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Tooltip>
|
||||||
|
<Divider orientation="vertical" flexItem sx={{ mx: 1, borderColor: 'rgba(255,255,255,0.1)' }} />
|
||||||
|
<FormControl size="small" variant="outlined" sx={{ minWidth: 80 }}>
|
||||||
<Select
|
<Select
|
||||||
value={i18n.language}
|
value={i18n.language}
|
||||||
onChange={handleLanguageChange}
|
onChange={handleLanguageChange}
|
||||||
@@ -755,8 +767,10 @@ function App(): JSX.Element {
|
|||||||
IconComponent={LanguageIcon}
|
IconComponent={LanguageIcon}
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: 'white',
|
||||||
'.MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.3)' },
|
height: '35px',
|
||||||
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.5)' },
|
fontSize: '0.8rem',
|
||||||
|
'.MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.2)' },
|
||||||
|
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.4)' },
|
||||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main' },
|
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main' },
|
||||||
'.MuiSelect-icon': { color: 'white' }
|
'.MuiSelect-icon': { color: 'white' }
|
||||||
}}
|
}}
|
||||||
@@ -768,7 +782,7 @@ function App(): JSX.Element {
|
|||||||
))}
|
))}
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
<IconButton color="inherit" onClick={() => setActiveTab('settings')}>
|
<IconButton color="inherit" onClick={() => setActiveTab('settings')} sx={{ ml: 1 }}>
|
||||||
<SettingsIcon />
|
<SettingsIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
@@ -1281,15 +1295,6 @@ function App(): JSX.Element {
|
|||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
|
||||||
<Button variant="contained" fullWidth startIcon={<StartIcon />} size="large" onClick={handleStartAll} sx={{ borderRadius: 2, padding: '12px', background: 'linear-gradient(45deg, #153E5E 30%, #4A7CA3 90%)', boxShadow: '0 3px 5px 2px rgba(21, 62, 94, .3)' }}>
|
|
||||||
{t('common.start')}
|
|
||||||
</Button>
|
|
||||||
<Button variant="outlined" fullWidth startIcon={<StopIcon />} size="large" color="error" onClick={handleStopAll} sx={{ borderRadius: 2, padding: '12px', borderWidth: 2, '&:hover': { borderWidth: 2 } }}>
|
|
||||||
{t('common.stop')}
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user