Merge branch 'master' of http://124.70.149.18:10880/lianghj/queenshow

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

@@ -34,7 +34,7 @@ export const Component = createUIComp({
         Alignment,
       ],
       fontSize: {
-        options: [12, 14, 16, 18, 20, 24, 28, 32, 38,42, 46],
+        options: [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60],
       },
       toolbar: {
         items: [
@@ -89,6 +89,9 @@ const textStyle = css`
   p {
     margin: 0;
   }
+  &.ck.ck-editor__editable_inline[dir="ltr"] {
+    text-align: inherit;
+  }
   &.ck.ck-editor__editable_inline {
     > :last-child,
     > :first-child {

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -132,4 +132,8 @@ const viewStyle = css`
   .view_inside {
     position: relative;
   }
+
+  .view_content {
+    overflow: hidden;
+  }
 `;

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

@@ -0,0 +1,22 @@
+import { css } from "@linaria/core";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={rootStyles}>
+        <Text.Component compId={children.text?.id} />
+      </div>
+    );
+  },
+});
+
+const rootStyles = css``;

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

@@ -0,0 +1,27 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  layout: {
+    padding: "0.5rem 0",
+  },
+  children: {
+    text: {
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
+      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
+      质量经久耐磨，性价比高，
+      经典之作用不过时。
+      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      layout: {
+        textAlign: "center",
+      },
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -0,0 +1,22 @@
+import { css } from "@linaria/core";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={rootStyles}>
+        <Text.Component compId={children.text?.id} />
+      </div>
+    );
+  },
+});
+
+const rootStyles = css``;

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

@@ -0,0 +1,27 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  layout: {
+    padding: "0.5rem 0",
+  },
+  children: {
+    text: {
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
+      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
+      质量经久耐磨，性价比高，
+      经典之作用不过时。
+      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      layout: {
+        textAlign: "center",
+      },
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -0,0 +1,22 @@
+import { css } from "@linaria/core";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={rootStyles}>
+        <Text.Component compId={children.text?.id} />
+      </div>
+    );
+  },
+});
+
+const rootStyles = css``;

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

@@ -0,0 +1,27 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  layout: {
+    padding: "0.5rem 0",
+  },
+  children: {
+    text: {
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
+      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
+      质量经久耐磨，性价比高，
+      经典之作用不过时。
+      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      layout: {
+        textAlign: "center",
+      },
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -0,0 +1,22 @@
+import { css } from "@linaria/core";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={rootStyles}>
+        <Text.Component compId={children.text?.id} />
+      </div>
+    );
+  },
+});
+
+const rootStyles = css``;

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

@@ -0,0 +1,27 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  layout: {
+    padding: "0.5rem 0",
+  },
+  children: {
+    text: {
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
+      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
+      质量经久耐磨，性价比高，
+      经典之作用不过时。
+      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      layout: {
+        textAlign: "center",
+      },
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -0,0 +1,22 @@
+import { css } from "@linaria/core";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={rootStyles}>
+        <Text.Component compId={children.text?.id} />
+      </div>
+    );
+  },
+});
+
+const rootStyles = css``;

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

@@ -0,0 +1,27 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  layout: {
+    padding: "0.5rem 0",
+  },
+  children: {
+    text: {
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
+      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
+      质量经久耐磨，性价比高，
+      经典之作用不过时。
+      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      layout: {
+        textAlign: "center",
+      },
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -0,0 +1,41 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Image, Text } from "../../../basicUI";
+import { useEditor } from "../../../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+import { css } from "@linaria/core";
+import * as Title3 from "../../Titles/Title3";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { designToNaturalSize } = useEditor().helper;
+    const { value, children } = useCompData(props.compId);
+
+    return () => (
+    <div>
+      <Title3.Component   compId={children.title.id} />
+      <div class="flex">
+        <div class="">
+            <Image.Component class="overflow-hidden"
+                        style={{
+                            width: designToNaturalSize(250),
+                            height: designToNaturalSize(278),
+                        }}
+                        compId={children.bgImg.id}
+            />
+        </div>
+        <div class="flex flex-col justify-center" style={{marginLeft: designToNaturalSize(49)}}>
+           <Text.Component compId={children.text1.id} />
+        </div>
+        </div>
+        </div>
+    );
+  },
+});
+const upStyle = css`
+  position:relative;
+  
+`

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

@@ -0,0 +1,51 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+import { GroupNumber } from "../../../formItems/GroupNumber";
+
+export { Component } from "./component";
+
+const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685592084017_Wu5DW5_thumbnail.png"
+export const { options, useCompData } = createOptions({
+  name: "卡片4",
+  thumbnail:thumbnail,
+  value: {
+  },
+  layout: {
+    padding: "0.2rem",
+  },
+  children: {
+    bgImg: {
+      compKey: "Image",
+      value: { url: thumbnail, x: 27.50, y:-6.50, s: 3.50 },
+    },
+    title: {
+        compKey: "Title3",
+        layout: {
+            margin: "0 0 0.4rem 0"
+        },
+        children: {
+            title: {
+              value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
+            },
+            subtitle: {
+                value: `<p style="text-align:center;">/ Product Details /</p>`,
+            },
+        },
+    },
+    text1: {
+        compKey: "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>`,
+    }
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片尺寸",
+    dataIndex: "value.imgSize",
+    component: GroupNumber,
+    props: {
+      labels: ["宽", "高"],
+    },
+  },
+]);

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

@@ -0,0 +1,35 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Image, Text } from "../../../basicUI";
+import { useEditor } from "../../../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+import { css } from "@linaria/core";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { designToNaturalSize } = useEditor().helper;
+    const { value, children } = useCompData(props.compId);
+
+    return () => (
+        <div class="relative w-full">
+            <div class="!absolute w-full h-full flex justify-center items-center">
+                <Text.Component class="!absolute w-full" compId={children.text1.id} />
+            </div>
+            <div class="flex justify-center">
+                <Image.Component 
+                            style={{
+                                width: designToNaturalSize(368),
+                                height: designToNaturalSize(275),
+                            }}
+                            compId={children.bgImg.id}  />
+            </div>
+        </div>
+    );
+  },
+});
+const upStyle = css`
+  position:relative;
+`

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

@@ -0,0 +1,40 @@
+
+
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+import { GroupNumber } from "../../../formItems/GroupNumber";
+
+export { Component } from "./component";
+
+const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685607488598_3mmBXh_thumbnail.png"
+
+export const { options, useCompData } = createOptions({
+  name: "卡片5",
+  thumbnail:thumbnail,
+  value: {
+  },
+  layout: {
+
+  },
+  children: {
+    bgImg: {
+      compKey: "Image",
+      value: { url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685609522134_nGPo9k_2.png" },
+    },
+    text1: {
+        compKey: "Text",
+        value:  `<p style="text-align:center;"><span style="color:hsl(0,0%,90%);font-size:52px;">F A SH I O N</span></p>`,
+    }
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片尺寸",
+    dataIndex: "value.imgSize",
+    component: GroupNumber,
+    props: {
+      labels: ["宽", "高"],
+    },
+  },
+]);

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

@@ -22,17 +22,17 @@ export const Component = createUIComp({
             <div class="ml-0.64rem">
               <Image.Component
                 compId={children.img1.id}
-                class="w-4.5rem h-10.22rem bg-gray-500 object-cover"
+                class="w-4.5rem h-10.22rem object-cover"
               />
             </div>
             <div class="ml-0.3rem flex flex-col justify-between">
               <Image.Component
                 compId={children.img2.id}
-                class="w-1.67rem h-3.06rem bg-gray-500 object-cover"
+                class="w-1.67rem h-3.06rem object-cover"
               />
               <Image.Component
                 compId={children.img3.id}
-                class="w-1.67rem h-2.08rem bg-gray-500 object-cover"
+                class="w-1.67rem h-2.08rem object-cover"
               />
             </div>
           </div>

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

@@ -9,21 +9,28 @@ export const { options, useCompData } = createOptions({
   value: {},
   children: {
     img1: {
+      compKey: "Image",
       value: {
         url: require("@/assets/comps/Cover2/img_1.png"),
+        x: 0,
+        y: 0,
+        s: 1,
       },
     },
     img2: {
+      compKey: "Image",
       value: {
         url: require("@/assets/comps/Cover2/img_2.jpg"),
       },
     },
     img3: {
+      compKey: "Image",
       value: {
         url: require("@/assets/comps/Cover2/img_3.jpg"),
       },
     },
     title: {
+      compKey: "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>`,
     },
     text1: {

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

@@ -0,0 +1,86 @@
+import { useEditor } from "@/modules/editor";
+import { css, cx } from "@linaria/core";
+import { watch } from "vue";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { helper } = useEditor();
+    const { value } = useCompData(props.compId);
+
+    watch(
+      () => [value.columns],
+      () => {
+        const { columns, list } = value;
+        const offset = columns - list.length;
+        if (offset > 0) {
+          Array.from({ length: offset }, () => {
+            list.push({ label: "标题", content: "内容" });
+          });
+        } else {
+          list.splice(columns, offset * -1);
+        }
+      }
+    );
+
+    return () => (
+      <div class={rootStyles}>
+        {value.list.map((d) => (
+          <div
+            class="flex items-center text-primary px-0.1rem"
+            style={{
+              margin: helper.designToNaturalSize(value.gap),
+            }}
+          >
+            <div
+              class={cx(
+                "py-0.08rem px-0.1rem",
+                value.showBackground ? "label text-white" : "text-secondary"
+              )}
+              style={{
+                width: helper.designToNaturalSize(value.width),
+              }}
+            >
+              <Text.Component
+                v-model={[d.label, "value"]}
+                class="text text-center"
+              />
+            </div>
+            <Text.Component
+              v-model={[d.content, "value"]}
+              class="flex-1 ml-0.3rem"
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+});
+
+const rootStyles = css`
+  .label {
+    position: relative;
+    z-index: 1;
+    .text {
+      position: relative;
+      z-index: 1;
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 4%;
+      width: 92%;
+      height: 100%;
+      background-color: #333;
+      transform: skewX(347deg);
+      z-index: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,65 @@
+import { InputNumber } from "ant-design-vue";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "文字",
+  thumbnail: require("./thumbnail.jpg"),
+  layout: { margin: "0.2rem 0.3rem", padding: " 0 0.2rem" },
+  value: {
+    gap: 20,
+    columns: 5,
+    width: 156,
+    showBackground: true,
+    list: [
+      {
+        label: "产品名称",
+        content: "P190（注塑）",
+      },
+      {
+        label: "产品规格",
+        content: "52英寸",
+      },
+      {
+        label: "产品厚度",
+        content: "1.0mm+0.05mm",
+      },
+      {
+        label: "产品底材",
+        content: "产品底材",
+      },
+      {
+        label: "产品用途",
+        content: "凉鞋、跟鞋、高更鞋、时尚休闲鞋等",
+      },
+    ],
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "列表行数",
+    dataIndex: "value.columns",
+    component: InputNumber,
+  },
+  {
+    label: "行间距",
+    dataIndex: "value.gap",
+    component: InputNumber,
+  },
+  {
+    label: "标题宽度",
+    dataIndex: "value.width",
+    component: InputNumber,
+  },
+  {
+    label: "标题背景色",
+    dataIndex: "value.showBackground",
+    component: "Switch",
+    props: {
+      size: "small",
+    },
+  },
+]);

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

@@ -24,27 +24,4 @@ export const Component = createUIComp({
       </div>
     );
   },
-});
-
-const border = css`
-  position: relative;
-  color: #999;
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: 50%;
-    width: 100%;
-    height: 1px;
-    background-color: currentColor;
-  }
-  &.left {
-    &::after {
-      left: 0.06rem;
-    }
-  }
-  &.right {
-    &::after {
-      left: -0.06rem;
-    }
-  }
-`;
+});

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

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