feat: implement IPC handlers for service management and binary downloads

src/main/ipc/index.ts

@@ -141,7 +141,8 @@ export function registerIpcHandlers(): void {
                 }
 
                 const mysqlPort = mysqlId ? (settings.mysqlPorts?.[mysqlId] || '3306') : settings.mysqlPort
-                const logFile = path.join(app.getPath('userData'), 'logs', `${serviceName}_error.log`)
+                const sanitizedServiceName = serviceName.replace(/:/g, '_')
+                const logFile = path.join(app.getPath('userData'), 'logs', `${sanitizedServiceName}_error.log`)
 
                 const configPath = await configService.generateConfig('my.ini.template', `my_${mysqlId || 'default'}.ini`, {
                     PORT: mysqlPort,

src/main/services/MySqlManagerService.ts

@@ -46,7 +46,7 @@ export class MySqlManagerService {
             const catalog = JSON.parse(rawData)
             const releases = catalog.mysql_release_catalog.releases as any[]
 
-            const dynamicVersions: MySqlVersion[] = releases.map(v => {
+            const dynamicVersions: MySqlVersion[] = releases.map((v, index) => {
                 const version = v.version
                 const cycle = v.series
 
@@ -58,7 +58,8 @@ export class MySqlManagerService {
                 const url = `https://cdn.mysql.com/archives/mysql-${majorMinor}/mysql-${version}-winx64.zip`
 
                 const settings = configService.getSettings()
-                const customPort = settings.mysqlPorts?.[`mysql-${version}`] || '3306'
+                const defaultPort = (3306 + index).toString()
+                const customPort = settings.mysqlPorts?.[`mysql-${version}`] || defaultPort
 
                 return {
                     id: `mysql-${version}`,

src/renderer/src/App.tsx

@@ -622,7 +622,8 @@ function App(): JSX.Element {
                                                     {v.status === 'installed' && (
                                                         <TextField
                                                             label="Port"
-                                                            value={settings.mysqlPorts?.[v.id] || '3306'}
+                                                            value={settings.mysqlPorts?.[v.id] || ''}
+                                                            placeholder={v.port}
                                                             onChange={(e) => {
                                                                 const newPorts = { ...(settings.mysqlPorts || {}), [v.id]: e.target.value }
                                                                 setSettings({ ...settings, mysqlPorts: newPorts })
@@ -825,7 +826,7 @@ function App(): JSX.Element {
                                                 {getStatusChip(status[`mysql:${v.version}`] || 'stopped')}
                                             </Box>
                                             <Typography variant="h6" sx={{ fontWeight: 'bold' }}>MySQL {v.version}</Typography>
-                                            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.mysqlPorts?.[v.id] || '3306'}</Typography>
+                                            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.mysqlPorts?.[v.id] || v.port}</Typography>
                                             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                                                 <IconButton onClick={() => handleOpenLogs(`mysql:${v.version}`)} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}>
                                                     <TerminalIcon fontSize="small" />