@allbluecn/web-app 0.17.1 → 0.18.0

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

@@ -1,466 +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, useMemo } from "react";
-import { m } from '@/paraglide/messages.js'
-import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { ComponentThumbnail } from "./component-thumbnail";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/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/kernel";
-import { listComponentsFn } from "@/plugins/core/prd/serverFns/components";
-import { BUILTIN_COMPONENTS, ICON_COMPONENTS, ICON_LUCIDE_MAP, type PrototypeComponentConfig } 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: PrototypeComponentConfig) => ({
-  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", label: m.prd_prototype_categoryIcon, icon: <Smile className="size-3.5" /> },
-  { key: "basic", label: m.prd_prototype_categoryBasic, icon: <Box className="size-3.5" /> },
-  { key: "content", label: m.prd_prototype_categoryContent, icon: <LayoutTemplate className="size-3.5" /> },
-  { key: "template", label: m.prd_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 [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: Awaited<ReturnType<typeof listComponentsFn>>) => {
-        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: Awaited<ReturnType<typeof listComponentsFn>>[number]) => ({
-            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.label(), 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" /> {m.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" /> {m.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" /> {m.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" /> {m.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={m.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: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)} />
-                        </div>
-                        <Tooltip>
-                          <TooltipTrigger render={<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" />}
-                            </TooltipTrigger>
-                          <TooltipContent>
-                            <p>{viewMode === "list" ? m.sidebar_gridView() : m.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 ? m.sidebar_noMatch() : m.sidebar_noComponents()}</p>
-                      ) : (
-                        groups.map(([category, label, 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">{label}</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 render={<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>
-                                          </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>
-  );
-}