使用openai对UI进行了重构
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user