Browse Source

添加上传素材按钮

liwei 1 year ago
parent
commit
7477deed11
1 changed files with 67 additions and 50 deletions
  1. 67 50
      src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

+ 67 - 50
src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

@@ -8,6 +8,7 @@ import { useResource } from "@/modules/resource";
 import { Loadmore } from "@queenjs/ui";
 import { queenApi } from "queenjs";
 import SourceItem from "./SourceItem";
+import { Button } from "ant-design-vue";
 
 export const Sources = defineComponent({
   props: {
@@ -57,57 +58,73 @@ export const Sources = defineComponent({
       const { sourceType } = props;
 
       return (
-        <div>
-          <Container
-            class="grid grid-cols-2 gap-10px"
-            behaviour="copy"
-            group-name="canvas"
-            animation-duration={0}
-            get-child-payload={(index: number) => {
-              return {
-                type: props.sourceType,
-                data: dataSource[index],
-              };
-            }}
-          >
-            {dataSource.map((item: any) => (
-              <Draggable>
-                <SourceItem
-                  class="draggable-item cursor-pointer"
-                  record={item}
-                  isVideo={sourceType == "Video"}
-                  tagable={props.sourceFrom == "user"}
-                  onClick={() => clickToDesign(item.file.url)}
-                  onMenu={async (name) => {
-                    console.log(name);
-                    if (name == "delete") {
-                      await resource.actions.deleteMaterial(item);
-                      control.fresh();
-                      queenApi.messageSuccess("删除成功!");
-                      return;
-                    }
+        <div class={[ props.sourceFrom == "user" && "flex flex-col !px-0"]}>
+          {
+            props.sourceFrom == "user" &&   <Button
+                class="mt-12px mb-12px"
+                block
+                type="primary"
+                onClick={async () => {
+                  await resource.actions.createMaterial()
+                  control.fresh();
+                }}
+              >
+                上传素材
+              </Button>
+          }
 
-                    if (name == "publish" || name == "unpublish") {
-                      const pub = name == "publish";
-                      await resource.actions.publishMaterial(item, pub);
-                      item.published = pub;
-                      queenApi.messageSuccess("操作成功!");
-                    }
-                  }}
-                />
-              </Draggable>
-            ))}
-          </Container>
-          {dataSource.length == 0 ? (
-            <Empty class="pt-150px" />
-          ) : (
-            <Loadmore
-              class="mt-20px"
-              loading={control.state.loading}
-              canLoad={control.state.canLoadNext}
-              onChange={control.loadNextPage}
-            />
-          )}
+          <div class={[ props.sourceFrom == "user" && "flex-grow overflow-x-hidden overflow-y-auto scrollbar"]}>
+            <Container
+              class="grid grid-cols-2 gap-10px"
+              behaviour="copy"
+              group-name="canvas"
+              animation-duration={0}
+              get-child-payload={(index: number) => {
+                return {
+                  type: props.sourceType,
+                  data: dataSource[index],
+                };
+              }}
+            >
+              {dataSource.map((item: any) => (
+                <Draggable>
+                  <SourceItem
+                    class="draggable-item cursor-pointer"
+                    record={item}
+                    isVideo={sourceType == "Video"}
+                    tagable={props.sourceFrom == "user"}
+                    onClick={() => clickToDesign(item.file.url)}
+                    onMenu={async (name) => {
+                      console.log(name);
+                      if (name == "delete") {
+                        await resource.actions.deleteMaterial(item);
+                        control.fresh();
+                        queenApi.messageSuccess("删除成功!");
+                        return;
+                      }
+
+                      if (name == "publish" || name == "unpublish") {
+                        const pub = name == "publish";
+                        await resource.actions.publishMaterial(item, pub);
+                        item.published = pub;
+                        queenApi.messageSuccess("操作成功!");
+                      }
+                    }}
+                  />
+                </Draggable>
+              ))}
+            </Container>
+            {dataSource.length == 0 ? (
+              <Empty class="pt-150px" />
+            ) : (
+              <Loadmore
+                class="mt-20px"
+                loading={control.state.loading}
+                canLoad={control.state.canLoadNext}
+                onChange={control.loadNextPage}
+              />
+            )}
+          </div>
         </div>
       );
     };