feat: unicode 编解码

Author: awesomeYG

src/pages/unicode.tsx

@@ -0,0 +1,74 @@
+import MainContent from '@/components/MainContent';
+import TextFieldWithClean from '@/components/TextFieldWithClean';
+import SendIcon from '@mui/icons-material/Send';
+import TranslateIcon from '@mui/icons-material/Translate';
+import { Box, Button, Stack } from '@mui/material';
+import { useState } from 'react';
+
+function UnicodeConverter() {
+  const [input, setInput] = useState(''); // 输入的普通文本或unicode码
+  const [output, setOutput] = useState(''); // 输出的unicode码或普通文本
+
+  // Unicode编码函数
+  const encodeToUnicode = (str: string) => {
+    let unicode_str = '';
+    for (let i = 0; i < str.length; i++) {
+      let unicode_code = str.charCodeAt(i).toString(16).toUpperCase();
+      unicode_str += '\\u' + ('0000' + unicode_code).slice(-4);
+    }
+    setOutput(unicode_str);
+  };
+
+  // Unicode解码函数
+  const decodeFromUnicode = (unicode_str: string) => {
+    let str = '';
+    unicode_str.replace(
+      /\\u([\da-f]{4})/gi,
+      (match, key) => (str += String.fromCharCode(parseInt(key, 16)))
+    );
+    setOutput(str);
+  };
+
+  // 渲染组件
+  return (
+    <MainContent>
+      <Stack spacing={2} direction='row' alignItems='center'>
+        <TextFieldWithClean
+          multiline
+          rows={8}
+          value={input}
+          variant='outlined'
+          onClean={() => setInput('')}
+          onChange={(e) => setInput(e.target.value)}
+        />
+        <Box sx={{ minWidth: '88px' }}>
+          <Button
+            variant='contained'
+            startIcon={<SendIcon />}
+            sx={{ mb: 2 }}
+            onClick={() => encodeToUnicode(input)}
+          >
+            转码
+          </Button>
+          <Button
+            variant='contained'
+            startIcon={<TranslateIcon />}
+            onClick={() => decodeFromUnicode(input)}
+          >
+            解码
+          </Button>
+        </Box>
+        <TextFieldWithClean
+          multiline
+          rows={8}
+          value={output}
+          onClean={() => setOutput('')}
+          onChange={(e) => setOutput(e.target.value)}
+          variant={'outlined'}
+        />
+      </Stack>
+    </MainContent>
+  );
+}
+
+export default UnicodeConverter;

src/utils/tools.ts

@@ -614,4 +614,12 @@ export const allTools: Tool[] = [
     subTitle:
       '所谓栅栏密码，就是把要加密的明文分成N个一组，然后把每组的第1个字连起来，形成一段无规律的话。 不过栅栏密码本身有一个潜规则，就是组成栅栏的字母一般不会太多。（一般不超过30个，也就是一、两句话）',
   },
+  {
+    label: 'Unicode 编码解码',
+    tags: [Tags.ENCODE],
+    path: '/unicode',
+    key: [],
+    subTitle:
+      'Unicode，又译作万国码、统一字元码、统一字符编码，是信息技术领域的业界标准，其整理、编码了世界上大部分的文字系统，使得电脑能以通用划一的字符集来处理和显示文字，不但减轻在不同编码系统间切换和转换的困扰，更提供了一种跨平台的乱码问题解决方案。',
+  },
 ];