diff --git a/docs/src/admin/introduction.md b/docs/src/admin/introduction.md
index c514cbb3..0b42ca0b 100644
--- a/docs/src/admin/introduction.md
+++ b/docs/src/admin/introduction.md
@@ -12,23 +12,6 @@
-## 快速开始
-
-::: 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
diff --git a/magic-admin/web/public/runtime/react/assets/playground.js b/magic-admin/web/public/runtime/react/assets/playground.js
index 99d275f0..d61608a2 100644
--- a/magic-admin/web/public/runtime/react/assets/playground.js
+++ b/magic-admin/web/public/runtime/react/assets/playground.js
@@ -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)});
diff --git a/magic-admin/web/public/runtime/react/page.html b/magic-admin/web/public/runtime/react/page.html
index da5f3efb..12a16933 100644
--- a/magic-admin/web/public/runtime/react/page.html
+++ b/magic-admin/web/public/runtime/react/page.html
@@ -5,12 +5,12 @@
React Page
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/magic-admin/web/public/runtime/react/playground.html b/magic-admin/web/public/runtime/react/playground.html
index 96049ee8..2c724ab3 100644
--- a/magic-admin/web/public/runtime/react/playground.html
+++ b/magic-admin/web/public/runtime/react/playground.html
@@ -6,11 +6,11 @@
React Playground
-
-
-
-
-
+
+
+
+
+
diff --git a/magic-admin/web/public/runtime/vue2/assets/playground.js b/magic-admin/web/public/runtime/vue2/assets/playground.js
index 927a407c..69a77159 100644
--- a/magic-admin/web/public/runtime/vue2/assets/playground.js
+++ b/magic-admin/web/public/runtime/vue2/assets/playground.js
@@ -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"})});
diff --git a/magic-admin/web/public/runtime/vue2/page.html b/magic-admin/web/public/runtime/vue2/page.html
index 8a7ed938..189d3c98 100644
--- a/magic-admin/web/public/runtime/vue2/page.html
+++ b/magic-admin/web/public/runtime/vue2/page.html
@@ -5,12 +5,12 @@
Vue2 Page
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/magic-admin/web/public/runtime/vue2/playground.html b/magic-admin/web/public/runtime/vue2/playground.html
index ecc900d4..1c620812 100644
--- a/magic-admin/web/public/runtime/vue2/playground.html
+++ b/magic-admin/web/public/runtime/vue2/playground.html
@@ -6,11 +6,11 @@
Vue2 Playground
-
-
-
-
-
+
+
+
+
+
diff --git a/magic-admin/web/public/runtime/vue3/assets/playground.js b/magic-admin/web/public/runtime/vue3/assets/playground.js
index 23b25ead..71b40f36 100644
--- a/magic-admin/web/public/runtime/vue3/assets/playground.js
+++ b/magic-admin/web/public/runtime/vue3/assets/playground.js
@@ -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;
diff --git a/magic-admin/web/public/runtime/vue3/assets/playground.js.map b/magic-admin/web/public/runtime/vue3/assets/playground.js.map
index 523d3786..5a63eaf1 100644
--- a/magic-admin/web/public/runtime/vue3/assets/playground.js.map
+++ b/magic-admin/web/public/runtime/vue3/assets/playground.js.map
@@ -1 +1 @@
-{"version":3,"file":"playground.js","sources":["../../vite/preload-helper","../../src/playground/App.vue","../../src/playground/main.ts"],"sourcesContent":["const scriptRel = 'modulepreload';const seen = {};const base = '/tmagic-editor/playground/runtime/vue3/';export const __vitePreload = function preload(baseModule, deps) {\n // @ts-ignore\n if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {\n return baseModule();\n }\n return Promise.all(deps.map((dep) => {\n // @ts-ignore\n dep = `${base}${dep}`;\n // @ts-ignore\n if (dep in seen)\n return;\n // @ts-ignore\n seen[dep] = true;\n const isCss = dep.endsWith('.css');\n const cssSelector = isCss ? '[rel=\"stylesheet\"]' : '';\n // @ts-ignore check if the file is already preloaded by SSR markup\n if (document.querySelector(`link[href=\"${dep}\"]${cssSelector}`)) {\n return;\n }\n // @ts-ignore\n const link = document.createElement('link');\n // @ts-ignore\n link.rel = isCss ? 'stylesheet' : scriptRel;\n if (!isCss) {\n link.as = 'script';\n link.crossOrigin = '';\n }\n link.href = dep;\n // @ts-ignore\n document.head.appendChild(link);\n if (isCss) {\n return new Promise((res, rej) => {\n link.addEventListener('load', res);\n link.addEventListener('error', () => rej(new Error(`Unable to preload CSS for ${dep}`)));\n });\n }\n })).then(() => baseModule());\n}","\n \n\n\n\n\n\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createApp } from 'vue';\n\nimport App from './App.vue';\n\nconst componentUrl = '/tmagic-editor/playground/runtime/vue3/assets/components.js';\n\nimport(componentUrl).then(() => {\n const magicApp = createApp(App);\n const { components, plugins } = window.magicPresetComponents;\n\n Object.values(components).forEach((component: any) => {\n magicApp.component(component.name, component);\n });\n\n Object.values(plugins).forEach((plugin: any) => {\n magicApp.use(plugin);\n });\n\n magicApp.mount('#app');\n});\n"],"names":["Core"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"playground.js","sources":["../../vite/preload-helper","../../src/playground/App.vue","../../src/playground/main.ts"],"sourcesContent":["const scriptRel = 'modulepreload';const seen = {};const base = '/runtime/vue3/';export const __vitePreload = function preload(baseModule, deps) {\n // @ts-ignore\n if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {\n return baseModule();\n }\n return Promise.all(deps.map((dep) => {\n // @ts-ignore\n dep = `${base}${dep}`;\n // @ts-ignore\n if (dep in seen)\n return;\n // @ts-ignore\n seen[dep] = true;\n const isCss = dep.endsWith('.css');\n const cssSelector = isCss ? '[rel=\"stylesheet\"]' : '';\n // @ts-ignore check if the file is already preloaded by SSR markup\n if (document.querySelector(`link[href=\"${dep}\"]${cssSelector}`)) {\n return;\n }\n // @ts-ignore\n const link = document.createElement('link');\n // @ts-ignore\n link.rel = isCss ? 'stylesheet' : scriptRel;\n if (!isCss) {\n link.as = 'script';\n link.crossOrigin = '';\n }\n link.href = dep;\n // @ts-ignore\n document.head.appendChild(link);\n if (isCss) {\n return new Promise((res, rej) => {\n link.addEventListener('load', res);\n link.addEventListener('error', () => rej(new Error(`Unable to preload CSS for ${dep}`)));\n });\n }\n })).then(() => baseModule());\n}","\n \n\n\n\n\n\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createApp } from 'vue';\n\nimport App from './App.vue';\n\nconst componentUrl = '/runtime/vue3/assets/components.js';\n\nimport(componentUrl).then(() => {\n const magicApp = createApp(App);\n const { components, plugins } = window.magicPresetComponents;\n\n Object.values(components).forEach((component: any) => {\n magicApp.component(component.name, component);\n });\n\n Object.values(plugins).forEach((plugin: any) => {\n magicApp.use(plugin);\n });\n\n magicApp.mount('#app');\n});\n"],"names":["Core"],"mappings":"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"}
\ No newline at end of file
diff --git a/magic-admin/web/public/runtime/vue3/page.html b/magic-admin/web/public/runtime/vue3/page.html
index 3967ff57..29668058 100644
--- a/magic-admin/web/public/runtime/vue3/page.html
+++ b/magic-admin/web/public/runtime/vue3/page.html
@@ -5,12 +5,12 @@
Vue3 Page
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/magic-admin/web/public/runtime/vue3/playground.html b/magic-admin/web/public/runtime/vue3/playground.html
index 2ea543d0..a96967e2 100644
--- a/magic-admin/web/public/runtime/vue3/playground.html
+++ b/magic-admin/web/public/runtime/vue3/playground.html
@@ -6,11 +6,11 @@
Vue3 Playground
-
-
-
-
-
+
+
+
+
+
diff --git a/magic-admin/web/src/use/use-publish.ts b/magic-admin/web/src/use/use-publish.ts
index 802fc690..b949a530 100644
--- a/magic-admin/web/src/use/use-publish.ts
+++ b/magic-admin/web/src/use/use-publish.ts
@@ -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: [],
});
diff --git a/magic-admin/web/src/views/editor.vue b/magic-admin/web/src/views/editor.vue
index 8cb9fd2c..af05a857 100644
--- a/magic-admin/web/src/views/editor.vue
+++ b/magic-admin/web/src/views/editor.vue
@@ -1,5 +1,6 @@
@@ -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;
+ },
};
},
});