ingenious-flow-designer/packages/flow-designer/src/assets/styles/flow.css

[演示地址](http://antd-vben5-pro.madong.tech/)

/* 流程设计器主容器 */
.lf-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 左侧面板 */
.lf-side-panel-pro {
  z-index: 10;
  background-color: #f5f7fa;
  border-right: 1px solid #e4e7ed;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}

.lf-side-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.lf-side-panel-node-item {
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 8px;
  padding: 12px;
  margin: 4px 8px;
  background: #ffffff;
  border: 1px solid #e4e7ed;
}

.lf-side-panel-node-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px) !important;
  border-color: #3068EC;
}

/* 拖拽面板优化样式 */
.lf-side-panel-node-item .lf-node-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.lf-side-panel-node-item:hover .lf-node-icon {
  transform: scale(1.1);
}

.lf-side-panel-node-item .lf-node-icon svg {
  width: 24px;
  height: 24px;
}

.lf-side-panel-node-label {
  font-size: 12px;
  color: #606266;
  text-align: center;
  font-weight: 500;
}

/* 控制栏 */
.lf-control-pro {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  padding: 8px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.lf-control-pro .lf-control-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.lf-control-pro .lf-control-btn:hover {
  background-color: #ecf5ff;
  color: #409eff;
}

/* 缩略图 */
.lf-minimap-pro {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 背景 */
.lf-background-pro {
  background-color: #fafafa;
}

/* 节点样式 */
.lf-node {
  transition: all 0.3s ease;
}

.lf-node:hover {
  filter: brightness(1.05);
}

/* 连线样式 */
.lf-edge {
  transition: all 0.3s ease;
}

/* 主题样式 */
.lf-theme-dark {
  background-color: #1f2329;
  color: #ffffff;
}

.lf-theme-dark .lf-side-panel-pro {
  background-color: #2c3138;
  border-right: 1px solid #444c56;
}

.lf-theme-dark .lf-side-panel-title {
  color: #e6e6e6;
  border-bottom: 1px solid #444c56;
}

.lf-theme-dark .lf-side-panel-node-item {
  background-color: #374148;
  border: 1px solid #444c56;
}

.lf-theme-dark .lf-side-panel-node-label {
  color: #e6e6e6;
}

.lf-theme-dark .lf-control-pro {
  background-color: #2c3138;
  border-bottom: 1px solid #444c56;
}

.lf-theme-dark .lf-control-pro .lf-control-btn:hover {
  background-color: #374148;
}

.lf-theme-dark .lf-minimap-pro {
  border: 1px solid #444c56;
}

.lf-theme-dark .lf-background-pro {
  background-color: #1f2329;
}

/* 自定义图标 */
.lf-side-panel-node-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf-side-panel-node-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.node-start::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.node-end::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.node-task::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm-2 14l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>');
}

.node-decision::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

.node-custom::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2v-4H8v-2h4V7h2v4h4v2h-4v4z"/></svg>');
}

/* 控制按钮图标 */
.lf-control-save::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"/></svg>');
}

.lf-control-clear::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.lf-control-zoom-in::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
}

.lf-control-zoom-out::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 17h2v-7h-2v7zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>');
}

.lf-control-zoom-reset::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0 7c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm6 3c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v1h6v-1z"/></svg>');
}

.lf-control-undo::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/></svg>');
}

.lf-control-redo::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/></svg>');
}

.lf-control-see::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.lf-control-import::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"/></svg>');
}

.lf-control-highlight::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 14l3 3v5h6v-5l3-3V9H6v5zm2-3h8v2.17l-3 3V19h-2v-2.83l-3-3V11zm3-9h2v3h-2V2zM3.26 20.21l1.45-.51.53-.97-1.45-.52-1.46-.52-.52.97-1.45.52.52.97 1.38-.44z"/></svg>');
}

.lf-control-minimap::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM15 19l-6-2.11V5l6 2.11V19z"/></svg>');
}

.lf-control-fit::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3v6zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6h6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6v-6z"/></svg>');
}

.lf-control-download::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
}

/* 节点拖拽面板图标容器 */
.dnd-panel .lf-node-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin: 0 auto 8px;
  transition: all 0.3s ease;
}

.dnd-panel .lf-pattern-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  margin: 8px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  cursor: move;
  transition: all 0.3s ease;
  min-width: 80px;
}

.dnd-panel .lf-pattern-item:hover {
  border-color: #3068EC;
  box-shadow: 0 4px 12px rgba(48, 104, 236, 0.2);
  transform: translateY(-4px);
}

.dnd-panel .lf-pattern-item:hover .lf-node-icon {
  transform: scale(1.15);
}

.dnd-panel .lf-pattern-text {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  text-align: center;
  margin-top: 4px;
}

/* 节点类型图标背景色 */
.dnd-start .lf-node-icon {
  background: linear-gradient(135deg, #67c23a20 0%, #67c23a10 100%);
}

.dnd-end .lf-node-icon {
  background: linear-gradient(135deg, #f56c6c20 0%, #f56c6c10 100%);
}

.dnd-task .lf-node-icon {
  background: linear-gradient(135deg, #3068EC20 0%, #3068EC10 100%);
}

.dnd-decision .lf-node-icon {
  background: linear-gradient(135deg, #e6a23c20 0%, #e6a23c10 100%);
}

.dnd-fork .lf-node-icon {
  background: linear-gradient(135deg, #3068EC20 0%, #3068EC10 100%);
}

.dnd-join .lf-node-icon {
  background: linear-gradient(135deg, #3068EC20 0%, #3068EC10 100%);
}

.dnd-subprocess .lf-node-icon {
  background: linear-gradient(135deg, #90939920 0%, #90939910 100%);
}

.dnd-custom .lf-node-icon {
  background: linear-gradient(135deg, #90939920 0%, #90939910 100%);
}