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

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

@@ -1,5 +1,6 @@
+import { Dict_Imgs } from "@/dict";
 import { useEditor } from "@/modules/editor";
-import { defineComponent } from "vue";
+import { defineComponent, watch } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -15,13 +16,13 @@ export const Component = defineComponent({
 
     function setImageSize(url: string) {
       if (!helper.isStreamCardChild(props.compId)) return;
-
       const temImg = new Image();
       temImg.src = url;
 
       temImg.onload = function () {
         comp.setH(comp.getW() / (temImg.width / temImg.height));
         actions.onCompLayoutUpdated(comp);
+        helper.extendStreamCard(store.currStreamCardId);
       };
     }
 
@@ -34,12 +35,19 @@ export const Component = defineComponent({
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
-        setImageSize(url);
       } catch (error) {
         console.log(error);
       }
     }
 
+    watch(
+      () => comp.value.url,
+      (value, oldValue) => {
+        if (oldValue !== Dict_Imgs.Default) return;
+        setImageSize(value);
+      }
+    );
+
     return () => {
       const value = comp.value;
       const scale = value?.s || 1;

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

@@ -25,7 +25,7 @@ export const { createComp, useCompData } = createCompHooks({
       createCompId("Image", { value: { url: thumb, x: 25.5, y: 7.0, s: 3.8 } }),
     desc: () =>
       createCompId("Text", {
-        value: `<p><span style="font-size:16px;">名称 &nbsp; p190 (注塑)</span></p><p><span style="font-size:16px;">规格 &nbsp; 52英寸</span></p><p><span style="font-size:16px;">厚度 &nbsp;1.0mm+0.05mm</span></p><p><span style="font-size:16px;">底材 &nbsp;鹿皮绒</span></p><p><span style="font-size:16px;">用途 &nbsp;凉鞋、跟鞋、高更鞋、</span><br><span style="font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 时尚休闲鞋等</span></p>`,
+        value: `<p style="line-height:1.5"><span style="font-size:16px;">名称 &nbsp; p190 (注塑)</span></p><p><span style="font-size:16px;">规格 &nbsp; 52英寸</span></p><p style="line-height:1.5><span style="font-size:16px;">厚度 &nbsp;1.0mm+0.05mm</span></p><p style="line-height:1.5"><span style="font-size:16px;">底材 &nbsp;鹿皮绒</span></p><p style="line-height:1.5"><span style="font-size:16px;">用途 &nbsp;凉鞋、跟鞋、高更鞋、</span><br><span style="font-size:16px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 时尚休闲鞋等</span></p>`,
       }),
   },
 });

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

@@ -29,7 +29,10 @@ export const Component = createUIComp({
       return (
         <div class="flex px-17.5px pt-15px">
           <div class="flex-1 mx-15px leading-loose relative z-10 w-0">
-            <Text.Component compId={children.text} class="mt-10px" />
+            <div class="mt-10px mb-48px">
+              <Text.Component compId={children.text} />
+            </div>
+
             <div class="flex flex-wrap mt-10px mr-40px ml-10px">
               {children.list.map((d: any, i: number) => (
                 <Image.Component

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

@@ -20,9 +20,9 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
   children: {
     text: () =>
       createCompId("Text", {
-        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>`,
+        value: `<p style="line-height:1.5;"><span style="color:hsl(0, 0%, 30%);font-size:12px;">皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</span></p><p tyle="line-height:1.5;"><span style="color:hsl(0, 0%, 30%);font-size:12px;">质量经久耐磨，性价比高， 经典之作用不过时。 </span></p>`,
         layout: {
-          size: [370, 300],
+          size: [370, 204],
         },
       }),
     img1: () =>

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

@@ -20,7 +20,7 @@ export const { createComp, useCompData } = createCompHooks({
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p><span style="font-size:20px;"><strong>P190-2#</strong></span></p>`,
+        value: `<p style="line-height:1.5;"><span style="font-size:20px;"><strong>P190-2#</strong></span></p>`,
         layout: {
           textAlign: "center",
           size: [240, 60],
@@ -28,10 +28,10 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     text2: () =>
       createCompId("Text", {
-        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>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);">2#</span><br><span style="color:hsl(0, 0%, 0%);">克莱因蓝</span></p>`,
         layout: {
           textAlign: "center",
-          size: [124, 80],
+          size: [124, 72],
         },
       }),
     img1: () =>

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

@@ -18,11 +18,10 @@ export const Component = createUIComp({
             class="w-137px h-148px object-cover"
           />
         </div>
+        <div class="flex-1 mt-50px py-29px px-5px mb-65px border-2px border-black border-solid leading-loose">
+          <Text.Component compId={children.text} />
+        </div>
 
-        <Text.Component
-          class="flex-1 mt-50px py-29px mb-65px border-2px border-black border-solid leading-loose"
-          compId={children.text}
-        />
         <div class="absolute bottom-5px left-17.5px">
           <Image.Component
             compId={children.imgShoe}

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

@@ -12,14 +12,14 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    size: [750, 800],
+    size: [750, 650],
   },
   children: {
     text: () =>
       createCompId("Text", {
-        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>`,
+        value: `<p style="text-align:center;line-height:1.5;">两面开边珠，无漆皮光亮&nbsp;</p><p style="text-align:center;line-height:1.5;">却比漆皮更耐用，不容易爆皮&nbsp;</p><p style="text-align:center;line-height:1.5;">逛着干看起来更加高档&nbsp;</p><p style="text-align:center;line-height:1.5;">丰富多彩的流行色水，增加无限魅力</p><p style="text-align:center;line-height:1.5;">既有复古的韵味更有时下的潮流元素</p>`,
         layout: {
-          size: [390, 420],
+          size: [340, 252],
         },
       }),
     img1: () =>

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

@@ -24,12 +24,9 @@ export const Component = createUIComp({
             class="w-200px h-165px object-cover"
           />
         </div>
-        <div class="relative">
-          <div class="absolute right-7px top-0 w-10px h-50px bg-white z-1"></div>
-          <Text.Component
-            compId={children.text}
-            class="-mt-30px border-2px border-solid border-dark-400 pt-50px pb-25px leading-loose"
-          />
+        <div class="relative inline-block -mt-30px border-2px border-solid border-dark-400 pt-50px pb-25px leading-loose">
+          <div class="absolute -right-2px top-0 w-10px h-50px bg-white z-1"></div>
+          <Text.Component compId={children.text} />
         </div>
       </div>
     );

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

@@ -17,9 +17,9 @@ export const { createComp, useCompData } = createCompHooks({
   children: {
     text: () =>
       createCompId("Text", {
-        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>`,
+        value: `<p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );line-height:1.5;font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );line-height:1.5;font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );line-height:1.5;font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );line-height:1.5;font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );line-height:1.5;font-size:12px;">不需要过多的言语，让心灵感到平和</span></p>`,
         layout: {
-          size: [622, 360],
+          size: [622, 240],
         },
       }),
     img1: () =>

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

@@ -44,10 +44,9 @@ export const Component = createUIComp({
             class="-ml-14px w-311px h-311px object-cover"
           />
           <div class="relative flex justify-end mt-25px pb-17.5px">
-            <Text.Component
-              compId={children.text}
-              class="w-237.5px py-15px bg-light-50 border-dark-200 border-2 border-solid leading-loose"
-            />
+            <div class="py-30px bg-light-50 border-dark-200 border-2 border-solid leading-loose">
+              <Text.Component compId={children.text} />
+            </div>
             <Image.Component
               compId={children.img2}
               class="!absolute bottom-0 left-0 -ml-14px w-200px h-142.5px object-cover"

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

@@ -21,23 +21,23 @@ export const { createComp, useCompData } = createCompHooks({
     title: () =>
       createCompId("Text", {
         value:
-          '<p><span style="font-size:24px;"><strong>P190-3#</strong></span></p>',
+          '<p style="line-height:1.5;"><span style="font-size:24px;"><strong>P190-3#</strong></span></p>',
         layout: {
           size: [260, 60],
         },
       }),
     colorText: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">3#&nbsp;</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;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">3#&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">铜绿色</span></p>`,
         layout: {
-          size: [130, 80],
+          size: [130, 72],
         },
       }),
     text: () =>
       createCompId("Text", {
-        value: `<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;">&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;">&nbsp;不需要过多的言语，让心灵感到平和</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,0%);font-size:12px;">绿色是个舒服的颜色，&nbsp;</span></p><p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,0%);font-size:12px;">处处充满着生机和希望，</span></p><p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，</span></p><p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;给人无限的对未来的憧憬，</span></p><p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,0%);font-size:12px;">&nbsp;不需要过多的言语，让心灵感到平和</span></p>`,
         layout: {
-          size: [475, 328],
+          size: [475, 180],
         },
       }),
     img2: () =>

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

@@ -42,14 +42,14 @@ 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>`,
+        value: `<p style="line-height:1.5;"><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 style="line-height:1.5;"><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>`,
+        value: `<p style="text-align:right;line-height:1.5;"><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/Cards/Card3/index.ts

@@ -40,9 +40,9 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     text1: () =>
       createCompId("Text", {
-        value: `<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
+        value: `<p style="line-height:1.5;"><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
         layout: {
-          size: [300, 50],
+          size: [300, 40],
         },
       }),
     text2: () =>

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

@@ -40,7 +40,7 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     text1: () =>
       createCompId("Text", {
-        value: `<p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>名称: &nbsp; P190（注塑）</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>规格: &nbsp; 52英寸</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>厚度: &nbsp; 1.0mm+0.05mm</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>底材: &nbsp; 鹿皮绒</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>用途: &nbsp; 凉鞋、跟鞋、高更鞋、</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;时尚休闲鞋等</strong></span></p>`,
+        value: `<p style="line-height:1.5;"><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>名称: &nbsp; P190（注塑）</strong></span></p><p style="line-height:1.5;"><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>规格: &nbsp; 52英寸</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>厚度: &nbsp; 1.0mm+0.05mm</strong></span></p><p style="line-height:1.5;"><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>底材: &nbsp; 鹿皮绒</strong></span></p><p style="line-height:1.5;"><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>用途: &nbsp; 凉鞋、跟鞋、高更鞋、</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;时尚休闲鞋等</strong></span></p>`,
       }),
   },
 });

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

@@ -30,9 +30,9 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     text1: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:60px;">FASHION</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,90%);font-size:60px;">FASHION</span></p>`,
         layout: {
-          size: [750, 275],
+          size: [750, 180],
         },
       }),
   },

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

@@ -47,7 +47,7 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
             },
           }),
           desc: createCompId("Text", {
-            value: `<p style="text-align:center;">这是一个小标题</p>`,
+            value: `<p style="text-align:center;line-height:1.5;">这是一个小标题</p>`,
             layout: {
               size: [230, 40],
             },

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

@@ -26,9 +26,9 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     title: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">新科技反光面料</span></p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:28px;">引领潮流新风尚</span></p><p style="text-align:center;">&nbsp;</p><p style="text-align:center;"><span style="color:hsl(0,0%,100%);font-size:16px;">时尚 ｜ 精致 ｜ 百搭</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5"><span style="color:hsl(0,0%,100%);font-size:28px;">新科技反光面料</span></p><p style="text-align:center;line-height:1.5"><span style="color:hsl(0,0%,100%);font-size:28px;">引领潮流新风尚</span></p><p style="text-align:center;line-height:1.5">&nbsp;</p><p style="text-align:center;line-height:1.5"><span style="color:hsl(0,0%,100%);font-size:16px;">时尚 ｜ 精致 ｜ 百搭</span></p>`,
         layout: {
-          size: [750, 200],
+          size: [750, 252],
         },
       }),
   },

src/modules/editor/components/CompUI/customUI/Covers/Cover2/component.tsx

@@ -39,7 +39,9 @@ export const Component = createUIComp({
         </div>
         <div class="absolute top-250px right-55px text-stroke-dark-900 z-2">
           <Text.Component compId={children.text1} />
-          <Text.Component class="mt-50px text-right" compId={children.text2} />
+          <div class={"pt-50px"}>
+            <Text.Component compId={children.text2} />
+          </div>
           <div class="line"></div>
         </div>
       </div>

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

@@ -47,21 +47,21 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     title: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FasHION</span></p><p>&nbsp;</p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,60%);font-size:42px;">NEW &nbsp;</span><span style="font-size:42px;"> FASHION</span></p>`,
         layout: {
-          size: [750, 110],
+          size: [750, 126],
         },
       }),
     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>`,
+        value: `<p style="line-height:1.5;"><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>`,
+        value: `<p style="text-align:right;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);">2023新品</span></p>`,
         layout: {
           size: [380, 40],
         },

src/modules/editor/components/CompUI/customUI/Texts/Text1/component.tsx

@@ -38,18 +38,18 @@ export const Component = createUIComp({
               margin: helper.designToNaturalSize(value.gap),
             }}
           >
-            <Text.Component
-              compId={d.label}
+            <div
               class={
                 value.showBackground
-                  ? "text relative z-0 py-4px px-5px text-white"
+                  ? "text relative z-0 py-8px px-8px text-white"
                   : "text-secondary"
               }
-              style={{
-                width: helper.designToNaturalSize(value.width),
-              }}
-            />
-            <Text.Component compId={d.content} class="flex-1 ml-15px" />
+            >
+              <Text.Component compId={d.label} />
+            </div>
+            <div class="flex-1 flex pl-15px">
+              <Text.Component compId={d.content} class={"flex-1"} />
+            </div>
           </div>
         ))}
       </div>
@@ -59,6 +59,7 @@ export const Component = createUIComp({
 
 const rootStyles = css`
   padding: 0 10px;
+  overflow: hidden;
   .text {
     &::before {
       content: "";

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

@@ -7,24 +7,24 @@ export { Component } from "./component";
 
 const defaultData = [
   {
-    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品名称</span></p>`,
-    content: "P190（注塑）",
+    label: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,100%);">产品名称</span></p>`,
+    content: `<p style="line-height:1.5;">P190（注塑）</p>`,
   },
   {
-    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品规格</span></p>`,
-    content: "52英寸",
+    label: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,100%);">产品规格</span></p>`,
+    content: `<p style="line-height:1.5;">52英寸</p>`,
   },
   {
-    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品厚度</span></p>`,
-    content: "1.0mm+0.05mm",
+    label: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,100%);">产品厚度</span></p>`,
+    content: `<p style="line-height:1.5;">1.0mm+0.05mm</p>`,
   },
   {
-    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品底材</span></p>`,
-    content: "鹿皮绒",
+    label: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,100%);">产品底材</span></p>`,
+    content: `<p style="line-height:1.5;">鹿皮绒</p>`,
   },
   {
-    label: `<p style="text-align:center;"><span style="color:hsl(0,0%,100%);">产品用途</span></p>`,
-    content: "凉鞋、跟鞋、高更鞋、时尚休闲鞋等",
+    label: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0,0%,100%);">产品用途</span></p>`,
+    content: `<p style="line-height:1.5;">凉鞋、跟鞋、高更鞋、时尚休闲鞋等</p>`,
   },
 ];
 
@@ -35,12 +35,12 @@ export const options = {
 
 export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
-    size: [750, 420],
+    size: [750, 460],
   },
   value: {
     columns: 5,
     gap: 20,
-    width: 156,
+    width: 160,
     showBackground: true,
   },
   children: {
@@ -52,13 +52,13 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
           label: createCompId("Text", {
             value: defaultData[i]?.label,
             layout: {
-              size: [160, 60],
+              size: [140, 36],
             },
           }),
           content: createCompId("Text", {
             value: defaultData[i]?.content,
             layout: {
-              size: [160, 60],
+              size: [160, 36],
             },
           }),
         };

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

@@ -11,15 +11,16 @@ export const Component = createUIComp({
   setup(props) {
     const { value, children } = useCompData(props.compId);
     return () => (
-      <div>
+      <div class={"py-10px"}>
         <Text.Component compId={children.title} />
-        <Text.Component
+        <div
           class={compStyle}
           style={{
             "--theme-color": value.themeColor,
           }}
-          compId={children.subTitle}
-        />
+        >
+          <Text.Component compId={children.subTitle} />
+        </div>
       </div>
     );
   },

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

@@ -8,12 +8,12 @@ export { Component } from "./component";
 
 export const options = {
   name: "标题",
-  thumbnail: Dict_Imgs.Default,
+  thumbnail: require("@/assets/comps/title1/thumbnail.png"),
 };
 
 export const { createComp, useCompData } = createCompHooks({
   layout: {
-    size: [750, 180],
+    size: [750, 172],
   },
   value: {
     themeColor: "#666666",
@@ -21,19 +21,19 @@ export const { createComp, useCompData } = createCompHooks({
   children: {
     title: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);font-size:28px;">我的风格我选择</span></p>`,
         layout: {
           textAlign: "center",
-          size: [750, 100],
+          size: [750, 84],
         },
       }),
     subTitle: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 30%);font-size:16px;">2023主推新品</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:hsl(0, 0%, 30%);font-size:16px;">2023主推新品</span></p>`,
         layout: {
           textAlign: "center",
           margin: "5px auto 0",
-          size: [260, 60],
+          size: [300, 48],
         },
       }),
   },

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

@@ -12,17 +12,12 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex items-center justify-center px-5px">
+      <div class="flex items-center justify-center py-10px px-5px">
         <div class={cx(border, "left w-25px text-12px text-right")}>
           &frasl; &frasl;
         </div>
-        <Text.Component
-          class="px-25px max-w-240px"
-          compId={children.title}
-        />
-        <div class={cx(border, "right w-25px text-12px")}>
-          &frasl; &frasl;
-        </div>
+        <Text.Component class="px-25px max-w-240px" compId={children.title} />
+        <div class={cx(border, "right w-25px text-12px")}>&frasl; &frasl;</div>
       </div>
     );
   },

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

@@ -12,12 +12,12 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    size: [750, 80],
+    size: [750, 100],
   },
   children: {
     title: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`,
         layout: {
           size: [300, 60],
         },

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

@@ -11,7 +11,7 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex flex-col items-center">
+      <div class="flex flex-col items-center py-10px">
         <Text.Component class="" compId={children.title} />
         <Text.Component class="" compId={children.subtitle} />
       </div>

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

@@ -15,21 +15,21 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    size: [750, 130],
+    size: [750, 136],
   },
   children: {
     title: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
+        value: `<p style="text-align:center;line-height:1.5;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
         layout: {
-          size: [750, 70],
+          size: [750, 60],
         },
       }),
     subtitle: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;">/ Product Details /</p>`,
+        value: `<p style="text-align:center;line-height:1.5;">/ Product Details /</p>`,
         layout: {
-          size: [750, 60],
+          size: [750, 36],
         },
       }),
   },

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

@@ -40,7 +40,11 @@ export default defineUI({
       if (!flagRef.value) {
         flagRef.value = true;
         setTimeout(() => {
-          actions.onViewReady(pageRoot.$el, selectCanvasRef.value, viewportRef.value);
+          actions.onViewReady(
+            pageRoot.$el,
+            selectCanvasRef.value,
+            viewportRef.value
+          );
         }, 0);
       }
 
@@ -62,14 +66,15 @@ export default defineUI({
                             sourceContainerOptions: any,
                             payload: any
                           ) => {
-                            console.log(
-                              "sourceContainerOptions:any, payload:any",
-                              sourceContainerOptions,
-                              payload
-                            );
-                            if (sourceContainerOptions.groupName != "canvas")
+                            if (sourceContainerOptions.groupName != "canvas") {
                               return false;
-                            controls.dragAddCtrl.updateCompKey(payload);
+                            }
+                            if (typeof payload == "string")
+                              controls.dragAddCtrl.updateCompKey(payload);
+                            else {
+                              controls.dragAddCtrl.updateCompKey(payload.type);
+                              controls.dragAddCtrl.updateCompData(payload.data);
+                            }
                             return false;
                           }}
                           drop-not-allowed={(p: any) => {
@@ -84,7 +89,7 @@ export default defineUI({
                           }}
                           onDragStart={() => (state.draging = true)}
                           onDragEnd={() => {
-                            state.draging = false
+                            state.draging = false;
                           }}
                           non-drag-area-selector={".drag-disable"}
                         >
@@ -104,9 +109,7 @@ export default defineUI({
                           !state.draging && (
                             <Transfer key={store.currCompId + streamCardIndex} />
                           )} */}
-                        {
-                          !state.draging && <SelectTransfer />
-                        }
+                        {!state.draging && <SelectTransfer />}
                       </>
                     );
                   },
@@ -195,4 +198,4 @@ const meatureStyle = css`
     width: 10px;
     cursor: ew-resize;
   }
-`
+`

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

@@ -1,9 +1,10 @@
 import { useEditor } from "@/modules/editor";
-import { initResource, useResource } from "@/modules/resource";
+import { useResource } from "@/modules/resource";
 import { css } from "@linaria/core";
-import { Image, List, Loadmore } from "@queenjs/ui";
+import { Image, Loadmore } from "@queenjs/ui";
 import { Radio } from "ant-design-vue";
 import { defineComponent, reactive } from "vue";
+import { Container, Draggable } from "vue-dndrop";
 
 export const MySources = defineComponent({
   setup() {
@@ -15,9 +16,7 @@ export const MySources = defineComponent({
 
     function getCurrCtrl() {
       return resource.controls[
-        state.sourceType === "Image"
-          ? "materialImageListCtrl"
-          : "materialVideoListCtrl"
+        state.sourceType === "Image" ? "matImageListCtrl" : "matVideoListCtrl"
       ];
     }
 
@@ -37,12 +36,7 @@ export const MySources = defineComponent({
     switchSource("Image");
 
     return () => {
-      const control =
-        resource.controls[
-          state.sourceType === "Image"
-            ? "materialImageListCtrl"
-            : "materialVideoListCtrl"
-        ];
+      const control = getCurrCtrl();
       return (
         <div class="space-y-20px -mt-10px flex flex-col overflow-hidden">
           <Radio.Group
@@ -54,35 +48,45 @@ export const MySources = defineComponent({
             <Radio.Button value="Image">图片</Radio.Button>
             <Radio.Button value="Video">视频</Radio.Button>
           </Radio.Group>
-          <div class="scrollbar flex-1 -mr-15px pr-15px">
-            <List data={control.state.list} columns={2} gap="20px">
-              {{
-                item(item: any) {
-                  return (
-                    <div
-                      style={{ aspectRatio: 1 }}
-                      onClick={() => clickToDesign(item.file.url)}
-                    >
+          <div class="flex-1 -mr-15px pr-15px overflow-x-hidden overflow-y-auto scrollbar">
+            <Container
+              class="grid grid-cols-2 gap-15px"
+              behaviour="copy"
+              group-name="canvas"
+              animation-duration={0}
+              get-child-payload={(index: number) => {
+                return {
+                  type: state.sourceType,
+                  data: control.state.list[index],
+                };
+              }}
+            >
+              {control.state.list.map((item: any) => (
+                <Draggable class="">
+                  <div
+                    class="draggable-item"
+                    style={{ aspectRatio: 1 }}
+                    onClick={() => clickToDesign(item.file.url)}
+                  >
+                    {item.fileType == "video" ? (
+                      <video src={item.file.url} class="w-full h-full object-cover" />
+                    ) : (
                       <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>
+                </Draggable>
+              ))}
+            </Container>
+            <Loadmore
+              class="mt-20px"
+              loading={control.state.loading}
+              canLoad={control.state.canLoadNext}
+              onChange={control.loadNextPage}
+            />
           </div>
         </div>
       );

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

@@ -1,8 +1,16 @@
 import { ModuleControl } from "queenjs";
 import { EditorModule } from "../../module";
 
+type sourceType = {
+  _id?: string;
+  file?: {
+    url?: string;
+  };
+};
+
 export class DragAddCtrl extends ModuleControl<EditorModule> {
   dragingCompKey = "";
+  dragingCompData: sourceType = {};
 
   _cancel?: () => void;
   _mouseUping = false;
@@ -18,10 +26,14 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
     }
   }
 
+  updateCompData(data: object) {
+    this.dragingCompData = data;
+  }
+
   initEvent() {
     const scope = this;
 
-    function mouseup(e: MouseEvent) {
+    async function mouseup(e: MouseEvent) {
       console.log("mouseup=>", scope.dragingCompKey);
       scope._mouseUping = true;
       setTimeout(() => {
@@ -31,7 +43,14 @@ export class DragAddCtrl extends ModuleControl<EditorModule> {
       if (scope._cancel) scope._cancel();
 
       if (!scope.dragingCompKey) return;
-      scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
+      await scope.actions.dragCompToDesign(e, scope.dragingCompKey as any);
+      if (
+        scope.dragingCompData?._id &&
+        (scope.dragingCompKey == "Image" || scope.dragingCompKey == "Video")
+      ) {
+        scope.store.currComp.value.url = scope.dragingCompData?.file?.url;
+        scope.dragingCompData = {};
+      }
       scope.dragingCompKey = "";
     }
 

src/modules/resource/index.ts

@@ -36,6 +36,9 @@ export class ResourceModule extends ModuleRoot {
 
     materialImageListCtrl: new PageListController(this.config?.httpConfig),
     materialVideoListCtrl: new PageListController(this.config?.httpConfig),
+
+    matImageListCtrl: new PageListController(this.config?.httpConfig),
+    matVideoListCtrl: new PageListController(this.config?.httpConfig),
   };
   natsBus = new BusController();
   treeController = new TreeController(this.natsBus);
@@ -50,15 +53,23 @@ export class ResourceModule extends ModuleRoot {
     this.controls.matTempListCtrl.setCrudPrefix("/tpls");
     this.controls.matTempListCtrl.state.size = 20;
 
-    this.controls.materialImageListCtrl.setCrudPrefix("/source")
+    this.controls.materialImageListCtrl.setCrudPrefix("/source");
     this.controls.materialImageListCtrl.state.size = 18;
-    this.controls.materialImageListCtrl.state.query = {fileType:"image"}
+    this.controls.materialImageListCtrl.state.query = { fileType: "image" };
 
-    this.controls.materialVideoListCtrl.setCrudPrefix("/source")
+    this.controls.materialVideoListCtrl.setCrudPrefix("/source");
     this.controls.materialVideoListCtrl.state.size = 18;
-    this.controls.materialVideoListCtrl.state.query = {fileType:"video"}
+    this.controls.materialVideoListCtrl.state.query = { fileType: "video" };
+
+    this.controls.matImageListCtrl.setCrudPrefix("/source");
+    this.controls.matImageListCtrl.state.size = 20;
+    this.controls.matImageListCtrl.state.query = { fileType: "image" };
+
+    this.controls.matVideoListCtrl.setCrudPrefix("/source");
+    this.controls.matVideoListCtrl.state.size = 20;
+    this.controls.matVideoListCtrl.state.query = { fileType: "video" };
 
-    this.natsBus.init()
+    this.natsBus.init();
   }
 }
 

src/pages/website/Login/index.tsx

@@ -1,12 +1,21 @@
-import { css } from "@linaria/core";
-import Login from "@queenjs-modules/auth/components/Login";
+import LoginForm from "@queenjs-modules/auth/components/components/LoginForm";
 import { defineComponent } from "vue";
+
 export default defineComponent(() => {
   return () => (
-    <div class={LoginStyle}>
-      <Login class="!h-auto flex-1" />
-      <div class="footer_copy">
-        <a href="https://beian.miit.gov.cn" target="_blank">
+    <div class="h-100vh flex flex-col">
+      <div class="flex-1 flex flex-col items-center justify-center">
+        <div class="pointer-events-none">
+          <img class="h-40px" src={require("@/assets/imgs/Logo.png")} alt="" />
+        </div>
+        <LoginForm />
+      </div>
+      <div class="py-10px text-center text-gray">
+        <a
+          href="https://beian.miit.gov.cn"
+          target="_blank"
+          class="mr-5px text-light-50 opacity-80 hover:(text-light-50 opacity-80 underline)"
+        >
           蜀ICP备18008991号-3
         </a>
         版权所有：3Dqueen
@@ -14,18 +23,3 @@ export default defineComponent(() => {
     </div>
   );
 });
-const LoginStyle = css`
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  .footer_copy {
-    padding: 10px 0;
-    text-align: center;
-    color: #999;
-  }
-
-  .footer_copy a {
-    margin-right: 5px;
-    color: #fff;
-  }
-`;

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

@@ -34,7 +34,7 @@ export default defineComponent({
       return (
         <div class="flex items-start">
           <div>
-            <div class="scrollbar h-600px pr-10px overflow-y-auto">
+            <div class="scrollbar h-600px overflow-y-auto border-1px border-solid border-dark-50">
               {slots.preview?.()}
             </div>
             <div class="mt-20px text-center">