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 />}
                       </>
                     );
                   },
@@ -122,8 +125,16 @@ export default defineUI({
                   },
                 }}
               </CompUI.Page.Component>
+
             </div>
             <canvas class={selectCls}  ref={selectCanvasRef} />
+            
+          </div>
+          <div class={meatureStyle}>
+             <div class="ruler top" id="rulerTop"></div>
+             <div class="ruler left" id="rulerLeft"></div>
+             <div class="ruler right" id="rulerRight"></div>
+             <div class="ruler bottom" id="rulerBottom"></div>
           </div>
         </div>
       );
@@ -144,4 +155,47 @@ const selectCls = css`
   width: 100%;
   height: 100%;
   z-index: 1000;
-`;
+`;
+
+const meatureStyle = css`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1001;
+  pointer-events: none;
+
+
+  .ruler {
+    position: absolute;
+    cursor: ns-resize;
+    pointer-events: auto;
+  }
+  .top {
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+  .bottom {
+    bottom: 0;
+    left: 0;
+    height: 10px;
+    width: 100%;
+  }
+  .left {
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 10px;
+    cursor: ew-resize;
+  }
+  .right {
+    top: 0;
+    right: 0;
+    height: 100%;
+    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/editor/controllers/SelectCtrl/assistCtrl.ts

@@ -9,6 +9,8 @@ export class AssistCtrl {
 
     _flashTimer?:any;
     _flashDraw(cb:()=>void) {
+        this.ctrl.assistRuler?.draw();
+
         let total = 0
         const ctx = this.ctrl._selCtx;
         const size = this.ctrl._selCanvaseSize;
@@ -19,9 +21,10 @@ export class AssistCtrl {
         }
         this._flashTimer = setInterval(()=>{
             total += 1;
-            if (total > 3) {
+            if (total > 5) {
                 clearInterval(this._flashTimer);
-                ctx.clearRect(0, 0, size.w, size.h)
+                this._flashTimer =  null;
+                this.ctrl.assistRuler?.draw();
                 return;
             }
             cb();
@@ -37,13 +40,11 @@ export class AssistCtrl {
 
         const ObjC = this.ctrl.objContainer 
         const bound = ObjC.getBound()
-        ctx.clearRect(0, 0, size.w, size.h)
         ctx.lineWidth = 2;
         ctx.beginPath(); // Start a new path
         ctx.strokeStyle = "orange"; 
         ctx.font = "36px Arial";
         ctx.fillStyle = "orange"; 
-        ctx.setLineDash([5, 5]);
 
         //左边
         let x = (cardBox.x + bound.x)*2;
@@ -53,17 +54,17 @@ export class AssistCtrl {
         ctx.stroke(); // Render the path
         //关闭当前的绘制路径
 	    ctx.closePath();
+        const tl = ( x - cardBox.x*2).toFixed(0);
+        ctx.fillText(tl, cardBox.x*2, y - 18);
 
         //右边
-        const tl = ( x / 2.0  - cardBox.x).toFixed(0);
-        ctx.fillText(tl, cardBox.x*2, y - 18);
         x = (cardBox.x + bound.x + bound.width);
         const x2 = (cardBox.x + cardBox.width);
         ctx.moveTo(x*2, y); // Move the pen to (30, 50)
         ctx.lineTo( x2*2, y); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
         ctx.closePath();
-        const tr = (x2-x).toFixed(0);
+        const tr = ((x2-x)*2).toFixed(0);
         const m = ctx.measureText(tr)
         ctx.fillText(tr, x2*2 - m.width, y-18);
 
@@ -75,7 +76,7 @@ export class AssistCtrl {
         ctx.lineTo( x*2, (y + bound.y)*2); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
         ctx.closePath();
-        let dy = (bound.y).toFixed(0);
+        let dy = (bound.y*2).toFixed(0);
         ctx.fillText(dy, x*2, cardBox.y *2 + 36);
 
 
@@ -87,10 +88,9 @@ export class AssistCtrl {
         ctx.lineTo( x*2, (cardBox.y + bound.y + bound.height)*2); // Draw a line to (150, 100)
         ctx.stroke(); // Render the path
         ctx.closePath();
-        dy = (cardBox.height - bound.y - bound.height).toFixed(0);
+        dy = ((cardBox.height - bound.y - bound.height)*2).toFixed(0);
         ctx.fillText(dy, x*2, y*2);
 
-
         //如果有旋转角度
         if ( Math.abs(ObjC.parent.rotation) > 0.001 ) {
             ctx.strokeRect((bound.x + cardBox.x)*2, (bound.y + cardBox.y)*2, bound.width *2, bound.height *2);

src/modules/editor/controllers/SelectCtrl/assistRulerCtrl.ts

@@ -0,0 +1,191 @@
+import { SelectCtrl } from ".";
+
+type  Ruler = {
+    horz?: number, verz?: number
+}
+export class AssistRulerCtrl {
+    ctrl: SelectCtrl
+    rulers :Ruler[] = []
+
+    _currDragItem?:Ruler;
+
+    constructor(ctrl: SelectCtrl) {
+        this.ctrl = ctrl;
+        const c = localStorage.getItem("ruler"+ this.ctrl.getProjectId());
+        if (c) {
+            this.rulers = JSON.parse(c);
+        }
+        this.draw();
+
+
+        const mouseMove = this.onDocMouseMove.bind(this);
+
+        document.addEventListener("mousedown", (e:MouseEvent)=>{
+            const pageViewPort = this.ctrl.pageEl as HTMLElement;
+            const pageBox = pageViewPort.getBoundingClientRect();
+            let x = e.clientX - pageBox.left;
+            let y = e.clientY - pageBox.top;
+            
+            let n = this.rulers.length;
+            while(n--) {
+               const item = this.rulers[n]
+               if (item.horz != undefined && Math.abs(item.horz - y*2) < 4 ) {
+                    this._currDragItem = item;
+                    break;
+               } else if (item.verz != undefined && Math.abs(item.verz - x*2) < 4) {
+                    this._currDragItem = item;
+                    break;
+               } 
+            }
+
+            console.log("click canvas", x, y, this._currDragItem);
+            if (this._currDragItem) {
+                document.addEventListener("mousemove",mouseMove)
+                document.addEventListener("mouseup", ()=>{
+                    document.removeEventListener("mousemove", mouseMove);
+                    this._currDragItem = undefined;
+                }, {once: true})
+            }
+        })
+        
+    }
+
+    _currAddingRuler?:{horz?: number, verz?: number}; //={horz: 0, verz: 0, cid:""}
+
+    onDocMouseMove(e:MouseEvent) {
+        console.log("mouse movexxx")
+        e.preventDefault();
+        e.stopPropagation();
+
+        const it = this._currDragItem
+        if (!it) return;
+
+        const pageViewPort = this.ctrl.pageEl as HTMLElement;
+        const pageBox = pageViewPort.getBoundingClientRect();
+        const cx = e.clientX - pageBox.left;
+        const cy = e.clientY - pageBox.top;
+
+        if (cx < -40) {
+            return;
+        }
+
+        if (it.verz) {
+            it.verz = cx *2;
+        } else {
+            it.horz = cy *2;
+        }
+        this.draw();
+    }
+
+    rulerLineMouseMove(e:MouseEvent) {
+        this.draw();
+
+        const viewPort = this.ctrl.viewport as HTMLElement;
+        const box = viewPort.getBoundingClientRect();
+        if (e.clientX < box.x || e.clientX > box.right || e.clientY < box.top || e.clientY > box.bottom) return;
+
+        const ctx = this.ctrl._selCtx;
+        ctx.beginPath();
+        const typeIndex = ["rulerLeft", "rulerRight", "rulerTop", "rulerBottom"].indexOf(this.ctrl._mouseDownFlag)
+    
+        const pageViewPort = this.ctrl.pageEl as HTMLElement;
+        const pageBox = pageViewPort.getBoundingClientRect();
+
+        // if ( !this._currAddingRuler ) this._currAddingRuler = {cid: this.ctrl.getCurrCard().id};
+    
+        if ( typeIndex == 0 || typeIndex == 1) {
+    
+          let mx = e.clientX;
+          if ( Math.abs( mx - pageBox.left ) < 2 ) {//吸附效果
+             mx = pageBox.left;
+          }
+          let x = mx
+          let y = this.ctrl._selCanvaseSize.h
+          ctx.moveTo(x *2, 0)
+          ctx.lineTo(x *2, y)
+          if (typeIndex == 0) {
+            ctx.fillText(((mx-pageBox.left) *2).toFixed(0), x*2, e.clientY*2)
+          } else {
+            ctx.fillText(((pageBox.right - e.clientX) *2).toFixed(0), x*2, e.clientY*2)
+          }
+          this._currAddingRuler = {verz: (mx - pageBox.left)*2}
+    
+        } else {
+          const x1 = box.left*2, x2 = box.right*2;
+          const y = e.clientY*2
+          ctx.moveTo(x1,  y)
+          ctx.lineTo(x2,  y)
+    
+          const curBox = this.ctrl.getCurrCardBox();
+          if (typeIndex ==2 ) {
+            ctx.fillText(((e.clientY  - curBox.top) *2).toFixed(0),(x1 + x2 ) / 2, y)
+          } else {
+            ctx.fillText((( curBox.bottom - e.clientY) *2).toFixed(0),(x1 + x2 ) / 2, y)
+          }
+          this._currAddingRuler = {horz: y}
+        }
+        ctx.stroke();
+        ctx.closePath();
+    }
+    
+    rulerLineMouseUp(e:MouseEvent, isClick:boolean) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!this._currAddingRuler) {
+            return;
+        }
+        const viewPort = this.ctrl.pageEl as HTMLElement;
+        const box = viewPort.getBoundingClientRect();
+        
+        if ((e.clientX - box.left) < -20  || 
+           (e.clientY - box.top) < -20   ||
+            (e.clientY - box.bottom) > 20 ||
+            (e.clientX - box.right) > 20  
+        ) {
+            this._currAddingRuler = undefined;
+            return;
+        }
+        this.rulers.push({...this._currAddingRuler})
+
+        console.log("rulerLineMouseUp=>", e.clientY);
+        this._currAddingRuler = undefined;
+
+        localStorage.setItem("ruler"+ this.ctrl.getProjectId(), JSON.stringify(this.rulers));
+    }
+    
+    draw() {
+        const ctx = this.ctrl._selCtx;
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = "#E88B00";
+        ctx.fillStyle = "#E88B00";
+        ctx.font = "36px Arial";
+        ctx.setLineDash([5, 5]);
+        ctx.clearRect(0, 0, this.ctrl._selCanvaseSize.w, this.ctrl._selCanvaseSize.h)
+        let n = this.rulers.length;
+        const viewPort = this.ctrl.viewport as HTMLElement;
+        const box = viewPort.getBoundingClientRect();
+        const cardBox = this.ctrl.getCurrCardBox();
+
+        while(n--) {
+            const item = this.rulers[n];
+
+
+            if (item.horz != undefined)  { //水平线
+                ctx.beginPath();
+                ctx.moveTo(box.x *2, item.horz)
+                ctx.lineTo(box.right *2, item.horz)
+                ctx.stroke();
+                ctx.closePath();
+
+            } else if( item.verz != undefined) {
+                ctx.beginPath();
+                const x = item.verz + cardBox.left *2
+                ctx.moveTo(x, 0)
+                ctx.lineTo(x, this.ctrl._selCanvaseSize.h);
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+    }
+}

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

@@ -9,6 +9,7 @@ import { Project, VectorLenth } from "./objects/mathUtils";
 import { Point } from "./objects/point";
 import { indexOf } from "lodash";
 import { AssistCtrl } from "./assistCtrl";
+import { AssistRulerCtrl } from "./assistRulerCtrl";
 
 /**
  *  页面画布空间进行选择
@@ -18,6 +19,8 @@ const MODE_MOVING = 2;
 const MODE_ROTATE = 3;
 const MODE_SCALE_WIDTH = 4;
 const MODE_SCALE_SCALE = 5;
+const MODE_RULER_LINE = 6;
+
 const MODE_NONE = 0;
 
 export class SelectCtrl extends ModuleControl<EditorModule> {
@@ -63,10 +66,18 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   bus = new Event();
   viewport?: HTMLElement;
 
-  assistCtrl?:AssistCtrl;
+  assistCtrl?: AssistCtrl;
+  assistRuler?: AssistRulerCtrl;
 
   getCurrCardBox() {
     return this.store.currStreamCard.$el.getBoundingClientRect();
+  } 
+  
+  getCurrCard() {
+    return this.store.currStreamCard;
+  }
+  getProjectId() {
+    return this.store.designData._id;
   }
 
   initEvents(
@@ -86,44 +97,48 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._selCanvaseSize.w = selCanvas.width * 2;
     this._selCanvaseSize.h = selCanvas.height * 2;
 
-    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this), {
-      capture: true,
-    });
+    this.assistCtrl = new AssistCtrl(this);
+    this.assistRuler = new AssistRulerCtrl(this);
+
+    viewport.addEventListener("mousedown", this.onDocMouseDown.bind(this));
     window.addEventListener("resize", this.onResize.bind(this));
 
     this.initEffects();
-
-    this.assistCtrl = new AssistCtrl(this);
   }
 
   initEffects() {
-     //相应相应的事件
-      Effect.array(()=>this.store.selected).list({
-        remove:()=>{
-          console.log("xxx")
+    //相应相应的事件
+    Effect.array(() => this.store.selected)
+      .list({
+        remove: () => {
+          console.log("xxx");
         },
-      change:(added:string[], removed:string[])=>{
-        console.log("changeMap=>", added, removed)
-        this._updateSelects();
-      },
-     }).run();
+        change: (added: string[], removed: string[]) => {
+          console.log("changeMap=>", added, removed);
+          this._updateSelects();
+        },
+      })
+      .run();
   }
 
   _mouseDownFlag = "";
   _mouseDownTimestamp = 0;
 
-  _containers:Map<string, ObjsContainer> = new Map();
+  _containers: Map<string, ObjsContainer> = new Map();
 
   _updateSelects() {
     const selecteds = this.store.selected;
-    const ObjC = this._containers.get(this.store.selectId)
+    const ObjC = this._containers.get(this.store.selectId);
     let objs = [];
     for (let item of selecteds) {
-        objs.push( new CompObject(this.compMap[item]) )
+      objs.push(new CompObject(this.compMap[item]));
     }
     this.selecteObjs(objs, ObjC);
     if (this.store.selectId) {
-        this._containers.set(this.store.selectId, this.objContainer as ObjsContainer);
+      this._containers.set(
+        this.store.selectId,
+        this.objContainer as ObjsContainer
+      );
     }
   }
 
@@ -175,9 +190,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
           this._state = MODE_MOVING;
         }
       }
-      if (!isClickSelRect) { //点击在选框之外
-        
-        if (!this._downClickedCompId) {//没有点击到组件
+      if (!isClickSelRect) {
+        //点击在选框之外
+
+        if (!this._downClickedCompId) {
+          //没有点击到组件
           const view = this.viewport?.getBoundingClientRect() as any;
           const isOut =
             e.clientX < view.left ||
@@ -200,32 +217,41 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._state = MODE_MOVING;
     } else if (this._mouseDownFlag.indexOf("scale") > -1) {
       this._state = MODE_SCALE_WIDTH;
-      if (this.store.selected.length == 1 && this.store.currComp.compKey == "Text") {//拖拽的是文本
-          const scaleFlags = ["scaleBottomright", "scaleBottomleft", "scaleTopleft", "scaleTopright"]
-          if (scaleFlags.indexOf(this._mouseDownFlag) > -1 ) {
-            this._state = MODE_SCALE_SCALE;
-          }
+      if (
+        this.store.selected.length == 1 &&
+        this.store.currComp.compKey == "Text"
+      ) {
+        //拖拽的是文本
+        const scaleFlags = [
+          "scaleBottomright",
+          "scaleBottomleft",
+          "scaleTopleft",
+          "scaleTopright",
+        ];
+        if (scaleFlags.indexOf(this._mouseDownFlag) > -1) {
+          this._state = MODE_SCALE_SCALE;
+        }
       }
+    } else if (this._mouseDownFlag.indexOf("ruler") > -1) {
+      this._state = MODE_RULER_LINE;
     }
-
     this._movePreClientX = this._downClientX;
     this._movePreClientY = this._downClientY;
     this._initMovePos.x = -1;
     this._initMovePos.y = -1;
-
   }
   _initMovePos = { x: -1, y: -1 };
 
-  getDivFlag(div: HTMLElement, flag="editable") {
+  getDivFlag(div: HTMLElement, flag = "editable") {
     let c: any = div;
-    if (!c) return ""
+    if (!c) return "";
     let i = 0;
     do {
       if (c[flag]) return c[flag];
       c = c.parentElement;
       i += 1;
       if (i > 16) {
-        return ""
+        return "";
       }
     } while (c);
     return "";
@@ -244,12 +270,20 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       }
     } while (c);
   }
-  
+
   getDivTransformFlag(div: HTMLElement) {
-     const id = this.getDivId(div);
-     if (!id) return "";
-     if ( id.indexOf("rotate")>-1 || id.indexOf("move") > -1 || id.indexOf("scale") > -1 || id.indexOf("toolbar") > -1) return id;
-     return "";
+    const id = this.getDivId(div);
+    if (!id) return "";
+    if (
+      id.indexOf("rotate") > -1 ||
+      id.indexOf("move") > -1 ||
+      id.indexOf("scale") > -1 ||
+      id.indexOf("toolbar") > -1 || 
+      id.indexOf("ruler") > -1
+    )
+      return id;
+
+    return "";
   }
 
   compClickTest2(e: MouseEvent) {
@@ -336,8 +370,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const objContainer = this.objContainer as ObjsContainer;
 
     if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
-        const obj = this.objContainer as ObjsContainer;
-        this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
+      const obj = this.objContainer as ObjsContainer;
+      this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
     }
     objContainer.setPivot(0);
     objContainer.translate(
@@ -353,10 +387,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
   onDocMouseMove = (e: MouseEvent) => {
     if (!this.pageEl) return;
-    // if (!this._downed) {
-    //   this.checkHover();
-    //   return;
-    // }
+
     if (this._state) {
       e.preventDefault();
       e.stopPropagation();
@@ -375,6 +406,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       case MODE_SCALE_WIDTH:
       case MODE_SCALE_SCALE:
         this.scaleMousemove(e);
+        break
+      case MODE_RULER_LINE:
+        this.assistRuler?.rulerLineMouseMove(e);
     }
 
     this._movePreClientY = e.clientY;
@@ -400,7 +434,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (this._mouseDownFlag == "toolbar") {
       return;
     }
-    
+
     if (isClick) {
       this._state = MODE_NONE;
       this.actions.pickComp(this._downClickedCompId);
@@ -420,25 +454,27 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     if (this._state == MODE_ROTATE) {
       this.rotateMouseUp(e);
-    } else if (this._state == MODE_SCALE_WIDTH || this._state == MODE_SCALE_SCALE) {
+    } else if (
+      this._state == MODE_SCALE_WIDTH ||
+      this._state == MODE_SCALE_SCALE
+    ) {
       this.scaleMouseUp(e);
     } else if (this._state == MODE_MOVING) {
       this.moveMouseUp(e, isClick);
+    } else if (this._state == MODE_RULER_LINE) {
+      this.assistRuler?.rulerLineMouseUp(e, isClick)
     }
 
     this._state = MODE_NONE;
     this._downed = false;
     this._moveSelectUpdated = false;
-    this._selCtx?.clearRect(
-      0,
-      0,
-      this._selCanvaseSize.w,
-      this._selCanvaseSize.h
-    );
+
     this.upgateGizmoStyle();
     this.helper.extendStreamCard(this.store.currStreamCardId);
+    this.assistRuler?.draw();
   }
-  moveMouseUp(e: MouseEvent, clicked:boolean) {
+
+  moveMouseUp(e: MouseEvent, clicked: boolean) {
     const history = this.controls.historyCtrl.history;
 
     const obj = this.objContainer as ObjsContainer;
@@ -448,13 +484,12 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const initX = this._initMovePos.x,
       initY = this._initMovePos.y;
 
-      this._initMovePos.x = -1;
-      this._initMovePos.y = -1;
-
-      if (initX == -1 && initY == -1) return;
+    this._initMovePos.x = -1;
+    this._initMovePos.y = -1;
 
+    if (initX == -1 && initY == -1) return;
 
-      obj.setPivot(0);
+    obj.setPivot(0);
 
     history.record({
       undo: () => {
@@ -465,12 +500,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
         currObj.parent.y = initY;
         currObj.parent.updateTransform();
         currObj.updateCompState();
-       
+
         this.upgateGizmoStyle();
         this.helper.extendStreamCard(this.store.currStreamCardId);
       },
       redo: () => {
-      
         const currObj = this.objContainer as ObjsContainer;
         currObj.setPivot(0);
         currObj.parent.x = lastX;
@@ -501,7 +535,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this.actions.pickComp(this.store.currStreamCardId);
     }
   }
-  
+
   upgateGizmoStyle() {
     this.transferStyle.mode = this._state;
     this.assistCtrl?.flashDrawCardDists();
@@ -553,6 +587,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _lastSelRect = [0, 0, 0, 0];
 
   drawSelRect(e: MouseEvent) {
+    this.assistRuler?.draw();
+
     const ctx = this._selCtx;
 
     const dx = this._selDownX;
@@ -561,7 +597,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     const currY = e.clientY - this._selBox.top;
     const x = Math.min(currX, dx),
       y = Math.min(dy, currY);
-    ctx.clearRect(0, 0, this._selCanvaseSize.w, this._selCanvaseSize.h);
 
     ctx.fillStyle = "rgba(232, 139, 0, 0.16)";
     const w = Math.abs(currX - dx);
@@ -578,6 +613,8 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     this._lastSelRect[3] = h;
   }
 
+
+
   checkHover() {
     this.selCanvas;
   }
@@ -733,12 +770,11 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
 
     const history = this.controls.historyCtrl.history;
     this.objContainer?.setPivot(0);
-  
+
     history.record({
       undo: () => {
-       
         const objContainer = this.objContainer as ObjsContainer;
-  
+
         this.objContainer?.setPivot(4);
         this.objContainer?.rotate(initrad);
         this.objContainer?.setPivot(0);
@@ -881,7 +917,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       history.record({
         undo: () => {
           console.log("undo ");
-         
+
           this.objContainer?.setPivot(scaleIndex);
           if (scaleMode == MODE_SCALE_WIDTH) {
             this.objContainer?.scaleSize(preScale.x, preScale.y);

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

@@ -427,7 +427,7 @@ export const editActions = EditorModule.action({
         y = 1;
         break;
     }
-    this.controls.selectCtrl.translate(x, y);
+    this.controls.selectCtrl.translate(x*0.5, y*0.5);
     this.controls.selectCtrl.assistCtrl?.flashDrawCardDists();
   }
 });

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">