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,160 @@
+.page {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  background: #09090b;
+  color: var(--text1);
+  min-height: 0;
+}
+
+.toolbar {
+  display: grid;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--stroke);
+  background: #18181b;
+}
+
+.toolbarRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.toolbarHint {
+  color: var(--text2);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.body {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  min-height: 0;
+}
+
+.detail {
+  min-height: 0;
+  overflow: auto;
+  padding: 14px 16px;
+  border-right: 1px solid var(--stroke);
+  background: #0f0f12;
+  display: grid;
+  gap: 14px;
+  align-content: start;
+}
+
+.detailEmpty {
+  color: var(--text2);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.detailName {
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.detailSectionTitle {
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.6px;
+  color: var(--text2);
+}
+
+.detailDesc {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text1);
+}
+
+.detailDesc :is(h2, h3) {
+  margin: 0.6em 0 0.35em;
+}
+
+.detailDesc :is(p, ul, ol) {
+  margin: 0.35em 0;
+}
+
+.relationsList {
+  display: grid;
+  gap: 6px;
+}
+
+.relationItem {
+  padding: 8px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--stroke);
+  background: #18181b;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.listCol {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 10px;
+  padding: 12px;
+  background: #0f0f12;
+}
+
+.list {
+  display: grid;
+  gap: 8px;
+  align-content: start;
+  overflow: auto;
+  min-height: 0;
+}
+
+.tile {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: 10px;
+  align-items: center;
+  padding: 8px;
+  border-radius: 12px;
+  border: 1px solid var(--stroke);
+  background: #18181b;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  width: 100%;
+}
+
+.tileSelected {
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 1px #60a5fa;
+}
+
+.tileActive {
+  outline: 1px solid #fbbf24;
+}
+
+.tileAvatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #09090b;
+}
+
+.tileAvatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.tileName {
+  font-size: 13px;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.muted {
+  color: var(--text2);
+  font-size: 13px;
+}