) {
)
}
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
const { formDescriptionId } = useFormField()
return (
)
}
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
const { error, formMessageId } = useFormField()
- const body = error ? String(error?.message ?? "") : props.children
+ const body = error ? String(error?.message ?? '') : props.children
if (!body) {
return null
@@ -145,7 +130,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
{body}
diff --git a/BillNote_frontend/src/components/ui/input.tsx b/BillNote_frontend/src/components/ui/input.tsx
index 03295ca..e9d655c 100644
--- a/BillNote_frontend/src/components/ui/input.tsx
+++ b/BillNote_frontend/src/components/ui/input.tsx
@@ -1,16 +1,16 @@
-import * as React from "react"
+import * as React from 'react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
return (
) {
+function Label({ className, ...props }: React.ComponentProps) {
return (
) {
return (
@@ -36,11 +36,9 @@ function ScrollBar({
data-slot="scroll-area-scrollbar"
orientation={orientation}
className={cn(
- "flex touch-none p-px transition-colors select-none",
- orientation === "vertical" &&
- "h-full w-2.5 border-l border-l-transparent",
- orientation === "horizontal" &&
- "h-2.5 flex-col border-t border-t-transparent",
+ 'flex touch-none p-px transition-colors select-none',
+ orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+ orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
className
)}
{...props}
diff --git a/BillNote_frontend/src/components/ui/select.tsx b/BillNote_frontend/src/components/ui/select.tsx
index 51f466e..2c63404 100644
--- a/BillNote_frontend/src/components/ui/select.tsx
+++ b/BillNote_frontend/src/components/ui/select.tsx
@@ -1,34 +1,28 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
-function Select({
- ...props
-}: React.ComponentProps) {
+function Select({ ...props }: React.ComponentProps) {
return
}
-function SelectGroup({
- ...props
-}: React.ComponentProps) {
+function SelectGroup({ ...props }: React.ComponentProps) {
return
}
-function SelectValue({
- ...props
-}: React.ComponentProps) {
+function SelectValue({ ...props }: React.ComponentProps) {
return
}
function SelectTrigger({
className,
- size = "default",
+ size = 'default',
children,
...props
}: React.ComponentProps & {
- size?: "sm" | "default"
+ size?: 'sm' | 'default'
}) {
return (
) {
return (
@@ -59,9 +53,9 @@ function SelectContent({
{children}
@@ -83,14 +77,11 @@ function SelectContent({
)
}
-function SelectLabel({
- className,
- ...props
-}: React.ComponentProps) {
+function SelectLabel({ className, ...props }: React.ComponentProps) {
return (
)
@@ -127,7 +118,7 @@ function SelectSeparator({
return (
)
@@ -140,10 +131,7 @@ function SelectScrollUpButton({
return (
@@ -158,10 +146,7 @@ function SelectScrollDownButton({
return (
diff --git a/BillNote_frontend/src/components/ui/sonner.tsx b/BillNote_frontend/src/components/ui/sonner.tsx
index cd62aff..2bc2d99 100644
--- a/BillNote_frontend/src/components/ui/sonner.tsx
+++ b/BillNote_frontend/src/components/ui/sonner.tsx
@@ -1,18 +1,18 @@
-import { useTheme } from "next-themes"
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner, ToasterProps } from 'sonner'
const Toaster = ({ ...props }: ToasterProps) => {
- const { theme = "system" } = useTheme()
+ const { theme = 'system' } = useTheme()
return (
) {
+function Tooltip({ ...props }: React.ComponentProps) {
return (
@@ -26,9 +24,7 @@ function Tooltip({
)
}
-function TooltipTrigger({
- ...props
-}: React.ComponentProps) {
+function TooltipTrigger({ ...props }: React.ComponentProps) {
return
}
@@ -44,7 +40,7 @@ function TooltipContent({
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
- "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+ 'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
className
)}
{...props}
diff --git a/BillNote_frontend/src/hooks/useTaskPolling.ts b/BillNote_frontend/src/hooks/useTaskPolling.ts
index ca392fb..b821820 100644
--- a/BillNote_frontend/src/hooks/useTaskPolling.ts
+++ b/BillNote_frontend/src/hooks/useTaskPolling.ts
@@ -1,46 +1,45 @@
// hooks/useTaskPolling.ts
-import { useEffect } from "react"
-import { useTaskStore } from "@/store/taskStore"
-import {get_task_status} from "@/services/note.ts";
+import { useEffect } from 'react'
+import { useTaskStore } from '@/store/taskStore'
+import { get_task_status } from '@/services/note.ts'
export const useTaskPolling = (interval = 3000) => {
- const tasks = useTaskStore(state => state.tasks)
- const updateTaskContent = useTaskStore(state => state.updateTaskContent)
- const removeTask=useTaskStore(state=>state.removeTask)
- useEffect(() => {
- const timer = setInterval(async () => {
- const pendingTasks = tasks.filter(
- (task) => task.status === "PENDING" || task.status === "running"
- )
+ const tasks = useTaskStore(state => state.tasks)
+ const updateTaskContent = useTaskStore(state => state.updateTaskContent)
+ const removeTask = useTaskStore(state => state.removeTask)
+ useEffect(() => {
+ const timer = setInterval(async () => {
+ const pendingTasks = tasks.filter(
+ task => task.status === 'PENDING' || task.status === 'running'
+ )
- for (const task of pendingTasks) {
- try {
- console.log(task)
- const res = await get_task_status(task.id)
- const {status}=res.data
+ for (const task of pendingTasks) {
+ try {
+ console.log(task)
+ const res = await get_task_status(task.id)
+ const { status } = res.data
- if (status && status !== task.status) {
- if (status === "SUCCESS") {
- const { markdown, transcript, audio_meta } = res.data.result
+ if (status && status !== task.status) {
+ if (status === 'SUCCESS') {
+ const { markdown, transcript, audio_meta } = res.data.result
- updateTaskContent(task.id, {
- status,
- markdown,
- transcript,
- audioMeta: audio_meta,
- })
- } else {
- updateTaskStatus(task.id, status)
- }
- }
- } catch (e) {
- console.error("❌ 任务轮询失败：", e)
- removeTask(task.id)
-
- }
+ updateTaskContent(task.id, {
+ status,
+ markdown,
+ transcript,
+ audioMeta: audio_meta,
+ })
+ } else {
+ updateTaskStatus(task.id, status)
}
- }, interval)
+ }
+ } catch (e) {
+ console.error('❌ 任务轮询失败：', e)
+ removeTask(task.id)
+ }
+ }
+ }, interval)
- return () => clearInterval(timer)
- }, [interval, tasks])
+ return () => clearInterval(timer)
+ }, [interval, tasks])
}
diff --git a/BillNote_frontend/src/index.css b/BillNote_frontend/src/index.css
index 61b11f3..1f0280c 100644
--- a/BillNote_frontend/src/index.css
+++ b/BillNote_frontend/src/index.css
@@ -1,5 +1,5 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@import 'tailwindcss';
+@import 'tw-animate-css';
@custom-variant dark (&:is(.dark *));
@@ -11,7 +11,7 @@
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
- --primary: #3C77FB;
+ --primary: #3c77fb;
--primary-light: #e0eeff;
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
@@ -46,8 +46,8 @@
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
- --primary: #3C77FB;
- --primary-light:#e0eeff;
+ --primary: #3c77fb;
+ --primary-light: #e0eeff;
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
diff --git a/BillNote_frontend/src/indexa.css b/BillNote_frontend/src/indexa.css
index f024e57..14a900f 100644
--- a/BillNote_frontend/src/indexa.css
+++ b/BillNote_frontend/src/indexa.css
@@ -12,7 +12,7 @@
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
- --primary: #3C77FB;
+ --primary: #3c77fb;
--primary-light: #e0eeff;
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
@@ -47,8 +47,8 @@
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
- --primary: #3C77FB;
- --primary-light:#e0eeff;
+ --primary: #3c77fb;
+ --primary-light: #e0eeff;
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
diff --git a/BillNote_frontend/src/layouts/HomeLayout.tsx b/BillNote_frontend/src/layouts/HomeLayout.tsx
index da93356..d1a323f 100644
--- a/BillNote_frontend/src/layouts/HomeLayout.tsx
+++ b/BillNote_frontend/src/layouts/HomeLayout.tsx
@@ -1,43 +1,71 @@
-import type { FC, ReactNode } from 'react'
-import { Button } from "@/components/ui/button.tsx"
+import React, { FC } from 'react'
+import { SlidersHorizontal } from 'lucide-react'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip.tsx'
-interface HomeLayoutProps {
- form: ReactNode
- preview: ReactNode
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+interface IProps {
+ NoteForm: React.ReactNode
+ Preview: React.ReactNode
}
+const HomeLayout: FC = ({ NoteForm, Preview }) => {
+ const [, setShowSettings] = useState(false)
-const HomeLayout: FC = ({ form, preview }) => {
- return (
-
-
- {/* 左侧部分：Header + 表单 */}
-
-
- {/* 右侧预览区域 */}
-
- {preview}
-
+ return (
+
+
+ {/* 左侧部分：Header + 表单 */}
+
- )
+ {/* 表单内容 */}
+
+ {/**/}
+ {NoteForm}
+
+
+
+ {/* 右侧预览区域 */}
+
+ {/**/}
+ {Preview}
+
+
+
+ {/* 页脚 */}
+ {/*
*/}
+
+ )
}
export default HomeLayout
diff --git a/BillNote_frontend/src/layouts/RootLayout.tsx b/BillNote_frontend/src/layouts/RootLayout.tsx
index f92b5bb..2b3684e 100644
--- a/BillNote_frontend/src/layouts/RootLayout.tsx
+++ b/BillNote_frontend/src/layouts/RootLayout.tsx
@@ -1,32 +1,32 @@
-import type { ReactNode, FC } from "react"
+import type { ReactNode, FC } from 'react'
// import "@/global.css"
import { Toaster } from 'react-hot-toast'
interface RootLayoutProps {
- children: ReactNode
+ children: ReactNode
}
export const metadata = {
- title: "BiliNote - 视频笔记生成器",
- description: "通过视频链接结合大模型自动生成对应的笔记",
+ title: 'BiliNote - 视频笔记生成器',
+ description: '通过视频链接结合大模型自动生成对应的笔记',
}
const RootLayout: FC
= ({ children }) => {
- return (
-
-
- {children}
-
- )
+ return (
+
+
+ {children}
+
+ )
}
export default RootLayout
diff --git a/BillNote_frontend/src/layouts/SettingLayout.tsx b/BillNote_frontend/src/layouts/SettingLayout.tsx
new file mode 100644
index 0000000..6895c76
--- /dev/null
+++ b/BillNote_frontend/src/layouts/SettingLayout.tsx
@@ -0,0 +1,63 @@
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip.tsx'
+import { Link, Outlet } from 'react-router-dom'
+import { SlidersHorizontal } from 'lucide-react'
+import React from 'react'
+interface ISettingLayoutProps {
+ Menu: React.ReactNode
+}
+const SettingLayout = ({ Menu }: ISettingLayoutProps) => {
+ return (
+
+
+ {/* 左侧部分：Header + 表单 */}
+
+
+ {/* 右侧预览区域 */}
+
+
+
+
+
+
+
+
正在生成笔记，请稍候…
+
这可能需要几秒钟时间，取决于视频长度
+
+
+
+
+
+
输入视频链接并点击“生成笔记”
+
支持哔哩哔哩、YouTube 等视频平台
+
+
+ {/* 顶部操作栏 */}
+
+
+
+ 笔记内容
+
+
+
+
+
+
+
+ {/* 滚动容器 */}
+
+
+ {(content && content != 'loading') || content != 'empty' ? (
+
+ {' '}
+
+
+ {codeContent}
+
+
+
+ )
+ }
+
+ return (
+
+ {children}
+
+ )
+ },
+ }}
+ >
+ {content}
+
+
+ ) : (
+
+
+
+
输入视频链接并点击"生成笔记"按钮
+
支持哔哩哔哩、YouTube等视频网站
+
+
+ )}
+
*/}
+ {/* {content ? (*/}
+ {/* */}
+ {/* ) : (*/}
+ {/* <>*/}
+ {/*
*/}
+ {/*
输入视频链接并点击"生成笔记"按钮
*/}
+ {/*
支持哔哩哔哩、YouTube、腾讯视频和爱奇艺
*/}
+ {/* */}
+ {/* )}*/}
+ {/*
+
+
+
+ {/*生成历史 */}
+
+
+
生成历史
+
+
+
+
+
+ {/* 添加一些额外的说明或功能介绍 */}
+
+
功能介绍
+
+ -
+ •
+ 自动提取视频内容，生成结构化笔记
+
+ -
+ •
+ 支持多个视频平台，包括哔哩哔哩、YouTube等
+
+ -
+ •
+ 一键复制笔记，支持Markdown格式
+
+ -
+ •
+ 可选择是否插入图片
+
+
+
+
+ {tasks.map(task => (
+
onSelect(task.id)}
+ >
+ {/* 封面图 */}
+
+
+ {/* 标题 + 状态 */}
+
+
+
+
+
+
+ {task.audioMeta.title || '未命名笔记'}
+
+
+
+ {task.audioMeta.title || '未命名笔记'}
+
+
+
+
+ {task.status === 'SUCCESS' && 已完成}
+ {task.status === 'PENDING' && 等待中}
+ {task.status === 'FAILED' && 失败}
+
+
+
+ {/* 删除按钮 */}
+
+
+
+
+
+
+ 删除
+
+
+
+
+ ))}
+
+
+
你好像走丢了哦！～～
+
请检查你的网址是否正确，或者点击下面的按钮返回首页。
+
+
+
+
+
+
+
+
+ {menuList &&
+ menuList.map(item => {
+ return
+ })}
+
+
+
{menuItem.icon}
+
{menuItem.name}
+
+ } />
+
+ )
+}
+export default SettingPage
diff --git a/BillNote_frontend/src/pages/components/MarkdownViewer.tsx b/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
deleted file mode 100644
index 99803d8..0000000
--- a/BillNote_frontend/src/pages/components/MarkdownViewer.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-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 = ({ 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 (
-
-
-
-
正在生成笔记，请稍候…
-
这可能需要几秒钟时间，取决于视频长度
-
-
-
-
-
-
-
输入视频链接并点击“生成笔记”
-
支持哔哩哔哩、YouTube 等视频平台
-
-
- {/* 顶部操作栏 */}
-
-
-
- 笔记内容
-
-
-
-
-
-
-
- {/* 滚动容器 */}
-
-
- {
- content && content!='loading' || content!='empty'?(
-
-
- {codeContent}
-
-
-
- )
- }
-
- return (
-
- {children}
-
- )
- }
- }}
- >
- {content}
-
- ):(
-
-
-
-
输入视频链接并点击"生成笔记"按钮
-
支持哔哩哔哩、YouTube等视频网站
-
-
- )
- }
-
*/}
- {/* {content ? (*/}
- {/* */}
- {/* ) : (*/}
- {/* <>*/}
- {/*
*/}
- {/*
输入视频链接并点击"生成笔记"按钮
*/}
- {/*
支持哔哩哔哩、YouTube、腾讯视频和爱奇艺
*/}
- {/* */}
- {/* )}*/}
- {/*