文本处理工具页

文档编号 02

02 - 文本工具页（原 JSON 工具）

初版日期：2026-04-24 | 最后更新：2026-05-14
涉及文件：usr/themes/classic-22/json-tool.php

背景

为网站新增一个在线文本工具页面，路径 /json，供用户进行 JSON 格式化/压缩、Unicode/URL 编解码、MD5/SHA-256/Base64 加密等操作，全部为纯前端实现，无外部依赖。

当前功能清单（2026-05-14）

分组	子功能	实现方式
JSON	格式化	`JSON.parse` → `JSON.stringify(obj, null, 2)`
JSON	压缩	`JSON.parse` → `JSON.stringify(obj)`
编码	中文转Unicode	正则替换 CJK 字符为 `\\uXXXX`
编码	Unicode转中文	正则还原 `\\uXXXX` 为中文
编码	Url编码	`encodeURIComponent()`
编码	Url解码	`decodeURIComponent()`，失败时提示非法百分号编码
加密	MD5加密(整体)	纯 JS 实现（RFC 1321），支持 Unicode 输入
加密	SHA256加密(整体)	`SubtleCrypto.digest('SHA-256')`，需 HTTPS
加密	MD5加密(单行)	每行独立 `md5()`，输出行数 = 输入行数
加密	SHA256加密(单行)	每行独立 `SubtleCrypto.digest`，`Promise.all` 聚合
加密	Base64加密	`TextEncoder` → `btoa()`，完整支持中文
加密	Base64解密	`atob()` → `TextDecoder()`，非法输入提示错误
T2I	高亮	Toggle：5层嵌套括号颜色，权重前缀标签，语法校验通过后激活，只读视图切换
T2I	展开	递归下降 parser，将压缩 prompt 展开为 4 空格缩进多行格式
T2I	压缩	逐字符扫描，以 `{}` 匹配剥离结构空白，容错用户手改缩进
右侧	复制	`navigator.clipboard.writeText`，降级 `execCommand('copy')`
右侧	清除	清空 textarea，重置状态栏

文件结构

json-tool.php
├── docblock（模板名「文本工具」）
├── <style> 内联 CSS（复用 pico CSS 变量，含 .hl-active / .t2i-highlight-active）
├── header.php（导航栏）
├── <main> 工具区
│   ├── 工具栏：JSON / 编码 / 加密 / T2I 下拉组 + 复制 / 清除
│   ├── 编辑器：行号 + <textarea> + #t2i-highlight-view（高亮只读层，默认隐藏）
│   └── 状态栏：字符数 / 行数 / 操作结果
├── <script> 内联 JS（纯原生 ES6，无框架依赖）
│   ├── 原有功能：JSON / 编码 / 加密 / 复制 / 清除
│   └── T2I 新增：validatePromptSyntax / renderHighlight / expandPrompt / compressPrompt
└── footer.php

输入限制与状态栏

字符数实时计数，≥ 90000 时橙色预警，maxlength 兜底上限 100000
行数实时计数，超 10000 行时橙色警告
JSON 校验仅在执行格式化/压缩时触发，输入过程中不做实时校验

样式适配

全部使用 --pico-* CSS 变量，深色/浅色主题无需额外适配
PC 端 textarea 高度：calc(100vh - 320px)，最小 400px
移动端（max-width: 767px）：按钮组换行，textarea 高度 60vh
移动端表单字号由 theme.css 全局规则保障 ≥ 16px（防 iOS Safari 缩放，见 E12）

后台配置（首次部署一次性操作）

后台 → 撰写 → 独立页面 → 新建：
- 标题：文本工具（或保留原来的标题）
- Slug：json
- 模板：选「文本工具」
- 内容：留空
访问 https://kaiwen.work/json 验证

T2I Prompt 语法高亮（2026-05-14 新增）

支持文生图 Prompt 的 {option1|option2} 语法可视化：

语法校验：validatePromptSyntax()，单次遍历 + 栈追踪嵌套层，检查括号闭合、空选项（允许 ≤1 个）、权重格式。报错带行号。
高亮渲染：renderHighlight()，逐字符遍历，5 层深度颜色循环（珊瑚红/金黄/草绿/天蓝/紫），| 橙色、权重 数字:: 青色标签、顶层 , muted。
展开：expandPrompt()，递归下降 parser，4 空格缩进，保留权重和逗号位置。
压缩：compressPrompt()，逐字符扫描，以 {} 匹配剥离结构空白，忽略用户修改的缩进量。
状态管理：高亮是 toggle 只读视图，展开/压缩后自动关闭高亮。

注意事项

SHA-256 依赖 SubtleCrypto，需 HTTPS；本地 http:// 开发环境下不可用
路径 /json 和数据库记录无需修改，仅模板文件升级