feat(workshop): AI创作弹窗需求区默认折叠可点击展开(标题行+已填计数+箭头动画)

project/短视频脚本创作/V1.0/mcn-work-shop/public/data-pages.js

@@ -233,7 +233,14 @@ async function confirmAiScript(accountName, btn) {
   mask.innerHTML = `<div class="modal req-modal">
     <div class="modal-title-row"><span>AI创作 · ${esc(accountName)}</span><button class="btn btn-icon" data-x title="关闭">${svgIcon('x', 16)}</button></div>
     <div class="req-head">输入想法，或点回形针上传需求文档（doc / docx / txt / pdf），AI 会把需求整理到上方「创作需求」里；打磨满意后点输入框内的 ✓ 提交创作（附件原文会一并作为创作上下文）。Enter 发送，Shift+Enter 换行。</div>
-    <div class="req-sheet" id="reqSheet"></div>
+    <div class="req-sheet-box" id="reqSheetBox">
+      <button type="button" class="req-sheet-toggle" id="reqSheetToggle" title="展开/收起创作需求" aria-expanded="false">
+        <span class="rst-label">创作需求</span>
+        <span class="rst-count" id="reqFilledCount"></span>
+        <span class="rst-caret" id="reqCaret">${svgIcon('arrow-up', 14)}</span>
+      </button>
+      <div class="req-sheet" id="reqSheet"></div>
+    </div>
     <div class="req-dialog" id="reqDialog"></div>
     <div class="req-attach-row" id="attachRow"></div>
     <div class="req-bar">
@@ -262,7 +269,20 @@ async function confirmAiScript(accountName, btn) {
       return `<div class="req-field${v ? '' : ' empty'}"><div class="rf-title">${label}</div><div class="rf-val">${v ? esc(v) : '（待定 · 由 AI 按人设自决）'}</div></div>`;
     }).join('');
     q('#reqSheet').innerHTML = rows;
+    const filled = REQ_FIELDS.filter(([k]) => String(w[k] || '').trim()).length;
+    const cnt = q('#reqFilledCount');
+    if (cnt) cnt.textContent = `${filled}/${REQ_FIELDS.length} 已填`;
+    const box = q('#reqSheetBox');
+    if (box) box.classList.toggle('has-filled', filled > 0);
   };
+  /* —— 需求区折叠切换（默认收起，点击标题展开） —— */
+  const sheetToggle = q('#reqSheetToggle');
+  if (sheetToggle) sheetToggle.addEventListener('click', () => {
+    const box = q('#reqSheetBox');
+    if (!box) return;
+    const open = box.classList.toggle('open');
+    sheetToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+  });
   /* —— 对话流渲染 —— */
   const renderDialog = () => {
     const el = q('#reqDialog');

project/短视频脚本创作/V1.0/mcn-work-shop/public/style.css

@@ -227,6 +227,28 @@ main { height: calc(100vh - 54px); }
 .rf-title { flex: none; width: 104px; font-size: 12px; color: #7a8494; font-weight: 600; letter-spacing: .2px; line-height: 1.4; padding-top: 3px; }
 .rf-val { flex: 1; font-size: 14px; color: var(--text); line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
 .req-field.empty .rf-val { color: #c6ccd6; font-size: 13px; }
+/* 需求区折叠容器（09-02）：标题行「创作需求 + n/10 已填 + 箭头」点击展开/收起，默认收起 */
+.req-sheet-box { flex: none; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px 4px; }
+.req-sheet-toggle {
+  width: 100%; display: flex; align-items: center; gap: 8px;
+  background: none; border: none; padding: 8px 2px 6px; margin: 0;
+  font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-align: start;
+}
+.req-sheet-toggle:hover .rst-label { color: var(--primary); }
+.req-sheet-toggle .rst-count {
+  font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--dim);
+  background: #f0f2f5; border-radius: 10px; padding: 0 8px;
+}
+.req-sheet-box.has-filled .rst-label::before {
+  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--primary); margin-right: 6px; vertical-align: 1px;
+}
+.req-sheet-box.has-filled .rst-count { background: var(--primary-soft); color: var(--primary); }
+.req-sheet-toggle .rst-caret { margin-left: auto; display: inline-flex; align-items: center; color: var(--dim); }
+.req-sheet-toggle .rst-caret svg { transition: transform .2s ease; transform: rotate(180deg); } /* 收起（默认）：箭头朝下提示可展开 */
+.req-sheet-box.open .rst-caret svg { transform: rotate(0deg); }
+.req-sheet-box .req-sheet { max-height: 0; overflow: hidden; padding: 0; transition: max-height .2s ease; }
+.req-sheet-box.open .req-sheet { max-height: 340px; overflow: auto; padding: 2px; }
 /* 提交创作确认弹窗 */
 .req-confirm-label { font-size: 13px; color: var(--dim); margin: 10px 0 6px; }
 .req-confirm-box {