diff --git a/src/components/TextFieldWithClean/index.tsx b/src/components/TextFieldWithClean/index.tsx
new file mode 100644
index 0000000..bc59814
--- /dev/null
+++ b/src/components/TextFieldWithClean/index.tsx
@@ -0,0 +1,46 @@
+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<HTMLDivElement>;
+}
+
+const TextFieldWithClean: React.FC<CustomTextFieldProps> = (props) => {
+  const { onClean, ...otherProps } = props;
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%' }}>
+      <TextField
+        {...otherProps}
+        sx={{ width: '100%', ...otherProps.sx }}
+        variant='outlined'
+      />
+      <Box
+        sx={{
+          position: 'absolute',
+          width: '32px',
+          height: '32px',
+          right: '4px',
+          top: '4px',
+          paddingTop: '6px',
+          textAlign: 'center',
+          bgcolor: 'rgba(0,0,0,0.1)',
+          display: otherProps.value ? '' : 'none',
+          borderRadius: '50%',
+          cursor: 'pointer',
+          color: '#fff',
+          '&:hover': {
+            bgcolor: 'rgba(0,0,0,0.25)',
+          },
+        }}
+      >
+        <Box onClick={onClean}>
+          <DeleteOutlineIcon fontSize='small' />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default TextFieldWithClean;
diff --git a/src/components/TextFieldWithCopy/index.tsx b/src/components/TextFieldWithCopy/index.tsx
new file mode 100644
index 0000000..517d507
--- /dev/null
+++ b/src/components/TextFieldWithCopy/index.tsx
@@ -0,0 +1,51 @@
+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<OutlinedTextFieldProps> = (props) => {
+  const { ...otherProps } = props;
+
+  const handleCopyClick = useCallback(() => {
+    alert.success('已复制到剪切板');
+  }, []);
+
+  return (
+    <Box sx={{ position: 'relative', width: '100%' }}>
+      <TextField
+        {...otherProps}
+        sx={{ width: '100%', ...otherProps.sx }}
+        variant='outlined'
+      />
+      <Box
+        sx={{
+          position: 'absolute',
+          width: '30px',
+          height: '30px',
+          right: '4px',
+          top: '4px',
+          paddingTop: '6px',
+          textAlign: 'center',
+          bgcolor: 'rgba(0,0,0,0.1)',
+          display: otherProps.value ? '' : 'none',
+          borderRadius: '50%',
+          cursor: 'pointer',
+          color: '#fff',
+          '&:hover': {
+            bgcolor: 'rgba(0,0,0,0.25)',
+          },
+        }}
+      >
+        <CopyToClipboard
+          text={otherProps.value as string}
+          onCopy={handleCopyClick}
+        >
+          <ContentCopyIcon fontSize='small' />
+        </CopyToClipboard>
+      </Box>
+    </Box>
+  );
+};
+
+export default TextFieldWithCopy;
diff --git a/src/pages/3des.tsx b/src/pages/3des.tsx
index daa98e7..f5c0f57 100644
--- a/src/pages/3des.tsx
+++ b/src/pages/3des.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';
@@ -97,7 +96,7 @@ const TripleDES: React.FC = () => {
       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 (
     <MenuView>
       <>
@@ -209,43 +214,27 @@ const TripleDES: React.FC = () => {
             </TabList>
           </Box>
         </TabContext>
-        <TextField
+        <TextFieldWithClean
           size='small'
           value={key}
+          label={(method === 'encrypt' ? '加密' : '解密') + '密钥'}
           variant='outlined'
           onChange={onKeyChange}
+          onClean={handleCleanSrcClick}
           placeholder='建议为 24 位字符'
-          InputProps={{
-            startAdornment: (
-              <InputAdornment
-                position='start'
-                sx={{ width: '100px', fontFamily: 'Mono' }}
-              >
-                {method === 'encrypt' ? '加密' : '解密'}密钥
-              </InputAdornment>
-            ),
-          }}
           sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }}
         />
         {mode !== 'ecb' ? (
-          <TextField
+          <TextFieldWithClean
             size='small'
             value={iv}
+            label={mode === 'ctr' ? 'Nonce' : 'IV'}
             variant='outlined'
             onChange={onIVChange}
+            onClean={handleCleanSrcClick}
             placeholder={
               mode === 'ctr' ? '建议为 8 位字符的 Nonce' : '建议为 8 位字符'
             }
-            InputProps={{
-              startAdornment: (
-                <InputAdornment
-                  position='start'
-                  sx={{ width: '100px', fontFamily: 'Mono' }}
-                >
-                  {mode === 'ctr' ? 'Nonce' : 'IV'}
-                </InputAdornment>
-              ),
-            }}
             sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }}
           />
         ) : (
@@ -327,23 +316,20 @@ const TripleDES: React.FC = () => {
             <FormControlLabel value='Hex' control={<Radio />} label='Hex' />
           </RadioGroup>
         </Stack>
-        <Typography sx={{ marginTop: '10px' }}>
-          {method === 'encrypt' ? '明文' : '密文'}
-        </Typography>
-        <TextField
+        <TextFieldWithClean
           value={src}
           variant='outlined'
+          label={method === 'encrypt' ? '明文' : '密文'}
           multiline
           rows={3}
+          onClean={handleCleanSrcClick}
           onChange={onSrcChange}
           sx={{ textarea: { fontSize: '14px', fontFamily: 'Mono' } }}
         />
-        <Typography sx={{ marginTop: '10px' }}>
-          {method === 'encrypt' ? '密文' : '明文'}
-        </Typography>
-        <TextField
+        <TextFieldWithCopy
           value={dst}
           variant='outlined'
+          label={method === 'encrypt' ? '密文' : '明文'}
           multiline
           rows={3}
           onChange={onDstChange}
diff --git a/src/pages/aes.tsx b/src/pages/aes.tsx
index ee957c8..b469fa7 100644
--- a/src/pages/aes.tsx
+++ b/src/pages/aes.tsx
@@ -1,17 +1,16 @@
 import MainContent 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';
@@ -187,6 +186,12 @@ const AES: React.FC = () => {
     []
   );
 
+  const handleCleanSrcClick = useCallback(() => {
+    setSrc('');
+    setKey('');
+    setIV('');
+  }, []);
+
   return (
     <MainContent>
       <>
@@ -206,43 +211,27 @@ const AES: React.FC = () => {
             </TabList>
           </Box>
         </TabContext>
-        <TextField
+        <TextFieldWithClean
           size='small'
           value={key}
+          label={(method === 'encrypt' ? '加密' : '解密') + '密钥'}
           variant='outlined'
           onChange={onKeyChange}
+          onClean={handleCleanSrcClick}
           placeholder='建议为 16、24或32 位字符'
-          InputProps={{
-            startAdornment: (
-              <InputAdornment
-                position='start'
-                sx={{ width: '100px', fontFamily: 'Mono' }}
-              >
-                {method === 'encrypt' ? '加密' : '解密'}密钥
-              </InputAdornment>
-            ),
-          }}
           sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }}
         />
         {mode !== 'ecb' ? (
-          <TextField
+          <TextFieldWithClean
             size='small'
             value={iv}
+            label={mode === 'ctr' ? 'Nonce' : 'IV'}
             variant='outlined'
             onChange={onIVChange}
+            onClean={handleCleanSrcClick}
             placeholder={
               mode === 'ctr' ? '建议为 16 位字符的 Nonce' : '建议为 16 位字符'
             }
-            InputProps={{
-              startAdornment: (
-                <InputAdornment
-                  position='start'
-                  sx={{ width: '100px', fontFamily: 'Mono' }}
-                >
-                  {mode === 'ctr' ? 'Nonce' : 'IV'}
-                </InputAdornment>
-              ),
-            }}
             sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }}
           />
         ) : (
@@ -324,28 +313,31 @@ const AES: React.FC = () => {
             <FormControlLabel value='Hex' control={<Radio />} label='Hex' />
           </RadioGroup>
         </Stack>
-        <Typography sx={{ marginTop: '10px' }}>
-          {method === 'encrypt' ? '明文' : '密文'}
-        </Typography>
-        <TextField
+        <TextFieldWithClean
+          label={method === 'encrypt' ? '明文' : '密文'}
           value={src}
           variant='outlined'
           multiline
           rows={3}
           onChange={onSrcChange}
-          sx={{ textarea: { fontSize: '14px', fontFamily: 'Mono' } }}
+          onClean={handleCleanSrcClick}
+          sx={{
+            width: '100%',
+            textarea: { fontSize: '14px', fontFamily: 'Mono' },
+          }}
         />
-        <Typography sx={{ marginTop: '10px' }}>
-          {method === 'encrypt' ? '密文' : '明文'}
-        </Typography>
-        <TextField
+        <TextFieldWithCopy
           value={dst}
+          label={method === 'encrypt' ? '密文' : '明文'}
           variant='outlined'
           multiline
           rows={3}
           onChange={onDstChange}
           InputProps={{ readOnly: true }}
-          sx={{ textarea: { fontSize: '14px', fontFamily: 'Mono' } }}
+          sx={{
+            width: '100%',
+            textarea: { fontSize: '14px', fontFamily: 'Mono' },
+          }}
         />
       </>
     </MainContent>
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<HTMLInputElement>) => {
@@ -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 = () => {
             </TabList>
           </Box>
         </TabContext>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输入
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={input}
-            onChange={handleInputChanged}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            autoFocus
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <MyLabel onClick={handleCleanClick}>
-              <CleaningServicesRoundedIcon fontSize='small' />
-            </MyLabel>
-          </Box>
-        </Box>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输出
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={output}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            readOnly
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <CopyToClipboard text={output} onCopy={handleCopyClick}>
-              <ContentCopyIcon fontSize='small' />
-            </CopyToClipboard>
-          </Box>
-        </Box>
+        <TextFieldWithClean
+          variant='outlined'
+          label='输入'
+          value={input}
+          onChange={handleInputChanged}
+          onClean={handleCleanClick}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
+        <TextFieldWithCopy
+          variant='outlined'
+          label='输出'
+          value={output}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          InputProps={{
+            readOnly: true,
+          }}
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
       </>
     </MainContent>
   );
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 (
     <MenuView>
       <>
@@ -209,43 +214,27 @@ const DES: React.FC = () => {
             </TabList>
           </Box>
         </TabContext>
-        <TextField
+        <TextFieldWithClean
           size='small'
           value={key}
           variant='outlined'
+          label={(method === 'encrypt' ? '加密' : '解密') + '密钥'}
           onChange={onKeyChange}
+          onClean={handleCleanSrcClick}
           placeholder='建议为 8 位字符'
-          InputProps={{
-            startAdornment: (
-              <InputAdornment
-                position='start'
-                sx={{ width: '100px', fontFamily: 'Mono' }}
-              >
-                {method === 'encrypt' ? '加密' : '解密'}密钥
-              </InputAdornment>
-            ),
-          }}
           sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }}
         />
         {mode !== 'ecb' ? (
-          <TextField
+          <TextFieldWithClean
             size='small'
             value={iv}
+            label={mode === 'ctr' ? 'Nonce' : 'IV'}
             variant='outlined'
             onChange={onIVChange}
+            onClean={handleCleanSrcClick}
             placeholder={
               mode === 'ctr' ? '建议为 8 位字符的 Nonce' : '建议为 8 位字符'
             }
-            InputProps={{
-              startAdornment: (
-                <InputAdornment
-                  position='start'
-                  sx={{ width: '100px', fontFamily: 'Mono' }}
-                >
-                  {mode === 'ctr' ? 'Nonce' : 'IV'}
-                </InputAdornment>
-              ),
-            }}
             sx={{ input: { fontSize: '14px', fontFamily: 'Mono' } }}
           />
         ) : (
@@ -327,24 +316,21 @@ const DES: React.FC = () => {
             <FormControlLabel value='Hex' control={<Radio />} label='Hex' />
           </RadioGroup>
         </Stack>
-        <Typography sx={{ marginTop: '10px' }}>
-          {method === 'encrypt' ? '明文' : '密文'}
-        </Typography>
-        <TextField
+        <TextFieldWithClean
           value={src}
           variant='outlined'
           multiline
+          onClean={handleCleanSrcClick}
+          label={method === 'encrypt' ? '明文' : '密文'}
           rows={3}
           onChange={onSrcChange}
           sx={{ textarea: { fontSize: '14px', fontFamily: 'Mono' } }}
         />
-        <Typography sx={{ marginTop: '10px' }}>
-          {method === 'encrypt' ? '密文' : '明文'}
-        </Typography>
-        <TextField
+        <TextFieldWithCopy
           value={dst}
           variant='outlined'
           multiline
+          label={method === 'encrypt' ? '密文' : '明文'}
           rows={3}
           onChange={onDstChange}
           InputProps={{ readOnly: true }}
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<string>('');
-  const [method, setMethod] = React.useState('encode');
-  const [loading, setLoading] = useState<boolean>(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<string>('');
+  const [fileName, setFileName] = useState<string>('');
+  const [method, setMethod] = React.useState('encode');
+  const [loading, setLoading] = useState<boolean>(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 (
-      <TextField
+      <TextFieldWithCopy
         key={x.name}
+        label={x.name}
         size='small'
         value={x.value}
         variant='outlined'
         InputProps={{
-          startAdornment: (
-            <InputAdornment
-              position='start'
-              sx={{ width: '150px', fontFamily: 'Mono' }}
-            >
-              {x.name}
-            </InputAdornment>
-          ),
           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 = () => {
             </TabList>
           </Box>
           <TabPanel value='encode' sx={{ paddingLeft: 0, paddingRight: 0 }}>
-            <Typography variant='subtitle2'>输入</Typography>
-            <TextField
-              value={src}
+            <TextFieldWithClean
               variant='outlined'
-              multiline
-              rows={3}
-              fullWidth
+              label='输入'
+              value={src}
               onChange={onSrcChange}
-              sx={{ textarea: { fontSize: '14px', fontFamily: 'Mono' } }}
+              onClean={handleCleanClick}
+              rows={3}
+              multiline
+              sx={{
+                width: '100%',
+                textarea: { fontSize: '14px', fontFamily: 'Mono' },
+              }}
             />
           </TabPanel>
           <TabPanel value='decode' sx={{ paddingLeft: 0, paddingRight: 0 }}>
-            <Typography variant='subtitle2'>输入</Typography>
             <Box sx={{ position: 'relative', alignSelf: 'flex-start' }}>
               <LoadingButton
                 loading={loading}
                 loadingPosition='start'
                 size='small'
-                sx={{ borderRadius: '4px' }}
+                sx={{ borderRadius: '4px', width: '100%' }}
                 variant='contained'
                 startIcon={<CloudUploadIcon />}
               >
-                {!loading ? '选择文件' : '正在计算'}
+                {!loading
+                  ? fileName
+                    ? '已选择文件 - ' + fileName
+                    : '选择文件'
+                  : '正在计算'}
               </LoadingButton>
               <VisuallyHiddenInput
                 sx={{
@@ -170,8 +175,7 @@ const Hash: React.FC = () => {
             </Box>
           </TabPanel>
         </TabContext>
-        <Typography variant='subtitle2'>输出</Typography>
-        <Stack spacing={1}>{outElements}</Stack>
+        <Stack spacing={2}>{outElements}</Stack>
       </Box>
     </MainContent>
   );
diff --git a/src/pages/hex.tsx b/src/pages/hex.tsx
index b17b821..c74710c 100644
--- a/src/pages/hex.tsx
+++ b/src/pages/hex.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 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 { Buffer } from 'buffer';
 import React, { useCallback, useMemo, useState } from 'react';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-
-const MyLabel = styled('label')({
-  cursor: 'pointer',
-});
 
 const Hex: React.FC = () => {
   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 = () => {
             </TabList>
           </Box>
         </TabContext>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输入
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={input}
-            onChange={handleInputChanged}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            autoFocus
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <MyLabel onClick={handleCleanClick}>
-              <CleaningServicesRoundedIcon fontSize='small' />
-            </MyLabel>
-          </Box>
-        </Box>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输出
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={output}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            readOnly
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <CopyToClipboard text={output} onCopy={handleCopyClick}>
-              <ContentCopyIcon fontSize='small' />
-            </CopyToClipboard>
-          </Box>
-        </Box>
+
+        <TextFieldWithClean
+          variant='outlined'
+          label='输入'
+          value={input}
+          onChange={handleInputChanged}
+          onClean={handleCleanClick}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
+        <TextFieldWithCopy
+          variant='outlined'
+          label='输出'
+          value={output}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          InputProps={{
+            readOnly: true,
+          }}
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
       </>
     </MainContent>
   );
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 = () => {
             </TabList>
           </Box>
         </TabContext>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输入
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={input}
-            onChange={handleInputChanged}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            autoFocus
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <MyLabel onClick={handleCleanClick}>
-              <CleaningServicesRoundedIcon fontSize='small' />
-            </MyLabel>
-          </Box>
-        </Box>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输出
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={output}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            readOnly
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <CopyToClipboard text={output} onCopy={handleCopyClick}>
-              <ContentCopyIcon fontSize='small' />
-            </CopyToClipboard>
-          </Box>
-        </Box>
+        <TextFieldWithClean
+          variant='outlined'
+          label='输入'
+          value={input}
+          onChange={handleInputChanged}
+          onClean={handleCleanClick}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
+        <TextFieldWithCopy
+          variant='outlined'
+          label='输出'
+          value={output}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          InputProps={{
+            readOnly: true,
+          }}
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
       </>
     </MainContent>
   );
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<String, Function>();
-    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 = () => {
             </TabList>
           </Box>
         </TabContext>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输入
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={input}
-            onChange={handleInputChanged}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            autoFocus
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <MyLabel onClick={handleCleanClick}>
-              <CleaningServicesRoundedIcon fontSize='small' />
-            </MyLabel>
-          </Box>
-        </Box>
-        <Typography
-          sx={{ width: '180px' }}
-          variant='body2'
-          color={defaultTextClick}
-        >
-          输出
-        </Typography>
-        <Box sx={{ position: 'relative' }}>
-          <OutlinedInput
-            sx={{
-              width: '100%',
-              fontFamily: 'Mono',
-              textarea: { paddingRight: '35px' },
-            }}
-            value={output}
-            margin='dense'
-            minRows='5'
-            maxRows='10'
-            multiline
-            readOnly
-          />
-          <Box
-            sx={{
-              position: 'absolute',
-              right: '16px',
-              top: '16px',
-              width: '30px',
-              paddingTop: '5px',
-              height: '30px',
-              textAlign: 'center',
-              bgcolor: '#eee',
-              borderRadius: '50%',
-              cursor: 'pointer',
-              color: input ? '#52C41A' : '#fff',
-              '&:hover': {
-                color: '#345AFF',
-              },
-            }}
-          >
-            <CopyToClipboard text={output} onCopy={handleCopyClick}>
-              <ContentCopyIcon fontSize='small' />
-            </CopyToClipboard>
-          </Box>
-        </Box>
+        <TextFieldWithClean
+          variant='outlined'
+          label='输入'
+          value={input}
+          onChange={handleInputChanged}
+          onClean={handleCleanClick}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
+        <TextFieldWithCopy
+          variant='outlined'
+          label='输出'
+          value={output}
+          minRows='5'
+          maxRows='10'
+          size='small'
+          multiline
+          InputProps={{
+            readOnly: true,
+          }}
+          sx={{
+            width: '100%',
+            textarea: { fontFamily: 'Mono' },
+          }}
+        />
       </>
     </MainContent>
   );