1
{
2
  "girls": [
3
    {
4
      "name": "小满",
5
      "portraitTag": "young adult woman, long black hair, loose ponytail, shy expression, fitted black dress, full body, standing, visual novel character sprite, simple background, no text"
6
    }
7
  ]
8
}

1
【AI动态立绘 UI · portraitTag 规则】
2

3
1. portraitTag 必须是英文绘图关键词，不要写中文
4
2. 只描述角色立绘，不描述剧情插图
5
3. 推荐包含：young adult woman, hair color, hair style, eye color, expression, outfit, full body, standing, visual novel character sprite, simple background, no text
6
4. 同一角色必须保持固定外貌一致
7
5. 普通对话不要频繁改变 portraitTag
8
6. 只有首次登场、换装、受伤、觉醒、身份变化、明显状态变化时才更新
9
7. 禁止使用 &、#、引号、尖括号，避免破坏图片地址

1
<div class="portrait-stage">
2
  <div class="portrait-topline">
3
    <span>AI GENERATED PORTRAIT</span>
4
    <span class="portrait-badge">{{name}}</span>
5
  </div>
6
  <div class="portrait-frame">
7
    <img class="portrait-img js-auto-portrait" data-tag="{{portraitTag}}" alt="{{name}}立绘">
8
    <div class="portrait-loading">
9
      正在调用 RP Hub 生图设置生成立绘<br>
10
      如果一直不显示，请确认已在网站设置里填写自动生图密钥
11
    </div>
12
  </div>
13
</div>

1
.portrait-stage {
2
  margin: 8px 0 12px;
3
  border: 1px solid rgba(244,114,182,.28);
4
  border-radius: 14px;
5
  overflow: hidden;
6
  background: radial-gradient(circle at 50% 12%, rgba(244,114,182,.18), rgba(2,6,23,.96) 68%);
7
}
8
.portrait-topline {
9
  display: flex; justify-content: space-between;
10
  padding: 7px 10px; font-size: 10px;
11
  color: rgba(226,232,240,.72);
12
  background: rgba(2,6,23,.72);
13
}
14
.portrait-badge { color: #f472b6; font-weight: 700; }
15
.portrait-frame {
16
  position: relative; width: 100%;
17
  aspect-ratio: 2 / 3; min-height: 260px;
18
  display: flex; align-items: center; justify-content: center;
19
}
20
.portrait-img { display: none; width: 100%; height: auto; object-fit: contain; }
21
.portrait-frame.loaded .portrait-img { display: block; }
22
.portrait-loading {
23
  position: absolute; inset: 0;
24
  display: flex; align-items: center; justify-content: center;
25
  text-align: center; font-size: 12px; line-height: 1.7;
26
  color: rgba(226,232,240,.72); padding: 18px;
27
}
28
.portrait-frame.loaded .portrait-loading { display: none; }

1
(function () {
2
  const NEG = 'bad anatomy,bad hands,blurry,low quality,text,watermark,worst quality';
3
  const ARTIST = 'visual novel character sprite, very aesthetic, masterpiece, no text';
4

5
  async function readSettings() {
6
    try {
7
      const db = await new Promise((ok, bad) => {
8
        const r = indexedDB.open('RPHubDB', 1);
9
        r.onsuccess = () => ok(r.result);
10
        r.onerror = () => bad(r.error);
11
      });
12
      for (const storeName of Array.from(db.objectStoreNames || [])) {
13
        const data = await new Promise(resolve => {
14
          try {
15
            const req = db.transaction([storeName], 'readonly').objectStore(storeName).get('settings');
16
            req.onsuccess = () => resolve(req.result);
17
            req.onerror = () => resolve(null);
18
          } catch (e) { resolve(null); }
19
        });
20
        const settings = data && data.value ? data.value : data;
21
        if (settings && settings.imageGenKey) return settings;
22
      }
23
    } catch (e) {}
24
    return {};
25
  }
26

27
  function cleanTag(tag) {
28
    return String(tag || '').replace(/[<>"'&]/g, ' ').replace(/\s+/g, ' ').trim();
29
  }
30

31
  function buildUrl(tag, settings) {
32
    const token = String(settings.imageGenKey || '').trim();
33
    if (!token) return '';
34
    const base = token.toUpperCase().startsWith('STA1N') ? 'https://nai.sta1n.cn' : 'https://std.loliyc.com';
35
    const fullTag = cleanTag(tag) + ', solo, full body, standing, visual novel character sprite, simple background, no text';
36
    return base + '/generate?tag=' + encodeURIComponent(fullTag)
37
      + '&token=' + encodeURIComponent(token)
38
      + '&model=nai-diffusion-4-5-full'
39
      + '&artist=' + encodeURIComponent(ARTIST)
40
      + '&size=' + encodeURIComponent(settings.imageSize || '竖图(-1)')
41
      + '&steps=40&scale=6&cfg=0&sampler=k_dpmpp_2m_sde'
42
      + '&negative=' + encodeURIComponent(NEG)
43
      + '&nocache=0&noise_schedule=karras';
44
  }
45

46
  async function renderPortraits() {
47
    const settings = await readSettings();
48
    document.querySelectorAll('.js-auto-portrait').forEach(img => {
49
      const frame = img.closest('.portrait-frame');
50
      const url = buildUrl(img.getAttribute('data-tag'), settings);
51
      if (!url) return;
52
      img.onload = () => frame && frame.classList.add('loaded');
53
      img.onerror = () => {
54
        const tip = frame && frame.querySelector('.portrait-loading');
55
        if (tip) tip.innerHTML = '立绘生成失败<br>请检查密钥、额度或提示词';
56
      };
57
      img.src = url;
58
    });
59
  }
60

61
  renderPortraits();
62
})();

1
<div class="rp-open">
2
<style>
3
.rp-open{
4
  position:relative; left:50%; transform:translateX(-50%);
5
  width:min(96vw,1360px); height:min(72vh,680px); min-height:480px;
6
  margin:8px 0; overflow:hidden; border-radius:18px;
7
  background:#080b12; color:#f4e7c2;
8
  font-family:"Microsoft YaHei","Noto Serif SC",serif;
9
  border:1px solid rgba(230,205,130,.28);
10
  box-shadow:0 18px 55px rgba(0,0,0,.42);
11
}
12
.rp-open *{box-sizing:border-box}
13
.rp-open input{position:absolute; opacity:0; pointer-events:none}
14
/* ... 更多样式请按需从源文件复制 ... */
15
</style>
16

17
<input type="radio" name="rp-open-state" id="rp-s1" checked>
18
<input type="radio" name="rp-open-state" id="rp-s2">
19
<!-- 继续添加场景所需的页面数量 -->
20

21
<div class="rp-bg">
22
  <section class="rp-page p1">
23
    <div class="rp-card">
24
      <div class="rp-small">THE STORY BEGINS</div>
25
      <div class="rp-title">灰冠学院</div>
26
      <div class="rp-sub">旧王冠沉没后的第四百一十七年。</div>
27
      <label class="rp-btn" for="rp-s2">继续</label>
28
    </div>
29
  </section>
30
  <!-- 添加更多场景页面... -->
31
</div>
32
</div>

1
(function(){
2
  const html = `<!DOCTYPE html><html>...完整HTML...</html>`;
3
  const frame = document.currentScript.previousElementSibling;
4
  frame.srcdoc = html;
5
})();

1
<div class="rp-map">
2
<style>
3
.rp-map{
4
  --bg:#101722; --panel:#182131; --gold:#d8bd76;
5
  --text:#eee3c8; --muted:#9faabd; --danger:#b85656;
6
  --open:#6f9f74; --locked:#596171;
7
  width:min(96vw,980px); margin:12px auto; padding:16px;
8
  border-radius:18px;
9
  background:linear-gradient(135deg,#101722,#20293b);
10
  border:1px solid rgba(216,189,118,.35);
11
  color:var(--text);
12
  font-family:"Microsoft YaHei","Noto Serif SC",serif;
13
  box-shadow:0 16px 42px rgba(0,0,0,.35);
14
}
15
/* 完整样式请参考实时地图UI简易模板教程.txt */
16
</style>
17

18
<div class="map-head">
19
  <div>
20
    <div class="map-title">{{currentRegion}}</div>
21
    <div class="map-sub">当前位置：{{currentLocation}} · 地图状态：{{mapStatus}}</div>
22
  </div>
23
  <div class="map-danger">危险等级：{{dangerLevel}}</div>
24
</div>
25

26
<div class="map-body">
27
  <!-- 节点 -->
28
  <div class="map-node node-start {{nodeStartClass}}">
29
    <div class="node-name">入口</div>
30
    <div class="node-state">{{nodeStartStatus}}</div>
31
  </div>
32
  <div class="map-node node-center {{nodeCenterClass}}">
33
    <div class="node-name">中央区域</div>
34
    <div class="node-state">{{nodeCenterStatus}}</div>
35
  </div>
36
  <!-- 更多节点... -->
37
</div>
38

39
<div class="map-info">
40
  <div class="info-card">
41
    <div class="info-label">可前往路线</div>
42
    <div class="info-text">{{availableRoutes}}</div>
43
  </div>
44
  <div class="info-card">
45
    <div class="info-label">最近事件</div>
46
    <div class="info-text">{{latestEvent}}</div>
47
  </div>
48
</div>
49
</div>

1
{
2
  "currentRegion": "起始区域",
3
  "currentLocation": "入口",
4
  "mapStatus": "初始探索",
5
  "dangerLevel": "低",
6

7
  "nodeStartClass": "active",
8
  "nodeStartStatus": "当前所在地",
9

10
  "nodeCenterClass": "open",
11
  "nodeCenterStatus": "可前往",
12

13
  "nodeEastClass": "locked",
14
  "nodeEastStatus": "尚未解锁",
15

16
  "nodeWestClass": "locked",
17
  "nodeWestStatus": "尚未解锁",
18

19
  "availableRoutes": "中央区域",
20
  "latestEvent": "玩家抵达入口，地图开始记录当前探索状态。"
21
}

1
currentRegion：当前大区域名称
2
currentLocation：玩家当前所在地点
3
mapStatus：当前地图阶段（初始探索、调查中、战斗后、封锁中）
4
dangerLevel：危险等级（低、中、高、极高）
5

6
nodeXXClass：控制地图节点样式，可填 active/open/locked/danger/cleared
7
nodeXXStatus：显示地点下面的小字状态
8

9
availableRoutes：当前可前往地点
10
latestEvent：最近一次地图变化或剧情事件

1
【实时地图更新规则】
2

3
- 每次剧情推进后，必须更新地图变量
4
- currentLocation 必须等于玩家当前实际所在地点
5
- 玩家进入某地点后，该地点 nodeClass 改为 active，其他地点根据情况改为 open/locked/danger/cleared
6
- 如果玩家解锁新地点，将对应 nodeClass 从 locked 改为 open
7
- 如果某地点发生危险事件，将对应 nodeClass 改为 danger
8
- availableRoutes 只显示当前剧情下玩家合理可前往的地点
9
- latestEvent 用一句话总结本次地图变化
10
- 不得让 UI 地图显示与正文剧情冲突

1
.node-start { left: 12%; top: 42%; }
2
.node-center { left: 42%; top: 28%; }
3
.node-east { right: 13%; top: 42%; }
4
.node-west { left: 50%; bottom: 13%; }
5

6
/* 移动端适配 */
7
@media (max-width: 720px) {
8
  .node-start { left: 8%; top: 42%; }
9
  .node-center { left: 36%; top: 18%; }
10
  .node-east { right: 6%; top: 45%; }
11
  .node-west { left: 34%; bottom: 12%; }
12
}

1
<div class="radar-ring-container">
2
  <!-- 外层：边缘浅滩 -->
3
  <div class="ring-layer ring-shallows" data-region="边缘浅滩"
4
       data-desc="暗礁密布的珊瑚浅滩与红树林带..."
5
       data-risk="潮汐异动 · 灵汐族圣临之地">
6
  </div>
7
  <!-- 第二层：翠叶密林 -->
8
  <div class="ring-layer ring-jungle" data-region="翠叶密林"
9
       data-desc="占岛屿面积60%的原始密林..."
10
       data-risk="猛兽出没 · 远古守护">
11
  </div>
12
  <!-- 第三层：岩脊高地 -->
13
  <div class="ring-layer ring-highland" data-region="岩脊高地"
14
       data-desc="险峻的岩壁与铁皮竹林..."
15
       data-risk="落石险径 · 灵压紊乱">
16
  </div>
17
  <!-- 核心：灵泉盆地 -->
18
  <div class="ring-layer ring-core" data-region="灵泉盆地 · Elyria之冠"
19
       data-desc="生命之泉与母树 Elyria 所在..."
20
       data-risk="能量衰微 · 命运枢纽">
21
  </div>
22
</div>
23

24
<!-- 右侧详情展示区 -->
25
<div class="info-pavilion" id="infoPanel">
26
  <div class="region-name">
27
    <span>🌊</span>
28
    <span id="regionNameDisplay">边缘浅滩</span>
29
  </div>
30
  <div class="region-desc" id="regionDescDisplay">...</div>
31
  <div class="region-tag" id="regionRiskDisplay">⚠️ 潮汐异动</div>
32
</div>

1
<!DOCTYPE html>
2
<html lang="zh">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>幻想郷地図</title>
7
  <style>
8
    /* 完整样式请参考适配边缘地图.txt */
9
  </style>
10
</head>
11
<body>
12
  <div class="map-container">
13
    <button class="close-btn" onclick="handleClose()">✕</button>
14
    <div class="title-section">
15
      <h2>幻想郷地図</h2>
16
      <span class="subtitle">RPG Map</span>
17
    </div>
18
    <div class="map-area">
19
      <div class="map-grid">
20
        <svg class="map-svg" viewBox="0 0 400 400">
21
          <!-- SVG 路线 -->
22
          <path class="map-path" d="M200 100 Q250 140 280 180 T320 240"></path>
23
        </svg>
24
        <div class="map-locations">
25
          <!-- 地点标记 -->
26
          <div class="map-marker unlocked" style="top:10%;left:48%">
27
            <div class="marker-dot">1</div>
28
            <div class="marker-name">神社</div>
29
          </div>
30
          <div class="map-marker locked" style="top:55%;left:70%">
31
            <div class="marker-dot">5</div>
32
            <div class="marker-name">香霖堂</div>
33
          </div>
34
        </div>
35
      </div>
36
    </div>
37
    <div class="legend">
38
      <!-- 图例 -->
39
    </div>
40
  </div>
41
  <script>
42
    function handleClose() {
43
      if (window.triggerSlash) window.triggerSlash('/主页');
44
    }
45
    function handleMarkerClick(number) {
46
      const commands = { '1': '/前往神社', '2': '/回家' };
47
      if (window.triggerSlash) window.triggerSlash(commands[number]);
48
    }
49
  </script>
50
</body>
51
</html>

1
(function() {
2
  var state = { food: 'meat', useOil: 'yes', oilMl: 0 };
3
  var submitBtn = document.getElementById('submitBtn');
4

5
  function syncToButton() {
6
    submitBtn.dataset.food = state.food;
7
    submitBtn.dataset.oil = state.useOil;
8
    submitBtn.dataset.ml = state.oilMl;
9
  }
10

11
  // 提交时触发
12
  document.getElementById('submitBtn').onclick = function() {
13
    var p = {
14
      food: this.dataset.food === 'meat' ? '肉' : '菜',
15
      oil: this.dataset.oil === 'yes' ? '放油' : '不放油',
16
      ml: parseInt(this.dataset.ml)
17
    };
18
    try { window.triggerSlash(JSON.stringify(p)); }
19
    catch(e) { alert(p.food + ' | ' + p.oil + ' | ' + p.ml + 'ml'); }
20
  };
21
})();

1
{
2
  "name": "正文悬浮球菜单 父页面注入自动清理版",
3
  "regex": "^(?![\\s\\S]*rp-parent-float-owner-v2)([\\s\\S]*)$",
4
  "flags": "g",
5
  "replacement": "$1\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\">\n  <style>html,body{margin:0;padding:0;width:1px;height:1px;background:transparent;overflow:hidden;font-size:0}</style>\n</head>\n<body>\n<script>\n(function(){\n  // ...完整脚本见 正文悬浮球正则卡.json 源文件...\n})();\n<\/script>\n</body>\n</html>",
6
  "placement": [2],
7
  "markdownOnly": true,
8
  "promptOnly": false,
9
  "runOnEdit": true,
10
  "scope": "character",
11
  "disabled": false
12
}

1
<div class="viewer">
2
  <section class="image-card">
3
    <div class="image-map-wrap">
4
      <img class="character-image" src="人物图片URL" alt="人物示意图">
5

6
      <!-- 透明热区按钮 -->
7
      <button class="hotspot"
8
              style="left: 47.77%; top: 19.65%; width: 19.07%; height: 11.79%;"
9
              data-name="头部" data-desc="这是头部的描述。"></button>
10
      <button class="hotspot"
11
              style="left: 48.39%; top: 31.43%; width: 17.84%; height: 15.23%;"
12
              data-name="躯干" data-desc="这是躯干的描述。"></button>
13
      <!-- 更多热区... -->
14
    </div>
15
  </section>
16

17
  <aside class="info-card">
18
    <h1 class="info-title" id="part-name">请选择部位</h1>
19
    <p class="info-desc" id="part-desc">点击图片中的区域查看说明。</p>
20
  </aside>
21
</div>

1
const hotspots = document.querySelectorAll('.hotspot');
2
hotspots.forEach(function(hotspot) {
3
  hotspot.addEventListener('click', function() {
4
    document.getElementById('part-name').textContent = hotspot.dataset.name;
5
    document.getElementById('part-desc').textContent = hotspot.dataset.desc;
6
  });
7
});