17 · 附录：全工具速查矩阵
一句话摘要：142 个工具的全量清单——id、名称、布局、是否有专属测试，按 9 分类分组；布局与测试列可直接用于统计与排期。
目标读者：全体 ｜ 关联文档：00 总纲 · 03 登记体系 · 04 布局体系
口径说明：id 与 layout 摘自 src/config/tools/catalog.ts（唯一真源）；「测试 ✓」= src/views/tools/ 下存在该页面的专属 *.dom.test.ts（全部 11 个，见文末清单），未标注者仅被全页巡检 allToolPages.dom.test.ts 覆盖。注意页面文件名 ≠ id 的机械映射（如 text-base64-encode → text/Base64Page.vue、encrypt-jwt → encrypt/JwtToolPage.vue、encrypt-data-mask → generate/MaskGeneratorPage.vue）——这正是 toolComponents.ts 必须手工登记的原因（03 §2.1）。
json · JSON 工具（12，全部 workbench）
| id | 名称 | layout | 测试 |
|---|
| json-toolbox | JSON 工具箱 | workbench | ✓ |
| json-convert-format | JSON 格式互转 | workbench | — |
| json-transform | JSON 结构处理 | workbench | — |
| json-key-case | JSON 键名转换 | workbench | — |
| json-escape | JSON 转义/反转义 | workbench | — |
| sql-to-json | SQL 转 JSON | workbench | — |
| json-tree | JSON 树形浏览 | workbench | — |
| json-path | JSONPath 查询 | workbench | — |
| json-diff | JSON Diff 对比 | workbench | — |
| json-mock-data | OpenAPI 模拟数据生成器 | workbench | — |
| json-anonymizer | JSON 匿名化处理器 | workbench | — |
| json-jsonl | JSON Lines 工具 | workbench | — |
color · 色彩工具（15）
| id | 名称 | layout | 测试 |
|---|
| color-contrast | 颜色对比度 | workbench | — |
| color-mix | 颜色混合 | workbench | — |
| color-blind | 色盲模拟 | workbench | — |
| color-oklch | OKLCH 探索器 | workbench | — |
| color-code-generator | 颜色代码生成工具 | workbench | — |
| color-brightness | 颜色明度调节 | centered | — |
| color-grayscale | 颜色灰阶转换 | centered | — |
| color-gradient | 渐变生成器 | centered | — |
| color-random | 随机配色生成 | centered | — |
| color-palette | 调色板提取 | centered | — |
| color-harmony | 颜色和谐 | centered | — |
| color-tailwind | Tailwind 色板生成 | centered | — |
| color-names | CSS 命名颜色值 | centered | — |
| color-image-gradient | 图片转 CSS 渐变 | centered | — |
| color-format-converter | 颜色格式转换器 | centered | ✓（text/ColorConverterPage.dom.test.ts） |
text · 文本工具（19）
| id | 名称 | layout | 测试 |
|---|
| text-base64-encode | Base64 编解码器 | workbench | ✓ |
| text-case | 命名风格转换 | workbench | ✓ |
| text-ascii-binary | ASCII 二进制转换器 | workbench | ✓ |
| text-url-encode | URL 编解码 | workbench | ✓ |
| text-encode-workbench | 编码解码工作台 | workbench | — |
| text-html-entity | HTML 实体转义 | workbench | — |
| text-base-converter | 整数进制转换器 | workbench | — |
| text-unicode | Unicode 转义工具 | workbench | — |
| text-utf-codec | UTF-8/16/32 编解码 | workbench | — |
| text-slugify | Slugify 字符串转换器 | workbench | — |
| text-regex-lab | 正则实验室 | workbench | — |
| text-mask | 文本掩码脱敏 | workbench | — |
| text-batch-compose | 批量文本拼接 | centered | — |
| text-datetime-converter | 日期时间转换器 | centered | — |
| text-statistics | 文本统计分析 | centered | — |
| text-ascii-table | ASCII 码表 | centered | — |
| text-lorem | Lorem Ipsum 生成工具 | centered | — |
| text-regex-visualizer | 正则可视化说明生成器 | centered | — |
| text-csv-sample | CSV 示例数据生成器 | centered | — |
dev · 编程工具（40：workbench 25 / centered 15）
| id | 名称 | layout | 测试 |
|---|
| dev-format | 代码格式化 | workbench | — |
| dev-compress | 代码压缩 | workbench | — |
| dev-diff | 代码对比 | workbench | — |
| dev-api-debugger | API 请求调试器 | workbench | — |
| dev-openapi | OpenAPI 工具 | workbench | — |
| dev-basic-auth | Basic Auth 生成器 | workbench | — |
| dev-otp-generator | OTP 验证码生成器 | workbench | — |
| dev-chmod-calculator | Chmod 计算器 | workbench | — |
| dev-sql-format | SQL 格式化工具 | workbench | — |
| dev-markdown-to-html | Markdown 转 HTML | workbench | — |
| dev-code-image | 代码块生成图片 | workbench | — |
| dev-umask-calculator | Umask 计算器 | workbench | — |
| dev-html-to-markdown | HTML 转 Markdown | workbench | — |
| dev-semver | SemVer 版本校验 | workbench | — |
| dev-ieee754 | IEEE 754 浮点工具 | workbench | — |
| dev-api-response | API 响应模拟生成器 | workbench | — |
| dev-db-schema | 数据库表结构生成器 | workbench | — |
| dev-css-theme | CSS 主题变量生成器 | workbench | — |
| dev-api-request | API 请求示例生成器 | workbench | — |
| dev-file-tree | 文件目录树生成器 | workbench | — |
| dev-markdown-generator | Markdown 文档生成器 | workbench | — |
| dev-sql-insert | SQL INSERT 生成器 | workbench | — |
| dev-er-diagram | ER 图设计器 | workbench | — |
| dev-ts-to-mock | TypeScript 转 Mock | workbench | — |
| dev-nanoid | NanoID 生成器 | workbench | — |
| dev-device-info | 设备信息 | centered | — |
| dev-ua-parser | User-Agent 解析 | centered | — |
| dev-keycode | Keycode 查询 | centered | — |
| dev-crontab-generator | Crontab 表达式生成器 | centered | — |
| dev-universal-code-block | 统一代码块展示 | centered | — |
| dev-screen-recorder | 前端录屏（rrweb） | centered | — |
| dev-random-ua | 随机 UA 生成 | centered | — |
| dev-ip-info | IP 信息查询 | centered | — |
| dev-timezone | 时区转换 | centered | — |
| dev-uuid | UUID 生成工具 | centered | — |
| dev-code-snippet | 代码片段生成器 | centered | — |
| dev-version-generator | 版本号生成器 | centered | — |
| dev-mock-dict | Mock 数据字典生成器 | centered | — |
| dev-openapi-schema | OpenAPI Schema 生成器 | centered | — |
| dev-ulid | ULID 生成器 | centered | — |
network · 网络工具（9：workbench 7 / centered 2）
| id | 名称 | layout | 测试 |
|---|
| network-ipv4-subnet-calculator | IPv4 CIDR 子网计算器 | workbench | — |
| network-http-header-parser | HTTP Header 解析格式化 | workbench | — |
| network-ipv4-radix-converter | IPv4 进制转换器 | workbench | — |
| network-ipv6-converter | IPv6 展开压缩工具 | workbench | — |
| network-port-list-organizer | 端口清单整理工具 | workbench | — |
| network-ip-acl-organizer | IP ACL 规则整理工具 | workbench | — |
| network-wifi-qr | WiFi QR 码生成器 | workbench | — |
| network-http-status | HTTP 状态码速查 | centered | — |
| network-dns-records-generator | DNS 记录模板生成器 | centered | — |
image · 图片工具（25：canvas 23 / workbench 2）
| id | 名称 | layout | 测试 |
|---|
| image-crop | 图片裁剪 | canvas | — |
| image-resize | 图片尺寸缩放 | canvas | — |
| image-compress | 图片压缩 | canvas | — |
| image-favicon | Favicon 图标生成 | canvas | — |
| image-placeholder | 占位图生成 | canvas | — |
| image-convert | 图片格式转换 | canvas | — |
| image-watermark | 图片水印 | canvas | — |
| image-merge | 图片拼接 | canvas | — |
| image-base64 | 图片 Base64 互转 | canvas | — |
| image-gif | GIF 拆帧与合成 | canvas | — |
| image-redact | 图片打码 | canvas | — |
| image-transform | 图片旋转翻转 | canvas | — |
| image-to-pdf | 图片转 PDF | canvas | — |
| image-palette | 图片颜色提取 | canvas | — |
| image-slice | 长图切片 | canvas | — |
| image-grid-slice | 九宫格切图 | canvas | — |
| image-color-adjust | 图片色彩调整 | canvas | — |
| image-border | 图片边框与投影 | canvas | — |
| image-dedupe | 图片去重 | canvas | — |
| image-sprite | 雪碧图生成 | canvas | — |
| image-grayscale | 图片灰阶转换 | canvas | — |
| image-editor | 图片编辑器 | canvas | ✓ |
| image-svg-editor | SVG 编辑与压缩 | canvas | ✓ |
| image-qrcode | 二维码生成工具 | workbench | — |
| image-avatar | 随机头像生成器 | workbench | — |
encrypt · 加密工具（8：workbench 5 / centered 3）
| id | 名称 | layout | 测试 |
|---|
| encrypt-aes | AES 加密/解密 | workbench | ✓ |
| encrypt-hash | 哈希计算 | workbench | — |
| encrypt-hmac | HMAC 计算 | workbench | — |
| encrypt-password | 随机密码生成工具 | workbench | — |
| encrypt-passphrase | 口令短语生成器 | workbench | — |
| encrypt-jwt | JWT 生成/解析 | centered | ✓ |
| encrypt-password-strength | 密码强度检测器 | centered | — |
| encrypt-data-mask | 数据脱敏规则生成器 | centered | ✓（generate/MaskGeneratorPage.dom.test.ts） |
site · 网站工具（10：workbench 9 / centered 1）
| id | 名称 | layout | 测试 |
|---|
| site-url-parser | 网站 URL 解析器 | workbench | — |
| site-query-params | 网站 Query 参数转换 | workbench | — |
| site-sitemap | Sitemap XML 生成工具 | workbench | — |
| site-robots | robots.txt 生成工具 | workbench | — |
| site-seo-meta | SEO head 片段（JSON 配置） | workbench | — |
| site-manifest | Web Manifest 生成工具 | workbench | — |
| site-redirect-rules | 重定向规则生成器 | workbench | — |
| site-title-description | Title/Description 检错 | workbench | — |
| site-og-meta | OG 社交卡片标签 | workbench | — |
| site-og-preview | Open Graph 预览 | centered | — |
run · 运行工具（4，全部 canvas）
| id | 名称 | layout | 测试 |
|---|
| run-js-ts | JS / TS 运行 | canvas | — |
| run-vue | Vue SFC 在线运行 | canvas | — |
| run-react | React / TSX 在线运行 | canvas | — |
| run-web | HTML / CSS / JS 在线运行 | canvas | — |
汇总统计
| 维度 | 数值 |
|---|
| 工具总数 | 142（json 12 · color 15 · text 19 · dev 40 · network 9 · image 25 · encrypt 8 · site 10 · run 4） |
| layout 分布 | workbench 77 / centered 38 / canvas 27 |
| workbench 按分类 | json 12 · dev 25 · text 12 · site 9 · network 7 · color 5 · encrypt 5 · image 2 |
| centered 按分类 | dev 15 · color 10 · text 7 · encrypt 3 · network 2 · site 1 |
| canvas 按分类 | image 23 · run 4 |
| 专属测试覆盖 | 11 / 142（json-toolbox、text-case、text-base64-encode、text-ascii-binary、text-url-encode、color-format-converter、encrypt-aes、encrypt-jwt、encrypt-data-mask、image-editor、image-svg-editor）；其余 131 页仅由全页巡检 allToolPages.dom.test.ts 覆盖 |