feat: refine storyforge ops ui information architecture

docs/PRODUCT_LOGIC_NEW_MEDIA_OPERATING_SYSTEM_2026-03-22.md

@@ -115,7 +115,7 @@ Agent 创建完成后，默认先做多平台市场调研，再进入账号导
 - 下阶段动作建议
 
 ### 3.7 作品 Content Item
-所有作品统一抽象，不管来源于哪个平台，都进入统一作品库。
+所有作品统一抽象，不管来源于哪个平台，都沉淀到生产中心里的“作品与成片”区域。
 
 作品需要统一字段：
 - 标题
@@ -158,7 +158,7 @@ Agent 创建完成后，默认先做多平台市场调研，再进入账号导
 - Agent 标注的借鉴点
 - 风险点
 - 建议动作
-- 一键加入学习集 / Playbook / 作品库
+- 一键加入学习集 / Playbook / 生产中心作品区
 
 ### 3.10 内容打法 Playbook
 从精品账号和高分作品中总结出的可学习方法论。
@@ -256,16 +256,15 @@ Agent 将调研和导入分析结果转成结构化资产：
 
 建议固定为：
 - 运营总台
-- 项目中心
-- Agent 工作台
-- 账号发现
+- 我的项目
+- Agent
+- 找对标
 - 跟踪账号
-- 参考账号库
 - 自运营账号
-- 作品库
 - Playbook
 - 生产中心
 - 发布与复盘
+- 自动流程
 - 设置
 
 ## 5.2 运营总台
@@ -281,9 +280,9 @@ Agent 将调研和导入分析结果转成结构化资产：
 - 待复盘任务
 - 平台异常提醒
 
-## 5.3 账号发现页
+## 5.3 找对标页
 
-这个页面应借鉴 `飞瓜 / 千瓜` 的榜单和筛选思路。
+这个页面应借鉴 `飞瓜 / 千瓜` 的榜单和筛选思路，但它不只是“发现页”，还要承接对标账号的页内详情。
 
 核心结构：
 - 页内搜索
@@ -292,10 +291,11 @@ Agent 将调研和导入分析结果转成结构化资产：
 - 榜单类型切换
 - 排序切换
 - 列表区
-- 右侧快速加入参考池
+- 页内详情区或展开态
+- 快速加入项目 / 绑定 Agent
 
 补充要求：
-- 全局搜索保留，但账号发现页必须有页内搜索
+- 全局搜索保留，但找对标页必须有页内搜索
 - 页内搜索支持账号名、主页链接、作品链接、关键词
 - “变现方式”不应只保留单一选项，至少支持不限、知识付费、广告合作、带货转化、私域咨询
 
@@ -309,7 +309,7 @@ Agent 将调研和导入分析结果转成结构化资产：
 - 关联 Agent
 - 更新日报
 - 借鉴点标注
-- 一键加入学习集 / Playbook / 作品库
+- 一键加入学习集 / Playbook / 生产中心作品区
 
 逻辑要求：
 - 跟踪账号由用户手动添加
@@ -317,21 +317,21 @@ Agent 将调研和导入分析结果转成结构化资产：
 - 日报按“上次打开后”汇总，而不是死板按自然日切分
 - 如果用户多天未登录，则进入平台后看到的是多天汇总日报
 
-## 5.5 参考账号工作区
+## 5.5 找对标页内详情态
 
-每个参考账号要有独立工作区，不只是“详情页”。
+对标账号的详情不要再拆成独立一级页面，而应在 `找对标` 页面里用页内展开、右侧详情区或抽屉承接。
 
-建议页签：
+建议包含：
 - 总览
-- 作品
+- 高分作品
 - 账号画像
 - 内容打法
 - 相似账号
 - 已学习 Agent
 
-## 5.6 项目中心
+## 5.6 我的项目
 
-项目中心是新的主入口，建议展示：
+“我的项目”是新的主入口，建议展示：
 - 项目类型
 - 绑定状态
 - 已创建 Agent
@@ -348,11 +348,11 @@ Agent 将调研和导入分析结果转成结构化资产：
 - 生产计划
 - 发布复盘
 
-## 5.8 作品库
+## 5.8 生产中心里的作品与成片
 
-作品库是最重要的资产页之一。
+作品不再单独拆成一级页，而是并入生产中心里的“作品与成片”区域。
 
-必须支持：
+这个区域必须支持：
 - 平台筛选
 - 类型筛选
 - 时间筛选
@@ -361,7 +361,7 @@ Agent 将调研和导入分析结果转成结构化资产：
 - 商业价值排序
 - 可复刻排序
 
-每条作品下面必须同时展示：
+每条内容下面必须同时展示：
 - 基础数据
 - AI 摘要
 - 可借鉴点
@@ -412,6 +412,12 @@ Agent 页面不要做成技术配置页。
 - 实拍剪辑
 - AI 视频
 
+同时要内置“作品与成片”区域，让用户在生产页面里直接查看：
+- 当前在产内容
+- 已沉淀的高分内容
+- 待审核成片
+- 已发布后待复盘内容
+
 ## 5.12 发布与复盘
 
 这个模块是现在最缺的。
@@ -443,7 +449,7 @@ Agent 页面不要做成技术配置页。
 - 新增作品按“上次打开后”自动汇总
 - 由用户创建的 Agent 分析借鉴点
 - 用户打开平台后优先看到这组日报
-- 高价值更新可一键送入学习集 / Playbook / 作品库
+- 高价值更新可一键送入学习集 / Playbook / 生产中心作品区
 
 ### 6.3 API key 管理
 

output/ui/storyforge-web-v4-html-prototype-2026-03-22/README.md

@@ -7,15 +7,14 @@
 
 包含页面：
 - 项目总台
-- 项目与接入
-- 找参考
+- 我的项目
+- 找对标
 - 跟踪账号
-- 参考详情
 - 我的账号
-- 作品库
 - Agent
 - 生产中心
 - 发布与复盘
+- 自动流程
 - 额度
 
 说明：
@@ -24,6 +23,8 @@
 - 主业务流已调整为：项目 -> Agent -> 首轮调研 -> 导入绑定 -> 生产 -> 发布复盘
 - 新增：跟踪账号 -> 自动汇总更新 -> Agent 标注借鉴点 -> 日报回看
 - 导入分析以 Agent 为中心，不再以规则判断为主
+- `找对标` 已经把列表和详情收在一个页面里，不再单独拆 `参考详情`
+- `作品库` 已并入 `生产中心` 的“作品与成片”区域
 - 模型凭证默认后台托管，用户界面只表达模型选择与额度消耗
 - 主题色以淡蓝、白、黑、灰为主
 

output/ui/storyforge-web-v4-html-prototype-2026-03-22/index.html

@@ -25,28 +25,20 @@
           </button>
           <button class="nav-item" data-screen-target="intake">
             <span class="icon">⊕</span>
-            <span>项目与接入</span>
+            <span>我的项目</span>
           </button>
           <button class="nav-item" data-screen-target="discovery">
             <span class="icon">◎</span>
-            <span>找参考</span>
+            <span>找对标</span>
           </button>
           <button class="nav-item" data-screen-target="tracking">
             <span class="icon">◌</span>
             <span>跟踪账号</span>
           </button>
-          <button class="nav-item" data-screen-target="benchmark">
-            <span class="icon">★</span>
-            <span>参考详情</span>
-          </button>
           <button class="nav-item" data-screen-target="owned">
             <span class="icon">◉</span>
             <span>我的账号</span>
           </button>
-          <button class="nav-item" data-screen-target="works">
-            <span class="icon">▤</span>
-            <span>作品库</span>
-          </button>
           <button class="nav-item" data-screen-target="playbook">
             <span class="icon">≣</span>
             <span>Agent</span>
@@ -63,9 +55,9 @@
 
         <div class="nav-group">
           <div class="nav-title">辅助模块</div>
-          <button class="nav-item">
+          <button class="nav-item" data-screen-target="automation">
             <span class="icon">⚑</span>
-            <span>自动化</span>
+            <span>自动流程</span>
           </button>
           <button class="nav-item" data-screen-target="credits">
             <span class="icon">¤</span>
@@ -109,7 +101,7 @@
               <span>⌕</span>
               <input value="搜索项目、账号、作品、Agent 或任务" />
             </label>
-            <span class="top-pill">自动化正常 7/8</span>
+            <span class="top-pill">流程正常 7/8</span>
             <span class="top-pill">跟踪更新 12</span>
             <span class="top-pill">待调研 Agent 4</span>
             <div class="avatar">KR</div>
@@ -158,7 +150,7 @@
                 <h3>主业务流已经前置</h3>
                 <p>项目 -> Agent -> 调研 -> 导入绑定 -> 生产 -> 复盘。</p>
                 <div class="chip-row" style="margin-top:14px;">
-                  <span class="chip active">1. 项目与接入</span>
+                  <span class="chip active">1. 我的项目</span>
                   <span class="chip">2. 创建 Agent</span>
                   <span class="chip">3. 首轮调研</span>
                   <span class="chip">4. 导入并绑定</span>
@@ -218,7 +210,7 @@
                     <h3>最近发现的高分账号</h3>
                     <div class="panel-subtitle">先选要学的号</div>
                   </div>
-                  <span class="tag">找参考</span>
+                  <span class="tag">找对标</span>
                 </div>
                 <div class="three-col">
                   <div class="entity-card pad">
@@ -373,7 +365,7 @@
         <section class="screen" data-screen="intake">
           <div class="screen-head">
             <div>
-              <h2>项目与接入</h2>
+              <h2>我的项目</h2>
               <p>先建项目，再决定是否绑定自己的账号。</p>
             </div>
             <div class="action-row">
@@ -559,8 +551,8 @@
         <section class="screen" data-screen="discovery">
           <div class="screen-head">
             <div>
-              <h2>找参考</h2>
-              <p>在这里找值得学的账号。</p>
+              <h2>找对标</h2>
+              <p>在这里找值得持续学习的对标账号。</p>
             </div>
             <div class="action-row">
               <button class="btn btn-secondary">保存当前筛选</button>
@@ -674,6 +666,91 @@
                 </tbody>
               </table>
             </div>
+
+            <div class="layout-grid grid-main" style="padding:18px; border-top:1px solid var(--line);">
+              <div class="side-stack">
+                <div class="panel pad" style="box-shadow:none;">
+                  <div class="panel-head">
+                    <div>
+                      <h3>当前选中对标</h3>
+                      <div class="panel-subtitle">点开对标后，直接在这里看详情和动作</div>
+                    </div>
+                    <span class="tag blue">阿元创业手记</span>
+                  </div>
+
+                  <div class="hero-card" style="padding:18px;">
+                    <div class="entity-cell">
+                      <div class="avatar-lg">阿</div>
+                      <div>
+                        <h3>阿元创业手记</h3>
+                        <p>抖音 · 创业成长 · 最近 30 天涨粉 28.7w</p>
+                      </div>
+                    </div>
+                    <div class="mini-grid">
+                      <div class="mini-card"><small>AI 可学习度</small><strong>93</strong></div>
+                      <div class="mini-card"><small>商业价值</small><strong>88</strong></div>
+                      <div class="mini-card"><small>高分作品</small><strong>17</strong></div>
+                      <div class="mini-card"><small>已提炼打法</small><strong>6</strong></div>
+                    </div>
+                  </div>
+
+                  <div class="tab-row">
+                    <span class="tab active">总览</span>
+                    <span class="tab">高分作品</span>
+                    <span class="tab">账号画像</span>
+                    <span class="tab">相似账号</span>
+                  </div>
+
+                  <div class="three-col">
+                    <div class="insight-card">
+                      <h4>账号画像</h4>
+                      <ul>
+                        <li>反常识切入</li>
+                        <li>案例推进强</li>
+                        <li>结尾行动建议明确</li>
+                      </ul>
+                    </div>
+                    <div class="insight-card">
+                      <h4>高分作品</h4>
+                      <ul>
+                        <li>《副业失败的 3 个真实坑》</li>
+                        <li>《为什么努力的人反而更容易做错副业》</li>
+                        <li>适合提炼成系列模板</li>
+                      </ul>
+                    </div>
+                    <div class="insight-card">
+                      <h4>下一步动作</h4>
+                      <ul>
+                        <li>导入到项目</li>
+                        <li>基于该账号创建 Agent</li>
+                        <li>加入 Playbook</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="side-stack">
+                <div class="panel pad" style="box-shadow:none;">
+                  <div class="panel-head">
+                    <div>
+                      <h3>相似对标</h3>
+                      <div class="panel-subtitle">别只学一个号</div>
+                    </div>
+                  </div>
+                  <div class="list">
+                    <div class="task-item">
+                      <h4>小口方法论</h4>
+                      <p>更强结论表达。</p>
+                    </div>
+                    <div class="task-item">
+                      <h4>Grow With Data</h4>
+                      <p>更强结构和镜头节奏。</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </section>
 
@@ -810,7 +887,7 @@
               <div class="panel pad">
                 <div class="panel-head">
                   <div>
-                    <h3>自动化规则</h3>
+                    <h3>自动流程规则</h3>
                     <div class="panel-subtitle">让跟踪更像运营动作，而不是临时爬一眼</div>
                   </div>
                 </div>
@@ -825,7 +902,7 @@
                   </div>
                   <div class="task-item">
                     <h4>结果回写</h4>
-                    <p>高价值更新可一键加入 Agent 学习集、Playbook 或作品库。</p>
+                    <p>高价值更新可一键加入 Agent 学习集、Playbook 或生产中心作品区。</p>
                   </div>
                 </div>
               </div>
@@ -833,76 +910,67 @@
           </div>
         </section>
 
-        <section class="screen" data-screen="benchmark">
+        <section class="screen" data-screen="automation">
           <div class="screen-head">
             <div>
-              <h2>参考详情</h2>
-              <p>这里看单个参考账号的重点结论和可学资产。</p>
+              <h2>自动流程</h2>
+              <p>这里不是做内容生产，而是让系统自动跑那些你不想每天手动点的事。</p>
             </div>
             <div class="action-row">
-              <button class="btn btn-secondary">导入到项目</button>
-              <button class="btn btn-secondary">更新账号画像</button>
-              <button class="btn btn-primary">基于该账号创建 Agent</button>
+              <button class="btn btn-secondary">查看计划</button>
+              <button class="btn btn-secondary">查看异常</button>
+              <button class="btn btn-primary">新建自动流程</button>
             </div>
           </div>
 
           <div class="hero-card">
             <div class="entity-cell">
-              <div class="avatar-lg">阿</div>
+              <div class="avatar-lg">⚙</div>
               <div>
-                <h3>阿元创业手记</h3>
-                <p>抖音 · 创业成长 · 最近 30 天涨粉 28.7w</p>
+                <h3>自动流程是干什么的</h3>
+                <p>用来自动同步账号、抓取跟踪更新、生成日报、刷新学习集、补跑失败任务和发异常提醒。它更像后台助手，不是给用户直接写内容的地方。</p>
               </div>
             </div>
             <div class="mini-grid">
-              <div class="mini-card"><small>AI 可学习度</small><strong>93</strong></div>
-              <div class="mini-card"><small>商业价值</small><strong>88</strong></div>
-              <div class="mini-card"><small>高分作品</small><strong>17</strong></div>
-              <div class="mini-card"><small>已提炼打法</small><strong>6</strong></div>
+              <div class="mini-card"><small>自动同步</small><strong>7</strong></div>
+              <div class="mini-card"><small>日报生成</small><strong>3</strong></div>
+              <div class="mini-card"><small>失败重跑</small><strong>2</strong></div>
+              <div class="mini-card"><small>异常提醒</small><strong>4</strong></div>
             </div>
           </div>
 
-          <div class="tab-row">
-            <span class="tab active">总览</span>
-            <span class="tab">作品</span>
-            <span class="tab">账号画像</span>
-            <span class="tab">内容打法</span>
-            <span class="tab">相似账号</span>
-            <span class="tab">已学习 Agent</span>
-          </div>
-
           <div class="layout-grid grid-main">
             <div class="side-stack">
               <div class="panel pad">
                 <div class="panel-head">
                   <div>
-                    <h3>账号画像</h3>
-                    <div class="panel-subtitle">先看结论，再决定要不要学</div>
+                    <h3>常用自动流程</h3>
+                    <div class="panel-subtitle">这些适合开成后台持续运行</div>
                   </div>
                 </div>
                 <div class="three-col">
                   <div class="insight-card">
-                    <h4>账号定位</h4>
+                    <h4>账号同步</h4>
                     <ul>
-                      <li>反常识切入，适合短视频开头抢注意力</li>
-                      <li>用具体失败案例建立真实感</li>
-                      <li>结尾多给明确行动建议</li>
+                      <li>同步自运营账号数据</li>
+                      <li>更新项目现状</li>
+                      <li>补充账号诊断</li>
                     </ul>
                   </div>
                   <div class="insight-card">
-                    <h4>爆款规律</h4>
+                    <h4>跟踪日报</h4>
                     <ul>
-                      <li>标题里一定有“错误 / 坑 / 真相”</li>
-                      <li>开头 3 秒即给冲突观点</li>
-                      <li>中段用 2 到 3 个案例支撑观点</li>
+                      <li>抓取跟踪账号更新</li>
+                      <li>按上次打开后汇总</li>
+                      <li>由 Agent 标借鉴点</li>
                     </ul>
                   </div>
                   <div class="insight-card">
-                    <h4>不建议照搬</h4>
+                    <h4>失败补跑</h4>
                     <ul>
-                      <li>大量使用强判断话术，风险偏高</li>
-                      <li>过度使用负面情绪会稀释信任</li>
-                      <li>商业承接偏硬，不适合所有账号</li>
+                      <li>剪辑失败自动重试</li>
+                      <li>AI 视频失败补跑</li>
+                      <li>超时任务自动提醒</li>
                     </ul>
                   </div>
                 </div>
@@ -911,26 +979,23 @@
               <div class="panel pad">
                 <div class="panel-head">
                   <div>
-                    <h3>高分作品</h3>
-                    <div class="panel-subtitle">从高分作品里抽打法</div>
+                    <h3>当前流程列表</h3>
+                    <div class="panel-subtitle">按后台计划持续执行</div>
                   </div>
                 </div>
                 <div class="list">
                   <div class="task-item">
-                    <h4>副业失败的 3 个真实坑</h4>
-                    <p>误区开头 + 案例推进 + 行动建议。</p>
+                    <h4>每天 08:00 同步自运营账号</h4>
+                    <p>刷新抖音 / 小红书 / 视频号项目数据。</p>
                     <div class="task-meta">
-                      <span class="tag blue">AI 综合分 94</span>
-                      <span class="tag">播放 128w</span>
-                      <span class="tag">评论 1.9w</span>
+                      <span class="tag green">运行正常</span>
                     </div>
                   </div>
                   <div class="task-item">
-                    <h4>为什么努力的人反而更容易做错副业</h4>
-                    <p>反常识标题，适合做系列。</p>
+                    <h4>每次登录前生成跟踪日报</h4>
+                    <p>汇总用户上次打开后的全部更新，并由 Agent 给借鉴点。</p>
                     <div class="task-meta">
-                      <span class="tag blue">可复刻度 91</span>
-                      <span class="tag">收藏率高</span>
+                      <span class="tag blue">高频使用</span>
                     </div>
                   </div>
                 </div>
@@ -941,45 +1006,22 @@
               <div class="panel pad">
                 <div class="panel-head">
                   <div>
-                    <h3>下一步建议</h3>
-                    <div class="panel-subtitle">看完就能动手</div>
+                    <h3>为什么需要它</h3>
+                    <div class="panel-subtitle">把重复动作交给系统</div>
                   </div>
                 </div>
                 <div class="list">
                   <div class="task-item">
-                    <h4>沉淀 3 条钩子模板</h4>
-                    <p>先提炼“错误认知”型开头。</p>
+                    <h4>减少重复手工操作</h4>
+                    <p>不用每天手动点同步、点抓取、点汇总。</p>
                   </div>
                   <div class="task-item">
-                    <h4>生成一个“副业避坑” Playbook</h4>
-                    <p>补 2 条小红书图文做跨平台适配。</p>
+                    <h4>让更新更快变成学习资产</h4>
+                    <p>抓到新内容后，直接由 Agent 标注借鉴点和建议动作。</p>
                   </div>
                   <div class="task-item">
-                    <h4>创建选题助手 Agent</h4>
-                    <p>直接生成一个新 Agent。</p>
-                    <div class="task-meta">
-                      <span class="tag blue">先选项目</span>
-                      <span class="tag">再选平台和变现方式</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div class="panel pad">
-                <div class="panel-head">
-                  <div>
-                    <h3>相似账号</h3>
-                    <div class="panel-subtitle">别只学一个号</div>
-                  </div>
-                </div>
-                <div class="list">
-                  <div class="task-item">
-                    <h4>小口方法论</h4>
-                    <p>更强结论表达。</p>
-                  </div>
-                  <div class="task-item">
-                    <h4>Grow With Data</h4>
-                    <p>更强结构和镜头节奏。</p>
+                    <h4>把异常收口到后台</h4>
+                    <p>失败补跑、超时提醒、额度预警都放在这里看。</p>
                   </div>
                 </div>
               </div>
@@ -1114,170 +1156,6 @@
           </div>
         </section>
 
-        <section class="screen" data-screen="works">
-          <div class="screen-head">
-            <div>
-              <h2>作品库</h2>
-              <p>在这里统一看作品、绑定和动作。</p>
-            </div>
-            <div class="action-row">
-              <button class="btn btn-secondary">导入新作品</button>
-              <button class="btn btn-secondary">批量绑定 Agent</button>
-              <button class="btn btn-primary">送入 Agent 学习</button>
-            </div>
-          </div>
-
-          <div class="layout-grid grid-split">
-            <div class="panel pad">
-              <div class="panel-head">
-                <div>
-                  <h3>筛选与排序</h3>
-                  <div class="panel-subtitle">先看对决策最重要的筛选</div>
-                </div>
-              </div>
-              <div class="list">
-                <div class="filter">平台：全平台</div>
-                <div class="filter">类型：视频 / 图文</div>
-                <div class="filter">来源：参考账号 / 自营账号 / 导入队列</div>
-                <div class="filter">状态：已分析</div>
-                <div class="filter">时间：近 30 天</div>
-                <div class="filter">栏目：副业避坑</div>
-              </div>
-              <div class="panel-head" style="margin-top:16px;">
-                <div>
-                  <h3>排序</h3>
-                </div>
-              </div>
-              <div class="chip-row">
-                <span class="chip active">AI 综合分</span>
-                <span class="chip">传播热度</span>
-                <span class="chip">商业价值</span>
-                <span class="chip">可复刻度</span>
-                <span class="chip">发布时间</span>
-                <span class="chip">待绑定 Agent</span>
-              </div>
-            </div>
-
-            <div class="panel">
-              <div class="toolbar">
-                <div>
-                  <h3 style="margin:0;">作品列表</h3>
-                  <div class="panel-subtitle">选中后右侧直接给结论和动作</div>
-                </div>
-                <div class="chip-row">
-                  <span class="chip active">高分作品</span>
-                  <span class="chip">最新作品</span>
-                  <span class="chip">全部作品</span>
-                </div>
-              </div>
-              <div class="table-wrap">
-                <table>
-                  <thead>
-                    <tr>
-                      <th>作品</th>
-                      <th>来源账号</th>
-                      <th>平台</th>
-                      <th>当前绑定</th>
-                      <th>发布时间</th>
-                      <th>AI 综合分</th>
-                      <th>传播热度</th>
-                      <th>商业价值</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>
-                        <div class="cell-title">3 秒抓住家长注意力的开头怎么写</div>
-                        <div class="cell-desc">图文 · 教育规划 · 高收藏</div>
-                      </td>
-                      <td>晨风老师</td>
-                      <td><span class="tag">小红书</span></td>
-                      <td><span class="tag green">教育切片助手</span></td>
-                      <td>2026/03/19</td>
-                      <td><span class="tag blue">94</span></td>
-                      <td>91</td>
-                      <td>85</td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-title">副业失败的 3 个真实坑</div>
-                        <div class="cell-desc">视频 · 创业成长 · 高评论</div>
-                      </td>
-                      <td>阿元创业手记</td>
-                      <td><span class="tag">抖音</span></td>
-                      <td><span class="tag orange">待导入分析</span></td>
-                      <td>2026/03/18</td>
-                      <td><span class="tag blue">94</span></td>
-                      <td>93</td>
-                      <td>87</td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <div class="cell-title">做二创最容易踩的 3 个坑</div>
-                        <div class="cell-desc">长视频切片 · 结构清晰</div>
-                      </td>
-                      <td>数据见闻录</td>
-                      <td><span class="tag">B站</span></td>
-                      <td><span class="tag blue">副业增长助手</span></td>
-                      <td>2026/03/17</td>
-                      <td><span class="tag blue">88</span></td>
-                      <td>79</td>
-                      <td>76</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <div class="panel pad">
-              <div class="panel-head">
-                <div>
-                  <h3>作品详情抽屉</h3>
-                  <div class="panel-subtitle">当前选中：副业失败的 3 个真实坑</div>
-                </div>
-              </div>
-              <div class="side-stack">
-                <div class="insight-card">
-                  <h4>AI 摘要</h4>
-                  <ul>
-                    <li>高互动原因在于“反常识 + 具体案例 + 明确建议”的组合。</li>
-                    <li>节奏短促，适合口播或 AI 视频切片。</li>
-                  </ul>
-                </div>
-                <div class="insight-card">
-                  <h4>可借鉴点</h4>
-                  <ul>
-                    <li>开头直接否定常见认知</li>
-                    <li>中段按 1 / 2 / 3 结构推进</li>
-                    <li>结尾给出可执行动作</li>
-                  </ul>
-                </div>
-                <div class="insight-card">
-                  <h4>导入归属建议</h4>
-                  <ul>
-                    <li>优先绑定到“副业增长助手”</li>
-                    <li>如需保守处理，可先放入待归类池</li>
-                    <li>可一键转入 Playbook 样本集</li>
-                  </ul>
-                </div>
-                <div class="insight-card">
-                  <h4>风险提醒</h4>
-                  <ul>
-                    <li>如果过度强化“失败”情绪，容易降低信任感。</li>
-                    <li>商业承接不能直接硬转化，需要加过渡案例。</li>
-                  </ul>
-                </div>
-                <div class="chip-row">
-                  <span class="chip active">绑定副业增长助手</span>
-                  <span class="chip">送入导入分析 Agent</span>
-                  <span class="chip">加入 Playbook</span>
-                  <span class="chip">发起生产</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
         <section class="screen" data-screen="playbook">
           <div class="screen-head">
             <div>
@@ -1466,11 +1344,11 @@
           <div class="screen-head">
             <div>
               <h2>生产中心</h2>
-              <p>文案、封面、剪辑、AI 视频统一排队处理。</p>
+              <p>文案、封面、剪辑、AI 视频和作品沉淀统一放在这里。</p>
             </div>
             <div class="action-row">
               <button class="btn btn-secondary">批量生成封面</button>
-              <button class="btn btn-secondary">查看瓶颈</button>
+              <button class="btn btn-secondary">查看作品与成片</button>
               <button class="btn btn-secondary">查看异常</button>
               <button class="btn btn-primary">新建生产任务</button>
             </div>
@@ -1605,7 +1483,7 @@
               <div class="panel pad">
                 <div class="panel-head">
                   <div>
-                    <h3>自动化与异常</h3>
+                    <h3>流程运行与异常</h3>
                     <div class="panel-subtitle">先看哪里稳定，哪里要人工兜底</div>
                   </div>
                 </div>
@@ -1626,6 +1504,154 @@
               </div>
             </div>
           </div>
+
+          <div class="layout-grid grid-split" style="margin-top:18px;">
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>作品与成片</h3>
+                  <div class="panel-subtitle">生产中的内容和已经沉淀下来的作品都从这里看</div>
+                </div>
+              </div>
+              <div class="list">
+                <div class="filter">平台：全平台</div>
+                <div class="filter">类型：视频 / 图文 / AI 视频 / 实拍</div>
+                <div class="filter">来源：对标导入 / 我的账号 / 生产任务</div>
+                <div class="filter">状态：生产中 / 待审核 / 已发布</div>
+                <div class="filter">时间：近 30 天</div>
+                <div class="filter">排序：综合分 / 热度 / 商业价值 / 发布时间</div>
+              </div>
+              <div class="panel-head" style="margin-top:16px;">
+                <div>
+                  <h3>快捷动作</h3>
+                </div>
+              </div>
+              <div class="chip-row">
+                <span class="chip active">查看高分内容</span>
+                <span class="chip">查看最新产出</span>
+                <span class="chip">补封面</span>
+                <span class="chip">加入 Playbook</span>
+              </div>
+            </div>
+
+            <div class="panel">
+              <div class="toolbar">
+                <div>
+                  <h3 style="margin:0;">当前内容列表</h3>
+                  <div class="panel-subtitle">从生产结果反看当前项目里最值得继续推进的内容</div>
+                </div>
+                <div class="chip-row">
+                  <span class="chip active">高分内容</span>
+                  <span class="chip">最新产出</span>
+                  <span class="chip">全部内容</span>
+                </div>
+              </div>
+              <div class="table-wrap">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>内容</th>
+                      <th>来源</th>
+                      <th>平台</th>
+                      <th>当前阶段</th>
+                      <th>发布时间</th>
+                      <th>综合分</th>
+                      <th>热度</th>
+                      <th>商业价值</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div class="cell-title">3 秒抓住家长注意力的开头怎么写</div>
+                        <div class="cell-desc">图文 · 教育规划 · 高收藏</div>
+                      </td>
+                      <td>晨风老师 / 对标导入</td>
+                      <td><span class="tag">小红书</span></td>
+                      <td><span class="tag green">已进入文案</span></td>
+                      <td>2026/03/19</td>
+                      <td><span class="tag blue">94</span></td>
+                      <td>91</td>
+                      <td>85</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="cell-title">副业失败的 3 个真实坑</div>
+                        <div class="cell-desc">视频 · 创业成长 · 高评论</div>
+                      </td>
+                      <td>阿元创业手记 / 对标导入</td>
+                      <td><span class="tag">抖音</span></td>
+                      <td><span class="tag orange">待封面确认</span></td>
+                      <td>2026/03/18</td>
+                      <td><span class="tag blue">94</span></td>
+                      <td>93</td>
+                      <td>87</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div class="cell-title">做二创最容易踩的 3 个坑</div>
+                        <div class="cell-desc">长视频切片 · 结构清晰</div>
+                      </td>
+                      <td>数据见闻录 / 对标导入</td>
+                      <td><span class="tag">B站</span></td>
+                      <td><span class="tag blue">已入 Playbook</span></td>
+                      <td>2026/03/17</td>
+                      <td><span class="tag blue">88</span></td>
+                      <td>79</td>
+                      <td>76</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div class="panel pad">
+              <div class="panel-head">
+                <div>
+                  <h3>当前选中内容</h3>
+                  <div class="panel-subtitle">当前选中：副业失败的 3 个真实坑</div>
+                </div>
+              </div>
+              <div class="side-stack">
+                <div class="insight-card">
+                  <h4>AI 摘要</h4>
+                  <ul>
+                    <li>高互动原因在于“反常识 + 具体案例 + 明确建议”的组合。</li>
+                    <li>节奏短促，适合口播或 AI 视频切片。</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>可借鉴点</h4>
+                  <ul>
+                    <li>开头直接否定常见认知</li>
+                    <li>中段按 1 / 2 / 3 结构推进</li>
+                    <li>结尾给出可执行动作</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>下一步建议</h4>
+                  <ul>
+                    <li>优先送入“副业增长助手”继续生成脚本</li>
+                    <li>封面先跑 3 个模型做对比</li>
+                    <li>成片进入待审核后再决定走实拍还是 AI 视频</li>
+                  </ul>
+                </div>
+                <div class="insight-card">
+                  <h4>风险提醒</h4>
+                  <ul>
+                    <li>如果过度强化“失败”情绪，容易降低信任感。</li>
+                    <li>商业承接不能直接硬转化，需要加过渡案例。</li>
+                  </ul>
+                </div>
+                <div class="chip-row">
+                  <span class="chip active">继续生产</span>
+                  <span class="chip">补封面</span>
+                  <span class="chip">加入 Playbook</span>
+                  <span class="chip">查看成片</span>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="footer-note">StoryForge Web V4 prototype · UI only · no live data binding</div>
         </section>