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

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

@@ -7,7 +7,7 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import { defineComponent, ref, watch, watchEffect } from "vue";
+import { defineComponent, ref, watch, watchEffect, reactive } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -54,10 +54,12 @@ export const Component = defineComponent({
 
     let editorInstance: InlineEditor;
     let timeOut = ref();
+    const state = reactive({
+      textEditing: false,
+    });
 
     watchEffect(() => {
-      console.log("1111", store.textEditingState);
-      if (!store.textEditingState) {
+      if (!state.textEditing) {
         editorInstance?.setData(comp.value);
       }
     });
@@ -79,21 +81,15 @@ export const Component = defineComponent({
           class={textStyle}
           editor={InlineEditor}
           onBlur={() => {
-            // actions.updateCompData(
-            //   helper.findComp(props.compId) as DesignComp,
-            //   "value",
-            //   editorInstance.getData()
-            // );
-            // store.setTextEditingState(false);
-
-            // console.log("blur", editorInstance);
             timeOut.value = setTimeout(() => {
+              state.textEditing = false;
               store.setTextEditingState(false);
               controls.historyCtrl.history.submit();
             }, 500);
           }}
           onFocus={() => {
             store.setTextEditingState(true);
+            state.textEditing = true;
           }}
           onInput={(e: any) => {
             if (editorInstance) {

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

@@ -15,57 +15,64 @@ export const Component = createUIComp({
 
     return () => (
       <div class="relative">
-        <div class={upStyle}>
+        <div class="relative">
           <div class={style}>
             <Image.Component
               style={{
                 width: designToNaturalSize(750),
                 height: designToNaturalSize(464),
               }}
+              // class="h-5.3rem w-1/1"
               compId={children.bgImg}
             />
           </div>
-
-          <Image.Component
-            class="!absolute bottom-0 transform translate-x-1/4 translate-y-1/4 rounded-1/2 overflow-hidden"
+          <div
+            class="absolute bottom-0 w-1/1 pl-0.8rem pr-0.2rem flex items-end justify-between transform translate-y-1/3"
             style={{
-              width: designToNaturalSize(191),
               height: designToNaturalSize(191),
+              // marginBottom: designToNaturalSize(191 / 2),
             }}
-            compId={children.item1}
-          />
+          >
+            <Image.Component
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                // marginTop: designToNaturalSize(191 / 3),
+              }}
+              compId={children.item1}
+            />
 
-          <Image.Component
-            class="!absolute transform rounded-1/2 overflow-hidden -translate-x-1/2 bottom-0 left-1/2"
-            style={{
-              width: designToNaturalSize(191),
-              height: designToNaturalSize(191),
-            }}
-            compId={children.item2}
-          />
+            <Image.Component
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                marginBottom: designToNaturalSize(191 / 3),
+              }}
+              compId={children.item2}
+            />
 
-          <Image.Component
-            class="!absolute bottom-0 right-0 rounded-1/2 overflow-hidden transform -translate-x-24/100 -translate-y-1/3"
-            style={{
-              width: designToNaturalSize(191),
-              height: designToNaturalSize(191),
-            }}
-            compId={children.item3}
-          />
+            <Image.Component
+              class="rounded-1/2 overflow-hidden"
+              style={{
+                width: designToNaturalSize(191),
+                height: designToNaturalSize(191),
+                marginBottom: designToNaturalSize((191 / 3) * 2),
+              }}
+              compId={children.item3}
+            />
+          </div>
         </div>
-
-        <div class="absolute top-0 left-0">
+        <div class="absolute top-1rem left-0 z-1">
           <Text.Component compId={children.text1} />
         </div>
-
-        <Text.Component compId={children.text2} />
+        <Text.Component compId={children.text2} class="mt-0.3rem" />
       </div>
     );
   },
 });
-const upStyle = css`
-  position: relative;
-`;
+
 const style = css`
   background: gray;
   clip-path: polygon(0 0, 100% 0, 100% 57%, 0 100%);

src/modules/editor/components/CompUI/customUI/Cards/Card2/index.tsx

@@ -16,8 +16,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0 0 0.2rem 0",
-    size: [750, 600],
+    size: [750, 550],
   },
   children: {
     bgImg: () =>
@@ -44,10 +43,16 @@ export const { createComp, useCompData } = createCompHooks({
     text1: () =>
       createCompId("Text", {
         value: `<p><span style="font-size:42px;"><strong>&nbsp; </strong></span><span style="color:hsl(0, 0%, 100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0, 0%, 100%);font-size:20px;">&nbsp; &nbsp; &nbsp;可注塑</span></p>`,
+        layout: {
+          size: [750, 200],
+        },
       }),
     text2: () =>
       createCompId("Text", {
         value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
+        layout: {
+          size: [750, 40],
+        },
       }),
   },
 });

src/modules/editor/components/CompUI/customUI/Covers/Cover2/index.ts

@@ -12,7 +12,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    size: [750, 500],
+    size: [750, 1200],
   },
   children: {
     img1: () =>
@@ -55,10 +55,16 @@ export const { createComp, useCompData } = createCompHooks({
     text1: () =>
       createCompId("Text", {
         value: `<p><span style="color:hsl(0,0%,100%);font-size:42px;"><strong>P190</strong></span></p><p><span style="color:hsl(0,0%,100%);font-size:20px;"><strong>全新 &nbsp; &nbsp; 时尚 &nbsp; &nbsp;</strong></span><span style="color:hsl(0,0%,0%);font-size:20px;"><strong>简约</strong></span></p>`,
+        layout: {
+          size: [380, 200],
+        },
       }),
     text2: () =>
       createCompId("Text", {
         value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
+        layout: {
+          size: [380, 40],
+        },
       }),
   },
 });

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

@@ -1,20 +1,17 @@
 // export * as Card from "./Cards/Card";
-export * as Card2 from "./Cards/Card2";
-export * as Card3 from "./Cards/Card3";
-export * as CardList from "./Cards/CardList";
-// export * as Card4 from "./Cards/Card4";
-export * as Card5 from "./Cards/Card5";
 export * as Cards11 from "./Cards/Card11";
 export * as Cards12 from "./Cards/Card12";
 export * as Cards13 from "./Cards/Card13";
 export * as Cards14 from "./Cards/Card14";
 export * as Cards15 from "./Cards/Card15";
-
+export * as Card2 from "./Cards/Card2";
+// export * as Card3 from "./Cards/Card3";
+// export * as Card4 from "./Cards/Card4";
+export * as Card5 from "./Cards/Card5";
+export * as CardList from "./Cards/CardList";
 export * as Cover from "./Covers/Cover";
 export * as Cover2 from "./Covers/Cover2";
-
 export * as Text1 from "./Texts/Text1";
-
 export * as Title1 from "./Titles/Title1";
 export * as Title2 from "./Titles/Title2";
 export * as Title3 from "./Titles/Title3";

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

@@ -1,43 +1,99 @@
-import { useResource } from "@/modules/resource";
+import { useEditor } from "@/modules/editor";
+import { initResource, useResource } from "@/modules/resource";
+import { css } from "@linaria/core";
 import { Image, List, Loadmore } from "@queenjs/ui";
 import { Radio } from "ant-design-vue";
-import { defineComponent } from "vue";
+import { defineComponent, reactive } from "vue";
 
 export const MySources = defineComponent({
   setup() {
+    const editor = useEditor();
     const resource = useResource();
-    const matListCtrl = resource.controls.materialImageListCtrl;
-    matListCtrl.hasLimit = true;
-    matListCtrl.loadPage(1);
-
-    return () => (
-      <div class="scrollbar">
-        <Radio.Group>
-          <Radio.Button>图片</Radio.Button>
-          <Radio.Button>视频</Radio.Button>
-        </Radio.Group>
-
-        <List data={matListCtrl.state.list} columns={2} gap="20px">
-          {{
-            item(item: any) {
-              return (
-                <div style={{ aspectRatio: 1 }}>
-                  <Image class="w-full h-full" src={item.file.url} size={240} />
-                </div>
-              );
-            },
-            loadmore() {
-              return (
-                <Loadmore
-                  loading={matListCtrl.state.loading}
-                  canLoad={matListCtrl.state.canLoadNext}
-                  onChange={matListCtrl.loadNextPage}
-                />
-              );
-            },
-          }}
-        </List>
-      </div>
-    );
+    const state = reactive({
+      sourceType: "Image" as "Image" | "Video",
+    });
+
+    function getCurrCtrl() {
+      return resource.controls[
+        state.sourceType === "Image"
+          ? "materialImageListCtrl"
+          : "materialVideoListCtrl"
+      ];
+    }
+
+    function switchSource(v: "Image" | "Video") {
+      state.sourceType = v;
+      const ctrl = getCurrCtrl();
+      ctrl.hasLimit = true;
+      ctrl.loadPage(1);
+    }
+
+    function clickToDesign(url: string) {
+      editor.actions.clickCompToDesign(state.sourceType, (comp) => {
+        comp.value.url = url;
+      });
+    }
+
+    switchSource("Image");
+
+    return () => {
+      const control =
+        resource.controls[
+          state.sourceType === "Image"
+            ? "materialImageListCtrl"
+            : "materialVideoListCtrl"
+        ];
+      return (
+        <div class="space-y-20px -mt-10px">
+          <Radio.Group
+            class={radioCls}
+            value={state.sourceType}
+            size="small"
+            onChange={(e) => switchSource(e.target.value)}
+          >
+            <Radio.Button value="Image">图片</Radio.Button>
+            <Radio.Button value="Video">视频</Radio.Button>
+          </Radio.Group>
+
+          <List data={control.state.list} columns={2} gap="20px">
+            {{
+              item(item: any) {
+                return (
+                  <div
+                    style={{ aspectRatio: 1 }}
+                    onClick={() => clickToDesign(item.file.url)}
+                  >
+                    <Image
+                      class="w-full h-full"
+                      src={item.file.url}
+                      size={240}
+                    />
+                  </div>
+                );
+              },
+              loadmore() {
+                return (
+                  <Loadmore
+                    class="mt-20px"
+                    loading={control.state.loading}
+                    canLoad={control.state.canLoadNext}
+                    onChange={control.loadNextPage}
+                  />
+                );
+              },
+            }}
+          </List>
+        </div>
+      );
+    };
   },
 });
+
+const radioCls = css`
+  display: flex;
+  > label {
+    flex: 1;
+    width: 0;
+    text-align: center;
+  }
+`;

src/modules/editor/controllers/HistoryCtrl/HistoryController.ts

@@ -51,11 +51,13 @@ export class HistoryController {
   undo() {
     if (!this.state.canUndo) return;
     this.queue[this.state.opIndex--].undo();
+    console.log(this)
   }
 
   redo() {
     if (!this.state.canRedo) return;
     this.queue[++this.state.opIndex].redo();
+    console.log(this)
   }
 
   //清除操作

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

@@ -22,12 +22,13 @@ export const editActions = EditorModule.action({
 
   },
   // 通过点击添加组件到画布
-  async clickCompToDesign(compKey: ICompKeys) {
+  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
 
     const bound = this.helper.getCardCompBound(this.store.currCompId);
 
     await this.actions.addCompToDesign(compKey);
     const { currComp } = this.store;
+    cb?.(currComp);
 
     //添加组件到当前选中的组件下面
     const obj = new CompObject(currComp);