text

package.json

@@ -19,6 +19,7 @@
     "@ckeditor/ckeditor5-alignment": "^38.0.0",
     "@ckeditor/ckeditor5-basic-styles": "^38.0.0",
     "@ckeditor/ckeditor5-build-classic": "^38.0.1",
+    "@ckeditor/ckeditor5-editor-decoupled": "38.0.1",
     "@ckeditor/ckeditor5-editor-inline": "^38.0.0",
     "@ckeditor/ckeditor5-essentials": "^38.0.0",
     "@ckeditor/ckeditor5-font": "^38.0.0",
@@ -32,7 +33,7 @@
     "@queenjs-modules/queentree": "^0.0.10",
     "@queenjs-modules/queentree-explorer": "^0.0.6",
     "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
-    "@queenjs/components": "^0.0.21",
+    "@queenjs/components": "^0.0.22",
     "@queenjs/controllers": "^0.0.6",
     "@queenjs/icons": "^0.0.20",
     "@queenjs/theme": "^0.0.8",

public/index.html

@@ -25,10 +25,10 @@
     </script>
     <script type="text/javascript">
       window._AMapSecurityConfig = {
-        securityJsCode: 'bf7d8bf1e71d89263dcbf4829882791d',
+        securityJsCode: '87e84280042f6e9b4f07bfa4b67288e8',
       }  </script>
     <script type="text/javascript"
-      src="https://webapi.amap.com/maps?v=2.0&key=e8d3513c8551b20ec90b991249fa59a1"></script>
+      src="https://webapi.amap.com/maps?v=2.0&key=389e81c4c61fd6dff4ab8f742af82e5f"></script>
 
   </head>
 

src/assets/icons/components/IconCombination.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconCombination = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M781.245-842.839v12.768h12.79v-5.147h5.216v-12.844H786.4v5.223Z" transform="translate(456.753 -487.933)"/></g></svg>)
+export const IconCombination = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><rect fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" width="15" height="15" transform="translate(1247 -1337.607) rotate(45)"/><circle fill="none" stroke="currentColor" stroke-width="1.2px" cx="2.9" cy="2.9" r="2.9" transform="translate(1244.1 -1329.9)"/></g></svg>)

src/assets/icons/components/IconGroup.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconGroup = createIcon(<svg viewBox="0 0 16 16"><g transform="translate(-292 -40)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)"/><g transform="translate(288 35.707)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(6 6.293)"/></g><g transform="translate(291.156 38.863)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="6" height="6" rx="1" transform="translate(5.844 6.137)"/></g></g></svg>)
+export const IconGroup = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>)

src/assets/icons/components/IconLineHeight.tsx

@@ -0,0 +1,16 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconLineHeight = createIcon(<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/components/IconStrikethrough.tsx

@@ -0,0 +1,11 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextBold.tsx

@@ -0,0 +1,10 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextCenter.tsx

@@ -0,0 +1,10 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextItalic.tsx

@@ -0,0 +1,9 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextJustify.tsx

@@ -0,0 +1,8 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextLeft.tsx

@@ -0,0 +1,8 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextRight.tsx

@@ -0,0 +1,10 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconTextUnderline.tsx

@@ -0,0 +1,8 @@
+
+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" />
+</svg>)

src/assets/icons/components/IconUngroup.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconUngroup = createIcon(<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(13.116 13.115) rotate(45)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(17.145 13.115) rotate(135)"/></g></g></svg>)

src/assets/icons/index.ts

@@ -12,6 +12,7 @@ export * from "./components/IconCombination";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";
+export * from "./components/IconEmpty";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";
@@ -19,6 +20,7 @@ export * from "./components/IconImage";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayers";
 export * from "./components/IconLayerUp";
+export * from "./components/IconLineHeight";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
@@ -32,8 +34,17 @@ export * from "./components/IconRotate";
 export * from "./components/IconSave";
 export * from "./components/IconScan";
 export * from "./components/IconShape";
+export * from "./components/IconStrikethrough";
 export * from "./components/IconText";
+export * from "./components/IconTextBold";
+export * from "./components/IconTextCenter";
+export * from "./components/IconTextItalic";
+export * from "./components/IconTextJustify";
+export * from "./components/IconTextLeft";
+export * from "./components/IconTextRight";
+export * from "./components/IconTextUnderline";
 export * from "./components/IconTpl";
 export * from "./components/IconTransfer";
+export * from "./components/IconUngroup";
 export * from "./components/IconVideo";
 export * from "./components/IconWechat";

src/assets/icons/svg/combination.svg

@@ -1 +1 @@
-<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M781.245-842.839v12.768h12.79v-5.147h5.216v-12.844H786.4v5.223Z" transform="translate(456.753 -487.933)"/></g></svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><rect fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" width="15" height="15" transform="translate(1247 -1337.607) rotate(45)"/><circle fill="none" stroke="currentColor" stroke-width="1.2px" cx="2.9" cy="2.9" r="2.9" transform="translate(1244.1 -1329.9)"/></g></svg>

src/assets/icons/svg/group.svg

@@ -1 +1 @@
-<svg viewBox="0 0 16 16"><g transform="translate(-292 -40)"><rect fill="none" opacity="0.128" width="16" height="16" transform="translate(292 40)"/><g transform="translate(288 35.707)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" rx="1" transform="translate(6 6.293)"/></g><g transform="translate(291.156 38.863)"><rect fill="none" stroke="#a9abaf" stroke-linecap="round" stroke-linejoin="round" width="6" height="6" rx="1" transform="translate(5.844 6.137)"/></g></g></svg>
+<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(0 1.674)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M17.205,12.971h-5" transform="translate(27.676 -0.061) rotate(90)"/></g></g></svg>

src/assets/icons/svg/lineHeight.svg

@@ -0,0 +1,14 @@
+<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/strikethrough.svg

@@ -0,0 +1,9 @@
+<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>

src/assets/icons/svg/textBold.svg

@@ -0,0 +1,8 @@
+<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>

src/assets/icons/svg/textCenter.svg

@@ -0,0 +1,8 @@
+<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>

src/assets/icons/svg/textItalic.svg

@@ -0,0 +1,7 @@
+<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>

src/assets/icons/svg/textJustify.svg

@@ -0,0 +1,6 @@
+<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>

src/assets/icons/svg/textLeft.svg

@@ -0,0 +1,6 @@
+<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>

src/assets/icons/svg/textRight.svg

@@ -0,0 +1,8 @@
+<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>

src/assets/icons/svg/textUnderline.svg

@@ -0,0 +1,6 @@
+<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>

src/assets/icons/svg/ungroup.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 34 34"><g transform="translate(-983 -379)"><rect fill="none" width="34" height="34" rx="6" transform="translate(983 379)"/><g transform="translate(991.428 387.423)"><g transform="translate(0)"><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.835,6H6V8.881" transform="translate(-6 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M8.855,28.861H6V26.012" transform="translate(-6 -11.716)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M26,6h2.856V8.868" transform="translate(-11.714 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M16.028,6h2.843" transform="translate(-8.865 -6)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M6,16v2.857" transform="translate(-6 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" stroke-linejoin="round" d="M30,16v1.8" transform="translate(-12.855 -8.856)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M15.992,30h2.4" transform="translate(-8.854 -12.855)"/></g><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(13.116 13.115) rotate(45)"/><path fill="none" stroke="#111" stroke-linecap="round" stroke-width="1.2px" d="M5.7,0H0" transform="translate(17.145 13.115) rotate(135)"/></g></g></svg>

src/components/Empty.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+
+import { IconEmpty } from "@/assets/icons";
+
+export default defineComponent({
+  props: {
+    description: string().def("暂无任何内容..."),
+  },
+  setup(props) {
+    return () => {
+      const { description } = props;
+      return (
+        <div class="w-1/1 py-50px text-center">
+          <IconEmpty class="text-80px" />
+          <div class="mt-20px text-gray text-12px">{description}</div>
+        </div>
+      );
+    };
+  },
+});

src/controllers/wxController.ts

@@ -168,14 +168,6 @@ export class wxController {
       infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
       ...options,
     };
-    wx.openLocation({
-      ...options,
-      success: function () {
-        console.error("设置成功");
-      },
-      fail: function (msg: any) {
-        console.error("设置失败：" + JSON.stringify(msg));
-      },
-    });
+    wx.openLocation(options);
   }
 }

src/dict/apis.ts

@@ -1,25 +1,25 @@
 const baseURL = "https://www.infish.cn";
-const localURL = "http://192.168.110.180:8890";
+// const localURL = "http://192.168.110.180:8890";
 
 const baseVersion = "/cloud/v1";
 const treeVersion = "/tree/v1";
 
-const _params = new URLSearchParams(decodeURIComponent(location.search))
-const base =  _params.get("base") || ""
-const user =  _params.get("user") || ""
+const _params = new URLSearchParams(decodeURIComponent(location.search));
+const base = _params.get("base") || "";
+const user = _params.get("user") || "";
 
 //@ts-ignore
 window.noObsCdn = true;
 
-console.log("base=>",base, user);
+console.log("base=>", base, user);
 
 const Dict_Apis = {
   authLocal: user,
   queentreeLocal: base,
   auth: `${baseURL}${baseVersion}/usercenter`,
   queentree: `${baseURL}${treeVersion}/assetcenter`,
-  // promotion: `${baseURL}${baseVersion}/promotionv1`,
-  promotion: `${localURL}/promotion`,
+  promotion: `${baseURL}${baseVersion}/promotionv1`,
+  // promotion: `${localURL}/promotion`,
 };
 
 export { Dict_Apis };

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

@@ -4,6 +4,7 @@ import { defineComponent, onMounted, ref, watch } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
+// import AMapLoader from "@amap/amap-jsapi-loader";
 
 declare const AMap: any;
 
@@ -17,12 +18,23 @@ export const Component = defineComponent({
     const comp = useCompData(props.compId);
     const { value } = comp;
 
+    // const AMap = ref();
     const map = ref();
     const marker = ref();
 
     function initMap() {
+      // AMapLoader.load({
+      //   key: "389e81c4c61fd6dff4ab8f742af82e5f", // 申请好的Web端开发者Key，首次调用 load 时必填
+      //   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+      //   plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+      //   Loca: {
+      //     version: "2.0.0",
+      //   },
+      // })
+      //   .then((res) => {
+      // AMap.value = res;
       map.value = new AMap.Map(props.compId, {
-        viewMode: "3D",
+        // viewMode: "3D",
         zoom: 11,
         center: value.addressInfo.lnglat,
       });
@@ -37,6 +49,10 @@ export const Component = defineComponent({
           map.value.addControl(toolbar);
         }
       });
+      // })
+      // .catch((e: any) => {
+      //   console.log("error", e);
+      // });
     }
 
     function updateMap() {
@@ -72,8 +88,11 @@ export const Component = defineComponent({
       <View compId={props.compId}>
         <div
           id={props.compId}
-          class="w-95/100 mx-auto"
-          style={{ aspectRatio: 1 }}
+          class="w-1/1"
+          // style={{ aspectRatio: 1 }}
+          style={{
+            height: "calc(100% - 44px)",
+          }}
         ></div>
         {!store.isEditMode && (
           <div
@@ -84,7 +103,7 @@ export const Component = defineComponent({
           </div>
         )}
 
-        <div class="text-14px text-[#666] py-15px text-center">
+        <div class="text-14px text-[#666] py-15px text-center bg-light-50">
           {value.addressInfo.address}
         </div>
       </View>

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

@@ -17,7 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
     },
   },
   layout: {
-    size: [750, 800],
+    size: [710, 710],
   },
 });
 

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

@@ -14,9 +14,9 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {
     lineColor: "black",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "black",
+    lineWidth: 0,
+    isFill: true,
+    fillColor: "#A4A4A4",
     points: [],
     isClose: true,
     reverseFill: false,

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

@@ -64,7 +64,7 @@ export const Component = defineComponent({
         ctx.beginPath();
         let degree = (2 *Math.PI) / n 
         for (let i = 0; i<n; i++) {
-            const a = i*degree - Math.PI / 2.0;
+            const a = i*degree + Math.PI / 180.0 * data.value.baseAngle;
             const x = Math.cos(a), y = Math.sin(a);
             ctx.lineTo(x*size + cx, y*size + cy)
         }

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

@@ -15,13 +15,14 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {
     lineColor: "black",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "black",
+    lineWidth: 0,
+    isFill: true,
+    fillColor: "#A4A4A4",
     points: [],
     isClose: true,
     reverseFill: false,
-    edges: 6
+    edges: 6,
+    baseAngle: 0,
   },
   layout: {
     size: [400, 400],
@@ -41,6 +42,17 @@ export const Form = createAttrsForm([
             step: 1,
           },
     },
+    {
+        label: "角度",
+        dataIndex: "value.baseAngle",
+        component: Slider,
+        props: {
+            defaultValue: 0,
+            min: 0,
+            max: 180,
+            step: 1,
+        },
+    },
 
   {
     label: "线宽",

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

@@ -42,9 +42,8 @@ export const Component = defineComponent({
           ctx.fillStyle = data.value.fillColor;
           ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
-
-    
-        const padding = Math.max(10, data.value.lineWidth);
+        
+        const padding =  data.value.lineWidth / 2.0;
         ctx.lineJoin = "round";
         ctx.beginPath();
         ctx.moveTo(padding, padding);
@@ -53,7 +52,10 @@ export const Component = defineComponent({
         ctx.lineTo(padding, height - padding);
         ctx.lineTo(padding, padding);
         ctx.closePath();
-        ctx.stroke();
+
+        if (data.value.lineWidth != 0) {
+          ctx.stroke();
+        }
        
         if (data.value.isFill)    {
             let bColor = data.value.fillColor;

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

@@ -14,9 +14,9 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {
     lineColor: "black",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "black",
+    lineWidth: 0,
+    isFill: true,
+    fillColor: "#A4A4A4",
     reverseFill: false,
   },
   layout: {

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

@@ -0,0 +1,64 @@
+import DecoupledEditorBase from "@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor";
+
+import { Alignment } from "@ckeditor/ckeditor5-alignment";
+import {
+  Bold,
+  Italic,
+  Strikethrough,
+  Underline,
+} from "@ckeditor/ckeditor5-basic-styles";
+
+import { Essentials } from "@ckeditor/ckeditor5-essentials";
+import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
+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 { EditorConfig } from "@ckeditor/ckeditor5-core";
+class HeadlessEditor extends DecoupledEditorBase {}
+interface HeadlessConfig extends EditorConfig {
+  lineHeight: any;
+}
+HeadlessEditor.builtinPlugins = [
+  Essentials,
+  Bold,
+  Italic,
+  Link,
+  Underline,
+  Strikethrough,
+  Heading,
+  Paragraph,
+  FontColor,
+  FontSize,
+  FontFamily,
+  Alignment,
+  LineHeight,
+];
+const fontSizeOptions = [];
+const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60];
+for (const s of list) {
+  fontSizeOptions.push({ title: s + "", model: s + "px" });
+}
+const fontFamilyOptions = [
+  { title: "默认字体", model: "" },
+  { title: "宋体", model: "宋体,Songti,STSong,serif" },
+  { title: "黑体", model: "黑体,Heiti,STHeiti,sans-serif" },
+  { title: "仿宋", model: "仿宋,FangSong,STFangsong,serif" },
+  { title: "楷体", model: "楷体,KaiTi,STKaiti,sans-serif" },
+];
+// Editor configuration.
+HeadlessEditor.defaultConfig = {
+  fontSize: {
+    options: fontSizeOptions,
+    supportAllValues: true,
+  },
+  fontFamily: {
+    options: fontFamilyOptions,
+    supportAllValues: true,
+  },
+  lineHeight: {
+    options: [1, 1.5, 2, 2.5, 3],
+  },
+} as HeadlessConfig;
+
+export default HeadlessEditor;

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

@@ -1,153 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import {
-  AlignCenterOutlined,
-  AlignLeftOutlined,
-  AlignRightOutlined,
-  BoldOutlined,
-  ItalicOutlined,
-  StrikethroughOutlined,
-  UnderlineOutlined,
-} from "@ant-design/icons-vue";
-import { css } from "@linaria/core";
-import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
-import {
-  Button,
-  InputNumber,
-  Select,
-  Tooltip
-} from "ant-design-vue";
-import { isEmpty } from "lodash";
-import { defineComponent } from "vue";
-import { any } from "vue-types";
-import { bgColumns, layoutColumns } from "../../defines/createAttrsForm";
-import { createColorOpts } from "../../defines/formOpts/createColorOpts";
-
-const StyleButtons = defineComponent({
-  setup() {
-    return () => (
-      <div class={ButtonsStyle}>
-        <Tooltip title={"加粗"}>
-          <Button icon={<BoldOutlined />} class={"active"} type="text"></Button>
-        </Tooltip>
-        <Tooltip title={"斜体"}>
-          <Button icon={<ItalicOutlined />} type="text"></Button>
-        </Tooltip>
-        <Tooltip title={"下划线"}>
-          <Button icon={<UnderlineOutlined />} type="text"></Button>
-        </Tooltip>
-        <Tooltip title={"删除线"}>
-          <Button icon={<StrikethroughOutlined />} type="text"></Button>
-        </Tooltip>
-        <Tooltip title={"左对齐"}>
-          <Button icon={<AlignLeftOutlined />} type="text"></Button>
-        </Tooltip>
-        <Tooltip title={"居中对齐"}>
-          <Button icon={<AlignCenterOutlined />} type="text"></Button>
-        </Tooltip>
-        <Tooltip title={"右对齐"}>
-          <Button icon={<AlignRightOutlined />} type="text"></Button>
-        </Tooltip>
-      </div>
-    );
-  },
-});
-
-const TextColumns: ColumnItem[] = [
-  {
-    label: "字体",
-    dataIndex: "fontFamily",
-    component: Select,
-    props: {
-      class: "w-full",
-      options: [{ label: "默认字体", value: "" }]
-        .concat
-        // Object.entries(compMasks).map(([key, value]) => {
-        //   return {
-        //     label: value.name,
-        //     value: key,
-        //   };
-        // })
-        (),
-    },
-  },
-  {
-    label: "字号",
-    dataIndex: "fontSize",
-    component: InputNumber,
-    props: {
-      class: "w-full",
-      min: 12,
-      max: 99,
-    },
-  },
-  {
-    label: "颜色",
-    dataIndex: "color",
-    ...createColorOpts(),
-  },
-  {
-    label: "",
-    dataIndex: "style",
-    component: StyleButtons,
-  },
-];
-
-export const TextForm = defineComponent({
-  props: {
-    component: any<DesignComp>().isRequired,
-  },
-  setup(props) {
-    const { actions } = useEditor();
-    function changeVal(e: { dataIndex: string; value: any }) {
-      actions.updateCompData(props.component, e.dataIndex, e.value);
-    }
-    return () => {
-      const { component } = props;
-      return (
-        <div>
-          <FormUI
-            columns={TextColumns}
-            data={{}}
-            onChange={(v) => {
-              console.log(v);
-            }}
-          />
-          <div>布局</div>
-          <div>
-            <FormUI
-              data={component}
-              columns={layoutColumns}
-              onChange={changeVal}
-            />
-            {!isEmpty(component?.layout?.background) ? (
-              <>
-                <div>背景</div>
-                <FormUI
-                  data={component}
-                  columns={bgColumns}
-                  onChange={changeVal}
-                />
-              </>
-            ) : null}
-          </div>
-        </div>
-      );
-    };
-  },
-});
-const ButtonsStyle = css`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: @inf-form-bg;
-  border-radius: 2px;
-  .ant-btn {
-    flex: 1;
-    &.active {
-      color: @inf-primary-color;
-    }
-  }
-`;
-const FormStyle = css``;

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

@@ -0,0 +1,153 @@
+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 { Button, Divider, InputNumber, Select } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+import ToolbarsUI from "../../formItems/ToolbarsUI";
+import { AlignComp, LineHeightComp, TextColor } from "./ToolbarComp";
+
+export const TextToolbar = defineComponent({
+  props: {
+    component: any<DesignComp>().isRequired,
+  },
+  setup(props) {
+    const { actions } = useEditor();
+    const toolbarColumns = [
+      {
+        dataIndex: "fontFamily",
+        component: Select,
+        props: {
+          class: "w-180px",
+          defaultValue: "",
+          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" },
+          ],
+        },
+      },
+      {
+        label: "字号",
+        dataIndex: "fontSize",
+        component: InputNumber,
+        props: {
+          class: "!w-66px",
+          defaultValue: 12,
+          min: 12,
+          max: 99,
+        },
+      },
+      {
+        label: "字体颜色",
+        dataIndex: "color",
+        component: TextColor,
+      },
+      {
+        label: "加粗",
+        dataIndex: "bold",
+        component: () => <Button icon={<IconTextBold />} type="text"></Button>,
+        itemProps: {
+          class: "!mx-2px",
+        },
+      },
+      {
+        label: "斜体",
+        dataIndex: "italic",
+        component: () => (
+          <Button icon={<IconTextItalic />} type="text"></Button>
+        ),
+        itemProps: {
+          class: "!mx-2px",
+        },
+      },
+      {
+        label: "下划线",
+        dataIndex: "underline",
+        component: () => (
+          <Button icon={<IconTextUnderline />} type="text"></Button>
+        ),
+        itemProps: {
+          class: "!mx-2px",
+        },
+      },
+      {
+        label: "删除线",
+        dataIndex: "strikethrough",
+        component: () => (
+          <Button icon={<IconStrikethrough />} type="text"></Button>
+        ),
+        itemProps: {
+          class: "!mx-2px",
+        },
+      },
+      {
+        component: () => (
+          <Divider
+            type="vertical"
+            style={{ fontSize: "26px", borderColor: "#1f1f1f" }}
+          />
+        ),
+      },
+      {
+        label: "对齐方式",
+        dataIndex: "align",
+        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: "align",
+        component: () => <Button icon={<LinkOutlined />} type="text"></Button>,
+        itemProps: {
+          class: "!mx-2px",
+        },
+      },
+    ];
+    function changeVal(e: { dataIndex: string; value: any }) {
+      actions.updateCompData(props.component, e.dataIndex, e.value);
+    }
+    return () => {
+      const { component } = props;
+      return (
+        <div class={[TextToolbarStyle, "flex items-center"]}>
+          <ToolbarsUI
+            data={component}
+            columns={toolbarColumns}
+            onChange={changeVal}
+          />
+        </div>
+      );
+    };
+  },
+});
+const TextToolbarStyle = css``;

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

@@ -0,0 +1,218 @@
+import {
+  IconTextCenter,
+  IconTextJustify,
+  IconTextLeft,
+  IconTextRight,
+  IconLineHeight,
+} from "@/assets/icons";
+import { css } from "@linaria/core";
+import { Button, Dropdown, Menu, Tooltip } from "ant-design-vue";
+
+import { defineComponent, onMounted } from "vue";
+import { string } from "vue-types";
+import Pickr from "@simonwep/pickr";
+import "@simonwep/pickr/dist/themes/nano.min.css";
+export const TextColor = defineComponent({
+  props: {
+    value: string().def("#666666"),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    let picker: any = null;
+
+    function initPicker() {
+      picker = Pickr.create({
+        el: ".color_picker",
+        theme: "nano",
+        default: props.value,
+        i18n: {
+          "btn:save": "确定",
+        },
+        // swatches: defaultColor,
+        components: {
+          preview: true,
+          opacity: false,
+          hue: true,
+          interaction: {
+            hex: false,
+            rgba: false,
+            input: true,
+            save: true,
+          },
+        },
+      });
+
+      picker.on("change", (color: any) => {
+        const hexa = color.toHEXA().toString();
+        // emit("change", hexa);
+      });
+      picker.on("save", (color: any) => {
+        picker.hide();
+        const hexa = color.toHEXA().toString();
+        emit("change", hexa);
+      });
+    }
+    onMounted(() => {
+      initPicker();
+    });
+
+    return () => (
+      <div
+        class={ColorPicker}
+        onClick={() => {
+          picker?.show();
+        }}
+      >
+        <div class={"color_picker"}></div>
+      </div>
+    );
+  },
+});
+const ColorPicker = css`
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+  cursor: pointer;
+  .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);
+      }
+    }
+  }
+`;
+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()} 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()} trigger={"click"} placement="bottom">
+        <Button type="text" icon={<IconLineHeight />}></Button>
+      </Dropdown>
+    );
+  },
+});
+const currStyle = css`
+  color: @inf-primary-color;
+`;

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

@@ -0,0 +1,238 @@
+import { useEditor } from "@/modules/editor";
+import HeadlessEditor from "./EditorCustom";
+import { css } from "@linaria/core";
+import { nextTick } from "process";
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { View } from "../View";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().def(""),
+  },
+  setup(props) {
+    const comp = useCompData(props.compId);
+    const { store, actions } = useEditor();
+
+    const state = reactive({
+      editableId: "",
+    });
+
+    if (store.isEditMode) {
+      actions.on("textFocus", function (compId, focus) {
+        if (compId != props.compId) return;
+        if (focus) {
+          state.editableId = "" + Date.now();
+          return;
+        }
+        state.editableId = "";
+      });
+    }
+
+    return () => (
+      <View
+        class={[textStyle]}
+        compId={props.compId}
+        onDblclick={() => {
+          if (store.isEditMode) {
+            state.editableId = "" + Date.now();
+          }
+        }}
+      >
+        {state.editableId ? (
+          <EditorComp
+            compId={props.compId}
+            key={state.editableId}
+            onLost={() => {
+              state.editableId = "";
+            }}
+          />
+        ) : (
+          <div
+            innerHTML={comp.value}
+            class={[textStyle, store.isEditMode && `pointer-events-none`]}
+          />
+        )}
+      </View>
+    );
+  },
+});
+
+const EditorComp = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  emits: ["lost"],
+
+  setup(props, { emit }) {
+    const inputRef = ref();
+    let editorRefVal = ref<HeadlessEditor>().value;
+    const comp = useCompData(props.compId);
+    const { store, actions, helper, controls } = useEditor();
+
+    let blurCanceler: any = null;
+    // onMounted(() => {
+    //   blurCanceler = blurHandle();
+    //   nextTick(() => {
+    //     initHeight();
+    //   });
+    // });
+    // onUnmounted(() => {
+    //   blurCanceler?.();
+    // });
+    // const preHeight = ref<number>(0);
+    // const initHeight = () => {
+    //   const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
+    //   const isChange = Math.abs(preHeight.value - h) > 1;
+    //   preHeight.value = h;
+    //   actions.updateCompData(comp, "layout.size.1", preHeight.value);
+    //   helper.extendStreamCard(store.currStreamCardId);
+    //   if (isChange) {
+    //     actions.selectObjs([]);
+    //     setTimeout(() => {
+    //       actions.selectObjs([props.compId]);
+    //     }, 0);
+    //   }
+    // };
+    // function isInCkBodyWrapper(dom: HTMLElement) {
+    //   if (editorInstance.value) {
+    //     const in1 =
+    //       editorInstance.value.ui.view.toolbar.element?.contains(dom) ||
+    //       editorInstance.value.ui.view.editable.element?.contains(dom);
+    //     if (in1) return true;
+
+    //     const ckBodyWrapper = document.querySelector(".ck-body-wrapper");
+    //     if (ckBodyWrapper === dom || ckBodyWrapper?.contains(dom)) {
+    //       return true;
+    //     }
+    //   }
+    //   return false;
+    // }
+
+    // function blurHandle() {
+    //   function blur(e: MouseEvent) {
+    //     const target = e.target as HTMLElement;
+
+    //     if (!editorInstance.value) return;
+
+    //     if (isInCkBodyWrapper(target)) {
+    //       e.stopPropagation();
+    //       return;
+    //     }
+    //     actions.submitUpdate();
+    //     emit("lost");
+    //   }
+    //   document.addEventListener("mousedown", blur, {
+    //     capture: true,
+    //   });
+    //   return () => {
+    //     document.removeEventListener("mousedown", blur, { capture: true });
+    //   };
+    // }
+    const initEditor = async () => {
+      const dom: HTMLElement | null = document.querySelector(
+        `#${props.compId}`
+      );
+      if (dom) {
+        editorRefVal = await HeadlessEditor.create(dom);
+        editorRefVal.setData(comp.value);
+        editorRefVal.focus();
+        // const range = document.createRange();
+        // range.selectNodeContents(inputRef.value.$el);
+        // const selection = window.getSelection();
+        // selection?.removeAllRanges();
+        // selection?.addRange(range);
+        editorRefVal.on("input", (value: any) => {
+          if (comp.value !== value) {
+            actions.updateCompData(comp, "value", value);
+          }
+        });
+      
+      }
+    };
+
+    onMounted(() => {
+      initEditor();
+    });
+    return () => {
+      return <div class={textStyle} id={props.compId} ref={inputRef}></div>;
+    };
+
+    // return () => (
+
+    //   <ckeditor
+    //     class={textStyle}
+    //     ref={inputRef}
+    //     editor={InlineEditor}
+    //     onInput={(value: any) => {
+    //       if (editorInstance.value && comp.value !== value) {
+    //         actions.updateCompData(comp, "value", value);
+    //         nextTick(() => {
+    //           const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
+    //           const isChange = Math.abs(preHeight.value - h) > 1;
+    //           preHeight.value = h;
+    //           actions.updateCompDatas(
+    //             comp,
+    //             ["value", "layout.size.1"],
+    //             [value, preHeight.value]
+    //           );
+    //           helper.extendStreamCard(store.currStreamCardId);
+    //           if (isChange) {
+    //             console.log("changing=>", isChange);
+    //             actions.selectObjs([]);
+    //             setTimeout(() => {
+    //               actions.selectObjs([props.compId]);
+    //             }, 0);
+    //           }
+    //         });
+    //       }
+    //     }}
+    //     onReady={(editor: InlineEditor) => {
+    //       editorInstance.value = editor;
+    //       console.log("editor");
+    //       editor.setData(comp.value);
+    //       editor.focus();
+    //       const range = document.createRange();
+    //       range.selectNodeContents(inputRef.value.$el);
+    //       const selection = window.getSelection();
+    //       selection?.removeAllRanges();
+    //       selection?.addRange(range);
+    //     }}
+    //     config={GetConfig()}
+    //   />
+    // );
+  },
+});
+
+const textStyle = css`
+  font-size: 14px;
+  width: 100%;
+  color: #666;
+  word-break: break-all;
+  h2 {
+    color: #111;
+    font-size: 24px;
+    font-weight: 600;
+  }
+  h3 {
+    font-size: 18px;
+    color: #333;
+  }
+  p {
+    margin: 0;
+  }
+
+  .ck.ck-editor__editable_inline {
+    cursor: text;
+    overflow: hidden;
+    border: none !important;
+
+    > :last-child,
+    > :first-child {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    padding: 0 !important;
+  }
+`;

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 { TextForm } from "./TextForm";
+import { TextToolbar } from "./TextToolbar";
 export { Component } from "./component";
 
 export const options = {
@@ -17,7 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
 });
 
 // export const Form = TextForm;
-
+export const Toolbar = TextToolbar;
 export const Form = createAttrsForm([
   // {
   //   label: "文本",

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

@@ -37,20 +37,23 @@ export const Component = defineComponent({
         ctx.lineWidth = data.value.lineWidth;
         
         ctx.strokeStyle = data.value.lineColor;
-        const padding = Math.max(10, data.value.lineWidth);
+        const padding =  data.value.lineWidth / 2.0;
+
         ctx.lineJoin = "round";
         if (data.value.reverseFill) {
           ctx.fillStyle = data.value.fillColor;
           ctx.fillRect(0, 0, canvas.width, canvas.height);
         }
-        
+
         ctx.beginPath();
         ctx.moveTo(width / 2.0, padding);
         ctx.lineTo(width - padding, height - padding);
         ctx.lineTo(padding, height - padding);
         ctx.closePath();
-        ctx.stroke();
-    
+        if (data.value.lineWidth != 0) {
+            ctx.stroke();
+        }
+        
         if (data.value.isFill) {
             let bColor = data.value.fillColor;
             if (!bColor) bColor = data.value.lineColor;

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

@@ -14,9 +14,9 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {
     lineColor: "black",
-    lineWidth: 1,
-    isFill: false,
-    fillColor: "black",
+    lineWidth: 0,
+    isFill: true,
+    fillColor: "#A4A4A4",
     reverseFill: false,
   },
   layout: {

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

@@ -201,7 +201,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
               columns={layoutColumns}
               onChange={changeVal}
             />
-            {["Web3D", "Video"].includes(component.compKey) ? null : (
+            {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
               <>
                 <div>背景</div>
                 <FormUI

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

@@ -10,7 +10,7 @@ export default defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    // const AMap = ref(AMap);
+    // const AMap = ref();
     const map = ref();
     const marker = ref();
     const geocoder = ref();
@@ -31,7 +31,7 @@ export default defineComponent({
     }
 
     function updateLnglat() {
-      marker.value.setPosition(state.lnglat);
+      marker.value?.setPosition(state.lnglat);
       map.value.add(marker.value);
       map.value.setZoomAndCenter(11, state.lnglat);
       emit("change", { address: state.address, lnglat: state.lnglat });
@@ -70,7 +70,7 @@ export default defineComponent({
       autoComplete.value.search(
         state.address,
         function (status: any, result: any) {
-          if (status === "complete" && result.regeocode) {
+          if (status === "complete") {
             // 搜索成功时，result即是对应的匹配数据
             state.tips = result.tips || [];
             state.visible = true;
@@ -83,13 +83,8 @@ export default defineComponent({
     };
 
     const initMap = () => {
-      map.value = new AMap.Map("mapJsContainer", {
-        viewMode: "3D", //是否为3D地图模式
-        zoom: 11, //初始化地图级别
-        center: state.lnglat, //初始化地图中心点位置
-      });
       // AMapLoader.load({
-      //   key: "e8d3513c8551b20ec90b991249fa59a1", // 申请好的Web端开发者Key，首次调用 load 时必填
+      //   key: "389e81c4c61fd6dff4ab8f742af82e5f", // 申请好的Web端开发者Key，首次调用 load 时必填
       //   version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       //   plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       //   Loca: {
@@ -97,13 +92,21 @@ export default defineComponent({
       //   },
       // })
       //   .then((res) => {
+      //     AMap.value = res;
+      map.value = new AMap.Map("mapJsContainer", {
+        // viewMode: "3D", //是否为3D地图模式
+        zoom: 11, //初始化地图级别
+        center: state.lnglat, //初始化地图中心点位置
+      });
 
       AMap.plugin(
         ["AMap.Geocoder", "AMap.AutoComplete", "AMap.ToolBar"],
         () => {
           // 使用geocoder做地理/逆地理编码
           geocoder.value = new AMap.Geocoder();
-          autoComplete.value = new AMap.AutoComplete({ city: "全国" });
+          autoComplete.value = new AMap.AutoComplete({
+            city: "全国",
+          });
 
           const toolbar = new AMap.ToolBar({ position: "LT" }); // 缩放工具条实例化
           map.value.addControl(toolbar);
@@ -136,6 +139,9 @@ export default defineComponent({
     watch(
       () => [props.value],
       () => {
+        const { lnglat } = props.value;
+        if (state.lnglat[0] == lnglat[0] && state.lnglat[1] == lnglat[1])
+          return;
         state.address = props.value.address;
         state.lnglat = props.value.lnglat;
         updateLnglat();
@@ -149,10 +155,10 @@ export default defineComponent({
             value={state.address}
             placeholder="请输入地名"
             class="w-1/1"
-            onSearch={searchAddress}
+            // onSearch={searchAddress}
             onChange={(e) => {
               state.address = e.target.value || "";
-              // searchAddress();
+              searchAddress();
             }}
           />
           {state.visible && (

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

@@ -0,0 +1,158 @@
+import { css, cx } from "@linaria/core";
+import { Tooltip } from "ant-design-vue";
+import _ from "lodash";
+import { computed, defineComponent } from "vue";
+import { any, array, bool, func } from "vue-types";
+
+export interface ColumnItem {
+  label?: string;
+  component?: ((...args: any[]) => any) | Record<string, any>;
+  dataIndex?: string;
+  setterIndex?: string;
+  props?: { [name: string]: any };
+  itemProps?: { [name: string]: any };
+  getValue?: (v: any) => any;
+  isDisable?: (value: any, data: any) => boolean;
+  isLoading?: (value: any, data: any) => boolean;
+  isVisible?: (value: any, data: any) => boolean;
+  changeExtra?: (data: any) => any;
+  children?: ColumnItem[];
+}
+
+export default defineComponent({
+  props: {
+    columns: array<ColumnItem>().isRequired,
+    data: any().isRequired,
+    disabled: bool(),
+    onChange: func(),
+    onChangeEnd: func(),
+  },
+  setup(props) {
+    return () => <FormUI {...props} />;
+  },
+});
+
+const FormUI = (props: {
+  columns: ColumnItem[];
+  data: any;
+  disabled?: boolean;
+  onChange?: (...arg: any) => void;
+  onChangeEnd?: (...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, ...restProps, index });
+      })}
+    </>
+  );
+};
+
+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 = (props: {
+  column: ColumnItem;
+  index?: number;
+  data: any;
+  disabled?: boolean;
+  onChange?: (...arg: any) => void;
+  onChangeEnd?: (...arg: any) => void;
+}) => {
+  const { column, data, index, onChange, onChangeEnd } = props;
+
+  const compValue = computed(() => {
+    const { data, column } = props;
+    if (!column.dataIndex) return;
+    const itemValue = _.get(data, column.dataIndex);
+    return column.getValue ? column.getValue(itemValue) : itemValue;
+  });
+
+  const changeVal = (value: any, ...args: any[]) => {
+    const { column } = props;
+    let params = {
+      dataIndex: column.dataIndex,
+      setterIndex: column.setterIndex,
+      value,
+      ...args,
+    };
+    if (column.changeExtra) params = column.changeExtra?.(params);
+    onChange?.(params);
+    return params;
+  };
+
+  const changeValEnd = (value: any, ...args: any[]) => {
+    const params = changeVal(value, ...args);
+    onChangeEnd?.(params);
+  };
+
+  const isVisible = column.isVisible?.(compValue.value, data);
+  if (column.isVisible && !isVisible) return null;
+
+  const disabled = props.disabled || column.isDisable?.(compValue.value, data);
+
+  const component = column.component;
+
+  return (
+    <div
+      key={index}
+      class={cx(formItemStyles, disabled && "disabled")}
+      {...column.itemProps}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {column.label ? (
+        <Tooltip title={column.label} placement="top">
+          <component
+            value={compValue.value}
+            {...column.props}
+            disabled={disabled}
+            loading={column.isLoading?.(compValue.value, data)}
+            onChange={changeVal}
+            onChangeEnd={changeValEnd}
+          />
+        </Tooltip>
+      ) : (
+        <component
+          value={compValue.value}
+          {...column.props}
+          disabled={disabled}
+          loading={column.isLoading?.(compValue.value, data)}
+          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/TipIcons/index.ts

@@ -13,10 +13,11 @@ import {
   IconRight,
   IconAi,
   IconSave,
+  IconUngroup,
+  IconGroup,
 } from "@/assets/icons";
 import {
   IconCamera,
-  IconClose,
   IconCube,
   IconDelete,
   IconEyeOff,
@@ -94,9 +95,13 @@ export const TipIcons = {
     tips: ["保存为组件"],
   }),
   CancelGroup: createTipIcon({
-    icons: [IconClose],
+    icons: [IconUngroup],
     tips: ["取消打组"],
   }),
+  CreateGroup: createTipIcon({
+    icons: [IconGroup],
+    tips: ["打组"],
+  }),
   Cross: createTipIcon({
     icons: [IconCross],
     tips: ["取消"],

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

@@ -52,7 +52,7 @@ export default defineUI({
       }
 
       return (
-        <div class="scrollbar overflow-y-auto h-1/1" ref={viewportRef}>
+        <div class="scrollbar overflow-y-auto flex-1" ref={viewportRef}>
           <div class="relative">
             <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
               <CompUI.Page.Component compId={pageRoot.id}>
@@ -72,9 +72,15 @@ export default defineUI({
                             if (sourceContainerOptions.groupName != "canvas") {
                               return false;
                             }
+
+                            console.log("payload===>", "xxx", payload);
+                            
                             if (typeof payload == "string") {
                               controls.dragAddCtrl.updateCompKey(payload);
                             } else {
+
+                             
+
                               controls.dragAddCtrl.updateCompKey(payload.type);
                               controls.dragAddCtrl.updateCompData(payload.data);
                             }
@@ -162,7 +168,7 @@ const meatureStyle = css`
   width: 100%;
   height: 100%;
   left: 0;
-  top: 0;
+  top: 50px;
   z-index: 999;
   pointer-events: none;
 

src/modules/editor/components/Viewport/Slider/SliderLeft/CompsUser.tsx

@@ -1,76 +1,102 @@
+import { cx } from "@linaria/core";
+import { Tag } from "ant-design-vue";
+import dayjs from "dayjs";
+import { onMounted, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { any, bool, string } from "vue-types";
+import { string } from "vue-types";
 
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
-import { ICompKeys } from "@/modules/editor/typings";
-import { Empty, Image } from "@queenjs/ui";
-import { useReactive } from "@queenjs/use";
-import { defineUI, queenApi } from "queenjs";
+import { useResource } from "@/modules/resource";
 import { useAuth } from "@queenjs-modules/auth";
-import { Dropdown, Tag } from "ant-design-vue";
-import dayjs from "dayjs";
+import { Image } from "@queenjs/ui";
+import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
-import { useResource } from "@/modules/resource";
-import { onMounted} from "vue";
 
 export default defineUI({
-
+  props: {
+    sourceType: string<"comp" | "text" | "shape">().def("comp"),
+  },
   setup(props) {
     const editor = useEditor();
     const auth = useAuth();
     const resource = useResource();
+
     const listCtrl = resource.controls.CustCompListCtrl;
     listCtrl.hasLimit = true;
-    onMounted(() =>  listCtrl.loadPage(1));
 
-    return () => {
+    //@ts-ignore
+    let isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
+
+    onMounted(() => {
       //@ts-ignore
-      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
-      if (listCtrl.state.list.length == 0) return <Empty />;
+      listCtrl.state.query.type = props.sourceType;
+      listCtrl.loadPage(1);
+    });
 
-      return (
-        <Container
-          class="space-y-10px scrollbar"
-          behaviour="copy"
-          group-name="canvas"
-          animation-duration={0}
-          get-child-payload={(index: number) => {
-            return listCtrl.state.list[index]._id;
-          }}
-        >
-          {listCtrl.state.list.map((item:any) => {
-            const items = ["删除"];
+    watch(
+      () => props.sourceType,
+      () => {
+        //@ts-ignore
+        listCtrl.state.query.type = props.sourceType;
+        listCtrl.loadPage(1);
+      }
+    );
 
-            if (isSys) {
-              item.published ? items.push("取消发布") : items.push("发布平台");
-            }
+    return () => {
+      const { sourceType } = props;
+
+      if (listCtrl.state.list.length == 0) return <Empty class="pt-150px" />;
 
-            return (
-              <Draggable>
-                <div
-                  class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
-                  key={item.compKey}
-                  title={item.name}
-                >
-                  <Image
-                    class="w-full rounded"
-                    src={item.thumbnail}
-                    onClick={() => {
-                        editor.actions.clickCompUserToDesign(item._id)
-                    }
-                    }
-                    size={240}
-                  />
+      return (
+        <div class="scrollbar">
+          <Container
+            class={cx(
+              "grid gap-10px",
+              sourceType == "comp" ? "grid-cols-1" : "grid-cols-2"
+            )}
+            behaviour="copy"
+            group-name="canvas"
+            animation-duration={0}
+            get-child-payload={(index: number) => {
+              return {
+                type: "CompCard",
+                data: { id: listCtrl.state.list[index]._id, isSys: isSys },
+              };
+            }}
+          >
+            {listCtrl.state.list.map((item: any) => {
+              const items = ["删除"];
 
-                  {isSys && (
-                    <Tag
-                      color={item.published ? "green" : "#E88B00"}
-                      // color="rgba(0, 0, 0, 0.4)"
-                      class="absolute top-0 left-0 z-1 !rounded-none"
-                    >
-                      {item.published ? "已发布" : "未发布"}
-                    </Tag>
-                  )}
+              if (isSys) {
+                item.published
+                  ? items.push("取消发布")
+                  : items.push("发布平台");
+              }
+              return (
+                <Draggable>
+                  <div
+                    class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
+                    key={item.compKey}
+                    title={item.name}
+                  >
+                    <Image
+                      class="w-full rounded"
+                      src={item.thumbnail}
+                      onClick={() => {
+                        editor.actions.clickCompUserToDesign(item._id, isSys);
+                      }}
+                      size={240}
+                    />
+                    {isSys && (
+                      <Tag
+                        color={item.published ? "green" : "#E88B00"}
+                        // color="rgba(0, 0, 0, 0.4)"
+                        class="absolute top-0 left-0 z-1 !rounded-none"
+                      >
+                        {item.published ? "已发布" : "未发布"}
+                      </Tag>
+                    )}
                     <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
                       <div class="flex-1 w-0">
                         {/* <div class="text-white text-bold truncate">{record.title}</div> */}
@@ -83,23 +109,23 @@ export default defineUI({
                         onMenu={async (name) => {
                           console.log("name", name);
                           if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item)
+                            await resource.actions.deleteCustomComp(item);
                             listCtrl.fresh();
-
-                            queenApi.messageSuccess("删除成功!")
+                            queenApi.messageSuccess("删除成功!");
                             return;
                           }
-                          const pub = (name == "发布平台");
-                          await resource.actions.publishFrame(item, pub)
+                          const pub = name == "发布平台";
+                          await resource.actions.publishFrame(item, pub);
                           item.published = pub;
                         }}
                       />
                     </div>
-                </div>
-              </Draggable>
-            );
-          })}
-        </Container>
+                  </div>
+                </Draggable>
+              );
+            })}
+          </Container>
+        </div>
       );
     };
   },

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -3,14 +3,15 @@ import { any, bool, string } from "vue-types";
 
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
-import { Empty, Image } from "@queenjs/ui";
-import { useReactive } from "@queenjs/use";
-import { defineUI, queenApi } from "queenjs";
+import { useResource } from "@/modules/resource";
 import { useAuth } from "@queenjs-modules/auth";
-import { Dropdown, Tag } from "ant-design-vue";
+import { Image } from "@queenjs/ui";
+import { useReactive } from "@queenjs/use";
+import { Tag } from "ant-design-vue";
 import dayjs from "dayjs";
+import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
-import { useResource } from "@/modules/resource";
+import Empty from "@/components/Empty";
 
 export default defineUI({
   props: {
@@ -62,7 +63,7 @@ const Comp = defineUI({
       //@ts-ignore
       const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
 
-      if (props.components.length == 0) return <Empty />;
+      if (props.components.length == 0) return <Empty class="pt-150px" />;
       return (
         <Container
           class="space-y-10px scrollbar"
@@ -119,13 +120,13 @@ const Comp = defineUI({
                         onMenu={async (name) => {
                           console.log("name", name);
                           if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item)
+                            await resource.actions.deleteCustomComp(item);
                             // editor.controls.compUICtrl.
-                            queenApi.messageSuccess("删除成功!")
+                            queenApi.messageSuccess("删除成功!");
                             return;
                           }
-                          const pub = (name == "发布平台");
-                          await resource.actions.publishFrame(item, pub)
+                          const pub = name == "发布平台";
+                          await resource.actions.publishFrame(item, pub);
                           item.published = pub;
                         }}
                       />

src/modules/editor/components/Viewport/Slider/SliderLeft/Shapes.tsx

@@ -16,8 +16,8 @@ export default defineComponent({
           "Arc",
           "Curve",
           "Ellipse",
-          // "Triangle",
-          // "Rectage",
+          "Triangle",
+          "Rectage",
           "PolygonNormal",
           "Polygon",
         ].map((key) => compUICtrl.state.components.get(key) as any);

src/modules/editor/components/Viewport/Slider/SliderLeft/SourceItem.tsx

@@ -1,83 +1,80 @@
+import Thumbnail from "@/components/Thumbnail";
 import { css, cx } from "@linaria/core";
+import { useAuth } from "@queenjs-modules/auth";
 import { IconMore } from "@queenjs/icons";
-import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
-import { EyeOutlined } from "@ant-design/icons-vue";
+import { Dropdown, Menu, Tag } from "ant-design-vue";
 import dayjs from "dayjs";
 import { defineUI } from "queenjs";
+import { defineComponent, reactive } from "vue";
 import { any, bool, object } from "vue-types";
-import { useAuth } from "@queenjs-modules/auth";
-import Thumbnail from "@/components/Thumbnail";
-import { reactive, defineComponent} from "vue";
-
 
 const VideoItem = defineComponent({
-    props: {
-      record: object<any>(),
-    },
-    emits: ["click"],
-    setup(props, { emit }) {
-      const state = reactive({
-        play: false,
-      });
-  
-      return () => {
-        const { record } = props;
-        const { play } = state;
-  
-        return (
-          <div
-            style={{ aspectRatio: 1.5 }}
-            class="overflow-hidden cursor-pointer"
-            onMouseenter={() => (state.play = true)}
-            onMouseleave={() => (state.play = false)}
-            onClick={() => emit("click", record.file.url)}
-          >
-            {!play ? (
-              <Thumbnail
-                class="w-1/1 h-1/1"
-                size={240}
-                objectContain={false}
-                src={record.thumbnail}
-              />
-            ) : (
-              <video
-                muted
-                autoplay
-                controls={false}
-                src={record.file.url}
-                class="w-1/1 h-1/1 object-cover"
-              />
-            )}
-          </div>
-        );
-      };
-    },
-  });
-  
-  const ImageItem = defineComponent({
-    props: {
-      record: object<any>(),
-    },
-    emits: ["click"],
-    setup(props, { emit }) {
-      return () => {
-        const { record } = props;
-  
-        return (
-          <Thumbnail
-            size={240}
-            class="draggable-item"
-            style={{ aspectRatio: 1 }}
-            onClick={() => emit("click", record.file.url)}
-            objectContain={true}
-            src={record.file.url}
-          />
-        );
-      };
-    },
-  });
+  props: {
+    record: object<any>(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const state = reactive({
+      play: false,
+    });
+
+    return () => {
+      const { record } = props;
+      const { play } = state;
+
+      return (
+        <div
+          style={{ aspectRatio: 1.5 }}
+          class="overflow-hidden"
+          onMouseenter={() => (state.play = true)}
+          onMouseleave={() => (state.play = false)}
+          onClick={() => emit("click", record.file.url)}
+        >
+          {!play ? (
+            <Thumbnail
+              class="w-1/1 h-1/1"
+              size={240}
+              objectContain={false}
+              src={record.thumbnail}
+            />
+          ) : (
+            <video
+              muted
+              autoplay
+              controls={false}
+              src={record.file.url}
+              class="w-1/1 h-1/1 object-cover"
+            />
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+const ImageItem = defineComponent({
+  props: {
+    record: object<any>(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      const { record } = props;
+
+      return (
+        <Thumbnail
+          size={240}
+          class="draggable-item"
+          style={{ aspectRatio: 1 }}
+          onClick={() => emit("click", record.file.url)}
+          objectContain={true}
+          src={record.file.url}
+        />
+      );
+    };
+  },
+});
 
-  
 export default defineUI({
   props: {
     record: any(),
@@ -88,10 +85,9 @@ export default defineUI({
   setup(props, { emit }) {
     const auth = useAuth();
     const state = reactive({
-        play: false,
+      play: false,
     });
 
-
     return () => {
       const { record } = props;
 
@@ -100,13 +96,15 @@ export default defineUI({
 
       return (
         <div class={cx(itemStyles, "relative")}>
-         {
-            props.isVideo ? <VideoItem  record={props.record} /> : <ImageItem  record={props.record} />
-         }
+          {props.isVideo ? (
+            <VideoItem onClick={() => emit("click")} record={props.record} />
+          ) : (
+            <ImageItem onClick={() => emit("click")} record={props.record} />
+          )}
 
           {isSys && props.tagable && (
             <Tag
-              color={record.published? "green": "#E88B00" }
+              color={record.published ? "green" : "#E88B00"}
               // color="rgba(0, 0, 0, 0.4)"
               class="absolute top-0 left-0 z-1 !rounded-none"
             >

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

@@ -1,14 +1,13 @@
-import { defineComponent, onMounted, reactive, watch } from "vue";
+import { defineComponent, onMounted, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { object, string } from "vue-types";
+import { string } from "vue-types";
 
-import Thumbnail from "@/components/Thumbnail";
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
 import { Loadmore } from "@queenjs/ui";
-import Empty from "@queenjs/ui/empty";
-import SourceItem from "./SourceItem";
 import { queenApi } from "queenjs";
+import SourceItem from "./SourceItem";
 
 export const Sources = defineComponent({
   props: {
@@ -74,34 +73,33 @@ export const Sources = defineComponent({
             {dataSource.map((item: any) => (
               <Draggable>
                 <SourceItem
-                  class="draggable-item"
+                  class="draggable-item cursor-pointer"
                   record={item}
-                  isVideo = {sourceType == "Video"}
+                  isVideo={sourceType == "Video"}
                   tagable={props.sourceFrom == "user"}
-
                   onClick={() => clickToDesign(item.file.url)}
-                  onMenu={async (name)=>{
-                      console.log(name);
-                      if (name == "delete") {
-                        await resource.actions.deleteMaterial(item);
-                        control.fresh();
-                        queenApi.messageSuccess("删除成功!");
-                        return;
-                      }
+                  onMenu={async (name) => {
+                    console.log(name);
+                    if (name == "delete") {
+                      await resource.actions.deleteMaterial(item);
+                      control.fresh();
+                      queenApi.messageSuccess("删除成功!");
+                      return;
+                    }
 
-                      if (name == "publish" || name== "unpublish") {
-                        const pub = name=="publish"
-                        await resource.actions.publishMaterial(item, pub);
-                        item.published = pub; 
-                        queenApi.messageSuccess("操作成功!");
-                      }
+                    if (name == "publish" || name == "unpublish") {
+                      const pub = name == "publish";
+                      await resource.actions.publishMaterial(item, pub);
+                      item.published = pub;
+                      queenApi.messageSuccess("操作成功!");
+                    }
                   }}
                 />
               </Draggable>
             ))}
           </Container>
           {dataSource.length == 0 ? (
-            <Empty />
+            <Empty class="pt-150px" />
           ) : (
             <Loadmore
               class="mt-20px"
@@ -114,4 +112,4 @@ export const Sources = defineComponent({
       );
     };
   },
-});
+});

src/modules/editor/components/Viewport/Slider/SliderLeft/Templates.tsx

@@ -1,5 +1,6 @@
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
-import { Empty, Image, Loadmore } from "@queenjs/ui";
+import { Image, Loadmore } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 
@@ -47,7 +48,7 @@ export default defineUI({
             })}
           </Container>
           {dataSource.length == 0 ? (
-            <Empty />
+            <Empty class="pt-150px" />
           ) : (
             <Loadmore
               class="mt-20px"

src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

@@ -1,5 +1,5 @@
 import { cx } from "@linaria/core";
-import { Button, Tooltip } from "ant-design-vue";
+import { Tooltip } from "ant-design-vue";
 import { computed, reactive } from "vue";
 
 import {
@@ -20,12 +20,12 @@ import { CompTree } from "../SliderRight/CompTree";
 import AiText from "./AiText";
 import Application from "./Application";
 import Comp3d from "./Comp3d";
+import CompsUser from "./CompsUser";
 import CustomComps from "./CustomComps";
 import Shapes from "./Shapes";
 import { Sources } from "./Sources";
 import Templates from "./Templates";
 import Text from "./Text";
-import CompsUser from "./CompsUser";
 
 const tabs = [
   {
@@ -39,11 +39,6 @@ const tabs = [
     component: CustomComps,
     props: { compType: "senior" },
   },
-  {
-    title: "组件",
-    icon: IconApplication,
-    component: Application,
-  },
   {
     title: "文字",
     icon: IconText,
@@ -89,8 +84,23 @@ const tabs = [
         title: "组合",
         component: CompsUser,
       },
+      {
+        title: "文字",
+        component: CompsUser,
+        props: { sourceType: "text" },
+      },
+      {
+        title: "形状",
+        component: CompsUser,
+        props: { sourceType: "shape" },
+      },
     ],
   },
+  {
+    title: "组件",
+    icon: IconApplication,
+    component: Application,
+  },
   {
     title: "AI",
     icon: IconAi,
@@ -125,11 +135,11 @@ export default defineUI({
 
       return (
         <div class="h-full flex">
-          <div class="flex flex-col items-center w-70px py-10px border-right !border-2px overflow-hidden">
+          <div class="flex flex-col items-center w-70px py-10px border-right !border-2px overflow-x-hidden overflow-y-auto scrollbar">
             {tabs.map((record, index) => {
               return (
                 <>
-                  {index === tabs.length - 2 && <div class="flex-1"></div>}
+                  {index === tabs.length - 3 && <div class="flex-1"></div>}
                   <div
                     key={index}
                     class={cx(
@@ -148,19 +158,18 @@ export default defineUI({
           </div>
           <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
             {currentTab.content && (
-              <div class="mt-5px ml-10px space-x-10px">
+              <div class="mt-15px mx-5px flex items-center justify-around space-x-1">
                 {currentTab.content?.map((item: any, index: number) => (
-                  <Button
-                    key={index}
-                    type="text"
+                  <span
                     class={cx(
-                      "transition",
-                      currCompIndex == index && "font-bold"
+                      "px-14px py-9px transition cursor-pointer bg-[#303030] text-light-50 text-opacity-70 rounded-4px text-12px hover:(text-[#EA9E40])",
+                      currCompIndex == index &&
+                        "bg-[#EA9E40] bg-opacity-20 text-orange"
                     )}
                     onClick={() => (state.compIndexs[tabIndex] = index)}
                   >
                     {item?.title}
-                  </Button>
+                  </span>
                 ))}
               </div>
             )}

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

@@ -3,15 +3,18 @@ import { useLauncher } from "@/modules/launcher";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
-
+import { Toolbar } from "@/modules/editor/components/CompUI/basicUI/Text";
 export default defineUI({
   setup() {
-    const { actions } = useEditor();
+    const { store, actions } = useEditor();
     const launcher = useLauncher();
 
     return () => (
       <div>
-        <div class="absolute right-25px top-30px space-x-10px z-1001">
+        <div class={"p-10px h-50px"}>
+          <Toolbar component={store.currComp} />
+        </div>
+        <div class="absolute right-25px top-80px space-x-10px z-1001">
           <TipIcons.Screenshot
             class={bottomBtnStyles}
             onClick={() => actions.updateThumbnailByScreenshot(true)}

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

@@ -85,9 +85,11 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
     let compId = "";
     const compItem = this.state.components.get(compKey);
     if (!compItem) throw Exception.error("无效的组件");
+
+
     compId = createCompId(compKey);
     addCacheToMap(this.store.designData.compMap);
-
+    
     return compId;
   }
 }

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

@@ -32,7 +32,7 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
 
   async dragComp(e: MouseEvent) {
     const scope = this;
-    await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
+    await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any, scope.dragingCompData);
     if (
       scope.dragingCompData?._id &&
       (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")

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

@@ -24,6 +24,18 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
         this.actions.pickParentComp(this.store.currCompId);
       },
     },
+    {
+      hotKey: "ctrl+c",
+      action() {
+        this.actions.ctrlc();
+      },
+    },
+    {
+      hotKey: "ctrl+v",
+      action() {
+        this.actions.ctrlv();
+      },
+    },
     // 删除当前组件
     {
       hotKey: "Backspace,del",

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

@@ -1,25 +1,36 @@
 import domtoimage from "dom-to-image";
+import { Matrix } from "../SelectCtrl/matrix";
 
 export class ScreenshotCtrl {
   async snap(options: { element: HTMLElement; ratio?: number }): Promise<Blob> {
     const dom = options.element;
 
-    const transferEl = document.querySelector(".transfer") as
-      | HTMLElement
-      | undefined;
-    if (transferEl) {
-      transferEl.style.display = "none";
+    // const transferEl = document.querySelector(".transfer") as
+    //   | HTMLElement
+    //   | undefined;
+    // if (transferEl) {
+    //   transferEl.style.display = "none";
+    // }
+    
+    //清除dom上的
+    const transform =  dom.style.transform
+    if (transform) {
+       const m =  Matrix.createFromMatrixStr(transform);
+        m.tx = 0;
+        m.ty = 0;
+        dom.style.transform = m.getMatrixStr();
     }
 
+    
     if (options.ratio) {
       const result = await domtoimage.toJpeg(dom);
       const img = await new Promise<HTMLImageElement>((resolve) => {
         const image = new Image();
         image.src = result;
         image.onload = function () {
-          if (transferEl) {
-            transferEl.style.display = "block";
-          }
+          // if (transferEl) {
+          //   transferEl.style.display = "block";
+          // }
           resolve(image);
         };
       });
@@ -43,16 +54,21 @@ export class ScreenshotCtrl {
       );
       return new Promise((resolve) => {
         canvas.toBlob((blob) => {
-          if (transferEl) {
-            transferEl.style.display = "block";
-          }
+          // if (transferEl) {
+          //   transferEl.style.display = "block";
+          // }
           if (blob) {
             resolve(blob);
           }
         });
       });
     } else {
-      return domtoimage.toBlob(dom);
+      console.log( "xxxxxxxxxxxxxxxxxx" ,  dom );
+      const w = await domtoimage.toBlob(dom);
+      if (transform) {
+        dom.style.transform = transform;
+      }
+      return w;
     }
   }
 }

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

@@ -6,6 +6,14 @@ import { CompObject } from "../../controllers/SelectCtrl/compObj";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
 import { ICompKeys, Layout } from "../../typings";
 import CompSave from "../../components/CompSave";
+import { ObjsContainer } from "../../controllers/SelectCtrl/ObjsContainer";
+import { getKeyThenIncreaseKey } from "ant-design-vue/lib/message";
+import { Matrix } from "../../controllers/SelectCtrl/matrix";
+import { nanoid } from "nanoid";
+import { string } from "vue-types";
+
+
+let ctrlcselected:string[] = [];
 
 export const editActions = EditorModule.action({
   pickComp(compId: string, selected = true) {
@@ -53,6 +61,7 @@ export const editActions = EditorModule.action({
       compKey != "Triangle" &&
       compKey != "Ellipse" &&
       compKey != "Polygon" &&
+      compKey != "PolygonNormal" &&
       compKey != "Curve";
 
     let yOffset = 0;
@@ -110,34 +119,21 @@ export const editActions = EditorModule.action({
   },
 
  // 通过点击添加组件到画布
- async clickCompUserToDesign(id: string) {
+ async clickCompUserToDesign(id: string, isSys) {
   if (!this.store.currStreamCardId) {
       queenApi.messageError("请先选中一个卡片");
       return;
   }
-
-  const { result } = await this.https.getCompDetail(id);
-
-
-  let yOffset = 0;
-  if (
-    this.store.currCompId != this.store.currStreamCardId &&
-    this.store.currCompId != "root"
-  ) {
-    const bound = this.helper.getCardCompBound(this.store.currCompId);
-    yOffset = bound.y + bound.h;
-  }
-
-  let currCard = this.store.currStreamCard;
+  const { result } = await this.https.getCompDetail(id, isSys);
 
   //先创建卡片
-  const currCardIndex =  this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
-  const cardId = await this.store.insertDesignContent(
-    "Container",
-    currCardIndex
-  );
-    currCard = this.helper.findComp(cardId) as DesignComp;
-  
+  // const currCardIndex =  this.store.streamCardIds.indexOf(this.store.currStreamCardId) + 1;
+  // const cardId = await this.store.insertDesignContent(
+  //   "Container",
+  //   currCardIndex
+  // );
+  //  const currCard = this.helper.findComp(cardId) as DesignComp;
+    const currCard = this.store.currStreamCard;  
     const comp =  this.store.addUserCard(result);
 
     const compId = comp.id;
@@ -145,54 +141,100 @@ export const editActions = EditorModule.action({
     childIds.push(compId);
     currCard.children.default = childIds;
 
+    this.store.setCompPid(compId,  currCard.id);
+
     const addedComp = this.store.compMap[compId];
     addedComp.layout.position = "absolute";
 
-    const currComp = this.helper.findComp(compId) as DesignComp;
+    this.actions.initAddedCompPos(this.store.currCompId, compId, currCard.id);
+
+    this.actions.pickComp(compId);
+  },
+
+
+  initAddedCompPos(currId: string, addedId:string, cardId:string) {
+    
+    let yOffset = 0;
+    if (
+      currId != this.store.currStreamCardId &&
+      currId != "root"
+    ) {
+      const paths = this.helper.getCompTrees(currId)
+      const bound = this.helper.getCardCompBound(paths[2].id);
+      yOffset = bound.y + bound.h;
+    }
+
+    const currComp = this.helper.findComp(addedId) as DesignComp;
  
     //添加组件到当前选中的组件下面
     let xOffset = this.helper.designSizeToPx(
       375 - (currComp.layout.size?.[0] || 750) / 2
     );
     const obj = new CompObject(currComp);
+
+    const currCard = this.helper.findComp(cardId) as DesignComp;
+
     //没有选中组件添加到当前卡片最后
     const children = currCard.children.default || [];
     if (yOffset == 0 && children.length >= 2) {
-      const prevCompIndex = children.indexOf(compId) - 1;
+      const prevCompIndex = children.indexOf(addedId) - 1;
       const bound = this.helper.getCardCompBound(children[prevCompIndex]);
       yOffset = bound.y + bound.h;
     }
     obj.worldTransform.translate(xOffset, yOffset);
     currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
-
-    this.actions.pickComp(compId);
     this.helper.extendStreamCard(currCard.id);
     this.controls.cropCtrl.close();
-},
+  },
 
 
   // 通过拖拽添加组件到画布
-  async dragCompToDesign(event: MouseEvent, compKey: ICompKeys) {
-    await this.actions.addCompToDesign(compKey);
+  async dragCompToDesign(event: MouseEvent, compKey: string, data:any) {
 
-    const cardPoints = this.helper.getPointOffsetWith(
-      event,
-      this.store.currStreamCard.$el
-    );
-    const { currComp } = this.store;
-    let selCtrl = this.controls.selectCtrl;
-    selCtrl.translate(
-      this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
-      cardPoints.y
-    );
+    const currCardDom = this.store.currStreamCard.$el;
 
-    this.helper.extendStreamCard(this.store.currStreamCardId);
+    if (compKey == "CompCard") {
+        const { result } = await this.https.getCompDetail(data.id, data.isSys);
+        const comp =  this.store.addUserCard(result);
 
-    if (compKey == "Text") {
-      this.actions.selectObjs([]);
-      this.actions.textFocus(currComp.id, true);
+        const currCard = this.store.currStreamCard;
+        const compId = comp.id;
+        const childIds = [...(currCard.children.default || [])];
+        childIds.push(compId);
+        currCard.children.default = childIds;
+    
+        const addedComp = this.store.compMap[compId];
+        addedComp.layout.position = "absolute";
+        this.store.setCompPid(compId,  currCard.id);
+
+        this.actions.pickComp(compId);
+
+    } else {
+        await this.actions.addCompToDesign(compKey as any);
     }
-    this.controls.cropCtrl.close();
+
+
+    setTimeout(() => {
+      const cardPoints = this.helper.getPointOffsetWith(
+        event,
+        currCardDom
+      );
+      const { currComp } = this.store;
+      let selCtrl = this.controls.selectCtrl;
+      selCtrl.translate(
+        this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
+        cardPoints.y
+      );
+  
+      this.helper.extendStreamCard(this.store.currStreamCardId);
+  
+      if (compKey == "Text") {
+        this.actions.selectObjs([]);
+        this.actions.textFocus(currComp.id, true);
+      }
+      this.controls.cropCtrl.close();
+      
+    }, 100);
   },
 
   async selectObjs(ids: string[]) {
@@ -268,6 +310,62 @@ export const editActions = EditorModule.action({
     parentComp && this.store.setCurrComp(parentComp.id);
   },
 
+  ctrlc() {
+    //  console.log("contrc ", this.store.selected);
+     ctrlcselected = this.store.selected.slice(0);
+  },
+
+  ctrlv() {
+    console.log("ctrlv ", this.store.selected);
+    if (ctrlcselected.length < 1) return;
+    
+    const news :string[] = [];
+
+     const deepCopy = (c:DesignComp) => {
+        const childs = c.children.default || [];
+        if (childs.length > 0 ) {
+          childs.forEach((id, index)=>{
+            const cp = this.helper.findComp(id) as DesignComp;
+            const cp1 = cloneDeep(cp);
+            cp1.id = nanoid();
+            this.store.compMap[cp1.id] = cp1;
+            this.store.setCompPid(cp1.id, c.id);
+            childs[index] = cp1.id;
+            
+            deepCopy(cp);
+          })
+        } 
+     }
+
+
+    ctrlcselected.forEach(c=>{
+       const cp = this.helper.findComp(c) as DesignComp;
+       const cp1 = cloneDeep(cp);
+       cp1.id = nanoid();
+       news.push(cp1.id);
+
+       this.store.compMap[cp1.id] = cp1;
+       this.store.setCompPid(cp1.id, this.store.currStreamCardId);
+
+       deepCopy(cp);
+    })
+
+    this.actions.addComps(news);
+
+    this.actions.selectObjs(news);
+
+    setTimeout(() => {
+        this.controls.selectCtrl.translate(20, 20);
+    }, 100);
+
+  },
+
+  addComps(ids:string[]) {
+    const childs = this.store.currStreamCard.children.default?.slice(0) || [];
+    childs.push(...ids);
+    this.store.currStreamCard.children.default = childs;
+  },
+
   // 删除组件
   removeSelectComps() {
     const selected = this.store.selected.slice(0);
@@ -280,12 +378,16 @@ export const editActions = EditorModule.action({
 
   // 删除组件
   removeComp(compId: string) {
+
+    const paths = this.helper.getCompTrees(compId);
+    if (!paths[2]) return;
+    compId = paths[2].id;
+
     if (this.helper.isCompCanDelete(compId)) {
       if (this.helper.isStreamCard(compId)) {
         this.actions.removeStreamCard(compId);
         return;
       }
-
       const cardid = this.store.currStreamCardId;
       if (compId === this.store.currCompId) {
         this.store.setCurrComp(this.store.currStreamCardId);
@@ -369,6 +471,13 @@ export const editActions = EditorModule.action({
       this.helper.clearUnusedComps(data.compMap, comp.id);
       data.compMap.root = data.compMap[comp.id];
       data.compMap.root.id = "root";
+
+      //清除平移距离
+      const mtx = Matrix.createFromMatrixStr(data.compMap.root.layout.transformMatrix as string);
+      mtx.tx = 0;
+      mtx.ty = 0;
+      data.compMap.root.layout.transformMatrix = mtx.getMatrixStr();
+
       delete data.compMap[comp.id];
 
       queenApi.showLoading("保存中");
@@ -514,8 +623,60 @@ export const editActions = EditorModule.action({
   },
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
-    this.controls.transferCtrl.groupCtrl.cancelGroup(groupComp);
-    this.store.setCurrComp(groupComp.children.default?.[0] as string);
+    console.log("cancel group");
+
+    const childs = groupComp.children.default || [];
+    const objC = this.controls.selectCtrl.objContainer as ObjsContainer;
+    const parentMtrx = objC.parent.worldTransform.clone();
+    childs.forEach(o=>{
+      const obj = this.helper.findComp(o) as DesignComp;
+      const mxt = Matrix.createFromMatrixStr(obj.layout.transformMatrix as string);
+      mxt.prepend(parentMtrx);
+      obj.layout.transformMatrix = mxt.getMatrixStr();
+    })
+    const paths = this.helper.getCompTrees(groupComp.id)
+    const card = paths[1];
+    const parentChilds = (card.children.default || []).filter(item=>item != groupComp.id);
+    parentChilds.push(...childs);
+    card.children.default = childs;
+
+    this.actions.selectObjs([childs[0]]);
+  },
+
+  createGroupComps() {
+    const selectCtrl = this.controls.selectCtrl;
+    const Objc = this.controls.selectCtrl.objContainer as ObjsContainer;
+    const id = this.controls.compUICtrl.createCompId("Group");
+    const comp = this.helper.findComp(id) as DesignComp;
+    comp.layout.position = "absolute";
+
+    //先删除现有的节点
+    const sels = this.store.selected.slice(0);
+    const chils = this.store.currStreamCard.children.default || [];
+    const newChilds  :any = [];
+    chils.forEach(c=>{
+      if (sels.indexOf(c) == -1) newChilds.push(c);
+    })
+
+    newChilds.push(id);
+    this.store.currStreamCard.children.default = newChilds;
+    
+    //更新节点的新位置
+    Objc.parent.children.forEach(obj=>{
+      const cobj = obj as CompObject;
+      const comp = cobj.comp;
+      comp.layout.transformMatrix = cobj.localTransform.getMatrixStr();
+    })
+     
+    //再添加新的节点
+    comp.layout.size = [this.helper.pxToDesignSize(Objc.width), this.helper.pxToDesignSize(Objc.height)];
+    comp.layout.transformMatrix = selectCtrl.transferStyle.matrix;
+    comp.children.default = sels;
+
+    this.actions.selectObjs([])
+    setTimeout(() => {
+      this.actions.pickComp(comp.id);
+    }, 0);
   },
 
   handleSelectMoving(key: string) {

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

@@ -108,18 +108,10 @@ export const helpers = EditorModule.helper({
     return i >= 0;
   },
   isCompCanDelete(compId: string): boolean {
-    const comp = this.helper.findComp(compId);
-    if (!comp || !this.helper.isCustomChildComp(comp)) return false;
-    if (comp.compKey == "Container" && this.store.streamCardIds.length == 1)
-      return false;
-    return true;
-    // if (this.store.isEditComp) return true;
-    // return this.store.pageCompIds.includes(compId);
+    return this.helper.isStreamCardChild(compId);
   },
   isShowSaveComp(comp: DesignComp): boolean {
-    // if (!comp.children?.default || comp.children?.default?.length == 0)
-    //   return false;
-    if (!this.helper.isCustomChildComp(comp)) return false;
+    if ( !this.helper.isStreamCardChild(comp.id) ) return false;
     return true;
   },
 

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

@@ -11,9 +11,12 @@ export const https = EditorModule.http({
       },
     });
   },
-  getCompDetail(id: string) {
+  getCompDetail(id: string, isSys = false) {
+    const params:any = {};
+    if (isSys) params.isSys = true;
     return this.request("/frame/detail/" + id, {
       method: "GET",
+      params
     });
   },
   saveDesign(data: Partial<DesignTemp>) {

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

@@ -15,8 +15,11 @@ export const CompToolbars: ICompToolbars = {
   
   Group: [
     toolbars.cancelGroup,
+    multiSelToolbar.delete,
   ],
   MultiSelector: [
     multiSelToolbar.delete,
+    toolbars.createGroup,
+    toolbars.cancelGroup,
   ],
 };

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

@@ -193,10 +193,26 @@ export const toolbars = createToolbars({
   // 取消打组
   cancelGroup: {
     component: TipIcons.CancelGroup,
+    getVisible(comp) {
+      return comp && comp.compKey == "Group" && this.store.selected.length == 1 && this.helper.isStreamCardChild(comp.id);
+    },
+
     onClick(comp) {
       this.actions.cancelGroupComps(comp);
     },
   },
+   // 打组
+   createGroup: {
+    component: TipIcons.CreateGroup,
+    getVisible() {
+      return this.store.selected.length > 1;
+    },
+    onClick() {
+      console.log("打组");
+      this.actions.createGroupComps();
+    },
+  },
+
   //图片裁剪
   imageCropper: {
     component: TipIcons.Cropper,

src/modules/resource/index.ts

@@ -88,17 +88,15 @@ export class ResourceModule extends ModuleRoot {
     this.controls.sysSvgListCtrl.setCrudPrefix("/sys/source");
     this.controls.sysSvgListCtrl.state.size = 20;
     this.controls.sysSvgListCtrl.state.query = { fileType: "image" , isSvg: true};
-
+    this.controls.sysSvgListCtrl.state.query = { published: true};
 
     this.controls.CustCompListCtrl.setCrudPrefix("/frame");
     this.controls.CustCompListCtrl.state.size = 20;
-    this.controls.CustCompListCtrl.state.query = { type: "comp"};
+    // this.controls.CustCompListCtrl.state.query = { type: "comp"};
 
     this.controls.sysCompListCtrl.setCrudPrefix("sys/frame");
     this.controls.sysCompListCtrl.state.size = 20;
    
-    this.controls.sysSvgListCtrl.state.query = { published: true};
-
     this.natsBus.init();
   }
 }

src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from "@linaria/core";
 import { IconMore } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
-import { Divider, Dropdown, Menu , Tag} from "ant-design-vue";
+import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
 import { EyeOutlined } from "@ant-design/icons-vue";
 import dayjs from "dayjs";
 import { defineUI } from "queenjs";
@@ -41,35 +41,31 @@ export default defineUI({
   },
   emits: ["edit", "preview", "menu"],
   setup(props, { emit }) {
-
     const auth = useAuth();
 
     return () => {
       const { record } = props;
-  
+
       //@ts-ignore
-      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1
+      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
 
-      
-        return (
+      return (
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1} class="overflow-hidden relative">
             <Image
               class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
               src={record?.thumbnail}
             />
-             
-            {
-               isSys && <Tag
-                  color="#E88B00"
-                  // color="rgba(0, 0, 0, 0.4)"
-                  class="absolute top-0 left-0 z-1 !rounded-none"
-                >
-                    {
-                      record.published ? "已发布" : "未发布"
-                    }
-                </Tag>
-            }
+
+            {isSys && (
+              <Tag
+                color="#E88B00"
+                // color="rgba(0, 0, 0, 0.4)"
+                class="absolute top-0 left-0 z-1 !rounded-none"
+              >
+                {record.published ? "已发布" : "未发布"}
+              </Tag>
+            )}
 
             <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
               <div
@@ -101,14 +97,14 @@ export default defineUI({
             <Dropdown
               placement="bottom"
               overlay={
-                <Menu class="w-90px">
+                <Menu class={cx("w-90px", menuStyles)}>
                   {/* <Menu.Item>复制</Menu.Item> */}
                   <Menu.Item
                     onClick={() => {
                       emit("menu", "send");
                     }}
                   >
-                    发送作品到
+                    发送到
                   </Menu.Item>
                   <Menu.Item>
                     <div onClick={() => emit("menu", "stat")}>统计分析</div>
@@ -120,17 +116,21 @@ export default defineUI({
                     <div onClick={() => emit("menu", "delete")}>删除</div>
                   </Menu.Item>
 
-                  {
-                     isSys && !record.published && <Menu.Item>
-                     <div onClick={() => emit("menu", "publish")}>发布平台</div>
-                   </Menu.Item>
-                  }
-                  
-                  {
-                     isSys && record.published && <Menu.Item>
-                      <div onClick={() => emit("menu", "unpublish")}>取消平台发布</div>
+                  {isSys && !record.published && (
+                    <Menu.Item>
+                      <div onClick={() => emit("menu", "publish")}>
+                        发布平台
+                      </div>
                     </Menu.Item>
-                  }
+                  )}
+
+                  {isSys && record.published && (
+                    <Menu.Item>
+                      <div onClick={() => emit("menu", "unpublish")}>
+                        取消平台发布
+                      </div>
+                    </Menu.Item>
+                  )}
                 </Menu>
               }
             >
@@ -154,3 +154,10 @@ const itemStyles = css`
     }
   }
 `;
+
+const menuStyles = css`
+  .ant-dropdown-menu-item,
+  .ant-dropdown-menu-submenu-title {
+    font-size: 12px;
+  }
+`;

yarn.lock

@@ -1160,6 +1160,14 @@
     ckeditor5 "^38.0.1"
     lodash-es "^4.17.15"
 
+"@ckeditor/ckeditor5-editor-decoupled@38.0.1":
+  version "38.0.1"
+  resolved "http://124.70.149.18:4873/@ckeditor%2fckeditor5-editor-decoupled/-/ckeditor5-editor-decoupled-38.0.1.tgz#cc26b3abd0479f793f95c6e1fba02736b37c3174"
+  integrity sha512-UYESbLaetAnidPcELQWFdYzO8RmRkXAjXMfGwBt7CB7eInJwSUbJog1L6btMJH9mYLPwbO5nTHbU8W3ybZSRQw==
+  dependencies:
+    ckeditor5 "^38.0.1"
+    lodash-es "^4.17.15"
+
 "@ckeditor/ckeditor5-editor-inline@^38.0.0":
   version "38.0.1"
   resolved "http://124.70.149.18:4873/@ckeditor%2fckeditor5-editor-inline/-/ckeditor5-editor-inline-38.0.1.tgz"
@@ -1775,10 +1783,10 @@
   resolved "http://124.70.149.18:4873/@queenjs-modules%2fqueentree/-/queentree-0.0.10.tgz"
   integrity sha512-P4cIjXKgcvd8h3vVs4f1rGLNf3/Kd5G+qGiZN+idkLjiu22HU6SNmOVLUwV6PuKg+9sTPRn7FKamSHuFxXWX5g==
 
-"@queenjs/components@^0.0.21":
-  version "0.0.21"
-  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.21.tgz"
-  integrity sha512-6gDhEQuDc2g5h7T5xyuev35qqje0VcejsRhm8kLrOrKmgmZIejurw5eWBVsgzRH3tqbn3oLOtIjCsYRrDjuTzA==
+"@queenjs/components@^0.0.22":
+  version "0.0.22"
+  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.22.tgz#c1fbf2c8e38a3e02f2e9625a3f64b44e84e8461a"
+  integrity sha512-DwbnVsrc5NZXv3gL1H/GFxqQaI455H0G6HAVruR4B2I3IXvYUBbli/eArAyDnK5WOp6cVX11dnWt8BWa5sJZ9Q==
   dependencies:
     "@queenjs/utils" "^0.0.1"