@arronqzy/react-blueprint 1.0.1 → 1.0.4

package/README.md

@@ -0,0 +1,103 @@
+# @arronqzy/react-blueprint
+
+Abuilder 的**蓝图编辑器** React 包，基于 [React Flow](https://reactflow.dev/) 提供节点连线编辑、调试执行与蓝图库管理。
+
+## 功能概览
+
+- **可视化蓝图**：拖拽节点、连线、对齐、视口平移缩放
+- **节点类型**：逻辑、请求、时钟、JSON、子蓝图引用等（由 `blueprint-dsl` 定义行为）
+- **调试执行**：单步/连续调试、执行轨迹、连线信号高亮、时钟节点进度
+- **蓝图库**：IndexedDB 存储、导入导出、元数据编辑
+- **执行日志**：运行记录持久化、导出与清理策略
+- **视图联动**：生命周期钩子向视图节点写入 Scope
+
+## 安装
+
+```bash
+pnpm add @arronqzy/react-blueprint @xyflow/react
+```
+
+```ts
+import "@arronqzy/react-blueprint/blueprint.css";
+```
+
+## 使用
+
+### 蓝图画布
+
+```tsx
+import { useState } from "react";
+import { BluePrintReactRoot, BlueprintGraph } from "@arronqzy/react-blueprint";
+import "@arronqzy/react-blueprint/blueprint.css";
+
+function BlueprintEditor() {
+  const [graph, setGraph] = useState(() => BlueprintGraph.empty());
+
+  return (
+    <BluePrintReactRoot
+      graph={graph}
+      onGraphChange={setGraph}
+      selectedNodeId={null}
+      onSelectNode={() => {}}
+    />
+  );
+}
+```
+
+### 文档转可执行图
+
+```ts
+import { documentToRunnableGraph } from "@arronqzy/react-blueprint";
+
+const runnable = documentToRunnableGraph(document, { libraryNameById });
+```
+
+### 调试会话
+
+```tsx
+import { useBlueprintDebugSession } from "@arronqzy/react-blueprint";
+
+const debug = useBlueprintDebugSession({
+  graph,
+  blueprintId,
+  blueprintName: "我的蓝图",
+  resolveLibraryBlueprint,
+  onViewScopeUpdate: (ids, scope) => { /* 回写视图 Scope */ },
+});
+```
+
+### 页面生命周期（与视图集成）
+
+```tsx
+import { useBlueprintPageLifecycle } from "@arronqzy/react-blueprint";
+
+useBlueprintPageLifecycle({
+  graph,
+  active: blueprintOpen,
+  onViewScopeUpdate,
+  resolveLibraryBlueprint,
+});
+```
+
+## 主要导出
+
+| 模块 | 说明 |
+|------|------|
+| `BluePrintReactRoot` | 蓝图主画布 |
+| `BlueprintGraph` | 图数据结构（`src/graph`） |
+| `documentToRunnableGraph` | 文档 → 运行时图 |
+| `useBlueprintDebugSession` | 调试工具栏与会话 |
+| `useBlueprintPageLifecycle` | 挂载/卸载时启停蓝图 |
+| `BlueprintNodeConfigSidebar` | 节点配置侧栏 |
+| `BlueprintPanelToolbar` | 蓝图工具栏 |
+| `blueprint-library-db` | 蓝图库 IndexedDB API |
+
+## 依赖关系
+
+- `@arronqzy/blueprint-dsl` — 节点定义与执行引擎
+- `@arronqzy/react-rx-store` — 与画布状态订阅
+- `@arronqzy/ui` — UI 组件
+
+## 许可证
+
+ISC

package/index.ts

@@ -7,7 +7,8 @@ export type {
   BlueprintLibraryOption,
 } from "./src/BlueprintNodeConfigSidebar";
 export * from "./src/graph";
-export { resolveBlueprintConfigSource, resolveBlueprintNodeTypeLabel } from "./src/graph/document";
+export { patchNodeConfigSource } from "./src/graph/document";
+export { resolveBlueprintConfigSource, resolveBlueprintNodeTypeLabel, getBlueprintNodeTypeLabel, getLifecyclePhaseLabel, BLUEPRINT_CONFIG_TYPE_LABEL_KEYS, BLUEPRINT_LIFECYCLE_PHASE_KEYS } from "./src/graph/document";
 export type { BlueprintConfigSource } from "./src/graph/document";
 export { documentToRunnableGraph } from "./src/runtime/document-to-runnable-graph";
 export { BlueprintExecutionLogPanel } from "./src/components/BlueprintExecutionLogPanel";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/react-blueprint",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "",
   "main": "index.ts",
   "exports": {
@@ -12,9 +12,10 @@
     "dayjs": "^1.11.13",
     "react-dom": "^19",
     "@xyflow/react": "^12.9.3",
-    "@arronqzy/blueprint-dsl": "1.0.1",
-    "@arronqzy/react-rx-store": "1.1.1",
-    "@arronqzy/ui": "1.0.0"
+    "@arronqzy/i18n": "0.1.1",
+    "@arronqzy/ui": "1.0.3",
+    "@arronqzy/react-rx-store": "1.1.2",
+    "@arronqzy/blueprint-dsl": "1.0.3"
   },
   "devDependencies": {
     "@types/react": "^19.0.1",
@@ -27,9 +28,9 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vite": "^5.1.4",
+    "@arronqzy/tailwind": "1.0.2",
     "@arronqzy/eslint-config": "0.0.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.1"
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "keywords": [],
   "author": "",

package/src/BlueprintContextMenu.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
 
 export type BlueprintContextMenuState =
   | {
@@ -35,6 +36,7 @@ export function BlueprintContextMenu({
   onDeleteNode,
   onDeleteEdge,
 }: BlueprintContextMenuProps) {
+  const { t } = useI18n();
   const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -74,7 +76,7 @@ export function BlueprintContextMenu({
             onClose();
           }}
         >
-          新增节点
+          {t("blueprint.toolbar.addNode")}
         </button>
       ) : null}
 
@@ -87,7 +89,7 @@ export function BlueprintContextMenu({
             onClose();
           }}
         >
-          删除节点
+          {t("blueprint.toolbar.deleteNode")}
         </button>
       ) : null}
 
@@ -100,7 +102,7 @@ export function BlueprintContextMenu({
             onClose();
           }}
         >
-          删除连线
+          {t("blueprint.toolbar.deleteEdge")}
         </button>
       ) : null}
     </div>

package/src/BlueprintNodeConfigSidebar.tsx

@@ -9,10 +9,10 @@ import {
 } from "@arronqzy/ui";
 import {
   LIFECYCLE_NODE_TYPE,
-  PAGE_LIFECYCLE_LABELS,
   PAGE_LIFECYCLE_PHASES,
   type PageLifecyclePhase,
 } from "@arronqzy/blueprint-dsl";
+import { useI18n } from "@arronqzy/i18n/react";
 
 import { FetchNodeConfigPanel } from "./components/FetchNodeConfigPanel";
 import { ClockNodeConfigPanel } from "./components/ClockNodeConfigPanel";
@@ -20,12 +20,14 @@ import { JsonNodeConfigPanel } from "./components/JsonNodeConfigPanel";
 import { LogicNodeConfigPanel } from "./components/LogicNodeConfigPanel";
 import { ViewElementMultiSelect } from "./components/ViewElementMultiSelect";
 import {
+  getLifecyclePhaseLabel,
   patchNodeConfigSource,
   pruneViewElementIds,
   resolveBlueprintConfigSource,
   resolveViewElementIds,
   type BlueprintConfigSource,
   type BlueprintGraphNode,
+  type BlueprintNodeRole,
 } from "./graph/document";
 
 export type BlueprintViewElementOption = {
@@ -67,6 +69,16 @@ export type BlueprintNodeConfigSidebarProps = {
   ) => void;
 };
 
+const ROLE_LABEL_KEYS: Record<BlueprintNodeRole, string> = {
+  blueprint: "blueprint.config.roleBlueprint",
+  lifecycle: "blueprint.config.roleLifecycle",
+  and: "blueprint.config.roleAnd",
+  fetch: "blueprint.config.roleFetch",
+  json: "blueprint.config.roleJson",
+  logic: "blueprint.config.roleLogic",
+  clock: "blueprint.config.roleClock",
+};
+
 export function BlueprintNodeConfigSidebar({
   node,
   viewElementOptions = [],
@@ -75,6 +87,7 @@ export function BlueprintNodeConfigSidebar({
   onUpdateAllowFalseSignalPropagation,
   onUpdateNode,
 }: BlueprintNodeConfigSidebarProps) {
+  const { t } = useI18n();
   const configSource = resolveBlueprintConfigSource(node);
   const linkedViewElementIds = resolveViewElementIds(node);
   const existingViewElementIdSet = useMemo(
@@ -87,6 +100,8 @@ export function BlueprintNodeConfigSidebar({
 
   useEffect(() => {
     if (configSource !== "view") return;
+    // 视图画布尚未就绪时不清理，避免误删有效绑定导致绑定节点「执行了但不写 scope」
+    if (viewElementOptions.length === 0) return;
     const linked = resolveViewElementIds(node);
     if (linked.length === 0) return;
     const pruned = pruneViewElementIds(linked, existingViewElementIdSet);
@@ -103,30 +118,22 @@ export function BlueprintNodeConfigSidebar({
     node.viewElementId,
     node.viewElementIds,
     onUpdateNode,
+    viewElementOptions.length,
   ]);
 
+  const roleLabel = t(ROLE_LABEL_KEYS[node.role] ?? "blueprint.config.roleLogic");
+
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground">
       <div className="shrink-0 border-b border-border px-3 py-2">
-        <div className="text-xs font-semibold">蓝图节点配置</div>
+        <div className="text-xs font-semibold">{t("blueprint.config.title")}</div>
         <div className="mt-0.5 text-[11px] text-muted-foreground">
-          {node.role === "blueprint"
-            ? "蓝图节点"
-            : node.role === "lifecycle"
-              ? "生命周期节点"
-              : node.role === "and"
-                ? "并运算节点"
-              : node.role === "fetch"
-                ? "数据源节点"
-                : node.role === "json"
-                  ? "JSON 节点"
-                  : "逻辑节点"}{" "}
-          · {node.id}
+          {roleLabel} · {node.id}
         </div>
       </div>
       <div className="min-h-0 flex-1 space-y-3 overflow-auto p-3 text-xs">
         <label className="block space-y-1">
-          <span className="text-muted-foreground">节点名称</span>
+          <span className="text-muted-foreground">{t("blueprint.config.nodeName")}</span>
           <Input
             value={node.label}
             onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -137,7 +144,7 @@ export function BlueprintNodeConfigSidebar({
         </label>
 
         <label className="block space-y-1">
-          <span className="text-muted-foreground">配置类型</span>
+          <span className="text-muted-foreground">{t("blueprint.config.configType")}</span>
           <Select
             value={configSource}
             onValueChange={(value: string) => {
@@ -160,25 +167,25 @@ export function BlueprintNodeConfigSidebar({
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="blueprint">蓝图配置</SelectItem>
-              <SelectItem value="logic">逻辑配置</SelectItem>
-              <SelectItem value="and">并运算</SelectItem>
-              <SelectItem value="lifecycle">生命周期配置</SelectItem>
-              <SelectItem value="fetch">数据源获取</SelectItem>
-              <SelectItem value="json">JSON 节点</SelectItem>
-              <SelectItem value="clock">时钟</SelectItem>
-              <SelectItem value="view">视图节点配置</SelectItem>
+              <SelectItem value="blueprint">{t("blueprint.config.configBlueprint")}</SelectItem>
+              <SelectItem value="logic">{t("blueprint.config.configLogic")}</SelectItem>
+              <SelectItem value="and">{t("blueprint.config.configAnd")}</SelectItem>
+              <SelectItem value="lifecycle">{t("blueprint.config.configLifecycle")}</SelectItem>
+              <SelectItem value="fetch">{t("blueprint.config.configFetch")}</SelectItem>
+              <SelectItem value="json">{t("blueprint.config.configJson")}</SelectItem>
+              <SelectItem value="clock">{t("blueprint.config.configClock")}</SelectItem>
+              <SelectItem value="view">{t("blueprint.config.configView")}</SelectItem>
             </SelectContent>
           </Select>
         </label>
 
         {configSource === "view" ? (
           <div className="block space-y-1">
-            <span className="text-muted-foreground">关联视图节点</span>
+            <span className="text-muted-foreground">{t("blueprint.config.linkedViewNodes")}</span>
             <ViewElementMultiSelect
               options={viewElementOptions}
               value={linkedViewElementIds}
-              placeholder="选择视图节点"
+              placeholder={t("blueprint.config.selectViewNode")}
               onChange={(next) =>
                 onUpdateNode(node.id, {
                   viewElementIds: next,
@@ -189,15 +196,16 @@ export function BlueprintNodeConfigSidebar({
             />
             {linkedViewElementIds.length === 0 ? (
               <p className="text-[11px] text-muted-foreground">
-                可多选视图画布节点；关联后仍在此配置蓝图节点，视图属性请在视图面板中编辑。
+                {t("blueprint.config.viewMultiHint")}
               </p>
             ) : (
               <p className="text-[11px] text-muted-foreground">
-                已关联 {linkedViewElementIds.length} 个视图节点：
-                {linkedViewElementIds
-                  .map((id) => viewElementLabelById.get(id) ?? id)
-                  .join("、")}
-                。
+                {t("blueprint.config.linkedViewCount", {
+                  count: linkedViewElementIds.length,
+                  names: linkedViewElementIds
+                    .map((id) => viewElementLabelById.get(id) ?? id)
+                    .join("、"),
+                })}
               </p>
             )}
           </div>
@@ -205,15 +213,12 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "blueprint" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">蓝图属性</div>
+            <div className="font-medium text-foreground">{t("blueprint.config.blueprintAttrs")}</div>
             <p className="text-[11px] text-muted-foreground">
-              选中蓝图库中的蓝图后，当输入端收到<strong>真信号</strong>
-              时才会执行该蓝图；执行完成后从输出端发出
-              <strong>真信号</strong>（含嵌套蓝图输出值与当前节点信息），执行失败则发出
-              <strong>假信号</strong>。
+              {t("blueprint.config.blueprintAttrsHint")}
             </p>
             <label className="block space-y-1">
-              <span className="text-muted-foreground">引用蓝图库</span>
+              <span className="text-muted-foreground">{t("blueprint.config.refLibrary")}</span>
               <Select
                 value={node.libraryBlueprintId ?? "__none__"}
                 onValueChange={(value: string) => {
@@ -224,10 +229,10 @@ export function BlueprintNodeConfigSidebar({
                 }}
               >
                 <SelectTrigger className="h-8">
-                  <SelectValue placeholder="选择蓝图库中的蓝图" />
+                  <SelectValue placeholder={t("blueprint.config.selectLibraryBlueprint")} />
                 </SelectTrigger>
                 <SelectContent className="z-[10100]">
-                  <SelectItem value="__none__">未关联</SelectItem>
+                  <SelectItem value="__none__">{t("blueprint.config.unlinked")}</SelectItem>
                   {blueprintLibraryOptions.map((opt) => (
                     <SelectItem key={opt.id} value={opt.id}>
                       {opt.label}
@@ -238,7 +243,7 @@ export function BlueprintNodeConfigSidebar({
             </label>
             {!node.libraryBlueprintId ? (
               <p className="text-[11px] text-muted-foreground">
-                请先从蓝图库选择要引用的蓝图。
+                {t("blueprint.config.selectLibraryFirst")}
               </p>
             ) : null}
             <label className="flex items-start gap-2 pt-1">
@@ -251,7 +256,7 @@ export function BlueprintNodeConfigSidebar({
                 className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
               />
               <span className="text-[11px] leading-relaxed text-muted-foreground">
-                允许假信号传递：开启后，节点输出假信号时不会阻塞任务链，错误信息会继续向下游传递。
+                {t("blueprint.config.allowFalsePropagateBlueprint")}
               </span>
             </label>
           </div>
@@ -259,15 +264,15 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "lifecycle" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">生命周期钩子</div>
+            <div className="font-medium text-foreground">{t("blueprint.config.lifecycleHook")}</div>
             <p className="text-[11px] text-muted-foreground">
-              生命周期节点<strong>没有输入口</strong>，仅右侧输出口。
+              {t("blueprint.config.lifecycleNoInput")}
               {node.lifecyclePhase === "blueprintActivated"
-                ? "当本蓝图被其他蓝图的蓝图配置节点引用且收到真信号时，自动向下游发出真信号，输出值为父级传入的输入数据。"
-                : "当页面进入对应生命周期时，自动向下游发出真/假信号。"}
+                ? t("blueprint.config.lifecycleBlueprintActivatedHint")
+                : t("blueprint.config.lifecyclePageHint")}
             </p>
             <label className="block space-y-1">
-              <span className="text-muted-foreground">监听阶段</span>
+              <span className="text-muted-foreground">{t("blueprint.config.listenPhase")}</span>
               <Select
                 value={node.lifecyclePhase ?? "mounted"}
                 onValueChange={(value: string) =>
@@ -285,7 +290,7 @@ export function BlueprintNodeConfigSidebar({
                 <SelectContent>
                   {PAGE_LIFECYCLE_PHASES.map((phase) => (
                     <SelectItem key={phase} value={phase}>
-                      {PAGE_LIFECYCLE_LABELS[phase]}
+                      {getLifecyclePhaseLabel(t, phase)}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -293,7 +298,7 @@ export function BlueprintNodeConfigSidebar({
             </label>
             {node.parentId ? (
               <p className="text-[11px] text-muted-foreground">
-                所属蓝图节点：{node.parentId}
+                {t("blueprint.config.parentBlueprintNode", { id: node.parentId })}
               </p>
             ) : null}
           </div>
@@ -313,12 +318,9 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource === "and" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">并运算</div>
+            <div className="font-medium text-foreground">{t("blueprint.config.andTitle")}</div>
             <p className="text-[11px] text-muted-foreground">
-              左侧两个输入口 <strong>inA</strong>、<strong>inB</strong>。
-              每个输入口可连 n 条线，同端口任一为真则该端口视为真（或）。
-              仅当 <strong>inA 与 inB 均为真信号</strong> 时，从输出口发出真信号；
-              否则发出假信号。
+              {t("blueprint.config.andHint")}
             </p>
           </div>
         ) : null}
@@ -328,7 +330,7 @@ export function BlueprintNodeConfigSidebar({
             <LogicNodeConfigPanel node={node} onUpdateNode={onUpdateNode} />
             {node.parentId ? (
               <p className="text-[11px] text-muted-foreground">
-                所属蓝图节点：{node.parentId}
+                {t("blueprint.config.parentBlueprintNode", { id: node.parentId })}
               </p>
             ) : null}
           </>
@@ -336,7 +338,7 @@ export function BlueprintNodeConfigSidebar({
 
         {configSource !== "blueprint" && configSource !== "and" ? (
           <div className="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-            <div className="font-medium text-foreground">任务链执行</div>
+            <div className="font-medium text-foreground">{t("blueprint.config.taskChain")}</div>
             <label className="flex items-start gap-2">
               <input
                 type="checkbox"
@@ -347,7 +349,7 @@ export function BlueprintNodeConfigSidebar({
                 className="mt-0.5 h-3.5 w-3.5 shrink-0 rounded border border-input"
               />
               <span className="text-[11px] leading-relaxed text-muted-foreground">
-                允许假信号传递：默认假信号会阻塞任务链；开启后继续向下游传递假信号与错误信息。
+                {t("blueprint.config.allowFalsePropagateDefault")}
               </span>
             </label>
           </div>

package/src/blueprint.css

@@ -19,6 +19,8 @@
   --xy-edge-stroke-selected: #1d4ed8;
   --xy-connectionline-stroke: #2563eb;
   --xy-connectionline-stroke-width: 2.5;
+  --xy-handle-background-color: hsl(var(--primary));
+  --xy-handle-border-color: hsl(var(--background));
   background-color: transparent;
 }
 
@@ -174,11 +176,11 @@
   height: 10px;
   min-width: 10px;
   min-height: 10px;
-  border: 2px solid hsl(var(--background));
+  border: 2px solid hsl(var(--background)) !important;
   border-radius: 9999px;
-  background: hsl(var(--muted-foreground) / 0.45);
+  background-color: hsl(var(--foreground) / 0.42) !important;
   transition:
-    background 0.15s ease,
+    background-color 0.15s ease,
     border-color 0.15s ease,
     box-shadow 0.15s ease;
 }
@@ -186,30 +188,34 @@
 .bp-canvas .react-flow__handle.bp-flow-handle:hover,
 .bp-flow .react-flow__handle.bp-flow-handle:hover,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle:hover {
-  background: hsl(var(--primary));
-  border-color: hsl(var(--background));
+  background-color: hsl(var(--primary)) !important;
+  border-color: hsl(var(--background)) !important;
   box-shadow: 0 0 0 3px hsl(var(--primary) / 0.28);
 }
 
 .bp-canvas .react-flow__handle.bp-flow-handle--target,
 .bp-flow .react-flow__handle.bp-flow-handle--target,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--target {
-  background: hsl(var(--muted-foreground) / 0.35);
+  background-color: hsl(var(--foreground) / 0.48) !important;
 }
 
 .bp-canvas .react-flow__handle.bp-flow-handle--source,
 .bp-flow .react-flow__handle.bp-flow-handle--source,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--source {
-  background: hsl(var(--primary) / 0.55);
+  background-color: hsl(var(--primary) / 0.72) !important;
 }
 
 .bp-node--selected .bp-flow-handle {
-  border-color: hsl(var(--card));
+  border-color: hsl(var(--card)) !important;
   box-shadow: 0 0 0 2px hsl(var(--primary) / 0.35);
 }
 
+.bp-node--selected .bp-flow-handle--target {
+  background-color: hsl(var(--foreground) / 0.55) !important;
+}
+
 .bp-node--selected .bp-flow-handle--source {
-  background: hsl(var(--primary));
+  background-color: hsl(var(--primary)) !important;
 }
 
 .bp-node--execution-true .bp-node-card {
@@ -225,11 +231,11 @@
 }
 
 .bp-node--execution-true .bp-flow-handle--source {
-  background: #16a34a;
+  background-color: #16a34a !important;
 }
 
 .bp-node--execution-true .bp-flow-handle--target {
-  background: rgb(22 163 74 / 0.55);
+  background-color: rgb(22 163 74 / 0.55) !important;
 }
 
 .bp-node--execution-false .bp-node-card {
@@ -245,11 +251,11 @@
 }
 
 .bp-node--execution-false .bp-flow-handle--source {
-  background: hsl(var(--destructive));
+  background-color: hsl(var(--destructive)) !important;
 }
 
 .bp-node--execution-false .bp-flow-handle--target {
-  background: hsl(var(--destructive) / 0.55);
+  background-color: hsl(var(--destructive) / 0.55) !important;
 }
 
 /* 生命周期节点无输入口：隐藏任何左侧/目标连接点（含旧数据产生的幽灵 handle） */
@@ -267,13 +273,13 @@
 .bp-canvas .react-flow__handle.bp-flow-handle--signal,
 .bp-flow .react-flow__handle.bp-flow-handle--signal,
 [data-workspace-region="blueprint"] .react-flow__handle.bp-flow-handle--signal {
-  background: hsl(38 92% 50% / 0.75);
+  background-color: hsl(38 92% 50% / 0.75) !important;
   width: 8px;
   height: 8px;
 }
 
 .bp-node--selected .bp-flow-handle--signal {
-  background: hsl(38 92% 50%);
+  background-color: hsl(38 92% 50%) !important;
 }
 
 /* 右键菜单 */