update

src/assets/icons/components/IconAdd.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconAdd = createIcon(<svg viewBox="0 0 14.318 14.318"><g transform="translate(-3.4 -3.4)"><path fill="none" stroke="#666" stroke-linejoin="round" stroke-width="1.2px" d="M10.559,17.118A6.559,6.559,0,1,0,4,10.559,6.559,6.559,0,0,0,10.559,17.118Z"/><path fill="none" stroke="#666" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M24,16v5.247" transform="translate(-13.441 -8.065)"/><path fill="none" stroke="#666" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M16,24h5.247" transform="translate(-8.065 -13.441)"/></g></svg>)

src/assets/icons/components/IconResizeY.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconResizeY = createIcon(<svg viewBox="0 0 11.51 17.034"><path fill="#333" stroke="#fff" d="M18316.992,5491.482l-4.549,4.953h2.59v6.089h-2.59l4.549,4.546,4.547-4.546h-2.729v-6.089h2.729Z" transform="translate(-18311.236 -5490.743)"/></svg>)

src/assets/icons/index.ts

@@ -1,5 +1,6 @@
 
 export * from "./components/Icon3D";
+export * from "./components/IconAdd";
 export * from "./components/IconAlignC";
 export * from "./components/IconAlignL";
 export * from "./components/IconAlignR";
@@ -9,5 +10,6 @@ export * from "./components/IconFloatOn";
 export * from "./components/IconLayerDown";
 export * from "./components/IconLayerUp";
 export * from "./components/IconMove";
+export * from "./components/IconResizeY";
 export * from "./components/IconRotate";
 export * from "./components/IconWechat";

src/assets/icons/svg/add.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14.318 14.318"><g transform="translate(-3.4 -3.4)"><path fill="none" stroke="#666" stroke-linejoin="round" stroke-width="1.2px" d="M10.559,17.118A6.559,6.559,0,1,0,4,10.559,6.559,6.559,0,0,0,10.559,17.118Z"/><path fill="none" stroke="#666" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M24,16v5.247" transform="translate(-13.441 -8.065)"/><path fill="none" stroke="#666" stroke-linejoin="round" stroke-width="1.2px" stroke-linecap="round" d="M16,24h5.247" transform="translate(-8.065 -13.441)"/></g></svg>

src/assets/icons/svg/resizeY.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 11.51 17.034"><path fill="#333" stroke="#fff" d="M18316.992,5491.482l-4.549,4.953h2.59v6.089h-2.59l4.549,4.546,4.547-4.546h-2.729v-6.089h2.729Z" transform="translate(-18311.236 -5490.743)"/></svg>

src/controllers/natsController.ts

@@ -13,13 +13,15 @@ export class BusController {
   }
 
   async init(host?: string) {
-    if (this._startInit) return;
+    const wsHost = host ? host : this.getQuery("host");
+    if (this._startInit || !wsHost ) return;
     this._startInit = true;
-    
+  
     queenApi.showLoading("服务连接中...");
-    const wsHost = host ? host : this.getQuery("host");
+   
     
     console.log("ws host=>", wsHost)
+
     
     let ret = false;
     try {

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

@@ -14,6 +14,7 @@ export const { createComp, useCompData } = createCompHooks({
     default: () => [] as string[],
   },
   layout: {
+    size: [750, 700],
     background: {
       color: "#ffffff",
     },

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -41,6 +41,8 @@ export const Transfer = defineComponent({
               left: transferStyle.left,
               width: transferStyle.width,
             }}
+            
+            
           >
             <div
               class={borderStyle}
@@ -49,6 +51,7 @@ export const Transfer = defineComponent({
                 height: transferStyle.height,
               }}
             />
+
             {showTransfer && (
               <>
                 <div
@@ -76,12 +79,6 @@ export const Transfer = defineComponent({
                   class={transformBtnsStyle}
                   style={{ marginBottom: "-" + transferStyle.height }}
                 >
-                  <div
-                    class={transBtnStyle}
-                    onMousedown={(e) => transferCtrl.mousedown(e, "move")}
-                  >
-                    <IconMove />
-                  </div>
                   <div
                     class={transBtnStyle}
                     onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}

src/modules/editor/components/CompUI/basicUI/Transfer/streamCard.tsx

@@ -0,0 +1,190 @@
+import { css } from "@linaria/core";
+import { defineComponent, onMounted, onUnmounted } from "vue";
+import { useEditor } from "../../../..";
+import { IconMove, IconClear, IconAdd, IconResizeY } from "@/assets/icons";
+
+export const StreamCardTransfer = defineComponent({
+  setup() {
+    const editor = useEditor();
+    const { store, controls, helper } = editor;
+    const { streamCardTransferCtrl } = controls;
+    const { transferStyle } = streamCardTransferCtrl;
+
+    onMounted(() => {
+      setTimeout(() => {
+        const pageEl = helper.findRootComp()?.$el;
+        if (pageEl) {
+          streamCardTransferCtrl.init(pageEl.firstChild as HTMLElement);
+          streamCardTransferCtrl.currComp = store.currStreamCard;
+        }
+      });
+    });
+
+    onUnmounted(() => {
+      streamCardTransferCtrl.destroy();
+    });
+
+    return () => {
+      return (
+        transferStyle.width && (
+          <div
+            class="transfer absolute"
+            style={{
+              top: transferStyle.top,
+              left: transferStyle.left,
+              width: transferStyle.width,
+            }}
+          >
+            <div
+              class={borderStyle}
+              style={{
+                width: transferStyle.width,
+                height: transferStyle.height,
+              }}
+            />
+
+            <div
+              class={resizeHeightBtnCls}
+              style={{ top: transferStyle.height }}
+              onMousedown={(e) =>
+                streamCardTransferCtrl.mousedown(e, "resizeY")
+              }
+            >
+              <IconResizeY />
+            </div>
+
+            {/* <div class={hudStyle}>
+                    <IconMove class="draganchor" />
+                    <IconClear />
+                    <IconAdd />
+                </div> */}
+          </div>
+        )
+      );
+    };
+  },
+});
+
+const borderStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline: 2px solid @inf-primary-color;
+  pointer-events: none;
+  z-index: 999;
+  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
+`;
+
+const hudStyle = css`
+  position: absolute;
+  top: 0px;
+  left: -46px;
+  background-color: white;
+  flex-direction: column;
+  color: black;
+  display: flex;
+  font-size: 12px;
+  width: 28px;
+  align-items: center;
+  border-radius: 4px;
+  .inficon {
+    padding: 8px;
+  }
+  z-index: 1000;
+`;
+
+const resizeStyle = css`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  z-index: 999;
+  transform: translate(50%, 50%);
+  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
+  cursor: nwse-resize;
+  &:hover {
+    border-color: @inf-primary-color;
+  }
+`;
+
+const transformBtnsStyle = css`
+  @apply space-x-10px whitespace-nowrap;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  font-size: 16px;
+  z-index: 999;
+  transform: translate(-50%, 50px);
+`;
+
+const transBtnStyle = css`
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: #fff;
+  text-align: center;
+  line-height: 36px;
+  font-size: 20px;
+  color: #333;
+  @apply shadow cursor-move;
+
+  &:hover {
+    color: #fff;
+    background-color: @inf-primary-color;
+  }
+`;
+
+const toolbarStyle = css`
+  @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -40px);
+  z-index: 999;
+`;
+
+const resizeHeightBtnCls = css`
+  position: absolute;
+  width: 30px;
+  height: 8px;
+  border-radius: 4px;
+  left: 50%;
+  transform: translate(-50%, -4px);
+  cursor: ns-resize;
+  background: rgba(255, 255, 255, 0.3);
+  &:hover {
+    background: @inf-primary-color;
+  }
+  @apply shadow;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+
+  .inficon {
+    font-size: 20px;
+    position: relative;
+    top: -6px;
+  }
+`;
+
+const resizeWidthBtnCls = css`
+  position: absolute;
+  width: 8px;
+  height: 30px;
+  border-radius: 4px;
+  right: 0;
+  transform: translate(4px, -50%);
+  cursor: ew-resize;
+  background: rgba(255, 255, 255, 0.3);
+  &:hover {
+    background: @inf-primary-color;
+  }
+  @apply shadow;
+  z-index: 999;
+`;

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -2,6 +2,8 @@ import { css } from "@linaria/core";
 import { defineComponent, onMounted, ref } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../..";
+import { IconMove, IconClear, IconAdd} from "@/assets/icons";
+import {IconDelete} from "@queenjs/icons";
 
 export const View = defineComponent({
   props: {
@@ -10,7 +12,7 @@ export const View = defineComponent({
   emits: ["dblclick"],
   setup(props, { slots, emit }) {
     const compRef = ref();
-    const { store, actions, helper } = useEditor();
+    const { store, actions, helper, controls } = useEditor();
 
     onMounted(() => {
       const comp = helper.findComp(props.compId);
@@ -25,21 +27,40 @@ export const View = defineComponent({
     return () => {
       const comp = helper.findComp(props.compId);
       if (!comp) return store.isEditMode ? <div>无效组件</div> : null;
+      const isStreamCard = helper.isStreamCard(props.compId)
 
       return (
         <div
           ref={compRef}
           class={[viewStyle, store.isEditMode && editCompStyle]}
           style={helper.createStyle(comp.layout)}
-          onClick={(e) => {
+          // onClick={(e) => {
+          //   e.stopPropagation();
+          //   if (store.isEditMode) {
+          //     actions.pickComp(props.compId);
+          //   }
+          // }}
+          onDblclick={() => emit("dblclick")}
+
+          onMousedown={(e) => {
             e.stopPropagation();
             if (store.isEditMode) {
               actions.pickComp(props.compId);
+              controls.transferCtrl.mousedown(e, "move")
             }
           }}
-          onDblclick={() => emit("dblclick")}
         >
           {slots.default?.()}
+
+          {
+            store.isEditMode && isStreamCard && <div class="hudop">
+              <IconMove class="draganchor" />
+              <IconDelete />
+              <IconAdd />
+
+            </div>
+          }
+          
         </div>
       );
     };
@@ -55,6 +76,24 @@ const viewStyle = css`
     width: 100%;
     height: 100%;
   }
+
+  .hudop{
+    position: absolute;
+    top: 0px;
+    left: -46px;
+    background-color: white;
+    flex-direction: column;
+    color: black;
+    display: flex;
+    font-size: 12px;
+    width: 28px;
+    align-items: center;
+    border-radius: 4px;
+    .inficon{
+      padding: 8px;
+    }
+    z-index: 1000;
+  }
 `;
 
 const editCompStyle = css`

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

@@ -7,6 +7,7 @@ import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import { CompUI } from "../../CompUI";
 import { Transfer } from "../../CompUI/basicUI/Transfer";
+import { StreamCardTransfer } from "../../CompUI/basicUI/Transfer/streamCard";
 
 export default defineUI({
   setup() {
@@ -39,6 +40,7 @@ export default defineUI({
                       <Container
                         class={store.isEditPage ? "!min-h-750px" : ""}
                         group-name="canvas"
+                        drag-handle-selector=".draganchor"
                         onDrop={(e: any) => {
                           if (e.payload) {
                             actions.addCompToDesign(e.payload, e.addedIndex);
@@ -55,7 +57,10 @@ export default defineUI({
                       {store.currCompId &&
                         store.currCompId !== "root" &&
                         !store.textEditingState &&
+                        store.currCompId !== store.currStreamCardId && 
                         !state.draging && <Transfer key={store.currCompId} />}
+
+                      {store.currStreamCardId && <StreamCardTransfer key={store.currStreamCardId} />}
                     </>
                   );
                 },
@@ -66,6 +71,7 @@ export default defineUI({
                   return (
                     <Draggable class="!flex flex-col" key={comp.id}>
                       <Comp compId={comp.id} />
+                    
                     </Draggable>
                   );
                 },

src/modules/editor/controllers/TransferCtrl/transforms/transform.ts

@@ -2,7 +2,7 @@ import { TransCreateFn, TransferCtrl } from "..";
 
 function getTransform(this: TransferCtrl, transType: string) {
   const { transEvent } = this;
-  const { transform = {} } = this.currComp.layout;
+  const { transform = {} } = this.currComp?.layout;
   const offset = {
     x: transform.x || 0,
     y: transform.y || 0,

src/modules/editor/module/actions/edit.ts

@@ -31,9 +31,9 @@ export const editActions = EditorModule.action({
     //   const comps = this.helper.getCompTrees(compId);
     //   nextCompId = comps[1].id;
     // }
-    if (compId !== this.store.currCompId) {
+    // if (compId !== this.store.currCompId) {
       this.store.setCurrComp(compId);
-    }
+    // }
   },
   // 切换到父组件
   pickParentComp(compId: string) {

src/modules/editor/module/helpers/index.ts

@@ -13,6 +13,10 @@ export const helpers = EditorModule.helper({
     const comp = compMap[compId];
     if (comp) return comp;
   },
+  isStreamCard(compId: string) {
+    return this.store.streamCardIds.indexOf(compId) > -1
+  },
+  
   findParentComp(compId: string): DesignComp | undefined {
     const comp = this.helper.findComp(compId);
     if (comp) return this.helper.findComp(comp.pid);

src/modules/editor/module/index.ts

@@ -37,6 +37,7 @@ export class EditorModule extends ModuleRoot {
       dir: "queenshow",
     }),
     transferCtrl: new TransferCtrl(this),
+    streamCardTransferCtrl: new TransferCtrl(this),
     historyCtrl: new HistoryCtrl(this),
     pickCtrl: new ImagePickController(),
     compUICtrl: new CompUICtrl(this),

src/modules/editor/module/stores/index.ts

@@ -8,6 +8,7 @@ export const store = EditorModule.store({
     textEditingState: false,
     mode: "editPage" as EditorMode,
     currCompId: "root",
+    currStreamCardId: "",
     designData: new DesignTemp(),
   }),
   getters: {
@@ -23,12 +24,19 @@ export const store = EditorModule.store({
     isPreview(state) {
       return state.mode === "preview";
     },
+   
     currComp(state) {
       return state.designData.compMap[state.currCompId];
     },
+    currStreamCard(state) {
+      return state.designData.compMap[state.currStreamCardId];
+    },
     pageCompIds(state): string[] {
       return state.designData.compMap.root?.children.default || [];
     },
+    streamCardIds(state):string[] {
+      return state.designData.compMap.root?.children.default || [];
+    }
   },
   actions: {
     setCompData(id: string, data: any) {
@@ -60,8 +68,38 @@ export const store = EditorModule.store({
       return compId;
     },
     setCurrComp(compId: string) {
+      
       this.store.currCompId = compId;
+      const find = (objs:string[], id:string):boolean=>{
+        if (!objs || objs.length < 1) return false
+
+        if (objs.includes(id)) return true;
+        
+        let n = objs.length;
+        let f = false;
+        while(n--) {
+          f = find(this.store.designData.compMap[objs[n]].children.default as any, id)
+          if (f) {
+            break
+          }
+        }
+        return f;
+      }
+      const ids = this.store.streamCardIds
+      if (ids.indexOf(compId) > - 1) {
+        this.store.currStreamCardId = compId;
+      }
+      let i = ids.length;
+      while(i--) {
+        const isFind = find(this.store.designData.compMap[ids[i]].children.default as any, compId)
+        if (isFind) {
+          this.store.currStreamCardId = ids[i];
+          break;
+        }
+      }
+      console.log("streamCard=>", this.store.currStreamCardId, "compId=>", this.store.currCompId)
     },
+
     deleteComp(compId: string) {
       const { compMap } = this.store.designData;
       const parentComp = this.helper.findParentComp(compId);