DevOpsKit 是一个基于 Vue 3 + Vite + Element Plus 构建的前端工具箱，面向研发、测试和运维场景，提供文本处理、字符编码速查、编解码、摘要计算、时间戳转换、图片转换、拼豆图纸和测试数据生成等常用能力。
演示地址：https://www.xueyu123.work/dev-ops-kit
项目当前以 SPA 形式运行，首页和顶部导航由配置驱动，支持关键词搜索、热门工具推荐，以及基于本地访问记录的常用工具展示。
| 工具 | 路由 | 功能说明 |
|---|---|---|
| 文本比对 | /text-diff |
支持代码与文本差异对比，提供并排 (Split) 和统一 (Unified) 视图。 |
| JSON 工具 | /json-tools |
提供格式化、压缩、转译、解析及树形结构查看。 |
| PDM 解析 | /pdm-parser |
本地解析 PowerDesigner .pdm 文件，提取表结构、字段、主键与备注并导出文档。 |
| Mermaid 渲染 | /mermaid-editor |
支持交互式 Mermaid 语法渲染，可快速生成流程图、时序图并导出图片。 |
| ASCII 码对照表 | /ascii-table |
完整的 ASCII 码表速查，支持多种进制和控制字符的模糊搜索。 |
| ASCII 艺术字 | /ascii-banner |
生成 Spring Boot 风格的艺术字 Banner，支持多种字体及中文支持。 |
| 正则测试 | /regex-tester |
在线测试正则表达式，支持全局、忽略大小写匹配，实时展示匹配结果及分组信息。 |
| 工作量评估 (PERT) | /pert-estimate |
支持单任务三点估算、多任务工作量与风险汇总，提供任务估算区间、方差贡献排名和预算达成概率图表。 |
| 文件在线预览 | /file-viewer |
支持 PDF、Office 文档、图片、音视频、代码/文本及压缩包的在线预览。支持本地文件拖拽与网络 URL 链接解析预览（自动处理 Content-Disposition 请求头获取文件名）。 |
| 工具 | 路由 | 功能说明 |
|---|---|---|
| Base64 编解码 | /base64 |
快速进行 Base64 文本的互转及复制。 |
| 图片转 Base64 | /image-to-base64 |
支持图片预览、格式检测及多种输出语法（CSS/HTML）。 |
| Base64 转图片 | /base64-to-image |
将 Base64 还原为图片并提供详细指标及下载。 |
| URL 编解码 | /url-encode |
处理 URI 字符串中的特殊字符转义，解决中文乱码。 |
| Unicode 编码转换 | /unicode-converter |
提供文本与 Unicode 转义序列 (\uXXXX)、HTML 字符实体间的双向转换。 |
| HTML 编解码 | /html-encode |
对 HTML 特殊字符 (<, >, &, ") 进行实体转义与还原，避免误解析。 |
| Hash 生成器 | /hash-gen |
本地计算 MD5, SHA1, SHA256 等摘要，支持文件/文本，保证隐私。 |
| 密码生成器 | /password-generator |
支持长度、字符集自定义，可排除混淆字符，支持强密码批量生成。 |
| JWT 工具 | /jwt-tools |
JWT 在线解码与三段结构拆分高亮、RFC 7519 标准 Claims 分析、HMAC/RSA 签名校验与 Token 生成。 |
| 工具 | 路由 | 功能说明 |
|---|---|---|
| 时间戳转换 | /timestamp-converter |
Unix 时间戳（秒/毫秒）与日期互转，支持 全球 27 个时区。 |
| 二维码生成器 | /qrcode-generator |
自定义 Logo、颜色、尺寸，快速生成并下载高清二维码。 |
| MP3 截取 | /mp3-cutter |
上传 MP3 后选择时间段，支持片段实时试听并导出为 MP3。 |
| 身份证生成器 | /id-card-generator |
生成符合校验位规则的虚拟身份证号，用于研发联调模拟。 |
| 颜色转换器 | /color-converter |
支持 HEX / RGB / HSL 联动转换，自动生成衍生色（Tints/Shades）及 UI 状态色。 |
| 进制转换 | /base-converter |
支持 2, 8, 10, 16 进制实时互转，支持 BigInt 大数及分段预览。 |
| CSS 渐变生成器 | /css-gradient |
本地生成跨浏览器兼容的线性/径向渐变代码，支持多色预设与随机化。 |
| 测试文件生成器 | /dummy-file-generator |
指定大小(Byte/KB/MB/GB)自动填充并极速下载 txt 测试文件。 |
| 图片转 ICO | /image-to-ico |
纯前端将 PNG、JPG、WebP、SVG 等图片转换为多尺寸 Windows/Favicon .ico 图标。 |
| 拼豆图纸生成器 | /bead-pattern |
图片转 ARTKAL 拼豆图纸，支持参数自动更新、行列坐标与色号、缩放预览、用料统计及 PNG / CSV 导出。 |
| 工具 | 路由 | 功能说明 |
|---|---|---|
| Docker 备查 | /docker-commands |
镜像、容器、网络、Compose 等分类整理的常用 Docker 命令集。 |
| Nginx 备查 | /nginx-reference |
包含常用 CLI 命令及反向代理、SSL 等常用配置模板。 |
- 热门工具：默认推荐 JSON 工具、拼豆图纸、文本比对和二维码生成器，可通过
src/config/tool-categories.js中的popularToolIds调整顺序与内容。 - 常用工具：按成功进入工具页面的访问次数排序，同次数时最近访问的优先，最多显示 4 个；没有访问记录时隐藏该区域。记录覆盖首页卡片、导航菜单、直接打开链接、刷新和再次进入，不统计首页、未知工具、失败导航，以及同一工具内仅查询参数或锚点的变化。
- 本地记录：通过
localStorage的devopskit-tool-usage保存工具 ID、访问次数和最近访问时间，无需登录；首页支持清空记录，同一站点的浏览器标签页可同步变化，记录不跨浏览器或设备同步。 - 异常处理：自动忽略损坏或无效记录；浏览器禁止存储或写入失败时，降级为当前会话内统计，不影响工具访问。
- 搜索：按名称、描述和关键词模糊匹配。搜索时只展示匹配的工具分类，避免常用区与热门区重复展示。
访问统计由独立 Hook src/composables/useToolUsage.js 管理：useToolUsage() 提供 frequentTools 和 clearUsage()，路由在成功切换到工具页面后调用 recordToolVisit(path)。数据校验、次数更新与排序逻辑位于 src/utils/tool-usage.js。
- 图片与尺寸：支持 PNG、JPG、WebP，单张不超过 20MB、4000 万像素；提供完整图片和居中正方形两种范围，最大边长可设为 16–512 格，另一边按比例计算。
- 采样与配色：使用 ARTKAL S 5mm 的 S01–S64 参考色卡，提供 16 / 24 / 32 / 64 色子集；支持平均取色、中心取色，以及透明区域留空或铺白底。屏幕颜色仅供预览，备料请核对实物色卡。
- 自动更新：上传后自动生成图纸，调整参数后约 300ms 更新；连续调整会取消旧任务，只保留最新结果。更新时显示 loading，完成前禁用导出，失败时展示提示。
- 预览与定位：显示行列坐标、逐格色号与每 5 / 10 格辅助线；点击格子查看行、列和色号，坐标从左上角的 1 开始。支持自动适应、百分比快捷按钮、下拉选择及 Ctrl / Cmd + 鼠标滚轮缩放。
- 用料与导出：在弹窗内查看颜色用量，支持按数量或色号排序；可导出带坐标、色号和用料图例的 PNG 图纸，以及 CSV 用料清单。所有图片处理均在浏览器本地完成。
色卡与配色思路参考 AsZer0s/PinDouStudio，相关上游内容采用 MIT 许可。
- 三点估算：输入乐观值 O、最可能值 M、悲观值 P，支持经典 PERT、算术平均及自定义 M 权重，计算期望值、标准差、方差和风险等级。
- 多任务评估：支持添加、复制、排序和删除任务，切换工作量单位与显示精度；仅将有效任务计入汇总，按任务方差相加后开平方计算总标准差。
- 图表分析：使用 ECharts 展示 O～P 估算区间及 M、Te 标记、任务方差贡献排名，以及与目标预算输入联动的达成概率曲线；支持深浅色主题和多任务滚动查看。
- 示例与导出：加载示例项目前需确认覆盖当前任务数据；支持复制 Markdown 表格、导出 CSV 和复制评估总结报告。
- 模型边界：预算达成概率基于任务独立假设与正态近似。当前各权重模式均沿用
σ = (P - O) / 6的标准差口径，不代表严格的三角分布模拟；人天、人时及故事点等工作量预算不等同于实际交付日期。
- 框架: Vue 3 (Composition API +
<script setup>) - 构建: Vite 8
- UI: Element Plus
- 工具库: VueUse, Day.js (时区处理)
- 统计图表: Apache ECharts (PERT 估算与风险分析)
- 工程化: unplugin-auto-import, unplugin-vue-components, unplugin-icons
- 算法/解析:
mermaid,hash-wasm,figlet,canvas,vue-diff,pdfjs-dist,@open-file-viewer/vue,big.js(PERT 高精度计算)
- 克隆并安装依赖:
npm install
- 启动开发环境:
npm run dev
- 构建生产版本:
npm run build
src/
├─ config/
│ └─ tool-categories.js # 导航、分类、热门工具及工具元数据配置
├─ composables/
│ ├─ useToolUsage.js # 工具访问统计、常用排序与本地存储 Hook
│ └─ ... # 其他通用组合式逻辑
├─ views/
│ ├─ Home.vue # 首页搜索、常用工具及热门推荐
│ ├─ bead-pattern/ # 图片转拼豆图纸、预览与用料导出
│ ├─ ascii-banner/ # ASCII 艺术字生成 (New!)
│ ├─ pdm-parser/ # PDM 解析 (New!)
│ ├─ regex-tester/ # 正则表达式测试 (New!)
│ ├─ pert-estimate/ # PERT 工作量估算与统计图表
│ ├─ mp3-cutter/ # MP3 音频截取 (New!)
│ ├─ base-converter/ # 进制转换
│ ├─ image-to-base64/ # 图片转 Base64
│ ├─ base64-to-image/ # Base64 转图片
│ ├─ timestamp-converter/ # 时间戳转换
│ ├─ unicode-converter/ # Unicode 编码转换 (New!)
│ ├─ html-encode/ # HTML 编解码 (New!)
│ ├─ jwt-tools/ # JWT 解码、签名校验与生成 (New!)
│ ├─ css-gradient/ # CSS 渐变生成器 (New!)
│ ├─ file-viewer/ # 文件在线预览 (New!)
│ ├─ dummy-file-generator/ # 测试文件生成器 (New!)
│ ├─ image-to-ico/ # 图片转 ICO (New!)
│ ├─ ... # 其他工具页面
├─ layout/ # 响应式布局组件
├─ router/ # 动态路由配置
├─ utils/
│ ├─ ico/ # ICO 二进制编码与图像转换核心模块 (New!)
│ ├─ tool-usage.js # 访问记录校验、次数更新与常用排序
│ └─ nprogress.js # 增强型进度条控制 (带防抖优化)
├─ App.vue
└─ main.js # 入口文件
- 自动导入: 项目已启用全量自动导入，Vue API、Element Plus 组件、VueUse 方法、Iconify 图标（前缀为
IconEp）等无需手动 import。 - 配置驱动: 新增工具需在
src/config/tool-categories.js补充元数据，首页和菜单将自动渲染。 - 访问统计: 工具访问统一由路由成功切换后的钩子记录，不要在首页点击或工具组件中重复计数；常用工具状态通过
useToolUsage()获取。 - 命名规范: 页面目录使用
kebab-case，路由名使用camelCase。
- 数据隐私: 所有转换逻辑（如 Hash、密码、图片处理、ICO 编码、JWT 解析校验）均在浏览器本地完成，绝不上传您的任何隐私数据与密钥。
- 合规使用: 身份证生成等工具仅供研发调试使用，严禁用于任何非法途径。
- 文本差异比对：支持 Split / Unified 视图与超大代码/文本差异比对
- ASCII 艺术字生成：支持 Spring Boot Banner 风格与多字体预设
- PowerDesigner 解析：本地解析 PDM 文件提取表结构并导出文档
- 文件在线预览：支持 PDF、Office 文档、图片、音视频及压缩包本地在线预览
- 正则在线测试：支持实时分组匹配与常用正则表达式库
- PERT 工作量评估：支持三点估算、多任务方差合成、任务区间与方差贡献图表及预算达成概率分析
- Base64 编解码：支持文本/图片双向转换与 Data URI 生成
- Unicode 编码转换：支持文本与 Unicode 转义序列 (
\uXXXX) 及 HTML 字符实体互转 - HTML 编解码：对 HTML 敏感字符（
<,>,&,",'）进行实体转义与还原 - 摘要计算与强密码生成：支持 MD5/SHA1/SHA256 摘要与高强度规则随机密码生成
- JWT 解码与签名校验：支持 JWT 结构色彩拆分、RFC 7519 7个标准字段分析、Claims 过期时间计算，以及 HMAC (HS256/384/512) 与 RSA (RS256/384/512) 本地签名校验与生成
- 拼豆图纸生成器：图片本地转换、ARTKAL 参考配色、参数自动更新、坐标与色号预览、用料弹窗及 PNG / CSV 导出
- 图片转 ICO (Favicon) 生成器：纯前端将 PNG/JPG/WebP/SVG 转为包含 16~256 多尺寸的标准 Windows/Web ICO 图标
- 全球 27 时区时间戳转换：接入 Day.js 提供精准全球时区转换与格式化
- 多进制转换器：支持 2 / 8 / 10 / 16 进制大数实时互转
- CSS 渐变生成器：支持线性/径向渐变在线预览与 CSS 代码一键导出
- 测试文件生成器：指定大小快速生成并下载测试文本文件
- 热门工具推荐：通过配置维护首页热门工具入口
- 常用工具：基于路由访问次数与最近访问时间排序，支持本地保存、标签页同步及清空记录
- 图片在线压缩与裁剪：支持质量调优、常用尺寸压制与 WebP 格式导出
- Cron 表达式生成与测试：可视化配置定时任务 Cron 表达式及运行时间推演
- 单元测试体系：引入 Vitest 建立核心编解码与数据解析算法自动化测试
本项目基于 木兰宽松许可证，第 2 版（Mulan PSL v2） 开源，使用、修改及分发时请遵守许可证中的相关条款。