PS Infographic — 化工安全信息图生成器

Process Safety Infographic Generator.

输入一个化工安全关键词，自动输出一张可直接用于技术分享/培训的信息图 HTML。

触发关键词

以下表述均可触发本技能：

• "生成/做一张XXX的信息图"
• "XXX安全信息图"
• "PS信息图：XXX"
• 用户提供化工安全主题关键词，并明确要求生成信息图

工作流程

用户输入关键词
    ↓
① IMA 知识库搜索（主数据源）
    ↓ 结果不足
② Web 搜索补充（辅助数据源）
    ↓
③ 要点提炼（ljg-qa 逻辑结构）
    ↓
④ ljg-card -i 渲染信息图 HTML
    ↓
⑤ preview_url 预览 + 交付 HTML 文件

Step 1：IMA 化工工艺数据库搜索

知识库配置（固定）：

| 项目 | 值 |

|------|-----|

| 知识库名称 | 化工工艺数据库 |

| kb_id | ab9n_5rblYBTLWXftfs9AB5WAAfnCTixKA0FTYFNyVs= |

| API 路径 | openapi/wiki/v1/search_knowledge |

| 凭证路径 | ~/.config/ima/client_id + ~/.config/ima/api_key |

| 脚本路径 | C:/Users/rayzh/.workbuddy/skills/腾讯ima/ima_api.cjs |

调用命令：

node "C:/Users/rayzh/.workbuddy/skills/腾讯ima/ima_api.cjs" \
  "openapi/wiki/v1/search_knowledge" \
  '{"knowledge_base_id":"ab9n_5rblYBTLWXftfs9AB5WAAfnCTixKA0FTYFNyVs=","query":"KEYWORD","top_k":10,"search_mode":"hybrid"}'

关键经验：

• 知识库对短关键词响应更好（如"硝化"、"HAZOP"），复合长查询常返回空
• 建议先用短词试探，命中后根据返回标题细化
• 返回 media_type: 1 = PDF 文档，99 = 文件夹
• 若 info_list 为空，直接进入 Step 2

Step 2：Web 搜索补充

当知识库结果不足时，用 WebSearch + WebFetch 补充。

推荐搜索词模板：

• {关键词} 安全 危险性 控制措施
• {关键词} 重大隐患 判定 AQ 3067
• {关键词} 事故分析 预防措施
• AQ 3067 {关键词}（查找重大隐患判定中相关条款）

WebFetch 提取要点：

对搜索结果中政府网站（应急管理部、各省应急厅）、行业协会网站，用 WebFetch 提取正文，聚焦：

• 危险性特征 / 事故类型
• 安全控制措施 / 设计要求
• 相关法规条款（特别是 AQ 3067）

Step 3：要点提炼（ljg-qa 逻辑）

将检索内容结构化为故事链，适配信息图版面：

① 是什么（定义 + 核心特征）
② 为什么重要（危险性 / 事故后果 / 法规要求）
③ 怎么做（控制措施 / 设计要点 / 操作步骤）
④ 红线（重大隐患判定条款 / 禁止项）

信息密度判断：

• 稀（≤50字）→ 一个巨大锚点元素
• 中（50-200字）→ 2-3个区块，有主有次
• 密（200+字）→ 多区块网格，实验室手册感 ← 化工安全类多用此档

Step 4：信息图渲染（ljg-card -i 规范）

读取规范文件（每次均读）：

• 模板：C:/Users/rayzh/.agents/skills/ljg-card/assets/infograph_template.html
• 信息图规范：C:/Users/rayzh/.agents/skills/ljg-card/references/mode-infograph.md
• 设计品味：C:/Users/rayzh/.agents/skills/ljg-card/references/taste.md

化工安全类推荐配置：

| 参数 | 值 | 说明 |

|------|-----|------|

| 色调 | 浅色技术风（推荐） 或安全警示 | 浅色：--bg:#FFFFFF / --ink:#2C3E50 / --green:#3498DB / --pink:#E74C3C；技术：--bg:#F0F3F7 / --green:#8EAAB8 / --pink:#1A936F；警示：--bg:#F0F3F7 / --green:#3A7CA5 / --red:#C0392B |

| 密度 | 密 | 化工安全内容多，用密集排版 |

| 结构 | 层级 或 流程 | 按"危险→措施→法规"层级，或按操作步骤流程 |

| 情绪 | 技术 | mono 标注、网格底纹、数据密集 |

| 画布 | 1080px 宽 | 手机端缩放 2.8 倍后需可读 |

⚠️ 重要：默认使用浅色主题

参考用户反馈，深色背景虽然视觉冲击力强，但：

1. 长时间阅读疲劳
2. 打印/投影效果差
3. 化工安全类内容更适合专业、清晰的浅色风格

默认浅色配色方案（推荐）：

--bg: #FFFFFF（纯白背景）
--ink: #2C3E50（深蓝灰文字）
--green: #3498DB（信息蓝，用于措施/流程）
--pink: #E74C3C（警示红，用于危险/禁止）
--accent: #F39C12（强调橙，用于标签/高亮）

替代浅色方案（暖灰）：

--bg: #FAFBFC（暖灰白）
--ink: #1A252F（深墨蓝）
--green: #27AE60（安全绿）
--pink: #C0392B（深红）
--accent: #F39C12（琥珀）

化工安全类视觉增强规则（基于优秀信息图样本提炼）：

参考样本风格（移动式起重机/高处作业安全信息图）

核心特征：

• 纯白/浅灰背景（#FFFFFF 或 #F5F5F5），无深色压迫感
• 彩色标题栏（蓝/绿/红/橙），每个区块一种颜色
• 图标化列表：每个要点配一个彩色图标，图标与文字同行
• 卡片式布局：圆角卡片 + 细边框 + 轻微阴影
• 底部深色收尾条：深蓝底 + 白色大字标语

1. 顶部大标题区（必做）：
• 主标题：大号深蓝灰文字（60-80px），关键词用红色高亮（如"吊装作业安全"）
• 副标题/标语：蓝底白字或红底白字的横幅条
• 右侧配图：相关设备/场景插图（SVG 或占位图）

1. 彩色标题栏卡片：
• 每个区块用彩色标题栏（蓝/绿/红/橙/紫）+ 白色内容区
• 标题栏包含：圆形编号徽章（白底彩色数字）+ 短标题（4-6字）
• 内容区用图标+文字列表，每个要点一行，图标在左、文字在右

1. 图标化列表（核心）：
• 每个要点配一个彩色图标（与标题栏同色或互补色）
• 图标大小：32-40px，置于文字左侧
• 图标风格：扁平化、线条简洁（参考：✓对勾、⚠警告、📋文档、👤人员、🔧工具等）
• 不用水印式大图标，用行内小图标

1. "十不吊"/"十不准"类禁止清单：
• 用红色标题栏 + 红色圆圈编号（白字）
• 每条左侧配禁止图标（🚫或⚠️）
• 可配合示意图（如吊臂回转半径图）

1. 分级/分类展示：
• 用彩色标签区分等级（如：一级/二级/三级，蓝/橙/红）
• 或用色块表格（如风力等级表：绿/黄/红渐变）

1. 中间示意图区：
• 流程类：用人物示意图展示正确/错误姿势
• 设备类：用设备结构图标注关键部位
• 区域类：用俯视图/示意图标注危险区、作业区

1. 口诀/金句区：
• 用彩色圆角卡片（黄底或橙底）突出显示
• 配合图标阵列（如安全帽、安全带、高挂低用等图标一字排开）
• 文字简短有力，朗朗上口

1. 底部深色收尾条（必做）：
• 深蓝底（#1A3A5C）+ 白色大字标语
• 左右配盾牌图标或相关剪影
• 标语对仗工整（如"安全来自警惕 事故出于麻痹"）
• 左下角署名（必做）：标语下方左侧显示 Ray谈化工 · PS Inforgraphic，样式为半透明白色 rgba(255,255,255,0.55)，字号 16px，字母间距 1px，与右侧参考信息风格一致

1. 配色方案（参考样本）：

```

背景：#FFFFFF（纯白）

主文字：#1A3A5C（深海蓝）

标题栏蓝：#2E5C8A（准备/措施类）

标题栏绿：#4A9B5E（安全/通过类）

标题栏红：#C84B4B（危险/禁止类）

标题栏橙：#E8913A（注意/警告类）

标题栏紫：#7B68A6（设备/工具类）

底部条：#1A3A5C（深海蓝）

```

1. 卡片样式细节：
• 圆角：12-16px
• 边框：1px solid #E0E0E0 或无边框
• 阴影：0 2px 8px rgba(0,0,0,0.08)
• 间距：卡片之间 16-24px

1. 字体层级：
• 主标题：64-80px，粗体，深蓝灰
• 标题栏文字：28-36px，白色，粗体
• 列表文字：24-28px，深灰
• 底部标语：36-48px，白色，粗体

主题专项布局指引

不同化工安全主题适合不同的布局模式。根据关键词自动判断并选择：

类型 A：事故分析类（关键词含"事故""调查""XX爆炸""XX泄漏"等）

• 推荐结构：时间轴（accordion 或 step 列表）
• 布局模式：

1. 顶部：大标题 + 事故基本信息卡片（蓝底白字标题栏）
2. 事故经过：橙色标题栏卡片，内含时间轴或流程图
3. 原因分析：红色标题栏卡片，分"直接原因""间接原因""管理原因"三个子区块
4. 防范措施：绿色标题栏卡片，列出整改建议（图标化列表）
5. 底部：深蓝底收尾条，配金句标语
• 色彩方案：蓝色（概况）→ 橙色（经过）→ 红色（原因）→ 绿色（措施）→ 深蓝底收尾

类型 B：工艺安全类（关键词含"硝化""氯化""HAZOP""LOPA"等工艺或分析方法）

• 推荐结构：彩色标题栏卡片组（定义→危险性→控制措施→法规红线）
• 布局模式：

1. 顶部：大标题 + 工艺定义卡片（蓝底白字标题栏）
2. 危险性分析：红色标题栏卡片，内含"爆炸类型""事故后果"等图标化列表
3. 控制措施：蓝色标题栏卡片，分"工程控制""管理控制""应急措施"三个子区块，各配图标
4. 法规红线：红色标题栏卡片，列出重大隐患判定条款（用红色圆圈编号）
5. 底部：深蓝底收尾条，配金句标语
• 色彩方案：蓝色（定义/措施）→ 红色（危险性/红线）→ 绿色（合规/通过）→ 深蓝底收尾

类型 C：制度标准类（关键词含"AQ""标准""规定""条例"等）

• 推荐结构：彩色标题栏卡片组（标准信息→核心条款→关键变化→实施要求）
• 布局模式：

1. 顶部：大标题 + 标准编号（深蓝灰文字，关键词用红色高亮）
2. 标准信息卡片：蓝色标题栏，内含标准编号、生效日期、适用范围（图标化列表）
3. 核心条款：非对称网格，重要条款用大卡片（红色标题栏），次要条款用小卡片（蓝色/绿色标题栏）
4. 关键变化：橙色标题栏卡片，列出与旧版对比（可用↑↓→符号表示变化方向）
5. 实施要求：绿色标题栏卡片，列出企业需采取的措施（图标化列表）
6. 底部：深蓝底收尾条
• 色彩方案：蓝色（标准信息）→ 红色（核心条款/重大变化）→ 橙色（关键变化）→ 绿色（实施要求）→ 深蓝底收尾

字体规范（手机端可读）：

• 最大元素：80-108px（作为"地形"，不只是文字）
• 标题：60-80px
• 正文：≥36px（手机上约 12.9px）
• 标注 / 来源：≥24px（手机上约 8.6px）
• 行高：≥1.6
• 最大:最小 ≥ 10:1

90/8/2 色彩法则：

• 90% 中性色（--bg + --ink 文字）
• 8% 结构色（--green 一个区块或色条）
• 2% 弹点色（--pink，整张图仅 1-2 处）

反死亡清单（必须检查）：

• [ ] 弹点色用了 >2 处 → 减少到 2 处以内
• [ ] 所有文字都在 30-44px 区间 → 需要有 ≥10:1 的大小对比
• [ ] 三列等宽布局 → 改为 2fr+1fr 或非对称网格
• [ ] 正文字号 <36px → 调到 36px 以上
• [ ] 换一个主题，这个布局还说得通 → 如果是，说明做的是模板而非设计
• [ ] 缺少顶部预警条 → 安全主题必须有视觉警示元素
• [ ] 全浅色无层次 → 用左边条（色条）、浅色背景块（#F8F9FA）、SVG 图标建立层次，不用大面积深色底
• [ ] 法规编号/分类名称纯文字 → 改为标签/徽章形式
• [ ] 信息图底部无收尾 → 添加统计条或金句引用
• [ ] 卡片无图标装饰 → 每个要点卡片配 SVG 内联图标
• [ ] 事故分析类用了网格布局 → 改为时间轴/事件链布局
• [ ] 多种信息类型无分类标签 → 添加彩色分类标签 + 图例
• [ ] 图标列表用了 flex 布局 → 改为 display:block; position:relative + 图标绝对定位，防止中文竖排
• [ ] 标签在窄空间被压成竖排 → 加 display:inline-block; white-space:nowrap
• [ ] 彩色标签/徽章文字竖排 → 加 white-space:nowrap；4字以上标签用
手动断行（如"先兆
  中暑"）
• [ ] grid 三列等宽内有中文标签 → 改为 flex + min-width + white-space:nowrap

文字排版防坑指南（v1.7 新增，基于"预防中暑"信息图复盘）

核心问题：中文在 flex/grid 窄空间内逐字竖排

根因分析：

中文没有空格分词，浏览器在窄容器中无法找到断行点，只能逐字折行 → 4个字变成4行竖条。

症状识别：

• 技术措施 渲染成"技/术/措/施"竖条
• 彩色标签"先兆中暑"变成窄竖条
• grid 1fr 1fr 1fr 列内中文全部竖排

标准修复方案：

| 场景 | ❌ 错误写法 | ✅ 正确写法 |

|------|------------|------------|

| 图标列表 | li { display:flex } + 文字自然流 | li { display:block; position:relative; padding-left:48px } + .ico { position:absolute; left:0 } |

| 强调文字 | 技术措施： | 技术措施： |

| 彩色标签 | .label { width:80px } 自然折行 | .label { width:80px; white-space:nowrap } 或手动
断行（如"先兆
中暑"） |

| grid 内标签 | grid: 1fr 1fr 1fr | display:flex; flex-wrap:wrap + min-width:100px; white-space:nowrap |

| 通用防护 | 无 | 所有中文标签/徽章/强调文字加 white-space:nowrap |

图标列表最佳实践（替换原 flex 方案）：

.icon-list li {
  display: block;
  position: relative;
  padding: 9px 0 9px 48px;   /* 左侧留出图标空间 */
  border-bottom: 1px solid #F0F0F0;
  font-size: 22px;
  line-height: 1.5;
}
.icon-list .ico {
  position: absolute;
  left: 0;
  top: 9px;
  font-size: 28px;
  width: 40px;
  text-align: center;
}
.icon-list strong {
  display: inline-block;
  white-space: nowrap;
}

手动断行规则（4字以上标签）：

• 2字标签：不处理（如"一级"）
• 4字标签：两字一行（如"先兆
  中暑"、"轻症
  中暑"）
• 6字标签：三字一行（如"高温强辐射"→"高温强
  辐射"）
• 原则：每行2-3个汉字，保持标签宽度与高度均衡

Step 5：输出与交付

文件保存路径：

D:/RayClaw/{当前日期}-{任务标识}/{关键词}_infograph.html

预览：

preview_url(file:///D:/RayClaw/{路径}/{关键词}_infograph.html)

交付：

deliver_attachments(["D:/RayClaw/{路径}/{关键词}_infograph.html"], "交付{关键词}安全信息图 HTML")

PNG 截图（html2canvas 方案）：

在 HTML 文件中集成 html2canvas 库，允许用户直接在浏览器中导出高清 PNG 图片。

html2canvas 集成步骤

1. 引入 html2canvas 库（head 区域）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

2. 添加下载按钮（body 区域，固定定位）：

<button id="downloadBtn" style="position:fixed;top:20px;right:20px;z-index:9999;
  background:linear-gradient(135deg,#C84B4B,#E8913A);
  color:#fff;border:none;padding:14px 28px;
  font:700 18px/1 var(--sans);border-radius:8px;cursor:pointer;
  box-shadow:0 4px 12px rgba(200,75,75,0.4);transition:all 0.3s;">
  下载 PNG 图片
</button>

3. 添加截图脚本（script 标签）：

document.getElementById('downloadBtn').onclick = function() {
  const btn = this;
  btn.disabled = true;
  btn.innerHTML = '正在生成高清图片(3x)...';

  html2canvas(document.querySelector('.page'), {
    scale: 3,                    // 3倍分辨率，适配高DPI手机屏幕
    backgroundColor: '#FFFFFF',   // 白色背景
    useCORS: true,               // 允许跨域图片
    logging: false,              // 关闭控制台日志
    allowTaint: false,           // 不允许污染canvas
    taintTest: true              // 测试canvas是否会被污染
  }).then(canvas => {
    canvas.toBlob(function(blob) {
      if (!blob) {
        alert('图片生成失败，请重试！');
        btn.disabled = false;
        btn.innerHTML = '下载 PNG 图片';
        return;
      }
      let link = document.createElement('a');
      link.download = '{关键词}_信息图.png';
      link.href = URL.createObjectURL(blob);
      link.click();
      setTimeout(() => URL.revokeObjectURL(link.href), 100);
      btn.disabled = false;
      btn.innerHTML = '✅ 下载完成 (3x高清)';
      setTimeout(() => {
        btn.innerHTML = '下载 PNG 图片';
      }, 3000);
    }, 'image/png');
  }).catch(err => {
    console.error('截图失败:', err);
    alert('截图失败，请重试！\n错误: ' + err.message);
    btn.disabled = false;
    btn.innerHTML = '下载 PNG 图片';
  });
};

4. 添加 viewport meta 标签（head 区域，charset 之后）：

<meta name="viewport" content="width=1080, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

分辨率优化指南

scale 参数选择：

| scale值 | 输出宽度 | 适用场景 | 文件大小 |

|---------|-----------|----------|----------|

| 1x | 1080px | 仅电脑端查看 | ~1-2MB |

| 2x | 2160px | 普通手机屏幕 | ~3-5MB |

| 3x（推荐） | 3240px | 高DPI手机（iPhone/Android旗舰） | ~5-8MB |

| 4x | 4320px | 印刷/超高清需求 | ~10-15MB |

关键经验：

1. 手机端必须用 ≥3x：现代智能手机的DPI高达3x-4x，2x在手机上会显得模糊
2. toBlob() 优于 toDataURL()：
• toDataURL() 返回 base64 字符串，内存占用大
• toBlob() 返回 Blob 对象，更适合大文件下载
• toBlob() 生成的 PNG 质量更高，文件更小
3. viewport meta 标签必须添加：
• 防止手机浏览器自动缩放页面
• 确保HTML在手机端以正确宽度显示
• width=1080 锁定页面宽度，避免响应式缩放
4. 按钮状态管理：
• 禁用按钮防止重复点击
• 显示进度提示（"正在生成..."）
• 完成后显示确认信息（"下载完成"）
• 使用 URL.createObjectURL() + URL.revokeObjectURL() 管理内存

常见问题排查：

| 问题 | 原因 | 解决方案 |

|------|------|----------|

| 截图空白 | 图片未加载完成 | 确保图片加载完成后再截图，或使用 window.onload |

| 跨域图片丢失 | CORS 限制 | 设置 useCORS: true，确保图片服务器允许跨域 |

| 文字模糊 | scale 太低 | 提高到 3x 或 4x |

| 文件太大 | scale 太高 | 降低到 2x，或压缩后再分发 |

| 手机端显示异常 | 缺少 viewport meta | 添加 |

示例

示例 1：HAZOP 分析流程

• 输入：HAZOP
• 知识库结果：空（知识库无 HAZOP 条目）
• Web 补充：成功
• 输出：hazop_infograph.html
• 结构：流程（4步：分析准备→构建偏差→偏差分析→风险评估）

示例 2：硝化工艺安全（本次验证）

• 输入：硝化工艺安全
• 知识库结果：命中 4 条（孟笑言硝化安全设计 PDF 等）
• Web 补充：湖南应急厅事故分析 + 管式反应器失控讨论
• 输出：nitration_safety_infograph.html
• 结构：层级（3 大爆炸类型 → 4 道防线 → 6 条重大隐患红线）

已知问题与限制

| 问题 | 状态 | workaround |

|------|------|-------------|

| Playwright Chromium 下载失败（ECONNRESET） | 未解决 | 输出 HTML，用户手动截图 |

| IMA 知识库长查询返回空 | 已知限制 | 先用短关键词试探 |

| 知乎等平台反爬 | 已知 | 跳过，换政府/协会网站 |

维护记录

| 日期 | 变更内容 |

|------|---------|

| 2026-05-09 | 初始版本，基于"硝化工艺安全"实战验证固化 |

| 2026-05-09 | v1.1：参考优秀信息图样本（受限空间作业安全、化学品分类），新增 6 条化工安全视觉增强规则（预警条、深色对比卡片、编号前置+短标题、标签化信息、色块分区、底部收尾）；反死亡清单新增 4 条检查项 |

| 2026-05-09 | v1.2：参考事故调查分析信息图样本，新增 2 条视觉规则（SVG图标装饰、信息类型标签）；新增"主题专项布局指引"（A事故分析=时间轴、B工艺安全=层级、C制度标准=并列）；反死亡清单新增 3 条检查项 |

| 2026-05-09 | v1.3：根据用户反馈（参考信息图颜色太深），将默认主题改为浅色技术风；新增浅色配色方案（纯白底/暖灰白底）；修正所有"深色底"推荐为浅色方案；新增规则 9-12（浅色卡片、渐变分隔线、口诀卡片、圆形徽章）；修正类型 B/C 色彩方案为浅色主题；反死亡清单第7条修正为"不用大面积深色底" |

| 2026-05-09 | v1.4：基于用户喜欢的移动式起重机/高处作业信息图风格，全面优化视觉规则。新增11条核心规则（彩色标题栏卡片、图标化列表、十不吊清单、分级展示、中间示意图、口诀卡片、底部深色收尾条等）；更新配色方案（蓝/绿/红/橙/紫 五色标题栏）；更新"主题专项布局指引"A/B/C三类，均改为彩色标题栏卡片组布局；字体层级细化（主标题/标题栏/列表/标语） |

| 2026-05-09 | v1.5：集成 html2canvas 方案，实现浏览器端高清 PNG 导出。新增完整"html2canvas 集成与分辨率优化"指南：包含CDN引入、下载按钮样式、toBlob()截图脚本、viewport meta配置；分辨率优化（scale 2x/3x/4x对比与选择建议）；常见问题排查表；替代原"Playwright 截图不可用"方案 |

| 2026-05-09 | v1.6：底部收尾条新增左下角署名规范——标语下方左侧固定显示 Ray谈化工 · PS Inforgraphic（半透明白色，16px，字母间距1px），确保每张信息图均有来源署名 |

| 2026-05-14 | v1.7：新增文字排版防坑指南（基于"预防中暑"信息图复盘）。反死亡清单新增 4 条检查项（图标列表flex布局、strong竖排、标签竖排、grid内中文竖排）；新增完整"文字排版防坑指南"章节——包含根因分析（中文无空格分词）、5场景对比表（❌错误/✅正确写法）、图标列表最佳CSS实践、手动断行规则（2/4/6字标签） |