Przeglądaj źródła

添加组件封面

liwei 1 rok temu
rodzic
commit
9c1bac24a5

BIN
src/assets/thumbnails/1.png


+ 1 - 0
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,
 });
 

+ 2 - 0
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: "请输入内容",
 });
 

+ 1 - 0
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],

+ 28 - 0
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>
+    );
+  },
+});

+ 27 - 0
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: ["宽", "高"],
+    },
+  },
+]);

+ 1 - 0
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,

+ 2 - 0
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:

+ 2 - 0
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",
   },

+ 1 - 0
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;

+ 2 - 0
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";
+

+ 7 - 6
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>
               );
             })}