paperdepot 0.1.1 → 0.1.2

package/lib/client.js

@@ -41,6 +41,41 @@ window.__ModuleLoader__.load({
     const SP = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }
     const R = { sm: 6, md: 10, lg: 14 }
 
+    // 分类语义色：四类受控标签固定色，概念页单独一色。
+    // 与 DOMAIN_COLORS（按领域名轮转的识别色）分工：分类色用于 chip / 标签，领域色用于列表里的领域点。
+    const CAT_COLOR = { 领域: '#6ea8fe', 方法: '#4ec9a5', 应用: '#e6b450', 仪器: '#c792ea', 状态: '#8b90a0' }
+    const CONCEPT_COLOR = '#ff8fab'
+    const DOMAIN_COLORS = ['#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#38bdf8', '#fb923c', '#4ade80', '#e879f9', '#22d3ee', '#f87171', '#a3e635', '#f472b6']
+
+    function hexA(hex, a) {
+      const m = /^#?([0-9a-f]{6})$/i.exec(String(hex || ''))
+      if (!m) return hex
+      const n = parseInt(m[1], 16)
+      return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`
+    }
+
+    function tagCategory(tag) {
+      const s = String(tag || '')
+      const i = s.indexOf('/')
+      if (i > 0) return s.slice(0, i)
+      const j = s.indexOf('-')
+      return j > 0 ? s.slice(0, j) : ''
+    }
+
+    function tagColor(tag) {
+      return CAT_COLOR[tagCategory(tag)] || T.text3
+    }
+
+    function domainOfPaper(p) {
+      const t = (p.tags || []).find((x) => x.startsWith('领域/'))
+      return t ? t.slice(3) : ''
+    }
+
+    function domainColor(domain, domains) {
+      const i = domains.indexOf(domain)
+      return DOMAIN_COLORS[(i < 0 ? 0 : i) % DOMAIN_COLORS.length]
+    }
+
     const fmt = (n) => (typeof n === 'number' ? n.toLocaleString('zh-CN') : '—')
     const api = (p) => fetch('/paperdepot/api' + p, { credentials: 'same-origin' })
 
@@ -126,7 +161,7 @@ window.__ModuleLoader__.load({
             { key: x.key, style: { display: 'flex', alignItems: 'center', gap: 10, fontSize: FS.caption } },
             h('div', { style: { width: 132, textAlign: 'right', color: muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: '0 0 auto' }, title: x.key }, x.label),
             h('div', { style: { flex: '1 1 auto', height: 10, background: 'rgba(127,127,127,0.10)', borderRadius: 999, overflow: 'hidden' } },
-              h('div', { style: { width: `${Math.round((x.value / max) * 100)}%`, height: '100%', background: color, borderRadius: 999 } })),
+              h('div', { style: { width: `${Math.round((x.value / max) * 100)}%`, height: '100%', background: x.color || color, borderRadius: 999 } })),
             h('div', { style: { width: 44, color: faint, flex: '0 0 auto', textAlign: 'right' } }, x.value),
           ),
         ),
@@ -149,6 +184,371 @@ window.__ModuleLoader__.load({
       return h('div', { style: { padding: '28px 16px', textAlign: 'center', color: faint, fontSize: FS.body, border: `1px dashed ${line}`, borderRadius: R.lg } }, children)
     }
 
+    // ---------------- 条目排版（论文 index.md / 概念页共用，无外部依赖） ----------------
+    // 面板里直接塞 <pre> 会把 YAML、导航块、表格原文全部倒出来；这里做一层轻量渲染：
+    // 去 frontmatter / 导航注释 / 由面板另行呈现的尾部小节，再按标题、列表、表格、引用排版。
+
+    const MD_FRONTMATTER = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/
+    const MD_HIDDEN_SECTIONS = ['标签', '相关文件', '全文', '原始文件', '所属概念', '分类', '相关论文']
+    const MD_EMOJI_HEAD = /^[^\p{L}\p{N}\u4e00-\u9fff]+/u
+    const MD_BLOCK_START = /^(#{1,6}\s|>\s?|\s*(?:[-*+]|\d+\.)\s+|\||!\[)/
+
+    const LATEX_MAP = [
+      [/\\times/g, '×'], [/\\cdot/g, '·'], [/\\pm/g, '±'], [/\\approx/g, '≈'], [/\\sim/g, '~'],
+      [/\\leq?/g, '≤'], [/\\geq?/g, '≥'], [/\\neq?/g, '≠'], [/\\to/g, '→'], [/\\infty/g, '∞'],
+      [/\\theta/g, 'θ'], [/\\phi/g, 'φ'], [/\\varphi/g, 'φ'], [/\\alpha/g, 'α'], [/\\beta/g, 'β'],
+      [/\\gamma/g, 'γ'], [/\\delta/g, 'δ'], [/\\Delta/g, 'Δ'], [/\\lambda/g, 'λ'], [/\\mu/g, 'μ'],
+      [/\\sigma/g, 'σ'], [/\\Sigma/g, 'Σ'], [/\\omega/g, 'ω'], [/\\Omega/g, 'Ω'], [/\\tau/g, 'τ'],
+      [/\\rho/g, 'ρ'], [/\\nu/g, 'ν'], [/\\epsilon/g, 'ε'], [/\\psi/g, 'ψ'], [/\\circ/g, '°'],
+      [/\\tan/g, 'tan'], [/\\log/g, 'log'], [/\\exp/g, 'exp'], [/\\sin/g, 'sin'], [/\\cos/g, 'cos'],
+      [/\\mathrm\{([^}]*)\}/g, '$1'], [/\\text\{([^}]*)\}/g, '$1'],
+      [/\\left[([|.]/g, '$1'], [/\\right[)\]|.]/g, '$1'],
+      [/\\[,;: ]/g, ' '], [/\\!/g, ''], [/\\%/g, '%'], [/\\_/g, '_'], [/\\/g, ''],
+    ]
+
+    const LATEX_SUP = { 0: '⁰', 1: '¹', 2: '²', 3: '³', 4: '⁴', 5: '⁵', 6: '⁶', 7: '⁷', 8: '⁸', 9: '⁹', '-': '⁻', '+': '⁺' }
+    const LATEX_SUB = { 0: '₀', 1: '₁', 2: '₂', 3: '₃', 4: '₄', 5: '₅', 6: '₆', 7: '₇', 8: '₈', 9: '₉', '-': '₋' }
+    const mapsTo = (m) => [...m].map((x) => LATEX_SUP[x] || x).join('')
+    const mapsToSub = (m) => [...m].map((x) => LATEX_SUB[x] || x).join('')
+
+    // 正文里也常出现未包 $ 的 10^{-6}、s^{-1}，顺手换成上/下标，避免花括号漏出来
+    function prettyPlain(s) {
+      return String(s || '')
+        .replace(/\^\{([-+0-9]+)\}/g, (m, g) => mapsTo(g))
+        .replace(/\^(-?[0-9]+)/g, (m, g) => mapsTo(g))
+        .replace(/_\{([0-9]+)\}/g, (m, g) => mapsToSub(g))
+    }
+
+    function prettyMath(s) {
+      let out = String(s || '')
+      for (const [re, rep] of LATEX_MAP) out = out.replace(re, rep)
+      out = out
+        .replace(/\^\{([-+0-9]+)\}/g, (m, g) => mapsTo(g))
+        .replace(/\^(-?[0-9]+)/g, (m, g) => mapsTo(g))
+        .replace(/_\{([0-9]+)\}/g, (m, g) => mapsToSub(g))
+        .replace(/_([0-9]+)/g, (m, g) => mapsToSub(g))
+        .replace(/[{}]/g, '')
+        .replace(/([µμ])\s+(?=[a-zA-Z])/g, '$1')
+        .replace(/[ \t]+/g, ' ')
+        .trim()
+      return out
+    }
+
+    function parsePaperFrontmatter(md) {
+      const m = MD_FRONTMATTER.exec(String(md || ''))
+      const block = m ? m[1] : ''
+      const scalar = (k) => {
+        const r = new RegExp('^' + k + ':\\s*(.+?)\\s*$', 'm').exec(block)
+        return r ? r[1].trim().replace(/^["']|["']$/g, '') : ''
+      }
+      const list = (k) => {
+        const r = new RegExp('^' + k + ':\\s*\\n((?:[ \\t]*-[^\\n]*\\n?)+)', 'm').exec(block)
+        if (!r) return []
+        return r[1]
+          .split(/\r?\n/)
+          .map((x) => x.trim().replace(/^-\s*/, '').replace(/^["']|["']$/g, ''))
+          .filter(Boolean)
+      }
+      const fm = {}
+      for (const k of ['title', 'year', 'journal', 'doi', 'arxiv', 'pages', 'figures', 'status', 'citekey', 'updated']) fm[k] = scalar(k)
+      fm.tags = list('tags')
+      fm.aliases = list('aliases')
+      return fm
+    }
+
+    function stripEntryChrome(md) {
+      let s = String(md || '')
+      s = s.replace(/<!--\s*[\w-]+:nav:start\s*-->[\s\S]*?<!--\s*[\w-]+:nav:end\s*-->/g, '')
+      s = s.replace(/<!--[\s\S]*?-->/g, '')
+      s = s.replace(MD_FRONTMATTER, '')
+      const out = []
+      let skip = false
+      for (const line of s.split(/\r?\n/)) {
+        const m = /^##\s+(.+?)\s*$/.exec(line)
+        if (m) skip = MD_HIDDEN_SECTIONS.some((n) => m[1].includes(n))
+        if (!skip) out.push(line)
+      }
+      return out.join('\n')
+    }
+
+    function splitTableRow(line) {
+      return line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|').map((c) => c.trim())
+    }
+
+    function renderInline(text, keyBase, opts) {
+      const s = String(text == null ? '' : text)
+      const re = /(\[\[[^\]\n]+\]\]|\*\*[^*\n]+\*\*|`[^`\n]+`|\$[^$\n]+\$|\[[^\]\n]+\]\([^)\n]+\)|\*[^*\n]+\*)/g
+      const out = []
+      let last = 0
+      let n = 0
+      let m
+      while ((m = re.exec(s))) {
+        if (m.index > last) out.push(prettyPlain(s.slice(last, m.index)))
+        const tok = m[0]
+        const key = keyBase + '-' + n++
+        if (tok.startsWith('[[')) {
+          const inner = tok.slice(2, -2)
+          const cut = inner.indexOf('|')
+          const target = (cut === -1 ? inner : inner.slice(0, cut)).trim()
+          const alias = (cut === -1 ? inner : inner.slice(cut + 1)).trim()
+          const open = opts && opts.onOpenPaper && /^1-Papers\//.test(target)
+          if (target.startsWith('2-Concepts/')) {
+            out.push(h(ConceptChip, { key, name: alias || target.slice('2-Concepts/'.length) }))
+          } else if (target.startsWith('3-Taxonomy/')) {
+            out.push(h(TaxChip, { key, id: (target.split('/')[1] || '').replace(/\.md$/, '') }))
+          } else {
+            out.push(
+              h('span', {
+                key,
+                title: target,
+                onClick: open ? () => opts.onOpenPaper(target.replace(/^1-Papers\//, '').replace(/\/index.*$/, '')) : undefined,
+                style: { color: T.text2, borderBottom: `1px dotted ${T.b2}`, cursor: open ? 'pointer' : 'default' },
+              }, alias || target),
+            )
+          }
+        } else if (tok.startsWith('**')) {
+          out.push(h('strong', { key, style: { fontWeight: 600, color: T.text } }, tok.slice(2, -2)))
+        } else if (tok.startsWith('`')) {
+          out.push(h('code', { key, style: { fontFamily: mono, fontSize: '0.92em', background: 'rgba(255,255,255,0.06)', padding: '1px 5px', borderRadius: 4 } }, tok.slice(1, -1)))
+        } else if (tok.startsWith('$')) {
+          out.push(h('span', { key, style: { fontFamily: mono, fontSize: '0.92em', color: '#c8c9d4' } }, prettyMath(tok.slice(1, -1))))
+        } else if (tok.startsWith('[')) {
+          const mm = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(tok)
+          out.push(h('a', { key, href: mm[2], target: '_blank', rel: 'noreferrer', style: { color: '#8fa3ff', textDecoration: 'none' } }, mm[1]))
+        } else {
+          out.push(h('em', { key, style: { fontStyle: 'normal', color: T.text2 } }, tok.slice(1, -1)))
+        }
+        last = m.index + tok.length
+      }
+      if (last < s.length) out.push(prettyPlain(s.slice(last)))
+      return out.length ? out : ['']
+    }
+
+    function mdTable(header, rows, keyBase) {
+      const cell = (text, i) => {
+        const isNum = /^[\d.,%×+\-–—\s/]+$/.test(text) && /\d/.test(text)
+        return h('td', {
+          key: keyBase + '-c' + i,
+          style: {
+            padding: '8px 10px', borderBottom: '1px solid rgba(255,255,255,0.05)', lineHeight: 1.6, verticalAlign: 'top',
+            fontFamily: isNum ? mono : 'inherit', fontSize: isNum ? 12.5 : 13,
+            fontVariantNumeric: isNum ? 'tabular-nums' : undefined, color: isNum ? T.text2 : 'inherit',
+          },
+        }, renderInline(text, keyBase + '-c' + i))
+      }
+      return h('table', { key: keyBase, style: { width: '100%', borderCollapse: 'collapse', margin: '10px 0 18px', fontSize: 13 } },
+        h('thead', null, h('tr', null, header.map((c, i) => h('th', {
+          key: keyBase + '-h' + i,
+          style: { textAlign: 'left', fontSize: 12, fontWeight: 600, color: T.text3, padding: '7px 10px', borderBottom: '1px solid rgba(255,255,255,0.1)', whiteSpace: 'nowrap' },
+        }, renderInline(c, keyBase + '-h' + i))))),
+        h('tbody', null, rows.map((cells, r) => h('tr', { key: keyBase + '-r' + r }, cells.map(cell)))))
+    }
+
+    function mdList(items, ordered, keyBase) {
+      return h('div', { key: keyBase, style: { margin: '0 0 14px' } },
+        items.map((it, i) => h('div', { key: keyBase + '-' + i, style: { display: 'flex', gap: 8, marginBottom: 5 } },
+          h('span', {
+            style: {
+              flex: '0 0 auto', minWidth: ordered ? 17 : 10, color: T.caption, lineHeight: 1.8,
+              fontFamily: ordered ? mono : 'inherit', fontSize: ordered ? 12 : 13,
+            },
+          }, ordered ? (i + 1) + '.' : '–'),
+          h('span', { style: { flex: '1 1 auto', lineHeight: 1.8 } }, renderInline(it, keyBase + '-' + i)))))
+    }
+
+    function mdLede(text, keyBase) {
+      const clean = String(text || '').replace(/^(\*\*)?一句话(\*\*)?\s*[：:]\s*/, '')
+      return h('div', {
+        key: keyBase,
+        style: { margin: '0 0 26px', padding: '2px 0 2px 18px', borderLeft: `2px solid ${ACCENT}`, fontSize: 16.5, lineHeight: 1.72, color: T.text },
+      }, renderInline(clean, keyBase, null))
+    }
+
+    function mdQuote(text, keyBase) {
+      const clean = String(text || '').replace(/^(\*\*)?一句话(\*\*)?\s*[：:]\s*/, '')
+      return h('div', {
+        key: keyBase,
+        style: { margin: '0 0 14px', padding: '2px 0 2px 14px', borderLeft: `2px solid ${T.b2}`, color: T.text2, lineHeight: 1.8 },
+      }, renderInline(clean, keyBase, null))
+    }
+
+    function Markdown({ source, ledeHeading, ledeFirstQuote, onOpenPaper }) {
+      const src = stripEntryChrome(source)
+      const lines = src.split(/\r?\n/)
+      const blocks = []
+      const opts = { onOpenPaper }
+      let key = 0
+      let ledeDone = false
+      let sawSection = false
+      const k = () => 'md' + key++
+      let i = 0
+      while (i < lines.length) {
+        const line = lines[i]
+        if (!line.trim()) {
+          i += 1
+          continue
+        }
+        if (line.trim().startsWith('|') && i + 1 < lines.length && /^\|?[\s:|-]+\|[\s:|-]*$/.test(lines[i + 1].trim())) {
+          // 条目开头的基础信息表（页数/图数/作者…）与面板的元数据条重复，跳过
+          if (!sawSection) {
+            i += 2
+            while (i < lines.length && lines[i].trim().startsWith('|')) i += 1
+            continue
+          }
+          const header = splitTableRow(line)
+          const rows = []
+          i += 2
+          while (i < lines.length && lines[i].trim().startsWith('|')) {
+            rows.push(splitTableRow(lines[i]))
+            i += 1
+          }
+          blocks.push(mdTable(header, rows, k()))
+          continue
+        }
+        const hm = /^(#{1,6})\s+(.+?)\s*$/.exec(line)
+        if (hm) {
+          const level = hm[1].length
+          const text = hm[2].replace(MD_EMOJI_HEAD, '').trim()
+          i += 1
+          if (level === 1) continue
+          if (level === 2) sawSection = true
+          if (level === 2 && ledeHeading && text.includes(ledeHeading) && !ledeDone) {
+            const quote = []
+            while (i < lines.length && (!lines[i].trim() || /^>\s?/.test(lines[i]))) {
+              if (lines[i].trim()) quote.push(lines[i].replace(/^>\s?/, ''))
+              i += 1
+            }
+            blocks.push(mdLede(quote.join(' '), k()))
+            ledeDone = true
+            continue
+          }
+          if (level === 2) {
+            blocks.push(h('div', {
+              key: k(),
+              style: { margin: '30px 0 10px', paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.06)', fontSize: FS.sub, fontWeight: 600, color: T.text },
+            }, text))
+          } else {
+            blocks.push(h('div', { key: k(), style: { margin: '20px 0 6px', fontSize: 13.5, fontWeight: 600, color: T.text2 } }, text))
+          }
+          continue
+        }
+        if (/^>\s?/.test(line)) {
+          const quote = []
+          while (i < lines.length && /^>\s?/.test(lines[i])) {
+            quote.push(lines[i].replace(/^>\s?/, ''))
+            i += 1
+          }
+          if (ledeFirstQuote && !ledeDone) {
+            blocks.push(mdLede(quote.join(' '), k()))
+            ledeDone = true
+          } else {
+            blocks.push(mdQuote(quote.join(' '), k()))
+          }
+          continue
+        }
+        if (/^\s*(?:[-*+]|\d+\.)\s+/.test(line)) {
+          const ordered = /^\s*\d+\./.test(line)
+          const items = []
+          while (i < lines.length && /^\s*(?:[-*+]|\d+\.)\s+/.test(lines[i])) {
+            items.push(lines[i].replace(/^\s*(?:[-*+]|\d+\.)\s+/, ''))
+            i += 1
+            while (i < lines.length && /^\s{2,}\S/.test(lines[i]) && !/^\s*(?:[-*+]|\d+\.)\s+/.test(lines[i])) {
+              items[items.length - 1] += ' ' + lines[i].trim()
+              i += 1
+            }
+          }
+          blocks.push(mdList(items, ordered, k()))
+          continue
+        }
+        const img = /^!\[([^\]]*)\]\(([^)]+)\)\s*$/.exec(line.trim())
+        if (img) {
+          blocks.push(h('div', { key: k(), style: { margin: '6px 0', fontSize: 12.5, color: T.caption } }, img[1] ? '图：' + img[1] : '［图］'))
+          i += 1
+          continue
+        }
+        if (/^\s*([-*_])\1{2,}\s*$/.test(line)) {
+          blocks.push(h('div', { key: k(), style: { height: 1, background: 'rgba(255,255,255,0.06)', margin: '22px 0' } }))
+          i += 1
+          continue
+        }
+        const para = [line]
+        i += 1
+        while (i < lines.length && lines[i].trim() && !MD_BLOCK_START.test(lines[i])) {
+          para.push(lines[i])
+          i += 1
+        }
+        blocks.push(h('p', { key: k(), style: { margin: '0 0 12px', lineHeight: 1.85 } }, renderInline(para.join(' '), k(), opts)))
+      }
+      return h('div', { style: { color: '#dcdce2' } }, blocks)
+    }
+
+    // ---------------- 阅读区共用小组件 ----------------
+
+    function MetaStrip({ items }) {
+      const shown = (items || []).filter((x) => x && x.value)
+      if (!shown.length) return null
+      return h('div', { style: { marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: '14px 30px' } },
+        shown.map((x) => h('div', { key: x.label, style: { display: 'flex', flexDirection: 'column', gap: 3 } },
+          h('div', { style: { fontSize: 11.5, color: T.caption } }, x.label),
+          h('div', { style: { fontFamily: mono, fontSize: 12.5, color: T.text2, fontVariantNumeric: 'tabular-nums' } }, x.value))))
+    }
+
+    function ConceptChip({ name, title }) {
+      return h('span', {
+        title: title || '概念 · ' + name,
+        style: { display: 'inline-flex', alignItems: 'center', gap: 6, height: 25, padding: '0 9px', borderRadius: 6, background: hexA(CONCEPT_COLOR, 0.13), color: CONCEPT_COLOR, fontSize: 12, whiteSpace: 'nowrap' },
+      }, h('span', { style: { width: 5, height: 5, borderRadius: '50%', background: CONCEPT_COLOR } }), name)
+    }
+
+    function TaxChip({ id }) {
+      const color = tagColor(id)
+      const label = String(id).replace(/^([^/-]+)[/-]/, '$1 · ')
+      return h('span', {
+        title: String(id),
+        style: { display: 'inline-flex', alignItems: 'center', gap: 6, height: 25, padding: '0 9px', borderRadius: 6, background: hexA(color, 0.13), color, fontSize: 12, whiteSpace: 'nowrap' },
+      }, h('span', { style: { width: 5, height: 5, borderRadius: '50%', background: color } }), label)
+    }
+
+    function RailHead({ title, count }) {
+      return h('div', { style: { padding: '16px 16px 10px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' } },
+        h('div', { style: { fontSize: 13, fontWeight: 600, color: T.text2 } }, title),
+        h('span', { style: { fontFamily: mono, fontSize: 12, color: T.caption, fontVariantNumeric: 'tabular-nums' } }, count))
+    }
+
+    function RailSearch({ value, onChange, placeholder }) {
+      return h('div', {
+        style: { margin: '0 12px 8px', height: 36, display: 'flex', alignItems: 'center', gap: 8, padding: '0 11px', background: T.bg2, border: '1px solid transparent', borderRadius: 8 },
+      },
+        h('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none', style: { flex: '0 0 auto', opacity: 0.55 } },
+          h('circle', { cx: 7, cy: 7, r: 4.6, stroke: 'currentColor', strokeWidth: 1.5 }),
+          h('path', { d: 'M10.5 10.5 14 14', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round' })),
+        h('input', {
+          value,
+          onChange: (e) => onChange(e.target.value),
+          placeholder,
+          style: { flex: '1 1 auto', minWidth: 0, border: 'none', background: 'transparent', color: T.text, fontSize: 13.5, fontFamily: 'inherit', caretColor: ACCENT },
+        }))
+    }
+
+    function ReaderEmpty({ title, sub }) {
+      return h('div', { style: { height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 24 } },
+        h('div', { style: { fontSize: 14.5, fontWeight: 600, color: T.text2 } }, title),
+        sub ? h('div', { style: { fontSize: 12.5, color: T.caption, textAlign: 'center' } }, sub) : null)
+    }
+
+    function ReaderPane({ children }) {
+      return h('div', { style: { minHeight: 0, overflowY: 'auto' } },
+        h('div', { style: { maxWidth: 760, padding: '30px 32px 72px', boxSizing: 'border-box' } }, children))
+    }
+
+    function DocActions({ children }) {
+      return h('div', { style: { flex: '0 0 auto', display: 'flex', gap: 6, marginTop: 2 } }, children)
+    }
+
+    function H2({ children }) {
+      return h('div', { style: { margin: '30px 0 10px', paddingTop: 14, borderTop: '1px solid rgba(255,255,255,0.06)', fontSize: FS.sub, fontWeight: 600, color: T.text } }, children)
+    }
+
     function SetupCard({ setup, onSaved }) {
       const [key, setKey] = useState('')
       const [vault, setVault] = useState(setup.vault || '')
@@ -519,14 +919,14 @@ window.__ModuleLoader__.load({
     }
 
     function Overview({ d, onOpen }) {
-      const tagItems = (d.tags || []).slice(0, 14).map((t) => ({ key: t.tag, label: t.tag, value: t.count }))
+      const tagItems = (d.tags || []).slice(0, 14).map((t) => ({ key: t.tag, label: t.tag, value: t.count, color: tagColor(t.tag) }))
       const yearItems = (d.years || []).slice(-14).map((y) => ({ key: String(y.year), label: String(y.year), value: y.count }))
       return h(
         'div',
         null,
         h('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: SP.md } },
           h(Card, { label: '论文条目', value: fmt(d.papers) }),
-          h(Card, { label: '概念页', value: fmt(d.concepts) }),
+          h(Card, { label: '概念页', value: fmt(d.concepts), accent: d.concepts ? CONCEPT_COLOR : undefined }),
           h(Card, { label: '待补元数据', value: fmt(d.pendingMeta), accent: d.pendingMeta ? WARN_TEXT : undefined }),
           h(Card, { label: '待生成摘要', value: fmt(d.pendingSummary), accent: d.pendingSummary ? WARN_TEXT : undefined, sub: d.pendingSummary ? '导入后未跑摘要' : '全部齐全' }),
         ),
@@ -557,15 +957,46 @@ window.__ModuleLoader__.load({
         (d.conceptNames || []).length
           ? h(Section, { title: `概念层（${d.concepts} 页）` },
               h('div', { style: { display: 'flex', gap: SP.sm, flexWrap: 'wrap' } },
-                d.conceptNames.map((n) => h(Chip, { key: n }, n))))
+                d.conceptNames.map((n) => h(ConceptChip, { key: n, name: n }))))
           : null,
       )
     }
 
+    // 批量补摘要进度条：贴在内容区底部，任务结束后保留可收起
+    function BatchBar({ job, onCancel, onClose }) {
+      const failed = (job.failed || []).length
+      const ok = Math.max(0, (job.done || 0) - failed)
+      const label = job.state === 'running'
+        ? `批量补摘要：${job.done || 0}/${job.total || 0}${failed ? `，失败 ${failed}` : ''}`
+        : `批量补摘要结束：成功 ${ok}/${job.total || 0}${failed ? `，失败 ${failed}` : ''}${job.state === 'cancelled' ? '（已停止，再点继续）' : ''}`
+      return h(
+        'div',
+        {
+          style: {
+            position: 'absolute', left: 20, right: 20, bottom: 24, zIndex: 30,
+            background: T.bg1, border: `1px solid ${line}`, borderRadius: R.md,
+            boxShadow: '0 10px 30px rgba(0,0,0,0.28)', padding: '10px 12px',
+            display: 'flex', flexDirection: 'column', gap: 6,
+          },
+        },
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: SP.md } },
+          h('div', { style: { flex: '1 1 auto', fontSize: FS.body, fontWeight: 600 } }, label),
+          job.state === 'running'
+            ? h(Btn, { small: true, ghost: true, onClick: onCancel, title: '跑完当前这篇后停下，下次再点继续' }, '停止')
+            : h(Btn, { small: true, ghost: true, onClick: onClose }, '收起')),
+        h('div', {
+          style: {
+            fontFamily: mono, fontSize: 11.5, color: muted, lineHeight: 1.5,
+            maxHeight: 88, overflowY: 'auto', whiteSpace: 'pre-wrap',
+          },
+        }, (job.lines || []).slice(-5).join('\n')))
+    }
+
     function Papers({ papers, loading, onSelect, selected, selectedData, onSummarize, running, vaultName }) {
       const [q, setQ] = useState('')
       const [domain, setDomain] = useState('')
       const [onlyPending, setOnlyPending] = useState(false)
+      const [hovered, setHovered] = useState('')
       const domains = [...new Set((papers || []).flatMap((p) => p.tags.filter((t) => t.startsWith('领域/')).map((t) => t.slice(3))))].sort((a, b) => a.localeCompare(b, 'zh'))
       const items = (papers || []).filter((p) => {
         if (onlyPending && !p.pending) return false
@@ -573,93 +1004,85 @@ window.__ModuleLoader__.load({
         if (!q) return true
         return `${p.title} ${p.year} ${p.journal} ${p.tags.join(' ')}`.toLowerCase().includes(q.toLowerCase())
       })
-      const rows = items.map((p) =>
-        h(
+      const rows = items.map((p) => {
+        const on = selected === p.dir
+        const dom = domainOfPaper(p)
+        const domColor = domainColor(dom, domains)
+        const meta = p.journal || dom || '—'
+        return h(
           'div',
           {
             key: p.dir,
             onClick: () => onSelect(p.dir),
+            onMouseEnter: () => setHovered(p.dir),
+            onMouseLeave: () => setHovered(''),
             title: p.title,
             style: {
-              padding: '10px 12px',
-              borderRadius: R.md,
-              cursor: 'pointer',
-              background: selected === p.dir ? 'rgba(77,107,254,0.16)' : card,
-              border: `1px solid ${selected === p.dir ? 'rgba(77,107,254,0.45)' : line}`,
+              position: 'relative', display: 'grid', gridTemplateColumns: '38px 1fr', gap: 10,
+              padding: '10px 10px 11px', borderRadius: 8, cursor: 'pointer',
+              background: on ? 'rgba(77,107,254,0.12)' : hovered === p.dir ? hoverBg : 'transparent',
             },
           },
-          h(
-            'div',
-            { style: { display: 'flex', gap: SP.sm, alignItems: 'baseline' } },
-            h('span', { style: { color: faint, flex: '0 0 auto', fontSize: FS.caption, fontVariantNumeric: 'tabular-nums' } }, p.year || '—'),
-            h('span', { style: { flex: '1 1 auto', fontSize: FS.body, fontWeight: 550, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, p.title),
-            p.pending ? h('span', { style: { color: WARN_TEXT, flex: '0 0 auto', fontSize: FS.caption } }, '待总结') : null,
-          ),
-          h('div', {
-            style: {
-              marginTop: 4, fontSize: FS.caption, color: muted, lineHeight: 1.5,
-              display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
-            },
-          }, (p.summary || '').replace(/^>\s*/, '') || (p.tags || []).slice(0, 5).join(' · ')),
-        ),
-      )
-      const left = h(
-        'div',
-        { style: { borderRight: `1px solid ${line}`, overflowY: 'auto', minHeight: 0, padding: '14px 10px 16px' } },
-        h('input', {
-          value: q,
-          onChange: (e) => setQ(e.target.value),
-          placeholder: '搜索标题 / 年份 / 期刊 / 标签…',
-          style: {
-            width: '100%', boxSizing: 'border-box', height: 34, padding: '0 11px',
-            borderRadius: R.sm, border: `1px solid ${line}`, background: T.bg1,
-            color: 'inherit', fontSize: FS.body, marginBottom: SP.sm, outline: 'none',
-          },
-        }),
-        h(
-          'div',
-          { style: { display: 'flex', gap: SP.sm, alignItems: 'center', marginBottom: SP.sm } },
-          h(
-            'select',
-            {
-              value: domain,
-              onChange: (e) => setDomain(e.target.value),
+          on ? h('div', { style: { position: 'absolute', left: 0, top: 9, bottom: 9, width: 2, borderRadius: 2, background: ACCENT } }) : null,
+          h('div', { style: { fontFamily: mono, fontSize: 12, color: T.text3, paddingTop: 2, fontVariantNumeric: 'tabular-nums' } }, p.year || '—'),
+          h('div', { style: { minWidth: 0 } },
+            h('div', {
               style: {
-                flex: '1 1 auto', minWidth: 0, height: 32, padding: '0 8px',
-                borderRadius: R.sm, border: `1px solid ${line}`, background: card,
-                color: 'inherit', fontSize: FS.caption,
+                fontSize: 13.5, lineHeight: 1.45, fontWeight: 550, display: '-webkit-box',
+                WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
               },
+            }, p.title),
+            h('div', { style: { marginTop: 4, display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, fontSize: 12, color: T.caption } },
+              h('span', { style: { flex: '1 1 auto', display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0 } },
+                h('span', { style: { flex: '0 0 auto', display: 'inline-flex', alignItems: 'center', gap: 5, color: dom ? domColor : T.caption } },
+                  h('span', { style: { width: 5, height: 5, borderRadius: '50%', background: dom ? domColor : 'transparent' } }), dom || '—'),
+                h('span', { style: { flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, p.journal || '')),
+              p.pending
+                ? h('span', { style: { flex: '0 0 auto', color: ORANGE, display: 'inline-flex', alignItems: 'center', gap: 4 } },
+                    h('span', { style: { width: 5, height: 5, borderRadius: '50%', background: 'currentColor' } }), '待总结')
+                : null)))
+      })
+      const left = h(
+        'div',
+        { style: { minHeight: 0, display: 'flex', flexDirection: 'column', background: T.bg1, borderRight: `1px solid ${line}` } },
+        h(RailHead, { title: '论文', count: fmt((papers || []).length) }),
+        h(RailSearch, { value: q, onChange: setQ, placeholder: '搜索标题 / 年份 / 期刊 / 标签' }),
+        h('div', { style: { display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px 10px' } },
+          h('select', {
+            value: domain,
+            onChange: (e) => setDomain(e.target.value),
+            style: {
+              flex: '1 1 auto', minWidth: 0, height: 26, padding: '0 8px', border: 'none',
+              borderRadius: 6, background: T.bg2, color: T.text2, fontSize: 12.5,
             },
-            [h('option', { key: '', value: '' }, '全部领域')].concat(domains.map((d) => h('option', { key: d, value: d }, d))),
-          ),
-          h(
-            'label',
-            { style: { display: 'flex', alignItems: 'center', gap: 4, color: muted, cursor: 'pointer', whiteSpace: 'nowrap', fontSize: FS.caption } },
-            h('input', { type: 'checkbox', checked: onlyPending, onChange: (e) => setOnlyPending(e.target.checked) }),
-            '只看待补',
-          ),
-        ),
-        h('div', { style: { fontSize: FS.caption, color: faint, marginBottom: SP.sm } }, `显示 ${items.length} / ${(papers || []).length} 篇`),
+          }, [h('option', { key: '', value: '' }, '全部领域')].concat(domains.map((d) => h('option', { key: d, value: d }, d)))),
+          h('label', { style: { display: 'flex', alignItems: 'center', gap: 6, color: T.text2, cursor: 'pointer', whiteSpace: 'nowrap', fontSize: 12.5 } },
+            h('input', { type: 'checkbox', checked: onlyPending, onChange: (e) => setOnlyPending(e.target.checked), style: { accentColor: ACCENT, margin: 0 } }),
+            '只看待补')),
+        h('div', { style: { padding: '0 16px 8px', fontSize: 12, color: T.caption, fontVariantNumeric: 'tabular-nums' } }, `显示 ${items.length} / ${(papers || []).length} 篇`),
         loading
-          ? h('div', { style: { color: muted, fontSize: FS.body } }, '加载中…')
-          : h('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } }, rows),
+          ? h('div', { style: { color: muted, fontSize: FS.body, padding: '8px 16px' } }, '加载中…')
+          : h('div', { style: { flex: '1 1 auto', minHeight: 0, overflowY: 'auto', padding: '0 8px 32px' } }, rows),
       )
       const right = h(
         'div',
-        { style: { overflowY: 'auto', minWidth: 0, minHeight: 0, padding: '0 24px 48px' } },
-        selectedData && selectedData.pending
-          ? h(
-              'div',
-              { style: { display: 'flex', alignItems: 'center', gap: SP.md, marginBottom: SP.md, padding: '10px 12px', borderRadius: R.md, background: 'rgba(196,123,30,0.12)', border: '1px solid rgba(196,123,30,0.35)' } },
-              h('span', { style: { fontSize: FS.body, flex: '1 1 auto' } }, '这篇条目还没有摘要与标签'),
-              h(Btn, { primary: true, disabled: running, onClick: () => onSummarize(selected) }, running ? '处理中…' : '生成摘要与标签'),
-            )
-          : null,
+        { style: { minHeight: 0, overflowY: 'auto' } },
         selected && selectedData
-          ? h(PaperPreview, { data: selectedData, vaultName })
-          : h(Empty, null, '从左边选一篇论文，这里显示条目内容'),
+          ? h(ReaderPane, null,
+              selectedData.pending
+                ? h('div', {
+                    style: {
+                      display: 'flex', alignItems: 'center', gap: SP.md, marginBottom: 20,
+                      padding: '10px 14px', borderRadius: 8, background: 'rgba(196,123,30,0.10)', border: '1px solid rgba(196,123,30,0.30)',
+                    },
+                  },
+                    h('span', { style: { fontSize: FS.body, flex: '1 1 auto' } }, '这篇条目还没有摘要与标签'),
+                    h(Btn, { small: true, primary: true, disabled: running, onClick: () => onSummarize(selected) }, running ? '处理中…' : '生成摘要与标签'))
+                : null,
+              h(PaperPreview, { data: selectedData, onOpenPaper: onSelect }))
+          : h(ReaderEmpty, { title: '从左侧选一篇论文', sub: '可搜索、按领域筛选、只看待补；条目内容按摘要排版显示' }),
       )
-      return h('div', { style: { display: 'grid', gridTemplateColumns: '348px 1fr', height: '100%', minHeight: 0 } }, left, right)
+      return h('div', { style: { display: 'grid', gridTemplateColumns: '336px 1fr', height: '100%', minHeight: 0 } }, left, right)
     }
 
     // obsidian:// 只能由宿主侧拉起：桌面版对自定义协议的 window.open 一律 deny
@@ -673,9 +1096,10 @@ window.__ModuleLoader__.load({
       return await r.json()
     }
 
-    function PaperPreview({ data, vaultName }) {
+    function PaperPreview({ data, onOpenPaper }) {
       const [msg, setMsg] = useState('')
       if (!data) return null
+      const fm = parsePaperFrontmatter(data.index)
       const rel = `1-Papers/${data.dir}/index.md`
       const copyPath = () => {
         try {
@@ -697,61 +1121,37 @@ window.__ModuleLoader__.load({
           setMsg('打开失败：' + String(e) + '，已复制条目路径')
         }
       }
-      const readout = [data.year, data.journal, data.doi ? 'doi:' + data.doi : data.arxiv ? 'arXiv:' + data.arxiv : '', data.pages ? `${data.pages} 页` : '', data.figures ? `${data.figures} 图` : '']
-        .filter(Boolean)
+      const meta = [
+        { label: '年份', value: fm.year },
+        { label: '期刊/会议', value: fm.journal },
+        { label: 'DOI', value: fm.doi || (fm.arxiv ? 'arXiv ' + fm.arxiv : '') },
+        { label: '篇幅', value: [fm.pages && fm.pages + ' 页', fm.figures && fm.figures + ' 图'].filter(Boolean).join(' · ') },
+        { label: '引用键', value: fm.citekey },
+      ]
+      const concepts = data.concepts || []
+      const taxonomy = (data.taxonomy || []).slice().sort((a, b) => {
+        const order = ['领域', '方法', '应用', '仪器']
+        return order.indexOf(tagCategory(a)) - order.indexOf(tagCategory(b))
+      })
       return h(
         'div',
         null,
-        h(
-          'div',
-          { style: { display: 'flex', gap: SP.sm, alignItems: 'flex-start', flexWrap: 'wrap' } },
-          h('div', { style: { fontSize: FS.page, fontWeight: 650, lineHeight: 1.35, flex: '1 1 260px', margin: 0 } }, data.title || data.dir),
-          h(Btn, { small: true, onClick: openInObsidian, title: '用 Obsidian 打开这篇笔记' }, '在 Obsidian 打开'),
-          h(Btn, { small: true, ghost: true, onClick: copyPath, title: '复制库内相对路径' }, '复制路径'),
-        ),
+        h('div', { style: { display: 'flex', alignItems: 'flex-start', gap: 16 } },
+          h('div', { style: { flex: '1 1 auto', fontSize: FS.page, lineHeight: 1.4, fontWeight: 650 } }, fm.title || data.dir),
+          h(DocActions, null,
+            h(Btn, { small: true, ghost: true, onClick: copyPath, title: '复制库内相对路径' }, '复制路径'),
+            h(Btn, { small: true, onClick: openInObsidian, title: '用 Obsidian 打开这篇笔记' }, '在 Obsidian 打开'))),
+        h(MetaStrip, { items: meta }),
         msg ? h('div', { style: { fontSize: FS.caption, color: ERROR_TEXT, marginTop: SP.xs } }, msg) : null,
-        h('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 6, fontFamily: mono, fontSize: 12.5, color: faint } },
-          readout.map((m, i) => h('span', { key: i, style: { display: 'inline-flex', alignItems: 'center', gap: 8 } },
-            i > 0 ? h('span', { style: { color: line } }, '/') : null, m))),
-        data.concepts && data.concepts.length
-          ? h(
-              'div',
-              { style: { display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: SP.sm } },
-              data.concepts.map((c) =>
-                h('span', { key: c, style: { fontSize: FS.caption, padding: '3px 10px', borderRadius: 999, border: `1px solid ${line}`, background: 'rgba(167,139,250,0.10)' } }, '概念 · ' + c),
-              ),
-            )
+        concepts.length || taxonomy.length
+          ? h('div', { style: { marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 6 } },
+              concepts.map((c) => h(ConceptChip, { key: 'c' + c, name: c })),
+              taxonomy.map((t) => h(TaxChip, { key: 't' + t, id: t })))
           : null,
-        data.taxonomy && data.taxonomy.length
-          ? h(
-              'div',
-              { style: { display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 6 } },
-              data.taxonomy.map((c) =>
-                h('span', { key: c, style: { fontSize: FS.caption, padding: '3px 10px', borderRadius: 999, border: '1px solid rgba(255,215,0,0.35)', background: 'rgba(255,215,0,0.06)' } }, '分类 · ' + c),
-              ),
-            )
-          : null,
-        h(
-          'pre',
-          {
-            style: {
-              marginTop: SP.md, fontSize: FS.body, lineHeight: 1.85, whiteSpace: 'pre-wrap', wordBreak: 'break-word',
-              background: card, border: `1px solid ${line}`, borderRadius: R.lg, padding: '16px 18px',
-              fontFamily: 'inherit', color: 'inherit', maxHeight: 'none',
-            },
-          },
-          data.index || '',
-        ),
+        h('div', { style: { marginTop: 26 } }, h(Markdown, { source: data.index, ledeHeading: '一句话总结', onOpenPaper })),
       )
     }
 
-    const DOMAIN_COLORS = ['#f472b6', '#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#38bdf8', '#fb923c', '#4ade80', '#e879f9', '#22d3ee', '#f87171', '#a3e635']
-
-    function domainColor(domain, domains) {
-      const i = Math.max(0, domains.indexOf(domain))
-      return DOMAIN_COLORS[i % DOMAIN_COLORS.length]
-    }
-
     function layoutGraph(data) {
       const W = 1000
       const H = 660
@@ -883,7 +1283,7 @@ window.__ModuleLoader__.load({
       dots.push(h('span', { key: 'tax', style: { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: FS.caption, color: muted } },
         h('span', { style: { width: 8, height: 8, borderRadius: 999, background: '#ffd700' } }), '分类'))
       dots.push(h('span', { key: 'con', style: { display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: FS.caption, color: muted } },
-        h('span', { style: { width: 8, height: 8, borderRadius: 999, background: '#a78bfa' } }), '概念'))
+        h('span', { style: { width: 8, height: 8, borderRadius: 999, background: CONCEPT_COLOR } }), '概念'))
 
       const graph = (data.papers.length + (data.concepts || []).length) === 0
         ? h('div', { style: { height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: faint, fontSize: FS.body } }, '还没有论文或概念，导入几篇后这里会出现关系图')
@@ -916,7 +1316,7 @@ window.__ModuleLoader__.load({
               ? !domain || ((linked && linked.papers) || []).some((d) => visible(paperById.get(d) || { id: d }))
               : visible(p) || (!focus && !domain)
             const dim = focusId ? !focusNeighbors.has(n.id) : !vis
-            const fill = isConcept ? '#a78bfa' : isTax ? '#ffd700' : domainColor(p.domain || '其他', domains)
+            const fill = isConcept ? CONCEPT_COLOR : isTax ? '#d5a94a' : domainColor(p.domain || '其他', domains)
             const deg = sim.degree.get(sim.nodes.indexOf(n)) || 0
             const r = isConcept ? 10 + Math.min(6, ((n.ref.papers || []).length || 0) / 8)
               : isTax ? 6 + Math.min(5, deg / 3)
@@ -983,6 +1383,8 @@ window.__ModuleLoader__.load({
       const [active, setActive] = useState('')
       const [detail, setDetail] = useState(null)
       const [msg, setMsg] = useState('')
+      const [q, setQ] = useState('')
+      const [hovered, setHovered] = useState('')
 
       const rel = detail ? `2-Concepts/${detail.name}.md` : ''
       const openInObsidian = async () => {
@@ -1031,67 +1433,100 @@ window.__ModuleLoader__.load({
         }
       }
 
+      const filtered = (items || []).filter((c) => {
+        if (!q) return true
+        const hay = `${c.name} ${c.title} ${(c.aliases || []).join(' ')} ${c.oneLiner || ''}`.toLowerCase()
+        return hay.includes(q.toLowerCase())
+      })
+
+      const rows = filtered.map((c) => {
+        const on = active === c.name
+        return h(
+          'div',
+          {
+            key: c.name,
+            onClick: () => open(c.name),
+            onMouseEnter: () => setHovered(c.name),
+            onMouseLeave: () => setHovered(''),
+            title: c.oneLiner || c.title,
+            style: {
+              position: 'relative', display: 'grid', gridTemplateColumns: '1fr auto', gap: 10,
+              padding: '10px 10px 11px', borderRadius: 8, cursor: 'pointer',
+              background: on ? 'rgba(77,107,254,0.12)' : hovered === c.name ? hoverBg : 'transparent',
+            },
+          },
+          on ? h('div', { style: { position: 'absolute', left: 0, top: 9, bottom: 9, width: 2, borderRadius: 2, background: CONCEPT_COLOR } }) : null,
+          h('div', { style: { minWidth: 0 } },
+            h('div', { style: { display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 } },
+              h('span', { style: { width: 6, height: 6, borderRadius: '50%', background: CONCEPT_COLOR, flex: '0 0 auto' } }),
+              h('div', { style: { fontSize: 14, fontWeight: 550, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, c.title || c.name)),
+            c.oneLiner
+              ? h('div', { style: { marginTop: 3, fontSize: 12, color: T.caption, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', paddingLeft: 13 } }, c.oneLiner)
+              : null),
+          h('div', { style: { fontFamily: mono, fontSize: 12, color: hexA(CONCEPT_COLOR, 0.75), fontVariantNumeric: 'tabular-nums', paddingTop: 3 } }, String(c.papersCount || 0)))
+      })
+
       const left = h(
         'div',
-        { style: { flex: '0 0 260px', minWidth: 220, maxHeight: 'calc(100vh - 320px)', overflowY: 'auto' } },
+        { style: { minHeight: 0, display: 'flex', flexDirection: 'column', background: T.bg1, borderRight: `1px solid ${line}` } },
+        h(RailHead, { title: '概念', count: items ? fmt(items.length) : '—' }),
+        h(RailSearch, { value: q, onChange: setQ, placeholder: '搜索概念 / 别名' }),
+        h('div', { style: { padding: '0 16px 8px', fontSize: 12, color: T.caption } }, '按引用论文数排序'),
         items
-          ? h(
-              'div',
-              { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
-              items.map((c) =>
-                h(
-                  'div',
-                  {
-                    key: c.name,
-                    onClick: () => open(c.name),
-                    title: c.oneLiner || c.title,
-                    style: {
-                      padding: '9px 11px',
-                      borderRadius: R.sm,
-                      cursor: 'pointer',
-                      fontSize: FS.body,
-                      background: active === c.name ? 'rgba(77,107,254,0.16)' : card,
-                      border: `1px solid ${active === c.name ? 'rgba(77,107,254,0.45)' : line}`,
-                    },
-                  },
-                  h('div', { style: { display: 'flex', gap: 6 } },
-                    h('span', { style: { flex: '1 1 auto' } }, c.title),
-                    h('span', { style: { color: muted, flex: '0 0 auto', fontSize: FS.caption } }, c.papersCount + ' 篇')),
-                  h('div', { style: { fontSize: FS.caption, color: muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 2 } }, c.oneLiner || ''),
-                ),
-              ),
-            )
-          : h('div', { style: { color: muted, fontSize: FS.body } }, '加载中…'),
+          ? h('div', { style: { flex: '1 1 auto', minHeight: 0, overflowY: 'auto', padding: '0 8px 32px' } }, rows)
+          : h('div', { style: { color: muted, fontSize: FS.body, padding: '8px 16px' } }, '加载中…'),
       )
 
+      const fm = detail ? parsePaperFrontmatter(detail.markdown) : {}
+      const tags = (fm.tags || []).filter((t) => !t.startsWith('状态/'))
+      const related = (detail && detail.papers ? detail.papers.slice() : []).sort((a, b) => (parseFloat(b.year || '0') || 0) - (parseFloat(a.year || '0') || 0))
       const right = h(
         'div',
-        { style: { flex: '1 1 auto', minWidth: 320, maxHeight: 'calc(100vh - 320px)', overflowY: 'auto', borderLeft: `1px solid ${line}`, paddingLeft: 16 } },
+        { style: { minHeight: 0, overflowY: 'auto' } },
         detail
-          ? h(
-              'div',
-              null,
-              h(
-                'div',
-                { style: { display: 'flex', gap: 8, alignItems: 'flex-start', flexWrap: 'wrap' } },
-                h('div', { style: { fontSize: FS.title, fontWeight: 650, flex: '1 1 220px' } }, detail.title),
-                h(Btn, { small: true, onClick: openInObsidian, title: '用 Obsidian 打开概念页' }, '在 Obsidian 打开'),
-                h(Btn, { small: true, ghost: true, onClick: copyPath, title: '复制库内相对路径' }, '复制路径'),
-              ),
-              h('div', { style: { fontSize: FS.caption, color: muted, marginTop: 4 } }, `${detail.papersCount} 篇论文 · ${(detail.tags || []).join(' ') || ''}`),
-              msg ? h('div', { style: { fontSize: FS.caption, color: ERROR_TEXT, marginTop: 4 } }, msg) : null,
-              h('pre', { style: { marginTop: SP.md, fontSize: FS.body, lineHeight: 1.85, whiteSpace: 'pre-wrap', wordBreak: 'break-word', background: card, border: `1px solid ${line}`, borderRadius: R.lg, padding: '16px 18px', fontFamily: 'inherit', color: 'inherit' } }, detail.markdown || ''),
-              h('div', { style: { fontSize: FS.sub, fontWeight: 600, marginTop: SP.lg } }, '相关论文'),
-              h('div', { style: { display: 'flex', flexDirection: 'column', gap: 4, marginTop: SP.sm } },
-                (detail.papers || []).map((p) =>
-                  h('div', { key: p.dir, onClick: () => onOpenPaper(p.dir), title: p.title, style: { fontSize: FS.body, padding: '6px 8px', borderRadius: R.sm, cursor: 'pointer', background: card } },
-                    h('span', { style: { color: muted, marginRight: 8 } }, p.year || '—'),
-                    p.title))),
-            )
-          : h(Empty, null, '从左边选一个概念，查看页面和相关论文'),
+          ? h(ReaderPane, null,
+              h('div', { style: { display: 'flex', alignItems: 'flex-start', gap: 16 } },
+                h('div', { style: { flex: '1 1 auto', fontSize: FS.page, lineHeight: 1.4, fontWeight: 650 } }, detail.title || detail.name),
+                h(DocActions, null,
+                  h(Btn, { small: true, ghost: true, onClick: copyPath, title: '复制库内相对路径' }, '复制路径'),
+                  h(Btn, { small: true, onClick: openInObsidian, title: '用 Obsidian 打开概念页' }, '在 Obsidian 打开'))),
+              h(MetaStrip, {
+                items: [
+                  { label: '类型', value: '概念页' },
+                  { label: '引用', value: (detail.papersCount || 0) + ' 篇论文' },
+                  { label: '别名', value: (fm.aliases || detail.aliases || []).slice(0, 4).join(' · ') },
+                  { label: '更新', value: fm.updated },
+                ],
+              }),
+              msg ? h('div', { style: { fontSize: FS.caption, color: ERROR_TEXT, marginTop: SP.xs } }, msg) : null,
+              tags.length
+                ? h('div', { style: { marginTop: 16, display: 'flex', flexWrap: 'wrap', gap: 6 } }, tags.map((t) => h(TaxChip, { key: t, id: t })))
+                : null,
+              h('div', { style: { marginTop: 26 } }, h(Markdown, { source: detail.markdown, ledeFirstQuote: true, onOpenPaper })),
+              related.length
+                ? h('div', null,
+                    h(H2, null, '相关论文'),
+                    h('div', null, related.map((p) => h('div', {
+                      key: p.dir,
+                      onClick: () => onOpenPaper(p.dir),
+                      title: p.title,
+                      onMouseEnter: () => setHovered('paper:' + p.dir),
+                      onMouseLeave: () => setHovered(''),
+                      style: {
+                        display: 'grid', gridTemplateColumns: '42px 1fr', gap: 12, padding: '9px 8px', borderRadius: 7,
+                        cursor: 'pointer', borderBottom: '1px solid rgba(255,255,255,0.045)',
+                        background: hovered === 'paper:' + p.dir ? hoverBg : 'transparent',
+                      },
+                    },
+                      h('div', { style: { fontFamily: mono, fontSize: 12, color: T.text3, paddingTop: 2, fontVariantNumeric: 'tabular-nums' } }, p.year || '—'),
+                      h('div', { style: { fontSize: 13.5, lineHeight: 1.5 } }, p.title)))))
+                : null)
+          : h(ReaderEmpty, {
+              title: items && items.length ? '从左侧选一个概念' : '还没有概念页',
+              sub: items && items.length ? '概念页是跨论文综合，条目内容按摘要排版显示' : '概念页由 tools/ 下的素材、校验、索引脚本生成，规范见 config/CONCEPT_SPEC.md',
+            }),
       )
-
-      return h('div', { style: { display: 'flex', gap: 16, alignItems: 'flex-start' } }, left, right)
+      return h('div', { style: { display: 'grid', gridTemplateColumns: '300px 1fr', height: '100%', minHeight: 0 } }, left, right)
     }
 
     function PaperDepotView() {
@@ -1107,6 +1542,8 @@ window.__ModuleLoader__.load({
       const [setup, setSetup] = useState(null)
       const [showSetup, setShowSetup] = useState(false)
       const [showImport, setShowImport] = useState(false)
+      const [jobInfo, setJobInfo] = useState(null)
+
 
       const loadSetup = useCallback(async () => {
         try {
@@ -1153,11 +1590,13 @@ window.__ModuleLoader__.load({
 
       const startPolling = useCallback(async () => {
         setRunning(true)
-        for (let i = 0; i < 900; i++) {
+        // 批量补摘要可能跑几个小时：轮询上限放到 ~3 小时，任务结束后立即退出
+        for (let i = 0; i < 9000; i++) {
           await new Promise((r) => setTimeout(r, 1200))
           try {
             const j = await (await api('/job')).json()
             if (j.job) {
+              setJobInfo(j.job)
               setLog((j.job.lines || []).slice(-300))
               if (j.job.state !== 'running') {
                 setRunning(false)
@@ -1255,6 +1694,33 @@ window.__ModuleLoader__.load({
         }
       }, [startPolling, openPaper, setLog])
 
+      // 批量补摘要：排队把「待生成」的条目跑完；中断后再点会从剩下的继续
+      const onSummarizePending = useCallback(async () => {
+        setJobInfo(null)
+        try {
+          const r = await fetch('/paperdepot/api/summarize-pending', { method: 'POST', credentials: 'same-origin' })
+          const j = await r.json()
+          if (!j.ok) {
+            setLog([`❌ ${j.error || r.status}`])
+            return
+          }
+          setLog([`▶ 批量补摘要：排队 ${j.total} 篇（库里待生成 ${j.pending} 篇）`])
+          await startPolling()
+        } catch (e) {
+          setLog([`❌ ${String(e)}`])
+        }
+      }, [startPolling, setLog])
+
+      const onCancelJob = useCallback(async () => {
+        try {
+          const r = await fetch('/paperdepot/api/job-cancel', { method: 'POST', credentials: 'same-origin' })
+          const j = await r.json()
+          if (!j.ok) setLog((old) => [...old, `❌ ${j.error || r.status}`])
+        } catch (e) {
+          setLog((old) => [...old, `❌ ${String(e)}`])
+        }
+      }, [setLog])
+
       const onSetupSaved = useCallback(async () => {
         try {
           const s = await (await api('/setup/status')).json()
@@ -1301,11 +1767,11 @@ window.__ModuleLoader__.load({
         ['concepts', '概念', d ? String(d.concepts) : ''],
       ]
       const content = setup && !setup.hasKey
-        ? h('div', { style: { height: '100%', overflowY: 'auto', padding: '20px 20px 48px' } }, h(SetupCard, { setup, onSaved: onSetupSaved }))
+        ? h('div', { style: { height: '100%', overflowY: 'auto', padding: '20px 20px 72px', boxSizing: 'border-box' } }, h(SetupCard, { setup, onSaved: onSetupSaved }))
         : d
           ? tab === 'papers'
             ? h(Papers, { papers, loading: papersLoading, onSelect: openPaper, selected, selectedData, onSummarize, running, vaultName })
-            : h('div', { style: { height: '100%', overflowY: 'auto', padding: '20px 20px 48px' } },
+            : h('div', { style: { height: '100%', overflowY: 'auto', padding: '20px 20px 72px', boxSizing: 'border-box' } },
                 tab === 'overview'
                   ? h(Overview, { d, onOpen: openFromGraph })
                   : h(Concepts, { onOpenPaper: openFromGraph, vaultName }))
@@ -1404,13 +1870,31 @@ window.__ModuleLoader__.load({
               style: { fontSize: 12.5, color: muted, background: T.bg2, padding: '1px 6px', borderRadius: 999, lineHeight: 1.5 },
             }, count) : null)),
           h('div', { style: { flex: '1 1 auto' } }),
+          d && d.pendingSummary
+            ? h(Btn, {
+                small: true,
+                ghost: true,
+                onClick: onSummarizePending,
+                disabled: running,
+                title: '把「待生成」的条目排队跑完；可随时停止，下次再点会跳过已完成的',
+              }, running
+                ? `任务中（${jobInfo && jobInfo.kind === 'summarize-batch' ? `${jobInfo.done || 0}/${jobInfo.total || 0}` : '…'}）`
+                : `批量补摘要（${d.pendingSummary}）`)
+            : null,
           h(Btn, { small: true, ghost: true, onClick: onRebuildNav, disabled: running, title: '重建论文导航块、分类页与图颜色分组' }, running ? '重建中…' : '重建导航')),
         // 内容
         h('div', { style: { flex: '1 1 auto', minHeight: 0, position: 'relative' } }, content),
+        // 底部安全区：flex 末尾的固定占位（等价 HarmonyOS 的 bottom safe area / Blank），
+        // 让上方内容整体上移，不贴窗口下沿、不被任务栏压住；不放滚动区里，避免随内容滚走
+        h('div', { style: { flex: '0 0 auto', height: 24 } }),
         showSetup && setup && setup.hasKey
           ? h('div', { style: { position: 'absolute', top: 58, right: 20, zIndex: 15, width: 540, maxWidth: '92vw', maxHeight: 'calc(100% - 80px)', overflowY: 'auto' } },
               h(SetupCard, { setup, onSaved: onSetupSaved }))
           : null,
+        // 批量补摘要进度条：任务结束时保留，可收起
+        jobInfo && jobInfo.kind === 'summarize-batch'
+          ? h(BatchBar, { job: jobInfo, onCancel: onCancelJob, onClose: () => setJobInfo(null) })
+          : null,
         h(ImportDialog, { open: showImport, onClose: () => setShowImport(false), running, log, uploadFiles }),
       )
     }