@waterwx/dsh-novel-forge 1.6.0 → 1.7.0

package/src/client/panel/panel.module.css

@@ -359,13 +359,14 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   font-size: 16px;
   color: var(--nf-text-2);
   padding: 4px 9px;
-  border-radius: 8px;
-  transition: background 0.15s ease, color 0.15s ease;
+  border-radius: 9px;
+  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
 }
 
 .iconButton:hover {
   background: var(--nf-hover);
   color: var(--nf-text);
+  transform: translateY(-1px);
 }
 
 /* ------------------------------------------------------------ tab bar */
@@ -419,10 +420,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .panelContent {
   flex: 1;
   overflow: auto;
-  padding: 16px 18px 20px;
+  padding: var(--nf-density-pad, 16px 18px 20px);
   display: flex;
   flex-direction: column;
-  gap: 14px;
+  gap: var(--nf-density-gap, 14px);
   position: relative;
   z-index: 1;
 }
@@ -445,7 +446,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex-direction: column;
   gap: 6px;
   margin: 10px 0 10px 12px;
-  padding: 16px 12px 14px;
+  padding: var(--nf-density-nav, 16px 12px 14px);
   border: 1px solid var(--nf-glass-border);
   border-radius: 18px;
   background: var(--nf-glass-face);
@@ -589,7 +590,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   background: var(--nf-success);
 }
 
-/* 任务进行中：工作进度导航呼吸绿点（不自动弹窗，点击导航查看悬浮窗） */
+/* 任务进行中：AI进度导航呼吸绿点（不自动弹窗，点击导航查看悬浮窗） */
 .navTabBadgeLive {
   background: var(--nf-success);
   animation: navBadgePulse 1.2s ease-in-out infinite;
@@ -837,7 +838,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   position: relative;
   border: 1px solid var(--nf-glass-border);
   border-radius: 22px;
-  padding: 16px 18px;
+  padding: var(--nf-density-card, 16px 18px);
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -906,11 +907,12 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   border: 1px solid var(--nf-border-strong);
   background: var(--nf-bg-inset);
   color: var(--nf-text);
-  padding: 6px 14px;
-  border-radius: 12px;
+  padding: 7px 15px;
+  border-radius: 9px;
   cursor: pointer;
   font-size: 13px;
   font-weight: 500;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
   transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
   white-space: nowrap;
 }
@@ -918,10 +920,11 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .button:hover:not([disabled]) {
   background: var(--nf-hover);
   border-color: var(--nf-border-strong);
+  transform: translateY(-1px);
 }
 
 .button:active:not([disabled]) {
-  transform: scale(0.96);
+  transform: translateY(0) scale(0.97);
 }
 
 .button[disabled] {
@@ -933,12 +936,15 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   border-color: transparent;
   background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent) 88%, #ffffff), var(--nf-accent));
   color: var(--nf-accent-fg);
-  box-shadow: 0 2px 10px color-mix(in srgb, var(--nf-accent) 45%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--nf-accent) 30%, transparent);
+  border-radius: 10px;
+  box-shadow: 0 2px 10px color-mix(in srgb, var(--nf-accent) 45%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--nf-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }
 
 .buttonPrimary:hover:not([disabled]) {
   background: linear-gradient(180deg, var(--nf-accent-hover), color-mix(in srgb, var(--nf-accent-hover) 85%, #000000));
   border-color: transparent;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 30px color-mix(in srgb, var(--nf-accent) 50%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--nf-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
 }
 
 .buttonDanger {
@@ -951,9 +957,9 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 }
 
 .buttonSmall {
-  padding: 3px 10px;
+  padding: 4px 10px;
   font-size: 12px;
-  border-radius: 9px;
+  border-radius: 8px;
 }
 
 /* ------------------------------------------------------------ forms */
@@ -974,6 +980,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   border: 1px solid var(--nf-border-strong);
   background: var(--nf-bg-inset);
   color: var(--nf-text);
+  color-scheme: light;
   border-radius: 12px;
   padding: 7px 11px;
   font-size: 13px;
@@ -982,6 +989,28 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/* 原生下拉浮层配色跟随主题（防白底白字） */
+body[data-ds-dark-theme] .input {
+  color-scheme: dark;
+}
+.panel[data-nf-mode='dark'] .input {
+  color-scheme: dark;
+}
+.panel[data-nf-mode='light'] .input {
+  color-scheme: light;
+}
+body:not([data-ds-dark-theme]) .panel[data-nf-theme='neumorph'] .input {
+  color-scheme: light;
+}
+select.input {
+  cursor: pointer;
+}
+.input option {
+  color: var(--nf-text);
+  background: var(--nf-bg-raise);
+  font-size: 15px;
+}
+
 .input:focus,
 .textarea:focus {
   outline: none;
@@ -2113,10 +2142,10 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: 18px;
+  padding: var(--nf-density-pad, 18px);
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--nf-density-gap, 16px);
 }
 
 .shelfHeader {
@@ -2125,9 +2154,27 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   gap: 10px;
 }
 
+/* 书架顶部主容器：加高玻璃卡 */
+.shelfHero {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: var(--nf-density-card, 22px 24px);
+  border: 1px solid var(--nf-glass-border);
+  border-radius: 22px;
+  background: var(--nf-glass-face);
+  box-shadow: var(--nf-shadow), inset 0 1.5px 0 var(--nf-glass-sheen);
+}
+
+.shelfHero .panelTitle {
+  font-size: 22px;
+  letter-spacing: 0.3px;
+}
+
 .shelfTitleRow {
   display: flex;
-  align-items: baseline;
+  align-items: center;
+  justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
 }
@@ -2145,10 +2192,91 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   max-width: 320px;
 }
 
-.shelfFilters {
+.shelfStats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+}
+
+.shelfStat {
   display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 1px solid var(--nf-glass-border);
+  border-radius: 14px;
+  background: var(--nf-glass-face);
+  box-shadow: var(--nf-shadow), inset 0 1px 0 var(--nf-glass-sheen);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
+}
+
+.shelfStat:hover {
+  border-color: var(--nf-accent);
+  transform: translateY(-1px);
+}
+
+.shelfStatActive {
+  border-color: var(--nf-accent);
+  background: var(--nf-accent-soft);
+  box-shadow: 0 0 0 2px var(--nf-accent-soft), var(--nf-shadow);
+}
+
+.shelfStat b {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--nf-accent);
+}
+
+.shelfStat span {
+  font-size: 12px;
+  color: var(--nf-text-2);
+}
+
+/* 筛选：胶囊分段控件 */
+.shelfFilters {
+  display: inline-flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--nf-border);
+  border-radius: 999px;
+  background: var(--nf-bg-inset);
+}
+
+.shelfFilter {
+  border: none;
+  background: transparent;
+  color: var(--nf-text-2);
+  font-size: 12.5px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  white-space: nowrap;
+  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.shelfFilter:hover {
+  color: var(--nf-text);
+}
+
+.shelfFilterActive {
+  background: linear-gradient(135deg, var(--nf-accent), var(--nf-accent-hover));
+  color: var(--nf-accent-fg);
+  box-shadow: 0 3px 12px color-mix(in srgb, var(--nf-accent) 40%, transparent);
+}
+
+.shelfFilterCount {
+  font-size: 10.5px;
+  opacity: 0.8;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  border-radius: 999px;
+  padding: 0 6px;
 }
 
 /* 书架空态 / 无结果引导卡 */
@@ -2180,10 +2308,171 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .shelfGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-  gap: 14px;
+  gap: var(--nf-density-gap, 14px);
   align-content: start;
 }
 
+/* ------------------------------------------------------------
+ * 外观设置扩展：强制显示模式 + 界面密度 + 主题暗色覆盖
+ * ------------------------------------------------------------ */
+.panel {
+  --nf-density-card: 16px 18px;
+  --nf-density-gap: 14px;
+  --nf-density-pad: 16px 18px 20px;
+  --nf-density-nav: 16px 12px 14px;
+}
+
+.panel[data-nf-density='compact'] {
+  --nf-density-card: 12px 14px;
+  --nf-density-gap: 8px;
+  --nf-density-pad: 12px 14px;
+  --nf-density-nav: 8px 8px;
+}
+
+.panel[data-nf-density='spacious'] {
+  --nf-density-card: 22px 26px;
+  --nf-density-gap: 18px;
+  --nf-density-pad: 22px 24px;
+  --nf-density-nav: 18px 14px;
+}
+
+/* 强制浅色（不跟随系统时覆盖 .view 的明暗变量） */
+.panel[data-nf-mode='light'] {
+  color-scheme: light;
+  --nf-bg: rgba(242, 242, 247, 0.86);
+  --nf-bg-raise: rgba(255, 255, 255, 0.72);
+  --nf-bg-inset: rgba(118, 118, 128, 0.12);
+  --nf-border: rgba(60, 60, 67, 0.16);
+  --nf-border-strong: rgba(60, 60, 67, 0.32);
+  --nf-text: #1c1c1e;
+  --nf-text-2: #3c3c43;
+  --nf-text-2-alpha: rgba(60, 60, 67, 0.68);
+  --nf-text-3: #8e8e93;
+  --nf-accent: #00b85c;
+  --nf-accent-hover: #00a04e;
+  --nf-accent-soft: rgba(0, 184, 92, 0.12);
+  --nf-accent-fg: #ffffff;
+  --nf-hover: rgba(0, 0, 0, 0.05);
+  --nf-success: #34c759;
+  --nf-error: #ff3b30;
+  --nf-warn: #ff9500;
+  --nf-info: #00b85c;
+  --nf-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
+  --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.07), 0 20px 48px rgba(0, 0, 0, 0.12);
+  --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 38px rgba(0, 0, 0, 0.14);
+  --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08), 0 22px 52px rgba(0, 0, 0, 0.20);
+  --nf-glass-face: linear-gradient(180deg, #f6f7f9 0%, #f0f2f5 26%, #e9ebef 52%, #e0e3e8 78%, #d6d9df 100%);
+  --nf-glass-core: radial-gradient(30% 24% at 36% 28%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0) 78%);
+  --nf-glass-sheen: rgba(255, 255, 255, 0.55);
+  --nf-glass-border: rgba(255, 255, 255, 0.65);
+  --nf-glass-inset: rgba(255, 255, 255, 0.55);
+  --nf-glass-orb-a: rgba(0, 184, 92, 0.18);
+  --nf-glass-orb-b: rgba(120, 160, 255, 0.13);
+}
+
+/* 强制深色 */
+.panel[data-nf-mode='dark'] {
+  color-scheme: dark;
+  --nf-bg: rgba(10, 11, 13, 0.86);
+  --nf-bg-raise: rgba(28, 28, 30, 0.78);
+  --nf-bg-inset: rgba(118, 118, 128, 0.18);
+  --nf-border: rgba(255, 255, 255, 0.12);
+  --nf-border-strong: rgba(255, 255, 255, 0.28);
+  --nf-text: #f2f2f7;
+  --nf-text-2: #d1d1d6;
+  --nf-text-2-alpha: rgba(209, 209, 214, 0.72);
+  --nf-text-3: #8e8e93;
+  --nf-accent: #35d07a;
+  --nf-accent-hover: #5ce695;
+  --nf-accent-soft: rgba(53, 208, 122, 0.2);
+  --nf-accent-fg: #062b18;
+  --nf-hover: rgba(255, 255, 255, 0.09);
+  --nf-success: #30d158;
+  --nf-error: #ff453a;
+  --nf-warn: #ff9f0a;
+  --nf-info: #35d07a;
+  --nf-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.4);
+  --nf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.55);
+  --nf-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 38px rgba(0, 0, 0, 0.45);
+  --nf-card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.4), 0 22px 52px rgba(0, 0, 0, 0.55);
+  --nf-glass-face: linear-gradient(180deg, rgba(112, 116, 122, 0.42) 0%, rgba(96, 100, 106, 0.42) 26%, rgba(82, 85, 90, 0.42) 52%, rgba(68, 71, 76, 0.42) 78%, rgba(56, 58, 63, 0.42) 100%);
+  --nf-glass-core: radial-gradient(30% 24% at 36% 28%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 78%);
+  --nf-glass-sheen: rgba(255, 255, 255, 0.26);
+  --nf-glass-border: rgba(255, 255, 255, 0.14);
+  --nf-glass-inset: rgba(255, 255, 255, 0.07);
+  --nf-glass-orb-a: rgba(0, 202, 82, 0.28);
+  --nf-glass-orb-b: rgba(190, 200, 215, 0.10);
+}
+
+/* 强制深色时：经典毛玻璃 / 新拟物 的暗色变体 */
+.panel[data-nf-mode='dark'][data-nf-theme='classic'] {
+  --nf-accent: #0a84ff;
+  --nf-accent-hover: #3a9bff;
+  --nf-accent-soft: rgba(10, 132, 255, 0.2);
+  --nf-accent-fg: #ffffff;
+  --nf-info: #bf5af2;
+  --nf-glass-face: var(--nf-bg-raise);
+  --nf-glass-core: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0);
+  --nf-glass-border: var(--nf-border);
+  --nf-glass-inset: var(--nf-bg-inset);
+  --nf-glass-orb-a: transparent;
+  --nf-glass-orb-b: transparent;
+  --nf-glass-noise: none;
+}
+
+.panel[data-nf-mode='dark'][data-nf-theme='neumorph'] {
+  --nf-bg: #2b2f36;
+  --nf-bg-raise: #2b2f36;
+  --nf-bg-inset: #25292f;
+  --nf-border: rgba(10, 12, 16, 0.5);
+  --nf-border-strong: rgba(8, 10, 14, 0.6);
+  --nf-text: #d6dae1;
+  --nf-text-2: #a8aeb8;
+  --nf-text-2-alpha: rgba(168, 174, 184, 0.7);
+  --nf-text-3: #757c88;
+  --nf-hover: rgba(255, 255, 255, 0.05);
+  --nf-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5), -4px -4px 10px rgba(96, 104, 118, 0.24);
+  --nf-shadow-lg: 6px 6px 14px rgba(0, 0, 0, 0.55), -6px -6px 14px rgba(96, 104, 118, 0.26);
+  --nf-card-shadow: 9px 9px 18px rgba(0, 0, 0, 0.5), -9px -9px 18px rgba(96, 104, 118, 0.24);
+  --nf-card-shadow-hover: 12px 12px 24px rgba(0, 0, 0, 0.6), -12px -12px 24px rgba(96, 104, 118, 0.28);
+  --nf-glass-face: #2b2f36;
+  --nf-glass-core: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0);
+  --nf-glass-border: rgba(12, 14, 18, 0.45);
+  --nf-glass-inset: #25292f;
+  --nf-glass-orb-a: transparent;
+  --nf-glass-orb-b: transparent;
+  --nf-glass-noise: none;
+}
+
+/* 强制浅色时：新拟物 的浅色变体（深色系统下也能用） */
+.panel[data-nf-mode='light'][data-nf-theme='neumorph'] {
+  --nf-bg: #e4e9f2;
+  --nf-bg-raise: #e4e9f2;
+  --nf-bg-inset: #d9dfe8;
+  --nf-border: rgba(140, 155, 175, 0.35);
+  --nf-border-strong: rgba(120, 135, 158, 0.5);
+  --nf-text: #3a4250;
+  --nf-text-2: #5b6472;
+  --nf-text-2-alpha: rgba(70, 80, 96, 0.7);
+  --nf-text-3: #8b94a3;
+  --nf-hover: rgba(90, 105, 125, 0.08);
+  --nf-shadow: 4px 4px 10px rgba(163, 177, 198, 0.55), -4px -4px 10px rgba(255, 255, 255, 0.85);
+  --nf-shadow-lg: 6px 6px 14px rgba(163, 177, 198, 0.6), -6px -6px 14px rgba(255, 255, 255, 0.9);
+  --nf-card-shadow: 9px 9px 18px rgba(163, 177, 198, 0.55), -9px -9px 18px rgba(255, 255, 255, 0.85);
+  --nf-card-shadow-hover: 12px 12px 24px rgba(163, 177, 198, 0.65), -12px -12px 24px rgba(255, 255, 255, 0.95);
+  --nf-glass-face: #e4e9f2;
+  --nf-glass-core: transparent;
+  --nf-glass-sheen: rgba(255, 255, 255, 0);
+  --nf-glass-border: rgba(163, 177, 198, 0.4);
+  --nf-glass-inset: #d9dfe8;
+  --nf-glass-orb-a: transparent;
+  --nf-glass-orb-b: transparent;
+  --nf-glass-noise: none;
+}
+
+
 .bookCard {
   display: flex;
   flex-direction: column;
@@ -2220,13 +2509,35 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 .bookCardCover img {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
   display: block;
+  transition: transform 0.35s ease;
+}
+
+.bookCard:hover .bookCardCover img {
+  transform: scale(1.06);
+}
+
+/* 封面底部渐暗（hover 出现，突出书名区） */
+.bookCardCover::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28));
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+
+.bookCard:hover .bookCardCover::after {
+  opacity: 1;
 }
 
 .bookCardCoverFallback {
@@ -2254,6 +2565,7 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   flex-direction: column;
   gap: 5px;
   min-width: 0;
+  flex: 1;
 }
 
 .bookCardTitleRow {
@@ -2288,10 +2600,11 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 }
 
 .bookCardProgressBar {
-  height: 5px;
+  height: 6px;
   border-radius: 999px;
   background: var(--nf-border);
   overflow: hidden;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
 }
 
 .bookCardProgressFill {
@@ -2310,16 +2623,25 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   border-style: dashed;
   color: var(--nf-text-2);
   min-height: 260px;
+  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
 }
 
 .bookAddCard:hover {
+  border-color: var(--nf-accent);
+  background: var(--nf-accent-soft);
   color: var(--nf-accent);
+  transform: translateY(-2px);
 }
 
 .bookAddIcon {
   font-size: 34px;
   line-height: 1;
   color: var(--nf-accent);
+  transition: transform 0.15s ease;
+}
+
+.bookAddCard:hover .bookAddIcon {
+  transform: scale(1.12);
 }
 
 .bookCreateCard {
@@ -2708,7 +3030,8 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-top: 2px;
+  margin-top: auto;
+  padding-top: 8px;
 }
 
 .bookCardActions .button {
@@ -3112,3 +3435,64 @@ body[data-ds-dark-theme] .panel[data-nf-theme='neumorph'] .buttonPrimary {
 .helpTip:focus-within .helpTipText {
   display: block;
 }
+
+/* 设置页字号放大（标题明显大于正文） */
+.settingsCard {
+  font-size: 15px;
+}
+.settingsCard .fieldLabel {
+  font-size: 14px;
+}
+.settingsCard .input {
+  font-size: 15.5px;
+}
+.settingsCard .meta {
+  font-size: 13px;
+}
+.settingsCard .cardTitle {
+  font-size: 20px;
+}
+.settingsCard .input {
+  padding: 12px 16px;
+  border-radius: 10px;
+}
+.settingsCard + .settingsCard {
+  flex: 1;
+  min-height: 0;
+
+/* 设置页开关（滑块） */
+.switch {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid var(--nf-border-strong);
+  background: var(--nf-bg-inset);
+  cursor: pointer;
+  padding: 0;
+  flex: none;
+  transition: background 0.18s ease, border-color 0.18s ease;
+}
+
+.switchKnob {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transition: transform 0.18s ease;
+}
+
+.switchOn {
+  background: var(--nf-accent);
+  border-color: var(--nf-accent);
+}
+
+.switchOn .switchKnob {
+  transform: translateX(18px);
+}
+
+}

package/src/engine.ts

@@ -2001,6 +2001,40 @@ export async function breakdownBook(
   }
 }
 
+/** 生图接口连通性测试（设置页模型条目用）：GET {baseURL}/models，计时返回延迟。 */
+export async function testImageEndpoint(baseURL: string, apiKey: string, model?: string): Promise<{ ok: boolean; ms: number; message?: string; modelFound?: boolean }> {
+  const trimmed = baseURL.trim()
+  if (trimmed === '') return { ok: false, ms: 0, message: '接口地址不能为空' }
+  const url = trimmed.replace(/\/+$/, '') + '/models'
+  const start = Date.now()
+  try {
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: { Authorization: 'Bearer ' + apiKey, 'Content-Type': 'application/json' },
+    })
+    const ms = Date.now() - start
+    if (!res.ok) {
+      const text = (await res.text().catch(() => '')).slice(0, 200)
+      return { ok: false, ms, message: 'HTTP ' + res.status + (text !== '' ? '：' + text : '') }
+    }
+    let modelFound: boolean | undefined
+    if (model !== undefined && model !== '') {
+      const json = await res.json().catch(() => null)
+      const list = (json as { data?: unknown } | null)?.data
+      if (Array.isArray(list)) {
+        modelFound = list.some(m => {
+          if (typeof m !== 'object' || m === null) return false
+          const o = m as Record<string, unknown>
+          return o.id === model || o.model === model
+        })
+      }
+    }
+    return { ok: true, ms, modelFound }
+  } catch (err) {
+    return { ok: false, ms: Date.now() - start, message: (err as Error).message }
+  }
+}
+
 export async function generateRoleReferenceImage(
   ctx: Context,
   config: NovelConfig,
@@ -2008,15 +2042,21 @@ export async function generateRoleReferenceImage(
   outputDir: string,
   name: string,
   style = '',
+  modelId?: string,
 ): Promise<string> {
   const role = project.roles?.find(r => r.name === name)
   if (role === undefined) throw new Error(`角色 ${name} 不存在`)
   if (role.imagePrompt === undefined) throw new Error(`角色 ${name} 还没有形象锚点，请先生成锚点`)
-  if (config.imageApiEnabled !== true) throw new Error('豆包生图未启用，请在设置中开启')
-  const apiKey = config.imageApiKey
-  const model = config.imageApiModel
+  if (config.imageApiEnabled !== true) throw new Error('生图未启用，请在设置中启用一个生图模型')
+  const activeImage = (modelId !== undefined && modelId !== '' ? (config.imageModels ?? []).find(m => m.id === modelId) : undefined)
+    ?? (config.imageModels ?? []).find(m => m.enabled)
+    ?? (config.imageModels ?? [])[0]
+  const apiKey = activeImage?.apiKey ?? config.imageApiKey
+  const model = activeImage?.model ?? config.imageApiModel
+  const baseURL = (activeImage?.baseURL ?? config.imageBaseUrl ?? '').replace(/\/+$/, '')
+  if (baseURL === '') throw new Error('请先在设置中填写生图接口地址')
   if (apiKey === undefined || apiKey === '' || model === undefined || model === '') {
-    throw new Error('请先在设置中配置豆包 API Key 和生图模型')
+    throw new Error('请先在设置中配置生图模型的 API Key 和模型 id')
   }
   const stylePrompt = getComicStylePrompt(style)
   const prompt = [
@@ -2027,7 +2067,7 @@ export async function generateRoleReferenceImage(
     'character reference sheet, front view, clean background, consistent design',
   ].filter(Boolean).join(', ')
 
-  const res = await fetch('https://ark.cn-beijing.volces.com/api/v3/images/generations', {
+  const res = await fetch(baseURL + '/images/generations', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -2044,14 +2084,14 @@ export async function generateRoleReferenceImage(
   })
   if (!res.ok) {
     const text = await res.text()
-    throw new Error(`豆包生图失败（${res.status}）：${text}`)
+    throw new Error(`生图失败（${res.status}）：${text}`)
   }
   const json = (await res.json()) as { data?: Array<{ url?: string }> }
   const url = json.data?.[0]?.url
-  if (url === undefined || url === '') throw new Error('豆包生图未返回图片 URL')
+  if (url === undefined || url === '') throw new Error('生图接口未返回图片 URL')
 
   const imgRes = await fetch(url)
-  if (!imgRes.ok) throw new Error('下载豆包图片失败')
+  if (!imgRes.ok) throw new Error('下载生图结果失败')
   const buf = Buffer.from(await imgRes.arrayBuffer())
   const contentType = imgRes.headers.get('content-type') || 'image/jpeg'
   const dataUrl = `data:${contentType};base64,${buf.toString('base64')}`