cloud-web-corejs 1.0.281 → 1.1.0-dev.11

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

@@ -5,7 +5,11 @@
     <div class="h5-item">
       <div class="h5-title">
         <b>{{ widget.options.label }}</b>
-        <div class="grid-cell">
+        <!-- 投放区说明（设计器画布常驻）。标题栏这个格子收的是 buttonWidgetList，
+             下面 .h5-form-box 那个收的是 widgetList，两个空框长得一模一样、
+             不写清楚分不出哪个该放按钮。pointer-events:none 让它不挡拖放。 -->
+        <div class="grid-cell h5-area">
+          <span class="h5-area-hint">{{ i18nt('designer.hint.h5PaneButtonArea') }}</span>
           <draggable
             :list="widget.buttonWidgetList"
             v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
@@ -44,7 +48,8 @@
           </draggable>
         </div>
       </div>
-      <div class="h5-form-box">
+      <div class="h5-form-box h5-area">
+        <span class="h5-area-hint">{{ i18nt('designer.hint.h5PaneFieldArea') }}</span>
         <draggable
           :list="widget.widgetList"
           v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
@@ -152,6 +157,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+/* 两个投放区的说明文字。常驻而不是「空了才出」：填上内容之后仍要看得出
+   哪个格子是按钮区、哪个是字段区。
+   ★ 走文档流（不用绝对定位）：它就排在各自那个虚线投放框的正上方，
+     一眼对得上归属；也不会盖住框里已有的组件、更不会挡住拖放。
+     绝对定位那一版还要跟 style.scss 的 `.h5-detail-wrap .h5-item .h5-form-box
+     {padding:12px}` (0,3,0) 抢内边距 —— 与 scoped 属性选择器同分，靠加载顺序
+     决胜负，不可靠。 */
+.h5-area > .h5-area-hint {
+  display: block;
+  font-size: 12px;
+  line-height: 16px;
+  color: #a8abb2;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
 .grid-cell {
   min-height: 38px;
   //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */

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

@@ -3,6 +3,15 @@
                      :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"
@@ -63,7 +72,8 @@ export default {
 .grid-container {
   min-height: 50px;
   //line-height: 48px;
-  //padding: 6px;
+  /* 侧边与底部留一圈属于卡片自己的可点区域，和顶上的把手一起圈出它的边界 */
+  padding: 0 6px 6px;
   outline: 1px dashed #336699;
 
   > div {
@@ -81,6 +91,25 @@ export default {
   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会失效！！ */