Merge pull request #148 from KuaiYu95/fe-ui

feat: 优化排版
chaitin · Aug 6, 2024 · 9f5dd70 · 9f5dd70
2 parents 3a7cb92 + 7bd6977
commit 9f5dd70
Show file tree

Hide file tree

Showing 5 changed files with 217 additions and 234 deletions.
diff --git a/src/pages/css_minifier.tsx b/src/pages/css_minifier.tsx
@@ -1,10 +1,10 @@
-import MainContent from '@/components/MainContent';
 import alert from '@/components/Alert';
+import MainContent from '@/components/MainContent';
 import { Box, Button, Checkbox, Stack, Typography } from '@mui/material';
+import CleanCSS, { type Options } from 'clean-css';
 import { useCallback, useEffect, useState } from 'react';
 import AceEditor from 'react-ace';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import CleanCSS, { type Options } from 'clean-css';
 
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/mode-css';
@@ -91,103 +91,94 @@ const _C = () => {
         }}
       >
         <Stack
-          sx={{ mb: 1 }}
-          justifyContent={'center'}
-          direction={'row'}
-          spacing={2}
+          direction='row'
+          alignItems='center'
+          justifyContent='space-between'
+          sx={{ width: '100%', mb: 2 }}
         >
-          <Stack
-            direction='row'
-            alignItems='center'
-            justifyContent='space-between'
-            sx={{ width: '100%' }}
-          >
-            <Typography sx={{ fontSize: '14px' }}>CSS 内容</Typography>
-            <Box>
-              <Button size='small' onClick={() => setValue('')}>
-                清空
-              </Button>
-              <Button
+          <Typography sx={{ fontSize: '14px' }}>CSS 内容</Typography>
+          <Box>
+            <Button size='small' onClick={() => setValue('')}>
+              清空
+            </Button>
+            <Button
+              size='small'
+              variant='outlined'
+              onClick={handleButtonClick}
+              sx={{ borderRadius: '4px', ml: 1 }}
+            >
+              上传 CSS
+            </Button>
+          </Box>
+        </Stack>
+        <AceEditor
+          name='a'
+          fontSize={16}
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            height: '400px',
+          }}
+          value={value}
+          mode='css'
+          theme='monokai'
+          onChange={setValue}
+          editorProps={{ $blockScrolling: true }}
+        />
+        <Stack
+          direction='row'
+          alignItems='center'
+          justifyContent='space-between'
+          sx={{ width: '100%', my: 2 }}
+        >
+          <Stack direction='row' alignItems='center'>
+            <Typography sx={{ fontSize: '14px' }}>压缩结果</Typography>
+            <Box ml={1}>
+              <Checkbox
                 size='small'
-                variant='outlined'
-                onClick={handleButtonClick}
-                sx={{ borderRadius: '4px', ml: 1 }}
+                checked={Boolean(keepBreaks)}
+                onChange={(event: any) => setKeepBreaks(event.target.checked)}
+              />
+              <Typography
+                component='span'
+                sx={{ fontSize: '14px', lineHeight: '38px' }}
               >
-                上传 CSS
-              </Button>
+                压缩保留换行
+              </Typography>
             </Box>
           </Stack>
-          <Stack
-            direction='row'
-            alignItems='center'
-            justifyContent='space-between'
-            sx={{ width: '100%' }}
-          >
-            <Stack direction='row' alignItems='center'>
-              <Typography sx={{ fontSize: '14px' }}>压缩结果</Typography>
-              <Box ml={1}>
-                <Checkbox
-                  size='small'
-                  checked={Boolean(keepBreaks)}
-                  onChange={(event: any) => setKeepBreaks(event.target.checked)}
-                />
-                <Typography
-                  component='span'
-                  sx={{ fontSize: '14px', lineHeight: '38px' }}
-                >
-                  压缩保留换行
-                </Typography>
-              </Box>
-            </Stack>
-            <Box>
-              <CopyToClipboard text={result} onCopy={handleClick}>
-                <Button size='small' disabled={!result}>
-                  复制
-                </Button>
-              </CopyToClipboard>
-              <Button
-                size='small'
-                variant='contained'
-                disabled={!!error || !result}
-                onClick={handleDownloadResult}
-                sx={{ borderRadius: '4px', ml: 1 }}
-              >
-                导出
+          <Box>
+            <CopyToClipboard text={result} onCopy={handleClick}>
+              <Button size='small' disabled={!result}>
+                复制
               </Button>
-            </Box>
-          </Stack>
-        </Stack>
-        <Stack direction={'row'} spacing={3}>
-          <AceEditor
-            name='a'
-            fontSize={16}
-            style={{
-              width: '100%',
-              borderRadius: '4px',
-              height: 'calc(100vh - 265px)',
-            }}
-            value={value}
-            mode='css'
-            theme='monokai'
-            onChange={setValue}
-            editorProps={{ $blockScrolling: true }}
-          />
-          <AceEditor
-            name='b'
-            fontSize={16}
-            style={{
-              width: '100%',
-              borderRadius: '4px',
-              height: 'calc(100vh - 265px)',
-            }}
-            wrapEnabled={!keepBreaks}
-            value={error || result}
-            mode='css'
-            theme='monokai'
-            readOnly
-            editorProps={{ $blockScrolling: true }}
-          />
+            </CopyToClipboard>
+            <Button
+              size='small'
+              variant='contained'
+              disabled={!!error || !result}
+              onClick={handleDownloadResult}
+              sx={{ borderRadius: '4px', ml: 1 }}
+            >
+              导出
+            </Button>
+          </Box>
         </Stack>
+        <AceEditor
+          name='b'
+          fontSize={16}
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            height: '400px',
+          }}
+          wrapEnabled={!keepBreaks}
+          value={error || result}
+          mode='css'
+          theme='monokai'
+          readOnly
+          editorProps={{ $blockScrolling: true }}
+        />
         <Box
           component={'input'}
           id='fileInput'

diff --git a/src/pages/json2js.tsx b/src/pages/json2js.tsx
@@ -1,14 +1,14 @@
-import MainContent from '@/components/MainContent';
 import alert from '@/components/Alert';
+import MainContent from '@/components/MainContent';
+import SwapHorizontalCircleIcon from '@mui/icons-material/SwapHorizontalCircle';
 import { Box, Button, Stack } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import AceEditor from 'react-ace';
-import SwapHorizontalCircleIcon from '@mui/icons-material/SwapHorizontalCircle';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import 'ace-builds/src-noconflict/ext-language_tools';
-import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-monokai';
 
 enum ConvertType {
@@ -125,8 +125,22 @@ const _C = () => {
           },
         }}
       >
+        <AceEditor
+          name='ace-editor'
+          fontSize={16}
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            height: 'calc(100vh - 310px)',
+          }}
+          value={convert === ConvertType.JS2JSON ? js : json}
+          mode={convert === ConvertType.JS2JSON ? 'javascript' : 'json'}
+          theme='monokai'
+          onChange={convert === ConvertType.JS2JSON ? setJs : setJson}
+          editorProps={{ $blockScrolling: true }}
+        />
         <Stack
-          sx={{ mb: 2 }}
+          sx={{ my: 2 }}
           justifyContent={'center'}
           direction={'row'}
           spacing={2}
@@ -187,36 +201,20 @@ const _C = () => {
             </Stack>
           </Stack>
         </Stack>
-        <Stack direction={'row'} spacing={3}>
-          <AceEditor
-            name='ace-editor'
-            fontSize={16}
-            style={{
-              width: '100%',
-              borderRadius: '4px',
-              height: 'calc(100vh - 310px)',
-            }}
-            value={convert === ConvertType.JS2JSON ? js : json}
-            mode={convert === ConvertType.JS2JSON ? 'javascript' : 'json'}
-            theme='monokai'
-            onChange={convert === ConvertType.JS2JSON ? setJs : setJson}
-            editorProps={{ $blockScrolling: true }}
-          />
-          <AceEditor
-            name='ace-editor'
-            fontSize={16}
-            style={{
-              width: '100%',
-              borderRadius: '4px',
-              height: 'calc(100vh - 310px)',
-            }}
-            value={error || (convert === ConvertType.JS2JSON ? json : js)}
-            mode={convert === ConvertType.JS2JSON ? 'json' : 'javascript'}
-            theme='monokai'
-            readOnly
-            editorProps={{ $blockScrolling: true }}
-          />
-        </Stack>
+        <AceEditor
+          name='ace-editor'
+          fontSize={16}
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            height: 'calc(100vh - 310px)',
+          }}
+          value={error || (convert === ConvertType.JS2JSON ? json : js)}
+          mode={convert === ConvertType.JS2JSON ? 'json' : 'javascript'}
+          theme='monokai'
+          readOnly
+          editorProps={{ $blockScrolling: true }}
+        />
         <Box
           component={'input'}
           id='fileInput'

diff --git a/src/pages/json2xml.tsx b/src/pages/json2xml.tsx
@@ -1,16 +1,16 @@
-import MainContent from '@/components/MainContent';
 import alert from '@/components/Alert';
+import MainContent from '@/components/MainContent';
+import SwapHorizontalCircleIcon from '@mui/icons-material/SwapHorizontalCircle';
 import { Box, Button, Stack } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import AceEditor from 'react-ace';
-import SwapHorizontalCircleIcon from '@mui/icons-material/SwapHorizontalCircle';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { parseStringPromise, Builder } from 'xml2js';
+import { Builder, parseStringPromise } from 'xml2js';
 
 import 'ace-builds/src-noconflict/ext-language_tools';
-import 'ace-builds/src-noconflict/theme-monokai';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-xml';
+import 'ace-builds/src-noconflict/theme-monokai';
 
 /**
  * A => json
@@ -179,8 +179,22 @@ const _C = () => {
           },
         }}
       >
+        <AceEditor
+          name='a'
+          fontSize={16}
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            height: 'calc(100vh - 310px)',
+          }}
+          value={convert === ConvertType.B2A ? b : a}
+          mode={convert === ConvertType.B2A ? AceMode.B2A : AceMode.A2B}
+          theme='monokai'
+          onChange={convert === ConvertType.B2A ? setB : setA}
+          editorProps={{ $blockScrolling: true }}
+        />
         <Stack
-          sx={{ mb: 2 }}
+          sx={{ my: 2 }}
           justifyContent={'center'}
           direction={'row'}
           spacing={2}
@@ -245,36 +259,20 @@ const _C = () => {
             </Stack>
           </Stack>
         </Stack>
-        <Stack direction={'row'} spacing={3}>
-          <AceEditor
-            name='a'
-            fontSize={16}
-            style={{
-              width: '100%',
-              borderRadius: '4px',
-              height: 'calc(100vh - 310px)',
-            }}
-            value={convert === ConvertType.B2A ? b : a}
-            mode={convert === ConvertType.B2A ? AceMode.B2A : AceMode.A2B}
-            theme='monokai'
-            onChange={convert === ConvertType.B2A ? setB : setA}
-            editorProps={{ $blockScrolling: true }}
-          />
-          <AceEditor
-            name='b'
-            fontSize={16}
-            style={{
-              width: '100%',
-              borderRadius: '4px',
-              height: 'calc(100vh - 310px)',
-            }}
-            value={error || (convert === ConvertType.B2A ? a : b)}
-            mode={convert === ConvertType.B2A ? AceMode.A2B : AceMode.B2A}
-            theme='monokai'
-            readOnly
-            editorProps={{ $blockScrolling: true }}
-          />
-        </Stack>
+        <AceEditor
+          name='b'
+          fontSize={16}
+          style={{
+            width: '100%',
+            borderRadius: '4px',
+            height: 'calc(100vh - 310px)',
+          }}
+          value={error || (convert === ConvertType.B2A ? a : b)}
+          mode={convert === ConvertType.B2A ? AceMode.A2B : AceMode.B2A}
+          theme='monokai'
+          readOnly
+          editorProps={{ $blockScrolling: true }}
+        />
         <Box
           component={'input'}
           id='fileInput'