From 85120ac535e54c87976e4ed8f539d36299721258 Mon Sep 17 00:00:00 2001 From: naocanmonster Date: Wed, 3 Jan 2024 00:09:57 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(xtools):=20=E4=BC=98=E5=8C=96=E4=BA=86?= =?UTF-8?q?=E4=B8=80=E4=B8=8B=E6=96=87=E6=9C=AC=E6=A1=86=E7=9A=84=E5=A4=8D?= =?UTF-8?q?=E5=88=B6=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextFieldWithClean/index.tsx | 42 ++++++ src/components/TextFieldWithCopy/index.tsx | 47 ++++++ src/pages/base64.tsx | 157 ++++++-------------- src/pages/hash.tsx | 70 +++++---- 4 files changed, 172 insertions(+), 144 deletions(-) create mode 100644 src/components/TextFieldWithClean/index.tsx create mode 100644 src/components/TextFieldWithCopy/index.tsx diff --git a/src/components/TextFieldWithClean/index.tsx b/src/components/TextFieldWithClean/index.tsx new file mode 100644 index 0000000..069fc5d --- /dev/null +++ b/src/components/TextFieldWithClean/index.tsx @@ -0,0 +1,42 @@ +import { Box, TextField, OutlinedTextFieldProps } from '@mui/material'; +import React from 'react'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + +interface CustomTextFieldProps extends OutlinedTextFieldProps { + onClean: React.MouseEventHandler; +} + +const TextFieldWithClean: React.FC = (props) => { + const { onClean, ...otherProps } = props; + + return ( + + + + + + + + + ); +}; + +export default TextFieldWithClean; diff --git a/src/components/TextFieldWithCopy/index.tsx b/src/components/TextFieldWithCopy/index.tsx new file mode 100644 index 0000000..5bd0eb9 --- /dev/null +++ b/src/components/TextFieldWithCopy/index.tsx @@ -0,0 +1,47 @@ +import { Box, TextField, OutlinedTextFieldProps } from '@mui/material'; +import React, { useCallback } from 'react'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import alert from '@/components/Alert'; + +const TextFieldWithCopy: React.FC = (props) => { + const { ...otherProps } = props; + + const handleCopyClick = useCallback(() => { + alert.success('已复制到剪切板'); + }, []); + + return ( + + + + + + + + + ); +}; + +export default TextFieldWithCopy; diff --git a/src/pages/base64.tsx b/src/pages/base64.tsx index c737d01..5c79500 100644 --- a/src/pages/base64.tsx +++ b/src/pages/base64.tsx @@ -1,19 +1,11 @@ -import alert from '@/components/Alert'; import MainContent from '@/components/MainContent'; -import { defaultTextClick } from '@/constant'; -import CleaningServicesRoundedIcon from '@mui/icons-material/CleaningServicesRounded'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; -import { Box, OutlinedInput, Tab, Typography } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { Box, Tab } from '@mui/material'; import { Buffer } from 'buffer'; import React, { useCallback, useMemo, useState } from 'react'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; - -const MyLabel = styled('label')({ - cursor: 'pointer', -}); +import TextFieldWithCopy from '@/components/TextFieldWithCopy'; +import TextFieldWithClean from '@/components/TextFieldWithClean'; const Base64: React.FC = () => { const [method, setMethod] = React.useState('encode'); @@ -31,13 +23,18 @@ const Base64: React.FC = () => { return m; }, []); - const handleChange = (event: React.SyntheticEvent, method: string) => { - setMethod(method); - var fn = funcMap.get(method); - if (fn) { - setOutput(fn(input)); - } - }; + const handleChange = useCallback( + (event: React.SyntheticEvent, method: string) => { + const newInput = output; + setInput(newInput); + setMethod(method); + var fn = funcMap.get(method); + if (fn) { + setOutput(fn(newInput)); + } + }, + [input, output] + ); const handleInputChanged = useCallback( (event: React.ChangeEvent) => { @@ -51,10 +48,6 @@ const Base64: React.FC = () => { [funcMap, method] ); - const handleCopyClick = useCallback(() => { - alert.success('复制成功'); - }, []); - const handleCleanClick = useCallback(() => { setInput(''); setOutput(''); @@ -79,95 +72,37 @@ const Base64: React.FC = () => { - - 输入 - - - - - - - - - - - 输出 - - - - - - - - - + + ); diff --git a/src/pages/hash.tsx b/src/pages/hash.tsx index 1d7c575..548818f 100644 --- a/src/pages/hash.tsx +++ b/src/pages/hash.tsx @@ -1,15 +1,15 @@ import MainContent from '@/components/MainContent'; import crypto from 'crypto-js'; import React, { useCallback, useMemo, useState } from 'react'; -import { Box, Stack, Typography, Tab } from '@mui/material'; -import InputAdornment from '@mui/material/InputAdornment'; +import { Box, Stack, Tab } from '@mui/material'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; import LoadingButton from '@mui/lab/LoadingButton'; -import TextField from '@mui/material/TextField'; import { styled } from '@mui/material/styles'; import CloudUploadIcon from '@mui/icons-material/CloudUpload'; +import TextFieldWithCopy from '@/components/TextFieldWithCopy'; +import TextFieldWithClean from '@/components/TextFieldWithClean'; const VisuallyHiddenInput = styled('input')({ clip: 'rect(0 0 0 0)', @@ -24,14 +24,6 @@ const VisuallyHiddenInput = styled('input')({ }); const Hash: React.FC = () => { - const [src, setSrc] = useState(''); - const [method, setMethod] = React.useState('encode'); - const [loading, setLoading] = useState(false); - - const handleChange = (event: React.SyntheticEvent, method: string) => { - setMethod(method); - }; - const methods = useMemo(() => { return (val: any) => { return [ @@ -54,27 +46,33 @@ const Hash: React.FC = () => { return { name: x.name, value: '' }; }); + const [src, setSrc] = useState(''); + const [fileName, setFileName] = useState(''); + const [method, setMethod] = React.useState('encode'); + const [loading, setLoading] = useState(false); const [values, setValues] = useState(initValue); + const handleChange = (event: React.SyntheticEvent, method: string) => { + setMethod(method); + }; + + const handleCleanClick = useCallback(() => { + setSrc(''); + setValues(initValue); + }, []); + let outElements = values.map((x) => { return ( - - {x.name} - - ), readOnly: true, }} - sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} + sx={{ width: '100%', input: { fontSize: '14px', fontFamily: 'Mono' } }} /> ); }); @@ -105,6 +103,7 @@ const Hash: React.FC = () => { setLoading(false); } }; + setFileName(files[0].name); reader.readAsArrayBuffer(files[0]); }, 200); }, @@ -130,29 +129,35 @@ const Hash: React.FC = () => { - 输入 - - 输入 } > - {!loading ? '选择文件' : '正在计算'} + {!loading + ? fileName + ? '已选择文件 - ' + fileName + : '选择文件' + : '正在计算'} { - 输出 - {outElements} + {outElements} ); From df895f0992e495ba215de06ee792625cd5094eba Mon Sep 17 00:00:00 2001 From: naocanmonster Date: Wed, 3 Jan 2024 00:44:53 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(xtools):=20=E6=8A=8A=E6=89=80=E6=9C=89?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=A1=86=E9=83=BD=E6=94=B9=E6=88=90=E5=B8=A6?= =?UTF-8?q?=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD=E7=9A=84=E4=BA=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextFieldWithClean/index.tsx | 6 +- src/components/TextFieldWithCopy/index.tsx | 6 +- src/pages/3des.tsx | 54 +++---- src/pages/aes.tsx | 62 ++++---- src/pages/des.tsx | 52 +++---- src/pages/hex.tsx | 143 +++++------------- src/pages/htmlentity.tsx | 138 +++++------------ src/pages/urlencoder.tsx | 156 ++++++-------------- 8 files changed, 196 insertions(+), 421 deletions(-) diff --git a/src/components/TextFieldWithClean/index.tsx b/src/components/TextFieldWithClean/index.tsx index 069fc5d..bc59814 100644 --- a/src/components/TextFieldWithClean/index.tsx +++ b/src/components/TextFieldWithClean/index.tsx @@ -11,7 +11,11 @@ const TextFieldWithClean: React.FC = (props) => { return ( - + = (props) => { return ( - + { let k = crypto.enc.Utf8.parse(key); console.log(src, key, mode, padding, encoding, iv); - + let result; if (method === 'encrypt') { let plaintext = crypto.enc.Utf8.parse(src); @@ -190,6 +189,12 @@ const TripleDES: React.FC = () => { [] ); + const handleCleanSrcClick = useCallback(() => { + setSrc(''); + setKey(''); + setIV(''); + }, []); + return ( <> @@ -209,43 +214,27 @@ const TripleDES: React.FC = () => { - - {method === 'encrypt' ? '加密' : '解密'}密钥 - - ), - }} sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} /> {mode !== 'ecb' ? ( - - {mode === 'ctr' ? 'Nonce' : 'IV'} - - ), - }} sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} /> ) : ( @@ -327,23 +316,20 @@ const TripleDES: React.FC = () => { } label='Hex' /> - - {method === 'encrypt' ? '明文' : '密文'} - - - - {method === 'encrypt' ? '密文' : '明文'} - - { [] ); + const handleCleanSrcClick = useCallback(() => { + setSrc(''); + setKey(''); + setIV(''); + }, []); + return ( <> @@ -206,43 +211,27 @@ const AES: React.FC = () => { - - {method === 'encrypt' ? '加密' : '解密'}密钥 - - ), - }} sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} /> {mode !== 'ecb' ? ( - - {mode === 'ctr' ? 'Nonce' : 'IV'} - - ), - }} sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} /> ) : ( @@ -324,28 +313,31 @@ const AES: React.FC = () => { } label='Hex' /> - - {method === 'encrypt' ? '明文' : '密文'} - - - - {method === 'encrypt' ? '密文' : '明文'} - - diff --git a/src/pages/des.tsx b/src/pages/des.tsx index 676ab60..eae5b7e 100644 --- a/src/pages/des.tsx +++ b/src/pages/des.tsx @@ -1,17 +1,16 @@ import MenuView from '@/components/MainContent'; +import TextFieldWithClean from '@/components/TextFieldWithClean'; +import TextFieldWithCopy from '@/components/TextFieldWithCopy'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; import { Box, FormControlLabel, FormLabel, - InputAdornment, Radio, RadioGroup, Stack, Tab, - TextField, - Typography, } from '@mui/material'; import crypto from 'crypto-js'; import React, { useCallback } from 'react'; @@ -190,6 +189,12 @@ const DES: React.FC = () => { [] ); + const handleCleanSrcClick = useCallback(() => { + setSrc(''); + setKey(''); + setIV(''); + }, []); + return ( <> @@ -209,43 +214,27 @@ const DES: React.FC = () => { - - {method === 'encrypt' ? '加密' : '解密'}密钥 - - ), - }} sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} /> {mode !== 'ecb' ? ( - - {mode === 'ctr' ? 'Nonce' : 'IV'} - - ), - }} sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }} /> ) : ( @@ -327,24 +316,21 @@ const DES: React.FC = () => { } label='Hex' /> - - {method === 'encrypt' ? '明文' : '密文'} - - - - {method === 'encrypt' ? '密文' : '明文'} - - { const [method, setMethod] = React.useState('encode'); @@ -32,10 +24,12 @@ const Hex: React.FC = () => { }, []); const handleChange = (event: React.SyntheticEvent, method: string) => { + const newInput = output; + setInput(newInput); setMethod(method); var fn = funcMap.get(method); if (fn) { - setOutput(fn(input)); + setOutput(fn(newInput)); } }; @@ -51,10 +45,6 @@ const Hex: React.FC = () => { [funcMap, method] ); - const handleCopyClick = useCallback(() => { - alert.success('复制成功'); - }, []); - const handleCleanClick = useCallback(() => { setInput(''); setOutput(''); @@ -79,95 +69,38 @@ const Hex: React.FC = () => { - - 输入 - - - - - - - - - - - 输出 - - - - - - - - - + + + ); diff --git a/src/pages/htmlentity.tsx b/src/pages/htmlentity.tsx index 5bb87a8..547d08e 100644 --- a/src/pages/htmlentity.tsx +++ b/src/pages/htmlentity.tsx @@ -1,19 +1,11 @@ -import alert from '@/components/Alert'; import MainContent from '@/components/MainContent'; -import { defaultTextClick } from '@/constant'; -import CleaningServicesRoundedIcon from '@mui/icons-material/CleaningServicesRounded'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; -import { Box, OutlinedInput, Tab, Typography } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { Box, Tab } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; import { encode, decode } from 'html-entities'; - -const MyLabel = styled('label')({ - cursor: 'pointer', -}); +import TextFieldWithCopy from '@/components/TextFieldWithCopy'; +import TextFieldWithClean from '@/components/TextFieldWithClean'; const Hex: React.FC = () => { const [method, setMethod] = React.useState('encode'); @@ -47,10 +39,6 @@ const Hex: React.FC = () => { [funcMap, method] ); - const handleCopyClick = useCallback(() => { - alert.success('复制成功'); - }, []); - const handleCleanClick = useCallback(() => { setInput(''); setOutput(''); @@ -75,95 +63,37 @@ const Hex: React.FC = () => { - - 输入 - - - - - - - - - - - 输出 - - - - - - - - - + + ); diff --git a/src/pages/urlencoder.tsx b/src/pages/urlencoder.tsx index 8fffe8b..23defde 100644 --- a/src/pages/urlencoder.tsx +++ b/src/pages/urlencoder.tsx @@ -1,18 +1,10 @@ -import alert from '@/components/Alert'; import MainContent from '@/components/MainContent'; -import { defaultTextClick } from '@/constant'; -import CleaningServicesRoundedIcon from '@mui/icons-material/CleaningServicesRounded'; -import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import TextFieldWithClean from '@/components/TextFieldWithClean'; +import TextFieldWithCopy from '@/components/TextFieldWithCopy'; import TabContext from '@mui/lab/TabContext'; import TabList from '@mui/lab/TabList'; -import { Box, OutlinedInput, Tab, Typography } from '@mui/material'; -import { styled } from '@mui/material/styles'; +import { Box, Tab } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; - -const MyLabel = styled('label')({ - cursor: 'pointer', -}); const URLEncoder: React.FC = () => { const [method, setMethod] = React.useState('encode'); @@ -21,16 +13,22 @@ const URLEncoder: React.FC = () => { const funcMap = useMemo(() => { const m = new Map(); - m.set('encode', encodeURI); - m.set('decode', decodeURI); + m.set('encode', encodeURIComponent); + m.set('decode', decodeURIComponent); return m; }, []); const handleChange = (event: React.SyntheticEvent, method: string) => { + const newInput = output; + setInput(newInput); setMethod(method); var fn = funcMap.get(method); if (fn) { - setOutput(fn(input)); + try { + setOutput(fn(newInput)); + } catch (e) { + setOutput('输入有误, 解码失败'); + } } }; @@ -40,16 +38,16 @@ const URLEncoder: React.FC = () => { setInput(value); var fn = funcMap.get(method); if (fn) { - setOutput(fn(value)); + try { + setOutput(fn(value)); + } catch (e) { + setOutput('输入有误, 解码失败'); + } } }, [funcMap, method] ); - const handleCopyClick = useCallback(() => { - alert.success('复制成功'); - }, []); - const handleCleanClick = useCallback(() => { setInput(''); setOutput(''); @@ -74,95 +72,37 @@ const URLEncoder: React.FC = () => { - - 输入 - - - - - - - - - - - 输出 - - - - - - - - - + + );