truncgit/multiphp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement MariaDB import/export wizards and dashboard UI components

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-03 16:07:31 +03:00
parent 0802e6cb9d
commit be1901afbf
5 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/Dashboard/DashboardDetails.tsx
+13 -13
View File
@@ -257,7 +257,7 @@ export default function DashboardDetails({
<Typography variant="caption" className="text-secondary font-semibold" sx={{ letterSpacing: 0.5 }}>İşlemci Kullanımı</Typography> <Typography variant="caption" className="text-secondary font-semibold" sx={{ letterSpacing: 0.5 }}>İşlemci Kullanımı</Typography>
<Typography variant="caption" color="primary.main" className="font-black">{cpu || 0}%</Typography> <Typography variant="caption" color="primary.main" className="font-black">{cpu || 0}%</Typography>
</Box> </Box>
<LinearProgress variant="determinate" value={cpu || 0} sx={{ height: 6, borderRadius: 'var(--border-radius-full)', bgcolor: 'rgba(255,255,255,0.05)', '.MuiLinearProgress-bar': { borderRadius: 'var(--border-radius-full)', background: 'linear-gradient(90deg, var(--color-primary), var(--color-secondary))' } }} /> <LinearProgress variant="determinate" value={cpu || 0} sx={{ height: 6, borderRadius: 'var(--radius-xl)', bgcolor: 'var(--color-bg-soft)', '.MuiLinearProgress-bar': { borderRadius: 'var(--radius-xl)', background: 'linear-gradient(90deg, var(--color-primary), var(--color-secondary))' } }} />
</Box> </Box>
<Box> <Box>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
@@ -266,7 +266,7 @@ export default function DashboardDetails({
{memory ? `${Math.round(memory / (1024 * 1024))} MB` : '0 MB'} {memory ? `${Math.round(memory / (1024 * 1024))} MB` : '0 MB'}
</Typography> </Typography>
</Box> </Box>
<LinearProgress variant="determinate" value={Math.min(((memory || 0) / (1024 * 1024) / 1024) * 100, 100)} sx={{ height: 6, borderRadius: 'var(--border-radius-full)', bgcolor: 'rgba(255,255,255,0.05)', '.MuiLinearProgress-bar': { borderRadius: 'var(--border-radius-full)', background: 'linear-gradient(90deg, var(--color-secondary), #E91E63)' } }} /> <LinearProgress variant="determinate" value={Math.min(((memory || 0) / (1024 * 1024) / 1024) * 100, 100)} sx={{ height: 6, borderRadius: 'var(--radius-xl)', bgcolor: 'var(--color-bg-soft)', '.MuiLinearProgress-bar': { borderRadius: 'var(--radius-xl)', background: 'linear-gradient(90deg, var(--color-secondary), var(--color-error))' } }} />
</Box> </Box>
</Box> </Box>
); );
@@ -274,8 +274,8 @@ export default function DashboardDetails({
const isPhp = serviceType === 'php'; const isPhp = serviceType === 'php';
return ( return (
<Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden', bgcolor: 'background.default' }}> <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden', bgcolor: 'var(--color-bg-dark)' }}>
<Box sx={{ p: 4, borderBottom: '1px solid rgba(255,255,255,0.05)', display: 'flex', alignItems: 'center', gap: 3 }}> <Box sx={{ p: 4, borderBottom: '1px solid var(--color-border-soft)', display: 'flex', alignItems: 'center', gap: 3 }}>
<Paper sx={{ p: 2, bgcolor: 'var(--color-bg-sidebar)', borderColor: 'var(--color-border-soft)' }} className="rounded-xl"> <Paper sx={{ p: 2, bgcolor: 'var(--color-bg-sidebar)', borderColor: 'var(--color-border-soft)' }} className="rounded-xl">
{serviceType === 'nginx' && <WebIcon color="primary" sx={{ fontSize: 'var(--font-size-4xl)' }} />} {serviceType === 'nginx' && <WebIcon color="primary" sx={{ fontSize: 'var(--font-size-4xl)' }} />}
{serviceType === 'apache' && <ServerIcon color="primary" sx={{ fontSize: 'var(--font-size-4xl)' }} />} {serviceType === 'apache' && <ServerIcon color="primary" sx={{ fontSize: 'var(--font-size-4xl)' }} />}
@@ -317,7 +317,7 @@ export default function DashboardDetails({
</Stack> </Stack>
</Box> </Box>
<Box sx={{ borderBottom: 1, borderColor: 'rgba(255,255,255,0.05)', px: 4, bgcolor: 'rgba(255,255,255,0.01)' }}> <Box sx={{ borderBottom: 1, borderColor: 'var(--color-border-soft)', px: 4, bgcolor: 'var(--color-bg-soft)' }}>
<Tabs value={activeTab} onChange={(_e, v) => setActiveTab(v)} textColor="primary" indicatorColor="primary" sx={{ <Tabs value={activeTab} onChange={(_e, v) => setActiveTab(v)} textColor="primary" indicatorColor="primary" sx={{
'.MuiTab-root': { textTransform: 'none', minHeight: 48 } '.MuiTab-root': { textTransform: 'none', minHeight: 48 }
}} className="font-bold text-sm"> }} className="font-bold text-sm">
@@ -339,7 +339,7 @@ export default function DashboardDetails({
<Typography variant="body2" className="font-black text-sm" sx={{ mb: 1.5, color: 'primary.main', display: 'flex', alignItems: 'center', gap: 1 }}> <Typography variant="body2" className="font-black text-sm" sx={{ mb: 1.5, color: 'primary.main', display: 'flex', alignItems: 'center', gap: 1 }}>
<StatusIcon sx={{ fontSize: 'var(--font-size-base)' }} /> {t('dashboard.system_stats', 'Sistem İstatistikleri')} <StatusIcon sx={{ fontSize: 'var(--font-size-base)' }} /> {t('dashboard.system_stats', 'Sistem İstatistikleri')}
</Typography> </Typography>
<Paper sx={{ p: 2, bgcolor: 'rgba(255,255,255,0.02)', borderRadius: 3, border: '1px solid rgba(255,255,255,0.05)' }}> <Paper sx={{ p: 2, bgcolor: 'var(--color-bg-soft)', borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border-soft)' }}>
<ResourceMonitor cpu={currentStatus.cpu} memory={currentStatus.memory} /> <ResourceMonitor cpu={currentStatus.cpu} memory={currentStatus.memory} />
</Paper> </Paper>
</Grid> </Grid>
@@ -391,7 +391,7 @@ export default function DashboardDetails({
</Button> </Button>
</Box> </Box>
<Paper sx={{ flexGrow: 1, bgcolor: '#1a1a1a', borderRadius: 4, border: '1px solid rgba(255,255,255,0.05)', overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: '60vh' }}> <Paper sx={{ flexGrow: 1, bgcolor: 'black', borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border-soft)', overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: '60vh' }}>
{isLoadingConfig ? ( {isLoadingConfig ? (
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: 1 }}><CircularProgress /></Box> <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: 1 }}><CircularProgress /></Box>
) : ( ) : (
@@ -426,7 +426,7 @@ export default function DashboardDetails({
{t('common.save').toUpperCase()} {t('common.save').toUpperCase()}
</Button> </Button>
</Box> </Box>
<Paper sx={{ flexGrow: 1, bgcolor: '#1a1a1a', borderRadius: 4, border: '1px solid rgba(255,255,255,0.05)', overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: '60vh' }}> <Paper sx={{ flexGrow: 1, bgcolor: 'black', borderRadius: 'var(--radius-lg)', border: '1px solid var(--color-border-soft)', overflow: 'hidden', display: 'flex', flexDirection: 'column', minHeight: '60vh' }}>
{isLoadingConfig ? ( {isLoadingConfig ? (
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: 1 }}><CircularProgress /></Box> <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexGrow: 1 }}><CircularProgress /></Box>
) : ( ) : (
@@ -446,10 +446,10 @@ export default function DashboardDetails({
)} )}
{activeTab === 'logs' && ( {activeTab === 'logs' && (
<Box sx={{ bgcolor: '#0b0e11', borderRadius: 4, p: 3, height: '65vh', overflowY: 'auto', border: '1px solid rgba(255,255,255,0.05)', boxShadow: 'inset 0 0 20px rgba(0,0,0,0.5)' }}> <Box sx={{ bgcolor: 'var(--color-bg-medium)', borderRadius: 'var(--radius-lg)', p: 3, height: '65vh', overflowY: 'auto', border: '1px solid var(--color-border-soft)', boxShadow: 'inset 0 0 20px rgba(0,0,0,0.5)' }}>
<Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1.5, color: 'rgba(255,255,255,0.3)' }}> <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 1.5, color: 'var(--color-text-muted)' }}>
<LogIcon fontSize="small" /> <LogIcon fontSize="small" />
<Typography variant="caption" sx={{ fontWeight: 700, letterSpacing: 1 }}>Gerçek Zamanlı Servis Logları</Typography> <Typography variant="caption" className="font-bold" sx={{ letterSpacing: 1 }}>Gerçek Zamanlı Servis Logları</Typography>
</Box> </Box>
{logs.length === 0 ? ( {logs.length === 0 ? (
<Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.2 }}> <Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.2 }}>
@@ -459,8 +459,8 @@ export default function DashboardDetails({
logs.map((log, i) => ( logs.map((log, i) => (
<Typography key={i} sx={{ <Typography key={i} sx={{
fontFamily: '"Fira Code", monospace', fontFamily: '"Fira Code", monospace',
fontSize: '0.85rem', fontSize: 'var(--font-size-xs)',
color: log.toLowerCase().includes('error') ? '#ff5252' : (log.toLowerCase().includes('warn') ? '#ffb142' : '#33d9b2'), color: log.toLowerCase().includes('error') ? 'var(--color-error)' : (log.toLowerCase().includes('warn') ? 'var(--color-warning)' : 'var(--color-success)'),
mb: 0.8, mb: 0.8,
lineHeight: 1.5, lineHeight: 1.5,
opacity: 0.9 opacity: 0.9
src/renderer/src/components/Dashboard/DashboardSidebar.tsx
+7 -7
View File
@@ -50,8 +50,8 @@ export default function DashboardSidebar({
onClick={() => setSelectedServiceId(id)} onClick={() => setSelectedServiceId(id)}
sx={{ sx={{
mb: 0.5, mb: 0.5,
border: selectedServiceId === id ? '1px solid rgba(57, 167, 255, 0.3)' : '1px solid transparent', border: selectedServiceId === id ? '1px solid var(--color-primary-soft)' : '1px solid transparent',
'&.Mui-selected': { bgcolor: 'rgba(57, 167, 255, 0.08)' } '&.Mui-selected': { bgcolor: 'var(--color-primary-soft)' }
}} }}
className="rounded-md" className="rounded-md"
> >
@@ -71,8 +71,8 @@ export default function DashboardSidebar({
width: 10, width: 10,
height: 10, height: 10,
borderRadius: '50%', borderRadius: '50%',
bgcolor: isStarting ? 'warning.main' : (isRunning ? 'success.main' : 'error.main'), bgcolor: isStarting ? 'var(--color-warning)' : (isRunning ? 'var(--color-success)' : 'var(--color-error)'),
boxShadow: isRunning ? '0 0 8px rgba(76, 175, 80, 0.5)' : (isStarting ? '0 0 8px rgba(255, 177, 66, 0.5)' : 'none'), boxShadow: isRunning ? '0 0 8px var(--color-success-soft)' : (isStarting ? '0 0 8px var(--color-warning-soft)' : 'none'),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@@ -108,7 +108,7 @@ export default function DashboardSidebar({
</Box> </Box>
<Box sx={{ p: 1.5 }}> <Box sx={{ p: 1.5 }}>
<Typography variant="caption" className="font-semibold" sx={{ px: 1, color: 'primary.main', mb: 1, display: 'block', opacity: 0.8 }}> <Typography variant="caption" className="font-semibold text-primary" sx={{ px: 1, mb: 1, display: 'block', opacity: 0.8 }}>
Web Sunucuları Web Sunucuları
</Typography> </Typography>
<List dense disablePadding sx={{ mb: 3 }}> <List dense disablePadding sx={{ mb: 3 }}>
@@ -116,7 +116,7 @@ export default function DashboardSidebar({
<ServiceItem id="apache" label="Apache" icon={ServerIcon} serviceKey="apache" /> <ServiceItem id="apache" label="Apache" icon={ServerIcon} serviceKey="apache" />
</List> </List>
<Typography variant="caption" sx={{ px: 1, color: 'primary.main', fontWeight: 600, mb: 1, display: 'block', opacity: 0.8 }}> <Typography variant="caption" className="font-semibold text-primary" sx={{ px: 1, mb: 1, display: 'block', opacity: 0.8 }}>
PHP Sürümleri PHP Sürümleri
</Typography> </Typography>
<List dense disablePadding sx={{ mb: 3 }}> <List dense disablePadding sx={{ mb: 3 }}>
@@ -131,7 +131,7 @@ export default function DashboardSidebar({
))} ))}
</List> </List>
<Typography variant="caption" sx={{ px: 1, color: 'primary.main', fontWeight: 600, mb: 1, display: 'block', opacity: 0.8 }}> <Typography variant="caption" className="font-semibold text-primary" sx={{ px: 1, mb: 1, display: 'block', opacity: 0.8 }}>
Veritabanı Sürümleri Veritabanı Sürümleri
</Typography> </Typography>
<List dense disablePadding> <List dense disablePadding>
src/renderer/src/components/MariaDbExportWizard.tsx
+12 -12
View File
@@ -220,19 +220,19 @@ const MariaDbExportWizard: React.FC<MariaDbExportWizardProps> = ({ open, onClose
{!exportResult ? ( {!exportResult ? (
<> <>
<Paper sx={{ p: 2, bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-md"> <Paper sx={{ p: 2, bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-md">
<Typography variant="subtitle2" color="primary" className="font-bold">{t('mariadb.import.summary')}</Typography> <Typography variant="subtitle2" sx={{ color: 'var(--color-primary)' }} className="font-bold text-md">{t('mariadb.import.summary')}</Typography>
<Divider sx={{ my: 1, opacity: 0.05 }} /> <Divider sx={{ my: 1, opacity: 0.05 }} />
<Stack spacing={1}> <Stack spacing={1}>
<Typography variant="body2"><strong>{t('mariadb.import.server')}:</strong> {selectedVersion}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.server')}:</strong> {selectedVersion}</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.db')}:</strong> {selectedDb}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.db')}:</strong> {selectedDb}</Typography>
<Typography variant="body2"><strong>{t('mariadb.export.target')}:</strong> {savePath}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.export.target')}:</strong> {savePath}</Typography>
<Typography variant="body2"><strong>{t('mariadb.export.compression')}:</strong> {compress ? t('mariadb.export.on') : t('mariadb.export.off')}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.export.compression')}:</strong> {compress ? t('mariadb.export.on') : t('mariadb.export.off')}</Typography>
</Stack> </Stack>
</Paper> </Paper>
{loading && ( {loading && (
<Box sx={{ mt: 3, p: 2, bgcolor: 'var(--color-bg-medium)', maxHeight: '200px', overflowY: 'auto', fontFamily: 'monospace' }} className="rounded-md border-soft"> <Box sx={{ mt: 3, p: 2, bgcolor: 'var(--color-bg-medium)', maxHeight: '200px', overflowY: 'auto', fontFamily: 'monospace' }} className="rounded-md border-soft">
{logs.map((log, i) => ( {logs.map((log, i) => (
<Typography key={i} variant="caption" sx={{ display: 'block', color: log.includes('error') ? 'error.main' : 'success.main' }}> <Typography key={i} variant="caption" sx={{ display: 'block', color: log.includes('error') ? 'var(--color-error)' : 'var(--color-success)' }} className="text-xs">
{log} {log}
</Typography> </Typography>
))} ))}
@@ -244,9 +244,9 @@ const MariaDbExportWizard: React.FC<MariaDbExportWizardProps> = ({ open, onClose
<Box sx={{ textAlign: 'center', py: 3 }}> <Box sx={{ textAlign: 'center', py: 3 }}>
{exportResult.success ? ( {exportResult.success ? (
<> <>
<SuccessIcon color="success" sx={{ fontSize: 60 }} /> <SuccessIcon sx={{ color: 'var(--color-success)', fontSize: 'var(--font-size-4xl)' }} />
<Typography variant="h6" sx={{ mt: 2 }}>{t('mariadb.import.success_title')}</Typography> <Typography variant="h6" className="font-black text-xl" sx={{ mt: 2 }}>{t('mariadb.import.success_title')}</Typography>
<Typography variant="body2" color="text.secondary">{exportResult.message}</Typography> <Typography variant="body2" className="text-secondary">{exportResult.message}</Typography>
<Button <Button
variant="outlined" variant="outlined"
sx={{ mt: 3 }} sx={{ mt: 3 }}
@@ -257,9 +257,9 @@ const MariaDbExportWizard: React.FC<MariaDbExportWizardProps> = ({ open, onClose
</> </>
) : ( ) : (
<> <>
<ErrorIcon color="error" sx={{ fontSize: 60 }} /> <ErrorIcon sx={{ color: 'var(--color-error)', fontSize: 'var(--font-size-4xl)' }} />
<Typography variant="h6" sx={{ mt: 2 }}>{t('mariadb.import.error_title')}</Typography> <Typography variant="h6" className="font-black text-xl" sx={{ mt: 2 }}>{t('mariadb.import.error_title')}</Typography>
<Typography variant="body2" color="error">{exportResult.message}</Typography> <Typography variant="body2" sx={{ color: 'var(--color-error)' }} className="text-sm">{exportResult.message}</Typography>
</> </>
)} )}
</Box> </Box>
src/renderer/src/components/MariaDbImportWizard.tsx
+20 -20
View File
@@ -261,19 +261,19 @@ const MariaDbImportWizard: React.FC<MariaDbImportWizardProps> = ({ open, onClose
{!importResult ? ( {!importResult ? (
<> <>
<Paper sx={{ p: 2, bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-md"> <Paper sx={{ p: 2, bgcolor: 'var(--color-bg-soft)', border: '1px solid var(--color-border-soft)' }} className="rounded-md">
<Typography variant="subtitle2" color="primary" className="font-bold">{t('mariadb.import.summary')}</Typography> <Typography variant="subtitle2" sx={{ color: 'var(--color-primary)' }} className="font-bold text-md">{t('mariadb.import.summary')}</Typography>
<Divider sx={{ my: 1, opacity: 0.05 }} /> <Divider sx={{ my: 1, opacity: 0.05 }} />
<Stack spacing={1}> <Stack spacing={1}>
<Typography variant="body2"><strong>{t('mariadb.import.file')}:</strong> {filePath.split(/[/\\]/).pop()}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.file')}:</strong> {filePath.split(/[/\\]/).pop()}</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.server')}:</strong> {selectedVersion}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.server')}:</strong> {selectedVersion}</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.db')}:</strong> {dbConfig.dbName}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.db')}:</strong> {dbConfig.dbName}</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.user')}:</strong> {dbConfig.user}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.user')}:</strong> {dbConfig.user}</Typography>
</Stack> </Stack>
</Paper> </Paper>
{loading && ( {loading && (
<Box sx={{ mt: 3, p: 2, bgcolor: 'var(--color-bg-medium)', maxHeight: '200px', overflowY: 'auto', fontFamily: 'monospace' }} className="rounded-md border-soft"> <Box sx={{ mt: 3, p: 2, bgcolor: 'var(--color-bg-medium)', maxHeight: '200px', overflowY: 'auto', fontFamily: 'monospace' }} className="rounded-md border-soft">
{logs.map((log, i) => ( {logs.map((log, i) => (
<Typography key={i} variant="caption" sx={{ display: 'block', color: log.includes('fail') ? 'error.main' : 'success.main' }}> <Typography key={i} variant="caption" sx={{ display: 'block', color: log.includes('fail') ? 'var(--color-error)' : 'var(--color-success)' }} className="text-xs">
{log} {log}
</Typography> </Typography>
))} ))}
@@ -285,24 +285,24 @@ const MariaDbImportWizard: React.FC<MariaDbImportWizardProps> = ({ open, onClose
<Box sx={{ textAlign: 'center', py: 3 }}> <Box sx={{ textAlign: 'center', py: 3 }}>
{importResult.success ? ( {importResult.success ? (
<> <>
<SuccessIcon color="success" sx={{ fontSize: 60 }} /> <SuccessIcon sx={{ color: 'var(--color-success)', fontSize: 'var(--font-size-4xl)' }} />
<Typography variant="h6" sx={{ mt: 2 }}>{t('mariadb.import.success_title')}</Typography> <Typography variant="h6" className="font-black text-xl" sx={{ mt: 2 }}>{t('mariadb.import.success_title')}</Typography>
<Typography variant="body2" color="text.secondary">{importResult.message}</Typography> <Typography variant="body2" className="text-secondary">{importResult.message}</Typography>
<Paper sx={{ p: 2, mt: 3, textAlign: 'left', bgcolor: 'rgba(0,180,0,0.1)', border: '1px solid rgba(0,180,0,0.2)' }} className="rounded-md"> <Paper sx={{ p: 2.5, mt: 3, textAlign: 'left', bgcolor: 'var(--color-success-soft)', border: '1px solid var(--color-success-soft)' }} className="rounded-lg">
<Typography variant="caption" className="font-bold">{t('mariadb.import.access_info')}:</Typography> <Typography variant="caption" className="font-black text-xs" sx={{ color: 'var(--color-success)', display: 'block', mb: 1, textTransform: 'uppercase' }}>{t('mariadb.import.access_info')}:</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.host')}:</strong> localhost</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.host')}:</strong> localhost</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.db')}:</strong> {dbConfig.dbName}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.db')}:</strong> {dbConfig.dbName}</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.user')}:</strong> {dbConfig.user}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.user')}:</strong> {dbConfig.user}</Typography>
<Typography variant="body2"><strong>{t('mariadb.import.db_pass')}:</strong> {dbConfig.pass}</Typography> <Typography variant="body2" className="text-sm"><strong>{t('mariadb.import.db_pass')}:</strong> {dbConfig.pass}</Typography>
</Paper> </Paper>
</> </>
) : ( ) : (
<> <>
<ErrorIcon color="error" sx={{ fontSize: 60 }} /> <ErrorIcon sx={{ color: 'var(--color-error)', fontSize: 'var(--font-size-4xl)' }} />
<Typography variant="h6" sx={{ mt: 2 }}>{t('mariadb.import.error_title')}</Typography> <Typography variant="h6" className="font-black text-xl" sx={{ mt: 2 }}>{t('mariadb.import.error_title')}</Typography>
<Typography variant="body2" color="error">{importResult.message}</Typography> <Typography variant="body2" sx={{ color: 'var(--color-error)' }} className="text-sm">{importResult.message}</Typography>
<Box sx={{ mt: 2, textAlign: 'left', bgcolor: '#000', p: 1, maxHeight: 150, overflowY: 'auto' }}> <Box sx={{ mt: 2, textAlign: 'left', bgcolor: 'black', p: 1, maxHeight: 150, overflowY: 'auto' }} className="rounded-md border-soft">
{logs.slice(-5).map((l, i) => <Typography key={i} variant="caption" sx={{ color: '#fff', display: 'block' }}>{l}</Typography>)} {logs.slice(-5).map((l, i) => <Typography key={i} variant="caption" sx={{ color: 'white', display: 'block' }} className="text-2xs font-mono">{l}</Typography>)}
</Box> </Box>
</> </>
)} )}
src/renderer/src/components/UserGuide.tsx
+8 -8
View File
@@ -216,7 +216,7 @@ const UserGuide = () => {
sx={{ sx={{
mt: level === 1 ? 0 : 4, mt: level === 1 ? 0 : 4,
mb: 2, mb: 2,
color: level === 1 ? 'primary.light' : '#fff', color: level === 1 ? 'var(--color-primary)' : 'white',
borderBottom: level === 1 ? '1px solid var(--color-border-soft)' : 'none', borderBottom: level === 1 ? '1px solid var(--color-border-soft)' : 'none',
pb: level === 1 ? 1 : 0 pb: level === 1 ? 1 : 0
}} }}
@@ -317,14 +317,14 @@ const UserGuide = () => {
}} }}
sx={{ sx={{
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
bgcolor: 'rgba(0,0,0,0.2)', bgcolor: 'var(--color-bg-medium)',
borderRadius: 2, borderRadius: 'var(--radius-md)',
'& fieldset': { borderColor: 'rgba(255,255,255,0.05)' }, '& fieldset': { borderColor: 'var(--color-border-soft)' },
} }
}} }}
/> />
</Box> </Box>
<Typography variant="overline" sx={{ px: 2, pt: 1, display: 'block', color: 'primary.main', fontWeight: 800 }}> <Typography variant="overline" className="font-black text-primary" sx={{ px: 2, pt: 1, display: 'block' }}>
{t('common.topics', 'KONULAR')} {t('common.topics', 'KONULAR')}
</Typography> </Typography>
<List sx={{ pt: 1, flexGrow: 1, overflowY: 'auto' }}> <List sx={{ pt: 1, flexGrow: 1, overflowY: 'auto' }}>
@@ -336,9 +336,9 @@ const UserGuide = () => {
sx={{ sx={{
py: 1.5, py: 1.5,
borderLeft: '3px solid', borderLeft: '3px solid',
borderColor: selectedTopic === topic.file ? 'primary.main' : 'transparent', borderColor: selectedTopic === topic.file ? 'var(--color-primary)' : 'transparent',
bgcolor: selectedTopic === topic.file ? 'rgba(57, 167, 255, 0.05)' : 'transparent', bgcolor: selectedTopic === topic.file ? 'var(--color-primary-soft)' : 'transparent',
'&:hover': { bgcolor: 'rgba(255,255,255,0.05)' } '&:hover': { bgcolor: 'var(--color-bg-soft)' }
}} }}
> >
<ListItemText <ListItemText