使用openai对UI进行了重构

This commit is contained in:
2026-02-24 11:50:51 +08:00
parent 0c97f02e51
commit 317b9c7c26
15 changed files with 695 additions and 583 deletions
+13 -16
View File
@@ -1,4 +1,4 @@
"use client";
"use client";
import { useSearchStore } from "@/lib/search-store";
import { useEffect } from "react";
@@ -9,6 +9,7 @@ import { Search, FileText, Folder } from "lucide-react";
export function SearchCommand() {
const { isOpen, setOpen, query, setQuery } = useSearchStore();
const { pages, setActivePageId } = useEditorStore();
useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -29,34 +30,30 @@ export function SearchCommand() {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm animate-in fade-in duration-200">
<div
className="fixed inset-0"
onClick={() => setOpen(false)}
/>
<div className="relative w-full max-w-lg bg-popover border rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/70 p-4 backdrop-blur-sm animate-in fade-in duration-200">
<div className="fixed inset-0" onClick={() => setOpen(false)} />
<div className="ui-card relative w-full max-w-lg overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200">
<Command className="w-full">
<div className="flex items-center border-b px-3">
<div className="flex items-center border-b border-border/70 px-3">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<Command.Input
placeholder="搜索文档..."
placeholder="搜索文档或标签..."
value={query}
onValueChange={setQuery}
className="flex h-12 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
className="flex h-12 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
/>
</div>
<Command.List className="max-h-[300px] overflow-y-auto p-2">
<Command.Empty className="py-6 text-center text-sm text-muted-foreground"></Command.Empty>
<Command.List className="max-h-[320px] overflow-y-auto p-2">
<Command.Empty className="py-6 text-center text-sm text-muted-foreground"></Command.Empty>
<Command.Group heading="文档">
{pages.map((page) => (
<Command.Item
key={page.id}
value={`${page.title} ${page.tags?.join(" ")}`} // Search by title AND tags
value={`${page.title} ${(page.tags || []).join(" ")}`}
onSelect={() => runCommand(() => setActivePageId(page.id))}
className="flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm cursor-pointer hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground transition-colors"
className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground"
>
{page.type === 'folder' ? <Folder size={14} className="text-blue-400" /> : <FileText size={14} />}
{page.type === "folder" ? <Folder size={14} className="text-blue-500" /> : <FileText size={14} />}
<span>{page.title || "无标题"}</span>
</Command.Item>
))}