From 98295e38ef930e53d434c41ae9c4d800ad544668 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= Date: Mon, 30 Mar 2026 07:41:51 +0300 Subject: [PATCH] feat: add Nginx configuration editor component and integrate it into the main application interface --- package-lock.json | 28 +++++++++ package.json | 3 + src/renderer/src/App.tsx | 49 +++------------- .../src/components/NginxCodeEditor.tsx | 57 +++++++++++++++++++ 4 files changed, 95 insertions(+), 42 deletions(-) create mode 100644 src/renderer/src/components/NginxCodeEditor.tsx diff --git a/package-lock.json b/package-lock.json index a93e91f..4160e63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,15 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^6.0.0", "@mui/material": "^6.0.0", + "@types/prismjs": "^1.26.6", "axios": "^1.14.0", "decompress": "^4.2.1", "i18next": "^23.1.0", + "prismjs": "^1.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^13.0.0", + "react-simple-code-editor": "^0.14.1", "sweetalert2": "^11.26.24" }, "devDependencies": { @@ -2478,6 +2481,12 @@ "xmlbuilder": ">=11.0.1" } }, + "node_modules/@types/prismjs": { + "version": "1.26.6", + "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.6.tgz", + "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==", + "license": "MIT" + }, "node_modules/@types/prop-types": { "version": "15.7.15", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", @@ -7778,6 +7787,15 @@ "node": ">=6.0.0" } }, + "node_modules/prismjs": { + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", + "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -7949,6 +7967,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-simple-code-editor": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz", + "integrity": "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index 9fba9b7..a71018c 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,15 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^6.0.0", "@mui/material": "^6.0.0", + "@types/prismjs": "^1.26.6", "axios": "^1.14.0", "decompress": "^4.2.1", "i18next": "^23.1.0", + "prismjs": "^1.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^13.0.0", + "react-simple-code-editor": "^0.14.1", "sweetalert2": "^11.26.24" }, "devDependencies": { diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 83d00d2..a1f3f67 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -64,7 +64,6 @@ import { OpenInNew as OpenIcon, Edit as EditIcon, Folder as FolderIcon, - Storage as MySQLIcon, Language as HostIcon, Launch as LaunchIcon, Handyman as ToolsIcon, @@ -73,6 +72,7 @@ import { import Swal from 'sweetalert2' import { useTranslation } from 'react-i18next' import MySqlImportWizard from './components/MySqlImportWizard' +import NginxCodeEditor from './components/NginxCodeEditor' declare global { interface Window { @@ -108,7 +108,6 @@ function App(): JSX.Element { const [phpVersions, setPhpVersions] = useState([]) const [mySqlVersions, setMySqlVersions] = useState([]) const [nginxVersions, setNginxVersions] = useState([]) - const [loadingVersions, setLoadingVersions] = useState(false) const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false) const slugify = (text: string) => text.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, ''); const [newProject, setNewProject] = useState({ name: '', path: '', phpVersion: '', mySqlVersion: '', host: 'localhost' }) @@ -187,14 +186,6 @@ function App(): JSX.Element { } } - const handleRefreshVersions = async () => { - setLoadingVersions(true) - try { - await Promise.all([fetchPhpVersions(), fetchMySqlVersions(), fetchNginxVersions()]) - } finally { - setLoadingVersions(false) - } - } useEffect(() => { if (isProjectDialogOpen && !newProject.id) { @@ -671,7 +662,7 @@ function App(): JSX.Element { Gereken PHP sürümlerini buradan indirebilir ve yönetebilirsiniz. - {phpVersions.length === 0 && !loadingVersions && ( + {phpVersions.length === 0 && ( )} {phpVersions.map((v) => ( @@ -712,7 +703,7 @@ function App(): JSX.Element { Farklı MySQL sürümlerini indirebilir ve sunucunuzda kullanabilirsiniz. - {mySqlVersions.length === 0 && !loadingVersions && ( + {mySqlVersions.length === 0 && ( )} {mySqlVersions.map((v) => ( @@ -1417,22 +1408,9 @@ function App(): JSX.Element { Dikkat: Hatalı yapılandırma Nginx'in çalışmasını durdurabilir. Değişiklik yapmadan önce test edin. - setNginxConfig(e.target.value)} - sx={{ - '& .MuiInputBase-root': { - fontFamily: 'monospace', - fontSize: '0.875rem', - color: '#fff' - }, - '& .MuiOutlinedInput-notchedOutline': { - borderColor: 'rgba(255,255,255,0.1)' - } - }} + onChange={(val) => setNginxConfig(val)} /> @@ -1481,22 +1459,9 @@ function App(): JSX.Element { İpucu: Bu yapılandırma sadece {selectedProjectHost} projesi için geçerlidir. - setProjectNginxConfig(e.target.value)} - sx={{ - '& .MuiInputBase-root': { - fontFamily: 'monospace', - fontSize: '0.875rem', - color: '#fff' - }, - '& .MuiOutlinedInput-notchedOutline': { - borderColor: 'rgba(255,255,255,0.1)' - } - }} + onChange={(val) => setProjectNginxConfig(val)} /> diff --git a/src/renderer/src/components/NginxCodeEditor.tsx b/src/renderer/src/components/NginxCodeEditor.tsx new file mode 100644 index 0000000..0807655 --- /dev/null +++ b/src/renderer/src/components/NginxCodeEditor.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import Editor from 'react-simple-code-editor' +import Prism from 'prismjs' +import 'prismjs/components/prism-nginx' +import 'prismjs/themes/prism-tomorrow.css' + +interface NginxCodeEditorProps { + value: string + onChange: (value: string) => void +} + +const NginxCodeEditor: React.FC = ({ value, onChange }) => { + return ( +
+ onChange(code)} + highlight={code => Prism.highlight(code, Prism.languages.nginx, 'nginx')} + padding={15} + style={{ + fontFamily: '"Fira code", "Fira Mono", monospace', + fontSize: 14, + minHeight: '400px', + outline: 'none' + }} + textareaClassName="nginx-editor-textarea" + preClassName="nginx-editor-pre" + /> + +
+ ) +} + +export default NginxCodeEditor