update

scripts/svg-generator.js

@@ -35,13 +35,12 @@ fs.readdir(pathName, function (err, files) {
 });
 
 const templet_svg = template`
-export * from "./createIcon";
 ${(icons) =>
   icons.map((icon) => `export * from "./components/${icon}";`).join("\n")}
 `;
 
 const templet_icon = template`
-import { createIcon } from '../createIcon';
+import { createIcon } from '@queenjs/icons';
 export const ${(props) => props.name} = createIcon(${(props) => props.value})
 `;
 

src/assets/icons/components/Icon3D.tsx

@@ -0,0 +1,14 @@
+
+import { createIcon } from '@queenjs/icons';
+export const Icon3D = createIcon(<svg viewBox="0 0 82 82">
+  <g transform="translate(-159.015 -190.015)">
+    <g transform="translate(180.005 211.006)">
+      <path fill="currentColor"
+        d="M178.9,65.278,190,58.594a.111.111,0,0,0,.113-.113l.113-.113V39.45a.111.111,0,0,0-.113-.113h-.34l-16.879-4.3h-.793l-10.082,7.023a.111.111,0,0,0-.113.113v.113a.111.111,0,0,1-.113.113v.113c-.113.113-.113.113-.113.227V60.973l.113.113a.111.111,0,0,1,.113.113h.227l16.086,4.078h.227c.113,0,.227,0,.227-.113.113.113.113.113.227.113Zm-6.117-26.961a.774.774,0,0,0,.793-.793v-.68l14.047,3.512-9.4,6.457-4.758-1.473a.848.848,0,0,0-.793-.68.865.865,0,0,0-.566.227l-7.93-2.379,7.7-5.211v.227A.961.961,0,0,0,172.786,38.317Zm7.25,15.633-.793-.227V48.059l9.516-6.57V56.782l-.566-.227a.81.81,0,0,0-1.02.566.915.915,0,0,0,.453,1.02l-8.383,5.1V55.422l.34.113h.227a.852.852,0,0,0,.793-.566.811.811,0,0,0-.566-1.02ZM164.4,58.934a.757.757,0,0,0-1.133-.113h-.113V43.868l8.723,2.719v1.586a.793.793,0,0,0,1.586,0V47.039l4.078,1.246V53.27l-.34-.113a.825.825,0,1,0-.453,1.586l.793.227v8.609l-13.481-3.4h.113A.922.922,0,0,0,164.4,58.934Z"
+        transform="translate(-156.36 -35.032)" />
+      <path fill="currentColor"
+        d="M50.664,140.943a.793.793,0,0,0,1.586,0v-2.719a.793.793,0,1,0-1.586,0ZM45,156.35c.227,0,.34,0,.453-.113l2.492-2.039a.805.805,0,1,0-1.02-1.246l-2.492,2.039a.757.757,0,0,0-.113,1.133,1.61,1.61,0,0,0,.68.227Zm5.1-3.965c.227,0,.34,0,.453-.113l1.02-.793,1.246.34h.227a.852.852,0,0,0,.793-.566.811.811,0,0,0-.566-1.02l-1.02-.34V148.76a.793.793,0,0,0-1.586,0v1.359l-1.02.793a.757.757,0,0,0-.113,1.133A.623.623,0,0,0,50.1,152.385Zm10.875,2.039,2.719.906h.227a.852.852,0,0,0,.793-.566.811.811,0,0,0-.566-1.02l-2.719-.906a.825.825,0,1,0-.453,1.586Zm10.875-4.191a.8.8,0,0,0-1.133,1.133,8.789,8.789,0,0,1,2.832,6.117c0,5.551-6.23,10.422-14.84,11.441a.726.726,0,0,0-.68.906c0,.453.34.68.793.68h.113c9.4-1.133,16.313-6.684,16.313-13.027A10.847,10.847,0,0,0,71.848,150.232ZM55.082,169.943v-.34a.111.111,0,0,0-.113-.113v-.113l-1.926-2.492A.805.805,0,0,0,51.8,167.9l.906,1.133c-.34,0-.68-.113-1.02-.113-8.836-1.02-15.066-5.891-15.066-11.441A8.182,8.182,0,0,1,39,151.818a.859.859,0,0,0-.113-1.133.765.765,0,0,0-1.133.113,9.93,9.93,0,0,0-2.719,6.684c0,6.344,6.8,11.895,16.313,13.027.453,0,.906.113,1.359.113l-1.02,1.359a.871.871,0,0,0,.113,1.133.859.859,0,0,0,.453.227.979.979,0,0,0,.68-.34l1.926-2.492v-.34C54.969,170.057,55.082,170.057,55.082,169.943Z"
+        transform="translate(-35.032 -133.127)" />
+    </g>
+  </g>
+</svg>)

src/assets/icons/index.ts

@@ -0,0 +1,2 @@
+
+export * from "./components/Icon3D";

src/assets/icons/svg/3D.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 82 82">
+  <g transform="translate(-159.015 -190.015)">
+    <g transform="translate(180.005 211.006)">
+      <path fill="currentColor"
+        d="M178.9,65.278,190,58.594a.111.111,0,0,0,.113-.113l.113-.113V39.45a.111.111,0,0,0-.113-.113h-.34l-16.879-4.3h-.793l-10.082,7.023a.111.111,0,0,0-.113.113v.113a.111.111,0,0,1-.113.113v.113c-.113.113-.113.113-.113.227V60.973l.113.113a.111.111,0,0,1,.113.113h.227l16.086,4.078h.227c.113,0,.227,0,.227-.113.113.113.113.113.227.113Zm-6.117-26.961a.774.774,0,0,0,.793-.793v-.68l14.047,3.512-9.4,6.457-4.758-1.473a.848.848,0,0,0-.793-.68.865.865,0,0,0-.566.227l-7.93-2.379,7.7-5.211v.227A.961.961,0,0,0,172.786,38.317Zm7.25,15.633-.793-.227V48.059l9.516-6.57V56.782l-.566-.227a.81.81,0,0,0-1.02.566.915.915,0,0,0,.453,1.02l-8.383,5.1V55.422l.34.113h.227a.852.852,0,0,0,.793-.566.811.811,0,0,0-.566-1.02ZM164.4,58.934a.757.757,0,0,0-1.133-.113h-.113V43.868l8.723,2.719v1.586a.793.793,0,0,0,1.586,0V47.039l4.078,1.246V53.27l-.34-.113a.825.825,0,1,0-.453,1.586l.793.227v8.609l-13.481-3.4h.113A.922.922,0,0,0,164.4,58.934Z"
+        transform="translate(-156.36 -35.032)" />
+      <path fill="currentColor"
+        d="M50.664,140.943a.793.793,0,0,0,1.586,0v-2.719a.793.793,0,1,0-1.586,0ZM45,156.35c.227,0,.34,0,.453-.113l2.492-2.039a.805.805,0,1,0-1.02-1.246l-2.492,2.039a.757.757,0,0,0-.113,1.133,1.61,1.61,0,0,0,.68.227Zm5.1-3.965c.227,0,.34,0,.453-.113l1.02-.793,1.246.34h.227a.852.852,0,0,0,.793-.566.811.811,0,0,0-.566-1.02l-1.02-.34V148.76a.793.793,0,0,0-1.586,0v1.359l-1.02.793a.757.757,0,0,0-.113,1.133A.623.623,0,0,0,50.1,152.385Zm10.875,2.039,2.719.906h.227a.852.852,0,0,0,.793-.566.811.811,0,0,0-.566-1.02l-2.719-.906a.825.825,0,1,0-.453,1.586Zm10.875-4.191a.8.8,0,0,0-1.133,1.133,8.789,8.789,0,0,1,2.832,6.117c0,5.551-6.23,10.422-14.84,11.441a.726.726,0,0,0-.68.906c0,.453.34.68.793.68h.113c9.4-1.133,16.313-6.684,16.313-13.027A10.847,10.847,0,0,0,71.848,150.232ZM55.082,169.943v-.34a.111.111,0,0,0-.113-.113v-.113l-1.926-2.492A.805.805,0,0,0,51.8,167.9l.906,1.133c-.34,0-.68-.113-1.02-.113-8.836-1.02-15.066-5.891-15.066-11.441A8.182,8.182,0,0,1,39,151.818a.859.859,0,0,0-.113-1.133.765.765,0,0,0-1.133.113,9.93,9.93,0,0,0-2.719,6.684c0,6.344,6.8,11.895,16.313,13.027.453,0,.906.113,1.359.113l-1.02,1.359a.871.871,0,0,0,.113,1.133.859.859,0,0,0,.453.227.979.979,0,0,0,.68-.34l1.926-2.492v-.34C54.969,170.057,55.082,170.057,55.082,169.943Z"
+        transform="translate(-35.032 -133.127)" />
+    </g>
+  </g>
+</svg>

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

@@ -92,6 +92,7 @@ const textStyle = css`
     margin: 0;
   }
   .ck.ck-editor__editable_inline {
+    cursor: text;
     pointer-events: none;
 
     > :last-child,

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

@@ -1,5 +1,8 @@
+import { Icon3D } from "@/assets/icons";
 import { useEditor } from "@/modules/editor";
-import { defineComponent, reactive } from "vue";
+import { css } from "@linaria/core";
+import { queenApi } from "queenjs";
+import { defineComponent } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
@@ -12,10 +15,6 @@ export const Component = defineComponent({
     const { store, controls } = useEditor();
     const { value } = useCompData(props.compId);
 
-    const state = reactive({
-      visible: false,
-    });
-
     async function pickPack() {
       await controls.pickCtrl.onPickPack();
       value.url =
@@ -23,11 +22,10 @@ export const Component = defineComponent({
     }
 
     function openWeb3D() {
-      if (value.openWindow) {
-        window.open(value.url);
-      } else {
-        state.visible = true;
-      }
+      queenApi.dialog(
+        <iframe class="w-full h-full border-none" src={value.url} />,
+        { fullscreen: true }
+      );
     }
 
     return () => {
@@ -36,25 +34,28 @@ export const Component = defineComponent({
           compId={props.compId}
           onDblclick={store.isEditMode ? pickPack : undefined}
         >
-          {!state.visible ? (
-            <img
-              class={[
-                "w-full h-full object-cover",
-                store.isEditMode && "pointer-events-none",
-              ]}
-              style={{ aspectRatio: value.ratio }}
-              src={value.poster}
-              onClick={openWeb3D}
-            />
-          ) : (
-            <iframe
-              class="w-full h-full border-none"
-              src={value.url}
-              style={{ aspectRatio: value.ratio }}
-            />
-          )}
+          <img
+            class="w-full h-full object-cover pointer-events-none"
+            style={{ aspectRatio: value.ratio }}
+            src={value.poster}
+          />
+          <Icon3D
+            class={iconCls}
+            onClick={!store.isEditMode ? openWeb3D : undefined}
+          />
         </View>
       );
     };
   },
 });
+
+const iconCls = css`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 1.5rem;
+  color: #666;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.7);
+`;

src/modules/editor/components/CompUI/basicUI/Web3D/index.ts

@@ -13,7 +13,6 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {
     url: "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82",
-    openWindow: false,
     poster: Dict_Imgs.Default,
     ratio: 1,
   },
@@ -44,9 +43,4 @@ export const Form = createAttrsForm([
       ],
     },
   },
-  {
-    label: "是否跳转",
-    dataIndex: "value.openWindow",
-    component: "Switch",
-  },
 ]);

src/pages/website/MyComps/components/CompItem.tsx

@@ -17,7 +17,7 @@ export default defineUI({
       return (
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden relative">
-            <Image class="h-1/1 w-1/1 object-cover object-top" src={record?.thumbnail} />
+            <Image class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]" src={record?.thumbnail} />
             <Tag
               color="#E88B00"
               // color="rgba(0, 0, 0, 0.4)"

src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -50,7 +50,7 @@ export default defineUI({
       return (
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden relative">
-            <Image class="h-1/1 w-1/1 object-cover object-top" src={record?.thumbnail} />
+            <Image class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]" src={record?.thumbnail} />
             <Tag
               color="#E88B00"
               // color="rgba(0, 0, 0, 0.4)"