endset_three_editor 0.5.3 → 0.5.4

package/dist/three-editor.es.js

@@ -1993,10 +1993,10 @@ class dt {
       items: e.items || [],
       offsetY: e.offsetY ?? 0.1,
       fontSize: e.fontSize || "13px",
-      width: e.width || "200px",
-      backgroundColor: e.backgroundColor || "rgba(20, 30, 50, 0.85)",
-      textColor: e.textColor || "#ecf0f1",
-      borderColor: e.borderColor || "rgba(100, 160, 255, 0.6)",
+      width: e.width || "240px",
+      backgroundColor: e.backgroundColor || "linear-gradient(135deg, rgba(6, 16, 42, 0.55) 0%, rgba(2, 6, 18, 0.40) 100%)",
+      textColor: e.textColor || "#ffffff",
+      borderColor: e.borderColor || "rgba(80, 200, 255, 0.15)",
       className: e.className || ""
     }, this.buildPanel();
   }
@@ -2008,44 +2008,50 @@ class dt {
   /** 根据当前 options 构建面板 DOM 结构（全部使用 em 单位，font-size 由 JS 动态控制） */
   buildPanel() {
     const e = this.options, t = dt.pxToEm, n = document.createElement("div");
-    if (n.className = `${Ye.panel} ${e.className}`.trim(), n.style.cssText = `
+    n.className = `${Ye.panel} ${e.className}`.trim();
+    const s = e.backgroundColor.includes("gradient") ? e.backgroundColor : `linear-gradient(135deg, ${e.backgroundColor} 0%, rgba(2, 6, 18, 0.40) 100%)`;
+    if (n.style.cssText = `
       width: ${t(parseFloat(e.width || "200"))}em;
-      background: ${e.backgroundColor};
+      background: ${s};
       color: ${e.textColor};
       border: ${t(1)}em solid ${e.borderColor};
-      border-radius: ${t(8)}em;
-      padding: ${t(10)}em ${t(14)}em;
+      border-radius: ${t(10)}em;
+      padding: ${t(12)}em ${t(16)}em;
       font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
       font-size: var(${io}, 13px);
-      line-height: 1.7;
-      box-shadow: 0 ${t(4)}em ${t(16)}em rgba(0, 0, 0, 0.4);
-      backdrop-filter: blur(4px);
+      line-height: 1.8;
+      box-shadow:
+        0 ${t(4)}em ${t(24)}em rgba(0, 0, 0, 0.5),
+        0 0 ${t(12)}em rgba(60, 180, 240, 0.12),
+        inset 0 0 ${t(4)}em rgba(60, 180, 240, 0.04);
       user-select: none;
       pointer-events: auto;
       box-sizing: border-box;
     `, e.title) {
-      const o = document.createElement("div");
-      o.className = Ye.title, o.style.cssText = `
+      const a = document.createElement("div");
+      a.className = Ye.title, a.style.cssText = `
         font-weight: 700;
         font-size: ${t(15)}em;
-        color: #88aaff;
+        color: #88d8f0;
+        text-shadow: 0 0 ${t(6)}em rgba(136, 216, 240, 0.20);
         margin-bottom: ${t(8)}em;
         padding-bottom: ${t(6)}em;
-        border-bottom: ${t(1)}em solid rgba(136, 170, 255, 0.3);
+        border-bottom: ${t(1)}em solid rgba(100, 200, 232, 0.20);
         text-align: center;
-      `, o.textContent = e.title, o.setAttribute("data-panel-title", ""), n.appendChild(o);
+        letter-spacing: ${t(1.2)}em;
+      `, a.textContent = e.title, a.setAttribute("data-panel-title", ""), n.appendChild(a);
     }
-    const s = document.createElement("div");
-    s.className = Ye.list, s.setAttribute("data-panel-list", ""), n.appendChild(s), this.renderItems(s, e.items);
     const i = document.createElement("div");
-    i.className = Ye.arrow, i.style.cssText = `
+    i.className = Ye.list, i.setAttribute("data-panel-list", ""), n.appendChild(i), this.renderItems(i, e.items);
+    const o = document.createElement("div");
+    o.className = Ye.arrow, o.style.cssText = `
       width: 0;
       height: 0;
       border-left: ${t(8)}em solid transparent;
       border-right: ${t(8)}em solid transparent;
-      border-top: ${t(8)}em solid ${e.borderColor};
-      margin: ${t(4)}em auto 0;
-    `, n.appendChild(i), this.container = n, this.css2dObject && (this.css2dObject.element = n);
+      border-top: ${t(8)}em solid rgba(100, 200, 232, 0.25);
+      margin: ${t(5)}em auto 0;
+    `, n.appendChild(o), this.container = n, this.css2dObject && (this.css2dObject.element = n);
   }
   /** 渲染数据项到 DOM 列表 */
   renderItems(e, t) {
@@ -2057,10 +2063,10 @@ class dt {
         justify-content: space-between;
         align-items: center;
         padding: ${n(3)}em 0;
-        border-bottom: ${n(1)}em solid rgba(255, 255, 255, 0.06);
+        border-bottom: ${n(1)}em solid rgba(255, 255, 255, 0.05);
       `, i.setAttribute("data-item-code", s.code || ""), i.innerHTML = `
-        <span class="item-label" style="opacity: 0.75; flex-shrink: 0;">${this.escapeHtml(s.label)}</span>
-        <span class="item-value" style="font-weight: 600; color: #5dade2; text-align: right; word-break: break-all;">${this.escapeHtml(s.value)}${s.unit ? `<span style="font-size:0.85em;opacity:0.7;margin-left:2px;">${this.escapeHtml(s.unit)}</span>` : ""}</span>
+        <span class="item-label" style="opacity: 0.78; flex-shrink: 0;">${this.escapeHtml(s.label)}</span>
+        <span class="item-value" style="font-weight: 700; color: #88d8f0; text-shadow: 0 0 ${n(4)}em rgba(136, 216, 240, 0.15); text-align: right; word-break: break-all;">${this.escapeHtml(s.value)}${s.unit ? `<span style="font-size:0.85em;opacity:0.7;margin-left:${n(2)}em;">${this.escapeHtml(s.unit)}</span>` : ""}</span>
       `, e.appendChild(i);
     });
   }