feat: 完善 NoteGen 样式复刻组件库

Author: codexu

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

@@ -21,6 +21,18 @@ import {
 
 import {
   NoteGenDesktopReplica,
+  NoteGenAgentPanel,
+  NoteGenActivityHeatmap,
+  NoteGenAppShell,
+  NoteGenCanvasWorkspace,
+  NoteGenConfirmationDialog,
+  NoteGenDialogBackdrop,
+  NoteGenEditorWorkspace,
+  NoteGenGlobalSearch,
+  NoteGenImageViewer,
+  NoteGenMobileReplica,
+  NoteGenRecordingOverlay,
+  NoteGenRecordWorkspace,
   NoteGenReplicaFrame,
   NoteGenReplicaIconButton,
   NoteGenReplicaMenuGroup,
@@ -30,9 +42,11 @@ import {
   NoteGenSettingSegmentedControl,
   NoteGenSettingSelect,
   NoteGenSettingsPage,
-  NoteGenSettingsReplica,
+  NoteGenSettingsDialogReplica,
   NoteGenSettingsSection,
   NoteGenSettingSwitch,
+  NoteGenSyncStatus,
+  NoteGenUpdatePrompt,
   NoteGenWindowTitleBar,
   NoteGenWorkspaceSwitcher,
   type NoteGenReplicaLanguage,
@@ -65,6 +79,9 @@ export function NoteGenComponentGallery({ lang }: { lang: NoteGenReplicaLanguage
   const navigation = [
     ["desktop", text("完整应用", "Desktop app")],
     ["chrome", text("窗口与工具栏", "Chrome and toolbars")],
+    ["workspaces", text("核心工作区", "Core workspaces")],
+    ["mobile", text("移动端", "Mobile")],
+    ["overlays", text("弹窗与状态", "Overlays and states")],
     ["settings-primitives", text("设置组件", "Settings primitives")],
     ["settings", text("完整设置页", "Settings page")],
   ]
@@ -185,9 +202,52 @@ export function NoteGenComponentGallery({ lang }: { lang: NoteGenReplicaLanguage
           </div>
         </GallerySection>
 
+        <GallerySection
+          id="workspaces"
+          eyebrow="03 · Workspace replicas"
+          title={text("记录、写作、Agent 与画布", "Capture, writing, Agent, and canvas")}
+          description={text("每个工作区都由更小的列表、工具栏、内容区和状态组件组合而成。", "Each workspace is composed from smaller lists, toolbars, content areas, and state components.")}
+        >
+          <div className="grid gap-6">
+            <ComponentCard title="NoteGenRecordWorkspace" description={text("记录列表与详情", "Capture list and detail")}><div className="h-[520px] overflow-hidden rounded-lg border"><NoteGenRecordWorkspace lang={lang} /></div></ComponentCard>
+            <ComponentCard title="NoteGenEditorWorkspace" description={text("文件树、标签页与 Markdown 编辑器", "File tree, tabs, and Markdown editor")}><div className="h-[520px] overflow-hidden rounded-lg border"><NoteGenEditorWorkspace lang={lang} /></div></ComponentCard>
+            <div className="grid gap-6 xl:grid-cols-2">
+              <ComponentCard title="NoteGenAgentPanel" description={text("消息、思考过程、工具调用与上下文", "Messages, reasoning, tool calls, and context")}><div className="h-[560px] overflow-hidden rounded-lg border"><NoteGenAgentPanel lang={lang} /></div></ComponentCard>
+              <ComponentCard title="NoteGenCanvasWorkspace" description={text("画布项目、节点、连线和缩放工具", "Canvas projects, nodes, edges, and zoom tools")}><div className="h-[560px] overflow-hidden rounded-lg border"><NoteGenCanvasWorkspace lang={lang} /></div></ComponentCard>
+            </div>
+            <ComponentCard title="NoteGenAppShell" description={text("当前桌面外壳：平台窗口控制、记录工具与状态栏", "Current desktop shell with platform controls, capture toolbar, and status bar")}><NoteGenAppShell lang={lang}><div className="grid h-full grid-cols-[28%_42%_30%]"><div className="border-r"><NoteGenRecordWorkspace lang={lang} /></div><div className="border-r"><NoteGenEditorWorkspace lang={lang} /></div><NoteGenAgentPanel lang={lang} /></div></NoteGenAppShell></ComponentCard>
+          </div>
+        </GallerySection>
+
+        <GallerySection
+          id="mobile"
+          eyebrow="04 · Mobile replicas"
+          title={text("移动端核心页面", "Core mobile screens")}
+          description={text("移动端使用独立的手机框架、状态栏、页面标题和底部导航，可按 screen 属性直接切换展示。", "Mobile uses a dedicated device frame, status bar, headers, and dock. Select a screen through a single prop.")}
+        >
+          <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-5">
+            {(["capture", "chat", "writing", "canvas", "settings"] as const).map((screen) => <ComponentCard key={screen} title={`Mobile · ${screen}`} description={text("代码实时渲染", "Rendered live from code")}><NoteGenMobileReplica lang={lang} screen={screen} /></ComponentCard>)}
+          </div>
+        </GallerySection>
+
+        <GallerySection
+          id="overlays"
+          eyebrow="05 · Dialogs and states"
+          title={text("全局弹窗、录音与同步状态", "Global dialogs, recording, and sync states")}
+          description={text("用于文档说明搜索、录音、同步、冲突、图片预览和关闭确认等瞬时界面。", "Transient UI for documenting search, recording, sync, conflicts, image viewing, and close confirmation.")}
+        >
+          <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="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>
+          </div>
+        </GallerySection>
+
         <GallerySection
           id="settings-primitives"
-          eyebrow="03 · Settings primitives"
+          eyebrow="06 · Settings primitives"
           title={text("从一个控件到完整设置分组", "From one control to a complete settings section")}
           description={text(
             "设置页的页面标题、分组、设置项和操作控件都可以单独导入，用真实组件还原任意设置文档。",
@@ -258,16 +318,14 @@ export function NoteGenComponentGallery({ lang }: { lang: NoteGenReplicaLanguage
 
         <GallerySection
           id="settings"
-          eyebrow="04 · NoteGenSettingsReplica"
+          eyebrow="07 · NoteGenSettingsReplica"
           title={text("完整设置页", "Complete settings page")}
           description={text(
             "搜索左侧设置项，切换导航，并操作常规设置中的主题与开关。这个完整场景也可以直接放进文档页面。",
             "Search the sidebar, switch sections, and interact with theme and behavior controls. This complete scene can also be embedded directly in documentation."
           )}
         >
-          <div className="h-[720px] overflow-hidden rounded-2xl border bg-background shadow-xl">
-            <NoteGenSettingsReplica lang={lang} />
-          </div>
+          <NoteGenSettingsDialogReplica lang={lang} className="h-[760px]" />
         </GallerySection>
       </div>
 

components/notegen/README.md

@@ -1,5 +1,20 @@
 # NoteGen replica components
 
+This folder contains style-only, code-native replicas for documentation and marketing pages. They do not connect to NoteGen stores, Tauri, databases, file APIs, or AI services.
+
+## Component families
+
+- `app-shell-replica`: platform window controls, capture toolbar, panel handle, app shell, and status bar.
+- `record-replica`: tag chips, capture filters, list items, audio waveform, sidebar, and detail view.
+- `file-editor-replica`: file tree, tabs, editor toolbar, bubble menu, document page, and editor status.
+- `agent-replica`: message bubbles, thinking block, tool calls, execution timeline, context tray, and composer.
+- `canvas-replica`: project cards, canvas tools, nodes, edges, grid, and zoom footer.
+- `settings-replica`: reusable setting rows plus all current NoteGen settings categories and dialog presentation.
+- `mobile-replica`: phone frame, status bar, dock, capture, Agent, writing, and settings screens.
+- `feedback-replica`: global search, recording, sync states, image viewer, confirmation, and activity heatmap.
+
+Import every public component from `@/components/notegen`. Display-state props only change the rendered appearance; they intentionally do not implement product behavior.
+
 Code-native NoteGen interface replicas for documentation and marketing pages. Import from `@/components/notegen` when composing a complete scene, or import a specific file when the component is used inside the replica implementation.
 
 ```tsx

components/notegen/agent-replica.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react"
+import {
+  Bot,
+  Brain,
+  Check,
+  ChevronDown,
+  Circle,
+  Clock3,
+  Copy,
+  FileText,
+  Globe2,
+  History,
+  Paperclip,
+  Plus,
+  Search,
+  Send,
+  ShieldCheck,
+  Sparkles,
+  Terminal,
+  User,
+  Wrench,
+} from "lucide-react"
+
+import type { NoteGenReplicaLanguage } from "@/components/notegen/types"
+import { cn } from "@/lib/utils"
+
+export function NoteGenAgentHeader({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <header className="flex h-10 items-center gap-2 border-b px-3"><Bot className="size-4" /><span className="font-medium">{lang === "en" ? "NoteGen Agent" : "NoteGen 助手"}</span><span className="rounded-full bg-emerald-500/10 px-2 py-0.5 text-[7px] text-emerald-600">GPT-5</span><div className="ml-auto flex gap-2 text-muted-foreground"><Search className="size-3.5" /><History className="size-3.5" /><Plus className="size-3.5" /></div></header>
+}
+
+export function NoteGenAgentMessage({ role, children, time = "10:28" }: { role: "user" | "assistant"; children: ReactNode; time?: string }) {
+  const Icon = role === "assistant" ? Sparkles : User
+  return <div className={cn("flex gap-2.5", role === "user" && "flex-row-reverse")}><span className={cn("flex size-6 shrink-0 items-center justify-center rounded-full border", role === "assistant" ? "bg-foreground text-background" : "bg-muted")}><Icon className="size-3" /></span><div className={cn("max-w-[82%]", role === "user" && "text-right")}><div className={cn("rounded-xl px-3 py-2 text-left text-[9px] leading-4", role === "assistant" ? "rounded-tl-sm bg-muted/60" : "rounded-tr-sm bg-foreground text-background")}>{children}</div><span className="mt-1 block text-[7px] text-muted-foreground">{time}</span></div></div>
+}
+
+export function NoteGenThinkingBlock({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="rounded-lg border bg-muted/20 p-2.5"><div className="flex items-center gap-2 text-[8px] font-medium"><Brain className="size-3.5" />{lang === "en" ? "Thinking" : "思考过程"}<ChevronDown className="ml-auto size-3 text-muted-foreground" /></div><p className="mt-2 border-l pl-2 text-[8px] leading-4 text-muted-foreground">{lang === "en" ? "I’ll compare the selected notes, identify repeated ideas, and preserve the original references." : "我会对比选中的笔记，识别重复观点，并保留原始引用。"}</p></div>
+}
+
+export function NoteGenToolCall({ type = "search", lang = "cn", status = "done" }: { type?: "search" | "file" | "terminal"; lang?: NoteGenReplicaLanguage; status?: "running" | "done" }) {
+  const icons = { search: Globe2, file: FileText, terminal: Terminal }
+  const Icon = icons[type]
+  const labels = { search: lang === "en" ? "Search workspace" : "搜索工作区", file: lang === "en" ? "Read document" : "读取文档", terminal: lang === "en" ? "Run tool" : "运行工具" }
+  return <div className="flex items-center gap-2 rounded-md border bg-background px-2.5 py-2"><span className="flex size-6 items-center justify-center rounded bg-muted"><Icon className="size-3" /></span><div className="min-w-0 flex-1"><div className="text-[8px] font-medium">{labels[type]}</div><div className="truncate text-[7px] text-muted-foreground">{type === "file" ? "notes/product/design.md" : "NoteGen design principles"}</div></div>{status === "done" ? <Check className="size-3 text-emerald-500" /> : <Clock3 className="size-3 animate-pulse text-muted-foreground" />}</div>
+}
+
+export function NoteGenExecutionTimeline({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="rounded-lg border p-2.5"><div className="mb-2 flex items-center gap-2 text-[8px] font-medium"><Wrench className="size-3.5" />{lang === "en" ? "3 actions completed" : "已完成 3 个操作"}</div><div className="space-y-1.5"><NoteGenToolCall lang={lang} /><NoteGenToolCall lang={lang} type="file" /><NoteGenToolCall lang={lang} type="terminal" /></div></div>
+}
+
+export function NoteGenAgentApproval({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="rounded-lg border border-amber-500/35 bg-amber-500/5 p-3"><div className="flex items-start gap-2"><ShieldCheck className="mt-0.5 size-4 text-amber-600" /><div><h4 className="text-[9px] font-medium">{lang === "en" ? "Permission required" : "需要你的确认"}</h4><p className="mt-1 text-[8px] leading-4 text-muted-foreground">{lang === "en" ? "Allow Agent to update notes/product/design.md?" : "允许 Agent 更新 notes/product/design.md？"}</p></div></div><div className="mt-3 flex justify-end gap-2"><span className="rounded-md border bg-background px-2.5 py-1 text-[8px]">{lang === "en" ? "Deny" : "拒绝"}</span><span className="rounded-md bg-foreground px-2.5 py-1 text-[8px] text-background">{lang === "en" ? "Allow" : "允许"}</span></div></div>
+}
+
+export function NoteGenAgentMessageActions({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="inline-flex items-center gap-1 rounded-md border bg-background p-1 text-muted-foreground shadow-xs"><span className="flex size-6 items-center justify-center"><Copy className="size-3" /></span><span className="flex size-6 items-center justify-center"><Check className="size-3" /></span><span className="px-1 text-[7px]">{lang === "en" ? "Insert into note" : "插入笔记"}</span></div>
+}
+
+export function NoteGenAgentModelControl({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="flex items-center gap-1.5"><span className="flex items-center gap-1 rounded-md border px-2 py-1 text-[7px]"><Bot className="size-3" />GPT-5<ChevronDown className="size-2.5" /></span><span className="flex items-center gap-1 rounded-md border px-2 py-1 text-[7px]"><ShieldCheck className="size-3" />{lang === "en" ? "Ask first" : "操作前询问"}<ChevronDown className="size-2.5" /></span></div>
+}
+
+export function NoteGenContextTray({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="flex items-center gap-1.5 overflow-hidden border-t px-3 py-2"><span className="flex items-center gap-1.5 rounded-md border bg-muted/30 px-2 py-1 text-[7px]"><FileText className="size-3" />design.md <span className="text-muted-foreground">4.2k</span></span><span className="flex items-center gap-1.5 rounded-md border bg-muted/30 px-2 py-1 text-[7px]"><Circle className="size-2 fill-violet-500 text-violet-500" />{lang === "en" ? "Product notes" : "产品笔记"}</span><span className="ml-auto text-[7px] text-muted-foreground">12k / 128k</span></div>
+}
+
+export function NoteGenAgentComposer({ lang = "cn" }: { lang?: NoteGenReplicaLanguage }) {
+  return <div className="m-2 rounded-xl border bg-background p-2 shadow-sm"><p className="min-h-10 px-1 text-[9px] text-muted-foreground">{lang === "en" ? "Ask about your notes, or describe what to create…" : "询问笔记内容，或描述你想创建的内容……"}</p><div className="flex items-center gap-2 text-muted-foreground"><Paperclip className="size-3.5" /><NoteGenAgentModelControl lang={lang} /><span className="ml-auto flex size-7 items-center justify-center rounded-lg bg-foreground text-background"><Send className="size-3" /></span></div></div>
+}
+
+export function NoteGenAgentPanel({ lang = "cn", className }: { lang?: NoteGenReplicaLanguage; className?: string }) {
+  return <aside className={cn("flex h-full min-h-0 flex-col bg-background", className)}><NoteGenAgentHeader lang={lang} /><div className="min-h-0 flex-1 space-y-4 overflow-hidden p-3"><NoteGenAgentMessage role="user">{lang === "en" ? "Turn these fragments into a short design note." : "把这些碎片整理成一篇简短的设计说明。"}</NoteGenAgentMessage><NoteGenAgentMessage role="assistant"><div className="space-y-2"><NoteGenThinkingBlock lang={lang} /><NoteGenExecutionTimeline lang={lang} /><p>{lang === "en" ? "I found three recurring principles: low interruption, progressive structure, and visible context." : "我找到三个反复出现的原则：低打扰、渐进式结构和始终可见的上下文。"}</p></div></NoteGenAgentMessage></div><NoteGenContextTray lang={lang} /><NoteGenAgentComposer lang={lang} /></aside>
+}