source

src/components/Thumbnail.tsx

@@ -0,0 +1,31 @@
+import { css } from "@linaria/core";
+import { Image } from "@queenjs/ui";
+import { defineComponent } from "vue";
+import { number, string } from "vue-types";
+
+const ThumbnailImage = defineComponent({
+  props: {
+    src: string().isRequired,
+    size: number(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      return (
+        <div class={cardStyles} onClick={() => emit("click")}>
+          <Image class="w-full h-full !object-contain" {...props} />
+        </div>
+      );
+    };
+  },
+});
+
+export default ThumbnailImage;
+
+const cardStyles = css`
+  border-radius: 2px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkAgMAAAADIrmmAAAADFBMVEU7OzsAAABAQEA8PDx2WAOfAAAABHRSTlMZAAQKGjtSlQAAAX5JREFUeNrt2bFNQ0EMgOELiIIiJSMwAn1GoOAEBQUjZARGYwn24SRWyLPs81dEzlVf935ZHvM6TnPO1zHG05pjHPZ8H1HSZ5h0DZMuYdJPmDRIJNItpbs1v9Z8XvPA5/p9rP+Pa36Pcdjz//22xsOal+OeJBKJ1FSK+ZYH9WnjupNIJFIOya5Ro+4kEonUStq0uSQSidRNsmsUaC6JRCKlkdw1atSdRCKRckh2jRp1J5FIpFbSps0lkUikbpJdo0BzSSQSKY3krlGj7iQSiZRDsmvUqDuJRCK1kjZtLolEInWT7BoFmksikUhpJHeNGnUnkUikHJJdo0bdSSQSqZW0aXNJJBKpm2TXKNBcEolESiO5a9SoO4lEIuWQ7Bo16k4ikUitpE2bSyKRSN0ku0aB5pJIJFIayV2jRt1JJBIph2TXqFF3EolEaiVt2lwSiUTqJtk1CjSXRCKR0kjuGjXqTiKRSDkku0aNupNIW0v3YdIpTDqHSS9h0m+UdJ5/j+fbnwfuGT4AAAAASUVORK5CYII=");
+  background-size: contain;
+  background-color: rgba(255, 255, 255, 0.8);
+  overflow: hidden;
+`;

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

@@ -3,7 +3,7 @@ import { any, string } from "vue-types";
 
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
-import { Image } from "@queenjs/ui";
+import { Empty, Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { defineUI } from "queenjs";
 
@@ -41,37 +41,41 @@ const Comp = defineUI({
   },
   setup(props) {
     const editor = useEditor();
-    return () => (
-      <Container
-        class="space-y-10px scrollbar"
-        behaviour="copy"
-        group-name="canvas"
-        animation-duration={0}
-        get-child-payload={(index: number) => {
-          return props.components[index].compKey;
-        }}
-      >
-        {props.components.map((item) => {
-          return (
-            <Draggable>
-              <div
-                class="text-center leading-50px bg-dark-50 rounded draggable-item"
-                key={item.compKey}
-                title={item.name}
-                onClick={() =>
-                  editor.actions.clickCompToDesign(item.compKey as ICompKeys)
-                }
-              >
-                <Image
-                  class="w-full rounded pointer-events-none"
-                  src={item.thumbnail}
-                  size={240}
-                />
-              </div>
-            </Draggable>
-          );
-        })}
-      </Container>
-    );
+
+    return () => {
+      if (props.components.length == 0) return <Empty />;
+      return (
+        <Container
+          class="space-y-10px scrollbar"
+          behaviour="copy"
+          group-name="canvas"
+          animation-duration={0}
+          get-child-payload={(index: number) => {
+            return props.components[index].compKey;
+          }}
+        >
+          {props.components.map((item) => {
+            return (
+              <Draggable>
+                <div
+                  class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                  key={item.compKey}
+                  title={item.name}
+                  onClick={() =>
+                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+                  }
+                >
+                  <Image
+                    class="w-full rounded pointer-events-none"
+                    src={item.thumbnail}
+                    size={240}
+                  />
+                </div>
+              </Draggable>
+            );
+          })}
+        </Container>
+      );
+    };
   },
 });

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

@@ -10,7 +10,7 @@ export default defineUI({
   setup() {
     const editor = useEditor();
     const resource = useResource();
-
+    resource.controls.sysSvgListCtrl.hasLimit = true;
     resource.controls.sysSvgListCtrl.loadPage(1);
 
     return () => {

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

@@ -2,9 +2,11 @@ import { defineComponent, onMounted, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { string } from "vue-types";
 
+import Thumbnail from "@/components/Thumbnail";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
-import { Image, Loadmore } from "@queenjs/ui";
+import { Loadmore } from "@queenjs/ui";
+import Empty from "@queenjs/ui/empty";
 
 export const Sources = defineComponent({
   props: {
@@ -55,7 +57,7 @@ export const Sources = defineComponent({
       return (
         <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
           <Container
-            class="grid grid-cols-2 gap-15px"
+            class="grid grid-cols-2 gap-10px"
             behaviour="copy"
             group-name="canvas"
             animation-duration={0}
@@ -68,34 +70,28 @@ export const Sources = defineComponent({
           >
             {dataSource.map((item: any) => (
               <Draggable>
-                <div
+                <Thumbnail
+                  size={240}
                   class="draggable-item"
                   style={{ aspectRatio: 1 }}
                   onClick={() => clickToDesign(item.file.url)}
-                >
-                  {item.fileType == "video" ? (
-                    // <video
-                    //   src={item.file.url}
-                    //   class="w-full h-full object-cover"
-                    // />
-                    <Image class="w-full h-full" src={item.thumbnail} />
-                  ) : (
-                    <Image
-                      class="w-full h-full"
-                      src={item.file.url}
-                      size={240}
-                    />
-                  )}
-                </div>
+                  src={
+                    item.fileType == "video" ? item.thumbnail : item.file.url
+                  }
+                />
               </Draggable>
             ))}
           </Container>
-          <Loadmore
-            class="mt-20px"
-            loading={control.state.loading}
-            canLoad={control.state.canLoadNext}
-            onChange={control.loadNextPage}
-          />
+          {dataSource.length == 0 ? (
+            <Empty />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={control.state.loading}
+              canLoad={control.state.canLoadNext}
+              onChange={control.loadNextPage}
+            />
+          )}
         </div>
       );
     };

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

@@ -1,5 +1,5 @@
 import { useEditor } from "@/modules/editor";
-import { Image, Loadmore } from "@queenjs/ui";
+import { Empty, Image, Loadmore } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 
@@ -46,12 +46,16 @@ export default defineUI({
               );
             })}
           </Container>
-          <Loadmore
-            class="mt-20px"
-            loading={ctrl.state.loading}
-            canLoad={ctrl.state.canLoadNext}
-            onChange={ctrl.loadNextPage}
-          />
+          {dataSource.length == 0 ? (
+            <Empty />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={ctrl.state.loading}
+              canLoad={ctrl.state.canLoadNext}
+              onChange={ctrl.loadNextPage}
+            />
+          )}
         </div>
       );
     };

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

@@ -113,7 +113,7 @@ export default defineUI({
           </div>
           <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
             {currentTab.content && (
-              <div class="my-5px ml-10px space-x-10px">
+              <div class="mt-5px ml-10px space-x-10px">
                 {currentTab.content?.map((item: any, index: number) => (
                   <Button
                     key={index}
@@ -131,7 +131,7 @@ export default defineUI({
             )}
 
             <currComp.component
-              class="flex-1 h-1/1 px-16px mb-10px overflow-y-auto"
+              class="flex-1 h-1/1 px-16px my-10px overflow-y-auto"
               {...currComp.props}
             />
           </div>

src/pages/website/Material2/components/MaterialItem.tsx

@@ -23,7 +23,7 @@ export default defineUI({
 
       return (
         <div class={cx(itemStyles, "relative")}>
-          <View ratio={1.4} class="overflow-hidden card">
+          <View ratio={1.4} class="overflow-hidden card rounded-2px">
             {record.fileType == "video" ? (
               <video src={record.file?.url} class="h-1/1 w-1/1" />
             ) : (
@@ -89,7 +89,7 @@ export default defineUI({
 
 const itemStyles = css`
   .card {
-    background-color: #e1e5e8;
+    background-color: rgba(255, 255, 255, 0.1);
   }
   .orange {
     background-color: rgba(232, 139, 0, 0.5);