cloud-web-corejs 1.0.54-dev.813 → 1.0.54-dev.815

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.813",
+  "version": "1.0.54-dev.815",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",

package/src/components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -13,6 +13,7 @@
     class="field-wrapper"
     :class="[
       { 'design-time-bottom-margin': !!this.designer },
+      isH5Field ? 'h5-field' : '',
       field.options.h5Span === 'half' ? 'h5-half' : '',
       isH5BlockField ? 'h5-block' : '',
     ]"
@@ -390,6 +391,23 @@ export default {
       return H5_BLOCK_FIELD_TYPES.indexOf(this.field.type) > -1;
     },
 
+    /**
+     * H5 版式的字段行锚点。整套 H5 行版式（styles/h5.scss 块 C/C1/C2/C3/D/E）都挂在
+     * .field-wrapper.h5-field 上，与容器解耦。
+     *
+     * 原先锚在 `.h5-detail-wrap .h5-item .h5-form-box`，而 `.h5-item` 只有
+     * h5-card-pane 会吐（h5-card-pane-item.vue），h5-card 吐的是 `.grid-cell`，
+     * 字段/表格直挂 detail-h5.panes 时（设计器的 draggable 是单一 dragGroup，
+     * 任何容器都能拖进去）连 `.h5-form-box` 都没有 —— 这些摆法下整套行版式会
+     * 静默落空，表现为「标签右对齐、值左对齐」（element 默认），与卡片内的
+     * 「标签左、值右」对不上。
+     *
+     * PC 版式不打这个类，故 PC 表单零影响。
+     */
+    isH5Field() {
+      return this.formConfig?.layoutType === "H5";
+    },
+
     subFormName() {
       return !!this.parentWidget ? this.parentWidget.options.name : "";
     },

package/src/components/xform/form-designer/setting-panel/property-editor/container-list-h5/list-h5-editor.vue

@@ -59,11 +59,10 @@
               <el-input v-model="scope.row.prop"></el-input>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnWidth')" width="100" prop="width">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.width"></el-input>
-            </template>
-          </el-table-column>
+<!-- 「列宽」已移除：H5 明细卡片是 dl/dt/dd 排版，不读列宽 —— 它当年是从数据表格
+           那套列配置沿用过来的，运行期只被塞进一个拼错的键(witdh)、无人读取。
+           列在卡片里占整行还是半行，由下面的「H5列宽」控制。
+           存量模板里残留的 width 值不用清，读不到就是了。 -->
           <el-table-column :label="i18nt('designer.setting.visibleColumn')" width="70" prop="show">
             <template slot-scope="scope">
               <el-switch v-model="scope.row.show"></el-switch>
@@ -79,6 +78,21 @@
               <el-switch v-model="scope.row.showForRow"></el-switch>
             </template>
           </el-table-column>
+          <!-- H5 明细卡片里这个字段占整行还是半行（半行=一行两个）。
+               不配即整行，运行期判等只认 'half'（存量列读到 undefined 就是整行），
+               不能写成 !== 'full'。样式见 xform/styles/h5.scss 块 I2。
+               ★ 用 :value + $set 而不是 v-model：h5Span 是后加的键，存量列上没有，
+               Vue 2 只给赋值那一刻已存在的属性装 getter/setter，直接 v-model
+               新增属性追踪不到，选完不回显。 -->
+          <el-table-column label="H5列宽" width="110" prop="h5Span">
+            <template slot-scope="scope">
+              <el-select :value="scope.row.h5Span" clearable placeholder="整行"
+                         @input="v => $set(scope.row, 'h5Span', v)">
+                <el-option value="full" label="整行"></el-option>
+                <el-option value="half" label="半行(一行两个)"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
           <el-table-column :label="i18nt('designer.setting.formatOfColumn')" width="200" prop="formatS">
             <template slot-scope="scope">
               <el-select v-model="scope.row.formatS" @change="changeFormatS(scope.row)" clearable>

package/src/components/xform/form-render/container-item/list-h5-item.vue

@@ -185,6 +185,14 @@
               <!--              <div class="status">未审核</div>-->
             </template>
           </div>
+          <!-- 明细卡片的主标题，对齐 bill_setting 的 .pro-item .t（render.vue:105）：
+               只出主字段的值、前面一个圆点、右上角是「查看」角标。
+               上面那个 .t1 是查询选择列表专用的（出「标题：值」若干对），两者互斥。
+               主字段就是 isMainFiled 标的那一列（columns() 里取第一个可见列），
+               查询选择模式一直用它当标题行，这里把同一口径用到明细卡片上。 -->
+          <div class="t1 h5-item-title" v-else-if="!!mainTitleColumn">
+            <b>{{ getColumnDisplayText(mainTitleColumn, row, rowIndex) }}</b>
+          </div>
           <div class="t2">
             <template
               v-if="
@@ -192,13 +200,19 @@
               "
             >
               <template v-for="(column, columnIndex) in vxeOption.columns">
+                <!-- 主字段已经当标题了，不再在字段区重复一遍（查询选择模式本来
+                     就是这个口径，这里两种模式统一）。没有主标题时(mainTitleColumn
+                     为空，如只有一列)照常全出。 -->
                 <template
                   v-if="
-                    (!widget.options.isQueryTable || !column.isMainFiled) &&
+                    (!column.isMainFiled || !mainTitleColumn) &&
                     column.showForRow
                   "
                 >
-                  <dl :key="columnIndex">
+                  <!-- m2 = 半行（一行两个）。类名沿用 style.scss:14095 早就留好的
+                       `.t2 > dl.m2{width:50%}`（那条规则一直没人往 dl 上打过类）。
+                       由列的「H5列宽」选项控制，见 isHalfColumn。 -->
+                  <dl :key="columnIndex" :class="{ m2: isHalfColumn(column) }">
                     <div>
                       <dt>{{ column.title }}：</dt>
                       <dd>
@@ -763,6 +777,26 @@ export default {
         : !!this.widget.options.buttonsColumnFixed &&
             this.widget.options.buttonsColumnFixed;
     },
+    /**
+     * 明细卡片主标题所用的列（对齐 bill_setting 的 mainFieldName）。
+     *
+     * 主字段就是 columns() 里标了 isMainFiled 的那一列 —— 第一个既有 prop
+     * 又 showForRow 的列，不是另配的选项。查询选择列表一直拿它当标题行，
+     * 这里把同一口径用到明细卡片上。
+     *
+     * 返回值同时决定字段区要不要把主字段排除掉（模板里那个 v-if）。
+     */
+    mainTitleColumn() {
+      let visible = (this.vxeOption.columns || []).filter(
+        (column) => column.showForRow
+      );
+      let main = visible.find((column) => column.isMainFiled) || null;
+      if (!main) return null;
+      // 查询选择模式的标题行是另一个 .t1，与可见列数无关，一直排除主字段，保持原口径
+      if (this.widget.options.isQueryTable) return main;
+      // 明细卡片：只有一列时不抽标题 —— 抽走字段区就空了，不如照常当字段出
+      return visible.length < 2 ? null : main;
+    },
     columns() {
       let tableColumns = this.widget.options.tableColumns;
       let newColumns = [];
@@ -798,7 +832,8 @@ export default {
           fixed: !!t.fixed && t.fixed,
           field: t.prop,
           title: t.label,
-          witdh: t.width,
+          // 原来这里还有一个 `witdh: t.width` —— 键名拼错(w-i-t-d-h)、全库无人读取，
+          // 且 H5 卡片是 dl/dt/dd 排版本来就不吃列宽。列配置里的「列宽」已一并去掉。
           sortable: t.sortable,
           align: t.align ? t.align : "center",
           formatter: this.formatterValue,
@@ -1582,6 +1617,17 @@ export default {
         return "";
       return formRef.getCompareRowClass(this.fieldKeyName, row);
     },
+    /**
+     * 该列在 H5 明细卡片里是否占半行（一行两个）。
+     *
+     * 取列的「H5列宽」选项（table-column-dialog 的「编辑更多属性」里配），
+     * 运行期从 columnConfig 上读 —— createColumns 把整个设计器列对象原样挂在
+     * `col.params.columnConfig` 上（data-table-mixin.js:1762）。
+     * 只认 'half'：没配过的老列读到 undefined，按整行处理；不能写成 !== 'full'。
+     */
+    isHalfColumn(column) {
+      return column?.params?.columnConfig?.h5Span === "half";
+    },
     /**
      * 明细行的显示文本。
      *

package/src/components/xform/styles/h5.scss

@@ -94,24 +94,63 @@ $xformH5PageBg: #f1f5fb;
 
 /* ============ 块 C：字段行（表格版式的 CSS 复刻） ============ */
 /* 决策 4 走 CSS 复刻而非真 <table>：字段组件全部依赖 el-form-item 挂
-   prop/rules，compareView 也包在里面，拆 th/td 会打断校验链与对比包裹。 */
+   prop/rules，compareView 也包在里面，拆 th/td 会打断校验链与对比包裹。
+
+   ★ 锚点（2026-08-29 改）：行版式挂 .field-wrapper.h5-field，不再挂容器。
+   原来锚 `.h5-detail-wrap .h5-item .h5-form-box`，而 `.h5-item` 只有 h5-card-pane
+   会吐（h5-card-pane-item.vue:4）；h5-card 吐的是 `.grid-cell`（h5-card-item.vue:2），
+   字段/表格直挂 detail-h5.panes 时连 `.h5-form-box` 都没有（detail-h5-widget.vue:29
+   的 draggable 是单一 dragGroup，任何容器都能拖进去）。那两种摆法下整套行版式
+   静默落空，表现为「标签右对齐、值左对齐」（element 默认）。
+   h5-field 由 form-item-wrapper 按 formConfig.layoutType === 'H5' 打，PC 不打。
+   代价是特异度基线从 (0,5,0) 降到 (0,3,0)，故本块每条都按对手重算，见各条注释。 */
+
+/* 容器层仍按容器锚：内边距与两列排布是容器职责，不是字段职责。
+   写到 (0,4,0)，压过 style.scss:13801/13886 的
+   `.h5-detail-wrap .h5-item .h5-form-box{padding:12px / padding-bottom:0}` (0,3,0)
+   —— 同分只能靠加载顺序，而本文件与 style.scss 的先后不可靠，必须多一段。
+
+   ★ 这里只锚 h5-card-pane 出的 .h5-item：曾并列加过一条 `.grid-cell .h5-form-box`
+   想覆盖 h5-card，那是错的 —— h5-card 的 panes 只能装卡片(h5-card-pane)、装不了字段
+   （widgetsConfig 里它就是 `panes: []`，h5-card-item 也只遍历 panes），
+   给它加 12px 不会让任何字段受益，只会把里面的卡片整体往里缩一圈，
+   结果是同一屏里 h5-card 里的卡片比流程面板窄 30px、左右对不齐。 */
 .xform-h5 .h5-detail-wrap .h5-item .h5-form-box {
   padding: 12px;
 
-  .form-widget-list {
+  > .form-widget-list {
     display: flex;
     flex-wrap: wrap;
   }
+}
 
-  .field-wrapper {
-    width: 100%;
-  }
+/* h5-card 在 H5 版式下只是个分组壳，里面直接装卡片，壳自己不该再占内边距。
+   那 3px 来自 h5-card-item.vue 的 scoped 样式（`.grid-cell{min-height:80px;padding:3px}`，
+   从设计器画布抄来的），(0,2,0)；本方 (0,4,0) 压得过。
+   抹平之后，h5-card 里的卡片与直接挂在滚动区下的流程面板一样都落在 margin 8px 上。 */
+.xform-h5 .h5-detail-body > .form-widget-list > .grid-cell {
+  padding: 0;
+}
 
-  /* 半宽（两列），由字段选项 h5Span === 'half' 打在 form-item-wrapper 根节点上 */
-  .field-wrapper.h5-half {
+/* ★ 不要给 `.h5-detail-body > .form-widget-list` 也加 flex-wrap：那一层装的是
+   卡片（detail-h5-item.vue 的 panes），卡片自身没有宽度，一旦父级变 flex 容器
+   就会按内容宽并排成一行。字段直挂 detail-h5.panes 时靠下面的
+   `.field-wrapper.h5-field{width:100%}` 自然堆叠即可 —— 该摆法下 h5Span=half
+   不成两列（没有 flex 父级），这是刻意取舍：半宽本就是卡片内的排布选项。 */
+
+/* 行版式本体 */
+.xform-h5 .field-wrapper.h5-field {
+  width: 100%;
+
+  /* 半宽（两列），由字段选项 h5Span === 'half' 打在 form-item-wrapper 根节点上。
+     表格布局里不生效：对手 `.designer-view .table-layout td.table-cell
+     .field-wrapper{width:100%}` (0,4,1) 高于本条 (0,4,0)，列宽本就该由表格自己控。 */
+  &.h5-half {
     width: 50%;
   }
 
+  /* 表格布局里 style.scss:9896 把它变成 display:table (0,4,1)，本块不去争，
+     那条正是块 C1 依赖的前提。 */
   .el-form-item {
     display: flex;
     align-items: flex-start;
@@ -120,49 +159,150 @@ $xformH5PageBg: #f1f5fb;
     padding: 6px 0;
     margin-bottom: 0;
     border-bottom: 1px solid $xformH5RowBorder;
+  }
 
-    /* 对手：style.scss:13860 附近 .h5-detail-wrap .h5-item .el-form-item__label (0,3,0)
-       带 text-align:left !important，且把 &:after 设成了 display:none */
-    .el-form-item__label {
-      width: $xformH5LabelWidth;
-      padding: 0 5px 0 0;
-      margin: 0;
-      line-height: 1.4;
-      height: auto;
-      overflow: hidden;
-      color: #808080;
-      text-align: left !important;
+  /* 对手：style.scss:13854 `.h5-detail-wrap .h5-item .el-form-item__label` (0,3,0)
+     带 text-align:left !important，且把 &:after 设成 display:none；本方 (0,5,0)。 */
+  .el-form-item > .el-form-item__label {
+    width: $xformH5LabelWidth;
+    padding: 0 5px 0 0;
+    margin: 0;
+    line-height: 1.4;
+    height: auto;
+    overflow: hidden;
+    color: #808080;
+    text-align: left !important;
+
+    /* 标签后自动补冒号，对齐 bill_setting form-table 的 th::after。
+       对手把 display 关了，必须先打开再给 content。本方 (0,5,1)。 */
+    &::after {
+      display: inline !important;
+      content: ":";
+    }
+  }
 
-      /* 标签后自动补冒号，对齐 bill_setting form-table 的 th::after。
-         对手把 display 关了，必须先打开再给 content。 */
-      &::after {
-        display: inline !important;
-        content: ":";
-      }
+  .el-form-item > .el-form-item__content {
+    flex: 1;
+    line-height: 1.4;
+    text-align: right;
+    word-break: break-word;
+    /* el-form-item 按 label-width 写的内联 margin-left 在 flex 行里是多余的左空白：
+       值是右对齐的所以看不出来，但它白白压缩可用宽度、让长值提前折行。
+       内联样式只能 !important 压（同款处理见块 C2）。 */
+    margin-left: 0 !important;
+  }
+
+  /* 卡片里最后一行不留分隔线。:last-child 计入 class 列，本条 (0,5,0)
+     高于上面 .el-form-item 的 border-bottom (0,4,0)。 */
+  &:last-child .el-form-item {
+    border-bottom: none;
+  }
+}
+
+/* ============ 块 C1：表格布局（.table-layout）下退回块 C 的 flex 行 ============ */
+/* 字段落进 td.table-cell 时，style.scss:9896 起把它改成「table 模拟」：
+   `.field-wrapper{display:table}` / `.el-form-item{display:table-row}` /
+   label 与 content 各 `display:table-cell`。这套在 H5 下有个死结：
+
+     form-item-wrapper 的根节点里还夹着一层普通 <div>
+     （.field-wrapper > div > .el-form-item），block 盒卡在 table 与 table-row 之间，
+     CSS 会给它补匿名 table-cell + 匿名 table —— el-form-item 落进的是那张**匿名表**，
+     而匿名表是 shrink-to-fit：整行只有「标签 80px + 值内容宽」那么宽，撑不满单元格，
+     值永远贴在标签右边，而不是单元格右缘（实测 305px 的格子里行只有 128px）。
+     改动前看着「还行」，是因为 PC 的 td.w1 给 content 钉了 172.2px 死宽顶着，
+     块 C3 一解除死宽就塌了 —— 那个死宽本来就是 PC 像素值，不能留。
+
+   另外 table-row 上 min-height/padding/border 一律不生效，element 的 label 又自带
+   float:left（float 非 none 会把 display 强制算成 block，标签直接脱出表格流），
+   顺着 table 模拟走要打三处补丁才勉强成型。
+
+   所以整段退回块 C 的 flex 行：一套行模型走到底，min-height/padding/border 跟着
+   恢复生效，值靠 content 的 flex:1 + text-align:right 贴到单元格右缘。
+   对手 `.designer-view .table-layout td.table-cell .field-wrapper …` (0,4,1)~(0,6,1)；
+   本方 (0,6,1)~(0,8,1)（:not(.h5-block) 按其参数计一个 class）。
+   宽内容字段（h5-block）不走这条：它要的是「标签在上、内容整行」，见块 C2。 */
+.xform-h5
+  .table-layout
+  td.table-cell
+  .field-wrapper.h5-field:not(.h5-block) {
+  display: block;
+
+  .el-form-item {
+    display: flex;
+    align-items: flex-start;
+
+    > .el-form-item__label,
+    > .el-form-item__content {
+      display: block;
+      float: none;
     }
 
-    .el-form-item__content {
+    > .el-form-item__content {
       flex: 1;
-      line-height: 1.4;
-      text-align: right;
-      word-break: break-word;
+      min-width: 0; // 不写这行，长值撑破行而不是折行
     }
+  }
+}
+
+/* ============ 块 C3：表格布局里的字段值也贴右 ============ */
+/* 光有块 C/C1 还不够，表格路径上另有两条 PC 老规则顶着：
+
+   对手一 style.scss:5185 `.table-d-box td .field-wrapper .el-form-item__content span
+     { text-align:left }` (0,3,2) —— 只读字段的展示值正是一个 <span>
+     （form-item-wrapper 的兜底分支），块 C 的容器右对齐被这个子元素直接盖掉。
+   对手二 style.scss:5191 起 `.table-d-box td.w1 .field-wrapper .el-form-item__content
+     { width:172.2px !important }` (0,4,1)+!important，四档 w1~w4 全是 PC 像素宽；
+     375px 屏上 w1 的 td 就要 284.2px，值区被钉在 172.2px，右对齐也只在这块死宽里
+     生效，看着仍然不贴边。td 自身的 width:284.2px~1138.8px 同理。
+     注：w{colspan} 只有 table/table2 的单元格会打（table-cell-item.vue:2、
+     table2-cell-item.vue:3），h5-table 的单元格不打，故 h5-table 只中对手一。
+
+   ★ 不做「H5 下表格自动降成一列」：会打断 colspan/rowspan 合并，且与总方案
+     「PC 的 data-table/sub-form 不做 H5 自动降级」是同一条口径。列数交给设计器
+     用 h5-table 或 cellWidth 控制。 */
+.xform-h5 .table-layout.table-d-box {
+  /* 解除 w1~w4 的 PC 死宽。设计器里显式配了 cellWidth 的单元格走内联
+     style="width:xx !important"，优先级最高，不受这条影响，按配置生效。 */
+  > tbody > tr > td.table-cell {
+    width: auto !important;
+  }
+
+  /* 一行两列（两个 td.w1 并排）时，左列的值右对齐后正好停在右列的左边界上，
+     读起来就是「值粘在下一个字段名上」（实测 359 对 360）。
+     对齐 bill_setting form-table 的处理：它用 `th:nth-child(3){padding-left:12px}`
+     让第二列的标签让出间隔。这里把间隔加在单元格上而不是标签上 —— 标签有 80px
+     定宽，加内边距会挤掉字数（全局 box-sizing 是 border-box）。 */
+  > tbody > tr > td.table-cell + td.table-cell {
+    padding-left: 12px;
+  }
+
+  td.table-cell .field-wrapper.h5-field .el-form-item {
+    /* 断链场景下 element 默认标签是右对齐的，这里兜住 */
+    > .el-form-item__label {
+      text-align: left !important;
+    }
+
+    > .el-form-item__content {
+      width: auto !important; // 压对手二的 !important；本方 (0,7,1)+!important
+      text-align: right;
 
-    &:last-child {
-      border-bottom: none;
+      /* 对手一 (0,3,2)，本方 (0,8,2) */
+      span {
+        text-align: right;
+      }
     }
   }
 }
 
 /* ============ 块 D：输入控件归一（去边框、右对齐） ============ */
-.xform-h5 .h5-detail-wrap .h5-item .h5-form-box .el-form-item__content {
+.xform-h5 .field-wrapper.h5-field .el-form-item > .el-form-item__content {
   .el-input,
   .el-select {
     width: 100% !important;
   }
 
-  /* 对手：style.scss:13868 附近 .h5-detail-wrap .h5-item .el-input .el-input__inner (0,4,0)
-     带 height/line-height 双 !important，故本方三条也带 */
+  /* 对手：style.scss:13858 `.h5-detail-wrap .h5-item .el-input .el-input__inner` (0,4,0)
+     带 height/line-height 双 !important，故本方两条也带；本方 (0,7,0)。 */
   .el-input .el-input__inner,
   .el-textarea .el-textarea__inner {
     height: auto !important;
@@ -175,6 +315,8 @@ $xformH5PageBg: #f1f5fb;
     background: transparent;
   }
 
+  /* 对手：style.scss:13845 `.h5-detail-wrap .h5-item .h5-form-box .el-input
+     .el-input__suffix .el-input__icon` (0,5,0)+!important；本方 (0,9,0)。 */
   .el-input .el-input__suffix,
   .el-input .el-input__prefix {
     .el-input__icon {
@@ -193,80 +335,48 @@ $xformH5PageBg: #f1f5fb;
   }
 }
 
-/* ============ 块 C1：表格布局（.table-layout）下的行高 ============ */
-/* 块 C 那套（flex 行 + min-height:48px）只在字段直接排在 .h5-form-box 里时生效。
-   表单若用「表格布局」，字段会被塞进 td.table-cell，此时 style.scss:9896 起把
-   .field-wrapper 变成 display:table、.el-form-item 变成 display:table-row：
-
-     - table-row 上的 min-height / padding / border 一律不生效 —— 块 C 的 48px
-       行高在这条路径上完全落空；
-     - 那段还想把 .el-form-item__label 设成 table-cell，但 element 的 label 自带
-       float:left，而 CSS 规范里 float 非 none 会把 display 强制算成 block，
-       于是标签变成浮动块、脱出表格流，整行高度只剩内容格的 16.8px（实测）。
-
-   所以这里做两件事：把标签的浮动去掉、还原成真正的 table-cell；行高改用
-   table-row 上的 height（对 table-row 而言 height 即最小高度）。两个单元格
-   vertical-align:middle 之后，标签与值在行内垂直居中。
-   对手 .designer-view .table-layout td.table-cell .field-wrapper .el-form-item …
-   是 (0,6,1)；本方 (0,7,1) 起步。 */
-.xform-h5
-  .h5-detail-wrap
-  .h5-item
-  .h5-form-box
-  .table-layout
-  td.table-cell
-  .field-wrapper
-  .el-form-item {
-  height: $xformH5RowHeight;
-
-  > .el-form-item__label,
-  > .el-form-item__content {
-    display: table-cell;
-    float: none;
-    vertical-align: middle;
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-}
-
 /* ============ 块 C2：宽内容字段不走紧凑行版式 ============ */
 /* 附件、图片、富文本这类字段的内容是一片区域而不是一行值。
    块 C/D 那套（标签定宽 80px + 内容 flex:1 右对齐）是给单行输入设计的，
    套上去会把附件列表挤到右侧贴着边框、文件名压线、缩略图变形。
    这里让它们恢复成「标签在上、内容整行左对齐」。
    h5-block 由 form-item-wrapper 按字段类型打，见其 isH5BlockField。
-   本方 0,6,0 > 块 C/D 的 0,5,0，且在其后定义。 */
-.xform-h5 .h5-detail-wrap .h5-item .h5-form-box .field-wrapper.h5-block {
+   ★ 必须排在块 D 之后：输入框那条与块 D 的 text-align 需要靠段数取胜，
+     本块写全 `.el-form-item > .el-form-item__content …` 拿到 (0,8,0) > 块 D (0,7,0)，
+     不依赖书写顺序；其余各条 (0,6,0) > 块 C 的 (0,5,0)。 */
+.xform-h5 .field-wrapper.h5-field.h5-block {
   width: 100%;
 
   .el-form-item {
     display: block;
+  }
 
-    .el-form-item__label {
-      width: auto;
-      float: none;
-      display: block;
-      text-align: left !important;
-    }
+  .el-form-item > .el-form-item__label {
+    width: auto;
+    float: none;
+    display: block;
+    text-align: left !important;
+  }
 
-    .el-form-item__content {
-      flex: none;
-      text-align: left;
-      margin-left: 0 !important; // el-form 的 label-width 会给 content 留左边距
-    }
+  .el-form-item > .el-form-item__content {
+    flex: none;
+    text-align: left;
+    margin-left: 0 !important; // el-form 的 label-width 会给 content 留左边距
   }
 
   /* 上传组件内部不该继承「输入框去边框 + 右对齐」那几条 */
-  .el-input .el-input__inner,
-  .el-textarea .el-textarea__inner {
-    text-align: left;
+  .el-form-item > .el-form-item__content {
+    .el-input .el-input__inner,
+    .el-textarea .el-textarea__inner {
+      text-align: left;
+    }
   }
 }
 
 /* ============ 块 E：必填星号与校验错误位 ============ */
 /* 字段行改 flex 后 Element 的星号与错误提示会错位，必须显式定位
    （bill_setting 的 .el-form-item__label:before{position:absolute} 是同一处理） */
-.xform-h5 .h5-detail-wrap .h5-item .h5-form-box .el-form-item {
+.xform-h5 .field-wrapper.h5-field .el-form-item {
   &.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
     position: absolute;
     left: -8px;
@@ -284,7 +394,7 @@ $xformH5PageBg: #f1f5fb;
 /* 一行末尾落单的半宽字段保持半宽、右侧留白（bill_setting 的 table 版式天然如此）。
    若产品要求撑满整行，把下面这条注释放开即可。 */
 // 用 // 而非 /* */：sass 的块注释会原样输出到生产 CSS，被注释掉的规则不该进产物
-// .xform-h5 .h5-detail-wrap .h5-item .h5-form-box .field-wrapper.h5-half:nth-child(odd):last-child {
+// .xform-h5 .field-wrapper.h5-field.h5-half:nth-child(odd):last-child {
 //   width: 100%;
 // }
 
@@ -355,9 +465,18 @@ $xformH5PageBg: #f1f5fb;
    .designer-view{height:100%} → .xform-h5{height:100%} 一路塌陷成 auto；
    此时 min-height:100vh 会被内容撑高 → 整页滚动 → 标题栏和底部动作栏跟着滚走。
    改成 height:100vh + overflow:hidden：容器恰好一屏、外层无可滚余量，
-   内容只在 .h5-detail-body 里滚，标题栏与底栏才真正固定。 */
+   内容只在 .h5-detail-body 里滚，标题栏与底栏才真正固定。
+
+   ★ 但 100vh 在手机浏览器上不是「可见高度」：Chrome/Safari 的 vh 取的是**地址栏
+   收起后的大视口**，地址栏还在时容器比可视区高出一截（Chrome 约 56px），
+   底栏正好被顶到屏幕外 —— 表现就是「一进来看不到审批按钮，往下拖一下、
+   地址栏收起了才出现」。改用动态视口单位 dvh：它随地址栏收放实时变化，
+   永远等于当前可见高度。
+   两行都要留：不认识 dvh 的旧内核（Chrome<108 / iOS<15.4 / 老 Android WebView）
+   会丢弃后一行、退回 100vh 的老行为，不会整条失效。 */
 .xform-h5 .h5-detail-wrap {
   height: 100vh;
+  height: 100dvh;
   overflow: hidden;
 }
 /* 弹框/抽屉态：高度由弹框自己的 .cont 给，跟随容器而不是视口 */
@@ -453,7 +572,10 @@ $xformH5PageBg: #f1f5fb;
    那边同样用 .h5view-dialog 的弹框（弹框未 append-to-body，DOM 就在本作用域里）。 */
 .xform-h5 .el-dialog__wrapper .el-dialog.h5view-dialog {
   margin: 0 !important;
+  /* 同上：手机浏览器地址栏占位时 100vh 比可视区高，弹框底部的「关闭」会被顶出屏幕。
+     dvh 打头、vh 兜底，见块 G 的说明。 */
   height: 100vh;
+  height: 100dvh;
   display: flex;
   flex-direction: column;
   border-radius: 0;
@@ -517,12 +639,165 @@ $xformH5PageBg: #f1f5fb;
     }
   }
 
-  /* 给角标让位：明细行没有 .t1 标题行，字段区直接顶到右边会被角标压住 */
-  .t2 {
+  /* 给角标让位。整块让位（.t2{padding-right:28px}）在值左对齐时看不出来，
+     但块 I2 把值改成右对齐后，所有行的值都会离右边框 28+14=42px、明显不贴边。
+     改成只让被角标压住的第一行：角标是 right:12px + 20px 宽，14(dl 自带) + 26 = 40px。
+
+     ★ 用角标自身作条件（它在 DOM 里就排在 .t2 前面，list-h5-item.vue:84），
+     而不是按位置写死：弹框里那份 list 不渲染角标，跟着让位会白缺一块（实测首行
+     比其余行短 26px）。查询选择场景（isQueryTable）同样不渲染角标（那时点行是勾选、
+     不进详情），自然也不让位。
+     ★ 整行/半行混排后，被角标压住的是「首行最右那格」，分两种：
+       ① 首格就是整行 → 它自己占满首行；
+       ② 首格半行且第二格也半行 → 右上角那格是第二格。
+     首格半行、第二格整行时，整行那格放不进首行会换到第二行，首行只剩左半格，
+     够不着角标，不必让位（所以没有第三条）。
+     基础内边距 7px + 角标占到卡片右缘 32px，让到 28px 刚好留出约 4px 空隙。
+     ★ 用相邻兄弟 `+` 而不是 `~`：有主标题(.t1)时角标压的是标题行、由块 I3 让位，
+     字段区不该再缩，`+` 在中间隔着 .t1 时自然不匹配。 */
+  .h5-item-arrow + .t2 > dl:first-child:not(.m2),
+  .h5-item-arrow + .t2 > dl.m2:first-child + dl.m2 {
     padding-right: 28px;
   }
 }
 
+/* ============ 块 I2：明细行字段「标签左 / 值右」 ============ */
+/* 与块 C 的详情行口径对齐 —— 同一屏里不该有两套。
+   注意参考物 bill_setting 的明细卡片本身是左对齐的：它全局那条
+   `.form-list-table td .el-form-item__content{text-align:right}`(style.scss:14406)
+   被 render.vue 自己的 scoped `.pro-item .info ::v-deep …{text-align:left}`
+   (0,5,0) > (0,4,2) 压掉了。这里对齐的是它的主表 .form-table 口径。
+
+   对手全在 style.scss:14089-14115，裸类名、无 !important：
+     `.h5-list-box .item .t2 > dl` (0,3,1)   width:100%; display:inline-block
+     `.h5-list-box .item .t2 > dl dt` (0,3,2)  width:74px
+     `.h5-list-box .item .t2 > dl dd` (0,3,2)  flex:1（没设 text-align，故默认左）
+     `.h5-list-box .item .t2 > dl .field-wrapper` (0,4,1) width:calc(100vw - 159px)
+   本方 (0,4,1) / (0,4,3) / (0,5,2) 起步。 */
+
+/* 一行一个 / 一行两个混排。默认整行；列在设计器里配了「H5列宽=半行」时，
+   list-h5-item 会给它的 <dl> 打上 m2（判等只认 'half'）。
+   m2 这个类名沿用 style.scss:14095 早就写好的 `.t2 > dl.m2{width:50%}` ——
+   那条规则一直没人往 dl 上打类，是条死规则，这里把它接上。
+   .t2 要先变成 flex 容器，否则 dl 自带的 width:100% 会让 50% 也各占一行。
+   全局 box-sizing:border-box，dl 的左右内边距算在 50% 里，不会溢出。 */
+.xform-h5 .h5-list-box .item .t2 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  /* 列间距收一半：dl 自带的左右各 14px 会在两列中间叠成 28px 的空档，
+     而卡片外缘只有 14px。改成 .t2 与 dl 各 7px —— 外缘仍是 14px，
+     列间也是 14px，省出来的 14px 全给值。 */
+  padding-left: 7px;
+  padding-right: 7px;
+}
+
+.xform-h5 .h5-list-box .item .t2 > dl {
+  padding-left: 7px;
+  padding-right: 7px;
+  > div {
+    align-items: flex-start; // 值折行时标签跟着顶对齐，别居中
+  }
+
+  > div > dt {
+    flex: 0 0 auto;
+    width: auto; // 撤掉 74px：右对齐后定宽标签不再承担对齐职责，只剩死白
+    max-width: 45%;
+    padding-right: 8px;
+    color: #999;
+  }
+
+  > div > dd {
+    flex: 1;
+    min-width: 0; // 不写这行，长值会撑破行而不是折行
+    text-align: right;
+    word-break: break-word;
+    color: #323232; // 值加深、标签留灰，同块 C 的 #808080 / 默认色关系
+  }
+
+  /* 半行（一行两个）。整行的列不写 width，沿用 style.scss 的 100%。
+     本方 (0,5,1) > 对手 style.scss:14090 的 (0,3,1)。 */
+  &.m2 {
+    width: 50%;
+  }
+
+  /* 半行列里塞不下的值，整段落到标签下一行（仍在本列内右对齐），
+     而不是被挤成竖排的一两个字 —— 375px 屏上一列净宽只有约 131px，
+     标签先占掉 40~50px。
+     ★ 关键在 `flex-basis:auto`（即 `flex:1 1 auto`）：换行判定用的是弹性项的
+     「假定主尺寸」，basis:auto 时它等于内容宽，于是短值放得下就并排、长值放不下
+     才整段换行 —— 这是按内容自适应，不是拍一个阈值。
+     通用那条写的是 `flex:1`（= `1 1 0%`），假定尺寸恒为 0，永远不会触发换行；
+     早先改用 min-width 当阈值，131-44=87 与阈值 88 只差 1px，结果连「电视机」
+     这种短值都被踢到下一行。min-width:0 保留，让独占一行的超长值能内部折行而不溢出。
+     本方 (0,5,3) > 上面通用那条 (0,4,3)。 */
+  &.m2 > div {
+    flex-wrap: wrap;
+  }
+
+  &.m2 > div > dd {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+/* dd 里是真控件的那份（「明细详情」弹框，list-h5-item.vue:478）。
+   列表行本身只出纯文本，这一段只对弹框生效。 */
+.xform-h5 .h5-list-box .item .t2 > dl > div > dd {
+  /* 压 style.scss:14112 的 width:calc(100vw - 159px)，本方 (0,5,2) > (0,4,1) */
+  .field-wrapper.h5-field {
+    display: block;
+    width: auto;
+  }
+
+  /* 块 C 会把它做成带下边框的 48px 行，而这里的行分隔由 dl 自己给。
+     本方 (0,7,3) > 块 C 的 (0,4,0)。 */
+  .field-wrapper.h5-field .el-form-item {
+    display: block;
+    min-height: 0;
+    margin-bottom: 0;
+    padding: 0;
+    border-bottom: none;
+  }
+
+  /* dt 已经出过字段名，控件自带的 label 是第二个 —— 藏掉。
+     （list-h5 传的 tableParam 没有 $table，form-item-wrapper 的
+     shouldHideFieldLabel/isDataTableColumnItem 判不出来，标签照出，
+     于是弹框里一直是「dt + label」两个字段名。）
+     content 的左边距是 element 按 label-width 写的内联样式，只能 !important 压。 */
+  .field-wrapper.h5-field .el-form-item > .el-form-item__label {
+    display: none;
+  }
+
+  .field-wrapper.h5-field .el-form-item > .el-form-item__content {
+    margin-left: 0 !important;
+    text-align: right;
+  }
+}
+
+/* 「明细详情」弹框里那份 list 保持一行一个：那里的 dd 放的是真控件（输入框、
+   选择器、附件），塞进半宽格子就没法用了；它也是详情视角，不需要压缩行数。
+   本方 (0,6,1) > 上面两列那条 (0,4,1)。 */
+.xform-h5 .h5view-dialog .h5-list-box .item .t2 > dl {
+  width: 100%;
+}
+
+/* 弹框那份 list 另有一条更狠的写死宽度：
+   `body .grid-height .dialog-style.h5view-dialog .el-dialog__body > .cont >
+    .h5-list-box .t2 dl .field-wrapper` (0,8,2)（style.scss:3861），
+   上面那条 (0,5,2) 压不过，必须单独补到 (0,9,1)。 */
+.xform-h5
+  .dialog-style.h5view-dialog
+  .el-dialog__body
+  > .cont
+  > .h5-list-box
+  .item
+  .t2
+  > dl
+  .field-wrapper {
+  width: auto;
+}
+
 /* ============ 块 I：明细行卡片皮肤（list-h5 的 itemStyle=card） ============ */
 /* 现状 .h5-list-box .item（style.scss:14029）已经是白底+radius8+1px边框+左侧竖条的卡片，
    与 bill_setting 的 .pro-item 只差 4 点：圆角、竖条→圆点、右上角箭头角标、小字段字号。
@@ -569,6 +844,54 @@ $xformH5PageBg: #f1f5fb;
   }
 }
 
+/* ============ 块 I3：明细卡片的主标题（对齐 bill_setting 的 .pro-item .t） ============ */
+/* .t1 原本只有查询选择列表在用（一行排若干「标题：值」），style.scss:14031 起给它的
+   样式是照那个场景配的：display:flex、line-height:38px、左侧一根 4px 竖条。
+   明细卡片的主标题要的是 bill_setting 那副样子 —— 14px 深色单行、前面一个 5px 圆点、
+   右边给「查看」角标让位。h5-item-title 由 list-h5-item 只打在明细卡片那条分支上，
+   查询选择列表的 .t1 一条都不受影响。
+   对手 `.h5-list-box .item .t1` (0,3,0)、`.t1:before` (0,3,1)；本方 (0,5,0)/(0,5,1)。
+   与块 I 卡片皮肤那条圆点规则同分，写在其后，且两者取值一致。 */
+.xform-h5 .h5-list-box .item .t1.h5-item-title {
+  display: block; // 对手的 flex 是给「标题：值」多对并排用的
+  line-height: 22px;
+  /* 上边距 9px 是算出来的，不是拍的：角标 position:absolute、top:10px、高 20px，
+     中心落在距卡片内容顶 20px 处（+1px 边框 = 21px）。标题文字中心 =
+     padding-top + line-height/2 = 9 + 11 = 20（+1px 边框 = 21px），正好对齐。
+     改动 line-height 或角标的 top/height 时，这个 9px 要跟着重算。
+     （角标在 DOM 里排在标题前面，没法用选择器反查「后面有没有标题」来单独挪它 ——
+     :has() 在移动端 webview 上不能指望，所以由标题这边去对齐角标。）
+     右侧 40px 给角标让位：角标占到卡片右缘 32px。 */
+  padding: 9px 40px 6px 12px;
+  color: #323232;
+
+  > b {
+    font-size: 14px;
+    font-weight: 600;
+    word-break: break-word; // 主字段常是长编码，别撑破卡片
+  }
+
+  /* 左侧 4px 竖条 → 5px 圆点。对手把它 position:absolute 钉在 left:0/top:18px，
+     三条定位都得显式还原成流内元素。 */
+  &::before {
+    position: relative !important;
+    display: inline-block;
+    left: auto !important;
+    top: auto !important;
+    width: 5px !important;
+    height: 5px !important;
+    margin-right: 4px;
+    border-radius: 50% !important;
+    vertical-align: middle;
+  }
+
+  /* style.scss:14079 的 `.t1 + .t2{margin-top:0}` 会让字段区紧贴标题，补一点呼吸位。
+     对手 (0,4,1)，本方 (0,5,1)。 */
+  + .t2 {
+    margin-top: 4px;
+  }
+}
+
 /* ============ 块 J：附件（VabUpload 列表的 H5 行式版式） ============ */
 /* 这一块的第一版是照抄 bill_setting/h5.scss 的 74px 方格口径，实测把附件压没了、
    已撤回；那套 DOM 里 .el-upload-list__item-thumbnail 是 item 的直接子元素，而
@@ -604,7 +927,13 @@ $xformH5PageBg: #f1f5fb;
      … .show-video（0,4,1），顺带一并压掉。
      注：#uploadImage 是 VabUpload 每个实例都写死的 id（DOM 里会重复），这里只把它
      当选择器用来抬特异度，不依赖它唯一。 */
-.xform-h5 .h5-detail-wrap .h5-item .h5-form-box #uploadImage {
+/* 三条并列锚点，段数一致（(1,4,0) 起步），覆盖附件字段的三种摆法：
+   h5-card-pane（.h5-item）/ h5-card（.grid-cell）/ 直挂 detail-h5。
+   这里不能换成块 C 的 .field-wrapper.h5-field 锚点：那样只有 (1,3,0)，
+   压不过上面点名的 #uploadImage.widgetSize-N 那一段。 */
+.xform-h5 .h5-detail-wrap .h5-item .h5-form-box #uploadImage,
+.xform-h5 .h5-detail-wrap .grid-cell .h5-form-box #uploadImage,
+.xform-h5 .h5-detail-body .field-wrapper.h5-field #uploadImage {
   /* 行容器。模板里写死了内联 display:inline-block;float:left，只能用 !important 压 */
   .upload-list {
     display: block !important;