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

src/modules/editor/actions/edit.ts

@@ -1,3 +1,4 @@
+import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { ICompKeys } from "../typings";
 
@@ -34,7 +35,16 @@ export const editActions = EditorModule.action({
     this.store.moveComp(selIndex, targetIndex);
   },
   // 保存项目
-  saveDesign() {
-    this.https.saveDesign(this.store.designData);
+  async saveDesign() {
+    try {
+      queenApi.showLoading("保存中");
+      this.store.clearUnusedComps();
+      await this.https.saveDesign(this.store.designData);
+      queenApi.messageSuccess("保存成功");
+    } catch (error: any) {
+      throw Exception.error(error.toString());
+    } finally {
+      queenApi.hideLoading();
+    }
   },
 });

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

@@ -0,0 +1,34 @@
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
+import { set } from "lodash";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+const styleColumns: ColumnItem[] = [
+  {
+    label: "内边距",
+    dataIndex: "layout.padding",
+    component: "Input",
+  },
+];
+
+export const PageForm = defineComponent({
+  props: {
+    component: any<DesignComp>().isRequired,
+  },
+  setup(props) {
+    function changeVal(e: { dataIndex: string; value: any }) {
+      set(props.component, e.dataIndex, e.value);
+    }
+
+    return () => {
+      const { layout } = props.component;
+      return (
+        <>
+          <div>页面样式</div>
+          <FormUI data={layout} columns={styleColumns} onChange={changeVal} />
+        </>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,51 @@
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { computed, defineComponent } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { CompUI } from "../..";
+import { useEditor } from "../../../..";
+
+export const Component = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props, { slots }) {
+    const editor = useEditor();
+    const { helper } = editor;
+    const { children, layout } = useCompData(props.compId);
+
+    const compsGroup = computed(() => {
+      const normalArr: DesignComp[] = [];
+      const posArr: DesignComp[] = [];
+      children.default.forEach((id) => {
+        const comp = helper.findComp(id);
+        if (!comp) return;
+        if (comp.compKey === "Container") {
+          posArr.push(comp);
+        } else {
+          normalArr.push(comp);
+        }
+      });
+      return {
+        normalArr,
+        posArr,
+      };
+    });
+
+    return () => (
+      <div style={helper.parseLayoutToStyle(layout)}>
+        <div class="relative z-10">
+          {compsGroup.value.posArr.map((d) => {
+            const Comp: any = CompUI[d.compKey]?.Component;
+            return Comp ? <Comp key={d.id} compId={d.id} /> : undefined;
+          })}
+        </div>
+        {slots.Container?.(
+          compsGroup.value.normalArr.map((comp) => {
+            return slots.CompItem?.(comp);
+          })
+        )}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,19 @@
+import { Dict_Imgs } from "@/dict";
+import { createCompHooks } from "../../defines/createCompHooks";
+import { PageForm } from "./PageForm";
+
+export { Component } from "./component";
+
+export const options = {
+  name: "页面",
+  thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData } = createCompHooks({
+  value: {},
+  children: {
+    default: () => [] as string[],
+  },
+});
+
+export const Form = PageForm;

src/modules/editor/components/CompUI/customUI/Cards/Card11/component.tsx

@@ -1,5 +1,6 @@
+import { watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+import { useCompData, useCreateChild } from ".";
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
@@ -8,26 +9,51 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { children, value } = useCompData(props.compId);
+    const createList = useCreateChild("list");
 
-    return () => (
-      <div class="flex">
-        <div class="flex-1">
-          <Text.Component compId={children.text} />
-        </div>
-        <div class="w-2.5rem relative">
-          <Image.Component
-            compId={children.img1}
-            class="w-1.67rem h-3.06rem object-cover"
-          />
-          <div class="absolute bottom-0 right-1rem">
+    watch(
+      () => [value.columns],
+      () => {
+        const { columns } = value;
+        const offset = columns - children.list.length;
+        if (offset > 0) {
+          children.list.push(...createList(offset));
+        } else {
+          children.list.splice(columns, offset * -1);
+        }
+      }
+    );
+
+    return () => {
+      return (
+        <div class="flex">
+          <div class="flex-1 mx-0.3rem leading-2 relative z-10 w-0">
+            <Text.Component compId={children.text} class="mt-0.2rem" />
+            <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">
+              {children.list.map((d: any, i: number) => (
+                <Image.Component
+                  key={i}
+                  compId={d}
+                  class="-ml-0.2rem mb-0.2rem w-0.72rem h-0.72rem object-cover rounded-1/2 overflow-hidden"
+                />
+              ))}
+            </div>
+          </div>
+          <div class="w-2.5rem relative pb-0.58rem mr-0.03rem">
             <Image.Component
-              compId={children.img2}
-              class="w-3.17rem h-2.4rem object-cover"
+              compId={children.img1}
+              class="w-2.5rem h-4.17rem object-cover"
             />
+            <div class="absolute bottom-0 right-1rem">
+              <Image.Component
+                compId={children.img2}
+                class="w-3.17rem h-2.4rem object-cover"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });

src/modules/editor/components/CompUI/customUI/Cards/Card11/index.ts

@@ -1,3 +1,4 @@
+import { InputNumber } from "ant-design-vue";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createCompHooks } from "../../../defines/createCompHooks";
 import { createCompId } from "../../../defines/createCompId";
@@ -9,15 +10,18 @@ export const options = {
   thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {},
+export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
-    padding: "0.5rem 0",
+    padding: "0.2rem 0",
+    margin: "0.3rem 0.35rem",
+  },
+  value: {
+    columns: 3,
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p><span style="color:#666;font-size:12px;"><strong>皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</strong></span></p><p><span style="color:#666;font-size:12px;"><strong>质量经久耐磨，性价比高， 经典之作用不过时。 潮流耐磨的2023年最新款皮革材料</strong></span></p>`,
+        value: `<p><span style="color:hsl(0, 0%, 30%);font-size:12px;">皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</span></p><p><span style="color:hsl(0, 0%, 30%);font-size:12px;">质量经久耐磨，性价比高， 经典之作用不过时。 </span></p>`,
         layout: {
           textAlign: "center",
         },
@@ -34,7 +38,24 @@ export const { createComp, useCompData } = createCompHooks({
           url: require("@/assets/comps/Card11/img_shoe.png"),
         },
       }),
+    list: (defaultOpts: any, length = 3) => {
+      let i = 0;
+      return Array.from({ length }, () => {
+        i = i + 1;
+        return createCompId("Image", {
+          value: {
+            url: require(`@/assets/comps/Card11/cover_${i}.png`),
+          },
+        });
+      });
+    },
   },
 });
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "列表行数",
+    dataIndex: "value.columns",
+    component: InputNumber,
+  },
+]);

src/modules/editor/components/CompUI/customUI/Cards/Card12/component.tsx

@@ -1,3 +1,4 @@
+import { css, cx } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -8,21 +9,59 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div>
-        <Text.Component compId={children.text} />
-        <div class="w-6.22rem mx-auto mt-0.4rem">
+      <div class={cx("relative text-black", rootStyles)}>
+        <div class="flex justify-end items-center relative mb-0.4rem">
+          <div class="text_top absolute right-0 top-0 h-1/1 w-0"></div>
+          <div class="relative z-10 bg-light-50 pr-0.2rem">
+            <Text.Component compId={children.text} />
+          </div>
+        </div>
+        <div class="relative">
           <Image.Component
             compId={children.img1}
-            class="w-6.22rem h-6.22rem object-cover"
+            class="w-6.22rem h-6.22rem object-cover mx-auto"
           />
-        </div>
-        <div>
-          <Text.Component compId={children.text2} />
+          <div
+            class="absolute right-5rem top-3rem min-w-1.5rem p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid card_color"
+            style={{
+              backgroundColor: value.themeColor,
+            }}
+          >
+            <Text.Component compId={children.text2} class="bg-light-50" />
+          </div>
         </div>
       </div>
     );
   },
 });
+
+const rootStyles = css`
+  .text_top {
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 50%;
+      width: 5rem;
+      height: 200%;
+      border-width: 1px 0 0 1px;
+      border-color: #000;
+      border-style: solid;
+    }
+  }
+  .card_color {
+    transform: translateX(50%);
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: -3.06rem;
+      width: 1px;
+      height: 3rem;
+      background-color: #fff;
+    }
+  }
+`;

src/modules/editor/components/CompUI/customUI/Cards/Card12/index.ts

@@ -1,6 +1,7 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createCompHooks } from "../../../defines/createCompHooks";
 import { createCompId } from "../../../defines/createCompId";
+import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
@@ -10,21 +11,24 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: {},
+  value: {
+    themeColor: "#5BA9CB",
+  },
   layout: {
     padding: "0.5rem 0",
+    margin: "0.5rem 0.35rem",
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:20px;"><strong>P190-2#</strong></span></p>`,
+        value: `<p><span style="font-size:20px;"><strong>P190-2#</strong></span></p>`,
         layout: {
           textAlign: "center",
         },
       }),
     text2: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;">P190-2#</p>`,
+        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);">2#</span><br><span style="color:hsl(0, 0%, 0%);">克莱因蓝</span></p>`,
         layout: {
           textAlign: "center",
         },
@@ -38,4 +42,10 @@ export const { createComp, useCompData } = createCompHooks({
   },
 });
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "主题色",
+    dataIndex: "value.themeColor",
+    ...createColorOpts(),
+  },
+]);

src/modules/editor/components/CompUI/customUI/Cards/Card13/component.tsx

@@ -11,16 +11,22 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div>
-        <Text.Component compId={children.text} />
-        <Image.Component
-          compId={children.img1}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
-        <Image.Component
-          compId={children.imgShoe}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
+      <div class="flex text-black">
+        <div class="ml-0.15rem mr-0.2rem">
+          <Image.Component
+            compId={children.img1}
+            class="w-2.74rem h-2.56rem object-cover"
+          />
+        </div>
+        <div class="flex-1 mt-1rem py-0.58rem px-0.2rem mb-1.3rem border-2px border-black border-solid leading-loose">
+          <Text.Component compId={children.text} />
+        </div>
+        <div class="absolute bottom-0 left-0">
+          <Image.Component
+            compId={children.imgShoe}
+            class="w-3.5rem h-2.8rem object-cover"
+          />
+        </div>
       </div>
     );
   },

src/modules/editor/components/CompUI/customUI/Cards/Card13/index.ts

@@ -12,12 +12,13 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
+    padding: "0.3rem 0",
+    margin: "0 0.35rem",
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p ><span >两面开边珠，无漆皮光亮&nbsp;</span></p><p ><span >却比漆皮更耐用，不容易爆皮&nbsp;</span></p><p ><span >逛着干看起来更加高档&nbsp;</span></p><p ><span >丰富多彩的流行色水，增加无限魅力</span></p><p ><span >既有复古的韵味更有时下的潮流元素</span></p>`,
+        value: `<p style="text-align:center;">两面开边珠，无漆皮光亮&nbsp;</p><p style="text-align:center;">却比漆皮更耐用，不容易爆皮&nbsp;</p><p style="text-align:center;">逛着干看起来更加高档&nbsp;</p><p style="text-align:center;">丰富多彩的流行色水，增加无限魅力</p><p style="text-align:center;">既有复古的韵味更有时下的潮流元素</p>`,
         layout: {
           textAlign: "center",
         },
@@ -31,7 +32,7 @@ export const { createComp, useCompData } = createCompHooks({
     imgShoe: () =>
       createCompId("Text", {
         value: {
-          url: require("@/assets/comps/Card13/img_shoe.jpg"),
+          url: require("@/assets/comps/Card13/img_shoe.png"),
         },
       }),
   },

src/modules/editor/components/CompUI/customUI/Cards/Card14/component.tsx

@@ -1,4 +1,3 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -12,19 +11,24 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class={rootStyles}>
-        <Text.Component compId={children.text} />
-        <Image.Component
-          compId={children.img1}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
-        <Image.Component
-          compId={children.imgShoe}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
+      <div class="">
+        <div class="flex justify-end relative pb-0.22rem z-10">
+          <div class="absolute left-0 bottom-0 z-10">
+            <Image.Component
+              compId={children.imgShoe}
+              class="w-3.5rem h-2.6rem object-cover"
+            />
+          </div>
+          <Image.Component
+            compId={children.img1}
+            class="w-4rem h-3.3rem object-cover"
+          />
+        </div>
+        <div class="relative mr-0.24rem -mt-0.6rem border-2px border-solid border-dark-400 pt-1rem pb-0.5rem leading-loose">
+          <div class="absolute -right-5px top-0 w-10px h-1rem bg-white"></div>
+          <Text.Component compId={children.text} />
+        </div>
       </div>
     );
   },
 });
-
-const rootStyles = css``;

src/modules/editor/components/CompUI/customUI/Cards/Card14/index.ts

@@ -12,12 +12,13 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
+    padding: "0.3rem 0",
+    margin: "0 0.35rem",
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">不需要过多的言语，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">让心灵感到平和</span></p>`,
+        value: `<p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">不需要过多的言语，让心灵感到平和</span></p>`,
         layout: {
           textAlign: "center",
         },
@@ -31,7 +32,7 @@ export const { createComp, useCompData } = createCompHooks({
     imgShoe: () =>
       createCompId("Image", {
         value: {
-          url: require("@/assets/comps/Card14/img_shoe.jpg"),
+          url: require("@/assets/comps/Card14/img_shoe.png"),
         },
       }),
   },

src/modules/editor/components/CompUI/customUI/Cards/Card15/component.tsx

@@ -15,7 +15,7 @@ export const Component = createUIComp({
       <div
         class={cx(rootStyles, " pl-0.28rem")}
         style={{
-          backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 85%, #fff 85%)`,
+          backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 87%, #fff 87%)`,
         }}
       >
         <div class="h-1.3rem">
@@ -27,12 +27,12 @@ export const Component = createUIComp({
         />
         <div class="absolute right-1rem top-3rem">
           <div
-            class="p-0.08rem pt-1rem border-light-50 border-6px border-solid"
+            class="p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
             style={{
               backgroundColor: value.themeColor,
             }}
           >
-            <div class="px-0.33rem py-0.06rem bg-light-50">
+            <div class="min-w-1.25rem px-0.1rem bg-light-50">
               <Text.Component compId={children.colorText} />
             </div>
           </div>
@@ -44,7 +44,7 @@ export const Component = createUIComp({
         </div>
         <Image.Component
           compId={children.img2}
-          class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover  -ml-0.28rem"
+          class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover"
         />
       </div>
     );

src/modules/editor/components/CompUI/customUI/Cards/Card15/index.ts

@@ -16,7 +16,7 @@ export const { createComp, useCompData } = createCompHooks({
   },
   layout: {
     // padding: "0.5rem 0",
-    margin: "0.2rem 0.35rem",
+    margin: "0.5rem 0.35rem",
   },
   children: {
     title: () =>

src/modules/editor/components/CompUI/customUI/Titles/Title2/component.tsx

@@ -13,14 +13,14 @@ export const Component = createUIComp({
 
     return () => (
       <div class="flex items-center justify-center px-0.1rem">
-        <div class={cx(border, "left w-0.5rem text-0.34rem text-right")}>
+        <div class={cx(border, "left w-0.5rem text-0.24rem text-right")}>
           &frasl; &frasl;
         </div>
         <Text.Component
           class="px-0.5rem max-w-4.8rem"
           compId={children.title}
         />
-        <div class={cx(border, "right w-0.5rem text-0.34rem")}>
+        <div class={cx(border, "right w-0.5rem text-0.24rem")}>
           &frasl; &frasl;
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
-import { set } from "lodash";
+import { isEmpty, set } from "lodash";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { GroupNumber } from "../formItems/GroupNumber";
@@ -162,8 +162,16 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
               columns={layoutColumns}
               onChange={changeVal}
             />
-            <div>组件背景</div>
-            <FormUI data={component} columns={bgColumns} onChange={changeVal} />
+            {!isEmpty(component?.background) ? (
+              <>
+                <div>组件背景</div>
+                <FormUI
+                  data={component}
+                  columns={bgColumns}
+                  onChange={changeVal}
+                />
+              </>
+            ) : null}
           </div>
         );
       };

src/modules/editor/components/CompUI/defines/createCompHooks.ts

@@ -34,6 +34,7 @@ export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
     return comp as {
       value: T;
       children: { [name in keyof C]: ReturnType<C[name]> };
+      layout: Layout;
     };
   }
 

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

@@ -1,7 +1,9 @@
 import * as basicUI from "./basicUI";
 import * as customUI from "./customUI";
+import * as Page from "./basicUI/Page";
 
 export const CompUI = {
+  Page,
   ...basicUI,
   ...customUI,
 };

src/modules/editor/components/Preview/index.tsx

@@ -7,7 +7,7 @@ export default defineUI({
     const { store } = useEditor();
     return () => (
       <div>
-        {store.designData.content.map((id) => {
+        {store.pageCompIds.map((id) => {
           const compKey = store.designData.compMap[id]?.compKey;
           const Comp: any = CompUI[compKey]?.Component;
           return Comp && <Comp key={id} compId={id} />;

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

@@ -1,17 +1,16 @@
 import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
-import { computed, onUnmounted } from "vue";
+import { onUnmounted } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import { CompUI } from "../../CompUI";
-import ErrorComp from "../../CompUI/placeHoder";
 
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { store, actions, helper } = editor;
+    const { actions, helper } = editor;
 
     const hotKeyCtrl = new HotKeyCtrl(editor);
     hotKeyCtrl.init();
@@ -19,61 +18,41 @@ export default defineUI({
       hotKeyCtrl.destroy();
     });
 
-    const compsGroup = computed(() => {
-      const normalArr: DesignComp[] = [];
-      const posArr: DesignComp[] = [];
-      store.designData.content.forEach((id) => {
-        const comp = helper.findComp(id);
-        if (!comp) return;
-        if (comp.compKey === "Container") {
-          posArr.push(comp);
-        } else {
-          normalArr.push(comp);
-        }
-      });
-      console.log(normalArr, posArr);
-      return {
-        normalArr,
-        posArr,
-      };
-    });
-
-    return () => (
-      <div class={contentStyle}>
-        <div class="relative z-10">
-          {compsGroup.value.posArr.map((d) => {
-            const Comp: any = CompUI[d.compKey]?.Component;
-            return Comp ? <Comp key={d.id} compId={d.id} /> : undefined;
-          })}
-        </div>
-        {store.isEditMode ? (
-          <Container
-            class="!min-h-750px"
-            group-name="canvas"
-            style={store.designData.pageStyle}
-            onDrop={(e: any) => {
-              if (e.payload) {
-                actions.addCompToDesign(e.payload, e.addedIndex);
-              } else {
-                actions.moveComp(e.removedIndex, e.addedIndex);
-              }
-            }}
-            non-drag-area-selector={".drag-disable"}
-          >
-            {compsGroup.value.normalArr.map((d) => {
-              const Comp: any = CompUI[d.compKey]?.Component || ErrorComp;
+    return () => {
+      const pageRoot = helper.findRootComp();
+      return pageRoot ? (
+        <CompUI.Page.Component class={contentStyle} compId={pageRoot.id}>
+          {{
+            Container(children: any) {
+              return (
+                <Container
+                  class="!min-h-750px"
+                  group-name="canvas"
+                  onDrop={(e: any) => {
+                    if (e.payload) {
+                      actions.addCompToDesign(e.payload, e.addedIndex);
+                    } else {
+                      actions.moveComp(e.removedIndex, e.addedIndex);
+                    }
+                  }}
+                  non-drag-area-selector={".drag-disable"}
+                >
+                  {children}
+                </Container>
+              );
+            },
+            CompItem(comp: DesignComp) {
+              const Comp = CompUI[comp.compKey].Component;
               return (
-                <Draggable key={d.id}>
-                  <Comp compId={d.id} />
+                <Draggable>
+                  <Comp compId={comp.id} />
                 </Draggable>
               );
-            })}
-          </Container>
-        ) : (
-          <editor.components.Preview />
-        )}
-      </div>
-    );
+            },
+          }}
+        </CompUI.Page.Component>
+      ) : null;
+    };
   },
 });
 

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

@@ -0,0 +1,39 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { useReactive } from "@queenjs/use";
+import { Tree } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { CompUI } from "../../../CompUI";
+
+export const CompTree = defineComponent({
+  setup() {
+    const { store, actions, helper } = useEditor();
+    const state = useReactive(() => ({
+      treeData() {
+        const { pageCompIds } = store;
+        const rootComp = helper.findRootComp();
+        return [
+          {
+            key: rootComp?.id || "",
+            title: "页面",
+            children: pageCompIds.map((id) => {
+              const comp = helper.findComp(id) as DesignComp;
+              return {
+                key: comp.id,
+                title: CompUI[comp.compKey].options.name,
+                value: comp.id,
+              };
+            }),
+          },
+        ];
+      },
+    }));
+    return () => (
+      <Tree
+        treeData={state.treeData}
+        selectedKeys={[store.currCompId]}
+        onSelect={(ids) => actions.pickComp(ids[0] as string)}
+      ></Tree>
+    );
+  },
+});

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

@@ -1,12 +1,13 @@
 import { useEditor } from "@/modules/editor";
 import { defineUI } from "queenjs";
 import { h } from "vue";
-import { CompUI } from "../../CompUI";
-import { createAttrsForm } from "../../CompUI/defines/createAttrsForm";
+import { CompUI } from "../../../CompUI";
+import { createAttrsForm } from "../../../CompUI/defines/createAttrsForm";
+import { CompTree } from "./CompTree";
 
 export default defineUI({
   setup() {
-    const editor = useEditor()
+    const editor = useEditor();
 
     return () => {
       const { currComp } = editor.store;
@@ -22,6 +23,10 @@ export default defineUI({
               { component: currComp }
             )}
           </div>
+          <div class="p-16px border-top border-bottom  !border-2px">组件树</div>
+          <div class="h-300px py-20px scrollbar">
+            <CompTree />
+          </div>
         </div>
       );
     };

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

@@ -3,13 +3,12 @@ import { Background, ICompKeys, Layout } from "../../typings";
 import { cloneDeep } from "lodash";
 
 export class DesignComp {
-  declare pid: string;
   id = nanoid();
   compKey: ICompKeys = "Text";
   value: any = undefined;
   layout: Layout = {};
   background: Background = {};
-  children: Record<string, any> = {};
+  children: Record<string, any> & { default?: string[] } = {};
 
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;

src/modules/editor/defines/DesignTemp/index.ts

@@ -7,7 +7,7 @@ export class DesignTemp {
   _id!: string;
   title = "";
   pageStyle?: any;
-  content: string[] = [];
+  // content: string[] = [];
   compMap: { [compId: string]: DesignComp } = {};
 
   constructor(data?: Partial<DesignTemp>) {

src/modules/editor/defines/DesignTemp/versions/0.0.1.ts

@@ -6,6 +6,7 @@ import { DesignComp } from "../DesignComp";
 
 export function dataTransform(data: any) {
   data.compMap || (data.compMap = {});
+
   deepEachComp(data.content, (...args: any[]) => {
     const comp = args.pop();
     set(data.content, args.join("."), comp.id);
@@ -17,6 +18,17 @@ export function dataTransform(data: any) {
       addCacheToMap(data.compMap);
     }
   });
+
+  if (!data.compMap.root) {
+    data.compMap.root = CompUI.Page.createComp({
+      id: "root",
+      compKey: "Page",
+      layout: data.pageStyle,
+      children: {
+        default: data.content,
+      },
+    });
+  }
   return data;
 }
 

src/modules/editor/helpers/index.ts

@@ -1,5 +1,6 @@
 import { EditorModule } from "..";
 import { DesignComp } from "../defines/DesignTemp/DesignComp";
+import { Layout } from "../typings";
 
 export const helpers = EditorModule.helper({
   designToNaturalSize(value: number) {
@@ -20,7 +21,7 @@ export const helpers = EditorModule.helper({
     );
     return parentComp;
   },
-  findRootComp() {
+  findRootComp(): DesignComp | undefined {
     return this.store.designData.compMap["root"];
   },
   getCompChildIds(comp: DesignComp) {
@@ -36,4 +37,7 @@ export const helpers = EditorModule.helper({
     }
     return getIds(comp.children);
   },
+  parseLayoutToStyle(layout: Layout): any {
+    return layout;
+  },
 });

src/modules/editor/stores/index.ts

@@ -20,6 +20,9 @@ export const store = EditorModule.store({
     currComp(state) {
       return state.designData.compMap[state.currCompId];
     },
+    pageCompIds(state): string[] {
+      return state.designData.compMap.root?.children.default || [];
+    },
   },
   actions: {
     setCompData(id: string, data: any) {
@@ -32,10 +35,11 @@ export const store = EditorModule.store({
       this.store.designData = new DesignTemp(data);
     },
     insertDesignContent(compKey: ICompKeys, index?: number) {
-      index === undefined && (index = this.store.designData.content.length);
+      const { pageCompIds } = this.store;
+      index === undefined && (index = pageCompIds.length);
       const compId = createCompId(compKey);
       addCacheToMap(this.store.designData.compMap);
-      this.store.designData.content.splice(index, 0, compId);
+      pageCompIds.splice(index, 0, compId);
       return compId;
     },
     insertCompContainer(compKey: ICompKeys, container: DesignComp) {
@@ -49,46 +53,52 @@ export const store = EditorModule.store({
       this.store.currCompId = compId;
     },
     deleteComp(compId: string) {
-      const { content, compMap } = this.store.designData;
+      const { compMap } = this.store.designData;
       const parentComp = this.helper.findParentComp(compId);
       let deleteOK = false;
       if (parentComp) {
-        // 只能删除children中以compId作为key的组件
-        if (parentComp.children?.[compId]) {
-          delete parentComp.children[compId];
-          deleteOK = true;
-        }
-      } else {
-        const index = content.findIndex((id) => id === compId);
-        if (index >= 0) {
-          content.splice(index, 1);
-          deleteOK = true;
+        const ids = parentComp.children.default;
+        // 只能删除children.default中的组件
+        if (ids?.includes(compId)) {
+          const index = ids.findIndex((id) => id === compId);
+          if (index >= 0) {
+            ids.splice(index, 1);
+            deleteOK = true;
+          }
         }
       }
 
       if (deleteOK) {
-        const comp = this.helper.findComp(compId);
-        const ids = flatCompChildIds(comp?.children || {});
+        const comp = this.helper.findComp(compId) as DesignComp;
+        const ids = this.helper.getCompChildIds(comp);
         [compId, ...ids].forEach((id) => {
           delete compMap[id];
         });
       }
     },
     moveComp(selIndex: number, targetIndex: number) {
-      const { content } = this.store.designData;
-      const [selComp] = content.splice(selIndex, 1);
-      content.splice(targetIndex, 0, selComp);
+      const { pageCompIds } = this.store;
+      const [selComp] = pageCompIds.splice(selIndex, 1);
+      pageCompIds.splice(targetIndex, 0, selComp);
+    },
+    clearUnusedComps() {
+      const used = new Set<string>();
+      const getUsedIds = (ids: string[]) => {
+        ids.forEach((id) => {
+          const comp = this.helper.findComp(id);
+          if (!comp) return;
+          used.add(id);
+          getUsedIds(this.helper.getCompChildIds(comp));
+        });
+        return used;
+      };
+      const rootId = (this.helper.findRootComp() as DesignComp).id;
+      getUsedIds([rootId]);
+      Object.keys(this.store.designData.compMap).forEach((compId) => {
+        if (!used.has(compId)) {
+          delete this.store.designData.compMap[compId];
+        }
+      });
     },
   },
 });
-
-function flatCompChildIds(obj: object, ids: string[] = []) {
-  Object.values(obj).forEach((item) => {
-    if (item instanceof Object) {
-      flatCompChildIds(item, ids);
-    } else if (typeof item === "string") {
-      ids.push(item);
-    }
-  });
-  return ids;
-}

src/pages/website/Material2/components/MaterialItem.tsx

@@ -23,7 +23,7 @@ export default defineUI({
 
       return (
         <div class={cx(itemStyles, "relative")}>
-          <View ratio={1.4} class="overflow-hidden">
+          <View ratio={1.4} class="overflow-hidden card">
             {record.fileType == "video" ? (
               <video src={record.file?.url} class="h-1/1 w-1/1" />
             ) : (
@@ -88,6 +88,9 @@ export default defineUI({
 });
 
 const itemStyles = css`
+  .card {
+    background-color: #e1e5e8;
+  }
   .orange {
     background-color: rgba(232, 139, 0, 0.5);
     &:hover {

src/pages/website/Material2/components/PreviewModal.tsx

@@ -13,12 +13,19 @@ export default defineUI({
     return () => {
       const { data } = props;
       return (
-        <div class="text-center min-h-200px">
+        <div class="text-center min-h-400px">
           {data.fileType == "image" && (
-            <Image size={720} src={data.url} class="max-w-1/1" />
+            <Image
+              size={720}
+              src={data.url}
+              class="max-w-1/1 max-h-600px"
+              // style={{
+              // backgroundColor: "#e1e5e8",
+              // }}
+            />
           )}
           {data.fileType == "video" && (
-            <video controls src={data.url} class="max-w-1/1" />
+            <video controls src={data.url} class="max-w-1/1 max-h-600px" />
           )}
         </div>
       );

src/pages/website/Material2/controller.tsx

@@ -27,6 +27,7 @@ export default function createController(resource:any, isSelectModel:boolean, se
       resource.showModal(<PreviewModal data={data}  />, {
         title: "预览",
         width: "800px",
+        centered: true
       }); 
   };
 

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

@@ -84,7 +84,7 @@ export default defineUI({
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                 {dayjs(record.updateTime).format("YYYY.MM.DD")} 发布{" "}
                 <Divider type="vertical"></Divider>
-                23次浏览
+                0次浏览
               </div>
             </div>
             <Dropdown

src/pages/website/components/layout/index.tsx

@@ -10,9 +10,9 @@ export default defineUI({
     Controller: object<UserController>().isRequired,
   },
   slots: {
-    Left
+    Left,
   },
-  setup(props, {slots}) {
+  setup(props, { slots }) {
     return () => {
       return (
         <Layout class={cx("!h-100vh flex", rootStyles)}>
@@ -33,6 +33,7 @@ export default defineUI({
 });
 
 const rootStyles = css`
+  min-width: 1560px;
   background-color: @inf-layout-bg;
   .page_container {
     background-color: @inf-modal-bg;