+
);
}
diff --git a/src/components/settings/ApiKeyManager.tsx b/src/components/settings/ApiKeyManager.tsx
index d5b332a..3e90089 100644
--- a/src/components/settings/ApiKeyManager.tsx
+++ b/src/components/settings/ApiKeyManager.tsx
@@ -13,6 +13,13 @@ import {
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Info } from "lucide-react";
import { storage } from "@/utils/storage";
import { useToast } from "@/hooks/use-toast";
@@ -84,7 +91,21 @@ export function ApiKeyManager() {
输入您的API KEY
-
+
+
+
+
+
+
+
+
+
+ 请输入您的 OpenAI API Key。此密钥仅存储在本地浏览器中，不会上传到服务器。
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选择用于 AI 阅读的模型。免费模型有使用限制，付费模型按 token 计费。
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 设置阅读提醒的休息间隔时间，帮助您合理安排阅读节奏。
+
+
+
+
+
,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..90b71e4
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..30dacc9
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..5a20503
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSubContent.displayName =
+ DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ svg]:size-4 [&>svg]:shrink-0",
+ inset && "pl-8",
+ className
+ )}
+ {...props}
+ />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => {
+ return (
+
+ )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..fdcb511
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..4fc3b47
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, value, ...props }, ref) => (
+
+
+
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
new file mode 100644
index 0000000..12d81c4
--- /dev/null
+++ b/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(
+ (
+ { className, orientation = "horizontal", decorative = true, ...props },
+ ref
+ ) => (
+
+ )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+export { Skeleton }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..99ad630
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/pages/add.tsx b/src/pages/add.tsx
deleted file mode 100644
index 11fcdd0..0000000
--- a/src/pages/add.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import {
- Card,
- CardContent,
- CardDescription,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { BorderBeam } from "@/components/magicui/border-beam";
-import MainLayout from "@/layouts/MainLayout";
-import {
- Breadcrumb,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbList,
- BreadcrumbPage,
- BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
-import { useToast } from "@/hooks/use-toast";
-import { useState, useLayoutEffect, useEffect, useReducer } from "react";
-import { throttle } from "@/utils/helper";
-import { Book } from "@/components/article";
-import { useBookContext } from "@/contexts/BookContext";
-import { BookProps } from "@/types/book";
-
-type ActionProps = {
- type: "init" | "update" | "delete";
- book?: BookProps;
- books?: BookProps[];
-};
-// 限制历史记录数量
-const MAX_HISTORY_COUNT = 10;
-
-function AddPage() {
- const { toast } = useToast();
- const [bookUrl, setBookUrl] = useState("");
- const [displayBookUrl, setDisplayBookUrl] = useState("");
- useBookContext();
- const [prevBookUrl, setPrevBookUrl] = useState("");
- const reducerAction = (
- state: BookProps[],
- action: ActionProps
- ): BookProps[] => {
- switch (action.type) {
- case "init":
- return action.books || [];
- case "update":
- if (action.book) {
- // 如果当前书籍已经存在，则不添加
- if (state.some((book) => book.url === action.book?.url)) {
- return state;
- }
- // 如果state的长度大于MAX_HISTORY_COUNT，则删除最旧的书籍
- if (state.length >= MAX_HISTORY_COUNT) {
- return state.slice(0, MAX_HISTORY_COUNT - 1);
- }
- const newBooks = [action.book, ...state];
- localStorage.setItem("bookInfo", JSON.stringify(newBooks));
- return newBooks;
- }
- return state;
- default:
- return state;
- }
- };
- const [books, booksDispatch] = useReducer(reducerAction, []);
-
- const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault();
- const form = e.target as HTMLFormElement;
- const currentBookUrl = (
- form.elements.namedItem("bookUrl") as HTMLInputElement
- ).value;
- // 为空，不执行
- if (!currentBookUrl) return;
-
- // 只有当当前的bookUrl与上一个不同才执行
- if (currentBookUrl !== prevBookUrl) {
- setBookUrl(currentBookUrl);
- setPrevBookUrl(currentBookUrl); // 更新上一个bookUrl
-
- if (process.env.NODE_ENV !== "production") {
- console.log("handleSubmit被执行", currentBookUrl);
- }
- toast({
- title: "添加成功",
- description: "文章链接：" + currentBookUrl,
- });
- }
- };
-
- const handleReset = () => {
- setDisplayBookUrl("");
- toast({
- title: "清除输入",
- description: "输入已清除",
- });
- };
- // init
- useLayoutEffect(() => {
- if (typeof window !== "undefined") {
- const storedBooks: BookProps[] = JSON.parse(
- localStorage.getItem("bookInfo") || "[]"
- );
- if (storedBooks) {
- booksDispatch({ type: "init", books: storedBooks });
- }
- }
- }, []);
-
- // 当input输入框输入内容时，调用
- useEffect(() => {
- if (bookUrl) {
- if (process.env.NODE_ENV !== "production") {
- console.log("url被更新", bookUrl);
- }
- const fetchBookInfo = async () => {
- const res = await fetch(`/api/bookInfo?url=${bookUrl}`);
- const book: BookProps = await res.json();
- if (book) {
- if (process.env.NODE_ENV !== "production") {
- console.log("请求成功", book);
- }
- booksDispatch({ type: "update", book });
- }
- };
- fetchBookInfo();
- }
- }, [bookUrl]);
-
- return (
-
-
-
-
-
- Home
-
-
-
- 控制台
-
-
-
- 更新书籍
-
-
-
-
-
- 更新书籍
- 输入你要增加的书籍链接
-
-
-
-
-
- {books.map((book, index) => {
- if (index === 0) {
- return (
-
- );
- }
- return
;
- })}
-
-
错误：{error}
-
) : (
diff --git a/src/pages/bookshelf.tsx b/src/pages/bookshelf.tsx
new file mode 100644
index 0000000..503ef9f
--- /dev/null
+++ b/src/pages/bookshelf.tsx
@@ -0,0 +1,265 @@
+"use client";
+
+import MainLayout from "@/layouts/MainLayout";
+import BreadcrumbNav from "@/components/comm/BreadcrumbNav";
+import {
+ BookForm,
+ BookList,
+ ClearBookshelf,
+ ConfirmDialog,
+} from "@/components/bookshelf";
+import { useToast } from "@/hooks/use-toast";
+import { useState, useLayoutEffect, useEffect, useReducer } from "react";
+import { BookProps } from "@/types/book";
+import { storage } from "@/utils/storage";
+import { useBookContext } from "@/contexts/BookContext";
+
+type ActionProps = {
+ type: "init" | "update" | "delete" | "delete-multiple" | "clear";
+ book?: BookProps;
+ books?: BookProps[];
+ url?: string;
+ urls?: string[];
+};
+
+// 限制历史记录数量
+const MAX_HISTORY_COUNT = 10;
+
+function BookshelfPage() {
+ const { toast } = useToast();
+ useBookContext();
+ const [bookUrl, setBookUrl] = useState("");
+ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+ const [clearDialogOpen, setClearDialogOpen] = useState(false);
+ const [bookToDelete, setBookToDelete] = useState(null);
+ const [selectedBooks, setSelectedBooks] = useState>(new Set());
+ const [showDelete, setShowDelete] = useState(false);
+
+ const reducerAction = (
+ state: BookProps[],
+ action: ActionProps
+ ): BookProps[] => {
+ switch (action.type) {
+ case "init":
+ return action.books || [];
+ case "update":
+ if (action.book) {
+ // 如果当前书籍已经存在，则不添加
+ if (state.some((book) => book.url === action.book?.url)) {
+ return state;
+ }
+ // 如果state的长度大于MAX_HISTORY_COUNT，则删除最旧的书籍
+ const newBooks =
+ state.length >= MAX_HISTORY_COUNT
+ ? [action.book, ...state.slice(0, MAX_HISTORY_COUNT - 1)]
+ : [action.book, ...state];
+ storage.set("bookInfo", newBooks);
+ return newBooks;
+ }
+ return state;
+ case "delete":
+ if (action.url) {
+ const newBooks = state.filter((book) => book.url !== action.url);
+ storage.set("bookInfo", newBooks);
+ return newBooks;
+ }
+ return state;
+ case "delete-multiple":
+ if (action.urls && action.urls.length > 0) {
+ const newBooks = state.filter(
+ (book) => !action.urls?.includes(book.url || "")
+ );
+ storage.set("bookInfo", newBooks);
+ return newBooks;
+ }
+ return state;
+ case "clear":
+ storage.set("bookInfo", []);
+ return [];
+ default:
+ return state;
+ }
+ };
+
+ const [books, booksDispatch] = useReducer(reducerAction, []);
+
+ // init
+ useLayoutEffect(() => {
+ const storedBooks = storage.get("bookInfo", []);
+ if (storedBooks && storedBooks.length > 0) {
+ booksDispatch({ type: "init", books: storedBooks });
+ }
+ }, []);
+
+ // 当bookUrl更新时，获取书籍信息
+ useEffect(() => {
+ if (bookUrl) {
+ if (process.env.NODE_ENV !== "production") {
+ console.log("url被更新", bookUrl);
+ }
+ const fetchBookInfo = async () => {
+ try {
+ const res = await fetch(`/api/bookInfo?url=${bookUrl}`);
+ if (!res.ok) {
+ throw new Error("Failed to fetch book info");
+ }
+ const bookData = await res.json();
+ if (bookData && !("error" in bookData)) {
+ const book: BookProps = bookData;
+ if (process.env.NODE_ENV !== "production") {
+ console.log("请求成功", book);
+ }
+ booksDispatch({ type: "update", book });
+ } else {
+ toast({
+ title: "添加失败",
+ description:
+ "error" in bookData
+ ? String(bookData.error)
+ : "无法获取书籍信息",
+ variant: "destructive",
+ });
+ }
+ } catch {
+ toast({
+ title: "添加失败",
+ description: "无法获取书籍信息，请检查链接是否正确",
+ variant: "destructive",
+ });
+ }
+ };
+ fetchBookInfo();
+ }
+ }, [bookUrl, toast]);
+
+ const handleBookAdd = (url: string) => {
+ setBookUrl(url);
+ };
+
+ const handleDeleteClick = (url: string) => {
+ setBookToDelete(url);
+ setDeleteDialogOpen(true);
+ };
+
+ const handleDeleteConfirm = () => {
+ if (bookToDelete) {
+ // 如果是批量删除（包含逗号）
+ if (bookToDelete.includes(",")) {
+ const urls = bookToDelete.split(",");
+ booksDispatch({ type: "delete-multiple", urls });
+ toast({
+ title: "批量删除成功",
+ description: `已删除 ${urls.length} 本书籍`,
+ });
+ setSelectedBooks(new Set());
+ setShowDelete(false);
+ } else {
+ // 单个删除
+ booksDispatch({ type: "delete", url: bookToDelete });
+ toast({
+ title: "删除成功",
+ description: "书籍已删除",
+ });
+ }
+ setBookToDelete(null);
+ }
+ };
+
+ const handleClearConfirm = () => {
+ booksDispatch({ type: "clear" });
+ setSelectedBooks(new Set());
+ setShowDelete(false);
+ };
+
+ const toggleBookSelection = (url: string) => {
+ const newSelected = new Set(selectedBooks);
+ if (newSelected.has(url)) {
+ newSelected.delete(url);
+ } else {
+ newSelected.add(url);
+ }
+ setSelectedBooks(newSelected);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ {showDelete && selectedBooks.size > 0 && (
+
+ )}
+
+
setClearDialogOpen(true)}
+ />
+
+
+
+