Skip to content

lystdio/common-tools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

前端工具库 🛠️

一个功能丰富的前端开发工具集合,包含多种常用的开发工具,采用现代化的界面设计。

功能特性

🌍 字段翻译器

  • 多翻译服务支持:Google翻译、LibreTranslate、百度翻译API
  • 智能容错机制:按优先级自动切换翻译服务
  • 批量翻译:支持多行字段同时翻译
  • 多语言支持:支持50+种语言互译
  • 配置灵活:可自定义翻译服务组合
  • API密钥管理:安全的本地存储配置

🔐 Base64编码/解码

  • 文本Base64编码
  • Base64解码
  • 支持中文和特殊字符

📷 图片转Base64

  • 支持多种图片格式
  • 实时预览转换结果
  • 一键复制Base64编码

📄 JSON格式化

  • JSON字符串格式化
  • JSON压缩
  • JSON格式验证
  • 错误提示和状态显示

📱 二维码生成

  • 文本转二维码
  • 可下载PNG格式
  • 自定义尺寸和样式

🔐 密码生成器

  • 自定义密码长度
  • 可选择字符类型(大小写、数字、符号)
  • 批量生成多个密码
  • 高安全性随机生成

🔍 正则表达式测试器

  • 实时正则匹配测试
  • 文本替换功能
  • 支持所有正则标志
  • 错误提示和验证

🔢 哈希计算器

  • 支持MD5、SHA-1、SHA-256、SHA-512
  • 批量计算所有哈希值
  • 安全加密算法

🔢 进制转换器

  • 支持二进制、八进制、十进制、十六进制
  • 批量转换所有进制
  • 大数字支持
  • 精确计算

使用方法

  1. 直接在浏览器中打开 index.html 文件
  2. 点击顶部导航栏切换不同的工具
  3. 根据提示输入内容或上传文件
  4. 点击相应按钮执行操作
  5. 使用复制按钮快速复制结果

🌍 字段翻译器使用指南

翻译服务配置

  • Google翻译:默认启用,免费稳定,优先使用
  • LibreTranslate:免费开源,备用选择,需要配置服务器地址
  • 百度翻译:需要申请API密钥,每月200万字符免费额度

使用步骤

  1. 在"字段翻译器"标签页中配置翻译服务
  2. 选择源语言和目标语言
  3. 输入要翻译的字段(支持多行)
  4. 点击"翻译"按钮执行翻译
  5. 系统会按优先级依次尝试启用的翻译服务

翻译服务优先级

  1. Google翻译 → 2. LibreTranslate → 3. 百度翻译
  2. 如果前一个服务失败,自动尝试下一个服务
  3. 支持多选配置,提高翻译成功率

技术特点

  • 纯前端实现:无需服务器,可直接在浏览器中运行
  • 响应式设计:支持桌面和移动设备
  • 现代化UI:采用渐变背景和毛玻璃效果
  • 用户体验优化:动画效果、状态提示、一键复制
  • 代码规范:ES6+语法,模块化设计
  • 智能翻译:多服务容错机制,自动切换翻译引擎
  • 配置持久化:本地存储用户配置,无需重复设置
  • API集成:支持多种第三方翻译服务API

浏览器兼容性

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

文件结构

common-tools/
├── manifest.json          # 插件配置文件
├── popup.html            # 插件弹窗界面
├── popup-styles.css      # 插件专用样式
├── script.js             # 主要功能脚本
├── styles.css            # 原始样式文件
├── index.html            # 原始网页版本
├── icons/                # 插件图标
│   ├── icon16.png
│   ├── icon32.png
│   ├── icon48.png
│   └── icon128.png
└── lib/                  # 外部库文件
    ├── qrcode.min.js
    └── crypto-js.min.js

开发说明

添加新工具

  1. index.html 中添加新的tab按钮和面板
  2. styles.css 中添加相应样式
  3. script.js 中实现工具逻辑
  4. init() 方法中调用新工具的初始化函数

许可证

MIT License

贡献

欢迎提交Issue和Pull Request来改进这个工具库!

About

前端常用工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors