feat: container use slot

Author: fireyy

src/app.scss

@@ -63,7 +63,25 @@ select {
   @extend .form-select;
   @extend .select-sm;
 }
-
- .g-active {
+.layer {
+  &:hover {
+    outline: 1px solid #ddd !important;
+  }
+}
+.g-active {
   outline: 1px solid #2196f3 !important;
+  &:hover {
+    outline: 1px solid #2196f3 !important;
+  }
+  &::after {
+    content: attr(data-title);
+    background: #2196f3;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0 5px;
+    font-size: 12px;
+    border-radius: 0 0 0 4px;
+  }
 }

src/components/viewport/index.vue

@@ -12,13 +12,25 @@
       <component
         :is="val.type"
         class="layer"
+        :data-title="val.type"
         :class="{'g-active': id === val.uuid}"
         v-for="val in widgetStore"
         :key="val.uuid"
         :val="val"
         :h="height"
         :w="750"
         :playState="playState">
+        <component
+          v-if="val.type === 'braid-container'"
+          :is="child.type"
+          class="layer layer-child"
+          :class="{'g-active': id === child.uuid}"
+          v-for="child in getChilds(val.name)"
+          :key="child.uuid"
+          :val="child"
+          :h="height"
+          :w="750"
+          :playState="playState" />
       </component>
 
       <!-- 参考线 -->
@@ -123,6 +135,13 @@ export default {
           this.$store.commit('replaceImage', payload)
         })
       }
+    },
+
+    // 获取子组件
+    getChilds (name) {
+      return this.$store.state.widgets.filter(
+        item => item.belong === name
+      )
     }
   },
 

src/widgets/container/index.vue

@@ -24,17 +24,8 @@
     }">
 
     <!-- 子组件 -->
-    <component
-      :is="val.type"
-      class="layer layer-child"
-      :class="{'g-active': current === val.uuid}"
-      v-for="val in childs"
-      :key="val.uuid"
-      :val="val"
-      :h="val.height"
-      :w="val.width"
-      :playState="playState">
-    </component>
+    <!-- TODO: 改用 slot 实现 -->
+    <slot></slot>
   </div>
 </template>