mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-08-07 06:04:29 +08:00
fix(frontend): 修复 Markdown 目录锚点跳转与 Tauri 路由
- 安装 rehype-slug 插件,自动为 heading 生成 id,解决目录链接无锚点目标的问题 - 自定义 <a> 组件处理内部锚点链接,阻止默认刷新行为并使用 scrollIntoView 平滑滚动 - Tauri 桌面端改用 HashRouter,避免刷新时 404 及错误打开外部浏览器 fixes #xxx Co-Authored-By: HAPI <noreply@hapi.run>
This commit is contained in:
@@ -14,6 +14,7 @@ import 'react-medium-image-zoom/dist/styles.css'
|
||||
import gfm from 'remark-gfm'
|
||||
import remarkMath from 'remark-math'
|
||||
import rehypeKatex from 'rehype-katex'
|
||||
import rehypeSlug from 'rehype-slug'
|
||||
import 'katex/dist/katex.min.css'
|
||||
import 'github-markdown-css/github-markdown-light.css'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area.tsx'
|
||||
@@ -47,7 +48,7 @@ const steps = [
|
||||
]
|
||||
|
||||
const remarkPlugins = [gfm, remarkMath]
|
||||
const rehypePlugins = [rehypeKatex]
|
||||
const rehypePlugins = [rehypeKatex, rehypeSlug]
|
||||
|
||||
/**
|
||||
* 构建 ReactMarkdown components 对象,baseURL 用于修正图片路径。
|
||||
@@ -117,6 +118,31 @@ function createMarkdownComponents(baseURL: string) {
|
||||
)
|
||||
}
|
||||
|
||||
// 处理笔记内部锚点链接(如目录跳转)
|
||||
if (href?.startsWith('#')) {
|
||||
const handleAnchorClick = (e: React.MouseEvent) => {
|
||||
e.preventDefault()
|
||||
const id = decodeURIComponent(href.slice(1))
|
||||
const target = document.getElementById(id)
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
} else {
|
||||
toast.error('未找到对应章节')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
onClick={handleAnchorClick}
|
||||
className="text-primary hover:text-primary/80 inline-flex items-center gap-0.5 font-medium underline underline-offset-4"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
|
||||
Reference in New Issue
Block a user