rename

src/modules/resource/actions/material.ts

@@ -41,7 +41,7 @@ export const materialActions = ResourceModule.action({
   },
 
   async selectMaterial(record) {
-    const url = `${location.origin}/index.html#/editor/${record._id}`;
+    const url = `${location.origin}/index.html#/create/${record._id}`;
     location.href = url;
   },
 

src/pages/website/Material/components/MaterialTemplateModal.tsx → src/modules/resource/components/ResourceManager/MaterialTemplateModal.tsx

@@ -1,9 +1,8 @@
 import { useResource } from "@/modules/resource";
-import { css } from "@linaria/core";
 import { useModal } from "queenjs";
 import { defineComponent, onBeforeUnmount, onMounted } from "vue";
 import { string } from "vue-types";
-import AssetsList from "../../components/AssetsList";
+import AssetsList from "../../../../pages/website/components/AssetsList";
 
 export default defineComponent({
   props: {
@@ -28,7 +27,7 @@ export default defineComponent({
 
     return () => {
       return (
-        <div class={rootStyles}>
+        <div>
           <AssetsList
             control={resource.controls.matTempListCtrl}
             item={(record: any) => (
@@ -47,5 +46,3 @@ export default defineComponent({
     };
   },
 });
-
-const rootStyles = css``;

src/modules/resource/components/ResourceManager/Toolbar.tsx

@@ -0,0 +1,84 @@
+import { Button } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { useResource } from "../..";
+import MaterialTemplateModal from "./MaterialTemplateModal";
+import { css, cx } from "@linaria/core";
+
+const materialType = [
+  { name: "视频", key: "video" },
+  { name: "图片", key: "image" },
+  { name: "渲染任务", key: "task" },
+];
+
+export default defineComponent({
+  emits: ["change"],
+  setup(props, { emit }) {
+    const resource = useResource();
+    const { store } = resource;
+
+    const showModal = (type: string) => {
+      resource.showModal(<MaterialTemplateModal type={type} />, {
+        title: `${type === "image" ? "图片" : "视频"}模板中心`,
+        width: "1000px",
+      });
+    };
+
+    return () => {
+      return (
+        <div
+          class={cx(rootStyles, "flex items-center justify-between mt-20px")}
+        >
+          <div class="filter space-x-60px">
+            {materialType.map((d) => (
+              <span
+                key={d.key}
+                onClick={() => emit("change", d.key)}
+                class={cx(
+                  store.type == d.key && "active",
+                  "cursor-pointer btn_tab"
+                )}
+              >
+                {d.name}
+              </span>
+            ))}
+          </div>
+          <div>
+            <Button
+              ghost
+              type="primary"
+              onClick={resource.actions.uploadMaterial}
+            >
+              上传素材
+            </Button>
+            <Button
+              ghost
+              type="primary"
+              class="ml-25px"
+              onClick={() => showModal("image")}
+            >
+              生成图片
+            </Button>
+            <Button
+              ghost
+              type="primary"
+              class="ml-15px"
+              onClick={() => showModal("video")}
+            >
+              生成视频
+            </Button>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const rootStyles = css`
+  .btn_tab {
+    padding: 3px 5px;
+    &:hover,
+    &.active {
+      color: @inf-primary-color;
+    }
+  }
+`;

src/modules/resource/components/ResourceManager/index.tsx

@@ -0,0 +1,53 @@
+import { useResource } from "@/modules/resource";
+import AssetsList from "@/pages/website/components/AssetsList";
+import { defineComponent, onMounted } from "vue";
+import Toolbar from "./Toolbar";
+
+export default defineComponent({
+  setup() {
+    const resource = useResource();
+    const { store, controls, actions } = resource;
+
+    const loadPage = () => {
+      controls.materialListCtrl.state.query = { fileType: store.type };
+      controls.materialListCtrl.loadPage(1);
+    };
+
+    const changeType = (v: string) => {
+      resource.store.setSourceType(v);
+      if (v == "task") {
+        controls.renderTaskListCtrl.loadPage(1);
+        return;
+      }
+      loadPage();
+    };
+
+    onMounted(() => loadPage());
+
+    return () => {
+      const control =
+        store.type == "task"
+          ? controls.renderTaskListCtrl
+          : controls.materialListCtrl;
+
+      return (
+        <>
+          <Toolbar onChange={changeType} />
+          <AssetsList
+            columns={6}
+            class="mt-30px"
+            control={control}
+            item={(record: any) => (
+              <resource.components.MaterialItem
+                record={record}
+                use={store.type == "task" ? "task" : "show"}
+                onDelete={() => actions.deleteMaterial(record)}
+                onDownload={() => actions.downloadMaterial(record)}
+              />
+            )}
+          />
+        </>
+      );
+    };
+  },
+});

src/modules/resource/components/index.ts

@@ -1,7 +1,9 @@
 import MaterialItem from "./MaterialItem";
 import PromotionItem from "./PromotionItem";
+import ResourceManager from "./ResourceManager";
 
 export const compoents = {
   MaterialItem,
   PromotionItem,
+  ResourceManager,
 };

src/pages/website/EditMaterial/components/LeftPanel.tsx → src/pages/website/CreateMat/components/LeftPanel.tsx

@@ -18,9 +18,7 @@ export default defineComponent({
     const replaceMesh = async () => {
       const branchFolder = await resource.showModal<AssetItemFile>(
         <LibraryModal />,
-        {
-          width: "900px",
-        }
+        { width: "900px" }
       );
 
       const pack = await branchFolder.getAssetDetail();

src/pages/website/EditMaterial/index.tsx → src/pages/website/CreateMat/index.tsx

@@ -1,12 +1,12 @@
 import { useResource } from "@/modules/resource";
 import { initQueditor } from "@queenjs-modules/queditor";
+import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
 import { initExpViewer } from "@queenjs-modules/queentree-explorer-viewer";
 import { defineComponent, onBeforeUnmount, onMounted } from "vue";
 import { useRoute } from "vue-router";
-import RightPanel from "./components/RightPanel";
 import Header from "./components/Header";
 import LeftPanel from "./components/LeftPanel";
-import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
+import RightPanel from "./components/RightPanel";
 
 export default defineComponent({
   setup() {

src/pages/website/Home/index.tsx

@@ -4,7 +4,7 @@ import { defineComponent } from "vue";
 export default defineComponent(() => {
   return () => (
     <div class="text-center pt-20px">
-      <router-link to="/workbench/design">
+      <router-link to="/workbench/promotion">
         <Button type="primary">工作台</Button>
       </router-link>
     </div>

src/pages/website/Material/index.tsx

@@ -1,119 +1,17 @@
 import { useResource } from "@/modules/resource";
-import { css, cx } from "@linaria/core";
-import { Button } from "ant-design-vue";
-import { defineComponent, onMounted } from "vue";
-import AssetsList from "../components/AssetsList";
-import MaterialTemplateModal from "./components/MaterialTemplateModal";
-
-const materialType = [
-  { name: "视频", key: "video" },
-  { name: "图片", key: "image" },
-  { name: "渲染任务", key: "task" },
-];
+import { defineComponent } from "vue";
 
 export default defineComponent({
   setup() {
     const resource = useResource();
-    const { store, controls, actions } = resource;
-
-    const showModal = (type: string) => {
-      resource.showModal(<MaterialTemplateModal type={type} />, {
-        title: `${type === "image" ? "图片" : "视频"}模板中心`,
-        width: "1000px",
-      });
-    };
-
-    const changeType = (v: string) => {
-      resource.store.setSourceType(v);
-      if (v == "task") {
-        controls.renderTaskListCtrl.loadPage(1);
-        return;
-      }
-      loadPage();
-    };
-
-    const loadPage = () => {
-      controls.materialListCtrl.state.query = { fileType: store.type };
-      controls.materialListCtrl.loadPage(1);
-    };
-
-    onMounted(() => loadPage());
 
     return () => {
-      const control =
-        store.type == "task"
-          ? controls.renderTaskListCtrl
-          : controls.materialListCtrl;
-
       return (
-        <div class={rootStyles}>
+        <div>
           <h3 class="text-22px">我的素材</h3>
-          <div class="flex items-center justify-between mt-20px">
-            <div class="filter space-x-60px">
-              {materialType.map((d) => (
-                <span
-                  key={d.key}
-                  onClick={() => changeType(d.key)}
-                  class={cx(
-                    store.type == d.key && "active",
-                    "cursor-pointer btn_tab"
-                  )}
-                >
-                  {d.name}
-                </span>
-              ))}
-            </div>
-            <div>
-              <Button
-                ghost
-                type="primary"
-                onClick={resource.actions.uploadMaterial}
-              >
-                上传素材
-              </Button>
-              <Button
-                ghost
-                type="primary"
-                class="ml-25px"
-                onClick={() => showModal("image")}
-              >
-                生成图片
-              </Button>
-              <Button
-                ghost
-                type="primary"
-                class="ml-15px"
-                onClick={() => showModal("video")}
-              >
-                生成视频
-              </Button>
-            </div>
-          </div>
-          <AssetsList
-            columns={6}
-            class="mt-30px"
-            control={control}
-            item={(record: any) => (
-              <resource.components.MaterialItem
-                record={record}
-                use={store.type == "task" ? "task" : "show"}
-                onDelete={() => actions.deleteMaterial(record)}
-                onDownload={() => actions.downloadMaterial(record)}
-              />
-            )}
-          />
+          <resource.components.ResourceManager />
         </div>
       );
     };
   },
 });
-
-const rootStyles = css`
-  .btn_tab {
-    padding: 3px 5px;
-    &:hover,
-    &.active {
-      color: @inf-primary-color;
-    }
-  }
-`;

src/pages/website/Promotion/components/Header.tsx

@@ -0,0 +1,18 @@
+import { useResource } from "@/modules/resource";
+import { Button } from "ant-design-vue";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    const resource = useResource();
+
+    return () => (
+      <div class="flex items-center justify-between">
+        <h3 class="text-22px">我的推广</h3>
+        <Button type="primary" onClick={resource.actions.createPromotion}>
+          新增+
+        </Button>
+      </div>
+    );
+  },
+});

src/pages/website/Design/index.tsx → src/pages/website/Promotion/index.tsx

@@ -1,11 +1,12 @@
 import { useResource } from "@/modules/resource";
-import { Button } from "ant-design-vue";
 import { defineComponent, onMounted } from "vue";
 import AssetsList from "../components/AssetsList";
+import Header from "./components/Header";
 
 export default defineComponent({
   setup() {
     const resource = useResource();
+
     onMounted(() => {
       resource.controls.promotionListCtrl.loadPage(1);
     });
@@ -13,12 +14,7 @@ export default defineComponent({
     return () => {
       return (
         <div>
-          <div class="flex items-center justify-between">
-            <h3 class="text-22px">我的推广</h3>
-            <Button type="primary" onClick={resource.actions.createPromotion}>
-              新增+
-            </Button>
-          </div>
+          <Header />
           <AssetsList
             gap="25px"
             class="my-30px"

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

@@ -24,7 +24,7 @@ export default defineComponent({
     ];
     const menuOptions = [
       {
-        link: "/workbench/design",
+        link: "/workbench/promotion",
         label: "我的推广",
         icon: IconDashboard,
         // suffix: "7",
@@ -66,7 +66,7 @@ export default defineComponent({
                 icon: (
                   <img
                     class="w-18px mr-10px"
-                    src={require("@/assets/imgs/img-source.png")}
+                    src={require("@/assets/imgs/img-resource.png")}
                     alt=""
                   />
                 ),

src/pages/website/router.ts

@@ -11,12 +11,12 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("./Home"),
   },
   {
-    path: "/editor/:id",
-    name: "editor",
+    path: "/create/:id",
+    name: "create",
     meta: {
       needAuth: true,
     },
-    component: () => import("./EditMaterial"),
+    component: () => import("./CreateMat"),
   },
   {
     path: "/workbench",
@@ -24,13 +24,13 @@ const routes: Array<RouteRecordRaw> = [
     meta: {
       needAuth: true,
     },
-    redirect: "/workbench/design",
+    redirect: "/workbench/promotion",
     component: ProfileLayout,
     children: [
       {
-        path: "/workbench/design",
-        name: "design",
-        component: () => import("./Design"),
+        path: "/workbench/promotion",
+        name: "promotion",
+        component: () => import("./Promotion"),
       },
       {
         path: "/workstage/material",