update

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

@@ -6,11 +6,11 @@ import { any } from "vue-types";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 
 const styleColumns: ColumnItem[] = [
-  {
-    label: "内边距",
-    dataIndex: "layout.padding",
-    component: "Input",
-  },
+  // {
+  //   label: "内边距",
+  //   dataIndex: "layout.padding",
+  //   component: "Input",
+  // },
   {
     label: "背景颜色",
     dataIndex: "layout.background.color",

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

@@ -31,16 +31,16 @@ const layoutColumns: ColumnItem[] = [
   //     ],
   //   },
   // },
-  {
-    label: "外边距",
-    dataIndex: "layout.margin",
-    component: "Input",
-  },
-  {
-    label: "内边距",
-    dataIndex: "layout.padding",
-    component: "Input",
-  },
+  // {
+  //   label: "外边距",
+  //   dataIndex: "layout.margin",
+  //   component: "Input",
+  // },
+  // {
+  //   label: "内边距",
+  //   dataIndex: "layout.padding",
+  //   component: "Input",
+  // },
   // {
   //   label: "左右偏移",
   //   dataIndex: "layout.offsetX",

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

@@ -16,8 +16,9 @@ import {
   IconEyeOn,
   IconLock,
   IconRedo,
+  IconSave,
   IconUndo,
-  IconUnlock
+  IconUnlock,
 } from "@queenjs/icons";
 import { createTipIcon } from "./create";
 
@@ -74,4 +75,8 @@ export const TipIcons = {
     icons: [IconLayerUp],
     tips: ["切换到父组件"],
   }),
+  SaveAsComp: createTipIcon({
+    icons: [IconSave],
+    tips: ["保存为组件"],
+  }),
 };

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

@@ -20,7 +20,7 @@ export default defineUI({
             <Form component={currComp} />
           </div>
           <div class="p-16px border-bottom !border-2px border-top">组件树</div>
-          <div class="h-300px py-20px pr-20px scrollbar">
+          <div class="h-500px py-20px pr-20px scrollbar">
             <CompTree class={compTreeCls} />
           </div>
         </div>

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

@@ -10,17 +10,19 @@ export const editActions = EditorModule.action({
     let compId: string;
     if (
       index === undefined &&
-      this.store.currComp?.compKey === "Container" &&
-      this.store.pageCompIds.includes(this.store.currComp.id)
+      this.store.currComp?.compKey === "Container"
+      // this.store.pageCompIds.includes(this.store.currComp.id)
     ) {
       compId = await this.store.insertCompContainer(
         compKey,
         this.store.currComp
       );
+      this.actions.pickComp(compId);
+      this.actions.setCompPosition(this.store.currComp);
     } else {
       compId = await this.store.insertDesignContent(compKey, index);
+      this.actions.pickComp(compId);
     }
-    this.actions.pickComp(compId);
   },
   // 切换当前组件
   pickComp(compId: string) {
@@ -47,6 +49,11 @@ export const editActions = EditorModule.action({
       this.store.deleteComp(compId);
     }
   },
+  // 保存容器为组件
+  saveAsComp(comp: DesignComp) {
+    // todo: 保存为组件
+    console.log("comp: ", comp);
+  },
   // 移动组件顺序
   moveComp(selIndex: number, targetIndex: number) {
     if (selIndex === targetIndex) return;

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

@@ -48,8 +48,15 @@ export const helpers = EditorModule.helper({
   isCompCanDelete(compId: string): boolean {
     const comp = this.helper.findComp(compId);
     if (!comp || !this.helper.isCustomChildComp(comp)) return false;
-    if (this.store.isEditComp) return true;
-    return this.store.pageCompIds.includes(compId);
+    return true;
+    // if (this.store.isEditComp) return true;
+    // return this.store.pageCompIds.includes(compId);
+  },
+  isShowSaveComp(comp: DesignComp): boolean {
+    // if (!comp.children?.default || comp.children?.default?.length == 0)
+    //   return false;
+    if (!this.helper.isCustomChildComp(comp)) return false;
+    return true;
   },
   async screenshot(options?: { ratio: number }): Promise<Blob> {
     const dom = document.querySelector(".page-editing-content")

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

@@ -2,9 +2,10 @@ import { ICompToolbars, toolbars } from "./default";
 
 export const TreeToolbars: ICompToolbars = {
   default: [
-    toolbars.position.setVisible(function (comp) {
-      return comp.isPostioned();
-    }),
+    // toolbars.position.setVisible(function (comp) {
+    //   return comp.isPostioned();
+    // }),
+    toolbars.saveAsComp,
     toolbars.visible,
     toolbars.delete,
   ],

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

@@ -73,7 +73,7 @@ export const toolbars = createToolbars({
   // 对齐
   align: {
     component: TipIcons.Align,
-    getVisible: (comp) => !comp.isPostioned && !comp.isFullWidth,
+    getVisible: (comp) => !comp.isPostioned() && !comp.isFullWidth(),
     getValue: (comp) =>
       ["start", "center", "end"].indexOf(comp.layout.alignSelf || "start"),
     onClick(comp) {
@@ -135,4 +135,14 @@ export const toolbars = createToolbars({
       this.actions.pickParentComp(comp.id);
     },
   },
+  // 保存为组件
+  saveAsComp: {
+    component: TipIcons.SaveAsComp,
+    getVisible(comp) {
+      return this.helper.isShowSaveComp(comp);
+    },
+    onClick(comp) {
+      this.actions.saveAsComp(comp);
+    },
+  },
 });