@arronqzy/react-blueprint 1.0.0

package/src/nodes/BlueprintNodeCard.tsx

@@ -0,0 +1,169 @@
+import { cn } from "@arronqzy/ui";
+
+export type BlueprintNodeCardProps = {
+  nodeId: string;
+  label: string;
+  meta?: string;
+  /** 节点关键配置摘要，显示在名称下方 */
+  subtitle?: string;
+  /** 调试执行进度（如时钟 2/3） */
+  progressLabel?: string;
+  variant?: "blueprint" | "logic" | "and" | "lifecycle" | "fetch" | "json" | "clock";
+  selected?: boolean;
+  hideLeadingDot?: boolean;
+  onSelect?: (nodeId: string) => void;
+};
+
+const variantStyle = {
+  blueprint: {
+    accent: "border-l-primary",
+    badge: "bg-primary/10 text-primary",
+    dot: "bg-primary",
+  },
+  logic: {
+    accent: "border-l-sky-500 dark:border-l-sky-400",
+    badge: "bg-sky-500/10 text-sky-700 dark:text-sky-300",
+    dot: "bg-sky-500",
+  },
+  and: {
+    accent: "border-l-indigo-500 dark:border-l-indigo-400",
+    badge: "bg-indigo-500/10 text-indigo-700 dark:text-indigo-300",
+    dot: "bg-indigo-500",
+  },
+  lifecycle: {
+    accent: "border-l-amber-500 dark:border-l-amber-400",
+    badge: "bg-amber-500/10 text-amber-700 dark:text-amber-300",
+    dot: "bg-amber-500",
+  },
+  fetch: {
+    accent: "border-l-violet-500 dark:border-l-violet-400",
+    badge: "bg-violet-500/10 text-violet-700 dark:text-violet-300",
+    dot: "bg-violet-500",
+  },
+  json: {
+    accent: "border-l-teal-500 dark:border-l-teal-400",
+    badge: "bg-teal-500/10 text-teal-700 dark:text-teal-300",
+    dot: "bg-teal-500",
+  },
+  clock: {
+    accent: "border-l-rose-500 dark:border-l-rose-400",
+    badge: "bg-rose-500/10 text-rose-700 dark:text-rose-300",
+    dot: "bg-rose-500",
+  },
+} as const;
+
+function NodeGrip() {
+  return (
+    <div
+      className="flex shrink-0 flex-col gap-[3px] opacity-35"
+      aria-hidden="true"
+    >
+      <span className="flex gap-[3px]">
+        <span className="h-[3px] w-[3px] rounded-full bg-current" />
+        <span className="h-[3px] w-[3px] rounded-full bg-current" />
+      </span>
+      <span className="flex gap-[3px]">
+        <span className="h-[3px] w-[3px] rounded-full bg-current" />
+        <span className="h-[3px] w-[3px] rounded-full bg-current" />
+      </span>
+    </div>
+  );
+}
+
+export function BlueprintNodeCard({
+  nodeId,
+  label,
+  meta,
+  subtitle,
+  progressLabel,
+  variant = "blueprint",
+  selected = false,
+  hideLeadingDot = false,
+  onSelect,
+}: BlueprintNodeCardProps) {
+  const v = variantStyle[variant];
+
+  return (
+    <div
+      data-blueprint-node-card
+      className={cn(
+        "bp-node-card w-[168px] overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+        "transition-[box-shadow,border-color] duration-150",
+        hideLeadingDot
+          ? "border-t-[3px] border-t-amber-500 dark:border-t-amber-400"
+          : cn("border-l-[3px]", v.accent),
+        selected &&
+          "border-primary/50 shadow-[0_0_0_1px_hsl(var(--primary)/0.35),0_4px_12px_hsl(var(--primary)/0.12)]"
+      )}
+    >
+      <div
+        className={cn(
+          "bp-flow-drag-handle flex cursor-grab items-center gap-2 border-b border-border/50 px-2 py-1.5",
+          "bg-muted/25 text-muted-foreground active:cursor-grabbing"
+        )}
+        title="拖拽移动"
+      >
+        <NodeGrip />
+        {meta ? (
+          <span
+            className={cn(
+              "min-w-0 flex-1 truncate rounded px-1.5 py-0.5 text-[10px] font-medium leading-none tracking-wide",
+              v.badge
+            )}
+            title={meta}
+          >
+            {meta}
+          </span>
+        ) : null}
+      </div>
+
+      <button
+        type="button"
+        className={cn(
+          "nodrag flex w-full text-left outline-none transition-colors hover:bg-accent/30",
+          "focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-inset",
+          hideLeadingDot
+            ? cn("px-2.5 py-2", subtitle ? "items-start" : "items-center")
+            : "items-start gap-2 px-2.5 py-2"
+        )}
+        onClick={(e) => {
+          e.stopPropagation();
+          onSelect?.(nodeId);
+        }}
+      >
+        {!hideLeadingDot ? (
+          <span
+            className={cn("mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full", v.dot)}
+            aria-hidden="true"
+          />
+        ) : null}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start gap-1.5">
+            <div className="min-w-0 flex-1 truncate text-[13px] font-medium leading-snug text-foreground">
+              {label}
+            </div>
+            {progressLabel ? (
+              <span
+                className={cn(
+                  "shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold leading-none",
+                  v.badge
+                )}
+                title="已发送信号次数"
+              >
+                {progressLabel}
+              </span>
+            ) : null}
+          </div>
+          {subtitle ? (
+            <div
+              className="mt-0.5 truncate font-mono text-[10px] leading-tight text-muted-foreground"
+              title={subtitle}
+            >
+              {subtitle}
+            </div>
+          ) : null}
+        </div>
+      </button>
+    </div>
+  );
+}

package/src/nodes/BlueprintNodeShell.tsx

@@ -0,0 +1,45 @@
+import { Handle, Position } from "@xyflow/react";
+import { cn } from "@arronqzy/ui";
+
+import type { BlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import { BlueprintNodeCard, type BlueprintNodeCardProps } from "./BlueprintNodeCard";
+
+export type BlueprintNodeShellProps = BlueprintNodeCardProps & {
+  /** 用户在画布上点选的配置节点 */
+  selected?: boolean;
+  /** 调试执行中当前节点的信号高亮（与用户选中独立） */
+  executionTone?: BlueprintNodeExecutionTone | null;
+};
+
+/** 左进右出的标准节点连线布局 */
+export function BlueprintNodeShell({
+  selected = false,
+  executionTone = null,
+  ...cardProps
+}: BlueprintNodeShellProps) {
+  return (
+    <div
+      className={cn(
+        "bp-node",
+        executionTone === "success" && "bp-node--execution-true",
+        executionTone === "error" && "bp-node--execution-false"
+      )}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        id="in"
+        className="bp-flow-handle bp-flow-handle--target"
+        title="真/假信号输入"
+      />
+      <BlueprintNodeCard {...cardProps} selected={selected} />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="out"
+        className="bp-flow-handle bp-flow-handle--source"
+        title="真/假信号输出"
+      />
+    </div>
+  );
+}

package/src/nodes/ClockFlowNode.tsx

@@ -0,0 +1,67 @@
+import type { NodeProps } from "@xyflow/react";
+import { cn } from "@arronqzy/ui";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import {
+  useBlueprintClockAbort,
+  useBlueprintNodeSelect,
+  useClockNodeCanAbort,
+} from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeShell } from "./BlueprintNodeShell";
+
+function ClockAbortIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" className={className} aria-hidden>
+      <rect x="6" y="6" width="12" height="12" rx="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+/** 时钟节点：收到真信号后按配置间隔输出含当前时间的真信号 */
+export function ClockFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+  const onAbortClock = useBlueprintClockAbort();
+  const canAbort = useClockNodeCanAbort(id);
+  const progress = nodeData.clockEmitProgress;
+  const progressLabel = progress
+    ? `${progress.current}/${progress.total}`
+    : undefined;
+
+  return (
+    <div className="relative">
+      <BlueprintNodeShell
+        nodeId={id}
+        label={nodeData.label}
+        meta={resolveBlueprintNodeTypeLabel(nodeData)}
+        subtitle={resolveBlueprintNodeSummary(nodeData)}
+        progressLabel={progressLabel}
+        variant="clock"
+        selected={Boolean(nodeData.isSelected)}
+        executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+        onSelect={onSelect}
+      />
+      {canAbort ? (
+        <button
+          type="button"
+          className={cn(
+            "nodrag nopan absolute right-1.5 top-1.5 z-10 flex h-5 w-5 items-center justify-center",
+            "rounded border border-rose-500/50 bg-rose-500/15 text-rose-600 shadow-sm",
+            "hover:bg-rose-500/25 dark:text-rose-300"
+          )}
+          title="中止时钟：停止剩余次数与正在执行的下游任务"
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            e.stopPropagation();
+            onAbortClock(id);
+          }}
+        >
+          <ClockAbortIcon className="h-3 w-3" />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/nodes/FetchFlowNode.tsx

@@ -0,0 +1,26 @@
+import type { NodeProps } from "@xyflow/react";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeShell } from "./BlueprintNodeShell";
+
+export function FetchFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+
+  return (
+    <BlueprintNodeShell
+      nodeId={id}
+      label={nodeData.label}
+      meta={resolveBlueprintNodeTypeLabel(nodeData)}
+      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      variant="fetch"
+      selected={Boolean(nodeData.isSelected)}
+      executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+      onSelect={onSelect}
+    />
+  );
+}

package/src/nodes/JsonFlowNode.tsx

@@ -0,0 +1,26 @@
+import type { NodeProps } from "@xyflow/react";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeShell } from "./BlueprintNodeShell";
+
+export function JsonFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+
+  return (
+    <BlueprintNodeShell
+      nodeId={id}
+      label={nodeData.label}
+      meta={resolveBlueprintNodeTypeLabel(nodeData)}
+      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      variant="json"
+      selected={Boolean(nodeData.isSelected)}
+      executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+      onSelect={onSelect}
+    />
+  );
+}

package/src/nodes/LifecycleFlowNode.tsx

@@ -0,0 +1,44 @@
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { cn } from "@arronqzy/ui";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeCard } from "./BlueprintNodeCard";
+
+/** 生命周期节点：无输入口，仅在对应生命周期触发时从右侧输出口发出信号 */
+export function LifecycleFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+  const executionTone = resolveBlueprintNodeExecutionTone(nodeData);
+
+  return (
+    <div
+      className={cn(
+        "bp-node bp-node--lifecycle",
+        executionTone === "success" && "bp-node--execution-true",
+        executionTone === "error" && "bp-node--execution-false"
+      )}
+    >
+      <BlueprintNodeCard
+        nodeId={id}
+        label={nodeData.label}
+        meta={resolveBlueprintNodeTypeLabel(nodeData)}
+        subtitle={resolveBlueprintNodeSummary(nodeData)}
+        variant="lifecycle"
+        selected={Boolean(nodeData.isSelected)}
+        hideLeadingDot
+        onSelect={onSelect}
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="out"
+        className="bp-flow-handle bp-flow-handle--source"
+        title="生命周期满足时输出真/假信号"
+      />
+    </div>
+  );
+}

package/src/nodes/LogicFlowNode.tsx

@@ -0,0 +1,26 @@
+import type { NodeProps } from "@xyflow/react";
+
+import { resolveBlueprintNodeTypeLabel } from "../graph/document";
+import { resolveBlueprintNodeSummary } from "../graph/node-summary";
+import { useBlueprintNodeSelect } from "../BlueprintCanvasContext";
+import { resolveBlueprintNodeExecutionTone } from "../runtime/execution-overlay";
+import type { BlueprintFlowNodeData } from "../types";
+import { BlueprintNodeShell } from "./BlueprintNodeShell";
+
+export function LogicFlowNode({ id, data }: NodeProps) {
+  const nodeData = data as BlueprintFlowNodeData;
+  const onSelect = useBlueprintNodeSelect();
+
+  return (
+    <BlueprintNodeShell
+      nodeId={id}
+      label={nodeData.label}
+      meta={resolveBlueprintNodeTypeLabel(nodeData)}
+      subtitle={resolveBlueprintNodeSummary(nodeData)}
+      variant="logic"
+      selected={Boolean(nodeData.isSelected)}
+      executionTone={resolveBlueprintNodeExecutionTone(nodeData)}
+      onSelect={onSelect}
+    />
+  );
+}

package/src/runtime/document-to-runnable-graph.ts

@@ -0,0 +1,48 @@
+import {
+  VIEW_NODE_TYPE,
+  type RunnableGraph,
+} from "@arronqzy/blueprint-dsl";
+
+import {
+  resolveBlueprintConfigSource,
+  resolveViewElementIds,
+  type BlueprintDocument,
+} from "../graph/document";
+
+export function documentToRunnableGraph(
+  document: BlueprintDocument,
+  options?: {
+    libraryNameById?: ReadonlyMap<string, string>;
+  }
+): RunnableGraph {
+  return {
+    nodes: document.nodes.map((node) => {
+      const configSource = resolveBlueprintConfigSource(node);
+      const viewElementIds = resolveViewElementIds(node);
+      return {
+        id: node.id,
+        nodeType:
+          configSource === "view" ? VIEW_NODE_TYPE : node.nodeType,
+        lifecyclePhase: node.lifecyclePhase,
+        libraryBlueprintId: node.libraryBlueprintId,
+        viewElementIds:
+          viewElementIds.length > 0 ? viewElementIds : undefined,
+        fetchConfig: node.fetchConfig,
+        jsonConfig: node.jsonConfig,
+        logicConfig: node.logicConfig,
+        clockConfig: node.clockConfig,
+        blueprintName: node.libraryBlueprintId
+          ? (options?.libraryNameById?.get(node.libraryBlueprintId) ??
+            node.label)
+          : undefined,
+      };
+    }),
+    edges: document.edges.map((edge) => ({
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: edge.sourceHandle,
+      targetHandle: edge.targetHandle,
+    })),
+    allowFalseSignalPropagation: document.allowFalseSignalPropagation,
+  };
+}

package/src/runtime/execution-overlay.ts

@@ -0,0 +1,169 @@
+import {
+  CLOCK_NODE_TYPE,
+  type ExecutionTraceEntry,
+} from "@arronqzy/blueprint-dsl";
+
+import type { BlueprintGraph } from "../graph/blueprint-graph";
+
+export type BlueprintNodeSignalKind = "true" | "false";
+
+export type BlueprintEdgeSignalKind = BlueprintNodeSignalKind | "clock-green" | "clock-blue";
+
+export type BlueprintExecutionOverlay = {
+  /** 当前执行到的节点（最后一条 trace 对应节点） */
+  activeNodeId: string | null;
+  /** 当前执行节点的主输出信号类型 */
+  activeNodeSignalKind: BlueprintNodeSignalKind | null;
+  /** 边 id -> 该边最近一次流出的信号类型 */
+  edgeSignals: Record<string, BlueprintEdgeSignalKind>;
+  /** 时钟节点输出口连线对应当前 tick（用于同色系再次输出时触发重置动画） */
+  clockEdgeTicks?: Record<string, number>;
+  /** 时钟节点已发送信号进度（调试用） */
+  clockNodeProgress?: Record<string, { current: number; total: number }>;
+};
+
+function readOutputSignalKind(value: unknown): BlueprintNodeSignalKind | null {
+  if (!value || typeof value !== "object" || !("kind" in value)) return null;
+  const kind = (value as { kind: unknown }).kind;
+  if (kind === "true" || kind === "false") return kind;
+  return null;
+}
+
+function resolveOutputEdgeSignalKind(
+  entry: ExecutionTraceEntry,
+  value: unknown
+): BlueprintEdgeSignalKind | null {
+  const kind = readOutputSignalKind(value);
+  if (!kind) return null;
+  // 时钟每次输出真信号时连线均显示为绿色（与其它真信号一致）
+  if (entry.nodeType === CLOCK_NODE_TYPE && kind === "true") {
+    return "true";
+  }
+  return kind;
+}
+
+function applyClockEdgeTicks(
+  graph: BlueprintGraph,
+  entry: ExecutionTraceEntry,
+  clockEdgeTicks: Record<string, number>
+) {
+  const tickIndex = entry.clockTickIndex ?? 1;
+  for (const edge of graph.document.edges) {
+    if (
+      edge.source === entry.nodeId &&
+      (edge.sourceHandle ?? "out") === "out"
+    ) {
+      clockEdgeTicks[edge.id] = tickIndex;
+    }
+  }
+}
+
+function findLastClockTraceEntry(
+  entries: ExecutionTraceEntry[]
+): ExecutionTraceEntry | undefined {
+  return [...entries]
+    .reverse()
+    .find(
+      (entry) =>
+        entry.nodeType === CLOCK_NODE_TYPE &&
+        getTraceEntryOutputKind(entry) === "true"
+    );
+}
+
+function applyEntryOutputEdgeSignals(
+  graph: BlueprintGraph,
+  entry: ExecutionTraceEntry,
+  edgeSignals: Record<string, BlueprintEdgeSignalKind>
+) {
+  for (const [port, value] of Object.entries(entry.outputs)) {
+    const kind = resolveOutputEdgeSignalKind(entry, value);
+    if (!kind) continue;
+
+    for (const edge of graph.document.edges) {
+      if (
+        edge.source === entry.nodeId &&
+        (edge.sourceHandle ?? "out") === port
+      ) {
+        edgeSignals[edge.id] = kind;
+      }
+    }
+  }
+}
+
+export function getTraceEntryOutputKind(
+  entry: ExecutionTraceEntry,
+  port = "out"
+): BlueprintNodeSignalKind | null {
+  if (entry.error) return "false";
+  return readOutputSignalKind(entry.outputs[port]);
+}
+
+export function isTraceHaltedByFalseSignal(
+  entries: ExecutionTraceEntry[]
+): boolean {
+  if (entries.length === 0) return false;
+  return getTraceEntryOutputKind(entries[entries.length - 1]!) === "false";
+}
+
+export function shouldHaltDebugOnFalseSignal(
+  entries: ExecutionTraceEntry[],
+  allowFalseSignalPropagation = false
+): boolean {
+  if (allowFalseSignalPropagation) return false;
+  return isTraceHaltedByFalseSignal(entries);
+}
+
+export function buildExecutionOverlay(
+  graph: BlueprintGraph,
+  entries: ExecutionTraceEntry[]
+): BlueprintExecutionOverlay | null {
+  if (entries.length === 0) return null;
+
+  const lastEntry = entries[entries.length - 1]!;
+  const edgeSignals: Record<string, BlueprintEdgeSignalKind> = {};
+  const clockEdgeTicks: Record<string, number> = {};
+
+  // 按执行顺序累积各输出口最近一次信号；未再次输出的连线保持变色
+  for (const entry of entries) {
+    applyEntryOutputEdgeSignals(graph, entry, edgeSignals);
+    if (
+      entry.nodeType === CLOCK_NODE_TYPE &&
+      getTraceEntryOutputKind(entry) === "true"
+    ) {
+      applyClockEdgeTicks(graph, entry, clockEdgeTicks);
+    }
+  }
+
+  const lastClockEntry = findLastClockTraceEntry(entries);
+
+  const clockNodeProgress: Record<string, { current: number; total: number }> =
+    {};
+  if (lastClockEntry) {
+    clockNodeProgress[lastClockEntry.nodeId] = {
+      current: lastClockEntry.clockTickIndex ?? 1,
+      total: lastClockEntry.clockTickTotal ?? 1,
+    };
+  }
+
+  return {
+    activeNodeId: lastEntry.nodeId,
+    activeNodeSignalKind: getTraceEntryOutputKind(lastEntry),
+    edgeSignals,
+    clockEdgeTicks:
+      Object.keys(clockEdgeTicks).length > 0 ? clockEdgeTicks : undefined,
+    clockNodeProgress:
+      Object.keys(clockNodeProgress).length > 0 ? clockNodeProgress : undefined,
+  };
+}
+
+export type BlueprintNodeExecutionTone = "success" | "error";
+
+export function resolveBlueprintNodeExecutionTone(data: {
+  isExecutionActive?: boolean;
+  executionSignalKind?: BlueprintNodeSignalKind | null;
+}): BlueprintNodeExecutionTone | undefined {
+  if (!data.isExecutionActive) return undefined;
+  if (data.executionSignalKind === "false") return "error";
+  if (data.executionSignalKind === "true") return "success";
+  return undefined;
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type { BlueprintFlowNodeData } from "./graph/react-flow-adapter";

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.ts

@@ -0,0 +1,6 @@
+import preset from "../tailwind/src/preset";
+
+export default {
+  presets: [preset],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@arronqzy/typescript-config/react-library.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@arronqzy/blueprint-dsl": ["../blueprint-dsl/src/index.ts"],
+      "@arronqzy/ui": ["../ui/index.ts"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules"]
+}

package/vite.config.ts

@@ -0,0 +1,16 @@
+import path from "node:path";
+
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@arronqzy/ui": path.resolve(process.cwd(), "../ui/index.ts"),
+    },
+  },
+  server: {
+    port: 31012,
+  },
+});