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

.browserslistrc

@@ -2,3 +2,4 @@
 last 2 versions
 not dead
 not ie 11
+ios >= 9

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/IconRelate.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconRelate = createIcon(<svg viewBox="0 0 22 22"><g transform="translate(-2783 -4497)"><rect fill="none" width="22" height="22" transform="translate(2783 4497)"/><g transform="translate(2800.435 4511.481) rotate(180)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" d="M-189.919,68.962h-2.6A3.491,3.491,0,0,1-196,65.481h0A3.491,3.491,0,0,1-192.519,62h2.6" transform="translate(194 -62)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" d="M-196,68.962h2.6a3.491,3.491,0,0,0,3.481-3.481h0A3.491,3.491,0,0,0-193.4,62H-196" transform="translate(204.354 -62)"/></g></g></svg>)

src/assets/icons/components/IconStrikethrough.tsx

@@ -1,11 +1,19 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconStrikethrough = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M5 24H43" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M24 24C40 30 34 44 24 44C13.9999 44 12 36 12 36" stroke="currentColor" stroke-width="4"
-        stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M35.9999 12C35.9999 12 33 4 23.9999 4C14.9999 4 11.4359 11.5995 15.6096 18"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 36C12 36 15.9999 44 24 44C32 44 36.564 36.4005 32.3903 30" stroke="currentColor"
-        stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconStrikethrough = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1620.094 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M5,24H16.811" transform="translate(0 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M15.73,24c4.973,1.865,3.108,6.217,0,6.217A3.614,3.614,0,0,1,12,27.73"
+                transform="translate(-4.824 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20.751,6.487A4.048,4.048,0,0,0,17.021,4c-2.8,0-3.905,2.362-2.608,4.352"
+                transform="translate(-6.115 0)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,31.865s1.243,2.487,3.73,2.487S19.635,31.989,18.338,30"
+                transform="translate(-4.824 -17.918)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextBold.tsx

@@ -1,10 +1,14 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextBold = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24 24C29.5056 24 33.9688 19.5228 33.9688 14C33.9688 8.47715 29.5056 4 24 4H11V24H24Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M28.0312 44C33.5368 44 38 39.5228 38 34C38 28.4772 33.5368 24 28.0312 24H11V44H28.0312Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconTextBold = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1615.804 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd" d="M15.041,10.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd"
+                d="M16.294,30.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z"
+                transform="translate(0 -13.783)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextCenter.tsx

@@ -1,10 +1,16 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextCenter = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M36 19H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M36 39H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+export const IconTextCenter = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-4.617 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-4.617 -28.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextItalic.tsx

@@ -1,9 +1,14 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextItalic = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M20 6H36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 42H28" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M29 5.95215L19 41.9998" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+export const IconTextItalic = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1614.861 325.831)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20,6h5.518" transform="translate(-5.241 -0.031)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,42h5.518" transform="translate(0 -23.615)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M22.449,5.952,19,18.385" transform="translate(-4.586)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextJustify.tsx

@@ -1,8 +1,16 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextJustify = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconTextJustify = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,9H6" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,19H6" transform="translate(-6 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,29H6" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(-6 -28.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextLeft.tsx

@@ -1,8 +1,17 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextLeft = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+export const IconTextLeft = createIcon(<svg viewBox="0 0 22 22">
+    
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.778 323.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,9H6" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,19H6" transform="translate(0 -6.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,29H6" transform="translate(0 -12.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(0 -19.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextLetterSpacing.tsx

@@ -0,0 +1,18 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextLetterSpacing = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.746 323.892)">
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M5,20.217V8" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.818,13,14,21.4" transform="translate(-5.564 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.581" transform="translate(-8.037 -12.365)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.818,8.4" transform="translate(-11.746 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M43,20.217V8" transform="translate(-23.493)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconTextLineHeight.tsx

@@ -0,0 +1,18 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextLineHeight = createIcon(<svg viewBox="0 0 22 22">
+
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.256 324.631)">
+            <path stroke="currentColor" stroke-linecap="round" d="M6,7H19.488" />
+            <path stroke="currentColor" stroke-linecap="round" d="M6,41H19.488"
+                transform="translate(0 -21.262)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.747,13,14,21.242" transform="translate(-5.003 -3.752)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.5" transform="translate(-7.504 -13.132)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.747,8.242" transform="translate(-11.256 -3.752)" />
+        </g>
+    </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/IconTextRight.tsx

@@ -1,10 +1,16 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextRight = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 19H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+export const IconTextRight = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-3.235 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-3.235 -28.372)" />
+        </g>
+    </g>
 </svg>)

src/assets/icons/components/IconTextSize.tsx

@@ -0,0 +1,19 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconTextSize = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1823 -281)">
+        <g transform="translate(1823.623 278.629)">
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" fill="none"
+                d=" M4,18.841l1.576-3.826m7.353,3.826-1.576-3.826m0,0L10.7,13.421,8.464,8,6.232,13.421l-.656,1.594m5.777,0H5.576" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M28,10h5.1" transform=" translate(-16.347 -1.362)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M32,20h3.826" transform=" translate(-19.072 -8.174)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M36,30h2.551" transform=" translate(-21.796 -14.985)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M40,40h1.275" transform=" translate(-24.521 -21.796)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconTextUnderline.tsx

@@ -1,8 +1,13 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconTextUnderline = createIcon(<svg viewBox="0 0 48 48" fill="none">
-    <path d="M8 44H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path
-        d="M37 6.09717C37 12.7638 37 15.0005 37 22.0002C37 29.1799 31.1797 35.0002 24 35.0002C16.8203 35.0002 11 29.1799 11 22.0002C11 15.0005 11 12.7638 11 6.09717"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+export const IconTextUnderline = createIcon(<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1617.751 325.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M8,44H18.5" transform="translate(-0.001 -25.47)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M19.529,6.1v5.217a4.264,4.264,0,1,1-8.529,0V6.1"
+                transform="translate(-2.016 0)" />
+        </g>
+    </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

@@ -21,6 +21,7 @@ export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";
 export * from "./components/IconCut";
+export * from "./components/IconDelete";
 export * from "./components/IconEmpty";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
@@ -30,7 +31,7 @@ export * from "./components/IconImage";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayers";
 export * from "./components/IconLayerUp";
-export * from "./components/IconLineHeight";
+export * from "./components/IconLock";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
@@ -41,6 +42,7 @@ export * from "./components/IconPlay2";
 export * from "./components/IconPreview";
 export * from "./components/IconProfile";
 export * from "./components/IconQueen";
+export * from "./components/IconRelate";
 export * from "./components/IconResizeY";
 export * from "./components/IconRight";
 export * from "./components/IconRotate";
@@ -54,11 +56,16 @@ export * from "./components/IconTextCenter";
 export * from "./components/IconTextItalic";
 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/lineHeight.svg

@@ -1,14 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M16 35L10 41L4 35" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M16 13L10 7L4 13" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M10 7V41" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M44 9H22" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M36 19H22" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M44 29H22" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M36 39H22" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-</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/relate.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 22 22"><g transform="translate(-2783 -4497)"><rect fill="none" width="22" height="22" transform="translate(2783 4497)"/><g transform="translate(2800.435 4511.481) rotate(180)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" d="M-189.919,68.962h-2.6A3.491,3.491,0,0,1-196,65.481h0A3.491,3.491,0,0,1-192.519,62h2.6" transform="translate(194 -62)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" d="M-196,68.962h2.6a3.491,3.491,0,0,0,3.481-3.481h0A3.491,3.491,0,0,0-193.4,62H-196" transform="translate(204.354 -62)"/></g></g></svg>

src/assets/icons/svg/strikethrough.svg

@@ -1,9 +1,17 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M5 24H43" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M24 24C40 30 34 44 24 44C13.9999 44 12 36 12 36" stroke="currentColor" stroke-width="4"
-        stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M35.9999 12C35.9999 12 33 4 23.9999 4C14.9999 4 11.4359 11.5995 15.6096 18"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 36C12 36 15.9999 44 24 44C32 44 36.564 36.4005 32.3903 30" stroke="currentColor"
-        stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1620.094 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M5,24H16.811" transform="translate(0 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M15.73,24c4.973,1.865,3.108,6.217,0,6.217A3.614,3.614,0,0,1,12,27.73"
+                transform="translate(-4.824 -13.783)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20.751,6.487A4.048,4.048,0,0,0,17.021,4c-2.8,0-3.905,2.362-2.608,4.352"
+                transform="translate(-6.115 0)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,31.865s1.243,2.487,3.73,2.487S19.635,31.989,18.338,30"
+                transform="translate(-4.824 -17.918)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textBold.svg

@@ -1,8 +1,12 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M24 24C29.5056 24 33.9688 19.5228 33.9688 14C33.9688 8.47715 29.5056 4 24 4H11V24H24Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M28.0312 44C33.5368 44 38 39.5228 38 34C38 28.4772 33.5368 24 28.0312 24H11V44H28.0312Z"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1615.804 327.783)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd" d="M15.041,10.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                fill-rule="evenodd"
+                d="M16.294,30.217a3.108,3.108,0,0,0,0-6.217H11v6.217Z"
+                transform="translate(0 -13.783)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textCenter.svg

@@ -1,8 +1,14 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M36 19H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M36 39H12" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-4.617 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-4.617 -28.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textItalic.svg

@@ -1,7 +1,12 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M20 6H36" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M12 42H28" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M29 5.95215L19 41.9998" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1614.861 325.831)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M20,6h5.518" transform="translate(-5.241 -0.031)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M12,42h5.518" transform="translate(0 -23.615)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M22.449,5.952,19,18.385" transform="translate(-4.586)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textJustify.svg

@@ -1,6 +1,14 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,9H6" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,19H6" transform="translate(-6 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.444,29H6" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(-6 -28.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textLeft.svg

@@ -1,6 +1,15 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 19H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M34 39H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.778 323.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,9H6" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,19H6" transform="translate(0 -6.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18.445,29H6" transform="translate(0 -12.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M15.679,39H6" transform="translate(0 -19.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textLetterSpacing.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.746 323.892)">
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M5,20.217V8" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.818,13,14,21.4" transform="translate(-5.564 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.581" transform="translate(-8.037 -12.365)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.818,8.4" transform="translate(-11.746 -3.091)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                d="M43,20.217V8" transform="translate(-23.493)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/textLineHeight.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 22 22">
+
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1618.256 324.631)">
+            <path stroke="currentColor" stroke-linecap="round" d="M6,7H19.488" />
+            <path stroke="currentColor" stroke-linecap="round" d="M6,41H19.488"
+                transform="translate(0 -21.262)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M17.747,13,14,21.242" transform="translate(-5.003 -3.752)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M18,28h4.5" transform="translate(-7.504 -13.132)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M24,13l3.747,8.242" transform="translate(-11.256 -3.752)" />
+        </g>
+    </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/textRight.svg

@@ -1,8 +1,14 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M42 9H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 19H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
-    <path d="M42 29H6" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M42 39H14" stroke="currentColor" stroke-width="4" stroke-linecap="round"
-        stroke-linejoin="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1624.778 332.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,9H18.444" transform="translate(-6 -9)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,19h9.679" transform="translate(-3.235 -15.457)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,29H18.444" transform="translate(-6 -21.915)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M6,39h9.679" transform="translate(-3.235 -28.372)" />
+        </g>
+    </g>
 </svg>

src/assets/icons/svg/textSize.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1823 -281)">
+        <g transform="translate(1823.623 278.629)">
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" fill="none"
+                d=" M4,18.841l1.576-3.826m7.353,3.826-1.576-3.826m0,0L10.7,13.421,8.464,8,6.232,13.421l-.656,1.594m5.777,0H5.576" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M28,10h5.1" transform=" translate(-16.347 -1.362)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M32,20h3.826" transform=" translate(-19.072 -8.174)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M36,30h2.551" transform=" translate(-21.796 -14.985)" />
+            <path stroke="currentColor" stroke-linecap="round"
+                stroke-linejoin="round" d=" M40,40h1.275" transform=" translate(-24.521 -21.796)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/textUnderline.svg

@@ -1,6 +1,11 @@
-<svg viewBox="0 0 48 48" fill="none">
-    <path d="M8 44H40" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
-    <path
-        d="M37 6.09717C37 12.7638 37 15.0005 37 22.0002C37 29.1799 31.1797 35.0002 24 35.0002C16.8203 35.0002 11 29.1799 11 22.0002C11 15.0005 11 12.7638 11 6.09717"
-        stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+<svg viewBox="0 0 22 22">
+    <g transform="translate(-1620 -327)">
+        <g transform="translate(1617.751 325.686)">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                d="M8,44H18.5" transform="translate(-0.001 -25.47)" />
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none"
+                d="M19.529,6.1v5.217a4.264,4.264,0,1,1-8.529,0V6.1"
+                transform="translate(-2.016 0)" />
+        </g>
+    </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 [
     {
@@ -23,6 +24,14 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
         value: muisc,
         options: [{ label: "无", value: "" }, ...MusicOptions],
       },
+    },{
+      label: "页面模式",
+      dataIndex: "value.pageMode",
+      component: Select,
+      props: {
+        class: "w-full flex-1 overflow-hidden",
+        options: [{ label: "长页", value: "long" }, { label: "翻页", value: "short" }],
+      },
     },
     {
       dataIndex: "value.music",
@@ -48,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

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { defineComponent , reactive} from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { useEditor } from "../../../..";
@@ -13,21 +13,38 @@ export const Component = defineComponent({
   },
   setup(props, { slots }) {
     const editor = useEditor();
-    const { helper } = editor;
+    const { helper, store } = editor;
     const compRef = useCompRef(props.compId);
+
+  
+
     return () => {
-      const { children, layout, value } = useCompData(props.compId);
+      const comp = useCompData(props.compId);
+      const { children, layout, value } = comp;
       const compMusic = value.music || "";
       const curValue = MusicOptions.find((e) => {
         return e.value == compMusic;
       });
+      const style = helper.createStyle(layout || { size: [750] }, comp);
+      if (comp.value.pageMode == "short") {
+        style.height = "100%";
+      }
+
+      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}
-          style={helper.createStyle(layout || { size: [750] })}
-          class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
+          style={style}
+          class={[comp.value.pageMode != "short" && "!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
         >
-          <div class="relative z-999">
+          <div class="relative z-999" style={contextStyle}>
             {slots.Container?.(
               children.default.map((compId) => {
                 const comp = helper.findComp(compId);

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/Text/EditorCustom.ts

@@ -14,10 +14,13 @@ import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import Heading from "@ckeditor/ckeditor5-heading/src/heading";
 import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
+import LetterSpacing from "./ckeditor-letter-spacing/index";
 import { EditorConfig } from "@ckeditor/ckeditor5-core";
-class HeadlessEditor extends DecoupledEditorBase {}
+
+export class HeadlessEditor extends DecoupledEditorBase {}
 interface HeadlessConfig extends EditorConfig {
   lineHeight: any;
+  letterSpacing: any;
 }
 HeadlessEditor.builtinPlugins = [
   Essentials,
@@ -33,6 +36,7 @@ HeadlessEditor.builtinPlugins = [
   FontFamily,
   Alignment,
   LineHeight,
+  LetterSpacing,
 ];
 const fontSizeOptions = [];
 const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60];
@@ -57,7 +61,11 @@ HeadlessEditor.defaultConfig = {
     supportAllValues: true,
   },
   lineHeight: {
-    options: [1, 1.5, 2, 2.5, 3],
+    options: [0.5, 1, 1.5, 2, 2.5, 3],
+  },
+  letterSpacing: {
+    options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    supportAllValues: true,
   },
   link: {},
 } as HeadlessConfig;

src/modules/editor/components/CompUI/basicUI/Text/TextToolComp.tsx

@@ -0,0 +1,513 @@
+import {
+  IconStrikethrough,
+  IconTextBold,
+  IconTextCenter,
+  IconTextItalic,
+  IconTextJustify,
+  IconTextLeft,
+  IconTextLetterSpacing,
+  IconTextLineHeight,
+  IconTextRight,
+  IconTextSize,
+  IconTextUnderline,
+} from "@/assets/icons";
+import { css } from "@linaria/core";
+import { Button, InputNumber, Tooltip } from "ant-design-vue";
+
+import { useEditor } from "@/modules/editor";
+import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
+import "@simonwep/pickr/dist/themes/nano.min.css";
+import _ from "lodash";
+import { queenApi } from "queenjs";
+import {
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  toRaw,
+  watch,
+} from "vue";
+import { any, bool, func, number, object, string } from "vue-types";
+interface ColumnItem {
+  label?: string;
+  component?: ((...args: any[]) => any) | Record<string, any>;
+  dataIndex?: string;
+  props?: { [name: string]: any };
+  itemProps?: { [name: string]: any };
+  changeExtra?: (data: any) => any;
+}
+
+export const TextColor = defineComponent({
+  props: {
+    value: string().def("#666666"),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    let pickerRef = ref();
+
+    const state = reactive({
+      color: props.value,
+    });
+    watch(
+      () => props.value,
+      () => {
+        state.color = props.value;
+      }
+    );
+    const colorChange = (e: any) => {
+      const hexa = e.target.value;
+      emit("change", hexa);
+      state.color = hexa;
+    };
+
+    return () => (
+      <div
+        class={ColorPicker}
+        onClick={() => {
+          pickerRef?.value.click();
+        }}
+      >
+        <div class="color_picker" style={{ backgroundColor: state.color }}>
+          <input
+            type="color"
+            class="color_input"
+            ref={pickerRef}
+            value={state.color}
+            onInput={_.debounce(colorChange, 300)}
+          />
+        </div>
+      </div>
+    );
+  },
+});
+export const AlignComp = defineComponent({
+  props: {
+    value: string<"left" | "right" | "center" | "justify">().def("left"),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const aligns = [
+      {
+        label: "左对齐",
+        key: "left",
+        icon: <IconTextLeft />,
+      },
+      {
+        label: "居中对齐",
+        key: "center",
+        icon: <IconTextCenter />,
+      },
+      {
+        label: "右对齐",
+        key: "right",
+        icon: <IconTextRight />,
+      },
+      {
+        label: "两端对齐",
+        key: "justify",
+        icon: <IconTextJustify />,
+      },
+    ];
+    return () => (
+      <div class={AlignCompWapper}>
+        {aligns.map((e: any) => {
+          return (
+            <Tooltip title={e.label} placement="top">
+              <Button
+                class={props.value == e.key ? currStyle : null}
+                icon={e.icon}
+                type="text"
+                onClick={() => {
+                  emit("change", e.key);
+                }}
+              ></Button>
+            </Tooltip>
+          );
+        })}
+      </div>
+    );
+  },
+});
+export const LetterSpacingComp = defineComponent({
+  props: {
+    value: any<string | number>().def(0),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      const value =
+        typeof props.value === "string" ? parseInt(props.value) : props.value;
+
+      return (
+        <InputNumber
+          prefix={<IconTextLetterSpacing class="text-22px mr-6px" />}
+          defaultValue={0}
+          min={0}
+          max={100}
+          step={1}
+          value={value}
+          onChange={(value: any) => {
+            if (!value) {
+              emit("change", "0px");
+              return;
+            }
+            emit("change", value + "px");
+          }}
+        />
+      );
+    };
+  },
+});
+
+export const LineHeightComp = defineComponent({
+  props: {
+    value: any<string | number>().def(1.5),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      const value =
+        typeof props.value === "string" ? parseFloat(props.value) : props.value;
+      return (
+        <InputNumber
+          prefix={<IconTextLineHeight class="text-22px mr-6px" />}
+          defaultValue={1.5}
+          min={0.5}
+          max={3}
+          step={0.5}
+          value={value || 1.5}
+          onChange={(value: any) => {
+            if (!value) {
+              emit("change", 1.5);
+              return;
+            }
+            emit("change", value);
+          }}
+        />
+      );
+    };
+  },
+});
+export const FontStyleWapper = defineComponent({
+  emits: ["change"],
+  setup(props, { emit }) {
+    const fontStyleColumns = [
+      {
+        label: "加粗",
+        dataIndex: "bold",
+        icon: <IconTextBold />,
+      },
+      {
+        label: "斜体",
+        dataIndex: "italic",
+        icon: <IconTextItalic />,
+      },
+      {
+        label: "下划线",
+        dataIndex: "underline",
+        icon: <IconTextUnderline />,
+      },
+      {
+        label: "删除线",
+        dataIndex: "strikethrough",
+        icon: <IconStrikethrough />,
+      },
+    ];
+    const changeVal = (e: any) => {
+      emit("change", e);
+    };
+    return () => (
+      <div class={[FontStyleCompWapper]}>
+        {fontStyleColumns.map((e: any) => {
+          return (
+            <TextToolItem
+              key={e.dataIndex}
+              class={"!mr-0"}
+              column={{
+                label: e.label,
+                dataIndex: e.dataIndex,
+                component: (props) => {
+                  return <FontStyleComp icon={e.icon} {...props} />;
+                },
+              }}
+              onChange={changeVal}
+            />
+          );
+        })}
+      </div>
+    );
+  },
+});
+export const FontStyleComp = defineComponent({
+  props: {
+    icon: any(),
+    value: bool().def(false),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      return (
+        <Button
+          type="text"
+          class={props.value ? currStyle : null}
+          icon={props.icon}
+          onClick={() => {
+            emit("change", !props.value);
+          }}
+        ></Button>
+      );
+    };
+  },
+});
+
+export const FontFamily = defineComponent({
+  props: {
+    value: string().def(""),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const options = [
+      { label: "默认字体", value: "" },
+      { label: "宋体", value: "宋体,Songti,STSong,serif" },
+      { label: "黑体", value: "黑体,Heiti,STHeiti,sans-serif" },
+      { label: "仿宋", value: "仿宋,FangSong,STFangsong,serif" },
+      { label: "楷体", value: "楷体,KaiTi,STKaiti,sans-serif" },
+    ];
+    return () => {
+      return (
+        <Select
+          options={options}
+          value={props.value || ""}
+          onChange={(v) => {
+            emit("change", v);
+          }}
+        ></Select>
+      );
+    };
+  },
+});
+export const FontSize = defineComponent({
+  props: {
+    value: any().def("12px"),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => {
+      return (
+        <InputNumber
+          prefix={<IconTextSize class="text-22px mr-6px" />}
+          defaultValue={12}
+          min={12}
+          max={60}
+          value={parseInt(props.value) || 12}
+          onChange={(value: any) => {
+            if (!value) {
+              emit("change", "12px");
+              return;
+            }
+            emit("change", value + "px");
+          }}
+        />
+      );
+    };
+  },
+});
+export const LinkButton = defineComponent({
+  props: {
+    icon: any(),
+    value: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const showLinkInput = async () => {
+      const res = await queenApi.showInput({
+        title: "请输入链接地址",
+        defaultValue: "http://",
+      });
+      emit("change", res);
+    };
+    return () => (
+      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
+    );
+  },
+});
+
+export const TextToolItem = defineComponent({
+  props: {
+    column: object<ColumnItem>(),
+    index: number(),
+    onChange: func(),
+  },
+  setup(props) {
+    const state = reactive({
+      value: undefined,
+    });
+
+    const { controls } = useEditor();
+    let editor: any = null;
+    watch(
+      () => controls.textEditorCtrl.state.currEditor,
+      () => {
+        editor = toRaw(controls.textEditorCtrl.state.currEditor);
+        initCommands();
+      }
+    );
+    function handleValueChange() {
+      const { column } = props;
+      if (!editor) {
+        return;
+      }
+      const command = editor.commands.get(column?.dataIndex);
+      if (command) {
+        state.value = command.value;
+      }
+    }
+    const initCommands = () => {
+      const { column } = props;
+      if (!editor) {
+        return;
+      }
+      const command = editor.commands.get(column?.dataIndex);
+      if (command) {
+        console.log("init", column?.dataIndex, command.value);
+        state.value = command.value;
+        command.on("change:value", handleValueChange);
+      }
+    };
+    onMounted(() => {
+      initCommands();
+    });
+    onUnmounted(() => {
+      const { column } = props;
+      if (!editor) {
+        return;
+      }
+      const command = editor.commands.get(column?.dataIndex);
+      if (command) {
+        command.off("change:value", handleValueChange);
+      }
+    });
+
+    const changeVal = (value: any, ...args: any[]) => {
+      const { column } = props;
+      let params = {
+        dataIndex: column?.dataIndex,
+        value: { value },
+        ...args,
+      };
+      if (column?.changeExtra) params = column.changeExtra?.(params);
+      props.onChange?.(params);
+      return params;
+    };
+
+    const component = props.column?.component || null;
+    return () => {
+      const { column, index } = props;
+      return (
+        <div
+          key={column?.dataIndex || "" + index}
+          class={formItemStyles}
+          {...column?.itemProps}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {column?.label ? (
+            <Tooltip title={column.label} placement="top">
+              <component
+                value={state.value}
+                {...column.props}
+                onChange={changeVal}
+              />
+            </Tooltip>
+          ) : (
+            <component
+              value={state.value}
+              {...column?.props}
+              onChange={changeVal}
+            />
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+const currStyle = css`
+  color: @inf-primary-color;
+  &:hover,
+  &:focus {
+    color: @inf-primary-color;
+  }
+`;
+const ColorPicker = css`
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+  cursor: pointer;
+  .color_picker {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    border: 1px solid transparent;
+    &:focus,
+    &:hover {
+      border-color: @inf-primary-color;
+      box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
+    }
+  }
+  .color_input {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0;
+    padding: 0;
+    border: none;
+    visibility: hidden;
+  }
+`;
+
+const AlignCompWapper = css`
+  display: flex;
+  .ant-btn {
+    flex: 1;
+    width: 100%;
+    line-height: 1;
+    .inficon {
+      font-size: 22px;
+    }
+  }
+`;
+const FontStyleCompWapper = css`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  border-radius: 2px;
+  & > div {
+    flex: 1;
+    border-radius: 0;
+    .ant-btn {
+      width: 100%;
+      line-height: 1;
+      .inficon {
+        font-size: 22px;
+      }
+    }
+  }
+`;
+
+const formItemStyles = css`
+  height: 100%;
+  flex: 1;
+  margin-right: 12px;
+  background-color: #303030;
+  border-radius: 2px;
+  &:last-child {
+    margin-right: 0;
+  }
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;

src/modules/editor/components/CompUI/basicUI/Text/TextToolForm.tsx

@@ -0,0 +1,142 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+
+import { css } from "@linaria/core";
+import { defineComponent, toRaw, watch } from "vue";
+import { any } from "vue-types";
+import { Divider } from "ant-design-vue";
+import {
+  AlignComp,
+  FontFamily,
+  FontSize,
+  FontStyleWapper,
+  LetterSpacingComp,
+  LineHeightComp,
+  TextToolItem,
+} from "./TextToolComp";
+
+export const TextToolForm = defineComponent({
+  props: {
+    component: any<DesignComp>().isRequired,
+  },
+  setup(props) {
+    const { store, actions, controls } = useEditor();
+
+    // const toolbarColumns = [
+    // {
+    //   label: "字体颜色",
+    //   dataIndex: "fontColor",
+    //   component: TextColor,
+    // },
+    // {
+    //   label: "链接",
+    //   dataIndex: "link",
+    //   component: (props: any) => (
+    //     <LinkButton icon={<LinkOutlined />} {...props} />
+    //   ),
+    //   changeExtra: (record: any) => {
+    //     record.value = record.value.value;
+    //     return record;
+    //   },
+    //   itemProps: {
+    //     class: "!mx-2px",
+    //   },
+    // },
+    // ];
+
+    const changeVal = (e: { dataIndex: string; value: any }) => {
+      let editor = controls.textEditorCtrl.state.currEditor;
+      if (!editor) {
+        return;
+      }
+      editor = toRaw(editor);
+      editor.execute(e.dataIndex, e.value);
+      console.log("change", e);
+      setTimeout(() => {
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        editor.editing.view.focus();
+      }, 100);
+    };
+    return () => {
+      return (
+        <div id="text_toolform">
+          <div>文本</div>
+          <div class={"mt-18px"}>
+            <div class={formRowItem}>
+              <TextToolItem
+                column={{
+                  dataIndex: "fontFamily",
+                  component: FontFamily,
+                  props: {
+                    class: "w-190px",
+                  },
+                }}
+                onChange={changeVal}
+              />
+              <TextToolItem
+                column={{
+                  label: "字号",
+                  dataIndex: "fontSize",
+                  component: FontSize,
+                  props: {
+                    class: "!w-full",
+                  },
+                }}
+                onChange={changeVal}
+              />
+            </div>
+            <div class={formRowItem}>
+              <TextToolItem
+                column={{
+                  label: "字间距",
+                  dataIndex: "letterSpacing",
+                  component: LetterSpacingComp,
+                  props: {
+                    class: "!w-full",
+                  },
+                }}
+                onChange={changeVal}
+              />
+              <TextToolItem
+                column={{
+                  label: "行高",
+                  dataIndex: "lineHeight",
+                  component: LineHeightComp,
+                  props: {
+                    class: "!w-full",
+                  },
+                }}
+                onChange={changeVal}
+              />
+            </div>
+            <div class={formRowItem}>
+              <FontStyleWapper onChange={changeVal} />
+              <TextToolItem
+                column={{
+                  label: "",
+                  dataIndex: "alignment",
+                  component: AlignComp,
+                }}
+                onChange={changeVal}
+              />
+            </div>
+          </div>
+          <Divider class={"!my-18px"} />
+          <div>填充</div>
+          <div>描边</div>
+          <Divider class={"!my-18px"} />
+        </div>
+      );
+    };
+  },
+});
+const formRowItem = css`
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const TextToolbarStyle = css``;

src/modules/editor/components/CompUI/basicUI/Text/TextToolbar.tsx

@@ -1,174 +0,0 @@
-import {
-  IconStrikethrough,
-  IconTextBold,
-  IconTextItalic,
-  IconTextUnderline,
-} from "@/assets/icons";
-import { useEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import { LinkOutlined } from "@ant-design/icons-vue";
-
-import { css } from "@linaria/core";
-import { Divider } from "ant-design-vue";
-import { defineComponent } from "vue";
-import { any } from "vue-types";
-
-import TextToolbarsUI from "./TextToolbarUI";
-import {
-  AlignComp,
-  FontFamily,
-  FontSize,
-  FontStyleComp,
-  LineHeightComp,
-  LinkButton,
-  TextColor,
-} from "./ToolbarComp";
-
-export const TextToolbar = defineComponent({
-  props: {
-    component: any<DesignComp>().isRequired,
-  },
-  setup(props) {
-    const { store, actions, controls } = useEditor();
-
-    const toolbarColumns = [
-      {
-        dataIndex: "fontFamily",
-        component: FontFamily,
-        props: {
-          class: "w-180px",
-        },
-      },
-      {
-        label: "字号",
-        dataIndex: "fontSize",
-        component: FontSize,
-      },
-      {
-        label: "字体颜色",
-        dataIndex: "fontColor",
-        component: TextColor,
-      },
-      {
-        label: "加粗",
-        dataIndex: "bold",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconTextBold />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "斜体",
-        dataIndex: "italic",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconTextItalic />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "下划线",
-        dataIndex: "underline",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconTextUnderline />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "删除线",
-        dataIndex: "strikethrough",
-        component: (props: any) => (
-          <FontStyleComp icon={<IconStrikethrough />} {...props} />
-        ),
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        component: () => (
-          <Divider
-            type="vertical"
-            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
-          />
-        ),
-      },
-      {
-        label: "对齐方式",
-        dataIndex: "alignment",
-        component: AlignComp,
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        label: "行高",
-        dataIndex: "lineHeight",
-        component: LineHeightComp,
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        component: () => (
-          <Divider
-            type="vertical"
-            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
-          />
-        ),
-      },
-      {
-        label: "链接",
-        dataIndex: "link",
-        component: (props: any) => (
-          <LinkButton icon={<LinkOutlined />} {...props} />
-        ),
-        changeExtra: (record: any) => {
-          record.value = record.value.value;
-          return record;
-        },
-        itemProps: {
-          class: "!mx-2px",
-        },
-      },
-      {
-        component: () => (
-          <Divider
-            type="vertical"
-            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
-          />
-        ),
-      },
-    ];
-    const changeVal = (e: { dataIndex: string; value: any }) => {
-      const editor = controls.textEditor;
-      if (!editor) {
-        return;
-      }
-      editor.execute(e.dataIndex, e.value);
-      console.log("change", e);
-      setTimeout(() => {
-        const selection = window.getSelection();
-        selection?.removeAllRanges();
-        editor.editing.view.focus();
-      }, 100);
-    };
-    return () => {
-      const { component } = props;
-      return (
-        <div class={[TextToolbarStyle, "flex items-center"]} id="text_toolbar">
-          <TextToolbarsUI
-            editor={controls.textEditor}
-            columns={toolbarColumns}
-            onChange={changeVal}
-          />
-        </div>
-      );
-    };
-  },
-});
-const TextToolbarStyle = css``;

src/modules/editor/components/CompUI/basicUI/Text/TextToolbarUI.tsx

@@ -1,164 +0,0 @@
-import { css } from "@linaria/core";
-import { Tooltip } from "ant-design-vue";
-import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
-import { any, array, func, number, object } from "vue-types";
-
-export interface ColumnItem {
-  label?: string;
-  component?: ((...args: any[]) => any) | Record<string, any>;
-  dataIndex?: string;
-  props?: { [name: string]: any };
-  itemProps?: { [name: string]: any };
-  changeExtra?: (data: any) => any;
-}
-
-export default defineComponent({
-  props: {
-    columns: array<ColumnItem>().isRequired,
-    editor: any(),
-    data: any(),
-    onChange: func(),
-  },
-  setup(props) {
-    return () => <FormUI {...props} />;
-  },
-});
-
-const FormUI = (props: {
-  columns: ColumnItem[];
-  editor: any;
-  onChange?: (...arg: any) => void;
-}) => {
-  const { columns, ...restProps } = props;
-  return (
-    <>
-      {columns?.map((column: ColumnItem, index: number) => {
-        if (!column.dataIndex) {
-          return renderUI({ props: restProps, column, index });
-        }
-        return <RenderFormItem column={column} index={index} {...restProps} />;
-      })}
-    </>
-  );
-};
-
-const renderUI = ({ props, column, index }: any) => {
-  const component = column.component;
-  if (component instanceof Function) {
-    const params: any = {
-      ...props,
-      column,
-      key: index,
-      children: FormUI({ ...props, columns: column.children }),
-    };
-    return component(params);
-  } else {
-    return (
-      <component {...props} column={column} key={index}>
-        <FormUI {...props} columns={column.children} />
-      </component>
-    );
-  }
-};
-
-export const RenderFormItem = defineComponent({
-  props: {
-    column: object<ColumnItem>(),
-    index: number(),
-    editor: any(),
-    onChange: func(),
-    onChangeEnd: func(),
-  },
-  setup(props) {
-    const state = reactive({
-      value: undefined,
-    });
-    function handleValueChange() {
-      const { column, editor } = props;
-      const command = editor ? editor.commands.get(column?.dataIndex) : "";
-      if (command) {
-        console.log("change==>", column?.dataIndex, state.value);
-        state.value = command.value;
-      }
-    }
-    const initCommands = () => {
-      const { column, editor } = props;
-      const command = editor ? editor.commands.get(column?.dataIndex) : "";
-      if (command) {
-        state.value = command.value;
-
-        command.on("change:value", handleValueChange);
-      }
-    };
-    onMounted(() => {
-      initCommands();
-    });
-    onUnmounted(() => {
-      const { column, editor } = props;
-      const command = editor ? editor.commands.get(column?.dataIndex) : "";
-      if (command) {
-        command.off("change:value", handleValueChange);
-      }
-    });
-
-    const changeVal = (value: any, ...args: any[]) => {
-      const { column } = props;
-      let params = {
-        dataIndex: column?.dataIndex,
-        value: { value },
-        ...args,
-      };
-      if (column?.changeExtra) params = column.changeExtra?.(params);
-      props.onChange?.(params);
-      return params;
-    };
-
-    const changeValEnd = (value: any, ...args: any[]) => {
-      const params = changeVal(value, ...args);
-      props.onChangeEnd?.(params);
-    };
-
-    const component = props.column?.component || number;
-    return () => {
-      const { column, index } = props;
-      return (
-        <div
-          key={index}
-          class={formItemStyles}
-          {...column?.itemProps}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {column?.label ? (
-            <Tooltip title={column.label} placement="top">
-              <component
-                value={state.value}
-                {...column.props}
-                onChange={changeVal}
-                onChangeEnd={changeValEnd}
-              />
-            </Tooltip>
-          ) : (
-            <component
-              value={state.value}
-              {...column?.props}
-              onChange={changeVal}
-              onChangeEnd={changeValEnd}
-            />
-          )}
-        </div>
-      );
-    };
-  },
-});
-
-const formItemStyles = css`
-  height: 100%;
-  margin: 0 6px;
-  &.disabled {
-    cursor: not-allowed;
-  }
-`;
-
-export function useFormColumns(columns: ColumnItem[]) {
-  return columns;
-}

src/modules/editor/components/CompUI/basicUI/Text/ToolbarComp.tsx

@@ -1,438 +0,0 @@
-import {
-  IconLineHeight,
-  IconTextCenter,
-  IconTextJustify,
-  IconTextLeft,
-  IconTextRight,
-} from "@/assets/icons";
-import { css } from "@linaria/core";
-import { Button, Dropdown, InputNumber, Menu, Tooltip } from "ant-design-vue";
-
-import Select from "@queenjs-modules/queditor/components/FormUI/Items/Select";
-import Pickr from "@simonwep/pickr";
-import "@simonwep/pickr/dist/themes/nano.min.css";
-import { queenApi } from "queenjs";
-import {
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch,
-} from "vue";
-import { any, bool, string } from "vue-types";
-import _ from "lodash";
-
-// export const TextColor = defineComponent({
-//   props: {
-//     value: string().def("#666666"),
-//   },
-//   emits: ["change"],
-//   setup(props, { emit }) {
-//     let picker: any = null;
-
-//     let emitFlagRef = ref(true);
-//     const color = HSLToHex(props.value);
-//     function HSLToHex(hslStr: string): string {
-//       const isHsl = hslStr.indexOf("hsl");
-//       if (isHsl == -1) {
-//         return hslStr;
-//       }
-//       const reg = /(?<=hsl\()(\W|\w)*(?=\))/g;
-//       let hsl: any = hslStr.match(reg);
-//       if (!hsl) {
-//         return hslStr;
-//       }
-//       hsl = hsl[0];
-//       hsl = hsl.split(",");
-//       const [h, s, l] = hsl;
-
-//       const hDecimal = parseInt(l) / 100;
-//       const a = (parseInt(s) * Math.min(hDecimal, 1 - hDecimal)) / 100;
-//       const f = (n: number) => {
-//         const k = (n + parseInt(h) / 30) % 12;
-//         const color = hDecimal - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-
-//         return Math.round(255 * color)
-//           .toString(16)
-//           .padStart(2, "0");
-//       };
-//       return `#${f(0)}${f(8)}${f(4)}`;
-//     }
-
-//     function initPicker() {
-//       picker = Pickr.create({
-//         el: ".color_picker",
-//         theme: "nano",
-//         default: color,
-//         i18n: {
-//           "btn:save": "确定",
-//         },
-//         components: {
-//           preview: true,
-//           opacity: false,
-//           hue: true,
-//           interaction: {
-//             hex: false,
-//             hsla: false,
-//             rgba: false,
-//             input: true,
-//             save: true,
-//           },
-//         },
-//       });
-//       // picker.on("change", (color: any) => {
-//       //   const hexa = color.toHEXA().toString();
-//       //   console.log("setChange", hexa);
-//       // });
-//       picker.on("save", (color: any) => {
-//         picker.hide();
-//         const hexa = color.toHEXA().toString();
-//         emit("change", hexa);
-//       });
-//     }
-//     watch(
-//       () => props.value,
-//       () => {
-//         const color = HSLToHex(props.value);
-//         const res = picker.setColor(color);
-//         console.log("picker change", color, res);
-//       }
-//     );
-//     onMounted(() => {
-//       initPicker();
-//     });
-//     onUnmounted(() => {
-//       if (picker) {
-//         picker.destroyAndRemove();
-//         picker = null;
-//       }
-//     });
-
-//     return () => (
-//       <div
-//         class={ColorPicker}
-//         onClick={() => {
-//           picker?.show();
-//         }}
-//       >
-//         <div class={"color_picker"} id="color_picker"></div>
-//       </div>
-//     );
-//   },
-// });
-export const TextColor = defineComponent({
-  props: {
-    value: string().def("#666666"),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    let pickerRef = ref();
-
-    const state = reactive({
-      color: props.value,
-    });
-    watch(
-      () => props.value,
-      () => {
-        state.color = props.value;
-      }
-    );
-    const colorChange = (e: any) => {
-      const hexa = e.target.value;
-      emit("change", hexa);
-      state.color = hexa;
-    };
-
-    return () => (
-      <div
-        class={ColorPicker}
-        onClick={() => {
-          pickerRef?.value.click();
-        }}
-      >
-        <div class="color_picker" style={{ backgroundColor: state.color }}>
-          <input
-            type="color"
-            class="color_input"
-            ref={pickerRef}
-            value={state.color}
-            onInput={_.debounce(colorChange, 300)}
-          />
-        </div>
-      </div>
-    );
-  },
-});
-export const AlignComp = defineComponent({
-  props: {
-    value: string<"left" | "right" | "center" | "justify">().def("left"),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const aligns = [
-      {
-        label: "左对齐",
-        key: "left",
-        icon: <IconTextLeft />,
-      },
-      {
-        label: "居中对齐",
-        key: "center",
-        icon: <IconTextCenter />,
-      },
-      {
-        label: "右对齐",
-        key: "right",
-        icon: <IconTextRight />,
-      },
-      {
-        label: "两端对齐",
-        key: "justify",
-        icon: <IconTextJustify />,
-      },
-    ];
-
-    const overlay = () => {
-      return (
-        <Menu>
-          {aligns.map((e: any) => {
-            return (
-              <Menu.Item
-                class={props.value == e.key ? currStyle : null}
-                onClick={() => {
-                  emit("change", e.key);
-                }}
-              >
-                <Tooltip placement="right" title={e.label}>
-                  {e.icon}
-                </Tooltip>
-              </Menu.Item>
-            );
-          })}
-        </Menu>
-      );
-    };
-    const currIcon = (key: string) => {
-      const item = aligns.find((e) => {
-        return e.key == key;
-      });
-      return item ? item.icon : null;
-    };
-    return () => (
-      <Dropdown
-        overlay={overlay()}
-        overlayClassName={"editor_toolbar_drop"}
-        trigger={"click"}
-        placement="bottom"
-      >
-        <Button type="text" icon={currIcon(props.value)}></Button>
-      </Dropdown>
-    );
-  },
-});
-
-export const LineHeightComp = defineComponent({
-  props: {
-    value: string().def("1.5"),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const options = [1, 1.5, 2, 2.5, 3];
-
-    const overlay = () => {
-      return (
-        <Menu>
-          {options.map((e: any) => {
-            return (
-              <Menu.Item
-                class={props.value == e ? currStyle : null}
-                onClick={() => {
-                  emit("change", e);
-                }}
-              >
-                {e}
-              </Menu.Item>
-            );
-          })}
-        </Menu>
-      );
-    };
-
-    return () => (
-      <Dropdown
-        overlay={overlay()}
-        overlayClassName={"editor_toolbar_drop"}
-        trigger={"click"}
-        placement="bottom"
-      >
-        <Button type="text" icon={<IconLineHeight />}></Button>
-      </Dropdown>
-    );
-  },
-});
-
-export const FontStyleComp = defineComponent({
-  props: {
-    icon: any(),
-    value: bool().def(false),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const triggerStyle = () => {
-      emit("change", !props.value);
-    };
-    return () => (
-      <Button
-        type="text"
-        class={props.value ? currStyle : null}
-        icon={props.icon}
-        onClick={triggerStyle}
-      ></Button>
-    );
-  },
-});
-
-export const FontFamily = defineComponent({
-  props: {
-    value: string().def(""),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const options = [
-      { label: "默认字体", value: "" },
-      { label: "宋体", value: "宋体,Songti,STSong,serif" },
-      { label: "黑体", value: "黑体,Heiti,STHeiti,sans-serif" },
-      { label: "仿宋", value: "仿宋,FangSong,STFangsong,serif" },
-      { label: "楷体", value: "楷体,KaiTi,STKaiti,sans-serif" },
-    ];
-    return () => {
-      return (
-        <Select
-          options={options}
-          value={props.value || ""}
-          onChange={(v) => {
-            emit("change", v);
-          }}
-        ></Select>
-      );
-    };
-  },
-});
-export const FontSize = defineComponent({
-  props: {
-    value: string().def("12px"),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    return () => {
-      return (
-        <InputNumber
-          defaultValue={12}
-          min={12}
-          max={60}
-          value={parseInt(props.value) || 12}
-          onChange={(value: any) => {
-            emit("change", value + "px");
-          }}
-        />
-      );
-    };
-  },
-});
-export const LinkButton = defineComponent({
-  props: {
-    icon: any(),
-    value: any(),
-  },
-  emits: ["change"],
-  setup(props, { emit }) {
-    const showLinkInput = async () => {
-      const res = await queenApi.showInput({
-        title: "请输入链接地址",
-        defaultValue: "http://",
-      });
-      emit("change", res);
-    };
-    return () => (
-      <Button type="text" icon={props.icon} onClick={showLinkInput}></Button>
-    );
-  },
-});
-
-const currStyle = css`
-  color: @inf-primary-color;
-  &:hover,
-  &:focus {
-    color: @inf-primary-color;
-  }
-`;
-const ColorPicker = css`
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border-radius: 2px;
-  cursor: pointer;
-  .color_picker {
-    width: 100%;
-    height: 100%;
-    border-radius: 2px;
-    border: 1px solid transparent;
-    &:focus,
-    &:hover {
-      border-color: @inf-primary-color;
-      box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-    }
-  }
-  .color_input {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 0;
-    padding: 0;
-    border: none;
-    visibility: hidden;
-  }
-  .pickr {
-    width: 100%;
-    height: 100%;
-
-    .pcr-button {
-      width: 100%;
-      height: 100%;
-      border: 1px solid transparent;
-    }
-    border-radius: 2px;
-    input {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-    button {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-  }
-  .pcr-app {
-    input {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-    button {
-      &:focus,
-      &.pcr-active {
-        border-color: @inf-primary-color;
-        box-shadow: 0 0 0 2px rgba(232, 139, 0, 0.2);
-      }
-    }
-  }
-`;

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/LetterSpacingCommand.ts

@@ -0,0 +1,51 @@
+import Command from "@ckeditor/ckeditor5-core/src/command";
+import { Letter_Spacing } from "./utils";
+
+export default class LetterSpacingCommand extends Command {
+  constructor(editor: any) {
+    super(editor);
+  }
+  refresh() {
+    const model = this.editor.model;
+    const doc = model.document;
+    this.value = doc.selection.getAttribute(Letter_Spacing) || "0";
+    this.isEnabled = model.schema.checkAttributeInSelection(
+      doc.selection,
+      Letter_Spacing
+    );
+  }
+
+  execute(options = {} as any) {
+    const model = this.editor.model;
+    const document = model.document;
+    const selection = document.selection;
+    const value = options.value;
+    const batch = options.batch;
+
+    const updateAttribute = (writer: any) => {
+      if (selection.isCollapsed) {
+        return;
+      }
+      const ranges = model.schema.getValidRanges(
+        selection.getRanges(),
+        Letter_Spacing
+      );
+      for (const range of ranges) {
+        if (value) {
+          writer.setAttribute(Letter_Spacing, value, range);
+        } else {
+          writer.removeAttribute(Letter_Spacing, range);
+        }
+      }
+    };
+    if (batch) {
+      model.enqueueChange(batch, (writer) => {
+        updateAttribute(writer);
+      });
+    } else {
+      model.change((writer) => {
+        updateAttribute(writer);
+      });
+    }
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/LetterSpacingEditing.ts

@@ -0,0 +1,78 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import {
+  isSupported,
+  buildDefinition,
+  Letter_Spacing,
+  normalizeOptions,
+} from "./utils";
+import LetterSpacingCommand from "./LetterSpacingCommand";
+import HeadlessEditor from "../EditorCustom";
+
+export default class LetterSpacingEditing extends Plugin {
+  constructor(editor: HeadlessEditor) {
+    super(editor);
+
+    editor.config.define("letterSpacing", {
+      options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      supportAllValues: false,
+    });
+  }
+
+  /**
+   * @inheritDoc
+   */
+  init() {
+    const editor = this.editor;
+    editor.model.schema.extend("$text", {
+      allowAttributes: Letter_Spacing,
+    });
+    editor.model.schema.setAttributeProperties(Letter_Spacing, {
+      isFormatting: true,
+      copyOnEnter: true,
+    });
+
+    const supportAllValues = editor.config.get(
+      "letterSpacing.supportAllValues"
+    );
+    const options = normalizeOptions(
+      this.editor.config.get("letterSpacing.options")
+    ).filter((item: any) => item.model);
+    const definition = buildDefinition(options);
+
+    if (supportAllValues) {
+      this._prepareAnyValueConverters();
+    } else {
+      editor.conversion.attributeToElement(definition);
+    }
+
+    editor.commands.add("letterSpacing", new LetterSpacingCommand(editor));
+  }
+  _prepareAnyValueConverters() {
+    const editor = this.editor;
+    editor.conversion.for("downcast").attributeToElement({
+      model: Letter_Spacing,
+      view: (attributeValue, { writer }) => {
+        if (!attributeValue) {
+          return;
+        }
+        return writer.createAttributeElement(
+          "span",
+          { style: "letter-spacing:" + attributeValue },
+          { priority: 7 }
+        );
+      },
+    });
+    editor.conversion.for("upcast").elementToAttribute({
+      model: {
+        key: Letter_Spacing,
+        value: (viewElement: any) => viewElement.getStyle("letter-spacing"),
+      },
+      view: {
+        name: "span",
+        styles: {
+          "letter-spacing": /.*/,
+        },
+      },
+    });
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/index.ts

@@ -0,0 +1,12 @@
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import LetterSpacingEditing from "./LetterSpacingEditing";
+
+export default class LetterSpacing extends Plugin {
+  static get requires() {
+    return [LetterSpacingEditing];
+  }
+
+  static get pluginName() {
+    return "LetterSpacing";
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/ckeditor-letter-spacing/utils.ts

@@ -0,0 +1,67 @@
+export const Letter_Spacing = "letterSpacing";
+
+export function isSupported(option: any) {
+  // return supportedOptions.includes( option );
+  return /^\d(.\d+)?$/gm.test(String(option));
+}
+export type optionsKey = Record<string, any>;
+
+export function buildDefinition(options: any) {
+  const definition = {
+    model: {
+      key: "letterSpacing",
+      values: [] as any,
+    },
+    view: {} as optionsKey,
+    upcastAlso: {} as optionsKey,
+  };
+  for (const option of options) {
+    definition.model.values.push(option.model);
+    definition.view[option.model] = option.view;
+    if (option.upcastAlso) {
+      definition.upcastAlso[option.model] = option.upcastAlso;
+    }
+  }
+  return definition;
+}
+export function normalizeOptions(configuredOptions: any) {
+  return configuredOptions
+    .map((item: any) => optionDefinition(item))
+    .filter((option: any) => option !== undefined);
+}
+
+function optionDefinition(option: any) {
+  if (typeof option === "object") {
+    return option;
+  }
+
+  if (option === "default") {
+    return {
+      model: undefined,
+      title: "Default",
+    };
+  }
+
+  const sizePreset = parseFloat(option);
+
+  if (isNaN(sizePreset)) {
+    return;
+  }
+
+  return generatePixelPreset(sizePreset);
+}
+
+function generatePixelPreset(size: number) {
+  const sizeName = String(size);
+  return {
+    title: sizeName,
+    model: `${size}px`,
+    view: {
+      name: "span",
+      styles: {
+        "letter-spacing": `${size}px`,
+      },
+      priority: 5,
+    },
+  };
+}

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -6,7 +6,6 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import HeadlessEditor from "./EditorCustom";
-import viewToPlainText from "@ckeditor/ckeditor5-clipboard/src/utils/viewtoplaintext";
 export const Component = defineComponent({
   props: {
     compId: string().def(""),
@@ -117,7 +116,7 @@ const EditorComp = defineComponent({
       let curr: any = dom;
       do {
         if (
-          curr.id == "toptoolbar" ||
+          curr.id == "text_toolform" ||
           curr.classList.contains("pcr-app") ||
           curr.classList.contains("editor_toolbar_drop") ||
           curr.classList.contains("ant-select-dropdown")
@@ -174,6 +173,7 @@ const EditorComp = defineComponent({
 
       editorRefVal.model.document.on("change:data", () => {
         const value = editorRefVal?.getData();
+
         if (comp.value !== value) {
           actions.updateCompData(comp, "value", value);
           nextTick(() => {
@@ -199,7 +199,7 @@ const EditorComp = defineComponent({
           });
         }
       });
-      controls.textEditor = editorRefVal;
+      controls.textEditorCtrl.setCurrEditor(editorRefVal);
     };
 
     onMounted(() => {

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

@@ -1,7 +1,7 @@
 import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createCompHooks } from "../../defines/createCompHooks";
-import { TextToolbar } from "./TextToolbar";
+import { TextToolForm } from "./TextToolForm";
 export { Component } from "./component2";
 
 export const options = {
@@ -17,11 +17,14 @@ export const { createComp, useCompData } = createCompHooks({
 });
 
 // export const Form = TextForm;
-export const Toolbar = TextToolbar;
-export const Form = createAttrsForm([
-  // {
-  //   label: "文本",
-  //   dataIndex: "value",
-  //   component: "Input",
-  // },
-]);
+
+export const Form = createAttrsForm(
+  [
+    // {
+    //   label: "文本",
+    //   dataIndex: "value",
+    //   component: "Input",
+    // },
+  ],
+  TextToolForm
+);

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,9 +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: {
@@ -16,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);
@@ -29,20 +33,42 @@ 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.isDisplay) {
+        //  const cards = store.streamCardIds;
+        //  const index = cards.indexOf(props.compId)
+        //  style.position = "absolute";
+        //  style.top = index * 100  + "vh";
+        style.height = helper.designToNaturalSize(Design_Page_Size[1], {
+          adaptiveH: true,
+        });
+      }
+
+      if (comp.anim && comp.anim.transition) {
+          style.transition = "all 1s ease-out";
+      }
+
       return (
         <div
           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={helper.createStyle(comp.layout)}
+          style={style}
           onClick={(e) => {
             if (!store.isEditMode) {
               e.stopPropagation();
@@ -65,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>
       );
     };
@@ -176,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

@@ -21,6 +21,54 @@ export function useCompRef(compId: string) {
       compRef.value.compId= compId;
       compRef.value.compKey= comp.compKey;
     }
+
+    if (comp?.compKey == "Page" && !store.isEditMode && store.rootPage.value.pageMode == "short") {
+      let downY = 0;
+      compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
+          //  e.preventDefault();
+          //  e.stopPropagation();
+
+           console.log("touch start");
+           store.shortPage.offset = 0;
+
+           downY = e.targetTouches[0].clientY;
+           store.shortPage.isMoving = false;
+      })
+
+      compRef.value.addEventListener("touchmove", (e:TouchEvent)=>{
+        e.preventDefault();
+        e.stopPropagation();
+
+        let offset = e.targetTouches[0].clientY -  downY
+        console.log("touch moving", offset);
+        store.shortPage.isMoving = true;
+        if (offset < 0 ) {
+           if (store.shortPage.index == store.streamCardIds.length -1) {
+            offset = 0;
+           }
+        }
+        if (offset > 0 ) {
+          if (store.shortPage.index == 0) {
+            offset = 0;
+          }
+        }
+        store.shortPage.offset = offset;
+      })
+
+      compRef.value.addEventListener("touchend", (e:TouchEvent)=>{
+        store.shortPage.isMoving = false;
+        if (store.shortPage.offset < 0 ) {
+             store.shortPage.index +=1;
+        } 
+        if (store.shortPage.offset > 0 ) {
+          store.shortPage.index -=1;
+          if (store.shortPage.index < 0 ) {
+            store.shortPage.index = 0;
+          }
+        }
+        store.shortPage.offset = 0;
+      });
+    }
   });
   return compRef;
 }

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,16 +7,19 @@ 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: "尺寸",
     dataIndex: "layout.size",
-    component: GroupNumber,
-    props: {
-      labels: ["宽度", "高度"],
-    },
+    component: Size,
+  },
+  {
+    label: "对齐",
+    component: Align,
+    dataIndex: "id",
   },
   // {
   //   label: "对齐",
@@ -81,24 +84,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 +143,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",
@@ -209,7 +212,7 @@ export const bgColumns: ColumnItem[] = [
   // },
 ];
 
-export function createAttrsForm(valueColumns: ColumnItem[]) {
+export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
   return defineComponent({
     props: {
       component: any<DesignComp>().isRequired,
@@ -224,10 +227,10 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
       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}
@@ -236,16 +239,18 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
                 <Divider></Divider>
               </>
             ) : null}
-            <div>布局</div>
+            {columnsUI && <columnsUI component={component} />}
+            <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}
@@ -256,7 +261,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
             {["Text", "Image", "Map"].includes(component.compKey) ? (
               <>
                 <Divider></Divider>
-                <div>边框</div>
+                <div><span class="text-white">边框</span></div>
                 <FormUI
                   data={component}
                   columns={bdColumns}
@@ -270,3 +275,10 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
     },
   });
 }
+
+const formStyle = css`
+
+  .item_label {
+    color: #A9ABAF !important;
+  }
+`

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

@@ -1,56 +1,166 @@
+import { IconHeight, IconWidth } from "@/assets/icons";
+import { CompSizeOpts } from "@/modules/editor/objects/DesignTemp/creates/CompSize";
+import { Layout } from "@/modules/editor/typings";
+import { css } from "@linaria/core";
 import { InputNumber, Select } from "ant-design-vue";
+import { AnyFun } from "queenjs/typing";
 import { defineComponent, reactive } from "vue";
 import { any } from "vue-types";
+import { TipIcons } from "../../TipIcons";
 
-const labels = ["宽度", "高度"];
 const selectOptions = [
-  { value: "px", label: "像素" },
-  { value: "%", label: "百分比" },
+  { value: "px", label: "PX", options: { step: 1 } },
+  { value: "%", label: "%", options: { step: 0.1 } },
 ];
 
 export const Size = defineComponent({
   props: {
-    value: any<number[]>().def([]),
+    value: any<Layout["size"]>().def([0, 0]),
   },
   emits: ["change"],
   setup(props, { emit }) {
+    const CompSizeOptsList = [CompSizeOpts.w, CompSizeOpts.h];
     const state = reactive({
-      unit: "px",
+      relateRatio: 0,
     });
 
     function changeVal(index: number, v: any) {
-      // const { value } = props;
-      // value[index] = parseInt(v) || 0;
-      // emit("change", value);
+      const { value } = props;
+      const unit = value[2]?.unit;
+      value[index] = parseFloat(v) || 0;
+
+      if (unit === "%") {
+        value[index] = CompSizeOptsList[index].getPxSize(
+          value[index] as number
+        );
+      }
+
+      if (state.relateRatio) {
+        const isChangeW = index === 0;
+        if (isChangeW) {
+          value[1] = value[0] / state.relateRatio;
+        } else {
+          value[0] = value[1] * state.relateRatio;
+        }
+      }
+
+      emit("change", value);
+    }
+
+    function changeUnit(unit: any) {
+      const { value } = props;
+      if (!value[2]?.unit) {
+        value[2] = { unit };
+      } else {
+        value[2].unit = unit;
+      }
+      emit("change", value);
+    }
+
+    function changeRelate() {
+      state.relateRatio = !state.relateRatio
+        ? props.value[0] / props.value[1]
+        : 0;
+    }
+
+    function fmtVal(index: number) {
+      const unit = props.value[2]?.unit;
+      const val = props.value[index] as number;
+      switch (unit) {
+        case "%":
+          return CompSizeOptsList[index].getVSize(val).toFixed(0);
+        default:
+          return val.toFixed(0);
+      }
     }
 
-    return () => {
-      let values = [...props.value];
-
-      return (
-        <div class="flex space-x-10px">
-          {values.map((value, i) => (
-            <div key={i}>
-              <div class="mb-5px">{labels[i]}</div>
-              <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>
+    return () => (
+      <div class="space-y-10px flex-1">
+        <div class="flex justify-between">
+          <SizeInput
+            label="X"
+            icon={IconWidth}
+            value={fmtVal(0)}
+            onChange={(v) => changeVal(0, v)}
+          />
+          <TipIcons.Relate
+            class={[relateIconCls, state.relateRatio && "active"]}
+            onClick={changeRelate}
+          />
         </div>
-      );
-    };
+        <div class="flex justify-between">
+          <SizeInput
+            label="Y"
+            icon={IconHeight}
+            value={fmtVal(1)}
+            onChange={(v) => changeVal(1, v)}
+          />
+          <Select
+            class={selUnitCls}
+            bordered={false}
+            value={props.value[2]?.unit || selectOptions[0].value}
+            onChange={(v) => changeUnit(v)}
+          >
+            {selectOptions.map((d) => {
+              return <Select.Option key={d.value}>{d.label}</Select.Option>;
+            })}
+          </Select>
+        </div>
+      </div>
+    );
   },
 });
+
+const SizeInput = (props: {
+  label: string;
+  icon: any;
+  value: string;
+  onChange: AnyFun;
+}) => {
+  const { label, icon, ...inputProps } = props;
+  return (
+    <div class={numberInputCls}>
+      <span class="pl-14px pr-1px text-14px">{label}</span>
+      <InputNumber class="flex-1" bordered={false} {...inputProps} />
+      <icon class="tipIcon" />
+    </div>
+  );
+};
+
+const numberInputCls = css`
+  @apply inline-flex items-center flex-1 w-0 mr-12px;
+  background-color: #303030;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .tipIcon {
+    font-size: 24px;
+    padding: 3px 5px;
+    background-color: #373737;
+  }
+`;
+
+const relateIconCls = css`
+  padding: 3px 17px;
+  font-size: 24px;
+  border-radius: 4px;
+  background-color: #303030;
+  cursor: pointer;
+
+  &.active {
+    background-color: rgba(234, 158, 64, 0.2);
+    color: #ea9e40;
+  }
+`;
+
+const selUnitCls = css`
+  width: 58px;
+  height: 30px;
+  border-radius: 4px;
+  background-color: #303030;
+  cursor: pointer;
+
+  .ant-select-selector {
+    padding: 0 8px;
+  }
+`;

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

@@ -25,11 +25,12 @@ import {
   IconAlignYBottom,
   IconWidth,
   IconHeight,
+  IconDelete,
+  IconRelate,
 } from "@/assets/icons";
 import {
   IconCamera,
   IconCube,
-  IconDelete,
   IconEdit,
   IconEyeOff,
   IconEyeOn,
@@ -41,9 +42,6 @@ import {
 import { createTipIcon } from "./create";
 import { FontSize } from "./TipIcon";
 
-
-
-
 export const TipIcons = {
   Rename: createTipIcon({
     icons: [IconEdit],
@@ -69,7 +67,7 @@ export const TipIcons = {
     icons: [IconEdit],
     tips: ["编辑"],
   }),
-  
+
   Position: createTipIcon({
     icons: [IconFloatOff, IconFloatOn],
     tips: ["开启浮动", "关闭浮动"],
@@ -83,7 +81,7 @@ export const TipIcons = {
     tips: ["锁定", "未锁定"],
   }),
   Delete: createTipIcon({
-    icons: [IconDelete],
+    icons: [FontSize(IconDelete, 26)],
     tips: ["删除"],
   }),
   Copy: createTipIcon({
@@ -107,11 +105,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 +137,11 @@ export const TipIcons = {
     tips: ["确定"],
   }),
   Cropper: createTipIcon({
-    icons: [IconCroperr],
+    icons: [FontSize(IconCroperr, 26)],
     tips: ["裁剪"],
   }),
   AlignXLeft: createTipIcon({
-    icons: [FontSize(IconAlignXLeft,28)],
+    icons: [FontSize(IconAlignXLeft, 28)],
     tips: ["左对齐"],
   }),
   AlignXCenter: createTipIcon({
@@ -151,27 +149,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({
@@ -182,4 +180,8 @@ export const TipIcons = {
     icons: [FontSize(IconHeight, 28)],
     tips: ["相同高度"],
   }),
+  Relate: createTipIcon({
+    icons: [IconRelate],
+    tips: ["锁定宽高比"],
+  }),
 };

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/Slider/SliderLeft/CustomComps.tsx

@@ -26,10 +26,10 @@ const compList = [
   // "Cards15",
   "Cover",
   "Cover2",
-  "Text1",
-  "Title1",
-  "Title2",
-  "Title3",
+  // "Text1",
+  // "Title1",
+  // "Title2",
+  // "Title3",
 ];
 
 export default defineUI({

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/components/index.ts

@@ -1,9 +1,7 @@
 import Preview from "./Preview";
-import Viewport from "./Viewport";
 import CompSave from "./CompSave";
 
 export default {
-  Viewport,
   Preview,
   CompSave,
 };

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

@@ -0,0 +1,66 @@
+import { Effect, ModuleControl } from "queenjs";
+import { EditorModule } from "../../module";
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
+import { Matrix } from "../SelectCtrl/matrix";
+
+
+export class AnimCtrl extends ModuleControl<EditorModule> {
+
+  initEvent() {
+     Effect.value(()=>this.store.shortPage).item((v)=>v.offset, (shortState)=>{
+        console.log("xx")
+
+        let next = shortState.index;
+        if (shortState.offset < 0 ) {
+            next = shortState.index + 1;
+        }
+        if (shortState.offset > 0 ) {
+            next = shortState.index - 1;
+        }
+        this.initAnim();
+        this.startAnim(next);
+
+     }).run();
+  }
+
+  startAnim(index:number) {
+    const childrens = this.helper.findCardAllChildren(index);
+
+    console.log("start anim=>", index, childrens.length);
+
+    childrens.forEach((c)=>{
+        const comp = this.helper.findComp(c) as DesignComp;
+        if (!comp.anim) return;
+        comp.anim.transition = false;
+        comp.layout.transformMatrix = comp.anim.startMatrix;
+        comp.layout.opacity = 0;
+
+        setTimeout(() => {
+            if (comp.anim) {
+                comp.anim.transition = true;
+                comp.layout.transformMatrix = comp.anim.endMatrix;
+                comp.layout.opacity = 1;
+            }
+        }, 100);
+    })
+  }
+  inited = false;
+  initAnim() {
+    if (this.inited) return;
+    this.inited = true;
+
+    let n = this.store.streamCardIds.length;
+    for( let i=0; i<n; i++) {
+        const childrens = this.helper.findCardAllChildren(i);
+        childrens.forEach((c)=>{
+            const comp = this.helper.findComp(c) as DesignComp;
+            const end = comp.layout.transformMatrix || "matrix(1,0,0,1,0,0)";
+            const m = Matrix.createFromMatrixStr(end);
+            m.ty = m.ty - comp.getH();
+            m.tx = m.tx - comp.getW();
+
+            comp.anim = {transition:false, startMatrix: m.getMatrixStr(), endMatrix: end}
+        })
+    }
+  }
+}

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,11 +584,20 @@ 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];
    
-    if (e.ctrlKey) {
+    if (e.shiftKey) {
       objs.forEach(o=>{
         if (outs.indexOf(o) == -1) {
           outs.push(o);
@@ -596,7 +606,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     }
     
     let selected = outs;
-    if (e.shiftKey) {//反选
+    if (e.ctrlKey) {//反选
       selected = [];
       objs.forEach(o=>{
          if (outs.indexOf(o) == -1) selected.push(o); 

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

@@ -0,0 +1,15 @@
+import { ModuleControl } from "queenjs";
+import { reactive } from "vue";
+import { EditorModule } from "../../module";
+
+export class TextEditorCtrl extends ModuleControl<EditorModule> {
+  state = reactive({
+    currEditor: null as any,
+  });
+  constructor(moduel: EditorModule) {
+    super(moduel);
+  }
+  setCurrEditor(editor: any) {
+    this.state.currEditor = editor;
+  }
+}

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;
   }
@@ -16,7 +16,7 @@ const resize: TransCreateFn = (direction: string) => ({
   mousemove() {
     const style = this.module.helper.createStyle({
       size: getResize.call(this, direction),
-    });
+    }, {} as any);
     Object.entries(style).forEach(([key, value]: any[]) => {
       this.compEl.style[key] = value;
     });

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

@@ -42,7 +42,7 @@ const transform: TransCreateFn = (transType: string) => ({
     const style = this.module.helper.createStyle({
       transform: getTransform.call(this, transType),
       size: [0,0]
-    });
+    }, {} as any);
     Object.entries(style).forEach(([key, value]: any[]) => {
       this.compEl.style[key] = value;
     });

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) {
@@ -62,6 +71,11 @@ export const helpers = EditorModule.helper({
     return this.store.designData.compMap["root"];
   },
 
+  findCardAllChildren(index:number) {
+    const cardId = this.store.streamCardIds[index];
+    return this.store.designData.compMap[cardId].children.default || [] as string[];
+  },
+
   getCompCard(compId: string) {
     const paths: DesignComp[] = this.helper.getCompTrees(compId);
     return paths[1];
@@ -94,8 +108,8 @@ export const helpers = EditorModule.helper({
     getParentComp(compId);
     return comps;
   },
-  createStyle(layout: Partial<Layout> & { size: any[] }) {
-    return createCompStyle(this, layout);
+  createStyle(layout: Partial<Layout> & { size: any[] }, comp: DesignComp) {
+    return createCompStyle(this, layout, comp);
   },
   isCurrComp(compId: string) {
     return this.store.currCompId === compId;
@@ -108,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/index.ts

@@ -22,6 +22,8 @@ import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
 import { ImageCropperCtrl } from "../controllers/CropperCtrl";
 import { MediaCtrl } from "../controllers/MediaCtrl/indext";
+import { AnimCtrl } from "../controllers/AnimCtrl";
+import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -62,12 +64,14 @@ export class EditorModule extends ModuleRoot {
     selectCtrl: new SelectCtrl(this),
     cropCtrl: new ImageCropperCtrl(this),
     mediaCtrl: new MediaCtrl(this),
-    textEditor: null as any,
+    textEditorCtrl: new TextEditorCtrl(this),
+    animCtrl: new AnimCtrl(this)
   };
   compObjsMap = new Map<string, CompObject>();
 
   onReady() {
     this.actions.init();
+    this.controls.animCtrl.initEvent();
   }
 
   jumpIndexHtml(route = "#/") {

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

@@ -23,12 +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,
+    },
   }),
   getters: {
+    rootPage(state) {
+      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";
@@ -39,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

@@ -14,6 +14,8 @@ export class DesignComp {
   layout: Layout = { size: [200, 200] };
   background: Background = {};
   children: Record<string, any> & { default?: string[] } = {};
+  anim?:{startMatrix: string, endMatrix:string, transition: boolean}
+
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;
     if (data instanceof DesignComp) return data;
@@ -67,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,11 +1,16 @@
+import { formatColor } from "@/modules/editor/components/CompUI/formItems/NewColorPicker/ColorList";
+import { Matrix } from "@/modules/editor/controllers/SelectCtrl/matrix";
 import { EditorModule } from "@/modules/editor/module";
 import { Layout } from "@/modules/editor/typings";
+import { DesignComp } from "../DesignComp";
 import { compMasks } from "./CompMasks";
-import { Matrix } from "@/modules/editor/controllers/TransferCtrl/Matrix";
-import { formatColor } from "@/modules/editor/components/CompUI/formItems/NewColorPicker/ColorList";
 
-export function createCompStyle(module: EditorModule, layout: Layout) {
-  const { designToNaturalSize } = module.helper;
+export function createCompStyle(
+  module: EditorModule,
+  layout: Layout,
+  comp: DesignComp
+) {
+  const { designToNaturalSize, pxToDesignSize } = module.helper;
   const style: any = {};
   const transform: any = {};
 
@@ -74,9 +79,15 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   }
 
   if (layout.size) {
-    const [w, h] = layout.size;
-    if (w) style.width = designToNaturalSize(w);
-    if (h) style.height = designToNaturalSize(h);
+    const [w, h, sizeOpts] = layout.size;
+    if (w) {
+      style.width = designToNaturalSize(w);
+    }
+    if (h) {
+      style.height = designToNaturalSize(h, {
+        adaptiveH: sizeOpts?.unit === "%",
+      });
+    }
   }
 
   if (layout.position) {
@@ -84,7 +95,11 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   }
 
   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);

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/comps.ts

@@ -1,12 +1,12 @@
-import { createToolbars } from "./default";
-import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
+// import { createToolbars } from "./default";
+// import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
 
-export const Toolbars = createToolbars( {
-    text: {
-        component: Toolbar,
-        getVisible: (comp) =>  !!comp && comp.compKey == "Text",
-        onClick(comp) {
-            // this.actions.setCompLayer(comp, -1);
-        },
-    },
-});
+// export const Toolbars = createToolbars( {
+//     text: {
+//         component: Toolbar,
+//         getVisible: (comp) =>  !!comp && comp.compKey == "Text",
+//         onClick(comp) {
+//             // this.actions.setCompLayer(comp, -1);
+//         },
+//     },
+// });

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/objects/Toolbars/topToolbars.ts

@@ -1,5 +1,5 @@
 import {toolbars, ToolbarItem } from "./default";
-import { Toolbars } from "./comps";
+// import { Toolbars } from "./comps";
 import { toolbar } from "../../components/CompUI/basicUI/Polygon/toolbar";
 import { LayoutToolbars } from "./layout";
 
@@ -29,7 +29,7 @@ export const TopToolbarsLeft: ToolbarItem[] = [
     LayoutToolbars.SameWidth,
     LayoutToolbars.SameHeight,
     
-    Toolbars.text,
+    // Toolbars.text,
     toolbar,
 ]
 

src/modules/editor/typings.ts

@@ -2,12 +2,13 @@ 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, { unit?: "px" | "%" }?]; // width height wUnit hUnit
+  direction?: "top" | "bottom"; // 默认top
   mask?: string;
   alignSelf?: string;
   transform?: {

src/pages/editor/EditPage/index.tsx

@@ -1,4 +1,5 @@
 import { initEditor } from "@/modules/editor";
+import Viewport from "@/modules/editor/components/Viewport";
 import { EditorMode } from "@/modules/editor/typings";
 import { useResource } from "@/modules/resource";
 import { SelectOneImage } from "@/pages/website/Material2/modal";
@@ -41,5 +42,5 @@ export default defineComponent(() => {
     return resource.treeController.selectOnePackScene();
   };
 
-  return () => <editor.components.Viewport class="!h-100vh" />;
+  return () => <Viewport class="!h-100vh" />;
 });

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>