重构素材管理

src/modules/resource/actions/material.ts

@@ -20,10 +20,13 @@ export const materialActions = ResourceModule.action({
     };
     await this.https.createResource(souceObj);
     this.store.setSourceType(souceObj.fileType);
+
     this.controls.materialListCtrl.state.query = {
       fileType: this.store.type,
     };
     this.controls.materialListCtrl.loadPage(1);
+
+    return souceObj;
   },
 
   async deleteMaterial(record) {

src/modules/resource/index.ts

@@ -31,6 +31,9 @@ export class ResourceModule extends ModuleRoot {
     materialListCtrl: new PageListController(this.config?.httpConfig),
     matTempListCtrl: new PageListController(this.config?.httpConfig),
     renderTaskListCtrl: new PageListController(this.config?.httpConfig),
+
+    materialImageListCtrl: new PageListController(this.config?.httpConfig),
+    materialVideoListCtrl: new PageListController(this.config?.httpConfig),
   };
 
   onReady() {
@@ -42,6 +45,13 @@ export class ResourceModule extends ModuleRoot {
     this.controls.renderTaskListCtrl.state.size = 24;
     this.controls.matTempListCtrl.setCrudPrefix("/tpls");
     this.controls.matTempListCtrl.state.size = 20;
+
+    this.controls.materialImageListCtrl.setCrudPrefix("/source")
+    this.controls.materialImageListCtrl.state.query = {fileType:"image"}
+
+    this.controls.materialVideoListCtrl.setCrudPrefix("/source")
+    this.controls.materialVideoListCtrl.state.query = {fileType:"video"}
+    
   }
 }
 

src/pages/website/Material2/SourceController.ts

@@ -0,0 +1,30 @@
+import { PageListController } from "@queenjs/controllers";
+import { reactive } from "vue";
+
+export class SourceController  {
+    state = reactive({currTab: "image", tabs:["image", "video", "task"], btns:["upload", "image","video"] , uploadType:"Default" as "image"|"video"|"Default"});
+    imageCtrl = new PageListController<any, any>();
+    vidoeCtrl = new PageListController<any, any>();
+    taskCtrl = new PageListController<any, any>();
+
+    switchTab(name: string, fresh = true) {
+        this.state.currTab = name;
+        const ctrol = this.getCurrControl();
+        if(fresh)  ctrol.fresh();
+    }
+
+    getCurrControl() : PageListController<any, any> {
+        switch (this.state.currTab) {
+            case "image": return this.imageCtrl;
+            case "video": return this.vidoeCtrl;
+            default: return  this.taskCtrl;
+        }
+    }
+
+    onBtnClick(name:string) {
+        console.log("onBtnClick", name)
+    }
+    onItemClick(name: "delete" | "download", record:any) {
+        console.log("onItemClick", name, record)
+    }
+}

src/pages/website/Material2/UI.tsx

@@ -0,0 +1,96 @@
+import { css, cx } from "@linaria/core";
+import { Button } from "ant-design-vue";
+import { defineComponent, onMounted } from "vue";
+import AssetsList from "../components/AssetsList";
+import { any } from "vue-types";
+import MaterialItem from "@/modules/resource/components/MaterialItem";
+import { SourceController } from "./SourceController";
+
+const TabNames = {
+    "video":"视频",
+    "image": "图片",
+    "task": "渲染任务"
+}
+const BtnNames = {
+    "video":"生成视频",
+    "image": "生成图片",
+    "upload": "上传素材"
+}
+
+
+export default defineComponent({
+    props: {
+        Controller: any<SourceController>().isRequired
+    },
+    setup(props) {
+        onMounted(() =>{
+           const ctrl = props.Controller.getCurrControl()
+           ctrl.loadPage(1);
+        });
+
+    return () => {
+      const state = props.Controller.state;
+      const control = props.Controller.getCurrControl()
+
+      return (
+        <div class={rootStyles}>
+          <h3 class="text-22px">我的素材</h3>
+          <div class="flex items-center justify-between mt-20px">
+            <div class="filter space-x-60px">
+              {state.tabs.map((d) => (
+                <span
+                  key={d}
+                  onClick={() => props.Controller.switchTab(d)}
+                  class={cx(
+                        state.currTab == d && "active",
+                       "cursor-pointer btn_tab"
+                    )}
+                >
+                  {TabNames[d as "video"]}
+                </span>
+              ))}
+            </div>
+            <div>
+              {
+                state.btns.map((name, index)=>
+                    <Button
+                        ghost
+                        key={name}
+                        type="primary"
+                        class={"primary" + (index > 0 ? " ml-25px" : "")}
+                        onClick={()=>props.Controller.onBtnClick(name)}
+                  >
+                     {BtnNames[name as "video"]}
+                  </Button>
+                )
+              }
+            </div>
+          </div>
+          <AssetsList
+            columns={6}
+            class="mt-30px"
+            control={control}
+            item={(record: any) => (
+              <MaterialItem
+                record={record}
+                use={ state.currTab == "task" ? "task" : "show"}
+                onDelete={() => props.Controller.onItemClick("delete", record)}
+                onDownload={() =>props.Controller.onItemClick("download", record)}
+              /> 
+            )}
+          />
+        </div>
+      );
+    };
+  },
+});
+
+const rootStyles = css`
+  .btn_tab {
+    padding: 3px 5px;
+    &:hover,
+    &.active {
+      color: @inf-primary-color;
+    }
+  }
+`;

src/pages/website/Material2/index.tsx

@@ -0,0 +1,41 @@
+import { useResource } from "@/modules/resource";
+import { defineComponent } from "vue";
+import MaterialTemplateModal from "../Material/components/MaterialTemplateModal";
+import MaterialUI from "./UI";
+import { SourceController }  from "./SourceController";
+
+export default defineComponent({
+  setup() {
+    const resource = useResource();
+    const { controls, actions } = resource;
+
+    const showModal = (type: string) => {
+      resource.showModal(<MaterialTemplateModal type={type} />, {
+        title: `${type === "image" ? "图片" : "视频"}模板中心`,
+        width: "1000px",
+      });
+    };
+    const ctrl = new SourceController();
+    ctrl.imageCtrl = controls.materialImageListCtrl;
+    ctrl.vidoeCtrl = controls.materialVideoListCtrl;
+    ctrl.taskCtrl = controls.renderTaskListCtrl;
+    ctrl.onBtnClick = async function(name: string) {
+        if (name == "upload") {
+           const uploaded = await resource.actions.uploadMaterial()
+            ctrl.switchTab(uploaded.fileType, false);
+            ctrl.getCurrControl().loadPage(1);
+            return;
+        }
+        
+        showModal(name);
+    }
+    ctrl.onItemClick = function(name, record) {
+        if (name == "delete") return actions.deleteMaterial(record);
+        return actions.downloadMaterial(record)
+    }
+    
+    return () =>  (
+        <MaterialUI Controller={ ctrl } />
+    )
+  },
+});

src/pages/website/router.ts

@@ -35,7 +35,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "/workstage/material",
         name: "material",
-        component: () => import("./Material"),
+        component: () => import("./Material2"),
       },
       {
         path: "/settings",