mirror of
https://github.com/JefferyHcool/BiliNote.git
synced 2026-05-12 19:40:31 +08:00
:feat 新增模型配置页面和相关功能
- 新增模型配置页面组件和路由 - 实现模型配置表单和相关逻辑- 添加全局配置入口和功能- 优化首页布局和样式- 新增 404 页面组件 - 更新部分组件样式和结构
This commit is contained in:
Jefferyhcool
@@ -1,16 +1,36 @@
|
||||
|
||||
import './App.css'
|
||||
import {HomePage} from "./pages/Home.tsx";
|
||||
import {useTaskPolling} from "@/hooks/useTaskPolling.ts";
|
||||
|
||||
import { HomePage } from './pages/HomePage/Home.tsx'
|
||||
import { useTaskPolling } from '@/hooks/useTaskPolling.ts'
|
||||
import SettingPage from './pages/SettingPage/index.tsx'
|
||||
import { BrowserRouter, Navigate, Routes } from 'react-router-dom'
|
||||
import { Route } from 'react-router-dom'
|
||||
import Index from '@/pages/Index.tsx'
|
||||
import NotFoundPage from '@/pages/NotFoundPage' //
|
||||
import Model from '@/pages/SettingPage/Model.tsx'
|
||||
import ProviderForm from '@/components/Form/modelForm/Form.tsx'
|
||||
function App() {
|
||||
useTaskPolling(3000) // 每 3 秒轮询一次
|
||||
useTaskPolling(3000) // 每 3 秒轮询一次
|
||||
|
||||
return (
|
||||
<>
|
||||
<HomePage></HomePage>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<Index />}>
|
||||
<Route index element={<HomePage />} />
|
||||
<Route path="settings" element={<SettingPage />}>
|
||||
<Route index element={<Navigate to="model" replace />} />
|
||||
<Route path="model" element={<Model />}>
|
||||
<Route index element={<Navigate to="openai" replace />} />
|
||||
<Route path=":id" element={<ProviderForm />} />
|
||||
</Route>
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Route>
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
153
BillNote_frontend/src/components/Form/modelForm/Form.tsx
Normal file
153
BillNote_frontend/src/components/Form/modelForm/Form.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
Form,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useProviderStore } from '@/store/providerStore';
|
||||
import {useEffect, useState} from 'react';
|
||||
|
||||
// ✅ 表单校验 schema
|
||||
const ProviderSchema = z.object({
|
||||
name: z.string().min(2, '名称不能少于 2 个字符'),
|
||||
apiKey: z.string().optional(),
|
||||
baseUrl: z.string().url('必须是合法 URL'),
|
||||
type: z.string(), // 只展示，不可改
|
||||
});
|
||||
|
||||
type ProviderFormValues = z.infer<typeof ProviderSchema>;
|
||||
|
||||
const ProviderForm = () => {
|
||||
const rawId= useParams();
|
||||
console.log('rawId',rawId)
|
||||
// @ts-ignore
|
||||
const [providerName, idPart] = rawId.id.split('&');
|
||||
const [id,setId ]= useState(Number(idPart?.split('=')[1])) // => "1"
|
||||
const getProviderById = useProviderStore((state) => state.getProviderById);
|
||||
const provider = getProviderById(id);
|
||||
|
||||
const form = useForm<ProviderFormValues>({
|
||||
resolver: zodResolver(ProviderSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
apiKey: '',
|
||||
baseUrl: '',
|
||||
type: '',
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log(provider)
|
||||
// if (provider) {
|
||||
// form.reset({
|
||||
// name: provider.name,
|
||||
// apiKey: provider.apiKey,
|
||||
// baseUrl: provider.baseUrl,
|
||||
// type: provider.type,
|
||||
// });
|
||||
// }
|
||||
}, [id,provider, form]);
|
||||
|
||||
const isBuiltIn = provider?.type === 'built-in';
|
||||
|
||||
const onSubmit = (values: ProviderFormValues) => {
|
||||
console.log('📝 提交表单数据:', values);
|
||||
// TODO: 提交接口 /update_provider
|
||||
};
|
||||
|
||||
// if (!provider) return <div className="p-4">加载中...</div>;
|
||||
|
||||
return (
|
||||
|
||||
<Form {...form}>
|
||||
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="w-full max-w-xl p-4 flex flex-col gap-4"
|
||||
>
|
||||
<div className="text-lg font-bold">模型供应商配置</div>
|
||||
|
||||
{/* 名称 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-4">
|
||||
<FormLabel className="w-24 text-right">名称</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled={isBuiltIn} className="flex-1" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* API Key */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="apiKey"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-4">
|
||||
<FormLabel className="w-24 text-right">API Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder={'sk-xxx'} {...field} className="flex-1" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
|
||||
|
||||
</FormItem>
|
||||
|
||||
|
||||
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Base URL */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="baseUrl"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-4">
|
||||
<FormLabel className="w-24 text-right">API 代理地址</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} className="flex-1" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* 类型 */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-4">
|
||||
<FormLabel className="w-24 text-right">类型</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} disabled className="flex-1" />
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="pt-2">
|
||||
<Button type="submit" disabled={!form.formState.isDirty}>
|
||||
保存修改
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProviderForm;
|
||||
33
BillNote_frontend/src/components/Form/modelForm/Provider.tsx
Normal file
33
BillNote_frontend/src/components/Form/modelForm/Provider.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import ProviderCard from '@/components/Form/modelForm/components/providerCard.tsx'
|
||||
import { Button } from '@/components/ui/button.tsx'
|
||||
import { useProviderStore } from '@/store/providerStore'
|
||||
|
||||
const Provider = () => {
|
||||
const providers = useProviderStore(state => state.provider)
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className={'search flex gap-1 py-1.5'}>
|
||||
<Button type={'button'} className="w-full">
|
||||
添加模型供应商
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-sm font-light">模型供应商列表</div>
|
||||
<div>
|
||||
{providers &&
|
||||
providers.map((provider, index) => {
|
||||
return (
|
||||
<ProviderCard
|
||||
key={index}
|
||||
providerName={provider.name}
|
||||
Icon={provider.logo}
|
||||
id={provider.id}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Provider
|
||||
@@ -0,0 +1,6 @@
|
||||
.card {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.card:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { FC } from 'react'
|
||||
import styles from './index.module.css'
|
||||
import {useNavigate, useParams} from 'react-router-dom'
|
||||
import AILogo from "@/components/Icons";
|
||||
export interface IProviderCardProps {
|
||||
id: string
|
||||
providerName: string
|
||||
Icon: string
|
||||
}
|
||||
const ProviderCard: FC<IProviderCardProps> = ({ providerName, Icon, id }: IProviderCardProps) => {
|
||||
const navigate = useNavigate()
|
||||
const handleClick = () => {
|
||||
navigate(`/settings/model/${providerName}&id=${id}`)
|
||||
}
|
||||
const rawId= useParams();
|
||||
console.log('rawId',rawId)
|
||||
// @ts-ignore
|
||||
const { id: currentId } = useParams();
|
||||
const isActive = currentId === id
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
handleClick()
|
||||
}}
|
||||
className={
|
||||
styles.card + ' flex h-14 items-center justify-between rounded border border-[#f3f3f3] p-2'
|
||||
+(isActive ? ' bg-[#F0F0F0] font-semibold text-blue-600' : '')
|
||||
}
|
||||
>
|
||||
<div className="flex items-center text-lg">
|
||||
<div className="h-9 w-9 flex items-center">
|
||||
<AILogo name={Icon} />
|
||||
</div>
|
||||
<div className="font-semibold">{providerName}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default ProviderCard
|
||||
4
BillNote_frontend/src/components/Icons/iconMap.ts
Normal file
4
BillNote_frontend/src/components/Icons/iconMap.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
// iconMap.ts
|
||||
import * as Icons from '@lobehub/icons'
|
||||
|
||||
export const IconMap = Icons;
|
||||
24
BillNote_frontend/src/components/Icons/index.tsx
Normal file
24
BillNote_frontend/src/components/Icons/index.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import * as Icons from '@lobehub/icons';
|
||||
|
||||
interface AILogoProps {
|
||||
name: string; // 图标名称（区分大小写！如 OpenAI、DeepSeek）
|
||||
style?: 'Color' | 'Text' | 'Outlined' | 'Glyph';
|
||||
size?: number;
|
||||
}
|
||||
|
||||
const AILogo = ({ name, style = 'Color', size = 24 }: AILogoProps) => {
|
||||
const Icon = Icons[name as keyof typeof Icons];
|
||||
if (!Icon) {
|
||||
console.error(`❌ 图标组件不存在: ${name}`);
|
||||
return <span style={{ fontSize: size }}>🚫</span>;
|
||||
}
|
||||
|
||||
const Variant = Icon[style as keyof typeof Icon];
|
||||
if (!Variant) {
|
||||
return <Icon size={size} />;
|
||||
}
|
||||
|
||||
return <Variant size={size} />;
|
||||
};
|
||||
|
||||
export default AILogo;
|
||||
13
BillNote_frontend/src/components/Lottie/404.tsx
Normal file
13
BillNote_frontend/src/components/Lottie/404.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { FC } from 'react'
|
||||
import Lottie from 'lottie-react'
|
||||
import Animation from '@/assets/Lottie/404.json'
|
||||
|
||||
const NotFound: FC = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<Lottie animationData={Animation} loop autoplay />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFound
|
||||
@@ -3,16 +3,11 @@ import Lottie from 'lottie-react'
|
||||
import loadingJson from '@/assets/Lottie/idle.json'
|
||||
|
||||
const Idle: FC = () => {
|
||||
return (
|
||||
<div className="flex justify-center items-center ">
|
||||
<Lottie
|
||||
animationData={loadingJson}
|
||||
loop
|
||||
autoplay
|
||||
style={{ width: 350, height: 350 }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<Lottie animationData={loadingJson} loop autoplay style={{ width: 350, height: 350 }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Idle
|
||||
|
||||
@@ -3,16 +3,11 @@ import Lottie from 'lottie-react'
|
||||
import loadingJson from '@/assets/Lottie/loading.json'
|
||||
|
||||
const Loading: FC = () => {
|
||||
return (
|
||||
<div className="flex justify-center items-center ">
|
||||
<Lottie
|
||||
animationData={loadingJson}
|
||||
loop
|
||||
autoplay
|
||||
style={{ width: 150, height: 150 }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-center">
|
||||
<Lottie animationData={loadingJson} loop autoplay style={{ width: 150, height: 150 }} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Loading
|
||||
|
||||
@@ -1,26 +1,24 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from 'react'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
|
||||
secondary:
|
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
variant: 'default',
|
||||
},
|
||||
}
|
||||
)
|
||||
@@ -30,17 +28,10 @@ function Badge({
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : "span"
|
||||
}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : 'span'
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
|
||||
@@ -1,36 +1,33 @@
|
||||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from 'react'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
}
|
||||
)
|
||||
@@ -41,11 +38,11 @@ function Button({
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
}: React.ComponentProps<'button'> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const Comp = asChild ? Slot : 'button'
|
||||
|
||||
return (
|
||||
<Comp
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import * as React from "react"
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -15,12 +15,12 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
@@ -28,65 +28,48 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
className={cn('leading-none font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
import * as React from 'react'
|
||||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
|
||||
import { CheckIcon } from 'lucide-react'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Checkbox({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
|
||||
'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import * as React from 'react'
|
||||
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import {
|
||||
Controller,
|
||||
FormProvider,
|
||||
@@ -9,10 +9,10 @@ import {
|
||||
type ControllerProps,
|
||||
type FieldPath,
|
||||
type FieldValues,
|
||||
} from "react-hook-form"
|
||||
} from 'react-hook-form'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Label } from '@/components/ui/label'
|
||||
|
||||
const Form = FormProvider
|
||||
|
||||
@@ -23,9 +23,7 @@ type FormFieldContextValue<
|
||||
name: TName
|
||||
}
|
||||
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||
{} as FormFieldContextValue
|
||||
)
|
||||
const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
|
||||
|
||||
const FormField = <
|
||||
TFieldValues extends FieldValues = FieldValues,
|
||||
@@ -48,7 +46,7 @@ const useFormField = () => {
|
||||
const fieldState = getFieldState(fieldContext.name, formState)
|
||||
|
||||
if (!fieldContext) {
|
||||
throw new Error("useFormField should be used within <FormField>")
|
||||
throw new Error('useFormField should be used within <FormField>')
|
||||
}
|
||||
|
||||
const { id } = itemContext
|
||||
@@ -67,35 +65,26 @@ type FormItemContextValue = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||
{} as FormItemContextValue
|
||||
)
|
||||
const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
|
||||
|
||||
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
const id = React.useId()
|
||||
|
||||
return (
|
||||
<FormItemContext.Provider value={{ id }}>
|
||||
<div
|
||||
data-slot="form-item"
|
||||
className={cn("grid gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
<div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
|
||||
</FormItemContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function FormLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
const { error, formItemId } = useFormField()
|
||||
|
||||
return (
|
||||
<Label
|
||||
data-slot="form-label"
|
||||
data-error={!!error}
|
||||
className={cn("data-[error=true]:text-destructive", className)}
|
||||
className={cn('data-[error=true]:text-destructive', className)}
|
||||
htmlFor={formItemId}
|
||||
{...props}
|
||||
/>
|
||||
@@ -109,33 +98,29 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
||||
<Slot
|
||||
data-slot="form-control"
|
||||
id={formItemId}
|
||||
aria-describedby={
|
||||
!error
|
||||
? `${formDescriptionId}`
|
||||
: `${formDescriptionId} ${formMessageId}`
|
||||
}
|
||||
aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
|
||||
aria-invalid={!!error}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
|
||||
const { formDescriptionId } = useFormField()
|
||||
|
||||
return (
|
||||
<p
|
||||
data-slot="form-description"
|
||||
id={formDescriptionId}
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
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">) {
|
||||
<p
|
||||
data-slot="form-message"
|
||||
id={formMessageId}
|
||||
className={cn("text-destructive text-sm", className)}
|
||||
className={cn('text-destructive text-sm', className)}
|
||||
{...props}
|
||||
>
|
||||
{body}
|
||||
|
||||
@@ -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 (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
|
||||
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,19 +1,16 @@
|
||||
"use client"
|
||||
'use client'
|
||||
|
||||
import * as React from "react"
|
||||
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||
import * as React from 'react'
|
||||
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
import * as React from 'react'
|
||||
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function ScrollArea({
|
||||
className,
|
||||
@@ -11,7 +11,7 @@ function ScrollArea({
|
||||
return (
|
||||
<ScrollAreaPrimitive.Root
|
||||
data-slot="scroll-area"
|
||||
className={cn("relative", className)}
|
||||
className={cn('relative', className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport
|
||||
@@ -28,7 +28,7 @@ function ScrollArea({
|
||||
|
||||
function ScrollBar({
|
||||
className,
|
||||
orientation = "vertical",
|
||||
orientation = 'vertical',
|
||||
...props
|
||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
||||
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}
|
||||
|
||||
@@ -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<typeof SelectPrimitive.Root>) {
|
||||
function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
||||
return <SelectPrimitive.Root data-slot="select" {...props} />
|
||||
}
|
||||
|
||||
function SelectGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
||||
return <SelectPrimitive.Group data-slot="select-group" {...props} />
|
||||
}
|
||||
|
||||
function SelectValue({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
||||
return <SelectPrimitive.Value data-slot="select-value" {...props} />
|
||||
}
|
||||
|
||||
function SelectTrigger({
|
||||
className,
|
||||
size = "default",
|
||||
size = 'default',
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
||||
size?: "sm" | "default"
|
||||
size?: 'sm' | 'default'
|
||||
}) {
|
||||
return (
|
||||
<SelectPrimitive.Trigger
|
||||
@@ -51,7 +45,7 @@ function SelectTrigger({
|
||||
function SelectContent({
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
position = 'popper',
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
||||
return (
|
||||
@@ -59,9 +53,9 @@ function SelectContent({
|
||||
<SelectPrimitive.Content
|
||||
data-slot="select-content"
|
||||
className={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
|
||||
position === "popper" &&
|
||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
|
||||
position === 'popper' &&
|
||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
@@ -70,9 +64,9 @@ function SelectContent({
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
className={cn(
|
||||
"p-1",
|
||||
position === "popper" &&
|
||||
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
|
||||
'p-1',
|
||||
position === 'popper' &&
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
@@ -83,14 +77,11 @@ function SelectContent({
|
||||
)
|
||||
}
|
||||
|
||||
function SelectLabel({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
|
||||
return (
|
||||
<SelectPrimitive.Label
|
||||
data-slot="select-label"
|
||||
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -127,7 +118,7 @@ function SelectSeparator({
|
||||
return (
|
||||
<SelectPrimitive.Separator
|
||||
data-slot="select-separator"
|
||||
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -140,10 +131,7 @@ function SelectScrollUpButton({
|
||||
return (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
data-slot="select-scroll-up-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUpIcon className="size-4" />
|
||||
@@ -158,10 +146,7 @@ function SelectScrollDownButton({
|
||||
return (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
data-slot="select-scroll-down-button"
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDownIcon className="size-4" />
|
||||
|
||||
@@ -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 (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps["theme"]}
|
||||
theme={theme as ToasterProps['theme']}
|
||||
className="toaster group"
|
||||
style={
|
||||
{
|
||||
"--normal-bg": "var(--popover)",
|
||||
"--normal-text": "var(--popover-foreground)",
|
||||
"--normal-border": "var(--border)",
|
||||
'--normal-bg': 'var(--popover)',
|
||||
'--normal-text': 'var(--popover-foreground)',
|
||||
'--normal-border': 'var(--border)',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
{...props}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
import * as React from 'react'
|
||||
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function TooltipProvider({
|
||||
delayDuration = 0,
|
||||
@@ -16,9 +16,7 @@ function TooltipProvider({
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
@@ -26,9 +24,7 @@ function Tooltip({
|
||||
)
|
||||
}
|
||||
|
||||
function TooltipTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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])
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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<IProps> = ({ NoteForm, Preview }) => {
|
||||
const [, setShowSettings] = useState(false)
|
||||
|
||||
const HomeLayout: FC<HomeLayoutProps> = ({ form, preview }) => {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
<div className="flex flex-1">
|
||||
{/* 左侧部分：Header + 表单 */}
|
||||
<aside className="w-[400px] bg-white border-r border-neutral-200 flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="h-16 flex items-center px-6 gap-2">
|
||||
<div className="w-10 h-10 rounded-2xl overflow-hidden flex justify-center items-center">
|
||||
<img src="/icon.svg" alt="logo" className="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
|
||||
</header>
|
||||
|
||||
{/* 表单内容 */}
|
||||
<div className="flex-1 p-4 overflow-auto">
|
||||
{form}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 右侧预览区域 */}
|
||||
<main className="flex-1 h-screen p-6 bg-white overflow-hidden">
|
||||
{preview}
|
||||
</main>
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col bg-white">
|
||||
<div className="flex flex-1">
|
||||
{/* 左侧部分：Header + 表单 */}
|
||||
<aside className="flex w-[400px] flex-col border-r border-neutral-200 bg-white">
|
||||
{/* Header */}
|
||||
<header className="flex h-16 items-center justify-between px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
|
||||
<img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
|
||||
</div>
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger onClick={() => setShowSettings(true)}>
|
||||
<Link to={'/settings'}>
|
||||
<SlidersHorizontal className="text-muted-foreground hover:text-primary cursor-pointer" />
|
||||
</Link>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<span>全局配置</span>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 页脚 */}
|
||||
{/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
|
||||
{/* © 2025 BiliNote. All rights reserved.*/}
|
||||
{/*</footer>*/}
|
||||
</div>
|
||||
)
|
||||
{/* 表单内容 */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{/*<NoteForm />*/}
|
||||
{NoteForm}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 右侧预览区域 */}
|
||||
<main className="h-screen flex-1 overflow-hidden bg-white p-6">
|
||||
{/*<Outlet />*/}
|
||||
{Preview}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* 页脚 */}
|
||||
{/*<footer className="h-12 bg-white shadow-inner flex items-center justify-center text-sm text-neutral-600">*/}
|
||||
{/* © 2025 BiliNote. All rights reserved.*/}
|
||||
{/*</footer>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HomeLayout
|
||||
|
||||
@@ -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<RootLayoutProps> = ({ children }) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-100 text-neutral-900 font-sans">
|
||||
<Toaster
|
||||
position="top-center" // 顶部居中显示
|
||||
toastOptions={{
|
||||
style: {
|
||||
borderRadius: '8px',
|
||||
background: '#333',
|
||||
color: '#fff',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-100 font-sans text-neutral-900">
|
||||
<Toaster
|
||||
position="top-center" // 顶部居中显示
|
||||
toastOptions={{
|
||||
style: {
|
||||
borderRadius: '8px',
|
||||
background: '#333',
|
||||
color: '#fff',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RootLayout
|
||||
|
||||
63
BillNote_frontend/src/layouts/SettingLayout.tsx
Normal file
63
BillNote_frontend/src/layouts/SettingLayout.tsx
Normal file
@@ -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 (
|
||||
<div
|
||||
className="h-full w-full"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-muted)',
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-1">
|
||||
{/* 左侧部分：Header + 表单 */}
|
||||
<aside className="flex w-[300px] flex-col border-r border-neutral-200 bg-white">
|
||||
{/* Header */}
|
||||
<header className="flex h-16 items-center justify-between px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-2xl">
|
||||
<img src="/icon.svg" alt="logo" className="h-full w-full object-contain" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-gray-800">BiliNote</div>
|
||||
</div>
|
||||
<div>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<Link to={'/'}>
|
||||
<SlidersHorizontal className="text-muted-foreground hover:text-primary cursor-pointer" />
|
||||
</Link>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<span>返回首页</span>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 表单内容 */}
|
||||
<div className="flex-1 overflow-auto p-4">
|
||||
{/*<NoteForm />*/}
|
||||
{Menu}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* 右侧预览区域 */}
|
||||
<main className="h-screen flex-1 overflow-hidden">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default SettingLayout
|
||||
@@ -1,5 +1,5 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { clsx, type ClassValue } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
|
||||
@@ -2,12 +2,12 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import RootLayout from "./layouts/RootLayout.tsx";
|
||||
import RootLayout from './layouts/RootLayout.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<RootLayout>
|
||||
<App />
|
||||
</RootLayout>
|
||||
</StrictMode>,
|
||||
<StrictMode>
|
||||
<RootLayout>
|
||||
<App />
|
||||
</RootLayout>
|
||||
</StrictMode>
|
||||
)
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
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} />}
|
||||
|
||||
/>
|
||||
)
|
||||
}
|
||||
39
BillNote_frontend/src/pages/HomePage/Home.tsx
Normal file
39
BillNote_frontend/src/pages/HomePage/Home.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import HomeLayout from '@/layouts/HomeLayout.tsx'
|
||||
import NoteForm from '@/pages/HomePage/components/NoteForm.tsx'
|
||||
import MarkdownViewer from '@/pages/HomePage/components/MarkdownViewer.tsx'
|
||||
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
|
||||
NoteForm={<NoteForm />}
|
||||
Preview={<MarkdownViewer status={status} content={content} />}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import { useState } from 'react'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import { Button } from '@/components/ui/button.tsx'
|
||||
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="flex h-screen w-full flex-col items-center justify-center space-y-4 text-neutral-500">
|
||||
<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="flex h-screen w-full flex-col items-center justify-center space-y-3 text-neutral-500">
|
||||
<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="flex h-full w-full flex-col">
|
||||
{/* 顶部操作栏 */}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h2 className="flex items-center gap-2 text-xl font-semibold text-neutral-900">
|
||||
<FileText className="text-primary h-5 w-5" />
|
||||
笔记内容
|
||||
</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={handleCopy} variant="outline" size="sm">
|
||||
<Copy className="mr-1 h-4 w-4" />
|
||||
{copied ? '已复制' : '复制'}
|
||||
</Button>
|
||||
<Button onClick={handleDownload} variant="outline" size="sm">
|
||||
<Download className="mr-1 h-4 w-4" />
|
||||
导出 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="group relative">
|
||||
<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 items-center gap-1 rounded border border-gray-300 bg-white/70 px-2 py-1 text-xs shadow-sm transition group-hover:flex hover:bg-white"
|
||||
>
|
||||
<Copy className="h-3 w-3" />
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<code className="rounded bg-gray-100 px-1 py-0.5 text-sm" {...props}>
|
||||
{children}
|
||||
</code>
|
||||
)
|
||||
},
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-screen 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 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
|
||||
263
BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
Normal file
263
BillNote_frontend/src/pages/HomePage/components/NoteForm.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form.tsx'
|
||||
import { Input } from '@/components/ui/input.tsx'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select.tsx'
|
||||
import { Button } from '@/components/ui/button.tsx'
|
||||
import { Checkbox } from '@/components/ui/checkbox.tsx'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { z } from 'zod'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Info, Clock, Loader2 } 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 NoteHistory from '@/pages/HomePage/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 = () => {
|
||||
useTaskStore(state => state.tasks)
|
||||
const setCurrentTask = useTaskStore(state => state.setCurrentTask)
|
||||
const currentTaskId = useTaskStore(state => state.currentTaskId)
|
||||
const getCurrentTask = useTaskStore(state => state.getCurrentTask)
|
||||
const form = useForm<NoteFormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
video_url: '',
|
||||
platform: 'bilibili',
|
||||
quality: 'medium', // 默认中等质量
|
||||
screenshot: false,
|
||||
},
|
||||
})
|
||||
|
||||
const isGenerating = () => {
|
||||
console.log('🚀 isGenerating', getCurrentTask()?.status)
|
||||
return getCurrentTask()?.status === 'PENDING'
|
||||
}
|
||||
|
||||
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 h-full flex-col">
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<div className="my-3 flex items-center justify-between">
|
||||
<h2 className="block">视频链接</h2>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
|
||||
</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="my-3 flex items-center justify-between">
|
||||
<h2 className="block">音频质量</h2>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Info className="hover:text-primary h-4 w-4 cursor-pointer text-neutral-400" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="max-w-[200px] text-xs">质量越高，下载体积越大，速度越慢</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 leading-none font-medium">
|
||||
是否插入内容跳转链接
|
||||
</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 leading-none font-medium">
|
||||
是否插入视频截图
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className={'flex w-full items-center gap-2 py-1.5'}>
|
||||
{/* 提交按钮 */}
|
||||
<Button type="submit" className="bg-primary w-full" disabled={isGenerating()}>
|
||||
{isGenerating() && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isGenerating() ? '正在生成…' : '生成笔记'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
|
||||
{/*生成历史 */}
|
||||
<div className="my-4 flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-neutral-500" />
|
||||
<h2 className="text-base font-medium text-neutral-900">生成历史</h2>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-auto">
|
||||
<NoteHistory onSelect={setCurrentTask} selectedId={currentTaskId} />
|
||||
</div>
|
||||
|
||||
{/* 添加一些额外的说明或功能介绍 */}
|
||||
<div className="bg-primary-light mt-6 rounded-lg p-4">
|
||||
<h3 className="text-primary mb-2 font-medium">功能介绍</h3>
|
||||
<ul className="space-y-2 text-sm 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
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { Form } from '@/components/ui/form.tsx'
|
||||
import NoteForm from './NoteForm.tsx'
|
||||
|
||||
const NoteFormWrapper = () => {
|
||||
const form = useForm()
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<NoteForm />
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoteFormWrapper
|
||||
106
BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
Normal file
106
BillNote_frontend/src/pages/HomePage/components/NoteHistory.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { useTaskStore } from '@/store/taskStore'
|
||||
import { FC } from 'react'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area.tsx'
|
||||
import { Badge } from '@/components/ui/badge.tsx'
|
||||
import { cn } from '@/lib/utils.ts'
|
||||
import { Trash } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button.tsx'
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from '@/components/ui/tooltip.tsx'
|
||||
|
||||
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="rounded-md border border-neutral-200 bg-neutral-50 py-6 text-center">
|
||||
<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 cursor-pointer items-center gap-4 rounded-md border p-3 transition hover:bg-neutral-50',
|
||||
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="h-10 w-16 rounded-md object-cover"
|
||||
/>
|
||||
|
||||
{/* 标题 + 状态 */}
|
||||
|
||||
<div className="flex w-full min-w-0 items-center justify-between gap-2">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="max-w-[120px] flex-1 truncate font-medium">
|
||||
{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="text-muted-foreground h-4 w-4" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>删除</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoteHistory
|
||||
10
BillNote_frontend/src/pages/Index.tsx
Normal file
10
BillNote_frontend/src/pages/Index.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
const Index = () => {
|
||||
return (
|
||||
<>
|
||||
<Outlet />
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Index
|
||||
25
BillNote_frontend/src/pages/NotFoundPage/index.tsx
Normal file
25
BillNote_frontend/src/pages/NotFoundPage/index.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
// src/pages/NotFoundPage.tsx
|
||||
import NotFound from '@/components/Lottie/404.tsx'
|
||||
import { Button } from '@/components/ui/button.tsx'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
|
||||
const NotFoundPage = () => {
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen w-full flex-col items-center justify-center text-gray-500">
|
||||
<div className="text-center">
|
||||
<h1 className="mb-4 text-4xl font-bold">你好像走丢了哦！～～</h1>
|
||||
<p className="mb-4 text-lg">请检查你的网址是否正确，或者点击下面的按钮返回首页。</p>
|
||||
<Button onClick={() => navigate('/')} className="hover:underline">
|
||||
返回首页
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<NotFound />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFoundPage
|
||||
48
BillNote_frontend/src/pages/SettingPage/Menu.tsx
Normal file
48
BillNote_frontend/src/pages/SettingPage/Menu.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { BotMessageSquare, Captions, HardDriveDownload, Wrench } from 'lucide-react'
|
||||
import MenuBar, { IMenuProps } from '@/pages/SettingPage/components/menuBar.tsx'
|
||||
|
||||
const Menu = () => {
|
||||
const menuList: IMenuProps[] = [
|
||||
{
|
||||
id: 'model',
|
||||
name: 'AI 模型设置',
|
||||
icon: <BotMessageSquare />,
|
||||
path: '/settings/model',
|
||||
},
|
||||
{
|
||||
id: ' transcriber',
|
||||
name: '音频转译配置',
|
||||
icon: <Captions />,
|
||||
path: '/settings/transcriber',
|
||||
},
|
||||
//下载配置
|
||||
{
|
||||
id: 'download',
|
||||
name: '下载配置',
|
||||
icon: <HardDriveDownload />,
|
||||
path: '/settings/download',
|
||||
},
|
||||
//其他配置
|
||||
{
|
||||
id: 'other',
|
||||
name: '其他配置',
|
||||
icon: <Wrench />,
|
||||
path: '/settings/other',
|
||||
},
|
||||
]
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className={'flex w-full flex-col gap-2'}>
|
||||
<div className="text-2xl font-medium">设置</div>
|
||||
<div className="text-sm font-light text-gray-800">全局配置与模型设置</div>
|
||||
</div>
|
||||
<div className="mt-6 flex-1">
|
||||
{menuList &&
|
||||
menuList.map(item => {
|
||||
return <MenuBar key={item.id} menuItem={item} />
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Menu
|
||||
16
BillNote_frontend/src/pages/SettingPage/Model.tsx
Normal file
16
BillNote_frontend/src/pages/SettingPage/Model.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import Provider from '@/components/Form/modelForm/Provider.tsx'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
|
||||
const Model = () => {
|
||||
return (
|
||||
<div className={'flex h-full bg-white'}>
|
||||
<div className={'flex-1/5 border-r border-neutral-200 p-2'}>
|
||||
<Provider></Provider>
|
||||
</div>
|
||||
<div className={'flex-4/5'}>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Model
|
||||
@@ -0,0 +1,7 @@
|
||||
.menuBar {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
.menuBar:hover {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import styles from './index.module.css'
|
||||
import { FC, JSX } from 'react'
|
||||
import { Link, useLocation } from 'react-router-dom'
|
||||
|
||||
export interface IMenuProps {
|
||||
id: string
|
||||
name: string
|
||||
icon: JSX.Element
|
||||
path: string
|
||||
}
|
||||
|
||||
interface IMenuItem {
|
||||
menuItem: IMenuProps
|
||||
}
|
||||
|
||||
const MenuBar: FC<IMenuItem> = ({ menuItem }) => {
|
||||
const location = useLocation()
|
||||
const isActive = location.pathname.startsWith(menuItem.path + '/')
|
||||
|| location.pathname === menuItem.path
|
||||
|
||||
return (
|
||||
<Link to={menuItem.path} className="w-full">
|
||||
<div
|
||||
className={
|
||||
styles.menuBar +
|
||||
' flex h-12 w-full items-center gap-1 rounded px-2' +
|
||||
(isActive ? ' bg-[#F0F0F0] font-semibold text-blue-600' : '')
|
||||
}
|
||||
>
|
||||
<div className="h-6 w-6">{menuItem.icon}</div>
|
||||
<div className="text-[16px]">{menuItem.name}</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuBar
|
||||
17
BillNote_frontend/src/pages/SettingPage/index.tsx
Normal file
17
BillNote_frontend/src/pages/SettingPage/index.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import SettingLayout from '@/layouts/SettingLayout.tsx'
|
||||
import Menu from '@/pages/SettingPage/Menu'
|
||||
import { useProviderStore } from '@/store/providerStore'
|
||||
import { useEffect } from 'react'
|
||||
|
||||
const SettingPage = () => {
|
||||
const fetchProviderList = useProviderStore(state => state.fetchProviderList)
|
||||
useEffect(() => {
|
||||
fetchProviderList()
|
||||
}, [])
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<SettingLayout Menu={<Menu />} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default SettingPage
|
||||
@@ -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<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
|
||||
@@ -1,287 +0,0 @@
|
||||
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
|
||||
@@ -1,15 +0,0 @@
|
||||
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
|
||||
@@ -1,100 +0,0 @@
|
||||
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
|
||||
5
BillNote_frontend/src/services/model.ts
Normal file
5
BillNote_frontend/src/services/model.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import request from '@/utils/request.ts'
|
||||
|
||||
export const getProviderList = async () => {
|
||||
return await request.get('/get_all_providers')
|
||||
}
|
||||
@@ -1,97 +1,81 @@
|
||||
import request from "@/utils/request"
|
||||
import request from '@/utils/request'
|
||||
import toast from 'react-hot-toast'
|
||||
import {useTaskStore} from "@/store/taskStore";
|
||||
import request from "@/utils/request"
|
||||
interface GenerateNotePayload {
|
||||
video_url: string
|
||||
platform: "bilibili" | "youtube"
|
||||
quality: "fast" | "medium" | "slow"
|
||||
}
|
||||
|
||||
import { useTaskStore } from '@/store/taskStore'
|
||||
import request from '@/utils/request'
|
||||
export const generateNote = async (data: {
|
||||
video_url: string;
|
||||
link: undefined | boolean;
|
||||
screenshot: undefined | boolean;
|
||||
platform: string;
|
||||
quality: string
|
||||
video_url: string
|
||||
link: undefined | boolean
|
||||
screenshot: undefined | boolean
|
||||
platform: string
|
||||
quality: string
|
||||
}) => {
|
||||
try {
|
||||
const response = await request.post("/generate_note", data)
|
||||
try {
|
||||
const response = await request.post('/generate_note', data)
|
||||
|
||||
if (response.data.code!=0){
|
||||
if (response.data.msg){
|
||||
toast.error(response.data.msg)
|
||||
|
||||
}
|
||||
return null
|
||||
}
|
||||
toast.success("笔记生成任务已提交！")
|
||||
|
||||
const taskId = response.data.data.task_id
|
||||
|
||||
console.log('res',response)
|
||||
// 成功提示
|
||||
useTaskStore.getState().addPendingTask(taskId, data.platform)
|
||||
|
||||
return response.data
|
||||
} catch (e: any) {
|
||||
console.error("❌ 请求出错", e)
|
||||
|
||||
// 错误提示
|
||||
toast.error(
|
||||
"笔记生成失败，请稍后重试"
|
||||
)
|
||||
|
||||
throw e // 抛出错误以便调用方处理
|
||||
if (response.data.code != 0) {
|
||||
if (response.data.msg) {
|
||||
toast.error(response.data.msg)
|
||||
}
|
||||
return null
|
||||
}
|
||||
toast.success('笔记生成任务已提交！')
|
||||
|
||||
const taskId = response.data.data.task_id
|
||||
|
||||
console.log('res', response)
|
||||
// 成功提示
|
||||
useTaskStore.getState().addPendingTask(taskId, data.platform)
|
||||
|
||||
return response.data
|
||||
} catch (e: any) {
|
||||
console.error('❌ 请求出错', e)
|
||||
|
||||
// 错误提示
|
||||
toast.error('笔记生成失败，请稍后重试')
|
||||
|
||||
throw e // 抛出错误以便调用方处理
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const delete_task = async ({video_id, platform}) => {
|
||||
try {
|
||||
const data={
|
||||
video_id,platform
|
||||
}
|
||||
const res = await request.post("/delete_task",
|
||||
data
|
||||
)
|
||||
|
||||
if (res.data.code === 0) {
|
||||
toast.success("任务已成功删除")
|
||||
return res.data
|
||||
} else {
|
||||
toast.error(res.data.message || "删除失败")
|
||||
throw new Error(res.data.message || "删除失败")
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error("请求异常，删除任务失败")
|
||||
console.error("❌ 删除任务失败:", e)
|
||||
throw e
|
||||
export const delete_task = async ({ video_id, platform }) => {
|
||||
try {
|
||||
const data = {
|
||||
video_id,
|
||||
platform,
|
||||
}
|
||||
const res = await request.post('/delete_task', data)
|
||||
|
||||
if (res.data.code === 0) {
|
||||
toast.success('任务已成功删除')
|
||||
return res.data
|
||||
} else {
|
||||
toast.error(res.data.message || '删除失败')
|
||||
throw new Error(res.data.message || '删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error('请求异常，删除任务失败')
|
||||
console.error('❌ 删除任务失败:', e)
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
export const get_task_status = async (task_id: string) => {
|
||||
try {
|
||||
const response = await request.get('/task_status/' + task_id)
|
||||
|
||||
export const get_task_status=async (task_id:string)=>{
|
||||
try {
|
||||
const response = await request.get("/task_status/"+task_id)
|
||||
|
||||
if (response.data.code==0 && response.data.status=='SUCCESS') {
|
||||
// toast.success("笔记生成成功")
|
||||
}
|
||||
console.log('res',response)
|
||||
// 成功提示
|
||||
|
||||
return response.data
|
||||
if (response.data.code == 0 && response.data.status == 'SUCCESS') {
|
||||
// toast.success("笔记生成成功")
|
||||
}
|
||||
catch (e){
|
||||
console.error("❌ 请求出错", e)
|
||||
console.log('res', response)
|
||||
// 成功提示
|
||||
|
||||
// 错误提示
|
||||
toast.error(
|
||||
"笔记生成失败，请稍后重试"
|
||||
)
|
||||
return response.data
|
||||
} catch (e) {
|
||||
console.error('❌ 请求出错', e)
|
||||
|
||||
throw e // 抛出错误以便调用方处理
|
||||
}
|
||||
}
|
||||
// 错误提示
|
||||
toast.error('笔记生成失败，请稍后重试')
|
||||
|
||||
throw e // 抛出错误以便调用方处理
|
||||
}
|
||||
}
|
||||
|
||||
67
BillNote_frontend/src/store/providerStore/index.ts
Normal file
67
BillNote_frontend/src/store/providerStore/index.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import { create } from 'zustand'
|
||||
import { IProvider } from '@/types'
|
||||
import { getProviderList } from '@/services/model.ts'
|
||||
|
||||
interface ProviderStore {
|
||||
provider: IProvider[]
|
||||
setProvider: (provider: IProvider) => void
|
||||
setAllProviders: (providers: IProvider[]) => void
|
||||
getProviderById: (id: number) => IProvider | undefined
|
||||
getProviderList: () => IProvider[]
|
||||
fetchProviderList: () => Promise<void>
|
||||
}
|
||||
|
||||
export const useProviderStore = create<ProviderStore>((set, get) => ({
|
||||
provider: [],
|
||||
|
||||
|
||||
// 添加或更新一个 provider
|
||||
setProvider: newProvider =>
|
||||
set(state => {
|
||||
const exists = state.provider.find(p => p.id === newProvider.id)
|
||||
if (exists) {
|
||||
return {
|
||||
provider: state.provider.map(p => (p.id === newProvider.id ? newProvider : p)),
|
||||
}
|
||||
} else {
|
||||
return { provider: [...state.provider, newProvider] }
|
||||
}
|
||||
}),
|
||||
|
||||
// 设置整个 provider 列表
|
||||
setAllProviders: providers => set({ provider: providers }),
|
||||
|
||||
// 按 id 获取单个 provider
|
||||
getProviderById: id => get().provider.find(p => p.id === id),
|
||||
|
||||
getProviderList: () => get().provider,
|
||||
fetchProviderList: async () => {
|
||||
try {
|
||||
const res = await getProviderList()
|
||||
if (res.data.code === 0) {
|
||||
set({
|
||||
provider: res.data.data.map(
|
||||
(item: {
|
||||
id: string
|
||||
name: string
|
||||
logo: string
|
||||
api_key: string
|
||||
base_url: string
|
||||
}) => {
|
||||
return {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
logo: item.logo,
|
||||
apiKey: item.api_key,
|
||||
baseUrl: item.base_url,
|
||||
type: item.type,
|
||||
}
|
||||
}
|
||||
),
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching provider list:', error)
|
||||
}
|
||||
},
|
||||
}))
|
||||
@@ -1,124 +1,120 @@
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
import {delete_task} from "@/services/note.ts";
|
||||
import { delete_task } from '@/services/note.ts'
|
||||
|
||||
export type TaskStatus = 'PENDING' | 'RUNNING' | 'SUCCESS' | 'FAILD'
|
||||
|
||||
export interface AudioMeta {
|
||||
cover_url: string
|
||||
duration: number
|
||||
file_path: string
|
||||
platform: string
|
||||
raw_info: any
|
||||
title: string
|
||||
video_id: string
|
||||
cover_url: string
|
||||
duration: number
|
||||
file_path: string
|
||||
platform: string
|
||||
raw_info: any
|
||||
title: string
|
||||
video_id: string
|
||||
}
|
||||
|
||||
export interface Segment {
|
||||
start: number
|
||||
end: number
|
||||
text: string
|
||||
start: number
|
||||
end: number
|
||||
text: string
|
||||
}
|
||||
|
||||
export interface Transcript {
|
||||
full_text: string
|
||||
language: string
|
||||
raw: any
|
||||
segments: Segment[]
|
||||
full_text: string
|
||||
language: string
|
||||
raw: any
|
||||
segments: Segment[]
|
||||
}
|
||||
|
||||
export interface Task {
|
||||
id: string
|
||||
markdown: string
|
||||
transcript: Transcript
|
||||
status: TaskStatus
|
||||
audioMeta: AudioMeta
|
||||
createdAt: string
|
||||
id: string
|
||||
markdown: string
|
||||
transcript: Transcript
|
||||
status: TaskStatus
|
||||
audioMeta: AudioMeta
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
interface TaskStore {
|
||||
tasks: Task[]
|
||||
currentTaskId: string | null
|
||||
platform:string|null
|
||||
addPendingTask: (taskId: string, platform: string) => void
|
||||
updateTaskContent: (id: string, data: Partial<Omit<Task, "id" | "createdAt">>) => void
|
||||
removeTask: (id: string) => void
|
||||
clearTasks: () => void
|
||||
setCurrentTask: (taskId: string | null) => void
|
||||
getCurrentTask: () => Task | null
|
||||
tasks: Task[]
|
||||
currentTaskId: string | null
|
||||
addPendingTask: (taskId: string, platform: string) => void
|
||||
updateTaskContent: (id: string, data: Partial<Omit<Task, 'id' | 'createdAt'>>) => void
|
||||
removeTask: (id: string) => void
|
||||
clearTasks: () => void
|
||||
setCurrentTask: (taskId: string | null) => void
|
||||
getCurrentTask: () => Task | null
|
||||
}
|
||||
|
||||
export const useTaskStore = create<TaskStore>()(
|
||||
persist(
|
||||
(set,get) => ({
|
||||
tasks: [],
|
||||
currentTaskId: null,
|
||||
persist(
|
||||
(set, get) => ({
|
||||
tasks: [],
|
||||
currentTaskId: null,
|
||||
|
||||
addPendingTask: (taskId: string,platform: string) =>
|
||||
set((state) => ({
|
||||
tasks: [
|
||||
{
|
||||
id: taskId,
|
||||
status: "PENDING",
|
||||
markdown: "",
|
||||
platform:platform,
|
||||
transcript: {
|
||||
full_text: "",
|
||||
language: "",
|
||||
raw: null,
|
||||
segments: [],
|
||||
},
|
||||
createdAt: new Date().toISOString(),
|
||||
audioMeta: {
|
||||
cover_url: "",
|
||||
duration: 0,
|
||||
file_path: "",
|
||||
platform: '',
|
||||
raw_info: null,
|
||||
title: "",
|
||||
video_id: "",
|
||||
},
|
||||
},
|
||||
...state.tasks,
|
||||
],
|
||||
currentTaskId: taskId, // 默认设置为当前任务
|
||||
})),
|
||||
|
||||
updateTaskContent: (id, data) =>
|
||||
set((state) => ({
|
||||
tasks: state.tasks.map((task) =>
|
||||
task.id === id ? { ...task, ...data } : task
|
||||
),
|
||||
})),
|
||||
getCurrentTask: () => {
|
||||
const currentTaskId = get().currentTaskId
|
||||
return get().tasks.find((task) => task.id === currentTaskId) || null
|
||||
addPendingTask: (taskId: string, platform: string) =>
|
||||
set(state => ({
|
||||
tasks: [
|
||||
{
|
||||
id: taskId,
|
||||
status: 'PENDING',
|
||||
markdown: '',
|
||||
platform: platform,
|
||||
transcript: {
|
||||
full_text: '',
|
||||
language: '',
|
||||
raw: null,
|
||||
segments: [],
|
||||
},
|
||||
createdAt: new Date().toISOString(),
|
||||
audioMeta: {
|
||||
cover_url: '',
|
||||
duration: 0,
|
||||
file_path: '',
|
||||
platform: '',
|
||||
raw_info: null,
|
||||
title: '',
|
||||
video_id: '',
|
||||
},
|
||||
},
|
||||
removeTask: async (id) => {
|
||||
const task = get().tasks.find((t) => t.id === id)
|
||||
...state.tasks,
|
||||
],
|
||||
currentTaskId: taskId, // 默认设置为当前任务
|
||||
})),
|
||||
|
||||
// 更新 Zustand 状态
|
||||
set((state) => ({
|
||||
tasks: state.tasks.filter((task) => task.id !== id),
|
||||
currentTaskId: state.currentTaskId === id ? null : state.currentTaskId,
|
||||
}))
|
||||
updateTaskContent: (id, data) =>
|
||||
set(state => ({
|
||||
tasks: state.tasks.map(task => (task.id === id ? { ...task, ...data } : task)),
|
||||
})),
|
||||
getCurrentTask: () => {
|
||||
const currentTaskId = get().currentTaskId
|
||||
return get().tasks.find(task => task.id === currentTaskId) || null
|
||||
},
|
||||
removeTask: async id => {
|
||||
const task = get().tasks.find(t => t.id === id)
|
||||
|
||||
// 调用后端删除接口（如果找到了任务）
|
||||
if (task) {
|
||||
await delete_task({
|
||||
video_id: task.audioMeta.video_id,
|
||||
platform: task.platform,
|
||||
})
|
||||
}
|
||||
},
|
||||
// 更新 Zustand 状态
|
||||
set(state => ({
|
||||
tasks: state.tasks.filter(task => task.id !== id),
|
||||
currentTaskId: state.currentTaskId === id ? null : state.currentTaskId,
|
||||
}))
|
||||
|
||||
|
||||
clearTasks: () => set({ tasks: [], currentTaskId: null }),
|
||||
|
||||
setCurrentTask: (taskId) => set({ currentTaskId: taskId }),
|
||||
}),
|
||||
{
|
||||
name: 'task-storage',
|
||||
// 调用后端删除接口（如果找到了任务）
|
||||
if (task) {
|
||||
await delete_task({
|
||||
video_id: task.audioMeta.video_id,
|
||||
platform: task.platform,
|
||||
})
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
clearTasks: () => set({ tasks: [], currentTaskId: null }),
|
||||
|
||||
setCurrentTask: taskId => set({ currentTaskId: taskId }),
|
||||
}),
|
||||
{
|
||||
name: 'task-storage',
|
||||
}
|
||||
)
|
||||
)
|
||||
|
||||
8
BillNote_frontend/src/types/index.d.ts
vendored
Normal file
8
BillNote_frontend/src/types/index.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
export interface IProvider {
|
||||
id: string
|
||||
name: string
|
||||
logo: string
|
||||
type: string
|
||||
apiKey: string
|
||||
baseUrl: string
|
||||
}
|
||||
9
BillNote_frontend/src/utils/index.ts
Normal file
9
BillNote_frontend/src/utils/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
// 解析URL
|
||||
export function parseUrl(url: string): { protocol: string, host: string, path: string } {
|
||||
const urlObj = new URL(url);
|
||||
return {
|
||||
protocol: urlObj.protocol,
|
||||
host: urlObj.host,
|
||||
path: urlObj.pathname
|
||||
};
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import axios from "axios"
|
||||
import axios from 'axios'
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: "/api", // 默认请求路径前缀
|
||||
timeout: 10000,
|
||||
baseURL: '/api', // 默认请求路径前缀
|
||||
timeout: 10000,
|
||||
})
|
||||
|
||||
export default request
|
||||
export default request
|
||||
|
||||
Reference in New Issue
Block a user