docs: add employee user guide

2026-05-26 15:56:54 +08:00
parent 8d5311c60a
commit fe92c7943d
8 changed files with 552 additions and 0 deletions
--- a/docs/user-guide-assets/01-home.png
+++ b/docs/user-guide-assets/01-home.png
--- a/docs/user-guide-assets/02-canvas-overview.png
+++ b/docs/user-guide-assets/02-canvas-overview.png
--- a/docs/user-guide-assets/03-node-menu.png
+++ b/docs/user-guide-assets/03-node-menu.png
--- a/docs/user-guide-assets/04-workflows-public.png
+++ b/docs/user-guide-assets/04-workflows-public.png
--- a/docs/user-guide-assets/05-workflows-my.png
+++ b/docs/user-guide-assets/05-workflows-my.png
--- a/docs/user-guide-assets/06-api-settings.png
+++ b/docs/user-guide-assets/06-api-settings.png
--- a/docs/user-guide-assets/07-download-modal.png
+++ b/docs/user-guide-assets/07-download-modal.png
--- a/docs/user-guide.html
+++ b/docs/user-guide.html
@@ -0,0 +1,552 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>SKG 营销内容生产平台操作指南</title>
+  <style>
+    :root {
+      --bg: #f6f8fb;
+      --paper: #ffffff;
+      --ink: #111827;
+      --muted: #5f6b7a;
+      --line: #dde4ee;
+      --brand: #08a6a6;
+      --brand-dark: #087f82;
+      --soft: #eefafa;
+      --warn: #fff7ed;
+      --warn-line: #fed7aa;
+      --danger: #fff1f2;
+      --danger-line: #fecdd3;
+      --code: #f3f6fa;
+    }
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+      color: var(--ink);
+      background: var(--bg);
+      line-height: 1.75;
+    }
+
+    .shell {
+      max-width: 1160px;
+      margin: 0 auto;
+      padding: 32px 24px 72px;
+    }
+
+    .hero {
+      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      padding: 34px 36px;
+      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
+    }
+
+    .eyebrow {
+      color: var(--brand-dark);
+      font-weight: 700;
+      letter-spacing: 0;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+
+    h1, h2, h3, h4 { line-height: 1.35; letter-spacing: 0; }
+    h1 {
+      margin: 0;
+      font-size: 34px;
+    }
+    h2 {
+      margin: 44px 0 16px;
+      font-size: 25px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--line);
+    }
+    h3 {
+      margin: 28px 0 10px;
+      font-size: 19px;
+    }
+    h4 {
+      margin: 20px 0 8px;
+      font-size: 16px;
+    }
+
+    p { margin: 8px 0 12px; }
+    a { color: var(--brand-dark); text-decoration: none; }
+    code {
+      background: var(--code);
+      border: 1px solid #e6ebf2;
+      padding: 1px 6px;
+      border-radius: 6px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 0.92em;
+    }
+
+    .meta {
+      color: var(--muted);
+      margin-top: 14px;
+      max-width: 860px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+      margin: 18px 0 8px;
+    }
+
+    .card {
+      background: var(--paper);
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 18px;
+    }
+
+    .card strong {
+      display: block;
+      margin-bottom: 6px;
+    }
+
+    .toc {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px 18px;
+      padding-left: 18px;
+    }
+
+    .section {
+      background: var(--paper);
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      padding: 28px 32px;
+      margin-top: 24px;
+      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
+    }
+
+    .notice {
+      border: 1px solid var(--line);
+      background: #f9fbfd;
+      border-radius: 14px;
+      padding: 14px 16px;
+      margin: 14px 0;
+    }
+    .notice.good {
+      background: var(--soft);
+      border-color: #b8eeee;
+    }
+    .notice.warn {
+      background: var(--warn);
+      border-color: var(--warn-line);
+    }
+    .notice.danger {
+      background: var(--danger);
+      border-color: var(--danger-line);
+    }
+
+    .steps {
+      counter-reset: step;
+      padding-left: 0;
+      list-style: none;
+    }
+    .steps li {
+      counter-increment: step;
+      position: relative;
+      padding-left: 44px;
+      margin: 14px 0;
+    }
+    .steps li::before {
+      content: counter(step);
+      position: absolute;
+      left: 0;
+      top: 1px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: var(--brand);
+      color: #fff;
+      text-align: center;
+      line-height: 28px;
+      font-weight: 700;
+      font-size: 14px;
+    }
+
+    ul, ol { padding-left: 22px; }
+    li { margin: 6px 0; }
+
+    figure {
+      margin: 22px 0;
+      border: 1px solid var(--line);
+      background: #fff;
+      border-radius: 14px;
+      overflow: hidden;
+    }
+    figure img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+    figcaption {
+      padding: 10px 14px;
+      color: var(--muted);
+      font-size: 14px;
+      border-top: 1px solid var(--line);
+      background: #fbfdff;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 16px 0;
+      background: #fff;
+      overflow: hidden;
+      border-radius: 12px;
+      border: 1px solid var(--line);
+    }
+    th, td {
+      border-bottom: 1px solid var(--line);
+      padding: 11px 12px;
+      vertical-align: top;
+      text-align: left;
+    }
+    th {
+      width: 22%;
+      background: #f7fafc;
+      font-weight: 700;
+    }
+    tr:last-child th,
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    .kbd {
+      display: inline-block;
+      min-width: 24px;
+      padding: 0 7px;
+      border: 1px solid #cbd5e1;
+      border-bottom-width: 2px;
+      border-radius: 6px;
+      background: #fff;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 0.9em;
+      text-align: center;
+    }
+
+    @media (max-width: 760px) {
+      .shell { padding: 18px 12px 48px; }
+      .hero, .section { padding: 22px 18px; border-radius: 14px; }
+      h1 { font-size: 27px; }
+      h2 { font-size: 22px; }
+      .grid, .toc { grid-template-columns: 1fr; }
+      th, td { display: block; width: 100%; }
+      th { border-bottom: 0; }
+    }
+
+    @media print {
+      body { background: #fff; }
+      .shell { max-width: none; padding: 0; }
+      .hero, .section, figure { box-shadow: none; break-inside: avoid; }
+      a { color: #111827; }
+    }
+  </style>
+</head>
+<body>
+  <main class="shell">
+    <header class="hero">
+      <div class="eyebrow">SKG 内部使用</div>
+      <h1>营销内容生产平台操作指南</h1>
+      <p class="meta">适用于使用 <a href="https://marketing.skg.com">https://marketing.skg.com</a> 进行文生图、图生图、文生视频、图生视频、工作流模板和素材沉淀的员工。本文截图为 2026-05-26 明亮模式界面，生产登录方式以飞书免登录为准。</p>
+      <div class="grid">
+        <div class="card">
+          <strong>入口</strong>
+          线上访问 <code>https://marketing.skg.com</code>，从飞书授权进入。员工不需要配置个人 API Key。
+        </div>
+        <div class="card">
+          <strong>核心用途</strong>
+          在个人画布里组织提示词、参考图、图片生成、视频生成和可复用工作流。
+        </div>
+        <div class="card">
+          <strong>数据归属</strong>
+          项目、任务、素材和“我的工作流”按当前登录账号隔离，同一飞书账号可在多台设备看到自己的内容。
+        </div>
+      </div>
+    </header>
+
+    <section class="section">
+      <h2>目录</h2>
+      <ol class="toc">
+        <li><a href="#login">登录与账号</a></li>
+        <li><a href="#home">首页与项目</a></li>
+        <li><a href="#canvas">画布基础操作</a></li>
+        <li><a href="#nodes">节点功能说明</a></li>
+        <li><a href="#workflow">公共工作流与我的工作流</a></li>
+        <li><a href="#generate">常用生成流程</a></li>
+        <li><a href="#assets">素材下载与沉淀</a></li>
+        <li><a href="#prompt">提示词写法</a></li>
+        <li><a href="#errors">常见问题与报错处理</a></li>
+      </ol>
+    </section>
+
+    <section id="login" class="section">
+      <h2>1. 登录与账号</h2>
+      <ol class="steps">
+        <li>打开 <code>https://marketing.skg.com</code>。</li>
+        <li>点击登录页上的“飞书免登录”，或在飞书内打开时按页面提示授权。</li>
+        <li>授权成功后会进入个人画布首页。后续同一飞书账号在电脑、手机或其他浏览器登录，会看到自己的项目和工作流。</li>
+      </ol>
+      <div class="notice good">
+        <strong>账号数据隔离：</strong>每个人只能看到自己账号下创建的项目、生成任务、素材和“我的工作流”。这不是浏览器缓存隔离，而是服务端按登录用户归属过滤。
+      </div>
+      <div class="notice warn">
+        <strong>手机访问提示：</strong>如果手机在公司 Wi-Fi 下显示“无法加载网页”或类似错误，先切换到个人网络或用手机浏览器打开同一地址；如果电脑正常而手机飞书内异常，多半是当前网络或飞书内置浏览器限制。
+      </div>
+    </section>
+
+    <section id="home" class="section">
+      <h2>2. 首页与项目</h2>
+      <p>登录后默认进入首页。这里可以快速创建项目，也可以打开已有项目继续编辑。</p>
+      <figure>
+        <img src="user-guide-assets/01-home.png" alt="首页与我的项目列表" />
+        <figcaption>首页：顶部是创意输入框和推荐词，下面是“我的项目”。</figcaption>
+      </figure>
+      <h3>首页主要区域</h3>
+      <table>
+        <tr><th>创意输入框</th><td>输入一句需求后点击发送，会创建一个新项目并进入画布。适合从一个想法快速开始。</td></tr>
+        <tr><th>推荐词</th><td>点击推荐词可快速填入输入框；右侧刷新按钮会换一组推荐。</td></tr>
+        <tr><th>新建项目</th><td>点击“新建项目”会创建空白项目，适合手动搭节点。</td></tr>
+        <tr><th>我的项目</th><td>点击项目卡片进入画布。项目会按更新时间排序。</td></tr>
+        <tr><th>项目菜单</th><td>项目卡片右上角菜单支持重命名、复制和删除。</td></tr>
+      </table>
+      <div class="notice">
+        建议每个主题单独建一个项目，例如“新品主图测试”“母亲节短视频”“达人口播改图”。这样后续查找和复用更清楚。
+      </div>
+    </section>
+
+    <section id="canvas" class="section">
+      <h2>3. 画布基础操作</h2>
+      <p>画布是主要工作区。你可以把提示词、参考图、文生图、视频生成等能力连接起来，让图片和视频从上一步结果继续往下生成。</p>
+      <figure>
+        <img src="user-guide-assets/02-canvas-overview.png" alt="画布总览" />
+        <figcaption>画布总览：左侧工具栏添加节点，中间是节点和连线，底部是对话式输入区。</figcaption>
+      </figure>
+      <h3>顶部栏</h3>
+      <table>
+        <tr><th>返回</th><td>左上角箭头返回首页。</td></tr>
+        <tr><th>项目名称</th><td>点击项目名旁边的小箭头，可重命名、复制或删除当前项目。</td></tr>
+        <tr><th>明暗模式</th><td>右上角月亮/太阳图标切换明亮模式或暗色模式。</td></tr>
+        <tr><th>素材下载</th><td>右上角下载图标打开当前画布素材列表。</td></tr>
+        <tr><th>API 设置</th><td>右上角齿轮查看内部接口、模型配置和端点。普通员工一般不需要改。</td></tr>
+      </table>
+
+      <h3>左侧工具栏</h3>
+      <figure>
+        <img src="user-guide-assets/03-node-menu.png" alt="添加节点菜单" />
+        <figcaption>添加节点菜单：可以手动添加文本、LLM、文生图、视频生成、图片和视频节点。</figcaption>
+      </figure>
+      <table>
+        <tr><th>加号</th><td>打开节点菜单，手动添加任意节点。</td></tr>
+        <tr><th>九宫格</th><td>打开工作流模板面板。</td></tr>
+        <tr><th>文本</th><td>快速添加文本节点。</td></tr>
+        <tr><th>图片</th><td>快速添加图片节点，用于上传参考图或承接生成图。</td></tr>
+        <tr><th>文生图</th><td>快速添加文生图配置节点。</td></tr>
+        <tr><th>视频</th><td>快速添加视频生成配置节点。</td></tr>
+        <tr><th>撤销/重做</th><td>回退或恢复最近的画布编辑。</td></tr>
+      </table>
+
+      <h3>底部输入区</h3>
+      <ul>
+        <li>在输入框里写需求，点击发送按钮创建节点或执行工作流。</li>
+        <li>开启“自动执行”后，系统会先判断你的意图，再自动创建并启动合适的工作流。</li>
+        <li>关闭“自动执行”时，输入内容更偏向生成文本节点，方便你手动连接。</li>
+        <li>点击“AI 润色”可把提示词优化成更适合上游模型的专业英文提示词。</li>
+        <li>键盘操作：<span class="kbd">Enter</span> 发送，<span class="kbd">Ctrl</span> + <span class="kbd">Enter</span> 也可作为发送习惯使用。</li>
+      </ul>
+    </section>
+
+    <section id="nodes" class="section">
+      <h2>4. 节点功能说明</h2>
+      <p>节点之间通过左右两侧的小连接点相连。通常从左侧节点拖到右侧节点，表示“把左边的内容作为右边生成的输入”。</p>
+      <table>
+        <tr><th>文本节点</th><td>存放提示词、脚本、镜头描述或要求。可点击“AI 润色”优化文本。</td></tr>
+        <tr><th>LLM 文本生成</th><td>用于先生成文案、分镜描述或提示词，再把输出连接给文生图或视频节点。</td></tr>
+        <tr><th>文生图配置</th><td>选择图片模型、尺寸和质量，接收文本/参考图后点击“立即生成”。当前常用尺寸为 <code>auto</code>、<code>1024x1536</code>、<code>1024x1024</code>、<code>1536x1024</code>，质量为标准。</td></tr>
+        <tr><th>图片节点</th><td>可上传图片、粘贴图片地址，或承接生成结果。图片节点可以作为图生图参考，也可以作为视频首帧、尾帧或参考图。</td></tr>
+        <tr><th>视频生成配置</th><td>选择视频模型、比例、时长，接收提示词和图片后生成视频。常用比例包括竖屏、横屏、方形和 3:4；时长以页面可选项为准。</td></tr>
+        <tr><th>视频节点</th><td>承接生成后的视频结果，后续可预览和下载。</td></tr>
+      </table>
+      <h3>连线规则</h3>
+      <ul>
+        <li><strong>文本 → 文生图：</strong>文本内容作为生图提示词。</li>
+        <li><strong>图片 → 文生图：</strong>图片作为图生图或参考图。</li>
+        <li><strong>文本 → 视频生成：</strong>文本内容作为视频动作、镜头和场景说明。</li>
+        <li><strong>图片 → 视频生成：</strong>默认作为首帧，可在线上边的小标签中切换为尾帧或参考图。</li>
+        <li><strong>LLM → 文生图/视频生成：</strong>先让 LLM 产出提示词，再继续生成图片或视频。</li>
+      </ul>
+    </section>
+
+    <section id="workflow" class="section">
+      <h2>5. 公共工作流与我的工作流</h2>
+      <p>工作流模板适合重复使用的创作链路。点击左侧九宫格图标打开工作流面板。</p>
+      <figure>
+        <img src="user-guide-assets/04-workflows-public.png" alt="公共工作流" />
+        <figcaption>公共工作流：点击任意模板，会把一组节点插入当前画布。</figcaption>
+      </figure>
+      <h3>公共工作流</h3>
+      <ul>
+        <li>适合多人共用的标准链路，例如多角度分镜、产品套图、角色设计、场景背景、绘本等。</li>
+        <li>点击模板后，系统会把节点组放到当前画布中，你再填写提示词、上传素材或调整配置。</li>
+        <li>公共工作流不会覆盖当前画布，只会新增一组节点。</li>
+      </ul>
+
+      <figure>
+        <img src="user-guide-assets/05-workflows-my.png" alt="我的工作流" />
+        <figcaption>我的工作流：可以保存当前画布结构，在同一账号的其他设备上复用。</figcaption>
+      </figure>
+      <h3>我的工作流</h3>
+      <ol class="steps">
+        <li>在画布中搭好一套常用节点结构。</li>
+        <li>打开工作流面板，切换到“我的工作流”。</li>
+        <li>点击“保存当前”，填写名称并保存。</li>
+        <li>以后打开同一账号时，可在“我的工作流”里点击模板插回画布。</li>
+      </ol>
+      <div class="notice good">
+        “我的工作流”保存的是节点结构、连线、配置和提示词，不保存一次性生成出来的图片、视频、进度和错误。这样模板不会被旧结果污染。
+      </div>
+    </section>
+
+    <section id="generate" class="section">
+      <h2>6. 常用生成流程</h2>
+
+      <h3>流程 A：快速文生图</h3>
+      <ol class="steps">
+        <li>在首页或画布底部输入需求，例如“白底产品主图，颈部按摩仪悬浮展示，柔和自然光”。</li>
+        <li>需要更专业时先点“AI 润色”。如果不希望系统改太多，就在原提示词里写清楚“保持主体和构图”。</li>
+        <li>开启“自动执行”，点击发送。</li>
+        <li>系统会创建文生图节点并开始生成。完成后图片会回填到画布。</li>
+      </ol>
+
+      <h3>流程 B：手动文生图</h3>
+      <ol class="steps">
+        <li>点击左侧加号，添加“文本节点”和“文生图配置”。</li>
+        <li>在文本节点写提示词。</li>
+        <li>从文本节点右侧连接点拖到文生图节点左侧连接点。</li>
+        <li>在文生图节点里选择模型和尺寸，点击“立即生成”。</li>
+      </ol>
+
+      <h3>流程 C：图生视频</h3>
+      <ol class="steps">
+        <li>添加“图片节点”，上传或粘贴一张参考图。</li>
+        <li>添加“视频生成配置”节点。</li>
+        <li>从图片节点连接到视频生成节点。默认角色为“首帧”，需要时可切换为“尾帧”或“参考图”。</li>
+        <li>在视频节点提示词里写动作和镜头，例如“产品缓慢旋转，镜头轻推近，背景干净”。</li>
+        <li>选择比例和时长后点击“生成视频”。</li>
+      </ol>
+
+      <h3>流程 D：一张图继续改图</h3>
+      <ol class="steps">
+        <li>把参考图放进图片节点。</li>
+        <li>连接到文生图配置节点。</li>
+        <li>在文本节点或文生图节点里写明“保留哪些内容、调整哪些内容”。</li>
+        <li>点击“立即生成”。</li>
+      </ol>
+
+      <h3>流程 E：用工作流做复杂任务</h3>
+      <ol class="steps">
+        <li>打开“公共工作流”，选择接近目标的模板。</li>
+        <li>按模板节点提示补充角色、产品、场景、分镜或参考图。</li>
+        <li>逐个点击节点里的生成按钮，或用底部自动执行辅助创建链路。</li>
+        <li>得到满意结构后，切到“我的工作流”保存，后续复用。</li>
+      </ol>
+    </section>
+
+    <section id="assets" class="section">
+      <h2>7. 素材下载与沉淀</h2>
+      <p>生成出的图片和视频会保存在当前账号自己的项目里。当前画布里有可下载素材时，右上角下载图标会高亮。</p>
+      <figure>
+        <img src="user-guide-assets/07-download-modal.png" alt="素材下载弹窗" />
+        <figcaption>素材下载：会汇总当前画布里可下载的图片和视频。</figcaption>
+      </figure>
+      <ul>
+        <li>点击右上角下载图标打开“素材下载”。</li>
+        <li>图片会以缩略图展示，点击可打开原图。</li>
+        <li>视频会以列表展示，点击可打开视频链接。</li>
+        <li>如果显示“暂无可下载的素材”，说明当前画布还没有完成的图片或视频结果。</li>
+      </ul>
+      <div class="notice">
+        数据库存的是项目、任务、索引和归属信息；生成的大图片、视频文件仍作为媒体文件保存。你换电脑后能看到项目和结果，是因为服务端按账号把任务和素材索引关联起来。
+      </div>
+    </section>
+
+    <section class="section">
+      <h2>8. 模型与接口设置</h2>
+      <p>平台默认使用 SKG 内部生成接口。普通员工不需要填写 API Key，也不需要改 Base URL。</p>
+      <figure>
+        <img src="user-guide-assets/06-api-settings.png" alt="API 设置" />
+        <figcaption>API 设置：默认渠道为 SKG 内部，生成调用走当前登录会话。</figcaption>
+      </figure>
+      <table>
+        <tr><th>API 配置</th><td>查看当前渠道、Base URL、端点路径。一般保持默认即可。</td></tr>
+        <tr><th>模型配置</th><td>查看问答、图片、视频模型。不要随意添加不存在的模型名。</td></tr>
+        <tr><th>API Key</th><td>内部接口无需个人填写，页面提示“生成调用走当前登录会话”。</td></tr>
+      </table>
+      <div class="notice warn">
+        如果生成按钮可点但连续失败，不要自行改 API 设置。先看节点里的中文错误提示，再联系管理员排查上游模型、额度或风控。
+      </div>
+    </section>
+
+    <section id="prompt" class="section">
+      <h2>9. 提示词写法</h2>
+      <h3>基本原则</h3>
+      <ul>
+        <li><strong>主体明确：</strong>说明你要生成什么，例如“SKG 颈部按摩仪”“雨夜街头摊位”“年轻女性虚拟角色”。</li>
+        <li><strong>动作明确：</strong>视频要写动作，例如“缓慢旋转”“镜头从左向右滑动”“人物抬头看向镜头”。</li>
+        <li><strong>场景明确：</strong>写背景、光线、镜头、风格和画幅。</li>
+        <li><strong>不要期待自动加品牌：</strong>系统不会主动把所有内容套成 SKG 或按摩产品。如果需要 SKG、TikTok、产品卖点，必须自己写进提示词。</li>
+        <li><strong>中文可以输入：</strong>系统会在需要时做专业化润色，但越具体越稳定。</li>
+      </ul>
+
+      <h3>推荐结构</h3>
+      <div class="notice">
+        主体 + 场景 + 动作/镜头 + 风格 + 画幅/用途 + 必须保留/禁止事项
+      </div>
+      <p>示例：<code>SKG 颈部按摩仪，白底电商主图，产品悬浮展示，柔和自然光，高级产品摄影，竖版 1024x1536，保留产品真实外观，不要出现人物。</code></p>
+      <p>示例：<code>AI 生成的虚拟女性角色站在明亮浴室中，手持护理产品，镜头缓慢推进，清爽自然光，短视频竖屏，人物为虚构角色，不对应任何真实人物。</code></p>
+
+      <h3>使用 AI 人像素材时</h3>
+      <p>平台允许你使用 AI 生成的人像素材继续做图生视频，但上游视频模型仍可能把清晰人脸误判为真实肖像或隐私信息。遇到这类报错时优先尝试：</p>
+      <ul>
+        <li>在提示词中写明“AI 生成的虚拟角色、非真人、非公众人物”。</li>
+        <li>降低人脸识别度，例如侧脸、远景、背影、卡通化、轻微遮挡。</li>
+        <li>裁切或模糊过于清晰的脸部，再作为首帧/参考图。</li>
+        <li>避免使用真实员工、明星、网红或公众人物照片。</li>
+      </ul>
+    </section>
+
+    <section id="errors" class="section">
+      <h2>10. 常见问题与报错处理</h2>
+      <table>
+        <tr><th>看不到别人项目</th><td>这是正常的。平台按当前登录账号隔离数据，每个人默认只能看到自己的项目和生成结果。</td></tr>
+        <tr><th>换电脑后看不到内容</th><td>确认是否用同一个飞书账号登录。如果以前用过旧密码账号，需联系管理员确认历史内容是否已归属到飞书账号。</td></tr>
+        <tr><th>登录过期</th><td>重新从飞书进入或点击登录页授权。不要反复刷新生成中的页面。</td></tr>
+        <tr><th>视频一直排队</th><td>视频生成通常较慢，且同一用户可能限制并发。保持页面打开，等待状态更新。</td></tr>
+        <tr><th>图片生成超时</th><td>上游图片模型响应慢或不可用。缩短提示词、稍后重试，或联系管理员确认模型状态。</td></tr>
+        <tr><th>视频提示人脸/隐私风控</th><td>参考图里有清晰人脸或疑似真实人物。按“AI 人像素材”建议处理，再重新生成。</td></tr>
+        <tr><th>素材下载为空</th><td>当前画布没有完成的图片或视频节点。生成完成后再打开下载面板。</td></tr>
+        <tr><th>公司 Wi-Fi 手机打不开</th><td>先切个人网络或浏览器访问。如果电脑同网络正常、手机飞书内不正常，通常是移动端网络或飞书内置浏览器限制。</td></tr>
+      </table>
+    </section>
+
+    <section class="section">
+      <h2>11. 发布给团队时的使用建议</h2>
+      <ul>
+        <li>建议先从“首页输入一句需求”开始，不熟悉节点的人不要一开始就搭复杂工作流。</li>
+        <li>每次生成前先确认项目名，避免把不同主题混在一个项目里。</li>
+        <li>满意的链路及时保存到“我的工作流”，下次直接复用。</li>
+        <li>提示词里不要默认省略主体、品牌和使用场景；系统不会替你自动脑补业务背景。</li>
+        <li>报错优先看页面中文提示，不要只截图问“为什么失败”。错误框里通常已经写了原因和改法。</li>
+        <li>不要上传真实敏感人脸、客户资料、未授权素材或公司外部不可公开资料。</li>
+      </ul>
+    </section>
+  </main>
+</body>
+</html>