dsh-plugin-image-workbench 1.1.7 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-image-workbench",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "type": "module",
   "description": "Bluxe手绘工坊 · 生图工作台（图文 / 摄影）：DSH 侧栏图像生成工作台，默认使用内置本地账号池，亦支持任意 OpenAI 兼容接口（Base URL / API Key / 模型）；可自定义工作台名称与图片存储目录。",
   "main": "./host.js",

package/server/static/index.html

@@ -21,13 +21,15 @@
     letter-spacing:0;line-height:1.6;color:#1f9d6b;background:#e8f6ef;border:1px solid #bfe8d4;
     text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
   header .gh-link:hover{background:#d7efe2;color:#17845a}
-  /* 顶部竖滚轮播提示条：标题右侧、操作按钮左侧的空白区 */
-  .header-ad{flex:1 1 200px;min-width:0;max-width:440px;display:flex;align-items:center;gap:8px;
+  /* 顶部竖滚轮播提示条：标题右侧、操作按钮左侧。宽度贴合当前这条提示（跟着轮播伸缩），不拉满 */
+  .header-ad{flex:0 1 auto;min-width:0;max-width:440px;display:flex;align-items:center;gap:8px;
     margin:0 4px;height:30px;padding:0 10px;background:#f3fbf7;border:1px solid #d7efe2;border-radius:8px;overflow:hidden}
   .header-ad .ad-tag{flex:none;font-size:10px;font-weight:600;color:#fff;background:#1f9d6b;
     padding:2px 7px;border-radius:10px;letter-spacing:.5px}
-  .header-ad .ad-view{flex:1;min-width:0;height:20px;overflow:hidden;position:relative}
-  .header-ad .ad-track{display:flex;flex-direction:column;transition:transform .7s ease}
+  .header-ad .ad-view{flex:0 1 auto;min-width:0;height:20px;overflow:hidden;position:relative;
+    transition:width .45s ease}
+  /* width:max-content：每条按自己的文字撑开，宽度动画时不会互相挤出省略号 */
+  .header-ad .ad-track{display:flex;flex-direction:column;width:max-content;transition:transform .7s ease}
   .header-ad .ad-item{height:20px;line-height:20px;font-size:12px;color:#2f6b50;white-space:nowrap;
     overflow:hidden;text-overflow:ellipsis}
   /* 右上角「更多功能」下拉 */
@@ -348,10 +350,11 @@
   .head-acts .status{margin:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;
     white-space:nowrap;font-size:11.5px;line-height:1.3}
   .head-acts .ha-sep{width:1px;height:20px;background:var(--line);margin:0 3px;flex:none}
-  /* 空间不够时：提示条留在标题同一行的右侧空档，操作区独占第二行，别把标题挤变形 */
-  @media (max-width:1360px){
+  /* 空间不够时：提示条留在标题同一行的右侧空档，操作区独占第二行，别把标题挤变形。
+     断点 1520 = 单行放得下最长提示条（文字 306px + 外壳 65px）的宽度，再窄就换行。 */
+  @media (max-width:1520px){
     header{flex-wrap:wrap;row-gap:8px}
-    .header-ad{order:1;flex:1 1 160px}
+    .header-ad{order:1;flex:0 1 auto}
     .head-acts{order:2;flex:1 0 100%;margin-left:0;flex-wrap:wrap;justify-content:flex-start}
     .head-acts .pool-chip{margin-left:auto}
   }
@@ -612,7 +615,7 @@
   <div class="header-ad" id="headerAd" title="使用提示">
     <span class="ad-tag">提示</span>
     <div class="ad-view"><div class="ad-track" id="adTrack">
-      <div class="ad-item" id="adSamples" title="刚安装成功时，缩略图会在后台自动补齐，补完刷新就是真图">缩略图先同步，渐变是占位</div>
+      <div class="ad-item" id="adSamples" title="刚安装成功时，缩略图会在后台自动补齐，补完刷新就是真图">刚安装完需要点时间同步图型、风格、主题色缩略图。</div>
       <div class="ad-item">如果不知道怎么上手，可以试着直接点击「批量出图」。</div>
       <div class="ad-item">使用过程中有任何问题，可以多看看公众号详细介绍。</div>
       <div class="ad-item">如果发现其他问题，估计作者也搞不定，就直接问 AI 吧。</div>
@@ -4682,22 +4685,39 @@ setInterval(refreshPool, 10000);
   if(items < 2) return;
   track.appendChild(track.children[0].cloneNode(true)); // 克隆首条，衔接更顺
   var h = 20, idx = 0, HOLD = 5200, EASE = 720;
+
+  /* 绿框宽度贴合当前这条提示的文字宽（每条长短不同，跟着轮播一起伸缩），
+     免得短提示后面拖一条空绿。track 是 width:max-content，
+     这里只需把 .ad-view 的宽度对准当前条，其余交给 CSS 过渡。 */
+  var view = track.parentElement;
+  function textW(el){
+    var r = document.createRange(); r.selectNodeContents(el);
+    return Math.ceil(r.getBoundingClientRect().width);
+  }
+  var ws = Array.prototype.map.call(track.children, textW);
+  function fit(){ view.style.width = ws[idx] + 'px'; }
+  view.style.transition = 'none';   // 首次直接落位，不播缩放入场
+  fit();
+  requestAnimationFrame(function(){ view.style.transition = ''; });
+
   setInterval(function(){
     idx++;
     track.style.transform = 'translateY(' + (-idx*h) + 'px)';
+    fit();
     if(idx === items){
       setTimeout(function(){
         track.style.transition = 'none';
         idx = 0;
         track.style.transform = 'translateY(0)';
+        fit();
         void track.offsetHeight; // 强制回流后恢复过渡
         track.style.transition = '';
       }, EASE);
     }
   }, HOLD);
 
-  /* 缩略图那条只改 hover 文案、不动文字和节点：条数一变，上面的计数就错位，
-     文字一长就被 440px 的框截成省略号。具体差多少张放在 title 里。 */
+  /* 缩略图那条只改 hover 文案、不动文字和节点：条数一变，上面的位移计数就错位。
+     具体差多少张放在 title 里。 */
   var el = document.getElementById('adSamples');
   if(!el) return;
   fetch('/api/samples', {cache: 'no-store'})