flow-topology-vue3/dist/flow-topology-vue3.css

flow-topology-vue3是一个用于创建流拓扑图的Vue 3组件库。它提供了一组可重用的组件和实用程序，以帮助您构建交互式的、具有视觉吸引力的流程图、流程图或表示数据流的任何其他类型的图

.topo-nodes-container[data-v-bc705d0a]{position:relative;width:var(--canvas-width, 40000px);height:var(--canvas-height, 40000px);-webkit-user-select:none;user-select:none;z-index:2}.topo-nodes-container[data-v-bc705d0a]:active{cursor:grabbing}.topo-node[data-v-bc705d0a]{position:absolute;background-color:#fff;border-radius:8px;padding:16px;z-index:2;cursor:grab;border:1px solid #dcdfe6}.topo-node[data-v-bc705d0a]:not(.disabled-drag):active{cursor:grabbing;box-shadow:0 8px 20px #0000001f}.topo-node.selected[data-v-bc705d0a]{border-color:var(--active-color)}.topo-node.hovered[data-v-bc705d0a]{background-color:#fffbe6}.topo-node.disabled-drag[data-v-bc705d0a]{cursor:default}.topo-node-header[data-v-bc705d0a]{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.topo-node-content[data-v-bc705d0a]{margin-bottom:16px;font-size:14px;color:#666;line-height:1.5}.topo-branches[data-v-bc705d0a]{display:flex;flex-wrap:wrap;gap:10px}.topo-branch[data-v-bc705d0a]{padding:6px 12px;background-color:#f0f8ff;border-radius:4px;font-size:12px;color:var(--active-color);cursor:pointer;transition:background-color .2s}.topo-branch[data-v-bc705d0a]:hover{background-color:#e6f2ff}.topo-branch.free[data-v-bc705d0a]{cursor:crosshair}.topo-connection-layer[data-v-bc705d0a]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;cursor:crosshair}.topo-connection-layer path[data-v-bc705d0a]{pointer-events:all}.highlighted-path[data-v-bc705d0a]{stroke:var(--active-color);stroke-width:3;cursor:crosshair}.topo-tools[data-v-6ffeba4c]{position:absolute;display:flex;align-items:center;gap:8px;z-index:3}.topo-tools.top[data-v-6ffeba4c]{top:var(--offset);left:50%;transform:translate(-50%)}.topo-tools.top-start[data-v-6ffeba4c]{top:var(--offset);left:var(--offset)}.topo-tools.top-end[data-v-6ffeba4c]{top:var(--offset);right:var(--offset)}.topo-tools.bottom[data-v-6ffeba4c]{bottom:var(--offset);left:50%;transform:translate(-50%)}.topo-tools.bottom-start[data-v-6ffeba4c]{bottom:var(--offset);left:var(--offset)}.topo-tools.bottom-end[data-v-6ffeba4c]{bottom:var(--offset);right:var(--offset)}.topo-tools.left[data-v-6ffeba4c]{left:var(--offset);top:50%;transform:translateY(-50%);flex-direction:column}.topo-tools.right[data-v-6ffeba4c]{top:50%;right:var(--offset);transform:translateY(-50%);flex-direction:column}.topo-tools button[data-v-6ffeba4c]{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s}.topo-tools button[data-v-6ffeba4c]:disabled{cursor:not-allowed;opacity:.5}.topo-tools button[data-v-6ffeba4c]:hover{background:#f2f2f2}.topo-tools button svg[data-v-6ffeba4c]{fill:#333}.topo-tools.right .zoom[data-v-6ffeba4c],.topo-tools.left .zoom[data-v-6ffeba4c]{flex-direction:column}.zoom[data-v-6ffeba4c]{display:flex;align-items:center;gap:8px}.zoom button[data-v-6ffeba4c]{width:22px;height:22px;background-color:#0000005c;border-radius:50%;color:#fff}.zoom button[data-v-6ffeba4c]:hover{background-color:#00000080}.zoom button svg[data-v-6ffeba4c]{fill:#fff;transform:scale(1.5)}.zoom .scale[data-v-6ffeba4c]{font-size:14px;color:#7f7f7f}.topo-container[data-v-0675efef]{position:relative;width:var(--container-width, 100%);height:var(--container-height, 100vh);margin:0 auto;overflow:hidden}.topo-container__inner[data-v-0675efef]{position:relative;width:100%;height:100%;overflow:auto;background-color:var(--container-background-color);scroll-behavior:auto}.topo__grid-pattern[data-v-0675efef]{position:absolute;top:0;left:0;width:var(--canvas-width, 40000px);height:var(--canvas-height, 40000px);background-image:var( --color, linear-gradient(#e5e5e5 1px, transparent 1px), linear-gradient(90deg, #e5e5e5 1px, transparent 1px) );background-size:var(--gap, 20px 20px);pointer-events:none;z-index:1}.topo-container__inner[data-v-0675efef]::-webkit-scrollbar{height:8px;width:8px}.topo-container__inner[data-v-0675efef]::-webkit-scrollbar-track{background:#fff;border-radius:10px}.topo-container__inner[data-v-0675efef]::-webkit-scrollbar-thumb{background:#90939933;border-radius:10px}.topo-container__inner[data-v-0675efef]::-webkit-scrollbar-thumb:hover{background:#90939966}