From 9ebbecaf72feaab0db8735d29e8c4221f8a2a7c7 Mon Sep 17 00:00:00 2001
From: henrryyes <wcwa001@gmail.com>
Date: Sun, 18 Jan 2026 02:20:37 +0800
Subject: [PATCH] Align NovelDraw select styling with TTS

---
 modules/novel-draw/floating-panel.js | 59 +++++++++++++++++-----------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/modules/novel-draw/floating-panel.js b/modules/novel-draw/floating-panel.js
index 7ab2015..899ea4f 100644
--- a/modules/novel-draw/floating-panel.js
+++ b/modules/novel-draw/floating-panel.js
@@ -290,44 +290,48 @@ const STYLES = `
 }
 
 .nd-card {
-    background: rgba(255, 255, 255, 0.06);
-    border: 1px solid var(--nd-border-subtle);
-    border-radius: var(--nd-radius-md);
-    overflow: hidden;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    overflow: visible;
 }
 
-.nd-row { display: flex; align-items: center; padding: 2px 0; }
+.nd-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
 
 .nd-label {
-    width: 36px;
-    padding-left: 10px;
-    font-size: 10px;
-    font-weight: 500;
+    font-size: 11px;
     color: var(--nd-text-muted);
+    width: 32px;
     flex-shrink: 0;
+    padding: 0;
 }
 
 .nd-select {
     flex: 1;
     min-width: 0;
-    border: none;
-    background: transparent;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid var(--nd-border-subtle);
     color: var(--nd-text-primary);
-    font-size: 12px;
-    padding: 10px 8px;
+    font-size: 11px;
+    border-radius: 6px;
+    padding: 6px 8px;
+    margin: 0;
+    box-sizing: border-box;
     outline: none;
     cursor: pointer;
     text-align: center;
     text-align-last: center;
+    transition: border-color 0.2s;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
 }
-.nd-select:hover { color: #fff; }
+.nd-select:hover { border-color: rgba(255, 255, 255, 0.2); }
+.nd-select:focus { border-color: rgba(255, 255, 255, 0.3); }
 .nd-select option { background: #1a1a1e; color: #eee; text-align: left; }
-.nd-select.size { font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: 11px; }
+.nd-select.size { font-family: "SF Mono", "Menlo", "Consolas", monospace; font-size: 10px; }
 
-.nd-inner-sep {
-    height: 1px;
-    background: linear-gradient(90deg, transparent 8px, var(--nd-border-subtle) 8px, var(--nd-border-subtle) calc(100% - 8px), transparent calc(100% - 8px));
-}
+.nd-inner-sep { display: none; }
 
 .nd-controls { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
 
@@ -428,13 +432,22 @@ function buildSizeOptions() {
 function fillSelectOptions(select, options, currentValue) {
     if (!select) return;
     select.textContent = '';
+    const currentStr = currentValue == null ? null : String(currentValue);
+    let selectedSet = false;
     options.forEach((opt) => {
         const option = document.createElement('option');
-        option.value = opt.value;
+        const valueStr = String(opt.value);
+        option.value = valueStr;
         option.textContent = opt.label;
-        if (opt.value === currentValue) option.selected = true;
+        if (currentStr !== null && valueStr === currentStr) {
+            option.selected = true;
+            selectedSet = true;
+        }
         select.appendChild(option);
     });
+    if (!selectedSet && options.length > 0) {
+        select.selectedIndex = 0;
+    }
 }
 
 function createPanelElement(messageId) {
@@ -790,7 +803,7 @@ function updateAllPresetSelects() {
     const presets = settings.paramsPresets || [];
     const currentId = settings.selectedParamsPresetId;
     const options = presets.map(p => ({
-        value: p.id,
+        value: p.id ?? '',
         label: p.name || 'Unnamed',
     }));
     panelMap.forEach((data) => {
@@ -826,7 +839,7 @@ function refreshPresetSelect(messageId) {
         const presets = settings.paramsPresets || [];
         const currentId = settings.selectedParamsPresetId;
         const options = presets.map(p => ({
-            value: p.id,
+            value: p.id ?? '',
             label: p.name || 'Unnamed',
         }));
         fillSelectOptions(select, options, currentId);