Xtools-开源在线工具箱

偶然发现一个新上的开源项目，在线工具箱，包括安全工具、办公工具、编码解码、加密解密、辅助开发、JSON 加工、文字处理、图片加工、二进制处理等多种类型

页面交互样式非常好看，颜值党表示用上非常顺手

安全工具这个类型下的几个小工具都比较有特色：MD5 在线碰撞、ZIP 密码在线破解、XSS 向量生成器，都比较难找到同款，不错不错

我在 Github 上提了好几个 Issue，都很快就回复且实现了，效率杠杠的

比如 CIDR 计算器，开源的代码贴在下面了，可以看看

import MainContent from'@/components/MainContent';import{ Button, TextField, Grid, Typography }from'@mui/material';import React,{ useState, useEffect }from'react';functionparseCIDR(ip:string, mask:number){let ipArray = ip.split('.');let binaryIp = ipArray
    .map((oct)=>parseInt(oct).toString(2).padStart(8,'0')).join('');let networkAddress = binaryIp.substring(0, mask)+'0'.repeat(32- mask);let broadcastAddress = binaryIp.substring(0, mask)+'1'.repeat(32- mask);let firstUsable =parseInt(networkAddress,2)+1;let lastUsable =parseInt(broadcastAddress,2)-1;let netmask ='1'.repeat(mask)+'0'.repeat(32- mask);let netmaskOctets = netmask.match(/.{1,8}/g);let subnetMask = netmaskOctets?.map((oct)=>parseInt(oct,2)).join('.');let totalUsable = Math.pow(2,32- mask)-2;return{
    firstUsableIP:formatIp(firstUsable),
    lastUsableIP:formatIp(lastUsable),
    mask: subnetMask,
    totalUsable: totalUsable,};}functionformatIp(num:number){let parts =[];for(let i =0; i <4; i++){
    parts.unshift((num >>(i *8))&255);}return parts.join('.');}const CIDRCalculator: React.FC=()=>{const[ipAddress, setIpAddress]=useState<string>('192.168.1.1');const[subnetMask, setSubnetMask]=useState<number>(24);const[cidrDetails, setCidrDetails]=useState({
    mask:'',
    firstUsableIP:'',
    lastUsableIP:'',
    totalUsable:0,});constcalculateCIDR=()=>{const details =parseCIDR(ipAddress, subnetMask);setCidrDetails({...details,
      mask: details.mask ||'',});};useEffect(()=>{calculateCIDR();},[]);return(<MainContent>{/* <Paper elevation={3} sx={{ padding: '20px', marginTop: '20px' }}> */}<Grid container spacing={2}><Grid item xs={10}><TextField
            fullWidth
            label='IP 地址'
            variant='outlined'
            value={ipAddress}
            onChange={(e)=>setIpAddress(e.target.value)}/></Grid><Grid item xs={2}><TextField
            fullWidth
            label='掩码位'
            type='number'
            variant='outlined'
            value={subnetMask}
            onChange={(e)=>setSubnetMask(Number(e.target.value))}/></Grid><Grid item xs={12}><Button
            fullWidth
            variant='contained'
            color='primary'
            onClick={calculateCIDR}>
            Calculate
          </Button></Grid><Grid item xs={12}><Typography variant='subtitle1' sx={{ mt:'15px', fontSize:'25px'}}><a style={{ color:'#99A0B7'}}>子网掩码:</a><strong style={{ marginLeft:'5px'}}>{cidrDetails.mask}</strong></Typography><Typography variant='subtitle1' sx={{ mt:'15px', fontSize:'25px'}}><a style={{ color:'#99A0B7'}}>首个可用:</a><strong style={{ marginLeft:'5px'}}>{cidrDetails.firstUsableIP}</strong></Typography><Typography variant='subtitle1' sx={{ mt:'15px', fontSize:'25px'}}><a style={{ color:'#99A0B7'}}>最后可用:</a><strong style={{ marginLeft:'5px'}}>{cidrDetails.lastUsableIP}</strong></Typography><Typography variant='subtitle1' sx={{ mt:'15px', fontSize:'25px'}}><a style={{ color:'#99A0B7'}}>所有可用数量:</a><strong style={{ marginLeft:'5px'}}>{cidrDetails.totalUsable}</strong></Typography></Grid></Grid>{/* </Paper> */}</MainContent>);};exportdefault CIDRCalculator;