Merge branch 'master' of http://124.70.149.18:10880/lianghj/queenshow

src/pages/website/CreateMat/components/AttrPanel/BaseInfo.tsx

@@ -0,0 +1,40 @@
+import { css } from "@linaria/core";
+import { useImage } from "@queenjs/use";
+import { defineUI } from "queenjs";
+import { object } from "vue-types";
+
+export const BaseInfo = defineUI({
+  props: {
+    data: object().def({}),
+  },
+  setup(props) {
+    const bgImg = useImage(() => props.data.thumbnail || { url: "" });
+
+    return () => {
+      return (
+        <div class={baseInfoStyle}>
+          <div class="baseInfo_thumbnail">
+            <img class="w-1/1 h-1/1 object-cover" src={bgImg.url} />
+          </div>
+          <div class="flex-1">
+            <div>{props.data.name || "未命名"}</div>
+            <div>{`编号：${props.data.cusNum || "未命名"}`}</div>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const baseInfoStyle = css`
+  display: flex;
+
+  .baseInfo_thumbnail {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    margin-right: 14px;
+    border-radius: 2px;
+    color: #ccc;
+  }
+`;

src/pages/website/CreateMat/components/AttrPanel/MatAttr.tsx

@@ -1,29 +1,102 @@
-import { useResource } from "@/modules/resource";
 import { useQueditor } from "@queenjs-modules/queditor";
+import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
+import { set } from "lodash";
 import { defineUI } from "queenjs";
+import { any } from "vue-types";
+import { BaseInfo } from "./BaseInfo";
+
+const matColumns: ColumnItem[] = [
+  {
+    label: "缩放",
+    dataIndex: "uv.scale",
+    component: "Slider",
+    props: {
+      max: 5,
+      min: 0,
+      step: 0.1,
+    },
+  },
+  {
+    label: "X轴偏移",
+    dataIndex: "uv.offsetX",
+    component: "Slider",
+    props: {
+      max: 1,
+      min: -1,
+      step: 0.01,
+    },
+  },
+  {
+    label: "Y轴偏移",
+    dataIndex: "uv.offsetY",
+    component: "Slider",
+    props: {
+      max: 1,
+      min: -1,
+      step: 0.01,
+    },
+  },
+  {
+    label: "旋转",
+    dataIndex: "uv.rotate",
+    component: "Slider",
+    props: {
+      max: 360,
+      min: 0,
+    },
+  },
+  {
+    label: "金属度",
+    dataIndex: "metalness.factor",
+    component: "Slider",
+    props: {
+      max: 1,
+      min: 0,
+      step: 0.01,
+    },
+  },
+  {
+    label: "粗糙度",
+    dataIndex: "roughness.factor",
+    component: "Slider",
+    props: {
+      max: 1,
+      min: 0,
+      step: 0.01,
+    },
+  },
+];
 
 export default defineUI({
-  setup() {
-    const resource = useResource();
+  props: {
+    data: any(),
+  },
+  setup(props) {
     const queditor = useQueditor();
 
-    queditor.actions.on("updateCurrPackFormData:success", () => {
-      const matConf = resource.store.matSlots.find(
-        (item) => item.id == resource.store.activeKeys.id
+    function changeVal(e: { dataIndex: string; value: any }) {
+      set(props.data, e.dataIndex, e.value);
+      queditor.actions.updateCurrPackFormData(
+        queditor.store.currActiveMat,
+        e.dataIndex,
+        e.value,
+        { combine: true }
       );
-      if (matConf) {
-        matConf.material = queditor.store.currActiveMat;
-      }
-    });
+    }
 
     return () => {
+      const { data } = props;
       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">
             面料编辑
           </div>
           <div class="px-15px py-15px flex-1 overflow-y-auto scrollbar">
-            <queditor.components.Panel.CurrEdit />
+            <BaseInfo data={data} />
+            <div class="border-bottom my-16px"></div>
+            <div class="-mx-15px">
+              <FormUI data={data} columns={matColumns} onChange={changeVal} />
+            </div>
           </div>
         </div>
       );

src/pages/website/CreateMat/components/AttrPanel/MeshAttr.tsx

@@ -3,8 +3,9 @@ import { useQueditor } from "@queenjs-modules/queditor";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { set } from "lodash";
 import { defineUI } from "queenjs";
+import { any } from "vue-types";
 
-const bgColumns: ColumnItem[] = [
+const meshColumns: ColumnItem[] = [
   {
     label: "缩放",
     dataIndex: "background.image",
@@ -35,22 +36,26 @@ const bgColumns: ColumnItem[] = [
 ];
 
 export default defineUI({
-  setup() {
+  props: {
+    data: any(),
+  },
+  setup(props) {
     const resource = useResource();
     const queditor = useQueditor();
 
     function changeVal(e: { dataIndex: string; value: any }) {
-      set({}, e.dataIndex, e.value);
+      set(props.data, e.dataIndex, e.value);
     }
 
     return () => {
+      const { data } = props;
       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">
             属性编辑
           </div>
           <div class="py-15px flex-1 overflow-y-auto scrollbar">
-            <FormUI data={{}} columns={bgColumns} onChange={changeVal} />
+            <FormUI data={data} columns={meshColumns} onChange={changeVal} />
           </div>
         </div>
       );

src/pages/website/CreateMat/components/AttrPanel/index.tsx

@@ -3,30 +3,22 @@ import { useQueditor } from "@queenjs-modules/queditor";
 import { Empty } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import MatAttr from "./MatAttr";
-import { upperFirst } from "lodash";
 import MeshAttr from "./MeshAttr";
 
 export default defineUI({
-  slots: {
-    MatAttr,
-    MeshAttr,
-  },
-  setup(props, { slots }) {
+  setup() {
     const resource = useResource();
     const queditor = useQueditor();
 
     return () => {
-      console.error(resource.store.currentSlot);
       const { activeKeys } = resource.store;
       if (!resource.store.currentSlot)
         return <Empty class="pt-80px" description="暂无数据" />;
-      else {
-        const CurrComp = (slots as any)[`${upperFirst(activeKeys.type)}Attr`];
-        return (
-          <CurrComp
-          // data={resource.store.currentSlot}
-          />
-        );
+      else if (activeKeys.type == "mat") {
+        const data = resource.store.currentSlot.material;
+        return <MatAttr data={data} />;
+      } else if (activeKeys.type == "mesh") {
+        return <MeshAttr data={{}} />;
       }
     };
   },

src/pages/website/CreateMat/components/TreePanel/index.tsx

@@ -2,10 +2,8 @@ import { useResource } from "@/modules/resource";
 import { useQueditor } from "@queenjs-modules/queditor";
 import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
 import { Pack } from "@queenjs-modules/queditor/objects";
-import { AssetItemFile } from "@queenjs-modules/queentree-explorer/objects/fileSystem/assetFiles";
 import { List } from "@queenjs/ui";
 import { defineComponent } from "vue";
-import LibraryModal from "../LibraryModal";
 import MatItem from "./MatItem";
 import MeshItem from "./MeshItem";
 
@@ -35,7 +33,6 @@ export default defineComponent({
       queditor.actions.insertMesh(data);
     };
 
-
     const replaceMat = async (record: any) => {
       const mat = await resource.treeController.selectOneMat();
       if (!mat) return;
@@ -84,11 +81,20 @@ export default defineComponent({
       resource.store.setActiveKey({ type: "mat", id: item.id });
     };
 
-    //     const mesh: any = resource.store.treeData.find(
-    //       (d: any) => d.meshName == queditor.store.currActiveProdComp?.name
-    //     );
-    //     if (!mesh) return;
-    //     clickMat(mesh.children[0]);
+    queditor.actions.on("initQueen3dScene:success", () => {
+      const app = queditor.controls.queen3dCtrl.queen3d.getAppInstance();
+      app.on("tap:click", (geom: any) => {
+        const compName = geom?._userdata?.name;
+        const mesh: any = resource.store.treeData.find(
+          (d: any) => d.meshName == compName
+        );
+        if (!mesh) {
+          resource.store.setActiveKey({ type: "" });
+        } else {
+          clickMat(mesh.children[0]);
+        }
+      });
+    });
 
     return () => {
       const Meshlist = store.treeData || [];
@@ -109,7 +115,7 @@ export default defineComponent({
                   <MeshItem
                     record={record}
                     active={record.Id == store.activeKeys.id}
-                    onReplace={()=>{replaceMesh(record)}}
+                    onReplace={replaceMesh}
                     onClick={clickMesh}
                   />
                   <div class="grid gap-y-10px pt-10px pl-10px">