# 可视化素材生成指南

> 剧本生成完成后，可自动配套产出可视化素材。
> 包括：角色肖像、线索卡配图、场景地图、封面海报、交互式网页。

---

## 一、图片类型与规范

### 1. 角色肖像（数量=角色数）

**用途**：角色卡配图，增强代入感

**Prompt 按风格适配**：

| 风格 | Prompt 关键词 |
|------|-------------|
| 本格推理/现代都市 | 现代插画风格，半身像，[服饰描写]，[表情]，简洁背景 |
| 古风悬疑 | 水墨淡彩，半身像，[朝代服饰]，[配饰]，背景虚化 |
| 恐怖悬疑 | 暗调写实，半身像，[服饰]，[表情：紧张/警惕]，阴影氛围 |
| 欢乐轻松 | Q版/漫像风格，半身像，[服饰]，[表情：生动]，明亮色调 |
| 诡秘之主/克苏鲁 | 维多利亚油画质感，半身像，[西装/斗篷]，[怀表/胸针]，暗色调 |

**尺寸**：1200×1600px（竖版3:4）
**排版**：角色名居中偏下，职业/身份在名字下方

---

### 2. 线索卡配图（数量≈线索总数的30-50%）

**筛选标准**：只生成核心物证和有视觉辨识度的道具
- ✅ 凶器、关键书证、特殊道具、信件、照片
- ❌ 纯文字线索（口供、证词）、监控记录、通话记录

**Prompt 按风格适配**：

| 风格 | Prompt 关键词 |
|------|-------------|
| 本格推理 | 写实物证风格，[物品]，[材质]，[痕迹]，干净背景居中 |
| 古风悬疑 | 古纸/卷轴质感，[物品]，[材质]，泛黄，细节丰富 |
| 恐怖悬疑 | 暗调档案风格，[物品]，[异常特征]，做旧质感 |
| 诡秘之主 | 羊皮纸质感，[物品]，维多利亚风格，[神秘符号] |

**尺寸**：1200×675px（横向16:9）
**排版**：左上角线索编号，中央物品图，底部线索名称+简短描述

---

### 3. 场景地图（数量=主要场景数，封闭空间必须有）

**Prompt 按风格适配**：

| 风格 | Prompt 关键词 |
|------|-------------|
| 本格推理 | 建筑蓝图风格，俯视图，[房间布局]，标注关键位置，白色背景 |
| 古风悬疑 | 水墨线条建筑图，俯视图，[建筑布局]，中国传统建筑风格 |
| 恐怖悬疑 | 暗色调平面图，俯视图，[房间布局]，标注关键位置 |
| 诡秘之主 | 维多利亚建筑蓝图，俯视图，[布局]，墨水线条，羊皮纸背景 |

**尺寸**：1600×1200px（横向4:3）
**排版**：图名居顶部，俯视图居中，关键位置中文标注

---

### 4. 封面/海报（1张）

**Prompt 按风格适配**：

| 风格 | Prompt 关键词 |
|------|-------------|
| 本格推理 | 现代海报风格，[核心场景]，高对比度，剧本名大字居中 |
| 古风悬疑 | 水墨淡彩，[核心场景]，灯笼/烛光/月色，毛笔字体 |
| 恐怖悬疑 | 暗调海报，[核心场景]，压抑氛围，[剧本名] |
| 诡秘之主 | 维多利亚海报风格，[核心场景]，煤气灯/雾，复古衬线字体 |

**尺寸**：1920×1080px（横版16:9）
**排版**：剧本名大字居中偏上，风格标签+人数+时长在底部

---

## 二、风格对应速查

| 剧本风格 | 角色肖像 | 线索卡 | 场景地图 |
|---------|---------|--------|---------|
| 本格推理 | 写实插画 | 档案证物 | 建筑蓝图 |
| 情感沉浸 | 电影剧照 | 照片信件 | 场景油画 |
| 欢乐轻松 | Q版漫像 | 卡通可爱 | 平面插画 |
| 古风悬疑 | 水墨立绘 | 古纸卷轴 | 水墨建筑图 |
| 恐怖悬疑 | 暗调写实 | 规则档案 | 诅咒空间图 |
| 诡秘之主 | 维多利亚油画 | 羊皮纸 | 维多利亚建筑图 |

---

## 三、交互式可视化网页

使用 `{baseDir}/references/visualization-template.html` 作为模板。

### 功能

网页包含5个标签页：
1. **关系图谱** — D3.js力导向图，可拖拽探索人物关系
2. **角色档案** — 卡片式展示，点击查看详情弹窗
3. **事件时间线** — 按时间排列的事件流
4. **线索面板** — 按类型筛选（物证/口供/时间证据/其他）
5. **角色剧本** — 左侧选角色，右侧显示公开/私密/隐藏目标

### 填充方法

替换模板中的 `DATA` 对象：

```javascript
const DATA = {
  title: "剧本名称",
  genre: "风格标签",
  players: "人数",
  duration: "时长",
  victim: "死者角色名",
  characters: [
    {
      id: "char1",
      name: "角色名",
      role: "身份",
      desc: "一句话介绍",
      color: "#hex颜色",
      relations: [{ target: "char2", type: "关系描述" }],
      scriptPublic: "公开剧本内容",
      scriptPrivate: "私密剧本内容",
      goals: "隐藏目标"
    }
  ],
  clues: [
    { id: "C-01", type: "C", name: "线索名", desc: "描述", relatedChars: ["角色名"] }
  ],
  events: [
    { time: "时间", title: "事件标题", desc: "描述", type: "crime", relatedChars: ["角色名"] }
  ]
};
```

### 线索类型码

| 类型码 | 含义 |
|--------|------|
| C | 物证 |
| M | 口供/证词 |
| T | 时间证据 |
| W | 其他 |

### 事件类型码

| 类型码 | 含义 | 颜色 |
|--------|------|------|
| crime | 犯罪案件 | 红色 |
| clue | 线索发现 | 橙色 |
| relation | 人物关系 | 绿色 |
| other | 其他 | 蓝色 |

### 输出

文件名：`[剧本名]_可视化.html`，浏览器直接打开即可。