@allbluecn/web-app 0.6.3 → 0.7.1

package/src/components/prototype/block/index.ts

@@ -0,0 +1,22 @@
+// 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 "../types";
+
+export const BLOCK_CATEGORY: ComponentCategory = "content";
+
+export const BUILTIN_BLOCK_COMPONENTS: PrototypeComponentConfig[] = [];

package/src/components/prototype/component/Button.tsx

@@ -0,0 +1,49 @@
+// 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";
+
+interface ButtonProps {
+  props?: Record<string, any>;
+  style?: Record<string, any>;
+}
+
+export function PrototypeButton({ props, style }: ButtonProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "8px 16px",
+        borderRadius: "6px",
+        background: "var(--primary)",
+        color: "var(--primary-foreground)",
+        fontSize: "14px",
+        fontWeight: 500,
+        cursor: "default",
+        border: "1px solid var(--primary)",
+        ...style,
+      }}
+    >
+      {props?.text || "按钮"}
+    </div>
+  );
+}

package/src/components/prototype/component/Card.tsx

@@ -0,0 +1,49 @@
+// 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";
+
+interface CardProps {
+  props?: Record<string, any>;
+  style?: Record<string, any>;
+}
+
+export function PrototypeCard({ props, style }: CardProps) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        borderRadius: "8px",
+        border: "1px solid var(--border)",
+        background: "var(--card)",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+        padding: "16px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        ...style,
+      }}
+    >
+      <div style={{ fontSize: "12px", fontWeight: 600, color: "var(--muted-foreground)", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+        {props?.title || "卡片标题"}
+      </div>
+      <div style={{ flex: 1, borderRadius: "4px", background: "var(--muted)", minHeight: "60px" }} />
+    </div>
+  );
+}

package/src/components/prototype/component/GenericPrototype.tsx

@@ -0,0 +1,42 @@
+// 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";
+
+export function GenericPrototype({ props, style }: { props?: Record<string, any>; style?: Record<string, any> }) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--muted)",
+        border: "1px dashed var(--border)",
+        borderRadius: "4px",
+        fontSize: "12px",
+        color: "var(--muted-foreground)",
+        overflow: "hidden",
+        ...style,
+      }}
+    >
+      {props?.text || props?.label || props?.title || props?.placeholder || props?.alt || "自定义组件"}
+    </div>
+  );
+}

package/src/components/prototype/component/Image.tsx

@@ -0,0 +1,51 @@
+// 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 { Image } from "lucide-react";
+
+interface ImageProps {
+  props?: Record<string, any>;
+  style?: Record<string, any>;
+}
+
+export function PrototypeImage({ props, style }: ImageProps) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        background: "var(--muted)",
+        border: "1px dashed var(--border)",
+        borderRadius: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "var(--muted-foreground)",
+        fontSize: "12px",
+        ...style,
+      }}
+    >
+      <div className="flex flex-col items-center justify-center h-full gap-3">
+        <Image />
+        <span>{props?.alt || "图片"}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/prototype/component/Input.tsx

@@ -0,0 +1,45 @@
+// 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";
+
+interface InputProps {
+  props?: Record<string, any>;
+  style?: Record<string, any>;
+}
+
+export function PrototypeInput({ props, style }: InputProps) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        padding: "8px 12px",
+        border: "1px solid var(--input)",
+        borderRadius: "6px",
+        background: "var(--background)",
+        fontSize: "14px",
+        color: "var(--muted-foreground)",
+        cursor: "default",
+        ...style,
+      }}
+    >
+      {props?.placeholder || "输入框"}
+    </div>
+  );
+}

package/src/components/prototype/component/Text.tsx

@@ -0,0 +1,43 @@
+// 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";
+
+interface TextProps {
+  props?: Record<string, any>;
+  style?: Record<string, any>;
+}
+
+export function PrototypeText({ props, style }: TextProps) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+        padding: "4px 0",
+        fontSize: "14px",
+        color: "var(--foreground)",
+        lineHeight: "2.3",
+        wordBreak: "break-word",
+        ...style,
+      }}
+    >
+      {props?.text || "文本内容"}
+    </div>
+  );
+}

package/src/components/prototype/component/index.ts

@@ -0,0 +1,102 @@
+// 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 "../types";
+import { PrototypeText } from "./Text";
+import { PrototypeButton } from "./Button";
+import { PrototypeInput } from "./Input";
+import { PrototypeCard } from "./Card";
+import { PrototypeImage } from "./Image";
+
+export { PrototypeText } from "./Text";
+export { PrototypeButton } from "./Button";
+export { PrototypeInput } from "./Input";
+export { PrototypeCard } from "./Card";
+export { PrototypeImage } from "./Image";
+export { GenericPrototype } from "./GenericPrototype";
+
+export const ATOMIC_CATEGORY: ComponentCategory = "basic";
+
+export const BUILTIN_ATOMIC_COMPONENTS: PrototypeComponentConfig[] = [
+  {
+    type: "text",
+    name: "文本",
+    source: "builtin",
+    category: ATOMIC_CATEGORY,
+    defaultWidth: 200,
+    defaultHeight: 40,
+    defaultProps: { text: "文本内容" },
+    defaultStyle: { fontSize: "14px", padding: "4px 0" },
+    editableProps: [{ key: "text", label: "文本内容", type: "textarea" }],
+    commentTemplate: "<p>内容说明：</p><ul><li>用途：</li></ul>",
+    component: PrototypeText,
+  },
+  {
+    type: "button",
+    name: "按钮",
+    source: "builtin",
+    category: ATOMIC_CATEGORY,
+    defaultWidth: 100,
+    defaultHeight: 36,
+    defaultProps: { text: "按钮" },
+    defaultStyle: { fontSize: "14px", fontWeight: "500", borderRadius: "6px", padding: "8px 16px" },
+    editableProps: [{ key: "text", label: "按钮文字", type: "text" }],
+    commentTemplate: "<p>交互说明：</p><ul><li>点击事件：</li><li>跳转目标：</li></ul>",
+    resizeMode: "horizontal",
+    component: PrototypeButton,
+  },
+  {
+    type: "input",
+    name: "输入框",
+    source: "builtin",
+    category: ATOMIC_CATEGORY,
+    defaultWidth: 240,
+    defaultHeight: 36,
+    defaultProps: { placeholder: "请输入" },
+    defaultStyle: { fontSize: "14px", borderRadius: "6px", padding: "8px 12px" },
+    editableProps: [{ key: "placeholder", label: "占位提示", type: "text" }],
+    commentTemplate: "<p>校验规则：</p><ul><li>必填：是/否</li><li>格式限制：</li></ul>",
+    resizeHandles: ["e", "w"],
+    component: PrototypeInput,
+  },
+  {
+    type: "card",
+    name: "卡片",
+    source: "builtin",
+    category: ATOMIC_CATEGORY,
+    defaultWidth: 300,
+    defaultHeight: 200,
+    defaultProps: { title: "卡片标题" },
+    defaultStyle: { borderRadius: "8px", padding: "16px" },
+    editableProps: [{ key: "title", label: "卡片标题", type: "text" }],
+    commentTemplate: "<p>数据来源：</p><ul><li>展示字段：</li></ul>",
+    component: PrototypeCard,
+  },
+  {
+    type: "image",
+    name: "图片",
+    source: "builtin",
+    category: ATOMIC_CATEGORY,
+    defaultWidth: 200,
+    defaultHeight: 150,
+    defaultProps: { alt: "图片描述" },
+    defaultStyle: { fontSize: "12px", borderRadius: "6px" },
+    editableProps: [{ key: "alt", label: "图片描述", type: "text" }],
+    commentTemplate: "<p>图片说明：</p><ul><li>来源：</li><li>尺寸要求：</li></ul>",
+    component: PrototypeImage,
+  },
+];

package/src/components/prototype/component-preview.tsx

@@ -0,0 +1,137 @@
+// 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, { useMemo } from "react";
+import { cn } from "./utils";
+
+interface ComponentPreviewProps {
+  type: string;
+  name: string;
+  defaultProps?: Record<string, any> | null;
+  defaultStyle?: Record<string, any> | null;
+  size: "sm" | "md" | "grid";
+  className?: string;
+}
+
+const SAFE_STYLE_KEYS = new Set([
+  "background", "backgroundColor", "color", "borderRadius",
+  "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+  "margin", "fontSize", "fontWeight", "fontFamily", "textAlign",
+  "border", "borderTop", "borderRight", "borderBottom", "borderLeft",
+  "borderColor", "borderWidth", "borderStyle",
+  "boxShadow", "opacity",
+  "width", "height", "minWidth", "minHeight",
+  "display", "flexDirection", "alignItems", "justifyContent", "gap",
+  "overflow", "textOverflow", "whiteSpace",
+]);
+
+function extractStyle(
+  defaultStyle: Record<string, any> | null | undefined
+): Record<string, any> {
+  if (!defaultStyle) return {};
+  const safe: Record<string, any> = {};
+  for (const [key, value] of Object.entries(defaultStyle)) {
+    if (SAFE_STYLE_KEYS.has(key)) safe[key] = value;
+  }
+  return safe;
+}
+
+function extractText(
+  defaultProps: Record<string, any> | null | undefined,
+  name: string
+): string {
+  if (!defaultProps) return name;
+  const keys = ["text", "label", "title", "content", "placeholder", "value", "children"];
+  for (const key of keys) {
+    const val = defaultProps[key];
+    if (typeof val === "string" && val.trim()) return val;
+  }
+  return name;
+}
+
+const SIZE_CLASSES: Record<string, string> = {
+  sm: "w-15 h-7 text-[9px]",
+  md: "w-full min-h-40",
+  grid: "w-full aspect-[4/3]",
+};
+
+function ComponentPreviewInner({
+  type,
+  name,
+  defaultProps,
+  defaultStyle,
+  size,
+  className,
+}: ComponentPreviewProps) {
+  const style = useMemo(() => extractStyle(defaultStyle), [defaultStyle]);
+  const text = useMemo(() => extractText(defaultProps, name), [defaultProps, name]);
+
+  if (type === "component") {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center overflow-hidden rounded border border-border/40 bg-background",
+          SIZE_CLASSES[size],
+          className
+        )}
+        style={style}
+      >
+        <span className="truncate px-1 leading-tight text-center">{text}</span>
+      </div>
+    );
+  }
+
+  if (type === "block") {
+    return (
+      <div
+        className={cn(
+          "flex flex-col items-center justify-center overflow-hidden rounded border border-border/40 bg-background p-1",
+          SIZE_CLASSES[size],
+          className
+        )}
+        style={style}
+      >
+        <div className="w-full h-1 rounded-sm bg-muted-foreground/20 mb-0.5" />
+        <div className="flex-1 w-full rounded-sm bg-muted-foreground/10" />
+        <span className="text-[8px] text-muted-foreground/60 mt-0.5 uppercase tracking-wider">
+          block
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col overflow-hidden rounded border border-border/40 bg-background p-0.5 gap-0.5",
+        SIZE_CLASSES[size],
+        className
+      )}
+      style={style}
+    >
+      <div className="w-full h-1 rounded-sm bg-muted-foreground/20" />
+      <div className="flex w-full flex-1 gap-0.5">
+        <div className="w-1/4 h-full rounded-sm bg-muted-foreground/10" />
+        <div className="flex-1 h-full rounded-sm bg-muted-foreground/5" />
+      </div>
+      <span className="text-[7px] text-muted-foreground/50 uppercase">template</span>
+    </div>
+  );
+}
+
+export const ComponentPreview = React.memo(ComponentPreviewInner);

package/src/components/prototype/imported-registry.ts

@@ -0,0 +1,25 @@
+// 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 } from './types'
+
+const modules = import.meta.glob('./imported/*.tsx', {
+  eager: true,
+  import: 'config',
+}) as unknown as Record<string, PrototypeComponentConfig>
+
+export const IMPORTED_COMPONENTS: PrototypeComponentConfig[] = Object.values(modules)

package/src/components/prototype/index.ts

@@ -0,0 +1,42 @@
+// 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 "./types";
+export * from "./registry";
+export { ComponentPreview } from "./component-preview";
+
+import type { PrototypeComponentConfig } from "./types";
+import { BUILTIN_ATOMIC_COMPONENTS } from "./component";
+import { BUILTIN_BLOCK_COMPONENTS } from "./block";
+import { BUILTIN_TEMPLATE_COMPONENTS } from "./template";
+import { IMPORTED_COMPONENTS } from "./imported-registry";
+
+export {
+  ATOMIC_CATEGORY,
+  BUILTIN_ATOMIC_COMPONENTS,
+} from "./component";
+export { BLOCK_CATEGORY, BUILTIN_BLOCK_COMPONENTS } from "./block";
+export { TEMPLATE_CATEGORY, BUILTIN_TEMPLATE_COMPONENTS } from "./template";
+export { GenericPrototype } from "./component/GenericPrototype";
+export { IMPORTED_COMPONENTS } from "./imported-registry";
+
+export const BUILTIN_COMPONENTS: PrototypeComponentConfig[] = [
+  ...BUILTIN_ATOMIC_COMPONENTS,
+  ...BUILTIN_BLOCK_COMPONENTS,
+  ...BUILTIN_TEMPLATE_COMPONENTS,
+  ...IMPORTED_COMPONENTS,
+];

package/src/components/prototype/registry.ts

@@ -0,0 +1,40 @@
+// 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 { PrototypeComponentConfig } from "./types";
+
+const registry = new Map<string, PrototypeComponentConfig>();
+
+export function registerComponent(config: PrototypeComponentConfig): void {
+  registry.set(config.type, config);
+}
+
+export function registerComponents(configs: PrototypeComponentConfig[]): void {
+  configs.forEach(registerComponent);
+}
+
+export function unregisterComponent(type: string): void {
+  registry.delete(type);
+}
+
+export function getAllComponents(): PrototypeComponentConfig[] {
+  return Array.from(registry.values());
+}
+
+export function getComponent(type: string): PrototypeComponentConfig | undefined {
+  return registry.get(type);
+}