feat: rail fence cipher

Author: awesomeYG

src/pages/caesar.tsx

@@ -6,7 +6,7 @@ import MainContent from '@/components/MainContent';
 import alertActions from '@/components/Alert';
 
 const encode = (text: string, pwdOffest: number) => {
-  if (pwdOffest >= 26) pwdOffest = pwdOffest % 26;
+  if (pwdOffest >= 26) pwdOffest %= 26;
   return Array.from(text)
     .map((item) => {
       const count = item.charCodeAt(0);
@@ -24,7 +24,7 @@ const encode = (text: string, pwdOffest: number) => {
     .join('');
 };
 const decode = (pwd: string, pwdOffest: number) => {
-  if (pwdOffest > 25) pwdOffest = pwdOffest % 25;
+  if (pwdOffest >= 26) pwdOffest %= 26;
   return Array.from(pwd)
     .map((item) => {
       const count = item.charCodeAt(0);

src/pages/rail_fence_cipher.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react';
+import { Container, Grid, TextField, Button, Box } from '@mui/material';
+import SendIcon from '@mui/icons-material/Send';
+import TranslateIcon from '@mui/icons-material/Translate';
+import MainContent from '@/components/MainContent';
+import alertActions from '@/components/Alert';
+
+const encode = (text: string, rails: number) => {
+  // 创建栅栏矩阵
+  const fence: string[][] = Array.from({ length: rails }, () => []);
+
+  // 将字符按照"W"字形排列到栅栏矩阵中
+  let rail = 0;
+  let direction = 1;
+  for (let i of text) {
+    fence[rail].push(i);
+    rail += direction;
+    if (rail === 0 || rail === rails - 1) {
+      direction = -direction;
+    }
+  }
+
+  // 按照特定顺序读取字符并拼接成密文
+  let pwd = '';
+  for (let i = 0; i < rails; i++) {
+    pwd += fence[i].join('');
+  }
+
+  return pwd;
+};
+
+const decode = (pwd: string, rails: number) => {
+  // 创建栅栏矩阵
+  const fence: string[][] = Array.from({ length: rails }, () => []);
+
+  // 计算栅栏中每行的字符数
+  const railCounts = Array.from({ length: rails }, () => 0);
+  let rail = 0;
+  let direction = 1;
+  for (let i = 0; i < pwd.length; i++) {
+    railCounts[rail]++;
+    rail += direction;
+    if (rail === 0 || rail === rails - 1) {
+      direction = -direction;
+    }
+  }
+
+  // 将密文中的字符填充到栅栏矩阵中
+  let index = 0;
+  for (let i = 0; i < rails; i++) {
+    for (let j = 0; j < railCounts[i]; j++) {
+      fence[i].push(pwd[index]);
+      index++;
+    }
+  }
+
+  // 按照"山"字形顺序读取字符并拼接成明文
+  let plaintext = '';
+  rail = 0;
+  direction = 1;
+  for (let i = 0; i < pwd.length; i++) {
+    plaintext += fence[rail].shift();
+    rail += direction;
+    if (rail === 0 || rail === rails - 1) {
+      direction = -direction;
+    }
+  }
+
+  return plaintext;
+};
+const RailFenceCipher = () => {
+  const [text, setText] = useState('');
+  const [pwd, setPwd] = useState('');
+  const [pwdOffest, setPwdOffest] = useState(3);
+
+  const onTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setText(event.target.value);
+  };
+
+  const onPwdChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPwd(event.target.value);
+  };
+
+  const encodeToMorse = () => {
+    try {
+      const encoded = encode(text, pwdOffest);
+      setPwd(encoded);
+    } catch (error) {
+      const err = error as Error;
+      console.log(err);
+      alertActions.error('加密失败！');
+    }
+  };
+
+  const decodeFromMorse = () => {
+    try {
+      const decoded = decode(pwd, pwdOffest);
+      setText(decoded);
+    } catch (error) {
+      const err = error as Error;
+      console.log(err);
+      alertActions.error('解密失败！');
+    }
+  };
+
+  return (
+    <MainContent>
+      <>
+        <TextField
+          fullWidth
+          label='栏目数'
+          placeholder='请输入栏目数'
+          value={pwdOffest}
+          type='number'
+          onChange={(e) => {
+            setPwdOffest(e.target.value as any);
+          }}
+          inputProps={{
+            style: { fontFamily: 'monospace' },
+          }}
+          sx={{ width: '200px', ml: 'auto' }}
+        />
+        <Container maxWidth='lg'>
+          <Box sx={{ my: 4 }}>
+            <Grid container spacing={2} alignItems='center'>
+              <Grid item xs={12} md={5}>
+                <TextField
+                  fullWidth
+                  label='文本'
+                  placeholder='请输入要加密的文本'
+                  value={text}
+                  onChange={onTextChange}
+                  variant='outlined'
+                  multiline
+                  rows={10}
+                  inputProps={{
+                    style: { fontFamily: 'monospace' },
+                  }}
+                />
+              </Grid>
+              <Grid
+                item
+                xs={12}
+                md={2}
+                container
+                direction='column'
+                alignItems='center'
+                justifyContent='space-around'
+              >
+                <Button
+                  variant='contained'
+                  onClick={encodeToMorse}
+                  startIcon={<SendIcon />}
+                  sx={{ mb: 2 }}
+                >
+                  加密
+                </Button>
+                <Button
+                  variant='contained'
+                  onClick={decodeFromMorse}
+                  startIcon={<TranslateIcon />}
+                >
+                  解密
+                </Button>
+              </Grid>
+              <Grid item xs={12} md={5}>
+                <TextField
+                  fullWidth
+                  label='栅栏密码'
+                  placeholder='请输入要解密的凯撒密码'
+                  value={pwd}
+                  onChange={onPwdChange}
+                  variant='outlined'
+                  multiline
+                  rows={10}
+                  inputProps={{
+                    style: { fontFamily: 'monospace' },
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </Box>
+        </Container>
+      </>
+    </MainContent>
+  );
+};
+
+export default RailFenceCipher;

src/utils/tools.ts

@@ -600,10 +600,18 @@ export const allTools: Tool[] = [
   },
   {
     label: '凯撒密码在线加密解密',
-    tags: [Tags.SECURITY],
+    tags: [Tags.ENCRYPT],
     path: '/caesar',
     key: [],
     subTitle:
       '凯撒密码最早由古罗马军事统帅盖乌斯·尤利乌斯·凯撒在军队中用来传递加密信息，故称凯撒密码。此为一种位移加密手段，只对26个（大小写）字母进行位移加密，规则相当简单，容易被破解',
   },
+  {
+    label: '栅栏密码在线加密解密',
+    tags: [Tags.ENCRYPT],
+    path: '/rail_fence_cipher',
+    key: [],
+    subTitle:
+      '所谓栅栏密码，就是把要加密的明文分成N个一组，然后把每组的第1个字连起来，形成一段无规律的话。 不过栅栏密码本身有一个潜规则，就是组成栅栏的字母一般不会太多。（一般不超过30个，也就是一、两句话）',
+  },
 ];