@allbluecn/web-app 0.6.3 → 0.7.0

package/src/plugins/core/prd/components/prd-left-sidebar.tsx

@@ -0,0 +1,473 @@
+// 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, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/components/ui-shared/utils";
+import { Input } from "@/components/ui-shared/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui-shared/tooltip";
+import { ComponentThumbnail } from "./component-thumbnail";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui-shared/resizable";
+import {
+  ChevronLeft,
+  ChevronRight,
+  FileText,
+  ListTree,
+  ChevronDown,
+  Package,
+  Search,
+  Box,
+  LayoutTemplate,
+  FileCode,
+  GripVertical,
+  LayoutGrid,
+  List,
+  Layers,
+  Sparkles,
+  Bot,
+  MousePointerClick,
+  TextCursorInput,
+  Type,
+  PanelTop,
+  Image as ImageIcon,
+  Component as ComponentIcon,
+  Smile,
+} from "lucide-react";
+import { PRDPageTab } from "./prd-tree-page-tab";
+import { OutlineTab } from "./prd-outline-tab";
+import { FilterBar } from "./prd-filter-bar";
+import { PRDAgentPanel } from "./prd-agent-panel";
+import { CanvasElement } from "@allbluecn/shared/types/prototype";
+import { listComponentsFn } from "@/plugins/core/prd/serverFns/components";
+import { BUILTIN_COMPONENTS, ICON_COMPONENTS, ICON_LUCIDE_MAP } from "./prototype";
+
+interface PRDLeftSidebarProps {
+  prdId: string;
+  open: boolean;
+  onToggle: () => void;
+  activePageId: string | null;
+  onPageSelect: (pageId: string) => void;
+  canvasElements?: CanvasElement[];
+  onOutlineSelect?: (elementId: string) => void;
+  onElementsChange?: (elements: CanvasElement[]) => void;
+  aiModel?: string;
+  onAiModelChange?: (model: string) => void;
+}
+
+interface ComponentItem {
+  id: string;
+  name: string;
+  description: string | null;
+  type: string;
+  category: string | null;
+  subCategory: string | null;
+  path: string | null;
+  tags: string[];
+  config: any;
+  defaultProps: any;
+  defaultStyle: any;
+  preview: string | null;
+  version: number;
+  source: string;
+  sourceId: string | null;
+  createdAt: string;
+  prototypeKey?: string;
+  defaultWidth?: number;
+  defaultHeight?: number;
+}
+
+const BUILTIN_ITEMS: ComponentItem[] = BUILTIN_COMPONENTS.map((c) => ({
+  id: `builtin_${c.type}`,
+  name: c.name,
+  description: null,
+  type: "component",
+  category: c.category,
+  subCategory: null,
+  path: c.category,
+  tags: [],
+  config: {},
+  defaultProps: c.defaultProps,
+  defaultStyle: c.defaultStyle,
+  preview: null,
+  version: 1,
+  source: "builtin",
+  sourceId: null,
+  createdAt: "",
+  prototypeKey: c.type,
+  defaultWidth: c.defaultWidth,
+  defaultHeight: c.defaultHeight,
+}));
+
+const ICON_ITEMS: ComponentItem[] = ICON_COMPONENTS.map((c) => ({
+  id: `builtin_${c.type}`,
+  name: c.name,
+  description: null,
+  type: "component",
+  category: c.category,
+  subCategory: null,
+  path: c.category,
+  tags: [],
+  config: {},
+  defaultProps: c.defaultProps,
+  defaultStyle: c.defaultStyle,
+  preview: null,
+  version: 1,
+  source: "builtin",
+  sourceId: null,
+  createdAt: "",
+  prototypeKey: c.type,
+  defaultWidth: c.defaultWidth,
+  defaultHeight: c.defaultHeight,
+}));
+
+const ALL_BUILTIN_ITEMS: ComponentItem[] = [...ICON_ITEMS, ...BUILTIN_ITEMS];
+
+const CATEGORIES = [
+  { key: "icons", labelKey: "prototype.categoryIcon", icon: <Smile className="size-3.5" /> },
+  { key: "basic", labelKey: "prototype.categoryBasic", icon: <Box className="size-3.5" /> },
+  { key: "content", labelKey: "prototype.categoryContent", icon: <LayoutTemplate className="size-3.5" /> },
+  { key: "template", labelKey: "prototype.categoryTemplate", icon: <FileCode className="size-3.5" /> },
+];
+
+// 图标组件的 lucide 组件映射（icon-smile → Smile 等），供列表视图图标缩略图使用
+const ICON_ITEM_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {};
+for (const [value, Comp] of Object.entries(ICON_LUCIDE_MAP)) {
+  if (Comp) ICON_ITEM_ICONS[`icon-${value}`] = Comp as React.ComponentType<{ className?: string }>;
+}
+
+const COMPONENT_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  button: MousePointerClick,
+  input: TextCursorInput,
+  card: PanelTop,
+  text: Type,
+  image: ImageIcon,
+  ...ICON_ITEM_ICONS,
+};
+
+export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSelect, canvasElements = [], onOutlineSelect, onElementsChange, aiModel, onAiModelChange }: PRDLeftSidebarProps) {
+  const { t } = useTranslation("prd");
+  const [activeTab, setActiveTab] = useState<"page" | "outline">("page");
+  const [componentTab, setComponentTab] = useState<"library" | "agent">("library");
+
+  const [components, setComponents] = useState<ComponentItem[]>(ALL_BUILTIN_ITEMS);
+  const [allTags, setAllTags] = useState<string[]>([]);
+  const [search, setSearch] = useState("");
+  const [tagFilter, setTagFilter] = useState("all");
+  const [loading, setLoading] = useState(false);
+  const [viewMode, setViewMode] = useState<"list" | "grid">("grid");
+  const [catOpen, setCatOpen] = useState<Record<string, boolean>>({
+    [CATEGORIES[0].key]: true,
+    [CATEGORIES[1].key]: true,
+    [CATEGORIES[2].key]: true,
+    [CATEGORIES[3].key]: true,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+    listComponentsFn({ data: {} })
+      .then((comps) => {
+        if (!cancelled) {
+          // 按 prototypeKey 去重：内置（图标+基础）优先，DB 组件排除与内置同 key 的；
+          // DB 组件自身也按 prototypeKey 去重（防 admin 重复添加）
+          const seenKeys = new Set(
+            ALL_BUILTIN_ITEMS.map((c) => c.prototypeKey).filter(Boolean),
+          );
+          // Prisma Component.createdAt 是 Date，本地 ComponentItem.createdAt 是 string，统一转换
+          const mappedComps: ComponentItem[] = comps.map((c) => ({
+            id: c.id,
+            name: c.name,
+            description: c.description,
+            type: c.type,
+            category: c.category,
+            subCategory: c.subCategory,
+            path: c.path,
+            tags: c.tags,
+            config: c.config,
+            defaultProps: c.defaultProps,
+            defaultStyle: c.defaultStyle,
+            preview: c.preview,
+            version: c.version,
+            source: c.source,
+            sourceId: c.sourceId,
+            createdAt: c.createdAt.toISOString(),
+            prototypeKey: c.prototypeKey ?? undefined,
+            defaultWidth: c.defaultWidth,
+            defaultHeight: c.defaultHeight,
+          }));
+          const dedupedComps = mappedComps.filter((c) => {
+            const key = c.prototypeKey;
+            if (!key || seenKeys.has(key)) return false;
+            seenKeys.add(key);
+            return true;
+          });
+          setComponents([...ALL_BUILTIN_ITEMS, ...dedupedComps]);
+          const tagSet = new Set<string>();
+          for (const c of dedupedComps) for (const t of c.tags || []) tagSet.add(t);
+          setAllTags(Array.from(tagSet));
+          setLoading(false);
+        }
+      })
+      .catch(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, []);
+
+  const grouped = useMemo(() => {
+    let filtered = components;
+    if (search) {
+      const q = search.toLowerCase();
+      filtered = filtered.filter(
+        (c) =>
+          c.name.toLowerCase().includes(q) ||
+          c.description?.toLowerCase().includes(q) ||
+          (c.tags || []).some((t) => t.toLowerCase().includes(q)) ||
+          c.subCategory?.toLowerCase().includes(q)
+      );
+    }
+    if (tagFilter !== "all") {
+      filtered = filtered.filter((c) => (c.tags || []).includes(tagFilter));
+    }
+
+    const map: Record<string, ComponentItem[]> = {};
+    for (const cat of CATEGORIES) map[cat.key] = [];
+    for (const c of filtered) {
+      const key = c.category;
+      if (key && key in map) map[key].push(c);
+    }
+    for (const cat of CATEGORIES) {
+      map[cat.key].sort((a, b) => (a.path ?? a.name).localeCompare(b.path ?? b.name));
+    }
+    return map;
+  }, [components, search, tagFilter]);
+
+  const groups = useMemo(
+    () =>
+      CATEGORIES.map((cat) => [cat.key, cat.labelKey, grouped[cat.key] || []] as [string, string, ComponentItem[]]).filter(
+        ([, , items]) => !search || items.length > 0
+      ),
+    [grouped, search]
+  );
+
+  return (
+    <div className="relative h-full">
+      <div className={cn("flex flex-col bg-background h-full rounded-bl-xl transition-[width] duration-200 overflow-hidden", open ? "w-70 border-r" : "w-0")}>
+        {open && (
+          <>
+            <div className="shrink-0 flex items-center h-10 border-b">
+              <button
+                onClick={() => setActiveTab("page")}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-1.5 text-xs font-medium h-full transition-colors",
+                  activeTab === "page" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <FileText className="size-3.5" /> {t("sidebar.tabPage")}
+              </button>
+              <button
+                onClick={() => setActiveTab("outline")}
+                className={cn(
+                  "flex-1 flex items-center justify-center gap-1.5 text-xs font-medium h-full transition-colors",
+                  activeTab === "outline" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Layers className="size-3.5" /> {t("sidebar.tabOutline")}
+              </button>
+
+            </div>
+
+            <ResizablePanelGroup orientation="vertical" className="flex-1">
+              <ResizablePanel defaultSize={35} minSize="20%" maxSize="50%">
+                <div className="h-full overflow-hidden">
+                  {activeTab === "page" ? (
+                    <PRDPageTab prdId={prdId} activePageId={activePageId} onPageSelect={onPageSelect} />
+                  ) : (
+                    <OutlineTab elements={canvasElements} onSelect={onOutlineSelect} />
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              <ResizablePanel defaultSize={65} minSize="30%">
+                <div className="flex flex-col h-full">
+                  <div className="shrink-0 flex items-center h-10 border-b">
+                    <button
+                      onClick={() => setComponentTab("library")}
+                      className={cn(
+                        "flex-1 flex items-center justify-center gap-1.5 text-xs font-medium h-full transition-colors",
+                        componentTab === "library" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      <Package className="size-3.5" /> {t("sidebar.tabLibrary")}
+                    </button>
+                    <button
+                      onClick={() => setComponentTab("agent")}
+                      className={cn(
+                        "flex-1 flex items-center justify-center gap-1.5 text-xs font-medium h-full transition-colors",
+                        componentTab === "agent" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      <Sparkles className="size-3.5" /> {t("sidebar.tabAgent")}
+                    </button>
+                  </div>
+
+                  {componentTab === "agent" ? (
+                    <PRDAgentPanel
+                      prdId={prdId}
+                      elements={canvasElements}
+                      onElementsChange={(newElements) => onElementsChange?.(newElements)}
+                      selectedModel={aiModel ?? ""}
+                      onModelChange={onAiModelChange ?? (() => {})}
+                    />
+                  ) : (
+                  <div className="flex-1 overflow-y-auto">
+                    <div className="shrink-0 px-2 pb-2 border-b">
+                      <div className="flex items-center gap-1 mt-2">
+                        <div className="relative flex-1">
+                          <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground/40" />
+                          <Input placeholder={t("sidebar.searchComponents")} className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30" value={search} onChange={(e) => setSearch(e.target.value)} />
+                        </div>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <button
+                              onClick={() => setViewMode((m) => (m === "list" ? "grid" : "list"))}
+                              className="size-6 shrink-0 flex items-center justify-center rounded hover:bg-muted text-muted-foreground/50 hover:text-muted-foreground"
+                            >
+                              {viewMode === "list" ? <LayoutGrid className="size-3.5" /> : <List className="size-3.5" />}
+                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>{viewMode === "list" ? t("sidebar.gridView") : t("sidebar.listView")}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
+                      <FilterBar allTags={allTags} tagFilter={tagFilter} onTagFilterChange={setTagFilter} />
+                    </div>
+
+                    <div className="p-2 space-y-1">
+                      {loading ? (
+                        <div className="space-y-2 p-2">
+                          {[1, 2, 3].map((i) => <div key={i} className="h-6 rounded bg-muted/50 animate-pulse" />)}
+                        </div>
+                      ) : groups.length === 0 ? (
+                        <p className="text-xs text-muted-foreground text-center py-4">{search ? t("sidebar.noMatch") : t("sidebar.noComponents")}</p>
+                      ) : (
+                        groups.map(([category, labelKey, items]) => (
+                          <div key={category}>
+                            <div className="flex items-center gap-1 px-2 py-1.5 bg-muted/20 rounded-t-md border-b border-border/40 cursor-pointer" onClick={() => setCatOpen((p) => ({ ...p, [category]: !p[category] }))}>
+                              <ChevronDown className={cn("size-3 text-muted-foreground/60 transition-transform", catOpen[category] ? "rotate-0" : "-rotate-90")} />
+                              <span className="text-muted-foreground shrink-0">{CATEGORIES.find((c) => c.key === category)?.icon}</span>
+                              <span className="text-xs font-semibold text-foreground/90 flex-1">{t(labelKey)}</span>
+                              <span className="text-[10px] text-muted-foreground/60">{items.length}</span>
+                            </div>
+                            {catOpen[category] && (
+                              viewMode === "list" ? (
+                                <div className="space-y-0.5">
+                                  {items.map((item) => (
+                                    <TooltipProvider key={item.id}>
+                                      <Tooltip>
+                                        <TooltipTrigger asChild>
+                                          <div className="flex items-center gap-2 px-2 py-2 rounded-md hover:bg-muted/50 cursor-grab active:cursor-grabbing group text-sm" draggable onDragStart={(e) => { e.dataTransfer.setData("text/plain", `proto:${item.prototypeKey}`); }}>
+                                            <GripVertical className="size-3 shrink-0 text-muted-foreground/30 group-hover:text-muted-foreground/60 transition-colors" />
+                                            {React.createElement(COMPONENT_ICONS[item.prototypeKey ?? ""] ?? ComponentIcon, { className: "size-4 shrink-0 text-muted-foreground" })}
+                                            <div className="min-w-0 flex-1">
+                                              <div className="text-sm truncate">{item.name}</div>
+                                            </div>
+                                          </div>
+                                        </TooltipTrigger>
+                                        <TooltipContent side="right" className="max-w-55">
+                                          <div className="space-y-1">
+                                            <p className="text-xs font-medium">{item.name}</p>
+                                            {item.description && <p className="text-[10px] text-muted-foreground">{item.description}</p>}
+                                            {/* <div className="flex items-center gap-1.5 pt-0.5">
+                                              <span className="text-[10px] text-muted-foreground/60">{item.tags?.length ? item.tags.join(", ") : t("sidebar.noTags")}</span>
+                                            </div> */}
+                                            {item.source !== "manual" && item.sourceId && (
+                                              <div className="pt-0.5">
+                                                <code className="text-[9px] px-1 py-0.5 rounded bg-muted text-muted-foreground">{item.source} {item.sourceId}</code>
+                                              </div>
+                                            )}
+                                          </div>
+                                        </TooltipContent>
+                                      </Tooltip>
+                                    </TooltipProvider>
+                                  ))}
+                                </div>
+                              ) : category === "icons" ? (
+                                <div className="grid grid-cols-4 gap-1 p-2">
+                                  {items.map((item) => {
+                                    const IconComp = COMPONENT_ICONS[item.prototypeKey ?? ""] ?? Smile;
+                                    return (
+                                      <div
+                                        key={item.id}
+                                        draggable
+                                        onDragStart={(e) => { e.dataTransfer.setData("text/plain", `proto:${item.prototypeKey}`); }}
+                                        className="flex flex-col items-center gap-1 p-1 rounded-md hover:bg-muted hover:text-foreground text-muted-foreground cursor-grab active:cursor-grabbing transition-colors"
+                                      >
+                                        <IconComp className="size-6 shrink-0" />
+                                        <span className="text-[10px] truncate w-full text-center">{item.name}</span>
+                                      </div>
+                                    );
+                                  })}
+                                </div>
+                              ) : (
+                                <div className="grid grid-cols-2 gap-2 p-2">
+                                  {items.map((item) => (
+                                    <div
+                                      key={item.id}
+                                      draggable
+                                      onDragStart={(e) => { e.dataTransfer.setData("text/plain", `proto:${item.prototypeKey}`); }}
+                                      className="flex flex-col gap-1 cursor-grab active:cursor-grabbing"
+                                    >
+                                      <ComponentThumbnail type={item.prototypeKey ?? item.type} />
+                                      <span className="text-xs truncate text-center">{item.name}</span>
+                                    </div>
+                                  ))}
+                                </div>
+                              )
+                            )}
+                          </div>
+                        ))
+                      )}
+                    </div>
+                  </div>
+                  )}
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </>
+        )}
+      </div>
+
+      <button
+        onClick={onToggle}
+        className="absolute top-1/2 -translate-y-1/2 z-20 flex size-7 items-center justify-center rounded-full border bg-background shadow-sm hover:bg-muted transition-colors"
+        style={{
+          left: open ? "auto" : -10,
+          right: open ? -14 : "auto",
+          clipPath: open ? undefined : "inset(0 0 0 10px)",
+        }}
+      >
+        {open ? <ChevronLeft className="size-3.5" /> : <ChevronRight className="size-3.5 ml-1.5" />}
+      </button>
+    </div>
+  );
+}