update

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

@@ -15,7 +15,7 @@ export const Component = defineComponent({
     const compRef = useCompRef(props.compId);
 
     return () => (
-      <div ref={compRef} style={helper.createStyle(layout)}>
+      <div ref={compRef} style={helper.createStyle(layout)} class="!h-auto">
         <div class="relative">
           {slots.Container?.(
             children.default.map((compId) => {

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

@@ -31,12 +31,18 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
         value: {
           url: require("@/assets/comps/Card11/img_1.jpg"),
         },
+        layout: {
+          size: [200, 400]
+        }
       }),
     img2: () =>
       createCompId("Image", {
         value: {
           url: require("@/assets/comps/Card11/img_shoe.png"),
         },
+        layout: {
+          size: [200, 200]
+        }
       }),
     list: (defaultOpts: any, length = 3) => {
       let i = 0;
@@ -46,6 +52,9 @@ export const { createComp, useCompData, useCreateChild } = createCompHooks({
           value: {
             url: require(`@/assets/comps/Card11/cover_${i}.png`),
           },
+          layout: {
+            size: [60, 60]
+          }
         });
       });
     },

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

@@ -35,7 +35,7 @@ export default defineUI({
                 key={item.compKey}
                 title={item.name}
                 onClick={() =>
-                  editor.actions.addCompToDesign(item.compKey as ICompKeys)
+                  editor.actions.clickCompToDesign(item.compKey as ICompKeys)
                 }
               >
                 <Image

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

@@ -1,7 +1,43 @@
+import { useResource } from "@/modules/resource";
+import { Image, List, Loadmore } from "@queenjs/ui";
+import { Radio } from "ant-design-vue";
 import { defineComponent } from "vue";
 
 export const MySources = defineComponent({
   setup() {
-    return () => <div>我的素材</div>;
+    const resource = useResource();
+    const matListCtrl = resource.controls.materialImageListCtrl;
+    matListCtrl.hasLimit = true;
+    matListCtrl.loadPage(1);
+
+    return () => (
+      <div class="scrollbar">
+        <Radio.Group>
+          <Radio.Button>图片</Radio.Button>
+          <Radio.Button>视频</Radio.Button>
+        </Radio.Group>
+
+        <List data={matListCtrl.state.list} columns={2} gap="20px">
+          {{
+            item(item: any) {
+              return (
+                <div style={{ aspectRatio: 1 }}>
+                  <Image class="w-full h-full" src={item.file.url} size={240} />
+                </div>
+              );
+            },
+            loadmore() {
+              return (
+                <Loadmore
+                  loading={matListCtrl.state.loading}
+                  canLoad={matListCtrl.state.canLoadNext}
+                  onChange={matListCtrl.loadNextPage}
+                />
+              );
+            },
+          }}
+        </List>
+      </div>
+    );
   },
 });

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

@@ -5,6 +5,7 @@ import { useReactive } from "@queenjs/use";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 import CustomComps from "./CustomComps";
+import { MySources } from "./MySources";
 
 export default defineUI({
   setup() {
@@ -14,6 +15,7 @@ export default defineUI({
     const tabs = [
       { label: "模块组件", value: "senior" },
       { label: "我的组件", value: "user" },
+      { label: "我的素材", value: "source" },
     ];
 
     const state = useReactive(() => ({
@@ -57,7 +59,9 @@ export default defineUI({
                   <div
                     class="draggable-item p-4px text-center"
                     onClick={() =>
-                      editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+                      editor.actions.clickCompToDesign(
+                        item.compKey as ICompKeys
+                      )
                     }
                   >
                     <img
@@ -82,10 +86,15 @@ export default defineUI({
               );
             })}
           </div>
-          <CustomComps
-            class="flex-1 -mx-16px p-16px"
-            components={state.currComps}
-          />
+
+          {state.currTabType !== "source" ? (
+            <CustomComps
+              class="flex-1 -mx-16px p-16px"
+              components={state.currComps}
+            />
+          ) : (
+            <MySources class="flex-1 -mx-16px p-16px" />
+          )}
         </div>
       </div>
     );