<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>时文阅读管理台</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <style>
    :root {
      --ink-950: #10202b;
      --ink-800: #223748;
      --ink-700: #3b5366;
      --ink-500: #6f8595;
      --paper-50: #f7f3ec;
      --paper-100: #efe4d3;
      --paper-200: #e1cfb6;
      --accent-700: #8f3518;
      --accent-600: #b44522;
      --accent-500: #cb6738;
      --line: rgba(16, 32, 43, 0.11);
      --soft-shadow: 0 18px 45px rgba(16, 32, 43, 0.08);
    }

    [x-cloak] {
      display: none !important;
    }

    html,
    body {
      height: 100vh;
      overflow: hidden;
      background: radial-gradient(circle at top left, rgba(203, 103, 56, 0.12), transparent 26%), radial-gradient(circle at 85% 18%, rgba(16, 32, 43, 0.08), transparent 24%), linear-gradient(180deg, #f8f4ed 0%, #f4ecdf 100%);
      color: var(--ink-950);
      font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    .panel {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.97)), linear-gradient(120deg, rgba(225, 207, 182, 0.1), transparent 65%);
      border: 1px solid var(--line);
      box-shadow: var(--soft-shadow);
      backdrop-filter: blur(10px);
    }

    .month-item {
      border: 1px solid transparent;
      transition: all .2s ease;
    }

    .month-item:hover {
      border-color: rgba(16, 32, 43, .08);
      background: rgba(255, 255, 255, .78);
    }

    .month-expanded {
      background: linear-gradient(135deg, rgba(180, 69, 34, .08), rgba(180, 69, 34, .02));
      border-color: rgba(180, 69, 34, .12);
    }

    .date-item {
      border: 1px solid transparent;
      transition: all .18s ease;
    }

    .date-item:hover {
      border-color: rgba(16, 32, 43, .1);
      background: rgba(255, 255, 255, .85);
      transform: translateX(2px);
    }

    .date-item-active {
      background: linear-gradient(135deg, rgba(180, 69, 34, .14), rgba(180, 69, 34, .04));
      border-color: rgba(180, 69, 34, .22);
      color: var(--accent-700);
    }

    .soft-input,
    .soft-select,
    .soft-textarea {
      border: 1px solid rgba(16, 32, 43, .12);
      background: rgba(255, 255, 255, .88);
      color: var(--ink-950);
      transition: border-color .2s, box-shadow .2s;
    }

    .soft-input:focus,
    .soft-select:focus,
    .soft-textarea:focus {
      border-color: rgba(180, 69, 34, .45);
      box-shadow: 0 0 0 4px rgba(180, 69, 34, .12);
      outline: none;
    }

    .soft-textarea {
      width: 100%;
    }

    .primary-btn {
      background: linear-gradient(135deg, var(--accent-600), var(--accent-700));
      color: white;
      box-shadow: 0 12px 26px rgba(180, 69, 34, .24);
      transition: transform .18s, opacity .18s;
    }

    .primary-btn:hover {
      transform: translateY(-1px);
    }

    .primary-btn:disabled {
      opacity: .5;
      transform: none;
    }

    .secondary-btn {
      background: rgba(255, 255, 255, .88);
      color: var(--ink-800);
      border: 1px solid rgba(16, 32, 43, .1);
      transition: transform .18s;
    }

    .secondary-btn:hover {
      background: white;
      transform: translateY(-1px);
    }

    .secondary-btn:disabled {
      opacity: .5;
      transform: none;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 9999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .badge-neutral {
      background: rgba(16, 32, 43, .08);
      color: var(--ink-800)
    }

    .badge-warm {
      background: rgba(180, 69, 34, .12);
      color: var(--accent-700)
    }

    .badge-gold {
      background: rgba(185, 140, 82, .16);
      color: #8a622e
    }

    .badge-green {
      background: rgba(28, 138, 101, .14);
      color: #176948
    }

    .badge-red {
      background: rgba(186, 54, 54, .13);
      color: #9f2929
    }

    .badge-blue {
      background: rgba(38, 93, 171, .13);
      color: #254e8d
    }

    .drawer-backdrop {
      background: rgba(16, 32, 43, .3);
      backdrop-filter: blur(4px);
    }

    .custom-scroll::-webkit-scrollbar {
      width: 5px
    }

    .custom-scroll::-webkit-scrollbar-thumb {
      background: rgba(16, 32, 43, .15);
      border-radius: 9999px
    }

    .headline-font {
      font-family: Georgia, "Times New Roman", "Songti SC", serif;
      letter-spacing: .02em
    }

    .toast-enter {
      animation: toastIn .3s
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(-12px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .art-card-active {
      background: linear-gradient(135deg, rgba(180, 69, 34, .1), rgba(180, 69, 34, .03));
      border-color: rgba(180, 69, 34, .2);
    }
  </style>
</head>

<body x-data="app()" x-init="init()" x-cloak>
  <div class="min-h-screen p-4 md:p-6">
    <!-- Toast -->
    <div class="fixed top-6 right-6 z-90 flex flex-col gap-3" style="max-width:380px">
      <template x-for="(t,idx) in toasts" :key="t.id">
        <div
          :class="t.type==='success'?'bg-green-50 border-green-200 text-green-800':'bg-red-50 border-red-200 text-red-800'"
          class="rounded-[1.25rem] border px-5 py-3 text-sm shadow-lg toast-enter cursor-pointer"
          @click="dismissToast(idx)">
          <p x-text="t.msg"></p>
        </div>
      </template>
    </div>

    <div class="mx-auto flex h-[calc(100vh-2rem)] gap-4 lg:gap-6 overflow-hidden">
      <!-- ====== 左侧日期导航 ====== -->
      <aside class="panel hidden w-[240px] rounded-[2rem] p-5 lg:flex lg:flex-col shrink-0 overflow-hidden">
        <div class="mb-5 flex items-center gap-3">
          <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-[rgba(180,69,34,0.12)] text-lg">📰</div>
          <div>
            <p class="text-xs tracking-[0.24em] text-[var(--ink-500)]">ARTICLES</p>
            <h1 class="headline-font text-lg font-semibold text-[var(--ink-950)]">时文阅读</h1>
          </div>
        </div>
        <div class="flex-1 overflow-y-auto custom-scroll -mx-1 px-1">
          <div x-show="dateGroups.length===0"
            class="rounded-[1.25rem] border border-dashed border-[rgba(16,32,43,0.1)] bg-white/55 px-4 py-8 text-center text-sm text-[var(--ink-500)]">
            暂无日期</div>
          <template x-for="(group,gi) in dateGroups" :key="group.month">
            <div class="mb-2">
              <button type="button" @click="toggleMonth(gi)" :class="group.expanded?'month-expanded':''"
                class="month-item flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-left">
                <span class="text-xs transition-transform duration-200" :class="group.expanded?'rotate-90':''">▶</span>
                <span class="flex-1 text-sm font-semibold text-[var(--ink-800)]" x-text="group.monthLabel"></span>
                <span class="text-xs text-[var(--ink-500)]" x-text="group.dates.length"></span>
              </button>
              <div x-show="group.expanded" class="mt-1 ml-5 space-y-0.5 border-l border-[rgba(16,32,43,0.08)] pl-2">
                <template x-for="date in group.dates" :key="date.value">
                  <button type="button" @click="selectDate(date.value)"
                    :class="selectedDate===date.value?'date-item-active':'date-item'"
                    class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left">
                    <span class="text-xs" x-text="date.dayLabel"></span>
                  </button>
                </template>
              </div>
            </div>
          </template>
        </div>
      </aside>

      <!-- ====== 主区域 ====== -->
      <main class="flex min-w-0 flex-1 flex-col gap-4 lg:gap-6 overflow-hidden">
        <!-- Header -->
        <header class="panel rounded-[2rem] px-5 py-4 md:px-7 md:py-5">
          <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
              <p class="text-xs tracking-[0.24em] text-[var(--ink-500)]">DAILY ARTICLES</p>
              <h2 class="headline-font mt-2 text-2xl font-semibold text-[var(--ink-950)]">
                <span x-show="selectedDate" x-text="selectedDate"></span>
                <span x-show="!selectedDate" class="text-[var(--ink-500)]">选择日期</span>
              </h2>
              <p class="mt-1 text-sm text-[var(--ink-700)]" x-text="`共 ${articles.length} 篇文章`"></p>
            </div>
            <div class="flex flex-wrap items-center gap-3">
              <button type="button" @click="currentView='articles'"
                :class="currentView==='articles'?'primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold':'secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium'">📰 文章</button>
              <button type="button" @click="loadBilling()"
                :class="currentView==='billing'?'primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold':'secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium'">💰 计费</button>
              <span class="text-xs text-[var(--ink-500)]" x-text="currentUserEmail"></span>
              <button type="button" @click="doLogout()"
                class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium">退出登录</button>
              <button type="button" @click="openCreateArticle()"
                class="primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold">＋ 手动添加</button>
              <button type="button" @click="refreshDateGroup()" :disabled="loading"
                class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium disabled:opacity-50">刷新日期</button>
              <template x-if="selectedDate">
                <button type="button" @click="triggerDailyJob()" :disabled="loading"
                  class="primary-btn rounded-2xl px-5 py-2.5 text-sm font-semibold disabled:opacity-50">执行当日任务</button>
              </template>
              <template x-if="selectedDate">
                <button type="button" @click="loadArticles()" :disabled="loading"
                  class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium disabled:opacity-50">刷新文章</button>
              </template>
            </div>
          </div>
        </header>




        <!-- 空状态 / 文章列表+详情 (分栏) -->
        <div x-show="currentView==='articles'">
        <template x-if="!selectedDate">
          <article class="panel flex-1 rounded-[1.75rem] flex items-center justify-center">
            <div class="text-center">
              <div class="text-5xl mb-4">📅</div>
              <p class="text-lg font-semibold text-[var(--ink-500)]">请从左侧导航中选择一个日期</p>
            </div>
          </article>
        </template>

        <template x-if="selectedDate && articles.length===0">
          <article class="panel rounded-[1.75rem] p-8 text-center">
            <div class="text-4xl mb-3">📭</div>
            <p class="text-sm font-semibold text-[var(--ink-500)]">该日期暂无文章</p>
          </article>
        </template>


        <template x-if="selectedDate && articles.length>0">
          <div class="overflow-hidden flex-1">
            <div class="space-y-3 min-w-0 h-full overflow-y-auto custom-scroll pr-1">
              <template x-if="filteredArticles.length===0">
                <div class="panel rounded-[1.75rem] p-8 text-center">
                  <p class="text-sm text-[var(--ink-500)]">没有匹配当前筛选条件的文章</p>
                </div>
              </template>
              <template x-for="article in pagedArticles" :key="article.id">
                <button type="button" @click="showPipeline(article.id)"
                  :class="selectedArticleId===article.id ? 'art-card-active' : ''"
                  class="panel w-full rounded-[1.5rem] p-4 md:p-5 text-left transition hover:shadow-lg">
                  <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0 flex-1">
                      <div class="flex flex-wrap items-center gap-2 mb-2">
                        <span class="badge badge-blue" x-text="article.source_site||'未知'"></span>
                        <span class="badge" :class="statusBadgeClass(article.status)"
                          x-text="statusLabel(article.status)"></span>
                      </div>
                      <h3 class="text-sm font-semibold text-[var(--ink-950)] leading-6" x-text="article.title"></h3>
                      <p class="mt-1 text-xs text-[var(--ink-500)]"><span x-text="`ID ${article.id}`"></span><span
                          class="mx-2">·</span><span x-text="formatDate(article.updated_at)"></span></p>
                    </div>
                    <span class="text-xs text-[var(--ink-500)] shrink-0">▶</span>
                  </div>
                </button>
              </template>
              <div class="flex items-center justify-center gap-3 pt-2 pb-1">
                <button @click="prevPage()" :disabled="currentPage<=1"
                  class="secondary-btn rounded-2xl px-4 py-2 text-sm font-medium disabled:opacity-40">上一页</button>
                <span class="text-sm text-[var(--ink-500)]"><span x-text="currentPage"></span>/<span
                    x-text="totalPages"></span></span>
                <button @click="nextPage()" :disabled="currentPage>=totalPages"
                  class="secondary-btn rounded-2xl px-4 py-2 text-sm font-medium disabled:opacity-40">下一页</button>
                <span class="ml-4 text-xs text-[var(--ink-500)]" x-text="`共${filteredArticles.length}篇`"></span>
              </div>
            </div>
          </div>
        </template>
        </div>

        <!-- ====== 计费面板 ====== -->
        <div x-show="currentView==='billing'" class="overflow-hidden flex-1">
          <div class="h-full overflow-y-auto custom-scroll space-y-5 pr-1">
            <!-- 总览卡片 -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
              <div class="panel rounded-[1.5rem] p-4 text-center">
                <p class="text-[10px] tracking-[0.14em] text-[var(--ink-500)]">API 调用次数</p>
                <p class="mt-2 text-2xl font-bold text-[var(--ink-950)]" x-text="billing.overview.total_calls||0"></p>
                <p class="mt-1 text-xs"><span class="badge-green" x-text="(billing.overview.success_calls||0)+' 成功'"></span><span x-show="billing.overview.failed_calls>0" class="badge-red ml-1" x-text="billing.overview.failed_calls+' 失败'"></span></p>
              </div>
              <div class="panel rounded-[1.5rem] p-4 text-center">
                <p class="text-[10px] tracking-[0.14em] text-[var(--ink-500)]">总 Token</p>
                <p class="mt-2 text-2xl font-bold text-[var(--ink-950)]" x-text="(billing.overview.total_tokens||0).toLocaleString()"></p>
                <p class="mt-1 text-xs text-[var(--ink-500)]"><span x-text="'入 '+(billing.overview.total_input_tokens||0).toLocaleString()"></span><span class="mx-1">·</span><span x-text="'出 '+(billing.overview.total_output_tokens||0).toLocaleString()"></span></p>
              </div>
              <div class="panel rounded-[1.5rem] p-4 text-center">
                <p class="text-[10px] tracking-[0.14em] text-[var(--ink-500)]">平均每次调用</p>
                <p class="mt-2 text-2xl font-bold text-[var(--ink-950)]" x-text="billing.overview.total_calls ? Math.round(billing.overview.total_tokens / billing.overview.total_calls).toLocaleString() : '0'"></p>
                <p class="mt-1 text-xs text-[var(--ink-500)]">Tokens/次</p>
              </div>
            </div>

            <!-- 按服务商 -->
            <div x-show="billing.byProvider.length>0" class="panel rounded-[1.5rem] p-4">
              <p class="text-xs tracking-[0.14em] text-[var(--ink-500)] mb-3">按服务商统计</p>
              <div class="space-y-2">
                <template x-for="p in billing.byProvider" :key="p.provider">
                  <div class="flex items-center gap-3 rounded-xl border border-[rgba(16,32,43,0.06)] bg-white/60 p-3">
                    <span class="text-sm font-semibold min-w-[80px]" x-text="p.provider"></span>
                    <div class="flex-1">
                      <div class="flex justify-between text-xs text-[var(--ink-500)] mb-0.5"><span x-text="p.calls+' 次调用'"></span><span x-text="p.total_tokens.toLocaleString()+' tokens'"></span></div>
                      <div class="flex justify-between text-xs text-[var(--ink-400)]"><span x-text="'入 '+p.total_input_tokens.toLocaleString()"></span><span x-text="'出 '+p.total_output_tokens.toLocaleString()"></span></div>
                    </div>
                  </div>
                </template>
              </div>
            </div>

            <!-- 按操作类型 -->
            <div x-show="billing.byOperation.length>0" class="panel rounded-[1.5rem] p-4">
              <p class="text-xs tracking-[0.14em] text-[var(--ink-500)] mb-3">按操作类型统计</p>
              <div class="overflow-x-auto">
                <table class="w-full text-xs">
                  <thead><tr class="text-[var(--ink-500)] border-b border-[rgba(16,32,43,0.06)]"><th class="text-left py-2 pr-2">操作</th><th class="text-left py-2 pr-2">模型</th><th class="text-right py-2 pr-2">次数</th><th class="text-right py-2 pr-2">输入 Tokens</th><th class="text-right py-2 pr-2">输出 Tokens</th><th class="text-right py-2">总 Tokens</th></tr></thead>
                  <tbody>
                    <template x-for="o in billing.byOperation" :key="o.operation+'-'+o.provider">
                      <tr class="border-b border-[rgba(16,32,43,0.04)]">
                        <td class="py-2 pr-2 font-medium text-[var(--ink-800)]" x-text="o.operation"></td>
                        <td class="py-2 pr-2 text-[var(--ink-500)]" x-text="o.provider"></td>
                        <td class="py-2 pr-2 text-right text-[var(--ink-700)]" x-text="o.calls"></td>
                        <td class="py-2 pr-2 text-right text-[var(--ink-700)]" x-text="o.total_input_tokens.toLocaleString()"></td>
                        <td class="py-2 pr-2 text-right text-[var(--ink-700)]" x-text="o.total_output_tokens.toLocaleString()"></td>
                        <td class="py-2 text-right font-semibold text-[var(--ink-950)]" x-text="o.total_tokens.toLocaleString()"></td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- 按日统计 -->
            <div x-show="billing.daily.length>0" class="panel rounded-[1.5rem] p-4">
              <p class="text-xs tracking-[0.14em] text-[var(--ink-500)] mb-3">按日消耗趋势（最近30天）</p>
              <div class="overflow-x-auto">
                <table class="w-full text-xs">
                  <thead><tr class="text-[var(--ink-500)] border-b border-[rgba(16,32,43,0.06)]"><th class="text-left py-2 pr-2">日期</th><th class="text-right py-2 pr-2">调用</th><th class="text-right py-2 pr-2">输入</th><th class="text-right py-2 pr-2">输出</th><th class="text-right py-2">总 Tokens</th></tr></thead>
                  <tbody>
                    <template x-for="d in billing.daily" :key="d.date">
                      <tr class="border-b border-[rgba(16,32,43,0.04)]">
                        <td class="py-2 pr-2 font-medium text-[var(--ink-800)]" x-text="d.date"></td>
                        <td class="py-2 pr-2 text-right text-[var(--ink-700)]" x-text="d.calls"></td>
                        <td class="py-2 pr-2 text-right text-[var(--ink-700)]" x-text="d.total_input_tokens.toLocaleString()"></td>
                        <td class="py-2 pr-2 text-right text-[var(--ink-700)]" x-text="d.total_output_tokens.toLocaleString()"></td>
                        <td class="py-2 text-right font-semibold text-[var(--ink-950)]" x-text="d.total_tokens.toLocaleString()"></td>
                      </tr>
                    </template>
                  </tbody>
                </table>
              </div>
            </div>

            <div x-show="!billing.loaded && !loading" class="panel rounded-[1.75rem] p-8 text-center">
              <div class="text-4xl mb-3">💰</div>
              <p class="text-sm font-semibold text-[var(--ink-500)]">暂无计费数据</p>
              <p class="text-xs text-[var(--ink-500)] mt-1">完成一次管线处理后，这里会显示 Token 消耗统计</p>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- ====== 编辑原文弹窗 ====== -->
    <div x-show="modal.visible" class="fixed inset-0 z-[60] drawer-backdrop" @click="closeModal()" x-cloak></div>
    <div x-show="modal.visible"
      class="fixed top-1/2 left-1/2 z-[70] w-[min(760px,calc(100vw-24px))] max-h-[calc(100vh-48px)] overflow-y-auto -translate-x-1/2 -translate-y-1/2 rounded-[1.75rem] border border-[rgba(16,32,43,0.1)] bg-[rgba(255,252,246,0.98)] p-6 shadow-2xl custom-scroll"
      x-cloak>
      <div class="mb-4 flex items-center justify-between">
        <h3 class="text-lg font-semibold text-[var(--ink-950)]" x-text="modal.title"></h3><button @click="closeModal()"
          class="secondary-btn rounded-2xl px-3 py-1.5 text-xs font-medium">关闭</button>
      </div>

      <!-- 编辑原文 -->
      <form x-show="modal.type==='article'" @submit.prevent="submitArticleEdit()" class="space-y-4">
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">标题</label><input
            x-model="modal.form.title" class="soft-input rounded-2xl px-4 py-3 text-sm" required /></div>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">正文</label><textarea
            x-model="modal.form.content" rows="12" class="soft-textarea rounded-2xl px-4 py-3 text-sm"
            required></textarea></div>
        <div class="grid gap-3 md:grid-cols-2">
          <div class="rounded-[1.25rem] border border-[rgba(16,32,43,0.08)] bg-white/76 p-3">
            <p class="text-xs text-[var(--ink-500)]">原标题</p>
            <p class="mt-1 text-sm text-[var(--ink-700)]" x-text="modal.original.title"></p>
          </div>
          <div class="rounded-[1.25rem] border border-[rgba(16,32,43,0.08)] bg-white/76 p-3">
            <p class="text-xs text-[var(--ink-500)]">原正文</p>
            <p class="mt-1 text-sm line-clamp-4 text-[var(--ink-700)]" x-text="modal.original.content"></p>
          </div>
        </div>
        <div class="grid gap-4 md:grid-cols-2">
          <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">操作人</label><input
              x-model="modal.form.operator" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
          <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">修改摘要</label><input
              x-model="modal.form.summary" class="soft-input rounded-2xl px-4 py-3 text-sm" placeholder="如：修正文中时间表述" />
          </div>
        </div>
        <div
          class="rounded-[1.25rem] border border-[rgba(28,138,101,0.16)] bg-[rgba(28,138,101,0.06)] p-3 text-sm text-green-700">
          保存后会自动触发下游重建。</div>
        <div class="flex justify-end gap-3"><button @click="closeModal()" type="button"
            class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium">取消</button><button type="submit"
            :disabled="loading"
            class="primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold disabled:opacity-50">保存并重建</button></div>
      </form>

      <!-- 编辑题目 -->
      <form x-show="modal.type==='question'" @submit.prevent="submitQuestionEdit()" class="space-y-4">
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">题干</label><textarea
            x-model="modal.form.stem" rows="4" class="soft-textarea rounded-2xl px-4 py-3 text-sm" required></textarea>
        </div>
        <!-- true_false 题型：True/False 选择器 -->
        <template x-if="modal.form.question_type==='true_false'">
          <div>
            <label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">答案</label>
            <div class="flex gap-3">
              <label class="flex items-center gap-2 px-4 py-2 rounded-xl border cursor-pointer transition"
                :class="modal.form.answer==='true' ? 'border-green-500 bg-green-50 text-green-800' : 'border-gray-200 text-[var(--ink-600)]'">
                <input type="radio" x-model="modal.form.answer" value="true" class="sr-only" />
                <span class="text-sm font-medium">True</span>
              </label>
              <label class="flex items-center gap-2 px-4 py-2 rounded-xl border cursor-pointer transition"
                :class="modal.form.answer==='false' ? 'border-red-500 bg-red-50 text-red-800' : 'border-gray-200 text-[var(--ink-600)]'">
                <input type="radio" x-model="modal.form.answer" value="false" class="sr-only" />
                <span class="text-sm font-medium">False</span>
              </label>
            </div>
          </div>
        </template>
        <!-- 非 true_false 题型：ABCD 输入框 -->
        <template x-if="modal.form.question_type!=='true_false'">
          <div>
            <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">答案</label><input
                x-model="modal.form.answer" class="soft-input rounded-2xl px-4 py-3 text-sm" required /></div>
            <div class="grid gap-3 md:grid-cols-2 mt-3">
              <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项 A</label><input
                  x-model="modal.form.option_a" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
              <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项 B</label><input
                  x-model="modal.form.option_b" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
              <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项 C</label><input
                  x-model="modal.form.option_c" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
              <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项 D</label><input
                  x-model="modal.form.option_d" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
            </div>
          </div>
        </template>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">解析</label><textarea
            x-model="modal.form.analysis" rows="3" class="soft-textarea rounded-2xl px-4 py-3 text-sm"></textarea></div>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">题干翻译 (stem_cn)</label><textarea
            x-model="modal.form.stem_cn" rows="2" class="soft-textarea rounded-2xl px-4 py-3 text-sm"></textarea></div>
        <template x-if="modal.form.question_type!=='true_false'">
          <div class="grid gap-3 md:grid-cols-2">
            <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项A翻译</label><input
                x-model="modal.form.opt_cn_a" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
            <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项B翻译</label><input
                x-model="modal.form.opt_cn_b" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
            <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项C翻译</label><input
                x-model="modal.form.opt_cn_c" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
            <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">选项D翻译</label><input
                x-model="modal.form.opt_cn_d" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
          </div>
        </template>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">操作人</label><input
            x-model="modal.form.operator" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
        <div
          class="rounded-[1.25rem] border border-[rgba(185,140,82,0.16)] bg-[rgba(185,140,82,0.06)] p-3 text-sm text-yellow-800">
          保存后该题将被重置为待审核状态。</div>
        <div class="flex justify-end gap-3"><button @click="closeModal()" type="button"
            class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium">取消</button><button type="submit"
            :disabled="loading"
            class="primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold disabled:opacity-50">保存题目</button></div>
      </form>

      <!-- 编辑译文 -->
      <form x-show="modal.type==='translation'" @submit.prevent="submitTranslationEdit()" class="space-y-4">
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">中文译文</label><textarea
            x-model="modal.form.cn_text" rows="6" class="soft-textarea rounded-2xl px-4 py-3 text-sm"
            required></textarea></div>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">操作人</label><input
            x-model="modal.form.operator" class="soft-input rounded-2xl px-4 py-3 text-sm" /></div>
        <div
          class="rounded-[1.25rem] border border-[rgba(28,138,101,0.16)] bg-[rgba(28,138,101,0.06)] p-3 text-sm text-green-700">
          保存后会自动重建对应的 TTS 音频。</div>
        <div class="flex justify-end gap-3"><button @click="closeModal()" type="button"
            class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium">取消</button><button type="submit"
            :disabled="loading"
            class="primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold disabled:opacity-50">保存译文</button></div>
      </form>

      <!-- 编辑仿写标题 -->
      <form x-show="modal.type==='rewritten_title'" @submit.prevent="submitRewrittenTitleEdit()" class="space-y-4">
        <div class="rounded-[1.25rem] border border-[rgba(16,32,43,0.08)] bg-white/76 p-3 mb-3">
          <p class="text-xs text-[var(--ink-500)]">原文标题</p>
          <p class="mt-1 text-sm font-semibold text-[var(--ink-700)]" x-text="modal.original.title"></p>
        </div>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">仿写标题（所有等级共用）</label>
          <input x-model="modal.form.title" class="soft-input rounded-2xl px-4 py-3 text-sm" required
            placeholder="输入新的仿写标题" />
        </div>
        <div class="text-xs text-[var(--ink-400)]">修改后，该原文下所有等级的仿写文章标题将统一更新。</div>
        <div class="flex justify-end gap-3 pt-2">
          <button type="button" @click="closeModal()" class="secondary-btn rounded-2xl px-4 py-2 text-sm font-medium">取消</button>
          <button type="submit" class="primary-btn rounded-2xl px-4 py-2 text-sm font-medium">保存</button>
        </div>
      </form>

      <!-- 手动创建文章 -->
      <form x-show="modal.type==='create'" @submit.prevent="submitCreateArticle()" class="space-y-4">
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">文章标题 <span class="text-red-400">*</span></label><input
            x-model="createForm.title" class="soft-input rounded-2xl px-4 py-3 text-sm" required placeholder="请输入英文文章标题" /></div>
        <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">文章正文 <span class="text-red-400">*</span></label><textarea
            x-model="createForm.content" rows="12" class="soft-textarea rounded-2xl px-4 py-3 text-sm" required placeholder="请输入英文文章正文"></textarea></div>
        <div class="grid gap-3 md:grid-cols-2">
          <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">来源站点</label><input
              x-model="createForm.source_site" class="soft-input rounded-2xl px-4 py-3 text-sm" placeholder="默认: manual" /></div>
          <div><label class="mb-1 block text-xs tracking-[0.14em] text-[var(--ink-500)]">来源链接</label><input
              x-model="createForm.source_url" class="soft-input rounded-2xl px-4 py-3 text-sm" placeholder="选填" /></div>
        </div>
        <div class="flex items-center gap-3">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" x-model="createForm.auto_process" checked class="w-4 h-4 rounded accent-[var(--accent-600)]" />
            <span class="text-sm text-[var(--ink-700)]">创建后自动执行抓取→仿写→题目→翻译→音频全链路</span>
          </label>
        </div>
        <div
          class="rounded-[1.25rem] border border-[rgba(180,69,34,0.16)] bg-[rgba(180,69,34,0.06)] p-3 text-sm text-[var(--accent-700)]">
          文章创建后将立即入库。如勾选自动处理，系统会依次执行抓取、仿写、出题、翻译、TTS 等步骤。</div>
        <div class="flex justify-end gap-3"><button @click="closeModal()" type="button"
            class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium">取消</button><button type="submit"
            :disabled="loading"
            class="primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold disabled:opacity-50">创建文章</button></div>
      </form>
    </div>

    <!-- 确认弹窗 -->
    <div x-show="confirm.visible" class="fixed inset-0 z-[60] drawer-backdrop" @click="resolveConfirm(false)" x-cloak>
    </div>
    <div x-show="confirm.visible"
      class="fixed top-1/2 left-1/2 z-[70] w-[min(520px,calc(100vw-24px))] -translate-x-1/2 -translate-y-1/2 rounded-[1.75rem] border border-[rgba(16,32,43,0.1)] bg-[rgba(255,252,246,0.98)] p-6 shadow-2xl"
      x-cloak>
      <div class="mb-4 flex items-center justify-between">
        <h3 class="text-lg font-semibold text-[var(--ink-950)]" x-text="confirm.title||'二次确认'"></h3><button
          @click="resolveConfirm(false)" class="secondary-btn rounded-2xl px-3 py-1.5 text-xs font-medium">关闭</button>
      </div>
      <p class="text-sm leading-7 whitespace-pre-wrap text-[var(--ink-700)]" x-text="confirm.message"></p>
      <p x-show="confirm.hint"
        class="mt-3 rounded-[1.25rem] border border-[rgba(185,140,82,0.16)] bg-[rgba(185,140,82,0.06)] p-3 text-sm text-yellow-800"
        x-text="confirm.hint"></p>
      <div class="mt-5 flex justify-end gap-3"><button @click="resolveConfirm(false)"
          class="secondary-btn rounded-2xl px-4 py-2.5 text-sm font-medium">取消</button><button
          @click="resolveConfirm(true)" class="primary-btn rounded-2xl px-4 py-2.5 text-sm font-semibold"
          x-text="confirm.confirmText||'确认执行'"></button></div>
    </div>

    <!-- ====== 链路详情弹窗 ====== -->
    <template x-if="selectedPipeline">
      <div class="fixed inset-0 z-40 drawer-backdrop" @click="closePipeline()"></div>
    </template>
    <template x-if="selectedPipeline">
    <div
      class="fixed inset-4 md:inset-8 z-50 rounded-[1.75rem] border border-[rgba(16,32,43,0.1)] bg-[rgba(255,252,246,0.98)] p-5 md:p-6 shadow-2xl flex flex-col overflow-hidden">
      <div class="flex items-center justify-between mb-4 shrink-0">
        <h3 class="text-lg font-semibold text-[var(--ink-950)]">链路详情</h3>
        <button @click="closePipeline()" class="secondary-btn rounded-2xl px-3 py-1.5 text-xs font-medium">关闭</button>
      </div>
      <div class="flex-1 overflow-y-auto custom-scroll space-y-5 pr-1">
        <!-- 标题 & 操作 -->
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div>
            <div class="flex flex-wrap items-center gap-2 mb-2">
              <span class="badge badge-blue" x-text="selectedPipeline.source_site||'未知'"></span>
              <a x-show="selectedPipeline.source_url" :href="selectedPipeline.source_url" target="_blank" rel="noopener"
                class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium">🔗 原文</a>
              <span class="badge" :class="statusBadgeClass(selectedPipeline.status)"
                x-text="statusLabel(selectedPipeline.status)"></span>
            </div>
            <h3 class="text-base font-semibold text-[var(--ink-950)]" x-text="selectedPipeline.title"></h3>
            <div x-data="{ rewriteTitle: (selectedPipeline.rewritten_articles||[])[0]?.title||'' }" class="mt-1.5 flex items-center gap-2">
              <span class="text-xs tracking-[0.14em] text-[var(--ink-500)]">仿写标题</span>
              <span class="text-sm text-[var(--ink-700)]" x-text="rewriteTitle||'（未生成）'"></span>
              <button @click="openRewrittenTitleEditor()" x-show="(selectedPipeline.rewritten_articles||[]).length>0"
                class="secondary-btn rounded-2xl px-2 py-0.5 text-[10px] font-medium">编辑</button>
            </div>
          </div>
          <div class="flex flex-wrap gap-2">
            <button @click="openArticleEditor()" :disabled="loading"
              class="secondary-btn rounded-2xl px-3 py-1.5 text-xs font-medium disabled:opacity-50">编辑原文</button>
            <button @click="rerunStep('full_pipeline')" :disabled="loading"
              class="secondary-btn rounded-2xl px-3 py-1.5 text-xs font-medium disabled:opacity-50">重跑全链路</button>
          </div>
        </div>

        <!-- 原文 -->
        <div class="rounded-[1.25rem] border border-[rgba(16,32,43,0.08)] bg-white/70 p-4">
          <p class="text-xs tracking-[0.14em] text-[var(--ink-500)] mb-2">原文</p>
          <div
            class="text-sm leading-7 whitespace-pre-wrap text-[var(--ink-700)] max-h-[160px] overflow-y-auto custom-scroll"
            x-text="selectedPipeline.content||'暂无'"></div>
        </div>

        <!-- 仿写文章卡片 -->
        <template x-if="(selectedPipeline.rewritten_articles||[]).length>0">
          <div class="space-y-4">
            <div class="flex flex-wrap gap-2">
              <button @click="selectedLevel=null"
                :class="!selectedLevel?'bg-[rgba(180,69,34,0.12)] text-[var(--accent-700)] border-[rgba(180,69,34,0.25)]':'border-[rgba(16,32,43,0.08)] bg-white/65 text-[var(--ink-700)]'"
                class="rounded-2xl border px-3 py-1.5 text-xs font-semibold transition">全部</button>
              <template x-for="lvl in (selectedPipeline.rewritten_articles||[]).map(r=>r.level)" :key="lvl">
                <button @click="selectedLevel=lvl"
                  :class="selectedLevel===lvl?'bg-[rgba(180,69,34,0.12)] text-[var(--accent-700)] border-[rgba(180,69,34,0.25)]':'border-[rgba(16,32,43,0.08)] bg-white/65 text-[var(--ink-700)]'"
                  class="rounded-2xl border px-3 py-1.5 text-xs font-semibold transition" x-text="lvl"></button>
              </template>
            </div>
            <template x-for="rw in selectedPipeline.rewritten_articles" :key="rw.id||rw.level">
              <div x-show="!selectedLevel||selectedLevel===rw.level"
                class="rounded-[1.25rem] border border-[rgba(16,32,43,0.08)] bg-white/70 overflow-hidden">
                <div
                  class="flex flex-wrap items-center gap-2 px-4 py-3 bg-white/50 border-b border-[rgba(16,32,43,0.06)]">
                  <span class="text-sm font-semibold text-[var(--ink-950)]" x-text="rw.level"></span>
                  <span class="badge" :class="statusBadgeClass(rw.status)" x-text="statusLabel(rw.status)"></span>
                  <span class="badge" :class="statusBadgeClass(rw.audit_status)"
                    x-text="statusLabel(rw.audit_status)"></span>
                  <span class="flex-1"></span>
                  <button @click="copyRewrittenContent(rw)" x-show="selectedLevel"
                    class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium">复制内容</button>
                  <button @click="rerunStep('adapt',null,rw.level)" :disabled="loading"
                    class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50">重跑仿写</button>
                </div>
                <div class="flex border-b border-[rgba(16,32,43,0.06)] bg-white/40">
                  <button @click="setDetailTab(rw,'rewrite')"
                    :class="getDetailTab(rw)==='rewrite'?'border-[var(--accent-600)] text-[var(--accent-700)] bg-[rgba(180,69,34,0.06)]':'border-transparent text-[var(--ink-500)]'"
                    class="flex-1 border-b-2 px-4 py-2.5 text-xs font-semibold transition">仿写内容</button>
                  <button @click="setDetailTab(rw,'questions')"
                    :class="getDetailTab(rw)==='questions'?'border-[var(--accent-600)] text-[var(--accent-700)] bg-[rgba(180,69,34,0.06)]':'border-transparent text-[var(--ink-500)]'"
                    class="flex-1 border-b-2 px-4 py-2.5 text-xs font-semibold transition">题目 <span
                      class="text-[10px] opacity-70" x-text="'('+(rw.questions||[]).length+')'"></span></button>
                  <button @click="setDetailTab(rw,'translations')"
                    :class="getDetailTab(rw)==='translations'?'border-[var(--accent-600)] text-[var(--accent-700)] bg-[rgba(180,69,34,0.06)]':'border-transparent text-[var(--ink-500)]'"
                    class="flex-1 border-b-2 px-4 py-2.5 text-xs font-semibold transition">翻译/TTS <span
                      class="text-[10px] opacity-70" x-text="'('+(rw.translations||[]).length+')'"></span></button>
                  <button @click="setDetailTab(rw,'entities')"
                    :class="getDetailTab(rw)==='entities'?'border-[var(--accent-600)] text-[var(--accent-700)] bg-[rgba(180,69,34,0.06)]':'border-transparent text-[var(--ink-500)]'"
                    class="flex-1 border-b-2 px-4 py-2.5 text-xs font-semibold transition">专有名词 <span
                      class="text-[10px] opacity-70" x-text="'('+(rw.named_entities||[]).length+')'"></span></button>
                </div>
                <div class="p-4">
                  <div x-show="getDetailTab(rw)==='rewrite'" class="space-y-2">
                    <div
                      class="text-sm leading-7 whitespace-pre-wrap text-[var(--ink-700)] max-h-[300px] overflow-y-auto custom-scroll"
                      x-text="rw.content||'暂无仿写内容'"></div>
                    <template x-if="rw.content_trans">
                      <details class="mt-2" open>
                        <summary class="text-xs font-semibold text-[var(--accent-700)] cursor-pointer select-none hover:text-[var(--accent-800)]">
                          含翻译标注（难词带中文释义）
                        </summary>
                        <div class="mt-2 text-sm leading-7 whitespace-pre-wrap text-[var(--ink-700)] max-h-[300px] overflow-y-auto custom-scroll rounded-lg border border-[rgba(180,69,34,0.12)] bg-[rgba(180,69,34,0.03)] p-3"
                          x-text="rw.content_trans"></div>
                      </details>
                    </template>
                  </div>
                  <div x-show="getDetailTab(rw)==='questions'" class="space-y-2">
                    <button @click="rerunStep('question',null,rw.level)" :disabled="loading"
                      class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50 mb-2">重跑全部题目</button>
                    <template x-if="(rw.questions||[]).length===0">
                      <div class="text-center py-6 text-xs text-[var(--ink-500)]">暂无题目</div>
                    </template>
                    <template x-for="q in rw.questions||[]" :key="q.id">
                      <div class="rounded-xl border border-[rgba(16,32,43,0.06)] bg-white/65 p-3">
                        <div class="flex flex-wrap items-center gap-2 mb-1"><span class="text-xs font-semibold"
                            x-text="questionTypeLabel(q.question_type)"></span><span class="badge"
                            :class="statusBadgeClass(q.audit_status)" x-text="statusLabel(q.audit_status)"></span></div>
                        <p class="text-sm leading-6 text-[var(--ink-700)]" x-text="q.stem"></p>
                        <p x-show="q.translation?.stem_cn" class="mt-0.5 text-xs text-[var(--ink-500)]"
                           x-text="'📝 题干翻译：'+q.translation.stem_cn"></p>
                        <p class="mt-2 text-xs text-[var(--ink-500)]">答案: <strong class="text-[var(--ink-800)]"
                            x-text="q.answer"></strong></p>
                        <div class="mt-1.5 flex flex-wrap gap-1.5" x-show="q.options && Object.keys(q.options||{}).length">
                          <template x-for="(v,k) in q.options||{}" :key="k">
                            <span class="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-lg border border-[rgba(16,32,43,0.08)] bg-[rgba(16,32,43,0.03)]"><span class="font-semibold text-[var(--ink-600)]" x-text="k"></span><span class="text-[var(--ink-500)]" x-text="v"></span><span x-show="q.translation?.options_cn?.[k]" class="text-[var(--ink-400)]" x-text="'（'+q.translation.options_cn[k]+'）'"></span></span>
                          </template>
                        </div>
                        <div class="mt-2 flex flex-wrap gap-2">
                          <button @click="deleteQuestion(q.id)"
                            class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium text-red-600">删除</button>
                          <button @click="openQuestionEditor(q)"
                            class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium">编辑</button>
                          <button @click="auditQuestion(q.id,'passed')" x-show="q.audit_status!=='passed'"
                            :disabled="loading"
                            class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50">通过</button>
                          <button @click="auditQuestion(q.id,'rejected')" :disabled="loading"
                            class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50">驳回</button>
                        </div>
                      </div>
                    </template>
                  </div>
                  <div x-show="getDetailTab(rw)==='translations'" class="space-y-2">
                    <button @click="rerunStep('translate',null,rw.level)" :disabled="loading"
                      class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50 mb-2">重跑全部翻译</button>
                    <template x-if="(rw.translations||[]).length===0">
                      <div class="text-center py-6 text-xs text-[var(--ink-500)]">暂无翻译</div>
                    </template>
                    <template x-for="tr in rw.translations||[]" :key="tr.id">
                      <div class="rounded-xl border border-[rgba(16,32,43,0.06)] bg-white/65 p-3">
                        <div class="flex flex-wrap items-center gap-2 mb-2"><span
                            class="text-xs font-semibold text-[var(--ink-800)]"
                            x-text="'第'+tr.paragraph_index+'段第'+tr.sentence_index+'句'"></span><span class="badge"
                            :class="statusBadgeClass(tr.status)" x-text="statusLabel(tr.status)"></span></div>
                        <p class="text-xs text-[var(--ink-500)] italic" x-text="tr.en_text"></p>
                        <p class="mt-1 text-sm leading-6 text-[var(--ink-700)]" x-text="tr.cn_text"></p>
                        <template x-if="(tr.tts_records||[]).length>0">
                          <div class="mt-2 flex flex-wrap items-center gap-2">
                            <template x-for="audio in tr.tts_records||[]" :key="audio.id">
                              <span class="inline-flex items-center gap-1 text-[10px]"><span class="badge"
                                  :class="statusBadgeClass(audio.generate_status)"
                                  x-text="statusLabel(audio.generate_status)"></span><button @click="playAudio(audio)"
                                  class="secondary-btn rounded-2xl px-2 py-0.5 text-[10px] font-medium">播放</button><a :href="audio.audio_url" target="_blank" rel="noopener" class="ml-1 text-[10px] text-[var(--ink-400)] hover:text-[var(--ink-600)]" title="在新窗口播放">↗</a></span>
                            </template>
                          </div>
                        </template>
                        <div class="mt-2 flex flex-wrap gap-2"><button @click="openTranslationEditor(tr)"
                            class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium">编辑译文</button><button
                            @click="rerunTranslationTts(tr.id)" :disabled="loading"
                            class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50">重跑当前段TTS</button>
                        </div>
                      </div>
                    </template>
                  </div>
                  <div x-show="getDetailTab(rw)==='entities'" class="space-y-3">
                    <button @click="rerunStep('ner',null,rw.level)" :disabled="loading"
                      class="secondary-btn rounded-2xl px-2 py-1 text-[10px] font-medium disabled:opacity-50 mb-2">重跑专有名词识别</button>
                    <template x-if="(rw.named_entities||[]).length===0">
                      <div class="text-center py-6 text-xs text-[var(--ink-500)]">暂无专有名词</div>
                    </template>
                    <template x-for="group in entityGroups(rw.named_entities||[])" :key="group.type">
                      <div class="space-y-1">
                        <div class="flex items-center gap-2 mb-1">
                          <span class="badge text-xs" :class="entityTypeBadgeClass(group.type)"
                            x-text="entityTypeLabel(group.type)"></span>
                          <span class="text-[10px] text-[var(--ink-500)]" x-text="'('+group.items.length+'个)'"></span>
                        </div>
                        <div class="flex flex-wrap gap-2">
                          <template x-for="entity in group.items" :key="entity.id">
                            <span class="badge bg-white/80 border border-[rgba(16,32,43,0.1)] text-xs cursor-default"
                              :title="entity.context||entity.entity_text" x-text="entity.entity_text"></span>
                          </template>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
    </template>
  </div>

  <!-- 字幕播放器 -->
  <div x-show="subtitleActive" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
    class="fixed bottom-6 left-1/2 z-[80] -translate-x-1/2 w-[min(640px,94vw)] rounded-2xl overflow-hidden shadow-2xl"
    x-cloak>
    <!-- 玻璃背景 -->
    <div class="relative bg-[rgba(16,32,43,0.92)] backdrop-blur-xl border border-white/10 rounded-2xl">
      <!-- 顶部控制条 -->
      <div class="flex items-center gap-3 px-4 pt-3 pb-1">
        <span class="text-[10px] text-white/40 font-mono" x-text="subtitleSentenceLabel"></span>
        <div class="flex-1 h-1 rounded-full bg-white/10 overflow-hidden">
          <div class="h-full rounded-full bg-gradient-to-r from-emerald-400 to-cyan-400 transition-all duration-150 ease-linear"
            :style="{ width: subtitleProgress + '%' }"></div>
        </div>
        <button @click="stopAudio()" class="text-white/30 hover:text-white/60 transition-colors" title="关闭">✕</button>
      </div>
      <!-- 字幕文本区 -->
      <div class="px-6 pb-5 pt-2">
        <div class="flex flex-wrap justify-center items-baseline gap-x-[3px] gap-y-1 min-h-[2.5rem]">
          <template x-for="(w, i) in subtitleWords" :key="i">
            <span
              :class="{
                'text-yellow-300 font-bold scale-110 z-10': i === subtitleCurrentIndex,
                'text-white/55 scale-100': i > subtitleCurrentIndex && i <= subtitleCurrentIndex + 2,
                'text-white/25 scale-100': i < subtitleCurrentIndex || i > subtitleCurrentIndex + 2
              }"
              class="inline-block px-[2px] transition-all duration-200 ease-out"
              :style="i === subtitleCurrentIndex ? 'text-shadow: 0 0 12px rgba(252,211,77,0.45)' : ''"
              x-text="w.word">
            </span>
          </template>
        </div>
      </div>
    </div>
  </div>

  <script>
    function app() {
      return {
        dateGroups: [], selectedDate: null,
        articles: [], rawArticles: [],
        currentPage: 1, pageSize: 10,
        selectedArticleId: null, selectedPipeline: null,
        modal: { visible: false, type: "", title: "", articleId: null, questionId: null, translationId: null, form: {}, original: {} },
        confirm: { visible: false, title: "", message: "", hint: "", confirmText: "确认执行" }, confirmResolver: null,
        toasts: [], _toastId: 0,
        loading: false,
        detailTabs: {}, // 每个等级卡的当前Tab: { key: 'rewrite'|'questions'|'translations' }
        selectedLevel: null, // 当前选中的难度等级，null=显示全部
        currentUserEmail: "",
        subtitleActive: false, subtitleWords: [], subtitleCurrentIndex: -1, subtitleProgress: 0, subtitleSentenceLabel: '', _currentAudio: null,
        createForm: { title: '', content: '', source_site: '', source_url: '', auto_process: true },
        currentView: 'articles',  // 'articles' | 'billing'
        billing: { loaded: false, overview: {}, byProvider: [], byOperation: [], daily: [] },

        get filteredArticles() {
          return [...this.rawArticles].sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
        },
        get totalPages() { return Math.max(1, Math.ceil(this.filteredArticles.length / this.pageSize)); },
        get pagedArticles() { const s = (this.currentPage - 1) * this.pageSize; return this.filteredArticles.slice(s, s + this.pageSize); },

        async init() {
          const token = localStorage.getItem("token");
          if (!token) { window.location.href = "/login"; return; }
          try {
            const res = await fetch("/api/auth/me", {
              headers: { "Authorization": "Bearer " + token },
            });
            if (!res.ok) throw new Error("unauthorized");
            const data = await res.json();
            this.currentUserEmail = data.email || "";
          } catch (e) {
            localStorage.removeItem("token");
            window.location.href = "/login";
            return;
          }
          await this.refreshDateGroup();
        },
        doLogout() {
          localStorage.removeItem("token");
          window.location.href = "/login";
        },

        // === 日期 ===
        async refreshDateGroup() {
          this.loading = true;
          try {
            const r = await this.request("/api/articles/scraped/by-date");
            const data = r.data || {}; const dateTabs = data.date_tabs || [];
            this.buildDateGroups(dateTabs);
            const autoDate = data.selected_date || (dateTabs.length > 0 ? dateTabs[0] : null);
            if (autoDate && !this.selectedDate) { await this.selectDate(autoDate); const m = autoDate.substring(0, 7); const g = this.dateGroups.find(x => x.month === m); if (g) g.expanded = true; }
            else if (this.selectedDate) await this.loadArticles();
          } catch (e) { this.showToast('加载日期失败: ' + e.message, 'error') } finally { this.loading = false }
        },
        buildDateGroups(rawDates) {
          const map = {}; (rawDates || []).forEach(d => { if (!d) return; const p = d.split('-'), m = p[0] + '-' + p[1]; if (!map[m]) map[m] = { month: m, dates: [] }; map[m].dates.push({ value: d, dayLabel: parseInt(p[2], 10) + '日' }); });
          this.dateGroups = Object.values(map).sort((a, b) => b.month.localeCompare(a.month)).map(g => (g.dates.sort((a, b) => b.value.localeCompare(a.value)), g.monthLabel = this.fmtMonth(g.month), g.expanded = false, g));
          if (this.selectedDate) { const cm = this.selectedDate.substring(0, 7); const g = this.dateGroups.find(x => x.month === cm); if (g) g.expanded = true; }
        },
        fmtMonth(m) { const p = m.split('-'), n = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; return p[0] + '年 ' + n[parseInt(p[1], 10) - 1]; },
        toggleMonth(i) { this.dateGroups[i].expanded = !this.dateGroups[i].expanded },
        async selectDate(d) { this.selectedDate = d; this.currentPage = 1; this.selectedArticleId = null; this.selectedPipeline = null; await this.loadArticles() },

        // === 文章列表 ===
        async loadArticles() {
          if (!this.selectedDate) return; this.loading = true;
          try { const r = await this.request(`/api/articles/scraped/by-date?date=${encodeURIComponent(this.selectedDate)}&page=1&page_size=50`); this.articles = r.data?.items || []; this.rawArticles = [...this.articles] } catch (e) { this.showToast('加载文章失败: ' + e.message, 'error') } finally { this.loading = false }
        },


        prevPage() { if (this.currentPage > 1) this.currentPage-- }, nextPage() { if (this.currentPage < this.totalPages) this.currentPage++ },

        // === 计费 ===
        async loadBilling() {
          this.currentView = 'billing'; this.loading = true;
          try {
            const [ov, bp, bo, dy] = await Promise.all([
              this.request('/api/billing/overview').catch(() => ({ data: {} })),
              this.request('/api/billing/by-provider').catch(() => ({ data: [] })),
              this.request('/api/billing/by-operation').catch(() => ({ data: [] })),
              this.request('/api/billing/daily?days=30').catch(() => ({ data: [] })),
            ]);
            this.billing = {
              loaded: true,
              overview: ov.data || {},
              byProvider: bp.data || [],
              byOperation: bo.data || [],
              daily: dy.data || [],
            };
          } catch (e) {
            this.showToast('加载计费数据失败: ' + e.message, 'error');
          } finally { this.loading = false }
        },

        // === Tab切换 ===
        tabKey(rw) { return rw.id || rw.level; },
        getDetailTab(rw) { return this.detailTabs[this.tabKey(rw)] || 'rewrite'; },
        setDetailTab(rw, tab) { this.detailTabs[this.tabKey(rw)] = tab; },

        // === 链路详情 ===
        async showPipeline(articleId) {
          this.selectedArticleId = articleId; this.loading = true; this.selectedLevel = null; this.detailTabs = {};
          try { const r = await this.request(`/api/articles/${articleId}/pipeline`); this.selectedPipeline = r.data || null } catch (e) { this.showToast('加载链路失败: ' + e.message, 'error') } finally { this.loading = false }
        },
        closePipeline() { this.selectedPipeline = null; this.selectedArticleId = null },

        // === 重跑 ===
        async rerunStep(step, translationId, level) {
          const labels = { full_pipeline: '全链路', adapt: '仿写', review: '审核', ner: '专有名词识别', question: '题目', translate: '翻译', tts: 'TTS' };
          const confirmed = await this.openConfirm({ title: `确认重跑${labels[step] || step}`, message: `将对文章 #${this.selectedArticleId} 的 ${labels[step] || step} 步骤重跑。`, hint: '该操作会覆盖当前结果。', confirmText: '确认重跑' });
          if (!confirmed) return; this.loading = true;
          try {
            let url, body;
            if (step === 'tts' && translationId) { url = `/api/articles/translations/${translationId}/rerun-tts`; body = { operator: 'admin' }; }
            else { url = `/api/articles/${this.selectedArticleId}/rerun`; body = { step, operator: 'admin' }; if (level) body.level = level; }
            await this.request(url, { method: 'POST', body: JSON.stringify(body) });
            this.showToast('重跑已提交', 'success'); await this.showPipeline(this.selectedArticleId);
          } catch (e) { this.showToast('重跑失败: ' + e.message, 'error') } finally { this.loading = false }
        },
        async rerunTranslationTts(translationId) { await this.rerunStep('tts', translationId); },

        // === 编辑原文 ===
        async openArticleEditor() {
          if (!this.selectedArticleId) return;
          const r = await this.request(`/api/articles/${this.selectedArticleId}`);
          const art = r.data || {};
          this.modal = { visible: true, type: 'article', title: `编辑原文 #${this.selectedArticleId}`, articleId: this.selectedArticleId, questionId: null, translationId: null, form: { title: art.title || '', content: art.content || '', operator: 'admin', summary: '' }, original: { title: art.title || '', content: art.content || '' } };
        },
        async submitArticleEdit() {
          if (!this.modal.articleId) return;
          const confirmed = await this.openConfirm({ title: '确认保存原文', message: `将保存文章 #${this.modal.articleId} 的修改。`, hint: '保存后会触发下游仿写、题目、翻译与音频重建。', confirmText: '确认保存' });
          if (!confirmed) return;
          await this.request(`/api/articles/${this.modal.articleId}`, { method: 'PUT', body: JSON.stringify({ title: this.modal.form.title, content: this.modal.form.content, operator: this.modal.form.operator || 'admin', summary: this.modal.form.summary || '' }) });
          this.closeModal(); await this.showPipeline(this.modal.articleId);
        },

        // === 编辑仿写标题 ===
        openRewrittenTitleEditor() {
          const rws = this.selectedPipeline?.rewritten_articles || [];
          const currentTitle = rws[0]?.title || '';
          this.modal = {
            visible: true,
            type: 'rewritten_title',
            title: '编辑仿写标题',
            articleId: this.selectedArticleId,
            questionId: null,
            translationId: null,
            form: { title: currentTitle, operator: 'admin' },
            original: { title: this.selectedPipeline?.title || '' },
          };
        },
        async submitRewrittenTitleEdit() {
          if (!this.modal.form.title.trim()) { this.showToast('标题不能为空', 'error'); return; }
          this.loading = true;
          try {
            await this.request(`/api/articles/${this.modal.articleId}/rewritten-title`, {
              method: 'PUT',
              body: JSON.stringify({ title: this.modal.form.title, operator: this.modal.form.operator || 'admin' }),
            });
            this.showToast('仿写标题已更新', 'success');
            this.closeModal();
            await this.showPipeline(this.modal.articleId);
          } catch (e) {
            this.showToast('更新失败: ' + e.message, 'error');
          } finally {
            this.loading = false;
          }
        },

        // === 编辑题目 ===
        openQuestionEditor(q) {
          const opts = q.options || {};
          const isTf = q.question_type === 'true_false';
          // 兼容老数据（ABCD 格式的 true_false）：不回填空值，让用户手动确认
          const option_a = isTf ? '' : (opts.A || '');
          const option_b = isTf ? '' : (opts.B || '');
          const option_c = isTf ? '' : (opts.C || '');
          const option_d = isTf ? '' : (opts.D || '');
          const trans = q.translation || {};
          const optsCn = trans.options_cn || {};
          this.modal = { visible: true, type: 'question', title: `编辑题目 #${q.id}`, articleId: null, questionId: q.id, translationId: null, form: { stem: q.stem || '', answer: q.answer || '', question_type: q.question_type || '', option_a, option_b, option_c, option_d, analysis: q.analysis || '', stem_cn: trans.stem_cn || '', opt_cn_a: optsCn.A || '', opt_cn_b: optsCn.B || '', opt_cn_c: optsCn.C || '', opt_cn_d: optsCn.D || '', operator: 'admin' }, original: {} };
        },
        async submitQuestionEdit() {
          if (!this.modal.questionId) return;
          const confirmed = await this.openConfirm({ title: '确认保存题目', message: `将保存题目 #${this.modal.questionId} 的修改。`, hint: '保存后该题会被重置为待审核状态。', confirmText: '确认保存' });
          if (!confirmed) return;
          const isTf = this.modal.form.question_type === 'true_false';
          const options = isTf
            ? { true: 'True', false: 'False' }
            : { A: this.modal.form.option_a || '', B: this.modal.form.option_b || '', C: this.modal.form.option_c || '', D: this.modal.form.option_d || '' };
          const translation = isTf
            ? (this.modal.form.stem_cn ? { stem_cn: this.modal.form.stem_cn } : null)
            : (this.modal.form.stem_cn || this.modal.form.opt_cn_a || this.modal.form.opt_cn_b || this.modal.form.opt_cn_c || this.modal.form.opt_cn_d
              ? { stem_cn: this.modal.form.stem_cn || '', options_cn: { A: this.modal.form.opt_cn_a || '', B: this.modal.form.opt_cn_b || '', C: this.modal.form.opt_cn_c || '', D: this.modal.form.opt_cn_d || '' } } : null);
          await this.request(`/api/articles/questions/${this.modal.questionId}`, { method: 'PUT', body: JSON.stringify({ stem: this.modal.form.stem, answer: this.modal.form.answer, options, analysis: this.modal.form.analysis || '', translation, operator: this.modal.form.operator || 'admin' }) });
          this.closeModal(); if (this.selectedArticleId) await this.showPipeline(this.selectedArticleId);
        },
        async auditQuestion(qid, status) {
          const act = status === 'passed' ? '通过' : '驳回';
          const confirmed = await this.openConfirm({ title: `确认${act}题目`, message: `将题目 #${qid} 标记为"${act}"。`, confirmText: `确认${act}` });
          if (!confirmed) return;
          const comment = window.prompt(`请输入${act}备注（可留空）：`, '') || '';
          await this.request(`/api/articles/questions/${qid}/audit`, { method: 'POST', body: JSON.stringify({ audit_status: status, comment, operator: 'admin' }) });
          if (this.selectedArticleId) await this.showPipeline(this.selectedArticleId);
        },
        async deleteQuestion(qid) {
          const confirmed = await this.openConfirm({
            title: '确认删除题目',
            message: `将删除题目 #${qid}。`,
            hint: '删除后该题目将不再显示，但数据保留在数据库中。',
            confirmText: '确认删除'
          });
          if (!confirmed) return;
          this.loading = true;
          try {
            await this.request(`/api/articles/questions/${qid}`, {
              method: 'DELETE',
              body: JSON.stringify({ operator: 'admin' })
            });
            this.showToast('题目已删除', 'success');
            if (this.selectedArticleId) await this.showPipeline(this.selectedArticleId);
          } catch (e) {
            this.showToast('删除失败: ' + e.message, 'error');
          } finally {
            this.loading = false;
          }
        },

        // === 编辑译文 ===
        openTranslationEditor(tr) {
          this.modal = { visible: true, type: 'translation', title: `编辑翻译 #${tr.id}`, articleId: null, questionId: null, translationId: tr.id, form: { cn_text: tr.cn_text || '', operator: 'admin' }, original: {} };
        },
        async submitTranslationEdit() {
          if (!this.modal.translationId) return;
          const confirmed = await this.openConfirm({ title: '确认保存译文', message: `将保存翻译 #${this.modal.translationId} 的修改。`, hint: '保存后会自动重建对应 TTS 音频。', confirmText: '确认保存' });
          if (!confirmed) return;
          await this.request(`/api/articles/translations/${this.modal.translationId}`, { method: 'PUT', body: JSON.stringify({ cn_text: this.modal.form.cn_text, operator: this.modal.form.operator || 'admin' }) });
          this.closeModal(); if (this.selectedArticleId) await this.showPipeline(this.selectedArticleId);
        },
        closeModal() { this.modal.visible = false; this.modal.type = '' },

        // === 创建文章 ===
        openCreateArticle() {
          this.createForm = { title: '', content: '', source_site: '', source_url: '', auto_process: true };
          this.modal = { visible: true, type: 'create', title: '手动添加文章', articleId: null, questionId: null, translationId: null, form: {}, original: {} };
        },
        async submitCreateArticle() {
          if (!this.createForm.title || !this.createForm.content) { this.showToast('标题和正文不能为空', 'error'); return; }
          const confirmed = await this.openConfirm({
            title: '确认创建文章',
            message: `将创建文章「${this.createForm.title.slice(0, 50)}${this.createForm.title.length > 50 ? '…' : ''}」`,
            hint: this.createForm.auto_process ? '创建后将自动执行全流程处理。' : '创建后仅入库，不会自动处理。',
            confirmText: '确认创建'
          });
          if (!confirmed) return;
          this.loading = true;
          try {
            const body = {
              title: this.createForm.title,
              content: this.createForm.content,
              source_site: this.createForm.source_site || 'manual',
              source_url: this.createForm.source_url || null,
              auto_process: this.createForm.auto_process,
              operator: this.currentUserEmail || 'admin'
            };
            await this.request('/api/articles', { method: 'POST', body: JSON.stringify(body) });
            this.showToast('文章创建成功，已开始处理', 'success');
            this.closeModal();
            await this.refreshDateGroup();
            // 如果已有选中日期，刷新文章列表
            if (this.selectedDate) await this.loadArticles();
          } catch (e) { this.showToast('创建失败: ' + e.message, 'error'); } finally { this.loading = false; }
        },

        // === 当日任务 ===
        async triggerDailyJob() {
          const confirmed = await this.openConfirm({ title: '确认执行当日任务', message: `将对 ${this.selectedDate} 执行自动抓取。`, hint: '系统会抓取新文章并执行完整处理链路。', confirmText: '确认执行' });
          if (!confirmed) return; this.loading = true;
          try { const r = await this.request('/api/jobs/run-daily', { method: 'POST', body: JSON.stringify({ trigger_source: 'manual', operator: 'admin' }) }); const t = r.data || {}; this.showToast(`任务已触发: #${t.id} (${t.status})`, 'success'); await this.refreshDateGroup() } catch (e) { this.showToast('触发失败: ' + e.message, 'error') } finally { this.loading = false }
        },

        // === 确认弹窗 ===
        openConfirm({ title, message, hint = '', confirmText = '确认执行' }) { this.confirm = { visible: true, title: title || '二次确认', message: message || '', hint, confirmText }; return new Promise(r => { this.confirmResolver = r }) },
        resolveConfirm(ok) { this.confirm.visible = false; const r = this.confirmResolver; this.confirmResolver = null; if (r) r(!!ok) },

        // === Toast ===
        showToast(m, t = 'success') { const id = ++this._toastId; this.toasts.push({ id, msg: m, type: t }); setTimeout(() => this.dismissToastById(id), 3500) },
        dismissToast(i) { this.toasts.splice(i, 1) }, dismissToastById(id) { const i = this.toasts.findIndex(t => t.id === id); if (i >= 0) this.toasts.splice(i, 1) },

        // === 工具 ===
        async request(url, opt = {}) {
          const token = localStorage.getItem("token");
          const headers = { 'Content-Type': 'application/json', ...(opt.headers || {}) };
          if (token) headers['Authorization'] = 'Bearer ' + token;
          const res = await fetch(url, { headers, ...opt });
          if (res.status === 401) { localStorage.removeItem("token"); window.location.href = "/login"; throw new Error('登录已过期，请重新登录'); }
          const p = await res.json();
          if (!res.ok || p.code !== 0) throw new Error(p.message || '请求失败');
          return p;
        },
        statusBadgeClass(s) { s = String(s || ''); if (s === 'success' || s === 'passed') return 'badge-green'; if (s === 'failed' || s === 'rejected') return 'badge-red'; if (s === 'pending' || s === 'processing') return 'badge-gold'; if (s === 'rebuild_required') return 'badge-warm'; return 'badge-neutral' },
        statusLabel(s) { s = String(s || ''); const m = { pending: '待处理', processing: '处理中', success: '成功', failed: '失败', rebuild_required: '需重建', passed: '已通过', rejected: '已驳回' }; return m[s] || s },
        entityTypeLabel(s) { s = String(s || ''); const m = { person: '👤 人名', work: '📚 作品名', location: '📍 地名', country: '🌍 国家/地区', holiday: '🎉 节日', organization: '🏢 组织机构' }; return m[s] || s },
        questionTypeLabel(s) { s = String(s || ''); const m = { detail: '细节理解', detail_not_true: '细节判断', inference: '推理判断', true_false: '正误判断', word_meaning: '词义猜测', main_idea: '主旨大意' }; return m[s] || s },
        entityTypeBadgeClass(s) { const m = { person: 'badge-warm', work: 'badge-blue', location: 'badge-green', country: 'badge-gold', holiday: 'badge-red', organization: 'badge-neutral' }; return m[s] || 'badge-neutral' },
        entityGroups(entities) { const groups = {}; (entities || []).forEach(e => { const t = e.entity_type || 'unknown'; if (!groups[t]) groups[t] = { type: t, items: [] }; groups[t].items.push(e) }); return Object.values(groups) },
        copyRewrittenContent(rw) { const text = rw?.content; if (!text) { this.showToast('暂无仿写内容', 'error'); return } if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(text).then(() => this.showToast('已复制仿写内容')).catch(() => this.showToast('复制失败', 'error')) } else { const ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.left = '-9999px'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); this.showToast('已复制仿写内容') } catch { this.showToast('复制失败', 'error') } finally { document.body.removeChild(ta) } } },
        formatDate(v) { if (!v) return '--'; const d = new Date(v); if (isNaN(d.getTime())) return v; const p = n => (n + '').padStart(2, '0'); return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}` },
        stopAudio() { if (this._currentAudio) { this._currentAudio.pause(); this._currentAudio = null } this.subtitleActive = false; this.subtitleWords = []; this.subtitleCurrentIndex = -1; this.subtitleProgress = 0; this.subtitleSentenceLabel = '' },
        async playAudio(audioObj) {
          const url = audioObj?.audio_url || audioObj;
          if (!url || typeof url !== 'string') { this.showToast('无播放地址', 'error'); return }
          if (this._currentAudio) { this._currentAudio.pause(); this._currentAudio = null }
          this.subtitleActive = false; this.subtitleWords = []; this.subtitleCurrentIndex = -1; this.subtitleProgress = 0; this.subtitleSentenceLabel = '';
          try {
            const a = new Audio(url); a.crossOrigin = 'anonymous'; this._currentAudio = a;
            const subData = (audioObj && typeof audioObj === 'object') ? audioObj.subtitle_data : null;
            if (subData && subData.words && subData.words.length > 0) {
              const words = subData.words;
              const totalDuration = words[words.length - 1]?.time_end || 1;
              this.subtitleWords = words;
              this.subtitleActive = true;
              // 计算当前句子标签
              const pi = audioObj?.paragraph_index, si = audioObj?.sentence_index;
              this.subtitleSentenceLabel = (pi != null && si != null) ? `第${pi}段 第${si}句` : '';
              // 二分查找当前词（比全量扫描更快）
              const findWord = (t) => {
                let lo = 0, hi = words.length - 1;
                while (lo <= hi) {
                  const mid = (lo + hi) >>> 1;
                  const w = words[mid];
                  if (t >= (w.time_begin || 0) && t <= (w.time_end || 0)) return mid;
                  if (t < (w.time_begin || 0)) hi = mid - 1; else lo = mid + 1;
                }
                return -1;
              };
              a.addEventListener('timeupdate', () => {
                const t = a.currentTime * 1000;
                this.subtitleCurrentIndex = findWord(t);
                this.subtitleProgress = Math.min(100, (t / totalDuration) * 100);
              });
              a.addEventListener('ended', () => { this.stopAudio() });
            }
            await a.play();
          } catch { this.showToast('播放失败，可点击 ↗ 在新窗口打开', 'error') }
        },
      };
    }
  </script>
</body>

</html>