fix: 修复组件复刻与当前应用界面差异

Author: codexu

app/[lang]/components/component-gallery.tsx

@@ -238,7 +238,7 @@ export function NoteGenComponentGallery({ lang }: { lang: NoteGenReplicaLanguage
         >
           <div className="grid gap-6 lg:grid-cols-2">
             <ComponentCard title="NoteGenGlobalSearch" description={text("全局搜索面板", "Global search palette")}><NoteGenDialogBackdrop><NoteGenGlobalSearch lang={lang} /></NoteGenDialogBackdrop></ComponentCard>
-            <ComponentCard title="NoteGenRecordingOverlay" description={text("悬浮录音状态", "Floating recording state")}><NoteGenDialogBackdrop><NoteGenRecordingOverlay lang={lang} /></NoteGenDialogBackdrop></ComponentCard>
+            <ComponentCard title="NoteGenRecordingOverlay" description={text("录音对话框", "Recording dialog")}><NoteGenDialogBackdrop><NoteGenRecordingOverlay lang={lang} /></NoteGenDialogBackdrop></ComponentCard>
             <ComponentCard title="NoteGenSyncStatus" description={text("同步完成与冲突状态", "Sync and conflict states")}><div className="flex min-h-64 flex-col items-center justify-center gap-3 rounded-xl border bg-muted/25 p-4"><NoteGenSyncStatus lang={lang} /><NoteGenSyncStatus lang={lang} state="conflict" /></div></ComponentCard>
             <ComponentCard title="ImageViewer · Confirmation" description={text("图片预览与关闭确认", "Image viewer and close confirmation")}><NoteGenDialogBackdrop className="min-h-72"><NoteGenImageViewer lang={lang} /><div className="absolute bottom-4 right-4 z-20 w-64"><NoteGenConfirmationDialog lang={lang} /></div></NoteGenDialogBackdrop></ComponentCard>
             <ComponentCard title="Update · Activity" description={text("更新提示与写作活动", "Update prompt and writing activity")}><div className="grid min-h-72 gap-3 rounded-xl border bg-muted/25 p-4 sm:grid-cols-2"><NoteGenUpdatePrompt lang={lang} /><NoteGenActivityHeatmap lang={lang} /></div></ComponentCard>

components/notegen/feedback-replica.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react"
-import { AlertTriangle, ArrowRight, Check, Cloud, Command, Download, Image, Mic, RefreshCw, Search, Sparkles, Upload, X } from "lucide-react"
+import { AlertTriangle, ArrowRight, Check, Cloud, Download, File, Image, Mic, NotebookPen, Palette, Pause, RefreshCw, Search, SearchX, Sparkles, Square, Upload, X } from "lucide-react"
 
 import type { NoteGenReplicaLanguage } from "@/components/notegen/types"
 import { cn } from "@/lib/utils"
@@ -9,19 +9,19 @@ export function NoteGenDialogBackdrop({ children, className }: { children: React
 }
 
 export function NoteGenGlobalSearch({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
-  return <div className="relative z-10 w-full max-w-md overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-2xl"><div className="flex h-11 items-center gap-2 border-b px-3"><Search className="size-4 text-muted-foreground" /><span className="flex-1 text-[10px] text-muted-foreground">{lang === "en" ? "Search notes, captures and canvases…" : "搜索笔记、记录和画布……"}</span><span className="flex items-center gap-1 rounded border px-1.5 py-0.5 text-[7px] text-muted-foreground"><Command className="size-2.5" />K</span></div><div className="p-2"><p className="px-2 py-1.5 text-[7px] uppercase text-muted-foreground">{lang === "en" ? "Recent" : "最近"}</p>{[lang === "en" ? "Design principles" : "设计原则", lang === "en" ? "Product map" : "产品地图", lang === "en" ? "Today’s captures" : "今日记录"].map((item, index) => <div key={item} className={cn("flex h-8 items-center gap-2 rounded-md px-2 text-[9px]", index === 0 && "bg-accent")}><Search className="size-3 text-muted-foreground" />{item}<span className="ml-auto text-[7px] text-muted-foreground">↵</span></div>)}</div></div>
+  const filters = [lang === "en" ? "All" : "全部", lang === "en" ? "Records" : "记录", lang === "en" ? "Articles" : "文章", lang === "en" ? "Canvases" : "画布"]
+  return <div className="relative z-10 flex h-56 w-full max-w-2xl flex-col overflow-hidden rounded-xl border bg-popover text-popover-foreground shadow-2xl"><div className="flex items-center gap-3 border-b px-4 py-3"><div className="flex min-w-0 flex-1 items-center gap-2"><Search className="size-4 text-muted-foreground" /><span className="text-[10px] font-medium text-muted-foreground">{lang === "en" ? "Search notes, records and canvases…" : "搜索笔记、记录和画布……"}</span></div><span className="text-[8px] font-semibold">{lang === "en" ? "0 results" : "0 个结果"}</span><span className="h-5 w-px bg-border" /><div className="flex rounded-md border p-0.5">{filters.map((filter, index) => <span key={filter} className={cn("rounded px-2 py-1 text-[7px]", index === 0 ? "bg-accent font-medium" : "text-muted-foreground")}>{filter}</span>)}</div></div><div className="flex flex-1 flex-col items-center justify-center"><SearchX className="size-8 text-muted-foreground" /><p className="mt-2 text-[10px] font-medium">{lang === "en" ? "Search notes, records and canvases" : "搜索笔记、记录和画布"}</p><p className="mt-1 text-[8px] text-muted-foreground">{lang === "en" ? "Try a different keyword" : "尝试输入不同的关键词"}</p></div></div>
 }
 
 export function NoteGenRecordingOverlay({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
-  const bars = [7, 14, 9, 20, 12, 17, 8, 15, 11, 19, 7, 13]
-  return <div className="relative z-10 flex w-full max-w-sm items-center gap-3 rounded-2xl border bg-background p-3 shadow-2xl"><span className="flex size-10 items-center justify-center rounded-full bg-red-500 text-white"><Mic className="size-4" /></span><div className="min-w-0 flex-1"><div className="flex items-center justify-between"><span className="text-[10px] font-medium">{lang === "en" ? "Recording" : "正在录音"}</span><span className="text-[9px] text-muted-foreground">00:18</span></div><div className="mt-2 flex h-5 items-center gap-1">{bars.map((height, index) => <span key={index} className="w-1 rounded-full bg-foreground/65" style={{ height }} />)}</div></div><span className="flex size-8 items-center justify-center rounded-full border"><span className="size-2.5 rounded-sm bg-foreground" /></span></div>
+  return <div className="relative z-10 w-full max-w-sm rounded-xl border bg-background p-5 shadow-2xl"><div><h3 className="text-sm font-semibold">{lang === "en" ? "Voice recording" : "语音录制"}</h3><p className="mt-1 text-[8px] text-muted-foreground">{lang === "en" ? "Record audio and transcribe it into text." : "录制音频并将其识别为文字。"}</p></div><div className="flex flex-col items-center gap-4 py-5"><div className="font-mono text-4xl font-bold">00:18</div><div className="flex items-center gap-2 text-[9px] text-muted-foreground"><span className="size-2.5 animate-pulse rounded-full bg-destructive" />{lang === "en" ? "Recording" : "正在录音"}</div><div className="flex gap-3"><span className="flex size-12 items-center justify-center rounded-full border"><Pause className="size-5" /></span><span className="flex size-12 items-center justify-center rounded-full bg-destructive text-destructive-foreground"><Square className="size-5" /></span></div><span className="text-[9px] text-muted-foreground">{lang === "en" ? "Cancel" : "取消"}</span></div></div>
 }
 
 export function NoteGenSyncStatus({ lang = "cn", state = "success" }: { lang?: NoteGenReplicaLanguage; state?: "syncing" | "success" | "conflict" }) {
   const Icon = state === "syncing" ? Upload : state === "conflict" ? AlertTriangle : Check
   const label = state === "syncing" ? (lang === "en" ? "Syncing changes…" : "正在同步更改……") : state === "conflict" ? (lang === "en" ? "1 sync conflict needs review" : "有 1 个同步冲突待处理") : (lang === "en" ? "Everything is up to date" : "所有内容均为最新")
   const tone = state === "syncing" ? "text-blue-500" : state === "conflict" ? "text-amber-500" : "text-emerald-500"
-  return <div className="relative z-10 flex w-full max-w-sm items-center gap-3 rounded-xl border bg-background p-3 shadow-xl"><span className={cn("flex size-8 items-center justify-center rounded-full bg-muted", tone)}><Icon className="size-4" /></span><div><div className="text-[10px] font-medium">{label}</div><div className="mt-0.5 text-[8px] text-muted-foreground">GitHub · main</div></div><Cloud className="ml-auto size-4 text-muted-foreground" /></div>
+  return <div className="relative z-10 flex items-center gap-1.5 rounded-full border bg-background px-3 py-1.5 shadow-sm"><Icon className={cn("size-3.5", tone)} /><span className="text-[9px] font-medium">{label}</span>{state === "syncing" ? <span className="size-1.5 animate-pulse rounded-full bg-primary" /> : null}</div>
 }
 
 export function NoteGenImageViewer({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
@@ -38,7 +38,7 @@ export function NoteGenActivityHeatmap({ lang = "cn" }: { lang?: NoteGenReplicaL
 }
 
 export function NoteGenUpdatePrompt({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
-  return <div className="w-full max-w-sm rounded-xl border bg-background p-4 shadow-xl"><div className="flex items-start gap-3"><span className="flex size-9 items-center justify-center rounded-xl bg-foreground text-background"><Download className="size-4" /></span><div><h3 className="text-[10px] font-semibold">{lang === "en" ? "NoteGen 0.22.0 is available" : "NoteGen 0.22.0 已发布"}</h3><p className="mt-1 text-[8px] leading-4 text-muted-foreground">{lang === "en" ? "Improved Agent tools, canvas editing, and mobile writing." : "改进 Agent 工具、画布编辑与移动端写作体验。"}</p></div></div><div className="mt-4 flex justify-end gap-2"><span className="rounded-md border px-3 py-1.5 text-[8px]">{lang === "en" ? "Later" : "稍后"}</span><span className="rounded-md bg-foreground px-3 py-1.5 text-[8px] text-background">{lang === "en" ? "Update now" : "立即更新"}</span></div></div>
+  return <div className="w-full max-w-sm rounded-xl border bg-background p-4 shadow-xl"><div className="flex items-start gap-3"><span className="flex size-9 items-center justify-center rounded-xl bg-foreground text-background"><Download className="size-4" /></span><div><h3 className="text-[10px] font-semibold">{lang === "en" ? "NoteGen 0.36.0 is available" : "NoteGen 0.36.0 已发布"}</h3><p className="mt-1 text-[8px] leading-4 text-muted-foreground">{lang === "en" ? "Improved Agent tools, canvas editing, and mobile writing." : "改进 Agent 工具、画布编辑与移动端写作体验。"}</p></div></div><div className="mt-4 flex justify-end gap-2"><span className="rounded-md border px-3 py-1.5 text-[8px]">{lang === "en" ? "Later" : "稍后"}</span><span className="rounded-md bg-foreground px-3 py-1.5 text-[8px] text-background">{lang === "en" ? "Update now" : "立即更新"}</span></div></div>
 }
 
 export function NoteGenOnboardingCard({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {

components/notegen/file-editor-replica.tsx

@@ -63,5 +63,5 @@ export function NoteGenEditorFooter({ lang = "cn" }: { lang?: NoteGenReplicaLang
 }
 
 export function NoteGenEditorWorkspace({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
-  return <div className="grid h-full min-h-0 grid-cols-[30%_70%]"><NoteGenFileSidebar lang={lang} /><section className="flex min-h-0 flex-col border-l bg-background"><NoteGenEditorTabs lang={lang} /><NoteGenEditorToolbar /><div className="min-h-0 flex-1 overflow-hidden"><NoteGenDocumentPage lang={lang} /></div><NoteGenEditorFooter lang={lang} /></section></div>
+  return <div className="grid h-full min-h-0 grid-cols-[30%_70%]"><NoteGenFileSidebar lang={lang} /><section className="flex min-h-0 flex-col border-l bg-background"><NoteGenEditorTabs lang={lang} /><div className="min-h-0 flex-1 overflow-hidden"><NoteGenDocumentPage lang={lang} /></div><NoteGenEditorFooter lang={lang} /></section></div>
 }