添加素材上传 picker

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

@@ -12,12 +12,14 @@ export const Component = createUIComp({
   emits: ["update:value"],
   setup(props, { emit }) {
     const comp = props.compId ? useCompData(props.compId) : null;
-    const { store } = useEditor();
+    const { store, controls } = useEditor();
     async function changeVal() {
-      const files = await queenApi.selectFile();
-      const url = URL.createObjectURL(files[0]);
+      
+      const url = await controls.pickCtrl.pickOneImage();
+      if (!url) return;
+      
       if (comp) {
-        comp.value = URL.createObjectURL(files[0]);
+        comp.value = url;
       } else {
         emit("update:value", url);
       }

src/modules/editor/components/CompUI/formItems/ImagePicker.tsx

@@ -1,3 +1,4 @@
+import { useEditor } from "@/modules/editor";
 import { css } from "@linaria/core";
 import { queenApi } from "queenjs";
 import { defineComponent } from "vue";
@@ -9,9 +10,19 @@ export const ImagePicker = defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    async function changeVal() {
-      const [file] = await queenApi.selectFile({ accept: "image/*" });
-      emit("change", URL.createObjectURL(file));
+    const { controls } = useEditor();
+
+    async function changeVal() {  
+      const url = await controls.pickCtrl.pickOneImage();
+      if (url) {
+        const pre = "https:////";
+        let u = url;
+        if (url.indexOf(pre) == 0 ) {
+          u = "https://" + url.substr(pre.length);
+        }
+        console.log("url=>", u);
+        emit("change", u);
+      }
     }
 
     return () => (

src/modules/editor/controllers/ImagePickerController.ts

@@ -0,0 +1,16 @@
+export class ImagePickController {
+    async pickOneImage() {
+        const rets:any = await this.onPickImage(1);
+
+        console.log("pickOneImage=>", rets)
+        
+        if (rets && rets.length > 0 ) {
+            return rets[0]
+        }
+        return ""
+    }
+    async onPickImage(maxCount:number):Promise<string[]> {
+        console.log("max=>", maxCount);
+        return []
+    }
+}

src/modules/editor/index.ts

@@ -7,6 +7,7 @@ import { HistoryCtrl } from "./controllers/HistoryCtrl";
 import { helpers } from "./helpers";
 import { https } from "./https";
 import { store } from "./stores";
+import { ImagePickController } from "./controllers/ImagePickerController";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig(config);
@@ -19,6 +20,7 @@ export class EditorModule extends ModuleRoot {
 
   controls = {
     historyCtrl: new HistoryCtrl(this),
+    pickCtrl: new ImagePickController(),
   };
 
   onReady() {

src/modules/resource/controllers/MaterialController.ts

@@ -2,7 +2,7 @@ import { PageListController } from "@queenjs/controllers";
 import { reactive } from "vue";
 
 export class MaterialController  {
-    state = reactive({currTab: "image", tabs:["image", "video", "task"], btns:["upload", "image","video"] , uploadType:"Default" as "image"|"video"|"Default"});
+    state = reactive({isSelect:false, selectType:"image", 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>();
@@ -35,12 +35,15 @@ export class MaterialController  {
     onBtnClick(name:string) {
         console.log("onBtnClick", name)
     }
-    onItemClick(name: "delete" | "download" | "preview", record:any) {
+    onItemClick(name: "delete" | "download" | "preview" |"use", record:any) {
         console.log("onItemClick", name, record)
     }
     async onShowDialog(listCtrl: PageListController<any, any>, type:string) {
         console.log("onShowDialog", type)
     }
+     onCloseDialog(data:any) {
+        console.log("onCloseDialog", data)
+    }
 }
 
 export const TabNames = {

src/pages/editor/EditPage/index.tsx

@@ -1,4 +1,6 @@
 import { initEditor } from "@/modules/editor";
+import { SelectOneImage } from "@/pages/website/Material2/modal";
+import { queenApi } from "queenjs";
 import { defineComponent } from "vue";
 
 export default defineComponent(() => {
@@ -7,5 +9,15 @@ export default defineComponent(() => {
   const params = new URLSearchParams(location.hash.split("?")[1]);
   editor.actions.initDesign(params.get("id") || "");
 
+  editor.controls.pickCtrl.onPickImage = async (maxCount:number)=>{
+     if ( maxCount <= 1 ) {
+       const url = await SelectOneImage();
+
+       
+       return [url as string];
+     }
+     return []
+  }
+
   return () => <editor.components.Viewport class="!h-100vh" />;
 });

src/pages/editor/index.ts

@@ -3,7 +3,8 @@ import { initAuthDef } from "@/hooks/initAuthDef";
 import { initRemSize } from "@/hooks/initRemSize";
 import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
+import { initResource } from "@/modules/resource";
 
-startApp(router, [initAuthDef, initRemSize], (app) => {
+startApp(router, [initAuthDef, initRemSize, initResource], (app) => {
   app.use(CKEditor);
 });

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

@@ -29,7 +29,10 @@ export default defineUI({
             const control = props.Controller.getCurrControl()
             
             return (<div class={rootStyles}>
-            <h3 class="text-22px">我的素材</h3>
+              {
+                !state.isSelect &&  <h3 class="text-22px">我的素材</h3>
+              }
+
             <slots.Toolbar Controller={props.Controller} />
 
             <slots.AssetsList
@@ -39,9 +42,10 @@ export default defineUI({
               item={(record: any) => (
                 <slots.MaterialItem
                   record={record}
-                  use={ state.currTab == "task" ? "task" : "show"}
+                  use={ state.currTab == "task" ? "task" : (state.isSelect? "select": "show")}
                   onDelete={() => props.Controller.onItemClick("delete", record)}
                   onDownload={() =>props.Controller.onItemClick("download", record)}
+                  onUse={()=>props.Controller.onItemClick("use", record)}
                   onPreview={() =>props.Controller.onItemClick("preview", record)}
                 />
               )}

src/pages/website/Material2/controller.tsx

@@ -34,10 +34,21 @@ export default function createController(resource:any, isSelectModel:boolean, se
     ctrl.imageCtrl = controls.materialImageListCtrl;
     ctrl.vidoeCtrl = controls.materialVideoListCtrl;
     ctrl.taskCtrl = controls.renderTaskListCtrl;
+    ctrl.state.isSelect = isSelectModel;
+    if (selectType) ctrl.state.selectType = selectType;
+
     ctrl.onBtnClick = async function (name: string) {
       if (name == "upload") {
         const uploaded = await resource.actions.uploadMaterial();
         ctrl.switchTab(uploaded.fileType, false);
+
+        if (uploaded && uploaded.file?.url) {
+           if (ctrl.state.isSelect) {
+            ctrl.onCloseDialog(uploaded.file?.url);
+            return;
+           }
+        }
+
         ctrl.getCurrControl().loadPage(1);
         return;
       }
@@ -49,6 +60,12 @@ export default function createController(resource:any, isSelectModel:boolean, se
         url: record.file.url,
         fileType: record.fileType,
       });
+      else if (name == "use") {
+          console.log(name, record);
+          ctrl.onCloseDialog(record.file.url);
+          return;
+      }
+
       return actions.downloadMaterial(record);
     };
 

src/pages/website/Material2/modal.tsx

@@ -14,16 +14,19 @@ const SelectMaterialDialog = defineComponent({
     const resource = useResource();
     const ctrl = createController(resource, true, props.type as string);
     const model  = useModal();
-    
+    ctrl.onCloseDialog = (data) =>{
+      model.submit(data);
+    }
+      
     return () => (
       <Material
         Controller={ctrl}
         slots={{
-          MaterialItem: ({record})=>{
-            return <div onClick={()=>{
-                model.submit(record);
-            }}>item</div>
-          }
+          // MaterialItem: ({record})=>{
+          //   return <div onClick={()=>{
+          //       model.submit(record);
+          //   }}>item</div>
+          // }
         }}
       ></Material>
     );