update

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

@@ -6,6 +6,10 @@ import { ICompKeys } from "@/modules/editor/typings";
 import { Empty, Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { defineUI } from "queenjs";
+import { useAuth } from "@queenjs-modules/auth";
+import { Dropdown, Tag } from "ant-design-vue";
+import dayjs from "dayjs";
+import Menu from "./Menu";
 
 export default defineUI({
   props: {
@@ -36,13 +40,19 @@ const Comp = defineUI({
         compKey: string;
         name: string;
         thumbnail: string;
+        published?: boolean;
+        createTime?: string;
       }[]
     >().isRequired,
   },
   setup(props) {
     const editor = useEditor();
+    const auth = useAuth();
 
     return () => {
+      //@ts-ignore
+      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
+
       if (props.components.length == 0) return <Empty />;
       return (
         <Container
@@ -55,10 +65,16 @@ const Comp = defineUI({
           }}
         >
           {props.components.map((item) => {
+            const items = ["删除"];
+
+            if (isSys) {
+              item.published ? items.push("取消发布") : items.push("发布平台");
+            }
+
             return (
               <Draggable>
                 <div
-                  class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                  class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
                   key={item.compKey}
                   title={item.name}
                   onClick={() =>
@@ -70,6 +86,31 @@ const Comp = defineUI({
                     src={item.thumbnail}
                     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> */}
+                      <div class="flex items-center text-opacity-60 text-white text-12px">
+                        {dayjs(item.createTime).format("YYYY.MM.DD")}
+                      </div>
+                    </div>
+                    <Menu
+                      items={items}
+                      onMenu={(name) => {
+                        console.log("name", name);
+                      }}
+                    />
+                  </div>
                 </div>
               </Draggable>
             );

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

@@ -0,0 +1,33 @@
+import { IconMore } from "@queenjs/icons"
+import { Dropdown, Menu} from "ant-design-vue"
+import { defineComponent} from "vue"
+import { array } from "vue-types"
+export default defineComponent({
+    props: {
+        items: array<string>().isRequired
+    },
+    emits:["menu"],
+    setup(props, {emit}) {
+        return ()=>(
+            <Dropdown
+                placement="bottom"
+                overlay={
+                  <Menu class="w-90px">
+
+                    {
+                         props.items.map(item=>(
+                            <Menu.Item key={item}>
+                                <div onClick={() =>{ 
+                                    emit("menu", item)
+                                }}>{item}</div>
+                          </Menu.Item>
+                         ))
+                    }
+                  </Menu>
+                }
+              >
+                <IconMore class="ml-10px text-22px cursor-pointer" />
+            </Dropdown>
+        )
+    },
+})

src/modules/editor/controllers/CompUICtrl/index.ts

@@ -22,6 +22,8 @@ interface CompItem {
   thumbnail: string;
   Component: any;
   Form: any;
+  published?: boolean;
+  createTime?: string;
   createComp: (...args: any) => DesignComp;
 }
 
@@ -56,13 +58,17 @@ export class CompUICtrl extends ModuleControl<EditorModule> {
     >(this.module.config.httpConfig);
     listCtrl.setCrudPrefix("/frame");
     listCtrl.state.size = 999;
+    listCtrl.state.query = {type: "comp"};
+    
     await listCtrl.loadPage(1);
 
-    listCtrl.state.list.forEach((d) => {
+    listCtrl.state.list.forEach((d:any) => {
       const compItem: CompItem = {
         compKey: d._id,
         compType: "user",
         name: d.title,
+        createTime: d.createTime,
+        published: d.published,
         thumbnail: d.thumbnail || Dict_Imgs.Default,
         Component: markRaw(basicUI.Container.Component),
         Form: markRaw(basicUI.Container.Form),