mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-06-08 17:19:48 +08:00
first commit
This commit is contained in:
Jefferyhcool
42
BillNote_frontend/src/pages/Home.tsx
Normal file
42
BillNote_frontend/src/pages/Home.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React,{FC,useEffect,useState} from "react";
|
||||
import HomeLayout from "@/layouts/HomeLayout.tsx";
|
||||
import NoteForm from '@/pages/components/NoteForm'
|
||||
import MarkdownViewer from '@/pages/components/MarkdownViewer'
|
||||
import NoteFormWrapper from "@/pages/components/NoteFormWrapper.tsx";
|
||||
import {get_task_status} from "@/services/note.ts";
|
||||
import {useTaskStore} from "@/store/taskStore";
|
||||
type ViewStatus = 'idle' | 'loading' | 'success'
|
||||
export const HomePage:FC =()=>{
|
||||
const tasks = useTaskStore((state) => state.tasks)
|
||||
const currentTaskId = useTaskStore((state) => state.currentTaskId)
|
||||
|
||||
const currentTask = tasks.find((t) => t.id === currentTaskId)
|
||||
|
||||
const [status, setStatus] = useState<ViewStatus>('idle')
|
||||
|
||||
const content = currentTask?.markdown || ''
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentTask) {
|
||||
setStatus('idle')
|
||||
} else if (currentTask.status === 'PENDING') {
|
||||
setStatus('loading')
|
||||
} else if (currentTask.status === 'SUCCESS') {
|
||||
setStatus('success')
|
||||
}
|
||||
}, [currentTask])
|
||||
|
||||
// useEffect( () => {
|
||||
// get_task_status('d4e87938-c066-48a0-bbd5-9bec40d53354').then(res=>{
|
||||
// console.log('res1',res)
|
||||
// setContent(res.data.result.markdown)
|
||||
// })
|
||||
// }, [tasks]);
|
||||
return (
|
||||
<HomeLayout
|
||||
form={<NoteForm/>}
|
||||
preview={<MarkdownViewer status={status} content={content} />}
|
||||
|
||||
/>
|
||||
)
|
||||
}
|
||||
168
BillNote_frontend/src/pages/components/MarkdownViewer.tsx
Normal file
168
BillNote_frontend/src/pages/components/MarkdownViewer.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import { useState } from "react"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Copy, Download, FileText,ArrowRight } from "lucide-react"
|
||||
import { toast } from "sonner" // 你可以换成自己的通知组件
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
|
||||
import { solarizedlight as codeStyle } from 'react-syntax-highlighter/dist/cjs/styles/prism'
|
||||
import 'github-markdown-css/github-markdown-light.css'
|
||||
import {FC} from 'react'
|
||||
import Loading from "@/components/Lottie/Loading.tsx";
|
||||
import Idle from "@/components/Lottie/Idle.tsx";
|
||||
import {useTaskStore} from "@/store/taskStore";
|
||||
interface MarkdownViewerProps {
|
||||
content: string
|
||||
status: 'idle' | 'loading' | 'success'
|
||||
}
|
||||
|
||||
const MarkdownViewer: FC<MarkdownViewerProps> = ({ content, status }) => {
|
||||
const [copied, setCopied] = useState(false)
|
||||
const getCurrentTask =useTaskStore.getState().getCurrentTask
|
||||
const handleCopy = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content)
|
||||
setCopied(true)
|
||||
toast.success("已复制到剪贴板")
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
} catch (e) {
|
||||
toast.error(`复制失败${e}`)
|
||||
toast.error("复制失败",e)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDownload = () => {
|
||||
const currentTask=getCurrentTask()
|
||||
const currentTaskName=currentTask?.audioMeta.title
|
||||
const blob = new Blob([content], { type: "text/markdown;charset=utf-8" })
|
||||
const link = document.createElement("a")
|
||||
link.href = URL.createObjectURL(blob)
|
||||
link.download = `${currentTaskName}.md`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
}
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col justify-center items-center text-neutral-500 space-y-4">
|
||||
<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>
|
||||
|
||||
)
|
||||
}
|
||||
else if (status === 'idle'){
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col justify-center items-center text-neutral-500 space-y-3">
|
||||
|
||||
<Idle ></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>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col">
|
||||
{/* 顶部操作栏 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold text-neutral-900 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-primary" />
|
||||
笔记内容
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={handleCopy} variant="outline" size="sm">
|
||||
<Copy className="w-4 h-4 mr-1" />
|
||||
{copied ? "已复制" : "复制"}
|
||||
</Button>
|
||||
<Button onClick={handleDownload} variant="outline" size="sm">
|
||||
<Download className="w-4 h-4 mr-1" />
|
||||
导出 Markdown
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 滚动容器 */}
|
||||
|
||||
<div className='overflow-y-auto'>
|
||||
{
|
||||
content && content!='loading' || content!='empty'?(
|
||||
<div className="markdown-body flex-1 bg-white"> <ReactMarkdown
|
||||
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }) {
|
||||
const match = /language-(\w+)/.exec(className || '')
|
||||
const codeContent = String(children).replace(/\n$/, '')
|
||||
|
||||
if (!inline && match) {
|
||||
return (
|
||||
<div className="relative group">
|
||||
<SyntaxHighlighter
|
||||
style={codeStyle}
|
||||
language={match[1]}
|
||||
PreTag="div"
|
||||
{...props}
|
||||
>
|
||||
{codeContent}
|
||||
</SyntaxHighlighter>
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(codeContent)
|
||||
toast.success("代码已复制")
|
||||
}}
|
||||
className="absolute top-2 right-2 hidden group-hover:flex items-center gap-1 text-xs px-2 py-1 bg-white/70 border border-gray-300 rounded hover:bg-white shadow-sm transition"
|
||||
>
|
||||
<Copy className="w-3 h-3" />
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<code className="bg-gray-100 px-1 py-0.5 rounded text-sm" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown></div>
|
||||
):(
|
||||
<div className='w-full h-screen flex justify-center items-center'>
|
||||
<div className='w-[300px] flex-col justify-items-center '>
|
||||
<div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">
|
||||
<ArrowRight className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>
|
||||
<p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube等视频网站</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{/*<div className="markdown-body flex-1 overflow-y-auto bg-white">*/}
|
||||
{/* {content ? (*/}
|
||||
{/* */}
|
||||
{/* ) : (*/}
|
||||
{/* <>*/}
|
||||
{/* <div className="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mb-4">*/}
|
||||
{/* <ArrowRight className="h-8 w-8 text-primary" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <p className="text-neutral-600 mb-2">输入视频链接并点击"生成笔记"按钮</p>*/}
|
||||
{/* <p className="text-xs text-neutral-500">支持哔哩哔哩、YouTube、腾讯视频和爱奇艺</p>*/}
|
||||
{/* </>*/}
|
||||
{/* )}*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarkdownViewer
|
||||
287
BillNote_frontend/src/pages/components/NoteForm.tsx
Normal file
287
BillNote_frontend/src/pages/components/NoteForm.tsx
Normal file
@@ -0,0 +1,287 @@
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Info,Clock } from "lucide-react"
|
||||
|
||||
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
|
||||
import {generateNote} from "@/services/note.ts";
|
||||
import {useTaskStore} from "@/store/taskStore";
|
||||
import { useState } from "react"
|
||||
import NoteHistory from "@/pages/components/NoteHistory.tsx";
|
||||
|
||||
// ✅ 定义表单 schema
|
||||
const formSchema = z.object({
|
||||
video_url: z.string().url("请输入正确的视频链接"),
|
||||
platform: z.string().nonempty("请选择平台"),
|
||||
quality: z.enum(["fast", "medium", "slow"], {
|
||||
required_error: "请选择音频质量",
|
||||
}),
|
||||
screenshot: z.boolean().optional(),
|
||||
link:z.boolean().optional(),
|
||||
})
|
||||
|
||||
|
||||
type NoteFormValues = z.infer<typeof formSchema>
|
||||
|
||||
const NoteForm = () => {
|
||||
const [selectedTaskId] = useState<string | null>(null)
|
||||
|
||||
const tasks = useTaskStore((state) => state.tasks)
|
||||
const setCurrentTask=useTaskStore((state)=>state.setCurrentTask)
|
||||
const currentTaskId=useTaskStore(state=>state.currentTaskId )
|
||||
tasks.find((t) => t.id === selectedTaskId);
|
||||
const form = useForm<NoteFormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
video_url: "",
|
||||
platform: "bilibili",
|
||||
quality: "medium", // 默认中等质量
|
||||
screenshot: false,
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const isGenerating = false
|
||||
|
||||
const onSubmit = async (data: NoteFormValues) => {
|
||||
console.log("🎯 提交内容：", data)
|
||||
await generateNote({
|
||||
video_url: data.video_url,
|
||||
platform: data.platform,
|
||||
quality: data.quality,
|
||||
screenshot:data.screenshot,
|
||||
link:data.link
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between my-3">
|
||||
<h2 className="block ">视频链接</h2>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-4 w-4 text-neutral-400 hover:text-primary cursor-pointer" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs ">输入视频链接，支持哔哩哔哩、YouTube等平台</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{/* 平台选择 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="platform"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="选择平台" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="bilibili">哔哩哔哩</SelectItem>
|
||||
<SelectItem value="youtube">Youtube</SelectItem>
|
||||
{/*<SelectItem value="local">本地视频</SelectItem>*/}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 视频地址 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="video_url"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="视频链接"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
{/*<p className="text-xs text-neutral-500">*/}
|
||||
{/* 支持哔哩哔哩视频链接，例如：*/}
|
||||
{/* https://www.bilibili.com/video/BV1vc25YQE9X/*/}
|
||||
{/*</p>*/}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="quality"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex items-center justify-between my-3">
|
||||
<h2 className="block ">音频质量</h2>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="h-4 w-4 text-neutral-400 hover:text-primary cursor-pointer" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs max-w-[200px]">质量越高，下载体积越大，速度越慢</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="选择质量" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="fast">快速（压缩）</SelectItem>
|
||||
<SelectItem value="medium">中等（推荐）</SelectItem>
|
||||
<SelectItem value="slow">高质量（清晰）</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{/*<FormDescription className="text-xs text-neutral-500">*/}
|
||||
{/* 质量越高，下载体积越大，速度越慢*/}
|
||||
{/*</FormDescription>*/}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 是否需要原片位置 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="link"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
{/* Tooltip 部分 */}
|
||||
|
||||
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
id="link"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormLabel
|
||||
htmlFor="link"
|
||||
className="text-sm font-medium leading-none"
|
||||
>
|
||||
是否插入内容跳转链接
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
{/* 是否需要下载 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="screenshot"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center space-x-2">
|
||||
{/* Tooltip 部分 */}
|
||||
|
||||
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
id="screenshot"
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormLabel
|
||||
htmlFor="screenshot"
|
||||
className="text-sm font-medium leading-none"
|
||||
>
|
||||
是否插入视频截图
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full bg-primary cursor-pointer"
|
||||
>
|
||||
{isGenerating ? "正在生成…" : "生成笔记"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
|
||||
{/*生成历史 */}
|
||||
<div className="flex items-center gap-2 my-4">
|
||||
<Clock className="h-4 w-4 text-neutral-500" />
|
||||
<h2 className="text-base font-medium text-neutral-900">生成历史</h2>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-auto">
|
||||
<NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
|
||||
|
||||
</div>
|
||||
|
||||
{/* 添加一些额外的说明或功能介绍 */}
|
||||
<div className="mt-6 p-4 bg-primary-light rounded-lg">
|
||||
<h3 className="font-medium text-primary mb-2">功能介绍</h3>
|
||||
<ul className="text-sm space-y-2 text-neutral-600">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary font-bold">•</span>
|
||||
<span>自动提取视频内容，生成结构化笔记</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary font-bold">•</span>
|
||||
<span>支持多个视频平台，包括哔哩哔哩、YouTube等</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary font-bold">•</span>
|
||||
<span>一键复制笔记，支持Markdown格式</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary font-bold">•</span>
|
||||
<span>可选择是否插入图片</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoteForm
|
||||
15
BillNote_frontend/src/pages/components/NoteFormWrapper.tsx
Normal file
15
BillNote_frontend/src/pages/components/NoteFormWrapper.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import { useForm } from "react-hook-form"
|
||||
import { Form } from "@/components/ui/form"
|
||||
import NoteForm from "./NoteForm"
|
||||
|
||||
const NoteFormWrapper = () => {
|
||||
const form = useForm()
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<NoteForm />
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoteFormWrapper
|
||||
100
BillNote_frontend/src/pages/components/NoteHistory.tsx
Normal file
100
BillNote_frontend/src/pages/components/NoteHistory.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { useTaskStore } from "@/store/taskStore"
|
||||
import { FC } from "react"
|
||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Trash ,Clock} from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
||||
|
||||
interface NoteHistoryProps {
|
||||
onSelect: (taskId: string) => void
|
||||
selectedId: string | null
|
||||
}
|
||||
|
||||
const NoteHistory: FC<NoteHistoryProps> = ({ onSelect, selectedId }) => {
|
||||
const tasks = useTaskStore((state) => state.tasks)
|
||||
const removeTask = useTaskStore((state) => state.removeTask)
|
||||
|
||||
if (tasks.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-6 bg-neutral-50 rounded-md border border-neutral-200">
|
||||
<p className="text-sm text-neutral-500">暂无历史记录</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-auto max-h-[20vh] sm:max-h-[10vh]">
|
||||
|
||||
<div className="flex flex-col space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className={cn(
|
||||
"flex items-center gap-4 p-3 cursor-pointer transition hover:bg-neutral-50 rounded-md border",
|
||||
selectedId === task.id && "border-primary bg-primary-light"
|
||||
)}
|
||||
onClick={() => onSelect(task.id)}
|
||||
>
|
||||
{/* 封面图 */}
|
||||
<img
|
||||
src={task.audioMeta.cover_url
|
||||
? `/api/image_proxy?url=${encodeURIComponent(task.audioMeta.cover_url)}`
|
||||
: "/placeholder.png"}
|
||||
alt="封面"
|
||||
className="w-16 h-10 object-cover rounded-md"
|
||||
/>
|
||||
|
||||
{/* 标题 + 状态 */}
|
||||
|
||||
<div className="flex items-center justify-between gap-2 min-w-0 w-full">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="font-medium max-w-[120px] truncate flex-1">{task.audioMeta.title || "未命名笔记"}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>{task.audioMeta.title || "未命名笔记"}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<div className="shrink-0">
|
||||
{task.status === "SUCCESS" && <Badge variant="default">已完成</Badge>}
|
||||
{task.status === "PENDING" && <Badge variant="outline">等待中</Badge>}
|
||||
{task.status === "FAILED" && <Badge variant="destructive">失败</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 删除按钮 */}
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
removeTask(task.id)
|
||||
}}
|
||||
className="shrink-0"
|
||||
>
|
||||
<Trash className="w-4 h-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>删除</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoteHistory
|
||||
Reference in New Issue
Block a user