update

src/modules/resource/actions/material.ts

@@ -4,10 +4,17 @@ import { ResourceModule } from "..";
 export const materialActions = ResourceModule.action({
   async uploadMaterial() {
     const [blob] = await queenApi.selectFile({ accept: "image/*, video/*" });
-    const res = await this.controls.uploader.uploadFile(blob, "source");
+
+    // const url = URL.createObjectURL(blob);
+    // const data = { url, size: blob.size };
+    // await this.controls.uploader.uploadBlobs(data, {
+    //   createPathKey: this.helpers.createFileName,
+    // });
+
+    const data = await this.controls.uploader.uploadFile(blob, "queenshow");
 
     const souceObj = {
-      file: res,
+      file: data,
       fileType: blob.type.split("/")[0],
       from: "upload",
     };

src/modules/resource/components/MaterialItem.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
     record: any(),
     use: string<"show" | "select">(),
   },
-  emits: ["delete", "select", "download"],
+  emits: ["delete", "select", "download", "use"],
   setup(props, { emit }) {
     return () => {
       const { active, record, use } = props;
@@ -19,47 +19,6 @@ export default defineComponent({
 
       return (
         <div class={cx(itemStyles, "relative", active && "active")}>
-          {active && (
-            <Checkbox
-              checked
-              class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
-            />
-          )}
-          {use == "show" && (
-            <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white hidden">
-              生成中…
-            </div>
-          )}
-          <div
-            class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white"
-            onClick={() => emit("select")}
-          >
-            {use == "show" && (
-              <IconDelete
-                class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
-                onClick={() => emit("delete")}
-              />
-            )}
-            {use == "show" && (
-              <div
-                class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
-                onClick={() => emit("download")}
-              >
-                下载
-              </div>
-            )}
-            {use == "select" && (
-              <div
-                class="btn_circle  rounded-1/2 text-center w-56px leading-56px cursor-pointer"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  emit("select");
-                }}
-              >
-                使用
-              </div>
-            )}
-          </div>
           <View ratio={1.4} class="overflow-hidden">
             {record.fileType == "video" ? (
               <video src={record.file?.url} class="h-1/1 w-1/1" />
@@ -71,8 +30,53 @@ export default defineComponent({
                 }
               />
             )}
+            {active && (
+              <Checkbox
+                checked
+                class="!-mt-0.2em absolute top-0 left-0 text-20px text-red-200 z-3"
+              />
+            )}
+            {use == "show" && (
+              <div class="waiting absolute inset-0 z-2 flex items-center justify-center text-white hidden">
+                生成中…
+              </div>
+            )}
+            <div
+              class="absolute inset-0 flex items-center justify-center z-2 opacity-0 hover:opacity-100 transition-all text-white"
+              onClick={() => emit("select")}
+            >
+              {use == "show" && (
+                <IconDelete
+                  class="icon_del absolute right-5px top-5px p-3px rounded-2px text-14px cursor-pointer"
+                  onClick={() => emit("delete")}
+                />
+              )}
+              {use == "show" && (
+                <div
+                  class="btn_circle rounded-1/2 text-center w-56px leading-56px cursor-pointer"
+                  onClick={() => emit("download")}
+                >
+                  下载
+                </div>
+              )}
+              {use == "select" && (
+                <div
+                  class="btn_circle  rounded-1/2 text-center w-56px leading-56px cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    emit("use");
+                  }}
+                >
+                  使用
+                </div>
+              )}
+            </div>
           </View>
-          {/* <div class="py-8px px-10px bg-dark-900">{record.name}</div> */}
+          {record.name && (
+            <div class="py-8px px-10px" style={{ backgroundColor: "#262626" }}>
+              {record.name}
+            </div>
+          )}
         </div>
       );
     };

src/modules/resource/helper.ts

@@ -0,0 +1,13 @@
+import { ResourceModule } from ".";
+
+export const helper = ResourceModule.helper({
+  createFileName(fileName: string, dir: string) {
+    const suffix = fileName.substring(fileName.lastIndexOf("."));
+    if (/[\u4e00-\u9fa5]/.test(fileName) || fileName.length > 10) {
+      fileName = `${this.controls.uploader.randomName(4)}${suffix}`;
+    }
+    return `${dir}/${Date.now()}_${this.controls.uploader.randomName(
+      6
+    )}_${fileName}`;
+  },
+});

src/modules/resource/index.ts

@@ -3,6 +3,7 @@ import { PageListController, UploadController } from "@queenjs/controllers";
 import { ModuleRoot } from "queenjs";
 import { actions } from "./actions";
 import { compoents } from "./components";
+import { helper } from "./helper";
 import { http } from "./http";
 import { store } from "./store";
 
@@ -17,14 +18,14 @@ export class ResourceModule extends ModuleRoot {
   components = this.useComponents(compoents);
   store = this.createStore([store]);
   https = this.createHttps(http);
+  helpers = this.createHelper(helper);
 
   controls = {
     uploader: new UploadController({
       httpConfig: {
-        baseURL: "https://www.infish.cn/tree/v1/assetcenter",
+        baseURL: Dict_Apis.queentree,
       },
-      // httpConfig: () => this.config.httpConfig,
-      dir: "queentree",
+      dir: "queenshow",
     }),
     promotionListCtrl: new PageListController(this.config?.httpConfig),
     materialListCtrl: new PageListController(this.config?.httpConfig),

src/pages/website/EditMaterial/components/ComponentPanel.tsx

@@ -1,3 +1,4 @@
+import { useResource } from "@/modules/resource";
 import { Image, List } from "@queenjs/ui";
 import { Button } from "ant-design-vue";
 import { defineComponent } from "vue";
@@ -5,8 +6,10 @@ import { any } from "vue-types";
 
 export default defineComponent({
   setup() {
+    const resource = useResource();
+
     return () => {
-      const list = new Array(6).fill({});
+      const list = resource.store.sourceDetail.webEditor?.matSlots || [];
       return (
         <div class="w-300px flex flex-col">
           <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
@@ -14,7 +17,7 @@ export default defineComponent({
           </div>
           <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
             {{
-              item: () => <CompItem record={{}} />,
+              item: (record: any) => <CompItem record={record} />,
               loadmore: () => (
                 <div class="text-center py-20px text-12px opacity-80">
                   没有更多了
@@ -40,8 +43,8 @@ const CompItem = defineComponent({
           class="flex items-center py-6px px-12px rounded-4px"
           style={{ backgroundColor: "#303030" }}
         >
-          <Image src={record.thumbnail?.url} class="w-48px rounded-4px" />
-          <div class="ml-12px flex-1">{record.name || "未命名"}</div>
+          <Image src={record.thumbnail} class="w-48px rounded-4px" />
+          <div class="ml-10px flex-1 mr-5px w-0">{record.name || "未命名"}</div>
           <Button type="primary" ghost size="small">
             替换
           </Button>

src/pages/website/EditMaterial/components/ModelPanel.tsx

@@ -1,3 +1,4 @@
+import { useResource } from "@/modules/resource";
 import { Image, List } from "@queenjs/ui";
 import { Button } from "ant-design-vue";
 import { defineComponent } from "vue";
@@ -5,8 +6,10 @@ import { any } from "vue-types";
 
 export default defineComponent({
   setup() {
+    const resource = useResource();
+
     return () => {
-      const list = new Array(6).fill({});
+      const list = resource.store.sourceDetail.webEditor?.meshSlots || [];
       return (
         <div class="w-300px flex flex-col">
           <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
@@ -14,7 +17,7 @@ export default defineComponent({
           </div>
           <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
             {{
-              item: () => <ProductItem record={{}} />,
+              item: (record: any) => <ProductItem record={record} />,
               loadmore: () => (
                 <div class="text-center py-20px text-12px opacity-80">
                   没有更多了
@@ -40,8 +43,10 @@ const ProductItem = defineComponent({
           class="flex items-center py-6px px-12px rounded-4px"
           style={{ backgroundColor: "#303030" }}
         >
-          <Image src={record.thumbnail?.url} class="w-48px rounded-4px" />
-          <div class="ml-12px flex-1">{record.name || "未命名"}</div>
+          <Image src={record.thumbnail} class="w-48px rounded-4px" />
+          <div class="ml-10px flex-1 mr-5px truncate w-0">
+            {record.meshName || "未命名"}
+          </div>
           <Button type="primary" ghost size="small">
             替换
           </Button>

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

@@ -35,7 +35,7 @@ export default defineComponent({
               <resource.components.MaterialItem
                 use="select"
                 record={record}
-                onSelect={() => {
+                onUse={() => {
                   modal.cancel();
                   resource.actions.selectMaterial(record);
                 }}

src/pages/website/components/layout/LeftContent.tsx

@@ -27,13 +27,13 @@ export default defineComponent({
         link: "/workbench/design",
         label: "我的推广",
         icon: IconDashboard,
-        suffix: "7",
+        // suffix: "7",
       },
       {
         link: "/workstage/material",
         label: "我的素材",
         icon: IconCamera,
-        suffix: "32",
+        // suffix: "32",
       },
       {
         link: "/settings",
@@ -103,7 +103,7 @@ const rootStyles = css`
   .router-link-exact-active {
     display: block;
     border-radius: 4px;
-    background-color: #fff;
+    background-color: #414141;
     > div {
       color: @inf-text-color;
     }
@@ -165,6 +165,6 @@ const itemStyles = css`
   color: @inf-text-sub-color;
   cursor: pointer;
   &:hover {
-    background: #fff;
+    background: #414141;
   }
 `;

src/pages/website/components/layout/ProfileLayout.tsx

@@ -9,13 +9,13 @@ export default defineComponent({
       return (
         <Layout class={cx("!h-100vh flex", rootStyles)}>
           <Layout.Sider
-            class="scrollbar !bg-transparent overflow-y-auto"
+            class="scrollbar !bg-transparent overflow-y-auto border-dark-800 border-0 border-r-1 border-solid"
             theme="light"
             width="380px"
           >
             <LeftContent />
           </Layout.Sider>
-          <Layout.Content class="container scrollbar flex-1 my-20px mr-25px rounded-20px p-50px overflow-y-auto">
+          <Layout.Content class="page_container scrollbar flex-1 my-20px rounded-20px p-50px overflow-y-auto">
             <router-view></router-view>
           </Layout.Content>
         </Layout>
@@ -26,7 +26,7 @@ export default defineComponent({
 
 const rootStyles = css`
   background-color: @inf-layout-bg;
-  .container {
+  .page_container {
     background-color: @inf-modal-bg;
   }
 `;

src/styles/theme.less

@@ -15,7 +15,7 @@
 @inf-border-color: #1f1f1f;
 
 @inf-mask-bg: fade(#000000, 50%);
-// @inf-modal-bg: #1f1f1f;
+@inf-modal-bg: #262626;
 
 @inf-layout-bg: #262626;
 @inf-component-bg: #262626;