@allbluecn/web-app 0.6.3 → 0.7.0

package/src/plugins/core/prd/components/prototype/ResizeHandles.tsx

@@ -0,0 +1,95 @@
+// 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, { useCallback } from "react";
+import type { ResizeDirection } from "@allbluecn/shared/types/prototype";
+
+interface ResizeHandlesProps {
+  onResize: (dx: number, dy: number, direction: ResizeDirection) => void;
+  onResizeEnd?: () => void;
+  minWidth?: number;
+  minHeight?: number;
+  directions: ResizeDirection[];
+}
+
+const HANDLE_SIZE = 8;
+const HANDLE_STYLE: React.CSSProperties = {
+  position: "absolute",
+  width: HANDLE_SIZE,
+  height: HANDLE_SIZE,
+  background: "var(--background)",
+  border: "2px solid var(--primary)",
+  borderRadius: "50%",
+  zIndex: 10,
+};
+
+const DIRECTION_CURSORS: Record<ResizeDirection, string> = {
+  n: "ns-resize", s: "ns-resize",
+  e: "ew-resize", w: "ew-resize",
+  ne: "nesw-resize", sw: "nesw-resize",
+  nw: "nwse-resize", se: "nwse-resize",
+};
+
+const DIRECTION_POSITIONS: Record<ResizeDirection, React.CSSProperties> = {
+  n: { top: -HANDLE_SIZE / 2, left: "50%", marginLeft: -HANDLE_SIZE / 2, cursor: "ns-resize" },
+  s: { bottom: -HANDLE_SIZE / 2, left: "50%", marginLeft: -HANDLE_SIZE / 2, cursor: "ns-resize" },
+  e: { right: -HANDLE_SIZE / 2, top: "50%", marginTop: -HANDLE_SIZE / 2, cursor: "ew-resize" },
+  w: { left: -HANDLE_SIZE / 2, top: "50%", marginTop: -HANDLE_SIZE / 2, cursor: "ew-resize" },
+  ne: { top: -HANDLE_SIZE / 2, right: -HANDLE_SIZE / 2, cursor: "nesw-resize" },
+  nw: { top: -HANDLE_SIZE / 2, left: -HANDLE_SIZE / 2, cursor: "nwse-resize" },
+  se: { bottom: -HANDLE_SIZE / 2, right: -HANDLE_SIZE / 2, cursor: "nwse-resize" },
+  sw: { bottom: -HANDLE_SIZE / 2, left: -HANDLE_SIZE / 2, cursor: "nesw-resize" },
+};
+
+export function ResizeHandles({ onResize, onResizeEnd, minWidth = 10, minHeight = 10, directions }: ResizeHandlesProps) {
+  const createMouseDown = useCallback(
+    (dir: ResizeDirection) => (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const startX = e.clientX;
+      const startY = e.clientY;
+
+      const handleMouseMove = (ev: MouseEvent) => {
+        onResize(ev.clientX - startX, ev.clientY - startY, dir);
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        onResizeEnd?.();
+      };
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [onResize, onResizeEnd]
+  );
+
+  return (
+    <>
+      {directions.map((dir) => (
+        <div
+          key={dir}
+          style={{ ...HANDLE_STYLE, ...DIRECTION_POSITIONS[dir] }}
+          onMouseDown={createMouseDown(dir)}
+          onPointerDown={(e) => e.stopPropagation()}
+        />
+      ))}
+    </>
+  );
+}

package/src/plugins/core/prd/components/prototype/icon-components.ts

@@ -0,0 +1,57 @@
+// 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 type { PrototypeComponentConfig, ComponentCategory } from "@/components/prototype";
+import { getClientI18n } from "@/i18n/client";
+import { IconPrototype, ICON_LUCIDE_MAP } from "./IconPrototype";
+
+const i18n = getClientI18n();
+
+const ICON_DEFS: Array<{ value: string; nameKey: string; category: ComponentCategory }> = [
+  { value: "smile", nameKey: "prototype.iconGeneral", category: "icons" },
+  { value: "fileText", nameKey: "prototype.iconFile", category: "icons" },
+  { value: "arrowLeft", nameKey: "prototype.iconBack", category: "icons" },
+  { value: "mousePointerClick", nameKey: "prototype.iconButton", category: "icons" },
+  { value: "textCursorInput", nameKey: "prototype.iconInput", category: "icons" },
+  { value: "table2", nameKey: "prototype.iconTable", category: "icons" },
+  { value: "image", nameKey: "prototype.iconImage", category: "icons" },
+  { value: "shoppingCart", nameKey: "prototype.iconShopping", category: "icons" },
+  { value: "user", nameKey: "prototype.iconUser", category: "icons" },
+  { value: "settings2", nameKey: "prototype.iconSettings", category: "icons" },
+  { value: "mail", nameKey: "prototype.iconMail", category: "icons" },
+  { value: "bell", nameKey: "prototype.iconNotification", category: "icons" },
+  { value: "search", nameKey: "prototype.iconSearch", category: "icons" },
+  { value: "calendar", nameKey: "prototype.iconCalendar", category: "icons" },
+  { value: "barChart3", nameKey: "prototype.iconChart", category: "icons" },
+  { value: "messageSquare", nameKey: "prototype.iconMessage", category: "icons" },
+];
+
+export const ICON_COMPONENTS: PrototypeComponentConfig[] = ICON_DEFS.map((def) => ({
+  type: `icon-${def.value}`,
+  name: i18n.t(def.nameKey),
+  source: "builtin" as const,
+  category: def.category,
+  defaultWidth: 48,
+  defaultHeight: 48,
+  defaultProps: { iconName: def.value, size: 32 },
+  defaultStyle: { color: "var(--foreground)" },
+  component: IconPrototype,
+  resizeMode: "both" as const,
+}));
+
+/** 左侧组件库用的 iconName → lucide 组件映射（用于显示图标缩略图） */
+export { ICON_LUCIDE_MAP };

package/src/plugins/core/prd/components/prototype/index.ts

@@ -0,0 +1,31 @@
+// 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/>.
+
+export * from "@/components/prototype";
+
+import type { PrototypeComponentConfig } from "@/components/prototype";
+
+const _localModules = import.meta.glob("./imported/*.tsx", {
+  eager: true,
+  import: "config",
+}) as Record<string, PrototypeComponentConfig>;
+
+export const LOCAL_IMPORTED_COMPONENTS: PrototypeComponentConfig[] =
+  Object.values(_localModules);
+
+export { IconPrototype, ICON_LUCIDE_MAP } from "./IconPrototype";
+export { ICON_COMPONENTS } from "./icon-components";

package/src/plugins/core/prd/components/restore-version-dialog.tsx

@@ -0,0 +1,76 @@
+// 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 from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui-shared/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui-shared/dialog";
+
+interface RestoreVersionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentVersionNo: number;
+  targetVersionNo: number;
+  onConfirm: () => void;
+  loading?: boolean;
+}
+
+export function RestoreVersionDialog({
+  open,
+  onOpenChange,
+  currentVersionNo,
+  targetVersionNo,
+  onConfirm,
+  loading,
+}: RestoreVersionDialogProps) {
+  const { t } = useTranslation(["prd", "common"]);
+  const newVersionNo = currentVersionNo + 1;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("version.restoreConfirmTitle")}</DialogTitle>
+          <DialogDescription>
+            {t("version.restoreConfirmDescription", { current: currentVersionNo, next: newVersionNo, target: targetVersionNo })}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="ghost"
+            size="sm"
+            disabled={loading}
+            onClick={() => onOpenChange(false)}
+          >
+            {t("common:button.cancel")}
+          </Button>
+          <Button size="sm" disabled={loading} onClick={onConfirm}>
+            {loading ? t("version.restoring") : t("version.confirmRestore")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/plugins/core/prd/components/schemas/create-prd.ts

@@ -0,0 +1,26 @@
+// 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 { z } from "zod";
+
+export const createPrdSchema = z.object({
+  name: z.string().min(1, "Please enter a PRD name"),
+  description: z.string(),
+  icon: z.string(),
+});
+
+export type CreatePrdValues = z.infer<typeof createPrdSchema>;

package/src/plugins/core/prd/components/share/prd-share-client.tsx

@@ -0,0 +1,118 @@
+// 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 { useState, useMemo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { SharePasswordGate } from "./share-password-gate";
+import { ShareLayout } from "./share-layout";
+import { ShareSSEListener } from "./share-sse-listener";
+import { AlertCircle } from "lucide-react";
+import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/ui-shared/auth-layout";
+
+interface SharePageClientProps {
+  prdId: string;
+  share: any;
+  hasPassword: boolean;
+  isActive?: boolean;
+  versionLabel?: string | null;
+  shareNotFound?: boolean;
+}
+
+export function SharePageClient({ prdId, share, hasPassword: initialHasPassword, isActive: initialIsActive = true, versionLabel, shareNotFound }: SharePageClientProps) {
+  const { t } = useTranslation("prd");
+  const sessionKey = useMemo(() => `share_pwd_${prdId}_${versionLabel || 'main'}`, [prdId, versionLabel]);
+  const [hasPassword, setHasPassword] = useState(initialHasPassword);
+  const [active, setActive] = useState(initialIsActive);
+  const [verified, setVerified] = useState(
+    !hasPassword || (typeof window !== "undefined" && !!sessionStorage.getItem(sessionKey))
+  );
+
+  const handlePasswordChange = useCallback((newHasPassword: boolean) => {
+    sessionStorage.removeItem(sessionKey);
+    setHasPassword(newHasPassword);
+    if (newHasPassword) {
+      setVerified(false);
+    } else {
+      setVerified(true);
+    }
+  }, [sessionKey]);
+
+  const handleShareDisabled = useCallback(() => {
+    setActive(false);
+  }, []);
+
+  const handleShareEnabled = useCallback(() => {
+    setActive(true);
+  }, []);
+
+  return (
+    <>
+      <ShareSSEListener prdId={prdId} shareId={share?.id || ''} versionLabel={versionLabel} onPasswordChange={handlePasswordChange} onShareDisabled={handleShareDisabled} onShareEnabled={handleShareEnabled} />
+      {shareNotFound ? (
+        <AuthLayout>
+          <AuthLayoutLeft>
+            <div className="flex flex-col gap-6 w-full max-w-xs">
+              <div className="space-y-2">
+                <AlertCircle className="size-10 text-muted-foreground" />
+                <h1 className="text-2xl font-bold">{t("shareClient.notFoundTitle")}</h1>
+                <p className="text-muted-foreground text-sm">
+                  {versionLabel ? t("shareClient.versionUnavailable", { version: versionLabel }) : t("shareClient.linkUnavailable")}
+                </p>
+              </div>
+            </div>
+          </AuthLayoutLeft>
+          <AuthLayoutRight>
+            <div className="space-y-4">
+              <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
+              <p className="text-lg text-muted-foreground">{t("share.brandTagline")}</p>
+            </div>
+          </AuthLayoutRight>
+        </AuthLayout>
+      ) : !active ? (
+        <AuthLayout>
+          <AuthLayoutLeft>
+            <div className="flex flex-col gap-6 w-full max-w-xs">
+              <div className="space-y-2">
+                <AlertCircle className="size-10 text-muted-foreground" />
+                <h1 className="text-2xl font-bold">{t("shareClient.inactiveTitle")}</h1>
+                <p className="text-muted-foreground text-sm">
+                  {versionLabel ? t("shareClient.versionUnavailable", { version: versionLabel }) : t("shareClient.linkUnavailable")}
+                </p>
+              </div>
+            </div>
+          </AuthLayoutLeft>
+          <AuthLayoutRight>
+            <div className="space-y-4">
+              <h1 className="text-4xl font-bold tracking-tight">AllBlue</h1>
+              <p className="text-lg text-muted-foreground">{t("share.brandTagline")}</p>
+            </div>
+          </AuthLayoutRight>
+        </AuthLayout>
+      ) : !verified ? (
+        <SharePasswordGate
+          prdId={prdId}
+          shareName={share.prd.name}
+          onVerified={() => setVerified(true)}
+          prdver={versionLabel}
+        />
+      ) : (
+        <ShareLayout prdId={prdId} share={share} versionLabel={versionLabel} />
+      )}
+    </>
+  );
+}

package/src/plugins/core/prd/components/share/share-annotation-overlay.tsx

@@ -0,0 +1,122 @@
+// 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 { useEffect, useState } from "react";
+
+interface Segment {
+  sx: number;
+  sy: number;
+  ex: number;
+  ey: number;
+  componentId: string;
+}
+
+interface ShareAnnotationOverlayProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  selectedIds: string[];
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
+export function ShareAnnotationOverlay({ containerRef, selectedIds }: ShareAnnotationOverlayProps) {
+  const [segments, setSegments] = useState<Segment[]>([]);
+
+  useEffect(() => {
+    if (selectedIds.length === 0) {
+      setSegments([]);
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) return;
+
+    let lastKey = "";
+    let raf = 0;
+
+    const recompute = () => {
+      const cRect = container.getBoundingClientRect();
+
+      const segs: Segment[] = [];
+      for (const id of selectedIds) {
+        const startEl = container.querySelector(
+          `[data-element-id="${CSS.escape(id)}"]`
+        ) as HTMLElement | null;
+        if (!startEl) continue;
+        const sRect = startEl.getBoundingClientRect();
+        const sx = clamp(sRect.right - cRect.left, 0, cRect.width);
+        const sy = clamp(sRect.top + sRect.height / 2 - cRect.top, 0, cRect.height);
+
+        const endEls = Array.from(
+          container.querySelectorAll(`[data-component-id="${CSS.escape(id)}"]`)
+        ) as HTMLElement[];
+        for (const el of endEls) {
+          const r = el.getBoundingClientRect();
+          segs.push({
+            componentId: id,
+            sx, sy,
+            ex: clamp(r.left - cRect.left, 0, cRect.width),
+            ey: clamp(r.top + r.height / 2 - cRect.top, 0, cRect.height),
+          });
+        }
+      }
+
+      const key = segs.map((s) => `${s.componentId}:${s.sx},${s.sy}->${s.ex},${s.ey}`).join("|");
+      if (key !== lastKey) {
+        lastKey = key;
+        setSegments(segs);
+      }
+      raf = requestAnimationFrame(recompute);
+    };
+
+    raf = requestAnimationFrame(recompute);
+    return () => cancelAnimationFrame(raf);
+  }, [selectedIds, containerRef]);
+
+  if (selectedIds.length === 0 || segments.length === 0) return null;
+  const container = containerRef.current;
+
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none z-30"
+      width={container?.clientWidth ?? 0}
+      height={container?.clientHeight ?? 0}
+    >
+      <defs>
+        <marker id="share-annot-arrow" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+          <path d="M0,0 L8,4 L0,8 z" fill="var(--primary)" />
+        </marker>
+      </defs>
+      {segments.map((seg, i) => {
+        const midX = (seg.sx + seg.ex) / 2;
+        return (
+          <path
+            key={`${seg.componentId}-${i}`}
+            d={`M ${seg.sx},${seg.sy} C ${midX},${seg.sy} ${midX},${seg.ey} ${seg.ex},${seg.ey}`}
+            stroke="var(--primary)"
+            strokeWidth={1.5}
+            fill="none"
+            strokeDasharray="4 3"
+            markerEnd="url(#share-annot-arrow)"
+            opacity={0.7}
+          />
+        );
+      })}
+    </svg>
+  );
+}