antv/x6 2.x 搭建流程图编辑页面（1）

已于 2023-02-03 11:31:20 修改
阅读量2.4k 收藏 5
点赞数 3
分类专栏： antv/x6 文章标签： 流程图 javascript 前端
于 2023-02-02 14:14:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47872719/article/details/128848643
版权

进来闲来无事，看到x6 2.x版本也更新了有几个月了，便想着熟悉下2.x版本

一、首先搭建项目基础框架。

// yarn 方式
yarn create @vitejs/app v3-ts --template vue-ts
cd v3-ts
yarn
yarn dev

// npm 
npm init @vitejs/app v3-ts --template vue-ts
cd v3-ts
npm install 
npm run dev

二、下载antv/x6以及对应所需要的插件包

package.json
{
  "@antv/x6": "^2.0.0",
  "@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能，需要安装此包
  "@antv/x6-plugin-history": "^2.0.0", // 如果使用撤销重做功能，需要安装此包
  "@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能，需要安装此包
  "@antv/x6-plugin-minimap": "^2.0.0", // 如果使用小地图功能，需要安装此包
  "@antv/x6-plugin-scroller": "^2.0.0", // 如果使用滚动画布功能，需要安装此包
  "@antv/x6-plugin-selection": "^2.0.0", // 如果使用框选功能，需要安装此包
  "@antv/x6-plugin-snapline": "^2.0.0", // 如果使用对齐线功能，需要安装此包
  "@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能，需要安装此包
  "@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能，需要安装此包
  "@antv/x6-plugin-transform": "^2.0.0", // 如果使用图形变换功能，需要安装此包
  "@antv/x6-plugin-export": "^2.0.0", // 如果使用图片导出功能，需要安装此包
  "@antv/x6-react-components": "^2.0.0", // 如果使用配套 UI 组件，需要安装此包
  "@antv/x6-react-shape": "^2.0.0", // 如果使用 react 渲染功能，需要安装此包
  "@antv/x6-vue-shape": "^2.0.0" // 如果使用 vue 渲染功能，需要安装此包
}

三、新建graph文件夹。并创建index.ts文件用来封装画布、侧边栏stencil组件、插件、快捷键与事件。

graph/index.ts
import { Graph, Shape} from "@antv/x6";

export default class FlowGraph {
  public static graph: Graph;

  public static init() {
    this.graph = new Graph({
      container: document.getElementById("graph-container")!,
      background: {
        color: "#fff",
      },
      grid: true,
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: "ctrl",
        minScale: 0.5,
        maxScale: 3,
      },
      connecting: {
        router: {
          name: "manhattan",
          args: {
            padding: 1,
          },
        },
        connector: {
          name: "rounded",
          args: {
            radius: 8,
          },
        },
        anchor: "center",
        connectionPoint: "anchor",
        allowBlank: false,
        snap: {
          radius: 20,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: "#A2B1C3",
                strokeWidth: 2,
                targetMarker: {
                  name: "block",
                  width: 12,
                  height: 8,
                },
              },
            },
            zIndex: 0,
          });
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet;
        },
      },
      highlighting: {
        magnetAdsorbed: {
          name: "stroke",
          args: {
            attrs: {
              fill: "#5F95FF",
              stroke: "#5F95FF",
            },
          },
        },
      },
    });
    return this.graph;
  }
}

四、页面进行基础布局，并初始化画布。

App.vue
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import FlowGraph from "./graph";

interface DataType {
  isReady: boolean;
}

const data = reactive<DataType>({
  isReady: false,
});

const getContainerSize = () => {
  return {
    width: (document.body.offsetWidth / 100) * 85,
    height: document.body.offsetHeight - 38,
  };
};

onMounted(() => {
  const graph = FlowGraph.init();

  graph.addNode({
    x: 200,
    y: 40,
    width: 120,
    height: 60,
    label: "rect",
    attrs: {
      body: {
        fill: "#efdbff",
        stroke: "#9254de",
      },
    },
  });

  data.isReady = true;
  const resizeFn = () => {
    const { width, height } = getContainerSize();
    graph.resize(width, height);
  };
  resizeFn();
  window.addEventListener("resize", resizeFn);
  return () => {
    window.removeEventListener("resize", resizeFn);
  };
});
</script>

<template>
  <div class="content">
    <div class="leftBox">
      <div class="storeTitle">
        <p>节点库</p>
      </div>
      <!-- 侧边栏stencil组件 -->
      <div id="stencil" />
    </div>
    <div class="panel">
      <!-- Toolbar 工具栏 -->
      <div class="toolbar">
        <!-- <Toolbar v-if="data.isReady" /> -->
      </div>
      <!-- 画布 -->
      <div id="graph-container" />
    </div>
    <!-- 属性配置 -->
    <div class="rightBox">
      <div class="rightTop">属性</div>
      <div class="rightPanel">
        <div class="config">
          <!-- <ConfigPanel v-if="data.isReady" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}

html,
body,
#app {
  width: 100vw;
  height: 100vh;
  font-size: 14px;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;

  .leftBox {
    width: 15vw;

    .storeTitle {
      height: 38px;
      line-height: 38px;
      display: flex;
      padding: 0 0.26vw;
      justify-content: space-between;
      background-color: #ededed;
      // background-color: #304053;
      p {
        // color: #fff;
        padding-left: 6px;
      }
    }

    #stencil {
      position: relative;
      width: 100%;
      height: calc(100% - 38px);
    }
  }
  .panel {
    width: 85vw;
    height: 100%;

    .toolbar {
      display: flex;
      align-items: center;
      height: 38px;
      border-bottom: 1px solid #ededed;
      // border-bottom: 1px solid #4b4343;
      position: relative;
      background-color: #ededed;
      // background-color: #304053;
      box-sizing: border-box;
      border-left: 2px solid #ededed;
      // border-left: 2px solid #040b22;
    }
  }

  .rightBox {
    width: 0;
  }
}
</style>
  • 此时画布创建成功，效果如下图：
    在这里插入图片描述
  • 接下来来完善侧边栏stencil组件

五、初始化侧边栏stencil组件

graph/index.ts
import { Graph, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";

export default class FlowGraph {
    public static graph: Graph;
    public static stencil: Stencil;

  public static init() {
    this.graph = new Graph({
      container: document.getElementById("graph-container")!,
      background: {
        color: "#fff",
      },
      grid: true,
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: "ctrl",
        minScale: 0.5,
        maxScale: 3,
      },
      connecting: {
        router: {
          name: "manhattan",
          args: {
            padding: 1,
          },
        },
        connector: {
          name: "rounded",
          args: {
            radius: 8,
          },
        },
        anchor: "center",
        connectionPoint: "anchor",
        allowBlank: false,
        snap: {
          radius: 20,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: "#A2B1C3",
                strokeWidth: 2,
                targetMarker: {
                  name: "block",
                  width: 12,
                  height: 8,
                },
              },
            },
            zIndex: 0,
          });
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet;
        },
      },
      highlighting: {
        magnetAdsorbed: {
          name: "stroke",
          args: {
            attrs: {
              fill: "#5F95FF",
              stroke: "#5F95FF",
            },
          },
        },
      },
    });
    this.initStencil();
    return this.graph;
    }
    
    public static initStencil() {
        this.stencil = new Stencil({
          title: "流程图",
          target: this.graph,
          search(cell, keyword) {
            return (cell as any).label.indexOf(keyword) !== -1;
          },
          placeholder: "Search by shape name",
          notFoundText: "Not Found",
          stencilGraphWidth: 280,
          stencilGraphHeight: 180,
          collapsable: true,
          groups: [
            {
              title: "基础流程图",
              name: "group1",
            },
            {
              title: "系统设计图",
              name: "group2",
              graphHeight: 250,
              layoutOptions: {
                rowHeight: 70,
              },
            },
          ],
          layoutOptions: {
            columns: 3,
            columnWidth: 80,
            rowHeight: 55,
          },
        });
        document.getElementById("stencil")!.appendChild(this.stencil.container);
    }
}

六、此时可以在graph目录下新建shape.ts来注册更多不同类型的节点

graph/shape.ts
import { Graph } from "@antv/x6";

const ports = {
  groups: {
    top: {
      position: "top",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
    right: {
      position: "right",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
    bottom: {
      position: "bottom",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
    left: {
      position: "left",
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden",
          },
        },
      },
    },
  },
  items: [
    {
      group: "top",
    },
    {
      group: "right",
    },
    {
      group: "bottom",
    },
    {
      group: "left",
    },
  ],
};
Graph.registerNode(
  "custom-rect",
  {
    inherit: "rect",
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
    ports: { ...ports },
  },
  true
);

Graph.registerNode(
  "custom-polygon",
  {
    inherit: "polygon",
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
    ports: {
      ...ports,
      items: [
        {
          group: "top",
        },
        {
          group: "bottom",
        },
      ],
    },
  },
  true
);

Graph.registerNode(
  "custom-circle",
  {
    inherit: "circle",
    width: 45,
    height: 45,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF",
      },
      text: {
        fontSize: 12,
        fill: "#262626",
      },
    },
    ports: { ...ports },
  },
  true
);

Graph.registerNode(
  "custom-image",
  {
    inherit: "rect",
    width: 52,
    height: 52,
    markup: [
      {
        tagName: "rect",
        selector: "body",
      },
      {
        tagName: "image",
      },
      {
        tagName: "text",
        selector: "label",
      },
    ],
    attrs: {
      body: {
        stroke: "#5F95FF",
        fill: "#5F95FF",
      },
      image: {
        width: 26,
        height: 26,
        refX: 13,
        refY: 16,
      },
      label: {
        refX: 3,
        refY: 2,
        textAnchor: "left",
        textVerticalAnchor: "top",
        fontSize: 12,
        fill: "#fff",
      },
    },
    ports: { ...ports },
  },
  true
);

七、初始化侧边栏stencil组件内的节点。

graph/index.ts
import { Graph, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";
import './shape'

export default class FlowGraph {
  public static graph: Graph;
  public static stencil: Stencil;

  // 初始化画布
  public static init() {
    this.graph = new Graph({
      container: document.getElementById("graph-container")!,
      background: {
        color: "#fff",
      },
      grid: true,
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: "ctrl",
        minScale: 0.5,
        maxScale: 3,
      },
      connecting: {
        router: {
          name: "manhattan",
          args: {
            padding: 1,
          },
        },
        connector: {
          name: "rounded",
          args: {
            radius: 8,
          },
        },
        anchor: "center",
        connectionPoint: "anchor",
        allowBlank: false,
        snap: {
          radius: 20,
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: "#A2B1C3",
                strokeWidth: 2,
                targetMarker: {
                  name: "block",
                  width: 12,
                  height: 8,
                },
              },
            },
            zIndex: 0,
          });
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet;
        },
      },
      highlighting: {
        magnetAdsorbed: {
          name: "stroke",
          args: {
            attrs: {
              fill: "#5F95FF",
              stroke: "#5F95FF",
            },
          },
        },
      },
    });
      this.initStencil();
      this.initShape()
    return this.graph;
  }

  // 初始化侧边栏stencil组件
  public static initStencil() {
    this.stencil = new Stencil({
      title: "流程图",
      target: this.graph,
      search(cell, keyword) {
        return (cell as any).label.indexOf(keyword) !== -1;
      },
      placeholder: "Search by shape name",
      notFoundText: "Not Found",
      stencilGraphWidth: 280,
      stencilGraphHeight: 180,
      collapsable: true,
      groups: [
        {
          title: "基础流程图",
          name: "group1",
        },
        {
          title: "系统设计图",
          name: "group2",
          graphHeight: 250,
          layoutOptions: {
            rowHeight: 70,
          },
        },
      ],
      layoutOptions: {
        columns: 3,
        columnWidth: 80,
        rowHeight: 55,
      },
    });
    document.getElementById("stencil")!.appendChild(this.stencil.container);
  }

  // 初始化stencil组件内的节点
  public static initShape() {
    const { graph } = this;
    const r1 = graph.createNode({
      shape: "custom-rect",
      label: "开始",
      attrs: {
        body: {
          rx: 20,
          ry: 26,
        },
      },
    });
    const r2 = graph.createNode({
      shape: "custom-rect",
      label: "过程",
    });
    const r3 = graph.createNode({
      shape: "custom-rect",
      attrs: {
        body: {
          rx: 6,
          ry: 6,
        },
      },
      label: "可选过程",
    });
    const r4 = graph.createNode({
      shape: "custom-polygon",
      attrs: {
        body: {
          refPoints: "0,10 10,0 20,10 10,20",
        },
      },
      label: "决策",
    });
    const r5 = graph.createNode({
      shape: "custom-polygon",
      attrs: {
        body: {
          refPoints: "10,0 40,0 30,20 0,20",
        },
      },
      label: "数据",
    });
    const r6 = graph.createNode({
      shape: "custom-circle",
      label: "连接",
    });
    this.stencil.load([r1, r2, r3, r4, r5, r6], "group1");

    const imageShapes = [
      {
        label: "Client",
        image:
          "https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg",
      },
      {
        label: "Http",
        image:
          "https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg",
      },
      {
        label: "Api",
        image:
          "https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg",
      },
      {
        label: "Sql",
        image:
          "https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg",
      },
      {
        label: "Clound",
        image:
          "https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg",
      },
      {
        label: "Mq",
        image:
          "https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg",
      },
    ];
    const imageNodes = imageShapes.map((item) =>
      graph.createNode({
        shape: "custom-image",
        label: item.label,
        attrs: {
          image: {
            "xlink:href": item.image,
          },
        },
      })
    );
    this.stencil.load(imageNodes, "group2");
  }
}
  • 此时页面效果如下：
    在这里插入图片描述

接下来需要完善 快捷键与事件、Toolbar 工具栏、以及节点属性配置。具体看下篇文章。

bigHead-
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
05-31
基于vue2.x+antdesign+antv x6实现的流程图编辑器.zip
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-20
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图更加符合用户的个性化需求。 当然，流程图编辑页面还需要支持各种基础操作。提供了复制、剪切、粘贴、撤销、恢复、删除、清空等常用功能，使我们可以轻松地对流程图进行编辑和调整。此外，还支持组合和取消组合节点，方便用户对流程图进行整体管理。 为了适应不同项目的需求，还提供了适配大小、实际比例以及连线模式等功能。这些功能不仅可以帮助我们更好地展示流程图，还可以提高编辑效率。 最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。
介绍几种antvX6常用的方法或配置（使用数据渲染节点和连线、图像居中完整展示、节点不可移出画布、节点图片和标签变化）
wzy_PROTEIN的博客
03-01 1623
接本专栏的上一篇antv X6新手教程，补充一些新的需求实现，丰富巩固antv X6的使用。此篇是以上一篇为基础的，如有初学者可以看本专栏的上一篇。将编辑好的拓扑图展示在其他页面、根据节点数据来改变节点的图片和标签等
vue使用antv-x6 绘制流程图DAG图（二）
贵林之恋的博客
01-30 1021
【代码】vue使用antv-x6 绘制流程图DAG图（二）
vue antv X6流程图
不要和代码过不去
09-04 1562
第一 下载2.0插件。
会用这些的api，轻松绘制流程图（antv/g6流程图入门）
qq_35094120的博客
01-30 4538
g6的api使用常用graph属性和方法graph属性graph方法getPointByClient(clientX, clientY)getZoom()zoomTo(toRatio, center)get(key)find(type, fn)removeItem(item, stack)update(node/edge,nodeModel/edgeModel)updateItem(item, model, stack)destroy()setAutoPaint(auto)paint()setItemSta
antV x6 开发流程图实例
u014650004的博客
01-12 7123
antV x6 流程图案例
antv/x6自定义节点+小地图+复制/删除节点+拖拽生成节点
SunFlower914的博客
01-26 1218
"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能，需要安装此包。"@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能，需要安装此包。"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能，需要安装此包。"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能，需要安装此包。9、保存/设置节点数据。
使用antv X6绘制拓扑关系图（层次布局）
GodV_666的博客
12-27 1308
antv x6 绘制层次拓扑图
基于[AntV-X6]封装的拓扑图编辑器
weixin_42204133的博客
07-07 638
拓扑图，AntV-X6
「AntV」使用AntV X6实现流程编排设计器
沐唐风宋雨
07-05 6069
基于AntV X6低成本定制能力：AntV X6是基于HTML和SVG的图表编辑引擎，提供了丰富的API和自定义事件，可以通过编写JavaScript代码，快速实现自定义的图表样式、布局和交互方式，满足具体业务需求。高度可扩展性：AntV X6提供了众多内置扩展，包括DAG图、ER图、流程图等应用，可以帮助你根据自己的需要，自由扩展和定制功能和组件，实现更加灵活的业务需求。
antv/x6封装vue2.0源码
05-13
附带增删改连线拖拽生成功能撤销保存放大缩小等等
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
使用 AntV X6 + vue 实现单线流程图
Big_YiFeng的博客
08-01 3708
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
antd/x6-graph——实现流程图绘制功能——技能提升
最新发布
yehaocheng520的博客
04-03 646
antd/x6-graph——实现流程图绘制功能——技能提升
AntV 开发 —— x6 图编辑引擎
qq_16670995的博客
07-15 877
其实，只是想找个轮子 前序： AntV-官网 x6-官网 x6-人工智能建模 DAG 图 碎碎念： 此文个人笔记，官网文档搬运 因为官网对于vue结合Element-UI的示例就几个，本意只是看中了人工智能建模 DAG 图，但是这玩意demo是React，虽然核心的东西一样，但是傻瓜式才方便，故特意按vue2写了一次，没用ts，用ts的其实转换的成本不高 demo 待上传中【ps：因demo...
Vue3 + antv/x6 实现流程图
FenceRain的博客
03-11 869
流程图
AntV 推出全新的图编辑引擎 X6，让你们久等了
bubkoo的博客
03-12 7007
X6 是蚂蚁金服 AntV 旗下的图编辑引擎，X 象形图编辑场景的关系链接，同时 X6 又是 G6 的孪生兄弟，所以沿用了 G6 中的 6，深究一下，6 源于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。 X6 脱胎于蚂蚁实际的业务场景，在此基础上，我们完善了图编辑场景的常用扩展，如小地图、网格系统、对齐线、框选、redo/undo等，内置了图编辑场景的常规交互和设计，如群组...
antv/x6 2.x 搭建流程图编辑页面（2）
bighead的博客
02-03 947
antv/x6 2.x 搭建流程图编辑页面（1）
antv/x6加载大量的流程图数据
03-28
要加载大量的流程图数据，可以考虑以下几个方面： 1. 数据分页加载：将数据分批加载，每次加载一部分数据，减少一次性加载大量数据对系统的影响。 2. 数据压缩：对数据进行压缩处理，减少数据的大小，提高数据传输...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bigHead-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值