update ui

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

@@ -1,8 +1,9 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
+import { watch } from "vue";
+import { cx } from "@linaria/core";
 
 export const Component = createUIComp({
   props: {
@@ -11,15 +12,47 @@ export const Component = createUIComp({
   setup(props) {
     const { value } = useCompData(props.compId);
 
+    function OnColumeChange() {
+      const { columns, list } = value;
+      const offset = columns - list.length;
+      if (offset > 0) {
+        Array.from({ length: offset }, () => {
+          list.push(
+            Image.createCompData({
+              url: require("@/assets/comps/Card11/cover_3.png"),
+            })
+          );
+        });
+      } else {
+        list.splice(columns, offset * -1);
+      }
+    }
+
+    watch(
+      () => [value.columns],
+      () => {
+        OnColumeChange();
+      }
+    );
+
     return () => (
       <div class="flex">
-        <div class="flex-1">
-          <Text.Component compId={value.text?.id} />
+        <div class="flex-1 mx-0.3rem leading-2 relative z-10 w-0">
+          <Text.Component compId={value.text?.id} class="mt-0.2rem" />
+          <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">
+            {value.list.map((d: any, i: number) => (
+              <Image.Component
+                key={i}
+                compId={d.id}
+                class="-ml-0.2rem mb-0.2rem w-0.72rem h-0.72rem object-cover rounded-1/2 overflow-hidden"
+              />
+            ))}
+          </div>
         </div>
-        <div class="w-2.5rem relative">
+        <div class="w-2.5rem relative pb-0.58rem mr-0.03rem">
           <Image.Component
             compId={value.img1.id}
-            class="w-1.67rem h-3.06rem object-cover"
+            class="w-2.5rem h-4.17rem object-cover"
           />
           <div class="absolute bottom-0 right-1rem">
             <Image.Component

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

@@ -1,22 +1,52 @@
-import { RegCompType } from "../../../CompController";
+import { InputNumber } from "ant-design-vue";
+import { CompCtrl, RegCompType } from "../../../CompController";
 import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 
 export { Component } from "./component";
 
-export const { createCompData, useCompData } = RegCompType({
-  name: "卡片",
-  thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
-  type: "Cards11",
-},()=>({
-  value: {
-    text: Text.createCompData( `<p><span style="color:#666;font-size:12px;"><strong>皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</strong></span></p><p><span style="color:#666;font-size:12px;"><strong>质量经久耐磨，性价比高， 经典之作用不过时。 潮流耐磨的2023年最新款皮革材料</strong></span></p>`, { layout: {  textAlign: "center",}}),
-    img1: Image.createCompData({ url: require("@/assets/comps/Card11/img_1.jpg")}),
-    img2: Image.createCompData({ url: require("@/assets/comps/Card11/img_shoe.png")}),
+export const { createCompData, useCompData } = RegCompType(
+  {
+    name: "卡片",
+    thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
+    type: "Cards11",
   },
-  layout: {
-    padding: "0.5rem 0",
-  }
-}));
+  () => ({
+    value: {
+      text: Text.createCompData(
+        `<p><span style="color:hsl(0, 0%, 30%);font-size:12px;">皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</span></p><p><span style="color:hsl(0, 0%, 30%);font-size:12px;">质量经久耐磨，性价比高， 经典之作用不过时。 </span></p>`,
+        { layout: { textAlign: "center" } }
+      ),
+      img1: Image.createCompData({
+        url: require("@/assets/comps/Card11/img_1.jpg"),
+      }),
+      img2: Image.createCompData({
+        url: require("@/assets/comps/Card11/img_shoe.png"),
+      }),
+      columns: 3,
+      list: [
+        Image.createCompData({
+          url: require("@/assets/comps/Card11/cover_1.png"),
+        }),
+        Image.createCompData({
+          url: require("@/assets/comps/Card11/cover_2.png"),
+        }),
+        Image.createCompData({
+          url: require("@/assets/comps/Card11/cover_3.png"),
+        }),
+      ],
+    },
+    layout: {
+      padding: "0.2rem 0",
+      margin: "0.3rem 0.35rem",
+    },
+  })
+);
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "列表行数",
+    dataIndex: "value.columns",
+    component: InputNumber,
+  },
+]);

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

@@ -20,12 +20,19 @@ export const Component = createUIComp({
             class="w-6.22rem h-6.22rem object-cover"
           />
         </div>
-        <div>
-          <Text.Component compId={value.text2?.id} />
+        <div
+          class="absolute left-0.9rem bottom-1.35rem min-w-1.5rem p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
+          style={{
+            backgroundColor: value.themeColor,
+          }}
+        >
+          <Text.Component compId={value.text2?.id} class="bg-light-50" />
         </div>
       </div>
     );
   },
 });
 
-const rootStyles = css``;
+const rootStyles = css`
+  position: relative;
+`;

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

@@ -1,32 +1,50 @@
 import { RegCompType } from "../../../CompController";
 import { Image, Text } from "../../../basicUI";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
-export const { createCompData, useCompData } = RegCompType({
-  type: "Cards12",
-  name: "卡片",
-  thumbnail: require("@/assets/comps/Card12/thumbnail.jpg"),
-},()=>({
-  value: {
-    text: Text.createCompData(`<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:20px;"><strong>P190-2#</strong></span></p>`, {
-      layout: {
-        textAlign: "center",
-      },
-    }),
-    text2: Text.createCompData( `<p style="text-align:center;">P190-2#</p>`,{
-      layout: {
-        textAlign: "center",
-      },
-    }),
-    img1: Image.createCompData({
-        url: require("@/assets/comps/Card12/img_1.jpg"),
-    })
+export const { createCompData, useCompData } = RegCompType(
+  {
+    type: "Cards12",
+    name: "卡片",
+    thumbnail: require("@/assets/comps/Card12/thumbnail.jpg"),
   },
-  layout: {
-    padding: "0.5rem 0",
-  }
-}));
+  () => ({
+    value: {
+      themeColor: "#5BA9CB",
+      text: Text.createCompData(
+        `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:20px;"><strong>P190-2#</strong></span></p>`,
+        {
+          layout: {
+            textAlign: "center",
+          },
+        }
+      ),
+      text2: Text.createCompData(
+        `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);">2#</span><br><span style="color:hsl(0, 0%, 0%);">克莱因蓝</span></p>`,
+        {
+          layout: {
+            textAlign: "center",
+          },
+        }
+      ),
+      img1: Image.createCompData({
+        url: require("@/assets/comps/Card12/img_1.jpg"),
+      }),
+    },
+    layout: {
+      // padding: "0.5rem 0",
+      margin: "0.2rem 0.35rem",
+    },
+  })
+);
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "主题色",
+    dataIndex: "value.themeColor",
+    ...createColorOpts(),
+  },
+]);

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

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

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

@@ -5,38 +5,42 @@ import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
-export const { createCompData, useCompData } = RegCompType({
-   name: "卡片",
-  thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
-  type: "Cards15"
-},()=>({
-
-  value: {
-    themeColor: "#6D8D70",
-    title: Text.createCompData('<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>'),
-    
-    colorText: Text.createCompData(`<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>`),
-    
-    text: Text.createCompData(`<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>`, {
-      layout: {
-        textAlign: "center",
-      },
-    }),
-
-    img2: Image.createCompData({
+export const { createCompData, useCompData } = RegCompType(
+  {
+    name: "卡片",
+    thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
+    type: "Cards15",
+  },
+  () => ({
+    value: {
+      themeColor: "#6D8D70",
+      title: Text.createCompData(
+        '<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>'
+      ),
+      colorText: Text.createCompData(
+        `<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>`
+      ),
+      text: Text.createCompData(
+        `<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>`,
+        {
+          layout: {
+            textAlign: "center",
+          },
+        }
+      ),
+      img2: Image.createCompData({
         url: require("@/assets/comps/Card15/img_shoe.png"),
-    }),
-    
-    img1: Image.createCompData({
+      }),
+      img1: Image.createCompData({
         url: require("@/assets/comps/Card15/img_1.jpg"),
-      }
-    ),
-  },
-  layout: {
-    // padding: "0.5rem 0",
-    margin: "0.2rem 0.35rem",
-  },
-}));
+      }),
+    },
+    layout: {
+      // padding: "0.5rem 0",
+      margin: "0.5rem 0.35rem",
+    },
+  })
+);
 
 export const Form = createAttrsForm([
   {