Merge pull request #130 from chaitin/line-number

添加行号 + docker run 命令转 docker compose 文件

package.json

@@ -49,6 +49,7 @@
     "big-integer": "^1.6.52",
     "change-case": "^5.3.0",
     "clean-css": "^5.3.3",
+    "composerize-ts": "^0.6.2",
     "compressorjs": "^1.2.1",
     "crypto-js": "^4.2.0",
     "css2less": "^0.1.4",

src/components/MainContent/index.tsx

@@ -40,6 +40,7 @@ const MainContent: React.FC<{
         dom.style.inset = '0';
         dom.style.maxWidth = '100vw';
         dom.style.background = '#fff';
+        dom.style.padding = '84px 14px 14px 14px';
         if (riverHeader) riverHeader.style.display = 'none';
       }
     });
@@ -62,8 +63,8 @@ const MainContent: React.FC<{
           dom.style.position = 'unset';
           dom.style.inset = '0';
           dom.style.maxWidth = 'unset';
+          dom.style.padding = '0';
           if (riverHeader) {
-            dom.style.paddingTop = '64px';
             riverHeader.style.display = 'block';
           }
         }

src/pages/docker_run_to_docker_compose.tsx

@@ -0,0 +1,74 @@
+import MainContent from '@/components/MainContent';
+import TextFieldWithClean from '@/components/TextFieldWithClean';
+import { ToolsForm } from '@/components/Tools';
+import { saveFile } from '@/utils/download';
+import { Button, Stack, TextField } from '@mui/material';
+import { composerize } from 'composerize-ts';
+import React, { useState } from 'react';
+
+const DockerRunToDockerCompose: React.FC = () => {
+  const [dockerRun, setDockerRun] = useState<string>(
+    'docker run -p 8080:80 -d --name myapp nginx'
+  );
+  const [dockerCompose, setDockerCompose] = useState<string>('');
+  const conversionResult = () => {
+    const res = composerize(dockerRun.trim()).yaml;
+    setDockerCompose(res);
+  };
+  const handleSaveFile = () => {
+    saveFile(dockerCompose, 'docker-compose.yml');
+  };
+  return (
+    <MainContent>
+      <ToolsForm sx={{ width: '100%' }}>
+        <TextFieldWithClean
+          multiline
+          minRows={4}
+          value={dockerRun}
+          onChange={(event) => setDockerRun(event.target.value)}
+          placeholder='请输入docker run命令'
+          onClean={() => {
+            setDockerRun('');
+            setDockerCompose('');
+          }}
+          variant='outlined'
+        />
+        <Stack direction='row' spacing={2} alignItems='center'>
+          <Button
+            size='small'
+            sx={{
+              fontSize: '14px',
+              width: '90',
+              borderRadius: '4px',
+              ml: 'auto',
+              height: '28px',
+            }}
+            color='primary'
+            variant='contained'
+            onClick={conversionResult}
+          >
+            转换
+          </Button>
+          <Button
+            size='small'
+            sx={{
+              fontSize: '14px',
+              width: '90',
+              borderRadius: '4px',
+              ml: 'auto',
+              height: '28px',
+            }}
+            color='primary'
+            variant='contained'
+            onClick={handleSaveFile}
+          >
+            导出 YAML
+          </Button>
+        </Stack>
+        <TextField multiline variant='filled' value={dockerCompose} />
+      </ToolsForm>
+    </MainContent>
+  );
+};
+
+export default DockerRunToDockerCompose;