@robot-admin/naive-ui-components 0.13.8 → 0.14.0

package/dist/C_WorkFlow.css

@@ -1,3 +1,11 @@
+:root{--c-primary: var(--primary-color, #2080f0);--c-primary-hover: var(--primary-color-hover, #4098fc);--c-primary-pressed: var(--primary-color-pressed, #1060c9);--c-success: var(--success-color, #18a058);--c-warning: var(--warning-color, #f0a020);--c-error: var(--error-color, #d03050);--c-info: var(--info-color, #2080f0);--c-bg-body: var(--body-color, #ffffff);--c-bg-card: var(--card-color, #ffffff);--c-bg-surface: var(--popover-color, #ffffff);--c-text-1: var(--text-color-1, #262626);--c-text-2: var(--text-color-2, #525252);--c-text-3: var(--text-color-3, #a3a3a3);--c-text-4: var(--text-color-4, #c0c0c0);--c-border: var(--border-color, #e5e7eb);--c-radius-sm: var(--border-radius-small, 4px);--c-radius: var(--border-radius, 6px);--c-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);--c-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--c-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);--c-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--c-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)}
+
+/* unplugin-vue-components disabled */
+/* layer: default */
+.inline-flex[data-v-075758a0]{display:inline-flex;}
+.transform[data-v-075758a0]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.px[data-v-075758a0]{padding-left:1rem;padding-right:1rem;}
+
 /* unplugin-vue-components disabled */.c-icon[data-v-075758a0] {
   display: inline-flex;
   align-items: center;
@@ -59,564 +67,567 @@
 }
 /* unplugin-vue-components disabled */
 /* layer: default */
-.inline-flex[data-v-075758a0]{display:inline-flex;}
-.transform[data-v-075758a0]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.px[data-v-075758a0]{padding-left:1rem;padding-right:1rem;}
-
-
-/* unplugin-vue-components disabled */
-/* layer: default */
-.visible[data-v-3d6434f4]{visibility:visible;}
-.start-1[data-v-3d6434f4]{inset-inline-start:0.25rem;}
-.mb-2[data-v-3d6434f4]{margin-bottom:0.5rem;}
-.mb-3[data-v-3d6434f4]{margin-bottom:0.75rem;}
-.mb-4[data-v-3d6434f4]{margin-bottom:1rem;}
-.ml-auto[data-v-3d6434f4]{margin-left:auto;}
-.mt-4[data-v-3d6434f4]{margin-top:1rem;}
-.block[data-v-3d6434f4]{display:block;}
-.max-h-50[data-v-3d6434f4]{max-height:12.5rem;}
-.max-h-60vh[data-v-3d6434f4]{max-height:60vh;}
-.min-h-10[data-v-3d6434f4]{min-height:2.5rem;}
-.w-full[data-v-3d6434f4]{width:100%;}
-.flex[data-v-3d6434f4]{display:flex;}
-.flex-shrink-0[data-v-3d6434f4]{flex-shrink:0;}
-.flex-col[data-v-3d6434f4]{flex-direction:column;}
-.flex-wrap[data-v-3d6434f4]{flex-wrap:wrap;}
-.flex-nowrap[data-v-3d6434f4]{flex-wrap:nowrap;}
-.table[data-v-3d6434f4]{display:table;}
-.items-center[data-v-3d6434f4]{align-items:center;}
-.gap-1[data-v-3d6434f4]{gap:0.25rem;}
-.gap-2[data-v-3d6434f4]{gap:0.5rem;}
-.gap-3[data-v-3d6434f4]{gap:0.75rem;}
-.space-y-3[data-v-3d6434f4]>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
-.overflow-y-auto[data-v-3d6434f4]{overflow-y:auto;}
-.border[data-v-3d6434f4]{border-width:1px;}
-.border-gray-200[data-v-3d6434f4]{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
-.hover\:border-gray-300[data-v-3d6434f4]:hover{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity));}
-.rounded[data-v-3d6434f4]{border-radius:0.25rem;}
-.rounded-lg[data-v-3d6434f4]{border-radius:0.5rem;}
-.p-2[data-v-3d6434f4]{padding:0.5rem;}
-.p-3[data-v-3d6434f4]{padding:0.75rem;}
-.p-4[data-v-3d6434f4]{padding:1rem;}
-.px-1\.5[data-v-3d6434f4]{padding-left:0.375rem;padding-right:0.375rem;}
-.py-0\.5[data-v-3d6434f4]{padding-top:0.125rem;padding-bottom:0.125rem;}
-.text-base[data-v-3d6434f4]{font-size:1rem;line-height:1.5rem;}
-.text-sm[data-v-3d6434f4]{font-size:0.875rem;line-height:1.25rem;}
-.text-xs[data-v-3d6434f4]{font-size:0.75rem;line-height:1rem;}
-.font-medium[data-v-3d6434f4]{font-weight:500;}
-.font-semibold[data-v-3d6434f4]{font-weight:600;}
-.filter[data-v-3d6434f4]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
-.transition-colors[data-v-3d6434f4]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.start-1[data-v-b2b17129]{inset-inline-start:0.25rem;}
+.table[data-v-b2b17129]{display:table;}
+.px[data-v-b2b17129]{padding-left:1rem;padding-right:1rem;}
+.filter[data-v-b2b17129]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 
-/* unplugin-vue-components disabled */.start-node[data-v-6fb2df95] {
+/* unplugin-vue-components disabled *//* C_WorkFlow 组件样式 */
+.approval-workflow-container[data-v-b2b17129] {
+  width: 100%;
+  height: 600px;
   position: relative;
-}
-.node-content[data-v-6fb2df95] {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  padding: 16px 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+.floating-toolbar[data-v-b2b17129] {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 12px;
-  min-width: 160px;
-  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  cursor: pointer;
+  gap: 8px;
+  background: var(--n-card-color);
+  backdrop-filter: blur(10px);
+  padding: 8px 12px;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--n-border-color);
 }
-.node-content[data-v-6fb2df95]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
+.floating-toolbar .toolbar-divider[data-v-b2b17129] {
+  width: 1px;
+  height: 20px;
+  background: var(--n-border-color);
+  margin: 0 4px;
 }
-.node-icon[data-v-6fb2df95] {
-  font-size: 16px;
-  flex-shrink: 0;
+.workflow-canvas[data-v-b2b17129] {
+  width: 100%;
+  height: 100%;
 }
-.node-info[data-v-6fb2df95] {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  text-align: center;
+.add-node-menu[data-v-b2b17129] {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
 }
-.node-text[data-v-6fb2df95] {
-  font-weight: 600;
-  font-size: 14px;
+.add-node-menu .add-menu-content[data-v-b2b17129] {
+  background: var(--n-card-color);
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--n-border-color);
+  display: flex;
+  gap: 8px;
+  pointer-events: auto;
+  animation: menuSlideUp-b2b17129 0.3s ease;
 }
-.initiator-name[data-v-6fb2df95] {
-  font-size: 12px;
-  opacity: 0.9;
-  background: rgba(255, 255, 255, 0.2);
-  padding: 2px 8px;
+.add-menu-item[data-v-b2b17129] {
+  appearance: none;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12px 8px;
   border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 70px;
+  background: var(--n-color-embedded);
 }
-.placeholder-text[data-v-6fb2df95] {
-  font-size: 11px;
-  opacity: 0.7;
-  font-style: italic;
+.add-menu-item[data-v-b2b17129]:hover {
+  background: var(--n-color-hover);
 }
-.add-node-btn[data-v-6fb2df95] {
-  appearance: none;
-  border: 0;
-  padding: 0;
-  position: absolute;
-  left: 50%;
-  bottom: -20px;
-  transform: translateX(-50%);
+.add-menu-item[data-v-b2b17129]:focus-visible {
+  outline: 2px solid var(--n-color-target, #18a058);
+  outline-offset: 2px;
+}
+.menu-icon[data-v-b2b17129] {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #1890ff, #722ed1);
-  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-size: 16px;
-  font-weight: bold;
-  z-index: 10;
+  margin-bottom: 6px;
+  color: white;
 }
-.add-node-btn[data-v-6fb2df95]:hover {
-  transform: translateX(-50%) scale(1.1);
-  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
+.menu-icon.approval-icon[data-v-b2b17129] {
+  background: linear-gradient(135deg, #1890ff, #722ed1);
 }
-.add-node-btn[data-v-6fb2df95]:focus-visible {
-  outline: 2px solid #1890ff;
-  outline-offset: 2px;
+.menu-icon.copy-icon[data-v-b2b17129] {
+  background: linear-gradient(135deg, #52c41a, #389e0d);
 }
-/* unplugin-vue-components disabled */
-/* layer: default */
-.absolute[data-v-6fb2df95]{position:absolute;}
-.relative[data-v-6fb2df95]{position:relative;}
-.flex[data-v-6fb2df95]{display:flex;}
-.flex-shrink[data-v-6fb2df95]{flex-shrink:1;}
-.transform[data-v-6fb2df95]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.border[data-v-6fb2df95]{border-width:1px;}
-.italic[data-v-6fb2df95]{font-style:italic;}
-.outline[data-v-6fb2df95]{outline-style:solid;}
-.transition[data-v-6fb2df95]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-
-/* unplugin-vue-components disabled */.approval-node[data-v-e6968a42] {
-  position: relative;
+.menu-icon.condition-icon[data-v-b2b17129] {
+  background: linear-gradient(135deg, #fa8c16, #d48806);
 }
-.status-indicator[data-v-e6968a42] {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid white;
-  z-index: 2;
-  background: #faad14;
+.menu-text[data-v-b2b17129] {
+  font-size: 12px;
+  font-weight: 500;
 }
-.status-indicator.approved[data-v-e6968a42] {
-  background: #52c41a;
+@keyframes menuSlideUp-b2b17129 {
+from {
+    opacity: 0;
+    transform: translateY(10px);
 }
-.status-indicator.rejected[data-v-e6968a42] {
-  background: #ff4d4f;
+to {
+    opacity: 1;
+    transform: translateY(0);
 }
-.status-indicator.pending[data-v-e6968a42] {
-  background: #1890ff;
 }
-.delete-btn[data-v-e6968a42] {
-  appearance: none;
-  padding: 0;
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #ff4d4f;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 100; /* 确保在所有元素之上 */
-  opacity: 0;
-  transform: scale(0.8);
-  transition: all 0.2s ease;
-  border: 2px solid white;
-  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
+/* 流程/数据校验结果显示样式 */
+.validation-success[data-v-b2b17129] {
+  text-align: center;
+  padding: 40px 20px;
+  color: #52c41a;
 }
-.delete-btn[data-v-e6968a42]:hover {
-  transform: scale(1);
-  background: #ff7875;
-  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
+.validation-success .success-icon[data-v-b2b17129] {
+  margin-bottom: 16px;
 }
-.delete-btn[data-v-e6968a42]:active {
-  transform: scale(0.95);
+.validation-success h3[data-v-b2b17129] {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
 }
-.approval-node:hover .delete-btn[data-v-e6968a42],
-.approval-node:focus-within .delete-btn[data-v-e6968a42] {
-  opacity: 1;
-  transform: scale(1);
+.validation-success p[data-v-b2b17129] {
+  margin: 0;
+  color: #666;
+  font-size: 14px;
 }
-.node-card[data-v-e6968a42] {
+.validation-errors .error-summary[data-v-b2b17129] {
+  text-align: center;
+  padding: 20px;
+  background: #fff2f0;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid #ffccc7;
+}
+.validation-errors .error-summary .error-icon[data-v-b2b17129] {
+  margin-bottom: 12px;
+}
+.validation-errors .error-summary h3[data-v-b2b17129] {
+  margin: 0 0 8px 0;
+  color: #ff4d4f;
+  font-size: 16px;
+  font-weight: 600;
+}
+.validation-errors .error-summary p[data-v-b2b17129] {
+  margin: 0;
+  color: var(--n-text-color-2);
+  font-size: 14px;
+}
+.validation-errors .error-list[data-v-b2b17129] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.validation-errors .error-item[data-v-b2b17129] {
   background: white;
-  border-radius: 12px;
-  min-width: 240px;
-  max-width: 300px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  border: 2px solid transparent;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  cursor: pointer;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s ease;
 }
-.node-card[data-v-e6968a42]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-  border-color: #1890ff;
+.validation-errors .error-item[data-v-b2b17129]:hover {
+  border-color: #d9d9d9;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
-.node-header[data-v-e6968a42] {
-  padding: 12px 16px;
-  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);
-  border-bottom: 1px solid #91d5ff;
+.validation-errors .error-item .error-header[data-v-b2b17129] {
   display: flex;
   align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 8px;
 }
-.node-icon[data-v-e6968a42] {
+.validation-errors .error-item .error-header .error-number[data-v-b2b17129] {
   width: 24px;
   height: 24px;
-  border-radius: 50%;
-  background: #1890ff;
+  background: #ff4d4f;
   color: white;
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-}
-.node-title[data-v-e6968a42] {
+  font-size: 12px;
   font-weight: 600;
+  flex-shrink: 0;
+}
+.validation-errors .error-item .error-header .error-info[data-v-b2b17129] {
+  flex: 1;
+  min-width: 0;
+}
+.validation-errors .error-item .error-header .error-info .error-node[data-v-b2b17129] {
+  display: block;
   color: var(--n-text-color-1);
   font-size: 14px;
-  flex: 1;
+  margin-bottom: 2px;
 }
-.node-badge[data-v-e6968a42] {
-  background: #1890ff;
-  color: white;
-  padding: 2px 6px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
-  min-width: 16px;
-  text-align: center;
+.validation-errors .error-item .error-header .error-info .error-field[data-v-b2b17129] {
+  color: var(--n-text-color-3);
+  font-size: 12px;
 }
-.approval-mode-badge[data-v-e6968a42] {
-  background: #f0f0f0;
-  color: #666;
-  padding: 2px 6px;
-  border-radius: 8px;
-  font-size: 10px;
+.validation-errors .error-item .error-header .error-type[data-v-b2b17129] {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
   font-weight: 500;
 }
-.node-content[data-v-e6968a42] {
-  padding: 16px;
-}
-.approvers-list[data-v-e6968a42] {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.validation-errors .error-item .error-header .error-type.required[data-v-b2b17129] {
+  background: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
 }
-.approver-tag[data-v-e6968a42] {
-  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);
-  border: 1px solid #91d5ff;
-  border-radius: 8px;
-  padding: 8px 12px;
-  transition: all 0.2s ease;
+.validation-errors .error-item .error-header .error-type.incomplete[data-v-b2b17129] {
+  background: #fff7e6;
+  color: #fa8c16;
+  border: 1px solid #ffd591;
 }
-.approver-tag[data-v-e6968a42]:hover {
-  transform: translateX(2px);
-  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+.validation-errors .error-item .error-header .error-type.warning[data-v-b2b17129] {
+  background: #fffbe6;
+  color: #faad14;
+  border: 1px solid #ffe58f;
 }
-.approver-tag .approver-info[data-v-e6968a42] {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.validation-errors .error-item .error-message[data-v-b2b17129] {
+  color: var(--n-text-color-2);
+  font-size: 13px;
+  line-height: 1.5;
+  margin-bottom: 12px;
+  padding-left: 36px;
 }
-.approver-tag .approver-info .approver-avatar[data-v-e6968a42] {
-  flex-shrink: 0;
+.validation-errors .error-item .error-actions[data-v-b2b17129] {
+  padding-left: 36px;
 }
-.approver-tag .approver-info .approver-details[data-v-e6968a42] {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
+.validation-errors .validation-tips[data-v-b2b17129] {
+  margin-top: 24px;
+  padding: 16px;
+  background: #f6ffed;
+  border-radius: 8px;
+  border: 1px solid #b7eb8f;
 }
-.approver-tag .approver-info .approver-details .approver-name[data-v-e6968a42] {
+.validation-errors .validation-tips h4[data-v-b2b17129] {
+  margin: 0 0 12px 0;
+  color: #389e0d;
+  font-size: 14px;
   font-weight: 600;
-  color: #1890ff;
-  font-size: 13px;
 }
-.approver-tag .approver-info .approver-details .approver-dept[data-v-e6968a42] {
-  font-size: 11px;
-  color: #666;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 1px 4px;
-  border-radius: 4px;
-  display: inline-block;
+.validation-errors .validation-tips ul[data-v-b2b17129] {
+  margin: 0;
+  padding-left: 16px;
+  color: var(--n-text-color-2);
+  font-size: 13px;
+  line-height: 1.6;
 }
-.approver-tag .approver-info .approver-details .approver-role[data-v-e6968a42] {
-  font-size: 10px;
-  color: #999;
+.validation-errors .validation-tips ul li[data-v-b2b17129] {
+  margin-bottom: 6px;
 }
-.more-count[data-v-e6968a42] {
-  background: #f0f0f0;
-  color: #8c8c8c;
-  padding: 6px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-  border: 1px dashed #d9d9d9;
+.validation-errors .validation-tips ul li strong[data-v-b2b17129] {
+  color: var(--n-text-color-1);
 }
-.placeholder[data-v-e6968a42] {
+.validation-footer[data-v-b2b17129] {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   gap: 8px;
-  color: #8c8c8c;
-  font-size: 12px;
-  padding: 20px 0;
-  border: 1px dashed #d9d9d9;
-  border-radius: 8px;
-  background: #fafafa;
+  justify-content: flex-end;
 }
-.placeholder span[data-v-e6968a42] {
-  font-weight: 500;
+
+/* 边的样式（Vue Flow） */
+[data-v-b2b17129] .vue-flow__edge {
+  stroke: #1890ff;
+  stroke-width: 2px;
 }
-.add-node-btn[data-v-e6968a42] {
-  appearance: none;
-  border: 0;
-  padding: 0;
-  position: absolute;
-  left: 50%;
-  bottom: -20px;
-  transform: translateX(-50%);
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #1890ff, #722ed1);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 10;
+[data-v-b2b17129] .vue-flow__edge-path {
+  stroke: #1890ff;
+  stroke-width: 2px;
 }
-.add-node-btn[data-v-e6968a42]:hover {
-  transform: translateX(-50%) scale(1.1);
-  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
+[data-v-b2b17129] .vue-flow__arrowhead {
+  fill: #1890ff;
 }
-.add-node-btn[data-v-e6968a42]:focus-visible {
-  outline: 2px solid #1890ff;
-  outline-offset: 2px;
+[data-v-b2b17129] .vue-flow__edge.animated {
+  stroke-dasharray: 5;
+  animation: dashdraw-b2b17129 0.5s linear infinite;
 }
-.delete-btn[data-v-e6968a42]:focus-visible {
-  opacity: 1;
-  outline: 2px solid #1890ff;
-  outline-offset: 2px;
+@keyframes dashdraw-b2b17129 {
+to {
+    stroke-dashoffset: -10;
+}
+}
+/* 暗色主题适配 */
+[data-theme=dark] .approval-workflow-container[data-v-b2b17129] {
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+[data-theme=dark][data-v-b2b17129] {
+  /* 添加节点菜单文字 */
+}
+[data-theme=dark] .add-menu-item span[data-v-b2b17129] {
+  color: white;
+}
+[data-theme=dark] .validation-success[data-v-b2b17129] {
+  color: #52c41a;
+}
+[data-theme=dark] .validation-success h3[data-v-b2b17129] {
+  color: #52c41a;
+}
+[data-theme=dark] .validation-success p[data-v-b2b17129] {
+  color: var(--n-text-color-2);
+}
+[data-theme=dark] .validation-errors .error-summary[data-v-b2b17129] {
+  background: rgba(255, 77, 79, 0.1);
+  border-color: rgba(255, 77, 79, 0.3);
+}
+[data-theme=dark] .validation-errors .error-summary h3[data-v-b2b17129] {
+  color: #ff4d4f;
+}
+[data-theme=dark] .validation-errors .error-summary p[data-v-b2b17129] {
+  color: var(--n-text-color-2);
+}
+[data-theme=dark] .validation-errors .error-item[data-v-b2b17129] {
+  background: var(--n-card-color);
+  border-color: var(--n-border-color);
+}
+[data-theme=dark] .validation-errors .error-item[data-v-b2b17129]:hover {
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+[data-theme=dark] .validation-errors .error-item .error-info .error-node[data-v-b2b17129] {
+  color: var(--n-text-color-1);
+}
+[data-theme=dark] .validation-errors .error-item .error-info .error-field[data-v-b2b17129] {
+  color: var(--n-text-color-3);
+}
+[data-theme=dark] .validation-errors .error-item .error-type.required[data-v-b2b17129] {
+  background: rgba(255, 77, 79, 0.15);
+  color: #ff7875;
+  border-color: rgba(255, 77, 79, 0.3);
+}
+[data-theme=dark] .validation-errors .error-item .error-type.incomplete[data-v-b2b17129] {
+  background: rgba(250, 140, 22, 0.15);
+  color: #ffa940;
+  border-color: rgba(250, 140, 22, 0.3);
+}
+[data-theme=dark] .validation-errors .error-item .error-type.warning[data-v-b2b17129] {
+  background: rgba(250, 173, 20, 0.15);
+  color: #ffc53d;
+  border-color: rgba(250, 173, 20, 0.3);
+}
+[data-theme=dark] .validation-errors .error-item .error-message[data-v-b2b17129] {
+  color: var(--n-text-color-2);
+}
+[data-theme=dark] .validation-errors .validation-tips[data-v-b2b17129] {
+  background: rgba(82, 196, 26, 0.1);
+  border-color: rgba(82, 196, 26, 0.3);
+}
+[data-theme=dark] .validation-errors .validation-tips h4[data-v-b2b17129] {
+  color: #73d13d;
+}
+[data-theme=dark] .validation-errors .validation-tips ul[data-v-b2b17129] {
+  color: var(--n-text-color-2);
+}
+[data-theme=dark] .validation-errors .validation-tips ul li strong[data-v-b2b17129] {
+  color: var(--n-text-color-1);
 }
-/* unplugin-vue-components disabled */
-/* layer: default */
-.absolute[data-v-e6968a42]{position:absolute;}
-.relative[data-v-e6968a42]{position:relative;}
-.start-1[data-v-e6968a42]{inset-inline-start:0.25rem;}
-.inline-block[data-v-e6968a42]{display:inline-block;}
-.hidden[data-v-e6968a42]{display:none;}
-.flex[data-v-e6968a42]{display:flex;}
-.flex-shrink[data-v-e6968a42]{flex-shrink:1;}
-.flex-wrap[data-v-e6968a42]{flex-wrap:wrap;}
-.transform[data-v-e6968a42]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.border[data-v-e6968a42]{border-width:1px;}
-.outline[data-v-e6968a42]{outline-style:solid;}
-.transition[data-v-e6968a42]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.ease[data-v-e6968a42]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
 
-/* unplugin-vue-components disabled */.copy-node[data-v-010e7ec8] {
+/* ─── 流程预览抽屉样式 ────────────────────────────────────── */
+.preview-stats[data-v-b2b17129] {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.preview-stats .stat-item[data-v-b2b17129] {
+  flex: 1;
+  min-width: 70px;
+  text-align: center;
+  padding: 12px 8px;
+  border-radius: 10px;
+  background: var(--n-action-color);
+  border: 1px solid var(--n-border-color);
+  transition: all 0.2s;
+}
+.preview-stats .stat-item .stat-value[data-v-b2b17129] {
+  display: block;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--n-text-color-1);
+}
+.preview-stats .stat-item .stat-label[data-v-b2b17129] {
+  display: block;
+  font-size: 12px;
+  color: var(--n-text-color-3);
+  margin-top: 4px;
+}
+.preview-stats .stat-item.approval .stat-value[data-v-b2b17129] {
+  color: #ff6b35;
+}
+.preview-stats .stat-item.copy .stat-value[data-v-b2b17129] {
+  color: #1890ff;
+}
+.preview-stats .stat-item.condition .stat-value[data-v-b2b17129] {
+  color: #faad14;
+}
+.preview-stats .stat-item.edge .stat-value[data-v-b2b17129] {
+  color: #52c41a;
+}
+.preview-timeline[data-v-b2b17129] {
   position: relative;
+  padding: 0 0 0 8px;
 }
-.status-indicator[data-v-010e7ec8] {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid white;
-  z-index: 2;
-  background: #faad14;
+.preview-timeline .preview-step[data-v-b2b17129] {
+  display: flex;
+  gap: 16px;
+  position: relative;
+  padding-bottom: 8px;
 }
-.status-indicator.completed[data-v-010e7ec8] {
-  background: #52c41a;
+.preview-timeline .preview-step:last-child .step-line[data-v-b2b17129] {
+  display: none;
 }
-.status-indicator.active[data-v-010e7ec8] {
-  background: #1890ff;
+.preview-timeline .step-connector[data-v-b2b17129] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  width: 32px;
 }
-.delete-btn[data-v-010e7ec8] {
-  appearance: none;
-  padding: 0;
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  width: 24px;
-  height: 24px;
+.preview-timeline .step-connector .step-dot[data-v-b2b17129] {
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
-  background: #ff4d4f;
-  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  z-index: 100;
-  opacity: 0;
-  transform: scale(0.8);
-  transition: all 0.2s ease;
-  border: 2px solid white;
-  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
+  color: white;
+  flex-shrink: 0;
+  z-index: 1;
+  background: #999;
 }
-.delete-btn[data-v-010e7ec8]:hover {
-  transform: scale(1);
-  background: #ff7875;
-  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
+.preview-timeline .step-connector .step-line[data-v-b2b17129] {
+  width: 2px;
+  flex: 1;
+  min-height: 20px;
+  background: var(--n-border-color);
 }
-.delete-btn[data-v-010e7ec8]:active {
-  transform: scale(0.95);
+.preview-timeline[data-v-b2b17129] {
+  /* 不同节点类型的圆点颜色 */
 }
-.copy-node:hover .delete-btn[data-v-010e7ec8],
-.copy-node:focus-within .delete-btn[data-v-010e7ec8] {
-  opacity: 1;
-  transform: scale(1);
+.preview-timeline .start .step-dot[data-v-b2b17129] {
+  background: linear-gradient(135deg, #667eea, #764ba2);
 }
-.node-card[data-v-010e7ec8] {
-  background: white;
-  border-radius: 12px;
-  min-width: 200px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  border: 2px solid transparent;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-  cursor: pointer;
+.preview-timeline .approval .step-dot[data-v-b2b17129] {
+  background: linear-gradient(135deg, #ff6b35, #ff4500);
 }
-.node-card[data-v-010e7ec8]:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-  border-color: #52c41a;
+.preview-timeline .copy .step-dot[data-v-b2b17129] {
+  background: linear-gradient(135deg, #1890ff, #096dd9);
 }
-.node-header[data-v-010e7ec8] {
-  padding: 12px 16px;
-  background: #f6ffed;
-  border-bottom: 1px solid #d9f7be;
+.preview-timeline .condition .step-dot[data-v-b2b17129] {
+  background: linear-gradient(135deg, #faad14, #d48806);
+}
+.preview-timeline .step-content[data-v-b2b17129] {
+  flex: 1;
+  padding-bottom: 20px;
+  min-width: 0;
+}
+.preview-timeline .step-content .step-header[data-v-b2b17129] {
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 6px;
 }
-.node-icon[data-v-010e7ec8] {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background: #52c41a;
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.preview-timeline .step-content .step-header .step-order[data-v-b2b17129] {
   font-size: 12px;
+  color: var(--n-text-color-3);
+  font-weight: 500;
 }
-.node-title[data-v-010e7ec8] {
-  font-weight: 600;
-  color: #262626;
-  font-size: 14px;
-  flex: 1;
-}
-.node-badge[data-v-010e7ec8] {
-  background: #52c41a;
-  color: white;
-  padding: 2px 6px;
-  border-radius: 10px;
+.preview-timeline .step-content .step-header .step-type-badge[data-v-b2b17129] {
   font-size: 11px;
+  padding: 1px 8px;
+  border-radius: 10px;
+  background: var(--n-action-color);
+  color: var(--n-text-color-2);
+  border: 1px solid var(--n-border-color);
+}
+.preview-timeline .step-content .step-title[data-v-b2b17129] {
+  font-size: 15px;
   font-weight: 600;
-  min-width: 16px;
-  text-align: center;
+  color: var(--n-text-color-1);
+  margin-bottom: 8px;
 }
-.node-content[data-v-010e7ec8] {
-  padding: 16px;
+.preview-timeline .step-content .step-details[data-v-b2b17129] {
+  background: var(--n-action-color);
+  border-radius: 8px;
+  padding: 10px 14px;
+  border: 1px solid var(--n-border-color);
 }
-.copy-users-list[data-v-010e7ec8] {
+.preview-timeline .step-content .step-details .step-detail-item[data-v-b2b17129] {
+  font-size: 13px;
+  color: var(--n-text-color-2);
+  line-height: 1.8;
+  word-break: break-all;
   display: flex;
+  align-items: flex-start;
   flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
+  gap: 4px;
 }
-.copy-user-tag[data-v-010e7ec8] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: #f6ffed;
-  color: #52c41a;
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  border: 1px solid #b7eb8f;
+.preview-timeline .step-content .step-details .step-detail-item[data-v-b2b17129]:not(:last-child) {
+  border-bottom: 1px dashed var(--n-border-color);
+  padding-bottom: 8px;
+  margin-bottom: 8px;
 }
-.more-count[data-v-010e7ec8] {
-  background: #f0f0f0;
-  color: #8c8c8c;
-  padding: 4px 8px;
-  border-radius: 12px;
+.preview-timeline .step-content .step-details .step-detail-item.is-warning[data-v-b2b17129] {
+  color: #faad14;
+}
+.preview-timeline .step-content .step-details .step-detail-item .detail-label[data-v-b2b17129] {
+  color: var(--n-text-color-3);
   font-size: 12px;
-  font-weight: 500;
+  flex-shrink: 0;
+  line-height: 24px;
 }
-.placeholder[data-v-010e7ec8] {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: #8c8c8c;
+.preview-timeline .step-content .step-details .step-detail-item .mode-badge[data-v-b2b17129] {
+  display: inline-block;
   font-size: 12px;
-  padding: 8px 0;
+  font-weight: 600;
+  padding: 2px 10px;
+  border-radius: 12px;
+  line-height: 20px;
 }
-.add-node-btn[data-v-010e7ec8] {
-  appearance: none;
-  border: 0;
-  padding: 0;
-  position: absolute;
-  left: 50%;
-  bottom: -20px;
-  transform: translateX(-50%);
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #52c41a, #389e0d);
-  color: white;
+.preview-timeline .step-content .step-details .step-detail-item .mode-badge.any[data-v-b2b17129] {
+  background: rgba(24, 144, 255, 0.1);
+  color: #1890ff;
+  border: 1px solid rgba(24, 144, 255, 0.25);
+}
+.preview-timeline .step-content .step-details .step-detail-item .mode-badge.all[data-v-b2b17129] {
+  background: rgba(255, 77, 79, 0.1);
+  color: #ff4d4f;
+  border: 1px solid rgba(255, 77, 79, 0.25);
+}
+.preview-timeline .step-content .step-details .step-detail-item .mode-badge.sequence[data-v-b2b17129] {
+  background: rgba(114, 46, 209, 0.1);
+  color: #722ed1;
+  border: 1px solid rgba(114, 46, 209, 0.25);
+}
+.preview-timeline .step-content .step-details .step-detail-item .user-tag[data-v-b2b17129] {
+  margin: 1px 2px;
+}
+.preview-timeline .step-content .step-details .step-detail-item .warning-text[data-v-b2b17129] {
+  color: #faad14;
+  font-weight: 500;
+}
+.preview-empty[data-v-b2b17129] {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-size: 16px;
-  font-weight: bold;
-  z-index: 10;
-}
-.add-node-btn[data-v-010e7ec8]:hover {
-  transform: translateX(-50%) scale(1.1);
-  box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
+  padding: 60px 0;
 }
-.add-node-btn[data-v-010e7ec8]:focus-visible {
-  outline: 2px solid #52c41a;
-  outline-offset: 2px;
+.preview-empty p[data-v-b2b17129] {
+  margin-top: 12px;
+  color: var(--n-text-color-3);
+  font-size: 14px;
 }
-.delete-btn[data-v-010e7ec8]:focus-visible {
-  opacity: 1;
-  outline: 2px solid #52c41a;
-  outline-offset: 2px;
+.preview-footer[data-v-b2b17129] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
 /* unplugin-vue-components disabled */
 /* layer: default */
@@ -631,10 +642,38 @@
 .transition[data-v-010e7ec8]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 .ease[data-v-010e7ec8]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
 
-/* unplugin-vue-components disabled */.condition-node[data-v-5ede8782] {
+/* unplugin-vue-components disabled */
+/* layer: default */
+.absolute[data-v-e6968a42]{position:absolute;}
+.relative[data-v-e6968a42]{position:relative;}
+.start-1[data-v-e6968a42]{inset-inline-start:0.25rem;}
+.inline-block[data-v-e6968a42]{display:inline-block;}
+.hidden[data-v-e6968a42]{display:none;}
+.flex[data-v-e6968a42]{display:flex;}
+.flex-shrink[data-v-e6968a42]{flex-shrink:1;}
+.flex-wrap[data-v-e6968a42]{flex-wrap:wrap;}
+.transform[data-v-e6968a42]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.border[data-v-e6968a42]{border-width:1px;}
+.outline[data-v-e6968a42]{outline-style:solid;}
+.transition[data-v-e6968a42]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.ease[data-v-e6968a42]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+
+/* unplugin-vue-components disabled */
+/* layer: default */
+.absolute[data-v-6fb2df95]{position:absolute;}
+.relative[data-v-6fb2df95]{position:relative;}
+.flex[data-v-6fb2df95]{display:flex;}
+.flex-shrink[data-v-6fb2df95]{flex-shrink:1;}
+.transform[data-v-6fb2df95]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.border[data-v-6fb2df95]{border-width:1px;}
+.italic[data-v-6fb2df95]{font-style:italic;}
+.outline[data-v-6fb2df95]{outline-style:solid;}
+.transition[data-v-6fb2df95]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+
+/* unplugin-vue-components disabled */.copy-node[data-v-010e7ec8] {
   position: relative;
 }
-.status-indicator[data-v-5ede8782] {
+.status-indicator[data-v-010e7ec8] {
   position: absolute;
   top: -4px;
   right: -4px;
@@ -645,13 +684,13 @@
   z-index: 2;
   background: #faad14;
 }
-.status-indicator.completed[data-v-5ede8782] {
+.status-indicator.completed[data-v-010e7ec8] {
   background: #52c41a;
 }
-.status-indicator.active[data-v-5ede8782] {
-  background: #fa8c16;
+.status-indicator.active[data-v-010e7ec8] {
+  background: #1890ff;
 }
-.delete-btn[data-v-5ede8782] {
+.delete-btn[data-v-010e7ec8] {
   appearance: none;
   padding: 0;
   position: absolute;
@@ -673,61 +712,61 @@
   border: 2px solid white;
   box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
 }
-.delete-btn[data-v-5ede8782]:hover {
+.delete-btn[data-v-010e7ec8]:hover {
   transform: scale(1);
   background: #ff7875;
   box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
 }
-.delete-btn[data-v-5ede8782]:active {
+.delete-btn[data-v-010e7ec8]:active {
   transform: scale(0.95);
 }
-.condition-node:hover .delete-btn[data-v-5ede8782],
-.condition-node:focus-within .delete-btn[data-v-5ede8782] {
+.copy-node:hover .delete-btn[data-v-010e7ec8],
+.copy-node:focus-within .delete-btn[data-v-010e7ec8] {
   opacity: 1;
   transform: scale(1);
 }
-.node-card[data-v-5ede8782] {
+.node-card[data-v-010e7ec8] {
   background: white;
   border-radius: 12px;
-  min-width: 220px;
+  min-width: 200px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   border: 2px solid transparent;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   cursor: pointer;
 }
-.node-card[data-v-5ede8782]:hover {
+.node-card[data-v-010e7ec8]:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-  border-color: #fa8c16;
+  border-color: #52c41a;
 }
-.node-header[data-v-5ede8782] {
+.node-header[data-v-010e7ec8] {
   padding: 12px 16px;
-  background: #fff7e6;
-  border-bottom: 1px solid #ffe7ba;
+  background: #f6ffed;
+  border-bottom: 1px solid #d9f7be;
   display: flex;
   align-items: center;
   gap: 8px;
 }
-.node-icon[data-v-5ede8782] {
+.node-icon[data-v-010e7ec8] {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: #fa8c16;
+  background: #52c41a;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
 }
-.node-title[data-v-5ede8782] {
+.node-title[data-v-010e7ec8] {
   font-weight: 600;
   color: #262626;
   font-size: 14px;
   flex: 1;
 }
-.node-badge[data-v-5ede8782] {
-  background: #fa8c16;
+.node-badge[data-v-010e7ec8] {
+  background: #52c41a;
   color: white;
   padding: 2px 6px;
   border-radius: 10px;
@@ -736,45 +775,35 @@
   min-width: 16px;
   text-align: center;
 }
-.node-content[data-v-5ede8782] {
+.node-content[data-v-010e7ec8] {
   padding: 16px;
 }
-.conditions-list[data-v-5ede8782] {
+.copy-users-list[data-v-010e7ec8] {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: 6px;
+  align-items: center;
 }
-.condition-tag[data-v-5ede8782] {
+.copy-user-tag[data-v-010e7ec8] {
   display: flex;
   align-items: center;
   gap: 6px;
-  background: #fff7e6;
-  color: #fa8c16;
-  padding: 6px 10px;
-  border-radius: 8px;
+  background: #f6ffed;
+  color: #52c41a;
+  padding: 4px 8px;
+  border-radius: 12px;
   font-size: 12px;
-  border: 1px solid #ffd591;
-  transition: all 0.2s ease;
-}
-.condition-tag[data-v-5ede8782]:hover {
-  background: #ffe7ba;
-  transform: translateX(2px);
-}
-.condition-icon[data-v-5ede8782] {
-  font-weight: bold;
-  color: #d48806;
+  border: 1px solid #b7eb8f;
 }
-.more-count[data-v-5ede8782] {
+.more-count[data-v-010e7ec8] {
   background: #f0f0f0;
   color: #8c8c8c;
   padding: 4px 8px;
   border-radius: 12px;
   font-size: 12px;
   font-weight: 500;
-  text-align: center;
-  margin-top: 4px;
 }
-.placeholder[data-v-5ede8782] {
+.placeholder[data-v-010e7ec8] {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -782,7 +811,7 @@
   font-size: 12px;
   padding: 8px 0;
 }
-.add-node-btn[data-v-5ede8782] {
+.add-node-btn[data-v-010e7ec8] {
   appearance: none;
   border: 0;
   padding: 0;
@@ -793,604 +822,575 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #fa8c16, #d48806);
+  background: linear-gradient(135deg, #52c41a, #389e0d);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
+  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   font-size: 16px;
   font-weight: bold;
   z-index: 10;
 }
-.add-node-btn[data-v-5ede8782]:hover {
+.add-node-btn[data-v-010e7ec8]:hover {
   transform: translateX(-50%) scale(1.1);
-  box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
+  box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4);
 }
-.add-node-btn[data-v-5ede8782]:focus-visible {
-  outline: 2px solid #fa8c16;
+.add-node-btn[data-v-010e7ec8]:focus-visible {
+  outline: 2px solid #52c41a;
   outline-offset: 2px;
 }
-.delete-btn[data-v-5ede8782]:focus-visible {
+.delete-btn[data-v-010e7ec8]:focus-visible {
   opacity: 1;
-  outline: 2px solid #fa8c16;
+  outline: 2px solid #52c41a;
   outline-offset: 2px;
 }
-/* unplugin-vue-components disabled */
-/* layer: default */
-.absolute[data-v-5ede8782]{position:absolute;}
-.relative[data-v-5ede8782]{position:relative;}
-.hidden[data-v-5ede8782]{display:none;}
-.flex[data-v-5ede8782]{display:flex;}
-.transform[data-v-5ede8782]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.border[data-v-5ede8782]{border-width:1px;}
-.outline[data-v-5ede8782]{outline-style:solid;}
-.transition[data-v-5ede8782]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
-.ease[data-v-5ede8782]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
-
-/* unplugin-vue-components disabled *//* C_WorkFlow 组件样式 */
-.approval-workflow-container[data-v-b2b17129] {
-  width: 100%;
-  height: 600px;
+/* unplugin-vue-components disabled */.approval-node[data-v-e6968a42] {
   position: relative;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }
-.floating-toolbar[data-v-b2b17129] {
+.status-indicator[data-v-e6968a42] {
   position: absolute;
-  top: 16px;
-  left: 16px;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--n-card-color);
-  backdrop-filter: blur(10px);
-  padding: 8px 12px;
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--n-border-color);
-}
-.floating-toolbar .toolbar-divider[data-v-b2b17129] {
-  width: 1px;
-  height: 20px;
-  background: var(--n-border-color);
-  margin: 0 4px;
-}
-.workflow-canvas[data-v-b2b17129] {
-  width: 100%;
-  height: 100%;
-}
-.add-node-menu[data-v-b2b17129] {
-  position: fixed;
-  z-index: 1000;
-  pointer-events: none;
-}
-.add-node-menu .add-menu-content[data-v-b2b17129] {
-  background: var(--n-card-color);
-  border-radius: 12px;
-  padding: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--n-border-color);
-  display: flex;
-  gap: 8px;
-  pointer-events: auto;
-  animation: menuSlideUp-b2b17129 0.3s ease;
-}
-.add-menu-item[data-v-b2b17129] {
-  appearance: none;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 8px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 70px;
-  background: var(--n-color-embedded);
-}
-.add-menu-item[data-v-b2b17129]:hover {
-  background: var(--n-color-hover);
-}
-.add-menu-item[data-v-b2b17129]:focus-visible {
-  outline: 2px solid var(--n-color-target, #18a058);
-  outline-offset: 2px;
-}
-.menu-icon[data-v-b2b17129] {
-  width: 32px;
-  height: 32px;
+  top: -4px;
+  right: -4px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 6px;
-  color: white;
-}
-.menu-icon.approval-icon[data-v-b2b17129] {
-  background: linear-gradient(135deg, #1890ff, #722ed1);
-}
-.menu-icon.copy-icon[data-v-b2b17129] {
-  background: linear-gradient(135deg, #52c41a, #389e0d);
-}
-.menu-icon.condition-icon[data-v-b2b17129] {
-  background: linear-gradient(135deg, #fa8c16, #d48806);
-}
-.menu-text[data-v-b2b17129] {
-  font-size: 12px;
-  font-weight: 500;
-}
-@keyframes menuSlideUp-b2b17129 {
-from {
-    opacity: 0;
-    transform: translateY(10px);
-}
-to {
-    opacity: 1;
-    transform: translateY(0);
-}
-}
-/* 流程/数据校验结果显示样式 */
-.validation-success[data-v-b2b17129] {
-  text-align: center;
-  padding: 40px 20px;
-  color: #52c41a;
-}
-.validation-success .success-icon[data-v-b2b17129] {
-  margin-bottom: 16px;
-}
-.validation-success h3[data-v-b2b17129] {
-  margin: 0 0 8px 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-.validation-success p[data-v-b2b17129] {
-  margin: 0;
-  color: #666;
-  font-size: 14px;
-}
-.validation-errors .error-summary[data-v-b2b17129] {
-  text-align: center;
-  padding: 20px;
-  background: #fff2f0;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  border: 1px solid #ffccc7;
+  border: 2px solid white;
+  z-index: 2;
+  background: #faad14;
 }
-.validation-errors .error-summary .error-icon[data-v-b2b17129] {
-  margin-bottom: 12px;
+.status-indicator.approved[data-v-e6968a42] {
+  background: #52c41a;
 }
-.validation-errors .error-summary h3[data-v-b2b17129] {
-  margin: 0 0 8px 0;
-  color: #ff4d4f;
-  font-size: 16px;
-  font-weight: 600;
+.status-indicator.rejected[data-v-e6968a42] {
+  background: #ff4d4f;
 }
-.validation-errors .error-summary p[data-v-b2b17129] {
-  margin: 0;
-  color: var(--n-text-color-2);
-  font-size: 14px;
+.status-indicator.pending[data-v-e6968a42] {
+  background: #1890ff;
 }
-.validation-errors .error-list[data-v-b2b17129] {
+.delete-btn[data-v-e6968a42] {
+  appearance: none;
+  padding: 0;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #ff4d4f;
+  color: white;
   display: flex;
-  flex-direction: column;
-  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 100; /* 确保在所有元素之上 */
+  opacity: 0;
+  transform: scale(0.8);
+  transition: all 0.2s ease;
+  border: 2px solid white;
+  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
 }
-.validation-errors .error-item[data-v-b2b17129] {
+.delete-btn[data-v-e6968a42]:hover {
+  transform: scale(1);
+  background: #ff7875;
+  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
+}
+.delete-btn[data-v-e6968a42]:active {
+  transform: scale(0.95);
+}
+.approval-node:hover .delete-btn[data-v-e6968a42],
+.approval-node:focus-within .delete-btn[data-v-e6968a42] {
+  opacity: 1;
+  transform: scale(1);
+}
+.node-card[data-v-e6968a42] {
   background: white;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
-  padding: 16px;
-  transition: all 0.2s ease;
+  border-radius: 12px;
+  min-width: 240px;
+  max-width: 300px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 2px solid transparent;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  cursor: pointer;
 }
-.validation-errors .error-item[data-v-b2b17129]:hover {
-  border-color: #d9d9d9;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+.node-card[data-v-e6968a42]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  border-color: #1890ff;
 }
-.validation-errors .error-item .error-header[data-v-b2b17129] {
+.node-header[data-v-e6968a42] {
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);
+  border-bottom: 1px solid #91d5ff;
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 8px;
+  gap: 8px;
+  flex-wrap: wrap;
 }
-.validation-errors .error-item .error-header .error-number[data-v-b2b17129] {
+.node-icon[data-v-e6968a42] {
   width: 24px;
   height: 24px;
-  background: #ff4d4f;
-  color: white;
   border-radius: 50%;
+  background: #1890ff;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-.validation-errors .error-item .error-header .error-info[data-v-b2b17129] {
-  flex: 1;
-  min-width: 0;
 }
-.validation-errors .error-item .error-header .error-info .error-node[data-v-b2b17129] {
-  display: block;
+.node-title[data-v-e6968a42] {
+  font-weight: 600;
   color: var(--n-text-color-1);
   font-size: 14px;
-  margin-bottom: 2px;
-}
-.validation-errors .error-item .error-header .error-info .error-field[data-v-b2b17129] {
-  color: var(--n-text-color-3);
-  font-size: 12px;
+  flex: 1;
 }
-.validation-errors .error-item .error-header .error-type[data-v-b2b17129] {
-  padding: 2px 8px;
-  border-radius: 4px;
+.node-badge[data-v-e6968a42] {
+  background: #1890ff;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 10px;
   font-size: 11px;
-  font-weight: 500;
-}
-.validation-errors .error-item .error-header .error-type.required[data-v-b2b17129] {
-  background: #fff2f0;
-  color: #ff4d4f;
-  border: 1px solid #ffccc7;
-}
-.validation-errors .error-item .error-header .error-type.incomplete[data-v-b2b17129] {
-  background: #fff7e6;
-  color: #fa8c16;
-  border: 1px solid #ffd591;
-}
-.validation-errors .error-item .error-header .error-type.warning[data-v-b2b17129] {
-  background: #fffbe6;
-  color: #faad14;
-  border: 1px solid #ffe58f;
-}
-.validation-errors .error-item .error-message[data-v-b2b17129] {
-  color: var(--n-text-color-2);
-  font-size: 13px;
-  line-height: 1.5;
-  margin-bottom: 12px;
-  padding-left: 36px;
-}
-.validation-errors .error-item .error-actions[data-v-b2b17129] {
-  padding-left: 36px;
-}
-.validation-errors .validation-tips[data-v-b2b17129] {
-  margin-top: 24px;
-  padding: 16px;
-  background: #f6ffed;
-  border-radius: 8px;
-  border: 1px solid #b7eb8f;
-}
-.validation-errors .validation-tips h4[data-v-b2b17129] {
-  margin: 0 0 12px 0;
-  color: #389e0d;
-  font-size: 14px;
   font-weight: 600;
+  min-width: 16px;
+  text-align: center;
 }
-.validation-errors .validation-tips ul[data-v-b2b17129] {
-  margin: 0;
-  padding-left: 16px;
-  color: var(--n-text-color-2);
-  font-size: 13px;
-  line-height: 1.6;
-}
-.validation-errors .validation-tips ul li[data-v-b2b17129] {
-  margin-bottom: 6px;
+.approval-mode-badge[data-v-e6968a42] {
+  background: #f0f0f0;
+  color: #666;
+  padding: 2px 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 500;
 }
-.validation-errors .validation-tips ul li strong[data-v-b2b17129] {
-  color: var(--n-text-color-1);
+.node-content[data-v-e6968a42] {
+  padding: 16px;
 }
-.validation-footer[data-v-b2b17129] {
+.approvers-list[data-v-e6968a42] {
   display: flex;
+  flex-direction: column;
   gap: 8px;
-  justify-content: flex-end;
-}
-
-/* 边的样式（Vue Flow） */
-[data-v-b2b17129] .vue-flow__edge {
-  stroke: #1890ff;
-  stroke-width: 2px;
-}
-[data-v-b2b17129] .vue-flow__edge-path {
-  stroke: #1890ff;
-  stroke-width: 2px;
-}
-[data-v-b2b17129] .vue-flow__arrowhead {
-  fill: #1890ff;
-}
-[data-v-b2b17129] .vue-flow__edge.animated {
-  stroke-dasharray: 5;
-  animation: dashdraw-b2b17129 0.5s linear infinite;
-}
-@keyframes dashdraw-b2b17129 {
-to {
-    stroke-dashoffset: -10;
-}
-}
-/* 暗色主题适配 */
-[data-theme=dark] .approval-workflow-container[data-v-b2b17129] {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-}
-[data-theme=dark][data-v-b2b17129] {
-  /* 添加节点菜单文字 */
 }
-[data-theme=dark] .add-menu-item span[data-v-b2b17129] {
-  color: white;
-}
-[data-theme=dark] .validation-success[data-v-b2b17129] {
-  color: #52c41a;
-}
-[data-theme=dark] .validation-success h3[data-v-b2b17129] {
-  color: #52c41a;
-}
-[data-theme=dark] .validation-success p[data-v-b2b17129] {
-  color: var(--n-text-color-2);
+.approver-tag[data-v-e6968a42] {
+  background: linear-gradient(135deg, #e6f7ff, #f0f9ff);
+  border: 1px solid #91d5ff;
+  border-radius: 8px;
+  padding: 8px 12px;
+  transition: all 0.2s ease;
 }
-[data-theme=dark] .validation-errors .error-summary[data-v-b2b17129] {
-  background: rgba(255, 77, 79, 0.1);
-  border-color: rgba(255, 77, 79, 0.3);
+.approver-tag[data-v-e6968a42]:hover {
+  transform: translateX(2px);
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
 }
-[data-theme=dark] .validation-errors .error-summary h3[data-v-b2b17129] {
-  color: #ff4d4f;
+.approver-tag .approver-info[data-v-e6968a42] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-[data-theme=dark] .validation-errors .error-summary p[data-v-b2b17129] {
-  color: var(--n-text-color-2);
+.approver-tag .approver-info .approver-avatar[data-v-e6968a42] {
+  flex-shrink: 0;
 }
-[data-theme=dark] .validation-errors .error-item[data-v-b2b17129] {
-  background: var(--n-card-color);
-  border-color: var(--n-border-color);
+.approver-tag .approver-info .approver-details[data-v-e6968a42] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
 }
-[data-theme=dark] .validation-errors .error-item[data-v-b2b17129]:hover {
-  border-color: rgba(255, 255, 255, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+.approver-tag .approver-info .approver-details .approver-name[data-v-e6968a42] {
+  font-weight: 600;
+  color: #1890ff;
+  font-size: 13px;
 }
-[data-theme=dark] .validation-errors .error-item .error-info .error-node[data-v-b2b17129] {
-  color: var(--n-text-color-1);
+.approver-tag .approver-info .approver-details .approver-dept[data-v-e6968a42] {
+  font-size: 11px;
+  color: #666;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 1px 4px;
+  border-radius: 4px;
+  display: inline-block;
 }
-[data-theme=dark] .validation-errors .error-item .error-info .error-field[data-v-b2b17129] {
-  color: var(--n-text-color-3);
+.approver-tag .approver-info .approver-details .approver-role[data-v-e6968a42] {
+  font-size: 10px;
+  color: #999;
 }
-[data-theme=dark] .validation-errors .error-item .error-type.required[data-v-b2b17129] {
-  background: rgba(255, 77, 79, 0.15);
-  color: #ff7875;
-  border-color: rgba(255, 77, 79, 0.3);
+.more-count[data-v-e6968a42] {
+  background: #f0f0f0;
+  color: #8c8c8c;
+  padding: 6px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
 }
-[data-theme=dark] .validation-errors .error-item .error-type.incomplete[data-v-b2b17129] {
-  background: rgba(250, 140, 22, 0.15);
-  color: #ffa940;
-  border-color: rgba(250, 140, 22, 0.3);
+.placeholder[data-v-e6968a42] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #8c8c8c;
+  font-size: 12px;
+  padding: 20px 0;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  background: #fafafa;
 }
-[data-theme=dark] .validation-errors .error-item .error-type.warning[data-v-b2b17129] {
-  background: rgba(250, 173, 20, 0.15);
-  color: #ffc53d;
-  border-color: rgba(250, 173, 20, 0.3);
+.placeholder span[data-v-e6968a42] {
+  font-weight: 500;
 }
-[data-theme=dark] .validation-errors .error-item .error-message[data-v-b2b17129] {
-  color: var(--n-text-color-2);
+.add-node-btn[data-v-e6968a42] {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  position: absolute;
+  left: 50%;
+  bottom: -20px;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1890ff, #722ed1);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 10;
 }
-[data-theme=dark] .validation-errors .validation-tips[data-v-b2b17129] {
-  background: rgba(82, 196, 26, 0.1);
-  border-color: rgba(82, 196, 26, 0.3);
+.add-node-btn[data-v-e6968a42]:hover {
+  transform: translateX(-50%) scale(1.1);
+  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
 }
-[data-theme=dark] .validation-errors .validation-tips h4[data-v-b2b17129] {
-  color: #73d13d;
+.add-node-btn[data-v-e6968a42]:focus-visible {
+  outline: 2px solid #1890ff;
+  outline-offset: 2px;
 }
-[data-theme=dark] .validation-errors .validation-tips ul[data-v-b2b17129] {
-  color: var(--n-text-color-2);
+.delete-btn[data-v-e6968a42]:focus-visible {
+  opacity: 1;
+  outline: 2px solid #1890ff;
+  outline-offset: 2px;
 }
-[data-theme=dark] .validation-errors .validation-tips ul li strong[data-v-b2b17129] {
-  color: var(--n-text-color-1);
+/* unplugin-vue-components disabled */.start-node[data-v-6fb2df95] {
+  position: relative;
 }
-
-/* ─── 流程预览抽屉样式 ────────────────────────────────────── */
-.preview-stats[data-v-b2b17129] {
+.node-content[data-v-6fb2df95] {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 16px 20px;
+  border-radius: 12px;
   display: flex;
+  align-items: center;
+  justify-content: center;
   gap: 12px;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
+  min-width: 160px;
+  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
 }
-.preview-stats .stat-item[data-v-b2b17129] {
-  flex: 1;
-  min-width: 70px;
+.node-content[data-v-6fb2df95]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
+}
+.node-icon[data-v-6fb2df95] {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.node-info[data-v-6fb2df95] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   text-align: center;
-  padding: 12px 8px;
-  border-radius: 10px;
-  background: var(--n-action-color);
-  border: 1px solid var(--n-border-color);
-  transition: all 0.2s;
 }
-.preview-stats .stat-item .stat-value[data-v-b2b17129] {
-  display: block;
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--n-text-color-1);
+.node-text[data-v-6fb2df95] {
+  font-weight: 600;
+  font-size: 14px;
 }
-.preview-stats .stat-item .stat-label[data-v-b2b17129] {
-  display: block;
+.initiator-name[data-v-6fb2df95] {
   font-size: 12px;
-  color: var(--n-text-color-3);
-  margin-top: 4px;
+  opacity: 0.9;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 2px 8px;
+  border-radius: 8px;
 }
-.preview-stats .stat-item.approval .stat-value[data-v-b2b17129] {
-  color: #ff6b35;
+.placeholder-text[data-v-6fb2df95] {
+  font-size: 11px;
+  opacity: 0.7;
+  font-style: italic;
 }
-.preview-stats .stat-item.copy .stat-value[data-v-b2b17129] {
-  color: #1890ff;
+.add-node-btn[data-v-6fb2df95] {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  position: absolute;
+  left: 50%;
+  bottom: -20px;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #1890ff, #722ed1);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 16px;
+  font-weight: bold;
+  z-index: 10;
 }
-.preview-stats .stat-item.condition .stat-value[data-v-b2b17129] {
-  color: #faad14;
+.add-node-btn[data-v-6fb2df95]:hover {
+  transform: translateX(-50%) scale(1.1);
+  box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
 }
-.preview-stats .stat-item.edge .stat-value[data-v-b2b17129] {
-  color: #52c41a;
+.add-node-btn[data-v-6fb2df95]:focus-visible {
+  outline: 2px solid #1890ff;
+  outline-offset: 2px;
 }
-.preview-timeline[data-v-b2b17129] {
+/* unplugin-vue-components disabled */
+/* layer: default */
+.absolute[data-v-5ede8782]{position:absolute;}
+.relative[data-v-5ede8782]{position:relative;}
+.hidden[data-v-5ede8782]{display:none;}
+.flex[data-v-5ede8782]{display:flex;}
+.transform[data-v-5ede8782]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.border[data-v-5ede8782]{border-width:1px;}
+.outline[data-v-5ede8782]{outline-style:solid;}
+.transition[data-v-5ede8782]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.ease[data-v-5ede8782]{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
+
+/* unplugin-vue-components disabled */.condition-node[data-v-5ede8782] {
   position: relative;
-  padding: 0 0 0 8px;
 }
-.preview-timeline .preview-step[data-v-b2b17129] {
-  display: flex;
-  gap: 16px;
-  position: relative;
-  padding-bottom: 8px;
+.status-indicator[data-v-5ede8782] {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid white;
+  z-index: 2;
+  background: #faad14;
 }
-.preview-timeline .preview-step:last-child .step-line[data-v-b2b17129] {
-  display: none;
+.status-indicator.completed[data-v-5ede8782] {
+  background: #52c41a;
 }
-.preview-timeline .step-connector[data-v-b2b17129] {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  flex-shrink: 0;
-  width: 32px;
+.status-indicator.active[data-v-5ede8782] {
+  background: #fa8c16;
 }
-.preview-timeline .step-connector .step-dot[data-v-b2b17129] {
-  width: 32px;
-  height: 32px;
+.delete-btn[data-v-5ede8782] {
+  appearance: none;
+  padding: 0;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  width: 24px;
+  height: 24px;
   border-radius: 50%;
+  background: #ff4d4f;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
-  flex-shrink: 0;
-  z-index: 1;
-  background: #999;
-}
-.preview-timeline .step-connector .step-line[data-v-b2b17129] {
-  width: 2px;
-  flex: 1;
-  min-height: 20px;
-  background: var(--n-border-color);
-}
-.preview-timeline[data-v-b2b17129] {
-  /* 不同节点类型的圆点颜色 */
+  cursor: pointer;
+  z-index: 100;
+  opacity: 0;
+  transform: scale(0.8);
+  transition: all 0.2s ease;
+  border: 2px solid white;
+  box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
 }
-.preview-timeline .start .step-dot[data-v-b2b17129] {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+.delete-btn[data-v-5ede8782]:hover {
+  transform: scale(1);
+  background: #ff7875;
+  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.5);
 }
-.preview-timeline .approval .step-dot[data-v-b2b17129] {
-  background: linear-gradient(135deg, #ff6b35, #ff4500);
+.delete-btn[data-v-5ede8782]:active {
+  transform: scale(0.95);
 }
-.preview-timeline .copy .step-dot[data-v-b2b17129] {
-  background: linear-gradient(135deg, #1890ff, #096dd9);
+.condition-node:hover .delete-btn[data-v-5ede8782],
+.condition-node:focus-within .delete-btn[data-v-5ede8782] {
+  opacity: 1;
+  transform: scale(1);
 }
-.preview-timeline .condition .step-dot[data-v-b2b17129] {
-  background: linear-gradient(135deg, #faad14, #d48806);
+.node-card[data-v-5ede8782] {
+  background: white;
+  border-radius: 12px;
+  min-width: 220px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  border: 2px solid transparent;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  cursor: pointer;
 }
-.preview-timeline .step-content[data-v-b2b17129] {
-  flex: 1;
-  padding-bottom: 20px;
-  min-width: 0;
+.node-card[data-v-5ede8782]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+  border-color: #fa8c16;
 }
-.preview-timeline .step-content .step-header[data-v-b2b17129] {
+.node-header[data-v-5ede8782] {
+  padding: 12px 16px;
+  background: #fff7e6;
+  border-bottom: 1px solid #ffe7ba;
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 6px;
 }
-.preview-timeline .step-content .step-header .step-order[data-v-b2b17129] {
+.node-icon[data-v-5ede8782] {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #fa8c16;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 12px;
-  color: var(--n-text-color-3);
-  font-weight: 500;
 }
-.preview-timeline .step-content .step-header .step-type-badge[data-v-b2b17129] {
-  font-size: 11px;
-  padding: 1px 8px;
-  border-radius: 10px;
-  background: var(--n-action-color);
-  color: var(--n-text-color-2);
-  border: 1px solid var(--n-border-color);
+.node-title[data-v-5ede8782] {
+  font-weight: 600;
+  color: #262626;
+  font-size: 14px;
+  flex: 1;
 }
-.preview-timeline .step-content .step-title[data-v-b2b17129] {
-  font-size: 15px;
+.node-badge[data-v-5ede8782] {
+  background: #fa8c16;
+  color: white;
+  padding: 2px 6px;
+  border-radius: 10px;
+  font-size: 11px;
   font-weight: 600;
-  color: var(--n-text-color-1);
-  margin-bottom: 8px;
+  min-width: 16px;
+  text-align: center;
 }
-.preview-timeline .step-content .step-details[data-v-b2b17129] {
-  background: var(--n-action-color);
-  border-radius: 8px;
-  padding: 10px 14px;
-  border: 1px solid var(--n-border-color);
+.node-content[data-v-5ede8782] {
+  padding: 16px;
 }
-.preview-timeline .step-content .step-details .step-detail-item[data-v-b2b17129] {
-  font-size: 13px;
-  color: var(--n-text-color-2);
-  line-height: 1.8;
-  word-break: break-all;
+.conditions-list[data-v-5ede8782] {
   display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-.preview-timeline .step-content .step-details .step-detail-item[data-v-b2b17129]:not(:last-child) {
-  border-bottom: 1px dashed var(--n-border-color);
-  padding-bottom: 8px;
-  margin-bottom: 8px;
-}
-.preview-timeline .step-content .step-details .step-detail-item.is-warning[data-v-b2b17129] {
-  color: #faad14;
-}
-.preview-timeline .step-content .step-details .step-detail-item .detail-label[data-v-b2b17129] {
-  color: var(--n-text-color-3);
-  font-size: 12px;
-  flex-shrink: 0;
-  line-height: 24px;
+  flex-direction: column;
+  gap: 6px;
 }
-.preview-timeline .step-content .step-details .step-detail-item .mode-badge[data-v-b2b17129] {
-  display: inline-block;
+.condition-tag[data-v-5ede8782] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: #fff7e6;
+  color: #fa8c16;
+  padding: 6px 10px;
+  border-radius: 8px;
   font-size: 12px;
-  font-weight: 600;
-  padding: 2px 10px;
-  border-radius: 12px;
-  line-height: 20px;
-}
-.preview-timeline .step-content .step-details .step-detail-item .mode-badge.any[data-v-b2b17129] {
-  background: rgba(24, 144, 255, 0.1);
-  color: #1890ff;
-  border: 1px solid rgba(24, 144, 255, 0.25);
-}
-.preview-timeline .step-content .step-details .step-detail-item .mode-badge.all[data-v-b2b17129] {
-  background: rgba(255, 77, 79, 0.1);
-  color: #ff4d4f;
-  border: 1px solid rgba(255, 77, 79, 0.25);
+  border: 1px solid #ffd591;
+  transition: all 0.2s ease;
 }
-.preview-timeline .step-content .step-details .step-detail-item .mode-badge.sequence[data-v-b2b17129] {
-  background: rgba(114, 46, 209, 0.1);
-  color: #722ed1;
-  border: 1px solid rgba(114, 46, 209, 0.25);
+.condition-tag[data-v-5ede8782]:hover {
+  background: #ffe7ba;
+  transform: translateX(2px);
 }
-.preview-timeline .step-content .step-details .step-detail-item .user-tag[data-v-b2b17129] {
-  margin: 1px 2px;
+.condition-icon[data-v-5ede8782] {
+  font-weight: bold;
+  color: #d48806;
 }
-.preview-timeline .step-content .step-details .step-detail-item .warning-text[data-v-b2b17129] {
-  color: #faad14;
+.more-count[data-v-5ede8782] {
+  background: #f0f0f0;
+  color: #8c8c8c;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
   font-weight: 500;
+  text-align: center;
+  margin-top: 4px;
 }
-.preview-empty[data-v-b2b17129] {
+.placeholder[data-v-5ede8782] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #8c8c8c;
+  font-size: 12px;
+  padding: 8px 0;
+}
+.add-node-btn[data-v-5ede8782] {
+  appearance: none;
+  border: 0;
+  padding: 0;
+  position: absolute;
+  left: 50%;
+  bottom: -20px;
+  transform: translateX(-50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #fa8c16, #d48806);
+  color: white;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px 0;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(250, 140, 22, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 16px;
+  font-weight: bold;
+  z-index: 10;
 }
-.preview-empty p[data-v-b2b17129] {
-  margin-top: 12px;
-  color: var(--n-text-color-3);
-  font-size: 14px;
+.add-node-btn[data-v-5ede8782]:hover {
+  transform: translateX(-50%) scale(1.1);
+  box-shadow: 0 6px 20px rgba(250, 140, 22, 0.4);
 }
-.preview-footer[data-v-b2b17129] {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
+.add-node-btn[data-v-5ede8782]:focus-visible {
+  outline: 2px solid #fa8c16;
+  outline-offset: 2px;
+}
+.delete-btn[data-v-5ede8782]:focus-visible {
+  opacity: 1;
+  outline: 2px solid #fa8c16;
+  outline-offset: 2px;
 }
 /* unplugin-vue-components disabled */
 /* layer: default */
-.start-1[data-v-b2b17129]{inset-inline-start:0.25rem;}
-.table[data-v-b2b17129]{display:table;}
-.px[data-v-b2b17129]{padding-left:1rem;padding-right:1rem;}
-.filter[data-v-b2b17129]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
-
+.visible[data-v-3d6434f4]{visibility:visible;}
+.start-1[data-v-3d6434f4]{inset-inline-start:0.25rem;}
+.mb-2[data-v-3d6434f4]{margin-bottom:0.5rem;}
+.mb-3[data-v-3d6434f4]{margin-bottom:0.75rem;}
+.mb-4[data-v-3d6434f4]{margin-bottom:1rem;}
+.ml-auto[data-v-3d6434f4]{margin-left:auto;}
+.mt-4[data-v-3d6434f4]{margin-top:1rem;}
+.block[data-v-3d6434f4]{display:block;}
+.max-h-50[data-v-3d6434f4]{max-height:12.5rem;}
+.max-h-60vh[data-v-3d6434f4]{max-height:60vh;}
+.min-h-10[data-v-3d6434f4]{min-height:2.5rem;}
+.w-full[data-v-3d6434f4]{width:100%;}
+.flex[data-v-3d6434f4]{display:flex;}
+.flex-shrink-0[data-v-3d6434f4]{flex-shrink:0;}
+.flex-col[data-v-3d6434f4]{flex-direction:column;}
+.flex-wrap[data-v-3d6434f4]{flex-wrap:wrap;}
+.flex-nowrap[data-v-3d6434f4]{flex-wrap:nowrap;}
+.table[data-v-3d6434f4]{display:table;}
+.items-center[data-v-3d6434f4]{align-items:center;}
+.gap-1[data-v-3d6434f4]{gap:0.25rem;}
+.gap-2[data-v-3d6434f4]{gap:0.5rem;}
+.gap-3[data-v-3d6434f4]{gap:0.75rem;}
+.space-y-3[data-v-3d6434f4]>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
+.overflow-y-auto[data-v-3d6434f4]{overflow-y:auto;}
+.border[data-v-3d6434f4]{border-width:1px;}
+.border-gray-200[data-v-3d6434f4]{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
+.hover\:border-gray-300[data-v-3d6434f4]:hover{--un-border-opacity:1;border-color:rgb(209 213 219 / var(--un-border-opacity));}
+.rounded[data-v-3d6434f4]{border-radius:0.25rem;}
+.rounded-lg[data-v-3d6434f4]{border-radius:0.5rem;}
+.p-2[data-v-3d6434f4]{padding:0.5rem;}
+.p-3[data-v-3d6434f4]{padding:0.75rem;}
+.p-4[data-v-3d6434f4]{padding:1rem;}
+.px-1\.5[data-v-3d6434f4]{padding-left:0.375rem;padding-right:0.375rem;}
+.py-0\.5[data-v-3d6434f4]{padding-top:0.125rem;padding-bottom:0.125rem;}
+.text-base[data-v-3d6434f4]{font-size:1rem;line-height:1.5rem;}
+.text-sm[data-v-3d6434f4]{font-size:0.875rem;line-height:1.25rem;}
+.text-xs[data-v-3d6434f4]{font-size:0.75rem;line-height:1rem;}
+.font-medium[data-v-3d6434f4]{font-weight:500;}
+.font-semibold[data-v-3d6434f4]{font-weight:600;}
+.filter[data-v-3d6434f4]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
+.transition-colors[data-v-3d6434f4]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}