vue3+vite+Ts 基于Antv/x6 绘制流程图

已于 2023-07-21 16:59:24 修改
阅读量2.2k 收藏 4
点赞数 4
文章标签： 流程图 vue.js 前端
于 2023-07-10 16:31:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/131635315
版权

需求效果：

 

 

需求：

实现一个流程图，双击可对相应的组件进行一些功能操作；

工具栈：

这里使用@antv/x6， 基于vue3+vite+ts进行开发

官网地址：

 https://x6.antv.antgroup.com/examples/showcase/practices/#flowchart

代码：

<template>
    <div id="container">
        <router-view />
    </div>
</template>
  
<script lang="ts" setup>
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
import { Selection } from '@antv/x6-plugin-selection'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
import insertCss from 'insert-css'


import { useRouter } from "vue-router"


// 引入本地图片
const getImageUrl = (url: any) => {
    return new URL(url, import.meta.url).href;
}

const router = useRouter()


onMounted(() => {
    // 为了协助代码演示
    preWork()

    // #region 初始化画布
    const graph = new Graph({
        container: document.getElementById('graph-container')!,
        grid: true,
        mousewheel: {
            enabled: true,
            zoomAtMousePosition: true,
            modifiers: 'ctrl',
            minScale: 0.5,
            maxScale: 3,
        },
        connecting: {
            router: 'manhattan',
            connector: {
                name: 'rounded',
                args: {
                    radius: 8,
                },
            },
            anchor: 'left',
            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',
                    },
                },
            },
        },
    })
    // #endregion

    // #region 使用插件
    graph
        .use(
            new Transform({
                resizing: true,
                rotating: true,
            }),
        )
        .use(
            new Selection({
                rubberband: true,
                showNodeSelectionBox: true,
            }),
        )
        .use(new Snapline())
        .use(new Keyboard())
        .use(new Clipboard())
        .use(new History())
    // #endregion

    // #region 初始化 stencil
    const stencil = new Stencil({
        title: '流程图',
        target: graph,
        stencilGraphWidth: 300,
        stencilGraphHeight: 180,
        collapsable: true,
        groups: [

            {
                title: '输入',
                name: 'group2',
                graphHeight: 300,
                layoutOptions: {
                    rowHeight: 70,
                },
            },
            {
                title: '输出',
                name: 'group3',
                graphHeight: 0,
                layoutOptions: {
                    rowHeight: 70,
                },
            },
            {
                title: '转换组件',
                name: 'group1',
                graphHeight: 300,
                layoutOptions: {
                    rowHeight: 70,
                },
            },
        ],
        layoutOptions: {
            columns: 2,
            columnWidth: 80,
            rowHeight: 55,
        },
    })
    document.getElementById('stencil')!.appendChild(stencil.container)
    // #endregion

    // #region 快捷键与事件
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
            graph.copy(cells)
        }
        return false
    })
    graph.bindKey(['meta+x', 'ctrl+x'], () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
            graph.cut(cells)
        }
        return false
    })
    graph.bindKey(['meta+v', 'ctrl+v'], () => {
        if (!graph.isClipboardEmpty()) {
            const cells = graph.paste({ offset: 32 })
            graph.cleanSelection()
            graph.select(cells)
        }
        return false
    })

    // undo redo
    graph.bindKey(['meta+z', 'ctrl+z'], () => {
        if (graph.canUndo()) {
            graph.undo()
        }
        return false
    })
    graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
        if (graph.canRedo()) {
            graph.redo()
        }
        return false
    })

    // select all
    graph.bindKey(['meta+a', 'ctrl+a'], () => {
        const nodes = graph.getNodes()
        if (nodes) {
            graph.select(nodes)
        }
    })

    // delete
    graph.bindKey('backspace', () => {
        const cells = graph.getSelectedCells()
        if (cells.length) {
            graph.removeCells(cells)
        }
    })

    // zoom
    graph.bindKey(['ctrl+1', 'meta+1'], () => {
        const zoom = graph.zoom()
        if (zoom < 1.5) {
            graph.zoom(0.1)
        }
    })
    graph.bindKey(['ctrl+2', 'meta+2'], () => {
        const zoom = graph.zoom()
        if (zoom > 0.5) {
            graph.zoom(-0.1)
        }
    })

    // 控制连接桩显示/隐藏
    const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
        for (let i = 0, len = ports.length; i < len; i += 1) {
            ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
    }
    graph.on('node:mouseenter', () => {
        const container = document.getElementById('graph-container')!
        const ports = container.querySelectorAll(
            '.x6-port-body',
        ) as NodeListOf<SVGElement>
        showPorts(ports, true)
    })
    graph.on('node:mouseleave', () => {
        const container = document.getElementById('graph-container')!
        const ports = container.querySelectorAll(
            '.x6-port-body',
        ) as NodeListOf<SVGElement>
        showPorts(ports, false)
    })
    // #endregion

    // #region 初始化图形
    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: 65,
            height: 60,
            markup: [
                {
                    tagName: 'rect',
                    selector: 'body',
                },
                {
                    tagName: 'image',
                },
                {
                    tagName: 'text',
                    selector: 'label',
                },
            ],
            attrs: {
                body: {
                    stroke: '#ccc',
                    fill: '#ccc', //..
                },
                image: {
                    width: 28,
                    height: 28,
                    refX: 20,
                    refY: 12,
                },
                label: {
                    refX: 1,
                    refY: 48,
                    textAnchor: 'bottom',
                    textVerticalAnchor: 'top',
                    fontSize: 12,
                    fill: '#fff',
                },
            },
            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',
                                },
                            },
                        },
                    },
                },
            },
        },
        true,
    )

    //转换组件
    const convertDataList = [
        {
            label: '添加默认值',
            path: "addDefault",
            image: getImageUrl("../../assets/tool_image/information_add.svg"),
        },
        {
            label: '基本运算',
            path: "basicoPerations",
            image:
                getImageUrl("../../assets/tool_image/calculator.svg"),
        },
        {
            label: '脚本转换',
            path: "conversionScript",
            image:
                getImageUrl("../../assets/tool_image/script.svg"),
        },
        {
            label: '合并/拆分',
            path: "mergeSplit",
            image:
                getImageUrl("../../assets/tool_image/merge.svg"),
        },
        {
            label: '数字类型',
            path: "numberType",
            image:
                getImageUrl("../../assets/tool_image/script_1.svg"),
        },
        {
            label: '简单过滤',
            path: "simpleFiltering",
            image:
                getImageUrl("../../assets/tool_image/filter-records-fill.svg"),
        },
        {
            label: '时间格式',
            path: "timeConversion",
            image:
                getImageUrl("../../assets/tool_image/Date_time.svg"),
        },
    ]
    const convertNodes = convertDataList.map((item) =>
        graph.createNode({
            shape: 'custom-image',
            label: item.label,
            data: item.path,
            attrs: {
                image: {
                    'xlink:href': item.image,
                }
            },
            ports: {
                items: [
                    {
                        group: 'right',
                    },
                    {
                        group: 'left',
                    },
                ],
            }
        }),
    )
    stencil.load(convertNodes, 'group1')
    //end


    //根据需求  可去除
    graph.on('node:dblclick', ({ cell }) => { // cell 基类对象 view 视图对象
            // 目标数据logic
            router.push({
                name: cell.data,
                query: {}
            })
    })



    const imageShapes = [
        {
            label: 'Excel',
            path: "Excel",
            image:
                getImageUrl("../../assets/tool_image/file-excel.svg"),
        },
        {
            label: 'CSV',
            path: "CSV",
            image:
                getImageUrl("../../assets/tool_image/CSV.svg"),
        },
        {
            label: 'JSON',
            path: "JSON",
            image:
                getImageUrl("../../assets/tool_image/json_1.svg"),
        },
        {
            label: 'Kafka',
            path: "Kafka",
            image:
                getImageUrl("../../assets/tool_image/Kafka_1.svg"),
        },
        {
            label: 'OWL文件',
            path: "OWL",
            image:
                getImageUrl("../../assets/tool_image/calculator_1.svg"),
        },
        {
            label: '日志文件',
            path: "Log",
            image:
                getImageUrl("../../assets/tool_image/console2.svg"),
        },
        {
            label: 'mongodb',
            path: "mongodb",
            image:
                getImageUrl("../../assets/tool_image/yunshujukuMongoDB.svg"),
        },
        {
            label: '表输入',
            path: "outside",
            image:
                getImageUrl("../../assets/tool_image/database.svg"),
        },
    ]
    const imageNodes = imageShapes.map((item) =>
        graph.createNode({
            shape: 'custom-image',
            label: item.label,
            data: item.path,
            attrs: {
                image: {
                    'xlink:href': item.image,
                },
            },
            ports: {
                items: [
                    {
                        group: 'right',
                    },
                ],
            }
        }),
    )
    stencil.load(imageNodes, 'group2')



    //output
    const outputDataList = [
        {
            label: '控制台',
            path: "consoleoutput",
            image:
                getImageUrl("../../assets/tool_image/console.svg"),
        },
        {
            label: 'Kafka',
            path: "kafkaoutput",
            image:
                getImageUrl("../../assets/tool_image/Kafka.svg"),
        },
        {
            label: 'mongodb',
            path: "mongodboutput",
            image:
                getImageUrl("../../assets/tool_image/mongo.svg"),
        },
        {
            label: '表',
            path: "tableOut",
            image:
                getImageUrl("../../assets/tool_image/database.svg"),
        }
    ]

    const outputNodes = outputDataList.map((item) =>
        graph.createNode({
            shape: 'custom-image',
            label: item.label,
            data: item.path,
            attrs: {
                image: {
                    'xlink:href': item.image,
                },
            },
            ports: {
                items: [
                    {
                        group: 'left',
                    },
                ],
            }
        }),
    )
    stencil.load(outputNodes, 'group3')
    // #endregion

    function preWork() {
        // 这里协助演示的代码，在实际项目中根据实际情况进行调整
        const container = document.getElementById('container')!
        const stencilContainer = document.createElement('div')
        stencilContainer.id = 'stencil'
        const graphContainer = document.createElement('div')
        graphContainer.id = 'graph-container'
        container.appendChild(stencilContainer)
        container.appendChild(graphContainer)

        insertCss(`
        #container {
      display: flex;
      border: 1px solid #dfe3e8;
    }
    #stencil {
      width: 200px;
      height: 100%;
      position: relative;
      border-right: 1px solid #dfe3e8;
    }
    #graph-container {
      width: calc(100% - 180px);
      height: 100%;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
  `)
    }
})


</script>
  
<style scoped lang="less">
#container {
    width: 100%;
    height: 100vh;
    overflow: hidden !important;
    display: flex;
    justify-content: center;
}
</style>

白聿冉
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
11-02
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器源码
基于Vue3+ts+AntV X6实现的流程图编辑器
10-17
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用pinia统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以回显
Vue3 + antv/x6 实现流程图
FenceRain的博客
03-11 1183
流程图
vue3+antv x6+tsx 制作自定义流程图
09-23
1.使用vue3+antv x6+tsx制作自定义流程图 2.实现自定义拖拉组件。 3.支持自定义拓展。
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
在 Vue3 中使用 AntV X6
kiku
02-21 8551
在 Vue3 中使用 AntV X6 <script setup lang="ts"> import { onMounted, ref } from 'vue' import { Graph } from '@antv/x6'; import { GridLayout, DagreLayout } from '@antv/layout' // 布局算法 import { data } from '../mock/data' let container: HTMLElement | und
vue3流程图组件vue flow使用
热门推荐
huanglgln的专栏
08-16 3万+
vue3流程图组件、vue flow、typescript
vue3+ts使用antv/x6 + 自定义节点
qq_40934617的博客
08-10 3475
vue3+ts使用antv/x6
Vue3 项目中使用 AntV X6 绘制流程图
weixin_43400431的博客
07-15 5741
X6是AntV旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG图、ER图等图应用.参考一些网站的写法，然后自己加上了撤销操作。节点和连接线可以进行删除。...
Vue3 + Three.js + antvG2 实战智慧城市
程序员成长指北
12-01 192
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群在网上找了很久都没有找到使用Three.js开发3d的免费文章或者免费视频,自己花了一点时间做了一个纯前端的项目demo。模型[1]都是在网上免费下载的，没有那么精细、美观请见谅。技术栈都是最新的：vue3+vite+typeScript+Three+antv G2项目源码[2]此文章只用于...
vue jsPlumb流程图
01-03
基于vue框架开发的jsPlumb流程图项目，可拖拽生成节点，修改节点内容和图标。 插件版本： "element-ui": "^2.11.1", "jsplumb": "^2.11.2", "vue": "^2.5.2"
vue3+vite+ts+antv/x6搭建的流程图编辑页面
最新发布
03-20
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图更加符合用户的个性化需求。 当然，流程图编辑页面还需要支持各种基础操作。提供了复制、剪切、粘贴、撤销、恢复、删除、清空等常用功能，使我们可以轻松地对流程图进行编辑和调整。此外，还支持组合和取消组合节点，方便用户对流程图进行整体管理。 为了适应不同项目的需求，还提供了适配大小、实际比例以及连线模式等功能。这些功能不仅可以帮助我们更好地展示流程图，还可以提高编辑效率。 最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。
【WordPress主题】2022年最新版完整功能demo+插件v1.0.zip
04-15
"【WordPress主题】2022年最新版完整功能demo+插件v1.0 Lager - eCommerce HTML Template 股票 - 电子商务HTML模板" ---------- 泰森云每天更新发布最新WordPress主题、HTML主题、WordPress插件、shopify主题、opencart主题、PHP项目源码、安卓项目源码、ios项目源码，更有超10000个资源可供选择，如有需要请站内联系。
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作节点（删除、查看节点的相关信息参数） 需求4：鼠标悬浮在连线上时可以删除当前连线 隐含需求：节点样式需要满足`UI`设计，所以需要自定义节点样式 一个满足以上需求的Vue+Antv X6的项目 具体效果如下： https://img-blog.csdnimg.cn/a24d2e30b5a0481297f83c5a75b78b4f.png#pic_center
Vue3+Electron+AntV 从项目构建到打包发布
weixin_44220328的博客
08-31 522
vue+electron项目，从项目构建到打包全过程
在vue3中浅尝antv X6 2.0 demo（三）
m0_65104145的博客
03-31 3484
在vue3中使用antv X6 2.X版本的demo新鲜出炉，内含节点增加、删除、形变、模版导入、导出png、导出json等功能～～～
Vue3 + Antv X6画带动画效果的流程图
m0_50666077的博客
08-30 1692
Vue3引入Antv X6实现动态流程图
【Vue3 基础】05.组件化
科大云炬
07-26 190
本章中，我们首先结合 Vue 的生命周期的流程图，例举了各个生命周期钩子的触发时机，以及部分钩子的使用场景。然后讲到了 ref 的作用，最后讲完并实战了组件通信相关的 api。至此 Vue3 的基础知识到这里已经结束了，还剩下一小部分，留在我们实战课程中探索。如果未学习过TypeScript的话，我也准备了 TypeScript 相关的入门基础知识，课程不会很长，带大家了解 TypeScript 常用的一些知识，为实战做准备。
vue3+vite+@antv/f2
03-01
Vue 3是一种流行的JavaScript框架，用于构用户界面。它具有响应式数据绑定、组件化开发和虚拟DOM等特性，使得开发者可以更高效地构建交互式的Web应用程序。 Vite是一个基于ES模块的构建工具，专为现代化的前端开发而设计。它具有快速的冷启动、按需编译和热模块替换等特性，使得开发者可以更快地构建和调试应用程序。 @antv/f2是一个基于Canvas的移动端可视化库，用于绘制各种图表和图形。它提供了丰富的图表类型和交互功能，可以轻松地创建漂亮而功能丰富的移动端可视化应用。 结合Vue 3、Vite和@antv/f2，你可以使用Vue 3的响应式数据绑定和组件化开发能力来构建交互式的Web应用程序，并使用Vite进行快速的开发和调试。同时，你可以使用@antv/f2来绘制各种图表和图形，实现移动端的可视化效果。 如果你想了解更多关于Vue 3、Vite和@antv/f2的信息，可以参考官方文档或者相关教程。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值