@arronqzy/vue-blueprint 0.1.14 → 0.1.16

package/README.md

@@ -1,15 +1,23 @@
 # @arronqzy/vue-blueprint
 
-Vue 3 版 Abuilder **蓝图编辑器**，使用 **@vue-flow/core** 与 **Ant Design Vue**，功能与 `@arronqzy/react-blueprint` 对齐。
+Vue 3 蓝图编辑器，用 `@vue-flow/core` 和 Ant Design Vue。节点类型、调试和蓝图库与 `@arronqzy/react-blueprint` 对齐，不依赖 React Flow。
 
-## 功能
+一般由 `@arronqzy/vue-view` 嵌在视图下方。
 
-- 可编辑蓝图画布：拖拽节点、连线、右键菜单
-- 7 种内置节点：Blueprint、Logic、And、Lifecycle、Fetch、Json、Clock
-- 自定义边与执行 overlay 高亮
-- 蓝图库（IndexedDB）、导入/导出
+![蓝图画布嵌在编辑器下半部分](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/41-blueprint-nodes.png)
+
+## 能力
+
+- 拖节点、连线、右键菜单
+- 内置节点：蓝图、逻辑、与门、生命周期、请求、JSON、存储、时钟、事件
+- 自定义边和执行时的高亮
+- 蓝图库（IndexedDB）、导入 / 导出
 - 节点配置侧栏、执行日志、调试会话
-- 页面生命周期与 Scope 写入视图
+- 页面生命周期把 Scope 写入视图
+
+节点配置和 React 版同一套字段：名称、配置类型、引用蓝图库、是否允许假信号继续传递。
+
+![节点配置](https://github.com/qianzhuoyao/APanel5/raw/v5/docs/guide-assets/live-zh/42-blueprint-node-config.png)
 
 ## 使用
 
@@ -33,17 +41,17 @@ const selectedNodeId = ref<string | null>(null);
 </template>
 ```
 
-## 样式
+样式：
 
 ```ts
 import "@arronqzy/vue-blueprint/blueprint.css";
 ```
 
-## 与 React 版关系
+## 和 React 版
+
+图数据结构（`BlueprintGraph`、文档同步）是独立 TypeScript 实现，形状与 `react-blueprint` 对齐，所以同一份蓝图 JSON 两边都能打开。画布实现不共享。长期可以抽一层 `blueprint-core`，目前还没有。
 
-- 图数据层（`BlueprintGraph`、document 同步等）为独立 TS 实现，结构与 `react-blueprint` 对齐
-- UI 与画布基于 Vue Flow，不依赖 `@xyflow/react`
-- 长期可抽取共享 `blueprint-core` 消除双份 graph 代码
+执行引擎仍是 `@arronqzy/blueprint-dsl`，不要在本包里再实现一套节点行为。
 
 ## 许可证
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-blueprint",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Vue 3 blueprint editor for Abuilder (Vue Flow + Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -19,9 +19,9 @@
     "ant-design-vue": "^4.2.6",
     "dayjs": "^1.11.13",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.15",
+    "@arronqzy/blueprint-dsl": "1.0.16",
     "@arronqzy/vue-rx-store": "0.1.6",
-    "@arronqzy/i18n": "0.1.13"
+    "@arronqzy/i18n": "0.1.16"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -31,8 +31,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/blueprint.css

@@ -14,13 +14,13 @@
 .bp-flow.vue-flow,
 [data-workspace-region="blueprint"] .vue-flow {
   --xy-background-color: transparent;
-  --xy-edge-stroke: #2563eb;
-  --xy-edge-stroke-width: 2.5;
-  --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));
+  --xy-edge-stroke: #94a3b8;
+  --xy-edge-stroke-width: 1.75;
+  --xy-edge-stroke-selected: #64748b;
+  --xy-connectionline-stroke: #94a3b8;
+  --xy-connectionline-stroke-width: 1.75;
+  --xy-handle-background-color: #ffffff;
+  --xy-handle-border-color: #94a3b8;
   background-color: transparent;
 }
 
@@ -73,16 +73,16 @@
 [data-workspace-region="blueprint"] .vue-flow__edges path.vue-flow__edge-path,
 [data-workspace-region="blueprint"] .vue-flow__edges path.bp-edge-visible {
   fill: none !important;
-  stroke: #2563eb !important;
-  stroke-width: 2.5px !important;
+  stroke: #94a3b8 !important;
+  stroke-width: 1.75px !important;
   opacity: 1 !important;
 }
 
 .bp-canvas .vue-flow__edge.selected path.vue-flow__edge-path,
 .bp-flow .vue-flow__edge.selected path.vue-flow__edge-path,
 [data-workspace-region="blueprint"] .vue-flow__edge.selected path.vue-flow__edge-path {
-  stroke: #1d4ed8 !important;
-  stroke-width: 3px !important;
+  stroke: #64748b !important;
+  stroke-width: 2.25px !important;
 }
 
 .bp-canvas .vue-flow__edge.bp-edge--signal-true path.vue-flow__edge-path,
@@ -130,16 +130,16 @@
 .bp-canvas .vue-flow__arrowhead polyline,
 .bp-flow .vue-flow__arrowhead polyline,
 [data-workspace-region="blueprint"] .vue-flow__arrowhead polyline {
-  stroke: #2563eb;
-  fill: #2563eb;
+  stroke: #94a3b8;
+  fill: #94a3b8;
 }
 
 .bp-canvas .vue-flow__connection-path,
 .bp-flow .vue-flow__connection-path,
 [data-workspace-region="blueprint"] .vue-flow__connection-path {
   fill: none !important;
-  stroke: #2563eb !important;
-  stroke-width: 2.5px !important;
+  stroke: #94a3b8 !important;
+  stroke-width: 1.75px !important;
 }
 
 .bp-canvas .vue-flow__edge-interaction,
@@ -167,95 +167,115 @@
   padding: 0;
 }
 
-/* 连接点：禁止 transform，避免覆盖 Vue Flow 的 translate(-50%, -50%) 定位 */
+/* 以卡片壳为 handle 定位基准，避免挂到外层导致左右/垂直偏移 */
+.bp-node {
+  position: relative;
+  display: block;
+  width: max-content;
+  min-height: 1px;
+}
+
+/* 连接点：显式锚定左右中线 */
 .bp-canvas .vue-flow__handle.bp-flow-handle,
 .bp-flow .vue-flow__handle.bp-flow-handle,
 [data-workspace-region="blueprint"] .vue-flow__handle.bp-flow-handle {
+  position: absolute !important;
   z-index: 3;
-  width: 10px;
-  height: 10px;
-  min-width: 10px;
-  min-height: 10px;
-  border: 2px solid hsl(var(--background)) !important;
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  min-height: 8px;
+  border: 1.5px solid hsl(var(--card)) !important;
   border-radius: 9999px;
-  background-color: hsl(var(--foreground) / 0.42) !important;
+  background-color: #ffffff !important;
+  box-shadow: 0 0 0 1px rgb(148 163 184 / 0.55);
+  pointer-events: all !important;
   transition:
     background-color 0.15s ease,
     border-color 0.15s ease,
     box-shadow 0.15s ease;
 }
 
+.bp-node > .vue-flow__handle.vue-flow__handle-left,
+.bp-node > .vue-flow__handle[data-handlepos="left"] {
+  top: 50%;
+  left: 0;
+  right: auto;
+  bottom: auto;
+  transform: translate(-50%, -50%);
+}
+
+.bp-node > .vue-flow__handle.vue-flow__handle-right,
+.bp-node > .vue-flow__handle[data-handlepos="right"] {
+  top: 50%;
+  right: 0;
+  left: auto;
+  bottom: auto;
+  transform: translate(50%, -50%);
+}
+
 .bp-canvas .vue-flow__handle.bp-flow-handle:hover,
 .bp-flow .vue-flow__handle.bp-flow-handle:hover,
 [data-workspace-region="blueprint"] .vue-flow__handle.bp-flow-handle:hover {
-  background-color: hsl(var(--primary)) !important;
-  border-color: hsl(var(--background)) !important;
-  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.28);
+  background-color: #ffffff !important;
+  border-color: hsl(var(--primary)) !important;
+  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.22);
 }
 
 .bp-canvas .vue-flow__handle.bp-flow-handle--target,
 .bp-flow .vue-flow__handle.bp-flow-handle--target,
 [data-workspace-region="blueprint"] .vue-flow__handle.bp-flow-handle--target {
-  background-color: hsl(var(--foreground) / 0.48) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-canvas .vue-flow__handle.bp-flow-handle--source,
 .bp-flow .vue-flow__handle.bp-flow-handle--source,
 [data-workspace-region="blueprint"] .vue-flow__handle.bp-flow-handle--source {
-  background-color: hsl(var(--primary) / 0.72) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-node--selected .bp-flow-handle {
-  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;
+  border-color: hsl(var(--primary) / 0.55) !important;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
 }
 
+.bp-node--selected .bp-flow-handle--target,
 .bp-node--selected .bp-flow-handle--source {
-  background-color: hsl(var(--primary)) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-node--execution-true .bp-node-card {
-  border-color: rgb(22 163 74 / 0.65);
+  border-color: rgb(22 163 74 / 0.55);
   box-shadow:
-    0 0 0 1px rgb(22 163 74 / 0.35),
-    0 4px 14px rgb(22 163 74 / 0.18);
+    0 0 0 1px rgb(22 163 74 / 0.28),
+    0 8px 24px rgb(22 163 74 / 0.14);
 }
 
 .bp-node--execution-true .bp-flow-handle {
-  border-color: hsl(var(--card));
-  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.45);
-}
-
-.bp-node--execution-true .bp-flow-handle--source {
-  background-color: #16a34a !important;
+  border-color: rgb(22 163 74 / 0.7) !important;
+  box-shadow: 0 0 0 2px rgb(22 163 74 / 0.28);
 }
 
+.bp-node--execution-true .bp-flow-handle--source,
 .bp-node--execution-true .bp-flow-handle--target {
-  background-color: rgb(22 163 74 / 0.55) !important;
+  background-color: #ffffff !important;
 }
 
 .bp-node--execution-false .bp-node-card {
-  border-color: hsl(var(--destructive) / 0.65);
+  border-color: hsl(var(--destructive) / 0.55);
   box-shadow:
-    0 0 0 1px hsl(var(--destructive) / 0.4),
-    0 4px 14px hsl(var(--destructive) / 0.16);
+    0 0 0 1px hsl(var(--destructive) / 0.3),
+    0 8px 24px hsl(var(--destructive) / 0.12);
 }
 
 .bp-node--execution-false .bp-flow-handle {
-  border-color: hsl(var(--card));
-  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.4);
-}
-
-.bp-node--execution-false .bp-flow-handle--source {
-  background-color: hsl(var(--destructive)) !important;
+  border-color: hsl(var(--destructive) / 0.65) !important;
+  box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.25);
 }
 
+.bp-node--execution-false .bp-flow-handle--source,
 .bp-node--execution-false .bp-flow-handle--target {
-  background-color: hsl(var(--destructive) / 0.55) !important;
+  background-color: #ffffff !important;
 }
 
 /* 生命周期节点无输入口：隐藏任何左侧/目标连接点（含旧数据产生的幽灵 handle） */
@@ -325,3 +345,265 @@
   margin: 4px 0;
   background: hsl(var(--border));
 }
+
+/* Soft UI 节点卡片（写入 CSS，避免 Tailwind content 未扫到 react-blueprint） */
+.bp-node-card {
+  width: 200px;
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid hsl(var(--border) / 0.7);
+  background: hsl(var(--card));
+  color: hsl(var(--card-foreground));
+  box-shadow: 0 8px 24px rgb(15 23 42 / 0.08);
+  cursor: grab;
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.bp-node-card:active {
+  cursor: grabbing;
+}
+
+.bp-node-card.bp-node-card--selected {
+  border-color: hsl(var(--primary) / 0.7);
+  box-shadow:
+    0 0 0 2px hsl(var(--primary) / 0.35),
+    0 10px 28px hsl(var(--primary) / 0.18);
+}
+
+.bp-node-card__body {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  padding: 10px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: inherit;
+  outline: none;
+  transition: background-color 0.15s ease;
+}
+
+.bp-node-card__body:hover {
+  background: hsl(var(--accent) / 0.25);
+}
+
+.bp-node-card__body:focus-visible {
+  box-shadow: inset 0 0 0 1px hsl(var(--primary));
+}
+
+.bp-node-card__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.bp-node-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.bp-node-card__title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: hsl(var(--foreground));
+}
+
+.bp-node-card__meta,
+.bp-node-card__subtitle {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
+  color: hsl(var(--muted-foreground));
+}
+
+.bp-node-card__meta {
+  font-size: 11px;
+}
+
+.bp-node-card__subtitle {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  opacity: 0.85;
+}
+
+.bp-node-card__badge {
+  flex-shrink: 0;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.bp-node-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-top: 2px;
+  margin-right: 10px;
+  border-radius: 8px;
+}
+
+.bp-node-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.bp-node-icon--blueprint {
+  background: hsl(var(--primary) / 0.14);
+  color: hsl(var(--primary));
+}
+
+.bp-node-icon--view {
+  background: rgb(100 116 139 / 0.18);
+  color: rgb(71 85 105);
+}
+
+.bp-node-icon--logic {
+  background: rgb(14 165 233 / 0.15);
+  color: rgb(2 132 199);
+}
+
+.bp-node-icon--and {
+  background: rgb(99 102 241 / 0.15);
+  color: rgb(79 70 229);
+}
+
+.bp-node-icon--lifecycle {
+  background: rgb(245 158 11 / 0.15);
+  color: rgb(217 119 6);
+}
+
+.bp-node-icon--event {
+  background: rgb(217 70 239 / 0.15);
+  color: rgb(192 38 211);
+}
+
+.bp-node-icon--fetch {
+  background: rgb(139 92 246 / 0.15);
+  color: rgb(124 58 237);
+}
+
+.bp-node-icon--json {
+  background: rgb(20 184 166 / 0.15);
+  color: rgb(13 148 136);
+}
+
+.bp-node-icon--storage {
+  background: rgb(16 185 129 / 0.15);
+  color: rgb(5 150 105);
+}
+
+.bp-node-icon--clock {
+  background: rgb(244 63 94 / 0.15);
+  color: rgb(225 29 72);
+}
+
+.bp-node-card__badge--blueprint {
+  background: hsl(var(--primary) / 0.1);
+  color: hsl(var(--primary));
+}
+
+.bp-node-card__badge--view {
+  background: rgb(100 116 139 / 0.12);
+  color: rgb(51 65 85);
+}
+
+.bp-node-card__badge--logic {
+  background: rgb(14 165 233 / 0.1);
+  color: rgb(3 105 161);
+}
+
+.bp-node-card__badge--and {
+  background: rgb(99 102 241 / 0.1);
+  color: rgb(67 56 202);
+}
+
+.bp-node-card__badge--lifecycle {
+  background: rgb(245 158 11 / 0.1);
+  color: rgb(180 83 9);
+}
+
+.bp-node-card__badge--event {
+  background: rgb(217 70 239 / 0.1);
+  color: rgb(162 28 175);
+}
+
+.bp-node-card__badge--fetch {
+  background: rgb(139 92 246 / 0.1);
+  color: rgb(109 40 217);
+}
+
+.bp-node-card__badge--json {
+  background: rgb(20 184 166 / 0.1);
+  color: rgb(15 118 110);
+}
+
+.bp-node-card__badge--storage {
+  background: rgb(16 185 129 / 0.1);
+  color: rgb(4 120 87);
+}
+
+.bp-node-card__badge--clock {
+  background: rgb(244 63 94 / 0.1);
+  color: rgb(190 18 60);
+}
+
+.dark .bp-node-icon--logic,
+:root.dark .bp-node-icon--logic {
+  color: rgb(125 211 252);
+}
+
+.dark .bp-node-icon--view,
+:root.dark .bp-node-icon--view {
+  color: rgb(203 213 225);
+}
+
+.dark .bp-node-icon--and,
+:root.dark .bp-node-icon--and {
+  color: rgb(165 180 252);
+}
+
+.dark .bp-node-icon--lifecycle,
+:root.dark .bp-node-icon--lifecycle {
+  color: rgb(252 211 77);
+}
+
+.dark .bp-node-icon--event,
+:root.dark .bp-node-icon--event {
+  color: rgb(240 171 252);
+}
+
+.dark .bp-node-icon--fetch,
+:root.dark .bp-node-icon--fetch {
+  color: rgb(196 181 253);
+}
+
+.dark .bp-node-icon--json,
+:root.dark .bp-node-icon--json {
+  color: rgb(94 234 212);
+}
+
+.dark .bp-node-icon--storage,
+:root.dark .bp-node-icon--storage {
+  color: rgb(110 231 183);
+}
+
+.dark .bp-node-icon--clock,
+:root.dark .bp-node-icon--clock {
+  color: rgb(253 164 175);
+}