imeik-bizui 2.6.5 → 2.6.7

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 撑开，合计底对齐
   - 分区数据前端分页（pageSize）；无底部关闭按钮，右上角关闭即可
 -->
 <template>
@@ -16,12 +16,35 @@
     :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__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 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>
+
       <template v-else>
         <div v-if="summaryColumns.length" class="fpd-summary">
-          <div v-if="isNarrow" class="fpd-summary__hint">汇总表可左右滑动</div>
           <el-table
             :data="summaryRows"
             border
@@ -68,7 +91,6 @@
             <div class="fpd-section__head">
               <span class="fpd-section__title">{{ section.title }}</span>
               <span v-if="section.subtitle" class="fpd-section__subtitle">{{ section.subtitle }}</span>
-              <span v-if="isNarrow" class="fpd-section__hint">左右滑动查看完整信息</span>
             </div>
 
             <div class="fpd-section__table-wrap">
@@ -76,7 +98,7 @@
                 :data="pagedRows(section)"
                 border
                 size="small"
-                class="fpd-table"
+                class="fpd-table fpd-table--section"
                 :height="resolvedTableHeight"
                 :header-cell-style="headerCellStyle"
               >
@@ -129,9 +151,19 @@
           </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 v-if="formulaItems.length && hasDetailContent" 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>
       </template>
@@ -203,10 +235,13 @@ export default {
       type: Array,
       default: null
     },
-    /** 三列表格统一高度，保证等高 */
+    /**
+     * 三区表格统一高度（按 pageSize 撑满），数量少也留白对齐
+     * 可传 tableHeight 覆盖
+     */
     tableHeight: {
       type: [Number, String],
-      default: 260
+      default: null
     },
     /** 分区前端分页大小 */
     pageSize: {
@@ -240,15 +275,42 @@ export default {
     resolvedTop() {
       return this.isNarrow ? '5vh' : this.top
     },
+    /** 三区表格等高：优先用 prop，否则按 pageSize × 行高推算 */
     resolvedTableHeight() {
-      const base = Number(this.tableHeight)
-      const fallback = Number.isFinite(base) && base > 0 ? base : 260
-      return this.isNarrow ? Math.min(fallback, 200) : fallback
+      const override = Number(this.tableHeight)
+      if (Number.isFinite(override) && override > 0) {
+        return this.isNarrow ? Math.min(override, 200) : override
+      }
+      const size = this.pageSize || 5
+      const rowH = this.isNarrow ? 38 : 40
+      const headH = this.isNarrow ? 36 : 38
+      return headH + size * rowH
     },
     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
@@ -405,25 +467,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 +538,111 @@ 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 {
+  margin-top: auto;
+  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 +657,7 @@ export default {
 }
 
 .fpd-summary {
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   background: #fff;
@@ -498,15 +665,11 @@ export default {
   border-radius: 8px;
 }
 
-.fpd-summary__hint {
-  display: none;
-}
-
 .fpd-sections {
   display: grid;
   grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
-  gap: 12px;
-  margin-bottom: 12px;
+  gap: 10px;
+  margin-bottom: 10px;
   align-items: stretch;
 }
 
@@ -514,7 +677,7 @@ export default {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: 100%;
+  height: 100%;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   overflow: hidden;
@@ -524,10 +687,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,36 +698,35 @@ 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;
 }
 
-.fpd-section__hint {
-  display: none;
-}
-
 .fpd-section__table-wrap {
-  flex: 0 0 auto;
+  flex: 1 1 auto;
   min-width: 0;
+  min-height: 0;
   overflow-x: auto;
+  overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
 }
 
 .fpd-section__footer {
   flex-shrink: 0;
+  margin-top: auto;
   display: flex;
   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;
@@ -644,6 +806,11 @@ export default {
     border-bottom: none;
   }
 
+  /* 分区表固定等高后，末行下方有留白，需保留底部分隔线 */
+  &.fpd-table--section .el-table__body tr:last-child td.el-table__cell {
+    border-bottom: 1px solid #eef0f3;
+  }
+
   .cell {
     padding: 12px 16px;
     line-height: 22px;
@@ -673,6 +840,25 @@ export default {
   }
 }
 
+/* 分区表行高与汇总表接近，避免过扁难读 */
+::v-deep .fpd-table--section {
+  .cell {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    line-height: 20px;
+  }
+
+  th .cell {
+    padding-top: 9px;
+    padding-bottom: 9px;
+  }
+
+  /* 固定等高后仍隐藏纵向滚动条（分页控制行数） */
+  .el-table__body-wrapper {
+    overflow-y: hidden !important;
+  }
+}
+
 .fpd-td--bold {
   font-weight: 700;
   color: #1f2329;
@@ -720,26 +906,96 @@ 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-top: 0;
+  margin-bottom: 0;
+  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__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__line + .fpd-formulas__line {
-  margin-top: 4px;
+.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;
@@ -747,28 +1003,14 @@ export default {
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
   }
 
-  .fpd-summary__hint,
-  .fpd-section__hint {
-    display: block;
-    padding: 0;
-    font-size: 11px;
-    line-height: 16px;
-    color: #8f959e;
-    font-weight: 400;
-  }
-
-  .fpd-summary__hint {
-    padding: 8px 12px 0;
-  }
-
   .fpd-sections {
     gap: 12px;
     margin-bottom: 12px;
-    align-items: start;
+    align-items: stretch;
   }
 
   .fpd-section {
-    min-height: 0;
+    height: auto;
     border-radius: 10px;
     border-color: #e8ebf0;
     box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
@@ -842,14 +1084,37 @@ 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-top: 0;
+    margin-bottom: 0;
+  }
+
+  .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);