feat(npcs): add campaign NPCs with relation graph and session overlay

Add a dedicated NPC editor window, directed relations, control/presentation avatar overlay, and ru/en help for the new section. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-17 13:13:58 +08:00
parent 61875be857
commit 37ba855faf
40 changed files with 3655 additions and 17 deletions
@@ -0,0 +1,154 @@
+.wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: #0c0c0f;
+}
+
+.zoomBar {
+  display: flex;
+  gap: 6px;
+  padding: 6px;
+  border-radius: 10px;
+  background: rgba(24, 24, 27, 0.92);
+  border: 1px solid var(--stroke);
+}
+
+.zoomBtn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--stroke);
+  border-radius: 8px;
+  background: #18181b;
+  color: var(--text1);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.zoomBtn:hover {
+  background: #27272a;
+}
+
+.node {
+  width: 120px;
+  display: grid;
+  gap: 6px;
+  padding: 8px;
+  border-radius: 12px;
+  border: 1px solid var(--stroke);
+  background: #18181b;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.nodeActive {
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 1px #60a5fa, 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.avatar {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #09090b;
+}
+
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.name {
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+  color: var(--text1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.handle {
+  width: 10px !important;
+  height: 10px !important;
+  background: #71717a !important;
+  border: 2px solid #18181b !important;
+}
+
+.handle:hover {
+  background: #60a5fa !important;
+}
+
+.edgeLabel {
+  pointer-events: all;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(24, 24, 27, 0.92);
+  border: 1px solid var(--stroke);
+  color: var(--text1);
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  z-index: 5;
+}
+
+.edgeLabelActive {
+  border-color: #60a5fa;
+  color: #93c5fd;
+  box-shadow: 0 0 0 1px #60a5fa;
+  z-index: 20;
+}
+
+.menuBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 79;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  cursor: default;
+}
+
+.menu {
+  position: fixed;
+  z-index: 80;
+  min-width: 160px;
+  padding: 6px;
+  border-radius: 10px;
+  background: #18181b;
+  border: 1px solid var(--stroke);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  display: grid;
+  gap: 2px;
+}
+
+.menuItem {
+  border: 0;
+  background: transparent;
+  color: var(--text1);
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.menuItem:hover {
+  background: #27272a;
+}
+
+.menuItemDanger:hover {
+  background: rgba(239, 68, 68, 0.18);
+  color: #fca5a5;
+}