js+css实现小说可视化提示词设定器代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：通用可视化设定器

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>织章 StoryLoom · 可视化小说提示词生成器</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<style>
:root{
  --bg:#15110b; --panel:#1c1710; --panel2:#221b12; --edge:#332a1c; --edge2:#453823;
  --ink:#ece1cb; --ink2:#a3947a; --ink3:#6e6250;
  --amber:#d8a657; --amber2:#f0cd8d; --teal:#7fa8a0; --red:#c25b4e;
  --node:#231c12; --nodeEdge:#3b3120;
  --serif:'Noto Serif SC',serif; --sans:'Noto Sans SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;overflow:hidden}
body::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#3a3122;border-radius:5px;border:2px solid var(--panel)}
::-webkit-scrollbar-track{background:transparent}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:var(--sans);color:var(--ink);background:#141009;border:1px solid var(--edge);border-radius:7px;padding:8px 10px;font-size:13px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s;line-height:1.6}
input:focus,textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(216,166,87,.12)}
textarea{resize:vertical}
svg.ic{width:16px;height:16px;display:inline-block;vertical-align:-3px;flex:none}

/* ───── 顶栏 ───── */
header#top{height:56px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid var(--edge);background:var(--panel);position:relative;z-index:30}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:32px;height:32px;border:1.5px solid var(--amber);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--amber)}
.logo .mark svg{width:18px;height:18px}
.logo h1{font-family:var(--serif);font-size:19px;font-weight:900;letter-spacing:2px}
.logo small{color:var(--ink3);font-size:11px;letter-spacing:1px;display:block;margin-top:1px}
.top-space{flex:1}
.tbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--edge2);border-radius:8px;color:var(--ink2);font-size:13px;transition:.15s;background:transparent}
.tbtn:hover{color:var(--ink);border-color:var(--amber);background:rgba(216,166,87,.06)}
.tbtn.primary{background:var(--amber);color:#241a08;border-color:var(--amber);font-weight:700}
.tbtn.primary:hover{background:var(--amber2);border-color:var(--amber2)}
.tbtn.danger:hover{color:#ff8f80;border-color:var(--red);background:rgba(194,91,78,.08)}

/* ───── 主体布局 ───── */
#app{display:flex;height:calc(100% - 56px)}
#sidebar{width:326px;flex:none;background:var(--panel);border-right:1px solid var(--edge);display:flex;flex-direction:column;transition:margin-left .25s ease;z-index:20}
body.side-closed #sidebar{margin-left:-326px}
.tabs{display:flex;border-bottom:1px solid var(--edge)}
.tabs button{flex:1;padding:12px 0;font-size:13px;color:var(--ink3);border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:1px}
.tabs button.on{color:var(--amber);border-bottom-color:var(--amber)}
.panel{flex:1;overflow-y:auto;padding:16px;display:none}
.panel.on{display:block}
.f-label{display:block;font-size:11px;letter-spacing:2px;color:var(--ink3);margin:14px 0 6px}
.f-label:first-child{margin-top:0}
.serif-in{font-family:var(--serif)}

/* 角色卡 */
.char-card{border:1px solid var(--edge);border-radius:10px;margin-bottom:10px;background:var(--panel2);overflow:hidden}
.char-head{display:flex;align-items:center;gap:10px;padding:11px 12px;cursor:pointer;user-select:none}
.char-head:hover{background:rgba(216,166,87,.04)}
.char-avatar{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:14px;color:#171208}
.char-head b{font-family:var(--serif);font-size:14px}
.char-head .role{font-size:11px;color:var(--ink3);margin-left:2px}
.char-head .chev{margin-left:auto;color:var(--ink3);transition:transform .2s}
.char-card.open .chev{transform:rotate(180deg)}
.char-body{display:none;padding:2px 12px 14px;border-top:1px solid var(--edge)}
.char-card.open .char-body{display:block}
.char-foot{padding:4px 0}
.block-btn{width:100%;padding:10px;border:1px dashed var(--edge2);border-radius:9px;color:var(--ink3);font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.block-btn:hover{color:var(--amber);border-color:var(--amber)}

/* ───── 画布 ───── */
#canvasWrap{flex:1;position:relative;overflow:hidden;background:#141009;
  background-image:radial-gradient(circle,#241d12 1px,transparent 1px);background-size:26px 26px}
#viewport{position:absolute;inset:0;cursor:grab;touch-action:none}
#viewport.panning{cursor:grabbing}
body.grabbing .tnode,body.grabbing #viewport{cursor:grabbing!important}
#stage{position:absolute;left:0;top:0;transform-origin:0 0}
#stageInner{position:relative}
#wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
#nodeLayer{position:absolute;left:0;top:0}

/* 时间线连线 */
.w-spine{stroke:var(--amber);stroke-width:3;opacity:.9}
.w-spine-empty{stroke:var(--edge2);stroke-width:2;stroke-dasharray:6 8}
.ch-dot{fill:#241c11;stroke:var(--amber);stroke-width:1.6}
.spine-num{fill:var(--amber);font-family:var(--serif);font-weight:700}
.spine-lab{fill:var(--ink3);font-size:12px;font-family:var(--serif);letter-spacing:1px}
.spine-chev{fill:#8a7448}
.w-stub{stroke:var(--amber);stroke-width:2;opacity:.75}
.w-elbow{stroke:var(--teal);stroke-width:1.6;fill:none;opacity:.7}
.w-tick{stroke:var(--teal);stroke-width:1.6;opacity:.9}
.tick-dot{fill:var(--teal)}
.arr-amber{fill:var(--amber)}
.arr-teal{fill:var(--teal)}

/* 节点卡片 */
.tnode{position:absolute;width:340px;background:var(--node);border:1px solid var(--nodeEdge);border-radius:11px;padding:12px 13px 11px;cursor:grab;user-select:none;transition:border-color .15s,box-shadow .15s;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tnode.branch{width:300px}
.tnode:hover{border-color:#5a4a2c}
.tnode.sel{border-color:var(--amber);box-shadow:0 0 0 3px rgba(216,166,87,.14),0 6px 18px rgba(0,0,0,.4)}
.tnode.main{border-left:3px solid rgba(216,166,87,.6)}
.tnode.branch{border-left:3px solid var(--teal)}
.tnode.dragging{z-index:60;cursor:grabbing;border-color:var(--amber);box-shadow:0 16px 38px rgba(0,0,0,.55)}
.tn-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.tn-badge{font-family:var(--serif);font-size:11px;font-weight:700;color:var(--amber);border:1px solid rgba(216,166,87,.45);padding:2px 8px;border-radius:99px;letter-spacing:1px;white-space:nowrap}
.tnode.branch .tn-badge{color:var(--teal);border-color:rgba(127,168,160,.45)}
.tn-mood{flex:1;min-.........完整代码请登录后点击上方下载按钮下载查看