update

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

@@ -1,43 +1,99 @@
-import { useResource } from "@/modules/resource";
+import { useEditor } from "@/modules/editor";
+import { initResource, useResource } from "@/modules/resource";
+import { css } from "@linaria/core";
 import { Image, List, Loadmore } from "@queenjs/ui";
 import { Radio } from "ant-design-vue";
-import { defineComponent } from "vue";
+import { defineComponent, reactive } from "vue";
 
 export const MySources = defineComponent({
   setup() {
+    const editor = useEditor();
     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>
-    );
+    const state = reactive({
+      sourceType: "Image" as "Image" | "Video",
+    });
+
+    function getCurrCtrl() {
+      return resource.controls[
+        state.sourceType === "Image"
+          ? "materialImageListCtrl"
+          : "materialVideoListCtrl"
+      ];
+    }
+
+    function switchSource(v: "Image" | "Video") {
+      state.sourceType = v;
+      const ctrl = getCurrCtrl();
+      ctrl.hasLimit = true;
+      ctrl.loadPage(1);
+    }
+
+    function clickToDesign(url: string) {
+      editor.actions.clickCompToDesign(state.sourceType, (comp) => {
+        comp.value.url = url;
+      });
+    }
+
+    switchSource("Image");
+
+    return () => {
+      const control =
+        resource.controls[
+          state.sourceType === "Image"
+            ? "materialImageListCtrl"
+            : "materialVideoListCtrl"
+        ];
+      return (
+        <div class="space-y-20px -mt-10px">
+          <Radio.Group
+            class={radioCls}
+            value={state.sourceType}
+            size="small"
+            onChange={(e) => switchSource(e.target.value)}
+          >
+            <Radio.Button value="Image">图片</Radio.Button>
+            <Radio.Button value="Video">视频</Radio.Button>
+          </Radio.Group>
+
+          <List data={control.state.list} columns={2} gap="20px">
+            {{
+              item(item: any) {
+                return (
+                  <div
+                    style={{ aspectRatio: 1 }}
+                    onClick={() => clickToDesign(item.file.url)}
+                  >
+                    <Image
+                      class="w-full h-full"
+                      src={item.file.url}
+                      size={240}
+                    />
+                  </div>
+                );
+              },
+              loadmore() {
+                return (
+                  <Loadmore
+                    class="mt-20px"
+                    loading={control.state.loading}
+                    canLoad={control.state.canLoadNext}
+                    onChange={control.loadNextPage}
+                  />
+                );
+              },
+            }}
+          </List>
+        </div>
+      );
+    };
   },
 });
+
+const radioCls = css`
+  display: flex;
+  > label {
+    flex: 1;
+    width: 0;
+    text-align: center;
+  }
+`;

src/modules/editor/module/actions/edit.ts

@@ -22,12 +22,13 @@ export const editActions = EditorModule.action({
 
   },
   // 通过点击添加组件到画布
-  async clickCompToDesign(compKey: ICompKeys) {
+  async clickCompToDesign(compKey: ICompKeys, cb?: (comp: DesignComp) => void) {
 
     const bound = this.helper.getCardCompBound(this.store.currCompId);
 
     await this.actions.addCompToDesign(compKey);
     const { currComp } = this.store;
+    cb?.(currComp);
 
     //添加组件到当前选中的组件下面
     const obj = new CompObject(currComp);