update

src/modules/collocation/index.ts

@@ -1,3 +1,4 @@
+import { initExpViewer } from "@queenjs-modules/queentree-explorer-viewer";
 import { PageListController, UploadController } from "@queenjs/controllers";
 import { ModuleRoot } from "queenjs";
 import { collocationAction } from "./module/actions/collocation";
@@ -23,6 +24,9 @@ export class CollocationModule extends ModuleRoot {
       dir: "queentree",
     }),
   };
+  // modules = this.useModules({
+  //   expViewer: initExpViewer,
+  // });
 
   onReady() {
     this.controls.listCtrl.setCrudPrefix("/match/style");

src/modules/collocation/module/actions/collocation.ts

@@ -58,7 +58,10 @@ export const collocationAction = CollocationModule.action({
   },
 
   async renameMatGroup() {
-    const res = await queenApi.showInput({ title: "重命名" });
+    const res = await queenApi.showInput({
+      title: "重命名",
+      defaultValue: "***",
+    });
     if (!res) return;
   },
 
@@ -104,4 +107,50 @@ export const collocationAction = CollocationModule.action({
   dropProduct(product, extraData) {
     //
   },
+  async deleteGroupMat(matsGroup: MatsMatchComp, index) {
+    // const res = await queenApi.showConfirm({
+    //   content: `删除后不可恢复，确认要删除?`,
+    //   type: "danger",
+    // });
+    // if (!res) return;
+    matsGroup.matIds.splice(index, 1);
+    if (matsGroup.index > matsGroup.matIds.length - 1) {
+      matsGroup.index = matsGroup?.matIds?.length - 1;
+    }
+    //
+  },
+
+  switchMatsGroup() {
+    // switchSceneProdComp.call(this, sceneProductId, compName);
+    // queditor.controls.queen3dCtrl.queen3d.
+  },
+
+  async switchMatsGroupIndex(matsGroup: MatsMatchComp, index: number) {
+    matsGroup.index = index;
+    this.actions.renderGroupMat(matsGroup, false);
+  },
+
+  renderGroupMat(matsGroup: MatsMatchComp, isCreate = true) {
+    // const targetPro = queditor.store.pack.products.find(
+    //   (p) => p.id == matsGroup.productId
+    // );
+    // const targetCom = targetPro?.components.find(
+    //   (c) => c.name == matsGroup.name
+    // );
+    // if (!targetCom) return;
+    // const mat = queditor.store.pack.mats.find(
+    //   (m: IMaterial) => m.id == matsGroup.matIds[matsGroup.index]
+    // );
+    // if (!mat) return;
+    // queditor.actions.updatePackProductCompMat(targetCom, mat, isCreate);
+  },
+
+  async renameGroupMat(mat) {
+    const name = await queenApi.showInput({
+      title: "重命名",
+      defaultValue: mat.name,
+    });
+    if (!name) return;
+    mat.name = name;
+  },
 });

src/modules/collocation/module/helper.ts

@@ -2,10 +2,12 @@ import { CollocationModule } from "..";
 
 export const helper = CollocationModule.helper({
   findMatById(matId: string) {
+    // TODO use queditor source
     const source = this.store.designDetail.scenePack.source;
     return source?.mats?.find((element: IMaterial) => element.id == matId);
   },
   findProductById(productId: string) {
+    // todo use queditor source
     const source = this.store.designDetail.scenePack.source;
     return source?.products?.find(
       (element: PackProduct) => element.id == productId

src/pages/collocation/Editor/components/RightPanel/Mat/MatItem.tsx

@@ -1,26 +1,56 @@
 import { css, cx } from "@linaria/core";
+import { IconMore } from "@queenjs/icons";
 import { Image } from "@queenjs/ui";
+import { Dropdown, Menu } from "ant-design-vue";
 import { defineComponent } from "vue";
-import { bool, func, object } from "vue-types";
+import { bool, object } from "vue-types";
 
 export default defineComponent({
   props: {
     active: bool().def(true),
     mat: object<PackageMaterial>(),
-    onClick: func(),
   },
-
-  setup(props, { slots }) {
+  emits: ["click", "action"],
+  setup(props, { emit }) {
     return () => {
-      const { active, mat, onClick } = props;
+      const { active, mat } = props;
       return (
         <div
           title={mat?.name || "未命名面料"}
           class={cx(MatCardStyle, active && "active")}
-          onClick={onClick}
+          onClick={(e) => {
+            e.stopPropagation();
+            emit("click");
+          }}
         >
           <Image class="mat_card" src={mat?.thumbnail?.url} size={100} />
-          {slots.default && slots.default()}
+          {/* {slots.default && slots.default()} */}
+          <Dropdown
+            overlay={
+              <Menu>
+                <Menu.Item
+                  key="rename"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    emit("action", "rename");
+                  }}
+                >
+                  重命名
+                </Menu.Item>
+                <Menu.Item
+                  key="delete"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    emit("action", "delete");
+                  }}
+                >
+                  删除
+                </Menu.Item>
+              </Menu>
+            }
+          >
+            <IconMore class="btn_action" />
+          </Dropdown>
         </div>
       );
     };
@@ -51,4 +81,26 @@ const MatCardStyle = css`
     border: 1px solid #5a7bef;
     padding: 1px;
   }
+  &:hover {
+    .btn_action {
+      opacity: 1;
+    }
+  }
+  .btn_action {
+    position: absolute;
+    right: 3px;
+    top: 2px;
+    border-radius: 2px;
+    padding: 2px;
+    color: #fff;
+    opacity: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+    transition: all 0.2s ease;
+    &:hover {
+      background: rgba(0, 0, 0, 0.4);
+    }
+    &:active {
+      background: rgba(0, 0, 0, 0.5);
+    }
+  }
 `;

src/pages/collocation/Editor/components/RightPanel/Mat/index.tsx

@@ -20,18 +20,27 @@ export default defineComponent({
         if (type == "asset3d.mat") {
           dropMat(dropData, extraData);
         } else if (type == "asset3d.mesh") {
-          dropMesh(dropData);
+          dropMesh(dropData, extraData);
         }
       }
     );
 
-    function dropMesh(dropData: any) {
-      console.log("dropData: ", dropData);
+    function dropMesh(dropData: any, target: any) {
+      console.log("dropData: ", dropData, target);
       //
     }
 
     // 拖拽面料
     function dropMat(mat: IMaterial, extraData: any) {
+      const currGroup = findmatsGroup(extraData);
+      if (!currGroup.matIds) currGroup.matIds = [];
+
+      // TODO 判断重复拖拽
+      if (currGroup.matIds.includes(mat.id)) {
+        queenApi.messageError("不能重复添加色卡");
+        return;
+      }
+      // update
       const targetPro = queditor.store.pack.products.find(
         (p) => p.id == extraData.productId
       );
@@ -39,57 +48,19 @@ export default defineComponent({
         (c) => c.name == extraData.name
       );
       if (!targetCom) return;
-
       queditor.actions.updatePackProductCompMat(targetCom, mat, true);
-
-      const currComp = findCurrentComp(extraData);
-      if (!currComp.matIds) currComp.matIds = [];
-
-      // TODO 判断重复拖拽
-      if (currComp.matIds.includes(mat.id)) {
-        queenApi.messageError("不能重复添加色卡");
-        return;
-      }
-
-      currComp.matIds.push(mat.id);
-      currComp.index = currComp.matIds.length - 1;
+      currGroup.matIds.push(mat.id);
+      currGroup.index = currGroup.matIds.length - 1;
     }
 
-    function findCurrentComp(target: MatsMatchComp) {
-      const currComp = collocation.store.menuOptions.sourceData.mat.find(
+    function findmatsGroup(target: MatsMatchComp) {
+      const currGroup = collocation.store.menuOptions.sourceData.mat.find(
         (r: MatsMatchComp) =>
           r.name == target.name && r.productId == target.productId
       );
-      return currComp;
+      return currGroup;
     }
 
-    async function switchMatsGroupIndex(
-      matsGroup: MatsMatchComp,
-      index: number
-    ) {
-      const currComp = findCurrentComp(matsGroup);
-      currComp.index = index;
-
-      //
-      const targetPro = queditor.store.pack.products.find(
-        (p) => p.id == matsGroup.productId
-      );
-      const targetCom = targetPro?.components.find(
-        (c) => c.name == matsGroup.name
-      );
-      if (!targetCom) return;
-      const mat = queditor.store.pack.mats.find(
-        (m) => m.id == currComp.matIds[index]
-      );
-      if (!mat) return;
-      queditor.actions.updatePackProductCompMat(targetCom, mat, false);
-    }
-
-    const switchMatsGroup = () => {
-      // switchSceneProdComp.call(this, sceneProductId, compName);
-      // queditor.controls.queen3dCtrl.queen3d.
-    };
-
     const handleChange = (key: string, matsGroup: MatsMatchComp) => {
       switch (key) {
         case "rename":
@@ -120,6 +91,7 @@ export default defineComponent({
               return (
                 <PanelGroup
                   key={index}
+                  class="cursor-pointer"
                   type="asset3d.mat"
                   active={
                     queditor.store.currActiveProdComp?.name == matsGroup.name
@@ -128,19 +100,39 @@ export default defineComponent({
                   tools={["rename", "lock", "clear"]}
                   target={matsGroup}
                   onChange={(key) => handleChange(key, matsGroup)}
-                  onSelect={switchMatsGroup}
+                  onSelect={collocation.actions.switchMatsGroup}
                 >
                   <List data={matsGroup.matIds || []} columns={5} gap="5px">
                     {{
                       item: (matId: string, index: number) => {
+                        const currentMats =
+                          collocation.helper.findMatById(matId);
                         return (
                           <MatItem
                             key={matId}
-                            mat={collocation.helper.findMatById(matId)}
+                            mat={currentMats}
                             active={index == matsGroup.index}
                             onClick={() =>
-                              switchMatsGroupIndex(matsGroup, index)
+                              collocation.actions.switchMatsGroupIndex(
+                                matsGroup,
+                                index
+                              )
                             }
+                            onAction={(key: string) => {
+                              switch (key) {
+                                case "delete":
+                                  collocation.actions.deleteGroupMat(
+                                    matsGroup,
+                                    index
+                                  );
+                                  break;
+                                case "rename":
+                                  collocation.actions.renameGroupMat(
+                                    currentMats
+                                  );
+                                  break;
+                              }
+                            }}
                           />
                         );
                       },
@@ -155,6 +147,9 @@ export default defineComponent({
               );
             }
           )}
+          <div class="mt-20px text-12px text-center text-gray-400">
+            没有更多了
+          </div>
         </PanelCard>
       );
     };

src/pages/collocation/Editor/components/RightPanel/Product/index.tsx

@@ -60,9 +60,9 @@ export default defineComponent({
           }
         >
           <div class="mb-10px">
-            <Button type="link" onClick={collocation.actions.addCategoryGroup}>
+            <a class="text-14px" onClick={collocation.actions.addCategoryGroup}>
               添加分组
-            </Button>
+            </a>
           </div>
           {collocation.store.currentGroupList?.length == 0 && (
             <div class="my-30px text-gray-500 text-center text-12px">
@@ -77,6 +77,7 @@ export default defineComponent({
                   type="asset3d.mesh"
                   title={prodGroup.group}
                   tools={["rename", "clear", "delete"]}
+                  target={prodGroup}
                   onChange={(key) => handleChange(key, prodGroup)}
                 >
                   <List

src/pages/collocation/Editor/index.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
     onMounted(() => init());
 
     const init = async () => {
+      collocatin.store.setEditType("mat");
       await collocatin.actions.queryStyleDetail(params.id as string);
       queditor.actions.initPack(collocatin.store.designDetail.scenePack.source);
       queditor.store.setCurrScene(0);

src/typings/collocation.d.ts

@@ -1,6 +1,6 @@
 declare interface MatsMatchComp {
-  index?: number;
-  matIds?: string[];
+  index: number;
+  matIds: string[];
   name?: string;
   productId?: string;
   sceneProId?: string;