@allbluecn/web-app 0.17.1 → 0.18.0

package/src/plugins/core/prd/components/prd-editor-layout.tsx

@@ -1,464 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { m } from '@/paraglide/messages.js'
-import { useStore } from "@tanstack/react-store"
-import { cn } from "@/lib/utils";
-import { prdCanvasStore, setCanvasElements, setCanvasSelectedElementId, updateCanvasElement, deleteCanvasElement, type PrdCanvasState } from "@/lib/stores/prd-canvas-store"
-import { NavFloatButton } from "@/components/shared-kit/navigation/nav-float-button";
-import { PRDLeftSidebar } from "./prd-left-sidebar";
-import { PRDPrototypePanel } from "./prd-prototype-panel";
-import { PRDDocPanel } from "./prd-doc-panel";
-import { PRDRightSidebar } from "./prd-right-sidebar";
-import { PRDNavigation } from "./prd-navigation";
-import { useHotkey } from "@tanstack/react-hotkeys";
-import { CanvasElement } from "@allbluecn/kernel";
-import type { Editor } from "@tiptap/react";
-import { getComponent } from "@/lib/prototype-registry";
-import { htmlToPmContent } from "@/lib/annotation-template";
-import { AnnotationOverlay } from "./component-annotation-overlay/AnnotationOverlay";
-import { ElementContext } from "./element-context";
-import { formatSaveTime } from "@/lib/time-format";
-import { useTimezone } from "@/components/shared-kit/timezone/timezone-provider";
-import type { PRD } from "@allbluecn/kernel";
-import { updatePrdPageFn, getPrdPageFn } from "../serverFns/pages"
-import { updatePrdFn } from "../serverFns/prd"
-import { toast } from '@/components/ui/toast'
-
-interface PRDEditorLayoutProps {
-  prd: PRD;
-}
-
-export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const contentAreaRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<Editor | null>(null);
-  const [prd, setPrd] = useState<PRD>(initialPrd);
-  const [leftPanelOpen, setLeftPanelOpen] = useState(true);
-  const [activePageId, setActivePageId] = useState<string | null>(null);
-
-  const elements = useStore(prdCanvasStore, (s: PrdCanvasState) => s.elements)
-  const selectedComponentId = useStore(prdCanvasStore, (s: PrdCanvasState) => s.selectedElementId)
-
-  const setElements = useCallback((value: React.SetStateAction<CanvasElement[]>) => {
-    setCanvasElements(value)
-  }, [])
-
-  const setSelectedComponentId = useCallback((id: string | null) => {
-    setCanvasSelectedElementId(id)
-  }, [])
-  const [docContent, setDocContent] = useState<{ html: string; markdown: string }>({ html: "", markdown: "" });
-  const lastLoadedDocRef = useRef<{ html: string; markdown: string } | null>(null);
-
-  const [canvasDirty, setCanvasDirty] = useState(false);
-  const [docDirty, setDocDirty] = useState(false);
-  const [canvasAutoSaveTime, setCanvasAutoSaveTime] = useState<string | null>(null);
-  const [docAutoSaveTime, setDocAutoSaveTime] = useState<string | null>(null);
-  const [canvasSaving, setCanvasSaving] = useState(false);
-  const [docSaving, setDocSaving] = useState(false);
-
-  const [headerCollapsed, setHeaderCollapsed] = useState(false);
-  const [docPanelWidth, setDocPanelWidth] = useState<"default" | "wider">("default");
-  const [pageFullscreen, setPageFullscreen] = useState(false);
-  const [windowFullscreen, setWindowFullscreen] = useState(false);
-  const [isPreviewing, setIsPreviewing] = useState(false);
-
-  const isHidden = headerCollapsed || pageFullscreen || windowFullscreen;
-
-  const timezone = useTimezone();
-
-  useEffect(() => {
-    if (pageFullscreen || windowFullscreen) {
-      window.dispatchEvent(new CustomEvent("sidebar:visible", { detail: { visible: false } }));
-    } else {
-      window.dispatchEvent(new CustomEvent("sidebar:visible", { detail: { visible: true } }));
-    }
-  }, [pageFullscreen, windowFullscreen]);
-
-  useEffect(() => {
-    if (windowFullscreen) {
-      if (!document.fullscreenElement) {
-        document.documentElement.requestFullscreen?.();
-      }
-    } else {
-      if (document.fullscreenElement) {
-        document.exitFullscreen?.();
-      }
-    }
-  }, [windowFullscreen]);
-
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      if (!document.fullscreenElement) {
-        setWindowFullscreen(false);
-      }
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => document.removeEventListener("fullscreenchange", handleFullscreenChange);
-  }, []);
-
-  const loadPage = useCallback(async (pageId: string) => {
-    if (docSaveTimerRef.current) {
-      clearTimeout(docSaveTimerRef.current);
-      docSaveTimerRef.current = null;
-    }
-    setActivePageId(pageId);
-    setCanvasAutoSaveTime(null);
-    setDocAutoSaveTime(null);
-    setIsPreviewing(false);
-    try {
-      const page = await getPrdPageFn({ data: { pageId } })
-      if (page) {
-        setElements((page.canvas as unknown as CanvasElement[]) || []);
-        const loadedContent = (page.content as { html: string; markdown: string }) || { html: "", markdown: "" };
-        setDocContent(loadedContent);
-        lastLoadedDocRef.current = loadedContent;
-        if (page.updatedAt) {
-          const time = formatSaveTime(new Date(page.updatedAt), "auto", timezone);
-          setCanvasAutoSaveTime(time);
-          setDocAutoSaveTime(time);
-        }
-      }
-    } catch {
-      setElements([]);
-      setDocContent({ html: "", markdown: "" });
-    }
-    setCanvasDirty(false);
-    setDocDirty(false);
-  }, []);
-
-  useEffect(() => {
-    const lastPage = localStorage.getItem(`lastPage_${prd.id}`);
-    if (lastPage) loadPage(lastPage);
-  }, [prd.id, loadPage]);
-
-  useEffect(() => {
-    const handler = () => { if (activePageId) { loadPage(activePageId); setIsPreviewing(false); } };
-    window.addEventListener("page-version-restored", handler);
-    return () => window.removeEventListener("page-version-restored", handler);
-  }, [activePageId, loadPage]);
-
-  useEffect(() => {
-    const startPreview = (e: Event) => {
-      const { canvas, content } = (e as CustomEvent).detail;
-      setElements(canvas || []);
-      setDocContent(content || { html: "", markdown: "" });
-      setCanvasDirty(false);
-      setDocDirty(false);
-      setIsPreviewing(true);
-    };
-    const endPreview = () => {
-      setIsPreviewing(false);
-      if (activePageId) loadPage(activePageId);
-    };
-    window.addEventListener("page-version-preview", startPreview);
-    window.addEventListener("page-version-preview-end", endPreview);
-    return () => {
-      window.removeEventListener("page-version-preview", startPreview);
-      window.removeEventListener("page-version-preview-end", endPreview);
-    };
-  }, [activePageId, loadPage]);
-
-  const saveCanvas = useCallback(async (type: "auto" | "manual" = "auto", _options?: { keepalive?: boolean }) => {
-    if (!activePageId) return;
-    setCanvasSaving(true);
-    try {
-      await updatePrdPageFn({ data: { pageId: activePageId, canvas: elements } });
-      setCanvasDirty(false);
-      setCanvasAutoSaveTime(formatSaveTime(new Date(), type, timezone));
-    } catch (err) {
-      console.error("Canvas auto-save failed:", err);
-    } finally {
-      setCanvasSaving(false);
-    }
-  }, [activePageId, elements]);
-
-  const saveDoc = useCallback(async (type: "auto" | "manual" = "auto", _options?: { keepalive?: boolean }) => {
-    if (!activePageId) return;
-
-    const isEmpty = !docContent.markdown.trim();
-    const hadContent = !!(lastLoadedDocRef.current?.markdown?.trim());
-    if (type === "auto" && isEmpty && hadContent) {
-      setDocDirty(false);
-      return;
-    }
-
-    setDocSaving(true);
-    try {
-      await updatePrdPageFn({ data: { pageId: activePageId, content: docContent } });
-      setDocDirty(false);
-      setDocAutoSaveTime(formatSaveTime(new Date(), type, timezone));
-    } catch (err) {
-      console.error("Doc auto-save failed:", err);
-    } finally {
-      setDocSaving(false);
-    }
-  }, [activePageId, docContent]);
-
-  const saveAll = useCallback(async () => {
-    await Promise.all([saveCanvas("manual"), saveDoc("manual")]);
-  }, [saveCanvas, saveDoc]);
-
-  const saveDocRef = useRef(saveDoc);
-  saveDocRef.current = saveDoc;
-  const saveCanvasRef = useRef(saveCanvas);
-  saveCanvasRef.current = saveCanvas;
-  const saveAllRef = useRef(saveAll);
-  saveAllRef.current = saveAll;
-  const docDirtyRef = useRef(docDirty);
-  docDirtyRef.current = docDirty;
-  const canvasDirtyRef = useRef(canvasDirty);
-  canvasDirtyRef.current = canvasDirty;
-  const docSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (!canvasDirty || isPreviewing) return;
-    const timer = setInterval(() => saveCanvasRef.current(), 5000);
-    return () => clearInterval(timer);
-  }, [canvasDirty, isPreviewing]);
-
-  useEffect(() => {
-    if (!docDirty || isPreviewing) return;
-    const timer = setInterval(() => saveDocRef.current(), 5000);
-    return () => clearInterval(timer);
-  }, [docDirty, isPreviewing]);
-
-  useEffect(() => {
-    return () => {
-      if (docSaveTimerRef.current) clearTimeout(docSaveTimerRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleBeforeUnload = () => {
-      if (docDirtyRef.current || canvasDirtyRef.current) {
-        const opts = { keepalive: true } as const;
-        if (canvasDirtyRef.current) saveCanvasRef.current("manual", opts);
-        if (docDirtyRef.current) saveDocRef.current("auto", opts);
-      }
-    };
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, []);
-
-  const switchPage = useCallback(async (pageId: string) => {
-    if (canvasDirty && activePageId) await saveCanvas();
-    if (docDirty && activePageId) await saveDoc();
-    localStorage.setItem(`lastPage_${prd.id}`, pageId);
-    loadPage(pageId);
-  }, [prd.id, canvasDirty, docDirty, activePageId, saveCanvas, saveDoc, loadPage]);
-
-  const handleElementsChange = useCallback((el: CanvasElement[]) => {
-    if (isPreviewing) return;
-    setElements(el);
-    setCanvasDirty(true);
-  }, [isPreviewing]);
-
-  const handleAnnotate = useCallback((element: CanvasElement) => {
-    const editor = editorRef.current;
-    if (!editor) return;
-    const tpl = getComponent(element.type)?.commentTemplate;
-    const content = tpl ? htmlToPmContent(editor, tpl) : [{ type: "paragraph" }];
-    editor.chain().focus().insertContent({
-      type: "annotation",
-      attrs: { componentId: element.id, componentType: element.type },
-      content,
-    }).run();
-  }, []);
-
-  const selectedElement = elements.find((e: CanvasElement) => e.id === selectedComponentId) ?? null;
-
-  const updateElement = useCallback((id: string, patch: Partial<CanvasElement>) => {
-    if (isPreviewing) return;
-    updateCanvasElement(id, patch)
-    setCanvasDirty(true);
-  }, [isPreviewing]);
-
-  const deleteElement = useCallback((id: string) => {
-    if (isPreviewing) return;
-    deleteCanvasElement(id)
-    setCanvasSelectedElementId(null)
-    setCanvasDirty(true);
-  }, [isPreviewing]);
-
-  const handleDocContentChange = useCallback((content: { html: string; markdown: string }) => {
-    if (isPreviewing) return;
-    setDocContent(content);
-    setDocDirty(true);
-    if (docSaveTimerRef.current) clearTimeout(docSaveTimerRef.current);
-    docSaveTimerRef.current = setTimeout(() => {
-      saveDocRef.current();
-    }, 2000);
-  }, [isPreviewing]);
-
-  const handleNameChange = useCallback(async (name: string) => {
-    try {
-      await updatePrdFn({ data: { id: prd.id, name } });
-      setPrd((prev) => ({ ...prev, name }));
-      window.dispatchEvent(new CustomEvent("prd-updated"));
-      toast.success(m.editor_nameUpdated());
-    } catch (err) {
-      console.error("Update PRD name failed:", err);
-      toast.error(m.editor_nameUpdateFailed());
-    }
-  }, [prd.id, ]);
-
-  useHotkey("Mod+S", saveAll, {
-    enabled: !pageFullscreen && !windowFullscreen,
-  });
-
-  const overridesMap = useMemo(() => {
-    const map: Record<string, Record<string, any>> = {};
-    for (const e of elements) {
-      map[e.id] = (e.overrides ?? e.props) ?? {};
-    }
-    return map;
-  }, [elements]);
-
-  useEffect(() => {
-    setSelectedComponentId(null);
-  }, [activePageId]);
-
-  const handleContentAreaClick = (e: React.MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (!target) return;
-    if (target.closest("[data-element-id]")) return;
-    if (target.closest("[data-component-id]")) return;
-    setSelectedComponentId(null);
-  };
-
-  const [aiModel, setAiModel] = useState("");
-
-  const elementContextValue = useMemo(
-    () => ({ overrides: overridesMap, onSelectComponent: setSelectedComponentId, aiModel }),
-    [overridesMap, aiModel]
-  );
-
-  return (
-    <ElementContext.Provider value={elementContextValue}>
-    <div className="relative flex flex-col h-full overflow-hidden">
-      {!isHidden && (
-        <PRDNavigation
-          prd={prd}
-          onSave={saveAll}
-          onVersion={() => {}}
-          onExport={() => {}}
-          onSettings={() => {}}
-          onNameChange={handleNameChange}
-          onCollapseHeader={() => setHeaderCollapsed(true)}
-          onPageFullscreen={() => setPageFullscreen(true)}
-          onWindowFullscreen={() => setWindowFullscreen(true)}
-        />
-      )}
-
-      <div
-        ref={containerRef}
-        className={cn(
-          "relative flex-1 flex bg-background overflow-hidden",
-          (pageFullscreen || windowFullscreen) && "fixed left-0 right-2 top-[9px] bottom-0 z-50 bg-background"
-        )}
-      >
-        <div className={cn("flex-1 flex overflow-hidden", (pageFullscreen || windowFullscreen) && "ml-3")}>
-          <PRDLeftSidebar
-            prdId={prd.id}
-            open={leftPanelOpen}
-            onToggle={() => setLeftPanelOpen((v) => !v)}
-            activePageId={activePageId}
-            onPageSelect={switchPage}
-            canvasElements={elements}
-            onOutlineSelect={(id) => setSelectedComponentId(id)}
-            onElementsChange={handleElementsChange}
-            aiModel={aiModel}
-            onAiModelChange={setAiModel}
-          />
-
-          <div ref={contentAreaRef} className="flex-1 flex min-w-0 overflow-hidden relative" onClick={handleContentAreaClick}>
-            <div className="flex-1 min-w-0 relative">
-              {isPreviewing && elements.length === 0 && (
-                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80">
-                  <p className="text-sm text-muted-foreground">{m.editor_noCanvasInVersion()}</p>
-                </div>
-              )}
-              {isPreviewing && (
-                <div className="absolute top-14 right-4 z-20 text-[10px] text-muted-foreground bg-muted/80 px-1.5 py-0.5 rounded pointer-events-none">
-                  {m.editor_versionPreview()}
-                </div>
-              )}
-              <PRDPrototypePanel
-                className="flex-1 min-w-0"
-                elements={elements}
-                onElementsChange={handleElementsChange}
-                onComponentSelect={(id) => setSelectedComponentId(id)}
-                autoSaveTime={canvasAutoSaveTime}
-                saving={canvasSaving}
-                onAnnotate={!isPreviewing ? handleAnnotate : undefined}
-              />
-            </div>
-
-            <div className="relative shrink-0">
-              {isPreviewing && !docContent.html && !docContent.markdown && (
-                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80">
-                  <p className="text-sm text-muted-foreground">{m.editor_noDocInVersion()}</p>
-                </div>
-              )}
-              <PRDDocPanel
-                className={cn(
-                  "shrink-0 border-l transition-[width] duration-200",
-                  docPanelWidth === "default" ? "w-105 xl:w-120" : "w-[630px] xl:w-[720px]"
-                )}
-                content={activePageId ? docContent : undefined}
-                onContentChange={activePageId && !isPreviewing ? handleDocContentChange : undefined}
-                autoSaveTime={docAutoSaveTime}
-                saving={docSaving}
-                widthMode={docPanelWidth}
-                onWidthModeChange={setDocPanelWidth}
-                readOnly={isPreviewing}
-                onEditorReady={(editor) => { editorRef.current = editor; }}
-              />
-            </div>
-            <AnnotationOverlay containerRef={contentAreaRef} selectedComponentId={selectedComponentId} />
-          </div>
-
-          <PRDRightSidebar
-            prdId={prd.id}
-            selectedComponentId={selectedComponentId}
-            onClose={() => setSelectedComponentId(null)}
-            activePageId={activePageId}
-            element={selectedElement}
-            onElementChange={updateElement}
-            onDeleteElement={deleteElement}
-          />
-        </div>
-
-        {isHidden && (
-          <NavFloatButton
-            containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
-            showExitFullscreen={pageFullscreen || windowFullscreen}
-            showExpandHeader={headerCollapsed}
-            onExitFullscreen={() => {
-              setPageFullscreen(false);
-              setWindowFullscreen(false);
-            }}
-            onExpandHeader={() => setHeaderCollapsed(false)}
-          />
-        )}
-      </div>
-    </div>
-    </ElementContext.Provider>
-  );
-}

package/src/plugins/core/prd/components/prd-filter-bar.tsx

@@ -1,102 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import React, { useState, useEffect, useRef } from "react";
-import { m } from '@/paraglide/messages.js'
-import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
-export function FilterBar({
-  allTags,
-  tagFilter,
-  onTagFilterChange,
-}: {
-  allTags: string[];
-  tagFilter: string;
-  onTagFilterChange: (tag: string) => void;
-}) {
-  const [page, setPage] = useState(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [visibleCount, setVisibleCount] = useState(5);
-  const TAG_MIN_WIDTH = 44;
-  const ITEM_GAP = 4;
-
-  useEffect(() => {
-    const updateVisibleCount = () => {
-      if (containerRef.current) {
-        const width = containerRef.current.offsetWidth - 80;
-        const count = Math.floor(width / (TAG_MIN_WIDTH + ITEM_GAP));
-        setVisibleCount(Math.max(4, count));
-      }
-    };
-    updateVisibleCount();
-    window.addEventListener("resize", updateVisibleCount);
-    return () => window.removeEventListener("resize", updateVisibleCount);
-  }, []);
-
-  const totalPages = Math.ceil(allTags.length / visibleCount);
-  const startIdx = page * visibleCount;
-  const visibleTags = allTags.slice(startIdx, startIdx + visibleCount);
-  const hasMoreRight = startIdx + visibleCount < allTags.length;
-  const hasMoreLeft = page > 0;
-
-  return (
-    <div className="mt-2 flex items-center gap-1">
-      <button
-        onClick={() => { onTagFilterChange("all"); setPage(0); }}
-        className={cn(
-          "px-1.5 py-0.5 text-[10px] rounded-md transition-colors shrink-0",
-          tagFilter === "all" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
-        )}
-      >
-        {m.filterBar_all()}
-      </button>
-      <div ref={containerRef} className="flex-1 flex items-center gap-1 overflow-hidden">
-        {visibleTags.map((tag) => (
-          <button
-            key={tag}
-            onClick={() => onTagFilterChange(tag)}
-            className={cn(
-              "px-1.5 py-0.5 text-[10px] rounded-md transition-colors whitespace-nowrap min-w-10",
-              tagFilter === tag ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
-            )}
-          >
-            {tag}
-          </button>
-        ))}
-      </div>
-      {totalPages > 1 && (
-        <div className="flex items-center gap-0.5 shrink-0">
-          <button
-            onClick={() => setPage((p) => Math.max(0, p - 1))}
-            disabled={!hasMoreLeft}
-            className={cn("size-5 flex items-center justify-center rounded hover:bg-muted", !hasMoreLeft && "opacity-30 cursor-not-allowed")}
-          >
-            <ChevronLeft className="size-3" />
-          </button>
-          <button
-            onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
-            disabled={!hasMoreRight}
-            className={cn("size-5 flex items-center justify-center rounded hover:bg-muted", !hasMoreRight && "opacity-30 cursor-not-allowed")}
-          >
-            <ChevronRight className="size-3" />
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}