mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-05-06 20:42:52 +08:00
fix(markdown): 修复 Markdown 组件以提高可读性和维护性
- 格式化代码以提高可读性 -优化组件结构以提高维护性- 调整样式和布局以提升用户体验
This commit is contained in:
黄建武
@@ -1,167 +1,169 @@
|
||||
"use client"
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { Copy, Download } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Copy, Download } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
|
||||
interface VersionNote {
|
||||
ver_id: string
|
||||
model_name?: string
|
||||
style?: string
|
||||
created_at?: string
|
||||
ver_id: string
|
||||
model_name?: string
|
||||
style?: string
|
||||
created_at?: string
|
||||
}
|
||||
|
||||
interface NoteHeaderProps {
|
||||
currentTask?: {
|
||||
markdown: VersionNote[] | string
|
||||
}
|
||||
isMultiVersion: boolean
|
||||
currentVerId: string
|
||||
setCurrentVerId: (id: string) => void
|
||||
modelName: string
|
||||
style: string
|
||||
noteStyles: { value: string; label: string }[]
|
||||
onCopy: () => void
|
||||
onDownload: () => void
|
||||
createAt?: string | Date
|
||||
setShowTranscribe: (show: boolean) => void
|
||||
currentTask?: {
|
||||
markdown: VersionNote[] | string
|
||||
}
|
||||
isMultiVersion: boolean
|
||||
currentVerId: string
|
||||
setCurrentVerId: (id: string) => void
|
||||
modelName: string
|
||||
style: string
|
||||
noteStyles: { value: string; label: string }[]
|
||||
onCopy: () => void
|
||||
onDownload: () => void
|
||||
createAt?: string | Date
|
||||
setShowTranscribe: (show: boolean) => void
|
||||
}
|
||||
|
||||
export function MarkdownHeader({
|
||||
currentTask,
|
||||
isMultiVersion,
|
||||
currentVerId,
|
||||
setCurrentVerId,
|
||||
modelName,
|
||||
style,
|
||||
noteStyles,
|
||||
onCopy,
|
||||
onDownload,
|
||||
createAt,
|
||||
showTranscribe,
|
||||
setShowTranscribe
|
||||
}: NoteHeaderProps) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
currentTask,
|
||||
isMultiVersion,
|
||||
currentVerId,
|
||||
setCurrentVerId,
|
||||
modelName,
|
||||
style,
|
||||
noteStyles,
|
||||
onCopy,
|
||||
onDownload,
|
||||
createAt,
|
||||
showTranscribe,
|
||||
setShowTranscribe,
|
||||
}: NoteHeaderProps) {
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout
|
||||
if (copied) {
|
||||
timer = setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
return () => clearTimeout(timer)
|
||||
}, [copied])
|
||||
|
||||
const handleCopy = () => {
|
||||
onCopy()
|
||||
setCopied(true)
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout
|
||||
if (copied) {
|
||||
timer = setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
return () => clearTimeout(timer)
|
||||
}, [copied])
|
||||
|
||||
const styleName = noteStyles.find((v) => v.value === style)?.label || style
|
||||
const handleCopy = () => {
|
||||
onCopy()
|
||||
setCopied(true)
|
||||
}
|
||||
|
||||
const reversedMarkdown: VersionNote[] =
|
||||
Array.isArray(currentTask?.markdown) ? [...currentTask!.markdown].reverse() : []
|
||||
const styleName = noteStyles.find(v => v.value === style)?.label || style
|
||||
|
||||
const formatDate = (date: string | Date | undefined) => {
|
||||
if (!date) return ""
|
||||
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, "-")
|
||||
}
|
||||
const reversedMarkdown: VersionNote[] = Array.isArray(currentTask?.markdown)
|
||||
? [...currentTask!.markdown].reverse()
|
||||
: []
|
||||
|
||||
return (
|
||||
<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">
|
||||
{/* 左侧区域：版本 + 标签 + 创建时间 */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{isMultiVersion && (
|
||||
<Select value={currentVerId} onValueChange={setCurrentVerId}>
|
||||
<SelectTrigger className="h-8 w-[160px] text-sm">
|
||||
<div className="flex items-center">
|
||||
{(() => {
|
||||
const idx = currentTask?.markdown.findIndex(v => v.ver_id === currentVerId)
|
||||
return idx !== -1 ? `版本（${currentVerId.slice(0, 6)}）` : ''
|
||||
})()}
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
const formatDate = (date: string | Date | undefined) => {
|
||||
if (!date) return ''
|
||||
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, '-')
|
||||
}
|
||||
|
||||
<SelectContent>
|
||||
{(currentTask?.markdown || []).map((v, idx) => {
|
||||
const shortId = v.ver_id.slice(-6)
|
||||
return (
|
||||
<SelectItem key={v.ver_id} value={v.ver_id}>
|
||||
{`版本（${shortId}）`}
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
return (
|
||||
<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">
|
||||
{/* 左侧区域：版本 + 标签 + 创建时间 */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{isMultiVersion && (
|
||||
<Select value={currentVerId} onValueChange={setCurrentVerId}>
|
||||
<SelectTrigger className="h-8 w-[160px] text-sm">
|
||||
<div className="flex items-center">
|
||||
{(() => {
|
||||
const idx = currentTask?.markdown.findIndex(v => v.ver_id === currentVerId)
|
||||
return idx !== -1 ? `版本（${currentVerId.slice(-6)}）` : ''
|
||||
})()}
|
||||
</div>
|
||||
</SelectTrigger>
|
||||
|
||||
<Badge variant="secondary" className="bg-pink-100 text-pink-700 hover:bg-pink-200">
|
||||
{modelName}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-cyan-100 text-cyan-700 hover:bg-cyan-200">
|
||||
{styleName}
|
||||
</Badge>
|
||||
<SelectContent>
|
||||
{(currentTask?.markdown || []).map((v, idx) => {
|
||||
const shortId = v.ver_id.slice(-6)
|
||||
return (
|
||||
<SelectItem key={v.ver_id} value={v.ver_id}>
|
||||
{`版本（${shortId}）`}
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
|
||||
{createAt && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
创建时间: {formatDate(createAt)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="secondary" className="bg-pink-100 text-pink-700 hover:bg-pink-200">
|
||||
{modelName}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-cyan-100 text-cyan-700 hover:bg-cyan-200">
|
||||
{styleName}
|
||||
</Badge>
|
||||
|
||||
{/* 右侧操作按钮 */}
|
||||
<div className="flex items-center gap-1">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<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>
|
||||
{createAt && (
|
||||
<div className="text-muted-foreground text-sm">创建时间: {formatDate(createAt)}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button onClick={onDownload} variant="ghost" size="sm" className="h-8 px-2">
|
||||
<Download className="mr-1.5 h-4 w-4" />
|
||||
<span className="text-sm">导出 Markdown</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>下载为 Markdown 文件</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<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>
|
||||
)
|
||||
{/* 右侧操作按钮 */}
|
||||
<div className="flex items-center gap-1">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<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>
|
||||
<TooltipTrigger asChild>
|
||||
<Button onClick={onDownload} variant="ghost" size="sm" className="h-8 px-2">
|
||||
<Download className="mr-1.5 h-4 w-4" />
|
||||
<span className="text-sm">导出 Markdown</span>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>下载为 Markdown 文件</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<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 ReactMarkdown from 'react-markdown'
|
||||
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 Error from '@/components/Lottie/error.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 { noteStyles } from '@/constant/note.ts'
|
||||
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 {
|
||||
ver_id: string
|
||||
@@ -57,10 +57,10 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
|
||||
const taskStatus = currentTask?.status || 'PENDING'
|
||||
const retryTask = useTaskStore.getState().retryTask
|
||||
const isMultiVersion = Array.isArray(currentTask?.markdown)
|
||||
const [showTranscribe, setShowTranscribe]=useState(false)
|
||||
const [showTranscribe, setShowTranscribe] = useState(false)
|
||||
// 多版本内容处理
|
||||
useEffect(() => {
|
||||
if (!currentTask) return;
|
||||
if (!currentTask) return
|
||||
|
||||
if (!isMultiVersion) {
|
||||
setCurrentVerId('') // 清空旧版本 ID
|
||||
@@ -69,12 +69,17 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
|
||||
setCreateTime(currentTask.createdAt)
|
||||
setSelectedContent(currentTask?.markdown)
|
||||
} else {
|
||||
const latestVerId = currentTask.markdown[currentTask.markdown.length - 1]?.ver_id
|
||||
setCurrentVerId(latestVerId) // 重置为最新版本
|
||||
const latestVersion = [...currentTask.markdown].sort(
|
||||
(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(() => {
|
||||
if (!currentTask || !isMultiVersion) return;
|
||||
if (!currentTask || !isMultiVersion) return
|
||||
|
||||
const currentVer = currentTask.markdown.find(v => v.ver_id === currentVerId)
|
||||
if (currentVer) {
|
||||
@@ -109,331 +114,324 @@ const MarkdownViewer: FC<MarkdownViewerProps> = ({ status }) => {
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col items-center justify-center space-y-4 text-neutral-500">
|
||||
<StepBar steps={steps} currentStep={taskStatus} />
|
||||
<Loading className="h-5 w-5" />
|
||||
<div className="text-center text-sm">
|
||||
<p className="text-lg font-bold">正在生成笔记，请稍候…</p>
|
||||
<p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
|
||||
</div>
|
||||
<div className="flex h-screen w-full flex-col items-center justify-center space-y-4 text-neutral-500">
|
||||
<StepBar steps={steps} currentStep={taskStatus} />
|
||||
<Loading className="h-5 w-5" />
|
||||
<div className="text-center text-sm">
|
||||
<p className="text-lg font-bold">正在生成笔记，请稍候…</p>
|
||||
<p className="mt-2 text-xs text-neutral-500">这可能需要几秒钟时间，取决于视频长度</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (status === 'idle') {
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
|
||||
<Idle />
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
|
||||
<p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 、抖音等视频平台</p>
|
||||
</div>
|
||||
<div className="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
|
||||
<Idle />
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-bold">输入视频链接并点击“生成笔记”</p>
|
||||
<p className="mt-2 text-xs text-neutral-500">支持哔哩哔哩、YouTube 、抖音等视频平台</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (status === 'failed' && !isMultiVersion) {
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col items-center justify-center gap-4 space-y-3">
|
||||
<Error />
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-bold text-red-500">笔记生成失败</p>
|
||||
<p className="mt-2 mb-2 text-xs text-red-400">请检查后台或稍后再试</p>
|
||||
<Button onClick={() => retryTask(currentTask.id)} size="lg">重试</Button>
|
||||
</div>
|
||||
<div className="flex h-screen w-full flex-col items-center justify-center gap-4 space-y-3">
|
||||
<Error />
|
||||
<div className="text-center">
|
||||
<p className="text-lg font-bold text-red-500">笔记生成失败</p>
|
||||
<p className="mt-2 mb-2 text-xs text-red-400">请检查后台或稍后再试</p>
|
||||
<Button onClick={() => retryTask(currentTask.id)} size="lg">
|
||||
重试
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex h-screen w-full flex-col overflow-hidden">
|
||||
<MarkdownHeader
|
||||
currentTask={currentTask}
|
||||
isMultiVersion={isMultiVersion}
|
||||
currentVerId={currentVerId}
|
||||
setCurrentVerId={setCurrentVerId}
|
||||
modelName={modelName}
|
||||
style={style}
|
||||
noteStyles={noteStyles}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
createAt={createTime}
|
||||
showTranscribe={showTranscribe}
|
||||
setShowTranscribe={setShowTranscribe}
|
||||
/>
|
||||
<div className="flex h-screen w-full flex-col overflow-hidden">
|
||||
<MarkdownHeader
|
||||
currentTask={currentTask}
|
||||
isMultiVersion={isMultiVersion}
|
||||
currentVerId={currentVerId}
|
||||
setCurrentVerId={setCurrentVerId}
|
||||
modelName={modelName}
|
||||
style={style}
|
||||
noteStyles={noteStyles}
|
||||
onCopy={handleCopy}
|
||||
onDownload={handleDownload}
|
||||
createAt={createTime}
|
||||
showTranscribe={showTranscribe}
|
||||
setShowTranscribe={setShowTranscribe}
|
||||
/>
|
||||
|
||||
{/* 中间内容区域：滚动容器 */}
|
||||
<div className="flex-1 flex overflow-hidden bg-white py-2">
|
||||
{selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
|
||||
<>
|
||||
<ScrollArea className="w-full ">
|
||||
<div className={"w-full px-2 markdown-body"}>
|
||||
{/* 中间内容区域：滚动容器 */}
|
||||
<div className="flex flex-1 overflow-hidden bg-white py-2">
|
||||
{selectedContent && selectedContent !== 'loading' && selectedContent !== 'empty' ? (
|
||||
<>
|
||||
<ScrollArea className="w-full">
|
||||
<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
|
||||
remarkPlugins={[gfm, remarkMath]}
|
||||
rehypePlugins={[rehypeKatex]}
|
||||
components={{
|
||||
// Headings with improved styling and anchor links
|
||||
h1: ({ children, ...props }) => (
|
||||
<h1
|
||||
className="scroll-m-20 text-3xl font-extrabold tracking-tight text-primary lg:text-4xl my-6"
|
||||
{...props}
|
||||
// Enhanced links with special handling for "原片" links
|
||||
a: ({ href, children, ...props }) => {
|
||||
const isOriginLink =
|
||||
typeof children[0] === 'string' &&
|
||||
(children[0] as string).startsWith('原片 @')
|
||||
|
||||
if (isOriginLink) {
|
||||
const timeMatch = (children[0] as string).match(/原片 @ (\d{2}:\d{2})/)
|
||||
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}
|
||||
</h1>
|
||||
),
|
||||
h2: ({ children, ...props }) => (
|
||||
<h2
|
||||
className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight text-primary first:mt-0 mt-10 mb-4"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
h3: ({ children, ...props }) => (
|
||||
<h3
|
||||
className="scroll-m-20 text-xl font-semibold tracking-tight text-primary mt-8 mb-4"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</h3>
|
||||
),
|
||||
h4: ({ children, ...props }) => (
|
||||
<h4
|
||||
className="scroll-m-20 text-lg font-semibold tracking-tight text-primary mt-6 mb-2"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</h4>
|
||||
),
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<SyntaxHighlighter
|
||||
style={codeStyle}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
className="!bg-muted !m-0 !p-0"
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: '1rem',
|
||||
background: 'transparent',
|
||||
fontSize: '0.9rem',
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
{codeContent}
|
||||
</SyntaxHighlighter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Paragraphs with better line height
|
||||
p: ({ children, ...props }) => (
|
||||
<p className="leading-7 [&:not(:first-child)]:mt-6" {...props}>
|
||||
{children}
|
||||
</p>
|
||||
),
|
||||
// Inline code styling
|
||||
return (
|
||||
<code
|
||||
className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
|
||||
// Enhanced links with special handling for "原片" links
|
||||
a: ({ href, children, ...props }) => {
|
||||
const isOriginLink = typeof children[0] === 'string' && (children[0] as string).startsWith('原片 @')
|
||||
// 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>
|
||||
),
|
||||
|
||||
if (isOriginLink) {
|
||||
const timeMatch = (children[0] as string).match(/原片 @ (\d{2}:\d{2})/)
|
||||
const timeText = timeMatch ? timeMatch[1] : '原片'
|
||||
// Table headers
|
||||
th: ({ children, ...props }) => (
|
||||
<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 (
|
||||
<span className="origin-link inline-flex my-2">
|
||||
<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 hover:bg-blue-100 transition-colors"
|
||||
{...props}
|
||||
>
|
||||
<Play className="h-3.5 w-3.5" />
|
||||
<span>原片（{timeText}）</span>
|
||||
</a>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
// Table cells
|
||||
td: ({ children, ...props }) => (
|
||||
<td
|
||||
className="border-muted-foreground/20 border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</td>
|
||||
),
|
||||
|
||||
// Default link styling with external indicator
|
||||
return (
|
||||
<a
|
||||
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"
|
||||
{...props}
|
||||
>
|
||||
{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>
|
||||
// Horizontal rule
|
||||
hr: ({ ...props }) => (
|
||||
<hr className="border-muted-foreground/20 my-8" {...props} />
|
||||
),
|
||||
}}
|
||||
>
|
||||
{selectedContent}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user