DevX 是一个专注于提升开发者体验的工具集合,提供多种常用的开发工具,帮助开发者提高工作效率。
DevX 提供以下工具和功能:
- 时间戳转换器:Unix 时间戳与日期时间的互相转换
- JSON 格式化工具:格式化、压缩和验证 JSON 数据
- IP 地址查询:获取本机 IPv4、IPv6 地址信息
- Base64 编解码:文本与 Base64 编码的互相转换
- URL 编解码:URL 编码与解码转换
- MD5/SHA 加密:计算文本的 MD5、SHA1、SHA256 和 SHA512 哈希值
- 正则表达式测试:在线测试和调试正则表达式
- 文本对比工具:比较两段文本的差异
- 代码格式化:HTML、CSS、JavaScript 等代码格式化和压缩
- 🌓 支持亮色/暗色主题切换
- 📱 响应式设计,适配各种设备
- 🔍 工具搜索功能
- 📋 一键复制结果
- 🔒 纯客户端处理,数据不会上传到服务器
访问 https://devx.org.cn 体验在线版本。
- 前端框架:Next.js 16
- UI 组件:shadcn/ui
- 样式:Tailwind CSS
- 图标:Lucide React
- 主题:next-themes
- 部署:Docker, Nginx
- CI/CD:GitHub Actions
环境要求:Node.js >= 22(建议搭配 npm 10+)
- 克隆仓库
git clone https://github.com/l3m0nc9/DevX.git
cd DevX- 安装依赖(项目使用 npm)
npm install- 启动开发服务器
npm run dev- 打开浏览器访问 http://localhost:3000
- 克隆仓库
git clone https://github.com/l3m0nc9/DevX.git
cd DevX- 配置环境变量
cp .env.example .env
# 编辑 .env 设置所需变量- 启动服务
docker-compose up -d --build- 克隆仓库
git clone https://github.com/l3m0nc9/DevX.git
cd DevX- 安装依赖
npm install- 构建应用
npm run build- 启动应用
npm run start- 如需反向代理,请自行配置 Nginx/Traefik 等(仓库未提供示例配置)
- 在
lib/tools-data.ts中添加工具信息
{
title: "新工具名称",
description: "新工具描述",
icon: "icon-name", // 从 lucide-react 中选择图标
href: "/tools/new-tool",
color: "bg-emerald-500",
category: "common", // 可选: common, encoding, text
}- 在
app/tools/new-tool/目录下创建page.tsx
"use client"
import { useState } from "react"
import { ToolPageLayout } from "@/components/tool-page-layout"
export default function NewTool() {
// 工具实现逻辑
return (
<ToolPageLayout title="新工具名称" description="新工具描述">
{/* 工具 UI 实现 */}
</ToolPageLayout>
)
}- 使用 ESLint 保持代码风格一致
- 运行
npm lint检查代码问题 - 若需格式化,请在本地配置 Prettier 后执行对应命令(仓库未内置 format 脚本)
- 当前未提供测试脚本;如需测试,请自行添加(推荐 Vitest/Jest 搭配 Testing Library)
DevX/
├── app/ # Next.js 应用目录
│ ├── api/ # API 路由
│ ├── tools/ # 工具页面
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 根布局组件
│ └── page.tsx # 首页
├── components/ # 共享组件
│ ├── ui/ # UI 组件 (shadcn/ui)
│ ├── tool-card.tsx # 工具卡片组件
│ ├── tool-page-layout.tsx # 工具页面布局
│ └── ...
├── lib/ # 工具函数和数据
│ ├── tools-data.ts # 工具数据
│ ├── site-config.ts # 站点配置
│ └── ...
├── public/ # 静态资源
├── docker-compose.yml # Docker Compose 配置
├── Dockerfile # Docker 配置
└── ...
我们欢迎并感谢任何形式的贡献!
- Fork 这个仓库
- 创建你的特性分支 (
git checkout -b feature/amazing-feature) - 提交你的更改 (
git commit -m 'Add some amazing feature') - 推送到分支 (
git push origin feature/amazing-feature) - 开启一个 Pull Request
- 添加新工具
- 改进现有工具
- 修复 bug
- 改进文档
- 优化性能
- 提出新功能建议
本项目采用 Apache License 许可证 - 查看 LICENSE 文件了解详情。
如果你喜欢这个项目,请给它一个 ⭐️!
有问题或建议?开一个 issue 或联系我们:l3m0nc9@gmail.com