dsh-plugin-image-workbench 1.1.6 → 1.1.8

package/package.json

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

package/server/app.py

@@ -425,6 +425,48 @@ async def api_catalog():
     return JSONResponse(CATALOG)
 
 
+_SAMPLES_CACHE = {"at": 0.0, "data": None}
+
+
+def _sample_progress() -> dict:
+    """数一遍缩略图准备到哪了。
+
+    首次安装时 repo_images 是空的（这 500 多张图不进发布包），插件在后台慢慢补。
+    前端拿这个数字决定要不要在顶部提示条里说一句「先看到渐变占位是正常的」，
+    补完自动撤掉，不做成永久横幅。
+    """
+    expected = have = 0
+    for key in ("styles", "layouts", "colors"):
+        for item in CATALOG.get(key) or []:
+            # catalog 里写成 images/individual/...，落到磁盘时去掉 images/ 前缀，
+            # 和前端 imgUrl() 的拼法、/img 路由的取法保持一致，否则永远数成 0 张。
+            rel = re.sub(r"^images/", "", str((item or {}).get("img") or "").strip())
+            if not rel:
+                continue
+            expected += 1
+            if (REPO_IMAGES / rel).is_file():
+                have += 1
+    return {
+        "total": expected,
+        "have": have,
+        "missing": expected - have,
+        "ready": expected == 0 or have >= expected,
+    }
+
+
+@app.get("/api/samples")
+async def api_samples(fresh: int = 0):
+    """缩略图同步进度（只读）。补图是后台进行的，这里只报数。"""
+    now = time.time()
+    cached = _SAMPLES_CACHE["data"]
+    if cached is not None and not fresh and now - _SAMPLES_CACHE["at"] < 10:
+        return JSONResponse(cached)
+    data = await run_in_threadpool(_sample_progress)
+    _SAMPLES_CACHE["at"] = now
+    _SAMPLES_CACHE["data"] = data
+    return JSONResponse(data)
+
+
 @app.get("/api/pool")
 async def api_pool():
     # 前端每 10 秒轮询一次，顺手在这里做离线自愈：号池后起也能自己从「离线」翻成在线

package/server/smoke_check.py

@@ -102,7 +102,7 @@ except Exception as e:
 print('\n=== 2. 读接口 ===')
 client = httpx.Client(base_url=BASE, trust_env=False, timeout=30)
 routes = [
-    ('/', 200), ('/health', 200), ('/api/catalog', 200), ('/api/pool', 200),
+    ('/', 200), ('/health', 200), ('/api/catalog', 200), ('/api/samples', 200), ('/api/pool', 200),
     ('/api/monitor', 200), ('/api/recent', 200), ('/api/history', 200),
     ('/api/tasks', 200), ('/api/drafts', 200), ('/api/pool/check', 200),
     ('/api/pool/fails', 200), ('/api/pool/panel', 200),

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,6 +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">如果不知道怎么上手，可以试着直接点击「批量出图」。</div>
       <div class="ad-item">使用过程中有任何问题，可以多看看公众号详细介绍。</div>
       <div class="ad-item">如果发现其他问题，估计作者也搞不定，就直接问 AI 吧。</div>
@@ -4681,19 +4685,50 @@ 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 文案、不动文字和节点：条数一变，上面的位移计数就错位。
+     具体差多少张放在 title 里。 */
+  var el = document.getElementById('adSamples');
+  if(!el) return;
+  fetch('/api/samples', {cache: 'no-store'})
+    .then(function(r){ return r.ok ? r.json() : null; })
+    .then(function(s){
+      if(!s || !s.total) return;
+      el.title = s.missing > 0
+        ? '缩略图后台同步中：已 ' + s.have + ' / ' + s.total + ' 张，还差 ' + s.missing + ' 张，补完刷新即可。'
+        : '缩略图已全部就位（共 ' + s.total + ' 张）。';
+    })
+    .catch(function(){}); // 状态读不到就保持默认说明，不影响轮播
 })();
 </script>