mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-06-06 00:01:54 +08:00
Merge pull request #98 from JefferyHcool/feature/kuaishou
fix(markdown): 修复 Markdown 组件以提高可读性和维护性
This commit is contained in:
Jianwu Huang
@@ -1,167 +1,169 @@
|
|||||||
"use client"
|
'use client'
|
||||||
|
|
||||||
import { useEffect, useState } from "react"
|
import { useEffect, useState } from 'react'
|
||||||
import { Copy, Download } from "lucide-react"
|
import { Copy, Download } from 'lucide-react'
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from '@/components/ui/button'
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"
|
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||||
import { Badge } from "@/components/ui/badge"
|
import { Badge } from '@/components/ui/badge'
|
||||||
|
|
||||||
interface VersionNote {
|
interface VersionNote {
|
||||||
ver_id: string
|
ver_id: string
|
||||||
model_name?: string
|
model_name?: string
|
||||||
style?: string
|
style?: string
|
||||||
created_at?: string
|
created_at?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NoteHeaderProps {
|
interface NoteHeaderProps {
|
||||||
currentTask?: {
|
currentTask?: {
|
||||||
markdown: VersionNote[] | string
|
markdown: VersionNote[] | string
|
||||||
}
|
}
|
||||||
isMultiVersion: boolean
|
isMultiVersion: boolean
|
||||||
currentVerId: string
|
currentVerId: string
|
||||||
setCurrentVerId: (id: string) => void
|
setCurrentVerId: (id: string) => void
|
||||||
modelName: string
|
modelName: string
|
||||||
style: string
|
style: string
|
||||||
noteStyles: { value: string; label: string }[]
|
noteStyles: { value: string; label: string }[]
|
||||||
onCopy: () => void
|
onCopy: () => void
|
||||||
onDownload: () => void
|
onDownload: () => void
|
||||||
createAt?: string | Date
|
createAt?: string | Date
|
||||||
setShowTranscribe: (show: boolean) => void
|
setShowTranscribe: (show: boolean) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MarkdownHeader({
|
export function MarkdownHeader({
|
||||||
currentTask,
|
currentTask,
|
||||||
isMultiVersion,
|
isMultiVersion,
|
||||||
currentVerId,
|
currentVerId,
|
||||||
setCurrentVerId,
|
setCurrentVerId,
|
||||||
modelName,
|
modelName,
|
||||||
style,
|
style,
|
||||||
noteStyles,
|
noteStyles,
|
||||||
onCopy,
|
onCopy,
|
||||||
onDownload,
|
onDownload,
|
||||||
createAt,
|
createAt,
|
||||||
showTranscribe,
|
showTranscribe,
|
||||||
setShowTranscribe
|
setShowTranscribe,
|
||||||
}: NoteHeaderProps) {
|
}: NoteHeaderProps) {
|
||||||
const [copied, setCopied] = useState(false)
|
const [copied, setCopied] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let timer: NodeJS.Timeout
|
let timer: NodeJS.Timeout
|
||||||
if (copied) {
|
if (copied) {
|
||||||
timer = setTimeout(() => setCopied(false), 2000)
|
timer = setTimeout(() => setCopied(false), 2000)
|
||||||
}
|
|
||||||
return () => clearTimeout(timer)
|
|
||||||
}, [copied])
|
|
||||||
|
|
||||||
const handleCopy = () => {
|
|
||||||
onCopy()
|
|
||||||
setCopied(true)
|
|
||||||
}
|
}
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}, [copied])
|
||||||
|
|
||||||
const styleName = noteStyles.find((v) => v.value === style)?.label || style
|
const handleCopy = () => {
|
||||||
|
onCopy()
|
||||||
|
setCopied(true)
|
||||||
|
}
|
||||||
|
|
||||||
const reversedMarkdown: VersionNote[] =
|
const styleName = noteStyles.find(v => v.value === style)?.label || style
|
||||||
Array.isArray(currentTask?.markdown) ? [...currentTask!.markdown].reverse() : []
|
|
||||||
|
|
||||||
const formatDate = (date: string | Date | undefined) => {
|
const reversedMarkdown: VersionNote[] = Array.isArray(currentTask?.markdown)
|
||||||
if (!date) return ""
|
? [...currentTask!.markdown].reverse()
|
||||||
const d = typeof date === "string" ? new Date(date) : date
|
: []
|
||||||
if (isNaN(d.getTime())) return ""
|
|
||||||
return d
|
|
||||||
.toLocaleString("zh-CN", {
|
|
||||||
year: "numeric",
|
|
||||||
month: "2-digit",
|
|
||||||
day: "2-digit",
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
})
|
|
||||||
.replace(/\//g, "-")
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
const formatDate = (date: string | Date | undefined) => {
|
||||||
<div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-3 border-b bg-white/95 py-2 px-4 backdrop-blur-sm">
|
if (!date) return ''
|
||||||
{/* 左侧区域：版本 + 标签 + 创建时间 */}
|
const d = typeof date === 'string' ? new Date(date) : date
|
||||||
<div className="flex flex-wrap items-center gap-3">
|
if (isNaN(d.getTime())) return ''
|
||||||
{isMultiVersion && (
|
return d
|
||||||
<Select value={currentVerId} onValueChange={setCurrentVerId}>
|
.toLocaleString('zh-CN', {
|
||||||
<SelectTrigger className="h-8 w-[160px] text-sm">
|
year: 'numeric',
|
||||||
<div className="flex items-center">
|
month: '2-digit',
|
||||||
{(() => {
|
day: '2-digit',
|
||||||
const idx = currentTask?.markdown.findIndex(v => v.ver_id === currentVerId)
|
hour: '2-digit',
|
||||||
return idx !== -1 ? `版本（${currentVerId.slice(0, 6)}）` : ''
|
minute: '2-digit',
|
||||||
})()}
|
})
|
||||||
</div>
|
.replace(/\//g, '-')
|
||||||
</SelectTrigger>
|
}
|
||||||
|
|
||||||
<SelectContent>
|
return (
|
||||||
{(currentTask?.markdown || []).map((v, idx) => {
|
<div className="sticky top-0 z-10 flex flex-wrap items-center justify-between gap-3 border-b bg-white/95 px-4 py-2 backdrop-blur-sm">
|
||||||
const shortId = v.ver_id.slice(-6)
|
{/* 左侧区域：版本 + 标签 + 创建时间 */}
|
||||||
return (
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
<SelectItem key={v.ver_id} value={v.ver_id}>
|
{isMultiVersion && (
|
||||||
{`版本（${shortId}）`}
|
<Select value={currentVerId} onValueChange={setCurrentVerId}>
|
||||||
</SelectItem>
|
<SelectTrigger className="h-8 w-[160px] text-sm">
|
||||||
)
|
<div className="flex items-center">
|
||||||
})}
|
{(() => {
|
||||||
</SelectContent>
|
const idx = currentTask?.markdown.findIndex(v => v.ver_id === currentVerId)
|
||||||
</Select>
|
return idx !== -1 ? `版本（${currentVerId.slice(-6)}）` : ''
|
||||||
)}
|
})()}
|
||||||
|
</div>
|
||||||
|
</SelectTrigger>
|
||||||
|
|
||||||
<Badge variant="secondary" className="bg-pink-100 text-pink-700 hover:bg-pink-200">
|
<SelectContent>
|
||||||
{modelName}
|
{(currentTask?.markdown || []).map((v, idx) => {
|
||||||
</Badge>
|
const shortId = v.ver_id.slice(-6)
|
||||||
<Badge variant="secondary" className="bg-cyan-100 text-cyan-700 hover:bg-cyan-200">
|
return (
|
||||||
{styleName}
|
<SelectItem key={v.ver_id} value={v.ver_id}>
|
||||||
</Badge>
|
{`版本（${shortId}）`}
|
||||||
|
</SelectItem>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
|
||||||
{createAt && (
|
<Badge variant="secondary" className="bg-pink-100 text-pink-700 hover:bg-pink-200">
|
||||||
<div className="text-sm text-muted-foreground">
|
{modelName}
|
||||||
创建时间: {formatDate(createAt)}
|
</Badge>
|
||||||
</div>
|
<Badge variant="secondary" className="bg-cyan-100 text-cyan-700 hover:bg-cyan-200">
|
||||||
)}
|
{styleName}
|
||||||
</div>
|
</Badge>
|
||||||
|
|
||||||
{/* 右侧操作按钮 */}
|
{createAt && (
|
||||||
<div className="flex items-center gap-1">
|
<div className="text-muted-foreground text-sm">创建时间: {formatDate(createAt)}</div>
|
||||||
<TooltipProvider>
|
)}
|
||||||
<Tooltip>
|
</div>
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button onClick={handleCopy} variant="ghost" size="sm" className="h-8 px-2">
|
|
||||||
<Copy className="mr-1.5 h-4 w-4" />
|
|
||||||
<span className="text-sm">{copied ? "已复制" : "复制"}</span>
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>复制内容</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
|
|
||||||
<TooltipProvider>
|
{/* 右侧操作按钮 */}
|
||||||
<Tooltip>
|
<div className="flex items-center gap-1">
|
||||||
<TooltipTrigger asChild>
|
<TooltipProvider>
|
||||||
<Button onClick={onDownload} variant="ghost" size="sm" className="h-8 px-2">
|
<Tooltip>
|
||||||
<Download className="mr-1.5 h-4 w-4" />
|
<TooltipTrigger asChild>
|
||||||
<span className="text-sm">导出 Markdown</span>
|
<Button onClick={handleCopy} variant="ghost" size="sm" className="h-8 px-2">
|
||||||
</Button>
|
<Copy className="mr-1.5 h-4 w-4" />
|
||||||
</TooltipTrigger>
|
<span className="text-sm">{copied ? '已复制' : '复制'}</span>
|
||||||
<TooltipContent>下载为 Markdown 文件</TooltipContent>
|
</Button>
|
||||||
</Tooltip>
|
</TooltipTrigger>
|
||||||
</TooltipProvider>
|
<TooltipContent>复制内容</TooltipContent>
|
||||||
<TooltipProvider>
|
</Tooltip>
|
||||||
<Tooltip>
|
</TooltipProvider>
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button onClick={
|
<TooltipProvider>
|
||||||
() => {
|
<Tooltip>
|
||||||
setShowTranscribe(!showTranscribe)
|
<TooltipTrigger asChild>
|
||||||
}
|
<Button onClick={onDownload} variant="ghost" size="sm" className="h-8 px-2">
|
||||||
} variant="ghost" size="sm" className="h-8 px-2">
|
<Download className="mr-1.5 h-4 w-4" />
|
||||||
{/*<Download className="mr-1.5 h-4 w-4" />*/}
|
<span className="text-sm">导出 Markdown</span>
|
||||||
<span className="text-sm">原文参照</span>
|
</Button>
|
||||||
</Button>
|
</TooltipTrigger>
|
||||||
</TooltipTrigger>
|
<TooltipContent>下载为 Markdown 文件</TooltipContent>
|
||||||
<TooltipContent >原文参照</TooltipContent>
|
</Tooltip>
|
||||||
</Tooltip>
|
</TooltipProvider>
|
||||||
</TooltipProvider>
|
<TooltipProvider>
|
||||||
</div>
|
<Tooltip>
|
||||||
</div>
|
<TooltipTrigger asChild>
|
||||||
)
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setShowTranscribe(!showTranscribe)
|
||||||
|
}}
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-8 px-2"
|
||||||
|
>
|
||||||
|
{/*<Download className="mr-1.5 h-4 w-4" />*/}
|
||||||
|
<span className="text-sm">原文参照</span>
|
||||||
|
</Button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>原文参照</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useState, useEffect } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import ReactMarkdown from 'react-markdown'
|
import ReactMarkdown from 'react-markdown'
|
||||||
import { Button } from '@/components/ui/button.tsx'
|
import { Button } from '@/components/ui/button.tsx'
|
||||||
import { Copy, Download, ArrowRight,Play,ExternalLink } from 'lucide-react'
|
import { Copy, Download, ArrowRight, Play, ExternalLink } from 'lucide-react'
|
||||||
import { toast } from 'react-hot-toast'
|
import { toast } from 'react-hot-toast'
|
||||||
import Error from '@/components/Lottie/error.tsx'
|
import Error from '@/components/Lottie/error.tsx'
|
||||||
import Loading from '@/components/Lottie/Loading.tsx'
|
import Loading from '@/components/Lottie/Loading.tsx'
|
||||||
@@ -21,7 +21,7 @@ import { ScrollArea } from '@/components/ui/scroll-area.tsx'
|
|||||||
import { useTaskStore } from '@/store/taskStore'
|
import { useTaskStore } from '@/store/taskStore'
|
||||||
import { noteStyles } from '@/constant/note.ts'
|
import { noteStyles } from '@/constant/note.ts'
|
||||||
import { MarkdownHeader } from '@/pages/HomePage/components/MarkdownHeader.tsx'
|
import { MarkdownHeader } from '@/pages/HomePage/components/MarkdownHeader.tsx'
|
||||||
import TranscriptViewer from "@/pages/HomePage/components/transcriptViewer.tsx";
|
import TranscriptViewer from '@/pages/HomePage/components/transcriptViewer.tsx'
|
||||||
|
|
||||||
interface VersionNote {
|
interface VersionNote {
|
||||||
ver_id: string
|
ver_id: string
|
||||||
@@ -57,10 +57,10 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
|
|||||||
const taskStatus = currentTask?.status || 'PENDING'
|
const taskStatus = currentTask?.status || 'PENDING'
|
||||||
const retryTask = useTaskStore.getState().retryTask
|
const retryTask = useTaskStore.getState().retryTask
|
||||||
const isMultiVersion = Array.isArray(currentTask?.markdown)
|
const isMultiVersion = Array.isArray(currentTask?.markdown)
|
||||||
const [showTranscribe, setShowTranscribe]=useState(false)
|
const [showTranscribe, setShowTranscribe] = useState(false)
|
||||||
// 多版本内容处理
|
// 多版本内容处理
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!currentTask) return;
|
if (!currentTask) return
|
||||||
|
|
||||||
if (!isMultiVersion) {
|
if (!isMultiVersion) {
|
||||||
setCurrentVerId('') // 清空旧版本 ID
|
setCurrentVerId('') // 清空旧版本 ID
|
||||||
@@ -69,12 +69,17 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
|
|||||||
setCreateTime(currentTask.createdAt)
|
setCreateTime(currentTask.createdAt)
|
||||||
setSelectedContent(currentTask?.markdown)
|
setSelectedContent(currentTask?.markdown)
|
||||||
} else {
|
} else {
|
||||||
const latestVerId = currentTask.markdown[currentTask.markdown.length - 1]?.ver_id
|
const latestVersion = [...currentTask.markdown].sort(
|
||||||
setCurrentVerId(latestVerId) // 重置为最新版本
|
(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
|
||||||
|
)[0]
|
||||||
|
|
||||||
|
if (latestVersion) {
|
||||||
|
setCurrentVerId(latestVersion.ver_id)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [currentTask?.id,taskStatus])
|
}, [currentTask?.id, taskStatus])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!currentTask || !isMultiVersion) return;
|
if (!currentTask || !isMultiVersion) return
|
||||||
|
|
||||||
const currentVer = currentTask.markdown.find(v => v.ver_id === currentVerId)
|
const currentVer = currentTask.markdown.find(v => v.ver_id === currentVerId)
|
||||||
if (currentVer) {
|
if (currentVer) {
|
||||||
@@ -109,331 +114,324 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
|
|||||||
|
|
||||||
if (status === 'loading') {
|
if (status === 'loading') {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-full flex-col items-center justify-center space-y-4 text-neutral-500">
|
<div className="flex h-screen w-full flex-col items-center justify-center space-y-4 text-neutral-500">
|
||||||
<StepBar steps={steps} currentStep={taskStatus} />
|
<StepBar steps={steps} currentStep={taskStatus} />
|
||||||
<Loading className="h-5 w-5" />
|
<Loading className="h-5 w-5" />
|
||||||
<div className="text-center text-sm">
|
<div className="text-center text-sm">
|
||||||
<p className="text-lg font-bold">正在生成笔记，请稍候…</p>
|
<p className="text-lg font-bold">正在生成笔记，请稍候…</p>
|
||||||
<p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
|
<p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (status === 'idle') {
|
if (status === 'idle') {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
|
<div className="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
|
||||||
<Idle />
|
<Idle />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
|
<p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
|
||||||
<p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 、抖音等视频平台</p>
|
<p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 、抖音等视频平台</p>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (status === 'failed' && !isMultiVersion) {
|
if (status === 'failed' && !isMultiVersion) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-full flex-col items-center justify-center gap-4 space-y-3">
|
<div className="flex h-screen w-full flex-col items-center justify-center gap-4 space-y-3">
|
||||||
<Error />
|
<Error />
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="text-lg font-bold text-red-500">笔记生成失败</p>
|
<p className="text-lg font-bold text-red-500">笔记生成失败</p>
|
||||||
<p className="mt-2 mb-2 text-xs text-red-400">请检查后台或稍后再试</p>
|
<p className="mt-2 mb-2 text-xs text-red-400">请检查后台或稍后再试</p>
|
||||||
<Button onClick={() => retryTask(currentTask.id)} size="lg">重试</Button>
|
<Button onClick={() => retryTask(currentTask.id)} size="lg">
|
||||||
</div>
|
重试
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-full flex-col overflow-hidden">
|
<div className="flex h-screen w-full flex-col overflow-hidden">
|
||||||
<MarkdownHeader
|
<MarkdownHeader
|
||||||
currentTask={currentTask}
|
currentTask={currentTask}
|
||||||
isMultiVersion={isMultiVersion}
|
isMultiVersion={isMultiVersion}
|
||||||
currentVerId={currentVerId}
|
currentVerId={currentVerId}
|
||||||
setCurrentVerId={setCurrentVerId}
|
setCurrentVerId={setCurrentVerId}
|
||||||
modelName={modelName}
|
modelName={modelName}
|
||||||
style={style}
|
style={style}
|
||||||
noteStyles={noteStyles}
|
noteStyles={noteStyles}
|
||||||
onCopy={handleCopy}
|
onCopy={handleCopy}
|
||||||
onDownload={handleDownload}
|
onDownload={handleDownload}
|
||||||
createAt={createTime}
|
createAt={createTime}
|
||||||
showTranscribe={showTranscribe}
|
showTranscribe={showTranscribe}
|
||||||
setShowTranscribe={setShowTranscribe}
|
setShowTranscribe={setShowTranscribe}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 中间内容区域：滚动容器 */}
|
{/* 中间内容区域：滚动容器 */}
|
||||||
<div className="flex-1 flex overflow-hidden bg-white py-2">
|
<div className="flex flex-1 overflow-hidden bg-white py-2">
|
||||||
{selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
|
{selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
|
||||||
<>
|
<>
|
||||||
<ScrollArea className="w-full ">
|
<ScrollArea className="w-full">
|
||||||
<div className={"w-full px-2 markdown-body"}>
|
<div className={'markdown-body w-full px-2'}>
|
||||||
|
<ReactMarkdown
|
||||||
|
remarkPlugins={[gfm, remarkMath]}
|
||||||
|
rehypePlugins={[rehypeKatex]}
|
||||||
|
components={{
|
||||||
|
// Headings with improved styling and anchor links
|
||||||
|
h1: ({ children, ...props }) => (
|
||||||
|
<h1
|
||||||
|
className="text-primary my-6 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</h1>
|
||||||
|
),
|
||||||
|
h2: ({ children, ...props }) => (
|
||||||
|
<h2
|
||||||
|
className="text-primary mt-10 mb-4 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</h2>
|
||||||
|
),
|
||||||
|
h3: ({ children, ...props }) => (
|
||||||
|
<h3
|
||||||
|
className="text-primary mt-8 mb-4 scroll-m-20 text-xl font-semibold tracking-tight"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</h3>
|
||||||
|
),
|
||||||
|
h4: ({ children, ...props }) => (
|
||||||
|
<h4
|
||||||
|
className="text-primary mt-6 mb-2 scroll-m-20 text-lg font-semibold tracking-tight"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</h4>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Paragraphs with better line height
|
||||||
|
p: ({ children, ...props }) => (
|
||||||
|
<p className="leading-7 [&:not(:first-child)]:mt-6" {...props}>
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
),
|
||||||
|
|
||||||
<ReactMarkdown
|
// Enhanced links with special handling for "原片" links
|
||||||
remarkPlugins={[gfm, remarkMath]}
|
a: ({ href, children, ...props }) => {
|
||||||
rehypePlugins={[rehypeKatex]}
|
const isOriginLink =
|
||||||
components={{
|
typeof children[0] === 'string' &&
|
||||||
// Headings with improved styling and anchor links
|
(children[0] as string).startsWith('原片 @')
|
||||||
h1: ({ children, ...props }) => (
|
|
||||||
<h1
|
if (isOriginLink) {
|
||||||
className="scroll-m-20 text-3xl font-extrabold tracking-tight text-primary lg:text-4xl my-6"
|
const timeMatch = (children[0] as string).match(/原片 @ (\d{2}:\d{2})/)
|
||||||
{...props}
|
const timeText = timeMatch ? timeMatch[1] : '原片'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="origin-link my-2 inline-flex">
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<Play className="h-3.5 w-3.5" />
|
||||||
|
<span>原片（{timeText}）</span>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default link styling with external indicator
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:text-primary/80 inline-flex items-center gap-0.5 font-medium underline underline-offset-4"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{href?.startsWith('http') && (
|
||||||
|
<ExternalLink className="ml-0.5 inline-block h-3 w-3" />
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Enhanced image with zoom capability
|
||||||
|
img: ({ node, ...props }) => (
|
||||||
|
<div className="my-8 flex justify-center">
|
||||||
|
<Zoom>
|
||||||
|
<img
|
||||||
|
{...props}
|
||||||
|
className="max-w-full cursor-zoom-in rounded-lg object-cover shadow-md transition-all hover:shadow-lg"
|
||||||
|
style={{ maxHeight: '500px' }}
|
||||||
|
/>
|
||||||
|
</Zoom>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Better strong/bold text
|
||||||
|
strong: ({ children, ...props }) => (
|
||||||
|
<strong className="text-primary font-bold" {...props}>
|
||||||
|
{children}
|
||||||
|
</strong>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Enhanced list items with support for "fake headings"
|
||||||
|
li: ({ children, ...props }) => {
|
||||||
|
const rawText = String(children)
|
||||||
|
const isFakeHeading = /^(\*\*.+\*\*)$/.test(rawText.trim())
|
||||||
|
|
||||||
|
if (isFakeHeading) {
|
||||||
|
return <div className="text-primary my-4 text-lg font-bold">{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li className="my-1" {...props}>
|
||||||
|
{children}
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
|
// Enhanced unordered lists
|
||||||
|
ul: ({ children, ...props }) => (
|
||||||
|
<ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props}>
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Enhanced ordered lists
|
||||||
|
ol: ({ children, ...props }) => (
|
||||||
|
<ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props}>
|
||||||
|
{children}
|
||||||
|
</ol>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Enhanced blockquotes
|
||||||
|
blockquote: ({ children, ...props }) => (
|
||||||
|
<blockquote
|
||||||
|
className="border-primary/20 text-muted-foreground mt-6 border-l-4 pl-4 italic"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</blockquote>
|
||||||
|
),
|
||||||
|
|
||||||
|
// Enhanced code blocks with syntax highlighting and copy button
|
||||||
|
code: ({ inline, className, children, ...props }) => {
|
||||||
|
const match = /language-(\w+)/.exec(className || '')
|
||||||
|
const codeContent = String(children).replace(/\n$/, '')
|
||||||
|
|
||||||
|
if (!inline && match) {
|
||||||
|
return (
|
||||||
|
<div className="group bg-muted relative my-6 overflow-hidden rounded-lg border shadow-sm">
|
||||||
|
<div className="bg-muted text-muted-foreground flex items-center justify-between px-4 py-1.5 text-sm font-medium">
|
||||||
|
<div>{match[1].toUpperCase()}</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(codeContent)
|
||||||
|
toast.success('代码已复制')
|
||||||
|
}}
|
||||||
|
className="bg-background/80 hover:bg-background flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors"
|
||||||
>
|
>
|
||||||
{children}
|
<Copy className="h-3.5 w-3.5" />
|
||||||
</h1>
|
复制
|
||||||
),
|
</button>
|
||||||
h2: ({ children, ...props }) => (
|
</div>
|
||||||
<h2
|
<SyntaxHighlighter
|
||||||
className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight text-primary first:mt-0 mt-10 mb-4"
|
style={codeStyle}
|
||||||
{...props}
|
language={match[1]}
|
||||||
>
|
PreTag="div"
|
||||||
{children}
|
className="!bg-muted !m-0 !p-0"
|
||||||
</h2>
|
customStyle={{
|
||||||
),
|
margin: 0,
|
||||||
h3: ({ children, ...props }) => (
|
padding: '1rem',
|
||||||
<h3
|
background: 'transparent',
|
||||||
className="scroll-m-20 text-xl font-semibold tracking-tight text-primary mt-8 mb-4"
|
fontSize: '0.9rem',
|
||||||
{...props}
|
}}
|
||||||
>
|
{...props}
|
||||||
{children}
|
>
|
||||||
</h3>
|
{codeContent}
|
||||||
),
|
</SyntaxHighlighter>
|
||||||
h4: ({ children, ...props }) => (
|
</div>
|
||||||
<h4
|
)
|
||||||
className="scroll-m-20 text-lg font-semibold tracking-tight text-primary mt-6 mb-2"
|
}
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</h4>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Paragraphs with better line height
|
// Inline code styling
|
||||||
p: ({ children, ...props }) => (
|
return (
|
||||||
<p className="leading-7 [&:not(:first-child)]:mt-6" {...props}>
|
<code
|
||||||
{children}
|
className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
|
||||||
</p>
|
{...props}
|
||||||
),
|
>
|
||||||
|
{children}
|
||||||
|
</code>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
|
||||||
// Enhanced links with special handling for "原片" links
|
// Enhanced tables
|
||||||
a: ({ href, children, ...props }) => {
|
table: ({ children, ...props }) => (
|
||||||
const isOriginLink = typeof children[0] === 'string' && (children[0] as string).startsWith('原片 @')
|
<div className="my-6 w-full overflow-y-auto">
|
||||||
|
<table className="w-full border-collapse text-sm" {...props}>
|
||||||
|
{children}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
|
||||||
if (isOriginLink) {
|
// Table headers
|
||||||
const timeMatch = (children[0] as string).match(/原片 @ (\d{2}:\d{2})/)
|
th: ({ children, ...props }) => (
|
||||||
const timeText = timeMatch ? timeMatch[1] : '原片'
|
<th
|
||||||
|
className="border-muted-foreground/20 border px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</th>
|
||||||
|
),
|
||||||
|
|
||||||
return (
|
// Table cells
|
||||||
<span className="origin-link inline-flex my-2">
|
td: ({ children, ...props }) => (
|
||||||
<a
|
<td
|
||||||
href={href}
|
className="border-muted-foreground/20 border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
|
||||||
target="_blank"
|
{...props}
|
||||||
rel="noopener noreferrer"
|
>
|
||||||
className="inline-flex items-center gap-1.5 rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 hover:bg-blue-100 transition-colors"
|
{children}
|
||||||
{...props}
|
</td>
|
||||||
>
|
),
|
||||||
<Play className="h-3.5 w-3.5" />
|
|
||||||
<span>原片（{timeText}）</span>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Default link styling with external indicator
|
// Horizontal rule
|
||||||
return (
|
hr: ({ ...props }) => (
|
||||||
<a
|
<hr className="border-muted-foreground/20 my-8" {...props} />
|
||||||
href={href}
|
),
|
||||||
target="_blank"
|
}}
|
||||||
rel="noopener noreferrer"
|
>
|
||||||
className="font-medium text-primary underline underline-offset-4 hover:text-primary/80 inline-flex items-center gap-0.5"
|
{selectedContent}
|
||||||
{...props}
|
</ReactMarkdown>
|
||||||
>
|
|
||||||
{children}
|
|
||||||
{href?.startsWith('http') && <ExternalLink className="h-3 w-3 inline-block ml-0.5" />}
|
|
||||||
</a>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Enhanced image with zoom capability
|
|
||||||
img: ({ node, ...props }) => (
|
|
||||||
<div className="my-8 flex justify-center">
|
|
||||||
<Zoom>
|
|
||||||
<img
|
|
||||||
{...props}
|
|
||||||
className="rounded-lg shadow-md max-w-full cursor-zoom-in object-cover transition-all hover:shadow-lg"
|
|
||||||
style={{ maxHeight: '500px' }}
|
|
||||||
/>
|
|
||||||
</Zoom>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Better strong/bold text
|
|
||||||
strong: ({ children, ...props }) => (
|
|
||||||
<strong className="font-bold text-primary" {...props}>
|
|
||||||
{children}
|
|
||||||
</strong>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Enhanced list items with support for "fake headings"
|
|
||||||
li: ({ children, ...props }) => {
|
|
||||||
const rawText = String(children)
|
|
||||||
const isFakeHeading = /^(\*\*.+\*\*)$/.test(rawText.trim())
|
|
||||||
|
|
||||||
if (isFakeHeading) {
|
|
||||||
return (
|
|
||||||
<div className="text-lg font-bold my-4 text-primary">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li className="my-1" {...props}>
|
|
||||||
{children}
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Enhanced unordered lists
|
|
||||||
ul: ({ children, ...props }) => (
|
|
||||||
<ul className="my-6 ml-6 list-disc [&>li]:mt-2" {...props}>
|
|
||||||
{children}
|
|
||||||
</ul>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Enhanced ordered lists
|
|
||||||
ol: ({ children, ...props }) => (
|
|
||||||
<ol className="my-6 ml-6 list-decimal [&>li]:mt-2" {...props}>
|
|
||||||
{children}
|
|
||||||
</ol>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Enhanced blockquotes
|
|
||||||
blockquote: ({ children, ...props }) => (
|
|
||||||
<blockquote
|
|
||||||
className="mt-6 border-l-4 border-primary/20 pl-4 italic text-muted-foreground"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</blockquote>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Enhanced code blocks with syntax highlighting and copy button
|
|
||||||
code: ({ inline, className, children, ...props }) => {
|
|
||||||
const match = /language-(\w+)/.exec(className || '')
|
|
||||||
const codeContent = String(children).replace(/\n$/, '')
|
|
||||||
|
|
||||||
if (!inline && match) {
|
|
||||||
return (
|
|
||||||
<div className="group relative my-6 overflow-hidden rounded-lg border bg-muted shadow-sm">
|
|
||||||
<div className="flex items-center justify-between bg-muted px-4 py-1.5 text-sm font-medium text-muted-foreground">
|
|
||||||
<div>{match[1].toUpperCase()}</div>
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
navigator.clipboard.writeText(codeContent)
|
|
||||||
toast.success('代码已复制')
|
|
||||||
}}
|
|
||||||
className="flex items-center gap-1 rounded-md bg-background/80 px-2 py-1 text-xs font-medium hover:bg-background transition-colors"
|
|
||||||
>
|
|
||||||
<Copy className="h-3.5 w-3.5" />
|
|
||||||
复制
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<SyntaxHighlighter
|
|
||||||
style={codeStyle}
|
|
||||||
language={match[1]}
|
|
||||||
PreTag="div"
|
|
||||||
className="!m-0 !bg-muted !p-0"
|
|
||||||
customStyle={{
|
|
||||||
margin: 0,
|
|
||||||
padding: '1rem',
|
|
||||||
background: 'transparent',
|
|
||||||
fontSize: '0.9rem',
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{codeContent}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inline code styling
|
|
||||||
return (
|
|
||||||
<code
|
|
||||||
className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</code>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Enhanced tables
|
|
||||||
table: ({ children, ...props }) => (
|
|
||||||
<div className="my-6 w-full overflow-y-auto">
|
|
||||||
<table className="w-full border-collapse text-sm" {...props}>
|
|
||||||
{children}
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Table headers
|
|
||||||
th: ({ children, ...props }) => (
|
|
||||||
<th
|
|
||||||
className="border border-muted-foreground/20 px-4 py-2 text-left font-medium [&[align=center]]:text-center [&[align=right]]:text-right"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</th>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Table cells
|
|
||||||
td: ({ children, ...props }) => (
|
|
||||||
<td
|
|
||||||
className="border border-muted-foreground/20 px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</td>
|
|
||||||
),
|
|
||||||
|
|
||||||
// Horizontal rule
|
|
||||||
hr: ({ ...props }) => (
|
|
||||||
<hr className="my-8 border-muted-foreground/20" {...props} />
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedContent}
|
|
||||||
</ReactMarkdown>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
{
|
|
||||||
showTranscribe && (
|
|
||||||
<div className={'ml-2 w-2/4'}>
|
|
||||||
<TranscriptViewer/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
|
||||||
<div className="w-[300px] flex-col justify-items-center">
|
|
||||||
<div className="bg-primary-light mb-4 flex h-16 w-16 items-center justify-center rounded-full">
|
|
||||||
<ArrowRight className="text-primary h-8 w-8" />
|
|
||||||
</div>
|
|
||||||
<p className="mb-2 text-neutral-600">输入视频链接并点击"生成笔记"按钮</p>
|
|
||||||
<p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube等视频网站</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
</ScrollArea>
|
||||||
</div>
|
{showTranscribe && (
|
||||||
|
<div className={'ml-2 w-2/4'}>
|
||||||
|
<TranscriptViewer />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<div className="w-[300px] flex-col justify-items-center">
|
||||||
|
<div className="bg-primary-light mb-4 flex h-16 w-16 items-center justify-center rounded-full">
|
||||||
|
<ArrowRight className="text-primary h-8 w-8" />
|
||||||
|
</div>
|
||||||
|
<p className="mb-2 text-neutral-600">输入视频链接并点击"生成笔记"按钮</p>
|
||||||
|
<p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube等视频网站</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user