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

src/assets/icons/components/IconCloud.tsx

@@ -1,13 +0,0 @@
-
-import { createIcon } from '@queenjs/icons';
-export const IconCloud = createIcon(<svg viewBox="0 0 1024 1024">
-    <path
-        d="M510.723192 787.364921a21.280133 21.280133 0 0 1-21.280133-21.280133v-255.361596a21.280133 21.280133 0 0 1 13.193682-19.577722 20.003325 20.003325 0 0 1 22.982544 4.681629l127.680798 127.680798a20.85453 20.85453 0 0 1-29.792186 29.792186l-91.504572-91.078969V766.084788a21.280133 21.280133 0 0 1-21.280133 21.280133z"
-        fill="currentColor"></path>
-    <path
-        d="M383.042394 659.684123a20.003325 20.003325 0 0 1-14.896093-6.38404 20.428928 20.428928 0 0 1 0-29.792186l127.680798-127.680798a20.85453 20.85453 0 0 1 29.792186 29.792186l-127.680798 127.680798a20.003325 20.003325 0 0 1-14.896093 6.38404zM297.921862 787.364921H234.081463a170.241064 170.241064 0 0 1-170.241064-170.241064 170.241064 170.241064 0 0 1 170.241064-170.241064H297.921862a21.280133 21.280133 0 0 1 0 42.560266H234.081463a127.680798 127.680798 0 0 0-127.680798 127.680798 127.680798 127.680798 0 0 0 127.680798 127.680798H297.921862a21.280133 21.280133 0 0 1 0 42.560266zM787.364921 787.364921H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a127.680798 127.680798 0 0 0 127.680798-127.680798 127.680798 127.680798 0 0 0-127.680798-127.680798H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a170.241064 170.241064 0 0 1 170.241064 170.241064 170.241064 170.241064 0 0 1-170.241064 170.241064z"
-        fill="currentColor"></path>
-    <path
-        d="M723.524522 489.443059a21.280133 21.280133 0 0 1-21.280133-21.280133 191.521197 191.521197 0 0 0-383.042394 0 21.280133 21.280133 0 0 1-42.560266 0 234.081463 234.081463 0 0 1 468.162926 0 21.280133 21.280133 0 0 1-21.280133 21.280133z"
-        fill="currentColor"></path>
-</svg>)

src/assets/icons/components/IconFloat.tsx

@@ -1,3 +0,0 @@
-
-import { createIcon } from '@queenjs/icons';
-export const IconFloat = createIcon(<svg viewBox="0 0 15.557 15.557"><g transform="translate(-1383.222 -111.222)"><g transform="translate(1377.328 107.645)"><path fill="none" stroke="#666" stroke-linecap="round" fill-rule="evenodd" d="M13.672,16.344a5.672,5.672,0,1,0-4.011-1.661A5.655,5.655,0,0,0,13.672,16.344Z" transform="translate(0 0)"/><path fill="none" stroke="#666" stroke-linecap="round" d="M19.473,36.556a7.8,7.8,0,0,1-11.03,0" transform="translate(-0.286 -20.37)"/></g><line fill="none" stroke="#666" stroke-linecap="round" y1="20" transform="translate(1398.071 126.071) rotate(135)"/></g></svg>)

src/assets/icons/index.ts

@@ -8,7 +8,6 @@ export * from "./components/IconAlignL";
 export * from "./components/IconAlignR";
 export * from "./components/IconApplication";
 export * from "./components/IconClear";
-export * from "./components/IconCloud";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";

src/assets/icons/svg/cloud.svg

@@ -1,11 +0,0 @@
-<svg viewBox="0 0 1024 1024">
-    <path
-        d="M510.723192 787.364921a21.280133 21.280133 0 0 1-21.280133-21.280133v-255.361596a21.280133 21.280133 0 0 1 13.193682-19.577722 20.003325 20.003325 0 0 1 22.982544 4.681629l127.680798 127.680798a20.85453 20.85453 0 0 1-29.792186 29.792186l-91.504572-91.078969V766.084788a21.280133 21.280133 0 0 1-21.280133 21.280133z"
-        fill="currentColor"></path>
-    <path
-        d="M383.042394 659.684123a20.003325 20.003325 0 0 1-14.896093-6.38404 20.428928 20.428928 0 0 1 0-29.792186l127.680798-127.680798a20.85453 20.85453 0 0 1 29.792186 29.792186l-127.680798 127.680798a20.003325 20.003325 0 0 1-14.896093 6.38404zM297.921862 787.364921H234.081463a170.241064 170.241064 0 0 1-170.241064-170.241064 170.241064 170.241064 0 0 1 170.241064-170.241064H297.921862a21.280133 21.280133 0 0 1 0 42.560266H234.081463a127.680798 127.680798 0 0 0-127.680798 127.680798 127.680798 127.680798 0 0 0 127.680798 127.680798H297.921862a21.280133 21.280133 0 0 1 0 42.560266zM787.364921 787.364921H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a127.680798 127.680798 0 0 0 127.680798-127.680798 127.680798 127.680798 0 0 0-127.680798-127.680798H723.524522a21.280133 21.280133 0 0 1 0-42.560266h63.840399a170.241064 170.241064 0 0 1 170.241064 170.241064 170.241064 170.241064 0 0 1-170.241064 170.241064z"
-        fill="currentColor"></path>
-    <path
-        d="M723.524522 489.443059a21.280133 21.280133 0 0 1-21.280133-21.280133 191.521197 191.521197 0 0 0-383.042394 0 21.280133 21.280133 0 0 1-42.560266 0 234.081463 234.081463 0 0 1 468.162926 0 21.280133 21.280133 0 0 1-21.280133 21.280133z"
-        fill="currentColor"></path>
-</svg>

src/modules/editor/components/Viewport/Content/index.tsx

@@ -162,7 +162,7 @@ const meatureStyle = css`
   width: 100%;
   height: 100%;
   left: 0;
-  top: 56px;
+  top: 0;
   z-index: 999;
   pointer-events: none;
 

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

@@ -1,8 +1,6 @@
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
-import { css } from "@linaria/core";
 import { useReactive } from "@queenjs/use";
-import { Tooltip } from "ant-design-vue";
 import { defineComponent } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 
@@ -21,50 +19,35 @@ export default defineComponent({
 
     return () => {
       return (
-        <Container
-          class={basicStyle}
-          orientation="horizontal"
-          behaviour="copy"
-          group-name="canvas"
-          get-child-payload={(index: number) => {
-            return state.basicComps[index].compKey;
-          }}
-        >
-          {state.basicComps.map((item) => {
-            return (
-              <Draggable key={item.compKey} class="!leading-0">
-                <div
-                  class="draggable-item"
-                  onClick={() =>
-                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
-                  }
-                >
-                  <span>
-                    <img
-                      class="h-24px m-4px pointer-events-none"
-                      src={item.thumbnail}
-                    />
-                  </span>
-                  <span class="pl-10px">{item.name}</span>
-                </div>
-              </Draggable>
-            );
-          })}
-        </Container>
+        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
+          <Container
+            class="grid grid-cols-3 gap-10px"
+            behaviour="copy"
+            group-name="canvas"
+            get-child-payload={(index: number) => {
+              return state.basicComps[index].compKey;
+            }}
+          >
+            {state.basicComps.map((item) => {
+              return (
+                <Draggable key={item.compKey}>
+                  <div
+                    class="draggable-item py-10px bg-dark-200 rounded text-center cursor-pointer hover:bg-dark-300 transition"
+                    onClick={() =>
+                      editor.actions.clickCompToDesign(
+                        item.compKey as ICompKeys
+                      )
+                    }
+                  >
+                    <img class="h-28px m-6px" src={item.thumbnail} />
+                    <div class="text-center mt-5px">{item.name}</div>
+                  </div>
+                </Draggable>
+              );
+            })}
+          </Container>
+        </div>
       );
     };
   },
 });
-
-const basicStyle = css`
-  display: flex;
-  align-items: center;
-  .draggable-item {
-    border-radius: 4px;
-    margin: 0 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: darken(@inf-component-bg, 3%);
-    }
-  }
-`;

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

@@ -1,79 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { ICompKeys } from "@/modules/editor/typings";
-import { css } from "@linaria/core";
-import { useReactive } from "@queenjs/use";
-import { Tooltip } from "ant-design-vue";
-import { defineComponent } from "vue";
-import { Container, Draggable } from "vue-dndrop";
-
-export default defineComponent({
-  setup() {
-    const editor = useEditor();
-    const { compUICtrl } = editor.controls;
-
-    const state = useReactive(() => ({
-      basicComps() {
-        return [
-          "Web3D",
-          "Line",
-          "Arc",
-          "Ellipse",
-          "Triangle",
-          "Rectage",
-          "Polygon",
-          "PolygonNormal",
-          "Curve",
-        ].map((key) => compUICtrl.state.components.get(key) as any);
-      },
-    }));
-
-    return () => {
-      return (
-        <Container
-          class={basicStyle}
-          orientation="horizontal"
-          behaviour="copy"
-          group-name="canvas"
-          get-child-payload={(index: number) => {
-            return state.basicComps[index].compKey;
-          }}
-        >
-          {state.basicComps.map((item) => {
-            return (
-              <Draggable key={item.compKey} class="!leading-0">
-                <div
-                  class="draggable-item"
-                  onClick={() =>
-                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
-                  }
-                >
-                  <Tooltip title={item.name}>
-                    <span>
-                      <img
-                        class="h-24px m-4px pointer-events-none"
-                        src={item.thumbnail}
-                      />
-                    </span>
-                  </Tooltip>
-                </div>
-              </Draggable>
-            );
-          })}
-        </Container>
-      );
-    };
-  },
-});
-
-const basicStyle = css`
-  display: flex;
-  align-items: center;
-  .draggable-item {
-    border-radius: 4px;
-    margin: 0 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: darken(@inf-component-bg, 3%);
-    }
-  }
-`;

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

@@ -0,0 +1,26 @@
+import { Button } from "ant-design-vue";
+
+import { useEditor } from "@/modules/editor";
+import { IconAddLine } from "@queenjs/icons";
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    const editor = useEditor();
+
+    return () => {
+      return (
+        <div class="pt-20px">
+          <Button
+            block
+            type="primary"
+            onClick={() => editor.actions.clickCompToDesign("Web3D")}
+          >
+            <IconAddLine class="mr-5px text-14px" />
+            添加3D组件
+          </Button>
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,65 +1,58 @@
-import { Container, Draggable } from "vue-dndrop";
-
 import { useEditor } from "@/modules/editor";
-import { useResource } from "@/modules/resource";
-import { Image, Loadmore } from "@queenjs/ui";
-import Empty from "@queenjs/ui/empty";
-import { defineUI } from "queenjs";
+import { ICompKeys } from "@/modules/editor/typings";
+import { useReactive } from "@queenjs/use";
+import { defineComponent } from "vue";
+import { Container, Draggable } from "vue-dndrop";
 
-export default defineUI({
+export default defineComponent({
   setup() {
     const editor = useEditor();
-    const resource = useResource();
-    resource.controls.sysSvgListCtrl.hasLimit = true;
-    resource.controls.sysSvgListCtrl.loadPage(1);
+    const { compUICtrl } = editor.controls;
 
-    return () => {
-      const ctrl = resource.controls.sysSvgListCtrl;
-      const dataSource = ctrl.state.list;
+    const state = useReactive(() => ({
+      basicComps() {
+        return [
+          "Line",
+          "Arc",
+          "Ellipse",
+          "Triangle",
+          "Rectage",
+          "Polygon",
+          "PolygonNormal",
+          "Curve",
+        ].map((key) => compUICtrl.state.components.get(key) as any);
+      },
+    }));
 
+    return () => {
       return (
         <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
           <Container
-            class="grid grid-cols-4 gap-8px"
+            class="grid grid-cols-3 gap-10px"
             behaviour="copy"
             group-name="canvas"
-            animation-duration={0}
             get-child-payload={(index: number) => {
-              return {
-                type: "svg",
-                data: dataSource[index],
-              };
+              return state.basicComps[index].compKey;
             }}
           >
-            {dataSource.map((item: any) => {
+            {state.basicComps.map((item) => {
               return (
-                <Draggable key={item._id}>
+                <Draggable key={item.compKey} class="!leading-0">
                   <div
-                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
-                    key={item._id}
-                    // title={item.title}
-                    // onClick={() => editor.actions.clickFrameToDesign(item)}
+                    title={item.name}
+                    class="draggable-item text-center leading-50px bg-[#303030] rounded cursor-pointer hover:bg-dark-100 transition"
+                    onClick={() =>
+                      editor.actions.clickCompToDesign(
+                        item.compKey as ICompKeys
+                      )
+                    }
                   >
-                    <Image
-                      class="w-full p-10px rounded pointer-events-none"
-                      src={item.file.url}
-                      // size={240}
-                    />
+                    <img class="h-34px m-4px" src={item.thumbnail} />
                   </div>
                 </Draggable>
               );
             })}
           </Container>
-          {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/Shapes.v1.tsx

@@ -0,0 +1,67 @@
+import { Container, Draggable } from "vue-dndrop";
+
+import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
+import { Image, Loadmore } from "@queenjs/ui";
+import Empty from "@queenjs/ui/empty";
+import { defineUI } from "queenjs";
+
+export default defineUI({
+  setup() {
+    const editor = useEditor();
+    const resource = useResource();
+    resource.controls.sysSvgListCtrl.hasLimit = true;
+    resource.controls.sysSvgListCtrl.loadPage(1);
+
+    return () => {
+      const ctrl = resource.controls.sysSvgListCtrl;
+      const dataSource = ctrl.state.list;
+
+      return (
+        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
+          <Container
+            class="grid grid-cols-4 gap-8px"
+            behaviour="copy"
+            group-name="canvas"
+            animation-duration={0}
+            get-child-payload={(index: number) => {
+              return {
+                type: "svg",
+                data: dataSource[index],
+              };
+            }}
+          >
+            {dataSource.map((item: any) => {
+              return (
+                <Draggable key={item._id}>
+                  <div
+                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                    key={item._id}
+                    // title={item.title}
+                    // onClick={() => editor.actions.clickFrameToDesign(item)}
+                  >
+                    <Image
+                      class="w-full p-10px rounded pointer-events-none"
+                      src={item.file.url}
+                      // size={240}
+                    />
+                  </div>
+                </Draggable>
+              );
+            })}
+          </Container>
+          {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

@@ -1,3 +1,4 @@
+import { CloudUploadOutlined } from "@ant-design/icons-vue";
 import { css, cx } from "@linaria/core";
 import { Button, Tooltip } from "ant-design-vue";
 import { computed, reactive } from "vue";
@@ -5,8 +6,8 @@ import { computed, reactive } from "vue";
 import {
   IconAi,
   IconApplication,
-  IconCloud,
   IconImage,
+  IconShape,
   IconText,
   IconTpl,
   IconVideo,
@@ -16,7 +17,9 @@ import { defineUI } from "queenjs";
 import { CompTree } from "../SliderRight/CompTree";
 import AiText from "./AiText";
 import Application from "./Application";
+import Comp3d from "./Comp3d";
 import CustomComps from "./CustomComps";
+import Shapes from "./Shapes";
 import { Sources } from "./Sources";
 import Templates from "./Templates";
 import Text from "./Text";
@@ -54,11 +57,11 @@ const tabs = [
     component: Sources,
     props: { sourceType: "Image", sourceFrom: "system" },
   },
-  // {
-  //   title: "形状",
-  //   icon: IconShape,
-  //   component: Shapes,
-  // },
+  {
+    title: "形状",
+    icon: IconShape,
+    component: Shapes,
+  },
   {
     title: "视频",
     icon: IconVideo,
@@ -70,9 +73,14 @@ const tabs = [
     icon: IconApplication,
     component: Application,
   },
+  {
+    title: "3D",
+    icon: IconCube,
+    component: Comp3d,
+  },
   {
     title: "已上传",
-    icon: IconCloud,
+    icon: CloudUploadOutlined,
     content: [
       {
         title: "图片",
@@ -103,7 +111,7 @@ export default defineUI({
     // @ts-ignore
     const state = reactive({
       tabIndex: 0,
-      compIndexs: [0, 0, 0, 0, 0, 0, 0],
+      compIndexs: [0, 0, 0, 0, 0, 0, 0, 0, 0],
       currentTab: computed(() => {
         return tabs[state.tabIndex];
       }),
@@ -120,7 +128,7 @@ export default defineUI({
 
       return (
         <div class="h-full flex">
-          <div class="flex flex-col w-70px py-16px border-right !border-2px">
+          <div class="flex flex-col w-70px py-10px border-right !border-2px overflow-hidden">
             {tabs.map((record, index) => {
               return (
                 <>
@@ -129,7 +137,7 @@ export default defineUI({
                     key={index}
                     class={cx(
                       tabItem,
-                      "relative mt-10px py-8px text-center cursor-pointer text-light-50 transition",
+                      "relative my-5px text-center cursor-pointer text-light-50 transition",
                       state.tabIndex == index && "active"
                     )}
                     onClick={() => (state.tabIndex = index)}
@@ -173,18 +181,22 @@ export default defineUI({
 });
 
 const tabItem = css`
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 3px;
+    background-color: transparent;
+    transition: all 0.3s ease-in-out;
+  }
+  &.active,
   &:hover {
     color: @inf-primary-color;
   }
   &.active {
-    color: @inf-primary-color;
     &:before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 3px;
       background-color: @inf-primary-color;
     }
   }

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

@@ -1,81 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { css } from "@linaria/core";
-import { useReactive } from "@queenjs/use";
-import { defineUI } from "queenjs";
-import CustomComps from "./CustomComps";
-import Frames from "./Templates";
-import { Sources } from "./Sources";
-
-export default defineUI({
-  setup() {
-    const editor = useEditor();
-    const { compUICtrl, frameControl } = editor.controls;
-
-    const tabs = [
-      { label: "模板", value: "frame" },
-      { label: "平台组件", value: "senior" },
-      { label: "我的组件", value: "user" },
-      { label: "我的素材", value: "source" },
-    ];
-
-    const state = useReactive(() => ({
-      currTabType: "frame",
-      basicComps() {
-        return ["Text", "Image", "Video", "Web3D"].map(
-          (key) => compUICtrl.state.components.get(key) as any
-        );
-      },
-      currComps() {
-        return Array.from(compUICtrl.state.components.values()).filter(
-          (item) => state.currTabType === item.compType
-        );
-      },
-    }));
-
-    return () => (
-      <div class="h-full flex flex-col">
-        <div class="p-16px border-bottom !border-2px">资源中心</div>
-        <div class="m-16px flex-1 flex flex-col h-0">
-          <div class={tabStyle}>
-            {tabs.map((item) => {
-              return (
-                <span
-                  class={[state.currTabType === item.value && "checked"]}
-                  onClick={() => (state.currTabType = item.value)}
-                >
-                  {item.label}
-                </span>
-              );
-            })}
-          </div>
-          {state.currTabType == "frame" && (
-            <Frames
-              class="flex-1 -mx-16px p-16px"
-              // dataSource={frameControl.listCtrl.state.list}
-            />
-          )}
-          {/* {(state.currTabType == "user" || state.currTabType == "senior") && (
-            <CustomComps
-              class="flex-1 -mx-16px p-16px"
-              components={state.currComps}
-            />
-          )} */}
-          {state.currTabType == "source" && (
-            <Sources class="flex-1 -mx-16px p-16px" />
-          )}
-        </div>
-      </div>
-    );
-  },
-});
-
-const tabStyle = css`
-  @apply text-16px my-16px space-x-10px;
-
-  span {
-    cursor: pointer;
-    &.checked {
-      font-weight: bold;
-    }
-  }
-`;

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -3,7 +3,6 @@ import { useLauncher } from "@/modules/launcher";
 import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { TipIcons } from "../../TipIcons";
-import BaseComp from "../Slider/SliderLeft/BaseComp";
 
 export default defineUI({
   setup() {
@@ -11,13 +10,10 @@ export default defineUI({
     const launcher = useLauncher();
 
     return () => (
-      <div class="flex items-center justify-between px-15px py-12px">
-        <div class="space-x-10px z-999 flex items-center">
-          <BaseComp />
-        </div>
-        <div class="space-x-10px z-999">
+      <div>
+        <div class="absolute right-25px top-30px space-x-10px z-999">
           <TipIcons.Screenshot
-            class={btnCls}
+            class={bottomBtnStyles}
             onClick={() => actions.updateThumbnailByScreenshot(true)}
           />
         </div>
@@ -36,14 +32,6 @@ export default defineUI({
   },
 });
 
-const btnCls = css`
-  padding: 6px;
-  font-size: 18px;
-  &.active {
-    background-color: darken(@inf-component-bg, 3%);
-  }
-`;
-
 const bottomBtnStyles = css`
   padding: 10px;
   border-radius: 50%;

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

@@ -19,7 +19,7 @@ export default defineUI({
       <div class="flex flex-col h-1/1">
         <slots.Header class="px-16px py-10px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
-          <slots.SliderLeft class="w-330px bg-component border-right !border-2px" />
+          <slots.SliderLeft class="w-370px bg-component border-right !border-2px" />
           <div class="flex-1 relative flex flex-col overflow-hidden">
             <slots.Toolbar />
             <slots.Content />