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

src/modules/editor/components/Canvas/index.tsx

@@ -1,5 +1,6 @@
 import { defineUI } from "queenjs";
 import { useEditor } from "../..";
+import ErrorComp from "../CompUI/placeHoder";
 
 export default defineUI({
   setup() {
@@ -7,8 +8,8 @@ export default defineUI({
     return () => (
       <div>
         {store.designData.content.map((d) => {
-          const Comp: any = config.compUI[d.compKey].Component;
-          return <Comp key={d.id} compId={d.id} />;
+          const Comp: any = config.compUI[d.compKey]?.Component;
+          return Comp && <Comp key={d.id} compId={d.id} />;
         })}
       </div>
     );

src/modules/editor/components/CompUI/basicUI/Image/index.ts

@@ -6,6 +6,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "图片",
+  thumbnail: Dict_Imgs.Default,
   value: Dict_Imgs.Default,
 });
 

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -1,3 +1,4 @@
+import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions } from "../../defines/createOptions";
 
@@ -5,6 +6,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "文本",
+  thumbnail: Dict_Imgs.Default,
   value: "请输入内容",
 });
 

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

@@ -7,6 +7,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片",
+  thumbnail: Dict_Imgs.Default,
   value: {
     img: Dict_Imgs.Default,
     imgSize: [240, 240],

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

@@ -0,0 +1,28 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Image, Text } from "../../..";
+import { useEditor } from "../../../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { designToNaturalSize } = useEditor().helper;
+    const { value } = useCompData(props.compId);
+
+    return () => (
+      <div class="flex">
+        <Image.Component
+          style={{
+            width: designToNaturalSize(value.imgSize[0]),
+            height: designToNaturalSize(value.imgSize[1]),
+          }}
+          v-model={[value.img, "value"]}
+        />
+        <Text.Component class="flex-1 ml-0.1rem" v-model={[value.desc, "value"]} />
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,27 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+import { GroupNumber } from "../../../formItems/GroupNumber";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片2",
+  thumbnail: require("@/assets/thumbnails/1.png"),
+  value: {
+    img: Dict_Imgs.Default,
+    imgSize: [240, 240],
+    desc: "描述",
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片尺寸",
+    dataIndex: "value.imgSize",
+    component: GroupNumber,
+    props: {
+      labels: ["宽", "高"],
+    },
+  },
+]);

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

@@ -7,6 +7,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片列表",
+  thumbnail: Dict_Imgs.Default,
   value: {
     gap: 10,
     columns: 3,

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

@@ -1,3 +1,4 @@
+import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions } from "../../defines/createOptions";
 
@@ -5,6 +6,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "封面",
+  thumbnail: Dict_Imgs.Default,
   value: {},
   background: {
     image:

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

@@ -1,3 +1,4 @@
+import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createOptions } from "../../../defines/createOptions";
 import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
@@ -6,6 +7,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "标题",
+  thumbnail: Dict_Imgs.Default,
   value: {
     themeColor: "#666666",
   },

src/modules/editor/components/CompUI/defines/createOptions.ts

@@ -4,6 +4,7 @@ import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
 
 type IOptions<T, C> = {
   name: string;
+  thumbnail: string;
   value: T;
   layout?: Layout;
   background?: Background;

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

@@ -4,3 +4,5 @@ export * as Card from "./customUI/Cards/Card";
 export * as CardList from "./customUI/Cards/CardList";
 export * as Cover from "./customUI/Cover";
 export * as Title1 from "./customUI/Titles/Title1";
+export * as Card2 from "./customUI/Cards/Card2";
+

src/modules/editor/components/CompUI/placeHoder.tsx

@@ -0,0 +1,7 @@
+import { defineComponent } from "vue";
+
+export default defineComponent({
+     setup() {
+        return ()=><div>组件已被删除</div>
+     }
+})

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

@@ -5,6 +5,7 @@ import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import Canvas from "../../Canvas";
+import ErrorComp from "../../CompUI/placeHoder";
 
 export default defineUI({
   setup() {
@@ -26,12 +27,12 @@ export default defineUI({
             non-drag-area-selector={".drag-disable"}
           >
             {store.designData.content.map((d) => {
-              const Comp: any = config.compUI[d.compKey]?.Component;
-              return Comp ? (
+              const Comp: any = config.compUI[d.compKey]?.Component || ErrorComp;
+              return (
                 <Draggable key={d.id}>
                   <Comp compId={d.id} />
                 </Draggable>
-              ) : undefined;
+              );
             })}
           </Container>
         ) : (

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

@@ -8,24 +8,25 @@ export default defineUI({
     const editor = useEditor();
 
     return () => (
-      <div>
+      <div class="h-full flex flex-col">
         <div class="p-16px border-bottom !border-2px">资源中心</div>
-        <div class="m-16px">
-          <Radio.Group>
+        <div class="my-16px flex-1 flex flex-col h-0">
+          <Radio.Group  class="!mx-16px">
             <Radio.Button>模板</Radio.Button>
             <Radio.Button>组件</Radio.Button>
           </Radio.Group>
-          <div class="py-16px space-y-10px">
+          <div class="p-16px space-y-10px flex-1 scrollbar ">
             {Object.entries(editor.config.compUI).map(([compKey, uiOpt], i) => {
               return (
                 <div
-                  class="text-center leading-50px h-50px bg-dark-50 rounded"
+                  class="text-center leading-50px bg-dark-50 rounded"
                   key={i}
                   onClick={() =>
                     editor.actions.addCompToDesign(compKey as ICompKeys)
                   }
                 >
-                  {uiOpt.options.name}
+                  <img class="w-full rounded" src={uiOpt.options.thumbnail} alt="封面图" />
+                  {/* {uiOpt.options.name} */}
                 </div>
               );
             })}