Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

babel.config.js

@@ -7,5 +7,6 @@ module.exports = {
       { libraryName: "ant-design-vue", libraryDirectory: "es", style: true },
       "antd",
     ],
+    "@babel/plugin-proposal-class-properties"
   ],
 };

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@ckeditor/ckeditor5-alignment": "^38.0.0",
     "@ckeditor/ckeditor5-basic-styles": "^38.0.0",
     "@ckeditor/ckeditor5-build-classic": "^38.0.1",

src/assets/icons/components/IconCroperr.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconCroperr = createIcon(<svg viewBox="0 0 15.143 14.943"><g transform="translate(-828.872 -93.985)"><g transform="translate(824.5 89.62)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" width="7.631" height="7.631" rx="1" transform="translate(5.072 11.177)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M30,6h4.579v4.579" transform="translate(-15.771 -0.928)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M6,30.79l2.335-1.751a1.145,1.145,0,0,1,1.412.03l3.5,2.866" transform="translate(-0.928 -15.035)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M34.579,6,30,10.579" transform="translate(-15.771 -0.928)"/></g><g transform="translate(823.572 88.692)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M7.483,6H6V7.507"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M16.028,6h1.921" transform="translate(-6.283)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M6,16v.664" transform="translate(0 -6.265)"/></g><g transform="translate(828.344 93.463)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M6,27.5H7.493V26.012" transform="translate(7.471 -12.537)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M30,16v1.444" transform="translate(-15.035 -6.695)"/><path fill="none" stroke="currentColor" stroke-linecap="round" d="M15.992,30h.66" transform="translate(-5.266 -15.035)"/></g></g></svg>)
+export const IconCroperr = createIcon(<svg  viewBox="0 0 34 34"><g transform="translate(-946 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(946 264)"/><g transform="translate(954.257 272.257)"><g transform="translate(0 0)"><rect fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" width="9.715" height="9.715" rx="1" transform="translate(0 7.772)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M30,6h5.829v5.829" transform="translate(-18.342 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M6,31.331,8.973,29.1a1.457,1.457,0,0,1,1.8.038l4.46,3.649" transform="translate(-6 -17.73)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M35.829,6,30,11.829" transform="translate(-18.342 -6)"/></g><g transform="translate(0 0)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M7.887,6H6V7.918" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M16.028,6h2.446" transform="translate(-11.26 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M6,16v.845" transform="translate(-6 -11.245)"/></g><g transform="translate(12.092 10.281)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M6,27.908H7.9v-1.9" transform="translate(-2.507 -20.703)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M30,16v1.838" transform="translate(-24.605 -16)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M15.992,30h.84" transform="translate(-15.992 -22.794)"/></g></g></g></svg>)

src/assets/icons/components/IconDelete.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconDelete = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-1070 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)"/><g transform="translate(1078.443 272.232)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" d="M15,8.328,15.57,5h7.416l.57,3.328" transform="translate(-10.721 -5)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M6,12H23.115" transform="translate(-6 -8.672)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" d="M23.361,12h0V26.209H11V12Z" transform="translate(-8.623 -8.672)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M19,35h4.754" transform="translate(-12.82 -20.834)"/></g></g></svg>)

src/assets/icons/components/IconLayerDown.tsx

@@ -1,27 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconLayerDown = createIcon(<svg viewBox="0 0 14.469 14.474">
-  <g transform="translate(-1332.776 -243.777)">
-    <g transform="translate(1327.276 238.277)">
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M7.483,6H6V7.507" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M7.493,27.5H6v-1.49" transform="translate(0 -12.537)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M6,27.5H7.493V26.012" transform="translate(7.471 -12.537)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M26,6H27.5V7.5" transform="translate(-12.531)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M16.028,6h1.487" transform="translate(-6.283)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M6,16v1.494"
-        transform="translate(0 -6.265)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M30,16v1.121" transform="translate(-15.035 -6.265)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" d="M15.992,30h1.5"
-        transform="translate(-6.26 -15.035)" />
-    </g>
-    <path fill="none" stroke="currentColor" stroke-linejoin="round"
-      d="M16162.748,4984.224v4.527h9v-8.966h-4.534" transform="translate(-14825 -4731)" />
-  </g>
-</svg>)
+export const IconLayerDown = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-1029 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1029 264)"/><g transform="translate(1037.428 272.423)"><g transform="translate(0)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.887,6H6V7.918" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.9,27.908H6v-1.9" transform="translate(-6 -16.496)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M6,27.908H7.9v-1.9" transform="translate(3.511 -16.496)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M26,6h1.9V7.909" transform="translate(-16.491 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M16.028,6h1.893" transform="translate(-11.26 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M6,16v1.9" transform="translate(-6 -11.245)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M30,16v1.427" transform="translate(-18.587 -11.245)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M15.992,30H17.9" transform="translate(-11.241 -18.587)"/></g><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" d="M16162.749,4985.436v5.764h11.451v-11.415h-5.77" transform="translate(-16157.056 -4974.045)"/></g></g></svg>)

src/assets/icons/components/IconLayerUp.tsx

@@ -1,24 +1,19 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconLayerUp = createIcon(<svg viewBox="0 0 14.469 14.474">
-  <g transform="translate(-5.5 -5.5)">
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M7.483,6H6V7.507" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M7.493,27.5H6v-1.49" transform="translate(0 -12.537)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M26,6H27.5V7.5" transform="translate(-12.531)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M16.028,6h1.487" transform="translate(-6.283)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M6,16v1.494"
-      transform="translate(0 -6.265)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M30,16v.56"
-      transform="translate(-15.035 -6.265)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M15.992,30h.75"
-      transform="translate(-6.26 -15.035)" />
-    <path fill="none" stroke="currentColor" stroke-linejoin="round"
-      d="M16162.748,4984.224v4.527h9v-8.966h-9Z" transform="translate(-16152.276 -4969.277)" />
-  </g>
+export const IconLayerUp = createIcon(<svg viewBox="0 0 34 34">
+    
+    <g transform="translate(-988 -264)">
+        <rect fill="none" width="34" height="34" rx="6" transform="translate(988 264)" />
+        <g transform="translate(996.428 272.423)">
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.887,6H6V7.918" transform="translate(-6 -6)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.9,27.908H6v-1.9" transform="translate(-6 -16.496)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M26,6h1.9V7.909" transform="translate(-16.491 -6)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M16.028,6h1.893" transform="translate(-11.26 -6)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M6,16v1.9" transform="translate(-6 -11.245)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M30,16v.713" transform="translate(-18.587 -11.245)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M15.992,30h.955" transform="translate(-11.241 -18.587)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" d="M16162.749,4985.436v5.764h11.451v-11.415h-11.451Z"
+                transform="translate(-16157.056 -4974.045)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconLock.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconLock = createIcon(<svg viewBox="0 0 14 14"><rect fill="none" width="14" height="14"/><g transform="translate(2.471 2.111)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" width="9.327" height="6.218" rx="2" transform="translate(0 3.73)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M14,7.73V6.636A2.636,2.636,0,0,1,16.636,4a2.742,2.742,0,0,1,2.209,1.2,2.434,2.434,0,0,1,.426,1.438V7.73" transform="translate(-11.864 -4)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M24,30v1.582" transform="translate(-19.228 -23.803)"/></g></svg>)

src/assets/icons/components/IconTextLink.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextLink = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-1070 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)"/><g transform="translate(1075.875 284.886) rotate(-45)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M8.943,10.238H5.119A5.134,5.134,0,0,1,0,5.119H0A5.134,5.134,0,0,1,5.119,0H8.943" transform="translate(0 0)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M0,10.238H3.824A5.134,5.134,0,0,0,8.943,5.119h0A5.134,5.134,0,0,0,3.824,0H0" transform="translate(12.286 0)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M0,0H7.1" transform="translate(1084.489 283.511) rotate(-45)"/></g></svg>)

src/assets/icons/components/IconUnlock.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconUnlock = createIcon(<svg  viewBox="0 0 14 14"><rect fill="none" width="14" height="14"/><g transform="translate(2.471 2.111)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" width="9.327" height="6.218" rx="2" transform="translate(0 3.73)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M14.219,5.582A2.532,2.532,0,0,1,16.636,4a2.742,2.742,0,0,1,2.209,1.2,2.434,2.434,0,0,1,.426,1.438V7.73" transform="translate(-11.864 -4)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M24,30v1.582" transform="translate(-19.228 -23.803)"/></g></svg>)

src/assets/icons/index.ts

@@ -20,6 +20,7 @@ export * from "./components/IconCombination";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";
+export * from "./components/IconDelete";
 export * from "./components/IconEmpty";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
@@ -29,6 +30,7 @@ export * from "./components/IconImage";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayers";
 export * from "./components/IconLayerUp";
+export * from "./components/IconLock";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
@@ -52,12 +54,14 @@ export * from "./components/IconTextJustify";
 export * from "./components/IconTextLeft";
 export * from "./components/IconTextLetterSpacing";
 export * from "./components/IconTextLineHeight";
+export * from "./components/IconTextLink";
 export * from "./components/IconTextRight";
 export * from "./components/IconTextSize";
 export * from "./components/IconTextUnderline";
 export * from "./components/IconTpl";
 export * from "./components/IconTransfer";
 export * from "./components/IconUngroup";
+export * from "./components/IconUnlock";
 export * from "./components/IconVideo";
 export * from "./components/IconWechat";
 export * from "./components/IconWidth";

src/assets/icons/svg/croperr.svg

@@ -1 +1 @@
-<svg viewBox="0 0 15.143 14.943"><g transform="translate(-828.872 -93.985)"><g transform="translate(824.5 89.62)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" width="7.631" height="7.631" rx="1" transform="translate(5.072 11.177)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M30,6h4.579v4.579" transform="translate(-15.771 -0.928)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M6,30.79l2.335-1.751a1.145,1.145,0,0,1,1.412.03l3.5,2.866" transform="translate(-0.928 -15.035)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M34.579,6,30,10.579" transform="translate(-15.771 -0.928)"/></g><g transform="translate(823.572 88.692)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M7.483,6H6V7.507"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M16.028,6h1.921" transform="translate(-6.283)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M6,16v.664" transform="translate(0 -6.265)"/></g><g transform="translate(828.344 93.463)"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M6,27.5H7.493V26.012" transform="translate(7.471 -12.537)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" d="M30,16v1.444" transform="translate(-15.035 -6.695)"/><path fill="none" stroke="currentColor" stroke-linecap="round" d="M15.992,30h.66" transform="translate(-5.266 -15.035)"/></g></g></svg>
+<svg  viewBox="0 0 34 34"><g transform="translate(-946 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(946 264)"/><g transform="translate(954.257 272.257)"><g transform="translate(0 0)"><rect fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" width="9.715" height="9.715" rx="1" transform="translate(0 7.772)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M30,6h5.829v5.829" transform="translate(-18.342 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M6,31.331,8.973,29.1a1.457,1.457,0,0,1,1.8.038l4.46,3.649" transform="translate(-6 -17.73)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M35.829,6,30,11.829" transform="translate(-18.342 -6)"/></g><g transform="translate(0 0)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M7.887,6H6V7.918" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M16.028,6h2.446" transform="translate(-11.26 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M6,16v.845" transform="translate(-6 -11.245)"/></g><g transform="translate(12.092 10.281)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M6,27.908H7.9v-1.9" transform="translate(-2.507 -20.703)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" d="M30,16v1.838" transform="translate(-24.605 -16)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M15.992,30h.84" transform="translate(-15.992 -22.794)"/></g></g></g></svg>

src/assets/icons/svg/delete.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 34 34"><g transform="translate(-1070 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)"/><g transform="translate(1078.443 272.232)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" d="M15,8.328,15.57,5h7.416l.57,3.328" transform="translate(-10.721 -5)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M6,12H23.115" transform="translate(-6 -8.672)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" d="M23.361,12h0V26.209H11V12Z" transform="translate(-8.623 -8.672)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M19,35h4.754" transform="translate(-12.82 -20.834)"/></g></g></svg>

src/assets/icons/svg/layerDown.svg

@@ -1,25 +1 @@
-<svg viewBox="0 0 14.469 14.474">
-  <g transform="translate(-1332.776 -243.777)">
-    <g transform="translate(1327.276 238.277)">
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M7.483,6H6V7.507" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M7.493,27.5H6v-1.49" transform="translate(0 -12.537)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M6,27.5H7.493V26.012" transform="translate(7.471 -12.537)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M26,6H27.5V7.5" transform="translate(-12.531)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M16.028,6h1.487" transform="translate(-6.283)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M6,16v1.494"
-        transform="translate(0 -6.265)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-        d="M30,16v1.121" transform="translate(-15.035 -6.265)" />
-      <path fill="none" stroke="currentColor" stroke-linecap="round" d="M15.992,30h1.5"
-        transform="translate(-6.26 -15.035)" />
-    </g>
-    <path fill="none" stroke="currentColor" stroke-linejoin="round"
-      d="M16162.748,4984.224v4.527h9v-8.966h-4.534" transform="translate(-14825 -4731)" />
-  </g>
-</svg>
+<svg viewBox="0 0 34 34"><g transform="translate(-1029 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1029 264)"/><g transform="translate(1037.428 272.423)"><g transform="translate(0)"><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.887,6H6V7.918" transform="translate(-6 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.9,27.908H6v-1.9" transform="translate(-6 -16.496)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M6,27.908H7.9v-1.9" transform="translate(3.511 -16.496)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M26,6h1.9V7.909" transform="translate(-16.491 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M16.028,6h1.893" transform="translate(-11.26 -6)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M6,16v1.9" transform="translate(-6 -11.245)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M30,16v1.427" transform="translate(-18.587 -11.245)"/><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M15.992,30H17.9" transform="translate(-11.241 -18.587)"/></g><path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" d="M16162.749,4985.436v5.764h11.451v-11.415h-5.77" transform="translate(-16157.056 -4974.045)"/></g></g></svg>

src/assets/icons/svg/layerUp.svg

@@ -1,22 +1,17 @@
-<svg viewBox="0 0 14.469 14.474">
-  <g transform="translate(-5.5 -5.5)">
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M7.483,6H6V7.507" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M7.493,27.5H6v-1.49" transform="translate(0 -12.537)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M26,6H27.5V7.5" transform="translate(-12.531)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M16.028,6h1.487" transform="translate(-6.283)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M6,16v1.494"
-      transform="translate(0 -6.265)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-      d="M30,16v.56"
-      transform="translate(-15.035 -6.265)" />
-    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M15.992,30h.75"
-      transform="translate(-6.26 -15.035)" />
-    <path fill="none" stroke="currentColor" stroke-linejoin="round"
-      d="M16162.748,4984.224v4.527h9v-8.966h-9Z" transform="translate(-16152.276 -4969.277)" />
-  </g>
+<svg viewBox="0 0 34 34">
+    
+    <g transform="translate(-988 -264)">
+        <rect fill="none" width="34" height="34" rx="6" transform="translate(988 264)" />
+        <g transform="translate(996.428 272.423)">
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.887,6H6V7.918" transform="translate(-6 -6)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M7.9,27.908H6v-1.9" transform="translate(-6 -16.496)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M26,6h1.9V7.909" transform="translate(-16.491 -6)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M16.028,6h1.893" transform="translate(-11.26 -6)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M6,16v1.9" transform="translate(-6 -11.245)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" stroke-linejoin="round" d="M30,16v.713" transform="translate(-18.587 -11.245)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linecap="round" d="M15.992,30h.955" transform="translate(-11.241 -18.587)" />
+            <path fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" d="M16162.749,4985.436v5.764h11.451v-11.415h-11.451Z"
+                transform="translate(-16157.056 -4974.045)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/lock.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14 14"><rect fill="none" width="14" height="14"/><g transform="translate(2.471 2.111)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" width="9.327" height="6.218" rx="2" transform="translate(0 3.73)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M14,7.73V6.636A2.636,2.636,0,0,1,16.636,4a2.742,2.742,0,0,1,2.209,1.2,2.434,2.434,0,0,1,.426,1.438V7.73" transform="translate(-11.864 -4)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M24,30v1.582" transform="translate(-19.228 -23.803)"/></g></svg>

src/assets/icons/svg/textLink.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 34 34"><g transform="translate(-1070 -264)"><rect fill="none" width="34" height="34" rx="6" transform="translate(1070 264)"/><g transform="translate(1075.875 284.886) rotate(-45)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M8.943,10.238H5.119A5.134,5.134,0,0,1,0,5.119H0A5.134,5.134,0,0,1,5.119,0H8.943" transform="translate(0 0)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" stroke-miterlimit="10" d="M0,10.238H3.824A5.134,5.134,0,0,0,8.943,5.119h0A5.134,5.134,0,0,0,3.824,0H0" transform="translate(12.286 0)"/></g><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.2px" d="M0,0H7.1" transform="translate(1084.489 283.511) rotate(-45)"/></g></svg>

src/assets/icons/svg/unlock.svg

@@ -0,0 +1 @@
+<svg  viewBox="0 0 14 14"><rect fill="none" width="14" height="14"/><g transform="translate(2.471 2.111)"><rect fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" width="9.327" height="6.218" rx="2" transform="translate(0 3.73)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M14.219,5.582A2.532,2.532,0,0,1,16.636,4a2.742,2.742,0,0,1,2.209,1.2,2.434,2.434,0,0,1,.426,1.438V7.73" transform="translate(-11.864 -4)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="0.8px" stroke-linecap="round" d="M24,30v1.582" transform="translate(-19.228 -23.803)"/></g></svg>

src/modules/editor/components/CompUI/basicUI/Image/component.tsx

@@ -12,7 +12,7 @@ export const Component = defineComponent({
   setup(props) {
     const comp = useCompData(props.compId);
     const { store, controls } = useEditor();
-    const img = useImage(() => ({ value: comp.value, size: comp.layout.size }));
+    const img = useImage(() => ({ value: comp.value, size: comp.layout.size.slice(0, 2) as number[] }));
 
     async function changeVal() {
       if (!store.isEditMode) return;

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -7,6 +7,7 @@ import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import { PageMusic } from "./PageMusic";
 import { Select } from "ant-design-vue";
 import { MusicOptions } from "./localMusic";
+import { css } from "@linaria/core";
 const styleColumns = (muisc?: string): ColumnItem[] => {
   return [
     {
@@ -56,15 +57,21 @@ export const PageForm = defineComponent({
       });
 
       return (
-        <>
-          <div>页面样式</div>
+        <div class={formStyle}>
+          <div class="text-white">页面样式</div>
           <FormUI
             data={props.component}
             columns={styleColumns(curValue?.value || "")}
             onChange={changeVal}
           />
-        </>
+        </div>
       );
     };
   },
 });
+
+const formStyle = css`
+  .item_label {
+    color: #A9ABAF !important;
+  }
+`

src/modules/editor/components/CompUI/basicUI/Page/component.tsx

@@ -30,11 +30,14 @@ export const Component = defineComponent({
         style.height = "100%";
       }
 
-      const contextStyle:any = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
-      if (!store.shortPage.isMoving) {
-        contextStyle.transition = "transform .4s ease-out";
+      let contextStyle:any = null;
+      if (store.rootPage.value.pageMode == "short") {
+        contextStyle = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
+        if (!store.shortPage.isMoving) {
+          contextStyle.transition = "transform .4s ease-out";
+        }
       }
-
+      
       return (
         <div
           ref={compRef}

src/modules/editor/components/CompUI/basicUI/Page/index.ts

@@ -1,3 +1,4 @@
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { PageForm } from "./PageForm";
 
@@ -14,7 +15,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
-    size: [750, 800],
+    size: [...(Design_Page_Size as [number, number])],
     background: {
       color: "#ffffff",
     },

src/modules/editor/components/CompUI/basicUI/Polygon/index.ts

@@ -3,6 +3,8 @@ import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
 import { InputNumber, Switch } from "ant-design-vue";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
+import toolbarUI from "./toolbarUI";
+import toolbarRight from "./toolbarRight";
 
 export { Component } from "./component";
 
@@ -59,5 +61,8 @@ export const Form = createAttrsForm([
     component: "Switch",
     isVisible: (value, data) => data?.value?.isFill == true,
   },
-  
+  {
+    dataIndex: "value.points",
+    component: toolbarRight,
+  },
 ]);

src/modules/editor/components/CompUI/basicUI/Polygon/toolbarRight.tsx

@@ -0,0 +1,68 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { Button, Divider, InputNumber, Select } from "ant-design-vue";
+import { defineComponent, reactive, effect, watch } from "vue";
+import { any, array, string } from "vue-types";
+
+import ToolbarsUI from "./toolbarUI";
+import Slider from "../../formItems/Slider";
+import { ToolbarItem } from "@/modules/editor/objects/Toolbars/default";
+import _ from "lodash";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+
+
+export default defineComponent({
+    props: {
+        value: array<any>()
+    },
+
+    emits: ["change"],
+    setup(props, { emit }) {
+        return () => {
+            const points = props.value || [];
+            const options = points.map((item: any, index: number) => { return { label: "顶点" + (index + 1), value: index } }) || [];
+            const state = editState;
+
+            return (
+                <div class="flex w-full flex-col">
+                    <Divider style={{margin: "10px 0"}}></Divider>
+
+                    <div class="flex items-center">
+                        <span class="w-70px">
+                            锚点选择
+                        </span>
+                        <Select value={editState.index} options={options} onChange={v => {
+                            editState.index = v as number;
+                        }}>
+                        </Select>
+                    </div>
+                    {
+                        points.length > 0 && <div class="flex items-center mt-10px">
+                            <span class="w-70px">宽度偏移</span> 
+                            <Slider  value={points[state.index][0]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = points.slice(0);
+                                ps[state.index][0] = v;
+                                emit("change", ps);
+                            }} />
+                        </div>
+                    }
+                    {
+                        points.length > 0 && <div class="flex items-center">
+                            <span class="w-70px" >高度偏移</span> <Slider value={points[state.index][1]} min={0} max={1} step={0.01} onChange={(v) => {
+                                const ps = points.slice(0);
+                                ps[state.index][1] = v;
+                                emit("change", ps);
+                            }} />
+                        </div>
+                    }
+                </div>
+            )
+        }
+    },
+})
+
+const editState = reactive({
+    index: 0
+})
+
+export { editState };

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -1,8 +1,8 @@
 import { IconRotate , IconMove} from "@/assets/icons";
-import { CompToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
-import { defineComponent, onMounted, onUnmounted, ref, nextTick, reactive, watch } from "vue";
+import { defineComponent, ref, nextTick, reactive, watch } from "vue";
 import { useEditor } from "../../../..";
+import { LiveToolbars } from "@/modules/editor/objects/Toolbars/liveTools";
 
 
 export const SelectTransfer = defineComponent({
@@ -15,18 +15,11 @@ export const SelectTransfer = defineComponent({
   
     const state = reactive({
        toolbarW: 0,
-       toolbarOpts: [] as any[],
     })
 
     watch(()=>[store.selectId, store.selected], ()=>{
       console.log("changing--")
-      if (store.selected.length == 1) {
-        const comp = store.compMap[store.selected[0]];
-        //@ts-ignore
-        state.toolbarOpts = CompToolbars[comp.compKey] || CompToolbars.default;
-      }  else {
-        state.toolbarOpts = CompToolbars.MultiSelector;
-      }
+   
       nextTick(()=>{
         nextTick(()=>{
           if (!toolbarRef.value) {
@@ -48,7 +41,11 @@ export const SelectTransfer = defineComponent({
 
       const w :any = selectCtrl.objContainer?.getBound();
       const isTextEdit = selectCtrl.selected.length == 1 && selectCtrl.selected[0].comp.compKey == "Text";
-  
+      let yTop = w?.y;
+      if ( yTop < 0) {
+        yTop = 0;
+      }
+
       return (
         <div
           class={[
@@ -59,17 +56,17 @@ export const SelectTransfer = defineComponent({
             top: transferStyle.baseCardTop
           }}
         >
-          {/* <div
+          <div
             id= "toolbar"
             class={toolbarStyle}
             style={{
-              top: w?.y + "px",
+              top: yTop + "px",
               left: (w?.x + w?.width / 2.0 - state.toolbarW / 2.0)  + "px",
             }}
             ref= {toolbarRef}
           >
             {
-              state.toolbarOpts.map((item) => {
+              LiveToolbars.map((item) => {
                 return item.getVisible.call(editor, comp) ? (
                   <item.component
                     class="p-4px"
@@ -79,7 +76,7 @@ export const SelectTransfer = defineComponent({
                 ) : null;
               })
             }
-          </div> */}
+          </div>
 
           <div
             class={["absolute", selctRectStyle]}
@@ -283,8 +280,13 @@ const toolbarStyle = css`
   position: absolute;
   top: 0;
   left: 50%;
-  transform: translate(0%, -60px);
+  transform: translate(0%, -45px);
+  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
   z-index: 999;
+  color: black;
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
 `;
 
 const resizeHeightBtnCls = css`

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -3,10 +3,11 @@ import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { css } from "@linaria/core";
 import { IconDelete } from "@queenjs/icons";
 import { defineComponent, onMounted, ref } from "vue";
-import { string ,bool} from "vue-types";
+import { string, bool } from "vue-types";
 import { useEditor } from "../../..";
-import { useCompRef , useCompEditLayerRef} from "./hooks";
+import { useCompRef, useCompEditLayerRef } from "./hooks";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 
 export const View = defineComponent({
   props: {
@@ -17,7 +18,9 @@ export const View = defineComponent({
   setup(props, { slots, emit }) {
     const { store, actions, helper, controls } = useEditor();
     const compRef = useCompRef(props.compId);
-    const editorLayerRef = props.editlayer? useCompEditLayerRef(props.compId) : ref();
+    const editorLayerRef = props.editlayer
+      ? useCompEditLayerRef(props.compId)
+      : ref();
 
     return () => {
       const comp = helper.findComp(props.compId);
@@ -30,18 +33,23 @@ export const View = defineComponent({
       const m = obj.worldTransform.clone();
       m.invert();
 
-      let isFocus = store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId;
+      let isFocus =
+        store.isEditMode &&
+        store.selected.length > 1 &&
+        store.lastSelected == props.compId;
       isFocus = isFocus || store.currCompId == props.compId;
-       
+
       const style = helper.createStyle(comp.layout, comp);
       const page = helper.findRootComp() as DesignComp;
 
-      if (isStreamCard && page.value.pageMode == "short" && store.isPreview) {
+      if (isStreamCard && page.value.pageMode == "short" && store.isDisplay) {
         //  const cards = store.streamCardIds;
         //  const index = cards.indexOf(props.compId)
         //  style.position = "absolute";
         //  style.top = index * 100  + "vh";
-         style.height = "100vh"
+        style.height = helper.designToNaturalSize(Design_Page_Size[1], {
+          adaptiveH: true,
+        });
       }
 
       if (comp.anim && comp.anim.transition) {
@@ -53,10 +61,12 @@ export const View = defineComponent({
           ref={compRef}
           class={[
             viewStyle,
-            store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
+            store.isEditMode &&
+              controls.selectCtrl._state != 0 &&
+              editCompStyle,
             isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
-            isFocus  && AnchorCompStyle
+            isFocus && AnchorCompStyle,
           ]}
           style={style}
           onClick={(e) => {
@@ -81,13 +91,15 @@ export const View = defineComponent({
             {slots.default?.()}
           </div>
 
-          {store.isEditMode && isStreamCard && store.currStreamCardId == props.compId && <Hudop compId={props.compId} />}
+          {store.isEditMode &&
+            isStreamCard &&
+            store.currStreamCardId == props.compId && (
+              <Hudop compId={props.compId} />
+            )}
 
-          {
-             store.isEditMode && props.editlayer && <div ref={editorLayerRef} class={editAreaStyle}>
-                
-             </div>
-          }
+          {store.isEditMode && props.editlayer && (
+            <div ref={editorLayerRef} class={editAreaStyle}></div>
+          )}
         </div>
       );
     };
@@ -192,13 +204,13 @@ const editAreaStyle = css`
   width: 100%;
   height: 100%;
   pointer-events: none;
-`
+`;
 
 const editAreaTestStyle = css`
-   position: absolute;
-   top: 0;
+  position: absolute;
+  top: 0;
   left: 0;
   width: 100px;
   height: 100px;
   background-color: red;
-`
+`;

src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -22,7 +22,7 @@ export function useCompRef(compId: string) {
       compRef.value.compKey= comp.compKey;
     }
 
-    if (comp?.compKey == "Page" && store.isPreview && store.rootPage.value.pageMode == "short") {
+    if (comp?.compKey == "Page" && !store.isEditMode && store.rootPage.value.pageMode == "short") {
       let downY = 0;
       compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
           //  e.preventDefault();

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -21,7 +21,7 @@ export const Component = createUIComp({
       });
     }
 
-    if (editor.store.isPreview) {
+    if (!editor.store.isEditMode) {
       watch(
         () => editor.store.compPids[props.compId],
         () => {

src/modules/editor/components/CompUI/defines/align.tsx

@@ -0,0 +1,60 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { CompAlignTools } from "@/modules/editor/objects/Toolbars/liveTools";
+import { css } from "@linaria/core";
+import { defineComponent, reactive, watchEffect } from "vue";
+import { string } from "vue-types";
+
+export default defineComponent({
+  props: {
+    value: string(),
+  },
+  setup(props) {
+
+    const editor = useEditor();
+    const comp = editor.helper.findComp(props.value as string) as DesignComp;
+    console.log("align id=>", props.value, comp);
+    return () => {
+      return (
+        <div class={AlignToolsStyle}>
+            <div class="row">
+            {
+                CompAlignTools.Left.map((item) => {
+                    return item.getVisible.call(editor, comp) ? (
+                      <item.component
+                        class="p-4px"
+                        value={item.getValue?.(comp)}
+                        onClick={() => item.onClick.call(editor, comp)}
+                      />
+                    ) : null;
+                  })
+            }
+            </div>
+            <div class="row ml-12px">
+            {
+                CompAlignTools.right.map((item) => {
+                    return item.getVisible.call(editor, comp) ? (
+                      <item.component
+                        class="p-4px"
+                        value={item.getValue?.(comp)}
+                        onClick={() => item.onClick.call(editor, comp)}
+                      />
+                    ) : null;
+                  })
+            }
+            </div>
+        </div>
+      );
+    };
+  },
+});
+
+const AlignToolsStyle = css`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  .row {
+    background: #303030;
+    border-radius: 4px 4px 4px 4px;
+  }
+`;

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -7,17 +7,23 @@ import { Size } from "../formItems/Size";
 import Slider from "../formItems/Slider";
 import { createColorOpts } from "./formOpts/createColorOpts";
 import { Divider } from "ant-design-vue";
-import { GroupNumber } from "../formItems/GroupNumber";
+import Align from "./align";
+import { css } from "@linaria/core";
 
 export const layoutColumns: ColumnItem[] = [
   {
-    label: "尺寸",
+    // label: "尺寸",
     dataIndex: "layout.size",
-    component: GroupNumber,
+    component: Size,
     props: {
       labels: ["宽度", "高度"],
     },
   },
+  {
+    label: "对齐",
+    component: Align,
+    dataIndex: "id",
+  },
   // {
   //   label: "对齐",
   //   dataIndex: "layout.alignSelf",
@@ -81,24 +87,11 @@ export const layoutColumns: ColumnItem[] = [
   //     ),
   //   },
   // },
-  {
-    label: "透明度",
-    dataIndex: "layout.opacity",
-    component: Slider,
-    isVisible: (value, data) =>
-      ["Web3D", "Video"].includes(data.compKey) ? false : true,
-    props: {
-      defaultValue: 1,
-      min: 0,
-      max: 1,
-      step: 0.01,
-    },
-  },
-  {
-    label: "锁定",
-    dataIndex: "layout.locked",
-    component: "Switch",
-  },
+  // {
+  //   label: "锁定",
+  //   dataIndex: "layout.locked",
+  //   component: "Switch",
+  // },
 ];
 
 export const bdColumns: ColumnItem[] = [
@@ -153,6 +146,19 @@ export const bgColumns: ColumnItem[] = [
     dataIndex: "layout.background.color",
     ...createColorOpts(),
   },
+  {
+    label: "透明度",
+    dataIndex: "layout.opacity",
+    component: Slider,
+    isVisible: (value, data) =>
+      ["Web3D", "Video"].includes(data.compKey) ? false : true,
+    props: {
+      defaultValue: 1,
+      min: 0,
+      max: 1,
+      step: 0.01,
+    },
+  },
   // {
   //   label: "背景图片",
   //   dataIndex: "background.image",
@@ -224,10 +230,10 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
       return () => {
         const { component } = props;
         return (
-          <div>
+          <div class={formStyle}>
             {valueColumns.length ? (
               <>
-                <div>属性</div>
+                <div> <span class="text-white">属性</span></div>
                 <FormUI
                   data={component}
                   columns={valueColumns}
@@ -237,16 +243,17 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
               </>
             ) : null}
             {columnsUI && <columnsUI component={component} />}
-            <div>布局</div>
+            <div><span class="text-white">布局</span></div>
             <FormUI
               data={component}
               columns={layoutColumns}
+              style={{color: "red"}}
               onChange={changeVal}
             />
             {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
               <>
                 <Divider></Divider>
-                <div>背景</div>
+                <div> <span class="text-white">背景</span> </div>
                 <FormUI
                   data={component}
                   columns={bgColumns}
@@ -257,7 +264,7 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
             {["Text", "Image", "Map"].includes(component.compKey) ? (
               <>
                 <Divider></Divider>
-                <div>边框</div>
+                <div><span class="text-white">边框</span></div>
                 <FormUI
                   data={component}
                   columns={bdColumns}
@@ -271,3 +278,10 @@ export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
     },
   });
 }
+
+const formStyle = css`
+
+  .item_label {
+    color: #A9ABAF !important;
+  }
+`

src/modules/editor/components/CompUI/formItems/Size.tsx

@@ -1,54 +1,90 @@
+import { CompSizeOpts } from "@/modules/editor/objects/DesignTemp/creates/CompSize";
 import { InputNumber, Select } from "ant-design-vue";
-import { defineComponent, reactive } from "vue";
+import { defineComponent } from "vue";
 import { any } from "vue-types";
 
-const labels = ["宽度", "高度"];
 const selectOptions = [
-  { value: "px", label: "像素" },
-  { value: "%", label: "百分比" },
+  { value: "px", label: "像素", options: { step: 1 } },
+  { value: "%", label: "比例", options: { step: 0.1, max: 100, min: 0 } },
 ];
 
 export const Size = defineComponent({
   props: {
-    value: any<number[]>().def([]),
+    value: any<[number, number, string?, string?]>().def([0, 0]),
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const state = reactive({
-      unit: "px",
-    });
+    const CompSizeOptsList = [CompSizeOpts.w, CompSizeOpts.h];
 
-    function changeVal(index: number, v: any) {
-      // const { value } = props;
-      // value[index] = parseInt(v) || 0;
-      // emit("change", value);
+    function changeVal(unit: any, index: number, v: any) {
+      const { value } = props;
+      value[index] = parseFloat(v) || 0;
+      if (unit === "%") {
+        value[index] = CompSizeOptsList[index].getPxSize(
+          value[index] as number
+        );
+      }
+      emit("change", value);
+    }
+
+    function changeUnit(index: number, unit: any) {
+      const { value } = props;
+      value[index + 2] = unit;
+      emit("change", value);
+    }
+
+    function fmtVal(val: number, unit: string, index: number) {
+      switch (unit) {
+        case "px":
+          return val.toFixed(0);
+        case "%":
+          return CompSizeOptsList[index].getVSize(val).toFixed(1);
+        default:
+          return "";
+      }
     }
 
     return () => {
-      let values = [...props.value];
+      const values = props.value.slice(0, 2) as number[];
+      const units = props.value.slice(2) as string[];
 
       return (
         <div class="flex space-x-10px">
-          {values.map((value, i) => (
-            <div key={i}>
-              <div class="mb-5px">{labels[i]}</div>
+          {values.map((value, i) => {
+            const unit = units[i] || selectOptions[0].value;
+            const inputOpts =
+              selectOptions.find((d) => d.value === unit)?.options || {};
+            return (
               <InputNumber
-                controls={false}
-                value={value}
-                onChange={changeVal.bind(null, i)}
-              />
-            </div>
-          ))}
-          <div>
-            <div class="mb-5px">单位</div>
-            <Select
-              value={state.unit}
-              class="min-w-85px"
-              options={selectOptions}
-              // @ts-ignore
-              onChange={(v) => (state.unit = v)}
-            ></Select>
-          </div>
+                key={i + unit}
+                value={fmtVal(value as number, unit, i)}
+                onChange={changeVal.bind(null, unit, i)}
+                {...inputOpts}
+              >
+                {{
+                  addonBefore() {
+                    return (
+                      <span class="-mx-8px">
+                        {CompSizeOptsList[i].label}
+                        <Select
+                          value={unit}
+                          onChange={changeUnit.bind(null, i)}
+                        >
+                          {selectOptions.map((d) => {
+                            return (
+                              <Select.Option key={d.value}>
+                                {d.value === "%" ? CompSizeOptsList[i].vUnit : d.value}
+                              </Select.Option>
+                            );
+                          })}
+                        </Select>
+                      </span>
+                    );
+                  },
+                }}
+              </InputNumber>
+            );
+          })}
         </div>
       );
     };

src/modules/editor/components/TipIcons/index.ts

@@ -25,11 +25,11 @@ import {
   IconAlignYBottom,
   IconWidth,
   IconHeight,
+  IconDelete,
 } from "@/assets/icons";
 import {
   IconCamera,
   IconCube,
-  IconDelete,
   IconEdit,
   IconEyeOff,
   IconEyeOn,
@@ -83,7 +83,7 @@ export const TipIcons = {
     tips: ["锁定", "未锁定"],
   }),
   Delete: createTipIcon({
-    icons: [IconDelete],
+    icons: [FontSize(IconDelete, 26)],
     tips: ["删除"],
   }),
   Copy: createTipIcon({
@@ -107,11 +107,11 @@ export const TipIcons = {
     tips: ["重做(Ctrl+Shift+Z)"],
   }),
   LayerUp: createTipIcon({
-    icons: [IconLayerUp],
+    icons: [FontSize(IconLayerUp, 26)],
     tips: ["层级上移"],
   }),
   LayerDown: createTipIcon({
-    icons: [IconLayerDown],
+    icons: [FontSize(IconLayerDown, 26)],
     tips: ["层级下移"],
   }),
   ParentComp: createTipIcon({
@@ -139,11 +139,11 @@ export const TipIcons = {
     tips: ["确定"],
   }),
   Cropper: createTipIcon({
-    icons: [IconCroperr],
+    icons: [FontSize(IconCroperr, 26)],
     tips: ["裁剪"],
   }),
   AlignXLeft: createTipIcon({
-    icons: [FontSize(IconAlignXLeft,28)],
+    icons: [FontSize(IconAlignXLeft,26)],
     tips: ["左对齐"],
   }),
   AlignXCenter: createTipIcon({
@@ -151,27 +151,27 @@ export const TipIcons = {
     tips: ["横向居中对齐"],
   }),
   AlignXRight: createTipIcon({
-    icons: [FontSize(IconAlignXRight, 28)],
+    icons: [FontSize(IconAlignXRight, 26)],
     tips: ["右对齐"],
   }),
   AlignXBetween: createTipIcon({
-    icons: [FontSize(IconAlignXBetween, 28)],
+    icons: [FontSize(IconAlignXBetween, 26)],
     tips: ["横向均匀排布"],
   }),
   AlignYTop: createTipIcon({
-    icons: [FontSize(IconAlignYTop, 28)],
+    icons: [FontSize(IconAlignYTop, 26)],
     tips: ["顶对齐"],
   }),
   AlignYCenter: createTipIcon({
-    icons: [FontSize(IconAlginYCenter, 28)],
+    icons: [FontSize(IconAlginYCenter, 26)],
     tips: ["纵向居中对齐"],
   }),
   AlignYBottom: createTipIcon({
-    icons: [FontSize(IconAlignYBottom, 28)],
+    icons: [FontSize(IconAlignYBottom, 26)],
     tips: ["底对齐"],
   }),
   AlignYBetween: createTipIcon({
-    icons: [FontSize(IconAlignYBetween, 28)],
+    icons: [FontSize(IconAlignYBetween, 26)],
     tips: ["纵向均匀排布"],
   }),
   SameWidth: createTipIcon({

src/modules/editor/components/Viewport/Content/index.tsx

@@ -168,7 +168,7 @@ const meatureStyle = css`
   width: 100%;
   height: 100%;
   left: 0;
-  top: 50px;
+  top: 0px;
   z-index: 999;
   pointer-events: none;
 

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -21,7 +21,7 @@ export default defineUI({
       return (
         <div>
           {
-            <div id="toptoolbar" class={"p-10px h-50px flex items-center justify-between"}>
+            false && <div id="toptoolbar" class={"p-10px h-50px flex items-center justify-between"}>
               <div class="flex-grow flex items-center">
               {
                 toolsLeft.map((item) => {

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -11,6 +11,7 @@ import { indexOf } from "lodash";
 import { AssistCtrl } from "./assistCtrl";
 import { AssistRulerCtrl } from "./assistRulerCtrl";
 import { AssistMagnetCtrl } from "./assistMagnetCtrl";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 
 /**
  *  页面画布空间进行选择
@@ -583,6 +584,15 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   }
 
   _selectObjs( outs:string[], e:MouseEvent) {
+    //过滤掉锁定的对象
+    let n = outs.length;
+    while(n--) {
+      const c = outs[n]
+      const comp = this.helper.findComp(c)as DesignComp;
+      if (comp.layout.locked) {
+         outs.splice(n, 1);
+      }
+    }
 
     let objs = this.store.selected.slice(0);
     let lastId = outs[outs.length-1];

src/modules/editor/controllers/TransferCtrl/transforms/resize.ts

@@ -2,7 +2,7 @@ import { TransCreateFn, TransferCtrl } from "..";
 
 function getResize(this: TransferCtrl, direction: string) {
   const { transEvent, currComp } = this;
-  const size = [...(currComp.layout.size || [])];
+  const size = currComp.layout.size;
   if (direction.indexOf("x") != -1) {
     size[0] = transEvent.width + transEvent.offsetX * 2;
   }

src/modules/editor/dicts/CompOptions.ts

@@ -0,0 +1,3 @@
+export const Design_Page_Size = [750, 1300];
+export const Viewport_Size = 375;
+export const Design_Pixel_Ratio = Design_Page_Size[0] / Viewport_Size;

src/modules/editor/module/actions/edit.tsx

@@ -634,14 +634,31 @@ export const editActions = EditorModule.action({
   },
   // 设置组件锁定状态
   setCompLock(comp: DesignComp) {
-    console.log(comp);
+     comp.layout.locked = !comp.layout.locked
   },
   // 设置组件层级
   setCompLayer(comp: DesignComp, offset: number) {
-    comp.layout.zIndex = Math.min(
-      Math.max((comp.layout.zIndex || 0) + offset, 0),
-      99
-    );
+    const cards = (this.store.currStreamCard.children.default || []);
+    const i = cards.indexOf(comp.id);
+    if (i == -1) return;
+
+    if (offset < 0) {//向下移动
+       if (i== 0) return;
+      const temp = cards[i-1];
+      cards[i-1] = comp.id;
+      cards[i] = temp;
+      return;
+    }
+    
+    if (i == cards.length -1) return;
+    const temp = cards[i+1];
+    cards[i+1] = comp.id;
+    cards[i] = temp;
+
+    // comp.layout.zIndex = Math.min(
+    //   Math.max((comp.layout.zIndex || 0) + offset, 0),
+    //   99
+    // );
   },
   //横向对齐
   setAlignX(flag: 0 | 1 | 2 | 3) {
@@ -831,7 +848,6 @@ export const editActions = EditorModule.action({
   },
   // 宽度铺满
   fullCompWidth(comp: DesignComp) {
-    comp.layout.size || (comp.layout.size = []);
     comp.layout.size[0] = 750;
   },
   //

src/modules/editor/module/helpers/index.ts

@@ -1,21 +1,30 @@
+import { isPc } from "@queenjs/utils";
 import { nanoid } from "nanoid";
 import { EditorModule } from "..";
 import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { Matrix } from "../../controllers/SelectCtrl/matrix";
+import { Design_Page_Size, Design_Pixel_Ratio } from "../../dicts/CompOptions";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { createCompStyle } from "../../objects/DesignTemp/creates/createCompStyle";
 import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
-  designToNaturalSize(value: number) {
-    // return parseFloat((value / 100).toFixed(2)) + "rem";
-    return value / 2 + "px";
-  },
   pxToDesignSize(value: number) {
-    return value * 2;
+    return value * Design_Pixel_Ratio;
   },
   designSizeToPx(value: number) {
-    return value / 2.0;
+    return value / Design_Pixel_Ratio;
+  },
+  designToNaturalSize(
+    value: number,
+    options?: { adaptiveH?: boolean }
+  ): string {
+    if (options?.adaptiveH && !isPc()) {
+      value =
+        value *
+        ((window.innerHeight * Design_Pixel_Ratio) / Design_Page_Size[1]);
+    }
+    return this.helper.designSizeToPx(value) + "px";
   },
 
   findComp(compId: string) {
@@ -99,7 +108,7 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout> & { size: any[] }, comp:DesignComp) {
+  createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
     return createCompStyle(this, layout, comp);
   },
   isCurrComp(compId: string) {
@@ -113,11 +122,14 @@ export const helpers = EditorModule.helper({
     return i >= 0;
   },
   isCompCanDelete(compId: string): boolean {
-    return this.helper.isStreamCardChild(compId) || (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1);
+    return (
+      this.helper.isStreamCardChild(compId) ||
+      (this.helper.isStreamCard(compId) && this.store.streamCardIds.length > 1)
+    );
   },
 
   isShowSaveComp(comp: DesignComp): boolean {
-    if ( !this.helper.isStreamCardChild(comp.id) ) return false;
+    if (!this.helper.isStreamCardChild(comp.id)) return false;
     return true;
   },
 

src/modules/editor/module/stores/index.ts

@@ -23,21 +23,21 @@ export const store = EditorModule.store({
     selectId: "", //选中的id唯一标识一次选中
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
-    compEditReslut: 0, // -1 取消， 1 确定 
-    lastSelected: "",   //最后上传
+    compEditReslut: 0, // -1 取消， 1 确定
+    lastSelected: "", //最后上传
 
     shortPage: {
-       index: 0,
-       offset: 0,
-       isMoving:false,
-    }
+      index: 0,
+      offset: 0,
+      isMoving: false,
+    },
   }),
   getters: {
     rootPage(state) {
-      return state.designData.compMap["root"] as DesignComp
+      return state.designData.compMap["root"] as DesignComp;
     },
     isEditMode(): boolean {
-      return !this.store.isPreview;
+      return !this.store.isPreview && !this.store.isDisplay;
     },
     isEditPage(state) {
       return state.mode === "editPage";
@@ -48,6 +48,9 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
+    isDisplay(state) {
+      return state.mode === "display";
+    },
     compMap(state) {
       return state.designData.compMap;
     },

src/modules/editor/objects/DesignTemp/DesignComp.ts

@@ -69,16 +69,12 @@ export class DesignComp {
   }
 
   setH(height: number) {
-    if (!this.layout.size) this.layout.size = [];
     this.layout.size[1] = height;
   }
   setW(w: number) {
-    if (!this.layout.size) this.layout.size = [];
     this.layout.size[0] = w;
   }
   setSize(w: number, h: number) {
-    if (!this.layout.size) this.layout.size = [];
-
     this.layout.size[0] = w;
     this.layout.size[1] = h;
   }

src/modules/editor/objects/DesignTemp/creates/CompSize.ts

@@ -0,0 +1,24 @@
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+
+export const CompSizeOpts = {
+  w: {
+    label: "宽度",
+    vUnit: "vw",
+    getVSize(w: number) {
+      return (w / Design_Page_Size[0]) * 100;
+    },
+    getPxSize(w: number) {
+      return (w * Design_Page_Size[0]) / 100;
+    },
+  },
+  h: {
+    label: "高度",
+    vUnit: "vh",
+    getVSize(h: number) {
+      return (h / Design_Page_Size[1]) * 100;
+    },
+    getPxSize(h: number) {
+      return (h * Design_Page_Size[1]) / 100;
+    },
+  },
+};

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -1,16 +1,18 @@
+import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
 import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
-import { compMasks } from "./CompMasks";
-import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";
 import { DesignComp } from "../DesignComp";
+import { compMasks } from "./CompMasks";
 
-export function createCompStyle(module: EditorModule, layout: Layout,  comp:DesignComp) {
-  const { designToNaturalSize } = module.helper;
+export function createCompStyle(
+  module: EditorModule,
+  layout: Layout,
+  comp: DesignComp
+) {
+  const { designToNaturalSize, pxToDesignSize } = module.helper;
   const style: any = {};
   const transform: any = {};
 
-
-
   // if (layout.alignSelf) {
   //   style.alignSelf = layout.alignSelf;
   // }
@@ -76,9 +78,13 @@ export function createCompStyle(module: EditorModule, layout: Layout,  comp:Desi
   }
 
   if (layout.size) {
-    const [w, h] = layout.size;
-    if (w) style.width = designToNaturalSize(w);
-    if (h) style.height = designToNaturalSize(h);
+    const [w, h, wUnit, hUnit] = layout.size;
+    if (w) {
+      style.width = designToNaturalSize(w);
+    }
+    if (h) {
+      style.height = designToNaturalSize(h, { adaptiveH: hUnit === "%" });
+    }
   }
 
   if (layout.position) {
@@ -86,7 +92,11 @@ export function createCompStyle(module: EditorModule, layout: Layout,  comp:Desi
   }
 
   if (layout.transformMatrix) {
-    style.transform = layout.transformMatrix;
+    const m = Matrix.createFromMatrixStr(layout.transformMatrix);
+    m.ty = parseFloat(
+      designToNaturalSize(pxToDesignSize(m.ty), { adaptiveH: true })
+    );
+    style.transform = m.getMatrixStr(); //layout.transformMatrix;
     style.transformOrigin = "0 0";
   } else {
     const v = parseTransform(transform);
@@ -98,7 +108,7 @@ export function createCompStyle(module: EditorModule, layout: Layout,  comp:Desi
       style.backgroundColor = layout.background.color;
     }
   }
-  
+
   return style;
 }
 

src/modules/editor/objects/Toolbars/TreeToolbars.ts

@@ -7,8 +7,8 @@ export const TreeToolbars: ICompToolbars = {
     // }),
     toolbars.rename,
     toolbars.saveAsComp,
+    toolbars.lock,
     toolbars.visible,
-    toolbars.delete,
   ],
   Page: [],
   MultiSelector: [multiSelToolbar.delete]

src/modules/editor/objects/Toolbars/default.ts

@@ -110,7 +110,7 @@ export const toolbars = createToolbars({
   // 锁定
   lock: {
     component: TipIcons.Lock,
-    getValue: (comp) => (comp ? 0 : 1),
+    getValue: (comp) => (comp.layout.locked ? 0 : 1),
     onClick(comp) {
       this.actions.setCompLock(comp);
     },
@@ -119,12 +119,17 @@ export const toolbars = createToolbars({
   delete: {
     component: TipIcons.Delete,
     getVisible(comp) {
-      return this.helper.isCompCanDelete(comp.id);
+      return  this.store.selected.length > 1 || (!!comp && this.helper.isCompCanDelete(comp.id));
     },
     onClick(comp) {
+      if (this.store.selected.length > 1) {
+        this.actions.removeSelectComps();
+        return;
+      }
       this.actions.removeComp(comp.id);
     },
   },
+  
   // 对齐
   align: {
     component: TipIcons.Align,
@@ -206,7 +211,7 @@ export const toolbars = createToolbars({
   // 定位图层上移
   layerUp: {
     component: TipIcons.LayerUp,
-    getVisible: (comp) => true,
+    getVisible: (comp) => !!comp,
     onClick(comp) {
       this.actions.setCompLayer(comp, 1);
     },
@@ -214,7 +219,7 @@ export const toolbars = createToolbars({
   // 定位图层下移
   layerDown: {
     component: TipIcons.LayerDown,
-    getVisible: (comp) => true,
+    getVisible: (comp) => !!comp,
     onClick(comp) {
       this.actions.setCompLayer(comp, -1);
     },

src/modules/editor/objects/Toolbars/liveTools.ts

@@ -0,0 +1,24 @@
+import { ToolbarItem, toolbars } from "./default";
+import { LayoutToolbars } from "./layout";
+
+export const LiveToolbars: ToolbarItem[] = [
+    toolbars.imageCropper,
+    toolbars.layerUp,
+    toolbars.layerDown,
+    toolbars.createGroup,
+    toolbars.cancelGroup,
+    toolbars.delete
+]
+
+export const CompAlignTools= {
+    Left: [
+        LayoutToolbars.xLeft,
+        LayoutToolbars.xCenter,
+        LayoutToolbars.xRight
+    ] as ToolbarItem[],
+    right: [
+        LayoutToolbars.YTop,
+        LayoutToolbars.YCenter,
+        LayoutToolbars.YBottom
+    ] as ToolbarItem[]
+}

src/modules/editor/typings.ts

@@ -2,12 +2,12 @@ import { CompUI } from "./components/CompUI";
 
 export type ICompKeys = keyof typeof CompUI;
 
-export type EditorMode = "editPage" | "editComp" | "preview";
+export type EditorMode = "editPage" | "editComp" | "preview" | "display"
 
 export type Layout = {
   position?: "absolute";
   visible?: boolean;
-  size: number[]; // width height
+  size: [number, number, string?, string?]; // width height wUnit hUnit
   mask?: string;
   alignSelf?: string;
   transform?: {

src/pages/h5/share/Promotion.tsx

@@ -1,4 +1,5 @@
 import { initEditor } from "@/modules/editor";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
 import { isPc } from "@queenjs/utils";
 import { defineComponent } from "vue";
 
@@ -9,7 +10,7 @@ export default defineComponent(() => {
   const isSys = params.get("isSys");
   const isWk = params.get("isWk");
 
-  editor.actions.switchMode("preview");
+  editor.actions.switchMode("display");
 
   if (id) {
     if (isWk) {
@@ -41,7 +42,14 @@ export default defineComponent(() => {
 
   return () => (
     <div class="flex items-center justify-center h-100vh bg-gray-100">
-      <div class={isPc() ? `h-620px scrollbar overflow-x-hidden` : `h-full overflow-x-hidden`}>
+      <div
+        class={isPc() ? `scrollbar overflow-x-hidden` : `overflow-x-hidden`}
+        style={{
+          height: editor.helper.designToNaturalSize(Design_Page_Size[1], {
+            adaptiveH: true,
+          }),
+        }}
+      >
         <editor.components.Preview />
       </div>
     </div>