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

src/assets/icons/components/IconCombination.tsx

@@ -1,3 +1,3 @@
 
 import { createIcon } from '@queenjs/icons';
-export const IconCombination = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M781.245-842.839v12.768h12.79v-5.147h5.216v-12.844H786.4v5.223Z" transform="translate(456.753 -487.933)"/></g></svg>)
+export const IconCombination = createIcon(<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><rect fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" width="15" height="15" transform="translate(1247 -1337.607) rotate(45)"/><circle fill="none" stroke="currentColor" stroke-width="1.2px" cx="2.9" cy="2.9" r="2.9" transform="translate(1244.1 -1329.9)"/></g></svg>)

src/assets/icons/index.ts

@@ -12,6 +12,7 @@ export * from "./components/IconCombination";
 export * from "./components/IconCroperr";
 export * from "./components/IconCross";
 export * from "./components/IconCube";
+export * from "./components/IconEmpty";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
 export * from "./components/IconGroup";

src/assets/icons/svg/combination.svg

@@ -1 +1 @@
-<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px" d="M781.245-842.839v12.768h12.79v-5.147h5.216v-12.844H786.4v5.223Z" transform="translate(456.753 -487.933)"/></g></svg>
+<svg viewBox="0 0 28 28"><g transform="translate(-1233 1341)"><rect fill="none" width="28" height="28" transform="translate(1233 -1341)"/><rect fill="none" stroke="currentColor" stroke-width="1.2px" stroke-linejoin="round" width="15" height="15" transform="translate(1247 -1337.607) rotate(45)"/><circle fill="none" stroke="currentColor" stroke-width="1.2px" cx="2.9" cy="2.9" r="2.9" transform="translate(1244.1 -1329.9)"/></g></svg>

src/components/Empty.tsx

@@ -0,0 +1,21 @@
+import { defineComponent } from "vue";
+import { string } from "vue-types";
+
+import { IconEmpty } from "@/assets/icons";
+
+export default defineComponent({
+  props: {
+    description: string().def("暂无任何内容..."),
+  },
+  setup(props) {
+    return () => {
+      const { description } = props;
+      return (
+        <div class="w-1/1 py-50px text-center">
+          <IconEmpty class="text-80px" />
+          <div class="mt-20px text-gray text-12px">{description}</div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,80 +1,102 @@
+import { cx } from "@linaria/core";
+import { Tag } from "ant-design-vue";
+import dayjs from "dayjs";
+import { onMounted, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { any, bool, string } from "vue-types";
+import { string } from "vue-types";
 
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
-import { ICompKeys } from "@/modules/editor/typings";
-import { Empty, Image } from "@queenjs/ui";
-import { useReactive } from "@queenjs/use";
-import { defineUI, queenApi } from "queenjs";
+import { useResource } from "@/modules/resource";
 import { useAuth } from "@queenjs-modules/auth";
-import { Dropdown, Tag } from "ant-design-vue";
-import dayjs from "dayjs";
+import { Image } from "@queenjs/ui";
+import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
-import { useResource } from "@/modules/resource";
-import { onMounted} from "vue";
 
 export default defineUI({
-
+  props: {
+    sourceType: string<"comp" | "text" | "shape">().def("comp"),
+  },
   setup(props) {
     const editor = useEditor();
     const auth = useAuth();
     const resource = useResource();
+
     const listCtrl = resource.controls.CustCompListCtrl;
     listCtrl.hasLimit = true;
 
-     //@ts-ignore
+    //@ts-ignore
     let isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
-    onMounted(() =>  {
-        listCtrl.loadPage(1)
+
+    onMounted(() => {
+      //@ts-ignore
+      listCtrl.state.query.type = props.sourceType;
+      listCtrl.loadPage(1);
     });
 
+    watch(
+      () => props.sourceType,
+      () => {
+        //@ts-ignore
+        listCtrl.state.query.type = props.sourceType;
+        listCtrl.loadPage(1);
+      }
+    );
+
     return () => {
+      const { sourceType } = props;
 
-      if (listCtrl.state.list.length == 0) return <Empty />;
+      if (listCtrl.state.list.length == 0) return <Empty class="pt-150px" />;
 
       return (
-        <Container
-          class="space-y-10px scrollbar"
-          behaviour="copy"
-          group-name="canvas"
-          animation-duration={0}
-          get-child-payload={(index: number) => {
-            return {type:"CompCard", data:  {id: listCtrl.state.list[index]._id, isSys: isSys}};
-          }}
-        >
-          {listCtrl.state.list.map((item:any) => {
-            const items = ["删除"];
+        <div class="scrollbar">
+          <Container
+            class={cx(
+              "grid gap-10px",
+              sourceType == "comp" ? "grid-cols-1" : "grid-cols-2"
+            )}
+            behaviour="copy"
+            group-name="canvas"
+            animation-duration={0}
+            get-child-payload={(index: number) => {
+              return {
+                type: "CompCard",
+                data: { id: listCtrl.state.list[index]._id, isSys: isSys },
+              };
+            }}
+          >
+            {listCtrl.state.list.map((item: any) => {
+              const items = ["删除"];
 
-            if (isSys) {
-              item.published ? items.push("取消发布") : items.push("发布平台");
-            }
-
-            return (
-              <Draggable>
-                <div
-                  class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
-                  key={item.compKey}
-                  title={item.name}
-                >
-                  <Image
-                    class="w-full rounded"
-                    src={item.thumbnail}
-                    onClick={() => {
-                        editor.actions.clickCompUserToDesign(item._id, isSys)
-                    }
-                    }
-                    size={240}
-                  />
-
-                  {isSys && (
-                    <Tag
-                      color={item.published ? "green" : "#E88B00"}
-                      // color="rgba(0, 0, 0, 0.4)"
-                      class="absolute top-0 left-0 z-1 !rounded-none"
-                    >
-                      {item.published ? "已发布" : "未发布"}
-                    </Tag>
-                  )}
+              if (isSys) {
+                item.published
+                  ? items.push("取消发布")
+                  : items.push("发布平台");
+              }
+              return (
+                <Draggable>
+                  <div
+                    class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
+                    key={item.compKey}
+                    title={item.name}
+                  >
+                    <Image
+                      class="w-full rounded"
+                      src={item.thumbnail}
+                      onClick={() => {
+                        editor.actions.clickCompUserToDesign(item._id, isSys);
+                      }}
+                      size={240}
+                    />
+                    {isSys && (
+                      <Tag
+                        color={item.published ? "green" : "#E88B00"}
+                        // color="rgba(0, 0, 0, 0.4)"
+                        class="absolute top-0 left-0 z-1 !rounded-none"
+                      >
+                        {item.published ? "已发布" : "未发布"}
+                      </Tag>
+                    )}
                     <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
                       <div class="flex-1 w-0">
                         {/* <div class="text-white text-bold truncate">{record.title}</div> */}
@@ -87,23 +109,23 @@ export default defineUI({
                         onMenu={async (name) => {
                           console.log("name", name);
                           if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item)
+                            await resource.actions.deleteCustomComp(item);
                             listCtrl.fresh();
-
-                            queenApi.messageSuccess("删除成功!")
+                            queenApi.messageSuccess("删除成功!");
                             return;
                           }
-                          const pub = (name == "发布平台");
-                          await resource.actions.publishFrame(item, pub)
+                          const pub = name == "发布平台";
+                          await resource.actions.publishFrame(item, pub);
                           item.published = pub;
                         }}
                       />
                     </div>
-                </div>
-              </Draggable>
-            );
-          })}
-        </Container>
+                  </div>
+                </Draggable>
+              );
+            })}
+          </Container>
+        </div>
       );
     };
   },

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

@@ -3,14 +3,15 @@ import { any, bool, string } from "vue-types";
 
 import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
-import { Empty, Image } from "@queenjs/ui";
-import { useReactive } from "@queenjs/use";
-import { defineUI, queenApi } from "queenjs";
+import { useResource } from "@/modules/resource";
 import { useAuth } from "@queenjs-modules/auth";
-import { Dropdown, Tag } from "ant-design-vue";
+import { Image } from "@queenjs/ui";
+import { useReactive } from "@queenjs/use";
+import { Tag } from "ant-design-vue";
 import dayjs from "dayjs";
+import { defineUI, queenApi } from "queenjs";
 import Menu from "./Menu";
-import { useResource } from "@/modules/resource";
+import Empty from "@/components/Empty";
 
 export default defineUI({
   props: {
@@ -62,7 +63,7 @@ const Comp = defineUI({
       //@ts-ignore
       const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
 
-      if (props.components.length == 0) return <Empty />;
+      if (props.components.length == 0) return <Empty class="pt-150px" />;
       return (
         <Container
           class="space-y-10px scrollbar"
@@ -119,13 +120,13 @@ const Comp = defineUI({
                         onMenu={async (name) => {
                           console.log("name", name);
                           if (name == "删除") {
-                            await resource.actions.deleteCustomComp(item)
+                            await resource.actions.deleteCustomComp(item);
                             // editor.controls.compUICtrl.
-                            queenApi.messageSuccess("删除成功!")
+                            queenApi.messageSuccess("删除成功!");
                             return;
                           }
-                          const pub = (name == "发布平台");
-                          await resource.actions.publishFrame(item, pub)
+                          const pub = name == "发布平台";
+                          await resource.actions.publishFrame(item, pub);
                           item.published = pub;
                         }}
                       />

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

@@ -1,83 +1,80 @@
+import Thumbnail from "@/components/Thumbnail";
 import { css, cx } from "@linaria/core";
+import { useAuth } from "@queenjs-modules/auth";
 import { IconMore } from "@queenjs/icons";
-import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
-import { EyeOutlined } from "@ant-design/icons-vue";
+import { Dropdown, Menu, Tag } from "ant-design-vue";
 import dayjs from "dayjs";
 import { defineUI } from "queenjs";
+import { defineComponent, reactive } from "vue";
 import { any, bool, object } from "vue-types";
-import { useAuth } from "@queenjs-modules/auth";
-import Thumbnail from "@/components/Thumbnail";
-import { reactive, defineComponent} from "vue";
-
 
 const VideoItem = defineComponent({
-    props: {
-      record: object<any>(),
-    },
-    emits: ["click"],
-    setup(props, { emit }) {
-      const state = reactive({
-        play: false,
-      });
-  
-      return () => {
-        const { record } = props;
-        const { play } = state;
-  
-        return (
-          <div
-            style={{ aspectRatio: 1.5 }}
-            class="overflow-hidden cursor-pointer"
-            onMouseenter={() => (state.play = true)}
-            onMouseleave={() => (state.play = false)}
-            onClick={() => emit("click", record.file.url)}
-          >
-            {!play ? (
-              <Thumbnail
-                class="w-1/1 h-1/1"
-                size={240}
-                objectContain={false}
-                src={record.thumbnail}
-              />
-            ) : (
-              <video
-                muted
-                autoplay
-                controls={false}
-                src={record.file.url}
-                class="w-1/1 h-1/1 object-cover"
-              />
-            )}
-          </div>
-        );
-      };
-    },
-  });
-  
-  const ImageItem = defineComponent({
-    props: {
-      record: object<any>(),
-    },
-    emits: ["click"],
-    setup(props, { emit }) {
-      return () => {
-        const { record } = props;
-  
-        return (
-          <Thumbnail
-            size={240}
-            class="draggable-item"
-            style={{ aspectRatio: 1 }}
-            onClick={() => emit("click", record.file.url)}
-            objectContain={true}
-            src={record.file.url}
-          />
-        );
-      };
-    },
-  });
+  props: {
+    record: object<any>(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const state = reactive({
+      play: false,
+    });
+
+    return () => {
+      const { record } = props;
+      const { play } = state;
+
+      return (
+        <div
+          style={{ aspectRatio: 1.5 }}
+          class="overflow-hidden"
+          onMouseenter={() => (state.play = true)}
+          onMouseleave={() => (state.play = false)}
+          onClick={() => emit("click", record.file.url)}
+        >
+          {!play ? (
+            <Thumbnail
+              class="w-1/1 h-1/1"
+              size={240}
+              objectContain={false}
+              src={record.thumbnail}
+            />
+          ) : (
+            <video
+              muted
+              autoplay
+              controls={false}
+              src={record.file.url}
+              class="w-1/1 h-1/1 object-cover"
+            />
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+const ImageItem = defineComponent({
+  props: {
+    record: object<any>(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      const { record } = props;
+
+      return (
+        <Thumbnail
+          size={240}
+          class="draggable-item"
+          style={{ aspectRatio: 1 }}
+          onClick={() => emit("click", record.file.url)}
+          objectContain={true}
+          src={record.file.url}
+        />
+      );
+    };
+  },
+});
 
-  
 export default defineUI({
   props: {
     record: any(),
@@ -88,10 +85,9 @@ export default defineUI({
   setup(props, { emit }) {
     const auth = useAuth();
     const state = reactive({
-        play: false,
+      play: false,
     });
 
-
     return () => {
       const { record } = props;
 
@@ -100,13 +96,15 @@ export default defineUI({
 
       return (
         <div class={cx(itemStyles, "relative")}>
-         {
-            props.isVideo ? <VideoItem onClick={()=>emit("click")}  record={props.record} /> : <ImageItem onClick={()=>emit("click")}  record={props.record} />
-         }
+          {props.isVideo ? (
+            <VideoItem onClick={() => emit("click")} record={props.record} />
+          ) : (
+            <ImageItem onClick={() => emit("click")} record={props.record} />
+          )}
 
           {isSys && props.tagable && (
             <Tag
-              color={record.published? "green": "#E88B00" }
+              color={record.published ? "green" : "#E88B00"}
               // color="rgba(0, 0, 0, 0.4)"
               class="absolute top-0 left-0 z-1 !rounded-none"
             >

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

@@ -1,14 +1,13 @@
-import { defineComponent, onMounted, reactive, watch } from "vue";
+import { defineComponent, onMounted, watch } from "vue";
 import { Container, Draggable } from "vue-dndrop";
-import { object, string } from "vue-types";
+import { string } from "vue-types";
 
-import Thumbnail from "@/components/Thumbnail";
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
 import { Loadmore } from "@queenjs/ui";
-import Empty from "@queenjs/ui/empty";
-import SourceItem from "./SourceItem";
 import { queenApi } from "queenjs";
+import SourceItem from "./SourceItem";
 
 export const Sources = defineComponent({
   props: {
@@ -74,34 +73,33 @@ export const Sources = defineComponent({
             {dataSource.map((item: any) => (
               <Draggable>
                 <SourceItem
-                  class="draggable-item"
+                  class="draggable-item cursor-pointer"
                   record={item}
-                  isVideo = {sourceType == "Video"}
+                  isVideo={sourceType == "Video"}
                   tagable={props.sourceFrom == "user"}
-
                   onClick={() => clickToDesign(item.file.url)}
-                  onMenu={async (name)=>{
-                      console.log(name);
-                      if (name == "delete") {
-                        await resource.actions.deleteMaterial(item);
-                        control.fresh();
-                        queenApi.messageSuccess("删除成功!");
-                        return;
-                      }
+                  onMenu={async (name) => {
+                    console.log(name);
+                    if (name == "delete") {
+                      await resource.actions.deleteMaterial(item);
+                      control.fresh();
+                      queenApi.messageSuccess("删除成功!");
+                      return;
+                    }
 
-                      if (name == "publish" || name== "unpublish") {
-                        const pub = name=="publish"
-                        await resource.actions.publishMaterial(item, pub);
-                        item.published = pub; 
-                        queenApi.messageSuccess("操作成功!");
-                      }
+                    if (name == "publish" || name == "unpublish") {
+                      const pub = name == "publish";
+                      await resource.actions.publishMaterial(item, pub);
+                      item.published = pub;
+                      queenApi.messageSuccess("操作成功!");
+                    }
                   }}
                 />
               </Draggable>
             ))}
           </Container>
           {dataSource.length == 0 ? (
-            <Empty />
+            <Empty class="pt-150px" />
           ) : (
             <Loadmore
               class="mt-20px"
@@ -114,4 +112,4 @@ export const Sources = defineComponent({
       );
     };
   },
-});
+});

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

@@ -1,5 +1,6 @@
+import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
-import { Empty, Image, Loadmore } from "@queenjs/ui";
+import { Image, Loadmore } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { Container, Draggable } from "vue-dndrop";
 
@@ -47,7 +48,7 @@ export default defineUI({
             })}
           </Container>
           {dataSource.length == 0 ? (
-            <Empty />
+            <Empty class="pt-150px" />
           ) : (
             <Loadmore
               class="mt-20px"

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

@@ -1,5 +1,5 @@
 import { cx } from "@linaria/core";
-import { Button, Tooltip } from "ant-design-vue";
+import { Tooltip } from "ant-design-vue";
 import { computed, reactive } from "vue";
 
 import {
@@ -20,12 +20,12 @@ import { CompTree } from "../SliderRight/CompTree";
 import AiText from "./AiText";
 import Application from "./Application";
 import Comp3d from "./Comp3d";
+import CompsUser from "./CompsUser";
 import CustomComps from "./CustomComps";
 import Shapes from "./Shapes";
 import { Sources } from "./Sources";
 import Templates from "./Templates";
 import Text from "./Text";
-import CompsUser from "./CompsUser";
 
 const tabs = [
   {
@@ -89,6 +89,16 @@ const tabs = [
         title: "组合",
         component: CompsUser,
       },
+      {
+        title: "文字",
+        component: CompsUser,
+        props: { sourceType: "text" },
+      },
+      {
+        title: "形状",
+        component: CompsUser,
+        props: { sourceType: "shape" },
+      },
     ],
   },
   {
@@ -148,19 +158,18 @@ export default defineUI({
           </div>
           <div class="flex-1 h-1/1 overflow-hidden flex flex-col">
             {currentTab.content && (
-              <div class="mt-5px ml-10px space-x-10px">
+              <div class="mt-15px mx-5px flex items-center justify-around space-x-1">
                 {currentTab.content?.map((item: any, index: number) => (
-                  <Button
-                    key={index}
-                    type="text"
+                  <span
                     class={cx(
-                      "transition",
-                      currCompIndex == index && "font-bold"
+                      "px-14px py-9px transition cursor-pointer bg-[#303030] text-light-50 text-opacity-70 rounded-4px text-12px hover:(text-[#EA9E40])",
+                      currCompIndex == index &&
+                        "bg-[#EA9E40] bg-opacity-20 text-orange"
                     )}
                     onClick={() => (state.compIndexs[tabIndex] = index)}
                   >
                     {item?.title}
-                  </Button>
+                  </span>
                 ))}
               </div>
             )}

src/modules/resource/index.ts

@@ -88,17 +88,15 @@ export class ResourceModule extends ModuleRoot {
     this.controls.sysSvgListCtrl.setCrudPrefix("/sys/source");
     this.controls.sysSvgListCtrl.state.size = 20;
     this.controls.sysSvgListCtrl.state.query = { fileType: "image" , isSvg: true};
-
+    this.controls.sysSvgListCtrl.state.query = { published: true};
 
     this.controls.CustCompListCtrl.setCrudPrefix("/frame");
     this.controls.CustCompListCtrl.state.size = 20;
-    this.controls.CustCompListCtrl.state.query = { type: "comp"};
+    // this.controls.CustCompListCtrl.state.query = { type: "comp"};
 
     this.controls.sysCompListCtrl.setCrudPrefix("sys/frame");
     this.controls.sysCompListCtrl.state.size = 20;
    
-    this.controls.sysSvgListCtrl.state.query = { published: true};
-
     this.natsBus.init();
   }
 }