imeik-bizui 2.6.5 → 2.6.6

package/dist/bizui/src/FieldFloorPriceBoard/core/FloorPriceDashboard.vue

@@ -248,12 +248,16 @@ export default {
       }
     },
     async onViewDetail() {
-      this.detailVisible = true
       this.detailError = ''
-      this.innerDetail = null
+      // 先进入 loading，再打开弹窗，避免首帧只有公式行的窄框
+      const willFetch =
+        this.useDemo ||
+        typeof this.fetchDetail === 'function' ||
+        typeof this.loadDetail === 'function'
+      if (willFetch) this.detailLoading = true
+      this.detailVisible = true
 
       if (this.useDemo) {
-        this.detailLoading = true
         try {
           this.innerDetail = createDemoDetail({
             ...this.board,
@@ -266,7 +270,6 @@ export default {
       }
 
       if (typeof this.fetchDetail === 'function') {
-        this.detailLoading = true
         try {
           const base = {
             customerName: this.customerName,
@@ -277,6 +280,7 @@ export default {
           const detailPayload = this.detailPayload
           if (!detailPayload) {
             this.innerDetail = base
+            this.detailLoading = false
             return
           }
           const res = await this.fetchDetail(detailPayload)
@@ -287,6 +291,7 @@ export default {
               ...(res.data || {})
             }
           } else {
+            this.innerDetail = null
             throw new Error((res && res.message) || '底价明细获取失败')
           }
         } catch (e) {
@@ -298,12 +303,12 @@ export default {
       }
 
       if (typeof this.loadDetail === 'function') {
-        this.detailLoading = true
         try {
           const data = await this.loadDetail({ overview: this.board, raw: this.rawOverview })
           this.innerDetail = data || null
           if (!data) this.detailError = '暂无底价明细'
         } catch (e) {
+          this.innerDetail = null
           this.detailError = (e && e.message) || '底价明细获取失败'
         } finally {
           this.detailLoading = false

package/dist/bizui/src/FieldFloorPriceBoard/core/FloorPriceDetailDialog.vue

@@ -2,7 +2,7 @@
   通用「底价明细」弹窗（纯展示，无接口依赖）
   - 顶部汇总：由 Dashboard 传入概览产品行
   - 下方三区（销售订单 / 非销出库 / 销售费用）等分三列并排
-  - 三列明细等高：固定表格高度 + 预留分页条高度
+  - 三列卡片按内容收高（不强制等高撑白），表格按当前页行数自适应、无内部滚动条
   - 分区数据前端分页（pageSize）；无底部关闭按钮，右上角关闭即可
 -->
 <template>
@@ -16,10 +16,49 @@
     :custom-class="dialogCustomClass"
     @close="onClose"
   >
-    <div v-loading="loading" class="fpd-body">
+    <div
+      v-loading="loading && !showLoadingShell"
+      :class="['fpd-body', { 'fpd-body--loading': showLoadingShell }]"
+    >
       <div v-if="error" class="fpd-msg fpd-msg--error">{{ error }}</div>
 
+      <!-- 首次加载无内容时用骨架撑住高度，避免先闪出一条窄框 -->
+      <div v-else-if="showLoadingShell" class="fpd-skeleton" aria-hidden="true">
+        <div class="fpd-skeleton__formulas">
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--label" />
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--md" />
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--sm" />
+        </div>
+        <div class="fpd-skeleton__summary">
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--lg" />
+          <div class="fpd-skeleton__bar" />
+          <div class="fpd-skeleton__bar fpd-skeleton__bar--sm" />
+        </div>
+        <div class="fpd-skeleton__sections">
+          <div v-for="n in 3" :key="n" class="fpd-skeleton__section">
+            <div class="fpd-skeleton__bar fpd-skeleton__bar--title" />
+            <div class="fpd-skeleton__block" :style="{ height: resolvedTableHeight + 'px' }" />
+            <div class="fpd-skeleton__bar fpd-skeleton__bar--footer" />
+          </div>
+        </div>
+      </div>
+
       <template v-else>
+        <div v-if="formulaItems.length" class="fpd-formulas" role="note">
+          <span class="fpd-formulas__label">计算说明</span>
+          <div class="fpd-formulas__list">
+            <span
+              v-for="(item, idx) in formulaItems"
+              :key="idx"
+              class="fpd-formulas__item"
+            >
+              <em class="fpd-formulas__key">{{ item.key }}</em>
+              <span class="fpd-formulas__eq">=</span>
+              <span class="fpd-formulas__expr">{{ item.expr }}</span>
+            </span>
+          </div>
+        </div>
+
         <div v-if="summaryColumns.length" class="fpd-summary">
           <div v-if="isNarrow" class="fpd-summary__hint">汇总表可左右滑动</div>
           <el-table
@@ -76,8 +115,7 @@
                 :data="pagedRows(section)"
                 border
                 size="small"
-                class="fpd-table"
-                :height="resolvedTableHeight"
+                class="fpd-table fpd-table--section"
                 :header-cell-style="headerCellStyle"
               >
                 <el-table-column
@@ -128,12 +166,6 @@
             </div>
           </div>
         </div>
-
-        <div v-if="formulaList.length" class="fpd-formulas">
-          <div v-for="(line, idx) in formulaList" :key="idx" class="fpd-formulas__line">
-            {{ line }}
-          </div>
-        </div>
       </template>
     </div>
   </el-dialog>
@@ -203,15 +235,17 @@ export default {
       type: Array,
       default: null
     },
-    /** 三列表格统一高度，保证等高 */
+    /**
+     * 骨架屏占位高度（表格本身按当前页行数自适应，不再用固定 height，避免内部滚动条）
+     */
     tableHeight: {
       type: [Number, String],
-      default: 260
+      default: 180
     },
-    /** 分区前端分页大小 */
+    /** 分区前端分页大小（略少以控制弹窗总高） */
     pageSize: {
       type: Number,
-      default: 5
+      default: 4
     }
   },
   data() {
@@ -240,18 +274,40 @@ export default {
     resolvedTop() {
       return this.isNarrow ? '5vh' : this.top
     },
+    /** 仅骨架屏使用；真实表格按页内行数撑开，不设固定 height */
     resolvedTableHeight() {
       const base = Number(this.tableHeight)
-      const fallback = Number.isFinite(base) && base > 0 ? base : 260
-      return this.isNarrow ? Math.min(fallback, 200) : fallback
+      const fallback = Number.isFinite(base) && base > 0 ? base : 220
+      return this.isNarrow ? Math.min(fallback, 180) : fallback
     },
     formulaList() {
       if (Array.isArray(this.formulas)) return this.formulas
       return DEFAULT_DETAIL_FORMULAS
     },
+    /** 拆成「指标名 = 表达式」，便于加粗高亮 */
+    formulaItems() {
+      return (this.formulaList || []).map((line) => {
+        const text = String(line || '').trim()
+        const idx = text.indexOf('=')
+        if (idx < 0) return { key: text, expr: '' }
+        return {
+          key: text.slice(0, idx).trim(),
+          expr: text.slice(idx + 1).trim()
+        }
+      }).filter((item) => item.key)
+    },
+    /** 有汇总或分区时视为已有明细内容（可在旧数据上盖 loading） */
+    hasDetailContent() {
+      return (this.summaryColumns && this.summaryColumns.length > 0) ||
+        (this.sections && this.sections.length > 0)
+    },
+    /** 首次打开尚无数据：用骨架撑高，避免窄框闪一下 */
+    showLoadingShell() {
+      return this.loading && !this.error && !this.hasDetailContent
+    },
     /** 任一分区需要分页时，其余无分页列才占位对齐；全都没有则不占空白 */
     anySectionNeedsPager() {
-      const size = this.pageSize || 5
+      const size = this.pageSize || 4
       return (this.sections || []).some((section) => this.sectionRowCount(section) > size)
     },
     /** 窄屏三区已改为单列，无需为空分页占位 */
@@ -329,7 +385,7 @@ export default {
     pagedRows(section) {
       const rows = section.rows || []
       const page = this.sectionPage(section)
-      const size = this.pageSize || 5
+      const size = this.pageSize || 4
       const start = (page - 1) * size
       return rows.slice(start, start + size)
     },
@@ -405,25 +461,25 @@ export default {
   box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24);
 
   .el-dialog__header {
-    padding: 14px 22px;
+    padding: 12px 20px;
     border-bottom: 1px solid #e5e7eb;
   }
 
   .el-dialog__title {
-    font-size: 18px;
+    font-size: 17px;
     font-weight: 600;
     color: #1f2329;
-    line-height: 26px;
+    line-height: 24px;
   }
 
   .el-dialog__headerbtn {
-    top: 18px;
+    top: 16px;
     right: 18px;
   }
 
   .el-dialog__body {
-    padding: 18px 20px 16px;
-    max-height: calc(92vh - 64px);
+    padding: 12px 16px 12px;
+    max-height: calc(92vh - 56px);
     overflow: auto;
     background: #f7f8fa;
   }
@@ -476,6 +532,110 @@ export default {
   min-width: 0;
 }
 
+.fpd-body--loading {
+  min-height: 400px;
+}
+
+.fpd-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: none;
+}
+
+.fpd-skeleton__summary {
+  padding: 14px 16px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fpd-skeleton__sections {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
+  gap: 12px;
+}
+
+.fpd-skeleton__section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px 14px 14px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  min-width: 0;
+}
+
+.fpd-skeleton__block {
+  width: 100%;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #eef0f3 0%, #f6f7f9 50%, #eef0f3 100%);
+  background-size: 200% 100%;
+  animation: fpd-skeleton-shine 1.2s ease-in-out infinite;
+}
+
+.fpd-skeleton__formulas {
+  padding: 8px 12px;
+  background: #eef3ff;
+  border: 1px solid #d6e0f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.fpd-skeleton__bar--label {
+  width: 56px;
+  height: 18px;
+  flex: none;
+}
+
+.fpd-skeleton__bar {
+  height: 12px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #eef0f3 0%, #f6f7f9 50%, #eef0f3 100%);
+  background-size: 200% 100%;
+  animation: fpd-skeleton-shine 1.2s ease-in-out infinite;
+  width: 72%;
+}
+
+.fpd-skeleton__bar--lg {
+  width: 88%;
+  height: 14px;
+}
+
+.fpd-skeleton__bar--md {
+  width: 64%;
+}
+
+.fpd-skeleton__bar--sm {
+  width: 48%;
+}
+
+.fpd-skeleton__bar--title {
+  width: 42%;
+  height: 14px;
+}
+
+.fpd-skeleton__bar--footer {
+  width: 56%;
+  margin-top: 2px;
+}
+
+@keyframes fpd-skeleton-shine {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
 .fpd-msg {
   padding: 12px 16px;
   font-size: 13px;
@@ -490,7 +650,7 @@ export default {
 }
 
 .fpd-summary {
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   background: #fff;
@@ -505,16 +665,16 @@ export default {
 .fpd-sections {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
-  gap: 12px;
-  margin-bottom: 12px;
-  align-items: stretch;
+  gap: 10px;
+  margin-bottom: 0;
+  align-items: start;
 }
 
 .fpd-section {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: 100%;
+  min-height: 0;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
@@ -524,10 +684,10 @@ export default {
 
 .fpd-section__head {
   flex-shrink: 0;
-  padding: 10px 14px;
+  padding: 8px 12px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 1px;
   box-sizing: border-box;
   background: #fafbfc;
   border-bottom: 1px solid #eef0f3;
@@ -535,14 +695,14 @@ export default {
 }
 
 .fpd-section__title {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 20px;
 }
 
 .fpd-section__subtitle {
   font-size: 12px;
-  line-height: 18px;
+  line-height: 16px;
   color: #8f959e;
 }
 
@@ -554,6 +714,7 @@ export default {
   flex: 0 0 auto;
   min-width: 0;
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -563,8 +724,8 @@ export default {
   justify-content: space-between;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px;
-  font-size: 13px;
+  padding: 7px 12px;
+  font-size: 12px;
   font-weight: 600;
   flex-wrap: wrap;
   color: #646a73;
@@ -673,6 +834,25 @@ export default {
   }
 }
 
+/* 分区表略收紧行高，一页内更紧凑且无内部滚动 */
+::v-deep .fpd-table--section {
+  .cell {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    line-height: 18px;
+  }
+
+  th .cell {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+
+  /* 无固定 height 时仍兜底隐藏纵向滚动条 */
+  .el-table__body-wrapper {
+    overflow-y: hidden !important;
+  }
+}
+
 .fpd-td--bold {
   font-weight: 700;
   color: #1f2329;
@@ -720,26 +900,95 @@ export default {
 }
 
 .fpd-formulas {
-  padding: 12px 14px;
-  border-radius: 8px;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px 10px;
+  margin-bottom: 10px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #eef4ff 0%, #f5f8ff 100%);
+  border: 1px solid #c9daf8;
+  box-shadow: inset 3px 0 0 #3370ff;
+}
+
+.fpd-formulas__label {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 7px;
+  border-radius: 3px;
+  background: #3370ff;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
   line-height: 20px;
-  color: #646a73;
+  letter-spacing: 0.02em;
 }
 
-.fpd-formulas__line + .fpd-formulas__line {
-  margin-top: 4px;
+.fpd-formulas__list {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 0;
+}
+
+.fpd-formulas__item {
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  max-width: 100%;
+  font-size: 12px;
+  line-height: 18px;
+  color: #4e5969;
+
+  &:not(:last-child)::after {
+    content: '';
+    display: inline-block;
+    width: 1px;
+    height: 11px;
+    margin: 0 10px;
+    background: #b7c9ef;
+    vertical-align: middle;
+    position: relative;
+    top: 1px;
+  }
+}
+
+.fpd-formulas__key {
+  font-style: normal;
+  font-weight: 700;
+  color: #1f2329;
+}
+
+.fpd-formulas__eq {
+  margin: 0 4px;
+  color: #86909c;
+  font-weight: 500;
+}
+
+.fpd-formulas__expr {
+  color: #4e5969;
 }
 
 @media (max-width: 1100px) {
-  .fpd-sections {
+  .fpd-sections,
+  .fpd-skeleton__sections {
     grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 768px) {
+  .fpd-body--loading {
+    min-height: 380px;
+  }
+
+  .fpd-skeleton__sections {
+    grid-template-columns: 1fr;
+  }
+
   .fpd-summary {
     margin-bottom: 12px;
     border-radius: 10px;
@@ -763,7 +1012,7 @@ export default {
 
   .fpd-sections {
     gap: 12px;
-    margin-bottom: 12px;
+    margin-bottom: 0;
     align-items: start;
   }
 
@@ -842,14 +1091,36 @@ export default {
     justify-content: flex-end;
   }
 
+  .fpd-skeleton__formulas {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 6px;
+  }
+
   .fpd-formulas {
-    padding: 10px 12px;
-    border-radius: 10px;
-    border-color: #e8ebf0;
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px 10px 8px 12px;
+    margin-bottom: 12px;
+  }
+
+  .fpd-formulas__label {
+    align-self: flex-start;
+  }
+
+  .fpd-formulas__list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .fpd-formulas__item {
     font-size: 11px;
-    line-height: 18px;
-    color: #6b7280;
-    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
+    line-height: 17px;
+
+    &:not(:last-child)::after {
+      display: none;
+    }
   }
 
   ::v-deep .fpd-table {

package/dist/bizui/src/FieldFloorPriceBoard/core/FloorPriceSectionPager.vue

@@ -77,9 +77,9 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 6px 10px;
-  min-height: 32px;
-  padding: 4px 12px;
+  gap: 4px 8px;
+  min-height: 28px;
+  padding: 2px 12px;
   box-sizing: border-box;
   font-size: 12px;
   color: rgba(0, 0, 0, 0.65);