Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

package.json

@@ -70,6 +70,7 @@
     "scp2": "^0.5.0",
     "swiper": "^8.4.4",
     "three": "^0.146.0",
+    "vconsole": "^3.15.1",
     "vue": "^3.2.45",
     "vue-dndrop": "^1.3.1",
     "vue-router": "^4.0.3",

src/components/Thumbnail.tsx

@@ -0,0 +1,31 @@
+import { css } from "@linaria/core";
+import { Image } from "@queenjs/ui";
+import { defineComponent } from "vue";
+import { number, string } from "vue-types";
+
+const ThumbnailImage = defineComponent({
+  props: {
+    src: string().isRequired,
+    size: number(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      return (
+        <div class={cardStyles} onClick={() => emit("click")}>
+          <Image class="w-full h-full !object-contain" {...props} />
+        </div>
+      );
+    };
+  },
+});
+
+export default ThumbnailImage;
+
+const cardStyles = css`
+  border-radius: 2px;
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAGkAgMAAAADIrmmAAAADFBMVEU7OzsAAABAQEA8PDx2WAOfAAAABHRSTlMZAAQKGjtSlQAAAX5JREFUeNrt2bFNQ0EMgOELiIIiJSMwAn1GoOAEBQUjZARGYwn24SRWyLPs81dEzlVf935ZHvM6TnPO1zHG05pjHPZ8H1HSZ5h0DZMuYdJPmDRIJNItpbs1v9Z8XvPA5/p9rP+Pa36Pcdjz//22xsOal+OeJBKJ1FSK+ZYH9WnjupNIJFIOya5Ro+4kEonUStq0uSQSidRNsmsUaC6JRCKlkdw1atSdRCKRckh2jRp1J5FIpFbSps0lkUikbpJdo0BzSSQSKY3krlGj7iQSiZRDsmvUqDuJRCK1kjZtLolEInWT7BoFmksikUhpJHeNGnUnkUikHJJdo0bdSSQSqZW0aXNJJBKpm2TXKNBcEolESiO5a9SoO4lEIuWQ7Bo16k4ikUitpE2bSyKRSN0ku0aB5pJIJFIayV2jRt1JJBIph2TXqFF3EolEaiVt2lwSiUTqJtk1CjSXRCKR0kjuGjXqTiKRSDkku0aNupNIW0v3YdIpTDqHSS9h0m+UdJ5/j+fbnwfuGT4AAAAASUVORK5CYII=");
+  background-size: contain;
+  background-color: rgba(255, 255, 255, 0.8);
+  overflow: hidden;
+`;

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

@@ -189,10 +189,11 @@ const EditorComp = defineComponent({
     function blurHandle() {
       function blur(e: MouseEvent) {
         const target = e.target as HTMLElement;
+
         if (!editorInstance.value) return;
 
         if (isInCkBodyWrapper(target)) {
-          e.stopPropagation();
+          // e.stopPropagation();
           return;
         }
         actions.submitUpdate();

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -3,7 +3,7 @@ import { any, string } from "vue-types";
 
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
-import { Image } from "@queenjs/ui";
+import { Empty, Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { defineUI } from "queenjs";
 
@@ -41,37 +41,41 @@ const Comp = defineUI({
   },
   setup(props) {
     const editor = useEditor();
-    return () => (
-      <Container
-        class="space-y-10px scrollbar"
-        behaviour="copy"
-        group-name="canvas"
-        animation-duration={0}
-        get-child-payload={(index: number) => {
-          return props.components[index].compKey;
-        }}
-      >
-        {props.components.map((item) => {
-          return (
-            <Draggable>
-              <div
-                class="text-center leading-50px bg-dark-50 rounded draggable-item"
-                key={item.compKey}
-                title={item.name}
-                onClick={() =>
-                  editor.actions.clickCompToDesign(item.compKey as ICompKeys)
-                }
-              >
-                <Image
-                  class="w-full rounded pointer-events-none"
-                  src={item.thumbnail}
-                  size={240}
-                />
-              </div>
-            </Draggable>
-          );
-        })}
-      </Container>
-    );
+
+    return () => {
+      if (props.components.length == 0) return <Empty />;
+      return (
+        <Container
+          class="space-y-10px scrollbar"
+          behaviour="copy"
+          group-name="canvas"
+          animation-duration={0}
+          get-child-payload={(index: number) => {
+            return props.components[index].compKey;
+          }}
+        >
+          {props.components.map((item) => {
+            return (
+              <Draggable>
+                <div
+                  class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                  key={item.compKey}
+                  title={item.name}
+                  onClick={() =>
+                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
+                  }
+                >
+                  <Image
+                    class="w-full rounded pointer-events-none"
+                    src={item.thumbnail}
+                    size={240}
+                  />
+                </div>
+              </Draggable>
+            );
+          })}
+        </Container>
+      );
+    };
   },
 });

src/modules/editor/components/Viewport/Slider/SliderLeft/Shapes.tsx

@@ -10,7 +10,7 @@ export default defineUI({
   setup() {
     const editor = useEditor();
     const resource = useResource();
-
+    resource.controls.sysSvgListCtrl.hasLimit = true;
     resource.controls.sysSvgListCtrl.loadPage(1);
 
     return () => {
@@ -42,8 +42,8 @@ export default defineUI({
                   >
                     <Image
                       class="w-full rounded pointer-events-none"
-                      src={item.thumbnail}
-                      size={240}
+                      src={item.file.url}
+                      // size={240}
                     />
                   </div>
                 </Draggable>

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

@@ -2,9 +2,11 @@ import { defineComponent, onMounted, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { string } from "vue-types";
 
+import Thumbnail from "@/components/Thumbnail";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
-import { Image, Loadmore } from "@queenjs/ui";
+import { Loadmore } from "@queenjs/ui";
+import Empty from "@queenjs/ui/empty";
 
 export const Sources = defineComponent({
   props: {
@@ -55,7 +57,7 @@ export const Sources = defineComponent({
       return (
         <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
           <Container
-            class="grid grid-cols-2 gap-15px"
+            class="grid grid-cols-2 gap-10px"
             behaviour="copy"
             group-name="canvas"
             animation-duration={0}
@@ -68,34 +70,28 @@ export const Sources = defineComponent({
           >
             {dataSource.map((item: any) => (
               <Draggable>
-                <div
+                <Thumbnail
+                  size={240}
                   class="draggable-item"
                   style={{ aspectRatio: 1 }}
                   onClick={() => clickToDesign(item.file.url)}
-                >
-                  {item.fileType == "video" ? (
-                    // <video
-                    //   src={item.file.url}
-                    //   class="w-full h-full object-cover"
-                    // />
-                    <Image class="w-full h-full" src={item.thumbnail} />
-                  ) : (
-                    <Image
-                      class="w-full h-full"
-                      src={item.file.url}
-                      size={240}
-                    />
-                  )}
-                </div>
+                  src={
+                    item.fileType == "video" ? item.thumbnail : item.file.url
+                  }
+                />
               </Draggable>
             ))}
           </Container>
-          <Loadmore
-            class="mt-20px"
-            loading={control.state.loading}
-            canLoad={control.state.canLoadNext}
-            onChange={control.loadNextPage}
-          />
+          {dataSource.length == 0 ? (
+            <Empty />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={control.state.loading}
+              canLoad={control.state.canLoadNext}
+              onChange={control.loadNextPage}
+            />
+          )}
         </div>
       );
     };

src/modules/editor/components/Viewport/Slider/SliderLeft/Templates.tsx

@@ -1,5 +1,5 @@
 import { useEditor } from "@/modules/editor";
-import { Image, Loadmore } from "@queenjs/ui";
+import { Empty, Image, Loadmore } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 
@@ -46,12 +46,16 @@ export default defineUI({
               );
             })}
           </Container>
-          <Loadmore
-            class="mt-20px"
-            loading={ctrl.state.loading}
-            canLoad={ctrl.state.canLoadNext}
-            onChange={ctrl.loadNextPage}
-          />
+          {dataSource.length == 0 ? (
+            <Empty />
+          ) : (
+            <Loadmore
+              class="mt-20px"
+              loading={ctrl.state.loading}
+              canLoad={ctrl.state.canLoadNext}
+              onChange={ctrl.loadNextPage}
+            />
+          )}
         </div>
       );
     };

src/modules/editor/components/Viewport/Slider/SliderLeft/index.tsx

@@ -113,7 +113,7 @@ export default defineUI({
           </div>
           <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
             {currentTab.content && (
-              <div class="my-5px ml-10px space-x-10px">
+              <div class="mt-5px ml-10px space-x-10px">
                 {currentTab.content?.map((item: any, index: number) => (
                   <Button
                     key={index}
@@ -131,7 +131,7 @@ export default defineUI({
             )}
 
             <currComp.component
-              class="flex-1 h-1/1 px-16px mb-10px overflow-y-auto"
+              class="flex-1 h-1/1 px-16px my-10px overflow-y-auto"
               {...currComp.props}
             />
           </div>

src/modules/editor/controllers/SelectCtrl/assistRulerCtrl.ts

@@ -30,19 +30,17 @@ export class AssistRulerCtrl {
     let n = this.rulers.length;
     while (n--) {
       const item = this.rulers[n];
-      if (item.horz != undefined && Math.abs(item.horz - y * 2) < 4) {
+      if (item.horz != undefined && Math.abs(item.horz - y * 2) < 8) {
         this._currDragItem = item;
         break;
-      } else if (item.verz != undefined && Math.abs(item.verz - x * 2) < 4) {
+      } else if (item.verz != undefined && Math.abs(item.verz - x * 2) < 8) {
         this._currDragItem = item;
         break;
       }
     }
-
-    console.log("test=>", this._currDragItem);
-    if (this._currCursor) {
-      this._currCursor = document.body.style.cursor;
-    }
+    // if (this._currCursor) {
+    //   this._currCursor = document.body.style.cursor;
+    // }
     return !!this._currDragItem;
   }
 
@@ -57,24 +55,23 @@ export class AssistRulerCtrl {
     const pageBox = pageViewPort.getBoundingClientRect();
     const cx = e.clientX - pageBox.left;
     const cy = e.clientY - pageBox.top;
-    if (
-      Math.floor(cx) < -40 ||
-      Math.floor(cy) < -40 ||
-      e.clientX - pageBox.right > 40 ||
-      e.clientY - pageBox.bottom > 40
-    ) {
-      return;
-    }
+    // if (
+    //   Math.floor(cx) < -40 ||
+    //   Math.floor(cy) < -40 ||
+    //   e.clientX - pageBox.right > 40 ||
+    //   e.clientY - pageBox.bottom > 40
+    // ) {
+    //   return;
+    // }
 
     if (it.verz != undefined) {
       it.verz = cx * 2;
-      document.body.style.cursor = "ew-resize";
+      //   document.body.style.cursor = "ew-resize";
     } else {
       it.horz = cy * 2;
-      document.body.style.cursor = "ns-resize";
+      //   document.body.style.cursor = "ns-resize";
     }
 
-    console.log(it);
     this.draw();
   }
 
@@ -188,16 +185,14 @@ export class AssistRulerCtrl {
     }
     const viewPort = this.ctrl.pageEl as HTMLElement;
     const box = viewPort.getBoundingClientRect();
-
-    if (
-      e.clientX - box.left < -20 ||
-      e.clientY - box.top < -20 ||
-      e.clientY - box.bottom > 20 ||
-      e.clientX - box.right > 20
-    ) {
+    const currDragItem = this._currAddingRuler;
+    const verz = currDragItem.verz || 0;
+    const horz = currDragItem.horz || 0;
+    if (verz < 0 || horz < 0 || verz > box.width * 2 || horz > box.height * 2) {
       this._currAddingRuler = undefined;
       return;
     }
+
     this.rulers.push({ ...this._currAddingRuler });
 
     console.log("rulerLineMouseUp=>", e.clientY);

src/modules/resource/helper.ts

@@ -86,6 +86,7 @@ export const helper = ResourceModule.helper({
 
     queenApi.showLoading("上传中……");
 
+    
     for (const key in blobs) {
       const blob = blobs[key];
       if (blob.type.indexOf("image") !== -1 && blob.size >= 10 * 1024 * 1024) {
@@ -101,6 +102,7 @@ export const helper = ResourceModule.helper({
           file,
           fileType: blob.type.split("/")[0],
           from: "upload",
+          isSvg:  blob.name.toLowerCase().lastIndexOf(".svg") == blob.name.length -4
         };
         result.successRow.push(souceObj);
       }

src/modules/resource/index.ts

@@ -76,7 +76,7 @@ export class ResourceModule extends ModuleRoot {
 
     this.controls.sysImageListCtrl.setCrudPrefix("/sys/source");
     this.controls.sysImageListCtrl.state.size = 20;
-    this.controls.sysImageListCtrl.state.query = { fileType: "image" };
+    this.controls.sysImageListCtrl.state.query = { fileType: "image" , isSvg: {$ne: true}};
 
     this.controls.sysVideoListCtrl.setCrudPrefix("/sys/source");
     this.controls.sysVideoListCtrl.state.size = 20;
@@ -84,7 +84,7 @@ export class ResourceModule extends ModuleRoot {
 
     this.controls.sysSvgListCtrl.setCrudPrefix("/sys/source");
     this.controls.sysSvgListCtrl.state.size = 20;
-    this.controls.sysSvgListCtrl.state.query = { fileType: "svg" };
+    this.controls.sysSvgListCtrl.state.query = { fileType: "image" , isSvg: true};
 
     this.natsBus.init();
   }

src/pages/h5/share/index.ts

@@ -4,6 +4,9 @@ import CKEditor from "@ckeditor/ckeditor5-vue";
 import "./style.less";
 import router from "./router";
 
+// import VConsole from 'vconsole';
+// const vConsole = new VConsole();
+
 document.title = "分享";
 startApp(router, [initViewportSize], (app) => {
   app.use(CKEditor);

src/pages/website/Material2/components/MaterialItem.tsx

@@ -19,19 +19,18 @@ export default defineUI({
   setup(props, { emit }) {
     return () => {
       const { record, use } = props;
-      // console.error("record: ", record);
-
+     
+      const src = record?.thumbnail || record?.thumbnailUrl || record.file?.url;
+      // console.error("record: ", src);
       return (
         <div class={cx(itemStyles, "relative")}>
-          <View ratio={1.4} class="overflow-hidden card">
+          <View ratio={1.4} class="overflow-hidden card rounded-2px">
             {record.fileType == "video" ? (
               <video src={record.file?.url} class="h-1/1 w-1/1" />
             ) : (
               <Image
                 class="h-1/1 w-1/1"
-                src={
-                  record?.thumbnail || record?.thumbnailUrl || record.file?.url
-                }
+                src={src}
               />
             )}
 
@@ -89,7 +88,7 @@ export default defineUI({
 
 const itemStyles = css`
   .card {
-    background-color: #e1e5e8;
+    background-color: rgba(255, 255, 255, 0.1);
   }
   .orange {
     background-color: rgba(232, 139, 0, 0.5);

yarn.lock

@@ -956,6 +956,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.17.2":
+  version "7.22.6"
+  resolved "http://124.70.149.18:4873/@babel%2fruntime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@^7.0.0", "@babel/template@^7.18.10", "@babel/template@^7.20.7":
   version "7.21.9"
   resolved "http://124.70.149.18:4873/@babel%2ftemplate/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb"
@@ -3697,6 +3704,11 @@ copy-anything@^2.0.1:
   dependencies:
     is-what "^3.14.1"
 
+copy-text-to-clipboard@^3.0.1:
+  version "3.2.0"
+  resolved "http://124.70.149.18:4873/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz#0202b2d9bdae30a49a53f898626dcc3b49ad960b"
+  integrity sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==
+
 copy-to@^2.0.1:
   version "2.0.1"
   resolved "http://124.70.149.18:4873/copy-to/-/copy-to-2.0.1.tgz#2680fbb8068a48d08656b6098092bdafc906f4a5"
@@ -3721,6 +3733,11 @@ core-js-compat@^3.25.1, core-js-compat@^3.8.3:
   dependencies:
     browserslist "^4.21.5"
 
+core-js@^3.11.0:
+  version "3.31.1"
+  resolved "http://124.70.149.18:4873/core-js/-/core-js-3.31.1.tgz#f2b0eea9be9da0def2c5fece71064a7e5d687653"
+  integrity sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==
+
 core-js@^3.15.1, core-js@^3.8.3:
   version "3.30.2"
   resolved "http://124.70.149.18:4873/core-js/-/core-js-3.30.2.tgz#6528abfda65e5ad728143ea23f7a14f0dcf503fc"
@@ -6262,6 +6279,11 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+mutation-observer@^1.0.3:
+  version "1.0.3"
+  resolved "http://124.70.149.18:4873/mutation-observer/-/mutation-observer-1.0.3.tgz#42e9222b101bca82e5ba9d5a7acf4a14c0f263d0"
+  integrity sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==
+
 mz-modules@^2.1.0:
   version "2.1.0"
   resolved "http://124.70.149.18:4873/mz-modules/-/mz-modules-2.1.0.tgz#7f529877afd0d42f409a7463b96986d61cfbcf96"
@@ -8568,6 +8590,16 @@ vary@~1.1.2:
   resolved "http://124.70.149.18:4873/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vconsole@^3.15.1:
+  version "3.15.1"
+  resolved "http://124.70.149.18:4873/vconsole/-/vconsole-3.15.1.tgz#569a8ab15f353259527bbcf004f02946b4482cff"
+  integrity sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    copy-text-to-clipboard "^3.0.1"
+    core-js "^3.11.0"
+    mutation-observer "^1.0.3"
+
 vm2@^3.9.17:
   version "3.9.19"
   resolved "http://124.70.149.18:4873/vm2/-/vm2-3.9.19.tgz#be1e1d7a106122c6c492b4d51c2e8b93d3ed6a4a"