update

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

@@ -10,11 +10,12 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { designToNaturalSize } = useEditor().helper;
-    const { value , children} = useCompData(props.compId);
-  
+    const { value, children } = useCompData(props.compId);
+
     return () => (
       <div class="flex">
         <Image.Component
+          class="overflow-hidden"
           style={{
             width: designToNaturalSize(value.imgSize[0]),
             height: designToNaturalSize(value.imgSize[1]),

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

@@ -28,7 +28,7 @@ export const Component = createUIComp({
     return () => {
       return (
         <div class="flex">
-          <div class="flex-1 mx-0.3rem leading-2 relative z-10 w-0">
+          <div class="flex-1 mx-0.3rem leading-loose relative z-10 w-0">
             <Text.Component compId={children.text} class="mt-0.2rem" />
             <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">
               {children.list.map((d: any, i: number) => (

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

@@ -12,7 +12,7 @@ export const Component = createUIComp({
     const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class={cx("relative text-black", rootStyles)}>
+      <div class={cx("relative text-black overflow-hidden", rootStyles)}>
         <div class="flex justify-end items-center relative mb-0.4rem">
           <div class="absolute right-0 top-1/2 h-3/2 w-5rem border-dark-300 border-1 border-solid border-r-0 border-b-0"></div>
           <Text.Component

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

@@ -11,7 +11,7 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex text-black">
+      <div class="flex text-black overflow-hidden">
         <div class="ml-0.15rem mr-0.2rem">
           <Image.Component
             compId={children.img1}

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

@@ -38,6 +38,7 @@ export const Component = createUIComp({
         {children.list.map((d, i) => (
           <div key={i}>
             <Image.Component
+              class="overflow-hidden"
               style={{ height: helper.designToNaturalSize(value.imgHeight) }}
               compId={d.img}
             />

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

@@ -1,8 +1,8 @@
 import { useEditor } from "@/modules/editor";
-import { css, cx } from "@linaria/core";
+import { css } from "@linaria/core";
 import { watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+import { useCompData, useCreateChild } from ".";
 import { Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
@@ -12,17 +12,17 @@ export const Component = createUIComp({
   },
   setup(props) {
     const { helper } = useEditor();
-    const { value } = useCompData(props.compId);
+    const { value, children } = useCompData(props.compId);
+    const createList = useCreateChild("list", props.compId);
 
     watch(
       () => [value.columns],
       () => {
-        const { columns, list } = value;
+        const { columns } = value;
+        const { list } = children;
         const offset = columns - list.length;
         if (offset > 0) {
-          Array.from({ length: offset }, () => {
-            list.push({ label: "标题", content: "内容" });
-          });
+          children.list.push(...createList(offset));
         } else {
           list.splice(columns, offset * -1);
         }
@@ -31,31 +31,25 @@ export const Component = createUIComp({
 
     return () => (
       <div class={rootStyles}>
-        {value.list.map((d) => (
+        {children.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"
-              )}
+            <Text.Component
+              compId={d.label}
+              class={
+                value.showBackground
+                  ? "text relative z-1 py-0.08rem px-0.1rem 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"
             />
+            <Text.Component compId={d.content} class="flex-1 ml-0.3rem" />
           </div>
         ))}
       </div>
@@ -64,13 +58,7 @@ export const Component = createUIComp({
 });
 
 const rootStyles = css`
-  .label {
-    position: relative;
-    z-index: 1;
-    .text {
-      position: relative;
-      z-index: 1;
-    }
+  .text {
     &::before {
       content: "";
       position: absolute;
@@ -79,8 +67,8 @@ const rootStyles = css`
       width: 92%;
       height: 100%;
       background-color: #333;
-      transform: skewX(347deg);
-      z-index: 0;
+      transform: skewX(345deg);
+      z-index: -1;
     }
   }
 `;

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

@@ -1,43 +1,59 @@
 import { InputNumber } from "ant-design-vue";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createCompHooks } from "../../../defines/createCompHooks";
+import { createCompId } from "../../../defines/createCompId";
 
 export { Component } from "./component";
 
+const defaultData = [
+  {
+    label: "产品名称",
+    content: "P190（注塑）",
+  },
+  {
+    label: "产品规格",
+    content: "52英寸",
+  },
+  {
+    label: "产品厚度",
+    content: "1.0mm+0.05mm",
+  },
+  {
+    label: "产品底材",
+    content: "产品底材",
+  },
+  {
+    label: "产品用途",
+    content: "凉鞋、跟鞋、高更鞋、时尚休闲鞋等",
+  },
+];
+
 export const options = {
   name: "文字",
   thumbnail: require("./thumbnail.jpg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  layout: { margin: "0.2rem 0.3rem", padding: " 0 0.2rem" },
+export const { createComp, useCompData, useCreateChild } = createCompHooks({
+  layout: {
+    padding: " 0 0.2rem",
+  },
   value: {
-    gap: 20,
     columns: 5,
+    gap: 20,
     width: 156,
     showBackground: true,
-    list: [
-      {
-        label: "产品名称",
-        content: "P190（注塑）",
-      },
-      {
-        label: "产品规格",
-        content: "52英寸",
-      },
-      {
-        label: "产品厚度",
-        content: "1.0mm+0.05mm",
-      },
-      {
-        label: "产品底材",
-        content: "产品底材",
-      },
-      {
-        label: "产品用途",
-        content: "凉鞋、跟鞋、高更鞋、时尚休闲鞋等",
-      },
-    ],
+  },
+  children: {
+    list: (defaultOpts: any, length = defaultData.length) => {
+      let i = -1;
+      return Array.from({ length }, () => {
+        i = i + 1;
+        return {
+          label: createCompId("Text", { value: defaultData[i]?.label }),
+          content: createCompId("Text", { value: defaultData[i]?.content }),
+        };
+      });
+    },
   },
 });
 

src/pages/website/CreateMat/components/OutputTemplateItem.tsx

@@ -1,9 +1,10 @@
 import { css, cx } from "@linaria/core";
 import { Image, View } from "@queenjs/ui";
 import { Checkbox, Radio, RadioChangeEvent } from "ant-design-vue";
-import { defineUI } from "queenjs";
+import { defineUI, queenApi } from "queenjs";
 import { reactive } from "vue";
 import { any, bool } from "vue-types";
+import PreviewModal from "../../components/PreviewModal";
 
 const options = [
   { label: "1倍", value: 1 },
@@ -26,28 +27,45 @@ export default defineUI({
       emit("change", state.qos);
     };
 
+    const showModal = () => {
+      queenApi.dialog(
+        <PreviewModal
+          data={{ url: props.record?.thumbnailUrl, fileType: "image" }}
+        />,
+        {
+          title: "预览渲染模板",
+          width: "1000px",
+        }
+      );
+    };
+
     return () => {
       const { active, record } = props;
-      //   console.log("record: ", record);
+
       return (
-        <div>
+        <div class="cursor-pointer">
           <View
             ratio={1.4}
             onClick={() => emit("select")}
             class={cx(
               itemStyles,
-              "overflow-hidden",
-              "relative",
+              "relative overflow-hidden group",
               active && "active"
             )}
           >
             {active && (
-              <Checkbox
-                checked
-                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
-              />
+              <Checkbox checked class="!-mt-0.2em absolute top-0 left-0 z-3" />
             )}
             <Image class="h-1/1 w-1/1" src={record?.thumbnailUrl} />
+            <span
+              class="absolute left-1/2 top-1/2 z-3 transform -translate-x-1/2 -translate-y-1/2 rounded-1/2 w-56px leading-56px text-center bg-primary transition-all opacity-0 group-hover:opacity-100 hover:(bg-opacity-50)"
+              onClick={(e) => {
+                e.stopPropagation();
+                showModal();
+              }}
+            >
+              预览
+            </span>
           </View>
           <div>
             <div class="py-8px">

src/pages/website/CreateMat/components/OutputTemplateModal.tsx

@@ -12,18 +12,19 @@ export default defineComponent({
     const route = useRoute();
 
     const state = reactive({
-      list: [] as { id: string; qos: 1 }[],
+      images: [] as { id: string; qos: 1 }[],
+      videos: [] as { id: string; qos: 1 }[],
     }) as any;
 
     const submit = async () => {
-      if (state.list.length == 0) {
+      if (state.images.length == 0 && state.videos.length == 0) {
         queenApi.messageError("请选择至少一个模板");
         return;
       }
       const isOk = await resource.actions.submitRender(
         route.params.id as string,
-        state.list,
-        []
+        state.images,
+        state.videos
       );
       if (isOk) {
         modal.submit(true);
@@ -31,35 +32,36 @@ export default defineComponent({
     };
 
     return () => {
+      const { sourceDetail } = resource.store;
+      const isEmpty =
+        sourceDetail.images?.length == 0 && sourceDetail.videos?.length == 0;
+
       return (
         <div>
-          {resource.store.sourceDetail.images.length == 0 && (
-            <Empty description="暂无数据" />
-          )}
+          {isEmpty && <Empty description="暂无数据" />}
           <div class="grid grid-cols-4 gap-10px">
-            {resource.store.sourceDetail.images.map((record: any) => (
+            {sourceDetail.images.map((record: any) => (
               <OutputTemplateItem
                 record={record}
-                class="cursor-pointer"
-                active={!!state.list.find((v: any) => v.id == record.id)}
+                active={!!state.images.find((v: any) => v.id == record.id)}
                 onChange={(qos) => {
-                  const selected = state.list.find(
+                  const selected = state.images.find(
                     (v: any) => v.id == record.id
                   );
                   selected.qos = qos;
                 }}
                 onSelect={() => {
-                  const selected = !!state.list.find(
+                  const selected = !!state.images.find(
                     (v: any) => v.id == record.id
                   );
                   if (selected) {
-                    const index = state.list.findIndex(
+                    const index = state.images.findIndex(
                       (d: any) => d.id == record.id
                     );
-                    state.list.splice(index);
+                    state.images.splice(index);
                     return;
                   }
-                  state.list.push({ id: record.id, qos: 1 });
+                  state.images.push({ id: record.id, qos: 1 });
                 }}
               />
             ))}

src/pages/website/Material2/controller.tsx

@@ -1,6 +1,6 @@
 import SelectListItemModal from "./components/SelectListItemModal";
 import { MaterialController } from "../../../modules/resource/controllers/MaterialController";
-import PreviewModal from "./components/PreviewModal";
+import PreviewModal from "../components/PreviewModal";
 
 export default function createController(resource:any, isSelectModel:boolean, selectType :string) {
     const {controls, actions} = resource;

src/pages/website/Material2/components/PreviewModal.tsx → src/pages/website/components/PreviewModal.tsx

@@ -13,7 +13,7 @@ export default defineUI({
     return () => {
       const { data } = props;
       return (
-        <div class="text-center min-h-400px">
+        <div class="min-h-400px text-center">
           {data.fileType == "image" && (
             <Image
               size={1000}

src/styles/global.less

@@ -1,5 +1,9 @@
 @import "./theme";
 
+:root {
+  color-scheme: dark;
+}
+
 html,
 body {
   color: @inf-text-color;

src/styles/theme-antd.js

@@ -8,5 +8,6 @@ module.exports = Object.assign(
     "primary-color": "#E88B00",
     "component-background": "#ffffff",
     "tree-title-height": "32px",
+    "modal-content-bg": "#262626",
   }
 );

windi.config.js

@@ -2,14 +2,19 @@ import { defineConfig } from "@vue/cli-service";
 
 export default defineConfig({
   theme: {
-    textColor: {
-      primary: "#333",
-      secondary: "#666",
-      gray: "#999",
-      white: "#fff",
-      danger: "#e3342f",
-      orange: "#e88b00",
-      black: "#000",
+    extend: {
+      colors: {
+        primary: "#e88b00",
+      },
+      textColor: {
+        primary: "#333",
+        secondary: "#666",
+        gray: "#999",
+        white: "#fff",
+        danger: "#e3342f",
+        orange: "#e88b00",
+        black: "#000",
+      },
     },
   },
 });