feat(jsfuck): add jsfuck

package.json

@@ -47,6 +47,7 @@
     "html-entities": "^2.4.0",
     "ip": "^1.1.8",
     "js-yaml": "^4.1.0",
+    "jsfuck": "^0.4.0",
     "json-2-csv": "^5.0.1",
     "next": "^14.0.4",
     "next-compose-plugins": "^2.2.1",

src/pages/jsfuck.tsx

@@ -0,0 +1,173 @@
+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 React, { useCallback, useMemo, useState } from 'react';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import * as fucker from 'jsfuck';
+
+const MyLabel = styled('label')({
+  cursor: 'pointer',
+});
+
+const JSFuck: React.FC = () => {
+  const [method, setMethod] = React.useState('encode');
+  const [input, setInput] = useState<string>('');
+  const [output, setOutput] = useState<string>('');
+
+  const funcMap = useMemo(() => {
+    const decode = (str: string): string => {
+      return '';
+    };
+    const encode = (str: string): string => {
+      return fucker.JSFuck.encode(str, true);
+    };
+    const m = new Map<String, Function>();
+    m.set('encode', encode);
+    m.set('decode', decode);
+    return m;
+  }, []);
+
+  const handleChange = (event: React.SyntheticEvent, method: string) => {
+    setMethod(method);
+    var fn = funcMap.get(method);
+    if (fn) {
+      setOutput(fn(input));
+    }
+  };
+
+  const handleInputChanged = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      var value = event.target.value;
+      setInput(value);
+      var fn = funcMap.get(method);
+      if (fn) {
+        setOutput(fn(value));
+      }
+    },
+    [funcMap, method]
+  );
+
+  const handleCopyClick = useCallback(() => {
+    alert.success('复制成功');
+  }, []);
+
+  const handleCleanClick = useCallback(() => {
+    setInput('');
+    setOutput('');
+  }, []);
+
+  return (
+    <MainContent>
+      <>
+        <TabContext value={method}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <TabList onChange={handleChange}>
+              <Tab
+                label='加密'
+                value='encode'
+                sx={{ textTransform: 'none !important' }}
+              />
+            </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>
+      </>
+    </MainContent>
+  );
+};
+
+export default JSFuck;

src/types/declare.d.ts

@@ -60,3 +60,4 @@ declare module 'gofmt.js';
 declare module 'uuid';
 declare module 'apache-crypt';
 declare module 'bcryptjs';
+declare module 'jsfuck';

src/utils/tools.ts

@@ -346,4 +346,11 @@ export const allTools: Tool[] = [
     key: ['在线文本对比Diff', '高亮显示'],
     subTitle: '在线文本对比Diff，支持多种对比模式，差异部分高亮显示',
   },
+  {
+    label: '在线 JSFuck 加密',
+    tags: [Tags.ENCODE],
+    path: '/jsfuck',
+    key: ['在线 JSFuck 加密'],
+    subTitle: 'JSFuck 加密',
+  },
 ];