tmagic-editor/docs/assets/guide_introduction.md.Ch_-Uv4O.js

import{aw as i,y as r,z as o,b0 as a}from"./chunks/framework.BCBheFgR.js";const l="/tmagic-editor/docs/tmagic.png",h=JSON.parse('{"title":"介绍","description":"","frontmatter":{},"headers":[],"relativePath":"guide/introduction.md","filePath":"guide/introduction.md"}'),n={name:"guide/introduction.md"};function e(s,t,g,c,d,u){return o(),r("div",null,t[0]||(t[0]=[a('<h1 id="介绍" tabindex="-1">介绍 <a class="header-anchor" href="#介绍" aria-label="Permalink to &quot;介绍&quot;">​</a></h1><p>tmagic-editor可视化开源项目是从魔方平台演化而来的开源项目，意在提供一个供开发者快速搭建可视化搭建平台的解决方案。</p><img src="'+l+'" alt="魔方demo图"><h2 id="特性" tabindex="-1">特性 <a class="header-anchor" href="#特性" aria-label="Permalink to &quot;特性&quot;">​</a></h2><ul><li><strong>所见即所得</strong>，体验友好的拖拽编辑方式。</li><li><strong>丰富的拓展能力</strong>，支持业务方自定义组件、插件、扩展编辑器能力。</li><li><strong>支持多种布局方式</strong>，tmagic-editor的容器概念，支持配置项目时，自由组合嵌套业务组件，提供超强的组件布局方式。</li><li><strong>支持不同前端框架</strong>，使用编辑器的业务方可以采用自己熟悉的前端框架，来开发自己的业务组件，比如vue2、vue3、react。</li><li><strong>强大的配置</strong>，支持表单联动的配置能力。</li><li><strong>组件联动</strong>，支持组件通信、组件联动，允许页面内各组件提供丰富配置能力。</li><li><strong>低代码</strong>，支持针对具体配置的页面写代码，修改页面样式属性等，提供除组件外的高级编码能力。</li></ul><h2 id="编辑器" tabindex="-1">编辑器 <a class="header-anchor" href="#编辑器" aria-label="Permalink to &quot;编辑器&quot;">​</a></h2><p>编辑器是可视化搭建平台的主要内容，其中包含以下内容：</p><ul><li><strong>编辑器</strong>，承载整个拖拽布局的页面，包含了下述的其他页面可见元素。</li><li><strong>模拟器</strong>，居中位置渲染了当前页面配置的组件内容，模拟真实页面的展示内容。</li><li><strong>组件库</strong>，左侧展示当前业务下的相关组件内容，包含tmagic-editor提供的基础组件和业务自定义组件。</li><li><strong>组件树</strong>，左侧展示当前页面添加的组件内容，以树状结构展示。</li><li><strong><a href="./advanced/code-block.html">代码块</a></strong>，左侧展示添加的函数，可供组件事件中联动所用，或者组件声明周期中调用。</li><li><strong><a href="./advanced/data-source.html">数据源</a></strong>，左侧展示添加的数据源，用于组件中的各项配置。</li><li><strong>表单配置</strong>，右侧表单项目，展示由组件内提供的配置描述，提供修改组件行为的配置项。</li><li><strong>DSL 源码</strong>，右上角的 📄 图标可以展示当前页面，各个组件配置，页面基础配置组合而成的配置源码。</li></ul><p>通过编辑器，可以创建、编辑、保存一个项目页面。</p><h2 id="核心库" tabindex="-1">核心库 <a class="header-anchor" href="#核心库" aria-label="Permalink to &quot;核心库&quot;">​</a></h2><ul><li><strong>@tmagic/editor</strong> 实现一个可视化编辑器。</li><li><strong>@tmagic/form</strong> 实现组件在编辑器中自定义表单配置。</li><li><strong>@tmagic/core</strong> 实现对组件进行跨框架管理与一些通用复杂逻辑的实现。</li><li><strong>@tmagic/data-source</strong> 实现数据源的管理与编译。</li><li><strong>@tmagic/stage</strong> 实现在编辑器中对组件的位置拖动与大小拖拉。</li><li><strong>@tmagic/ui</strong> 提供一些vue3基础组件。</li><li><strong>@tmagic/ui-vue2</strong> 提供一些vue2基础组件。</li><li><strong>@tmagic/ui-react</strong> 提供一些react基础组件。</li><li><strong>runtime</strong> 实现在编辑器中对使用不同框架的组件的渲染。</li></ul><p>可以查阅 tmagic 的<a href="https://github.com/Tencent/tmagic-editor" target="_blank" rel="noreferrer">源代码</a>，与文档描述内容可以逐一对应上，希望文档内容可以为开发者带来比较好的开发体验。</p><h2 id="谁在使用" tabindex="-1">谁在使用 <a class="header-anchor" href="#谁在使用" aria-label="Permalink to &quot;谁在使用&quot;">​</a></h2><ul><li>腾讯视频：视频会员，体育会员，WETV 国际版，TV，doki 商城，小企鹅，小说，漫画</li><li>腾讯会议</li><li>腾讯新闻</li><li>58同城本地生活服务</li></ul>',14)]))}const _=i(n,[["render",e]]);export{h as __pageData,_ as default};