feat(web): 地址栏驱动视图，刷新详情页不再回首页

- 新增 data/view.ts 与 useViewRoute：视图与地址双向同步，支持前进后退 - 条目地址带上所属分组，刷新 / 收藏后「返回」有确定落点 - 服务端只把 /c/** 回落到 index.html，其余路径仍返回 404 - 明细页返回按钮去掉左侧箭头图标
2026-10-24 17:18:30 +08:00
parent 41fed5e64d
commit 19ead7b716
22 changed files with 2098 additions and 1321 deletions
@@ -0,0 +1,133 @@
+import type { ReactNode } from 'react'
+
+/**
+ * 极简 Markdown 渲染：只覆盖文章正文实际用到的子集。
+ *
+ * 支持：
+ * - `## 小标题`（1~6 级井号都渲染成同一级小标题，标题层级由版式决定）
+ * - 空行分段
+ * - 单独一行的 `![alt](url)` 作为配图
+ * - 行内 `**粗体**`、`` `代码` ``、`[文字](链接)`
+ *
+ * 不支持列表、表格、引用块——这里渲染的是文章正文，不是通用 Markdown 编辑器。
+ * 需要完整语法时再换 react-markdown，渲染层已经隔离在这个组件里。
+ */
+
+type Block =
+  | { kind: 'heading'; text: string }
+  | { kind: 'image'; alt: string; src: string }
+  | { kind: 'paragraph'; text: string }
+
+/** 行内语法：粗体 / 代码 / 链接；其余按纯文本处理 */
+const INLINE_PATTERN = /(\*\*[^*]+\*\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g
+
+/** 把 Markdown 文本切成块；规则尽量简单，宁可少解析也不误伤正文 */
+function parseBlocks(markdown: string): Block[] {
+  const blocks: Block[] = []
+  const lines = markdown.replace(/\r\n/g, '\n').split('\n')
+
+  let paragraph: string[] = []
+
+  // 空行或遇到标题/图片时，把攒着的行收成一个段落
+  const flush = () => {
+    if (paragraph.length === 0) return
+    blocks.push({ kind: 'paragraph', text: paragraph.join(' ') })
+    paragraph = []
+  }
+
+  for (const raw of lines) {
+    const line = raw.trim()
+
+    if (line === '') {
+      flush()
+      continue
+    }
+
+    const heading = /^#{1,6}\s+(.*)$/.exec(line)
+    if (heading !== null) {
+      flush()
+      blocks.push({ kind: 'heading', text: heading[1] })
+      continue
+    }
+
+    const image = /^!\[([^\]]*)\]\(([^)\s]+)\)$/.exec(line)
+    if (image !== null) {
+      flush()
+      blocks.push({ kind: 'image', alt: image[1], src: image[2] })
+      continue
+    }
+
+    paragraph.push(line)
+  }
+
+  flush()
+  return blocks
+}
+
+/** 渲染一行里的行内语法 */
+function renderInline(text: string): ReactNode[] {
+  return text
+    .split(INLINE_PATTERN)
+    .filter((part) => part !== '')
+    .map((part, index) => {
+      if (part.startsWith('**') && part.endsWith('**')) {
+        return <strong key={index}>{part.slice(2, -2)}</strong>
+      }
+
+      if (part.startsWith('`') && part.endsWith('`')) {
+        return <code key={index}>{part.slice(1, -1)}</code>
+      }
+
+      const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(part)
+      if (link !== null) {
+        return (
+          <a key={index} href={link[2]} target="_blank" rel="noreferrer">
+            {link[1]}
+          </a>
+        )
+      }
+
+      return <span key={index}>{part}</span>
+    })
+}
+
+type ArticleBodyProps = {
+  /** Markdown 正文；为空时组件渲染空内容 */
+  markdown?: string
+}
+
+export function ArticleBody({ markdown }: ArticleBodyProps) {
+  if (markdown === undefined || markdown.trim() === '') return null
+
+  return (
+    <>
+      {parseBlocks(markdown).map((block, index) => {
+        if (block.kind === 'heading') {
+          return (
+            <h3 className="article-body-heading" key={index}>
+              {renderInline(block.text)}
+            </h3>
+          )
+        }
+
+        if (block.kind === 'image') {
+          return (
+            <img
+              className="article-body-image"
+              key={index}
+              src={block.src}
+              alt={block.alt}
+              loading="lazy"
+            />
+          )
+        }
+
+        return (
+          <p className="article-body-text" key={index}>
+            {renderInline(block.text)}
+          </p>
+        )
+      })}
+    </>
+  )
+}