基于乐吾乐meta2d从零实现可视化流程图编辑器（三）

七月的后花园2023-08-03 15:06

概要

可视化编辑器已成为前端发展趋势，相关产品层出不穷，但是用户较难根据自身需求去完整实现一个功能较为全面的可视化编辑器，我将采用乐吾乐开源的meta2d.js可视化库来实现一个简单的流程图编辑器，通过这个案例来介绍meta2d的相关功能，并向读者展示如何用meta2d从零出发搭建一个较为完整的项目，让我们在实际项目中来体验meta2d的强大之处吧。

什么是乐吾乐meta2d.js

meta2d是乐吾乐开源的2D图元组成的可视化引擎，集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0 代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。

乐吾乐已将其meta2d核心库完全免费开源，本系列教程就是基于meta2d从零实现web端可视化流程图编辑器。

乐吾乐 meta2d开源项目地址：github.com/le5le-com/m...

乐吾乐 meta2d官方文档：doc.le5le.com/document/11...

项目地址

此可视化流程图编辑器项目地址：github.com/Grnetsky/me...

往期教程

  1. 基本环境搭建: juejin.cn/spost/72617...

  2. 主界面布局及其初始化: juejin.cn/post/726219...

3.Meta2d核心库图元注册流程及相关概念

本章节介绍meta2d核心库的使用流程及其相关概念，你也可以去官网查看最新的官方文档对相关内容的叙述

写在前面

在开始介绍meta2d核心库的使用流程之前，先介绍几个概念：

  • 图元：是组成图像的基本单位，分为节点和连线两类
  • 锚点：是位于图元上的特殊点，用于连接停靠线的控制点
  • 图层：每个图元都有绘画顺序，绘画先后顺序决定了其图层位置，本质上是个图元队列。

有了上面三个基本概念，我们开始今天的核心库使用教程

其实，图元本质就是一个js对象，他是带有一定属性的js对象，这些属性主要由通用属性和自定义属性组成，所谓通用属性是指由meta2d核心库能够识别到的，通用属性在后期可以通过api查看，不过，最基本的通用属性有：

（1） name：用于制定该图元是什么类型，用于区分不同的图元，例如：square、triangle、circle等，meta2d内部提供了一些基本类型，请移步官方文档，除了这些基本类型，meta2d提供了一些扩展类型，需要安装相关的依赖包，具体如下:

名称 依赖包 备注
流程图 @meta2d/flow-diagram
时序图 @meta2d/sequence-diagram
类图 @meta2d/class-diagram
Echarts、hightcharts、lightningchart @meta2d/chart-diagram 需在html中手动引入相关charts，详见官方文档
表单控件、表格 @meta2d/form-diagram
乐吾乐图表 @meta2d/le5le-charts
svg @meta2d/svg 该库用于解析svg

（2）wight、height：指定图元的宽高

（3）text：指定图元的文字描述

其他属性根据不同的图元对象有不同的配置，详情移步官网。

图元使用流程

我们都知道，图元（一定格式的json对象）是meta2d能够识别认识的东西，所以我们在开发中最主要的工作就是根据不同需求，按照相关文档来配置不同的图元，然后将这些图元数据拖拽到meta2d的画板中，meta2d就能根据所传信息，自动生成相关图形，那么仔细思考会有两个问题

  • meta2d是怎么知道拖拽的图元是什么图形呢？

  • meta2d怎么知道name对应的图形该怎么绘制？

第一个问题很好回答，即meta2d通过图元的name属性进行判断，第二个问题的答案是，我们要在meta2d工作之前，要将相关图形进行注册，meta2d提供了register函数进行图元的注册，那这就串通起来了，我们先将图元进行注册，再将对应的图元信息拖拽进去，就能实现图元的显示。然后通过不同图元之间的联系交互，最终我们的基本的编辑器就大功告成了。另外对于图元的编辑，mate2d也提供快了setValue API 对于改变图元样式也极其方便，具体细节我们在后面章节展开。

接下来让我们在实际操作中验证吧

Icons组件完善以及meta2d图元注册

首先我们学习进行相关图元信息的注册

内置图元

内置图元是meta2d自带的图元，不需要额外注册

参考官方文档，内置图元有以下一些

name 描述
rectangle 矩形
circle 圆
triangle 三角形
diamond 菱形
pentagon 五边形
pentagram 五角星
hexagon 六边形
leftArrow 左箭头
rightArrow 右箭头
twowayArrow 双向箭头
message 消息框
cloud 云
file 文件
cube 立方体
people 人
line 线
iframe 网页
video 音视频
gif gif 动画
svgPath svg path

我们先尝试引入一个矩形试试，首先最重要的是定制图元信息，我们在icons.js中配置defaultIcon对象如下：

可以看到该defaultIcon数组中有一个对象，对象的name属性用于前端显示分组的标题，该对象的list属性就包括了在该分组下的所有图元，title属性为该图元的描述信息，是非必要的，id用于序列，icon属性用于侧边栏显示的图形，具体图标根据需求和爱好去iconfont下载即可，另外也可以使用image和svg用于展示，根据爱好自定义即可。 data属性就是最核心的图元信息了，meta2d核心库就是根据此消息进行图元匹配的，相关字段在注释中有解释，这里不过多叙述。

有了基本的信息后，让我们看看前端代码如何编写：首先，为了在侧边栏展示图标，我们需要引入相关iconfont文件（引入步骤这里忽略，详情见iconfont官网），然后在Meta2d.vue组件中导入defaultIcon对象，通过遍历渲染，最终展示如下：

详细代码见下：

ini 复制代码 
<script setup>
import { defaultIcon } from "../data/icons.js";
import { Search } from "@element-plus/icons-vue";

import { ref } from "vue";
const activeNames = ref(1);
const inputValue = ref("");
function dragPen(data, e) {
  const json = JSON.stringify(data);
  e.dataTransfer.setData("meta2d", json);
}
</script>

<template>
  <div class="icons">
    <div class="icon_search">
      <el-input
        v-model="inputValue"
        size="small"
        placeholder="搜索图元"
        :prefix-icon="Search"
      />
    </div>
    <div class="icon_list">
      <el-collapse v-model="activeNames">
        <template v-for="(icons, index) in defaultIcon">
          <el-collapse-item :title="icons.name" :name="index.toString()">
            <div class="icon_container">
              <div
                class="icon_item"
                v-for="(item, index) in icons.list"
                draggable="true"
                @dragstart="dragPen(item.data, $event)"
                :index="index"
              >
                <i v-if="item.icon" class="icon-size" :class="item.icon"></i>
                <img v-else-if="item.image" :src="item.image" />
                <div v-else-if="item.svg" v-html="item.svg"></div>
              </div>
            </div>
          </el-collapse-item>
        </template>
      </el-collapse>
    </div>
    <div class="icon_manage">
      <el-button> 管理图元 </el-button>
    </div>
  </div>
</template>

注意，e.dataTransfer.setData()函数在设置数据名时必须为"Meta2d" 或者为"Text"

可以看到，展示效果与预设效果一致。接下来我们要处理拖拽能力，用html原生拖拽实现，首先在每个图元素身上设置draggable="true"将原生的拖拽能力打开，然后监听dragstart事件，在回调函数中将该元素的图元数据传递进去，然后将数据存在事件对象的dataTransfer中，当鼠标松开时，数据就会通过dataTransfer自动传递给meta2d。

到此，我们就能够通过拖拽侧边栏元素将图元渲染在画布中了，效果如下：

同样的方式，我们可以引入其他内置图元。最终效果如下

具体案例见项目代码

流程图图元

首先进行流程图图元的注册，需要安装：

sql 复制代码 
npm install @meta2d/flow-diagram --save

安装成功 然后在Meta2d.vue中导入注册

xml 复制代码 
// Meta2d.vue
<script setup>  
import { Meta2d } from "@meta2d/core"  
import { flowPens} from "@meta2d/flow-diagram";  // 导入文件
import {onMounted} from "vue";  
onMounted(()=>{  
    let meta2d = new Meta2d("meta2d")  
    window.meta2d = meta2d // 挂载到全局对象上  
    meta2d.register(flowPens())  // 注册文件
})

现在meta2d内部已经有流程图相关图元的信息了，我们只需要在侧边栏配置传递的图元信息即可。 与基本图元一样配置，配置信息如下：

less 复制代码 
export const defaultIcons = [  ...  {    name: '流程图',    show: true,    list: [      {        name: '开始/结束',        icon: 't-icon t-flow-start',        id: 21,        data: {          text: '开始/结束',          width: 120,          height: 40,          borderRadius: 0.5,          name: 'rectangle',        },      },      {        name: '流程',        icon: 't-icon t-rectangle',        id: 22,        data: {          text: '流程',          width: 120,          height: 40,          name: 'rectangle',        },      },      {        name: '判定',        icon: 't-icon t-diamond',        id: 23,        data: {          text: '判定',          width: 120,          height: 60,          name: 'diamond',        },      },      {        name: '数据',        icon: 't-icon t-flow-data',        id: 24,        data: {          text: '数据',          width: 120,          height: 50,          name: 'flowData',          offsetX: 0.14,          ]
        },
      },
      {
        name: '准备',
        icon: 't-icon t-flow-ready',
        id: 25,
        data: {
          text: '准备',
          width: 120,
          height: 50,
          name: 'hexagon',
        },
      },
      {
        name: '子流程',
        icon: 't-icon t-flow-subprocess',
        id: 26,
        data: {
          text: '子流程',
          width: 120,
          height: 50,
          name: 'flowSubprocess',
        },
      },
      {
        name: '数据库',
        icon: 't-icon t-db',
        id: 27,
        data: {
          text: '数据库',
          width: 80,
          height: 120,
          name: 'flowDb',
        },
      },
      {
        name: '文档',
        icon: 't-icon t-flow-document',
        id: 28,
        data: {
          text: '文档',
          width: 120,
          height: 100,
          name: 'flowDocument',
        },
      },
      {
        name: '内部存储',
        icon: 't-icon t-internal-storage',
        id: 29,
        data: {
          text: '内部存储',
          width: 120,
          height: 80,
          name: 'flowInternalStorage',
        },
      },
      {
        name: '外部存储',
        icon: 't-icon t-extern-storage',
        id: 30,
        data: {
          text: '外部存储',
          width: 120,
          height: 80,
          name: 'flowExternStorage',
        },
      },
      {
        name: '队列',
        icon: 't-icon t-flow-queue',
        id: 31,
        data: {
          text: '队列',
          width: 100,
          height: 100,
          name: 'flowQueue',
        },
      },
      {
        name: '手动输入',
        icon: 't-icon t-flow-manually',
        id: 32,
        data: {
          text: '手动输入',
          width: 120,
          height: 80,
          name: 'flowManually',
        },
      },
      {
        name: '展示',
        icon: 't-icon t-flow-display',
        id: 33,
        data: {
          text: '展示',
          width: 120,
          height: 80,
          name: 'flowDisplay',
        },
      },
      {
        name: '并行模式',
        icon: 't-icon t-flow-parallel',
        id: 34,
        data: {
          text: '并行模式',
          width: 120,
          height: 50,
          name: 'flowParallel',
        },
      },
      {
        name: '注释',
        icon: 't-icon t-flow-comment',
        id: 35,
        data: {
          text: '注释',
          width: 100,
          height: 100,
          name: 'flowComment',
        },
      },
    ],
  }]

配置好后，我们来看最终效果

成功了，很简单吧

活动图图元

还是同样的，三步走。

第一步：安装图元

sql 复制代码 
npm install @meta2d/activity-diagram --save

安装成功

第二步：注册图元

注册图元时，最好查看官方文档相关内容，以免注册失败

结合官方文档给的注册教程，我们在同样的Meta2d.vue的地方进行图元的注册

xml 复制代码 
// Meta2d.vue
<script setup>  
import { Meta2d } from "@meta2d/core"  
import { flowPens} from "@meta2d/flow-diagram";  
import {  
    activityDiagram,  
    activityDiagramByCtx,  
} from "@meta2d/activity-diagram";  
  
import {onMounted} from "vue";  
onMounted(()=>{  
    let meta2d = new Meta2d("meta2d")  
    window.meta2d = meta2d // 挂载到全局对象上  
    // 注册流程图  
    meta2d.register(flowPens())  

    // 注册注册活动图元  
    meta2d.register(activityDiagram());  
    // 原生canvas绘画的图库，支持逻辑复杂的需求  
    meta2d.registerCanvasDraw(activityDiagramByCtx());  
})

第三步：配置侧边栏图元信息

less 复制代码 
{
  name: '活动图',
  show: true,
  list: [
    {
      name: '开始',
      icon: 't-icon t-inital',
      id: 36,
      data: {
        text: '',
        width: 30,
        height: 30,
        name: 'circle',
        background: '#555',
        lineWidth: 0,
      },
    },
    {
      name: '结束',
      icon: 't-icon t-final',
      id: 37,
      data: {
        width: 30,
        height: 30,
        name: 'activityFinal',
      },
    },
    {
      name: '活动',
      icon: 't-icon t-action',
      id: 38,
      data: {
        text: '活动',
        width: 120,
        height: 50,
        borderRadius: 0.25,
        name: 'rectangle',
      },
    },
    {
      name: '决策/合并',
      icon: 't-icon t-diamond',
      id: 39,
      data: {
        text: '决策/合并',
        width: 120,
        height: 50,
        name: 'diamond',
      },
    },
    {
      name: '垂直泳道',
      icon: 't-icon t-swimlane-v',
      id: 40,
      data: {
        text: '垂直泳道',
        width: 200,
        height: 500,
        name: 'swimlaneV',
        textBaseline: 'top',
        textTop: 20,
        // textHeight: ,  
        lineTop: 0.08,
      },
    },
    {
      name: '水平泳道',
      icon: 't-icon t-swimlane-h',
      id: 41,
      data: {
        text: '水平泳道',
        width: 500,
        height: 200,
        name: 'swimlaneH',
        textWidth: 0.01,
        textLeft: 0.04,
        textAlign: 'left',
        lineLeft: 0.08,
      },
    },
    {
      name: '垂直分岔/汇合',
      icon: 't-icon t-fork-v',
      id: 42,
      data: {
        text: '垂直分岔/汇合',
        width: 10,
        height: 150,
        name: 'forkV',
        fillStyle: '#555',
        strokeStyle: 'transparent',
      },
    },
    {
      name: '水平分岔/汇合',
      icon: 't-icon t-fork',
      id: 43,
      data: {
        text: '水平分岔/汇合',
        width: 150,
        height: 10,
        name: 'forkH',
        fillStyle: '#555',
        strokeStyle: 'transparent',
      },
    },
  ],
},

最终效果如下

时序图、类图、表单图元

时序图、类图、表单图元都是一样的配置方式和步骤，这里就不赘述了，最终效果如图所示 详情可移步官方文档

Echarts、highcharts、LightningChart图表

Echarts、highcharts、LightningChart我们统称为第三方图表，既然是第三方图表那么我们就需要引入第三方库，拿echarts举例： 下载echarts.min.js,放在public下的js文件夹下，然后在根目录引入该文件(当然也可以通过cdn直接引入)

xml 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/icon/2d/iconfont.css" rel="stylesheet" />

  <title>Vite + Vue</title>

</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <!-- 引入echarts.min.js-->
  <script defer src="/js/echarts.min.js"></script>
</body>

</html>

然后我们需要安装meta2d提供的chart依赖库

sql 复制代码 
npm install @meta2d/chart-diagram --save

安装成功后 我们继续第二步，注册在meta2d中Echarts，我们刚刚安装的@meta2d/chart-diagram中提供了Echarts、highcharts与LightningChart的注册函数，只需要在meta2d中注册即可，见代码：

xml 复制代码 
<script setup>
import { Meta2d } from "@meta2d/core";
import { flowPens } from "@meta2d/flow-diagram";
import {
  activityDiagram,
  activityDiagramByCtx,
} from "@meta2d/activity-diagram";
import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram";
import { classPens } from "@meta2d/class-diagram";
import { register as registerEcharts } from "@meta2d/chart-diagram"; // 引入echarts注册函数，原函数名为register 为了与其他注册函数区分这里重命名为registerEcharts

import { onMounted } from "vue";
onMounted(() => {
  let meta2d = new Meta2d("meta2d");
  window.meta2d = meta2d; // 挂载到全局对象上
  // 注册流程图
  meta2d.register(flowPens());

  // 注册注册活动图元
  meta2d.register(activityDiagram());
  // 原生canvas绘画的图库，支持逻辑复杂的需求
  meta2d.registerCanvasDraw(activityDiagramByCtx());

  // 注册时序图
  meta2d.register(sequencePens());
  meta2d.registerCanvasDraw(sequencePensbyCtx());

  // 注册类图
  meta2d.register(classPens());

  // 注册表单图元
  meta2d.registerCanvasDraw(formPens());

  // 直接调用Echarts的注册函数
  registerEcharts();
});
</script>

第三步：配置侧边栏图元信息 在icons.js的defaultIcons中追加

yaml 复制代码 
const a = {
  name: 'Echarts图表',
  show: true,
  list: [
    {
      name: '折线图',
      icon: 't-icon t-line-chart',
      data: {
        name: 'echarts',
        width: 400,
        height: 300,
        externElement: true,
        disableAnchor: true,
        echarts: {
          option: {
            grid: {
              top: 10,
              bottom: 50,
              left: 40,
              right: 5,
            },
            dataZoom: [
              {
                height: 16,
                bottom: 10,
              },
            ],
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLabel: {
                fontSize: 12,
              },
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                fontSize: 12,
              },
            },
            series: [
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
              },
            ],
          },
          max: 100,
        },
      },
    },
    {
      name: '柱状图',
      icon: 't-icon t-bar-chart',
      data: {
        width: 300,
        height: 200,
        disableAnchor: true,
        externElement: true,
        name: 'echarts',
        echarts: {
          option: {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效  
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'  
              },
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true,
              },
            },
            yAxis: [
              {
                type: 'value',
              },
            ],
            series: [
              {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [10, 52, 200, 334, 390, 330, 220],
              },
            ],
          },
          max: 100,
        },
      },
    },
    {
      name: '饼图',
      icon: 't-icon t-pie-chart',
      data: {
        width: 200,
        height: 200,
        disableAnchor: true,
        externElement: true,
        name: 'echarts',
        echarts: {
          option: {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)',
            },
            legend: {},
            series: [
              {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center',
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '30',
                      fontWeight: 'bold',
                    },
                  },
                },
                labelLine: {
                  normal: {
                    show: false,
                  },
                },
                data: [
                  { value: 335, name: '直接访问' },
                  { value: 310, name: '邮件营销' },
                  { value: 234, name: '联盟广告' },
                  { value: 135, name: '视频广告' },
                  { value: 1548, name: '搜索引擎' },
                ],
              },
            ],
          },
          replaceMode: ReplaceMode.Replace,
        },
      },
    },
    {
      name: '仪表盘',
      icon: 't-icon t-dashboard-chart',
      data: {
        width: 300,
        height: 300,
        disableAnchor: true,
        externElement: true,
        name: 'echarts',
        echarts: {
          option: {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%',
            },
            series: [
              {
                name: '业务指标',
                type: 'gauge',
                detail: { formatter: '{value}%' },
                data: [{ value: 50, name: '完成率' }],
              },
            ],
          },
          replaceMode: ReplaceMode.Replace,
        },
      },
    },
  ],
},

关于ecahrts的相关配置详见Echarts官网 hightCharts和LightningChart也是一样的，这里也不多赘述了，同样需要下载相关库并在html中引入

hightCharts官网
lightningChart官网

让我们来看看具体效果吧（由于美观性，改了下Icons组件元素的padding值）

总结

本章较为详细的介绍了meta2d图元的使用流程，对meta2d的相关概念进行了叙述，我们学会了如何让图元在meta2d中渲染出来，也学会了如何导入并使用内置图元库、图元扩展库和第三方Charts库，同时对Icons组件进行了丰富，完成了基本框架的搭建。这些都是meta2d提供给我们的图形库，那么导入自己设计的图形库该怎么实现呢？下一章我们将讲解如何引入自定义图形库。

Meta2d.js 开源地址

给大家推荐一下 Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。

Github：github.com/le5le-com/m...

Gitee: gitee.com/le5le/meta2...

大家一起去为这个国产的开源产品star一下吧，毕竟优秀的国产可视化开源项目不多。

相关推荐
Q26433650231 天前
【有源码】基于Spring Boot+Vue的骑行爱好者平台的设计与实现-计算机毕设选题推荐
java·vue.js·spring boot·毕业设计·课程设计·数据可视化·源代码
Highcharts.js2 天前
AI智能时代，数据美学更加重要：如何搭建交互可视化仪表盘
数据可视化·仪表盘·highcharts·bi设计·ui设计美学·图表开发技巧·智能图表
for_ever_love__2 天前
Matplotlib——把训练曲线和分布画出来
matplotlib·数据可视化·大模型开发·训练曲线
龙亘川2 天前
体育赛事多域融合|助推文体旅高质量发展
人工智能·智慧城市·开源软件·数据可视化
Highcharts.js3 天前
Highcharts 仪表板编辑器 Dashboards介绍
数据可视化·仪表盘·大屏端·highcharts·dashboards·企业驾驶舱
龙亘川3 天前
数智赋能物业不动产治理：亘川智城智慧物业系统实践解析
大数据·人工智能·智慧城市·开源软件·数据可视化
计算机源码社5 天前
基于大数据技术的城市空气质量时序趋势与站点特征分析系统 面向监测站点的城市空气污染时空异质性分析与可视化系统
大数据·机器学习·数据挖掘·数据分析·毕业设计·课程设计·数据可视化
龙亘川5 天前
数智赋能文化服务：构建全域一体化智慧文旅新范式
大数据·人工智能·智慧城市·数据可视化
龙亘川6 天前
数字化赋能基层协同治理：亘川智城一网统管平台落地实践思考
大数据·人工智能·智慧城市·开源软件·数据可视化
龙亘川6 天前
智慧交通运输监管平台业务建模与架构解析
人工智能·架构·智慧城市·数据可视化·政务
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04Telegram APK 下载安装完整指南 — 2026年最新05GitHub 镜像站点06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）092026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享10给AI一张“业务概念地图“：本体如何从哲学走向企业智能