{"ast":null,"code":"import _regeneratorRuntime from \"E:/dev/MyProject/workflow/node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js\";\nimport _asyncToGenerator from \"E:/dev/MyProject/workflow/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\";\nimport \"core-js/modules/es.math.sign.js\";\nimport \"core-js/modules/es.parse-int.js\";\nimport \"core-js/modules/web.timers.js\";\nimport { fetchUserInfo } from \"@/api/user\";\nexport default {\n  name: 'SalesOrderProcess',\n  data: function data() {\n    return {\n      dialogVisible: false,\n      currentNode: null,\n      scale: 1,\n      panEnabled: false,\n      lastPosX: 0,\n      lastPosY: 0,\n      showWheelTip: true,\n      userName: '',\n      nodes: [{\n        id: 'start',\n        type: 'start',\n        label: '开始',\n        x: 400,\n        y: 50,\n        url: '/sales/start'\n      }, {\n        id: 'inquiry',\n        type: 'process',\n        label: '客户询价',\n        x: 400,\n        y: 150,\n        url: '/sales/inquiry'\n      }, {\n        id: 'need-analysis',\n        type: 'process',\n        label: '需求分析',\n        x: 400,\n        y: 250,\n        url: '/sales/analysis'\n      }, {\n        id: 'solution',\n        type: 'process',\n        label: '方案制定',\n        x: 400,\n        y: 350,\n        url: '/sales/solution'\n      }, {\n        id: 'quotation',\n        type: 'process',\n        label: '报价单生成',\n        x: 400,\n        y: 450,\n        url: '/sales/quotation'\n      }, {\n        id: 'negotiation',\n        type: 'process',\n        label: '商务谈判',\n        x: 400,\n        y: 550,\n        url: '/sales/negotiation'\n      }, {\n        id: 'decision',\n        type: 'condition',\n        label: '客户决策',\n        x: 400,\n        y: 650,\n        url: '/sales/decision'\n      }, {\n        id: 'contract',\n        type: 'process',\n        label: '签订合同',\n        x: 600,\n        y: 650,\n        url: '/sales/contract'\n      }, {\n        id: 'reject-reason',\n        type: 'process',\n        label: '原因分析',\n        x: 200,\n        y: 650,\n        url: '/sales/reject'\n      }, {\n        id: 'followup',\n        type: 'process',\n        label: '持续跟进',\n        x: 200,\n        y: 750,\n        url: '/sales/followup'\n      }, {\n        id: 'production',\n        type: 'process',\n        label: '生产准备',\n        x: 600,\n        y: 750,\n        url: '/sales/production'\n      }, {\n        id: 'end-success',\n        type: 'end',\n        label: '流程完成',\n        x: 400,\n        y: 850,\n        url: '/sales/completed'\n      }]\n    };\n  },\n  mounted: function mounted() {\n    var _this = this;\n    this.getUserData();\n    // 5秒后隐藏滚轮提示\n    setTimeout(function () {\n      _this.showWheelTip = false;\n    }, 5000);\n  },\n  methods: {\n    handleNodeClick: function handleNodeClick(node) {\n      this.currentNode = node;\n      this.dialogVisible = true;\n    },\n    getNodeTypeName: function getNodeTypeName(type) {\n      var types = {\n        'start': '开始节点',\n        'end': '结束节点',\n        'process': '流程节点',\n        'condition': '条件节点'\n      };\n      return types[type] || type;\n    },\n    zoomIn: function zoomIn() {\n      if (this.scale < 2) {\n        this.scale += 0.1;\n      }\n    },\n    zoomOut: function zoomOut() {\n      if (this.scale > 0.5) {\n        this.scale -= 0.1;\n      }\n    },\n    resetZoom: function resetZoom() {\n      this.scale = 1;\n      // 重置流程图位置\n      if (this.$refs.processFlow) {\n        this.$refs.processFlow.style.top = '0px';\n        this.$refs.processFlow.style.left = '0px';\n      }\n    },\n    handleWheel: function handleWheel(e) {\n      // 阻止默认滚动行为\n      e.preventDefault();\n\n      // 确定滚动方向（向上滚动为放大，向下滚动为缩小）\n      var delta = Math.sign(e.deltaY) * -0.1;\n\n      // 计算新的缩放值\n      var newScale = Math.max(0.5, Math.min(2, this.scale + delta));\n\n      // 如果缩放值在允许范围内，就应用它\n      if (newScale !== this.scale) {\n        // 计算鼠标位置相对于流程图容器的位置\n        var flowEl = this.$refs.processFlow;\n        var rect = flowEl.getBoundingClientRect();\n\n        // 计算鼠标在流程图上的坐标（考虑当前偏移和缩放）\n        var mouseX = (e.clientX - rect.left) / this.scale;\n        var mouseY = (e.clientY - rect.top) / this.scale;\n\n        // 获取当前偏移\n        var currentLeft = parseInt(flowEl.style.left || '0');\n        var currentTop = parseInt(flowEl.style.top || '0');\n\n        // 计算新的偏移，保持鼠标所指位置不变\n        var scaleChange = newScale - this.scale;\n        var newLeft = currentLeft - mouseX * scaleChange;\n        var newTop = currentTop - mouseY * scaleChange;\n\n        // 应用新的缩放和偏移\n        this.scale = newScale;\n        flowEl.style.left = \"\".concat(newLeft, \"px\");\n        flowEl.style.top = \"\".concat(newTop, \"px\");\n      }\n    },\n    startPanning: function startPanning(e) {\n      // 如果是点击流程节点，则不启用平移\n      if (e.target.closest('.flow-node')) {\n        return;\n      }\n      this.panEnabled = true;\n      this.lastPosX = e.clientX;\n      this.lastPosY = e.clientY;\n      document.body.style.cursor = 'grabbing';\n    },\n    pan: function pan(e) {\n      if (!this.panEnabled) return;\n      var flowEl = this.$refs.processFlow;\n      if (!flowEl) return;\n      var dx = e.clientX - this.lastPosX;\n      var dy = e.clientY - this.lastPosY;\n      var currentTop = parseInt(flowEl.style.top || '0');\n      var currentLeft = parseInt(flowEl.style.left || '0');\n      flowEl.style.top = currentTop + dy + 'px';\n      flowEl.style.left = currentLeft + dx + 'px';\n      this.lastPosX = e.clientX;\n      this.lastPosY = e.clientY;\n    },\n    stopPanning: function stopPanning() {\n      this.panEnabled = false;\n      document.body.style.cursor = 'default';\n    },\n    handleEdit: function handleEdit() {\n      this.$message({\n        message: \"\\u7F16\\u8F91\\u8282\\u70B9: \".concat(this.currentNode.label),\n        type: 'info'\n      });\n      this.dialogVisible = false;\n    },\n    handleViewDetails: function handleViewDetails() {\n      this.$message({\n        message: \"\\u67E5\\u770B\\u8282\\u70B9\\u8BE6\\u60C5: \".concat(this.currentNode.label),\n        type: 'success'\n      });\n      this.dialogVisible = false;\n    },\n    getUserData: function getUserData() {\n      var _this2 = this;\n      return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n        var userId, userInfo;\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              _this2.loading = true;\n              _context.prev = 1;\n              // 假设userId来自某个输入或路由参数\n              userId = _this2.$route.query.userId; // 调用公共方法\n              _context.next = 5;\n              return fetchUserInfo(userId);\n            case 5:\n              userInfo = _context.sent;\n              debugger;\n              // 使用返回的数据\n              _this2.userName = userInfo.username;\n              _this2.loading = false;\n              _context.next = 15;\n              break;\n            case 11:\n              _context.prev = 11;\n              _context.t0 = _context[\"catch\"](1);\n              // 错误处理\n              _this2.error = _context.t0.message;\n              _this2.loading = false;\n            case 15:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, null, [[1, 11]]);\n      }))();\n    }\n  }\n};","map":{"version":3,"names":["fetchUserInfo","name","data","dialogVisible","currentNode","scale","panEnabled","lastPosX","lastPosY","showWheelTip","userName","nodes","id","type","label","x","y","url","mounted","_this","getUserData","setTimeout","methods","handleNodeClick","node","getNodeTypeName","types","zoomIn","zoomOut","resetZoom","$refs","processFlow","style","top","left","handleWheel","e","preventDefault","delta","Math","sign","deltaY","newScale","max","min","flowEl","rect","getBoundingClientRect","mouseX","clientX","mouseY","clientY","currentLeft","parseInt","currentTop","scaleChange","newLeft","newTop","concat","startPanning","target","closest","document","body","cursor","pan","dx","dy","stopPanning","handleEdit","$message","message","handleViewDetails","_this2","_asyncToGenerator","_regeneratorRuntime","mark","_callee","userId","userInfo","wrap","_callee$","_context","prev","next","loading","$route","query","sent","username","t0","error","stop"],"sources":["src/views/SalesOrderProcess.vue"],"sourcesContent":["<template>\n  <div class=\"process-container\">\n    <el-card class=\"process-intro\">\n      <div class=\"intro-header\">\n        <h2>销售订单业务流程</h2>\n        <el-tag size=\"medium\" type=\"success\">{{ this.$route.query.userName }}</el-tag>\n      </div>\n      <div class=\"intro-content\">\n        <div class=\"intro-description\">\n          <p>本流程详细描述了从客户询价到签订合同的销售订单全过程，提高销售转化率和客户满意度。</p>\n        </div>\n        <div class=\"intro-stats\">\n          <div class=\"stat-item\">\n            <div class=\"stat-value\">12</div>\n            <div class=\"stat-label\">总步骤</div>\n          </div>\n          <div class=\"stat-item\">\n            <div class=\"stat-value\">8</div>\n            <div class=\"stat-label\">已完成</div>\n          </div>\n          <div class=\"stat-item\">\n            <div class=\"stat-value\">7天</div>\n            <div class=\"stat-label\">平均耗时</div>\n          </div>\n        </div>\n      </div>\n    </el-card>\n\n    <div class=\"process-flow-container\">\n      <div class=\"zoom-controls\">\n        <div class=\"zoom-btn\" @click=\"zoomIn\" title=\"放大\">\n          <i class=\"el-icon-zoom-in\"></i>\n        </div>\n        <div class=\"zoom-btn\" @click=\"zoomOut\" title=\"缩小\">\n          <i class=\"el-icon-zoom-out\"></i>\n        </div>\n        <div class=\"zoom-btn\" @click=\"resetZoom\" title=\"重置视图\">\n          <i class=\"el-icon-refresh\"></i>\n        </div>\n      </div>\n      \n      <div class=\"zoom-tip\" v-if=\"scale !== 1\">\n        <i class=\"el-icon-info-circle\"></i>\n        <span>当前缩放: {{ Math.round(scale * 100) }}%</span>\n      </div>\n      \n      <div class=\"wheel-tip\" v-if=\"showWheelTip\">\n        <i class=\"el-icon-mouse\"></i>\n        <span>使用鼠标滚轮缩放</span>\n      </div>\n      \n      <div class=\"process-flow sales-process\" \n           ref=\"processFlow\"\n           :style=\"{ transform: `scale(${scale})` }\"\n           @mousedown=\"startPanning\"\n           @mousemove=\"pan\"\n           @mouseup=\"stopPanning\"\n           @mouseleave=\"stopPanning\"\n           @wheel.prevent=\"handleWheel\">\n        <!-- 流程图节点 -->\n        <div \n          v-for=\"node in nodes\" \n          :key=\"node.id\"\n          class=\"flow-node\"\n          :class=\"[node.type]\"\n          :style=\"{\n            left: `${node.x}px`,\n            top: `${node.y}px`\n          }\"\n          @click=\"handleNodeClick(node)\">\n          <span class=\"node-label\">{{ node.label }}</span>\n        </div>\n\n        <!-- SVG流程线 -->\n        <svg class=\"process-lines\" width=\"100%\" height=\"100%\">\n          <!-- 定义箭头标记 -->\n          <defs>\n            <marker\n              id=\"arrow\"\n              viewBox=\"0 0 10 10\"\n              refX=\"5\"\n              refY=\"5\"\n              markerWidth=\"6\"\n              markerHeight=\"6\"\n              orient=\"auto-start-reverse\">\n              <path d=\"M 0 0 L 10 5 L 0 10 z\" />\n            </marker>\n          </defs>\n\n          <!-- 主流程路径 -->\n          <path \n            d=\"M 400,80 L 400,120\" \n            class=\"process-line main\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 400,180 L 400,220\" \n            class=\"process-line main\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 400,280 L 400,320\" \n            class=\"process-line main\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 400,380 L 400,420\" \n            class=\"process-line main\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 400,480 L 400,520\" \n            class=\"process-line main\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 400,580 L 400,620\" \n            class=\"process-line main\" \n            marker-end=\"url(#arrow)\" />\n\n          <!-- 分支路径 -->\n          <path \n            d=\"M 430,650 L 570,650\" \n            class=\"process-line\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 370,650 L 230,650\" \n            class=\"process-line\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 600,680 L 600,720\" \n            class=\"process-line\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 200,680 L 200,720\" \n            class=\"process-line\" \n            marker-end=\"url(#arrow)\" />\n\n          <!-- 合并路径 -->\n          <path \n            d=\"M 600,780 L 600,820 Q 600,850 570,850 L 430,850\" \n            class=\"process-line\" \n            marker-end=\"url(#arrow)\" />\n          <path \n            d=\"M 200,780 L 200,820 Q 200,850 230,850 L 370,850\" \n            class=\"process-line\" \n            marker-end=\"url(#arrow)\" />\n\n          <!-- 添加文本标签 -->\n          <text x=\"500\" y=\"630\" class=\"path-label\">通过</text>\n          <text x=\"300\" y=\"630\" class=\"path-label\">未通过</text>\n        </svg>\n      </div>\n    </div>\n\n    <!-- 节点详情对话框 -->\n    <el-dialog\n      :title=\"currentNode ? currentNode.label : ''\"\n      :visible.sync=\"dialogVisible\"\n      width=\"30%\">\n      <div v-if=\"currentNode\" class=\"node-details\">\n        <p><strong>节点ID:</strong> {{ currentNode.id }}</p>\n        <p><strong>类型:</strong> {{ getNodeTypeName(currentNode.type) }}</p>\n        <p><strong>URL:</strong> {{ currentNode.url }}</p>\n        <div class=\"node-actions\">\n          <el-button type=\"primary\" size=\"small\" @click=\"handleEdit\">编辑节点</el-button>\n          <el-button type=\"success\" size=\"small\" @click=\"handleViewDetails\">查看详情</el-button>\n        </div>\n      </div>\n      <span slot=\"footer\" class=\"dialog-footer\">\n        <el-button @click=\"dialogVisible = false\">关闭</el-button>\n      </span>\n    </el-dialog>\n  </div>\n</template>\n\n<script>\nimport {fetchUserInfo} from \"@/api/user\";\n\nexport default {\n  name: 'SalesOrderProcess',\n  data() {\n    return {\n      dialogVisible: false,\n      currentNode: null,\n      scale: 1,\n      panEnabled: false,\n      lastPosX: 0,\n      lastPosY: 0,\n      showWheelTip: true,\n      userName: '',\n      nodes: [\n        {\n          id: 'start',\n          type: 'start',\n          label: '开始',\n          x: 400,\n          y: 50,\n          url: '/sales/start'\n        },\n        {\n          id: 'inquiry',\n          type: 'process',\n          label: '客户询价',\n          x: 400,\n          y: 150,\n          url: '/sales/inquiry'\n        },\n        {\n          id: 'need-analysis', \n          type: 'process',\n          label: '需求分析', \n          x: 400,\n          y: 250,\n          url: '/sales/analysis'\n        },\n        { \n          id: 'solution', \n          type: 'process', \n          label: '方案制定', \n          x: 400,\n          y: 350,\n          url: '/sales/solution'\n        },\n        {\n          id: 'quotation', \n          type: 'process',\n          label: '报价单生成', \n          x: 400, \n          y: 450,\n          url: '/sales/quotation'\n        },\n        { \n          id: 'negotiation', \n          type: 'process', \n          label: '商务谈判', \n          x: 400, \n          y: 550,\n          url: '/sales/negotiation'\n        },\n        { \n          id: 'decision', \n          type: 'condition', \n          label: '客户决策', \n          x: 400, \n          y: 650,\n          url: '/sales/decision'\n        },\n        {\n          id: 'contract',\n          type: 'process',\n          label: '签订合同', \n          x: 600,\n          y: 650,\n          url: '/sales/contract'\n        },\n        {\n          id: 'reject-reason', \n          type: 'process', \n          label: '原因分析', \n          x: 200, \n          y: 650,\n          url: '/sales/reject'\n        },\n        { \n          id: 'followup', \n          type: 'process',\n          label: '持续跟进', \n          x: 200, \n          y: 750,\n          url: '/sales/followup'\n        },\n        { \n          id: 'production', \n          type: 'process', \n          label: '生产准备', \n          x: 600,\n          y: 750,\n          url: '/sales/production'\n        },\n        {\n          id: 'end-success', \n          type: 'end',\n          label: '流程完成', \n          x: 400,\n          y: 850,\n          url: '/sales/completed'\n        }\n      ]\n    }\n  },\n  mounted() {\n    this.getUserData();\n    // 5秒后隐藏滚轮提示\n    setTimeout(() => {\n      this.showWheelTip = false;\n    }, 5000);\n  },\n  methods: {\n    handleNodeClick(node) {\n      this.currentNode = node;\n      this.dialogVisible = true;\n    },\n    getNodeTypeName(type) {\n      const types = {\n        'start': '开始节点',\n        'end': '结束节点',\n        'process': '流程节点',\n        'condition': '条件节点'\n      };\n      return types[type] || type;\n    },\n    zoomIn() {\n      if (this.scale < 2) {\n        this.scale += 0.1;\n      }\n    },\n    zoomOut() {\n      if (this.scale > 0.5) {\n        this.scale -= 0.1;\n      }\n    },\n    resetZoom() {\n      this.scale = 1;\n      // 重置流程图位置\n      if (this.$refs.processFlow) {\n        this.$refs.processFlow.style.top = '0px';\n        this.$refs.processFlow.style.left = '0px';\n      }\n    },\n    handleWheel(e) {\n      // 阻止默认滚动行为\n      e.preventDefault();\n      \n      // 确定滚动方向（向上滚动为放大，向下滚动为缩小）\n      const delta = Math.sign(e.deltaY) * -0.1;\n      \n      // 计算新的缩放值\n      const newScale = Math.max(0.5, Math.min(2, this.scale + delta));\n      \n      // 如果缩放值在允许范围内，就应用它\n      if (newScale !== this.scale) {\n        // 计算鼠标位置相对于流程图容器的位置\n        const flowEl = this.$refs.processFlow;\n        const rect = flowEl.getBoundingClientRect();\n        \n        // 计算鼠标在流程图上的坐标（考虑当前偏移和缩放）\n        const mouseX = (e.clientX - rect.left) / this.scale;\n        const mouseY = (e.clientY - rect.top) / this.scale;\n        \n        // 获取当前偏移\n        const currentLeft = parseInt(flowEl.style.left || '0');\n        const currentTop = parseInt(flowEl.style.top || '0');\n        \n        // 计算新的偏移，保持鼠标所指位置不变\n        const scaleChange = newScale - this.scale;\n        const newLeft = currentLeft - mouseX * scaleChange;\n        const newTop = currentTop - mouseY * scaleChange;\n        \n        // 应用新的缩放和偏移\n        this.scale = newScale;\n        flowEl.style.left = `${newLeft}px`;\n        flowEl.style.top = `${newTop}px`;\n      }\n    },\n    startPanning(e) {\n      // 如果是点击流程节点，则不启用平移\n      if (e.target.closest('.flow-node')) {\n        return;\n      }\n      \n      this.panEnabled = true;\n      this.lastPosX = e.clientX;\n      this.lastPosY = e.clientY;\n      document.body.style.cursor = 'grabbing';\n    },\n    pan(e) {\n      if (!this.panEnabled) return;\n      \n      const flowEl = this.$refs.processFlow;\n      if (!flowEl) return;\n      \n      const dx = e.clientX - this.lastPosX;\n      const dy = e.clientY - this.lastPosY;\n      \n      const currentTop = parseInt(flowEl.style.top || '0');\n      const currentLeft = parseInt(flowEl.style.left || '0');\n      \n      flowEl.style.top = (currentTop + dy) + 'px';\n      flowEl.style.left = (currentLeft + dx) + 'px';\n      \n      this.lastPosX = e.clientX;\n      this.lastPosY = e.clientY;\n    },\n    stopPanning() {\n      this.panEnabled = false;\n      document.body.style.cursor = 'default';\n    },\n    handleEdit() {\n      this.$message({\n        message: `编辑节点: ${this.currentNode.label}`,\n        type: 'info'\n      });\n      this.dialogVisible = false;\n    },\n    handleViewDetails() {\n      this.$message({\n        message: `查看节点详情: ${this.currentNode.label}`,\n        type: 'success'\n      });\n      this.dialogVisible = false;\n    },\n    async getUserData() {\n      this.loading = true;\n      try {\n        // 假设userId来自某个输入或路由参数\n        const userId = this.$route.query.userId;\n        // 调用公共方法\n        const userInfo = await fetchUserInfo(userId);\n        debugger;\n        // 使用返回的数据\n        this.userName = userInfo.username;\n        this.loading = false;\n      } catch (error) {\n        // 错误处理\n        this.error = error.message;\n        this.loading = false;\n      }\n    }\n  }\n}\n</script>\n\n<style>\n.process-container {\n  padding: 20px;\n}\n\n.process-intro {\n  margin-bottom: 30px;\n}\n\n.intro-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n}\n\n.intro-header h2 {\n  margin: 0;\n  color: #303133;\n}\n\n.intro-content {\n  display: flex;\n  justify-content: space-between;\n}\n\n.intro-description {\n  flex: 1;\n  padding-right: 30px;\n}\n\n.intro-description p {\n  line-height: 1.6;\n  color: #606266;\n}\n\n.intro-stats {\n  display: flex;\n  gap: 30px;\n}\n\n.stat-item {\n  text-align: center;\n}\n\n.stat-value {\n  font-size: 24px;\n  font-weight: bold;\n  color: #409EFF;\n}\n\n.stat-label {\n  font-size: 14px;\n  color: #909399;\n  margin-top: 5px;\n}\n\n.process-flow-container {\n  margin-top: 20px;\n  border: 1px solid #ebeef5;\n  border-radius: 4px;\n  background-color: #fff;\n  overflow: hidden;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.process-flow {\n  position: relative;\n  height: 900px;\n  padding: 20px;\n  overflow: auto;\n  transform-origin: top left;\n}\n\n.flow-node {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 120px;\n  height: 60px;\n  border-radius: 8px;\n  background-color: #fff;\n  border: 2px solid #409EFF;\n  cursor: pointer;\n  transform: translate(-50%, -50%);\n  transition: all 0.3s;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  z-index: 10;\n}\n\n.flow-node:hover {\n  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);\n  transform: translate(-50%, -50%) scale(1.05);\n}\n\n.flow-node.start {\n  background-color: #f0f9eb;\n  border-color: #67C23A;\n}\n\n.flow-node.end {\n  background-color: #f0f9eb;\n  border-color: #67C23A;\n}\n\n.flow-node.condition {\n  border-color: #E6A23C;\n  background-color: #fdf6ec;\n  border-radius: 50%;\n  width: 80px;\n  height: 80px;\n}\n\n.node-label {\n  font-size: 14px;\n  text-align: center;\n  padding: 8px;\n}\n\n.process-lines {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\n\n.process-line {\n  stroke: #DCDFE6;\n  stroke-width: 2px;\n  fill: none;\n}\n\n.process-line.main {\n  stroke: #409EFF;\n  stroke-width: 2.5px;\n}\n\n/* Sales process specific styles */\n.sales-process .flow-node {\n  border-color: #67C23A;\n}\n\n.sales-process .flow-node.condition {\n  border-color: #67C23A;\n  background-color: #f0f9eb;\n}\n\n.sales-process .process-line {\n  stroke: #67C23A;\n}\n\n.sales-process .process-line.main {\n  stroke: #67C23A;\n  stroke-width: 2.5px;\n}\n\n.path-label {\n  fill: #67C23A;\n  font-size: 12px;\n  font-weight: bold;\n}\n\n.node-details p {\n  margin: 8px 0;\n}\n\n.node-actions {\n  margin-top: 20px;\n  display: flex;\n  gap: 10px;\n}\n\n/* 缩放控制样式 */\n.zoom-controls {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.zoom-btn {\n  width: 36px;\n  height: 36px;\n  background-color: white;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  transition: all 0.3s;\n}\n\n.zoom-btn:hover {\n  background-color: #f2f6fc;\n  transform: translateY(-2px);\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);\n}\n\n.zoom-btn i {\n  font-size: 18px;\n  color: #409EFF;\n}\n\n.zoom-tip {\n  position: absolute;\n  top: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  z-index: 100;\n}\n\n.zoom-tip i {\n  color: #409EFF;\n}\n\n.wheel-tip {\n  position: absolute;\n  top: 20px;\n  left: 20px;\n  background-color: white;\n  padding: 5px 10px;\n  border-radius: 4px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  z-index: 100;\n  opacity: 0.8;\n  transition: opacity 0.3s;\n}\n\n.wheel-tip:hover {\n  opacity: 1;\n}\n\n.wheel-tip i {\n  color: #67C23A;\n}\n\n/* Sales process specific zoom controls */\n.sales-process .zoom-btn i {\n  color: #67C23A;\n}\n\n.sales-process .zoom-tip i {\n  color: #67C23A;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n  .process-flow {\n    height: 700px;\n  }\n  \n  .intro-content {\n    flex-direction: column;\n  }\n  \n  .intro-description {\n    padding-right: 0;\n    margin-bottom: 20px;\n  }\n  \n  .flow-node {\n    width: 100px;\n    height: 50px;\n  }\n  \n  .flow-node.condition {\n    width: 70px;\n    height: 70px;\n  }\n  \n  .node-label {\n    font-size: 12px;\n  }\n  \n  .zoom-controls {\n    bottom: 20px;\n    right: 20px;\n    top: auto;\n  }\n  \n  .zoom-btn {\n    width: 32px;\n    height: 32px;\n  }\n  \n  .zoom-btn i {\n    font-size: 16px;\n  }\n  \n  .zoom-tip {\n    bottom: 20px;\n    top: auto;\n    font-size: 12px;\n  }\n  \n  .wheel-tip {\n    bottom: 20px;\n    left: 20px;\n    top: auto;\n    font-size: 12px;\n  }\n}\n</style> "],"mappings":";;;;;AA4KA,SAAAA,aAAA;AAEA;EACAC,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,aAAA;MACAC,WAAA;MACAC,KAAA;MACAC,UAAA;MACAC,QAAA;MACAC,QAAA;MACAC,YAAA;MACAC,QAAA;MACAC,KAAA,GACA;QACAC,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA;IAEA;EACA;EACAC,OAAA,WAAAA,QAAA;IAAA,IAAAC,KAAA;IACA,KAAAC,WAAA;IACA;IACAC,UAAA;MACAF,KAAA,CAAAV,YAAA;IACA;EACA;EACAa,OAAA;I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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}