cloud-web-corejs 1.0.283 → 1.0.285

package/src/components/xform/form-designer/form-widget/container-widget/h5-card-widget.vue

@@ -1,136 +1,165 @@
-<template>
-  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
-                     :index-of-parent-list="indexOfParentList" :class="widget.options.isFullscreen ? 'full-height':''">
-    <div class="grid-container" :key="widget.id"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-      <h5CardPaneWidget v-for="(paneWidget, index) in widget.panes" :key="index" :widget="paneWidget"
-                        :designer="designer" :parent-list="widget.panes"
-                        :index-of-parent-list="index" :parent-widget="widget"
-                        :col-height="widget.options.colHeight" tabRef="baseTabRef"
-                        :tabPaneGrade="2"></h5CardPaneWidget>
-
-    </div>
-  </container-wrapper>
-</template>
-<script>
-
-import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
-import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
-import i18n from "../../../../../components/xform/utils/i18n";
-import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
-import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
-
-export default {
-  name: "h5-card-widget",
-  componentName: 'ContainerWidget',
-  mixins: [i18n, containerMixin, refMixinDesign],
-  inject: ['refList'],
-  components: {ContainerWrapper, h5CardPaneWidget},
-  props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designer: Object,
-  },
-  computed: {
-    selected() {
-      return this.widget.id === this.designer.selectedId
-    },
-
-    customClass() {
-      return this.widget.options.customClass || ''
-    },
-
-  },
-  watch: {
-    //
-  },
-  created() {
-    this.initRefList()
-  },
-  mounted() {
-    //
-  },
-  methods: {
-    checkContainerMove(evt) {
-      return true;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.grid-container {
-  min-height: 50px;
-  //line-height: 48px;
-  //padding: 6px;
-  outline: 1px dashed #336699;
-
-  > div {
-    height: 100%;
-  }
-
-  .form-widget-list {
-    // min-height: 28px;
-    height: 100%;
-  }
-
-}
-
-.grid-container.selected, .grid-cell.selected {
-  outline: 2px solid $--color-primary !important;
-}
-
-.grid-cell {
-  min-height: 38px;
-  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
-  padding: 3px;
-  outline: 1px dashed #336699;
-  position: relative;
-
-  > div {
-    height: 100%;
-  }
-
-  .form-widget-list {
-    min-height: 50px;
-    height: 100%
-  }
-
-  .grid-col-action {
-    position: absolute;
-    bottom: 0;
-    right: -2px;
-    height: 28px;
-    line-height: 28px;
-    background: $--color-primary;
-    z-index: 999;
-
-    i {
-      font-size: 14px;
-      color: #fff;
-      margin: 0 5px;
-      cursor: pointer;
-    }
-  }
-
-  .grid-col-handler {
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    height: 22px;
-    line-height: 22px;
-    background: $--color-primary;
-    z-index: 9;
-
-    i {
-      font-size: 14px;
-      font-style: normal;
-      color: #fff;
-      margin: 4px;
-      cursor: default;
-    }
-  }
-}
-
-</style>
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList" :class="widget.options.isFullscreen ? 'full-height':''">
+    <div class="grid-container" :key="widget.id"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+      <!-- 常驻选中把手（设计器专用）。h5卡片自己的可点区域会被它的卡片选项卡整块铺满
+           —— 拖入「H5详情」时默认就带三个（基础信息/明细信息/附件信息，见 designer.js
+           的 detail-h5 分支），一落地就点不中，只能「先选中里面的选项卡、再点返回上级」
+           才能打开它的属性面板，而增删/改名/排序选项卡都在那个面板里。
+           container-wrapper 的 drag-handler 帮不上忙：它只在**已经选中之后**才出现。
+           运行期走 h5-card-item，不含本文件，故只影响设计器画布。 -->
+      <div class="h5-card-handler" @click.stop="selectWidget(widget)">
+        {{ i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`) }}
+      </div>
+      <h5CardPaneWidget v-for="(paneWidget, index) in widget.panes" :key="index" :widget="paneWidget"
+                        :designer="designer" :parent-list="widget.panes"
+                        :index-of-parent-list="index" :parent-widget="widget"
+                        :col-height="widget.options.colHeight" tabRef="baseTabRef"
+                        :tabPaneGrade="2"></h5CardPaneWidget>
+
+    </div>
+  </container-wrapper>
+</template>
+<script>
+
+import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
+import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
+import i18n from "../../../../../components/xform/utils/i18n";
+import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
+import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
+
+export default {
+  name: "h5-card-widget",
+  componentName: 'ContainerWidget',
+  mixins: [i18n, containerMixin, refMixinDesign],
+  inject: ['refList'],
+  components: {ContainerWrapper, h5CardPaneWidget},
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+  },
+  computed: {
+    selected() {
+      return this.widget.id === this.designer.selectedId
+    },
+
+    customClass() {
+      return this.widget.options.customClass || ''
+    },
+
+  },
+  watch: {
+    //
+  },
+  created() {
+    this.initRefList()
+  },
+  mounted() {
+    //
+  },
+  methods: {
+    checkContainerMove(evt) {
+      return true;
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.grid-container {
+  min-height: 50px;
+  //line-height: 48px;
+  /* 侧边与底部留一圈属于卡片自己的可点区域，和顶上的把手一起圈出它的边界 */
+  padding: 0 6px 6px;
+  outline: 1px dashed #336699;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    // min-height: 28px;
+    height: 100%;
+  }
+
+}
+
+.grid-container.selected, .grid-cell.selected {
+  outline: 2px solid $--color-primary !important;
+}
+
+/* 把手条。★ 必须显式给高度：上面那条 `.grid-container > div{height:100%}` (0,1,1)
+   会把所有直接子元素拉满，本条 (0,2,0) 压得过。
+   负的左右外边距把它顶回容器的 6px 内边距之外，与虚线框贴齐。 */
+.grid-container > .h5-card-handler {
+  height: 20px;
+  line-height: 20px;
+  margin: 0 -6px 6px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: $--color-primary;
+  background: transparentize($--color-primary, 0.88);
+  cursor: pointer;
+}
+
+.grid-container.selected > .h5-card-handler {
+  color: #fff;
+  background: $--color-primary;
+}
+
+.grid-cell {
+  min-height: 38px;
+  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
+  padding: 3px;
+  outline: 1px dashed #336699;
+  position: relative;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    min-height: 50px;
+    height: 100%
+  }
+
+  .grid-col-action {
+    position: absolute;
+    bottom: 0;
+    right: -2px;
+    height: 28px;
+    line-height: 28px;
+    background: $--color-primary;
+    z-index: 999;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+
+  .grid-col-handler {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    height: 22px;
+    line-height: 22px;
+    background: $--color-primary;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      font-style: normal;
+      color: #fff;
+      margin: 4px;
+      cursor: default;
+    }
+  }
+}
+
+</style>

package/src/components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue

@@ -274,9 +274,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .H5 .h5-fixed-bottom-btns {
-  bottom: 95px;
-}
+/* 原 ::v-deep .H5 .h5-fixed-bottom-btns{bottom:95px} 已删：本文件从未把 H5 类
+   绑到任何元素上，该选择器从来没生效过。H5 底栏已改为流内布局。 */
 
 .list-dialog {
   .el-dialog__body {

package/src/components/xform/form-designer/form-widget/dialog/formDialog.vue

@@ -316,9 +316,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .H5 .h5-fixed-bottom-btns {
-  bottom: 95px;
-}
+/* 原 ::v-deep .H5 .h5-fixed-bottom-btns{bottom:95px} 已删：本文件从未把 H5 类
+   绑到任何元素上（layoutType 只存在 data 里），该选择器从来没生效过。
+   H5 底栏已改为流内布局（styles/h5.scss 块 G），自然贴弹框底部，无需此补丁。 */
 
 .list-dialog {
   .el-dialog__body {