@biunow/agent-biuart 0.1.2 → 0.1.3

package/manifest.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "id": "biuart",
   "name": "BiuArt",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "publisher": "Biunow",
   "description": "BiuArt 艺术动画：锁定一种画风，用代码画出会动的画面，一镜一镜渲成片。",
   "entry": {
@@ -45,8 +45,8 @@
     "requiresEntitlement": "export"
   },
   "integrity": {
-    "sha256": "f6fca5f754b9d3c4fb1df85456d1b83232b58c3c14578a547816bfde8a1f88e1",
-    "signature": "mxu0dAVRKJFWK4dOJRH7rn5rkd3Phe/uX6xnGKl+08yQMLZY7m0U+b48JK7JISI2VhPDc31oRhUqLTdz2f50Bw==",
+    "sha256": "abffc8170429a312a02a0275b661336f2c30e652d83e553140eba0e395d501bb",
+    "signature": "mf5AuMQ3vXjnbUpfdpt0Lqi/BxYGeCllJo6W6W2xFuGG0ASAAOEtXwHnpeZkKML+Q6jUacjyyABaR5+ewsbUDA==",
     "signedBy": "publisher-key"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biunow/agent-biuart",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "BiuArt",
   "license": "UNLICENSED",
   "publishConfig": {

package/studio/app.js

@@ -79,14 +79,14 @@
     state.style = item?.id || state.style;
     if (!item) return;
     $('style-group').textContent = item.group || '—';
-    const parts = [item.summary || '', item.previewable ? '可试渲染 2 秒。' : '参数化片段，由代码按 spec 渲染。'];
+    const parts = [item.summary || '', item.previewable ? '可试渲染 2 秒。' : '这一种直接出片，不做试渲染。'];
     $('style-summary').textContent = parts.filter(Boolean).join(' ');
     const canPreview = !!item.previewable && state.meta.enginePresent;
     $('preview').disabled = !canPreview;
-    $('preview').title = canPreview ? '渲一段示例看画风' : (item.previewable ? '引擎未安装' : '这个语法没有内置示例场景');
+    $('preview').title = canPreview ? '渲一段示例看画风' : (item.previewable ? '画风样本准备中' : '这一种没有试渲染');
     $('preview-status').textContent = item.previewable
-      ? (state.meta.enginePresent ? '示例场景可用。' : '引擎未安装。')
-      : '解说语法走 spec，不提供内置预览。';
+      ? (state.meta.enginePresent ? '示例场景可用。' : '样本准备中。')
+      : '';
   }
 
   /* ---------- 小选择器：时长 / 画幅 ---------- */
@@ -216,6 +216,7 @@
         host.prepend(el);
       }
       const mp4 = job.outputMp4 && /\.mp4$/i.test(job.outputMp4);
+      el.className = `job${mp4 ? ' playable' : ''}`;
       el.innerHTML = `
         <div class="job-top">
           <div class="job-title">${escapeHtml(job.title || job.styleName || '任务')}</div>
@@ -223,13 +224,45 @@
         </div>
         <div class="job-msg">${escapeHtml(job.message || '')}</div>
         <div class="job-bar"><span style="width:${Math.max(0, Math.min(100, Number(job.progress) || 0))}%"></span></div>
-        ${mp4 ? `<video class="job-video" controls playsinline preload="metadata" src="/api/file?path=${encodeURIComponent(job.outputMp4)}"></video>` : ''}
-        <div class="job-actions">
-          ${job.projectPath ? `<span class="job-msg">${escapeHtml(job.projectPath)}</span>` : ''}
-          ${job.error ? `<span class="job-msg">${escapeHtml(job.error)}</span>` : ''}
-        </div>
+        ${mp4 ? '<div class="job-play">▷ 点击播放成片</div>' : ''}
+        ${job.error ? `<div class="job-msg">${escapeHtml(job.error)}</div>` : ''}
       `;
+      el.onclick = mp4 ? () => openFilm(job) : null;
+    }
+  }
+
+  /* ---------- 成片弹窗 ---------- */
+  function openFilm(job) {
+    let back = document.querySelector('.film-modal');
+    if (!back) {
+      back = document.createElement('div');
+      back.className = 'film-modal';
+      back.innerHTML = `
+        <div class="film-modal-card" role="dialog" aria-modal="true">
+          <div class="film-modal-bar">
+            <strong></strong>
+            <button type="button" class="film-modal-x" aria-label="关闭">×</button>
+          </div>
+          <video controls playsinline></video>
+        </div>`;
+      document.body.appendChild(back);
+      const close = () => {
+        const video = back.querySelector('video');
+        video.pause();
+        video.removeAttribute('src');
+        video.load();
+        back.hidden = true;
+      };
+      back.querySelector('.film-modal-x').addEventListener('click', close);
+      back.addEventListener('click', (e) => { if (e.target === back) close(); });
+      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
     }
+    back.querySelector('strong').textContent = job.title || job.styleName || '成片';
+    const src = `/api/jobs/${encodeURIComponent(job.id)}/film`;
+    const video = back.querySelector('video');
+    video.src = src;
+    back.hidden = false;
+    video.play().catch(() => {});
   }
 
   function stateLabel(status) {
@@ -341,15 +374,14 @@
       updateCharHint();
       updateStoryboardHint();
       const chips = [];
-      chips.push(`<span class="chip ${state.meta.enginePresent ? '' : 'bad'}">${state.meta.enginePresent ? '引擎已就绪' : '引擎未安装'}</span>`);
-      if (!state.meta.canExport) chips.push('<span class="chip warn">未激活</span>');
+      chips.push(`<span class="chip ${state.meta.enginePresent ? '' : 'warn'}">${state.meta.enginePresent ? '画风已就绪' : '画风准备中'}</span>`);
+      if (!state.meta.canExport) chips.push('<span class="chip bad">未授权</span>');
+      chips.push(`<span class="chip">${state.meta.styles.length} 种画风</span>`);
       $('health-chips').innerHTML = chips.join('');
-      $('engine-line').textContent = state.meta.enginePresent
-        ? `Engine: ${state.meta.engineRoot}`
-        : 'ENGINE_ROOT 未设置：把面板 settings.engineRoots["biuart"] 指向 huashu-art-motion/scripts/engine。';
       if (!state.meta.enginePresent) {
         $('preview').disabled = true;
         $('submit').disabled = true;
+        showError('BiuArt 暂时还没准备好，请稍后再试；一直不行请联系客服。');
       }
       await refreshJobs();
       setInterval(refreshJobs, 3000);

package/studio/index.html

@@ -14,7 +14,6 @@
         <div class="eyebrow">BIUART · ART MOTION</div>
         <h1>把画风写成会动的代码</h1>
         <p class="hero-desc">选一种画风，写下要讲的事。BiuArt 先出镜头表，再逐帧渲成片；画面由代码绘制，不靠拼图转场。</p>
-        <div class="sub" id="engine-line">正在检查引擎…</div>
       </div>
       <div class="hero-aside">
         <div class="hero-badge">

package/studio/styles.css

@@ -59,6 +59,12 @@
 .job-bar { height: 4px; border-radius: 99px; background: #ededE7; margin-top: 8px; overflow: hidden; }
 .job-bar > span { display: block; height: 100%; background: var(--accent-deep); transition: width .3s ease; }
 .job-video { width: 100%; border-radius: 8px; margin-top: 8px; background: #111; }
+.job.playable { cursor: pointer; }
+.job.playable:hover { border-color: var(--accent-deep); background: #fbfdf2; }
+.job-play {
+  margin-top: 8px; font-size: 11px; font-weight: 650; color: #4d5c16;
+  background: var(--accent-soft); border-radius: 99px; padding: 4px 10px; display: inline-block;
+}
 .job-actions { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
 .job-actions a { font-size: 11px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
 .empty { color: var(--muted-2); font-size: 12px; padding: 8px 0; }