mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-05 19:41:40 +08:00
fix(admin): 管理端更新编辑器的使用方式
This commit is contained in:
parisma
jia000
parent
216953611e
commit
fe821f7d84
@ -12,23 +12,6 @@
|
||||
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211129/81d34a1638168945248.png">
|
||||
|
||||
## 快速开始
|
||||
|
||||
::: tip
|
||||
前提条件：node 环境>=14.15
|
||||
:::
|
||||
|
||||
1、首先 clone 开源仓库代码到本地
|
||||
|
||||
2、执行如下命令运行管理端
|
||||
|
||||
```bash
|
||||
$ cd magic-admin
|
||||
$ npm run admin:run
|
||||
```
|
||||
|
||||
3、访问 http://localhost:80 (端口以实际启动的为准)
|
||||
|
||||
## 开发调试
|
||||
|
||||
magic-admin 管理端分为 web 端和 server 端，目录结构如下：
|
||||
@ -225,3 +208,11 @@ magic_ui_config 表
|
||||
管理端的项目发布是对[页面发布](https://tencent.github.io/tmagic-editor/docs/page/introduction.html#%E9%A1%B5%E9%9D%A2%E5%8F%91%E5%B8%83) 的实践。
|
||||
原始的页面框架 page.html 需要通过 runtime 打包生成，注入的 DSL 保存在 magic_ui_config 表 c_dist_code 字段中。
|
||||
发布时将 DSL 文件注入到 page.html 中，写入 server/assets/publish 目录下，访问路径： http://localhost/publish/${page_name}.html
|
||||
|
||||
## 部署
|
||||
|
||||
::: tip
|
||||
前提条件：node 环境>=14.15
|
||||
:::
|
||||
|
||||
如需使用流水线部署，请参考 /magic-admin/setup.sh
|
||||
|
||||
@ -1 +1 @@
|
||||
import{A as d,g as f,R as p}from"./index.144d287e.js";import{r as E,A as m,R as a}from"./Text.000ec384.js";const P="modulepreload",g={},h="/tmagic-editor/playground/runtime/react/",y=function(t,c){return!c||c.length===0?t():Promise.all(c.map(n=>{if(n=`${h}${n}`,n in g)return;g[n]=!0;const s=n.endsWith(".css"),l=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${n}"]${l}`))return;const r=document.createElement("link");if(r.rel=s?"stylesheet":P,s||(r.as="script",r.crossOrigin=""),r.href=n,document.head.appendChild(r),s)return new Promise((e,i)=>{r.addEventListener("load",e),r.addEventListener("error",()=>i(new Error(`Unable to preload CSS for ${n}`)))})})).then(()=>t())};function C(){var c,n;const o=E.exports.useContext(m);if(!((c=o==null?void 0:o.page)!=null&&c.data))return null;const t=o.resolveComponent("page");return a.createElement(t,{config:(n=o==null?void 0:o.page)==null?void 0:n.data})}const v="/tamgic-editor/playground/runtime/react/assets/components.js";y(()=>import(v),[]).then(()=>{var r;const{components:o}=window.magicPresetComponents,t=new d({config:{},curPage:f("page")});let c="";const n=e=>{t==null||t.setConfig(e),s(),window.magic.onPageElUpdate(document.querySelector(".magic-ui-page"))},s=()=>{p.render(a.createElement(a.StrictMode,null,a.createElement(m.Provider,{value:t},a.createElement(C,null))),document.getElementById("root"))},l={app:t,updateRootConfig(e){console.log("update root config",e),t==null||t.setConfig(e)},updatePageId(e){console.log("update page id",e),c=e,t==null||t.setPage(c),s()},getSnapElementQuerySelector(){return"[class*=magic-ui][id]"},select(e){console.log("select config",e);const i=document.getElementById(e);return i||new Promise(u=>{setTimeout(()=>{u(document.getElementById(e))},0)})},add({root:e}){console.log("add config",e),n(e)},update({root:e}){console.log("update config",e),n(e)},sortNode({root:e}){console.log("sort config",e),n(e)},remove({root:e}){console.log("remove config",e),n(e)}};Object.keys(o).forEach(e=>t.registerComponent(e,o[e])),(r=window.magic)==null||r.onRuntimeReady(l)});
|
||||
import{A as d,g as f,R as p}from"./index.144d287e.js";import{r as E,A as m,R as a}from"./Text.000ec384.js";const P="modulepreload",g={},h="/runtime/react/",y=function(t,c){return!c||c.length===0?t():Promise.all(c.map(n=>{if(n=`${h}${n}`,n in g)return;g[n]=!0;const s=n.endsWith(".css"),l=s?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${n}"]${l}`))return;const r=document.createElement("link");if(r.rel=s?"stylesheet":P,s||(r.as="script",r.crossOrigin=""),r.href=n,document.head.appendChild(r),s)return new Promise((e,i)=>{r.addEventListener("load",e),r.addEventListener("error",()=>i(new Error(`Unable to preload CSS for ${n}`)))})})).then(()=>t())};function C(){var c,n;const o=E.exports.useContext(m);if(!((c=o==null?void 0:o.page)!=null&&c.data))return null;const t=o.resolveComponent("page");return a.createElement(t,{config:(n=o==null?void 0:o.page)==null?void 0:n.data})}const v="/tamgic-editor/playground/runtime/react/assets/components.js";y(()=>import(v),[]).then(()=>{var r;const{components:o}=window.magicPresetComponents,t=new d({config:{},curPage:f("page")});let c="";const n=e=>{t==null||t.setConfig(e),s(),window.magic.onPageElUpdate(document.querySelector(".magic-ui-page"))},s=()=>{p.render(a.createElement(a.StrictMode,null,a.createElement(m.Provider,{value:t},a.createElement(C,null))),document.getElementById("root"))},l={app:t,updateRootConfig(e){console.log("update root config",e),t==null||t.setConfig(e)},updatePageId(e){console.log("update page id",e),c=e,t==null||t.setPage(c),s()},getSnapElementQuerySelector(){return"[class*=magic-ui][id]"},select(e){console.log("select config",e);const i=document.getElementById(e);return i||new Promise(u=>{setTimeout(()=>{u(document.getElementById(e))},0)})},add({root:e}){console.log("add config",e),n(e)},update({root:e}){console.log("update config",e),n(e)},sortNode({root:e}){console.log("sort config",e),n(e)},remove({root:e}){console.log("remove config",e),n(e)}};Object.keys(o).forEach(e=>t.registerComponent(e,o[e])),(r=window.magic)==null||r.onRuntimeReady(l)});
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>React Page</title>
|
||||
<script type="module" crossorigin src="/tmagic-editor/playground/runtime/react/assets/page.js"></script>
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/react/assets/Text.000ec384.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/react/assets/index.144d287e.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/react/assets/components.js">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/react/assets/index.aa7399fc.css">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/react/assets/page.5884789a.css">
|
||||
<script type="module" crossorigin src="/runtime/react/assets/page.js"></script>
|
||||
<link rel="modulepreload" href="/runtime/react/assets/Text.000ec384.js">
|
||||
<link rel="modulepreload" href="/runtime/react/assets/index.144d287e.js">
|
||||
<link rel="modulepreload" href="/runtime/react/assets/components.js">
|
||||
<link rel="stylesheet" href="/runtime/react/assets/index.aa7399fc.css">
|
||||
<link rel="stylesheet" href="/runtime/react/assets/page.5884789a.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>React Playground</title>
|
||||
|
||||
<script type="module" crossorigin src="/tmagic-editor/playground/runtime/react/assets/playground.js"></script>
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/react/assets/Text.000ec384.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/react/assets/index.144d287e.js">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/react/assets/index.aa7399fc.css">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/react/assets/playground.d0149121.css">
|
||||
<script type="module" crossorigin src="/runtime/react/assets/playground.js"></script>
|
||||
<link rel="modulepreload" href="/runtime/react/assets/Text.000ec384.js">
|
||||
<link rel="modulepreload" href="/runtime/react/assets/index.144d287e.js">
|
||||
<link rel="stylesheet" href="/runtime/react/assets/index.aa7399fc.css">
|
||||
<link rel="stylesheet" href="/runtime/react/assets/playground.d0149121.css">
|
||||
</head>
|
||||
<body style="font-size: 14px">
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
import{A as d,r as h}from"./resetcss.494d822a.js";import{a as c,n as g}from"./vueComponentNormalizer.e7d45796.js";const m="modulepreload",a={},f="/tmagic-editor/playground/runtime/vue2/",_=function(t,n){return!n||n.length===0?t():Promise.all(n.map(o=>{if(o=`${f}${o}`,o in a)return;a[o]=!0;const r=o.endsWith(".css"),s=r?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${s}`))return;const i=document.createElement("link");if(i.rel=r?"stylesheet":m,r||(i.as="script",i.crossOrigin=""),i.href=o,document.head.appendChild(i),r)return new Promise((p,l)=>{i.addEventListener("load",p),i.addEventListener("error",()=>l(new Error(`Unable to preload CSS for ${o}`)))})})).then(()=>t())};var E=Vue.extend({data(){return{app:null,config:void 0,curPageId:"",selectedId:""}},computed:{pageConfig(){var e,t,n,o;return((t=(e=this.config)==null?void 0:e.items)==null?void 0:t.find(r=>r.id===this.curPageId))||((o=(n=this.config)==null?void 0:n.items)==null?void 0:o[0])}},provide(){return this.app=new d({config:this.config,platform:"editor"}),{app:this.app}},mounted(){var e;(e=globalThis.magic)==null||e.onRuntimeReady(this)},watch:{async pageConfig(){await this.$nextTick(),globalThis.magic.onPageElUpdate(document.querySelector(".magic-ui-page"))}},methods:{updateRootConfig(e){var t;console.log("update config",e),this.config=e,(t=this.app)==null||t.setConfig(e,this.curPageId)},updatePageId(e){var t;console.log("update page id",e),this.curPageId=e,(t=this.app)==null||t.setPage(e)},getSnapElementQuerySelector(){return"[class*=magic-ui][id]"},select(e){console.log("select config",e),this.selectedId=e;const t=document.getElementById(e);return t||this.$nextTick().then(()=>document.getElementById(e))},add({config:e}){var r;if(console.log("add config",e),!this.config)throw new Error("error");const t=c(this.selectedId,[this.config]),n=t.pop(),o=n!=null&&n.items?n:t.pop();if(!o)throw new Error("\u672A\u627E\u5230\u7236\u8282\u70B9");(r=o.items)==null||r.push(e)},update({config:e}){var s;if(console.log("update config",e),!this.config)throw new Error("error");const t=c(e.id,[this.config]),n=t.pop(),o=t.pop();if(!n)throw new Error("\u672A\u627E\u5230\u76EE\u6807\u8282\u70B9");if(!o)throw new Error("\u672A\u627E\u5230\u7236\u8282\u70B9");const r=(s=o.items)==null?void 0:s.findIndex(i=>i.id===n.id);o.items.splice(r,1,h(e))},sortNode({src:e,dist:t}){if(!this.config)throw new Error("error");const n=c(this.selectedId,[this.config]);n.pop();const o=n.pop();if(!o)return;const r=o.items.findIndex(i=>i.id===t);if(r<0)return;const s=o.items.findIndex(i=>i.id===e);o.items.splice(r,0,...o.items.splice(s,1))},remove({id:e}){var s;if(!this.config)throw new Error("error");const t=c(e,[this.config]),n=t.pop();if(!n)throw new Error("\u672A\u627E\u5230\u76EE\u6807\u5143\u7D20");const o=t.pop();if(!o)throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");const r=(s=o.items)==null?void 0:s.findIndex(i=>i.id===n.id);o.items.splice(r,1)}}}),v=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.pageConfig?n("magic-ui-page",{attrs:{config:e.pageConfig}}):e._e()},w=[];const u={};var x=g(E,v,w,!1,y,null,null,null);function y(e){for(let t in u)this[t]=u[t]}var I=function(){return x.exports}();const P="/tamgic-editor/playground/runtime/vue2/assets/components.js";_(()=>import(P),[]).then(()=>{const{components:e,plugins:t}=window.magicPresetComponents;Object.values(e).forEach(n=>{Vue.component(n.name,n)}),Object.values(t).forEach(n=>{Vue.use(n)}),new Vue({render:n=>n(I),el:"#app"})});
|
||||
import{A as d,r as h}from"./resetcss.494d822a.js";import{a as c,n as g}from"./vueComponentNormalizer.e7d45796.js";const m="modulepreload",a={},f="/runtime/vue2/",_=function(t,n){return!n||n.length===0?t():Promise.all(n.map(o=>{if(o=`${f}${o}`,o in a)return;a[o]=!0;const r=o.endsWith(".css"),s=r?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${o}"]${s}`))return;const i=document.createElement("link");if(i.rel=r?"stylesheet":m,r||(i.as="script",i.crossOrigin=""),i.href=o,document.head.appendChild(i),r)return new Promise((p,l)=>{i.addEventListener("load",p),i.addEventListener("error",()=>l(new Error(`Unable to preload CSS for ${o}`)))})})).then(()=>t())};var E=Vue.extend({data(){return{app:null,config:void 0,curPageId:"",selectedId:""}},computed:{pageConfig(){var e,t,n,o;return((t=(e=this.config)==null?void 0:e.items)==null?void 0:t.find(r=>r.id===this.curPageId))||((o=(n=this.config)==null?void 0:n.items)==null?void 0:o[0])}},provide(){return this.app=new d({config:this.config,platform:"editor"}),{app:this.app}},mounted(){var e;(e=globalThis.magic)==null||e.onRuntimeReady(this)},watch:{async pageConfig(){await this.$nextTick(),globalThis.magic.onPageElUpdate(document.querySelector(".magic-ui-page"))}},methods:{updateRootConfig(e){var t;console.log("update config",e),this.config=e,(t=this.app)==null||t.setConfig(e,this.curPageId)},updatePageId(e){var t;console.log("update page id",e),this.curPageId=e,(t=this.app)==null||t.setPage(e)},getSnapElementQuerySelector(){return"[class*=magic-ui][id]"},select(e){console.log("select config",e),this.selectedId=e;const t=document.getElementById(e);return t||this.$nextTick().then(()=>document.getElementById(e))},add({config:e}){var r;if(console.log("add config",e),!this.config)throw new Error("error");const t=c(this.selectedId,[this.config]),n=t.pop(),o=n!=null&&n.items?n:t.pop();if(!o)throw new Error("\u672A\u627E\u5230\u7236\u8282\u70B9");(r=o.items)==null||r.push(e)},update({config:e}){var s;if(console.log("update config",e),!this.config)throw new Error("error");const t=c(e.id,[this.config]),n=t.pop(),o=t.pop();if(!n)throw new Error("\u672A\u627E\u5230\u76EE\u6807\u8282\u70B9");if(!o)throw new Error("\u672A\u627E\u5230\u7236\u8282\u70B9");const r=(s=o.items)==null?void 0:s.findIndex(i=>i.id===n.id);o.items.splice(r,1,h(e))},sortNode({src:e,dist:t}){if(!this.config)throw new Error("error");const n=c(this.selectedId,[this.config]);n.pop();const o=n.pop();if(!o)return;const r=o.items.findIndex(i=>i.id===t);if(r<0)return;const s=o.items.findIndex(i=>i.id===e);o.items.splice(r,0,...o.items.splice(s,1))},remove({id:e}){var s;if(!this.config)throw new Error("error");const t=c(e,[this.config]),n=t.pop();if(!n)throw new Error("\u672A\u627E\u5230\u76EE\u6807\u5143\u7D20");const o=t.pop();if(!o)throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");const r=(s=o.items)==null?void 0:s.findIndex(i=>i.id===n.id);o.items.splice(r,1)}}}),v=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.pageConfig?n("magic-ui-page",{attrs:{config:e.pageConfig}}):e._e()},w=[];const u={};var x=g(E,v,w,!1,y,null,null,null);function y(e){for(let t in u)this[t]=u[t]}var I=function(){return x.exports}();const P="/tamgic-editor/playground/runtime/vue2/assets/components.js";_(()=>import(P),[]).then(()=>{const{components:e,plugins:t}=window.magicPresetComponents;Object.values(e).forEach(n=>{Vue.component(n.name,n)}),Object.values(t).forEach(n=>{Vue.use(n)}),new Vue({render:n=>n(I),el:"#app"})});
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vue2 Page</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||||
<script type="module" crossorigin src="/tmagic-editor/playground/runtime/vue2/assets/page.js"></script>
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue2/assets/resetcss.494d822a.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue2/assets/vueComponentNormalizer.e7d45796.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue2/assets/components.js">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue2/assets/resetcss.ced1f647.css">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue2/assets/page.5884789a.css">
|
||||
<script type="module" crossorigin src="/runtime/vue2/assets/page.js"></script>
|
||||
<link rel="modulepreload" href="/runtime/vue2/assets/resetcss.494d822a.js">
|
||||
<link rel="modulepreload" href="/runtime/vue2/assets/vueComponentNormalizer.e7d45796.js">
|
||||
<link rel="modulepreload" href="/runtime/vue2/assets/components.js">
|
||||
<link rel="stylesheet" href="/runtime/vue2/assets/resetcss.ced1f647.css">
|
||||
<link rel="stylesheet" href="/runtime/vue2/assets/page.5884789a.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vue2 Playground</title>
|
||||
|
||||
<script type="module" crossorigin src="/tmagic-editor/playground/runtime/vue2/assets/playground.js"></script>
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue2/assets/resetcss.494d822a.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue2/assets/vueComponentNormalizer.e7d45796.js">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue2/assets/resetcss.ced1f647.css">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue2/assets/playground.d0149121.css">
|
||||
<script type="module" crossorigin src="/runtime/vue2/assets/playground.js"></script>
|
||||
<link rel="modulepreload" href="/runtime/vue2/assets/resetcss.494d822a.js">
|
||||
<link rel="modulepreload" href="/runtime/vue2/assets/vueComponentNormalizer.e7d45796.js">
|
||||
<link rel="stylesheet" href="/runtime/vue2/assets/resetcss.ced1f647.css">
|
||||
<link rel="stylesheet" href="/runtime/vue2/assets/playground.d0149121.css">
|
||||
</head>
|
||||
<body style="font-size: 14px">
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { a as getNodePath, _ as _export_sfc } from "./plugin-vue_export-helper.a
|
||||
var playground_html_htmlProxy_index_0 = "";
|
||||
const scriptRel = "modulepreload";
|
||||
const seen = {};
|
||||
const base = "/tmagic-editor/playground/runtime/vue3/";
|
||||
const base = "/runtime/vue3/";
|
||||
const __vitePreload = function preload(baseModule, deps) {
|
||||
if (!deps || deps.length === 0) {
|
||||
return baseModule();
|
||||
@ -136,7 +136,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
}, null, 8, ["config"])) : Vue.createCommentVNode("", true);
|
||||
}
|
||||
var App = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
const componentUrl = "/tmagic-editor/playground/runtime/vue3/assets/components.js";
|
||||
const componentUrl = "/runtime/vue3/assets/components.js";
|
||||
__vitePreload(() => import(componentUrl), true ? [] : void 0).then(() => {
|
||||
const magicApp = Vue.createApp(App);
|
||||
const { components, plugins } = window.magicPresetComponents;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,12 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vue3 Page</title>
|
||||
<script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
|
||||
<script type="module" crossorigin src="/tmagic-editor/playground/runtime/vue3/assets/page.js"></script>
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue3/assets/resetcss.e39ac995.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue3/assets/plugin-vue_export-helper.adee6e2f.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue3/assets/components.js">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue3/assets/resetcss.52e41e6b.css">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue3/assets/page.f43f55a4.css">
|
||||
<script type="module" crossorigin src="/runtime/vue3/assets/page.js"></script>
|
||||
<link rel="modulepreload" href="/runtime/vue3/assets/resetcss.e39ac995.js">
|
||||
<link rel="modulepreload" href="/runtime/vue3/assets/plugin-vue_export-helper.adee6e2f.js">
|
||||
<link rel="modulepreload" href="/runtime/vue3/assets/components.js">
|
||||
<link rel="stylesheet" href="/runtime/vue3/assets/resetcss.52e41e6b.css">
|
||||
<link rel="stylesheet" href="/runtime/vue3/assets/page.f43f55a4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vue3 Playground</title>
|
||||
|
||||
<script type="module" crossorigin src="/tmagic-editor/playground/runtime/vue3/assets/playground.js"></script>
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue3/assets/resetcss.e39ac995.js">
|
||||
<link rel="modulepreload" href="/tmagic-editor/playground/runtime/vue3/assets/plugin-vue_export-helper.adee6e2f.js">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue3/assets/resetcss.52e41e6b.css">
|
||||
<link rel="stylesheet" href="/tmagic-editor/playground/runtime/vue3/assets/playground.830d3c1b.css">
|
||||
<script type="module" crossorigin src="/runtime/vue3/assets/playground.js"></script>
|
||||
<link rel="modulepreload" href="/runtime/vue3/assets/resetcss.e39ac995.js">
|
||||
<link rel="modulepreload" href="/runtime/vue3/assets/plugin-vue_export-helper.adee6e2f.js">
|
||||
<link rel="stylesheet" href="/runtime/vue3/assets/resetcss.52e41e6b.css">
|
||||
<link rel="stylesheet" href="/runtime/vue3/assets/playground.830d3c1b.css">
|
||||
</head>
|
||||
<body style="font-size: 14px">
|
||||
|
||||
|
||||
@ -51,8 +51,12 @@ export const initConfigByActId = async ({ actId }: { actId: number }) => {
|
||||
name: page.pageTitle,
|
||||
title: page.pageTitle,
|
||||
style: {
|
||||
height: 728,
|
||||
width: 375,
|
||||
height: '728',
|
||||
width: '375',
|
||||
position: 'relative',
|
||||
layout: 'absolute',
|
||||
left: 0,
|
||||
top: 0,
|
||||
},
|
||||
items: [],
|
||||
});
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<m-editor
|
||||
ref="editor"
|
||||
:menu="menu"
|
||||
:runtime-url="runtimeUrl"
|
||||
:component-group-list="componentList"
|
||||
@ -8,6 +9,7 @@
|
||||
:props-configs="magicPresetConfigs"
|
||||
:event-method-list="magicPresetEvents"
|
||||
:default-selected="editorDefaultSelected"
|
||||
:moveable-options="moveableOptions"
|
||||
></m-editor>
|
||||
</template>
|
||||
|
||||
@ -16,7 +18,10 @@ import { Component, computed, defineComponent, markRaw, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { Edit, FolderOpened, SwitchButton, Tickets } from '@element-plus/icons';
|
||||
|
||||
import type { MoveableOptions } from '@tmagic/editor';
|
||||
import { ComponentGroup } from '@tmagic/editor';
|
||||
import { NodeType } from '@tmagic/schema';
|
||||
import StageCore from '@tmagic/stage';
|
||||
import { asyncLoadJs } from '@tmagic/utils';
|
||||
|
||||
import editorApi from '@src/api/editor';
|
||||
@ -35,6 +40,7 @@ export default defineComponent({
|
||||
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const editor = ref();
|
||||
|
||||
const uiConfigs = computed(() => magicStore.get('uiConfigs'));
|
||||
const editorDefaultSelected = computed(() => magicStore.get('editorDefaultSelected'));
|
||||
@ -74,6 +80,7 @@ export default defineComponent({
|
||||
getActById();
|
||||
|
||||
return {
|
||||
editor,
|
||||
componentList,
|
||||
menu: topMenu(),
|
||||
uiConfigs,
|
||||
@ -82,6 +89,23 @@ export default defineComponent({
|
||||
magicPresetConfigs,
|
||||
magicPresetEvents,
|
||||
editorDefaultSelected,
|
||||
moveableOptions: (core?: StageCore): MoveableOptions => {
|
||||
const options: MoveableOptions = {};
|
||||
const id = core?.dr?.target?.id;
|
||||
|
||||
if (!id || !editor.value) return options;
|
||||
|
||||
const node = editor.value.editorService.getNodeById(id);
|
||||
|
||||
if (!node) return options;
|
||||
|
||||
const isPage = node.type === NodeType.PAGE;
|
||||
|
||||
options.draggable = !isPage;
|
||||
options.resizable = !isPage;
|
||||
|
||||
return options;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user