<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="拾文：把公众号公开文章整理成自己的资料库">
  <meta name="theme-color" content="#075f5a">
  <title>拾文 · 公众号文章归档</title>
  <link rel="icon" href="/assets/brand/favicon.ico" sizes="any">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/brand/favicon-32.png">
  <link rel="apple-touch-icon" href="/assets/brand/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="stylesheet" href="/app.css">
</head>
<body>
  <div class="shell">
    <aside class="rail">
      <a class="brand" href="/" aria-label="拾文首页">
        <span class="brand-mark" aria-hidden="true"><img src="/assets/brand/app-icon-192.png" alt=""></span>
        <span><strong>拾文</strong><small>SHIWEN ARCHIVE</small></span>
      </a>

      <section class="intake" aria-labelledby="intake-title">
        <p class="eyebrow">文章收件口</p>
        <h1 id="intake-title">把读过的好文章，<br>留在自己手里。</h1>
        <form id="import-form">
          <label for="urls">公众号文章链接</label>
          <textarea id="urls" name="urls" rows="6" placeholder="粘贴 mp.weixin.qq.com 文章链接&#10;支持每行一个，最多 50 个" required></textarea>
          <button class="primary" type="submit">
            <span>开始收录</span><span aria-hidden="true">↘</span>
          </button>
          <p class="form-note">自动提取正文、封面、发布时间和公开精选留言。</p>
        </form>
        <div id="import-message" class="message" role="status" aria-live="polite"></div>
      </section>

      <footer class="rail-footer">
        <span class="pulse" aria-hidden="true"></span>
        <span>本地运行 · 数据留在你的设备</span>
      </footer>
    </aside>

    <main class="workspace">
      <header class="topbar">
        <div>
          <p class="eyebrow">我的资料库</p>
          <h2>今日剪报</h2>
        </div>
        <div class="top-actions">
          <a class="export-link" href="/api/export.json" download>导出全部 <span aria-hidden="true">↓</span></a>
          <button class="account-button" id="open-account" type="button"><span id="account-name">账户</span> ···</button>
        </div>
      </header>

      <section class="ledger" aria-label="资料库统计">
        <div><strong id="stat-ready">0</strong><span>已归档</span></div>
        <div><strong id="stat-queued">0</strong><span>处理中</span></div>
        <div><strong id="stat-comments">—</strong><span>公开留言随文保存</span></div>
        <div class="word-stat"><strong id="stat-words">0</strong><span>字资料</span></div>
      </section>

      <section class="library">
        <div class="toolbar">
          <label class="search">
            <span class="sr-only">搜索资料库</span>
            <span aria-hidden="true">⌕</span>
            <input id="search" type="search" placeholder="搜索标题、公众号或正文">
          </label>
          <div class="filters" role="group" aria-label="筛选文章状态">
            <button class="filter active" data-status="">全部</button>
            <button class="filter" data-status="ready">已归档</button>
            <button class="filter" data-status="failed">需处理</button>
          </div>
        </div>

        <div id="article-list" class="article-list" aria-live="polite"></div>
        <div id="empty" class="empty" hidden>
          <div class="empty-mascot" aria-hidden="true"><img src="/assets/brand/logo-mark.png" alt=""><span>＋</span></div>
          <h3>资料库还没有文章</h3>
          <p>从左侧粘贴一篇公开文章链接，第一张资料卡就会出现在这里。</p>
        </div>
      </section>
    </main>
  </div>

  <dialog id="reader">
    <div class="reader-shell">
      <header class="reader-bar">
        <button class="icon-button" id="close-reader" aria-label="关闭阅读器">×</button>
        <div class="reader-view-switch" role="group" aria-label="预览方式">
          <button id="reader-mode" class="active" type="button">阅读模式</button>
          <button id="snapshot-mode" type="button">原文快照</button>
        </div>
        <div class="reader-actions">
          <a id="source-link" target="_blank" rel="noopener noreferrer">打开原文 ↗</a>
          <a id="markdown-link" download>导出 Markdown ↓</a>
        </div>
      </header>
      <article class="reader-content">
        <p class="reader-account" id="reader-account"></p>
        <h2 id="reader-title"></h2>
        <p class="reader-meta" id="reader-meta"></p>
        <div class="article-body" id="reader-body"></div>
        <section class="comments" id="comments-section">
          <div class="comments-heading">
            <p class="eyebrow">公开精选留言</p>
            <span id="comment-count"></span>
          </div>
          <div id="comments-list"></div>
        </section>
      </article>
      <section class="snapshot-view" id="snapshot-view" hidden>
        <p id="snapshot-note"></p>
        <img id="snapshot-image" alt="原文页面归档快照">
      </section>
    </div>
  </dialog>

  <dialog id="account-dialog" class="account-dialog">
    <div class="account-panel">
      <header><div><p class="eyebrow">我的账户</p><h2 id="account-email"></h2></div><button class="icon-button" id="close-account" aria-label="关闭">×</button></header>
      <section>
        <h3>API Token</h3>
        <p class="account-note">供自动化脚本使用。令牌明文只会显示一次。</p>
        <form id="token-form" class="token-form"><input id="token-name" maxlength="80" placeholder="例如：快捷指令" required><button type="submit">创建</button></form>
        <div id="token-secret" class="token-secret" hidden></div>
        <div id="token-list" class="token-list"></div>
      </section>
      <footer><button id="bind-google" type="button" hidden>绑定 Google</button><button id="bind-github" type="button" hidden>绑定 GitHub</button><button id="logout" class="danger" type="button">退出登录</button></footer>
    </div>
  </dialog>

  <template id="article-template">
    <article class="article-card">
      <button class="card-open">
        <span class="cover-wrap"><img class="cover" alt="" loading="lazy"><span class="cover-fallback">文</span></span>
        <span class="card-copy">
          <span class="card-topline"><span class="account"></span><span class="status-pill"></span></span>
          <strong class="title"></strong>
          <span class="summary"></span>
          <span class="card-meta"><span class="date"></span><span class="count"></span></span>
        </span>
      </button>
      <div class="card-menu">
        <button class="menu-trigger" aria-label="文章操作">•••</button>
        <div class="menu-popover" hidden>
          <button data-action="refresh">重新抓取</button>
          <button data-action="delete" class="danger">删除</button>
        </div>
      </div>
    </article>
  </template>

  <script src="/app.js" defer></script>
</body>
</html>
