AntV G6自定义流程图Graph

已于 2023-07-27 10:51:19 修改
阅读量2.7k 收藏 12
点赞数 2
文章标签： 流程图 vue 前端 html
于 2023-07-14 14:49:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45594156/article/details/131722364
版权

AntV G6自定义流程图Graph

AntV G6自定义流程图Graph

前言：自定义流程图节点样式、节点可拖动，节点文字过长省略，文字过长的节点悬浮展示tooltip插件悬浮框，修改tooltip悬浮框样式。

一、先看下我的效果图

整体效果
鼠标悬浮节点样式

二、参考官方图表示例地址

Dagre 流程图

三、代码已整合成vue组件

调用组件传值给mapData，这里只是自己演示设置了假数据a

<template>
  <div style="width: 100%;height: 100%;">
    <!-- 流程预览图画布 -->
    <div id="containerBox"
         style="background: #F7F8FA;border-radius: 4px;">
    </div>
  </div>
</template>
<script>
import G6 from '@antv/g6'
import insertCss from 'insert-css';
// 这个样式是作用于modes里的tooltip
insertCss(`
 .g6-tooltip {
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background-color: #3C3D42;
    text-align: left;
    width: 240px;
    padding: 6px 12px;
  }
`);
insertCss(`
  .g6-component-tooltip {
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    background-color: #3C3D42;
    text-align: left;
    width: 240px;
    padding: 6px 12px;
  }
`);
export default {
  name: "previewProcess",
  data () {
    return {
      a: {
        nodes: [
          {
            id: '1',
            dataType: 'start',
            name: 'alps_file1',
          },
          {
            id: '2',
            dataType: 'condition',
            name: 'alps_file2二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二',
          },
          {
            id: '3',
            dataType: 'examine',
            name: 'alps_file3三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三',
          },
          {
            id: '4',
            dataType: 'examine',
            name: 'sql_file4四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四四',
          },
          {
            id: '5',
            dataType: 'examine',
            name: 'sql_file5',
          },
          {
            id: '6',
            dataType: 'end',
            name: 'feature_etl_1',
          }
        ],
        edges: [
          {
            source: '1',
            target: '2',
          },
          {
            source: '1',
            target: '3',
          },
          {
            source: '2',
            target: '4',
          },
          {
            source: '3',
            target: '4',
          },
          {
            source: '4',
            target: '5',
          },
          {
            source: '5',
            target: '6',
          }
        ],
      }
    }
  },
  props: {
    mapData: { // 预览数据
      type: Object,
      default: () => {
        return {}
      }
    },
    mapHeight: { // 高度H
      type: String,
      default: '600'
    },
  },
  mounted () {
    this.customNode()
    this.createNode(this.a) // 参数名为a,后期正式使用a都改成mapData
  },
  activated () {
  },
  watch: {
  },
  computed: {
  },
  methods: {
    // 文字过长显示...
    fittingString (str, maxWidth, fontSize) {
      const ellipsis = '...'
      const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0]
      let currentWidth = 0
      let res = str
      const pattern = new RegExp('[\u4E00-\u9FA5]+') // distinguish the Chinese charactors and letters
      str.split('').forEach((letter, i) => {
        if (currentWidth > maxWidth - ellipsisLength) return
        if (pattern.test(letter)) {
          // Chinese charactors
          currentWidth += fontSize
        } else {
          // get the width of single letter according to the fontSize
          currentWidth += G6.Util.getLetterWidth(letter, fontSize)
        }
        if (currentWidth > maxWidth - ellipsisLength) {
          res = `${str.substr(0, i)}${ellipsis}`
        }
      })
      return res
    },
    // 自定义节点方法
    customNode () {
      const _that = this

      G6.registerNode(
        'sql',
        {
          drawShape (cfg, group) {
            let index = _that.a.nodes.length - 1
            // 判断为开始、结束节点
            if (cfg.id === _that.a.nodes[0].id || cfg.id === _that.a.nodes[index].id) {
              const startEnd = group.addShape('rect', {
                attrs: {
                  x: -10,
                  y: -25,
                  width: 100,
                  height: 36,
                  stroke: '#C3C5D9',
                  radius: 18,
                  fill: '#fff',
                },
                name: 'main-box',
                draggable: true,
              });
              group.addShape('text', {
                attrs: {
                  text: cfg.id === _that.a.nodes[0].id ? '发起节点' : '结束',
                  x: 40,
                  y: -6,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fill: '#202340',
                  fontSize: 14,
                  fontWeight: 500,
                  fontFamily: 'PingFangSC-Regular, PingFang SC',
                  lineHeight: 20,
                },
                name: 'text-shape',
              });
              return startEnd;
            } else {
              // 判断是条件还是审核人展示不同样式
              if (cfg.dataType === 'condition') {
                // 条件：整个节点矩形
                const rect = group.addShape('rect', {
                  attrs: {
                    x: -75,
                    y: -25,
                    width: 230,
                    height: 86,
                    radius: 4,
                    stroke: '#C3C5D9',
                    fill: '#F7F8FA',
                    lineWidth: 1,
                  },
                  name: 'rect-shape',
                });
                // 条件：上面标题矩形
                const titleRect = group.addShape('rect', {
                  attrs: {
                    x: -74.5,
                    y: -24.5,
                    width: 229,
                    height: 35,
                    radius: [4, 4, 0, 0],
                    stroke: '#C3C5D9',
                    fill: '#E2E3EE',
                    lineWidth: 0,
                  },
                  name: 'rect-title',
                });
                // 条件：上面矩形标题文字
                const title = group.addShape('text', {
                  attrs: {
                    text: _that.fittingString(cfg.dataType + '标题', 198, 14),
                    x: -58,
                    y: -8,
                    textAlign: 'left',
                    textBaseline: 'middle',
                    fill: '#565B85',
                    fontSize: 14,
                    fontWeight: 500,
                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                    lineHeight: 20,
                  },
                  name: 'title-box',
                });
                // 条件：矩形下面的文本文字
                const text = group.addShape('text', {
                  attrs: {
                    text: _that.fittingString(cfg.name + '文本', 198, 14),
                    x: -58,
                    y: 35,
                    textAlign: 'left',
                    textBaseline: 'middle',
                    fill: '#202340',
                    fontSize: 14,
                    fontWeight: 500,
                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                    lineHeight: 20,
                  },
                  name: 'text-box',
                });
                return rect;
              } else { // 审核人展示的样式
                // 审核人：整个节点矩形
                const rect = group.addShape('rect', {
                  attrs: {
                    x: -75,
                    y: -25,
                    width: 230,
                    height: 86,
                    radius: 4,
                    stroke: '#FFCA80',
                    fill: '#FFF9F2',
                    lineWidth: 1,
                  },
                  name: 'rect-shape',
                });
                // 审核人：上面标题矩形
                const titleRect = group.addShape('rect', {
                  attrs: {
                    x: -74.5,
                    y: -24.5,
                    width: 229,
                    height: 35,
                    radius: [4, 4, 0, 0],
                    stroke: '#C3C5D9',
                    fill: '#FFDFB2',
                    lineWidth: 0,
                  },
                  name: 'rect-title',
                });
                // 审核人：上面矩形标题文字
                const title = group.addShape('text', {
                  attrs: {
                    text: _that.fittingString(cfg.dataType + '标题', 198, 14),
                    x: -58,
                    y: -8,
                    textAlign: 'left',
                    textBaseline: 'middle',
                    fill: '#D97F00',
                    fontSize: 14,
                    fontWeight: 500,
                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                    lineHeight: 20,
                  },
                  name: 'title-box',
                });
                // 审核人：矩形下面的文本文字
                const text = group.addShape('text', {
                  attrs: {
                    text: _that.fittingString(cfg.name + '文本', 198, 14),
                    x: -58,
                    y: 35,
                    textAlign: 'left',
                    textBaseline: 'middle',
                    fill: '#202340',
                    fontSize: 14,
                    fontWeight: 500,
                    fontFamily: 'PingFangSC-Regular, PingFang SC',
                    lineHeight: 20,
                  },
                  name: 'text-box',
                });
                return rect;
              }

            }
          },
        },
        'single-node',
      );
    },
    // 根据数据创建树状图节点
    createNode (mapData) {
      let tooltip = new G6.Tooltip({
        offsetX: 0,
        offsetY: 30,
        // 固定tooltip位置
        // fixToNode: [0, 1],
        // 允许出现 tooltip 的 item 类型
        itemTypes: ['node'],
        // 自定义 tooltip 内容
        getContent: (e) => {
          console.log('e=======', e.item);
          const outDiv = document.createElement('div');
          outDiv.style.width = '100%';
          // outDiv.style.background = 'red';
          outDiv.innerHTML = `<div>${e.item._cfg.model.name}</div>`;
          return outDiv;
        },
        shouldBegin: (e) => {
          let str = this.fittingString(e.item._cfg.model.name, 198, 14)
          let index = str.indexOf('.')
          if (index > -1) {
            return true
          }
          return false
        },
      });
      
      const container = document.getElementById('containerBox');
      const width = container.scrollWidth;
      const height = container.scrollHeight || this.mapHeight;
      const graph = new G6.Graph({
        container: 'containerBox',
        width,
        height,
        plugins: [tooltip],
        layout: {
          type: 'dagre',
          nodesepFunc: (d) => { // 节点左右边距
            if (d.id === '3') {
              return 500;
            }
            return 50;
          },
          ranksep: 60,  // 节点上下边距
        },
        defaultNode: {
          type: 'sql',
          anchorPoints: [
            [0.5, 1],
            [0.5, 0]
          ]
        },
        defaultEdge: { // 连接线样式
          type: 'polyline',
          style: {
            radius: 0,
            offset: 45,
            // 这个字段默认是true
            // endArrow: true,
            lineWidth: 2,
            stroke: '#C3C5D9',
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#C3C5D9',
            },
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: '#d9d9d9',
            fill: '#5394ef',
          },
        },
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas',
            'drag-node',
            // {
            //   type: 'tooltip',
            //   formatText (model) {
            //     const cfg = model.name;
            //     return cfg
            //   },
            //   shouldBegin: (e) => {
            //     let str = this.fittingString(e.item._cfg.model.name, 198, 14)
            //     let index = str.indexOf('.')
            //     if (index > -1) {
            //       return true
            //     }
            //     return false
            //   },
            //   offset: 30
            // },
          ],
        },
        fitView: true,
      });
      graph.data(mapData);
      graph.render();
    // 这里是用于判断连接线是否有箭头
    //  mapData.nodes.forEach((node) => {
    //    if (node.dataType === 'condition') {
    //      mapData.edges.forEach((edge) => {
    //        if (edge.target === node.id) {
    //          edge.style.endArrow = false;
    //       }
    //     })
    //   }
    // });
      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    }
  }
}
</script>

四、这里提供了直接改官方示例数据，简单的参考

在官方图表示例找到Dagre 流程图

import G6 from '@antv/g6';
import insertCss from 'insert-css';

insertCss(`
  .g6-tooltip {
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    padding: 2px 8px;
    text-align: center;
  }
`);

const data = {
  nodes: [
    {
      id: '1',
      dataType: 'alps',
      name: 'alps_file1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '2',
      dataType: 'alps',
      name: 'alps_file2',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '3',
      dataType: 'alps',
      name: '11111',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '4',
      dataType: 'sql',
      name: 'sql_file1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '5',
      dataType: 'sql',
      name: 'sql_file2',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    },
    {
      id: '6',
      dataType: 'feature_etl',
      name: 'feature_etl_1',
      conf: [
        {
          label: 'conf',
          value: 'pai_graph.conf',
        },
        {
          label: 'dot',
          value: 'pai_graph.dot',
        },
        {
          label: 'init',
          value: 'init.rc',
        },
      ],
    }
  ],
  edges: [
    {
      source: '1',
      target: '2',
    },
    {
      source: '1',
      target: '3',
    },
    {
      source: '2',
      target: '4',
    },
    {
      source: '3',
      target: '4',
    },
    {
      source: '4',
      target: '5',
    },
    {
      source: '5',
      target: '6',
    }
  ],
};

G6.registerNode(
  'sql',
  {
    drawShape(cfg, group) {
      const rect = group.addShape('rect', {
        attrs: {
          x: -75,
          y: -25,
          width: 150,
          height: 50,
          radius: 10,
          stroke: '#5B8FF9',
          fill: '#C6E5FF',
          lineWidth: 3,
        },
        name: 'rect-shape',
      });
      if (cfg.name) {
        group.addShape('text', {
          attrs: {
            text: cfg.name,
            x: 0,
            y: 0,
            fill: '#00287E',
            fontSize: 14,
            textAlign: 'center',
            textBaseline: 'middle',
            fontWeight: 'bold',
          },
          name: 'text-shape',
        });
      }
      return rect;
    },
  },
  'single-node',
);

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'dagre',
    nodesepFunc: (d) => {
      if (d.id === '3') {
        return 500;
      }
      return 50;
    },
    ranksep: 70,
  },
  defaultNode: {
    type: 'sql',
    anchorPoints: [
      [0.5, 1],
      [0.5, 0]
    ]
  },
  defaultEdge: {
    type: 'polyline',
    style: {
      radius: 0,
      offset: 45,
      endArrow: true,
      lineWidth: 2,
      stroke: '#C2C8D5',
	  endArrow: {
        path: 'M 0,0 L 8,4 L 8,-4 Z',
        fill: '#C2C8D5',
      },
    },
  },
  nodeStateStyles: {
    selected: {
      stroke: '#d9d9d9',
      fill: '#5394ef',
    },
  },
  modes: {
    default: [
      'drag-canvas',
      'zoom-canvas',
      'drag-node',
      // 'click-select',
      // {
      //   type: 'tooltip',
      //   formatText(model) {
      //     const cfg = model.conf;
      //     const text = [];
      //     cfg.forEach((row) => {
      //       text.push(row.label + ':' + row.value + '<br>');
      //     });
      //     return text.join('\n');
      //   },
      //   offset: 30,
      // },
    ],
  },
  fitView: true,
});
graph.data(data);
graph.render();

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };
靠着蓝色背景幻想
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-G6-Editor：一款基于Vue和G6的可视化流程图编辑器
gitblog_00015的博客
04-05 967
Vue-G6-Editor：一款基于Vue和G6的可视化流程图编辑器 项目地址:https://gitcode.com/blueju/vue-g6-editor Vue-G6-Editor 是一个强大的在线流程图编辑工具，它结合了Vue.js的简洁性和G6的图形渲染能力，为开发者提供了一个易于集成、可高度自定义的流程图编辑组件。 项目简介 Vue-G6-Editor 是由 blueju 开发的开源...
antv G6绘制流程图
peppa_pig的博客
12-15 8561
先贴上实现的效果图 G6官网，按照官网可以绘制出简单的流程 但是当实际绘制流程图时，简直是要被连接线的折点给搞崩溃 <template> <div id="mountNode"> </div> </template> <script> import utils from "@/plugin/utils"; import G6 from '@antv/g6'; import insertCss from 'inse..
antv g2、g6 自定义扩展
04-30
g2自定义 3d柱状图、分割柱状图及g6 自定义卡片
antV G6 自定义节点 实现流程图 + 小地图功能
weixin_44827945的博客
07-07 4299
antV G6 自定义节点 实现流程图 + 小地图功能
vue+antvg6流程图
最新发布
weixin_41752213的博客
05-26 265
vue+antvg6流程图
使用antv/G6，实现自定义节点流程图
m0_60666754的博客
11-14 2707
初始化的图数据，是一个包括 nodes （节点）数组和 edges （线）数组的对象。图一是鼠标移出隐藏连接点，图二是鼠标移入显示连接点。第二排图标是第一排拖拽出来的。第一排小图标是可拖拽的。添加事件，让图片可拖拽。
推荐开源项目：Vue-G6-Editor - 构建高效模型流程图编辑器
gitblog_00039的博客
05-17 428
推荐开源项目：Vue-G6-Editor - 构建高效模型流程图编辑器 项目地址:https://gitcode.com/caoyu48/vue-g6-editor 1、项目介绍 vue-g6-editor 是一款基于阿里巴巴 G6 图形库的 Vue.js 模型流程图编辑组件。这个项目由开发者 caoyu48 创建，旨在解决商业用途下对模型流程图编辑器的需求，特别是当 G6 Editor 不开放...
阿里G6漂亮流程图绘制
02-03
利用阿里G6实现流程图在线编辑功能，支持人员、部门等选择。
树形流程图-G6
lilikk1314的博客
09-26 4501
前几天接到了个需求,做一个树形的流程图,大概形状类似于antV-G6里面的自定义树图 antv-G6自定义树图链接:https://g6.antv.vision/zh/examples/tree/customItemTree#customEdgeTree 但是需求:父节点和子节点能够展开和关闭,还要有这个功能 emmm..对于每接触过G6的小白来说...真的难哭了 我在网上一顿找..发现并没有合适的可以直接用的..只能自己去改造,但是改造的前提的我得先学G6,所以这篇是我对G6给的树图的学习
使用antv/g6在Vue中实现流程图
ssy001128的博客
06-30 3532
vue 中使用antv/g6插件查出流程图，前面还用过bpmn插件，效果没有这个好
antv-g6—在vue项目中实现网格拓扑流程图自定义绘制
前端探险家的博客
06-22 5456
这个是自己写着玩的，利用@antv/g6自定义绘制流程图，然后保存到localstorage中，在左侧表格展示，还可以通过表格操作来查看对应的流程图以及删除；这里特别注意一下，，vue版本是2.5.x；下面我会把实现代码全部粘贴出来，不需要需改，开袋即食，放到你的项目中直接可以展示；代码中我也会加上注释，不懂的可以看注释；
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
g6右键菜单
bfoursix的博客
06-19 4366
import G6 from ‘@antv/g6’; import insertCss from ‘insert-css’; // define the CSS with the id of your menu // 我们用 insert-css 演示引入自定义样式 // 推荐将样式添加到自己的样式文件中 // 若拷贝官方代码，别忘了 npm install insert-css insertCss(#contextMenu { position: absolute; list-style-type: no
基于G6的弓字形流程图
C_hydar的博客
07-18 588
基于G6的自适应会拐弯的流程图
G6框架Dagre流程图第三个自左向右的 Dagre 上对齐改造，对齐结点和边添加样式，并添加修改节点和展示结点详细信息交互
XIAOYAN_v587的博客
08-22 1888
G6框架Dagre流程图第三个自左向右的 Dagre 上对齐改造，对齐结点和边添加样式，并添加修改节点和展示结点详细信息交互
使用antv/G6在vue项目中开发较复杂样式流程图
前端搬砖人的开发记录
11-03 7832
antv/G6开发流程图
antv g6自定义文本边
05-08
ANTV G6 是一款基于 G6 图形引擎和 React 的图形化可视化工具。它支持多种图表类型和交互方式，使得用户可以方便地构建各种数据可视化界面。 ANTV G6 中有很多自定义的功能和样式，其中之一就是文本边（Label Edge），它可以用来为节点和边设置自定义样式，并显示节点之间的关系。 在使用 ANTV G6 中的文本边之前，需要先定义要用的数据，在节点或边中设置相应的属性，以便在绘制图表时可以正确地显示出来。 接下来，我们可以通过代码来实现自定义文本边的功能。例如，我们可以在定义边时，设置边的起点和终点，并为其添加一个带箭头的自定义文本边： ```js const edge = graph.addItem('edge', { source: 'node1', target: 'node2', style: { endArrow: true, }, label: '自定义文本边', labelCfg: { position: 'center', style: { fill: '#fff', fontSize: 12, }, }, }); ``` 在上面的代码中，设置了边的起点和终点为 `node1` 和 `node2`，并为其添加了一个带箭头的样式。同时，为边设置了一个文本标签，并将其居中对齐，设置文本样式为白色，并设置字体大小为 12。 通过设置节点和边的属性和样式，我们可以自由地定义和掌控整个图表的样式和外观，并展示数据之间的联系。同时，ANTV G6 提供了非常丰富的 API 和组件，使得开发者可以轻松地实现各种复杂的图形化界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值